mirror of
https://github.com/t404owo/t404null.git
synced 2025-12-12 18:08:47 +00:00
Site Update
Added contact formular Some Descriptions / Titles update Terms of Usage (ToU) update. Minor Copyright (C) update.
This commit is contained in:
@@ -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).
|
||||||
|
|||||||
@@ -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).
|
||||||
|
|||||||
@@ -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)*/
|
||||||
|
|
||||||
|
|||||||
@@ -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
50
assets/js/mail.js
Normal 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";
|
||||||
|
}
|
||||||
|
});
|
||||||
@@ -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>
|
||||||
|
|||||||
@@ -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" />
|
||||||
|
|||||||
Reference in New Issue
Block a user