-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
255 lines (224 loc) · 11.3 KB
/
index.html
File metadata and controls
255 lines (224 loc) · 11.3 KB
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dev-Log | Tu Bitácora de Aprendizaje</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!-- Sidebar Navigation -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-header">
<h1>📝 Dev-Log</h1>
<p>Tu bitácora de aprendizaje</p>
</div>
<nav class="sidebar-nav">
<button class="nav-item active" data-section="dashboard" aria-current="page"
aria-label="Dashboard - Ir a sección principal">
<span aria-hidden="true">📊</span>
<span>Dashboard</span>
</button>
<button class="nav-item" data-section="entradas" aria-label="Mis Entradas - Ver todas tus entradas">
<span aria-hidden="true">📝</span>
<span>Mis Entradas</span>
</button>
<button class="nav-item" data-section="recursos" aria-label="Recursos - Acceder a recursos recomendados">
<span aria-hidden="true">📚</span>
<span>Recursos</span>
</button>
<button class="nav-item" data-section="estadisticas"
aria-label="Estadísticas - Ver análisis de tus entradas">
<span aria-hidden="true">📈</span>
<span>Estadísticas</span>
</button>
</nav>
<div class="sidebar-footer">
<p>v1.0 Dashboard Edition</p>
<p>Desarrollo moderno 🚀</p>
</div>
</aside>
<!-- Toggle Button para Mobile -->
<button class="sidebar-toggle" id="sidebarToggle">☰</button>
<!-- Main Content -->
<div class="main-content" id="mainContent">
<div id="container">
<!-- SECCIÓN: DASHBOARD -->
<section class="section-content active" data-section="dashboard" id="dashboard">
<header class="hero">
<h1>📊 Dashboard</h1>
<p>Tu espacio personal para registrar aprendizaje y progreso.</p>
</header>
<section class="log-creator">
<textarea id="logInput" placeholder="¿Qué aprendiste hoy? ¿Qué problema lograste resolver?"
aria-label="Campo de entrada para nueva entrada"></textarea>
<div class="actions">
<div class="stats-badge">
<span id="logCounter">0</span> entradas registradas
</div>
<button id="saveBtn" class="btn-save" aria-label="Guardar nueva entrada (Ctrl + Enter)">Guardar
Entrada</button>
</div>
</section>
<section class="feed">
<div class="feed-header">
<h2>📝 Entradas recientes</h2>
</div>
<div id="feedGrid" class="feed-grid">
<!-- Las cards se inyectarán aquí mediante JS -->
</div>
</section>
</section>
<!-- SECCIÓN: MIS ENTRADAS -->
<section class="section-content" data-section="entradas" id="entradas">
<header class="hero">
<h1>📝 Mis Entradas</h1>
<p>Todas tus anotaciones y reflexiones en un solo lugar.</p>
</header>
<div class="filters-bar">
<input type="search" id="searchInput" placeholder="🔍 Buscar en tus entradas..."
class="search-input" aria-label="Buscar entradas">
<select id="sortSelect" class="sort-select" aria-label="Ordenar entradas">
<option value="reciente">Más recientes primero</option>
<option value="antiguo">Más antiguas primero</option>
<option value="alfabetico">Orden alfabético</option>
</select>
</div>
<div id="allEntriesGrid" class="feed-grid entries-full">
<!-- Todas las entradas se mostrarán aquí -->
</div>
<div class="empty-state" id="emptyEntries" style="display: none;">
<p>📭 Aún no tienes entradas. ¡Crea una en el Dashboard!</p>
</div>
</section>
<!-- SECCIÓN: RECURSOS -->
<section class="section-content" data-section="recursos" id="recursos">
<header class="hero">
<h1>📚 Recursos Recomendados</h1>
<p>Herramientas y referencias para potenciar tu aprendizaje.</p>
</header>
<section class="resources">
<div class="resources-grid">
<article class="resource-card">
<div class="card-meta">
<span class="badge">Git</span>
</div>
<div class="resource-body">
<h3>Oh My Git!</h3>
<p>Un juego interactivo para aprender el funcionamiento interno de Git de forma visual.
</p>
<a href="https://ohmygit.org/" target="_blank" rel="noopener noreferrer"
class="resource-link">Explorar recurso ↗</a>
</div>
</article>
<article class="resource-card">
<div class="card-meta">
<span class="badge">Frontend</span>
</div>
<div class="resource-body">
<h3>MDN Web Docs</h3>
<p>La fuente de verdad definitiva para HTML, CSS y JavaScript moderno.</p>
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer"
class="resource-link">Explorar recurso ↗</a>
</div>
</article>
<article class="resource-card">
<div class="card-meta">
<span class="badge">Backend</span>
</div>
<div class="resource-body">
<h3>Node.js Docs</h3>
<p>Documentación oficial de Node.js para desarrollo backend moderno.</p>
<a href="https://nodejs.org/docs/" target="_blank" rel="noopener noreferrer"
class="resource-link">Explorar recurso ↗</a>
</div>
</article>
<article class="resource-card">
<div class="card-meta">
<span class="badge">Database</span>
</div>
<div class="resource-body">
<h3>MongoDB University</h3>
<p>Cursos gratuitos sobre MongoDB y desarrollo con bases de datos NoSQL.</p>
<a href="https://learn.mongodb.com/" target="_blank" rel="noopener noreferrer"
class="resource-link">Explorar recurso ↗</a>
</div>
</article>
<article class="resource-card">
<div class="card-meta">
<span class="badge">IA</span>
</div>
<div class="resource-body">
<h3>Vibe Coding Guide</h3>
<p>Conceptos clave para dominar el desarrollo asistido por IA y flujos iterativos.</p>
<a href="#" class="resource-link">Explorar recurso ↗</a>
</div>
</article>
<article class="resource-card">
<div class="card-meta">
<span class="badge">DevTools</span>
</div>
<div class="resource-body">
<h3>VS Code Extensions</h3>
<p>Las mejores extensiones para optimizar tu flujo de desarrollo.</p>
<a href="https://marketplace.visualstudio.com/" target="_blank"
rel="noopener noreferrer" class="resource-link">Explorar recurso ↗</a>
</div>
</article>
</div>
</section>
</section>
<!-- SECCIÓN: ESTADÍSTICAS -->
<section class="section-content" data-section="estadisticas" id="estadisticas">
<header class="hero">
<h1>📈 Estadísticas</h1>
<p>Visualiza tu progreso y análisis de aprendizaje.</p>
</header>
<div class="stats-container">
<div class="stat-card">
<div class="stat-icon">📝</div>
<div class="stat-content">
<h3>Total de Entradas</h3>
<p class="stat-value" id="statTotalEntries">0</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">🔥</div>
<div class="stat-content">
<h3>Racha Actual</h3>
<p class="stat-value" id="statStreak">0 días</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">📅</div>
<div class="stat-content">
<h3>Días Activos</h3>
<p class="stat-value" id="statActiveDays">0</p>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">⏱️</div>
<div class="stat-content">
<h3>Promedio por Entrada</h3>
<p class="stat-value" id="statAvgLength">0 caracteres</p>
</div>
</div>
</div>
<div class="stats-section">
<h2>📊 Análisis por Tema</h2>
<div id="themeAnalysis" class="theme-grid">
<!-- Se generará dinámicamente -->
</div>
</div>
<div class="stats-section">
<h2>📆 Actividad Reciente</h2>
<div id="recentActivity" class="activity-list">
<!-- Se generará dinámicamente -->
</div>
</div>
</section>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>