Updated the site's style, adjusted some JS for the future

2025-12-12 09:58:46 +00:00 · 2025-06-17 21:27:02 +00:00
parent fa449b0004
commit ba0a0c55f2
8 changed files with 129 additions and 71 deletions
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -15,6 +15,10 @@ main {
  margin-top: 0;
  min-height: calc(100vh - 10vh);
 }
+.main-page {
+  max-width: 2300px;
+  margin: 0 auto;
+}
 hr {
  margin: 2rem 0px;
 }
@@ -235,8 +239,8 @@ nav {

 .dropdown {
  display: none;
+  overflow: auto;
 }
-
 /*---- main ----*/
 .container {
  position: relative;
@@ -563,7 +567,8 @@ nav {
    color: #fff;
  }
  .text-box {
-    margin: 25% 0;
+    max-width: 1250px;
+    margin: 25% auto;
    background-color: rgba(0, 0, 0, 75%);
    height: 100%;
    color: #ddd;
@@ -620,7 +625,7 @@ nav {
  display: block;
  height: 2rem;
 }
-@media screen and (width >= 1125px) and (width<=1620px) {
+@media screen and (width >= 1180px) and (width<=1690px) {
  /*if(width<1620px&&width>=1125px)*/

  nav {
@@ -669,7 +674,7 @@ nav {
  }
 }

-@media screen and (width<1125px) {
+@media screen and (width<1180px) {
  /*if(width<1125px)*/

  nav {
--- a/assets/css/old.css
+++ b/assets/css/old.css
@@ -13,6 +13,10 @@ main {
  margin-top: 0;
  min-height: calc(100vh - 10vh);
 }
+.main-page {
+  max-width: 2300px;
+  margin: 0 auto;
+}
 hr {
  margin: 2rem 0px;
 }
@@ -223,6 +227,7 @@ nav .dropdown {
 }
 .dropdown {
  display: none;
+  overflow: auto;
 }
 /*---- main ----*/
 .container {
@@ -542,7 +547,8 @@ nav .dropdown {
  color: #fff;
 }
 .release-track .text-box {
-  margin: 25% 0;
+  max-width: 1250px;
+  margin: 25% auto;
  background-color: rgba(0, 0, 0, 75);
  height: 100%;
  color: #ddd;
@@ -597,7 +603,7 @@ nav .dropdown {
  display: block;
  height: 2rem;
 }
-@media screen and (width >= 1125px) and (width<=1620px) {
+@media screen and (width >= 1180px) and (width<=1690px) {
  /*if(width<1620px&&width>=1125px)*/
  nav .dropdown .dropdown-social {
    position: relative;
@@ -640,7 +646,7 @@ nav .dropdown {
    display: block;
  }
 }
-@media screen and (width<1125px) {
+@media screen and (width<1180px) {
  /*if(width<1125px)*/
  nav {
    font-size: 1.4rem;
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -1,46 +1,40 @@
 let next = document.querySelector(".next");
 let prev = document.querySelector(".prev");
+
+let pages = document.getElementById("pages");
 let pgctrl = [document.querySelector(".pgctrl")];
 let slider = document.querySelector(".slider");
 let carousel = document.querySelector(".carousel");

 let bg = document.querySelector(".slider-bg");

-/*
-<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@1.28.0/dist/umd/supabase.min.js"></script>
-<script>
-  const supabaseUrl = 'https://owbamcqdmqetrgcznxva.supabase.co';
-  const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im93YmFtY3FkbXFldHJnY3pueHZhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjI5NDU5NjIsImV4cCI6MjAzODUyMTk2Mn0.xNen7b513ZGwJ-Qu5iZ6K8qrmvy4QVjS10wiYbEEwKc';
-  //anon key, you cant access private stuffs or add hilarious stuffs w/ this...
-  //(unless sending me some malicious links but I delete your msg)
-  const supabase = supabase.createClient(supabaseUrl, supabaseKey);
-  async function fetchData() { 
-      let { data, error } = await supabase.
-      from('events')
-      .select('*'); //note it only shows u public stuffs
-      if (error) { 
-          console.error('Error fetching data:', error); 
-      } else {
-           console.log('Data:', data);
-           //edit tmr
-      } 
-  } 
-  fetchData();
-</script>
+import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";

-*/
+const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
+const supabaseKey =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im93YmFtY3FkbXFldHJnY3pueHZhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjI5NDU5NjIsImV4cCI6MjAzODUyMTk2Mn0.xNen7b513ZGwJ-Qu5iZ6K8qrmvy4QVjS10wiYbEEwKc";
+//anon key, you cant access private stuffs or add hilarious stuffs w/ this...
+//(unless sending me some malicious links but I delete your msg)
+//the moment you notice you need an API endpoint.
+const supabase = createClient(supabaseUrl, supabaseKey);

+//prototype
 let img = [
-  "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
-  "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Oblitus_Requiem.png?v=1693055600835",
-  "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
-];
-let pg = [
-  "/",
-  "release/Oblitus_Requiem",
-  "release/A_Lake_With_Endless_Stars"
-];
-
+    "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
+    "https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png?v=1717353087051",
+    "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
+  ],
+  pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"],
+  title = [
+    "This page is still under construction.",
+    "Oblitus Requiem \\Against the Forsaken Legacy//",
+    "A Lake With Endless Stars",
+  ],
+  desc = [
+    "The page is still under development. In cases, this page will change after reload or after a few days and a reload.",
+    '"Even if you don\'t remember me now, I will bring the you I once knew back from them."',
+    '"Under the coruscating night sky, gaze into the kaleidoscopic waters..."',
+  ];

 if (!document) console.log("press f");
 if (!next) console.log("Class next missing.");
@@ -52,13 +46,10 @@ let slider_index = 0;
 let touchstartX = 0;
 let touchendX = 0;

-//page control
-for (var i = 0; i < slider.children.length; i++) {
-  let button = document.createElement("li");
-  let n = i;
-  button.textContent = "•"; //&bull; not &middot;
-  pgctrl[0].append(button);
-}
+//create pages and add buttons
+init_page();
+pg_ctrl();
+
 pgctrl.push(document.querySelectorAll(".pgctrl li"));
 if (pgctrl[1])
  pgctrl[1].forEach((m, n) =>
@@ -72,6 +63,80 @@ if (pgctrl[1])
 //refresh
 reset();
 set();
+
+
+let highlights, releases, activities;
+
+async function fetch_highlights() {
+  let { data, error } = await supabase
+    .from("events")
+    .select("url, title, subtitle, context, img_src")
+    .eq("event_type", "highlight"); //note it only shows u public stuffs
+  if (error) {
+    console.error("Error fetching data:", error);
+  } else {
+    return (highlights = data);
+  }
+}
+async function fetch_releases() {
+  let { data, error } = await supabase
+    .from("events")
+    .select("url, title, subtitle, context, img_src")
+    .eq("event_type", "release"); //note it only shows u public stuffs
+  if (error) {
+    console.error("Error fetching data:", error);
+  } else {
+    return (releases = data);
+  }
+}
+async function fetch_activities() {
+  let { data, error } = await supabase
+    .from("events")
+    .select("url, title, subtitle, context, img_src")
+    .eq("event_type", "activity"); //note it only shows u public stuffs
+  if (error) {
+    console.error("Error fetching data:", error);
+  } else {
+    return (activities = data);
+  }
+}
+
+
+fetch_releases();
+
+console.log(releases);
+
+
+function init_page() {
+  for (var i = 0; i < 3; i++) {
+    let _pg = document.createElement("section"),
+      _div = document.createElement("div"),
+      _desc = desc[i],
+      _title = title[i];
+    let _h1 = document.createElement("h1"),
+      _p = document.createElement("p");
+
+    _h1.classList.add("title");
+    _h1.textContent = _title;
+
+    _p.classList.add("desc");
+    _p.textContent = _desc;
+
+    _div.appendChild(_h1);
+    _div.appendChild(_p);
+    _pg.appendChild(_div);
+    pages.appendChild(_pg);
+  }
+}
+function pg_ctrl() {
+  for (var i = 0; i < slider.children.length; i++) {
+    let button = document.createElement("li");
+    let n = i;
+    button.textContent = "•"; //&bull; not &middot;
+    pgctrl[0].append(button);
+  }
+}
+
 function set() {
  slider.children[slider_index].style.opacity = 1;
  slider.children[slider_index].style.zIndex = 1;
@@ -79,7 +144,6 @@ function set() {
  if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`;
 }

-
 // setInterval(getinfo, 60000);
 // async function getinfo() {
 //   let res = await fetch("");