From 25096e37285752da593c4395d2274a46fa11a930 Mon Sep 17 00:00:00 2001
From: Delthia <git@delthia.com>
Date: Wed, 3 Sep 2025 18:00:26 +0200
Subject: [PATCH 1/4] feat: add map and disable form on contact page

---
 src/pages/contacto.astro | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro
index 99a69ff..061fd79 100644
--- a/src/pages/contacto.astro
+++ b/src/pages/contacto.astro
@@ -76,20 +76,21 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
 
           <!-- Mapa placeholder -->
           <div class="mt-8">
-            <h3 class="text-lg font-semibold text-gray-900 mb-4">Como chegar</h3>
-            <ImagePlaceholder 
+            <h3 class="text-lg font-semibold text-gray-900 mb-4">Onde estamos</h3>
+            <!--<ImagePlaceholder 
               width="100%" 
               height="250px" 
               alt="Mapa da Facultade de Informática"
               className="w-full rounded-lg shadow-md"
-            />
+            />-->
+            <iframe width="100%" height="250px" class="rounded-lg" src="https://www.openstreetmap.org/export/embed.html?bbox=-8.412598371505739%2C43.331932463082026%2C-8.40905785560608%2C43.333766387744994&amp;layer=mapnik&amp;marker=43.332849432336026%2C-8.410828113555908"></iframe>
           </div>
         </div>
 
         <!-- Formulario de contacto -->
         <div>
           <div class="bg-gray-50 rounded-2xl p-8">
-            <h2 class="text-2xl font-bold text-gray-900 mb-6">Envíanos unha mensaxe</h2>
+            <h2 class="text-2xl font-bold text-gray-900 mb-6">Envíanos unha mensaxe <small class="text-sm italic">(en construcción)</small></h2>
             
             <form class="space-y-6">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -102,6 +103,7 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                     required
                     class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     placeholder="O teu nome"
+                    disabled
                   />
                 </div>
                 <div>
@@ -113,6 +115,7 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                     required
                     class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     placeholder="teu@email.com"
+                    disabled
                   />
                 </div>
               </div>
@@ -123,6 +126,7 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                   id="asunto" 
                   name="asunto"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  disabled
                 >
                   <option value="">Selecciona un asunto</option>
                   <option value="socio">Quero ser socio</option>
@@ -142,6 +146,7 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                   required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                   placeholder="Escribe aquí a túa mensaxe..."
+                  disabled
                 ></textarea>
               </div>
 
@@ -153,6 +158,7 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                     type="checkbox" 
                     required
                     class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                    disabled
                   />
                 </div>
                 <div class="ml-3 text-sm">
@@ -164,7 +170,7 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
 
               <button 
                 type="submit"
-                class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 font-medium"
+                class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 font-medium bg-gray-300 hover:bg-gray-300"
               >
                 Enviar mensaxe
               </button>
@@ -176,4 +182,4 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
     </div>
   </section>
 
-</PageLayout>
\ No newline at end of file
+</PageLayout>

From 6f68304d0ab575be8dfbf93d81527227f2e69be9 Mon Sep 17 00:00:00 2001
From: GamuWasTaken <victordiezruiz@proton.me>
Date: Thu, 4 Sep 2025 20:02:24 +0200
Subject: [PATCH 2/4] Removed map placeholder commented code

---
 src/pages/contacto.astro | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro
index 061fd79..8ee1319 100644
--- a/src/pages/contacto.astro
+++ b/src/pages/contacto.astro
@@ -74,15 +74,9 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
             </div>
           </div>
 
-          <!-- Mapa placeholder -->
+          <!-- Mapa -->
           <div class="mt-8">
             <h3 class="text-lg font-semibold text-gray-900 mb-4">Onde estamos</h3>
-            <!--<ImagePlaceholder 
-              width="100%" 
-              height="250px" 
-              alt="Mapa da Facultade de Informática"
-              className="w-full rounded-lg shadow-md"
-            />-->
             <iframe width="100%" height="250px" class="rounded-lg" src="https://www.openstreetmap.org/export/embed.html?bbox=-8.412598371505739%2C43.331932463082026%2C-8.40905785560608%2C43.333766387744994&amp;layer=mapnik&amp;marker=43.332849432336026%2C-8.410828113555908"></iframe>
           </div>
         </div>

From 38259734e40021ce1bf433a0a878afe3f32ebc26 Mon Sep 17 00:00:00 2001
From: GamuWasTaken <victordiezruiz@proton.me>
Date: Sun, 7 Sep 2025 20:51:57 +0200
Subject: [PATCH 3/4] Added functionality and animation to the form

---
 src/pages/contacto.astro | 58 +++++++++++++++++++++++++++++++++-------
 1 file changed, 48 insertions(+), 10 deletions(-)

diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro
index 8ee1319..1658c8f 100644
--- a/src/pages/contacto.astro
+++ b/src/pages/contacto.astro
@@ -3,6 +3,8 @@ import PageLayout from "../layouts/PageLayout.astro";
 import PageTitle from "../components/PageTitle.astro";
 import ImagePlaceholder from "../components/ImagePlaceholder.astro";
 import { Mail, MapPin, Twitter } from "lucide-astro";
+import Loader from "lucide-astro/Loader";
+import Check from "lucide-astro/Check";
 ---
 
 <PageLayout 
@@ -84,9 +86,9 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
         <!-- Formulario de contacto -->
         <div>
           <div class="bg-gray-50 rounded-2xl p-8">
-            <h2 class="text-2xl font-bold text-gray-900 mb-6">Envíanos unha mensaxe <small class="text-sm italic">(en construcción)</small></h2>
+            <h2 class="text-2xl font-bold text-gray-900 mb-6">Envíanos unha mensaxe</h2>
             
-            <form class="space-y-6">
+            <form id="contact-form" class="space-y-6">
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <div>
                   <label for="nome" class="block text-sm font-medium text-gray-700 mb-1">Nome *</label>
@@ -97,7 +99,6 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                     required
                     class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     placeholder="O teu nome"
-                    disabled
                   />
                 </div>
                 <div>
@@ -109,18 +110,17 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                     required
                     class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                     placeholder="teu@email.com"
-                    disabled
                   />
                 </div>
               </div>
 
               <div>
-                <label for="asunto" class="block text-sm font-medium text-gray-700 mb-1">Asunto</label>
+                <label for="asunto" class="block text-sm font-medium text-gray-700 mb-1">Asunto *</label>
                 <select 
                   id="asunto" 
                   name="asunto"
+                  required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
-                  disabled
                 >
                   <option value="">Selecciona un asunto</option>
                   <option value="socio">Quero ser socio</option>
@@ -140,7 +140,6 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                   required
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                   placeholder="Escribe aquí a túa mensaxe..."
-                  disabled
                 ></textarea>
               </div>
 
@@ -152,7 +151,6 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
                     type="checkbox" 
                     required
                     class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
-                    disabled
                   />
                 </div>
                 <div class="ml-3 text-sm">
@@ -164,13 +162,53 @@ import { Mail, MapPin, Twitter } from "lucide-astro";
 
               <button 
                 type="submit"
-                class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 font-medium bg-gray-300 hover:bg-gray-300"
+                class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 font-medium flex justify-center gap-4"
               >
                 Enviar mensaxe
+                <Loader class="loader hidden animate-spin"/>
+                <Check class="check hidden "/>
               </button>
             </form>
-          </div>
+            <script defer>
+
+              const form = document.querySelector('#contact-form');
+              const loader = form.querySelector('.loader')
+              const check = form.querySelector('.check')
+            
+              form.addEventListener('submit', async event => {
+                event.preventDefault();
+
+                startLoad()
+
+                try {
+                  const response = await fetch("https://activepieces.gpul.org/api/v1/webhooks/0c0o5NPbtpg4ddEjWiD3p", {
+                    method: "POST",
+                    body: new FormData(form),
+                  })
+                } catch (error) {
+                  console.error(error);
+                }
 
+                endLoad()
+
+              })
+
+              function startLoad() {
+                loader.classList.remove("hidden")
+                loader.classList.add("animate-spin")
+              }
+
+              function endLoad() {
+                loader.classList.add("hidden")
+                loader.classList.remove("animate-spin")
+
+                check.classList.remove("hidden")
+                check.classList.add("animate-bounce")
+                setTimeout(() => check.classList.add("hidden"), 500)
+              }
+
+            </script>
+          </div>
         </div>
       </div>
     </div>

From d1ee56967e233c62dd6d72a5ed57e47eead11afe Mon Sep 17 00:00:00 2001
From: GamuWasTaken <victordiezruiz@proton.me>
Date: Sun, 7 Sep 2025 20:56:45 +0200
Subject: [PATCH 4/4] Small nit

---
 src/pages/contacto.astro | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro
index fe1208e..6a78dff 100644
--- a/src/pages/contacto.astro
+++ b/src/pages/contacto.astro
@@ -8,7 +8,6 @@ import Check from "lucide-astro/Check";
 import Mail from "lucide-astro/Mail";
 import MapPin from "lucide-astro/MapPin";
 import Twitter  from "lucide-astro/Twitter";
-
 ---
 
 <PageLayout 
@@ -169,7 +168,7 @@ import Twitter  from "lucide-astro/Twitter";
                 class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200 font-medium flex justify-center gap-4"
               >
                 Enviar mensaxe
-                <Loader class="loader hidden animate-spin"/>
+                <Loader class="loader hidden"/>
                 <Check class="check hidden "/>
               </button>
             </form>