vibe-coding-tutorial/index.html at main · alejandrorivas-pixel/vibe-coding-tutorial · GitHub

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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vibe Coding Academy - Terminal Interactiva</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- PANTALLA DE BIENVENIDA -->
    <div id="welcome-screen" class="welcome-screen">
        <div class="welcome-content">
            <div class="logo-ascii">
 ██╗   ██╗██╗██████╗ ███████╗
 ██║   ██║██║██╔══██╗██╔════╝
 ██║   ██║██║██████╔╝█████╗
 ╚██╗ ██╔╝██║██╔══██╗██╔══╝
  ╚████╔╝ ██║██████╔╝███████╗
   ╚═══╝  ╚═╝╚═════╝ ╚══════╝
   CODING ACADEMY
            </div>
            <h1>Bienvenido a Vibe Coding Academy</h1>
            <p class="welcome-subtitle">Tu camino de empresario a creador de tecnología comienza aquí.</p>
            <p class="welcome-desc">No necesitas saber programar. No necesitas experiencia técnica.<br>
            Solo necesitas curiosidad y ganas de aprender.</p>
            <div class="welcome-features">
                <div class="feature">
                    <span class="feature-icon">🖥️</span>
                    <span>Terminal interactiva simulada</span>
                </div>
                <div class="feature">
                    <span class="feature-icon">📚</span>
                    <span>8 módulos progresivos</span>
                </div>
                <div class="feature">
                    <span class="feature-icon">🎯</span>
                    <span>Ejercicios prácticos reales</span>
                </div>
                <div class="feature">
                    <span class="feature-icon">🤖</span>
                    <span>Aprende a usar IA para programar</span>
                </div>
            </div>
            <button id="start-btn" class="start-btn" onclick="startApp()">
                ▶ Comenzar mi viaje
            </button>
            <p class="welcome-hint">Tiempo estimado: aprende a tu ritmo, módulo por módulo</p>
        </div>
    </div>

    <!-- APP PRINCIPAL -->
    <div id="main-app" class="main-app hidden">
        <!-- SIDEBAR -->
        <nav id="sidebar" class="sidebar">
            <div class="sidebar-header">
                <h2>🚀 Vibe Coding</h2>
                <button class="sidebar-toggle" onclick="toggleSidebar()">☰</button>
            </div>
            <div class="progress-bar-container">
                <div class="progress-bar" id="global-progress"></div>
                <span class="progress-text" id="progress-text">0% completado</span>
            </div>
            <ul class="module-list" id="module-list">
                <!-- Se genera dinámicamente -->
            </ul>
            <div class="sidebar-footer">
                <button class="mode-toggle" id="mode-toggle" onclick="toggleMode()">
                    🎯 Cambiar a Modo Práctica
                </button>
                <button class="glossary-btn" onclick="openGlossary()">
                    📖 Glosario de Términos
                </button>
                <button class="reset-btn" onclick="resetProgress()">
                    🔄 Reiniciar Progreso
                </button>
            </div>
        </nav>

        <!-- CONTENIDO PRINCIPAL -->
        <main class="content-area">
            <!-- Panel de lección -->
            <div id="lesson-panel" class="lesson-panel">
                <div class="lesson-header">
                    <span class="lesson-badge" id="lesson-badge">MÓDULO 1</span>
                    <h1 id="lesson-title">Cargando...</h1>
                </div>
                <div class="lesson-body" id="lesson-body">
                    <!-- Contenido de lección dinámico -->
                </div>
                <div class="lesson-nav">
                    <button id="prev-btn" onclick="prevLesson()" class="nav-btn">← Anterior</button>
                    <span id="lesson-counter" class="lesson-counter">1 / 1</span>
                    <button id="next-btn" onclick="nextLesson()" class="nav-btn nav-btn-primary">Siguiente →</button>
                </div>
            </div>

            <!-- TERMINAL SIMULADA -->
            <div id="terminal-container" class="terminal-container">
                <div class="terminal-header">
                    <div class="terminal-dots">
                        <span class="dot red"></span>
                        <span class="dot yellow"></span>
                        <span class="dot green"></span>
                    </div>
                    <span class="terminal-title" id="terminal-title">Terminal — vibe-coding-academy</span>
                    <div class="terminal-actions">
                        <button class="terminal-action-btn" onclick="clearTerminal()" title="Limpiar terminal">🗑️</button>
                        <button class="terminal-action-btn" onclick="showHelp()" title="Ayuda">❓</button>
                    </div>
                </div>
                <div class="terminal-body" id="terminal-body">
                    <div id="terminal-output" class="terminal-output"></div>
                    <div class="terminal-input-line">
                        <span class="terminal-prompt" id="terminal-prompt">~/proyecto $</span>
                        <input type="text" id="terminal-input" class="terminal-input"
                               autocomplete="off" spellcheck="false"
                               placeholder="Escribe un comando aquí...">
                    </div>
                </div>
            </div>
        </main>

        <!-- PANEL DE GLOSARIO (MODAL) -->
        <div id="glossary-modal" class="modal hidden">
            <div class="modal-content glossary-content">
                <div class="modal-header">
                    <h2>📖 Glosario de Términos Tech</h2>
                    <button class="modal-close" onclick="closeGlossary()">✕</button>
                </div>
                <input type="text" id="glossary-search" class="glossary-search"
                       placeholder="🔍 Buscar término..." oninput="filterGlossary()">
                <div id="glossary-list" class="glossary-list">
                    <!-- Se genera dinámicamente -->
                </div>
            </div>
        </div>

        <!-- PANEL DE LOGRO -->
        <div id="achievement-popup" class="achievement-popup hidden">
            <div class="achievement-content">
                <span class="achievement-icon">🏆</span>
                <div>
                    <strong id="achievement-title">¡Logro Desbloqueado!</strong>
                    <p id="achievement-desc">Descripción del logro</p>
                </div>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>