104 lines
3.5 KiB
HTML
104 lines
3.5 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://o2o2o2yfrueii33hxjja3foegbkjckxg2fy4vr4y4pqvnk2oxqknvjqd.onion/contact">
|
|
<!-- Discourage indexing -->
|
|
<meta name="robots" content="noindex, nofollow, noarchive">
|
|
|
|
<!-- Add altcha.js file -->
|
|
<script async defer src="{{ url_for('static', filename='js/altcha.js') }}" type="module"></script>
|
|
|
|
<link rel="stylesheet", href="{{ url_for('static', filename='css/contact.css') }}">
|
|
<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="/">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">
|
|
<!-- Add altcha widget which auto verifies on page load and is invisible -->
|
|
<altcha-widget challengeurl="/altcha-challenge" auto="onload" style="display: none; opacity: 0;"></altcha-widget>
|
|
</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: FD5C 7FFF 860B 6E97 7049 E27E 505E D36F C12B 5D5E</footer>
|
|
</body>
|
|
</html>
|
|
|
|
<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> |