Hugging Face's logo

Spaces:
DaniFera
/
Interprete_HTML
Running

App Files Community
Interprete_HTML
File size: 2,799 Bytes 
ecd7cf0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
 
<!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>