PageSourceSearch

https://vibe-coding-educativo.github.io/

html vibe-coding-educativo.github.io collected 2026-10-03 10:08:09 UTC 31,609 bytes, 395 lines download raw bytes

1<!DOCTYPE html>
2<!--
3  Vibe Coding Educativo – Código HTML/JS
4  Licencia: GPL-3.0 (ver LICENSE.txt)
5  Contenidos educativos: “Esta obra está bajo licencia CC BY-SA 4.0”
6  https://creativecommons.org/licenses/by-sa/4.0/
7-->
8<html lang="es" class="scroll-smooth">
9
10<head>
11    <meta charset="UTF-8">
12    <meta name="viewport" content="width=device-width, initial-scale=1.0">
13    <title>Vibe Coding Educativo</title>
14    
14<script>
15        tailwind = window.tailwind || {};
16        tailwind.config = { darkMode: 'class' };
17    </script>
17
18    
18<script>
19        // Modo automático: aplica dark y reacciona a cambios del sistema
20        (function () {
21            try {
22                var mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
23                if (!mq) return;
24                var apply = function (isDark) {
25                    document.documentElement.classList.toggle('dark', !!isDark);
26                };
27                apply(mq.matches);
28                if (mq.addEventListener) mq.addEventListener('change', function (e) { apply(e.matches); });
29                else if (mq.addListener) mq.addListener(function (e) { apply(e.matches); });
30            } catch (e) {}
31        })();
32    </script>
32
33    
33<script src="https://cdn.tailwindcss.com"></script>
33
34    <link rel="preconnect" href="https://fonts.googleapis.com">
35    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
36    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
37    <link rel="stylesheet" href="assets/styles.css">
38    <!-- inline CSS moved to assets/styles.css
39        body {
40            font-family: 'Inter', sans-serif;
41            background-color: #f8fafc; /* slate-50 */
42            /* Se ha suavizado el color del patrón de fondo para que sea menos distractor */
43            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e0f2fe' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
44        }
45
46        h1, h2, h3 {
47            font-family: 'Poppins', sans-serif;
48        }
49
50        /* Gradiente de texto actualizado con la nueva paleta de colores */
51        .gradient-text {
52            background: linear-gradient(90deg, #2563EB, #0891B2, #0EA5E9);
53            -webkit-background-clip: text;
54            -webkit-text-fill-color: transparent;
55            background-clip: text;
56            text-fill-color: transparent;
57        }
58
59        .card {
60            background: rgba(255, 255, 255, 0.9);
61            backdrop-filter: blur(10px);
62            border: 1px solid rgba(226, 232, 240, 0.4);
63            transition: transform 0.3s ease, box-shadow 0.3s ease;
64        }
65        
66        .card:hover {
67            transform: translateY(-8px);
68            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
69        }
70        
71        .nav-link {
72            position: relative;
73            transition: color 0.3s;
74        }
75
76        /* Color del subrayado del enlace de navegación actualizado */
77        .nav-link::after {
78            content: '';
79            position: absolute;
80            width: 0;
81            height: 2px;
82            bottom: -4px;
83            left: 50%;
84            background-color: #2563EB; /* blue-600 */
85            transition: all 0.3s ease-in-out;
86            transform: translateX(-50%);
87        }
88
89        .nav-link:hover::after {
90            width: 100%;
91        }
92
93        /* Colores de fondo de sección más sutiles y consistentes */
94        .section-bg-odd {
95            background-color: #f8fafc; /* slate-50 */
96        }
97
98        .section-bg-even {
99            background-color: #f0f9ff; /* sky-50 */
100        }
101    -->
102</head>
103
104<body class="text-slate-700 dark:text-slate-200 antialiased dark:bg-slate-900">
105
106    <!-- Navegación -->
107    <nav class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200 dark:border-slate-700">
108        <div class="container mx-auto px-6 py-3 flex justify-between items-center">
109            <a href="#" class="flex items-center space-x-3">
110                <!-- Logo actualizado -->
111                <img src="https://vibe-coding-educativo.github.io/vibe_coding_educativo.png" alt="Logotipo de Vibe Coding Educativo" class="h-10 w-auto rounded-full">
112                <span class="hidden sm:block text-xl font-bold gradient-text" data-lang="groupName">Vibe Coding Educativo</span>
113            </a>
114            <div id="main-nav" class="hidden md:flex space-x-6 items-center">
115                <a href="#que-es" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navWhatIs">Qué es</a>
116                <a href="#comunidad" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navCommunity">Comunidad</a>
117                <a href="#apps" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navApps">Aplicaciones</a>
118                <a href="#boletin" class="nav-link text-slate-600 dar
118k:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navNewsletter">Boletín</a>
119                <a href="#recursos" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navResources">Recursos</a>
120                <a href="#agente" class="nav-link text-slate-600 dark:text-slate-300 hover:text-blue-600 dark:hover:text-blue-400 font-medium" data-lang="navAgent">Agente</a>
121                 <div class="relative">
122                    <select id="lang-selector" class="appearance-none bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 py-2 pl-3 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white dark:focus:bg-slate-900 focus:border-slate-500">
123                        <option value="es">Español</option>
124                        <option value="ca">Català</option>
125                        <option value="gl">Galego</option>
126                        <option value="eu">Euskara</option>
127                        <option value="en">English</option>
128                    </select>
129                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-700 dark:text-slate-300">
130                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
131                    </div>
132                </div>
133                
134            </div>
135             <div class="flex items-center md:hidden">
136                <button id="mobile-menu-button" class="text-slate-700 ml-4">
137                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
138                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
139                    </svg>
140                </button>
141            </div>
142        </div>
143        <!-- Menú Móvil -->
144        <div id="mobile-menu" class="hidden md:hidden bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-700">
145            <a href="#que-es" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navWhatIs">Qué es</a>
146            <a href="#comunidad" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navCommunity">Comunidad</a>
147            <a href="#apps" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navApps">Aplicaciones</a>
148            <a href="#boletin" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navNewsletter">Boletín</a>
149            <a href="#recursos" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navResources">Recursos</a>
150            <a href="#agente" class="block py-2 px-4 text-sm hover:bg-slate-100 dark:hover:bg-slate-800" data-lang="navAgent">Agente</a>
151            
152            <a href="https://t.me/vceduca" target="_blank" class="block py-3 px-4 text-sm bg-blue-600 text-white text-center font-bold" data-lang="joinGroup">
153                Únete al Grupo
154            </a>
155        </div>
156    </nav>
157
158    <!-- Hero Section -->
159    <header class="bg-white dark:bg-slate-900">
160        <div class="container mx-auto px-6 py-20 text-center">
161            <!-- Logo actualizado -->
162            <img src="https://vibe-coding-educativo.github.io/vibe_coding_educativo.png" alt="Logotipo de Vibe Coding Educativo" class="mx-auto h-28 w-auto mb-8 rounded-full shadow-lg border-4 border-white">
163            <h1 class="text-4xl md:text-6xl font-bold gradient-text" data-lang="heroTitle">Programa con Propósito y Vibe</h1>
164            <p class="text-lg md:text-xl text-slate-600 dark:text-slate-300 mt-4 max-w-3xl mx-auto" data-lang="heroSubtitle">Un espacio para crear, compartir y aprender a desarrollar aplicaciones educativas interactivas con lenguaje natural e Inteligencia Artificial.</p>
165            <div class="mt-8 flex flex-col sm:flex-row justify-center items-center gap-4 flex-wrap">
166                <!-- Botones principales -->
167                <a href="#apps" class="w-full sm:w-auto bg-amber-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-amber-600 transition duration-300 shadow-lg transform hover:scale-105" data-lang="viewApps">Ver Aplicaciones</a>
168                <a href="#boletin" class="w-full sm:w-auto bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-300 shadow-lg transform hover:scale-105" data-lang="viewNewsletter">Ver Boletín</a>
169                <a href="#agente" class="w-full sm:w-auto bg-cyan-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-cyan-700 transition duration-300 shadow-lg transform hover:scale-105" data-lang="agentButtonHeader">Resuelve tus dudas con nuestro Agente</a>
170                <a href="https://t.me/vceduca" target="_blank" class="w-full sm:w-auto bg-slate-700 text-white font-bold py-3 px-6 rounded-lg hover:bg-slate-800 transition duration-300 transform hover:scale-105" data-lang="joinTelegram">Únete en Telegram</a>
171            </div>
172        </div>
173    </header>
174
175    <!-- Ficha destacada: la guía «Vibe coding responsable», en el idioma elegido -->
176    <section id="vibe-responsable" class="py-16 section-bg-odd">
177        <div class="container mx-auto px-6">
178            <div class="max-w-4xl mx-auto card rounded-2xl bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border-t-4 border-teal-600 shadow-lg p-6 md:p-10 flex flex-col md:flex-row items-center gap-8">
179                <a href="https://vibe-coding-educativo.github.io/vibe-responsable/es/" data-href-lang="https://vibe-coding-educativo.github.io/vibe-responsable/{lang}/" target="_blank" rel="noopener noreferrer" class="flex-shrink-0">
180                    <img src="https://vibe-coding-educativo.github.io/vibe-responsable/infografia/lista-iconos.es.png" data-src-lang="https://vibe-coding-educativo.github.io/vibe-responsable/infografia/lista-iconos.{lang}.png" alt="" width="1080" height="1928" loading="lazy" class="w-40 md:w-48 h-auto rounded-lg shadow-md border border-slate-200 dark:border-slate-700">
181                </a>
182                <div class="text-center md:text-left">
183                    <p class="text-sm font-bold uppercase tracking-wider text-teal-700 dark:text-teal-400" data-lang="guideBadge">Guía de la comunidad</p>
184                    <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100 mt-2" data-lang="guideTitle">Vibe coding responsable</h2>
185                    <p class="mt-4 text-lg text-slate-600 dark:text-slate-300" data-lang="guideDesc">Diez recomendaciones para publicar de forma responsable y ética los materiales creados con IA: licencias, datos del alumnado, accesibilidad y transparencia sobre cómo se han hecho. Incluye instrucciones para que la IA las siga y una rúbrica para evaluar cualquier recurso.</p>
186                    <a href="https://vibe-coding-educativo.github.io/vibe-responsable/es/" data-href-lang="https://vibe-coding-educativo.github.io/vibe-responsable/{lang}/" target="_blank" rel="noopener noreferrer" class="mt-6 bg-teal-700 text-white font-bold py-3 px-8 rounded-lg hover:bg-teal-800 transition duration-300 shadow-lg inline-flex items-center transform hover:scale-105" data-lang="guideButton">Leer la guía</a>
187                </div>
188            </div>
189        </div>
190    </section>
191
192    <!-- Sección Qué es Vibe Coding -->
193    <section id="que-es" class="py-20 section-bg-even">
194        <div class="container mx-auto px-6">
195            <div class="text-center mb-12">
196                <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="whatIsTitle">¿Qué es el Vibe Coding Educativo?</h2>
197                <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="whatIsSubtitle">Una nueva forma de programar, más intuitiva y accesible para todos los educadores.</p>
198            </div>
199            <div class="grid md:grid-cols-2 gap-12 items-center">
200                <div class="prose lg:prose-lg text-slate-700 dark:text-slate-300" data-lang="whatIsContent">
201                    <p><strong>Vibe Coding Educativo</strong> es un grupo y una metodología centrada en la creación de aplicaciones para la enseñanza mediante <em>vibe coding</em>: un enfoque de desarrollo basado en <strong>lenguaje natural</strong> y apoyado por modelos de inteligencia artificial 🤖.</p>
202                    <p>Es un espacio para compartir aplicaciones, resolver dudas técnicas y profundizar en el uso didáctico de esta forma de programación asistida. No necesitas ser un experto en código; si tienes una idea para una herramienta educativa, aquí puedes aprender a hacerla realidad.</p>
203                    <blockquote class="border-l-4 border-blue-500 pl-4 italic text-slate-800">
204                        "Es hacer programas a través de la IA. Le dices lo que quieres y lo hace." - Juanjo de Haro
205                    </blockquote>
206                    <p>La clave está en la conversación con la IA, refinando la idea paso a paso hasta obtener una aplicación funcional y atractiva que puedes integrar en tus clases y recursos digitales.</p>
207                </div>
208                <div>
209                    <!-- SVG con colores actualizados -->
210                    <div class="bg-white dark:bg-slate-800 p-4 rounded-xl shadow-2xl border border-slate-100 dark:border-slate-700">
211                        <svg viewBox="0 0 200 150" xmlns="http://www.w3.org/2000/svg" class="w-full h-full rounded-lg">
212                            <defs>
213                                <linearGradient id="bg-grad" x1="0%" y1="0%" x2="100%" y2="100%">
214                                    <stop offset="0%" stop-color="#e0f2fe" />
215                                    <stop offset="100%" stop-color="#dbeafe" />
216                                </linearGradient>
217                            </defs>
218                            <rect width="200" height="150" fill="url(#bg-grad)" />
219                            
220                            <g transform="translate(30, 45)">
221                                <path d="M20,0 L20,50 L5,50 C2.23,50,0,47.77,0,45 L0,5 C0,2.23,2.23,0,5,0 z" fill="#60a5fa"/>
222                                <path d="M25,0 L25,50 L45,50 C47.77,50,50,47.77,50,45 L50,5 C50,2.23,47.77,0,45,0 z" fill="#93c5fd"/>
223                                <rect x="22" y="-2" width="6" height="54" fill="#3b82f6" rx="2"/>
224                                <text x="25" y="65" font-family="Poppins, sans-serif" font-size="10" fill="#1e40af" text-anchor="middle" font-weight="600" data-lang="learnWord">Aprender</text>
225                            </g>
226
227                            <text x="100" y="80" font-family="Poppins, sans-serif" font-size="30" fill="#334155" text-anchor="middle" font-weight="600">+</text>
228
229                            <!-- Desplazado para equilibrar márgenes izquierdo/derecho -->
230                            <g transform="translate(112, 50)">
231                                <text x="20" y="10" font-family="monospace" font-size="14" fill="#0891B2" opacity="0.8">&lt;div&gt;</text>
232                                <text x="25" y="28" font-family="monospace" font-size="14" fill="#0891B2" opacity="0.8">  IA</text>
233                                <text x="20" y="46" font-family="monospace" font-size="14" fill="#0891B2" opacity="0.8">&lt;/div&gt;</text>
234                                <path d="M10,0 L0,10 L10,20" stroke="#06b6d4" stroke-width="2.5" fill="none"/>
235                                <path d="M68,48 L78,38 L68,28" stroke="#06b6d4" stroke-width="2.5" fill="none"/>
236                                <text x="35" y="65" font-family="Poppins, sans-serif" font-size="10" fill="#155e75" text-anchor="middle" font-weight="600" data-lang="createWord">Crear</text>
237                            </g>
238                        </svg>
239                    </div>
240                </div>
241            </div>
242        </div>
243    </section>
244
245    <!-- Sección Comunidad -->
246    <section id="comunidad" class="py-20 bg-white dark:bg-slate-900">
247        <div class="container mx-auto px-6">
248            <div class="text-center mb-12">
249                <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="communityTitle">Una Comunidad Abierta y Colaborativa</h2>
250                <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="communitySubtitle">Conectamos con otros apasionados de la tecnología y la educación.</p>
251            </div>
252            <div class="grid md:grid-cols-3 gap-8">
253                <!-- Tarjeta 1: Color primario -->
254                <div class="card p-6 text-center border-t-4 border-blue-500 rounded-lg bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700">
255                    <img src="https://vibe-coding-educativo.github.io/vibe_coding_educativo.png" alt="Logo Vibe Coding Educativo" class="mx-auto h-16 w-16 mb-4 rounded-full">
256                    <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300" data-lang="card1Title">Grupo de Telegram</h3>
257                    <p class="text-slate-600 dark:text-slate-300 mb-4" data-lang="card1Desc">El corazón de nuestra comunidad. Únete para compartir tus proyectos, resolver dudas y aprender de los demás.</p>
258                    <a href="https://t.me/vceduca" target="_blank" class="font-semibold text-blue-600 dark:text-blue-400 hover:underline" data-lang="card1Link">Unirme al grupo &rarr;</a>
259                </div>
260                <!-- Tarjeta 2: Color secundario (cian) -->
261                <div class="card p-6 text-center border-t-4 border-cyan-500 rounded-lg bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700">
262                    <img src="https://chatgpt-ia-edu.github.io/chatgptTelegram.jpeg" alt="Logo ChatGPT-IA-edu" class="mx-auto h-16 w-16 mb-4 rounded-full">
263                    <h3 class="text-2xl font-bold mb-3 text-cyan-800 dark:text-cyan-300" data-lang="card2Title">ChatGPT-IA-edu</h3>
264                    <p class="text-slate-600 dark:text-slate-300 mb-4" data-lang="card2Desc">Este grupo está vinculado con la comunidad especializada en el uso educativo de la IA en un sentido más amplio. En él encontrarás otros grupos de interés sobre IA educativa.</p>
265                    <a href="https://chatgpt-ia-edu.github.io/" target="_blank" class="font-semibold text-cyan-600 dark:text-cyan-400 hover:underline" data-lang="card2Link">Visitar grupo &rarr;</a>
266                </div>
267                <!-- Tarjeta 3: Color de acento (ámbar) para destacar -->
268                <div class="card p-6 text-center border-t-4 border-amber-500 rounded-lg bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700">
269                    <img src="https://conocimiento-abierto.github.io/abierto_reducido.png" alt="Logo Conocimiento Abierto" class="mx-auto h-16 w-16 mb-4 rounded-full">
270                    <h3 class="text-2xl font-bold mb-3 text-amber-800 dark:text-amber-300" data-lang="card3Title">Conocimiento Abierto</h3>
271                    <p class="text-slate-600 dark:text-slate-300 mb-4" data-lang="card3Desc">Nos adherimos a los principios del Conocimiento Abierto, fomentando que la tecnología y la educación sean accesibles para todos.</p>
272                    <a href="https://bilateria.org/app/" target="_blank" class="font-semibold text-amber-600 dar
272k:text-amber-400 hover:underline" data-lang="card3Link">Leer principios &rarr;</a>
273                </div>
274            </div>
275        </div>
276    </section>
277
278    <!-- Sección Aplicaciones -->
279    <section id="apps" class="py-20 section-bg-even">
280        <div class="container mx-auto px-6">
281            <div class="text-center mb-12">
282                <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="appsTitle">Galería de Aplicaciones</h2>
283                <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="appsSubtitle">Descubre lo que hemos creado. ¡Inspírate y crea la tuya!</p>
284            </div>
285            <div class="text-center mb-8">
286                <a href="https://vibe-coding-educativo.github.io/app_edu/" target="_blank" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition duration-300 shadow-lg inline-flex items-center space-x-2 transform hover:scale-105">
287                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
288                      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
289                      <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.022 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
290                    </svg>
291                    <span data-lang="exploreRepo">Explorar el Repositorio Completo</span>
292                </a>
293            </div>
294             <p class="text-center mt-4 text-slate-600" data-lang="addAppNote">Para añadir tu aplicación, utiliza el formulario oficial disponible en el grupo de Telegram.</p>
295        </div>
296    </section>
297    
298    <!-- Sección Boletín -->
299    <section id="boletin" class="py-20 section-bg-odd">
300        <div class="container mx-auto px-6">
301            <div class="text-center mb-12">
302                <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="newsletterTitle">Boletín Semanal</h2>
303                <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="newsletterSubtitle">Un resumen de las conversaciones, recursos y proyectos más destacados de la comunidad.</p>
304            </div>
305            <div class="max-w-2xl mx-auto text-center card p-8 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700">
306                 <p class="text-slate-600 mb-6" data-lang="newsletterDesc">Cada semana, recopilamos lo más relevante de nuestro grupo de Telegram para que no te pierdas nada. Descubre nuevas herramientas, debates interesantes y las últimas creaciones de los miembros.</p>
307                 <a href="https://vibe-coding-educativo.github.io/boletin/" target="_blank" class="bg-cyan-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-cyan-700 transition duration-300 shadow-lg inline-flex items-center space-x-2 transform hover:scale-105">
308                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
309                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3h3m-3 4h3m-3 4h3" />
310                    </svg>
311                    <span data-lang="readNewsletter">Leer el último boletín</span>
312                 </a>
313            </div>
314        </div>
315    </section>
316
317    <!-- Sección Recursos -->
318    <section id="recursos" class="py-20 bg-white dark:bg-slate-900">
319        <div class="container mx-auto px-6">
320            <div class="text-center mb-12">
321                <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="resourcesTitle">Recursos y Guías</h2>
322                <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="resourcesSubtitle">Enlaces clave para empezar y profundizar en el Vibe Coding.</p>
323            </div>
324            <div class="max-w-4xl mx-auto">
325                <ul class="space-y-6">
326                    <li class="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700 p-6 rounded-lg shadow-sm hover:shadow-md transition hover:bg-blue-50 dark:hover:bg-slate-700 flex items-start space-x-4">
327                        <div class="flex-shrink-0 text-blue-500 dark:text-blue-400 mt-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20"/></svg></div>
328                        <div>
329                            <h3 class="text-xl font-semibold mb-2 text-blue-700 dark:text-blue-300" data-lang="resource1Title">Manual de Vibe Coding Educativo</h3>
330                            <p class="text-slate-600 dark:text-slate-300 mb-3" data-lang="resource1Desc">Una guía completa con extractos de artículos sobre cómo crear aplicaciones, dónde publicarlas y más.</p>
331                            <a href="https://labia.tiddlyhost.com/#Vibe%20Coding%20Educativo" target="_blank" class="font-semibold text-blue-600 dark:text-blue-400 hover:underline" data-lang="resourceLink">Acceder al manual &rarr;</a>
332                        </div>
333                    </li>
334                    <li class="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700 p-6 rounded-lg shadow-sm hover:shadow-md transition hover:bg-cyan-50 dark:hover:bg-slate-700 flex items-start space-x-4">
335                         <div class="flex-shrink-0 text-cyan-500 dark:text-cyan-400 mt-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7Z"/><path d="M18 8h-8"/><path d="M18 12h-8"/><path d="M12 16h-8"/></svg></div>
336                        <div>
337                            <h3 class="text-xl font-semibold mb-2 text-cyan-700 dark:text-cyan-300" data-lang="resource2Title">Cómo activar la IA en recursos educativos</h3>
338                            <p class="text-slate-600 dark:text-slate-300 mb-3" data-lang="resource2Desc">Aprende a integrar chatbots de IA (Grok, ChatGPT, etc.) en tus materiales digitales como Moodle, eXeLearning o Google Sites.</p>
339                            <a href="https://educacion.bilateria.org/como-activar-la-ia-con-html" target="_blank" class="font-semibold text-cyan-600 dark:text-cyan-400 hover:underline" data-lang="readArticle">Leer el artículo &rarr;</a>
340                        </div>
341                    </li>
342                </ul>
343            </div>
344        </div>
345    </section>
346
347    <!-- Sección Agente -->
348    <section id="agente" class="py-20 section-bg-even">
349        <div class="container mx-auto px-6">
350            <div class="text-center mb-12">
351                <h2 class="text-3xl md:text-4xl font-bold text-slate-900 dark:text-slate-100" data-lang="agentTitle">Agente NotebookLM</h2>
352                <p class="mt-4 text-lg text-slate-600 dark:text-slate-300 max-w-2xl mx-auto" data-lang="agentSubtitle">Tu asistente para resolver dudas sobre Vibe Coding Educativo al instante.</p>
353            </div>
354            <div class="max-w-2xl mx-auto text-center card p-8 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 border border-slate-100 dark:border-slate-700">
355                <p class="text-slate-600 dark:text-slate-300 mb-6" data-lang="agentDesc">Nuestro agente NotebookLM reúne el conocimiento compartido por la comunidad y te guía con respuestas contextualizadas y recursos recomendados.</p>
356                <p class="text-slate-600 dark:text-slate-300 mb-6" data-lang="agentNote">Hemos creado un nuevo agente experto con NotebookLM a partir de las conversaciones del grupo de Telegram, para que recibas respuestas alineadas con la experiencia colectiva.</p>
357                <a id="agent-open-button" href="https://notebooklm.google.com/notebook/8604babb-0861-43f0-8c96-152a49a509b3" class="bg-blue-600 text-white font-bold py-3 px-8 rounded-lg hover:bg-blue-700 transition duration-300 shadow-lg inline-flex items-center space-x-2 transform hover:scale-105">
358                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
359                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
360                    </svg>
361                    <span data-lang="agentButton">Abrir el Agente</span>
362                 </a>
363            </div>
364        </div>
365    </section>
366
367    <!-- Footer -->
368    <footer class="bg-slate-800 text-white">
369        <div class="container mx-auto px-6 py-8">
370            <div class="text-center">
371                <h3 class="text-2xl font-bold" data-lang="footerTitle">Participa, comparte, aprende y programa con propósito y vibe.</h3>
372                <div class="mt-6">
373                    <a href="https://t.me/vceduca" target="_blank" class="bg-amber-500 text-white font-bold py-3 px-6 rounded-lg hover:bg-amber-600 transition duration-300 shadow-lg transform hover:scale-105" data-lang="joinConversation">
374                        Únete a la conversación
375                    </a>
376                </div>
377            </div>
378            <div class="mt-12 text-center text-slate-400 text-sm">
379                 <p data-lang="footerCommunity">Comunidad Vibe Coding Educativo.</p>
380                <p class="mt-2">
381                    <a href="LICENSE.txt" class="hover:underline">Código: GPL v3</a>
382                    ·
383                    <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" class="hover:underline">Contenidos: CC BY-SA 4.0</a>
384                </p>
385            </div>
386        </div>
387    </footer>
388
389    
389<script src="assets/main.js"></script>
389
390    <!-- moved inline script to assets/main.js -->
391    <!-- legacy inline script removed -->
392
393</body>
394
395</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.