From 93fde2410b807912f7eafd614e7bd00182bab9fc Mon Sep 17 00:00:00 2001
From: Luke Else <mail@luke-else.co.uk>
Date: Fri, 29 Sep 2023 14:41:37 +0100
Subject: [PATCH] Completed contact form and improved styling on cards

---
 .gitignore                      |  1 +
 .vscode/settings.json           | 15 ---------
 src/Card.svelte                 |  5 +--
 src/main.svelte                 |  2 --
 src/routes/contact/+page.svelte | 58 ++++++++++++++++++++++++---------
 5 files changed, 47 insertions(+), 34 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.gitignore b/.gitignore
index 6635cf5..ee1f68a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+.vscode
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 3ea61bc..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "spellright.language": [
-        "en"
-    ],
-    "spellright.documentTypes": [
-        "markdown",
-        "latex",
-        "plaintext"
-    ],
-    "spellright.parserByClass": {
-        "svelte": {
-            "parser": "plain"
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/Card.svelte b/src/Card.svelte
index 35eb151..4e70aa1 100644
--- a/src/Card.svelte
+++ b/src/Card.svelte
@@ -15,7 +15,7 @@
         justify-content: space-between;
         flex-wrap: wrap;
         flex: 2 1 20%;
-        min-width: 10em;
+        min-width: 8em;
         padding: .5em 2.5em 2em 2.5em;
         background: var(--bg-grad);
         border-radius: .5em;
@@ -44,7 +44,8 @@
     .card .card-footer :global(div){
         margin-bottom: 1em;
         display: flex;
-        gap: 1.5em;
+        gap: 1em;
+        max-width: 100%;
         justify-content: space-between;
     }
 </style>
diff --git a/src/main.svelte b/src/main.svelte
index 0d8a94f..9ea76cb 100644
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -78,7 +78,6 @@
     /* Skills Cards CSS */
     .skills-container {
         max-width: 90%;
-        padding: 0em 2em;
         margin: auto;
     }
 
@@ -88,7 +87,6 @@
         flex-direction: row;
         gap: 3em 3em;
         padding: 3em 1em 2em 0em;
-        list-style: none;
         transition: all 0.2s;
     }
 
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 4bbe430..cd29431 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,25 +1,38 @@
 <script lang="ts">
     import Card from '../../Card.svelte';
+    import { Toast, ToastType } from "$lib/toast";
+    import { addToast } from "$lib/store";
+
+    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));
+    }
+    if (sent == "false") {
+        addToast(new Toast("Sorry, your E-Mail could not be sent... Please try again later!", ToastType.Error, true, 5000));
+    }
 </script>
 
 <style>
     form {
         display: flex;
-        flex: 2 1 20%;
+        flex-wrap: wrap;
+        flex: 2 1;
         align-items: center;
         margin: 1em;
         gap: 1em 3em;
     }
     
     input, textarea {
-        padding: 1em;
+        padding: 1em 0em 1em 1em;
         background-color: var(--bg-grad);
         border: 0; 
         outline: 0;
         border-radius: 8px;
         resize: none;
         min-width: 100%;
-        transition: all 0.2s;
+        transition: all 0.15s;
     
         &:focus, &:hover{
             box-shadow: .2em .2em .2em var(--red);
@@ -30,12 +43,22 @@
         min-height: 10em;
     }
 
-  .container {
-    display: flex;
-    flex-direction: column;
-    gap: 1em 1em;
-    width: 100%;
-  }
+    .container {
+        display: flex;
+        flex: 2 1 5rem;
+        flex-direction: column;
+        gap: 1em 1em;
+        width: 100%;
+    }
+
+    .button {
+        color: var(--fg);
+        background-color: var(--bg-2);
+        box-shadow: .1em .1em .1em var(--purple);    
+    }
+    .button:hover {
+        box-shadow: .3em .3em .3em var(--green);    
+    }
 </style>
 
 <Card>
@@ -43,15 +66,20 @@
         <h2>Contact</h2>
     </div>
     <div slot="content">
-        <form>
+        <form action="https://api.staticforms.xyz/submit" method="post">
             <div class="container">
-                <input type="text" id="input-name" placeholder="Name">
-                <input type="email" id="input-email" placeholder="Email address">
-                <input type="text" id="input-subject" placeholder="Subject">
+                <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
+                <input type="text" name="name" placeholder="Name" required>
+                <input type="text" name="email" placeholder="Email address" required>
+                <input type="hidden" name="replyTo" value="@">
+                <input type="text" name="subject" placeholder="Subject" required>
+                <input type="text" name="honeypot" style="display: none;"> 
             </div>
             <div class="container">
-                <textarea name="message" id="input-message" placeholder="Message"></textarea>
-            </div> 
+                <textarea name="message" id="message" placeholder="Message" required></textarea>
+            </div>
+            <input class="button" type="submit" value="Send" />
+            <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
         </form>
     </div>
     <div slot="footer">