Hugging Face's logo

Spaces:
Aryansoni27
/
Web-Code-Ide
Running

App Files Community
Aryansoni27 commited on
Commit
787624d
·
verified ·
1 Parent(s): 6aaca9c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +153 -17
index.html CHANGED
@@ -1,19 +1,155 @@
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>
3
+ <head>
4
+ <title>Web Code IDE</title>
5
+ <meta charset="UTF-8">
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/codemirror.min.css">
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/theme/monokai.min.css">
8
+ <style>
9
+ /* styles.css */
10
+ body {
11
+ margin: 0;
12
+ padding: 0;
13
+ font-family: Arial, sans-serif;
14
+ height: 100vh;
15
+ }
16
+
17
+ .container {
18
+ display: flex;
19
+ height: 100vh;
20
+ }
21
+
22
+ .editor-container {
23
+ width: 60%;
24
+ background: #1e1e1e;
25
+ display: flex;
26
+ flex-direction: column;
27
+ }
28
+
29
+ .preview-container {
30
+ width: 40%;
31
+ border-left: 2px solid #333;
32
+ }
33
+
34
+ .tabs {
35
+ display: flex;
36
+ background: #252526;
37
+ }
38
+
39
+ .tab {
40
+ padding: 10px 20px;
41
+ color: #fff;
42
+ cursor: pointer;
43
+ border-right: 1px solid #333;
44
+ }
45
+
46
+ .tab.active {
47
+ background: #1e1e1e;
48
+ }
49
+
50
+ .code-editor {
51
+ height: 33.33%;
52
+ overflow: hidden;
53
+ }
54
+
55
+ .CodeMirror {
56
+ height: 100% !important;
57
+ }
58
+
59
+ #preview {
60
+ width: 100%;
61
+ height: 100%;
62
+ border: none;
63
+ }
64
+ </style>
65
+ </head>
66
+ <body>
67
+ <div class="container">
68
+ <div class="editor-container">
69
+ <div class="tabs">
70
+ <div class="tab active" onclick="showEditor('html')">HTML</div>
71
+ <div class="tab" onclick="showEditor('css')">CSS</div>
72
+ <div class="tab" onclick="showEditor('js')">JavaScript</div>
73
+ </div>
74
+ <div id="html-editor" class="code-editor"></div>
75
+ <div id="css-editor" class="code-editor" style="display: none"></div>
76
+ <div id="js-editor" class="code-editor" style="display: none"></div>
77
+ </div>
78
+ <div class="preview-container">
79
+ <iframe id="preview"></iframe>
80
+ </div>
81
+ </div>
82
+
83
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/codemirror.min.js"></script>
84
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/htmlmixed/htmlmixed.min.js"></script>
85
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/css/css.min.js"></script>
86
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/javascript/javascript.min.js"></script>
87
+
88
+ <script>
89
+ // script.js
90
+ let htmlEditor = CodeMirror(document.getElementById('html-editor'), {
91
+ mode: 'htmlmixed',
92
+ theme: 'monokai',
93
+ lineNumbers: true,
94
+ value: '<!DOCTYPE html>\n<html>\n<head>\n\t<title>Demo</title>\n</head>\n<body>\n\t<h1>Hello World</h1>\n</body>\n</html>'
95
+ });
96
+
97
+ let cssEditor = CodeMirror(document.getElementById('css-editor'), {
98
+ mode: 'css',
99
+ theme: 'monokai',
100
+ lineNumbers: true,
101
+ value: 'h1 { color: blue; }'
102
+ });
103
+
104
+ let jsEditor = CodeMirror(document.getElementById('js-editor'), {
105
+ mode: 'javascript',
106
+ theme: 'monokai',
107
+ lineNumbers: true,
108
+ value: 'console.log("Hello from JS!");'
109
+ });
110
+
111
+ function showEditor(language) {
112
+ document.querySelectorAll('.code-editor').forEach(editor => {
113
+ editor.style.display = 'none';
114
+ });
115
+ document.querySelectorAll('.tab').forEach(tab => {
116
+ tab.classList.remove('active');
117
+ });
118
+ document.getElementById(`${language}-editor`).style.display = 'block';
119
+ event.target.classList.add('active');
120
+ }
121
+
122
+ function updatePreview() {
123
+ const html = htmlEditor.getValue();
124
+ const css = cssEditor.getValue();
125
+ const js = jsEditor.getValue();
126
+
127
+ const preview = document.getElementById('preview').contentWindow.document;
128
+ preview.open();
129
+ preview.write(`
130
+ <!DOCTYPE html>
131
+ <html>
132
+ <head>
133
+ <style>${css}</style>
134
+ </head>
135
+ <body>
136
+ ${html}
137
+ <script>${js}<\/script>
138
+ </body>
139
+ </html>
140
+ `);
141
+ preview.close();
142
+ }
143
+
144
+ // Update preview on code changes
145
+ [htmlEditor, cssEditor, jsEditor].forEach(editor => {
146
+ editor.on('change', () => {
147
+ updatePreview();
148
+ });
149
+ });
150
+
151
+ // Initial preview
152
+ updatePreview();
153
+ </script>
154
+ </body>
155
  </html>