-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (91 loc) · 3.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<!--
****************************************
author:Shudarshan Rai
Created on :30/March 2019
copyright :© 2019 Shudarshan Rai
info:
_____
Simple html editor app""
******************************************
-->
<!-- Primary Meta Tags -->
<title>Html Editor</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description"
content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="html editor">
<meta property="og:url" content="https://mrsudarshan.github.io/html_editor/">
<meta property="og:title" content="html editor">
<meta property="og:description"
content="Its a web based html editor simple and easy">
<meta property="og:image"
content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
<!-- Twitter -->
<meta property="twitter:card" content="Html editor">
<meta property="twitter:url" content="https://mrsudarshan.github.io/html_editor/">
<meta property="twitter:title" content="Html editor">
<meta property="twitter:description"
content="Its a web based html editor simple and easy">
<meta property="twitter:image"
content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Germania+One|Raleway|Montserrat" rel="stylesheet">
<!--stylesheet-->
<link rel="stylesheet" type="text/css" href="./css/app.css">
<link rel="icon" type="image/png" href="./assets/html_edit.png">
</head>
<body>
<div class="setting">
<!--editor output button -->
<button class="tablink" onclick="openPage('editor', this, '#0f97f9')" id="defaultOpen">Editor</button>
<button class="tablink" onclick="openPage('output', this, '#0f97f9')" id="run">Output</button>
<span id="option">⋮</span>
</div>
<div class="main">
<!--options div-->
<div class="options">
<p>Font size</p>
<div class="slidecontainer">
<input type="range" min="1" max="30" value="5" class="slider" id="slider">
<r></r>
</div>
<p>Themes</p>
<br>
<button id="t1" class="btn"></button><button id="t2" class="btn"></button><button id="t3" class="btn"></button>
<br>
<p>Font style</p>
<br>
<button id="fontd">default</button>
<button id="font1">font</button>
<button id="font2">font</button>
<div class="info">
</div>
</div>
<!--textarea-->
<div id="editor" class="tabcontent">
<textarea id="code">
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p>Hello world</p>
</body>
</html>
</textarea>
</div>
<!--output iframe-->
<div id="output" class="tabcontent">
<iframe id="result"></iframe>
</div>
</div>
<script src="./js/app.js"></script>
</body>
</html>