1<!DOCTYPE html> 2<html lang="es"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="referrer" content="strict-origin-when-cross-origin"> 7 <title>BoletÃn Vibe Coding Educativo</title> 8 9 <!-- Tailwind CSS via CDN (desarrollo). Nota: ignoramos el aviso de consola. --> 10
10<script src="https://cdn.tailwindcss.com"></script>
10 11
11<script> 12 tailwind.config = { darkMode: 'class' } 13 </script>
13 14 15 <!-- Marked.js for Markdown rendering --> 16
16<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
16 17 18 <!-- Google Fonts --> 19 <link rel="preconnect" href="https://fonts.googleapis.com"> 20 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 21 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet"> 22 23 <!-- Favicon --> 24 <link rel="icon" type="image/svg+xml" href="favicon.ico"> 25 26 <!-- Link to external CSS file --> 27 <link rel="stylesheet" href="style.css"> 28</head> 29<body class="bg-slate-50 dark:bg-slate-900 text-slate-800 dark:text-slate-200 transition-colors duration-300"> 30 31 <!-- Header --> 32 <header class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm shadow-lg sticky top-0 z-20 py-4 px-4 md:px-8"> 33 <div class="container mx-auto flex flex-col md:flex-row justify-between items-center gap-4"> 34 <div class="flex items-center gap-4"> 35 <img src="https://vibe-coding-educativo.github.io/vibe_coding_educativo.png" alt="Logo Vibe Coding Educativo" class="h-12 md:h-14 w-auto"> 36 <div class="text-left"> 37 <h1 class="text-xl md:text-2xl font-bold text-slate-900 dark:text-white"> 38 BoletÃn Semanal <a href="https://vibe-coding-educativo.github.io" target="_blank" rel="noopener noreferrer" class="text-amber-600 dark:text-amber-500 hover:underline">Vibe Coding Educativo</a> 39 </h1> 40 <p class="text-sm text-slate-500 dark:text-slate-400">Resumen de conversaciones del grupo de Telegram</p> 41 </div> 42 </div> 43 <div class="flex items-center gap-4"> 44 <button id="theme-toggle" class="p-2 rounded-md text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 transition-colors" aria-label="Cambiar tema"> 45 <!-- SVG icon will be injected here by JS --> 46 </button> 47 <select id="year-selector" class="bg-slate-200 dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 rounded-md shadow-sm focus:border-amber-500 focus:ring focus:ring-amber-500 focus:ring-opacity-50"></select> 48 </div> 49 </div> 50 </header> 51 52 <!-- Main Content --> 53 <main class="container mx-auto p-4 md:p-8"> 54 55 <!-- Filters and Search --> 56 <div class="mb-8 p-4 bg-white dark:bg-slate-800 rounded-lg shadow-md"> 57 <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> 58 <div> 59 <label for="search-input" class="block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1">Buscar</label> 60 <input type="text" id="search-input" placeholder="Buscar por tÃtulo, resumen..." class="w-full rounded-md shadow-sm bg-slate-200 dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 focus:border-amber-500 focus:ring focus:ring-amber-500 focus:ring-opacity-50"> 61 </div> 62 <div> 63 <label for="month-filter" class="block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1">Filtrar por Mes</label> 64 <select id="month-filter" class="w-full rounded-md shadow-sm bg-slate-200 dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 focus:border-amber-500 focus:ring focus:ring-amber-500 focus:ring-opacity-50"> 65 <option value="">Todos los meses</option> 66 </select> 67 </div> 68 <div> 69 <label for="week-filter" class="block text-sm font-medium text-slate-600 dark:text-slate-300 mb-1">Filtrar por Semana</label> 70 <select id="week-filter" class="w-full rounded-md shadow-sm bg-slate-200 dark:bg-slate-700 border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100 focus:border-amber-500 focus:ring focus:ring-amber-500 focus:ring-opacity-50"> 71 <option value="">Todos las semanas</option> 72 </select> 73 </div> 74 </div> 75 </div> 76 77 <!-- Loading Spinner --> 78 <div id="loader" class="flex justify-center items-center py-20">
79 <div class="loader ease-linear rounded-full border-8 border-t-8 border-slate-200 dark:border-slate-600 h-32 w-32" style="border-top-color: #f59e0b;"></div> 80 </div> 81 82 <!-- No Results Message --> 83 <div id="no-results" class="text-center py-20 hidden"> 84 <h2 class="text-2xl font-bold text-slate-600 dark:text-slate-400">No se encontraron boletines</h2> 85 <p class="text-slate-500 dark:text-slate-500 mt-2">Prueba a cambiar los filtros o el término de búsqueda.</p> 86 </div> 87 88 <!-- Newsletter Grid --> 89 <div id="newsletter-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 loaded"></div> 90 </main> 91 92 <!-- Modal for full newsletter --> 93 <div id="modal" class="fixed inset-0 bg-black/70 z-50 hidden items-center justify-center p-0"> 94 <div class="bg-white dark:bg-slate-900 w-full h-full flex flex-col"> 95 <!-- Header --> 96 <div class="flex justify-between items-center p-4 md:p-6 border-b border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm sticky top-0 z-10"> 97 <div class="flex-1 min-w-0"> 98 <h2 id="modal-title" class="text-xl md:text-2xl font-bold text-slate-900 dark:text-white truncate pr-4"></h2> 99 <p id="modal-date" class="text-sm text-amber-600 dark:text-amber-400 font-medium mt-1"></p> 100 </div> 101 <div class="flex items-center gap-3"> 102 <!-- Quick navigation --> 103 <nav class="hidden md:flex items-center gap-3 text-sm"> 104 <button id="nav-content" class="text-slate-600 dark:text-slate-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors">Contenido</button> 105 <span class="text-slate-300 dark:text-slate-600">|</span> 106 <button id="nav-faq" class="text-slate-600 dark:text-slate-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors">FAQ</button> 107 <span class="text-slate-300 dark:text-slate-600">|</span> 108 <button id="modal-share" class="text-slate-600 dark:text-slate-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors flex items-center gap-1" title="Copiar enlace directo"> 109 <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 110 <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/> 111 <polyline points="16,6 12,2 8,6"/> 112 <line x1="12" y1="2" x2="12" y2="15"/> 113 </svg> 114 Compartir 115 </button> 116 <span class="text-slate-300 dark:text-slate-600">|</span> 117 <button id="toggle-reading-mode" class="text-slate-600 dark:text-slate-400 hover:text-amber-600 dark:hover:text-amber-400 transition-colors"> 118 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 119 <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/> 120 <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/> 121 </svg> 122 </button> 123 </nav> 124 <button id="modal-close" class="text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white text-2xl p-1">×</button> 125 </div> 126 </div> 127 128 <!-- Content --> 129 <div class="flex-1 overflow-hidden"> 130 <div class="h-full flex"> 131 <!-- Main content area --> 132 <div class="flex-1 overflow-y-auto"> 133 <div class="max-w-4xl mx-auto"> 134 <!-- Media section --> 135 <div id="modal-video-container" class="w-full"></div> 136 137 <!-- Article-style content --> 138 <article class="max-w-3xl mx-auto px-6 md:px-8 py-8">
139 <div id="modal-body-content" class="prose prose-custom prose-lg max-w-none"></div> 140 </article> 141 </div> 142 </div> 143 144 <!-- Sidebar --> 145 <aside id="modal-sidebar" class="hidden lg:block w-80 bg-slate-50 dark:bg-slate-800/50 border-l border-slate-200 dark:border-slate-700 overflow-y-auto"> 146 <div class="p-6"> 147 <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Preguntas Frecuentes</h3> 148 <div id="modal-faq-content" class="prose prose-custom prose-sm max-w-none"></div> 149 </div> 150 </aside> 151 </div> 152 153 <!-- Mobile FAQ/TOC section --> 154 <section id="mobile-content-section" class="lg:hidden border-t border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-800/50"> 155 <div class="max-w-3xl mx-auto px-6 md:px-8 py-8"> 156 <h3 id="mobile-section-title" class="text-xl font-semibold text-slate-900 dark:text-white mb-4">Preguntas Frecuentes</h3> 157 <div id="mobile-section-content" class="prose prose-custom max-w-none"></div> 158 </div> 159 </section> 160 </div> 161 </div> 162 </div> 163 164 <!-- Footer --> 165 <footer id="page-footer" class="mt-12 py-6 border-t border-slate-200 dark:border-slate-700 text-center text-slate-500 dark:text-slate-400 text-sm"> 166 <a href="https://vibe-coding-educativo.github.io/" target="_blank" rel="noopener noreferrer" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors"> 167 Visita la web de Vibe Coding Educativo 168 </a> 169 </footer> 170 171 <!-- Link to external JS file --> 172
172<script src="script.js" defer></script>
172 173</body> 174</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.