Home-Page-Added

Piyushchy · Dec 30, 2023 · a787cd1 · a787cd1
1 parent 062b9d7
commit a787cd1
Show file tree

Hide file tree

Showing 14 changed files with 639 additions and 10 deletions.
diff --git a/Main-Game/1-Childhood/script.js b/Main-Game/1-Childhood/script.js
@@ -139,7 +139,11 @@ function speak(text) {
   // Get the list of available voices
   const voices = synth.getVoices();
 
-  utterance.voice = voices[10]; // Set the voice
+  // Find a female voice with a pleasant tone (customize as needed)
+  const femaleVoice = voices.find(voice => voice.name.includes('Female') && voice.lang.includes('en'));
+
+  // Set the selected voice
+  utterance.voice = femaleVoice || voices[0]; // Use the first available voice if a suitable female voice is not found
 
   // Additional voice settings (customize as needed)
   utterance.rate = 1.0; // Speech rate (adjust as needed)

diff --git a/assets/Sudo.svg b/assets/Sudo.svg
diff --git a/assets/Web-Site-Background-2.mp4 b/assets/Web-Site-Background-2.mp4
diff --git a/assets/Web-Site-Background-3.mp4 b/assets/Web-Site-Background-3.mp4
diff --git a/assets/Web-Site-Background.mp4 b/assets/Web-Site-Background.mp4
diff --git a/assets/cross-icon.png b/assets/cross-icon.png
diff --git a/assets/github.png b/assets/github.png
diff --git a/assets/github.svg b/assets/github.svg
diff --git a/assets/menu-icon.png b/assets/menu-icon.png
diff --git a/assets/menu-icon.svg b/assets/menu-icon.svg
diff --git a/assets/sudo.png b/assets/sudo.png
diff --git a/index.html b/index.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
+    </style>
+</head>
+
+<body>
+    <nav>
+        <img src="/assets/sudo.png" alt="Logo" class="logo">
+
+        <ul class="nav-links">
+            <li><a href="#homeSection">Home</a></li>
+            <li><a href="#aboutSection">About Team</a></li>
+            <li><a href="#">Ai Counselling</a></li>
+        </ul>
+        <button class="hamburger-menu" onclick="toggleMenu()"></button>
+        <div class="menu-overlay">
+            <ul class="menu-overlay-items">
+                <li><a href="#homeSection">Home</a></li>
+                <li><a href="#aboutSection">About Team</a></li>
+                <li><a href="#">Ai Counselling</a></li>
+            </ul>
+        </div>
+    </nav>
+    <main id="homeSection">
+        <video id="videoBackground" muted playsinline preload="auto" class="video-background">
+            <source src="/assets/Web-Site-Background-2.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+        <div class="tag-line">
+            <h2>Empower Your Future:</h2>
+            <h1>Choose Life</h1>
+            <h2>Not Drugs</h2>
+            <p class="description" id="Description">
+                Experience this storyline play-through to learn more about the effects of drugs on your body and how to
+                avoid them.<br>
+                Every<strong> Choice </strong>Matters in this play-through.
+                <br>
+                try to make the right choices to get the best ending.
+                <br>
+                <br>
+                Click the Start game button to begin.
+            </p>
+        </div>
+        <div class="game-redirect-container">
+            <h2>Ready?</h2>
+            <ul class="rules">
+                <li>Game Have 4 stages</li>
+                <li>Every stage have its own choices</li>
+                <li>Your Choices will shape the further story of Game</li>
+                <li>Game is Best Played in Full-Screen</li>
+                <li>You can turn off story teller from Menu</li>
+            </ul>
+            <button class="game-redirect-button"
+                onclick="window.location.href ='/Main-Game/1-Childhood/index.html'">Start Game</button>
+        </div>
+    </main>
+
+    <div id="aboutSection" class="about">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit quibusdam repellat sunt quos iure ipsa
+        ratione quas temporibus autem. Nam dolorum asperiores assumenda, eveniet, atque, quasi impedit culpa
+        sequi
+        tempore numquam quaerat possimus reprehenderit ex praesentium necessitatibus. In blanditiis itaque
+        doloremque. Numquam debitis earum ea praesentium illum odit quibusdam consectetur id placeat.
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -1,2 +1,157 @@
-// let isStorytelling = true;
-// localStorage.setItem("isStorytelling", isStorytelling);
+document.addEventListener("DOMContentLoaded", function () {
+  const tagLine = document.querySelector(".tag-line");
+  const tagLineH1 = document.querySelector(".tag-line h1");
+  const description = document.querySelector(".description");
+  const video = document.getElementById("videoBackground");
+  const nav = document.querySelector("nav");
+  const rules = document.querySelector(".rules");
+  const gameRedirectContainer = document.querySelector(
+    ".game-redirect-container"
+  );
+
+  let isScrolled = false;
+  let autoScrollCount = 0;
+
+  // Pause the video at the start
+
+  const targetId = "homeSection";
+  const targetElement = document.getElementById(targetId);
+
+  window.scrollTo({
+    top: targetElement.offsetTop,
+    behavior: "smooth",
+  });
+
+  video.addEventListener("timeupdate", function () {
+    if (video.currentTime >= 0.9 * video.duration && autoScrollCount < 1) {
+      window.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+      autoScrollCount++;
+      console.log("Scrolling : Auto Scroll Count = " + autoScrollCount);
+    }
+  });
+
+  let lastScrollPos = 0;
+
+  // Smooth scroll functionality
+  const scrollLinks = document.querySelectorAll('a[href^="#"]');
+
+  scrollLinks.forEach((scrollLink) => {
+    scrollLink.addEventListener("click", function (e) {
+      e.preventDefault();
+
+      isScrolled = true;
+
+      const targetId = this.getAttribute("href").substring(1);
+      const targetElement = document.getElementById(targetId);
+
+      window.scrollTo({
+        top: targetElement.offsetTop,
+        behavior: "smooth",
+      });
+    });
+  });
+
+  window.addEventListener("scroll", function () {
+    const currentScrollPos = window.scrollY;
+
+    if (currentScrollPos > lastScrollPos) {
+      // Scrolling down
+      nav.style.top = "-50%";
+    } else {
+      // Scrolling up
+      nav.style.top = "0";
+    }
+
+    lastScrollPos = currentScrollPos;
+
+    if (currentScrollPos === 0) {
+      isScrolled = false;
+    }
+
+    // Automatically scroll down by 70px when the user scrolls a little bit greater than 0
+    if (currentScrollPos > 0 && currentScrollPos <= 70) {
+      if (isScrolled) return;
+      const targetId = "homeSection";
+      const targetElement = document.getElementById(targetId);
+
+      window.scrollTo({
+        top: targetElement.offsetTop,
+        behavior: "smooth",
+      });
+      isScrolled = true;
+    }
+
+    // Adjust the pixel value as needed to control when the animation should trigger
+    if (currentScrollPos > 0) {
+      tagLine.style.padding = "50px 0px";
+      tagLineH1.style.margin = "25px 30px";
+      description.style.left = 0;
+      description.style.marginTop = "20rem";
+      description.style.opacity = 1;
+      if (window.innerWidth > 850) {
+        gameRedirectContainer.style.right = "20px";
+        gameRedirectContainer.style.bottom = "10px";
+        gameRedirectContainer.style.height = "30%";
+        gameRedirectContainer.style.width = "25%";
+        rules.style.display = "none";
+        rules.style.opacity = 0;
+      } else {
+        if (autoScrollCount < 1) {
+          setTimeout(() => {
+            gameRedirectContainer.style.bottom = "-2%";
+          }, 3000);
+        } else {
+          gameRedirectContainer.style.bottom = "-2%";
+        }
+      }
+      // Start playing the video when scrolling
+      if (video.paused) {
+        video.play();
+      }
+    } else {
+      tagLine.style.padding = "10px 0px";
+      tagLineH1.style.margin = "0px 30px";
+      description.style.marginTop = "17rem";
+      if (window.innerWidth > 850) {
+        gameRedirectContainer.style.bottom = "100px";
+        gameRedirectContainer.style.transition = "all 0.5s ease-in-out";
+        gameRedirectContainer.style.height = "70%";
+        gameRedirectContainer.style.width = "40%";
+        rules.style.display = "flex";
+        rules.style.opacity = 1;
+      } else {
+        gameRedirectContainer.style.bottom = "7%";
+      }
+    }
+  });
+});
+
+const mobileMenu = document.querySelector(".menu-overlay");
+const menuButton = document.querySelector(".hamburger-menu");
+
+let isMenuOpen = false;
+
+function showMenu() {
+  mobileMenu.style.right = "0";
+  menuButton.style.backgroundImage = "url(/assets/cross-icon.png)";
+}
+
+function hideMenu() {
+  mobileMenu.style.right = "-100%";
+  menuButton.style.backgroundImage = "url(/assets/menu-icon.png)";
+}
+
+function toggleMenu() {
+  if (!isMenuOpen) {
+    showMenu();
+    console.log("Showing menu");
+    isMenuOpen = true;
+  } else {
+    hideMenu();
+    console.log("Hiding menu");
+    isMenuOpen = false;
+  }
+}