Merge pull request #7 from 202306-NEA-DZ-FEW/initPages

add intial pages
202306-NEA-DZ-FEW · Aug 18, 2023 · 0f6dca0 · 0f6dca0
2 parents bd7f823 + 064c8b9
commit 0f6dca0
Show file tree

Hide file tree

Showing 3 changed files with 293 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -1,17 +1,50 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
-    <title>repl.it</title>
-    <link href="style.css" rel="stylesheet" type="text/css" />
-  </head>
-  <body>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>repl.it</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Merienda:wght@300;400;500;600;700;800;900&display=swap"
+    rel="stylesheet">
+  <link href="style.css" rel="stylesheet" type="text/css" />
+
+</head>
+
+<body>
+  <div id="loading" class="loading">
+    <img src="assets/jumanjiLogo.png" alt="logo" class="logo-load">
+    <p class="progress-load-num">0 %</p>
+    <div class="progress-bar">
+      <div class="progress-fill"></div>
+    </div>
+  </div>
+  <div id="content" class="content hidden">
+    <div class="start-page">
+      <div class="bab1">
+      </div>
+      <div class="bab2">
+        <div class="action-container">
+          <button class="start-btn" onclick="startBtn()">Start</button>
+          <div class="sound-btn" onclick="soundBtn()">
+            <div class="checkbox">
+              <img src="assets/icons8-checkmark-96.svg" alt="check icon">
+            </div>
+            <span>Sound</span>
+          </div>
+        </div>
+
+      </div>
+    </div>
     <div class='madLibsEdit'>
     </div>
     <div class='madLibsPreview'>
     </div>
-    <script src="do-not-touch.js"></script>
-    <script src="madlibs.js"></script>
-  </body>
+  </div>
+  <script src="do-not-touch.js"></script>
+  <script src="madlibs.js"></script>
+</body>
+
 </html>
diff --git 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
@@ -1,3 +1,208 @@
 /**
  * Your CSS goes here.
- */
+ */
+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;
+    }
+}