Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Real-Time HTML, CSS, JavaScript Online Code Editor</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| height: 100vh; | |
| } | |
| .header { | |
| background-color: #f8f9fa; | |
| padding: 10px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .header button { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background-color: #007bff; | |
| color: white; | |
| border: none; | |
| padding: 5px 10px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .header button:hover { | |
| background-color: #0056b3; | |
| } | |
| .editor-container { | |
| width: 50%; | |
| height: calc(100vh - 40px); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| textarea { | |
| flex: 1; | |
| border: none; | |
| resize: none; | |
| outline: none; | |
| padding: 10px; | |
| font-size: 14px; | |
| tab-size: 4; | |
| } | |
| #output { | |
| width: 50%; | |
| height: calc(100vh - 40px); | |
| border-left: 1px solid #ccc; | |
| overflow: auto; | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| #fullScreenPreview { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: white; | |
| z-index: 1000; | |
| display: none; | |
| flex-direction: column; | |
| } | |
| #fullScreenPreview iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| #closeFullScreen { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background-color: red; | |
| color: white; | |
| border: none; | |
| padding: 5px 10px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| #closeFullScreen:hover { | |
| background-color: darkred; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <button id="fullScreenButton">Full Screen</button> | |
| </div> | |
| <div class="editor-container"> | |
| <textarea id="html" placeholder="HTML"></textarea> | |
| <textarea id="css" placeholder="CSS"></textarea> | |
| <textarea id="javascript" placeholder="JavaScript"></textarea> | |
| </div> | |
| <div id="output"> | |
| <iframe id="preview"></iframe> | |
| </div> | |
| <div id="fullScreenPreview"> | |
| <button id="closeFullScreen">Close</button> | |
| <iframe id="fullScreenIframe"></iframe> | |
| </div> | |
| <script> | |
| const html = document.getElementById('html'); | |
| const css = document.getElementById('css'); | |
| const javascript = document.getElementById('javascript'); | |
| const preview = document.getElementById('preview').contentDocument; | |
| const fullScreenButton = document.getElementById('fullScreenButton'); | |
| const fullScreenPreview = document.getElementById('fullScreenPreview'); | |
| const fullScreenIframe = document.getElementById('fullScreenIframe'); | |
| const closeFullScreen = document.getElementById('closeFullScreen'); | |
| function updatePreview() { | |
| const htmlContent = html.value; | |
| const cssContent = `<style>${css.value}</style>`; | |
| const jsContent = `<script>${javascript.value}<\/script>`; | |
| preview.open(); | |
| preview.write(htmlContent + cssContent + jsContent); | |
| preview.close(); | |
| fullScreenIframe.srcdoc = htmlContent + cssContent + jsContent; | |
| } | |
| html.addEventListener('input', updatePreview); | |
| css.addEventListener('input', updatePreview); | |
| javascript.addEventListener('input', updatePreview); | |
| fullScreenButton.addEventListener('click', () => { | |
| fullScreenPreview.style.display = 'flex'; | |
| }); | |
| closeFullScreen.addEventListener('click', () => { | |
| fullScreenPreview.style.display = 'none'; | |
| }); | |
| // Initial update | |
| updatePreview(); | |
| </script> | |
| </body> | |
| </html> |