Add contact form route

Author: quantuminformation

js/components/nav.js

@@ -183,6 +183,10 @@ export default (hostComponent) => {
         <span class="icon">🍪</span>
         <span class="text">Cookie popup</span>
       </a>
+      <a href="/contact" title="Contact page">
+        <span class="icon">✉️</span>
+        <span class="text">Contact</span>
+      </a>
       <a href="/web-tutorial" title="Web GPU tutorial">
         <span class="icon">🧮</span>
         <span class="text">Web GPU tutorial</span>
@@ -206,16 +210,16 @@ export default (hostComponent) => {
 
     if (headerBar === 'true' && burgerPx) {
       hostComponent.parentElement.insertAdjacentHTML(
-          'afterbegin',
-          `
+        'afterbegin',
+        `
           <button class="burger-button squarify wireframe border-none" title="Open or close nav menu">
             <svg class="icon" viewBox="0 0 100 80" preserveAspectRatio="xMidYMid meet" width="20" height="20" fill="currentColor">
               <rect width="100" height="20"></rect>
               <rect y="30" width="100" height="20"></rect>
               <rect y="60" width="100" height="20"></rect>
             </svg>
           </button>
-        `
+        `,
       );
 
       burgerButton = hostComponent.parentElement.querySelector('.burger-button');

js/routes/contact.js

@@ -0,0 +1,34 @@
+// File: routes/contact.js
+// Purpose: A simple contact form allowing users to send a message
+
+export default (hostComponent) => {
+  hostComponent.innerHTML = '';
+
+  const indexHTML = `
+    <h1>Get in Touch</h1>
+    <p>I’d love to hear from you! Whether it’s a question, feedback, or just to say hello, drop me a message below and I’ll reply as soon as I can.</p>
+
+    <form
+      action="https://formsubmit.co/2e11f6902fdaf5c68eb3324966b05372"
+      method="POST"
+      class="centered"
+      style="margin-top: 2rem;"
+    >
+      <div>
+        <label for="name">Name</label>
+        <input type="text" id="name" name="name" required>
+      </div>
+      <div>
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" required>
+      </div>
+      <div>
+        <label for="message">Message</label>
+        <textarea id="message" name="message" rows="4" required></textarea>
+      </div>
+      <button type="submit">Send Message</button>
+    </form>
+  `;
+
+  hostComponent.innerHTML = indexHTML;
+};