diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..cfbc209 Binary files /dev/null and b/.DS_Store differ diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/README.md b/README.md index 0f69765..f33d8e0 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,28 @@ -# catch a coder +# Catch a Coder -![Catch a coder's logo](assets/logo.png) - -## Description +![Catch a coder's logo](assets/logo-readme.png) The app is an interactive tool that allows trainers to randomly select different species of Pokémon to add excitement and diversity to their teams. Users can customize the draw rules, such as the number of Pokémon to select to participate in the draw. +## Authors + +- [@cyn29](https://github.com/Cyn29) +- [@Wannda-Abreu](https://github.com/Wannda-Abreu) +- [@DigitalChampeta](https://github.com/DigitalChampeta) +- [@afterdarkv1](https://github.com/afterdarkv1) +- [@BRYAN-MARIANO](https://github.com/BRYAN-MARIANO) + +## Color Reference + +| Color | Hex | +| ----------------- | ------------------------------------------------------------------ | +| Yellow | ![#F9E520](/assets/circulo.png) #F9E520 | +| Orange | ![#FF9442](/assets/circulo%20(1).png) #FF9442 | +| Blue | ![#8493D0](/assets/circulo%20(3).png) #8493D0 | +| Soft blue | ![#9DC2D7](/assets/circulo%20(2).png) #9DC2D7 | + + + ## Setting Follow these steps to correctly configure the project: @@ -19,11 +36,19 @@ You can view the website design on Figma by clicking the following link: [Catch ## File structure -- `index.html`: This is the main file that contains the HTML code of the page. -- `reset.css`: This file contains CSS styles to restore the default styles of the browser. -- `style.css`: This file contains custom CSS styles for the application. -- `style.scss`: This file is a style sheet written in Sass that is compiled into style.css. -- `script.js`: This file contains the JavaScript code for the functionality of the application. +
html5 +css3 +javascript +css3
+ +## Tolls +
+figma +vscode +Jira +git +github
+ ## External dependencies The project uses the following external dependencies: @@ -32,19 +57,7 @@ The project uses the following external dependencies: Make sure you have an active internet connection to successfully load these dependencies. -## Contribution - -If you want to contribute to this project, you can follow the steps below: - -1. Fork the repository. -2. Make your modifications to your own fork. -3. Submit a pull request to have your changes reviewed. - -## Contact - -If you have any questions or suggestions about this project, you can contact Catch a Coder through the following email: contacto@Catchacoder.com - ## Project status - Version: 1.0.0 -- Development status: Active. defame \ No newline at end of file +- Development status: Active. defame diff --git a/assets/backgroundremove.jpg b/assets/backgroundremove.jpg new file mode 100644 index 0000000..fdf594e Binary files /dev/null and b/assets/backgroundremove.jpg differ diff --git a/assets/circulo (1).png b/assets/circulo (1).png new file mode 100644 index 0000000..7f25a52 Binary files /dev/null and b/assets/circulo (1).png differ diff --git a/assets/circulo (2).png b/assets/circulo (2).png new file mode 100644 index 0000000..c6b1dde Binary files /dev/null and b/assets/circulo (2).png differ diff --git a/assets/circulo (3).png b/assets/circulo (3).png new file mode 100644 index 0000000..f51adc6 Binary files /dev/null and b/assets/circulo (3).png differ diff --git a/assets/circulo.png b/assets/circulo.png new file mode 100644 index 0000000..c113ee5 Binary files /dev/null and b/assets/circulo.png differ diff --git a/assets/coach.png b/assets/coach.png deleted file mode 100644 index ec8bc2d..0000000 Binary files a/assets/coach.png and /dev/null differ diff --git a/assets/abra.png b/assets/coders/abra.png similarity index 100% rename from assets/abra.png rename to assets/coders/abra.png diff --git a/assets/avatar 2.png b/assets/coders/avatar 2.png similarity index 100% rename from assets/avatar 2.png rename to assets/coders/avatar 2.png diff --git a/assets/avatar 3.png b/assets/coders/avatar 3.png similarity index 100% rename from assets/avatar 3.png rename to assets/coders/avatar 3.png diff --git a/assets/avatar.png b/assets/coders/avatar.png similarity index 100% rename from assets/avatar.png rename to assets/coders/avatar.png diff --git a/assets/avatar4.png b/assets/coders/avatar4.png similarity index 100% rename from assets/avatar4.png rename to assets/coders/avatar4.png diff --git a/assets/avatar5.png b/assets/coders/avatar5.png similarity index 100% rename from assets/avatar5.png rename to assets/coders/avatar5.png diff --git a/assets/avatar6.png b/assets/coders/avatar6.png similarity index 100% rename from assets/avatar6.png rename to assets/coders/avatar6.png diff --git a/assets/bellsprout.png b/assets/coders/bellsprout.png similarity index 100% rename from assets/bellsprout.png rename to assets/coders/bellsprout.png diff --git a/assets/bullbasaur.png b/assets/coders/bullbasaur.png similarity index 100% rename from assets/bullbasaur.png rename to assets/coders/bullbasaur.png diff --git a/assets/caterpie.png b/assets/coders/caterpie.png similarity index 100% rename from assets/caterpie.png rename to assets/coders/caterpie.png diff --git a/assets/charmander.png b/assets/coders/charmander.png similarity index 100% rename from assets/charmander.png rename to assets/coders/charmander.png diff --git a/assets/dratini.png b/assets/coders/dratini.png similarity index 100% rename from assets/dratini.png rename to assets/coders/dratini.png diff --git a/assets/eevee.png b/assets/coders/eevee.png similarity index 100% rename from assets/eevee.png rename to assets/coders/eevee.png diff --git a/assets/jigglypuff.png b/assets/coders/jigglypuff.png similarity index 100% rename from assets/jigglypuff.png rename to assets/coders/jigglypuff.png diff --git a/assets/mankey.png b/assets/coders/mankey.png similarity index 100% rename from assets/mankey.png rename to assets/coders/mankey.png diff --git a/assets/meowth.png b/assets/coders/meowth.png similarity index 100% rename from assets/meowth.png rename to assets/coders/meowth.png diff --git a/assets/mew.png b/assets/coders/mew.png similarity index 100% rename from assets/mew.png rename to assets/coders/mew.png diff --git a/assets/pidgey.png b/assets/coders/pidgey.png similarity index 100% rename from assets/pidgey.png rename to assets/coders/pidgey.png diff --git a/assets/pikachu.png b/assets/coders/pikachu.png similarity index 100% rename from assets/pikachu.png rename to assets/coders/pikachu.png diff --git a/assets/psyduck.png b/assets/coders/psyduck.png similarity index 100% rename from assets/psyduck.png rename to assets/coders/psyduck.png diff --git a/assets/snorlax.png b/assets/coders/snorlax.png similarity index 100% rename from assets/snorlax.png rename to assets/coders/snorlax.png diff --git a/assets/squirtle.png b/assets/coders/squirtle.png similarity index 100% rename from assets/squirtle.png rename to assets/coders/squirtle.png diff --git a/assets/venonat.png b/assets/coders/venonat.png similarity index 100% rename from assets/venonat.png rename to assets/coders/venonat.png diff --git a/assets/weedle.png b/assets/coders/weedle.png similarity index 100% rename from assets/weedle.png rename to assets/coders/weedle.png diff --git a/assets/zubat.png b/assets/coders/zubat.png similarity index 100% rename from assets/zubat.png rename to assets/coders/zubat.png diff --git a/assets/icon.gif b/assets/icon.gif deleted file mode 100644 index 9dcfa72..0000000 Binary files a/assets/icon.gif and /dev/null differ diff --git a/assets/imagen-inicial.gif b/assets/imagen-inicial.gif deleted file mode 100644 index 64f54b3..0000000 Binary files a/assets/imagen-inicial.gif and /dev/null differ diff --git a/assets/logo-readme.png b/assets/logo-readme.png new file mode 100644 index 0000000..945bc12 Binary files /dev/null and b/assets/logo-readme.png differ diff --git a/assets/logo.png b/assets/logo.png deleted file mode 100644 index 94e8b30..0000000 Binary files a/assets/logo.png and /dev/null differ diff --git a/assets/newcoders/avatar20.png b/assets/newcoders/avatar20.png new file mode 100644 index 0000000..20f91cb Binary files /dev/null and b/assets/newcoders/avatar20.png differ diff --git a/assets/newcoders/avatar21.png b/assets/newcoders/avatar21.png new file mode 100644 index 0000000..440dba8 Binary files /dev/null and b/assets/newcoders/avatar21.png differ diff --git a/assets/newcoders/avatar22.png b/assets/newcoders/avatar22.png new file mode 100644 index 0000000..b7af220 Binary files /dev/null and b/assets/newcoders/avatar22.png differ diff --git a/assets/newcoders/avatar23.png b/assets/newcoders/avatar23.png new file mode 100644 index 0000000..807c6da Binary files /dev/null and b/assets/newcoders/avatar23.png differ diff --git a/assets/newcoders/avatar24.png b/assets/newcoders/avatar24.png new file mode 100644 index 0000000..6766bed Binary files /dev/null and b/assets/newcoders/avatar24.png differ diff --git a/assets/newcoders/avatar25.png b/assets/newcoders/avatar25.png new file mode 100644 index 0000000..96ebb57 Binary files /dev/null and b/assets/newcoders/avatar25.png differ diff --git a/assets/newcoders/avatar26.png b/assets/newcoders/avatar26.png new file mode 100644 index 0000000..fcee7d0 Binary files /dev/null and b/assets/newcoders/avatar26.png differ diff --git a/assets/newcoders/avatar27.png b/assets/newcoders/avatar27.png new file mode 100644 index 0000000..9212e81 Binary files /dev/null and b/assets/newcoders/avatar27.png differ diff --git a/assets/newcoders/avatar28.png b/assets/newcoders/avatar28.png new file mode 100644 index 0000000..b357357 Binary files /dev/null and b/assets/newcoders/avatar28.png differ diff --git a/assets/newcoders/avatar29.png b/assets/newcoders/avatar29.png new file mode 100644 index 0000000..60d1be7 Binary files /dev/null and b/assets/newcoders/avatar29.png differ diff --git a/assets/newcoders/avatar30.png b/assets/newcoders/avatar30.png new file mode 100644 index 0000000..7fa4b33 Binary files /dev/null and b/assets/newcoders/avatar30.png differ diff --git a/assets/newcoders/avatar31.png b/assets/newcoders/avatar31.png new file mode 100644 index 0000000..256c0ed Binary files /dev/null and b/assets/newcoders/avatar31.png differ diff --git a/assets/newcoders/avatar32.png b/assets/newcoders/avatar32.png new file mode 100644 index 0000000..d910874 Binary files /dev/null and b/assets/newcoders/avatar32.png differ diff --git a/assets/newcoders/avatar33.png b/assets/newcoders/avatar33.png new file mode 100644 index 0000000..8c0bc10 Binary files /dev/null and b/assets/newcoders/avatar33.png differ diff --git a/assets/newcoders/avatar34.png b/assets/newcoders/avatar34.png new file mode 100644 index 0000000..53349c1 Binary files /dev/null and b/assets/newcoders/avatar34.png differ diff --git a/assets/others/logo.png b/assets/others/logo.png new file mode 100644 index 0000000..95f42bc Binary files /dev/null and b/assets/others/logo.png differ diff --git a/assets/others/pikachu-catch-button.jpg b/assets/others/pikachu-catch-button.jpg new file mode 100644 index 0000000..a3ca6df Binary files /dev/null and b/assets/others/pikachu-catch-button.jpg differ diff --git a/assets/others/pikachu-remove-button.jpg b/assets/others/pikachu-remove-button.jpg new file mode 100644 index 0000000..536bacf Binary files /dev/null and b/assets/others/pikachu-remove-button.jpg differ diff --git a/assets/player.png b/assets/player.png deleted file mode 100644 index 1cdc384..0000000 Binary files a/assets/player.png and /dev/null differ diff --git a/assets/pokeball/pokeball1.png b/assets/pokeball/pokeball1.png new file mode 100644 index 0000000..66576c5 Binary files /dev/null and b/assets/pokeball/pokeball1.png differ diff --git a/assets/pokeball/pokeball2.png b/assets/pokeball/pokeball2.png new file mode 100644 index 0000000..34de90e Binary files /dev/null and b/assets/pokeball/pokeball2.png differ diff --git a/assets/pokeball/pokeball3.png b/assets/pokeball/pokeball3.png new file mode 100644 index 0000000..3ff74ea Binary files /dev/null and b/assets/pokeball/pokeball3.png differ diff --git a/assets/pokeball/pokeball4.png b/assets/pokeball/pokeball4.png new file mode 100644 index 0000000..d4b92cb Binary files /dev/null and b/assets/pokeball/pokeball4.png differ diff --git a/assets/pokeball/pokeball5.png b/assets/pokeball/pokeball5.png new file mode 100644 index 0000000..84184ea Binary files /dev/null and b/assets/pokeball/pokeball5.png differ diff --git a/assets/pokeball/pokeball6.png b/assets/pokeball/pokeball6.png new file mode 100644 index 0000000..debd5ef Binary files /dev/null and b/assets/pokeball/pokeball6.png differ diff --git a/audios/caught-a-pokemon.mp3 b/audios/caught-a-pokemon.mp3 new file mode 100644 index 0000000..b51a443 Binary files /dev/null and b/audios/caught-a-pokemon.mp3 differ diff --git a/audios/pokemon-3.mp3 b/audios/pokemon-3.mp3 new file mode 100644 index 0000000..efb03fe Binary files /dev/null and b/audios/pokemon-3.mp3 differ diff --git a/audios/pokemon-intro.mp3 b/audios/pokemon-intro.mp3 new file mode 100644 index 0000000..ad9622c Binary files /dev/null and b/audios/pokemon-intro.mp3 differ diff --git a/index.html b/index.html index d7cf087..bbe704e 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + @@ -17,30 +18,73 @@ -
+
-
-
- -
-
-
Your app to capture a coder!
+ +
+
LET'S GO. PLAY AND CATCH A CODER!
+
- + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
- @@ -48,119 +92,136 @@
Your app to capture a coder!
-
-
- +
+
+

Andrea

-
- +
+

Jaime

- +

Sophia

- +

Geovanny

- +

Bryan

- +

Diego B.

- +

Ainhoa

- +

Víctor

- +

Jassed

- +

Fernando

- +

Emily

- +

Virginia

- +

Diego A.

- +

Raúl

- +

Gisela

- +

Luis

- +

Adriana

- +

Pedro

- +

Jimmy

- +

Thuanny

- +

Cynthia

- +

Wanda

- +

Rubén

- +

Jorge

-
- +
+

Jes

- - + +
+
+ × +
+
+
+ + +
+ +
+
+ × +

Remove Coder

+ + +
+
-
@@ -168,6 +229,7 @@
Your app to capture a coder!
+ \ No newline at end of file diff --git a/png-transparent-computer-icons-moon-symbol-sun-monochrome-black-silhouette-thumbnail-removebg-preview.png b/png-transparent-computer-icons-moon-symbol-sun-monochrome-black-silhouette-thumbnail-removebg-preview.png new file mode 100644 index 0000000..b284116 Binary files /dev/null and b/png-transparent-computer-icons-moon-symbol-sun-monochrome-black-silhouette-thumbnail-removebg-preview.png differ diff --git a/script.js b/script.js index cf8c5d9..6b3c84f 100644 --- a/script.js +++ b/script.js @@ -1,47 +1,473 @@ - let coders = [ - {"image": "assets/eevee.png", "name": "Andrea"}, - {"image": "assets/meowth.png", "name": "Jaime"}, - {"image":"assets/psyduck.png", "name": "Sophia"}, - {"image": "assets/squirtle.png", "name": "Geovanny"}, - {"image": "assets/charmander.png", "name": "Bryan"}, - {"image": "assets/caterpie.png", "name": "Diego B."}, - {"image": "assets/jigglypuff.png", "name": "Ainhoa"}, - {"image": "assets/bullbasaur.png", "name": "Víctor"}, - {"image": "assets/abra.png", "name": "Jassed"}, - {"image": "assets/avatar4.png", "name": "Fernando"}, - {"image": "assets/avatar5.png", "name": "Emily"}, - {"image": "assets/bellsprout.png", "name": "Virginia"}, - {"image": "assets/dratini.png", "name": "Diego A."}, - {"image": "assets/mankey.png", "name": "Raúl"}, - {"image": "assets/mew.png", "name": "Gisela"}, - {"image": "assets/pidgey.png", "name": "Luis"}, - {"image": "assets/pikachu.png", "name": "Adriana"}, - {"image": "assets/weedle.png", "name": "Pedro"}, - {"image": "assets/zubat.png", "name": "Jimmy"}, - {"image": "assets/avatar 2.png", "name": "Thuanny"}, - {"image": "assets/avatar6.png", "name": "Cynthia"}, - {"image": "assets/avatar 3.png", "name": "Wanda"}, - {"image": "assets/avatar.png", "name": "Rubén"}, - {"image": "assets/venonat.png", "name": "Jorge"}, - {"image": "assets/snorlax.png", "name": "Jes"}, -] -console.log(coders); - -function randomCoders () { -let randomIndex = Math.floor(Math.random() * coders.length); -console.log(randomIndex); -let random = coders[randomIndex]; -console.log(random); -coders.splice(randomIndex, 1); -console.log(coders); -} + { image: "assets/coders/eevee.png", name: "Andrea" }, + { image: "assets/coders/meowth.png", name: "Jaime" }, + { image: "assets/coders/psyduck.png", name: "Sophia" }, + { image: "assets/coders/squirtle.png", name: "Geovanny" }, + { image: "assets/coders/charmander.png", name: "Bryan" }, + { image: "assets/coders/caterpie.png", name: "Diego B" }, + { image: "assets/coders/jigglypuff.png", name: "Ainhoa" }, + { image: "assets/coders/bullbasaur.png", name: "Víctor" }, + { image: "assets/coders/abra.png", name: "Jassed" }, + { image: "assets/coders/avatar4.png", name: "Fernando" }, + { image: "assets/coders/avatar5.png", name: "Emily" }, + { image: "assets/coders/bellsprout.png", name: "Virginia" }, + { image: "assets/coders/dratini.png", name: "Diego A" }, + { image: "assets/coders/mankey.png", name: "Raúl" }, + { image: "assets/coders/mew.png", name: "Gisela" }, + { image: "assets/coders/pidgey.png", name: "Luis" }, + { image: "assets/coders/pikachu.png", name: "Adriana" }, + { image: "assets/coders/weedle.png", name: "Pedro" }, + { image: "assets/coders/zubat.png", name: "Jimmy" }, + { image: "assets/coders/avatar 2.png", name: "Thuanny" }, + { image: "assets/coders/avatar6.png", name: "Cynthia" }, + { image: "assets/coders/avatar 3.png", name: "Wanda" }, + { image: "assets/coders/avatar.png", name: "Rubén" }, + { image: "assets/coders/venonat.png", name: "Jorge" }, + { image: "assets/coders/snorlax.png", name: "Jes" }, +]; + +let newCoders = [ + { image: "assets/newcoders/avatar20.png", name: "" }, + { image: "assets/newcoders/avatar21.png", name: "" }, + { image: "assets/newcoders/avatar22.png", name: "" }, + { image: "assets/newcoders/avatar23.png", name: "" }, + { image: "assets/newcoders/avatar24.png", name: "" }, + { image: "assets/newcoders/avatar25.png", name: "" }, + { image: "assets/newcoders/avatar26.png", name: "" }, + { image: "assets/newcoders/avatar27.png", name: "" }, + { image: "assets/newcoders/avatar28.png", name: "" }, + { image: "assets/newcoders/avatar29.png", name: "" }, + { image: "assets/newcoders/avatar30.png", name: "" }, + { image: "assets/newcoders/avatar31.png", name: "" }, + { image: "assets/newcoders/avatar32.png", name: "" }, + { image: "assets/newcoders/avatar33.png", name: "" }, + { image: "assets/newcoders/avatar34.png", name: "" }, +]; + +//SOUND ANIMATIONS + +const button = document.getElementById("music"); +const cancion = document.getElementById("cancion"); +let isPlaying = false; + +const toggleMusic = () => { + isPlaying ? cancion.pause() : cancion.play(); + isPlaying = !isPlaying; + button.classList.toggle("paused", !isPlaying); + button.style.animation = isPlaying + ? "pulse-animation_0011 1.1s infinite ease-in-out" + : "none"; +}; + +button.addEventListener("click", toggleMusic); + +let callToAction = document.getElementById("home__div-button"); +let soundHome = new Audio("audios/caught-a-pokemon.mp3"); +callToAction.addEventListener("click", () => { + soundHome.play(); +}); + +let catchButton = document.getElementById("buttons__bottom--first"); +let sound = new Audio("audios/pokemon-3.mp3"); +catchButton.addEventListener("click", () => { + sound.play(); +}); + +//CATCH BUTTON let buttonCatch = document.getElementById("buttons__bottom--first"); -let eventButton = () => randomCoders(); -buttonCatch.addEventListener("click", eventButton); +buttonCatch.addEventListener("click", () => { + if (coders.length > 0) { + let randomIndex = Math.floor(Math.random() * coders.length); + let random = coders[randomIndex]; + console.log(random); + coders.splice(randomIndex, 1); + console.log(coders); + + const modal = document.getElementById("modal-id"); + const modalContent = document.getElementById("modal-content-id"); + + const randomCoderImage = document.createElement("img"); + randomCoderImage.src = random.image; + modalContent.appendChild(randomCoderImage); + + const randomCoderName = document.createElement("h2"); + randomCoderName.textContent = random.name; + modalContent.appendChild(randomCoderName); + + modal.style.display = "block"; + + setTimeout(() => { + modal.style.display = "none"; + modalContent.removeChild(randomCoderImage); + modalContent.removeChild(randomCoderName); + }, 1000); + } else { + const modal = document.getElementById("modal-id"); + const modalContent = document.getElementById("modal-content-id"); + + const allCodersSelected = document.createElement("img"); + allCodersSelected.src = '/assets/others/pikachu-catch-button.jpg'; + modalContent.appendChild(allCodersSelected); + + const allCodersSelectedText = document.createElement("h2"); + allCodersSelectedText.textContent = + "All coders have been selected..."; + modalContent.appendChild(allCodersSelectedText); + + modal.style.display = "block"; + + setTimeout(() => { + modal.style.display = "none"; + modalContent.removeChild(allCodersSelected); + modalContent.removeChild(allCodersSelectedText); + }, 8000); + + window.history.back(); + } +}); + +//ADD BUTTON + +let addButton = document.getElementById("buttons__top--add"); +let addModal = document.getElementById("add__modal--id"); +let addModalContent = document.getElementById("add__modal--content--id"); +let nameInput = document.getElementById("add__name"); +let enter = document.getElementById("add__button"); +let selectedImage = ""; +let availableImagesContainer = document.getElementById( + "available__images--container" +); + +addButton.addEventListener("click", () => { + addModal.style.display = "block"; +}); + +let closeModal = () => { + addModal.style.display = "none"; + nameInput.value = ""; +}; + +let closeAddModal = document.getElementById("add__modal--close"); +closeAddModal.addEventListener("click", closeModal); + +newCoders.forEach((coder) => { + let imageContainer = document.createElement("div"); + imageContainer.classList.add("available__image--container"); + + let imageNewCoder = document.createElement("img"); + imageNewCoder.classList.add("available__images"); + imageNewCoder.src = coder.image; + imageNewCoder.style.maxWidth = "90%"; + + imageNewCoder.addEventListener("click", () => { + selectedImage = coder.image; + let allImages = document.querySelectorAll(".available__images"); + allImages.forEach((image) => { + image.style.border = "none"; + }); + imageNewCoder.style.border = "2px solid green"; + }); + + imageContainer.appendChild(imageNewCoder); + availableImagesContainer.appendChild(imageContainer); +}); + +enter.addEventListener("click", () => { + let name = nameInput.value.trim(); + if (name !== "" && selectedImage !== "") { + let newCoderValue = { image: selectedImage, name: name }; + coders.push(newCoderValue); + console.log(coders); + closeModal(); + + let newCoderDiv = document.createElement("div"); + newCoderDiv.classList.add("coders__person"); + + let newCoderImage = document.createElement("img"); + newCoderImage.classList.add("coders__img"); + newCoderImage.src = newCoderValue.image; + + let newCoderName = document.createElement("p"); + newCoderName.classList.add("coders__name"); + newCoderName.textContent = newCoderValue.name; + + newCoderDiv.appendChild(newCoderImage); + newCoderDiv.appendChild(newCoderName); + + let codersContainer = document.getElementById("coders__id"); + codersContainer.appendChild(newCoderDiv); + + newCoders = newCoders.filter((coder) => coder.image !== selectedImage); + + availableImagesContainer.innerHTML = ""; + + newCoders.forEach((coder) => { + let imageContainer = document.createElement("div"); + imageContainer.classList.add("available__image--container"); + + let imageNewCoder = document.createElement("img"); + imageNewCoder.classList.add("available__images"); + imageNewCoder.src = coder.image; + imageNewCoder.style.maxWidth = "90%"; + + imageNewCoder.addEventListener("click", () => { + selectedImage = coder.image; + let allImages = document.querySelectorAll(".available__images"); + allImages.forEach((image) => { + image.style.border = "none"; + }); + imageNewCoder.style.border = "2px solid green"; + }); + imageContainer.appendChild(imageNewCoder); + availableImagesContainer.appendChild(imageContainer); + }); + } else { + alert("Please enter a name and select an image before adding."); + } +}); + +///REMOVE BUTTON + +const removeModal = document.getElementById("remove-modal-id"); +const modalClose = document.getElementById("remove-modal-close-id"); +const removeButton = document.getElementById("remove"); +const modalButton = document.getElementById("remove-button"); + +removeButton.addEventListener( + "click", + () => (removeModal.style.display = "block") +); + +modalClose.addEventListener("click", () => { + removeModal.style.display = "none"; + document.getElementById("remove-name").value = ""; +}); + +function removeCoder() { + const modalInputValue = document.getElementById("remove-name").value.trim(); + let removedCoders = removeCoderByName(coders, modalInputValue); + if (removedCoders.length < coders.length) { + coders = removedCoders; + console.log("Coders:", coders); + updateCodersUI(); + } + let removedNewCoders = removeCoderByName(newCoders, modalInputValue); + if (removedNewCoders.length < newCoders.length) { + newCoders = removedNewCoders; + console.log('NewCoders:', newCoders); + // Update the UI to reflect the changes + updateNewCodersUI(); + } + removeModal.style.display = "none"; + document.getElementById("remove-name").value = ""; +} + +modalButton.addEventListener("click", removeCoder); + +function updateCodersUI() { + const codersContainer = document.querySelector(".coders"); + clearUIContainer(codersContainer); + coders.forEach((coder) => { + codersContainer.appendChild(createCoderElement(coder)); + }); +} + +function updateNewCodersUI() { + const newCodersContainer = document.querySelector(".new-coders"); + clearUIContainer(newCodersContainer); + newCoders.forEach((coder) => { + newCodersContainer.appendChild(createCoderElement(coder)); + }); +} + +function removeCoderByName(codersArray, nameToRemove) { + return codersArray.filter( + (coder) => coder.name.toLowerCase() !== nameToRemove.toLowerCase() + ); +} + +function createCoderElement(coder) { + let newCoderDiv = document.createElement("div"); + newCoderDiv.classList.add("coders__person"); + + let newCoderImage = document.createElement("img"); + newCoderImage.classList.add("coders__img"); + newCoderImage.src = coder.image; + + let newCoderName = document.createElement("p"); + newCoderName.classList.add("coders__name"); + newCoderName.textContent = coder.name; + + newCoderDiv.appendChild(newCoderImage); + newCoderDiv.appendChild(newCoderName); + + return newCoderDiv; +} + +function clearUIContainer(container) { + container.innerHTML = ""; +} + +modalButton.addEventListener('click', () => { + const modal = document.getElementById("modal-id"); + const modalContent = document.getElementById("modal-content-id"); + + const removedCoderAlertImage = document.createElement("img"); + removedCoderAlertImage.src = '/assets/others/pikachu-remove-button.jpg'; + modalContent.appendChild(removedCoderAlertImage); + + const removedCoderAlertText = document.createElement("h2"); + removedCoderAlertText.textContent = 'The coder has been removed...'; + modalContent.appendChild(removedCoderAlertText); + + modal.style.display = "block"; + + setTimeout(() => { + modal.style.display = "none"; + modalContent.removeChild(removedCoderAlertImage); + modalContent.removeChild(removedCoderAlertText); + }, 5000); +}); + +//RESET BUTTON + +const resetButton = document.getElementById("reset-button"); + +resetButton.addEventListener("click", () => { + location.reload(); +}); + +window.sr = ScrollReveal(); + +sr.reveal('.home__div-text', { + duration: 3000, + origin: 'bottom', + distance: '-100px' +}); + +sr.reveal('.pokeball', { + duration: 3000, + origin: 'bottom', + distance: '-100px' +}); + +sr.reveal('.home__div-button', { + duration: 3000, + origin: 'bottom', + distance: '-100px' +}); + +sr.reveal('.coders', { + duration: 3000, + origin: 'bottom', + distance: '-100px' +}); + + sr.reveal('.pokeball', { + distance: '50px', + duration: 1000, + rotate: { + x: 0, + y: 180, + z: 0 + }, + opacity: 0, + scale: 0.8, + easing: 'ease-in-out', + beforeReveal: (el) => { + el.style.opacity = 1; + el.style.transform = 'scale(1)'; + }, + afterReveal: (el) => { + el.style.transform = 'scale(1.1)'; + el.style.transition = 'transform 0.3s'; + setTimeout(() => { + el.style.transform = 'scale(1)'; + }, 300); + }, + reset: true + }); + + + + + + +//BOTOM PARA CAMBIAR COLORES +let modoBlanco = document.querySelector('.white_color'); +let modoVerde = document.querySelector('.green_color'); +let modoAzul = document.querySelector('.blue_color'); +let modoGris = document.querySelector('.gray_color'); +let modoAmarillo = document.querySelector('.yellow_color'); +let letras = document.querySelector('.home__div-text') + + +let body = document.querySelector('body'); + + +//BLANCO +function blanco (){ + modoBlanco.style.cssText= 'display: none'; + modoVerde.style.cssText= 'display: inline'; + modoGris.style.cssText= 'display: none'; + modoAmarillo.style.cssText= 'display: none'; + modoAzul.style.cssText ='display: none'; + body.style.cssText= 'background-color: white'; + letras.style.cssText = 'color: #93C3D9' +}; + +modoBlanco.addEventListener('click', blanco); + +//VERDE +function verde (){ + modoVerde.style.cssText ='display:none'; + modoBlanco.style.cssText = 'display: none'; + modoGris.style.cssText= 'display: none'; + modoAmarillo.style.cssText= 'display: none'; + modoAzul.style.cssText ='display: inline'; + body.style.cssText = 'background-color: #8ECEAC'; + letras.style.cssText = 'color: white' +}; + +modoVerde.addEventListener('click', verde) + +//AZUL +function azul (){ + modoVerde.style.cssText= 'display: none'; + modoAzul.style.cssText ='display: none'; + modoBlanco.style.cssText= 'display: none'; + modoAmarillo.style.cssText= 'display: none'; + modoGris.style.cssText= 'display: inline'; + body.style.cssText= 'background-color: #93C3D9'; + letras.style.cssText = 'color: white' +}; + +modoAzul.addEventListener('click', azul); +//GRIS +function gris (){ + modoVerde.style.cssText= 'display: none'; + modoAzul.style.cssText ='display: none'; + modoBlanco.style.cssText= 'display: none'; + modoGris.style.cssText= 'display: none'; + modoAmarillo.style.cssText= 'display: inline'; + body.style.cssText= 'background-color: rgb(235, 235, 235)'; + letras.style.cssText = 'color: #93C3D9' +}; +modoGris.addEventListener('click', gris); +//AMARILLO +function amarillo (){ + modoAzul.style.cssText ='display: none'; + modoBlanco.style.cssText= 'display: inline'; + modoGris.style.cssText= 'display: none'; + modoVerde.style.cssText= 'display: none'; + modoAmarillo.style.cssText= 'display: none'; + body.style.cssText= 'background-color: #F9EE8B'; + letras.style.cssText = 'color: #93C3D9' +}; +modoAmarillo.addEventListener('click', amarillo); diff --git a/styles/style.css b/styles/style.css index 2f30fbe..27fc62d 100644 --- a/styles/style.css +++ b/styles/style.css @@ -11,26 +11,192 @@ body { background-color: #fff; } +::-webkit-scrollbar { + width: 10px; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background-color: #e2d2bb; + border-radius: 5px; + box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.9); /* Add a subtle box shadow */ +} + +/* On hover */ +::-webkit-scrollbar-thumb:hover { + background-color: #e4c79d; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9); +} + html { scroll-behavior: smooth; } -.header { +header { width: 100%; height: 8vh; - background-color: rgb(239, 171, 48); + background-color: rgb(249, 229, 32); position: sticky; top: 0; display: flex; align-items: center; - z-index: 70; + z-index: 7; +} + +.change_color { + display: flex; +} + +.green_color { + background-color: rgb(249, 229, 32); + padding: 0.5em; + border-radius: 10px; + border: 1px solid rgb(249, 229, 32); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 7; + display: inline; + height: 2rem; + width: 4.5rem; + cursor: pointer; + animation: pulse-animation_0011 1.1s infinite ease-in-out; +} + +.green_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +.white_color { + background-color: rgb(249, 229, 32); + padding: 0.5em; + border-radius: 10px; + border: 1px solid rgb(249, 229, 32); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 4; + display: none; + height: 2rem; + width: 4.5rem; + cursor: pointer; + animation: pulse-animation_0011 1.1s infinite ease-in-out; +} + +.white_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +.blue_color { + background-color: rgb(249, 229, 32); + padding: 0.5em; + border-radius: 10px; + border: 1px solid rgb(249, 229, 32); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 3; + display: none; + height: 2rem; + width: 4.5rem; + cursor: pointer; + animation: pulse-animation_0011 1.1s infinite ease-in-out; +} + +.blue_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +.gray_color { + background-color: rgb(249, 229, 32); + padding: 0.5em; + border-radius: 10px; + border: 1px solid rgb(249, 229, 32); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 2; + display: none; + height: 2rem; + width: 4.5rem; + cursor: pointer; + animation: pulse-animation_0011 1.1s infinite ease-in-out; +} + +.gray_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +.yellow_color { + background-color: rgb(249, 229, 32); + padding: 0.5em; + border-radius: 10px; + border: 1px solid rgb(249, 229, 32); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 1; + display: none; + height: 2rem; + width: 4.5rem; + cursor: pointer; + animation: pulse-animation_0011 1.1s infinite ease-in-out; +} + +.yellow_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +#music { + position: relative; + background-color: rgb(249, 229, 32); + padding: 0.5em; + padding-left: 1em; + padding-right: 1em; + border-radius: 10px; + border: 1px solid rgb(249, 229, 32); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + cursor: pointer; + animation: pulse-animation_0011 1.1s infinite ease-in-out; +} + +#music.paused::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 2px; + height: 65px; + background-color: rgb(255, 0, 0); + transform: translate(-50%, -50%) rotate(67deg); } .nav { + align-items: center; + display: flex; + justify-content: space-around; + align-items: center; width: 100%; } .nav__img { - width: 60vw; + width: 50vw; height: 6vh; } @@ -45,23 +211,33 @@ html { grid-template-rows: 30vh 21vh 15vh 25vh; } .home__div-modifier { - color: rgb(132, 147, 208); - font-size: 2rem; + color: #fff; + font-size: 3rem; + margin-top: 60%; +} +.home__div-text { + font-size: 1.5rem; + margin-top: 5%; + text-align: center; + color: rgb(147, 195, 217); } -.home__div-coach { - width: 40vw; - height: 18vh; +.home__div-modifier2 { + margin-top: 20%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; border-radius: 50%; } .home__div-button { cursor: pointer; - background-color: rgb(239, 171, 48); + background-color: rgb(249, 229, 32); border-radius: 5rem; height: 3rem; - width: 8rem; + width: 9rem; margin: 1rem; + margin-top: 20rem; font-weight: bold; color: white; + background: linear-gradient(110deg, rgb(249, 229, 32) 10%, #FF9442 50%, rgb(147, 195, 217) 50%); box-shadow: 1px 1px 5px 1px; } .home__div { @@ -75,14 +251,19 @@ html { justify-content: center; } -.buttons__bottom--first, .home__div-button { +.pokeball { + width: 15vh; +} + +.buttons__bottom--first, +.home__div-button { cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; - width: 150px; - height: 60px; + width: 12rem; + height: 3.7rem; overflow: hidden; border: 1px solid #fff; border-radius: 50px; @@ -105,6 +286,41 @@ button:hover .pika { top: 0%; } +.modal { + display: none; /* Oculta la ventana modal por defecto */ + position: fixed; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */ + overflow: auto; +} + +.modal-content { + background-color: #fff; + margin: 60% auto; + padding: 20px; + border: 1px solid #ccc; + width: 300px; + text-align: center; +} + +.modal-content img { + max-width: 100%; + max-height: 150px; + animation: fade-in 3s ease-in-out; +} + +@keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} @keyframes tilt { 0% { transform: translateX(-50%) scale(1); @@ -165,11 +381,7 @@ button:hover .go { text-align: center; } .coders-second-modifier { - background-color: rgb(132, 147, 208); -} -.coders__person-modifier { - grid-column: 2/4; - justify-self: center; + background-color: rgb(147, 195, 217); } .buttons__top { @@ -177,9 +389,9 @@ button:hover .go { justify-content: center; } .buttons__top--addremove { - color: rgb(132, 147, 208); - background-color: white; - border: rgb(132, 147, 208); + color: rgb(147, 195, 217); + background-color: #fff; + border: rgb(147, 195, 217); border-radius: 5rem; height: 3rem; width: 8rem; @@ -188,6 +400,60 @@ button:hover .go { box-shadow: 1px 1px 5px 1px rgb(129, 129, 129); cursor: pointer; } +.buttons__top .add__modal { + display: none; + position: fixed; + z-index: 30; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + overflow: auto; +} +.buttons__top .add__modal--content { + background-color: #fff; + margin: 60% auto; + padding: 20px; + border: 1px solid #ccc; + width: 300px; + text-align: center; +} +.buttons__top .add__modal--close { + position: relative; + top: 0%; + left: 50%; + font-size: 1.5rem; + cursor: pointer; +} +.buttons__top .add__modal--close:hover { + color: red; +} +.buttons__top .add__modal--content input { + display: block; + margin-bottom: 10px; + width: 100%; + padding: 5px; +} +.buttons__top .add__modal--content button { + background-color: #4caf50; + color: white; + padding: 10px 20px; + border: none; + cursor: pointer; +} +.buttons__top .add__modal--content button:hover { + background-color: #45a049; +} +.buttons__top .available__images--container { + display: grid; + grid-template-columns: 20% 20% 20% 20% 20%; +} +.buttons__top .add__coder { + position: relative; + top: 0%; + bottom: 50%; +} .buttons__bottom { display: flex; @@ -195,7 +461,7 @@ button:hover .go { } .buttons__bottom--first { color: #fff; - background-color: rgb(239, 171, 48); + background-color: rgb(249, 229, 32); border: #fff; border-radius: 5rem; height: 3rem; @@ -205,75 +471,139 @@ button:hover .go { box-shadow: 1px 1px 5px 1px rgb(129, 129, 129); } .buttons__bottom-second-modifier { - background-color: rgb(132, 147, 208); + background-color: rgb(147, 195, 217); +} + +.remove-modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 9999; +} + +.remove-modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + width: 300px; +} + +.remove-modal-close { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; +} + +remove-modal-close:hover { + color: #ff0000; +} + +.remove-modal h2 { + margin-bottom: 10px; + text-align: center; +} + +.remove-modal input { + display: block; + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.remove-modal button { + display: block; + width: 100%; + padding: 10px; + background-color: rgb(147, 195, 217); + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; } @media screen and (min-width: 720px) { - .header { + header { display: flex; padding: 0%; width: 100%; height: 12vh; - background-color: rgb(239, 171, 48); + background-color: rgb(249, 229, 32); align-items: center; z-index: 7; } + .change_color { + display: flex; + } + .nav { + align-items: center; + display: flex; + justify-content: space-evenly; + align-items: center; + width: 100%; + } .nav__logo1 { height: 100%; - width: 100%; + width: 85%; margin-right: 0.3%; } .nav__img { width: 20%; + height: 9vh; } .home__div { display: flex; align-content: center; justify-content: center; } - .home__div-img { - width: 60%; - height: 60%; - margin-top: 5%; - align-content: center; - } .home__div-text { - font-size: 1.5rem; + font-size: 2.2rem; margin-top: 5%; text-align: center; - color: rgb(132, 147, 208); + color: rgb(147, 195, 217); } - .home__div-coach { - display: flex; - width: 10vh; - height: 10vh; - align-content: center; - justify-content: center; - margin-top: 3%; - border-radius: 7.5vh; + .home__div-modifier2 { + margin-top: 5%; } .home__div-button { display: flex; - margin-top: 2%; + margin-top: 60%; width: 18rem; height: 3.5rem; border-radius: 1.7rem; - background-color: rgb(239, 171, 48); + background-color: rgb(249, 229, 32); align-items: center; justify-content: center; font-size: 1rem; font-weight: 900; color: #fff; border-color: #fff; + background: linear-gradient(110deg, rgb(249, 229, 32) 10%, #FF9442 50%, rgb(147, 195, 217) 50%); } .home__game-link { text-decoration: none; } /*DESKTOP CODERS*/ + .modal-content { + margin: 16% auto; + } .coders { + min-height: 80vh; + max-height: 150vh; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; - grid-template-rows: 20% 20% 20% 20% 20%; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; place-items: center; text-align: center; gap: 0; @@ -285,17 +615,14 @@ button:hover .go { height: 6vh; width: 3vw; } - .coders__person-modifier { - grid-column: 5/6; - } .buttons__top { display: flex; justify-content: center; } .buttons__top--addremove { - color: rgb(132, 147, 208); - background-color: #f5f5f5; - border: rgb(132, 147, 208); + color: rgb(147, 195, 217); + background-color: #fff; + border: rgb(147, 195, 217); border-radius: 5rem; height: 3rem; width: 8rem; @@ -303,13 +630,16 @@ button:hover .go { font-weight: bold; box-shadow: 1px 1px 5px 1px rgb(129, 129, 129); } + .buttons__top .add__modal--content { + margin: 10% auto; + } .buttons__bottom { display: flex; justify-content: center; } .buttons__bottom--first { color: #fff; - background-color: rgb(239, 171, 48); + background-color: rgb(249, 229, 32); border: #fff; border-radius: 5rem; height: 3rem; @@ -319,6 +649,6 @@ button:hover .go { box-shadow: 1px 1px 5px 1px rgb(129, 129, 129); } .buttons__bottom-second-modifier { - background-color: rgb(132, 147, 208); + background-color: rgb(147, 195, 217); } }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/styles/style.css.map b/styles/style.css.map index 1e9cbd6..761f9b3 100644 --- a/styles/style.css.map +++ b/styles/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAoBA;EACI,UAAA;EACA,SAAA;EACA,sBAAA;EACA,iCAAA;ACnBJ;;ADsBA;EACI,WAAA;EACA,YAAA;EACA,sBAAA;ACnBJ;;ADsBA;EACI,uBAAA;ACnBJ;;ADsBA;EACI,WAAA;EACA,WAAA;EACA,mCAAA;EACA,gBAAA;EACA,MAAA;EACA,aAAA;EACA,mBAAA;EACA,WAAA;ACnBJ;;ADsBA;EACI,WAAA;ACnBJ;ADqBI;EACI,WAAA;EACA,WAAA;ACnBR;;ADuBA;EACI,aAAA;EACA,qBAAA;EACA,mBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,2BAAA;EACA,uCAAA;ACpBJ;ADqBI;EACI,yBAAA;EACA,eAAA;ACnBR;ADqBI;EACI,WAAA;EACA,YAAA;EACA,kBAAA;ACnBR;ADqBI;EACI,eAAA;EACA,mCAAA;EACA,mBAAA;EACA,YAAA;EACA,WAAA;EACA,YAAA;EACA,iBAAA;EACA,YAAA;EACA,2BAAA;ACnBR;ADqBI;EACI,WAAA;ACnBR;ADqBI;EACI,WAAA;ACnBR;ADqBI;EACI,aAAA;EACA,uBAAA;ACnBR;;ADyBA;EACI,eAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,kBAAA;EACA,YAAA;EACA,YAAA;EACA,gBAAA;EACA,sBAAA;EACA,mBAAA;EACA,kBAAA;EACA,qPAAA;ACtBJ;;AD8BE;EACE,kBAAA;EACA,UAAA;EACA,SAAA;EACA,2BAAA;EACA,YAAA;EACA,YAAA;EACA,oBAAA;EACA,yCAAA;AC3BJ;;AD8BE;EACE,OAAA;AC3BJ;;AD+BE;EACE;IACE,oCAAA;EC5BJ;ED8BE;IACE,sCAAA;EC5BJ;ED8BE;IACE,oCAAA;EC5BJ;AACF;AD+BE;EACE,kBAAA;EACA,WAAA;EACA,QAAA;EACA,SAAA;EACA,gCAAA;EACA,eAAA;EACA,gBAAA;EACA,mBAAA;EACA,cAAA;EACA,UAAA;AC7BJ;;ADgCE;EACA,kBAAA;AC7BF;;AD+BE;EACE;IACE,mBAAA;EC5BJ;ED8BE;IACE,qBAAA;EC5BJ;ED8BE;IACE,mBAAA;EC5BJ;AACF;AD8BE;EACE,eAAA;AC5BJ;;ADgCA;EACI,aAAA;EACA,sCAAA;EACA,+CAAA;EACA,qBAAA;EACA,mBAAA;EACA,SAAA;EACA,gBAAA;AC7BJ;AD8BI;EACI,aAAA;EACA,WAAA;AC5BR;AD8BI;EACI,kBAAA;AC5BR;AD+BI;EACI,oCAAA;AC7BR;AD+BI;EACI,gBAAA;EACA,oBAAA;AC7BR;;ADiCA;EACI,aAAA;EACA,uBAAA;AC9BJ;AD+BI;EAvMA,yBAwM2B;EAvM3B,uBAuMmD;EAtMnD,0BAsM0D;EArM1D,mBAqMkF;EApMlF,YAoMwF;EAnMxF,WAmM8F;EAlM9F,YAkMoG;EAjMpG,iBAiM0G;EAhM1G,8CAgMgH;EAC5G,eAAA;ACrBR;;ADyBA;EACI,aAAA;EACA,uBAAA;ACtBJ;ADwBI;EAjNA,WAkN2B;EAjN3B,mCAiNiC;EAhNjC,YAgNwD;EA/MxD,mBA+M8D;EA9M9D,YA8MoE;EA7MpE,WA6M0E;EA5M1E,YA4MgF;EA3MhF,iBA2MsF;EA1MtF,8CA0M4F;ACdhG;ADiBI;EACI,oCAAA;ACfR;;ADqBA;EAEI;IACF,aAAA;IACA,WAAA;IACA,WAAA;IACA,YAAA;IACA,mCAAA;IACA,mBAAA;IACM,UAAA;ECnBN;EDqBM;IACL,YAAA;IACA,WAAA;IACA,kBAAA;ECnBD;EDqBM;IACI,UAAA;ECnBV;EDuBU;IACR,aAAA;IACA,qBAAA;IACA,uBAAA;ECrBF;EDuBU;IACA,UAAA;IACM,WAAA;IACA,cAAA;IACA,qBAAA;ECrBhB;EDuBgB;IACE,iBAAA;IACA,cAAA;IACA,kBAAA;IACA,yBAAA;ECrBlB;EDuBgB;IACE,aAAA;IACA,WAAA;IACA,YAAA;IACA,qBAAA;IACA,uBAAA;IACA,cAAA;IACA,oBAAA;ECrBlB;EDuBgB;IACE,aAAA;IACA,cAAA;IACA,YAAA;IACA,cAAA;IACA,qBAAA;IACA,mCAAA;IACA,mBAAA;IACA,uBAAA;IACA,eAAA;IACA,gBAAA;IACA,WAAA;IACA,kBAAA;ECrBlB;EDwBc;IACI,qBAAA;ECtBlB;ED0BF,iBAAA;EAEI;IACI,aAAA;IACA,0CAAA;IACA,uCAAA;IACA,mBAAA;IACA,kBAAA;IACA,MAAA;ECzBN;ED0BE;IACI,YAAA;ECxBN;ED0BE;IACI,WAAA;IACA,UAAA;ECxBN;ED0BE;IACI,gBAAA;ECxBN;ED4BE;IACI,aAAA;IACA,uBAAA;EC1BN;ED2BM;IAvTJ,yBAwT+B;IAvT/B,yBAuTuD;IAtTvD,0BAsTgE;IArThE,mBAqTwF;IApTxF,YAoT8F;IAnT9F,WAmToG;IAlTpG,YAkT0G;IAjT1G,iBAiTgH;IAhThH,8CAgTsH;ECjBxH;EDqBE;IACI,aAAA;IACA,uBAAA;ECnBN;EDqBM;IAhUJ,WAiU+B;IAhU/B,mCAgUqC;IA/TrC,YA+T4D;IA9T5D,mBA8TkE;IA7TlE,YA6TwE;IA5TxE,WA4T8E;IA3T9E,YA2ToF;IA1TpF,iBA0T0F;IAzT1F,8CAyTgG;ECXlG;EDcM;IACI,oCAAA;ECZV;AACF","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/styles/style.scss b/styles/style.scss index ba3e7e8..9d619e1 100644 --- a/styles/style.scss +++ b/styles/style.scss @@ -1,9 +1,9 @@ $colors: ( -"orange": rgba(239, 171, 48, 1), -"blue": rgba(132, 147, 208, 1), -"grey": #F5F5F5, -"grey-shadow": rgba(129, 129, 129, 1), -"white": #fff + "yellow": rgba(249, 229, 32), + "blue": rgba(147, 195, 217), + "grey": #F5F5F5, + "grey-shadow": rgba(129, 129, 129, 1), + "white": #fff ); @mixin stylesButton ($arg1, $arg2, $arg3, $arg4, $arg5, $arg6, $arg7, $arg8, $arg9) { @@ -19,10 +19,10 @@ $colors: ( } * { - padding: 0; - margin: 0; - box-sizing: border-box; - font-family: 'Roboto', sans-serif; + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: "Roboto", sans-serif; } body { @@ -31,31 +31,197 @@ body { background-color: map-get($colors, "white"); } +::-webkit-scrollbar { + width: 10px; + } + + /* Handle */ + ::-webkit-scrollbar-thumb { + background-color: #e2d2bb; + border-radius: 5px; + box-shadow: inset 0px 0px 6px rgba(0, 0, 0, 0.9); /* Add a subtle box shadow */ + } + + /* On hover */ + ::-webkit-scrollbar-thumb:hover { + background-color: #e4c79d; + box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9); + } + html { - scroll-behavior: smooth; + scroll-behavior: smooth; } -.header{ +header { width: 100%; height: 8vh; - background-color: map-get($colors, "orange"); + background-color: map-get($colors, "yellow"); position: sticky; top: 0; display: flex; align-items: center; - z-index: 70; + z-index: 7; } -.nav{ - width: 100%; +//CAMBIO DE COLOR + +.change_color { + display: flex; +} + +.green_color { + background-color: map-get($colors, "yellow"); + padding: 0.5em; + border-radius: 10px; + border: 1px solid map-get($colors, "yellow"); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 7; + display: inline; + height: 2rem; + width: 4.5rem; + cursor: pointer; + +} + +.green_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +.white_color { + background-color: map-get($colors, "yellow"); + padding: 0.5em; + border-radius: 10px; + border: 1px solid map-get($colors, "yellow"); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 4; + display: none; + height: 2rem; + width: 4.5rem; + cursor: pointer; +} + +.white_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +.blue_color{ + background-color: map-get($colors, "yellow"); + padding: 0.5em; + border-radius: 10px; + border: 1px solid map-get($colors, "yellow"); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 3; + display: none; + height: 2rem; + width: 4.5rem; + cursor: pointer; +} + +.blue_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +.gray_color { + background-color: map-get($colors, "yellow"); + padding: 0.5em; + border-radius: 10px; + border: 1px solid map-get($colors, "yellow"); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 2; + display: none; + height: 2rem; + width: 4.5rem; + cursor: pointer; +} + +.gray_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + +.yellow_color{ + background-color: map-get($colors, "yellow"); + padding: 0.5em; + border-radius: 10px; + border: 1px solid map-get($colors, "yellow"); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + z-index: 1; + display: none; + height: 2rem; + width: 4.5rem; + cursor: pointer; +} + +.yellow_color img { + height: 2rem; + width: 2rem; + position: relative; + bottom: 0.5rem; +} + + + +// MUSICA PRINCIPAL HEADER +#music { + position: relative; + background-color: map-get($colors, "yellow"); + padding: 0.5em; + padding-left: 1em; + padding-right: 1em; + border-radius: 10px; + border: 1px solid map-get($colors, "yellow"); + box-shadow: 0px 0px 2px 1px white; + color: black; + font-weight: 900; + cursor: pointer; + } - &__img{ - width:60vw; + #music.paused::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 2px; + height: 65px; + background-color: rgb(255, 0, 0); + transform: translate(-50%, -50%) rotate(67deg); + } + + .nav { + align-items: center; + display: flex; + justify-content: space-around; + align-items: center; + width: 100%; + + &__img { + width: 50vw; height: 6vh; + } } -} - -.home{ + +.home { display: grid; justify-items: center; align-items: center; @@ -64,61 +230,80 @@ html { height: 100%; grid-template-columns: 100%; grid-template-rows: 30vh 21vh 15vh 25vh; - &__div-modifier{ + + &__div-modifier { + color: map-get($colors, "white"); + font-size: 3rem; + margin-top: 60%; + } + &__div-text { + font-size: 1.5rem; + margin-top: 5%; + text-align: center; color: map-get($colors, "blue"); - font-size: 2rem; } - &__div-coach{ - width: 40vw; - height: 18vh; - border-radius: 50%; + &__div-modifier2 { + margin-top: 20%; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + border-radius: 50%; } - &__div-button{ + + &__div-button { cursor: pointer; - background-color: map-get($colors, "orange"); + background-color: map-get($colors, "yellow"); border-radius: 5rem; height: 3rem; - width: 8rem; + width: 9rem; margin: 1rem; + margin-top:20rem; font-weight: bold; - color:white; + color: white; + background: linear-gradient(110deg, map-get($colors, "yellow") 10%, #FF9442 50%, map-get($colors, "blue") 50%); box-shadow: 1px 1px 5px 1px; } - &__div{ + + &__div { width: 100%; } - &__div-img{ + + &__div-img { width: 100%; } &__div-modifier3{ display: grid; justify-content: center; } + + } +.pokeball{ + width: 15vh; +} +//PiKACHU ANIMATIONS -//PIKACHU ANIMATIONS - -.buttons__bottom--first, .home__div-button { +.buttons__bottom--first, +.home__div-button { cursor: pointer; display: flex; justify-content: center; align-items: center; position: relative; - width: 150px; - height: 60px; + width: 12rem; + height: 3.7rem; overflow: hidden; border: 1px solid map-get($colors, "white"); border-radius: 50px; padding-left: 35px; box-shadow: 2.9px 2.9px 2.2px rgba(0, 0, 0, 0.019), - 5.2px 5.2px 5.3px rgba(0, 0, 0, 0.023), - 7px 7px 10px rgba(0, 0, 0, 0.025), - 8.7px 8.7px 17.9px rgba(0, 0, 0, 0.024), - 11.3px 11.3px 33.4px rgba(0, 0, 0, 0.023), - 20px 20px 80px rgba(0, 0, 0, 0.02); - } - - .pika { + 5.2px 5.2px 5.3px rgba(0, 0, 0, 0.023), + 7px 7px 10px rgba(0, 0, 0, 0.025), + 8.7px 8.7px 17.9px rgba(0, 0, 0, 0.024), + 11.3px 11.3px 33.4px rgba(0, 0, 0, 0.023), + 20px 20px 80px rgba(0, 0, 0, 0.02); + } + +.pika { position: absolute; top: -160%; left: 50%; @@ -127,26 +312,63 @@ html { height: auto; transition: 0.5s all; animation: tilt 1.1s infinite ease-in-out; - } - - button:hover .pika { +} + +button:hover .pika { top: 0%; +} + +.modal { + display: none; /* Oculta la ventana modal por defecto */ + position: fixed; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */ + overflow: auto; + } + +.modal-content { + background-color: #fff; + margin: 60% auto; + padding: 20px; + border: 1px solid #ccc; + width: 300px; + text-align: center; } + .modal-content img { + max-width: 100%; + max-height: 150px; + animation: fade-in 3s ease-in-out; + } - @keyframes tilt { + + @keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } +@keyframes tilt { 0% { - transform: translateX(-50%) scale(1); + transform: translateX(-50%) scale(1); } + 50% { - transform: translateX(-50%) scale(1.1); + transform: translateX(-50%) scale(1.1); } + 100% { - transform: translateX(-50%) scale(1); + transform: translateX(-50%) scale(1); } - } - - .go { +} + +.go { position: absolute; width: 100%; top: 50%; @@ -157,25 +379,30 @@ html { letter-spacing: 1px; line-height: 1; z-index: 2; - } - - button:hover .go{ - visibility: hidden; - } - @keyframes pulse-animation_0011 { +} + +button:hover .go { + visibility: hidden; +} + +@keyframes pulse-animation_0011 { 0% { - transform: scale(1); + transform: scale(1); } + 50% { - transform: scale(1.1); + transform: scale(1.1); } + 100% { - transform: scale(1); + transform: scale(1); } - } - .buttons__bottom-second-modifier { +} + +.buttons__bottom-second-modifier { padding-left: 0; - } +} + //CODERS-PHONE .coders { @@ -186,10 +413,12 @@ html { align-items: center; gap: 1rem; margin-top: 2rem; + &__img { height: 5.8vh; width: 13vw; } + &__name { text-align: center; } @@ -197,144 +426,292 @@ html { &-second-modifier { background-color: map-get($colors, "blue"); } - &__person-modifier { - grid-column: 2/4; - justify-self: center; - } } .buttons__top { display: flex; justify-content: center; + &--addremove { - @include stylesButton (rgba(132, 147, 208, 1), white, rgba(132, 147, 208, 1), 5rem, 3rem, 8rem, 1rem, bold, 1px 1px 5px 1px rgba(129, 129, 129, 1)); + @include stylesButton (map-get($colors, "blue"), map-get($colors, "white"), map-get($colors, "blue"), 5rem, 3rem, 8rem, 1rem, bold, 1px 1px 5px 1px map-get($colors, "grey-shadow")); cursor: pointer } + .add__modal { + display: none; + position: fixed; + z-index: 30; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + overflow: auto; + + &--content { + background-color: #fff; + margin: 60% auto; + padding: 20px; + border: 1px solid #ccc; + width: 300px; + text-align: center; + } + + &--close { + position: relative; + top: 0%; + left: 50%; + font-size: 1.5rem; + cursor: pointer; + } + + &--close:hover { + color: red; + } + + &--content input { + display: block; + margin-bottom: 10px; + width: 100%; + padding: 5px; + } + + &--content button { + background-color: #4caf50; + color: white; + padding: 10px 20px; + border: none; + cursor: pointer; + } + + &--content button:hover { + background-color: #45a049; + } + } + + .available__images--container { + display: grid; + grid-template-columns: 20% 20% 20% 20% 20%; + } + + .add__coder { + position: relative; + top: 0%; + bottom: 50%; + } } .buttons__bottom { - display: flex; - justify-content: center; + display: flex; + justify-content: center; &--first { - @include stylesButton (#fff, rgba(239, 171, 48, 1), #fff, 5rem, 3rem, 8rem, 1rem, bold, 1px 1px 5px 1px rgba(129, 129, 129, 1)); + @include stylesButton (map-get($colors, "white"), map-get($colors, "yellow"), map-get($colors, "white"), 5rem, 3rem, 8rem, 1rem, bold, 1px 1px 5px 1px map-get($colors, "grey-shadow")); } &-second-modifier { background-color: map-get($colors, "blue"); } } +.remove-modal { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.7); + z-index: 9999; +} +.remove-modal-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + width: 300px; +} + +.remove-modal-close { + position: absolute; + top: 10px; + right: 10px; + cursor: pointer; +} +remove-modal-close:hover { + color: #ff0000; +} + +.remove-modal h2 { + margin-bottom: 10px; + text-align: center; +} + +.remove-modal input { + display: block; + width: 100%; + padding: 10px; + margin-bottom: 15px; + border: 1px solid #ccc; + border-radius: 4px; +} + +.remove-modal button { + display: block; + width: 100%; + padding: 10px; + background-color: map-get($colors, "blue"); + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.remove-modal button:hover { + background-color: #0056b3; +} +.remove-modal-content { +background-image: url(/assets/backgroundremove.jpg); +background-size: cover; +background-repeat: no-repeat; +} // Media query for desktop @media screen and (min-width: 720px) { - .header { - display: flex; - padding: 0%; - width: 100%; - height: 12vh; - background-color: map-get($colors, "orange"); - align-items: center; - z-index: 7; - } - .nav__logo1 { - height: 100%; - width: 100%; - margin-right: 0.3%; - } - .nav__img { - width: 20%; - } - - .home{ - &__div{ - display: flex; - align-content: center; - justify-content: center; - } - &__div-img{ - width: 60%; - height: 60%; - margin-top: 5%; - align-content: center; - } - &__div-text{ - font-size: 1.5rem; - margin-top: 5%; - text-align: center; - color: map-get($colors, "blue"); - } - &__div-coach{ - display: flex; - width: 10vh; - height: 10vh; - align-content: center; - justify-content: center; - margin-top: 3%; - border-radius: 7.5vh; - } - &__div-button{ - display: flex; - margin-top: 2%; - width: 18rem; - height: 3.5rem; - border-radius: 1.7rem; - background-color: map-get($colors, "orange"); - align-items: center; - justify-content: center; - font-size: 1rem; - font-weight: 900; - color: map-get($colors, "white"); - border-color: map-get($colors, "white"); - - } - &__game-link { - text-decoration: none; - } - } - -/*DESKTOP CODERS*/ +header { + display: flex; + padding: 0%; + width: 100%; + height: 12vh; + background-color: map-get($colors, "yellow"); + align-items: center; + z-index: 7; +} + +.change_color { + display: flex; +} + +.nav { + align-items: center; + display: flex; + justify-content: space-evenly; + align-items: center; + width: 100%; +} + +.nav__logo1 { + height: 100%; + width: 85%; + margin-right: 0.3%; +} + +.nav__img { + width: 20%; + height: 9vh; +} + +.home { + &__div { + display: flex; + align-content: center; + justify-content: center; + } + + &__div-text { + font-size: 2.2rem; + margin-top: 5%; + text-align: center; + color: map-get($colors, "blue"); + } + + &__div-modifier2{ + margin-top: 5%; + } + + &__div-button { + display: flex; + margin-top: 60%; + width: 18rem; + height: 3.5rem; + border-radius: 1.7rem; + background-color: map-get($colors, "yellow"); + align-items: center; + justify-content: center; + font-size: 1rem; + font-weight: 900; + color: map-get($colors, "white"); + border-color: map-get($colors, "white"); + background: linear-gradient(110deg, map-get($colors, "yellow") 10%, #FF9442 50%, map-get($colors, "blue") 50%); + + } + + &__game-link { + text-decoration: none; + } +} + /*DESKTOP CODERS*/ + .modal-content { + margin: 16% auto; + + } .coders { + min-height: 80vh; + max-height: 150vh; display: grid; grid-template-columns: 20% 20% 20% 20% 20%; - grid-template-rows: 20% 20% 20% 20% 20%; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; place-items: center; text-align: center; gap: 0; - &__person { - margin: 1rem; - } - &__img { - height: 6vh; - width: 3vw; - } - &__person-modifier { - grid-column: 5/6; - } + + &__person { + margin: 1rem; + } + + &__img { + height: 6vh; + width: 3vw; + } + } .buttons__top { display: flex; justify-content: center; + &--addremove { - @include stylesButton (rgba(132, 147, 208, 1), #f5f5f5, rgba(132, 147, 208, 1), 5rem, 3rem, 8rem, 1rem, bold, 1px 1px 5px 1px rgba(129, 129, 129, 1)); + @include stylesButton (map-get($colors,"blue"), map-get($colors,"white"), map-get($colors,"blue"), 5rem, 3rem, 8rem, 1rem, bold, 1px 1px 5px 1px map-get($colors,"grey-shadow")); } + + .add__modal { + + + &--content { + margin: 10% auto; + + } + } - .buttons__bottom { - display: flex; - justify-content: center; + } + + .buttons__bottom { + display: flex; + justify-content: center; &--first { - @include stylesButton (#fff, rgba(239, 171, 48, 1), #fff, 5rem, 3rem, 8rem, 1rem, bold, 1px 1px 5px 1px rgba(129, 129, 129, 1)); + @include stylesButton (map-get($colors, "white"), map-get($colors,"yellow"), map-get($colors, "white"), 5rem, 3rem, 8rem, 1rem, bold, 1px 1px 5px 1px map-get($colors, "grey-shadow")); } &-second-modifier { background-color: map-get($colors, "blue"); } - } -} - - + +} +} \ No newline at end of file diff --git a/unpkg.com_scrollreveal@4.0.9_dist_scrollreveal.js b/unpkg.com_scrollreveal@4.0.9_dist_scrollreveal.js new file mode 100644 index 0000000..99b46d3 --- /dev/null +++ b/unpkg.com_scrollreveal@4.0.9_dist_scrollreveal.js @@ -0,0 +1,1564 @@ +/*! @license ScrollReveal v4.0.9 + + Copyright 2021 Fisssion LLC. + + Licensed under the GNU General Public License 3.0 for + compatible open source projects and non-commercial use. + + For commercial sites, themes, projects, and applications, + keep your source code private/proprietary by purchasing + a commercial license from https://scrollrevealjs.org/ +*/ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : + typeof define === 'function' && define.amd ? define(factory) : + (global = global || self, global.ScrollReveal = factory()); +}(this, function () { 'use strict'; + + var defaults = { + delay: 0, + distance: '0', + duration: 600, + easing: 'cubic-bezier(0.5, 0, 0, 1)', + interval: 0, + opacity: 0, + origin: 'bottom', + rotate: { + x: 0, + y: 0, + z: 0 + }, + scale: 1, + cleanup: false, + container: document.documentElement, + desktop: true, + mobile: true, + reset: false, + useDelay: 'always', + viewFactor: 0.0, + viewOffset: { + top: 0, + right: 0, + bottom: 0, + left: 0 + }, + afterReset: function afterReset() {}, + afterReveal: function afterReveal() {}, + beforeReset: function beforeReset() {}, + beforeReveal: function beforeReveal() {} + }; + + function failure() { + document.documentElement.classList.remove('sr'); + + return { + clean: function clean() {}, + destroy: function destroy() {}, + reveal: function reveal() {}, + sync: function sync() {}, + get noop() { + return true + } + } + } + + function success() { + document.documentElement.classList.add('sr'); + + if (document.body) { + document.body.style.height = '100%'; + } else { + document.addEventListener('DOMContentLoaded', function () { + document.body.style.height = '100%'; + }); + } + } + + var mount = { success: success, failure: failure }; + + /*! @license is-dom-node v1.0.4 + + Copyright 2018 Fisssion LLC. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + function isDomNode(x) { + return typeof window.Node === 'object' + ? x instanceof window.Node + : x !== null && + typeof x === 'object' && + typeof x.nodeType === 'number' && + typeof x.nodeName === 'string' + } + + /*! @license is-dom-node-list v1.2.1 + + Copyright 2018 Fisssion LLC. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + + function isDomNodeList(x) { + var prototypeToString = Object.prototype.toString.call(x); + var regex = /^\[object (HTMLCollection|NodeList|Object)\]$/; + + return typeof window.NodeList === 'object' + ? x instanceof window.NodeList + : x !== null && + typeof x === 'object' && + typeof x.length === 'number' && + regex.test(prototypeToString) && + (x.length === 0 || isDomNode(x[0])) + } + + /*! @license Tealight v0.3.6 + + Copyright 2018 Fisssion LLC. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + + function tealight(target, context) { + if ( context === void 0 ) { context = document; } + + if (target instanceof Array) { return target.filter(isDomNode); } + if (isDomNode(target)) { return [target]; } + if (isDomNodeList(target)) { return Array.prototype.slice.call(target); } + if (typeof target === "string") { + try { + var query = context.querySelectorAll(target); + return Array.prototype.slice.call(query); + } catch (err) { + return []; + } + } + return []; + } + + function isObject(x) { + return ( + x !== null && + x instanceof Object && + (x.constructor === Object || + Object.prototype.toString.call(x) === '[object Object]') + ) + } + + function each(collection, callback) { + if (isObject(collection)) { + var keys = Object.keys(collection); + return keys.forEach(function (key) { return callback(collection[key], key, collection); }) + } + if (collection instanceof Array) { + return collection.forEach(function (item, i) { return callback(item, i, collection); }) + } + throw new TypeError('Expected either an array or object literal.') + } + + function logger(message) { + var details = [], len = arguments.length - 1; + while ( len-- > 0 ) details[ len ] = arguments[ len + 1 ]; + + if (this.constructor.debug && console) { + var report = "%cScrollReveal: " + message; + details.forEach(function (detail) { return (report += "\n — " + detail); }); + console.log(report, 'color: #ea654b;'); // eslint-disable-line no-console + } + } + + function rinse() { + var this$1 = this; + + var struct = function () { return ({ + active: [], + stale: [] + }); }; + + var elementIds = struct(); + var sequenceIds = struct(); + var containerIds = struct(); + + /** + * Take stock of active element IDs. + */ + try { + each(tealight('[data-sr-id]'), function (node) { + var id = parseInt(node.getAttribute('data-sr-id')); + elementIds.active.push(id); + }); + } catch (e) { + throw e + } + /** + * Destroy stale elements. + */ + each(this.store.elements, function (element) { + if (elementIds.active.indexOf(element.id) === -1) { + elementIds.stale.push(element.id); + } + }); + + each(elementIds.stale, function (staleId) { return delete this$1.store.elements[staleId]; }); + + /** + * Take stock of active container and sequence IDs. + */ + each(this.store.elements, function (element) { + if (containerIds.active.indexOf(element.containerId) === -1) { + containerIds.active.push(element.containerId); + } + if (element.hasOwnProperty('sequence')) { + if (sequenceIds.active.indexOf(element.sequence.id) === -1) { + sequenceIds.active.push(element.sequence.id); + } + } + }); + + /** + * Destroy stale containers. + */ + each(this.store.containers, function (container) { + if (containerIds.active.indexOf(container.id) === -1) { + containerIds.stale.push(container.id); + } + }); + + each(containerIds.stale, function (staleId) { + var stale = this$1.store.containers[staleId].node; + stale.removeEventListener('scroll', this$1.delegate); + stale.removeEventListener('resize', this$1.delegate); + delete this$1.store.containers[staleId]; + }); + + /** + * Destroy stale sequences. + */ + each(this.store.sequences, function (sequence) { + if (sequenceIds.active.indexOf(sequence.id) === -1) { + sequenceIds.stale.push(sequence.id); + } + }); + + each(sequenceIds.stale, function (staleId) { return delete this$1.store.sequences[staleId]; }); + } + + /*! @license Rematrix v0.3.0 + + Copyright 2018 Julian Lloyd. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE. + */ + /** + * @module Rematrix + */ + + /** + * Transformation matrices in the browser come in two flavors: + * + * - `matrix` using 6 values (short) + * - `matrix3d` using 16 values (long) + * + * This utility follows this [conversion guide](https://goo.gl/EJlUQ1) + * to expand short form matrices to their equivalent long form. + * + * @param {array} source - Accepts both short and long form matrices. + * @return {array} + */ + function format(source) { + if (source.constructor !== Array) { + throw new TypeError('Expected array.') + } + if (source.length === 16) { + return source + } + if (source.length === 6) { + var matrix = identity(); + matrix[0] = source[0]; + matrix[1] = source[1]; + matrix[4] = source[2]; + matrix[5] = source[3]; + matrix[12] = source[4]; + matrix[13] = source[5]; + return matrix + } + throw new RangeError('Expected array with either 6 or 16 values.') + } + + /** + * Returns a matrix representing no transformation. The product of any matrix + * multiplied by the identity matrix will be the original matrix. + * + * > **Tip:** Similar to how `5 * 1 === 5`, where `1` is the identity. + * + * @return {array} + */ + function identity() { + var matrix = []; + for (var i = 0; i < 16; i++) { + i % 5 == 0 ? matrix.push(1) : matrix.push(0); + } + return matrix + } + + /** + * Returns a 4x4 matrix describing the combined transformations + * of both arguments. + * + * > **Note:** Order is very important. For example, rotating 45° + * along the Z-axis, followed by translating 500 pixels along the + * Y-axis... is not the same as translating 500 pixels along the + * Y-axis, followed by rotating 45° along on the Z-axis. + * + * @param {array} m - Accepts both short and long form matrices. + * @param {array} x - Accepts both short and long form matrices. + * @return {array} + */ + function multiply(m, x) { + var fm = format(m); + var fx = format(x); + var product = []; + + for (var i = 0; i < 4; i++) { + var row = [fm[i], fm[i + 4], fm[i + 8], fm[i + 12]]; + for (var j = 0; j < 4; j++) { + var k = j * 4; + var col = [fx[k], fx[k + 1], fx[k + 2], fx[k + 3]]; + var result = + row[0] * col[0] + row[1] * col[1] + row[2] * col[2] + row[3] * col[3]; + + product[i + k] = result; + } + } + + return product + } + + /** + * Attempts to return a 4x4 matrix describing the CSS transform + * matrix passed in, but will return the identity matrix as a + * fallback. + * + * > **Tip:** This method is used to convert a CSS matrix (retrieved as a + * `string` from computed styles) to its equivalent array format. + * + * @param {string} source - `matrix` or `matrix3d` CSS Transform value. + * @return {array} + */ + function parse(source) { + if (typeof source === 'string') { + var match = source.match(/matrix(3d)?\(([^)]+)\)/); + if (match) { + var raw = match[2].split(', ').map(parseFloat); + return format(raw) + } + } + return identity() + } + + /** + * Returns a 4x4 matrix describing X-axis rotation. + * + * @param {number} angle - Measured in degrees. + * @return {array} + */ + function rotateX(angle) { + var theta = Math.PI / 180 * angle; + var matrix = identity(); + + matrix[5] = matrix[10] = Math.cos(theta); + matrix[6] = matrix[9] = Math.sin(theta); + matrix[9] *= -1; + + return matrix + } + + /** + * Returns a 4x4 matrix describing Y-axis rotation. + * + * @param {number} angle - Measured in degrees. + * @return {array} + */ + function rotateY(angle) { + var theta = Math.PI / 180 * angle; + var matrix = identity(); + + matrix[0] = matrix[10] = Math.cos(theta); + matrix[2] = matrix[8] = Math.sin(theta); + matrix[2] *= -1; + + return matrix + } + + /** + * Returns a 4x4 matrix describing Z-axis rotation. + * + * @param {number} angle - Measured in degrees. + * @return {array} + */ + function rotateZ(angle) { + var theta = Math.PI / 180 * angle; + var matrix = identity(); + + matrix[0] = matrix[5] = Math.cos(theta); + matrix[1] = matrix[4] = Math.sin(theta); + matrix[4] *= -1; + + return matrix + } + + /** + * Returns a 4x4 matrix describing 2D scaling. The first argument + * is used for both X and Y-axis scaling, unless an optional + * second argument is provided to explicitly define Y-axis scaling. + * + * @param {number} scalar - Decimal multiplier. + * @param {number} [scalarY] - Decimal multiplier. + * @return {array} + */ + function scale(scalar, scalarY) { + var matrix = identity(); + + matrix[0] = scalar; + matrix[5] = typeof scalarY === 'number' ? scalarY : scalar; + + return matrix + } + + /** + * Returns a 4x4 matrix describing X-axis translation. + * + * @param {number} distance - Measured in pixels. + * @return {array} + */ + function translateX(distance) { + var matrix = identity(); + matrix[12] = distance; + return matrix + } + + /** + * Returns a 4x4 matrix describing Y-axis translation. + * + * @param {number} distance - Measured in pixels. + * @return {array} + */ + function translateY(distance) { + var matrix = identity(); + matrix[13] = distance; + return matrix + } + + var getPrefixedCssProp = (function () { + var properties = {}; + var style = document.documentElement.style; + + function getPrefixedCssProperty(name, source) { + if ( source === void 0 ) source = style; + + if (name && typeof name === 'string') { + if (properties[name]) { + return properties[name] + } + if (typeof source[name] === 'string') { + return (properties[name] = name) + } + if (typeof source[("-webkit-" + name)] === 'string') { + return (properties[name] = "-webkit-" + name) + } + throw new RangeError(("Unable to find \"" + name + "\" style property.")) + } + throw new TypeError('Expected a string.') + } + + getPrefixedCssProperty.clearCache = function () { return (properties = {}); }; + + return getPrefixedCssProperty + })(); + + function style(element) { + var computed = window.getComputedStyle(element.node); + var position = computed.position; + var config = element.config; + + /** + * Generate inline styles + */ + var inline = {}; + var inlineStyle = element.node.getAttribute('style') || ''; + var inlineMatch = inlineStyle.match(/[\w-]+\s*:\s*[^;]+\s*/gi) || []; + + inline.computed = inlineMatch ? inlineMatch.map(function (m) { return m.trim(); }).join('; ') + ';' : ''; + + inline.generated = inlineMatch.some(function (m) { return m.match(/visibility\s?:\s?visible/i); }) + ? inline.computed + : inlineMatch.concat( ['visibility: visible']).map(function (m) { return m.trim(); }).join('; ') + ';'; + + /** + * Generate opacity styles + */ + var computedOpacity = parseFloat(computed.opacity); + var configOpacity = !isNaN(parseFloat(config.opacity)) + ? parseFloat(config.opacity) + : parseFloat(computed.opacity); + + var opacity = { + computed: computedOpacity !== configOpacity ? ("opacity: " + computedOpacity + ";") : '', + generated: computedOpacity !== configOpacity ? ("opacity: " + configOpacity + ";") : '' + }; + + /** + * Generate transformation styles + */ + var transformations = []; + + if (parseFloat(config.distance)) { + var axis = config.origin === 'top' || config.origin === 'bottom' ? 'Y' : 'X'; + + /** + * Let’s make sure our our pixel distances are negative for top and left. + * e.g. { origin: 'top', distance: '25px' } starts at `top: -25px` in CSS. + */ + var distance = config.distance; + if (config.origin === 'top' || config.origin === 'left') { + distance = /^-/.test(distance) ? distance.substr(1) : ("-" + distance); + } + + var ref = distance.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g); + var value = ref[0]; + var unit = ref[1]; + + switch (unit) { + case 'em': + distance = parseInt(computed.fontSize) * value; + break + case 'px': + distance = value; + break + case '%': + /** + * Here we use `getBoundingClientRect` instead of + * the existing data attached to `element.geometry` + * because only the former includes any transformations + * current applied to the element. + * + * If that behavior ends up being unintuitive, this + * logic could instead utilize `element.geometry.height` + * and `element.geoemetry.width` for the distance calculation + */ + distance = + axis === 'Y' + ? (element.node.getBoundingClientRect().height * value) / 100 + : (element.node.getBoundingClientRect().width * value) / 100; + break + default: + throw new RangeError('Unrecognized or missing distance unit.') + } + + if (axis === 'Y') { + transformations.push(translateY(distance)); + } else { + transformations.push(translateX(distance)); + } + } + + if (config.rotate.x) { transformations.push(rotateX(config.rotate.x)); } + if (config.rotate.y) { transformations.push(rotateY(config.rotate.y)); } + if (config.rotate.z) { transformations.push(rotateZ(config.rotate.z)); } + if (config.scale !== 1) { + if (config.scale === 0) { + /** + * The CSS Transforms matrix interpolation specification + * basically disallows transitions of non-invertible + * matrixes, which means browsers won't transition + * elements with zero scale. + * + * That’s inconvenient for the API and developer + * experience, so we simply nudge their value + * slightly above zero; this allows browsers + * to transition our element as expected. + * + * `0.0002` was the smallest number + * that performed across browsers. + */ + transformations.push(scale(0.0002)); + } else { + transformations.push(scale(config.scale)); + } + } + + var transform = {}; + if (transformations.length) { + transform.property = getPrefixedCssProp('transform'); + /** + * The default computed transform value should be one of: + * undefined || 'none' || 'matrix()' || 'matrix3d()' + */ + transform.computed = { + raw: computed[transform.property], + matrix: parse(computed[transform.property]) + }; + + transformations.unshift(transform.computed.matrix); + var product = transformations.reduce(multiply); + + transform.generated = { + initial: ((transform.property) + ": matrix3d(" + (product.join(', ')) + ");"), + final: ((transform.property) + ": matrix3d(" + (transform.computed.matrix.join(', ')) + ");") + }; + } else { + transform.generated = { + initial: '', + final: '' + }; + } + + /** + * Generate transition styles + */ + var transition = {}; + if (opacity.generated || transform.generated.initial) { + transition.property = getPrefixedCssProp('transition'); + transition.computed = computed[transition.property]; + transition.fragments = []; + + var delay = config.delay; + var duration = config.duration; + var easing = config.easing; + + if (opacity.generated) { + transition.fragments.push({ + delayed: ("opacity " + (duration / 1000) + "s " + easing + " " + (delay / 1000) + "s"), + instant: ("opacity " + (duration / 1000) + "s " + easing + " 0s") + }); + } + + if (transform.generated.initial) { + transition.fragments.push({ + delayed: ((transform.property) + " " + (duration / 1000) + "s " + easing + " " + (delay / 1000) + "s"), + instant: ((transform.property) + " " + (duration / 1000) + "s " + easing + " 0s") + }); + } + + /** + * The default computed transition property should be undefined, or one of: + * '' || 'none 0s ease 0s' || 'all 0s ease 0s' || 'all 0s 0s cubic-bezier()' + */ + var hasCustomTransition = + transition.computed && !transition.computed.match(/all 0s|none 0s/); + + if (hasCustomTransition) { + transition.fragments.unshift({ + delayed: transition.computed, + instant: transition.computed + }); + } + + var composed = transition.fragments.reduce( + function (composition, fragment, i) { + composition.delayed += i === 0 ? fragment.delayed : (", " + (fragment.delayed)); + composition.instant += i === 0 ? fragment.instant : (", " + (fragment.instant)); + return composition + }, + { + delayed: '', + instant: '' + } + ); + + transition.generated = { + delayed: ((transition.property) + ": " + (composed.delayed) + ";"), + instant: ((transition.property) + ": " + (composed.instant) + ";") + }; + } else { + transition.generated = { + delayed: '', + instant: '' + }; + } + + return { + inline: inline, + opacity: opacity, + position: position, + transform: transform, + transition: transition + } + } + + /** + * apply a CSS string to an element using the CSSOM (element.style) rather + * than setAttribute, which may violate the content security policy. + * + * @param {Node} [el] Element to receive styles. + * @param {string} [declaration] Styles to apply. + */ + function applyStyle (el, declaration) { + declaration.split(';').forEach(function (pair) { + var ref = pair.split(':'); + var property = ref[0]; + var value = ref.slice(1); + if (property && value) { + el.style[property.trim()] = value.join(':'); + } + }); + } + + function clean(target) { + var this$1 = this; + + var dirty; + try { + each(tealight(target), function (node) { + var id = node.getAttribute('data-sr-id'); + if (id !== null) { + dirty = true; + var element = this$1.store.elements[id]; + if (element.callbackTimer) { + window.clearTimeout(element.callbackTimer.clock); + } + applyStyle(element.node, element.styles.inline.generated); + node.removeAttribute('data-sr-id'); + delete this$1.store.elements[id]; + } + }); + } catch (e) { + return logger.call(this, 'Clean failed.', e.message) + } + + if (dirty) { + try { + rinse.call(this); + } catch (e) { + return logger.call(this, 'Clean failed.', e.message) + } + } + } + + function destroy() { + var this$1 = this; + + /** + * Remove all generated styles and element ids + */ + each(this.store.elements, function (element) { + applyStyle(element.node, element.styles.inline.generated); + element.node.removeAttribute('data-sr-id'); + }); + + /** + * Remove all event listeners. + */ + each(this.store.containers, function (container) { + var target = + container.node === document.documentElement ? window : container.node; + target.removeEventListener('scroll', this$1.delegate); + target.removeEventListener('resize', this$1.delegate); + }); + + /** + * Clear all data from the store + */ + this.store = { + containers: {}, + elements: {}, + history: [], + sequences: {} + }; + } + + function deepAssign(target) { + var sources = [], len = arguments.length - 1; + while ( len-- > 0 ) sources[ len ] = arguments[ len + 1 ]; + + if (isObject(target)) { + each(sources, function (source) { + each(source, function (data, key) { + if (isObject(data)) { + if (!target[key] || !isObject(target[key])) { + target[key] = {}; + } + deepAssign(target[key], data); + } else { + target[key] = data; + } + }); + }); + return target + } else { + throw new TypeError('Target must be an object literal.') + } + } + + function isMobile(agent) { + if ( agent === void 0 ) agent = navigator.userAgent; + + return /Android|iPhone|iPad|iPod/i.test(agent) + } + + var nextUniqueId = (function () { + var uid = 0; + return function () { return uid++; } + })(); + + function initialize() { + var this$1 = this; + + rinse.call(this); + + each(this.store.elements, function (element) { + var styles = [element.styles.inline.generated]; + + if (element.visible) { + styles.push(element.styles.opacity.computed); + styles.push(element.styles.transform.generated.final); + element.revealed = true; + } else { + styles.push(element.styles.opacity.generated); + styles.push(element.styles.transform.generated.initial); + element.revealed = false; + } + + applyStyle(element.node, styles.filter(function (s) { return s !== ''; }).join(' ')); + }); + + each(this.store.containers, function (container) { + var target = + container.node === document.documentElement ? window : container.node; + target.addEventListener('scroll', this$1.delegate); + target.addEventListener('resize', this$1.delegate); + }); + + /** + * Manually invoke delegate once to capture + * element and container dimensions, container + * scroll position, and trigger any valid reveals + */ + this.delegate(); + + /** + * Wipe any existing `setTimeout` now + * that initialization has completed. + */ + this.initTimeout = null; + } + + function animate(element, force) { + if ( force === void 0 ) force = {}; + + var pristine = force.pristine || this.pristine; + var delayed = + element.config.useDelay === 'always' || + (element.config.useDelay === 'onload' && pristine) || + (element.config.useDelay === 'once' && !element.seen); + + var shouldReveal = element.visible && !element.revealed; + var shouldReset = !element.visible && element.revealed && element.config.reset; + + if (force.reveal || shouldReveal) { + return triggerReveal.call(this, element, delayed) + } + + if (force.reset || shouldReset) { + return triggerReset.call(this, element) + } + } + + function triggerReveal(element, delayed) { + var styles = [ + element.styles.inline.generated, + element.styles.opacity.computed, + element.styles.transform.generated.final + ]; + if (delayed) { + styles.push(element.styles.transition.generated.delayed); + } else { + styles.push(element.styles.transition.generated.instant); + } + element.revealed = element.seen = true; + applyStyle(element.node, styles.filter(function (s) { return s !== ''; }).join(' ')); + registerCallbacks.call(this, element, delayed); + } + + function triggerReset(element) { + var styles = [ + element.styles.inline.generated, + element.styles.opacity.generated, + element.styles.transform.generated.initial, + element.styles.transition.generated.instant + ]; + element.revealed = false; + applyStyle(element.node, styles.filter(function (s) { return s !== ''; }).join(' ')); + registerCallbacks.call(this, element); + } + + function registerCallbacks(element, isDelayed) { + var this$1 = this; + + var duration = isDelayed + ? element.config.duration + element.config.delay + : element.config.duration; + + var beforeCallback = element.revealed + ? element.config.beforeReveal + : element.config.beforeReset; + + var afterCallback = element.revealed + ? element.config.afterReveal + : element.config.afterReset; + + var elapsed = 0; + if (element.callbackTimer) { + elapsed = Date.now() - element.callbackTimer.start; + window.clearTimeout(element.callbackTimer.clock); + } + + beforeCallback(element.node); + + element.callbackTimer = { + start: Date.now(), + clock: window.setTimeout(function () { + afterCallback(element.node); + element.callbackTimer = null; + if (element.revealed && !element.config.reset && element.config.cleanup) { + clean.call(this$1, element.node); + } + }, duration - elapsed) + }; + } + + function sequence(element, pristine) { + if ( pristine === void 0 ) pristine = this.pristine; + + /** + * We first check if the element should reset. + */ + if (!element.visible && element.revealed && element.config.reset) { + return animate.call(this, element, { reset: true }) + } + + var seq = this.store.sequences[element.sequence.id]; + var i = element.sequence.index; + + if (seq) { + var visible = new SequenceModel(seq, 'visible', this.store); + var revealed = new SequenceModel(seq, 'revealed', this.store); + + seq.models = { visible: visible, revealed: revealed }; + + /** + * If the sequence has no revealed members, + * then we reveal the first visible element + * within that sequence. + * + * The sequence then cues a recursive call + * in both directions. + */ + if (!revealed.body.length) { + var nextId = seq.members[visible.body[0]]; + var nextElement = this.store.elements[nextId]; + + if (nextElement) { + cue.call(this, seq, visible.body[0], -1, pristine); + cue.call(this, seq, visible.body[0], +1, pristine); + return animate.call(this, nextElement, { reveal: true, pristine: pristine }) + } + } + + /** + * If our element isn’t resetting, we check the + * element sequence index against the head, and + * then the foot of the sequence. + */ + if ( + !seq.blocked.head && + i === [].concat( revealed.head ).pop() && + i >= [].concat( visible.body ).shift() + ) { + cue.call(this, seq, i, -1, pristine); + return animate.call(this, element, { reveal: true, pristine: pristine }) + } + + if ( + !seq.blocked.foot && + i === [].concat( revealed.foot ).shift() && + i <= [].concat( visible.body ).pop() + ) { + cue.call(this, seq, i, +1, pristine); + return animate.call(this, element, { reveal: true, pristine: pristine }) + } + } + } + + function Sequence(interval) { + var i = Math.abs(interval); + if (!isNaN(i)) { + this.id = nextUniqueId(); + this.interval = Math.max(i, 16); + this.members = []; + this.models = {}; + this.blocked = { + head: false, + foot: false + }; + } else { + throw new RangeError('Invalid sequence interval.') + } + } + + function SequenceModel(seq, prop, store) { + var this$1 = this; + + this.head = []; + this.body = []; + this.foot = []; + + each(seq.members, function (id, index) { + var element = store.elements[id]; + if (element && element[prop]) { + this$1.body.push(index); + } + }); + + if (this.body.length) { + each(seq.members, function (id, index) { + var element = store.elements[id]; + if (element && !element[prop]) { + if (index < this$1.body[0]) { + this$1.head.push(index); + } else { + this$1.foot.push(index); + } + } + }); + } + } + + function cue(seq, i, direction, pristine) { + var this$1 = this; + + var blocked = ['head', null, 'foot'][1 + direction]; + var nextId = seq.members[i + direction]; + var nextElement = this.store.elements[nextId]; + + seq.blocked[blocked] = true; + + setTimeout(function () { + seq.blocked[blocked] = false; + if (nextElement) { + sequence.call(this$1, nextElement, pristine); + } + }, seq.interval); + } + + function reveal(target, options, syncing) { + var this$1 = this; + if ( options === void 0 ) options = {}; + if ( syncing === void 0 ) syncing = false; + + var containerBuffer = []; + var sequence$$1; + var interval = options.interval || defaults.interval; + + try { + if (interval) { + sequence$$1 = new Sequence(interval); + } + + var nodes = tealight(target); + if (!nodes.length) { + throw new Error('Invalid reveal target.') + } + + var elements = nodes.reduce(function (elementBuffer, elementNode) { + var element = {}; + var existingId = elementNode.getAttribute('data-sr-id'); + + if (existingId) { + deepAssign(element, this$1.store.elements[existingId]); + + /** + * In order to prevent previously generated styles + * from throwing off the new styles, the style tag + * has to be reverted to its pre-reveal state. + */ + applyStyle(element.node, element.styles.inline.computed); + } else { + element.id = nextUniqueId(); + element.node = elementNode; + element.seen = false; + element.revealed = false; + element.visible = false; + } + + var config = deepAssign({}, element.config || this$1.defaults, options); + + if ((!config.mobile && isMobile()) || (!config.desktop && !isMobile())) { + if (existingId) { + clean.call(this$1, element); + } + return elementBuffer // skip elements that are disabled + } + + var containerNode = tealight(config.container)[0]; + if (!containerNode) { + throw new Error('Invalid container.') + } + if (!containerNode.contains(elementNode)) { + return elementBuffer // skip elements found outside the container + } + + var containerId; + { + containerId = getContainerId( + containerNode, + containerBuffer, + this$1.store.containers + ); + if (containerId === null) { + containerId = nextUniqueId(); + containerBuffer.push({ id: containerId, node: containerNode }); + } + } + + element.config = config; + element.containerId = containerId; + element.styles = style(element); + + if (sequence$$1) { + element.sequence = { + id: sequence$$1.id, + index: sequence$$1.members.length + }; + sequence$$1.members.push(element.id); + } + + elementBuffer.push(element); + return elementBuffer + }, []); + + /** + * Modifying the DOM via setAttribute needs to be handled + * separately from reading computed styles in the map above + * for the browser to batch DOM changes (limiting reflows) + */ + each(elements, function (element) { + this$1.store.elements[element.id] = element; + element.node.setAttribute('data-sr-id', element.id); + }); + } catch (e) { + return logger.call(this, 'Reveal failed.', e.message) + } + + /** + * Now that element set-up is complete... + * Let’s commit any container and sequence data we have to the store. + */ + each(containerBuffer, function (container) { + this$1.store.containers[container.id] = { + id: container.id, + node: container.node + }; + }); + if (sequence$$1) { + this.store.sequences[sequence$$1.id] = sequence$$1; + } + + /** + * If reveal wasn't invoked by sync, we want to + * make sure to add this call to the history. + */ + if (syncing !== true) { + this.store.history.push({ target: target, options: options }); + + /** + * Push initialization to the event queue, giving + * multiple reveal calls time to be interpreted. + */ + if (this.initTimeout) { + window.clearTimeout(this.initTimeout); + } + this.initTimeout = window.setTimeout(initialize.bind(this), 0); + } + } + + function getContainerId(node) { + var collections = [], len = arguments.length - 1; + while ( len-- > 0 ) collections[ len ] = arguments[ len + 1 ]; + + var id = null; + each(collections, function (collection) { + each(collection, function (container) { + if (id === null && container.node === node) { + id = container.id; + } + }); + }); + return id + } + + /** + * Re-runs the reveal method for each record stored in history, + * for capturing new content asynchronously loaded into the DOM. + */ + function sync() { + var this$1 = this; + + each(this.store.history, function (record) { + reveal.call(this$1, record.target, record.options, true); + }); + + initialize.call(this); + } + + var polyfill = function (x) { return (x > 0) - (x < 0) || +x; }; + var mathSign = Math.sign || polyfill; + + /*! @license miniraf v1.0.1 + + Copyright 2018 Fisssion LLC. + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in all + copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE + SOFTWARE. + + */ + var polyfill$1 = (function () { + var clock = Date.now(); + + return function (callback) { + var currentTime = Date.now(); + if (currentTime - clock > 16) { + clock = currentTime; + callback(currentTime); + } else { + setTimeout(function () { return polyfill$1(callback); }, 0); + } + } + })(); + + var miniraf = window.requestAnimationFrame || + window.webkitRequestAnimationFrame || + window.mozRequestAnimationFrame || + polyfill$1; + + function getGeometry(target, isContainer) { + /** + * We want to ignore padding and scrollbars for container elements. + * More information here: https://goo.gl/vOZpbz + */ + var height = isContainer ? target.node.clientHeight : target.node.offsetHeight; + var width = isContainer ? target.node.clientWidth : target.node.offsetWidth; + + var offsetTop = 0; + var offsetLeft = 0; + var node = target.node; + + do { + if (!isNaN(node.offsetTop)) { + offsetTop += node.offsetTop; + } + if (!isNaN(node.offsetLeft)) { + offsetLeft += node.offsetLeft; + } + node = node.offsetParent; + } while (node) + + return { + bounds: { + top: offsetTop, + right: offsetLeft + width, + bottom: offsetTop + height, + left: offsetLeft + }, + height: height, + width: width + } + } + + function getScrolled(container) { + var top, left; + if (container.node === document.documentElement) { + top = window.pageYOffset; + left = window.pageXOffset; + } else { + top = container.node.scrollTop; + left = container.node.scrollLeft; + } + return { top: top, left: left } + } + + function isElementVisible(element) { + if ( element === void 0 ) element = {}; + + var container = this.store.containers[element.containerId]; + if (!container) { return } + + var viewFactor = Math.max(0, Math.min(1, element.config.viewFactor)); + var viewOffset = element.config.viewOffset; + + var elementBounds = { + top: element.geometry.bounds.top + element.geometry.height * viewFactor, + right: element.geometry.bounds.right - element.geometry.width * viewFactor, + bottom: element.geometry.bounds.bottom - element.geometry.height * viewFactor, + left: element.geometry.bounds.left + element.geometry.width * viewFactor + }; + + var containerBounds = { + top: container.geometry.bounds.top + container.scroll.top + viewOffset.top, + right: container.geometry.bounds.right + container.scroll.left - viewOffset.right, + bottom: + container.geometry.bounds.bottom + container.scroll.top - viewOffset.bottom, + left: container.geometry.bounds.left + container.scroll.left + viewOffset.left + }; + + return ( + (elementBounds.top < containerBounds.bottom && + elementBounds.right > containerBounds.left && + elementBounds.bottom > containerBounds.top && + elementBounds.left < containerBounds.right) || + element.styles.position === 'fixed' + ) + } + + function delegate( + event, + elements + ) { + var this$1 = this; + if ( event === void 0 ) event = { type: 'init' }; + if ( elements === void 0 ) elements = this.store.elements; + + miniraf(function () { + var stale = event.type === 'init' || event.type === 'resize'; + + each(this$1.store.containers, function (container) { + if (stale) { + container.geometry = getGeometry.call(this$1, container, true); + } + var scroll = getScrolled.call(this$1, container); + if (container.scroll) { + container.direction = { + x: mathSign(scroll.left - container.scroll.left), + y: mathSign(scroll.top - container.scroll.top) + }; + } + container.scroll = scroll; + }); + + /** + * Due to how the sequencer is implemented, it’s + * important that we update the state of all + * elements, before any animation logic is + * evaluated (in the second loop below). + */ + each(elements, function (element) { + if (stale || element.geometry === undefined) { + element.geometry = getGeometry.call(this$1, element); + } + element.visible = isElementVisible.call(this$1, element); + }); + + each(elements, function (element) { + if (element.sequence) { + sequence.call(this$1, element); + } else { + animate.call(this$1, element); + } + }); + + this$1.pristine = false; + }); + } + + function isTransformSupported() { + var style = document.documentElement.style; + return 'transform' in style || 'WebkitTransform' in style + } + + function isTransitionSupported() { + var style = document.documentElement.style; + return 'transition' in style || 'WebkitTransition' in style + } + + var version = "4.0.9"; + + var boundDelegate; + var boundDestroy; + var boundReveal; + var boundClean; + var boundSync; + var config; + var debug; + var instance; + + function ScrollReveal(options) { + if ( options === void 0 ) options = {}; + + var invokedWithoutNew = + typeof this === 'undefined' || + Object.getPrototypeOf(this) !== ScrollReveal.prototype; + + if (invokedWithoutNew) { + return new ScrollReveal(options) + } + + if (!ScrollReveal.isSupported()) { + logger.call(this, 'Instantiation failed.', 'This browser is not supported.'); + return mount.failure() + } + + var buffer; + try { + buffer = config + ? deepAssign({}, config, options) + : deepAssign({}, defaults, options); + } catch (e) { + logger.call(this, 'Invalid configuration.', e.message); + return mount.failure() + } + + try { + var container = tealight(buffer.container)[0]; + if (!container) { + throw new Error('Invalid container.') + } + } catch (e) { + logger.call(this, e.message); + return mount.failure() + } + + config = buffer; + + if ((!config.mobile && isMobile()) || (!config.desktop && !isMobile())) { + logger.call( + this, + 'This device is disabled.', + ("desktop: " + (config.desktop)), + ("mobile: " + (config.mobile)) + ); + return mount.failure() + } + + mount.success(); + + this.store = { + containers: {}, + elements: {}, + history: [], + sequences: {} + }; + + this.pristine = true; + + boundDelegate = boundDelegate || delegate.bind(this); + boundDestroy = boundDestroy || destroy.bind(this); + boundReveal = boundReveal || reveal.bind(this); + boundClean = boundClean || clean.bind(this); + boundSync = boundSync || sync.bind(this); + + Object.defineProperty(this, 'delegate', { get: function () { return boundDelegate; } }); + Object.defineProperty(this, 'destroy', { get: function () { return boundDestroy; } }); + Object.defineProperty(this, 'reveal', { get: function () { return boundReveal; } }); + Object.defineProperty(this, 'clean', { get: function () { return boundClean; } }); + Object.defineProperty(this, 'sync', { get: function () { return boundSync; } }); + + Object.defineProperty(this, 'defaults', { get: function () { return config; } }); + Object.defineProperty(this, 'version', { get: function () { return version; } }); + Object.defineProperty(this, 'noop', { get: function () { return false; } }); + + return instance ? instance : (instance = this) + } + + ScrollReveal.isSupported = function () { return isTransformSupported() && isTransitionSupported(); }; + + Object.defineProperty(ScrollReveal, 'debug', { + get: function () { return debug || false; }, + set: function (value) { return (debug = typeof value === 'boolean' ? value : debug); } + }); + + ScrollReveal(); + + return ScrollReveal; + +}));