Hugging Face's logo

Spaces:
DaniFera
/
Interprete_HTML
Running

App Files Community
Interprete_HTML
File size: 4,093 Bytes 
ecd7cf0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e54cf52
 
 
ecd7cf0
 
e54cf52
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ecd7cf0
 
e54cf52
 
 
 
 
 
 
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
<!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>