-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmapa-leon.html
214 lines (183 loc) · 8.22 KB
/
mapa-leon.html
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
<!DOCTYPE html>
<html lang="es-ni">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explora la Ruta Subterráneo: Música y Premios Exclusivos</title>
<meta name="description" content="Explora la Ruta Subterráneo y desbloquea estaciones únicas con música, historias y premios exclusivos del álbum Disco León. ¡Conviértete en un explorador musical!">
<!-- Enlace al archivo CSS personalizado -->
<link rel="stylesheet" href="mapa-leon-styles.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="icon" href="icono.png" type="image/png">
<!-- Incluyendo el CSS de Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- Enlace del ícono -->
<link rel="icon" href="icono.png" type="image/png">
<!-- Open Graph Meta Tags para Social Cards -->
<meta property="og:title" content="Ruta Subterránea - Disco León">
<meta property="og:description" content="Subterráneo es la vibrante esencia de León, Nicaragua, transformada en música.">
<meta property="og:image" content="bio.jpg">
<meta property="og:url" content="https://subterraneomusic.com/mapa-leon.html">
<meta property="og:type" content="website">
<meta property="og:locale" content="es_ES">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ruta Subterránea - Disco León">
<meta name="twitter:description" content="Subterráneo es la vibrante esencia de León, Nicaragua, transformada en música.">
<meta name="twitter:image" content="bio.jpg">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4E923NB3HQ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4E923NB3HQ');
</script>
<style>
/* Estilos para personalizar los puntos */
.custom-marker {
width: 15px;
height: 15px;
background-color: #ff6326; /* Color rosado */
border-radius: 50%;
box-shadow: 0 0 10px #ff6326; /* Sombra neón */
position: relative; /* Para posicionar el candado */
}
.lock-icon {
width: 10px;
height: 10px;
background-image: url('candao.png'); /* Cambia esta ruta por la de tu imagen de candado */
background-size: cover;
position: absolute;
top: -5px; /* Ajusta la posición según sea necesario */
left: 50%;
transform: translateX(-50%);
}
/* Estilos para la ventana emergente */
.song-details {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.hidden {
display: none;
}
.btn-close {
background-color: #ff6326;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.btn-close:hover {
background-color: #ff6326;
}
</style>
</head>
<body>
<!-- Menú de Navegación -->
<nav class="navbar">
<div class="nav-container">
<!-- Reemplazamos el texto del logo por la imagen del logo -->
<a href="index.html" class="nav-logo">
<img src="SUBTERRANEOLOGO.png" alt="Subterráneo Logo" class="logo-img">
</a>
<button class="nav-toggle" id="nav-toggle">
<span class="nav-toggle-icon"></span>
</button>
<ul class="nav-menu" id="nav-menu">
<li class="nav-item"><a href="index.html" class="nav-link">Inicio</a></li>
<li class="nav-item"><a href="band-page.html" class="nav-link">Biografía</a></li>
<li class="nav-item"><a href="mapa-leon.html" class="nav-link">Ruta Subterráneo</a></li>
<li class="nav-item"><a href="album.html" class="nav-link">Disco León</a></li>
<li class="nav-item"><a href="store.html" class="nav-link">Tienda</a></li>
</ul>
</div>
</nav>
<!-- Sección del Mapa de León con el Subterráneo Imaginario -->
<section class="interactive-map" style="padding-top: 70px; text-align: center;">
<h1>Explora León con Disco León</h1>
<div id="map" class="map-container" style="width: 100%; height: 450px;"></div>
</section>
<div class="titulo-progreso">
<h3>Progreso:</h3>
</div>
<!-- Barra de progreso -->
<div class="progress-bar-container">
<div id="progress-bar" class="progress-bar"></div>
</div>
<!-- Ventana Emergente de Detalles de Canción -->
<div class="song-details hidden">
<h2 id="song-title"></h2>
<div id="spotify-embed-container"></div> <!-- Contenedor para el iframe de Spotify -->
<div id="song-history" class="song-history"></div> <!-- Historia del lugar -->
<div id="song-lyrics" class="song-lyrics"></div> <!-- Letra de la canción -->
<div id="download-material"></div> <!-- Material descargable -->
<button class="btn-close">Cerrar</button>
</div>
<!-- Incluyendo el script de Leaflet -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- Enlace al archivo JavaScript personalizado -->
<script src="mapa-leon-scripts.js"></script>
<script>
// Toggle del menú de navegación en móvil
document.getElementById('nav-toggle').addEventListener('click', function () {
document.getElementById('nav-menu').classList.toggle('active');
});
</script>
<!-- Pie de página -->
<footer class="footer">
<div class="footer-content">
<div class="social-links">
<a href="https://www.instagram.com/subterraneoni/" target="_blank"><img src="logo_ig.svg" alt="Instagram" class="social-icon"></a>
<a href="https://open.spotify.com/intl-es/artist/4j7E7qZ1spg0ysrBhAwFdf?si=lIIH2FeLTzqSjG_rDJkvtA" target="_blank"><img src="logo_spotify.svg" alt="Spotify" class="social-icon"></a>
<a href="https://www.youtube.com/@subterraneonicaragua" target="_blank"><img src="logo_yt.svg" alt="YouTube" class="social-icon"></a>
<a href="https://www.tiktok.com/@subterraneoni" target="_blank"><img src="logo_tiktok.svg" alt="TikTok" class="social-icon"></a>
</div>
<p>© 2024 Subterráneo. Todos los derechos reservados.</p>
</div>
</footer>
<!-- Botón flotante para instrucciones -->
<div class="floating-button" id="instructions-button">?</div>
<!-- Menú de instrucciones -->
<div class="instructions-menu hidden" id="instructions-menu">
<h2>Instrucciones</h2>
<p>1. Explora las estaciones destacadas en el mapa marcadas con puntos.</p>
<p>2. Acércate físicamente a una estación para desbloquear su contenido especial.</p>
<p>3. Haz clic en el marcador para descubrir:
<ul class="instructions-vienetas">
<li>La canción relacionada y su historia.</li>
<li>Material descargable exclusivo (ej. MP3).</li>
<li>La letra completa de la canción.</li>
</ul>
</p>
<p>4. Desbloquea todas las estaciones para obtener una sorpresa especial.</p>
<p>5. Usa el botón "Cerrar" para ocultar información adicional.</p>
<p><br></p>
<button class="btn-close-instructions" id="close-instructions">Cerrar</button>
</div>
<script>
// Referencias a elementos
const instructionsButton = document.getElementById('instructions-button');
const instructionsMenu = document.getElementById('instructions-menu');
const closeInstructions = document.getElementById('close-instructions');
// Mostrar el menú de instrucciones
instructionsButton.addEventListener('click', () => {
instructionsMenu.classList.toggle('hidden');
});
// Ocultar el menú de instrucciones
closeInstructions.addEventListener('click', () => {
instructionsMenu.classList.add('hidden');
});
</script>
<!-- Agrega SweetAlert2 a tu proyecto -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>