udated shut

2024-12-13 16:46:59 +00:00
parent d4fb5d4ff6
commit 445c75f482
4 changed files with 194 additions and 23 deletions
@@ -1,25 +1,94 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">  
  <head>
-      <script src="https://cdn.botpress.cloud/webchat/v2.2/inject.js"></script>
-<script src="https://files.bpcontent.cloud/2024/12/06/15/20241206153004-TAN20HWW.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="shortcut icon" type="x-icon" href="/game online.png">
-    <title>home</title>
-        <link rel="stylesheet" href="/ecstra/ecsta.css">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

-<h1>This Site Is Under Construction so we will ad a new game evrey day</h1>
-<a href="/credits.html">credits</a>
-<a href="/WebGames-master/WebGames-master/index.html">Games</a>
- <a href="/movies.html">Movies With Zero Ads</a>
- <a href="emulator.html">Emulator</a>
- <a href="/myvid.html">Miles Gaming Vids </a>
-<a href="/games.html">old games</a>
-<a href="/gametoadd.html">game i will add soon</a>
-<a href="/WebGames-master/WebGames-master/pokemon-netplay/pokemon/index.html">pokemon netplay comigns soon</a>
-      <a href="https://docs.google.com/document/d/16-SwD07kCpldMS-xd_tAIB8ab2dcerIUQole-yZQmh8/edit?usp=sharing">Fan Clubs Of HighView</a>
-<p>2.42.12</p>
+    <link rel="icon" href="assets/page_icon.png" />
+    <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=Play:wght@700&family=Press+Start+2P&display=swap"
+      rel="stylesheet" />
+    <!-- font awesome cdn -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+      integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="/WebGames-master/WebGames-master/main.css" />
+
+    <script defer src="script2.js"></script>
+    <title>fun-miles</title>
  </head>
+
  <body>
-    <script defer src="https://chirpy.dev/bootstrapper.js" data-chirpy-domain="fun-miles-4jub.onrender.com"></script>
-</body>
+    <nav class="nav-bar">
+      <h1>fun-miles</h1>
+      <div class="nav-elem">
+        <noscript><P>your devis in bad go to this link <A href="/games.html">hi</A></P></noscript>
+        <button>
+          <a
+            class="a-text nav-item"
+            href="https://github.com/mileswolfallen2/fun-miles"
+            
+            >contribute&nbsp;</a
+          >
+          <a href="https://github.com/mileswolfallen2/fun-miles" 
+            ><i class="fa-brands fa-github nav-item"></i
+          ></a>
+        </button>
+
+        <button>
+          <a
+            class="a-text nav-item"
+            href="https://github.com/mileswolfallen2/fun-miles/blob/main/README.md"
+           
+            >About&nbsp;</a
+          >
+          <a
+            href="https://github.com/mileswolfallen2/fun-miles/blob/main/README.md"
+           
+            ><i class="fa-solid fa-circle-info nav-item"></i
+          ></a>
+        </button>
+
+        <button onclick="onToggleDarkMode()">
+          <p class="nav-item">Dark Mode<i id="dark-mode-icon" class="fa-solid fa-moon"></i></p>
+        </button>
+      </div>
+
+      <div class="side-bar-menu" id="side-bar-menu">
+        <div class="side-bar-link">
+          <a
+            class="nav-item"
+            href="https://github.com/sarmadhamdani02/webGames"
+            target="_blank"
+            >Contribute <i class="fa-brands fa-github nav-item"></i>
+          </a>
+
+          <a
+            class="nav-item"
+            href="https://github.com/sarmadhamdani02/webGames#readme"
+           
+            >About <i class="fa-solid fa-circle-info nav-item"></i>
+          </a>
+
+          <button id="dark-mode-sidebar" onclick="onToggleDarkMode()">
+            <p class="nav-item">Dark Mode<i id="sidebar-dark-mode-icon" class="fa-solid fa-moon"></i></p>
+          </button>
+        </div>
+      </div>
+
+      <button class="side-bar-button" id="toggleSideBar" onclick="toggleSideBar()">
+        <i class="fa-solid fa-bars"></i>
+      </button>
+    </nav>
+
+    <div class="main-content" style="overflow-y:scroll;">
+      <!-- data is coming from JavaScript (script.js) -->
+    </div>
+    
+    </head>
 </html>
@@ -0,0 +1,25 @@
+<html>
+<head>
+      <script src="https://cdn.botpress.cloud/webchat/v2.2/inject.js"></script>
+<script src="https://files.bpcontent.cloud/2024/12/06/15/20241206153004-TAN20HWW.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="shortcut icon" type="x-icon" href="/game online.png">
+    <title>home</title>
+        <link rel="stylesheet" href="/ecstra/ecsta.css">
+
+<h1>This Site Is Under Construction so we will ad a new game evrey day</h1>
+<a href="/credits.html">credits</a>
+<a href="/WebGames-master/WebGames-master/index.html">Games</a>
+ <a href="/movies.html">Movies With Zero Ads</a>
+ <a href="emulator.html">Emulator</a>
+ <a href="/myvid.html">Miles Gaming Vids </a>
+<a href="/games.html">old games</a>
+<a href="/gametoadd.html">game i will add soon</a>
+<a href="/WebGames-master/WebGames-master/pokemon-netplay/pokemon/index.html">pokemon netplay comigns soon</a>
+      <a href="https://docs.google.com/document/d/16-SwD07kCpldMS-xd_tAIB8ab2dcerIUQole-yZQmh8/edit?usp=sharing">Fan Clubs Of HighView</a>
+<p>2.42.12</p>
+</head>
+<body>
+    <script defer src="https://chirpy.dev/bootstrapper.js" data-chirpy-domain="fun-miles-4jub.onrender.com"></script>
+</body>
+</html>
@@ -0,0 +1,77 @@
+const mainContent = document.querySelector(".main-content");
+const navBar = document.querySelector(".nav-bar");
+const gameText = document.getElementsByClassName("game-text");
+const navItem = document.getElementsByClassName("nav-item");
+const gameIcon = document.getElementsByClassName("game");
+const sideBar = document.getElementById("side-bar-menu");
+const darkModeIcon = document.getElementById("dark-mode-icon");
+const sidebarDarkModeIcon = document.getElementById("sidebar-dark-mode-icon");
+
+const onToggleDarkMode = () => {
+  if (darkModeIcon.classList.contains("fa-moon")) {
+    mainContent.style.backgroundColor = "#15202B";
+    sideBar.style.backgroundColor = "rgb(1, 125, 63)";
+    for (let i = 0; i < gameText.length; i++) {
+      gameText[i].style.color = "#E4E6EB";
+    }
+    for (let i = 0; i < gameIcon.length; i++) {
+      gameIcon[i].style.setProperty("--game-icon-hover-color", "#22303C");
+    }
+
+    navBar.style.backgroundColor = "#03DAC5";
+    navBar.style.color = "#212628";
+    for (let i = 0; i < navItem.length; i++) {
+      navItem[i].style.color = "#212628";
+    }
+    darkModeIcon.className = "fa-solid fa-sun";
+    sidebarDarkModeIcon.className = "fa-solid fa-sun";
+  } else {
+    mainContent.style.backgroundColor = "white";
+    sideBar.style.backgroundColor = "rgb(0, 144, 72)";
+    for (let i = 0; i < gameText.length; i++) {
+      gameText[i].style.color = "#333333";
+    }
+    for (let i = 0; i < gameIcon.length; i++) {
+      gameIcon[i].style.setProperty("--game-icon-hover-color", "#dedede");
+    }
+
+    navBar.style.backgroundColor = "#009090";
+    navBar.style.color = "white";
+    for (let i = 0; i < navItem.length; i++) {
+      navItem[i].style.color = "white";
+    }
+    darkModeIcon.className = "fa-solid fa-moon";
+    sidebarDarkModeIcon.className = "fa-solid fa-moon";
+  }
+};
+
+
+const toggleSideBar = () => {
+  const currentWidth = sideBar.style.width;
+  if (currentWidth === "73vw") {
+    sideBar.style.width = "0";
+    mainContent.style.filter = "brightness(1)";
+  } else {
+    sideBar.style.width = "73vw";
+    mainContent.style.filter = "brightness(50%)";
+  }
+};
+
+// Rendering the main content dynamically
+const mainContentData = [
+  {
+    name: "games",
+    image: "/images.png",
+    link: "/WebGames-master/WebGames-master/index.html",
+  },
+];
+mainContentData.forEach(item => {
+  let newDiv = `
+     <a href=${item.link} class="game game1" >
+        <img src=${item.image} alt="" />
+        <h3 class="game-text">${item.name}</h3>
+      </a>
+  `;
+
+  mainContent.innerHTML += newDiv;
+});