Site Update

Added contact formular Some Descriptions / Titles update Terms of Usage (ToU) update. Minor Copyright (C) update.
2025-12-12 09:58:46 +00:00 · 2025-10-17 04:18:23 +02:00
parent b0709aa77e c28949f2fc
commit 849dfeda89
7 changed files with 240 additions and 162 deletions
--- a/about_me/index.html
+++ b/about_me/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <title>t404:null | Home</title>
+    <title>t404:null | About Me</title>
    <meta
      name="description"
      content="Hello there! I'm t404:null (a.k.a t404owo).
--- a/activity/index.html
+++ b/activity/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <title>t404:null | Home</title>
+    <title>t404:null | Activities / Previous Events</title>
    <meta
      name="description"
      content="Hello there! I'm t404:null (a.k.a t404owo).
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -587,6 +587,98 @@ nav {
  }
 }

+
+
+.contact-email {
+
+  .inputbox {
+    outline: none;
+    height: 3rem;
+    width: 100%;
+    display: block;
+    background: #EFEFEF;
+    color: black;
+    border: 0px solid #505050;
+    border-radius: 5px;
+    transition: 0.3s;
+    margin-top: 0.5rem;
+  }
+
+  :not(textarea) {
+    text-align: center;
+  }
+
+  .inputbox:hover {
+    background: #DEDEDE;
+  }
+
+  .inputbox:focus {
+    background: #CECECE;
+  }
+
+  button {
+    width: 100%;
+    height: 3rem;
+    border-radius: 5px;
+    text-align: center;
+  }
+
+  .formbutton {
+    background: #272727;
+    color: #fff;
+    border: 0px;
+    transition-duration: 300ms;
+    cursor: pointer;
+  }
+
+  .formbutton:hover {
+    background: #727272;
+  }
+
+  .form {
+    border-radius: 5px;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    padding: 4rem 2.5rem;
+    width: 65%;
+    background: #FDFDFD;
+    box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
+  }
+
+  .error_box {
+    background: #FFEEEE;
+    border-radius: 5px;
+
+    margin: auto;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    padding: 1rem 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .box {
+    height:2rem;
+    width: 100%;
+    text-align: center;
+    border-radius: 5px;
+    margin: auto;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 0px;
+    margin-bottom: 1rem;
+  }
+}
+
+textarea,
+textfield {
+  padding: 5px;
+  font-size: 0.95rem;
+  resize: vertical;
+  min-height: 10rem;
+}
+
 .topic {
  padding: 1rem;
  font-size: 3rem;
@@ -707,84 +799,6 @@ nav {
  height: 2rem;
 }

-
-.contact-email {
-
-  .inputbox {
-    outline: none;
-    height: 3rem;
-    width: 100%;
-    display: block;
-    background: #EFEFEF;
-    color: black;
-    border: 0px solid #505050;
-    border-radius: 5px;
-    transition: 0.3s;
-    margin-top: 0.5rem;
-  }
-
-  :not(textarea) {
-    text-align: center;
-  }
-
-  .inputbox:hover {
-    background: #DEDEDE;
-  }
-
-  .inputbox:focus {
-    background: #CECECE;
-  }
-
-  button {
-    width: 100%;
-    height: 3rem;
-    border-radius: 5px;
-    text-align: center;
-  }
-
-  .formbutton {
-    background: #272727;
-    color: #fff;
-    border: 0px;
-    transition-duration: 300ms;
-    cursor: pointer;
-  }
-
-  .formbutton:hover {
-    background: #727272;
-  }
-
-  .form {
-    border-radius: 5px;
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-    padding: 4rem 2.5rem;
-    width: 65%;
-    background: #FDFDFD;
-    box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
-  }
-
-  .error_box {
-    background: #FFEEEE;
-    border-radius: 5px;
-
-    margin: auto;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    padding: 1rem 1rem;
-    margin-bottom: 1.5rem;
-  }
-}
-
-textarea,
-textfield {
-  padding: 5px;
-  font-size: 0.95rem;
-}
-
-
@media screen and (width >=1180px) and (width<=1690px) {
  /*if(width<1620px&&width>=1125px)*/

--- a/assets/css/old.css
+++ b/assets/css/old.css
@@ -576,6 +576,91 @@ nav .dropdown {
  background-color: #ddd;
 }

+
+.contact-email .inputbox {
+  outline: none;
+  height: 3rem;
+  width: 100%;
+  display: block;
+  background: #efefef;
+  color: black;
+  border: 0px solid #505050;
+  border-radius: 5px;
+  transition: 0.3s;
+  margin-top: 0.5rem;
+}
+
+.contact-email :not(textarea) {
+  text-align: center;
+}
+
+.contact-email .inputbox:hover {
+  background: #dedede;
+}
+
+.contact-email .inputbox:focus {
+  background: #cecece;
+}
+
+.contact-email button {
+  width: 100%;
+  height: 3rem;
+  border-radius: 5px;
+  text-align: center;
+}
+
+.contact-email .formbutton {
+  background: #272727;
+  color: #fff;
+  border: 0px;
+  transition-duration: 300ms;
+  cursor: pointer;
+}
+
+.contact-email .formbutton:hover {
+  background: #727272;
+}
+
+.contact-email .form {
+  border-radius: 5px;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  padding: 4rem 2.5rem;
+  width: 65%;
+  background: #fdfdfd;
+  box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
+}
+
+.contact-email .error_box {
+  background: #fee;
+  border-radius: 5px;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 1rem 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.contact-email .box {
+  height: 2rem;
+  width: 100%;
+  text-align: center;
+  border-radius: 5px;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0px;
+  margin-bottom: 1rem;
+}
+
+textarea,
+textfield {
+  padding: 5px;
+  font-size: 0.95rem;
+}
+
 .topic {
  padding: 1rem;
  font-size: 3rem;
@@ -696,78 +781,6 @@ nav .dropdown {
  height: 2rem;
 }

-.contact-email .inputbox {
-  outline: none;
-  height: 3rem;
-  width: 100%;
-  display: block;
-  background: #efefef;
-  color: black;
-  border: 0px solid #505050;
-  border-radius: 5px;
-  transition: 0.3s;
-  margin-top: 0.5rem;
-}
-
-.contact-email :not(textarea) {
-  text-align: center;
-}
-
-.contact-email .inputbox:hover {
-  background: #dedede;
-}
-
-.contact-email .inputbox:focus {
-  background: #cecece;
-}
-
-.contact-email button {
-  width: 100%;
-  height: 3rem;
-  border-radius: 5px;
-  text-align: center;
-}
-
-.contact-email .formbutton {
-  background: #272727;
-  color: #fff;
-  border: 0px;
-  transition-duration: 300ms;
-  cursor: pointer;
-}
-
-.contact-email .formbutton:hover {
-  background: #727272;
-}
-
-.contact-email .form {
-  border-radius: 5px;
-  align-items: center;
-  justify-content: center;
-  margin: auto;
-  padding: 4rem 2.5rem;
-  width: 65%;
-  background: #fdfdfd;
-  box-shadow: rgba(50, 50, 50, 0.1) 0px 4px 12px;
-}
-
-.contact-email .error_box {
-  background: #fee;
-  border-radius: 5px;
-  margin: auto;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  padding: 1rem 1rem;
-  margin-bottom: 1.5rem;
-}
-
-textarea,
-textfield {
-  padding: 5px;
-  font-size: 0.95rem;
-}
-
@media screen and (width >=1180px) and (width<=1690px) {

  /*if(width<1620px&&width>=1125px)*/
--- a/assets/js/mail.js
+++ b/assets/js/mail.js
@@ -0,0 +1,50 @@
+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);
+
+const   form = document.getElementById("mail-form"),
+        nameInput = document.getElementById("name"),
+        emailInput = document.getElementById("email"),
+        subjectInput = document.getElementById("subject"),
+        messageInput = document.getElementById("message"),
+        statusMessage = document.querySelector(".box");
+
+form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const name = nameInput.value.trim();
+    const email = emailInput.value.trim();
+    const subject = subjectInput.value.trim();
+    const message = messageInput.value.trim();
+
+    if (!name || !email || !subject || !message || 
+        name.length==0 || email.length==0 || subject.length==0 || message.length==0) {
+        statusMessage.textContent = "Please fill in all fields.";
+        statusMessage.style = "background: #FFDCDC";
+        return;
+    }
+
+    try {
+        const { data, error } = await supabase
+            .from("mail")
+            .insert([{ name, email, subject, message }]);
+
+        if (error) {
+            throw error;
+        }
+
+        statusMessage.textContent = "Message sent successfully!";
+        statusMessage.style = "background: #DDF6D2";
+        form.reset();
+    } catch (error) {
+        console.error("Error sending message:", error);
+        statusMessage.textContent = "Error sending message. Please try again.";
+        statusMessage.style = "background: #FFDCDC";
+    }
+});
--- a/contacts/index.html
+++ b/contacts/index.html
@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <title>t404:null | Home</title>
+    <title>t404:null | Contacts</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." />
+
+Here is my contact list. Feel free to contact me in case you need anything in my reach ;)" />
    <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="/assets/js/mail.js" type="module"></script>
  </head>
  <body>
    <nav>
@@ -231,21 +233,20 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
        (Or) Contact me here
      </h1>
      <div class="contact-email">
-        <form method="POST" class="form">
+        <form method="POST" class="form" id="mail-form">
                <label for="name">Subject:</label>
-                <input type="text" name="name" class="inputbox" placeholder="Your Name" required>
+                <input type="text" name="name" id="name" class="inputbox" placeholder="Your Name" required>
                <br>
                <label for="email">Email:</label>
-                <input type="email" name="email" class="inputbox" placeholder="your.email@here.please" autocomplete="email" required>
+                <input type="email" name="email" id="email" class="inputbox" placeholder="your.email@here.please" autocomplete="email" required>
                <br>
                <label for="subject">Subject:</label>
-                <input type="text" name="subject" class="inputbox" placeholder="Your topic here ;)" required>
+                <input type="text" name="subject" id="subject" class="inputbox" placeholder="Your topic here ;)" required>
                <br>
                <label for="message">Message:</label>
-                <textarea type="text" name="message" class="inputbox" placeholder="Message here." required></textarea>
+                <textarea type="text" name="message" id="message" class="inputbox" placeholder="Message here." required></textarea>
                <br>
-                <br>
-                <!-- div class="error_box" /div-->
+                <div class="box"></div>
                <button type="submit" class="formbutton">Submit</button>
          </form>
      </div>
--- a/song_usage_terms/index.html
+++ b/song_usage_terms/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <title>t404:null | Home</title>
+    <title>t404:null | Usage of my song(s) / track(s)</title>
    <meta name="description" content="Hello there! Please be friendly and read this ”terms of using my songs” before using my(t404:null's) song for any purposes." />
    <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" />