-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathform.html
209 lines (197 loc) · 12.8 KB
/
form.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Janmashtami Celebration Form</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<style>
.swiper {
width: 100%;
height: 70vh;
}
</style>
</head>
<body class="bg-gradient-to-br from-yellow-100 to-orange-100 min-h-screen">
<div class="max-w-4xl mx-auto p-6">
<h1 class="text-3xl font-bold text-center text-purple-800 mb-6">Janmashtami Celebration</h1>
<form id="celebrationForm" action="https://broforms.onrender.com/forms/66cb72d15249d0dd6937324d" method="post" class="border-4 border-yellow-400 rounded-lg p-6 bg-white bg-opacity-70 backdrop-blur-sm">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide p-4">
<h2 class="text-2xl font-semibold text-blue-700 mb-4">Personal Information</h2>
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-700">What is your name?</label>
<input type="text" id="name" name="name" required class="p-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
</div>
<div class="mb-4 flex items-center">
<input type="checkbox" id="bct_member" name="bct_member" class="p-2 rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
<label for="bct_member" class="ml-2 block text-sm text-gray-700">Are you a Part of BroCode Tech Community?</label>
</div>
<div class="mb-4">
<label for="phone" class="block text-sm font-medium text-gray-700">What is your number?</label>
<input type="tel" id="phone" name="phone" required class="p-2 mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
</div>
<div class="mb-4 flex flex-col justify-center p-8 align-middle text-center items-center">
<!-- SVG of finger -->
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg height="100px" width="100px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 298.305 298.305" xml:space="preserve">
<g>
<path style="fill:#222220;" d="M218.731,131.913l-38.492-6.036V58.702c0-15.952-12.978-28.93-28.93-28.93h-0.433
c-15.952,0-28.93,12.978-28.93,28.93v107.881l-39.794-17.055c-7.996-3.427-17.105-2.613-24.367,2.176
c-7.262,4.788-11.597,12.841-11.597,21.539v0.363c0,7.361,3.155,14.389,8.656,19.28l67.103,59.669v28.989
c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5v-32.356c0-2.142-0.916-4.182-2.516-5.604l-69.619-61.906
c-2.303-2.048-3.624-4.989-3.624-8.071v-0.363c0-3.695,1.77-6.982,4.854-9.017c3.085-2.034,6.804-2.367,10.201-0.911l50.247,21.534
c0.461,0.198,0.944,0.353,1.447,0.456c0.749,0.155,1.505,0.188,2.244,0.115c0.105-0.01,0.207-0.03,0.311-0.044
c0.134-0.019,0.268-0.035,0.401-0.062c0.152-0.029,0.299-0.069,0.447-0.108c0.082-0.021,0.166-0.04,0.247-0.063
c0.163-0.049,0.321-0.107,0.48-0.166c0.067-0.025,0.135-0.047,0.201-0.074c0.153-0.062,0.302-0.133,0.449-0.205
c0.071-0.034,0.143-0.066,0.213-0.103c0.132-0.069,0.259-0.146,0.387-0.223c0.083-0.05,0.167-0.098,0.248-0.151
c0.106-0.07,0.208-0.146,0.31-0.221c0.096-0.07,0.193-0.139,0.286-0.214c0.084-0.068,0.163-0.141,0.243-0.212
c0.103-0.09,0.206-0.18,0.304-0.276c0.071-0.07,0.136-0.144,0.204-0.217c0.097-0.104,0.196-0.206,0.287-0.316
c0.073-0.086,0.138-0.178,0.207-0.268c0.077-0.101,0.156-0.199,0.228-0.305c0.091-0.133,0.173-0.272,0.255-0.411
c0.041-0.069,0.085-0.134,0.124-0.205c0.36-0.651,0.628-1.361,0.781-2.113c0.104-0.503,0.152-1.01,0.152-1.512V58.702
c0-7.681,6.249-13.93,13.93-13.93h0.433c7.681,0,13.93,6.249,13.93,13.93v72.025c0,0.277,0.017,0.549,0.047,0.818
c-0.396,3.934,2.339,7.537,6.292,8.156l44.88,7.037c0.035,0.006,0.071,0.011,0.106,0.017c27.148,3.857,47.621,27.444,47.621,54.866
v0.766c0,12.691-3.097,25.35-8.956,36.606l-20.345,39.088c-1.913,3.675-0.484,8.203,3.19,10.115c1.106,0.576,2.29,0.85,3.457,0.85
c2.708,0,5.323-1.472,6.659-4.039l20.345-39.088c6.968-13.387,10.65-28.44,10.65-43.532v-0.766
c0-16.958-6.122-33.351-17.237-46.158C250.845,142.671,235.499,134.309,218.731,131.913z"/>
<path style="fill:#222220;" d="M57.678,98.843c1.149,0,2.303-0.264,3.368-0.799c2.533-1.273,4.131-3.866,4.131-6.701V61.55h32.633
c4.142,0,7.5-3.357,7.5-7.5s-3.358-7.5-7.5-7.5H65.177V16.758c0-2.835-1.599-5.428-4.131-6.701
c-2.533-1.273-5.567-1.009-7.842,0.682L3.026,48.03C1.122,49.445,0,51.678,0,54.05s1.122,4.604,3.026,6.02l50.177,37.293
C54.522,98.342,56.095,98.843,57.678,98.843z M50.177,76.424L20.073,54.05l30.104-22.373V76.424z"/>
<path style="fill:#222220;" d="M295.278,48.03l-50.178-37.292c-2.274-1.689-5.309-1.953-7.842-0.682
c-2.533,1.273-4.131,3.866-4.131,6.701V46.55h-32.633c-4.142,0-7.5,3.357-7.5,7.5s3.358,7.5,7.5,7.5h32.633v29.793
c0,2.835,1.599,5.428,4.131,6.701c1.065,0.535,2.219,0.799,3.368,0.799c1.583,0,3.156-0.501,4.475-1.48l50.178-37.293
c1.904-1.415,3.026-3.647,3.026-6.02S297.183,49.445,295.278,48.03z M248.127,76.424V31.676l30.104,22.374L248.127,76.424z"/>
</g>
</svg>
Keep Swiping or Press the Next Arrow at the right edge of your screen!
</div>
</div>
<div class="swiper-slide p-4">
<h2 class="text-2xl font-semibold text-blue-700 mb-4">Celebration Details</h2>
<div class="mb-4">
<label for="excitement" class="block text-sm font-medium text-gray-700">How's the Josh?</label>
<input type="range" id="excitement" name="excitement" min="1" max="10" step="1" value="1" defaultValue="1" class="p-2 mt-1 block w-full" style="writing-mode: vertical-rl; direction: rtl;">
<output for="excitement" class="block text-center mt-2">😍</output>
</div>
<div class="mb-4">
<label for="celebration" class="block text-sm font-medium text-gray-700">What's your Janmashtami plans? (Please don't say 'Netflix and Chill')</label>
<textarea id="celebration" name="celebration" rows="4" class="mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
</div>
</div>
<div class="swiper-slide p-4">
<h2 class="text-2xl font-semibold text-blue-700 mb-4">Your Thoughts</h2>
<div class="mb-4">
<label for="relatable" class="block text-sm font-medium text-gray-700">How can technology be used to enhance the celebration of Janmashtami?</label>
<textarea id="tech_janmashtami" name="tech_janmashtami" rows="4" class="mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
</div>
</div>
<div class="swiper-slide p-4 ">
<h2 class="text-2xl font-semibold text-blue-700 mb-4">Final Thoughts</h2>
<div class="mb-4">
<label for="personal_excitement" class="block text-sm font-medium text-gray-700">
How can technology be used to promote sustainable and environmentally friendly practices during Janmashtami celebrations?
</label>
<textarea id="sustainable" name="sustainable" rows="4" class="mt-1 p-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"></textarea>
</div>
<button type="submit" class="w-full bg-yellow-400 text-purple-800 hover:bg-yellow-500 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
</form>
<div class="mt-6 text-center text-sm text-gray-600">
<p>Join us in celebrating the divine birth of Lord Krishna!</p>
<p class="mt-2">🕉️ Hare Krishna 🕉️</p>
</div>
</div>
<script>
const swiper = new Swiper('.swiper', {
direction: 'horizontal',
loop: false,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
});
document.getElementById('excitement').addEventListener('input', function(e) {
document.querySelector('output[for="excitement"]').style.fontSize = `${e.target.value*10}px`;
});
function saveSubmissionStatus() {
localStorage.setItem('janmashtamiFormSubmitted', 'true');
localStorage.setItem('janmashtamiFormSubmissionTime', Date.now().toString());
}
function checkSubmissionStatus() {
const submitted = localStorage.getItem('janmashtamiFormSubmitted');
const submissionTime = localStorage.getItem('janmashtamiFormSubmissionTime');
if (submitted === 'true') {
const currentTime = Date.now();
const timeDifference = currentTime - parseInt(submissionTime);
const oneDayInMilliseconds = 24 * 60 * 60 * 1000;
if (timeDifference < oneDayInMilliseconds) {
return true; // Form was submitted within the last 24 hours
} else {
// Reset submission status if it's been more than 24 hours
localStorage.removeItem('janmashtamiFormSubmitted');
localStorage.removeItem('janmashtamiFormSubmissionTime');
}
}
return false;
}
document.getElementById('celebrationForm').addEventListener('submit', async function(e) {
e.preventDefault();
if (checkSubmissionStatus()) {
alert('You have already submitted the form. Please wait 24 hours before submitting again.');
// Redirect to Landing page
window.location.href = 'index.html';
}
const formData = new FormData(this);
const jsonData = Object.fromEntries(formData.entries());
try {
const response = await fetch(this.action, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(jsonData),
});
if (response.ok) {
alert('Form submitted successfully!');
saveSubmissionStatus();
this.reset();
swiper.slideTo(0);
window.location.href = 'index.html';
} else {
alert('Form submission failed. Please try again.');
}
} catch (error) {
console.error('Error submitting form:', error);
alert('An error occurred. Please try again.');
}
});
// Check submission status on page load
window.addEventListener('load', function() {
if (checkSubmissionStatus()) {
alert('You have already submitted the form. Please wait 24 hours before submitting again.');
document.getElementById('celebrationForm').style.display = 'none';
window.location.href = 'index.html';
}
});
</script>
</body>
</html>