QOL Update | 5.4.1

- Made the navbar responsive - Small CSS changes - Added 3 more cloaks - General quality of life features
Parcoil · Oct 25, 2024 · a068ea0 · a068ea0
1 parent db6bb6b
commit a068ea0
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lunaar.org",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "description": "The Future of Unblocked Gaming!",
   "type": "module",
   "engines": {

diff --git a/public/components/nav.ejs b/public/components/nav.ejs
@@ -8,19 +8,20 @@
     <a href="/science">
       <button class="clear">
         <i class="fa-solid fa-joystick"></i>
-        &nbsp; Games
+
+        <p>&nbsp;Games</p>
       </button>
     </a>
     <a href="/math">
       <button class="clear">
         <i class="fa-solid fa-grid-2"></i>
-        &nbsp;Apps
+        <p>&nbsp;Apps</p>
       </button>
     </a>
     <a href="/settings">
       <button class="clear">
         <i class="fa-solid fa-sliders"></i>
-        &nbsp; Settings
+        <p>&nbsp;Settings</p>
       </button>
     </a>
   </div>

diff --git a/public/css/main.css b/public/css/main.css
@@ -73,29 +73,23 @@ body {
   gap: 15px;
   margin-left: auto;
 }
-
-/* Mobile styles */
-@media (max-width: 768px) {
-  .nav {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 10px;
-    margin: 10px;
-    height: auto;
+.navlinks i {
+  font-size: 1.1rem;
+  margin-right: 5px;
+}
+@media only screen and (max-width: 600px) {
+  .navlinks i {
+    font-size: 1.4rem;
+    margin-right: 0;
   }
-
-  .navlinks {
-    flex-direction: column;
-    gap: 10px;
-    width: 100%;
+  .navlinks p {
+    display: none;
   }
-
-  .navlinks a {
-    padding: 10px;
-    width: 100%;
-    text-align: center;
+  .footer-right {
+    display: none;
   }
 }
+
 i {
   color: var(--textcolor2);
 }
@@ -215,6 +209,8 @@ input[type="text"]::placeholder {
 }
 .card-input {
   text-align: center;
+  background-color: var(--button) !important;
+  border: none !important;
 }
 #searchBar,
 #search {
@@ -268,7 +264,7 @@ button .icon {
   backdrop-filter: blur(2px);
   padding: 20px;
   display: flex;
-  margin: 20px;
+  margin: 5px;
   width: 20rem;
   min-width: 20rem;
   max-width: 30rem;
@@ -319,11 +315,14 @@ button .icon {
 ::-webkit-scrollbar {
   width: 10px;
 }
-
+::-webkit-scrollbar-track {
+  background: transparent;
+}
 ::-webkit-scrollbar-thumb {
   background: var(--button);
   border-radius: 10px;
 }
+
 #gameFrame {
   width: 1024px;
   height: 576px;
@@ -564,3 +563,51 @@ input:checked + .slider:before {
   border-radius: 5px;
   margin-left: 10px;
 }
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.1s;
+  transition: 0.1s;
+  border-radius: 34px;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: 0.1s;
+  transition: 0.1s;
+  border-radius: 50%;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+input:checked + .slider {
+  background-color: var(--button);
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px var(--button);
+}
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
diff --git a/public/css/themes.css b/public/css/themes.css
@@ -1,10 +1,3 @@
-/*
-This file defines CSS variables for different color themes on the site.
-
-There are currently two themes defined - 'main' and 'grey'. More themes can be added by defining new CSS rules.
-
-To use a theme, add the 'theme' attribute to the <body> tag, e.g. <body theme="grey">
-*/
 @font-face {
   font-family: "bone";
   src: url("../media/nasalization-rg.otf") format("opentype");
@@ -64,7 +57,7 @@ body[theme="grey"] {
   --textcolor: #fff;
   --alt: #333333;
   --logo: #888888;
-  --button: rgb(56, 56, 56);
+  --button: rgb(107, 107, 107);
   --bg: #141414;
   --rounded: 30.4px;
   --rounded2: 10px;
@@ -218,6 +211,9 @@ body[theme="light"] {
 body[theme="light"] #particles-js {
   filter: invert(100%);
 }
+body[theme="light"] .card {
+  background-color: transparent;
+}
 body[theme="light"] input[type="text"],
 body[theme="light"] .search-right,
 body[theme="light"] button,

diff --git a/public/media/cloaks/canvas.png b/public/media/cloaks/canvas.png
diff --git a/public/media/cloaks/edpuzzle.png b/public/media/cloaks/edpuzzle.png
diff --git a/public/media/cloaks/wikipedia.ico b/public/media/cloaks/wikipedia.ico
diff --git a/public/views/go.ejs b/public/views/go.ejs
@@ -88,7 +88,22 @@
   });
 </script>
 <main>
-  <div style="position: fixed" class="z"><h1>Loading...</h1></div>
+  <div style="position: fixed" class="z">
+    <h1>Loading...</h1>
+    <script type="text/javascript">
+      atOptions = {
+        key: "13def82c028e7c80ebeecd26958279a7",
+        format: "iframe",
+        height: 90,
+        width: 728,
+        params: {},
+      };
+    </script>
+    <script
+      type="text/javascript"
+      src="//rethinkexercisesupplement.com/13def82c028e7c80ebeecd26958279a7/invoke.js"
+    ></script>
+  </div>
   <p id="rng" style="position: fixed; bottom: 0" class="z"></p>
   <div class="prxbar">
     <div class="prxbuttons">
@@ -120,6 +135,7 @@
         </button>
       </form>
     </div>
+
     <div class="prxbuttons">
       <button class="prxbtn" onclick="prxhome()" title="Home">
         <i class="fa-solid fa-house"></i>
@@ -137,4 +153,17 @@
   </div>
 
   <iframe src="" frameborder="0" id="frame"> </iframe>
+  <script type="text/javascript">
+    atOptions = {
+      key: "13def82c028e7c80ebeecd26958279a7",
+      format: "iframe",
+      height: 90,
+      width: 728,
+      params: {},
+    };
+  </script>
+  <script
+    type="text/javascript"
+    src="//rethinkexercisesupplement.com/13def82c028e7c80ebeecd26958279a7/invoke.js"
+  ></script>
 </main>
diff --git a/public/views/index.ejs b/public/views/index.ejs
@@ -1,7 +1,7 @@
 <main id="main">
   <div class="home">
     <!-- <%- include('../components/logo') -%> -->
-    <h1>🎃</h1>
+    <h1 style="font-size: 50px">🎃</h1>
     <h1 class="lsans main-logo sitetext">lunaar.</h1>
     <p id="rng"></p>
     <form id="uv-form">
@@ -34,7 +34,7 @@
       src="//rethinkexercisesupplement.com/13def82c028e7c80ebeecd26958279a7/invoke.js"
     ></script>
   </div>
-  <div class="footer" style="left: 10px; font-size: 20px">
+  <div class="footer footer-left" style="left: 10px; font-size: 20px">
     <a href="https://github.com/Parcoil/lunaar.org"
       ><i class="fa-brands fa-github"></i
     ></a>
@@ -45,7 +45,7 @@
       >Loading version</a
     >
   </div>
-  <div class="footer" style="right: 10px">
+  <div class="footer footer-right" style="right: 10px">
     <p>&copy; 2022-2024 Parcoil Network All rights reserved</p>
   </div>
 </main>

diff --git a/public/views/settings.ejs b/public/views/settings.ejs
@@ -49,18 +49,18 @@
 
     <div class="card">
       <h1>Panic Key</h1>
-      <p>When you press the set key, it will take you to the set URL.</p>
+      <p>When you press the set key, it will take you to the site you entered.</p>
       <form>
-        <label for="panic-key">Key:</label>
+
         <input
           id="panic-key"
           onchange="setKey(this.value)"
           type="text"
-          placeholder="~"
+          placeholder="`"
           class="card-input"
           maxlength="1"
         />
-        <label for="panic-url">URL:</label>
+
         <input
           id="panic-url"
           onchange="setSite(this.value)"
@@ -73,13 +73,17 @@
 
     <div class="card">
       <h1>Tab Cloak</h1>
-      <p>Cloaks the tab bar of Lunaar.</p>
+      <p>Changes the icon and title of Lunaar.</p>
       <select id="cloakSelect">
         <option value="default">Default Cloak</option>
+        <option value="canvas">Canvas</option>
+               <option value="wikipedia">Wikipedia</option>
+        <option value="edpuzzle">Edpuzzle</option>
         <option value="drive">Google Drive</option>
         <option value="classroom">Google Classroom</option>
         <option value="zoom">Zoom</option>
       </select>
+      <button onclick="resetCloak()">Reset</button>
       <p class="small">
         Made with <a href="https://github.com/Parcoil/cloak">CloakJS</a>
       </p>
@@ -99,8 +103,12 @@
     <div class="card">
       <h1>Stars Toggle</h1>
       <p>Toggles the display of stars in the background of Lunaar.</p>
-      <button class="filled" onclick="setStars('on')">Set On</button>
-      <button class="filled" onclick="setStars('off')">Set Off</button>
+ <!--      <button class="filled" onclick="setStars('on')">Set On</button>
+      <button class="filled" onclick="setStars('off')">Set Off</button> -->
+  <label class="switch">
+  <input type="checkbox" id="starsToggle" checked>
+  <span class="slider round"></span>
+</label>
     </div>
 
     <div class="card">
@@ -120,11 +128,16 @@
 <script>
   const searchengine = localStorage.getItem("se");
   const seToggle = document.getElementById("seToggle");
+  const starsToggle = document.getElementById("starsToggle");
 
   seToggle.addEventListener("change", (event) => {
     localStorage.setItem("se", event.target.value);
   });
 
+  starsToggle.addEventListener("change", (event) => {
+    setStars(event.target.checked ? "on" : "off");
+  });
+
   function setStars(state) {
     console.log("[Lunaar]", "Stars state:", state);
     localStorage.setItem("stars", state === "on");
@@ -140,11 +153,18 @@
     setTheme(event.target.value);
   });
 
+  function resetCloak() {
+    localStorage.removeItem("cloakFavicon");
+    localStorage.removeItem("cloakTitle");
+    document.location.reload();
+  }
+
   function loadSettings() {
     themeSelect.value = localStorage.getItem("theme");
     seToggle.value = localStorage.getItem("se");
     panickey.value = localStorage.getItem("panicKey");
     panicurl.value = localStorage.getItem("panicSite");
+    starsToggle.checked = localStorage.getItem("stars") !== "false";
   }
 
   loadSettings();
@@ -189,11 +209,27 @@
     });
 
   const cloaks = [
-    { name: "default", icon: "./media/logo.svg", title: "Lunaar" },
+
     {
       name: "drive",
       icon: "./media/cloaks/googledrive.png",
       title: "Home - Google Drive",
+    },
+     {
+      name: "edpuzzle",
+      icon: "./media/cloaks/edpuzzle.png",
+      title: "Edpuzzle",
+    },
+         {
+      name: "wikipedia",
+      icon: "./media/cloaks/wikipedia.ico",
+      title: "Wikipedia",
+    },
+
+    {
+      name: "canvas",
+      icon: "./media/cloaks/canvas.png",
+      title: "Dashboard",
     },
     { name: "classroom", icon: "./media/cloaks/classroom.png", title: "Home" },
     { name: "zoom", icon: "./media/cloaks/zoom.png", title: "Zoom" },