Hugging Face's logo

Spaces:
DaniFera
/
Interprete_HTML
Running

App Files Community
Interprete_HTML
File size: 6,904 Bytes 
ecd7cf0
 
 
 
 
1ec0a9e
 
 
 
 
 
 
 
 
ecd7cf0
 
 
 
 
1ec0a9e
 
 
 
 
 
 
 
 
 
 
ecd7cf0
 
 
 
 
 
1ec0a9e
ecd7cf0
 
 
 
 
 
 
 
 
 
 
 
 
 
1ec0a9e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ecd7cf0
 
 
 
9dca023
ecd7cf0
 
 
1ec0a9e
 
 
 
 
 
 
ecd7cf0
 
 
 
 
 
 
 
1ec0a9e
ecd7cf0
 
1ec0a9e
 
 
 
 
 
778369e
1ec0a9e
 
ecd7cf0
 
1ec0a9e
 
ecd7cf0
 
 
 
 
1ec0a9e
 
 
 
 
 
 
 
 
 
 
 
 
ecd7cf0
 
1ec0a9e
ecd7cf0
1ec0a9e
 
e54cf52
ecd7cf0
 
e54cf52
 
 
 
1ec0a9e
 
 
 
 
e54cf52
ecd7cf0
 
e54cf52
 
 
 
 
 
 
ecd7cf0
 
1ec0a9e
 
 
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
 
<!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>