Hugging Face's logo

Spaces:
Xlnk-Ai
/
codeeditor
Running

App Files Community
Xlnk commited on
Commit
0cb0169
·
verified ·
1 Parent(s): 240065a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +148 -19
index.html CHANGED
@@ -1,19 +1,148 @@
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>Real-Time HTML, CSS, JavaScript Online Code Editor</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ display: flex;
13
+ height: 100vh;
14
+ }
15
+ .header {
16
+ background-color: #f8f9fa;
17
+ padding: 10px;
18
+ text-align: center;
19
+ position: relative;
20
+ }
21
+ .header button {
22
+ position: absolute;
23
+ top: 10px;
24
+ right: 10px;
25
+ background-color: #007bff;
26
+ color: white;
27
+ border: none;
28
+ padding: 5px 10px;
29
+ cursor: pointer;
30
+ border-radius: 5px;
31
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
32
+ }
33
+ .header button:hover {
34
+ background-color: #0056b3;
35
+ }
36
+ .editor-container {
37
+ width: 50%;
38
+ height: calc(100vh - 40px);
39
+ display: flex;
40
+ flex-direction: column;
41
+ }
42
+ textarea {
43
+ flex: 1;
44
+ border: none;
45
+ resize: none;
46
+ outline: none;
47
+ padding: 10px;
48
+ font-size: 14px;
49
+ tab-size: 4;
50
+ }
51
+ #output {
52
+ width: 50%;
53
+ height: calc(100vh - 40px);
54
+ border-left: 1px solid #ccc;
55
+ overflow: auto;
56
+ }
57
+ iframe {
58
+ width: 100%;
59
+ height: 100%;
60
+ border: none;
61
+ }
62
+ #fullScreenPreview {
63
+ position: fixed;
64
+ top: 0;
65
+ left: 0;
66
+ width: 100%;
67
+ height: 100%;
68
+ background-color: white;
69
+ z-index: 1000;
70
+ display: none;
71
+ flex-direction: column;
72
+ }
73
+ #fullScreenPreview iframe {
74
+ width: 100%;
75
+ height: 100%;
76
+ border: none;
77
+ }
78
+ #closeFullScreen {
79
+ position: absolute;
80
+ top: 10px;
81
+ right: 10px;
82
+ background-color: red;
83
+ color: white;
84
+ border: none;
85
+ padding: 5px 10px;
86
+ cursor: pointer;
87
+ border-radius: 5px;
88
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
89
+ }
90
+ #closeFullScreen:hover {
91
+ background-color: darkred;
92
+ }
93
+ </style>
94
+ </head>
95
+ <body>
96
+ <div class="header">
97
+ <button id="fullScreenButton">Full Screen</button>
98
+ </div>
99
+ <div class="editor-container">
100
+ <textarea id="html" placeholder="HTML"></textarea>
101
+ <textarea id="css" placeholder="CSS"></textarea>
102
+ <textarea id="javascript" placeholder="JavaScript"></textarea>
103
+ </div>
104
+ <div id="output">
105
+ <iframe id="preview"></iframe>
106
+ </div>
107
+ <div id="fullScreenPreview">
108
+ <button id="closeFullScreen">Close</button>
109
+ <iframe id="fullScreenIframe"></iframe>
110
+ </div>
111
+ <script>
112
+ const html = document.getElementById('html');
113
+ const css = document.getElementById('css');
114
+ const javascript = document.getElementById('javascript');
115
+ const preview = document.getElementById('preview').contentDocument;
116
+ const fullScreenButton = document.getElementById('fullScreenButton');
117
+ const fullScreenPreview = document.getElementById('fullScreenPreview');
118
+ const fullScreenIframe = document.getElementById('fullScreenIframe');
119
+ const closeFullScreen = document.getElementById('closeFullScreen');
120
+
121
+ function updatePreview() {
122
+ const htmlContent = html.value;
123
+ const cssContent = `<style>${css.value}</style>`;
124
+ const jsContent = `<script>${javascript.value}<\/script>`;
125
+ preview.open();
126
+ preview.write(htmlContent + cssContent + jsContent);
127
+ preview.close();
128
+
129
+ fullScreenIframe.srcdoc = htmlContent + cssContent + jsContent;
130
+ }
131
+
132
+ html.addEventListener('input', updatePreview);
133
+ css.addEventListener('input', updatePreview);
134
+ javascript.addEventListener('input', updatePreview);
135
+
136
+ fullScreenButton.addEventListener('click', () => {
137
+ fullScreenPreview.style.display = 'flex';
138
+ });
139
+
140
+ closeFullScreen.addEventListener('click', () => {
141
+ fullScreenPreview.style.display = 'none';
142
+ });
143
+
144
+ // Initial update
145
+ updatePreview();
146
+ </script>
147
+ </body>
148
+ </html>