Skip to content

Commit 27d846b

Browse files
pedroMPMartinspedroMPMartins
committed
Forms added
1 parent 7135401 commit 27d846b

File tree

2 files changed

+177
-0
lines changed

2 files changed

+177
-0
lines changed

‎themes/hugoplate/layouts/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,10 @@ <h3 class="text-xl font-semibold mb-2">{{ .title }}</h3>
164164
{{ end }}
165165
<!-- /Projects -->
166166

167+
<!-- Forms -->
168+
{{ partial "components/project-form" . }}
169+
<!-- /Forms -->
170+
167171
<!-- Members -->
168172
{{/* {{ range $i, $e:= .Params.members }}
169173
<section id="members" class="section-sm">

‎themes/hugoplate/layouts/partials/components/project-form.html‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
<section id="project-form" class="section-sm py-16 bg-gray-50 dark:bg-gray-900">
2+
<div class="container" data-aos="fade-up">
3+
<div class="text-center mb-12">
4+
<h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Project Proposal Form</h2>
5+
<p class="text-xl text-gray-600 dark:text-gray-300">Submit your project proposal to collaborate with IEEE UA Student Branch</p>
6+
</div>
7+
8+
<!-- Success Popup (initially hidden) - Transparent background version -->
9+
<div id="success-popup" class="fixed inset-0 flex items-center justify-center z-50 hidden">
10+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-8 max-w-md mx-4 border-2 border-blue-200 dark:border-blue-800">
11+
<div class="text-center">
12+
<div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-4">
13+
<svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
14+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
15+
</svg>
16+
</div>
17+
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Thank You!</h3>
18+
<p class="text-gray-600 dark:text-gray-300 mb-6">Your proposal has been submitted successfully. We'll be in touch soon.</p>
19+
<button id="close-popup" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-200">
20+
Close
21+
</button>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 md:p-12 max-w-4xl mx-auto">
27+
<!-- Remove the action attribute and add an ID -->
28+
<form id="project-proposal-form" method="POST">
29+
<!-- FormSubmit Configuration -->
30+
<input type="hidden" name="_subject" value="Nova Proposta de Projeto Submetida - IEEE UA SB">
31+
<input type="hidden" name="_template" value="table">
32+
<!-- Remove the _next parameter since we're handling with JS -->
33+
<input type="text" name="_honey" style="display:none">
34+
<input type="hidden" name="_captcha" value="false">
35+
36+
<!-- Company Information Section -->
37+
<div class="mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
38+
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-500 mb-6">Company Information</h3>
39+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
40+
<div>
41+
<label for="empresa" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Empresa <span class="text-red-500">*</span></label>
42+
<input type="text" id="empresa" name="empresa" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
43+
</div>
44+
<div>
45+
<label for="contacto" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Contacto da Empresa <span class="text-red-500">*</span></label>
46+
<input type="text" id="contacto" name="contacto" placeholder="Email ou telefone" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
47+
</div>
48+
</div>
49+
</div>
50+
51+
<!-- Project Details Section -->
52+
<div class="mb-8 pb-6 border-b border-gray-200 dark:border-gray-700">
53+
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-500 mb-6">Project Details</h3>
54+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
55+
<div>
56+
<label for="nome_projeto" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Nome do Projeto <span class="text-red-500">*</span></label>
57+
<input type="text" id="nome_projeto" name="nome_projeto" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required>
58+
</div>
59+
<div>
60+
<label for="numero_pessoas" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Número de Pessoas Necessárias</label>
61+
<input type="number" class="[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
62+
</div>
63+
</div>
64+
65+
<div class="mb-6">
66+
<label for="descricao" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Descrição Resumida do Projeto <span class="text-red-500">*</span></label>
67+
<textarea id="descricao" name="descricao" rows="3" placeholder="2–3 linhas para contexto" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" required></textarea>
68+
</div>
69+
70+
<div>
71+
<label for="conceitos_tecnicos" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Conceitos Técnicos a serem Aplicados</label>
72+
<textarea id="conceitos_tecnicos" name="conceitos_tecnicos" rows="2" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
73+
</div>
74+
</div>
75+
76+
<!-- Collaboration Details Section -->
77+
<div class="mb-8">
78+
<h3 class="text-xl font-semibold text-blue-800 dark:text-blue-500 mb-6">Collaboration Details</h3>
79+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
80+
<div>
81+
<label for="duracao" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Duração Estimada</label>
82+
<input type="text" id="duracao" name="duracao" placeholder="ex: 3 meses; Jan 2025 - Mar 2025" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
83+
</div>
84+
<div>
85+
<label for="local" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Local da Colaboração</label>
86+
<select id="local" name="local" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
87+
<option value="" selected disabled>Selecione uma opção</option>
88+
<option value="Remoto">Remoto</option>
89+
<option value="Presencial">Presencial</option>
90+
<option value="Híbrido">Híbrido</option>
91+
</select>
92+
</div>
93+
</div>
94+
</div>
95+
96+
<!-- Additional Information -->
97+
<div class="mb-8">
98+
<label for="observacoes" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Observações Adicionais</label>
99+
<textarea id="observacoes" name="observacoes" rows="4" placeholder="Campo aberto para detalhes extra" class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"></textarea>
100+
</div>
101+
102+
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition duration-200 transform hover:scale-105">
103+
Enviar Proposta
104+
</button>
105+
</form>
106+
</div>
107+
</div>
108+
</section>
109+
110+
<script>
111+
document.addEventListener('DOMContentLoaded', function() {
112+
const form = document.getElementById('project-proposal-form');
113+
const popup = document.getElementById('success-popup');
114+
const closeButton = document.getElementById('close-popup');
115+
116+
// Handle form submission
117+
form.addEventListener('submit', async function(e) {
118+
e.preventDefault();
119+
120+
// Show loading state on the submit button
121+
const submitButton = form.querySelector('button[type="submit"]');
122+
const originalText = submitButton.textContent;
123+
submitButton.textContent = 'Enviando...';
124+
submitButton.disabled = true;
125+
126+
try {
127+
// Create FormData from the form
128+
const formData = new FormData(form);
129+
130+
// Send the form data to FormSubmit
131+
const response = await fetch('https://formsubmit.co/franciscompereira@ua.pt', {
132+
method: 'POST',
133+
body: formData
134+
});
135+
136+
if (response.ok) {
137+
// Show success popup
138+
popup.classList.remove('hidden');
139+
// Reset the form
140+
form.reset();
141+
} else {
142+
alert('There was an error submitting your form. Please try again.');
143+
}
144+
} catch (error) {
145+
console.error('Error:', error);
146+
alert('There was an error submitting your form. Please try again.');
147+
} finally {
148+
// Restore the button state
149+
submitButton.textContent = originalText;
150+
submitButton.disabled = false;
151+
}
152+
});
153+
154+
// Close the popup when the close button is clicked
155+
closeButton.addEventListener('click', function() {
156+
popup.classList.add('hidden');
157+
});
158+
159+
// Close the popup when clicking outside of it
160+
document.addEventListener('click', function(e) {
161+
if (popup.contains(e.target) && e.target !== popup && !popup.querySelector('.bg-white').contains(e.target)) {
162+
popup.classList.add('hidden');
163+
}
164+
});
165+
166+
// Close the popup when pressing the Escape key
167+
document.addEventListener('keydown', function(e) {
168+
if (e.key === 'Escape' && !popup.classList.contains('hidden')) {
169+
popup.classList.add('hidden');
170+
}
171+
});
172+
});
173+
</script>

0 commit comments

Comments
 (0)