ProjectSegfault/website
4
2
Fork 1
mirror of https://github.com/ProjectSegfault/website.git synced 2025-02-05 16:40:18 +05:30
Code Issues Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Akis 2022-07-29 14:13:45 +03:00
parent 48eae47254
commit 8cfcdaec09
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
2 changed files with 98 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
src/lib/ContactForm.svelte
View File

@ -1,96 +1,114 @@
<script lang="ts"> <script lang="ts">
import IconLock from '~icons/fa6-solid/lock'; import IconLock from "~icons/fa6-solid/lock";
import IconInfo from '~icons/fa6-solid/circle-info'; import IconInfo from "~icons/fa6-solid/circle-info";
import HCaptcha from 'svelte-hcaptcha'; import HCaptcha from "svelte-hcaptcha";
let submit = false; let submit = false;
let showSubmitButton = () => { let showSubmitButton = () => {
submit = !submit; submit = !submit;
} };
</script> </script>
<form action="https://segfautilities.projectsegfau.lt/api/form" method="POST" id="contact-form"> <form
<div class="note"> action="https://segfautilities.projectsegfau.lt/api/form"
<IconLock /> method="POST"
<b>Your IP will be logged for anti-abuse measures.</b> id="contact-form"
</div> >
<div class="meta"> <div class="note">
<input type="text" name="email" class="form-textbox" placeholder="Your email" required /> <IconLock />
<select id="commentType" name="commentType" required class="button"> <b>Your IP will be logged for anti-abuse measures.</b>
<option value="" selected disabled>Select a type of comment</option> </div>
<option value="Feedback">Feedback</option> <div class="meta">
<option value="Suggestion">Suggestion</option> <input
<option value="Question">Question</option> type="text"
<option value="Bug">Bug</option> name="email"
</select> class="form-textbox"
</div> placeholder="Your email"
<textarea id="comment" name="message" rows="4" cols="25" required class="form-textbox" placeholder="Your message"></textarea> required
<div class="note"> />
<IconInfo /> <select id="commentType" name="commentType" required class="button">
<b>The submit button will be visible when you complete the Captcha.</b> <option value="" selected disabled>Select a type of comment</option>
</div> <option value="Feedback">Feedback</option>
<HCaptcha <option value="Suggestion">Suggestion</option>
sitekey=67e84266-980c-4050-8a39-142a91928fe8 <option value="Question">Question</option>
theme=dark <option value="Bug">Bug</option>
on:success={showSubmitButton} </select>
/> </div>
{#if submit} <textarea
<input type="submit" value="Submit" class="button" /> id="comment"
{/if} name="message"
rows="4"
cols="25"
required
class="form-textbox"
placeholder="Your message"
/>
<div class="note">
<IconInfo />
<b>The submit button will be visible when you complete the Captcha.</b>
</div>
<HCaptcha
sitekey="67e84266-980c-4050-8a39-142a91928fe8"
theme="dark"
on:success={showSubmitButton}
/>
{#if submit}
<input type="submit" value="Submit" class="button" />
{/if}
</form> </form>
<style> <style>
form { form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
width: fit-content; width: fit-content;
} }
.note { .note {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
} }
.meta { .meta {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
gap: 1rem; gap: 1rem;
} }
.meta > * { .meta > * {
width: 50%; width: 50%;
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
.meta { .meta {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
} }
.meta > * { .meta > * {
width: calc(100% - 1rem); width: calc(100% - 1rem);
} }
.meta > *:nth-child(2) { .meta > *:nth-child(2) {
width: 100%; width: 100%;
} }
} }
.form-textbox { .form-textbox {
background-color: var(--tertiary); background-color: var(--tertiary);
color: var(--text); color: var(--text);
border-radius: 10px; border-radius: 10px;
border: none; border: none;
padding: 0.5rem; padding: 0.5rem;
font-family: 'Comfortaa', sans-serif; font-family: "Comfortaa", sans-serif;
outline: none; outline: none;
} }
.button { .button {
background-color: var(--tertiary); background-color: var(--tertiary);
border: none; border: none;
border-radius: 10px; border-radius: 10px;

1
src/routes/contact.md
View File

@ -12,6 +12,7 @@ description: Do you want to contact us?
{ description } { description }
## Contact Form ## Contact Form
<ContactForm /> <ContactForm />
## Our email ## Our email