Merge pull request #15 from t404owo/glitch

Deploy from Glitch

assets/js/index.js

@@ -1,13 +1,18 @@
+//Carousel
 let next = document.querySelector(".next");
 let prev = document.querySelector(".prev");
 
 let pages = document.getElementById("pages");
-let pgctrl = [document.querySelector(".pgctrl")];
+let pgctrl = document.querySelector(".pgctrl");
 let slider = document.querySelector(".slider");
 let carousel = document.querySelector(".carousel");
 
 let bg = document.querySelector(".slider-bg");
 
+//Album-cards
+let album_cards = document.querySelector(".album-cards");
+
+//The Database call.
 import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
 
 const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
@@ -18,24 +23,7 @@ const supabaseKey =
 //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/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..."',
-  ];
-
+//the elements for the carousel
 if (!document) console.log("press f");
 if (!next) console.log("Class next missing.");
 if (!prev) console.log("Class prev missing.");
@@ -45,117 +33,187 @@ if (!carousel) console.log("Class carousel missing.");
 let slider_index = 0;
 let touchstartX = 0;
 let touchendX = 0;
+let highlights = [],
+  releases = [],
+  activities = [],
+  default_highlights = [
+    {
+      img_url:
+        "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
+      url: "/",
+      title: "This page is still under construction.",
+      preview:
+        "The page is still under development. In cases, this page will change after reload or after a few days and a reload.",
+    },
+  ];
 
-//create pages and add buttons
-init_page();
-pg_ctrl();
-
-pgctrl.push(document.querySelectorAll(".pgctrl li"));
-if (pgctrl[1])
-  pgctrl[1].forEach((m, n) =>
-    m.addEventListener("click", function () {
-      reset();
-      slider_index = n;
-      set();
-    })
-  );
-
-//refresh
-reset();
-set();
-
-
-let highlights, releases, activities;
-
-async function fetch_highlights() {
-  let { data, error } = await supabase
+let path_name = window.location.pathname;
+//Start building the page by calling data
+let params = new URLSearchParams(location.search);
+if (!params.get("release")) {
+  if (path_name === "/") {
+    document.title = "t404:null | Home";
+    build_event(0);
+  }
+  if (path_name === "/" || path_name === "/release") build_event(1);
+  if (path_name === "/" || path_name === "/activity") build_event(2);
+} else {
+  let main = document.querySelector("main");
+  main.innerHTML = "";
+  /*
+  <div class="release-track" style="
+          background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
+          background-size: cover;
+          background-position: center;
+        ">
+        <div class="text-box">
+          <h1 class="title">
+            <strong>Insert Title here</strong>
+          </h1>
+          (Raw Context here)
+        </div>
+      </div>
+  */
+  let id = params.get("release").replace(/^\//g, "");
+  console.log(id);
+  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);
-  }
+    .select("title, context, bg_src")
+    .eq("event_id", id)
+    .then((d) => {
+      let res = d.data;
+      if (res !== null && res.length > 0) {
+        let _pg = document.createElement("div"),
+          _box = document.createElement("div"),
+          _h1 = document.createElement("h1"),
+          title = document.createElement("strong"),
+          data = res[0];
+
+        _pg.classList.add("release-track");
+        _pg.style =
+          "background-image: url(" +
+          data.bg_src +
+          ");" +
+          "background-size: cover;" +
+          "background-position: center;";
+
+        _box.classList.add("text-box");
+        title.textContent = data.title;
+        
+        
+        main.appendChild(_pg);
+        _pg.appendChild(_box);
+        _box.appendChild(_h1);
+        _h1.appendChild(title);
+        _box.innerHTML+=data.context;
+
+        document.title = "t404:null | " + data.title;
+      } else {
+        main.innerHTML = "404";
+        document.title = "t404:null | Not Found";
+      }
+    });
 }
-async function fetch_releases() {
-  let { data, error } = await supabase
+
+// #region Slider section
+
+function build_event(i) {
+  let conditions = [
+      "event_type.eq.highlight,event_type.eq.highlight_activity,event_type.eq.highlight_release",
+      "event_type.eq.release,event_type.eq.highlight_release",
+      "event_type.eq.activity,event_type.eq.highlight_activity",
+    ],
+    inits = [init_highlights, init_releases, init_activities];
+  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);
+    .select("url, title, subtitle, preview, img_src")
+    .order("id", i < 1 ? { ascending: true } : { descending: true })
+    .limit(10)
+    .or(conditions[i])
+    .then(inits[i]);
+}
+
+function init_highlights(d) {
+  if (d.error) {
+    console.error("Error fetching data:", d.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);
+    highlights = d.data;
+    if (d.data.length === 0) highlights = default_highlights;
+
+    highlights.forEach((a) => {
+      let _pg = document.createElement("section"),
+        _div = document.createElement("div");
+      let _h1 = document.createElement("h1"),
+        _p = document.createElement("p");
+
+      _h1.classList.add("title");
+      _h1.textContent = a.title;
+
+      _p.classList.add("desc");
+      _p.textContent = a.preview;
+
+      _div.appendChild(_h1);
+      _div.appendChild(_p);
+      _pg.appendChild(_div);
+      pages.appendChild(_pg);
+    });
+    pg_ctrl();
+
+    //refresh
+    reset();
+    set();
+
+    //next
+    if (next) {
+      next.addEventListener("click", nxt);
+      setInterval(nxt, 30000);
+    }
+
+    //previous
+    if (prev) prev.addEventListener("click", prv);
+
+    slider.onclick = function () {
+      location.assign(highlights[slider_index].url);
+    };
+    //slider.children.forEach((carousel, num) => {
+    carousel.addEventListener("touchstart", (e) => {
+      touchstartX = e.changedTouches[0].screenX;
+    });
+    carousel.addEventListener("touchend", (e) => {
+      touchendX = e.changedTouches[0].screenX;
+      checkX();
+    });
   }
 }
 
-
-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);
+    pgctrl.appendChild(button);
+
+    if (pgctrl)
+      button.addEventListener("click", function () {
+        reset();
+        slider_index = n;
+        set();
+      });
   }
 }
 
 function set() {
   slider.children[slider_index].style.opacity = 1;
   slider.children[slider_index].style.zIndex = 1;
-  pgctrl[0].children[slider_index].style.opacity = 1;
-  if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`;
+  [].slice.call(pgctrl.children)[slider_index].style.opacity = 1;
+  if (bg)
+    bg.style.backgroundImage = `url('${highlights[slider_index].img_src}')`;
 }
-
-// setInterval(getinfo, 60000);
-// async function getinfo() {
-//   let res = await fetch("");
-//   const info = await res.json();
-//   if (bg) bg.style.backgroundImage = `url('${info.slider[1].img}')`;
-// }
-
 function reset() {
   for (var i = 0; i < slider.children.length; i++) {
     slider.children[i].style.opacity = 0;
     slider.children[i].style.zIndex = 0;
-    pgctrl[0].children[i].style.opacity = 0.4;
+    [].slice.call(pgctrl.children)[i].style.opacity = 0.4;
     if (bg) bg.style.backgroundImage = null;
   }
 }
@@ -182,31 +240,152 @@ function prv() {
   set();
 }
 
-//next
-if (next) {
-  next.addEventListener("click", nxt);
-  setInterval(nxt, 30000);
-}
-
-//previous
-if (prev) prev.addEventListener("click", prv);
-
-slider.onclick = function () {
-  location.assign(pg[slider_index]);
-};
-
 //touchswipe control
 function checkX() {
   if (touchendX < touchstartX && touchstartX - touchendX > 60) nxt();
   if (touchendX > touchstartX && touchendX - touchstartX > 60) prv();
 }
-//slider.children.forEach((carousel, num) => {
-carousel.addEventListener("touchstart", (e) => {
-  touchstartX = e.changedTouches[0].screenX;
-});
-carousel.addEventListener("touchend", (e) => {
-  touchendX = e.changedTouches[0].screenX;
-  checkX();
-});
 
-//location.reload(true);
+// #endregion
+
+async function init_releases(d) {
+  if (d.error) {
+    console.error("Error fetching data:", d.error);
+  } else {
+    releases = d.data;
+    /*
+        <a class="card" href="/release">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.me/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FC9B955D3-3A2A-4B83-92EB-EBCBDEB2B458.jpeg);
+            "></div>
+          <h2>PoΣΣεssion (Possession)</h2>
+          <p>Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.</p>
+          <p>Ghost and monsters are gathering you...</p>
+        </a>
+        <a class="card" href="/release">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Hyper_Limimality.png);
+            "></div>
+          <h2>Hyper Liminality</h2>
+          <p>t404:null &amp; trung-nova &amp; AXiS</p>
+          <p>"until you reach it... the two hyper sides."</p>
+        </a>
+        <a class="card" href="/release/A_Lake_With_Endless_Stars">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
+            "></div>
+          <h2>A Lake With Endless Stars</h2>
+          <p> "Under the coruscating night sky, gaze into the kaleidoscopic waters..." </p>
+        </a>
+        <a class="card" href="/release/Oblitus_Requiem">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
+            "></div>
+          <h2>Oblitus Requiem \\Against the Forsaken Legacy//</h2>
+          <p>VNMC2023 Grand Finals Tiebreaker.</p>
+          <p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
+        </a>
+*/
+    releases.forEach((a) => {
+      let _card = document.createElement("a"),
+        _bg_img = document.createElement("div"),
+        _h2 = document.createElement("h2"),
+        _p_subtitle = document.createElement("p"),
+        _p_preview = document.createElement("p");
+      _card.href = a.url;
+
+      _card.classList.add("card");
+
+      _bg_img.classList.add("bg-img");
+      _bg_img.style = "background-image: url(" + a.img_src + ");";
+
+      _h2.textContent = a.title;
+
+      _p_subtitle.textContent = a.subtitle;
+      _p_preview.textContent = a.preview;
+
+      _card.appendChild(_bg_img);
+      _card.appendChild(_h2);
+      _card.appendChild(_p_subtitle);
+      _card.appendChild(_p_preview);
+      album_cards.appendChild(_card);
+    });
+  }
+}
+async function init_activities(d) {
+  if (d.error) {
+    console.error("Error fetching data:", d.error);
+  } else {
+    releases = d.data;
+    /*<a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png);
+            "></div>
+          <h2>Fanmade of Fighters I: Genesis</h2>
+          <p>BOF-like Contest Releases.</p>
+          <p> Our team (Sine Fine Stellae) Achieved #2 :D <br />
+            <br />
+            <strong>A Lake With Endless Stars</strong> is one of the soundtracks from Sine Fine Stellae produced by me, thanks to the help of Riprider500 and more people :D
+          </p>
+        </a>
+        <a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/vnmc2023.png?v=1717348650235);
+            "></div>
+          <h2>VNMC 2023</h2>
+          <p> (Vietnamese National Mania Championship 2023) Grand Finals Tiebreaker by me (t404:null) </p>
+          <p>
+            <strong>Oblitus Requiem &bsol;&bsol;Against the Forsaken Legacy//</strong>
+            <br />
+            <br /> "Even if you don't remember me now, I will bring the you I once knew back from them." <br />
+            <br />Sivelia (the host of VNMC) has asked me making a custom soundtrack round for the tourney. The soundtrack get much likes and subscribers on Youtube within 2 weeks as the tournament got a big impact gained. Big thank you to all VNMC staffs for that!
+          </p>
+        </a>
+        <a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch1.jpg);
+            "></div>
+          <h2>VNMC 2024 (???)</h2>
+          <p>???</p>
+          <p> Li4tLiAuLS0gLS4uIC0tLi4u <br />&bsol;-...-4buoe2v1qZuiULSrOPuzXZBn <br />YZt0ULSr9PuzvfuiaZwo5ZBseZB39 <br />fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO </p>
+        </a>
+        <a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch2.jpg);
+            "></div>
+          <h2>VNMC 2024 (???) (w/ ??? as ???)</h2>
+          <p>???</p>
+        </a>
+        <a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glich3.jpg);
+            "></div>
+          <h2>???? 5 (????2024) (w/ ??? as ???)</h2>
+          <p>???</p>
+          <p>???</p>
+        </a>*/
+    releases.forEach((a) => {
+      let _card = document.createElement("a"),
+        _bg_img = document.createElement("div"),
+        _h2 = document.createElement("h2"),
+        _p_subtitle = document.createElement("p"),
+        _p_preview = document.createElement("p");
+      _card.href = a.url;
+      _card.classList.add("card");
+
+      _bg_img.classList.add("bg-img");
+      _bg_img.style = "background-image: url(" + a.img_src + ");";
+
+      _h2.textContent = a.title;
+
+      _p_subtitle.textContent = a.subtitle;
+      _p_preview.textContent = a.preview;
+
+      _card.appendChild(_bg_img);
+      _card.appendChild(_h2);
+      _card.appendChild(_p_subtitle);
+      _card.appendChild(_p_preview);
+      album_cards.appendChild(_card);
+    });
+  }
+}

index.html

@@ -1,12 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>t404:null | Home</title>
-    <meta name="description" content="Hello there! I'm t404:null (a.k.a t404owo).
-I write/make/produce EDM music(DTM), and for every releases I'll post my music on this website. If you have any requests or questions, feel free contact me." />
-    <link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png" />
+    <title>t404:null</title>
+    <meta
+      name="description"
+      content="Hello there! I'm t404:null (a.k.a t404owo).
+I write/make/produce EDM music(DTM), and for every releases I'll post my music on this website. If you have any requests or questions, feel free contact me."
+    />
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png"
+    />
     <meta charset="UTF-8" />
     <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
+    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
+    <script>
+      eruda.init();
+    </script>
   </head>
   <body>
     <nav>
@@ -194,8 +205,7 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
       <div class="container">
         <div class="carousel">
           <div class="slider-bg"></div>
-          <div class="slider" id="pages">
-          </div>
+          <div class="slider" id="pages"></div>
           <div class="control">
             <span class="prev">&lt;</span>
             <span class="next">&gt;</span>
@@ -204,107 +214,20 @@ 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="module"></script>
       <!--💀-->
       <hr />
       <h1 class="topic">
         <a href="/release">Releases (Click for more)</a>
       </h1>
-      <div class="album-cards">
-        <a class="card" href="/release/hello.world(Zer/O)">
-          <div class="bg-img" style="
-              background-image: url(https://t404null.glitch.me/assets/images/image0.png);
-            "></div>
-          <h2>hello.world(Zer/O)</h2>
-          <p>First Release</p>
-          <p>What do I see... a new world...?</p>
-        </a>
-        <a class="card" href="/release">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.me/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FC9B955D3-3A2A-4B83-92EB-EBCBDEB2B458.jpeg);
-            "></div>
-          <h2>PoΣΣεssion (Possession)</h2>
-          <p>Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.</p>
-          <p>Ghost and monsters are gathering you...</p>
-        </a>
-        <a class="card" href="/release">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Hyper_Limimality.png);
-            "></div>
-          <h2>Hyper Liminality</h2>
-          <p>t404:null &amp; trung-nova &amp; AXiS</p>
-          <p>"until you reach it... the two hyper sides."</p>
-        </a>
-        <a class="card" href="/release/A_Lake_With_Endless_Stars">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
-            "></div>
-          <h2>A Lake With Endless Stars</h2>
-          <p> "Under the coruscating night sky, gaze into the kaleidoscopic waters..." </p>
-        </a>
-        <a class="card" href="/release/Oblitus_Requiem">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
-            "></div>
-          <h2>Oblitus Requiem \\Against the Forsaken Legacy//</h2>
-          <p>VNMC2023 Grand Finals Tiebreaker.</p>
-          <p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
-        </a>
-      </div>
+      <div class="album-cards"></div>
       <hr />
       <h1 class="topic">
         <a href="/activity">Activities</a>
       </h1>
-      <div class="half-image-cards">
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png);
-            "></div>
-          <h2>Fanmade of Fighters I: Genesis</h2>
-          <p>BOF-like Contest Releases.</p>
-          <p> Our team (Sine Fine Stellae) Achieved #2 :D <br />
-            <br />
-            <strong>A Lake With Endless Stars</strong> is one of the soundtracks from Sine Fine Stellae produced by me, thanks to the help of Riprider500 and more people :D
-          </p>
-        </a>
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/vnmc2023.png?v=1717348650235);
-            "></div>
-          <h2>VNMC 2023</h2>
-          <p> (Vietnamese National Mania Championship 2023) Grand Finals Tiebreaker by me (t404:null) </p>
-          <p>
-            <strong>Oblitus Requiem &bsol;&bsol;Against the Forsaken Legacy//</strong>
-            <br />
-            <br /> "Even if you don't remember me now, I will bring the you I once knew back from them." <br />
-            <br />Sivelia (the host of VNMC) has asked me making a custom soundtrack round for the tourney. The soundtrack get much likes and subscribers on Youtube within 2 weeks as the tournament got a big impact gained. Big thank you to all VNMC staffs for that!
-          </p>
-        </a>
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch1.jpg);
-            "></div>
-          <h2>VNMC 2024 (???)</h2>
-          <p>???</p>
-          <p> Li4tLiAuLS0gLS4uIC0tLi4u <br />&bsol;-...-4buoe2v1qZuiULSrOPuzXZBn <br />YZt0ULSr9PuzvfuiaZwo5ZBseZB39 <br />fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO </p>
-        </a>
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch2.jpg);
-            "></div>
-          <h2>VNMC 2024 (???) (w/ ??? as ???)</h2>
-          <p>???</p>
-        </a>
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glich3.jpg);
-            "></div>
-          <h2>???? 5 (????2024) (w/ ??? as ???)</h2>
-          <p>???</p>
-          <p>???</p>
-        </a>
-      </div>
+      <div class="half-image-cards"></div>
     </main>
     <div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
   </body>
-</html>
+
+  <script src="/assets/js/index.js" type="module"></script>
+</html>

release/index.html

@@ -192,46 +192,8 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
     <main class= "main-page">
       <h1 class="topic">Releases</h1>
       <div class="album-cards">
-        <a class="card" href="/release/hello.world(Zer/O)">
-          <div class="bg-img" style="
-              background-image: url(https://t404null.glitch.me/assets/images/image0.png);
-            "></div>
-          <h2>hello.world(Zer/O)</h2>
-          <p>First Release</p>
-          <p>What do I see... a new world...?</p>
-        </a>
-        <a class="card" href="/release">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.me/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FC9B955D3-3A2A-4B83-92EB-EBCBDEB2B458.jpeg);
-            "></div>
-          <h2>PoΣΣεssion (Possession)</h2>
-          <p>Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.</p>
-          <p>Ghost and monsters are gathering you...</p>
-        </a>
-        <a class="card" href="/release">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Hyper_Limimality.png);
-            "></div>
-          <h2>Hyper Liminality</h2>
-          <p>t404:null &amp; trung-nova &amp; AXiS</p>
-          <p>"until you reach it... the two hyper sides."</p>
-        </a>
-        <a class="card" href="/release/A_Lake_With_Endless_Stars">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
-            "></div>
-          <h2>A Lake With Endless Stars</h2>
-          <p> "Under the coruscating night sky, gaze into the kaleidoscopic waters..." </p>
-        </a>
-        <a class="card" href="/release/Oblitus_Requiem">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
-            "></div>
-          <h2>Oblitus Requiem \\Against the Forsaken Legacy//</h2>
-          <p>VNMC2023 Grand Finals Tiebreaker.</p>
-          <p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
-        </a>
       </div>
+      <script src="/assets/js/index.js" type="module"></script>
     </main>
     <div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
   </body>