diff --git a/index.html b/index.html index c92f64b..05397d1 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,50 @@ - - - - repl.it - - - + + + + + repl.it + + + + + + + + +
+ logo +

0 %

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/madlibs.js b/madlibs.js index 9417857..e825488 100644 --- a/madlibs.js +++ b/madlibs.js @@ -26,6 +26,50 @@ * There are multiple ways to do this, but you may want to use regular expressions. * Please go through this lesson: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/regular-expressions/ */ + +const progressFill = document.querySelector(".progress-fill"), + progressLoadNum = document.querySelector(".progress-load-num") +let progressFillWidth = 10 + +let id = setInterval(() => { + if (progressFillWidth >= 300) { + clearInterval(id); + } else { + progressFillWidth += 2 + progressLoadNum.innerText = parseInt(100 * progressFillWidth / 300) + "%" + progressFill.style.width = progressFillWidth + "px"; + } +}, 11) + +setTimeout(() => { + const content = document.getElementById("content") + content.style.opacity = 1 + content.style.display = "block" + document.getElementById("loading").style.display = "none"; +}, 4000); + +///// Start btn +const startBtn = () => { + const bab1 = document.querySelector(".bab1") + const bab2 = document.querySelector(".bab2") + const container = document.querySelector(".start-page") + bab1.classList.add("bab1Anim") + bab2.classList.add("bab2Anim") + setTimeout(() => { + container.style.display = 'none' + }, 2100); +} + +///// sound btn +const soundBtn = () => { + const icon = document.querySelector(".checkbox img") + let opacity = icon.style.opacity + opacity == 1 ? icon.style.opacity = "0%" : icon.style.opacity = "100%" +} + + + + function parseStory(rawStory) { // Your code here. rawStory = rawStory.replace(/\./g, ' .') diff --git a/style.css b/style.css index d457450..5a270e2 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,208 @@ /** * Your CSS goes here. - */ \ No newline at end of file + */ +body { + font-family: 'Merienda', cursive; + margin: 0; + padding: 0; +} + +button { + font-family: 'Merienda', cursive; +} + +.madLibsEdit { + margin-bottom: 80px; +} + + + +.loading-message { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; +} + +.content { + opacity: 0; + transition: opacity 0.5s ease-in-out; +} + +.hidden { + display: none; +} + +.loading { + width: 100%; + height: 100vh; + background-image: url("assets/img.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: 0% 80%; + display: flex; +} + +.logo-load { + width: 500px; + height: fit-content; + margin: 4rem auto; +} + +.progress-load-num { + font-size: 70px; + color: white; + position: absolute; + left: 50%; + top: 38%; + transform: translate(-50%, -50%); + font-weight: 300; +} + +.progress-bar { + position: absolute; + left: 50%; + top: 56%; + transform: translate(-50%, -50%); + width: 300px; + height: 7px; + background-color: rgba(255, 255, 255, 0.411); + border-radius: 50px; + +} + +.progress-fill { + width: 10px; + height: 7px; + background-color: rgb(255, 255, 255); + border-radius: 50px; +} + +.start-page { + position: absolute; + top: 0; + width: 100%; + height: 100vh; + overflow: hidden; +} + +.bab1, +.bab2 { + position: relative; + width: 100%; + height: 50vh; + background-size: 100% 100%; + +} + +.bab1 { + background-image: url("assets/bab1.jpg"); +} + +.bab2 { + background-image: url("assets/bab2.jpg"); + display: flex; + flex-direction: column; + align-items: center; +} + +.start-btn { + max-width: max-content; + border: 4px solid #FFB904; + color: #FFB904; + padding: 6px 50px; + font-size: 1.7rem; + border-radius: 20px; + background-color: #372C28; + margin-top: 11rem; + box-shadow: 1px 1px 10px 2px #ffb80448; + cursor: pointer; +} + +.start-btn:active { + background-color: #3d302b; + border: 4px solid #ffc940; + color: #ffc940; +} + +.action-container { + display: flex; + flex-direction: column; + align-items: center; +} + +.sound-btn { + margin-top: 2rem; + color: #ffc940; + font-size: 1.2rem; + display: flex; + +} + +.checkbox { + position: relative; + border: 3px solid #ffc940; + width: 20px; + height: 20px; + margin-right: 0.8rem; + border-radius: 5px; + cursor: pointer; + z-index: 5; +} + +.checkbox img { + width: 38px; + position: absolute; + top: -13px; + left: -5px; + z-index: 4; + opacity: 0; +} + + +.bab1Anim { + animation: openBoard1 2s linear; +} + +.bab2Anim { + animation: openBoard2 2s linear; + +} + + +.bab1Anim, +.bab2Anim { + box-shadow: 1px 1px 60px 5px #372C28; + -webkit-animation-fill-mode: forwards; + /* Chrome 16+, Safari 4+ */ + -moz-animation-fill-mode: forwards; + /* FF 5+ */ + -o-animation-fill-mode: forwards; + /* Not implemented yet */ + -ms-animation-fill-mode: forwards; + /* IE 10+ */ + animation-fill-mode: forwards; +} + +@keyframes openBoard1 { + from { + top: 0px; + } + + to { + top: -50vh; + display: none; + } +} + +@keyframes openBoard2 { + from { + top: 0px; + } + + to { + top: 50vh; + display: none; + } +} \ No newline at end of file