Hugging Face's logo

Spaces:
Taf2023
/
Simple-HTML-Editor
Running

App Files Community
Taf2023 commited on
Commit
b31a34b
·
verified ·
1 Parent(s): 0eddde9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +165 -19
index.html CHANGED
@@ -1,19 +1,165 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Simple HTML Editor</title>
7
+ <style>
8
+ .toolbar {
9
+ margin-bottom: 10px;
10
+ }
11
+
12
+ .toolbar button {
13
+ padding: 5px;
14
+ margin-right: 5px;
15
+ }
16
+
17
+ .menu {
18
+ display: none;
19
+ position: absolute;
20
+ background-color: #f9f9f9;
21
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
22
+ z-index: 1;
23
+ }
24
+
25
+ .toolbar .menu button {
26
+ display: block;
27
+ width: 100%;
28
+ padding: 10px;
29
+ text-align: left;
30
+ border: none;
31
+ background-color: inherit;
32
+ }
33
+
34
+ .toolbar .menu button:hover {
35
+ background-color: #f1f1f1;
36
+ }
37
+
38
+ .toolbar .dropdown:hover .menu {
39
+ display: block;
40
+ }
41
+
42
+ .editor {
43
+ border: 1px solid #ccc;
44
+ min-height: 200px;
45
+ padding: 10px;
46
+ }
47
+
48
+ .preview {
49
+ border: 1px solid #ccc;
50
+ min-height: 200px;
51
+ padding: 10px;
52
+ margin-top: 10px;
53
+ }
54
+ </style>
55
+ </head>
56
+ <body>
57
+ <div class="toolbar">
58
+ <div class="dropdown">
59
+ <button class="dropbtn" onclick="toggleMenu()">Insert</button>
60
+ <div class="menu" id="myDropdown">
61
+ <button onclick="insertLink()">Link</button>
62
+ <button onclick="insertImage()">Image</button>
63
+ <button onclick="insertVideo()">Video</button>
64
+ <button onclick="insertParagraph()">Paragraph</button>
65
+ <button onclick="insertHeader()">Header</button>
66
+ <button onclick="downloadHTML()">Download HTML</button>
67
+ <button onclick="autoCompose()">Auto Compose</button>
68
+ </div>
69
+ </div>
70
+ <button onclick="previewHTML()">Preview</button>
71
+ </div>
72
+ <div class="editor" contenteditable="true"></div>
73
+ <div class="preview"></div>
74
+
75
+ <script>
76
+ function toggleMenu() {
77
+ var menu = document.getElementById("myDropdown");
78
+ if (menu.style.display === "none") {
79
+ menu.style.display = "block";
80
+ } else {
81
+ menu.style.display = "none";
82
+ }
83
+ }
84
+
85
+ function insertLink() {
86
+ var url = prompt("Enter the URL of the link:");
87
+ var text = prompt("Enter the link text:");
88
+ if (url && text) {
89
+ var link = '<a href="' + url + '">' + text + '</a>';
90
+ document.querySelector('.editor').innerHTML += link;
91
+ }
92
+ }
93
+
94
+ function insertImage() {
95
+ var url = prompt("Enter the URL of the image:");
96
+ if (url) {
97
+ var image = '<img src="' + url + '" alt="Image">';
98
+ document.querySelector('.editor').innerHTML += image;
99
+ }
100
+ }
101
+
102
+ function insertVideo() {
103
+ var url = prompt("Enter the YouTube video URL:");
104
+ if (url) {
105
+ var video = '<iframe width="560" height="315" src="' + url + '" frameborder="0" allowfullscreen></iframe>';
106
+ document.querySelector('.editor').innerHTML += video;
107
+ }
108
+ }
109
+
110
+ function insertParagraph() {
111
+ var text = prompt("Enter the paragraph content:");
112
+ if (text) {
113
+ var paragraph = '<p>' + text + '</p>';
114
+ document.querySelector('.editor').innerHTML += paragraph;
115
+ }
116
+ }
117
+
118
+ function insertHeader() {
119
+ var level = prompt("Enter the header level (1-6):");
120
+ var text = prompt("Enter the header content:");
121
+ if (level && text) {
122
+ var header = '<h' + level + '>' + text + '</h' + level + '>';
123
+ document.querySelector('.editor').innerHTML += header;
124
+ }
125
+ }
126
+
127
+ function previewHTML() {
128
+ var editorContent = document.querySelector('.editor').innerHTML;
129
+ document.querySelector('.preview').innerHTML = editorContent;
130
+ }
131
+
132
+ function downloadHTML() {
133
+ var editorContent = document.querySelector('.editor').innerHTML;
134
+ var filename = "edited.html";
135
+ var element = document.createElement('a');
136
+ element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(editorContent));
137
+ element.setAttribute('download', filename);
138
+ element.style.display = 'none';
139
+ document.body.appendChild(element);
140
+ element.click();
141
+ document.body.removeChild(element);
142
+ }
143
+
144
+ function autoCompose() {
145
+ var text = prompt("Please enter the text:");
146
+ if (text) {
147
+ var alignment = "";
148
+
149
+ if (text.endsWith(".")) {
150
+ alignment = "left";
151
+ } else if (text.endsWith("?")) {
152
+ alignment = "right";
153
+ } else if (text.endsWith("!")) {
154
+ alignment = "center";
155
+ }
156
+
157
+ var element = document.createElement("p");
158
+ element.style.textAlign = alignment;
159
+ element.textContent = text;
160
+ document.querySelector(".editor").appendChild(element);
161
+ }
162
+ }
163
+ </script>
164
+ </body>
165
+ </html>