Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Web Code IDE</title> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/codemirror.min.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/theme/monokai.min.css"> | |
| <style> | |
| /* styles.css */ | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: Arial, sans-serif; | |
| height: 100vh; | |
| } | |
| .container { | |
| display: flex; | |
| height: 100vh; | |
| } | |
| .editor-container { | |
| width: 60%; | |
| background: #1e1e1e; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .preview-container { | |
| width: 40%; | |
| border-left: 2px solid #333; | |
| } | |
| .tabs { | |
| display: flex; | |
| background: #252526; | |
| } | |
| .tab { | |
| padding: 10px 20px; | |
| color: #fff; | |
| cursor: pointer; | |
| border-right: 1px solid #333; | |
| } | |
| .tab.active { | |
| background: #1e1e1e; | |
| } | |
| .code-editor { | |
| height: 33.33%; | |
| overflow: hidden; | |
| } | |
| .CodeMirror { | |
| height: 100% ; | |
| } | |
| #preview { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="editor-container"> | |
| <div class="tabs"> | |
| <div class="tab active" onclick="showEditor('html')">HTML</div> | |
| <div class="tab" onclick="showEditor('css')">CSS</div> | |
| <div class="tab" onclick="showEditor('js')">JavaScript</div> | |
| </div> | |
| <div id="html-editor" class="code-editor"></div> | |
| <div id="css-editor" class="code-editor" style="display: none"></div> | |
| <div id="js-editor" class="code-editor" style="display: none"></div> | |
| </div> | |
| <div class="preview-container"> | |
| <iframe id="preview"></iframe> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/codemirror.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/htmlmixed/htmlmixed.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/css/css.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.0/mode/javascript/javascript.min.js"></script> | |
| <script> | |
| // script.js | |
| let htmlEditor = CodeMirror(document.getElementById('html-editor'), { | |
| mode: 'htmlmixed', | |
| theme: 'monokai', | |
| lineNumbers: true, | |
| 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>' | |
| }); | |
| let cssEditor = CodeMirror(document.getElementById('css-editor'), { | |
| mode: 'css', | |
| theme: 'monokai', | |
| lineNumbers: true, | |
| value: 'h1 { color: blue; }' | |
| }); | |
| let jsEditor = CodeMirror(document.getElementById('js-editor'), { | |
| mode: 'javascript', | |
| theme: 'monokai', | |
| lineNumbers: true, | |
| value: 'console.log("Hello from JS!");' | |
| }); | |
| function showEditor(language) { | |
| document.querySelectorAll('.code-editor').forEach(editor => { | |
| editor.style.display = 'none'; | |
| }); | |
| document.querySelectorAll('.tab').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| document.getElementById(`${language}-editor`).style.display = 'block'; | |
| event.target.classList.add('active'); | |
| } | |
| function updatePreview() { | |
| const html = htmlEditor.getValue(); | |
| const css = cssEditor.getValue(); | |
| const js = jsEditor.getValue(); | |
| const preview = document.getElementById('preview').contentWindow.document; | |
| preview.open(); | |
| preview.write(` | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style>${css}</style> | |
| </head> | |
| <body> | |
| ${html} | |
| <script>${js}<\/script> | |
| </body> | |
| </html> | |
| `); | |
| preview.close(); | |
| } | |
| // Update preview on code changes | |
| [htmlEditor, cssEditor, jsEditor].forEach(editor => { | |
| editor.on('change', () => { | |
| updatePreview(); | |
| }); | |
| }); | |
| // Initial preview | |
| updatePreview(); | |
| </script> | |
| </body> | |
| </html> | |