colorcal/index.html at main · aramcap/colorcal · 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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colorcal</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- Panel lateral -->
        <div class="sidebar">
            <h2>Configuración</h2>

            <!-- Selector de periodo -->
            <div class="section">
                <h3>Período</h3>
                <label>Fecha inicio:</label>
                <input type="month" id="startMonth" min="1900-01" max="2100-12" required />

                <label>Meses a mostrar:</label>
                <input type="number" id="monthsCount" min="1" max="36" value="12" step="1" required />

                <button id="updatePeriod" class="btn-primary">Actualizar Calendario</button>
            </div>

            <!-- Opciones de visualización -->
            <div class="section">
                <h3>Visualización</h3>
                <div class="weekend-option">
                    <label>
                        <input type="checkbox" id="highlightWeekends" />
                        Resaltar fines de semana
                    </label>
                    <input type="color" id="weekendColor" value="#ffcccc" title="Color de fin de semana" />
                </div>
            </div>

            <!-- Gestión de etiquetas -->
            <div class="section">
                <h3>Etiquetas</h3>
                <div class="tag-form">
                    <input type="text" id="tagName" placeholder="Nombre etiqueta" />
                    <input type="color" id="tagColor" value="#3498db" />
                    <button id="addTag" class="btn-primary">Agregar</button>
                </div>

                <div id="tagsList" class="tags-list"></div>
            </div>

            <!-- Selección de días -->
            <div class="section">
                <h3>Marcar días</h3>
                <label>Seleccionar etiqueta:</label>
                <select id="selectedTag">
                    <option value="">-- Seleccionar --</option>
                </select>

                <div class="date-selection">
                    <label>Fecha inicio:</label>
                    <input type="date" id="startDate" />
                    <label>Fecha fin:</label>
                    <input type="date" id="endDate" />
                    <button id="markRange" class="btn-secondary">Marcar</button>
                </div>
            </div>

            <!-- Lista de períodos marcados -->
            <div class="section">
                <h3>Períodos Marcados</h3>
                <div id="periodsList" class="periods-list"></div>

                <button id="clearSelection" class="btn-danger">Borrar todos</button>
            </div>

            <!-- Exportar/Importar -->
            <div class="section">
                <h3>Datos</h3>
                <button id="exportData" class="btn-secondary">Exportar</button>
                <button id="importData" class="btn-secondary">Importar</button>
                <input type="file" id="importFile" accept=".json" style="display: none;" />
            </div>

            <!-- Tema -->
            <div class="section">
                <h3>Tema</h3>
                <select id="themeSelector">
                    <option value="system">🖥️ Automático (sistema)</option>
                    <option value="light">☀️ Claro</option>
                    <option value="dark">🌙 Oscuro</option>
                </select>
            </div>
        </div>

        <!-- Área del calendario -->
        <div class="calendar-container">
            <div id="calendar"></div>
        </div>

        <!-- Leyenda para impresión -->
        <div id="printLegend" class="print-legend">
            <h3>Leyenda</h3>
            <div id="legendContent"></div>
        </div>

        <!-- Pie de página para impresión -->
        <div id="printFooter" class="print-footer">
            <span>Generado con <a id="footerLink" href=""></a></span>
        </div>
    </div>

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