Spaces:

DaniFera
/

Interprete_HTML

Running

App Files Files Community

DaniFera commited on Jun 13

Commit

1ec0a9e

verified ·

1 Parent(s): 3206da6

Update index.html

Browse files

Files changed (1) hide show

index.html +86 -43

index.html CHANGED Viewed

@@ -3,19 +3,39 @@
 <head>
     <meta charset="UTF-8">
     <title>Intérprete de Código</title>
     <style>
         body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; background-color: #f7f7f7; }
         .header { padding: 10px 20px; background-color: #fff; border-bottom: 1px solid #ddd; }
         .header h1 { margin: 0; font-size: 1.5em; }
         .container { display: flex; height: calc(100vh - 55px); }
-        .pane { width: 50%; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; }
-        .pane textarea, .pane iframe {
             width: 100%;
             height: 100%;
             border: 1px solid #ccc;
             border-radius: 4px;
             box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
         }
         #runButton {
             display: block;
             width: 100%;
@@ -30,14 +50,41 @@
             transition: background-color 0.2s;
         }
         #runButton:hover { background-color: #0056b3; }
     </style>
 </head>
 <body>
     <div class="header">
-        <h1>Intérprete de Código HTML</h1>
     </div>
     <div class="container">
         <div class="pane">
             <textarea id="editor" placeholder="Pega tu código HTML completo aquí..."></textarea>
             <button id="runButton">▶️ Ejecutar</button>
         </div>
@@ -46,24 +93,46 @@
         </div>
     </div>
     <script>
-        const editor = document.getElementById('editor');
         const previewFrame = document.getElementById('preview');
         const runButton = document.getElementById('runButton');
         function updatePreview() {
-            const code = editor.value;
-            // Escribimos el contenido directamente en el documento del iframe.
-            // Esto es más robusto que usar srcdoc para casos complejos.
             const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;
             previewDoc.open();
             previewDoc.write(code);
             previewDoc.close();
         }
         runButton.addEventListener('click', updatePreview);
-        // --- CÓDIGO DE BIENVENIDA MEJORADO ---
-        editor.value = `
 <!DOCTYPE html>
 <html lang="es">
 <head>
@@ -71,40 +140,11 @@
     <meta charset="UTF-8">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
-        body, html {
-            margin: 0;
-            padding: 0;
-            width: 100%;
-            height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            font-family: 'Inter', sans-serif;
-            background-color: #f8f9fa;
-            color: #495057;
-        }
-        .welcome-container {
-            text-align: center;
-            padding: 40px;
-        }
-        .icon {
-            width: 80px;
-            height: 80px;
-            margin-bottom: 20px;
-            color: #007bff;
-        }
-        h1 {
-            font-size: 2em;
-            font-weight: 700;
-            color: #343a40;
-            margin: 0 0 10px 0;
-        }
-        p {
-            font-size: 1.1em;
-            font-weight: 400;
-            color: #6c757d;
-            max-width: 450px;
-        }
     </style>
 </head>
 <body>
@@ -117,6 +157,9 @@
     </div>
 </body>
 </html>`;
         updatePreview();
     </script>
 </body>

 <head>
     <meta charset="UTF-8">
     <title>Intérprete de Código</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/xml/xml.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/javascript/javascript.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/css/css.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/htmlmixed/htmlmixed.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/theme/material-darker.min.css">
     <style>
         body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; background-color: #f7f7f7; }
         .header { padding: 10px 20px; background-color: #fff; border-bottom: 1px solid #ddd; }
         .header h1 { margin: 0; font-size: 1.5em; }
         .container { display: flex; height: calc(100vh - 55px); }
+        .pane { width: 50%; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; position: relative; }
+        /* Estilos para el editor CodeMirror */
+        .CodeMirror {
+            width: 100%;
+            height: 100%;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        .pane iframe {
             width: 100%;
             height: 100%;
             border: 1px solid #ccc;
             border-radius: 4px;
             box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
         }
         #runButton {
             display: block;
             width: 100%;
             transition: background-color 0.2s;
         }
         #runButton:hover { background-color: #0056b3; }
+        /* 2. ESTILOS PARA EL NUEVO BOTÓN DE DESCARGA */
+        .editor-buttons {
+            position: absolute;
+            top: 18px;
+            right: 18px;
+            z-index: 10;
+        }
+        .icon-button {
+            background: #555;
+            border: none;
+            padding: 5px;
+            border-radius: 4px;
+            cursor: pointer;
+            opacity: 0.7;
+            transition: opacity 0.2s;
+        }
+        .icon-button:hover { opacity: 1; }
+        .icon-button svg { width: 20px; height: 20px; color: white; display: block; }
     </style>
 </head>
 <body>
     <div class="header">
+        <h1>Intérprete de Código (Docker/FastAPI)</h1>
     </div>
     <div class="container">
         <div class="pane">
+            <div class="editor-buttons">
+                <button id="downloadButton" class="icon-button" title="Descargar código como .txt">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                    </svg>
+                </button>
+            </div>
             <textarea id="editor" placeholder="Pega tu código HTML completo aquí..."></textarea>
             <button id="runButton">▶️ Ejecutar</button>
         </div>
         </div>
     </div>
     <script>
+        // 4. INICIALIZACIÓN DE CODEMIRROR Y NUEVA LÓGICA
         const previewFrame = document.getElementById('preview');
         const runButton = document.getElementById('runButton');
+        const downloadButton = document.getElementById('downloadButton');
+        // Inicializamos CodeMirror en nuestro textarea
+        const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
+            lineNumbers: true,           // ¡Aquí está la magia de los números de línea!
+            mode: 'htmlmixed',           // Habilita resaltado de HTML, CSS y JS
+            theme: 'material-darker',    // Tema de colores oscuro
+            lineWrapping: true           // Ajuste de línea automático
+        });
         function updatePreview() {
+            // Para obtener el código, ahora usamos el método de CodeMirror
+            const code = editor.getValue();
             const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;
             previewDoc.open();
             previewDoc.write(code);
             previewDoc.close();
         }
+        function downloadCode() {
+            const code = editor.getValue();
+            const blob = new Blob([code], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'codigo.txt';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        }
         runButton.addEventListener('click', updatePreview);
+        downloadButton.addEventListener('click', downloadCode);
+        // Código de bienvenida mejorado
+        const welcomeCode = `
 <!DOCTYPE html>
 <html lang="es">
 <head>
     <meta charset="UTF-8">
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+        body, html { margin: 0; padding: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-family: 'Inter', sans-serif; background-color: #f8f9fa; color: #495057; }
+        .welcome-container { text-align: center; padding: 40px; }
+        .icon { width: 80px; height: 80px; margin-bottom: 20px; color: #007bff; }
+        h1 { font-size: 2em; font-weight: 700; color: #343a40; margin: 0 0 10px 0; }
+        p { font-size: 1.1em; font-weight: 400; color: #6c757d; max-width: 450px; }
     </style>
 </head>
 <body>
     </div>
 </body>
 </html>`;
+        // Para establecer el código, ahora usamos el método de CodeMirror
+        editor.setValue(welcomeCode);
         updatePreview();
     </script>
 </body>