Hugging Face's logo

Spaces:
DaniFera
/
Interprete_HTML
Running

App Files Community
Interprete_HTML / index.html
DaniFera's picture
DaniFera
Update index.html
778369e verified
raw
history blame contribute delete
6.9 kB
 <!DOCTYPE html>
<html lang="es">
<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>
<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%;
padding: 12px;
margin-top: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1em;
cursor: pointer;
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 HTML</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 class="pane">
<iframe id="preview"></iframe>
</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: 'default', // Tema de colores claros
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>
<title>Bienvenida</title>
<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 class="welcome-container">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
</svg>
<h1>Int茅rprete de C贸digo Interactivo</h1>
<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>
</div>
</body>
</html>`;
// Para establecer el c贸digo, ahora usamos el m茅todo de CodeMirror
editor.setValue(welcomeCode);
updatePreview();
</script>
</body>
</html>