Spaces:

DaniFera
/

Interprete_HTML

Running

App Files Files Community

Interprete_HTML / index.html

DaniFera

Create index.html

ecd7cf0 verified 2 months ago

raw

history blame

2.8 kB

	<!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);

	// Opcional: Cargar un ejemplo inicial
	editor.value = `<!DOCTYPE html>
	<html lang="es">
	<head>
	<title>Ejemplo</title>
	<style>
	body { font-family: sans-serif; background-color: #e0f7fa; display: grid; place-content: center; height: 100vh; margin: 0; }
	h1 { color: #00796b; }
	</style>
	</head>
	<body>
	<h1>¡Escribe tu código y pulsa Ejecutar!</h1>
	</body>
	</html>`;
	updatePreview();
	</script>
	</body>
	</html>