commit 42d60c4882eab6e9b470b423dd4c71102c74b757 Author: 1stLegion Date: Mon Dec 11 11:33:03 2023 +0100 Initial Commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9c74abe --- /dev/null +++ b/.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 \ No newline at end of file diff --git a/CSS/main.css b/CSS/main.css new file mode 100644 index 0000000..311079a --- /dev/null +++ b/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; +} + + + diff --git a/HTML b/HTML new file mode 160000 index 0000000..8df364b --- /dev/null +++ b/HTML @@ -0,0 +1 @@ +Subproject commit 8df364b5acb49b2024addc27953fe95045734a51 diff --git a/JS/gestiondb.mjs b/JS/gestiondb.mjs new file mode 100644 index 0000000..0b859b5 --- /dev/null +++ b/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) \ No newline at end of file diff --git a/JS/index.js b/JS/index.js new file mode 100644 index 0000000..ce827db --- /dev/null +++ b/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 += `
+ ${numeroDiasMes(numeroMes-1)-(i-1)} +
`; + } + + for (let i = 1; i <= numeroDiasMes(mes); i++){ + let fechaActualVieja = new Date(); + let mesActual = fechaActualVieja.getMonth(); + if((i === diaActual) && (mes === mesActual)){ + fechas.innerHTML += `
${i}
`; + }else { + fechas.innerHTML += `
${i}
`; + + } + }} + + + 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); + + + + } + + + + \ No newline at end of file diff --git a/RECURSOS/Contacto/Forja1.png b/RECURSOS/Contacto/Forja1.png new file mode 100644 index 0000000..b3f9ea2 Binary files /dev/null and b/RECURSOS/Contacto/Forja1.png differ diff --git a/RECURSOS/Contacto/Horno.jpg b/RECURSOS/Contacto/Horno.jpg new file mode 100644 index 0000000..813426b Binary files /dev/null and b/RECURSOS/Contacto/Horno.jpg differ diff --git a/RECURSOS/Contacto/cartacontacto300.jpg b/RECURSOS/Contacto/cartacontacto300.jpg new file mode 100644 index 0000000..8658847 Binary files /dev/null and b/RECURSOS/Contacto/cartacontacto300.jpg differ diff --git a/RECURSOS/Eventos/AquilaImperial150px.png b/RECURSOS/Eventos/AquilaImperial150px.png new file mode 100644 index 0000000..890734f Binary files /dev/null and b/RECURSOS/Eventos/AquilaImperial150px.png differ diff --git a/RECURSOS/Eventos/logozombicide150px.jpg b/RECURSOS/Eventos/logozombicide150px.jpg new file mode 100644 index 0000000..7dd627c Binary files /dev/null and b/RECURSOS/Eventos/logozombicide150px.jpg differ diff --git a/RECURSOS/InfoServicios/datosServicios.js b/RECURSOS/InfoServicios/datosServicios.js new file mode 100644 index 0000000..ec79d43 --- /dev/null +++ b/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 + + } +] + diff --git a/RECURSOS/Logo/Fuego1.png b/RECURSOS/Logo/Fuego1.png new file mode 100644 index 0000000..76b4c1e Binary files /dev/null and b/RECURSOS/Logo/Fuego1.png differ diff --git a/RECURSOS/Logo/LogoForjaDorada.png b/RECURSOS/Logo/LogoForjaDorada.png new file mode 100644 index 0000000..bcff941 Binary files /dev/null and b/RECURSOS/Logo/LogoForjaDorada.png differ diff --git a/RECURSOS/Logo/LogoForjaDorada100x80.png b/RECURSOS/Logo/LogoForjaDorada100x80.png new file mode 100644 index 0000000..fb50c8b Binary files /dev/null and b/RECURSOS/Logo/LogoForjaDorada100x80.png differ diff --git a/RECURSOS/Logo/LogoForjaDorada200x160.png b/RECURSOS/Logo/LogoForjaDorada200x160.png new file mode 100644 index 0000000..d3daf06 Binary files /dev/null and b/RECURSOS/Logo/LogoForjaDorada200x160.png differ diff --git a/RECURSOS/Logo/LogoForjaDorada300x248.png b/RECURSOS/Logo/LogoForjaDorada300x248.png new file mode 100644 index 0000000..78ae370 Binary files /dev/null and b/RECURSOS/Logo/LogoForjaDorada300x248.png differ diff --git a/RECURSOS/Logo/fuego2.jpg b/RECURSOS/Logo/fuego2.jpg new file mode 100644 index 0000000..a09bb20 Binary files /dev/null and b/RECURSOS/Logo/fuego2.jpg differ diff --git a/RECURSOS/Servicios/Sigmarita600px.jpg b/RECURSOS/Servicios/Sigmarita600px.jpg new file mode 100644 index 0000000..25c5922 Binary files /dev/null and b/RECURSOS/Servicios/Sigmarita600px.jpg differ diff --git a/RECURSOS/Zombicide/ZombisBomberos300x247.png b/RECURSOS/Zombicide/ZombisBomberos300x247.png new file mode 100644 index 0000000..2e95f75 Binary files /dev/null and b/RECURSOS/Zombicide/ZombisBomberos300x247.png differ diff --git a/RECURSOS/Zombicide/ZombisGordos600x408.jpg b/RECURSOS/Zombicide/ZombisGordos600x408.jpg new file mode 100644 index 0000000..2de6d9a Binary files /dev/null and b/RECURSOS/Zombicide/ZombisGordos600x408.jpg differ diff --git a/RECURSOS/Zombicide/ZombisGrupoEntero.png b/RECURSOS/Zombicide/ZombisGrupoEntero.png new file mode 100644 index 0000000..64b5084 Binary files /dev/null and b/RECURSOS/Zombicide/ZombisGrupoEntero.png differ diff --git a/RECURSOS/Zombicide/ZombisGrupoEntero300x147.png b/RECURSOS/Zombicide/ZombisGrupoEntero300x147.png new file mode 100644 index 0000000..6f9901d Binary files /dev/null and b/RECURSOS/Zombicide/ZombisGrupoEntero300x147.png differ diff --git a/RECURSOS/Zombicide/ZombisGrupoEntero600x294.png b/RECURSOS/Zombicide/ZombisGrupoEntero600x294.png new file mode 100644 index 0000000..c021e78 Binary files /dev/null and b/RECURSOS/Zombicide/ZombisGrupoEntero600x294.png differ diff --git a/RECURSOS/Zombicide/Zombisbomberos600x408.png b/RECURSOS/Zombicide/Zombisbomberos600x408.png new file mode 100644 index 0000000..9456982 Binary files /dev/null and b/RECURSOS/Zombicide/Zombisbomberos600x408.png differ diff --git a/package.json b/package.json new file mode 100644 index 0000000..570813c --- /dev/null +++ b/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": "" +}