Site Update

Added contact formular
Some Descriptions / Titles update

Terms of Usage (ToU) update.
Minor Copyright (C) update.
This commit is contained in:
t404owo
2025-10-17 04:18:23 +02:00
committed by GitHub
7 changed files with 240 additions and 162 deletions

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>t404:null | Home</title> <title>t404:null | About Me</title>
<meta <meta
name="description" name="description"
content="Hello there! I'm t404:null (a.k.a t404owo). content="Hello there! I'm t404:null (a.k.a t404owo).

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>t404:null | Home</title> <title>t404:null | Activities / Previous Events</title>
<meta <meta
name="description" name="description"
content="Hello there! I'm t404:null (a.k.a t404owo). content="Hello there! I'm t404:null (a.k.a t404owo).

View File

@@ -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 { .topic {
padding: 1rem; padding: 1rem;
font-size: 3rem; font-size: 3rem;
@@ -707,84 +799,6 @@ nav {
height: 2rem; 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) { @media screen and (width >=1180px) and (width<=1690px) {
/*if(width<1620px&&width>=1125px)*/ /*if(width<1620px&&width>=1125px)*/

View File

@@ -576,6 +576,91 @@ nav .dropdown {
background-color: #ddd; 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 { .topic {
padding: 1rem; padding: 1rem;
font-size: 3rem; font-size: 3rem;
@@ -696,78 +781,6 @@ nav .dropdown {
height: 2rem; 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) { @media screen and (width >=1180px) and (width<=1690px) {
/*if(width<1620px&&width>=1125px)*/ /*if(width<1620px&&width>=1125px)*/

50
assets/js/mail.js Normal file
View File

@@ -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";
}
});

View File

@@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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). <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" /> <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" /> <meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="/assets/css/main.css" /> <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
<script src="/assets/js/mail.js" type="module"></script>
</head> </head>
<body> <body>
<nav> <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 (Or) Contact me here
</h1> </h1>
<div class="contact-email"> <div class="contact-email">
<form method="POST" class="form"> <form method="POST" class="form" id="mail-form">
<label for="name">Subject:</label> <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> <br>
<label for="email">Email:</label> <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> <br>
<label for="subject">Subject:</label> <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> <br>
<label for="message">Message:</label> <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>
<br> <div class="box"></div>
<!-- div class="error_box" /div-->
<button type="submit" class="formbutton">Submit</button> <button type="submit" class="formbutton">Submit</button>
</form> </form>
</div> </div>

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <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." /> <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" /> <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" /> <meta charset="UTF-8" />