<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../CSS/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <script src="../JS/index.js"></script>
    <script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAY11SKZ-LijXoQ81yr6-b6IQi2ZuJ8cN0&callback=console.debug&libraries=maps,marker&v=beta">
    </script> 

    <title>La Forja Dorada</title>
</head>
<body onload="cargado(), cargaCalendario(), genListaEven()">
    <header class="grid-cabeza-container">
        <div class="grid-cabeza-logo">
            <img src="..\RECURSOS\Logo\LogoForjaDorada200x160.png" alt="">
        </div>

        <ul class="barraInicio">
            <li class="itemBarra">
                <a href="index.html" class="enlacePaginas"><b>INICIO</b></a>
                
            </li>
            <li class="itemBarra">
                <a href="Productos.html" class="enlacePaginas"><b>PRODUCTOS</b></a>
            </li>
            <li class="itemBarra">
                <a href="Servicios.html" class="enlacePaginas"><b>SERVICIOS</b></a>

            </li>
             <li class="itemBarra">
                <a href="Eventos.html" class="enlacePaginas"><b>EVENTOS</b></a>

            </li>
            <li class="itemBarra">
                <a href="Contactos.html" class="enlacePaginas"><b>CONTACTO</b></a>

            </li>
        </ul>
        
            <button class="btn-up" id="botonArriba">
                <i class="fa-solid fa-arrow-up"></i>
            </button>
        
           
            <div class="cestaCompra" id="contenedorCesta">
                <figure class="img-carrito">
                    <img src="../RECURSOS/Logo/fotoCarrito.png" alt="">
                </figure>
                
                <div class="desplegable-carrito">
                    <p class="text-right">Total: <span id="total"></span>&euro;</p>
                    <button id="boton-vaciar" class="botonVaciar" onclick="eliminarCesta()">Vaciar</button>
                    <button id="boton-tramitar" class="botonVaciar" onclick="tramitarPedido()">Tramitar</button>

                    
                    
                    <ul id="carrito" class="listaCarrito">
                    </ul>
                
                
                </div>
        </div>
    </header>
    <section class="art-inicio-eventos">
        <h1 class="titulo-inicio" id="titulo-grande-eventos">EVENTOS</h1>
        <p>A continuación encontrarás un listado detallado con los próximos eventos en los que vamos a estar inmersos. <br>
            Si deseas más información o quieres apuntarte a alguno de ellos ponte en <a href="../HTML/Contactos.html">contacto</a> con nosotros.            
        </p>
    </section>
    <main class="contenedor-eventos">
        
        <ul class="lista-eventos" id="listadeEventos">
        </ul>
        <div class="section-eventos">
            <div class="calendario">
                <div class="info-calendario">
                    <div class="btn-izq-calendar" id="mes-anterior">&#12296</div>
                    <div class="mes-calendario" id="mes-actual"></div>
                    <div class="year-calendario" id="year">2020</div>
                    <div class="btn-der-calendar" id="mes-siguiente">&#12297</div>
                </div>
                <div class="semana-calendario">
                    <div class="dia-calendario item-calendario">Lunes</div>
                    <div class="dia-calendario item-calendario">Martes</div>
                    <div class="dia-calendario item-calendario">Miércoles</div>
                    <div class="dia-calendario item-calendario">Jueves</div>
                    <div class="dia-calendario item-calendario">Viernes</div>
                    <div class="dia-calendario item-calendario"><span class="dia-finde">Sábado</span></div>
                    <div class="dia-calendario item-calendario"><span class="dia-finde">Domingo</span></div>
                </div>
                <div class="fechas-calendario item-calendario" id="dates-calendar">
                </div>
            
            </div>
            <div class="contenedor-mapa">
                <h3 class="titulos-h3">Aquí está La Forja:</h3>
                <div class="jaula-mapa">
                    <gmp-map center="37.213218688964844,-7.403172016143799" zoom="14" map-id="DEMO_MAP_ID">
                    <gmp-advanced-marker position="37.213218688964844,-7.403172016143799" title="My location">
                    </gmp-advanced-marker>
                </gmp-map>
                </div>
                
            </div>
        </div>
    
    </main>
 

    <footer class="pie-forja">
        <nav class="contenedor-listas-pie">
            <ul class="lista-pie-forja">
                <li class="cabeza-lista-pie">Redes Sociales</li>
                <li class="item-lista-pie">
                    <a href="https://instagram.com/arkantthos?utm_source=qr" target="_blank">
                        Instagram
                    </a>                    
                </li>
                <li class="item-lista-pie">Facebook</li>
                <li class="item-lista-pie">
                    <a href="https://www.ebay.es/usr/thegoldenforge" target="_blank">Ebay</a>
                    </li>
            </ul>
            <ul class="lista-pie-forja">
                <li class="cabeza-lista-pie">Documentación de Interés</li>
                <li class="item-lista-pie">
                    <a href="../HTML/PoliticaDatos.html">Política de Privacidad</a>
                </li>
                <li class="item-lista-pie">
                    <a href="../HTML/Galletas.html">Gestión de Cookies</a>    
                    </li>
                    <li class="item-lista-pie">
                        <a href="../HTML/AvisosLegales.html">Avisos Legales</a>
                        </li>
                </ul>
        </nav>
    </footer>
</body>

</html>