luke-else/luke-else.co.uk
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

CHORE: Starting to get to work with changing some of the old formatting over to tailwind config

Browse Source
This commit is contained in:
Luke Else
2025-05-21 22:45:18 +01:00
parent fc642a4ecd
commit 24a7ebf02a
28 changed files with 118 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/routes/contact/+page.svelte
View File

@@ -1,149 +1,14 @@
<script lang="ts">
import Card from '$lib/components/Cards/Card.svelte';
import { Toast, ToastType } from '$lib/toast';
import { addToast } from '$lib/stores';
import { page } from '$app/stores';
const sent = $page.url.searchParams.get('sent');
if (sent == 'true') {
addToast(
new Toast(
'Thank you! Your E-Mail has been sent. I will reply as soon as possible!',
ToastType.Success,
true,
5000
)
);
}
// Can't use else otherwise the warning will display on load
if (sent == 'false') {
addToast(
new Toast(
'Sorry, your E-Mail could not be sent... Please try again later!',
ToastType.Error,
true,
5000
)
);
}
import { toasts } from 'svelte-toasts';
</script>
<Card>
<div slot="header">
<h2>Contact</h2>
</div>
<div slot="content">
<form action="https://api.staticforms.xyz/submit" method="post" class="contact-form">
<input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
<!-- Form Items-->
<div class="input-group">
<input type="text" id="name" name="name" required placeholder="Your Name" />
<input type="email" id="email" name="email" required placeholder="Your Email" />
</div>
<div class="input-group">
<input type="text" name="subject" placeholder="Subject" required>
</div>
<div class="input-group">
<textarea id="message" name="message" rows="4" required placeholder="Your Message"></textarea>
</div>
<!-- Hidden Attributes-->
<input type="hidden" name="replyTo" value="@">
<input type="text" name="honeypot" style="display: none;">
<input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
<!-- reCAPTCHA integration -->
<div class="input-group">
<div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>
<div class="input-group">
<button type="submit" class="submit-button">Send Message</button>
</div>
</form>
</div>
<div slot="footer">
<a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
<a href="mailto:contact@luke-else.co.uk">E-Mail</a>
</div>
</Card>
<style>
/* Contact form styling */
.contact-form {
background: none;
padding: 1rem;
width: 80%;
display: flex;
flex-direction: column;
gap: 1rem;
transition: all 0.3s ease;
}
/* Input groups */
.input-group {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
}
/* Input fields and textarea */
.contact-form input,
.contact-form textarea {
padding: 0.8rem 1rem;
border: 1px solid var(--fg);
border-radius: 0.5rem;
background: var(--input);
color: var(--fg);
font-size: 1rem;
transition: border-color 0.3s ease, background 0.3s ease;
}
.contact-form button {
border: 1px solid var(--fg);
width: 60%;
}
.contact-form textarea {
width: 100%;
min-width: none;
resize: vertical;
min-height: fit-content;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: var(--glow);
outline: none;
}
/* Submit button */
.submit-button {
padding: 0.8rem 1rem;
background: var(--accent);
color: var(--fg);
border: none;
border-radius: 0.5rem;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.submit-button:hover {
background: var(--link);
color: var(--input);
}
.g-recaptcha {
width: fit-content;
overflow: hidden;
}
</style>
<div style="display: none;">
{toasts.add({
title: 'Warning',
description: 'This page is under construction',
duration: 0,
type: 'warning',
placement: 'center-center',
showProgress: true
})}
</div>