-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
483 lines (463 loc) · 27.2 KB
/
index.html
File metadata and controls
483 lines (463 loc) · 27.2 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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>GymTech SENA - Presentación</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body class="theme-dark">
<!-- Header fijo -->
<header class="site-header" role="banner">
<div class="header-inner">
<div class="branding">
<img src="images/logo.png" alt="Logo GymTech SENA" class="logo" />
<span class="project-name">GymTech SENA</span>
</div>
<div class="actions">
<button id="pdfViewerBtn" class="btn-pdf" aria-label="Ver IEEE" title="Ver IEEE">
<i class="bi bi-file-earmark-pdf"></i>
<span class="label">Ver IEEE</span>
</button>
<button id="themeToggle" class="toggle-theme" aria-label="Cambiar tema" title="Cambiar tema">
<span class="sun">☀️</span>
<span class="moon">🌙</span>
</button>
</div>
</div>
</header>
<!-- Contenido principal con vistas -->
<main id="content" class="view-container" role="main">
<section id="inicio" class="view view-hero" data-view="inicio">
<div class="hero">
<div class="hero-left">
<h1 class="hero-title">Transforma tu <span class="accent">Gimnasio</span> con Tecnología</h1>
<p class="hero-subtitle">Soluciones innovadoras para el manejo y control de tu centro deportivo</p>
<div class="team-card">
<div class="team-card-header">
<i class="bi bi-people-fill"></i>
<h2 class="team-title">Integrantes</h2>
</div>
<ul class="team-list">
<li class="team-item"><span class="avatar"><i class="bi bi-person-badge"></i></span><span class="name">Andres Felipe Rivera Sanchez</span></li>
<li class="team-item"><span class="avatar"><i class="bi bi-person-badge"></i></span><span class="name">Daniel Salazar Loaiza</span></li>
<li class="team-item"><span class="avatar"><i class="bi bi-person-badge"></i></span><span class="name">Jhoan Sebastian Zuluaga</span></li>
<li class="team-item"><span class="avatar"><i class="bi bi-person-badge"></i></span><span class="name">Julian David Marulanda Leon</span></li>
</ul>
</div>
<div class="hero-ctas">
<a href="#introduccion" class="btn cta-primary">Conoce Más</a>
<a href="#diagrama-clases" class="btn cta-secondary">Ver Diagramas</a>
</div>
</div>
<div class="hero-right">
<figure class="hero-image-wrap" id="heroImageWrap" aria-hidden="true">
<img src="images/gym.jpg" alt="Imagen del gimnasio" class="hero-image" id="heroImage" />
</figure>
</div>
</div>
</section>
<!-- Funcionalidad del Proyecto -->
<section id="funcionalidad" class="view view-intro view-feature" data-view="funcionalidad" hidden>
<h1 class="section-title"><i class="bi bi-gear-wide-connected title-icon" aria-hidden="true"></i> Funcionalidad del Proyecto</h1>
<div class="feature-card">
<!-- Herramientas utilizadas -->
<div class="feature-block">
<h2 class="feature-subtitle"><i class="bi bi-tools"></i> Herramientas utilizadas</h2>
<div class="card-grid" aria-label="Herramientas utilizadas">
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-code-slash"></i></div>
<div class="card-title">Visual Studio Code</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-server"></i></div>
<div class="card-title">XAMPP</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-database"></i></div>
<div class="card-title">DBeaver</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-database"></i></div>
<div class="card-title">MySQL Workbench</div>
</div>
</div>
</div>
<!-- Tecnologías Implementadas -->
<div class="feature-block">
<h2 class="feature-subtitle"><i class="bi bi-cpu"></i> Tecnologías Implementadas</h2>
<div class="card-grid" aria-label="Tecnologías Implementadas">
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-code-square"></i></div>
<div class="card-title">Dart</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-database"></i></div>
<div class="card-title">PostgreSQL</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-vector-pen"></i></div>
<div class="card-title">Figma</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-git"></i></div>
<div class="card-title">Git</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-github"></i></div>
<div class="card-title">GitHub</div>
</div>
</div>
</div>
<!-- FrameWorks -->
<div class="feature-block">
<h2 class="feature-subtitle"><i class="bi bi-box-seam"></i> FrameWorks</h2>
<div class="card-grid" aria-label="FrameWorks">
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-phone"></i></div>
<div class="card-title">Flutter</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-server"></i></div>
<div class="card-title">NodeJS</div>
</div>
</div>
</div>
<!-- Librerías -->
<div class="feature-block">
<h2 class="feature-subtitle"><i class="bi bi-collection"></i> Librerías</h2>
<div class="card-grid" aria-label="Librerías">
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-star"></i></div>
<div class="card-title">cupertino_icons</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-fonts"></i></div>
<div class="card-title">google_fonts</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-grid-3x3"></i></div>
<div class="card-title">iconsax</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-phone-vibrate"></i></div>
<div class="card-title">mobile_scanner</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-qr-code"></i></div>
<div class="card-title">pretty_qr_code</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-globe"></i></div>
<div class="card-title">intl</div>
</div>
<div class="card-item" role="button" tabindex="0">
<div class="card-icon"><i class="bi bi-image"></i></div>
<div class="card-title">image_picker</div>
</div>
</div>
</div>
<!-- Metodología -->
<div class="feature-block">
<h2 class="feature-subtitle"><i class="bi bi-diagram-3"></i> Metodología</h2>
<div class="methodology">
<h3 class="tech-title"><i class="bi bi-collection"></i> Metodología Scrum</h3>
<ol class="scrum-list">
<li class="scrum-step">
<span class="step-number">1</span>
<div class="step-body"><span class="step-title"><i class="bi bi-people"></i> Roles definidos</span><span class="step-desc">Product Owner, Scrum Master y equipo de desarrollo.</span></div>
</li>
<li class="scrum-step">
<span class="step-number">2</span>
<div class="step-body"><span class="step-title"><i class="bi bi-speedometer2"></i> Sprints</span><span class="step-desc">Ciclos cortos para entregar avances funcionales.</span></div>
</li>
<li class="scrum-step">
<span class="step-number">3</span>
<div class="step-body"><span class="step-title"><i class="bi bi-calendar-event"></i> Daily Scrum</span><span class="step-desc">Reuniones diarias para revisar el progreso.</span></div>
</li>
<li class="scrum-step">
<span class="step-number">4</span>
<div class="step-body"><span class="step-title"><i class="bi bi-arrow-repeat"></i> Revisión y retrospectiva</span><span class="step-desc">Evaluar entregas y mejorar el proceso.</span></div>
</li>
<li class="scrum-step">
<span class="step-number">5</span>
<div class="step-body"><span class="step-title"><i class="bi bi-list-check"></i> Backlog priorizado</span><span class="step-desc">Lista de tareas ordenadas por prioridad.</span></div>
</li>
</ol>
</div>
</div>
</div>
</section>
<!-- Justificación -->
<section id="justificacion" class="view view-intro" data-view="justificacion" hidden>
<h1 class="section-title"><i class="bi bi-clipboard-check title-icon" aria-hidden="true"></i> Justificación</h1>
<div class="intro-card mt-card just-card">
<div class="mt-layout">
<div class="mt-content">
<p class="mt-text">
El gimnasio del SENA Caldas requiere modernización, ya que muchas tareas se realizan manualmente. GymTech SENA surge como una solución digital para optimizar la gestión, mejorar la experiencia de los usuarios y fomentar el bienestar institucional.
</p>
<div class="mt-chips" aria-label="Palabras clave de la justificación">
<span class="chip"><i class="bi bi-check2-all"></i> Optimización</span>
<span class="chip"><i class="bi bi-check2-all"></i> Experiencia de Usuario</span>
<span class="chip"><i class="bi bi-check2-all"></i> Bienestar</span>
<span class="chip"><i class="bi bi-check2-all"></i> Modernización</span>
</div>
</div>
<div class="mt-illustration" aria-hidden="true">
<div class="mt-figure">
<i class="bi bi-check2-all"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Planteamiento del problema -->
<section id="planteamiento" class="view view-intro" data-view="planteamiento" hidden>
<h1 class="section-title"><i class="bi bi-question-diamond-fill title-icon" aria-hidden="true"></i> Planteamiento del Problema</h1>
<div class="intro-card mt-card">
<div class="mt-layout">
<div class="mt-illustration" aria-hidden="true">
<div class="mt-figure">
<i class="bi bi-question-diamond-fill"></i>
</div>
</div>
<div class="mt-content">
<p class="mt-text">
El gimnasio del Centro de Procesos Industriales del SENA Caldas presenta dificultades por no contar con un sistema digital unificado, lo que genera pérdida de información, duplicidad de tareas y errores. Además, la falta de una plataforma multiplataforma limita el acceso y afecta la experiencia de usuarios y entrenadores.
</p>
<div class="mt-chips" aria-label="Palabras clave de la justificación">
<span class="chip"><i class="bi bi-link-45deg"></i> Sistema Unificado</span>
<span class="chip"><i class="bi bi-device-hdd"></i> Multiplataforma</span>
<span class="chip"><i class="bi bi-bug"></i> Reducción de Errores</span>
<span class="chip"><i class="bi bi-people"></i> Mejor Experiencia</span>
<span class="chip"><i class="bi bi-shield-check"></i> Confiabilidad</span>
</div>
</div>
</div>
</div>
</section>
<!-- Introducción -->
<section id="introduccion" class="view view-intro" data-view="introduccion" hidden>
<h1 class="section-title"><i class="bi bi-info-circle title-icon" aria-hidden="true"></i> Introducción</h1>
<div class="intro-card">
<div class="intro-logo-wrap" aria-hidden="true">
<img src="images/logo.png" alt="Logo GymTech SENA" class="intro-logo" />
</div>
<p class="intro-text">
GymTech SENA optimiza el uso del gimnasio con una aplicación que gestiona horarios y accesos de forma segura y equitativa. Ofrece un entorno organizado para la comunidad del SENA y mejora la experiencia de los usuarios. Promueve hábitos saludables y el bienestar institucional.
</p>
</div>
</section>
<!-- Marco Legal -->
<section id="marco-legal" class="view view-intro" data-view="marco-legal" hidden>
<h1 class="section-title"><i class="bi bi-file-earmark-text title-icon" aria-hidden="true"></i> Marco Legal</h1>
<div class="cards-grid">
<article class="intro-card legal-card">
<div class="card-icon"><i class="bi bi-clipboard-check"></i></div>
<h3 class="card-title">Ley 1341 de 2009</h3>
<p>
Establece principios y disposiciones sobre la sociedad de la información y promueve el acceso, uso y apropiación de las Tecnologías de la Información y las Comunicaciones (TIC) como herramientas para el desarrollo social y económico del país.
</p>
</article>
<article class="intro-card legal-card">
<div class="card-icon"><i class="bi bi-shield-lock"></i></div>
<h3 class="card-title">Ley 1581 de 2012</h3>
<p>
Regula la protección de datos personales. El sistema GymTech deberá garantizar la confidencialidad, seguridad y uso adecuado de la información de los usuarios del gimnasio, en cumplimiento con esta normativa.
</p>
</article>
<article class="intro-card legal-card">
<div class="card-icon"><i class="bi bi-database"></i></div>
<h3 class="card-title">Ley 1266 de 2008</h3>
<p>
Regula el habeas data financiero y el manejo de la información en bases de datos, lo cual es relevante para el manejo responsable de la información de los usuarios del sistema.
</p>
</article>
</div>
</section>
<!-- Objetivos y Funcionalidades -->
<section id="objetivos" class="view view-intro" data-view="objetivos" hidden>
<h1 class="section-title"><i class="bi bi-flag title-icon" aria-hidden="true"></i> Objetivos y Funcionalidades</h1>
<div class="cards-grid goals-grid">
<article class="intro-card goal-card goal-general">
<h3 class="card-title">Objetivo General</h3>
<div class="mt-layout">
<div class="mt-illustration" aria-hidden="true">
<div class="mt-figure">
<i class="bi bi-bullseye"></i>
</div>
</div>
<div class="mt-content">
<p>
Crear una herramienta software para mejorar la gestión y el control de los aprendices y sus horarios en el ambiente del gimnasio.
</p>
<div class="mt-chips" aria-label="Pilares del objetivo">
<span class="chip"><i class="bi bi-speedometer2"></i> Eficiencia</span>
<span class="chip"><i class="bi bi-people"></i> Gestión de Aprendices</span>
<span class="chip"><i class="bi bi-clock"></i> Horarios</span>
<span class="chip"><i class="bi bi-shield-check"></i> Acceso Seguro</span>
</div>
</div>
</div>
</article>
<article class="intro-card goal-card goal-specific">
<h3 class="card-title">Funcionalidades</h3>
<ul class="icon-list">
<li><i class="bi bi-check2-circle" aria-hidden="true"></i><span>Mejorar la gestión y el control de los aprendices y sus horarios en el ambiente del gimnasio.</span></li>
<li><i class="bi bi-check2-circle" aria-hidden="true"></i><span>Integrar y relacionar la información de los aprendices en una plataforma centralizada para facilitar la administración de los miembros.</span></li>
<li><i class="bi bi-check2-circle" aria-hidden="true"></i><span>Establecer un sistema de control de acceso por horarios para organizar el uso del gimnasio y mejorar la distribución del espacio.</span></li>
</ul>
<div class="mt-chips" aria-label="Aspectos clave de objetivos específicos">
<span class="chip"><i class="bi bi-clipboard-check"></i> Gestión</span>
<span class="chip"><i class="bi bi-diagram-3"></i> Integración de Datos</span>
<span class="chip"><i class="bi bi-hdd-network"></i> Centralización</span>
<span class="chip"><i class="bi bi-clock"></i> Control de Horarios</span>
</div>
</article>
</div>
</section>
<!-- Necesidades -->
<section id="necesidades" class="view view-intro" data-view="necesidades" hidden>
<h1 class="section-title"><i class="bi bi-list-check title-icon" aria-hidden="true"></i> Necesidades</h1>
<div class="cards-grid needs-grid">
<article class="intro-card need-card">
<div class="card-icon"><i class="bi bi-gear"></i></div>
<h3 class="card-title">Optimización de la Gestión</h3>
<p>Optimizar la gestión del gimnasio, eliminando procesos manuales y desorganizados.</p>
</article>
<article class="intro-card need-card">
<div class="card-icon"><i class="bi bi-robot"></i></div>
<h3 class="card-title">Automatización de Control</h3>
<p>Automatizar el control de usuarios, asistencia y asignación de rutinas.</p>
</article>
<article class="intro-card need-card">
<div class="card-icon"><i class="bi bi-hdd-network"></i></div>
<h3 class="card-title">Centralización de Información</h3>
<p>Centralizar la información para facilitar la toma de decisiones y reducir errores.</p>
</article>
<article class="intro-card need-card">
<div class="card-icon"><i class="bi bi-cpu"></i></div>
<h3 class="card-title">Modernización de Procesos</h3>
<p>Modernizar los procesos institucionales, alineados con la transformación digital del SENA.</p>
</article>
<article class="intro-card need-card">
<div class="card-icon"><i class="bi bi-person-check"></i></div>
<h3 class="card-title">Mejor Experiencia de Usuario</h3>
<p>Mejorar la experiencia de los aprendices, brindando acceso ágil, seguro y personalizado.</p>
</article>
<article class="intro-card need-card">
<div class="card-icon"><i class="bi bi-heart-fill"></i></div>
<h3 class="card-title">Bienestar y Participación</h3>
<p>Fomentar el bienestar físico y la participación activa de los aprendices en entornos saludables.</p>
</article>
</div>
</section>
<!-- Diagrama de Clases -->
<section id="diagrama-clases" class="view view-intro view-diagram" data-view="diagrama-clases" hidden>
<h1 class="section-title"><i class="bi bi-diagram-2 title-icon" aria-hidden="true"></i> Diagrama de Clases</h1>
<div class="intro-card diagram-card image-viewer" data-zoom>
<div class="zoom-controls" aria-label="Controles de zoom">
<button class="btn-zoom" data-action="in" title="Acercar"><i class="bi bi-zoom-in"></i></button>
<button class="btn-zoom" data-action="out" title="Alejar"><i class="bi bi-zoom-out"></i></button>
<button class="btn-zoom" data-action="reset" title="Restablecer"><i class="bi bi-arrow-counterclockwise"></i></button>
</div>
<img src="images/Clases_PNG.png" alt="Diagrama de Clases" class="viewer-img" />
</div>
</section>
<!-- Modelo Relacional -->
<section id="diagrama-er" class="view view-intro view-diagram" data-view="diagrama-er" hidden>
<h1 class="section-title"><i class="bi bi-diagram-3 title-icon" aria-hidden="true"></i> Modelo Relacional</h1>
<div class="intro-card diagram-card image-viewer" data-zoom>
<div class="zoom-controls" aria-label="Controles de zoom">
<button class="btn-zoom" data-action="in" title="Acercar"><i class="bi bi-zoom-in"></i></button>
<button class="btn-zoom" data-action="out" title="Alejar"><i class="bi bi-zoom-out"></i></button>
<button class="btn-zoom" data-action="reset" title="Restablecer"><i class="bi bi-arrow-counterclockwise"></i></button>
</div>
<img src="images/Modelo_Relacional.png" alt="Modelo Relacional" class="viewer-img" />
</div>
</section>
<!-- Impactos -->
<section id="impactos" class="view view-intro" data-view="impactos" hidden>
<h1 class="section-title"><i class="bi bi-lightning title-icon" aria-hidden="true"></i> Impactos del proyecto</h1>
<div class="cards-grid">
<article class="intro-card legal-card">
<div class="card-icon"><i class="bi bi-cpu"></i></div>
<h3 class="card-title">Tecnológico</h3>
<p>
Moderniza la gestión con una solución adaptable y multiplataforma, replicable en otros centros.
</p>
</article>
<article class="intro-card legal-card">
<div class="card-icon"><i class="bi bi-people"></i></div>
<h3 class="card-title">Social</h3>
<p>
Ordena el acceso al gimnasio, fomenta hábitos saludables e inclusión de la comunidad.
</p>
</article>
<article class="intro-card legal-card">
<div class="card-icon"><i class="bi bi-exclamation-triangle"></i></div>
<h3 class="card-title">Ambiental</h3>
<p>
Digitaliza procesos para reducir papel y residuos, promoviendo una gestión sostenible.
</p>
</article>
</div>
</section>
</main>
<!-- Footer fijo -->
<footer class="site-footer" role="contentinfo">
<div class="footer-inner">GymTech SENA</div>
</footer>
<!-- Modal visor PDF -->
<div id="pdfModal" class="pdf-modal" role="dialog" aria-modal="true" aria-labelledby="pdfTitle" hidden>
<div class="pdf-dialog">
<div class="pdf-header">
<h2 id="pdfTitle">Documento PDF</h2>
<button id="pdfClose" class="pdf-close" aria-label="Cerrar" title="Cerrar">×</button>
</div>
<iframe class="pdf-iframe" src="documents/IEEE.V.8.30.pdf" title="Visor PDF" frameborder="0"></iframe>
<div class="pdf-footer">
<a href="documents/IEEE.V.8.30.pdf" target="_blank" rel="noopener" class="pdf-open-ext">Abrir en nueva pestaña</a>
</div>
</div>
</div>
<!-- Menú radial flotante en esquina inferior derecha -->
<nav class="radial-menu" aria-label="Menú principal">
<button class="radial-toggle" aria-expanded="false" aria-label="Abrir menú">
<span class="plus-icon"><i class="bi bi-list"></i></span>
<span class="close-icon"><i class="bi bi-x-lg"></i></span>
</button>
<div class="radial-items" style="--count: 11">
<a href="#inicio" class="radial-item" style="--i: 0" data-label="Inicio" aria-label="Inicio"><span class="icon"><i class="bi bi-house-door"></i></span></a>
<a href="#introduccion" class="radial-item" style="--i: 1" data-label="Introducción" aria-label="Introducción"><span class="icon"><i class="bi bi-info-circle"></i></span></a>
<a href="#planteamiento" class="radial-item" style="--i: 2" data-label="Planteamiento del Problema" aria-label="Planteamiento del Problema"><span class="icon"><i class="bi bi-question-diamond-fill"></i></span></a>
<a href="#justificacion" class="radial-item" style="--i: 3" data-label="Justificación" aria-label="Justificación"><span class="icon"><i class="bi bi-clipboard-check"></i></span></a>
<a href="#marco-legal" class="radial-item" style="--i: 4" data-label="Marco Legal" aria-label="Marco Legal"><span class="icon"><i class="bi bi-file-earmark-text"></i></span></a>
<a href="#objetivos" class="radial-item" style="--i: 5" data-label="Objetivos y Funcionalidades" aria-label="Objetivos y Funcionalidades"><span class="icon"><i class="bi bi-flag"></i></span></a>
<a href="#funcionalidad" class="radial-item" style="--i: 6" data-label="Funcionalidad del Proyecto" aria-label="Funcionalidad del Proyecto"><span class="icon"><i class="bi bi-gear-wide-connected"></i></span></a>
<a href="#necesidades" class="radial-item" style="--i: 7" data-label="Necesidades" aria-label="Necesidades"><span class="icon"><i class="bi bi-list-check"></i></span></a>
<a href="#diagrama-clases" class="radial-item" style="--i: 8" data-label="Diagrama de Clases" aria-label="Diagrama de Clases"><span class="icon"><i class="bi bi-diagram-2"></i></span></a>
<a href="#diagrama-er" class="radial-item" style="--i: 9" data-label="Modelo Relacional" aria-label="Modelo Relacional"><span class="icon"><i class="bi bi-diagram-3"></i></span></a>
<a href="#impactos" class="radial-item" style="--i: 10" data-label="Impactos" aria-label="Impactos"><span class="icon"><i class="bi bi-lightning"></i></span></a>
</div>
</nav>
<!-- Mermaid JS para renderizar diagramas -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
<script>
// Inicializamos Mermaid con colores alineados al tema del sitio
mermaid.initialize({
startOnLoad: true,
theme: 'base',
themeVariables: {
primaryColor: '#FFCC00DC',
edgeLabelBackground: '#0a192f',
fontFamily: 'Segoe UI, system-ui, sans-serif',
fontSize: '18px'
}
});
</script>
<script src="js/app.js"></script>
</body>
</html>