Merge pull request #11 from t404owo/glitch

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

.glitch-assets

@@ -40,3 +40,4 @@
 {"name":"8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","date":"2024-06-02T18:31:27.051Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","type":"image/png","size":2624160,"imageWidth":1200,"imageHeight":1200,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"T6g81VqtzSI3OCCx"}
 {"uuid":"T6g81VqtzSI3OCCx","deleted":true}
 {"name":"oblitus-requiem.png","date":"2024-06-02T18:31:27.051Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png","type":"image/png","size":2624160,"imageWidth":1200,"imageHeight":1200,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2F8893e3a0-4930-4bfa-b9b4-22e8aa11e72a.image.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"T6g81VqtzSI3OCCx"}
+{"name":"oblitus-requiem-800.png","date":"2025-06-16T11:51:23.735Z","url":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem-800.png","type":"image/png","size":344343,"imageWidth":800,"imageHeight":800,"thumbnail":"https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/thumbnails%2Foblitus-requiem-800.png","thumbnailWidth":330,"thumbnailHeight":330,"uuid":"FSG1WdKddpFdwQK8"}

activity/index.html

@@ -174,7 +174,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
         </div>
       </div>
     </nav>
-    <main>
+    <main class= "main-page">
       <h1 class="topic">Activities</h1>
       <div class="half-image-cards">
         <a class="card" href="/activity">

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,9 @@ nav {
 
 .dropdown {
   display: none;
+  overflow: auto;
+  max-height: 70vh;
 }
-
 /*---- main ----*/
 .container {
   position: relative;
@@ -563,7 +568,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 +626,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 +675,7 @@ nav {
   }
 }
 
-@media screen and (width<1125px) {
+@media screen and (width<1180px) {
   /*if(width<1125px)*/
 
   nav {

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,8 @@ nav .dropdown {
 }
 .dropdown {
   display: none;
+  overflow: auto;
+  max-height: 70vh;
 }
 /*---- main ----*/
 .container {
@@ -542,7 +548,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 +604,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 +647,7 @@ nav .dropdown {
     display: block;
   }
 }
-@media screen and (width<1125px) {
+@media screen and (width<1180px) {
   /*if(width<1125px)*/
   nav {
     font-size: 1.4rem;

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");
 
-/*
+import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
-<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>
 
-*/
+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.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/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",
+    "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
-];
+  ],
-let pg = [
+  pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"],
-  "/",
+  title = [
-  "release/Oblitus_Requiem",
+    "This page is still under construction.",
-  "release/A_Lake_With_Endless_Stars"
+    "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
+//create pages and add buttons
-for (var i = 0; i < slider.children.length; i++) {
+init_page();
-  let button = document.createElement("li");
+pg_ctrl();
-  let n = i;
+
-  button.textContent = "•"; //&bull; not &middot;
-  pgctrl[0].append(button);
-}
 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("");

contacts/index.html

@@ -184,7 +184,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
         </div>
       </div>
     </nav>
-    <main>
+    <main class= "main-page">
       <h1 class="topic">Contacts</h1>
       <ul class="info contact-cards">
         <li>

index.html

@@ -184,29 +184,11 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
         </div>
       </div>
     </nav>
-    <main>
+    <main class="main-page">
       <div class="container">
         <div class="carousel">
           <div class="slider-bg"></div>
-          <div class="slider">
+          <div class="slider" id="pages">
-            <section>
-              <div>
-                <h1 class="title">This page is still under construction.</h1>
-                <p class="desc">The page is still under development. In cases, this page will change after reload or after a few days and a reload.</p>
-              </div>
-            </section>
-            <section>
-              <div>
-                <h1 class="title">Oblitus Requiem \\Against the Forsaken Legacy//</h1>
-                <p class="desc">"Even if you don't remember me now, I will bring the you I once knew back from them."</p>
-              </div>
-            </section>
-            <section>
-              <div>
-                <h1 class="title">A Lake With Endless Stars</h1>
-                <p class="desc"> "Under the coruscating night sky, gaze into the kaleidoscopic waters..." </p>
-              </div>
-            </section>
           </div>
           <div class="control">
             <span class="prev">&lt;</span>
@@ -216,7 +198,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
         </div>
       </div>
       <div></div>
-      <script src="/assets/js/index.js" type="text/javascript"></script>
+      <script src="/assets/js/index.js" type="module"></script>
       <!--💀-->
       <hr />
       <h1 class="topic">

release/index.html

@@ -183,7 +183,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
         </div>
       </div>
     </nav>
-    <main>
+    <main class= "main-page">
       <h1 class="topic">Releases</h1>
       <div class="album-cards">
         <a class="card" href="/release/hello.world(Zer/O)">