Skip to content

Complete contact #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Complete contact #2

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25096e3
feat: add map and disable form on contact page
delthia Sep 3, 2025
6f68304
Removed map placeholder commented code
GamuWasTaken Sep 4, 2025
3825973
Added functionality and animation to the form
GamuWasTaken Sep 7, 2025
b5b684c
Merge branch 'main' into complete-contact
GamuWasTaken Sep 7, 2025
d1ee569
Small nit
GamuWasTaken Sep 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 50 additions & 12 deletions src/pages/contacto.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import PageLayout from "../layouts/PageLayout.astro";
import PageTitle from "../components/PageTitle.astro";
import ImagePlaceholder from "../components/ImagePlaceholder.astro";

import Loader from "lucide-astro/Loader";
import Check from "lucide-astro/Check";
import Mail from "lucide-astro/Mail";
import MapPin from "lucide-astro/MapPin";
import Twitter from "lucide-astro/Twitter";
Expand Down Expand Up @@ -77,15 +79,10 @@ import Twitter from "lucide-astro/Twitter";
</div>
</div>

<!-- Mapa placeholder -->
<!-- Mapa -->
<div class="mt-8">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Como chegar</h3>
<ImagePlaceholder
width="100%"
height="250px"
alt="Mapa da Facultade de Informática"
className="w-full rounded-lg shadow-md"
/>
<h3 class="text-lg font-semibold text-gray-900 mb-4">Onde estamos</h3>
<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>

Expand All @@ -94,7 +91,7 @@ import Twitter from "lucide-astro/Twitter";
<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>

<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>
Expand All @@ -121,10 +118,11 @@ import Twitter from "lucide-astro/Twitter";
</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"
>
<option value="">Selecciona un asunto</option>
Expand Down Expand Up @@ -167,13 +165,53 @@ import Twitter from "lucide-astro/Twitter";

<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 flex justify-center gap-4"
>
Enviar mensaxe
<Loader class="loader hidden"/>
<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>
Expand Down