contact us and minor fixes

hiddenfigs · Sep 12, 2024 · 3cd14fd · 3cd14fd
1 parent 3553af7
commit 3cd14fd
Show file tree

Hide file tree

Showing 8 changed files with 152 additions and 13 deletions.
diff --git a/content/scientist/Al-Kindi.md b/content/scientist/Al-Kindi.md
@@ -1,5 +1,5 @@
 {
-"title": "name",
+"title": "Al-Kindi",
 "name": "Al-Kindi",
 "linktitle": "Al-Kindi",
 "last": "N/A",

diff --git a/content/scientist/Henrietta Swan Leavitt.md b/content/scientist/Henrietta Swan Leavitt.md
@@ -1,5 +1,5 @@
 {
-  "title": "name",
+  "title": "Henrietta Swan Leavitt",
   "name": "Henrietta Swan Leavitt",
   "linktitle": "Henrietta Swan Leavitt",
   "last": "Leavitt",

diff --git a/content/scientist/Jocelyn Bell Burnell.md b/content/scientist/Jocelyn Bell Burnell.md
@@ -1,5 +1,5 @@
 {
-  "title": "name",
+  "title": "Jocelyn Bell Burnell",
   "name": "Jocelyn Bell Burnell",
   "linktitle": "Jocelyn Bell Burnell",
   "last": "Burnell",

diff --git a/content/scientist/Katharine Burr Blodgett.md b/content/scientist/Katharine Burr Blodgett.md
@@ -1,5 +1,5 @@
 {
-  "title": "name",
+  "title": "Katharine Burr Blodgett",
   "name": "Katharine Burr Blodgett",
   "linktitle": "Katharine Burr Blodgett",
   "last": "Blodgett",

diff --git a/content/scientist/Lene Hau.md b/content/scientist/Lene Hau.md
@@ -1,5 +1,5 @@
 {
-  "title": "name",
+  "title": "Lene Hau",
   "name": "Lene Hau",
   "linktitle": "Lene Hau",
   "last": "Hau",

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -4,12 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>
-      {{- with .Param "title-tag" -}}
-        {{- . -}}
-      {{- else -}}
-        {{ .Title }} &middot;
-        {{ .Site.Title }}
-      {{- end -}}
+      {{ .Title }}
     </title>
 
     <!-- Preload fonts -->

diff --git a/layouts/_default/home.html b/layouts/_default/home.html
@@ -50,6 +50,7 @@ <h1>
   <!-- Section with Call-to-Action Links -->
   <section
     class="flex flex-col justify-around space-y-4 bg-gray shadow-inner sm:flex-row sm:space-x-4 sm:space-y-0"
+    x-data="{ isOpen: false, showModal: false }"
   >
     {{ $blkClass := `group relative block w-full p-2 text-center leading-tight duration-100 sm:w-64` }}
     {{ $hedClass := `text-gray font-sans font-bold uppercase group-hover:text-white duration-100` }}
@@ -78,6 +79,7 @@ <h1>
     <a
       class="system {{ $blkClass }}"
       href="mailto:[email protected]?subject={{ $emailSubject }}"
+      @click.prevent="showModal = true; console.log(showModal)"
     >
       <div class="planet">
         <div>
@@ -89,6 +91,117 @@ <h1>
         <div class="moon"></div>
       </div>
     </a>
+
+    <!-- Popup Modal -->
+    <div
+      x-show="showModal"
+      x-transition:enter="transition ease-out duration-200"
+      x-transition:enter-start="opacity-0"
+      x-transition:enter-end="opacity-100"
+      x-transition:leave="transition ease-in duration-150"
+      x-transition:leave-start="opacity-100"
+      x-transition:leave-end="opacity-0"
+      x-cloak
+      class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
+    >
+      <div
+        class="transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:w-full sm:max-w-lg"
+      >
+        <div class="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+          <button
+            @click="showModal = false"
+            type="button"
+            class="bg-red-600 hover:bg-red-700 focus:ring-red-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+          >
+            Close
+          </button>
+        </div>
+        <div class="px-4 py-5 sm:p-6">
+          <h3 class="text-lg font-medium leading-6 text-black">Contact Us</h3>
+          <div class="mt-2">
+            <form>
+              <div class="mb-4">
+                <label
+                  for="name"
+                  class="text-gray-700 block text-sm font-medium"
+                  >Name</label
+                >
+                <input
+                  type="text"
+                  name="name"
+                  id="name"
+                  class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
+                />
+              </div>
+              <div class="mb-4">
+                <label
+                  for="email"
+                  class="text-gray-700 block text-sm font-medium"
+                  >Email</label
+                >
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
+                />
+              </div>
+              <div class="mb-4">
+                <label
+                  for="message"
+                  class="text-gray-700 block text-sm font-medium"
+                  >Message</label
+                >
+                <textarea
+                  id="message"
+                  name="message"
+                  rows="4"
+                  class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 mt-1 block w-full rounded-md shadow-sm sm:text-sm"
+                ></textarea>
+              </div>
+              <div class="flex justify-end">
+                <button
+                  type="submit"
+                  class="bg-gray hover:bg-blue focus:ring-blue-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+                >
+                  Send
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script>
+      function submitForm(event) {
+        event.preventDefault();
+
+        let formData = {
+          name: document.getElementById('name').value,
+          email: document.getElementById('email').value,
+          message: document.getElementById('message').value
+        };
+
+        fetch('https://script.google.com/macros/s/AKfycbwlZYbDFD3_lT9q6UJSCk46rsVLXal5jhys3aFYQBCQEvCqIqUR5pN4lsn7vmqvPF7-/exec', {  // Replace with your Google Apps Script Web App URL
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(formData),
+        })
+        .then(response => response.json())
+        .then(data => {
+          console.log('Success:', data);
+          alert('Your message has been sent successfully!');
+        })
+        .catch((error) => {
+          console.error('Error:', error);
+          alert('Failed to send your message.');
+        });
+      }
+
+      document.querySelector('form').addEventListener('submit', submitForm);
+    </script>
   </section>
 
   <style>

diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
@@ -46,6 +46,7 @@
                   class="self-center text-blue duration-500 hover:text-blue-darker"
                   href="{{ .URL }}"
                   {{ with .Post }}target="{{ . }}"{{ end }}
+                  @click="showModal = true;  console.log(showModal)"
                 >
                   {{- .Name -}}
                 </a>
@@ -152,7 +153,7 @@
       <div
         class="transform overflow-hidden rounded-lg bg-white shadow-xl transition-all sm:w-full sm:max-w-lg"
       >
-        <div class="bg-blue px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+        <div class="bg-gray px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
           <button
             @click="showModal = false"
             type="button"
@@ -207,7 +208,7 @@ <h3 class="text-lg font-medium leading-6 text-black">Contact Us</h3>
               <div class="flex justify-end">
                 <button
                   type="submit"
-                  class="bg-blue-600 hover:bg-blue-700 focus:ring-blue-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
+                  class="bg-gray hover:bg-blue focus:ring-blue-500 mt-3 inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 sm:mt-0 sm:w-auto sm:text-sm"
                 >
                   Send
                 </button>
@@ -217,5 +218,35 @@ <h3 class="text-lg font-medium leading-6 text-black">Contact Us</h3>
         </div>
       </div>
     </div>
+    <script>
+      function submitForm(event) {
+        event.preventDefault();
+
+        let formData = {
+          name: document.getElementById('name').value,
+          email: document.getElementById('email').value,
+          message: document.getElementById('message').value
+        };
+
+        fetch('YOUR_WEB_APP_URL', {  // Replace with your Google Apps Script Web App URL
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(formData),
+        })
+        .then(response => response.json())
+        .then(data => {
+          console.log('Success:', data);
+          alert('Your message has been sent successfully!');
+        })
+        .catch((error) => {
+          console.error('Error:', error);
+          alert('Failed to send your message.');
+        });
+      }
+
+      document.querySelector('form').addEventListener('submit', submitForm);
+    </script>
   </nav>
 </header>