DaniFera/Interprete_HTML
1
1<!DOCTYPE html>2<html lang="es">3<head>4 <meta charset="UTF-8">5 <title>Intérprete de Código</title>6 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.js"></script>8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/codemirror.min.css">9 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/xml/xml.min.js"></script>10 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/javascript/javascript.min.js"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/css/css.min.js"></script>12 <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.15/mode/htmlmixed/htmlmixed.min.js"></script>13 14 15 <style>16 body, html { margin: 0; padding: 0; height: 100%; font-family: sans-serif; background-color: #f7f7f7; }17 .header { padding: 10px 20px; background-color: #fff; border-bottom: 1px solid #ddd; }18 .header h1 { margin: 0; font-size: 1.5em; }19 .container { display: flex; height: calc(100vh - 55px); }20 .pane { width: 50%; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; position: relative; }21 22 /* Estilos para el editor CodeMirror */23 .CodeMirror {24 width: 100%;25 height: 100%;26 border: 1px solid #ccc;27 border-radius: 4px;28 }29 30 .pane iframe {31 width: 100%;32 height: 100%;33 border: 1px solid #ccc;34 border-radius: 4px;35 box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);36 }37 38 #runButton {39 display: block;40 width: 100%;41 padding: 12px;42 margin-top: 10px;43 background-color: #007bff;44 color: white;45 border: none;46 border-radius: 4px;47 font-size: 1em;48 cursor: pointer;49 transition: background-color 0.2s;50 }51 #runButton:hover { background-color: #0056b3; }52 53 /* 2. ESTILOS PARA EL NUEVO BOTÓN DE DESCARGA */54 .editor-buttons {55 position: absolute;56 top: 18px;57 right: 18px;58 z-index: 10;59 }60 .icon-button {61 background: #555;62 border: none;63 padding: 5px;64 border-radius: 4px;65 cursor: pointer;66 opacity: 0.7;67 transition: opacity 0.2s;68 }69 .icon-button:hover { opacity: 1; }70 .icon-button svg { width: 20px; height: 20px; color: white; display: block; }71 72 </style>73</head>74<body>75 <div class="header">76 <h1>Intérprete de Código HTML</h1>77 </div>78 <div class="container">79 <div class="pane">80 <div class="editor-buttons">81 <button id="downloadButton" class="icon-button" title="Descargar código como .txt">82 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">83 <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" />84 </svg> 85 </button>86 </div>87 <textarea id="editor" placeholder="Pega tu código HTML completo aquí..."></textarea>88 <button id="runButton">▶️ Ejecutar</button>89 </div>90 <div class="pane">91 <iframe id="preview"></iframe>92 </div>93 </div>94 <script>95 // 4. INICIALIZACIÓN DE CODEMIRROR Y NUEVA LÓGICA96 const previewFrame = document.getElementById('preview');97 const runButton = document.getElementById('runButton');98 const downloadButton = document.getElementById('downloadButton');99 100 // Inicializamos CodeMirror en nuestro textarea101 const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {102 lineNumbers: true, // ¡Aquí está la magia de los números de línea!103 mode: 'htmlmixed', // Habilita resaltado de HTML, CSS y JS104 theme: 'default', // Tema de colores claros105 lineWrapping: true // Ajuste de línea automático106 });107 108 function updatePreview() {109 // Para obtener el código, ahora usamos el método de CodeMirror110 const code = editor.getValue(); 111 const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;112 previewDoc.open();113 previewDoc.write(code);114 previewDoc.close();115 }116 117 function downloadCode() {118 const code = editor.getValue();119 const blob = new Blob([code], { type: 'text/plain' });120 const url = URL.createObjectURL(blob);121 const a = document.createElement('a');122 a.href = url;123 a.download = 'codigo.txt';124 document.body.appendChild(a);125 a.click();126 document.body.removeChild(a);127 URL.revokeObjectURL(url);128 }129 130 runButton.addEventListener('click', updatePreview);131 downloadButton.addEventListener('click', downloadCode);132 133 // Código de bienvenida mejorado134 const welcomeCode = `135<!DOCTYPE html>136<html lang="es">137<head>138 <title>Bienvenida</title>139 <meta charset="UTF-8">140 <style>141 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');142 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; }143 .welcome-container { text-align: center; padding: 40px; }144 .icon { width: 80px; height: 80px; margin-bottom: 20px; color: #007bff; }145 h1 { font-size: 2em; font-weight: 700; color: #343a40; margin: 0 0 10px 0; }146 p { font-size: 1.1em; font-weight: 400; color: #6c757d; max-width: 450px; }147 </style>148</head>149<body>150 <div class="welcome-container">151 <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">152 <path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />153 </svg>154 <h1>Intérprete de Código Interactivo</h1>155 <p>Pega tu código HTML, CSS y JavaScript en el editor de la izquierda y pulsa 'Ejecutar' para ver tu proyecto cobrar vida al instante.</p>156 </div>157</body>158</html>`;159 160 // Para establecer el código, ahora usamos el método de CodeMirror161 editor.setValue(welcomeCode);162 updatePreview();163 </script>164</body>165</html>