From c32cccf3c3e828c30207188b4fc348faab465bb4 Mon Sep 17 00:00:00 2001
From: Chris Cochrun <chris@cochrun.xyz>
Date: Wed, 21 May 2025 14:42:24 -0500
Subject: [PATCH] better styling

---
 content/camp-form.md                      |  2 +-
 content/camp-health-form.md               |  1 +
 content/contact.md                        |  3 +-
 content/health-form.md                    |  1 +
 content/local-trip-form.md                |  1 +
 content/mt-church-form.md                 |  2 +-
 content/mt-form.md                        |  2 +-
 content/mt-health-form.md                 |  2 +-
 content/mt-parent-form.md                 |  2 +-
 content/mt-teacher-form.md                |  2 +-
 content/thankyou.md                       |  2 +-
 static/css/main.css                       | 79 +++++++++++++++++++
 templates/section.html                    |  4 +-
 templates/shortcodes/button.html          |  4 +-
 templates/shortcodes/contact_form.html    | 93 +++++++++++++++++++++++
 templates/shortcodes/floating_button.html |  2 +-
 templates/shortcodes/pt.html              |  2 +-
 17 files changed, 190 insertions(+), 14 deletions(-)
 create mode 100644 templates/shortcodes/contact_form.html

diff --git a/content/camp-form.md b/content/camp-form.md
index 27f7741..95692b9 100644
--- a/content/camp-form.md
+++ b/content/camp-form.md
@@ -1,7 +1,7 @@
 ---
 title: "Camp Form"
 date: 2024-12-12
-
+template: "simple_page.html"
 ---
 
 <!-- We are currently working on updating the form!! Check back soon to get signed up for camp!! -->
diff --git a/content/camp-health-form.md b/content/camp-health-form.md
index f1aa54a..d1fa4b0 100644
--- a/content/camp-health-form.md
+++ b/content/camp-health-form.md
@@ -1,5 +1,6 @@
 ---
 title: "Camp Health Form"
+template: "simple_page.html"
 ---
 
 > You will need to fill out this health form in order to finish your camp form.
diff --git a/content/contact.md b/content/contact.md
index 2deb6f8..142fa83 100644
--- a/content/contact.md
+++ b/content/contact.md
@@ -3,10 +3,11 @@ title: Contact
 featured_image: ''
 description: We'd love to hear from you
 date: 2014-10-18
+template: "simple_page.html"
 ---
 
 <!-- Right now our contact form is broken, you can email any of the staff by using their first name followed by @tfcconnection.org. Sorry for the inconvenience. -->
 
 We would love to get into contact with you! Just put in your name, a message and your email address and we will get right back to you! You can also email a specific staff member here if you'd like to make sure the message gets directly to them! If you don't know who to email, just leave it blank!
 
-{{< contact-form  >}}
+{{ contact_form()  }}
diff --git a/content/health-form.md b/content/health-form.md
index 7083cae..7245135 100644
--- a/content/health-form.md
+++ b/content/health-form.md
@@ -1,5 +1,6 @@
 ---
 title: "Health Form"
+template: "simple_page.html"
 ---
 Here you can fill out your health form in order to go to larger TFC events like ice skating, camp, SPLASH, and mission trip! If you've already filled out a form in May, then you won't need another until the next May! The current active health form is from {{< health-form-year >}}
 
diff --git a/content/local-trip-form.md b/content/local-trip-form.md
index 6eb9199..bc1e168 100644
--- a/content/local-trip-form.md
+++ b/content/local-trip-form.md
@@ -2,6 +2,7 @@
 title: Local Mission Trip Form
 layout: simple
 sharingLinks: false
+template: "simple_page.html"
 ---
 
 If you'd like to still do a mission trip of some kind, but the other dates do not work for you or you do not feel ready for a longer trip, then this is the trip for you! Sign up here now!
diff --git a/content/mt-church-form.md b/content/mt-church-form.md
index 62cf430..3e8c053 100644
--- a/content/mt-church-form.md
+++ b/content/mt-church-form.md
@@ -2,7 +2,7 @@
 title: "Mission Trip Church Form"
 date: 2022-11-11T15:03:48-06:00
 omit_header_text: true
-layout: simple
+template: "simple_page.html"
 sharingLinks: false
 ---
 
diff --git a/content/mt-form.md b/content/mt-form.md
index cb8a8d7..778792c 100644
--- a/content/mt-form.md
+++ b/content/mt-form.md
@@ -3,7 +3,7 @@ title: Mission Trip Form
 omit_header_text: true
 layout: simple
 sharingLinks: false
-
+template: "simple_page.html"
 ---
 
 <!-- Mission Trip applications are closed until next year. -->
diff --git a/content/mt-health-form.md b/content/mt-health-form.md
index 5b3f022..a16eb48 100644
--- a/content/mt-health-form.md
+++ b/content/mt-health-form.md
@@ -2,8 +2,8 @@
 title: "Mission Trip Health Form"
 date: 2022-12-31T14:27:16-06:00
 omit_header_text: true
-layout: simple
 sharingLinks: false
+template: "simple_page.html"
 ---
 
 > You will need to fill out this health form in order to finish your mission trip application.
diff --git a/content/mt-parent-form.md b/content/mt-parent-form.md
index dcbc866..4742e49 100644
--- a/content/mt-parent-form.md
+++ b/content/mt-parent-form.md
@@ -2,8 +2,8 @@
 title: "Mission Trip Parent Form"
 date: 2022-11-11T14:47:35-06:00
 omit_header_text: true
-layout: simple
 sharingLinks: false
+template: "simple_page.html"
 ---
 
 <!-- Mission Trip applications are closed until next year. -->
diff --git a/content/mt-teacher-form.md b/content/mt-teacher-form.md
index 7f2e9d1..3691538 100644
--- a/content/mt-teacher-form.md
+++ b/content/mt-teacher-form.md
@@ -2,7 +2,7 @@
 title: "Mission Trip Teacher Form"
 date: 2022-11-11T15:03:43-06:00
 omit_header_text: true
-layout: simple
+template: "simple_page.html"
 sharingLinks: false
 ---
 
diff --git a/content/thankyou.md b/content/thankyou.md
index 4d64b25..c18e45a 100644
--- a/content/thankyou.md
+++ b/content/thankyou.md
@@ -2,8 +2,8 @@
 title: "Thank You"
 date: 2022-12-09T14:33:33-06:00
 omit_header_text: true
-layout: simple
 sharingLinks: false
+template: "simple_page.html"
 ---
 Thanks for filling out our form!
 
diff --git a/static/css/main.css b/static/css/main.css
index e1a3b29..7188fb4 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -463,6 +463,9 @@
   .h-40 {
     height: calc(var(--spacing) * 40);
   }
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
@@ -594,12 +597,24 @@
   .flex-wrap {
     flex-wrap: wrap;
   }
+  .place-content-center {
+    place-content: center;
+  }
+  .place-content-end {
+    place-content: end;
+  }
   .content-center {
     align-content: center;
   }
+  .content-end {
+    align-content: flex-end;
+  }
   .items-center {
     align-items: center;
   }
+  .items-end {
+    align-items: flex-end;
+  }
   .justify-between {
     justify-content: space-between;
   }
@@ -761,6 +776,9 @@
   .bg-gray-500 {
     background-color: var(--color-gray-500);
   }
+  .bg-gray-600 {
+    background-color: var(--color-gray-600);
+  }
   .bg-gray-700 {
     background-color: var(--color-gray-700);
   }
@@ -782,6 +800,12 @@
   .fill-current {
     fill: currentcolor;
   }
+  .object-contain {
+    object-fit: contain;
+  }
+  .object-cover {
+    object-fit: cover;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -1005,6 +1029,13 @@
   .ring-black {
     --tw-ring-color: var(--color-black);
   }
+  .outline-2 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+  .outline-blue-600 {
+    outline-color: var(--color-blue-600);
+  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -1177,6 +1208,13 @@
       }
     }
   }
+  .hover\:\!bg-gray-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-500) !important;
+      }
+    }
+  }
   .hover\:bg-blue-900 {
     &:hover {
       @media (hover: hover) {
@@ -1276,6 +1314,13 @@
       }
     }
   }
+  .hover\:\!outline-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        outline-color: var(--color-blue-500) !important;
+      }
+    }
+  }
   .hover\:file\:ring-2 {
     &:hover {
       @media (hover: hover) {
@@ -1632,6 +1677,16 @@
       color: var(--color-white);
     }
   }
+  .dark\:outline-blue-500 {
+    @media (prefers-color-scheme: dark) {
+      outline-color: var(--color-blue-500);
+    }
+  }
+  .dark\:outline-blue-800 {
+    @media (prefers-color-scheme: dark) {
+      outline-color: var(--color-blue-800);
+    }
+  }
   .dark\:hover\:\!bg-blue-700 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -1641,6 +1696,15 @@
       }
     }
   }
+  .dark\:hover\:\!bg-gray-700 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-700) !important;
+        }
+      }
+    }
+  }
   .dark\:hover\:bg-gray-600 {
     @media (prefers-color-scheme: dark) {
       &:hover {
@@ -1659,6 +1723,15 @@
       }
     }
   }
+  .dark\:hover\:\!outline-blue-700 {
+    @media (prefers-color-scheme: dark) {
+      &:hover {
+        @media (hover: hover) {
+          outline-color: var(--color-blue-700) !important;
+        }
+      }
+    }
+  }
   .\[\&\>\*\]\:py-4 {
     &>* {
       padding-block: calc(var(--spacing) * 4);
@@ -1840,6 +1913,11 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1935,6 +2013,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
diff --git a/templates/section.html b/templates/section.html
index 6d9ca72..52636cc 100644
--- a/templates/section.html
+++ b/templates/section.html
@@ -36,11 +36,11 @@
       {% else %}
       {% set resized = "" %}
       {% endif %}
-      <div class="flex flex-wrap space-x-4 border border-2 border-gray-200 dark:border-black rounded-xl p-5 shadow-xl transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800 cursor-pointer" onclick='location.href="{{ page.permalink }}";'>
+      <div class="flex flex-wrap space-x-4 border border-2 border-gray-200 dark:border-black rounded-xl p-5 shadow-xl transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800 place-content-center cursor-pointer" onclick='location.href="{{ page.permalink }}";'>
 
           <!-- Image -->
           {% if resized %}
-          <div class="flex-1 rounded-lg content-center">
+          <div class="flex-1 rounded-lg place-content-center">
               <img class="rounded-lg" src="{{ resized.url }}"/>
           </div>
           {% else %}
diff --git a/templates/shortcodes/button.html b/templates/shortcodes/button.html
index dca163f..fc38cae 100644
--- a/templates/shortcodes/button.html
+++ b/templates/shortcodes/button.html
@@ -1,8 +1,8 @@
 <a
-  class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
+  class="rounded-lg outline-2 text-white bg-blue-600 outline-blue-600 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700"
   {% if href %}href="{{ href }}"{% endif %}
   {% if target %}target="{{ target }}"{% endif %}
   role="button"
 >
-  {{ body }}
+    <i>{{ body }}</i>
 </a>
diff --git a/templates/shortcodes/contact_form.html b/templates/shortcodes/contact_form.html
new file mode 100644
index 0000000..a3a8763
--- /dev/null
+++ b/templates/shortcodes/contact_form.html
@@ -0,0 +1,93 @@
+{% set formClasses = "bg-gray-500 text-gray-50 placeholder-gray-300 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent m-2 p-3 rounded-lg hover:bg-gray-600 checked:text-gray-500" -%}
+{% set requiredField = "<span class='inline-block text-[#f39] text-sm align-super'>* required</span>" -%}
+
+<script>
+ function submitForm(e) {
+     e.preventDefault();
+     const form = document.getElementById('form');
+     const data = new FormData(form);
+
+     if (data.get("email") == "") {
+         document.getElementById('warning-email').style.visibility = 'visible';
+         document.getElementById('warning-email').style.height = '';
+         document.getElementById('warning-email').style.margin = '';
+         return false;
+     } else {
+         document.getElementById('warning-email').style.visibility = 'hidden';
+         document.getElementById('warning-email').style.height = '0';
+         document.getElementById('warning-email').style.margin = '0';
+     }
+
+     var xhr = new XMLHttpRequest();
+     xhr.onreadystatechange = function() {
+         if (this.readyState == 4 && this.status == 200) {
+             window.location.href = '/thankyou/';
+
+         }
+     };
+     xhr.open("POST", "/contact");
+     xhr.send(data);
+     console.log(data);
+ }
+
+ function process() {
+     /* document.getElementById('mt-form').hidden = false */
+     document.getElementById('warning-email').style.visibility = 'hidden';
+     document.getElementById('warning-email').style.height = '0';
+     document.getElementById('warning-email').style.margin = '0';
+ }
+ document.addEventListener('DOMContentLoaded', process);
+</script>
+
+<div id="mt-form" class="form text-lg w-full">
+    <form id='form' 
+          hx-post="/api/contact-form"
+          hx-encoding="multipart/form-data"
+          autocomplete="on"
+          method="post"
+          target="_parent"
+          class="w-full items-center flex flex-wrap">
+        <h3 class="basis-full">Contact Form</h3>
+        <div class="basis-full flex flex-wrap my-4">
+            <label for="firstname" class="basis-full">What is your name? <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
+            <br/>
+            <input type="text" id="name" name="name"
+                   placeholder="Name" class="flex-1 form-input {{ formClasses }}">
+        </div>
+
+        <label for="email" class="basis-full">Your Email <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
+        <input type="email" id="email" name="email"
+               pattern="^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$"
+               placeholder="bob@frank.xyz"
+               class="basis-full form-input {{ formClasses }}">
+
+        <label for="staff" class="basis-full mt-4">Would you like to email a specific staff member? <span class='inline-block text-[#f39] text-sm align-sub'>leave on "any" if you don't need someone specific.</span></label>
+        <select id="staff" name="staff" class="mb-4 flex-auto form-select {{ formClasses }}">
+            <option value="tfc@tfcconnection.org">Any</option>
+            <option value="ethan@tfcconnection.org">Ethan Rose</option>
+            <option value="lavonne@tfcconnection.org">Lavonne Ponstein</option>
+            <option value="brian@tfcconnection.org">Brian Fischer</option>
+            <option value="janice@tfcconnection.org">Janice Lundquist</option>
+            <option value="april@tfcconnection.org">April Teves</option>
+            <option value="chris@tfcconnection.org">Chris Cochrun</option>
+            <option value="rob@tfcconnection.org">Rob Lewis</option>
+            <option value="lewis@tfcconnection.org">Lewis Smith</option>
+            <option value="billy@tfcconnection.org">Billy Cayou</option>
+            <option value="dani@tfcconnection.org">Dani Rouse</option>
+        </select>
+
+        <label for="message" class="basis-full mt-4">Message <span class='inline-block text-[#f39] text-sm align-sub'>* required</span></label>
+        <textarea type="message" id="message" name="message"
+                  class="basis-full form-input h-48 {{ formClasses }}"></textarea>
+        <div class="basis-full w-full mt-8">
+            <button type="submit" class="float-right rounded-lg outline-2 text-white bg-blue-600 outline-blue-600 px-4 py-2 text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 cursor-pointer"><i>Submit</i></button>
+        </div>
+
+        <div id="warning-email" class="basis-full mt-10 flex px-4 py-3 rounded-lg bg-[#ef4444] dark:bg-[#ef4444]">
+            <span class="text-[#fca5a5] ltr:pr-3 rtl:pl-3 content-right float-right">
+                Make sure you have included an email so we can contact you.
+            </span>
+        </div>
+
+    </form>
+</div>
diff --git a/templates/shortcodes/floating_button.html b/templates/shortcodes/floating_button.html
index 73b0154..8fb6463 100644
--- a/templates/shortcodes/floating_button.html
+++ b/templates/shortcodes/floating_button.html
@@ -6,7 +6,7 @@
  }
 </script>
 
-<button class="!rounded-lg bg-blue-600 px-4 py-2 !text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 fixed bottom-4 right-8" type="button" name="floatbutt" onclick="floatButton()" id="floatbutt">
+<button class="rounded-lg bg-blue-600 px-4 py-2 !text-neutral !no-underline hover:!bg-blue-500 dark:bg-blue-800 dark:hover:!bg-blue-700 fixed bottom-4 right-8" type="button" name="floatbutt" onclick="floatButton()" id="floatbutt">
     <i>{{ text }}</i> 
     <span class="relative inline-block align-sub size-5 fill-current flex-auto">
         {{ load_data(path="icons/" ~ icon ~ ".svg") | safe }}
diff --git a/templates/shortcodes/pt.html b/templates/shortcodes/pt.html
index 7fbb8ff..fb3f198 100644
--- a/templates/shortcodes/pt.html
+++ b/templates/shortcodes/pt.html
@@ -1,4 +1,4 @@
 
 <div style="display: flex;" class="{% if width %} {{ width }} {% else %} w-full {% endif %}">
-  <iframe class="pt-vid flex-auto {% if aspect %} {{ aspect }} {% else %} aspect-video {% endif %} {% if width %} {{ width }} {% else %} w-24 {% endif %}" sandbox="allow-same-origin allow-scripts allow-popups" src="{{ src }}?warningTitle=0" frameborder="0" allowfullscreen></iframe>
+  <iframe class="pt-vid flex-auto rounded-lg {% if aspect %} {{ aspect }} {% else %} aspect-video {% endif %} {% if width %} {{ width }} {% else %} w-24 {% endif %}" sandbox="allow-same-origin allow-scripts allow-popups" src="{{ src }}?warningTitle=0" frameborder="0" allowfullscreen></iframe>
 </div>