|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<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%; |
|
|
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; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="header"> |
|
|
<h1>Int茅rprete de C贸digo (Docker/FastAPI)</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> |
|
|
<div class="pane"> |
|
|
<iframe id="preview"></iframe> |
|
|
</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> |
|
|
<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>`; |
|
|
updatePreview(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
