287 lines
6.7 KiB
HTML
287 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- Add .onion link -->
|
|
<meta http-equiv="onion-location" content="http://w6rshvdkwg3m757xjsk6avsbwphi3znwlvqpnbcchol6h7wxfzyabayd.onion/contact">
|
|
<!-- Encourage indexing -->
|
|
<meta name="robots" content="index, follow">
|
|
|
|
<meta property="og:title" content="Contact | pkrm.dev"/>
|
|
<meta property="og:url" content="https://pkrm.dev/contact"/>
|
|
<meta property="og:type" content="website"/>
|
|
<meta property="og:description" content="Send me a message through this contact form."/>
|
|
|
|
<title>Contact | pkrm.dev</title>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<div class="navbar-left">
|
|
<a href="/">~$ cd /home</a>
|
|
</div>
|
|
|
|
<div class="navbar-right">
|
|
<a href="/about">About</a>
|
|
<a href="/contact">Contact</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container">
|
|
<h1>Contact Me</h1>
|
|
|
|
<form action="/contact" method="POST">
|
|
<input type="text" name="name" placeholder="Name">
|
|
<input type="text" name="email" placeholder="Email">
|
|
<textarea name="message" placeholder="Message"></textarea>
|
|
<input type="submit" value="Submit">
|
|
</form>
|
|
|
|
{% if success %}
|
|
<p class="success-message">Thank you for contacting me. I'll get back soon.</p>
|
|
{% endif %}
|
|
{% if error %}
|
|
<p class="error-message">An error occured, please try again later.</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<footer>PGP Fingerprint: 58B7 6B8B BAB8 794D 21E2 579C 95CD 2E0C 7E32 9F2A</footer>
|
|
</body>
|
|
</html>
|
|
|
|
<style>
|
|
/* Import Montserrat font */
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700&display=swap');
|
|
|
|
* {
|
|
font-family: 'Montserrat', sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #242528;
|
|
color: #9F9FAA;
|
|
}
|
|
|
|
|
|
/* Navbar styles */
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 2rem;
|
|
background-color: #212223;
|
|
color: #9F9FAA;
|
|
}
|
|
|
|
nav a {
|
|
text-decoration: none;
|
|
color: #9F9FAA;
|
|
font-size: 1.5rem;
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
nav a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.navbar-left {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-left: 15%;
|
|
}
|
|
|
|
.navbar-right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin-right: 15%;
|
|
}
|
|
|
|
/* Navbar media query for mobile */
|
|
@media only screen and (max-width: 600px) {
|
|
nav a {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.navbar-left {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.navbar-right {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
.navbar-right a {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
|
|
/* Container styles */
|
|
.container {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 1.75rem;
|
|
text-align: center;
|
|
border: 1px solid #9F9FAA;
|
|
border-radius: 5px;
|
|
padding: 2rem;
|
|
height: 450px;
|
|
width: 550px;
|
|
}
|
|
|
|
.container h1 {
|
|
margin: 0 0 1rem 0;
|
|
}
|
|
|
|
/* Continer media query for mobile */
|
|
@media only screen and (max-width: 600px) {
|
|
.container {
|
|
font-size: 1.25rem;
|
|
width: 250px;
|
|
}
|
|
|
|
.container h1 {
|
|
margin: 0 0 2rem 0;
|
|
}
|
|
}
|
|
|
|
/* Form styles */
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
input {
|
|
margin: 0.75rem 0;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid #9F9FAA;
|
|
border-radius: 5px;
|
|
background-color: #242528;
|
|
color: #9F9FAA;
|
|
font-size: 1.25rem;
|
|
width: 500px;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
width: calc(500px + 2rem);
|
|
cursor: pointer;
|
|
}
|
|
|
|
textarea {
|
|
margin: 0.75rem 0;
|
|
padding: 0.5rem 1rem;
|
|
border: 1px solid #9F9FAA;
|
|
border-radius: 5px;
|
|
background-color: #242528;
|
|
color: #9F9FAA;
|
|
font-size: 1.25rem;
|
|
height: 100px;
|
|
width: 500px;
|
|
resize: none;
|
|
}
|
|
|
|
/* Form media query for mobile */
|
|
@media only screen and (max-width: 600px) {
|
|
input {
|
|
width: 250px;
|
|
}
|
|
|
|
input[type="submit"] {
|
|
width: calc(250px + 2rem);
|
|
}
|
|
|
|
textarea {
|
|
width: 250px;
|
|
}
|
|
}
|
|
|
|
/* Success/Error messages */
|
|
.success-message {
|
|
color: #71A172;
|
|
font-size: 1.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.error-message {
|
|
color: #B16161;
|
|
font-size: 1.25rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
|
|
/* Footer styles */
|
|
footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
width: 90vw;
|
|
}
|
|
|
|
/* Footer media query for mobile */
|
|
@media only screen and (max-width: 600px) {
|
|
footer {
|
|
bottom: -2rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Get the form
|
|
const form = document.querySelector('form');
|
|
|
|
// Get the inputs
|
|
const nameInput = document.querySelector('input[name="name"]');
|
|
const email = document.querySelector('input[name="email"]');
|
|
const message = document.querySelector('textarea[name="message"]');
|
|
|
|
// For each input, if it is empty, make the border red
|
|
form.addEventListener('submit', (e) => {
|
|
if (nameInput.value === '') {
|
|
e.preventDefault();
|
|
nameInput.style.borderColor = '#B16161';
|
|
}
|
|
|
|
if (email.value === '') {
|
|
e.preventDefault();
|
|
email.style.borderColor = '#B16161';
|
|
}
|
|
|
|
if (message.value === '') {
|
|
e.preventDefault();
|
|
message.style.borderColor = '#B16161';
|
|
}
|
|
});
|
|
|
|
// If the user starts typing in an input, make the border grey
|
|
nameInput.addEventListener('input', () => {
|
|
nameInput.style.borderColor = '#9F9FAA';
|
|
});
|
|
|
|
email.addEventListener('input', () => {
|
|
email.style.borderColor = '#9F9FAA';
|
|
});
|
|
|
|
message.addEventListener('input', () => {
|
|
message.style.borderColor = '#9F9FAA';
|
|
});
|
|
|
|
// On form submit, make sure all inputs are filled out
|
|
form.addEventListener('submit', (e) => {
|
|
if (nameInput.value === '' || email.value === '' || message.value === '') {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
</script> |