conceptMaps/index.html at master · RenzoFernando/conceptMaps · 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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Visor de Mapas Mentales</title>

    <!-- Favicon (SVG) -->
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23ffffff'/%3E%3Cpath d='M8 16l16-6 16 6 16-6v34l-16 6-16-6-16 6V16z' fill='none' stroke='%230d6efd' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M24 10v38M40 16v38' stroke='%230d6efd' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E" />

    <!-- Hojas de Estilo: Base y Temas -->
    <link rel="stylesheet" href="style.css" />
    <link id="theme-stylesheet" rel="stylesheet" href="" />
</head>
<body>
<div class="canvas-container">
    <!-- Barra superior de controles -->
    <div id="top-controls" class="top-controls" role="toolbar" aria-label="Controles del mapa">
        <button id="toggle-controls-btn" class="control-btn icon-btn" title="Ocultar/Mostrar controles">
            <svg class="map-icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
                <path d="M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2V6z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                <path d="M9 4v14M15 6v14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
        </button>

        <div class="collapsible-controls">
            <label for="map-selector">Mapa:</label>
            <select id="map-selector" aria-label="Seleccionar mapa">
                <option value="" selected disabled>-- Selecciona un mapa --</option>
                <option value="data/data1.js">Cap. 2: Arq. de Software</option>
                <option value="data/data2.js">Códigos de Ética</option>
                <option value="data/data3.js">UML: Vistas Pragmáticas</option>
                <option value="data/data4.js">Arquitectura de Flynn</option>
                <option value="data/data5.js">Ingeniería de Requisitos</option>
                <option value="data/data6.js">Clasificación RAS</option>
                <option value="data/data7.js">Patrones</option>
            </select>


            <label for="theme-selector">Tema:</label>
            <select id="theme-selector" aria-label="Seleccionar tema">
                <option value="default">Por Defecto</option>
                <option value="cyberpunk">Cyberpunk</option>
                <option value="atardecer">Atardecer</option>
            </select>

            <label for="search-input">Buscar:</label>
            <input id="search-input" type="search" placeholder="Filtrar nodos (Ctrl+K)" aria-label="Buscar en el mapa" />
            <span id="search-status" class="search-status"></span>

            <div class="export-group" role="group" aria-label="Exportar mapa">
                <button id="export-svg-btn" class="btn small" title="Descargar como SVG" disabled>SVG</button>
                <button id="export-png-btn" class="btn small" title="Descargar como PNG" disabled>PNG</button>
                <button id="export-pdf-btn" class="btn small" title="Descargar como PDF" disabled>PDF</button>
            </div>
        </div>
    </div>

    <canvas id="mind-map-canvas"></canvas>

    <!-- Controles flotantes inferiores -->
    <div id="bottom-controls" class="controls" aria-label="Zoom, centrado y glosario">
        <button id="toggle-bottom-controls-btn" class="control-btn icon-btn" title="Ocultar/Mostrar controles">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.438.995a6.427 6.427 0 010 1.882c0 .382.145.755.438.995l1.003.827c.48.398.668 1.03.26 1.431l-1.296 2.247a1.125 1.125 0 01-1.37.49l-1.217-.456c-.355-.133-.75-.072-1.075.124a6.57 6.57 0 01-.22.127c-.332.183-.582.495-.645.87l-.213 1.281c-.09.543-.56.94-1.11.94h-2.593c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.063-.374-.313-.686-.645-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.075-.124l-1.217.456a1.125 1.125 0 01-1.37-.49l-1.296-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.437-.995a6.427 6.427 0 010-1.882c0-.382-.145-.755-.437-.995l-1.004-.827a1.125 1.125 0 01-.26-1.431l1.296-2.247a1.125 1.125 0 011.37-.49l1.217.456c.355.133.75.072 1.075-.124.073-.044.146-.087.22-.127.332-.183.582-.495-.645-.87l.213-1.281z" />
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            </svg>
        </button>
        <div class="collapsible-controls-bottom">
            <button id="glossary-btn" class="control-btn" title="Glosario de Términos" aria-haspopup="dialog" aria-controls="glossary-modal">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
                </svg>
            </button>
            <button id="expand-all-btn" class="control-btn" title="Expandir Todo">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
                </svg>
            </button>
            <button id="zoom-in-btn" class="control-btn" title="Acercar">+</button>
            <button id="zoom-out-btn" class="control-btn" title="Alejar">-</button>
            <button id="reset-view-btn" class="control-btn" title="Centrar en Nodo Principal">○</button>
        </div>
    </div>
</div>

<!-- Modal para el glosario de términos -->
<div id="glossary-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modal-title" class="modal-title">Glosario de Términos</h2>
            <button id="modal-close-btn" class="modal-close-btn" aria-label="Cerrar">&times;</button>
        </div>
        <div id="glossary-body"></div>
    </div>
</div>

<!-- Librerías externas -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" defer></script>

<!-- Lógica principal de la aplicación -->
<script src="logic.js" defer></script>
</body>
</html>