Initial Commit

.gitignore

@@ -0,0 +1,36 @@
+# Dependencies
+/node_modules
+
+# Production build
+/dist/
+
+# Local environment
+.env.local
+.env.*.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.log
+
+# Editor directories and files
+.idea/
+.vscode/
+*.swp
+*.swo
+*.swn
+
+# OS specific
+.DS_Store
+Thumbs.db
+
+# Cache
+.cache/
+
+.notes
+*.lock
+package-lock.json
+
+
+assets/fonts

CSS/main.css

@@ -0,0 +1,496 @@
+
+
+/*---------------------GRID HEADER PAGINAS--------------------*/
+
+.grid-cabeza-container {
+    display: grid;
+    grid-template-areas: 
+    "header header"
+    "nav nav";
+   
+   
+}
+
+.grid-cabeza-logo {
+    text-align: center;
+    grid-area: header;
+  
+
+}
+
+.barraInicio {
+    grid-area: nav;
+    display: flex;
+    flex-direction: row;
+    margin: 0;
+    padding: 0;
+    background: linear-gradient(45deg, #138522, gold, black);
+    position: relative;
+    animation: cambiar 10s ease-in infinite;
+    background-size: 200% 200%;
+
+}
+
+
+
+
+.itemBarra {
+    list-style: none;
+    color: white;
+    width: 100%;
+    height: 25px;
+    padding-top: 6px;
+    text-align: center;
+    border: 2px solid white;
+    
+    
+   
+}
+
+@keyframes cambiar{
+    0%{background-position: 0 50%;}
+    50%{background-position: 100% 50%;}
+    100%{background-position: 0 50%;}
+
+}
+
+.enlacePaginas {
+    text-decoration: none;
+    color: white;
+}
+
+/*----------------------------Boton Arriba------------------*/
+
+.btn-up {
+    width: 30px;
+    height: 30px;
+    outline: 0;
+    border-radius: 50%;
+    border: 1px solid #138522;
+    background-color: #138522;
+    position: fixed;
+    cursor: pointer;
+    right: 10px;
+    bottom: 50px;
+    transition: all 3s ease-in-out;
+    color: white;
+
+}
+
+.btn-up:hover{
+    opacity: .75;
+}
+
+/*------------------------------CUERPO----------------------------------*/
+
+    body {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        
+    }
+
+
+/*----------------------CABECERA INTRO PAGINAS---------------*/
+
+
+        
+
+    .titulo-inicio{
+        text-align: center;
+        background-image: url(../RECURSOS/Logo/fuego2.jpg);
+        background-size: cover;
+        box-shadow: 2px 2px 5px grey;
+        color: white;
+    }
+
+ 
+
+/*----------------------INICIO------------------------*/
+   
+.art-inicio {
+    display: grid;
+    grid-template-areas:
+    "titulo titulo"
+    "img texto";
+    grid-template-columns: 1fr 2fr;
+
+}
+.img-inicio{
+    grid-area: img;
+    padding: 50px;
+    width: 50%;
+}
+.cuerpo-inicio{
+    grid-area: texto;
+    padding: 50px;
+}
+
+/*----------------------PRODUCTOS------------------------*/
+
+
+
+
+
+
+
+/*---------------------------SERVICIOS---------------------*/
+
+       .contenedor-articulos{
+        display: flex;
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        
+       }
+
+        .container-carousel {
+            position: relative;
+            box-sizing: border-box;
+            width: 90%;
+            height: 100%;
+            text-align: center;
+            overflow: hidden;
+
+        }
+
+        .carruseles {
+            width: 300%; /*modificar en caso de meter mas slides*/
+            height: 100%;
+            display: flex;
+            user-select: none;
+
+            
+        }
+        .slider-section {
+            height: 100%;
+            width: calc(100% / 3); /*modificar en caso de meter mas slides*/
+            display: flexbox;
+            flex-direction: column;
+            align-items: center;
+            box-shadow: 2px 3px 5px 1px grey;
+            
+        }
+
+        .slider-section h4 {
+            padding: 20px;
+        }
+        .slider-section img {
+            padding: 30px;
+            height: 300px;
+           
+
+
+        }
+
+        .slider-section p {
+            height: 70%;
+            padding: 30px 70PX;
+        }
+
+        .btn-left,
+        .btn-right {
+            display: flex;
+            position: absolute;
+            font-size: 40px;
+            top: 50%;
+            background-color: transparent;
+            border-radius: 50%;
+            border-color: transparent;
+            padding: 5px;
+            font-weight: 600;
+            cursor: pointer;
+            color: #138522;
+            transform: translate(0, -50%);
+            transition: .5s ease;
+            user-select: none;
+
+        }
+
+        .btn-left {
+            left: 80px;
+        }
+
+        .btn-right {
+            right: 80px;
+        }
+       
+        .btn-left:hover,
+        .btn-right:hover {
+            background-color: lightgray;
+        }
+
+
+
+
+/*--------------------------EVENTOS------------------------------*/
+
+.contenedor-eventos{
+    display: flex;
+    flex-direction: row;
+    margin: 50px;
+}
+
+.item-lista-eventos {
+    display: grid;
+    grid-template-columns: 1fr 1fr 3fr;
+    grid-template-areas: 
+        "img fecha titulo"
+        "img texto texto";
+}
+
+.token-evento {
+    grid-area: img;
+    align-self: center;
+}
+
+.titulo-evento {
+    grid-area: titulo;
+   
+
+}
+
+.texto-evento {
+    grid-area: texto;
+    margin: 20px;
+
+}
+.fecha-evento {
+    grid-area: fecha;
+    margin: 20px;
+    align-self: center;
+    font-size: x-large;
+    font-weight: bold;
+    color: #138522;
+}
+
+
+            /*---------CALENDARIO EVENTOS--------*/
+.calendario {
+    width: auto;
+    margin: 30px;
+    padding: 10px;
+}
+
+.info-calendario {
+    display: flex;
+    align-items: center;
+    padding: 0 30px;
+    font-size: 1.4em;
+    text-transform: capitalize;
+
+}
+
+.btn-izq-calendar, 
+.btn-der-calendar {
+    color: gold;
+    cursor: pointer;
+    font-size: 1.3em;
+}
+
+
+.btn-izq-calendar {
+    margin-right: auto;
+}
+.btn-der-calendar {
+    margin-left: auto ;
+}
+
+.mes-calendario,
+.year-calendario {
+    padding: 50px 15px;
+}
+
+.semana-calendario, .fechas-calendario {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-gap: 10px;
+}
+
+.item-calendario {
+    text-align: center;
+    line-height: 2;
+
+}
+
+
+.today {
+    background-color: lightcoral;
+    color: white;
+    width: 50%;
+    border-radius: 50%;
+    margin: auto;
+}
+.today:hover{
+    background-color: coral;
+}
+
+.dias-ultimo-mes {
+    opacity: .4;
+}
+
+/*------------------------------CONTACTO------------------------*/
+
+
+.cuerpo-contacto {
+    display: flex;
+    flex-direction: column;
+    
+    justify-content: center;
+    align-items: center;
+}
+
+.articulo-contacto{
+    width: 800px;
+    text-align: center;
+}
+.formulario-contacto {
+    background: linear-gradient(
+        30deg,
+        rgba(19, 133, 34, 0.8) 30%,
+        rgba(40, 42, 55, 0.8)
+        ), 
+        url(../RECURSOS/Contacto/Horno.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    padding: 50px;
+    width: 800px;
+    border-radius: 25px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-shadow: 2px 2px 5px grey;    
+        
+}
+.formulario-contacto h2 {
+    color: gold;
+    font-size: 30px;
+    text-align: center;
+
+
+}
+.formulario-contacto form {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    
+}
+
+.formulario-contacto label {
+    font-size: 15px;
+    color: gold;
+    font-weight: 700;
+    padding: 10px;
+
+}
+.formulario-contacto input, 
+.formulario-contacto textarea,
+button.boton-enviar-form   {
+    padding: 15px 15px;
+    background-color: rgba(19, 133, 34, 0.5);
+    color: white;
+    margin: 10px;
+    border-radius: 15px;
+    font-weight: bold;
+}
+
+.formulario-contacto input:focus, 
+.formulario-contacto textarea:focus {
+    outline: 1.5px solid gold;
+} 
+
+.formulario-contacto button.boton-enviar-form {
+    background-color: rgba(40, 42, 55, 0.5);
+    font-size: 20px;
+    color: gold;
+    width: 50%;
+    align-self: center;
+    cursor: pointer;
+}
+
+.formulario-contacto button.boton-enviar-form:hover {
+    background-color: rgba(40, 42, 55, 0.9);
+}
+
+
+/*-----------------------FORMATEO TEXTO-----------------------*/
+
+        span.titulos-esp {
+            color: #138522;
+
+        }
+
+
+        span.titulosh3-eng {
+            color: gold;
+            
+        }
+
+        .titulos-h3 {
+            color: #138522;
+        }
+
+        .dia-finde {
+            font-weight: bold;
+        }
+
+
+/*-----------------------FORMATEO FOOTER-----------------------*/
+
+
+.pie-forja {
+    margin: 0;
+    width: 100%;
+    margin-top: 30px;
+}
+
+.contenedor-listas-pie {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    background: linear-gradient(45deg, #138522, gold, black);
+    animation: cambiar 10s ease-in infinite;
+    background-size: 200% 200%;
+    
+}
+
+.lista-pie-forja {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    color: white;
+    width: 100%;
+    margin: 0;
+    padding: 10px 0px 25px 0px;
+    align-items: center;
+    
+}
+
+.cabeza-lista-pie {
+    padding: 10px 0px;
+    font-size: large;
+    font-weight: bold
+    
+}
+
+.item-lista-pie {
+    padding: 5px 0px;
+    
+}
+.item-lista-pie a{
+    text-decoration: none;
+    color: white;
+
+}
+.item-lista-pie a:visited {
+    text-decoration: none;
+    
+}
+
+.item-lista-pie a:hover{
+    color: grey;
+}
+
+
+

HTML

@@ -0,0 +1 @@
+Subproject commit 8df364b5acb49b2024addc27953fe95045734a51

JS/gestiondb.mjs

@@ -0,0 +1,22 @@
+import { initializeApp } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js";
+import { getFirestore, getDocs, collection, addDoc, setDoc, deleteDoc, doc, query, where  } from "https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js"
+
+
+const firebaseConfig = {
+  apiKey: "AIzaSyCj4QvZVKS8hH-QfIH_DsAM0MRvamd7LbA",
+  authDomain: "webforja-31b8b.firebaseapp.com",
+  projectId: "webforja-31b8b",
+  storageBucket: "webforja-31b8b.appspot.com",
+  messagingSenderId: "294376462200",
+  appId: "1:294376462200:web:98d4daceb731ab1b57da8d",
+  measurementId: "G-MCR5EEE6GK"
+};
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+const db = getFirestore(app);
+const prueba = collection(db, "productos");
+const snapshotProductos = await getDocs(prueba);
+const productos = snapshotProductos.docs
+
+console.log(snapshotProductos)

JS/index.js

@@ -0,0 +1,185 @@
+
+
+function cargado()  {
+
+    // ---------------------- CONFIGURACIÓN BOTON SUBIR ARRIBA -----------------------------////
+    
+        
+    
+        const $btnUp = document.getElementById("botonArriba");
+    
+        document.addEventListener("click", (e) =>{
+            if(e.target === $btnUp || e.target.matches(".fa-arrow-up")){
+                window.scrollTo({
+                    behaviour: "smooth",
+                    top: 0
+                })
+            }
+        });  
+    
+    }
+
+
+
+        //---------------------  CONFIGURACIÓN SLIDERS ------------------------------///
+
+let operacion = 0,
+    counter = 0;
+
+
+function moveToRight() {
+    let elementoAMover = this.event.target.parentNode.firstElementChild;
+    let numeroContenedores = elementoAMover.children.length
+   
+    let widthImg = 100 / numeroContenedores;
+        
+    if (counter >= elementoAMover.children.length-1) {
+        operacion = 0;
+        counter = 0;
+        elementoAMover.style.transform = `translate(-${operacion}%)`;
+        return;
+    
+        
+    }
+    counter++;
+    operacion = operacion + widthImg;
+
+    elementoAMover.style.transform = `translate(-${operacion}%)`;
+}
+
+function moveToLeft() {
+    let elementoAMover = this.event.target.parentNode.firstElementChild;
+
+    let widthImg = 100 / elementoAMover.children.length;
+    
+    
+    counter --;
+    if (counter < 0 ) {
+        counter = elementoAMover.children.length-1;
+        operacion = widthImg * (elementoAMover.children.length-1);
+        elementoAMover.style.transform = `translate(-${operacion}%)`
+        elementoAMover.style.transition = 'none';
+        return;
+    }
+    
+    
+        operacion = operacion - widthImg;
+        elementoAMover.style.transform = `translate(-${operacion}%)`
+
+    
+}
+
+    //-------------------------- CONFIGURACIÓN CALENDARIO --------------------------------
+        
+    const cargaCalendario = () => { 
+        const nombresMeses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio',
+        'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'] 
+    
+    
+        let fechaActual = new Date();
+        let diaActual = fechaActual.getDate();
+        let numeroMes = fechaActual.getMonth();
+        let yearActual = fechaActual.getFullYear();
+    
+        let fechas = document.getElementById("dates-calendar");
+        let mes = document.getElementById("mes-actual");
+        let year = document.getElementById("year");
+    
+        let mesAnteriorDOM = document.getElementById("mes-anterior")
+        let mesSiguienteDOM = document.getElementById("mes-siguiente");
+    
+    
+        mes.textContent = nombresMeses[numeroMes];
+        year.textContent = yearActual.toString();
+    
+        mesAnteriorDOM.addEventListener("click", () => mesAnterior());
+        mesSiguienteDOM.addEventListener("click", () => mesSiguiente())
+     
+    
+        const generacionMeses = (mes) => {
+            for(let i = diaComienzoSemana(); i>0; i--){
+                fechas.innerHTML += `<div class= "dia-calendario item-calendario dias-ultimo-mes">
+                ${numeroDiasMes(numeroMes-1)-(i-1)}
+                </div>`;
+            }
+            
+            for (let i = 1; i <= numeroDiasMes(mes); i++){
+                let fechaActualVieja = new Date();
+                let mesActual = fechaActualVieja.getMonth();
+                if((i === diaActual) && (mes === mesActual)){
+                    fechas.innerHTML += `<div class= "dia-calendario item-calendario today">${i}</div>`;
+                }else {
+                    fechas.innerHTML += `<div class= "dia-calendario item-calendario">${i}</div>`;
+    
+                }
+            }}
+        
+    
+        const numeroDiasMes = (mes) => {
+            if(mes === -1) mes = 11;
+    
+            if (mes === 0 || 2 || 4 || 6 || 7 || 9 || 11) {
+                return 31;
+            } else if (mes === 3 || 5 || 8 || 10) {
+                return 30;
+            } else {
+                return esBisiesto() ? 29:28;
+            }
+            
+        }
+        console.log(numeroDiasMes(numeroMes))
+        const esBisiesto = () => {
+            return ((yearActual % 100 !== 0) && (yearActual % 4 === 0) || (yearActual % 400 === 0));
+              
+            
+        }
+    
+        
+    
+        const diaComienzoSemana = () => {
+            let comienzo = new Date(yearActual, numeroMes, 1);
+            return ((comienzo.getDay()-1) === -1) ? 6 : comienzo.getDay()-1;
+          
+        }
+    
+        const mesAnterior = () => {
+            if(numeroMes !== 0){
+                numeroMes--;
+            }else {
+                numeroMes = 11;
+                yearActual--;
+            }
+            nuevaFecha();
+        }
+    
+        const mesSiguiente = () => {
+            if(numeroMes !== 11){
+                numeroMes++;
+            }else {
+                numeroMes = 0;
+                yearActual++;
+            }
+            
+            nuevaFecha();
+        }
+    
+    
+        const nuevaFecha = () => {
+            fechaActual.setFullYear(yearActual, numeroMes, diaActual);
+            mes.textContent = nombresMeses[numeroMes];
+            year.textContent = yearActual.toString();
+            fechas.textContent = '';
+            generacionMeses(numeroMes)
+        }
+    
+    
+    
+        generacionMeses(numeroMes);
+    
+    
+    
+    }
+    
+
+
+    

RECURSOS/InfoServicios/datosServicios.js

@@ -0,0 +1,17 @@
+ [
+        {
+        "tituloSlide": "ZOMBICIDE 2ND EDITION",
+        "fuenteImagen": "..\RECURSOS\Zombicide\ZombisGrupoEntero300x147.png",
+        "descripcionServicio": "Juego Completo Zombicide 2nd Edition",
+        "numeroSlide": 1
+    },
+
+    {
+        "tituloSlide": "Alto Grado de Personalización",
+        "fuenteImagen": "../RECURSOS/Zombicide/ZombisBomberos300x247.png",
+        "descripcionServicio": "Desde nuestro taller ofrecemos una personalización total del juego que se solicite, con una amplísima variedad de colores y combinaciones para que incluso los grupos de miniaturas 'monopose' parezcan todas diferentes.",
+        "numeroSlide": 2
+
+    }
+]
+

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "webforja",
+  "version": "1.0.0",
+  "main": "gestiondb.js",
+  "type": "module",
+  "scripts": {
+    "dev": "nodemon ./JS/index.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "nodemon": "3.0.2"
+  },
+  "dependencies": {
+    "firebase": "^10.7.1"
+  },
+  "description": ""
+}