lectogram/index.html at master · hspencer/lectogram · 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
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lectogram</title>
    <!-- <link rel="stylesheet" href="lectogram.css"> -->
    <link rel="stylesheet" href="style.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="manifest" href="/site.webmanifest" />
  </head>
  <body>
    <div class="container">
      <img src="dist/branding/png/isotipo.png" alt="Lectogram" style="width: 25rem; height: auto"/>
      <h1>Demostración de uso de pictogramas con color</h1>
    </div>

    <div class="places-container">
      <!-- Aquí el script inserta todo, de acuerdo al JSON -->
    </div>

    <footer>  <a href="http://github.com/hspencer/lectogram" style="text-decoration: none; color: black; font-weight: 500;">Ir al respositorio de <img src="dist/branding/png/lectrogram-branding_logo-hz.png" alt="LECTOGRAM" style="width: 120px; height: auto; display: inline-block; position: relative; top: 9px"></a></footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Mapeo de nombres en español a clases CSS
            const placeClassMap = {
                'Baño': 'bathroom',
                'Dormitorio': 'bedroom',
                'Cocina': 'kitchen',
                'Sala de estar': 'living-room',
                'Jardín': 'garden',
                'Pasillo': 'corridor',
                'Garaje': 'garage',
                'Lavandería': 'laundry',
                'Escritorio': 'study',
                'Comedor': 'dining-room'
            };

            fetch('lectogram.json')
                .then(response => response.json())
                .then(data => {
                    const placesContainer = document.querySelector('.places-container');

                    data.places.forEach(place => {
                        // Usar el mapeo para obtener la clase correcta
                        const placeClass = `place-${placeClassMap[place.name]}`;

                        const placeCard = document.createElement('div');
                        placeCard.className = `place-card ${placeClass}`;

                        const placeTasks = data.tasks.filter(task =>
                            task.places && task.places.includes(place.name)
                        );

                        placeCard.innerHTML = `
                            <div class="place-header">
                                <div class="place-content">
                                    <div class="pictogram-wrapper">
                                        <img src="${place.image}" alt="${place.name}" class="pictogram">
                                    </div>
                                    <h3>${place.name}</h3>
                                </div>
                                <button class="toggle-btn" aria-label="Toggle tasks">
                                    <span class="chevron"></span>
                                </button>
                            </div>
                            <div class="tasks-drawer">
                                <div class="tasks-grid">
                                    ${placeTasks.map(task => `
                                        <div class="task-item" title="${task.name}">
                                            <div class="pictogram-wrapper">
                                                <img src="${task.image}"
                                                     alt="${task.name}"
                                                     class="pictogram"
                                                     title="${task.name}">
                                            </div>
                                            <p>${task.name}</p>
                                        </div>
                                    `).join('')}
                                </div>
                            </div>
                        `;

                        placesContainer.appendChild(placeCard);
                    });

                    document.querySelectorAll('.toggle-btn').forEach(btn => {
                        btn.addEventListener('click', function() {
                            const card = this.closest('.place-card');
                            card.classList.toggle('is-open');
                        });
                    });
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.querySelector('.places-container').innerHTML =
                        '<p class="error">Error cargando los datos. Por favor, recarga la página.</p>';
                });
        });
    </script>

  </body>
</html>