-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
469 lines (462 loc) · 33.4 KB
/
index.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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlepNote</title>
<link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
.password-requirements {
margin-top: 0.5rem;
font-size: 0.875rem;
color: #6b7280;
}
.requirement {
display: flex;
align-items: center;
margin-bottom: 0.25rem;
}
.requirement-icon {
margin-right: 0.5rem;
width: 1rem;
height: 1rem;
}
.requirement.valid {
color: #10b981;
}
.requirement.invalid {
color: #6b7280;
}
.error-message {
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.25rem;
display: none;
}
</style>
<script src="https://cdn.tailwindcss.com"></script>
<script src="src/js/tailwind-config.js"></script>
<script src="src/js/oneko.js" defer></script>
<script src="src/js/script.js" defer></script>
<script src="src/js/auth.js" defer></script>
</head>
<body class="font-sans bg-gradient-to-br from-purple-50 to-blue-50 min-h-screen">
<section id="home">
<div class="relative min-h-[90vh]">
<div class="absolute inset-0 z-0">
<img src="assets/images/hero-bg.webp" alt="Decorative background"
class="w-full h-full object-cover object-center">
<div class="absolute inset-0"></div>
</div>
<nav class="bg-white/50 backdrop-blur-sm sticky top-0 z-50">
<div class="container mx-auto px-6 py-4">
<div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0">
<a href="/" class="md:absolute md:left-6 flex justify-center md:block">
<img src="assets/images/logo.svg" alt="BlepNote Logo" class="h-10">
</a>
<div class="hidden md:flex flex-wrap justify-center items-center space-x-0 space-y-2 md:space-y-0 md:space-x-8">
<a href="#home" class="px-4 py-2 text-gray-700 hover:text-blue-600">Home</a>
<a href="#features" class="px-4 py-2 text-gray-700 hover:text-blue-600">Features</a>
<a href="#how-it-works" class="px-4 py-2 text-gray-700 hover:text-blue-600">How it Works</a>
<a href="#about" class="px-4 py-2 text-gray-700 hover:text-blue-600">About</a>
<a href="#faq" class="px-4 py-2 text-gray-700 hover:text-blue-600">FAQ</a>
</div>
<div class="hidden md:block md:absolute md:right-6 mt-4 md:mt-0">
<button data-modal-trigger class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-full text-base transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 shadow-md hover:shadow-lg">
Try it!
</button>
</div>
</div>
</div>
</nav>
<div class="container mx-auto px-6 py-32 relative z-10">
<div class="max-w-2xl ml-auto mr-0 md:mr-12 lg:mr-24 text-right">
<h2 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-8 md:mb-10 text-white leading-tight">
Feels like home.
</h2>
<p class="text-xl md:text-2xl lg:text-3xl mb-10 md:mb-12 leading-relaxed md:leading-relaxed text-white/90">
Track your mood, journal<br class="hidden md:block">
your thoughts, and bond<br class="hidden md:block">
with your virtual pet on<br class="hidden md:block">
your journey to self-care.
</p>
<button data-modal-trigger class="bg-yellow-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105">
Get Started
</button>
</div>
</div>
</div>
</section>
<section id="features" class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Amazing Features</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<div class="text-center p-6 rounded-xl bg-purple-50/50 hover:bg-purple-100/50 transition">
<div class="w-20 h-20 mx-auto mb-6 bg-purple-100 rounded-full flex items-center justify-center">
<svg class="w-10 h-10 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3">Mood Tracking</h3>
<p class="text-gray-600">Easily log your daily moods and emotions with our intuitive interface. Visualize patterns over time.</p>
</div>
<div class="text-center p-6 rounded-xl bg-blue-50/50 hover:bg-blue-100/50 transition">
<div class="w-20 h-20 mx-auto mb-6 bg-blue-100 rounded-full flex items-center justify-center">
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3">Journaling</h3>
<p class="text-gray-600">Private, secure journal with your local storage.<br> Perfect for capturing your thoughts.</p>
</div>
<div class="text-center p-6 rounded-xl bg-yellow-50/50 hover:bg-yellow-100/50 transition">
<div class="w-20 h-20 mx-auto mb-6 bg-yellow-100 rounded-full flex items-center justify-center">
<svg class="w-10 h-10 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="text-xl font-semibold mb-3">Virtual Pet</h3>
<p class="text-gray-600">Your personal companion change based <br>on your mood for the day.</p>
</div>
</div>
</div>
</section>
<section id="how-it-works" class="py-20 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">How It Works</h2>
<div class="max-w-4xl mx-auto">
<div class="flex flex-col md:flex-row items-center mb-16">
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
<video autoplay muted loop playsinline class="w-full rounded-lg shadow-md">
<source src="assets/videos/how-it-works-1.mp4" type="video/mp4">
</video>
</div>
<div class="md:w-1/2">
<h3 class="text-2xl font-bold mb-4">Getting Started</h3>
<p class="text-gray-600 mb-4">Track your daily mood and journal your thoughts with BlepNote, your mental health companion.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Sign up or log in to create your account.</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Add journal entries and select your mood for the day.</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Let your cat companion support you along the way.</span>
</li>
</ul>
</div>
</div>
<div class="flex flex-col md:flex-row items-center mb-16">
<div class="md:w-1/2 order-1 md:order-2 mb-8 md:mb-0 md:pl-8">
<video autoplay muted loop playsinline class="w-full rounded-lg shadow-md">
<source src="assets/videos/how-it-works-2.mp4" type="video/mp4">
</video>
</div>
<div class="md:w-1/2 order-2 md:order-1">
<h3 class="text-2xl font-bold mb-4">Visualizing Your Journey</h3>
<p class="text-gray-600 mb-4">See your progress at a glance with interactive mood tracking.</p>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start">
<svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>A cat mood updates based on your latest mood.</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>A visual tracker maps your moods throughout the year.</span>
</li>
<li class="flex items-start">
<svg class="h-5 w-5 text-green-500 mr-2 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span>Click any mood entry to revisit your journal.</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
<img src="assets/images/about-img.webp" alt="BlepNote team working together"
class="w-full rounded-xl shadow-lg object-cover aspect-square">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl md:text-4xl font-bold mb-6 text-gray-800">About BlepNote</h2>
<p class="text-gray-600 mb-6">
BlepNote is a mental health tracker designed to help you monitor your daily mood and reflect on your thoughts, all with the support of a friendly cat companion. Whether you're feeling joyful, stressed, or anything in between, BlepNote provides a safe space to express yourself and track your emotional well-being over time.
</p>
<p class="text-gray-600 mb-6">
With a simple and engaging interface, BlepNote makes mood tracking effortless. Your entries influence a dynamic cat meme GIF that reflects your latest mood, while a visual tracker maps your emotional journey throughout the year. Every color represents a different feeling, making it easy to see patterns and progress in your mental health.
</p>
<div class="bg-blue-50 rounded-lg p-6">
<h3 class="text-xl font-semibold mb-3 text-blue-800">Our Mission</h3>
<p class="text-gray-600">
To make mental health tracking accessible, enjoyable, and effective for everyone,
removing the stigma and adding moments of joy to daily self-reflection.
</p>
</div>
</div>
</div>
</div>
</section>
<section id="faq" class="py-20 bg-gray-50">
<div class="container mx-auto px-6 max-w-4xl">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Frequently Asked Questions</h2>
<div class="space-y-6">
<div class="bg-white p-6 rounded-lg shadow-sm">
<button class="flex justify-between items-center w-full text-left">
<h3 class="text-lg font-medium text-gray-800">Is my journal data private?</h3>
<svg class="h-5 w-5 text-gray-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="mt-4 text-gray-600">
<p>All your journal data is stored locally on your device. We do not store any of your data on our servers or in the cloud.</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<button class="flex justify-between items-center w-full text-left">
<h3 class="text-lg font-medium text-gray-800">How does the virtual pet work?</h3>
<svg class="h-5 w-5 text-gray-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="mt-4 text-gray-600">
<p>Your cat companion grows with you on your mental health journey. Regular journal entries and mood tracking keep it happy and engaged, while long periods of inactivity might make it look sad. It’s a fun and interactive way to visualize your self-care habits.</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<button class="flex justify-between items-center w-full text-left">
<h3 class="text-lg font-medium text-gray-800">Is there a mobile app?</h3>
<svg class="h-5 w-5 text-gray-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="mt-4 text-gray-600">
<p>BlepNote does not have a mobile application. I created it solely for my capstone school project. I also currently have no experience in mobile app development, but maybe in the future.</p>
</div>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm">
<button class="flex justify-between items-center w-full text-left">
<h3 class="text-lg font-medium text-gray-800">Who created this website?</h3>
<svg class="h-5 w-5 text-gray-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="mt-4 text-gray-600">
<p>Created by Romelio Teodoro, a 2nd-year BSIT student from the National Teachers College. I wanted to make journaling more enjoyable and engaging, which inspired me to create BlepNote. I also wanted a personal journal system for myself, so here we are.</p>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-blue-800 text-white py-12">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div class="md:col-span-2">
<img src="assets/images/logo-white.svg" alt="BlepNote Logo" class="h-10 mb-4">
<p class="text-gray-300 mb-4">Your companion for mindful self-care and emotional wellbeing.</p>
<div class="flex space-x-4">
<a href="https://x.com/blepnote" target="_blank" class="text-gray-300 hover:text-white">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
</svg>
</a>
<a href="https://www.instagram.com/blepnote/" target="_blank" class="text-gray-300 hover:text-white">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
</svg>
</a>
<a href="https://www.linkedin.com/in/romelioteodoro/" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-white">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"></path>
</svg>
</a>
<a href="https://github.com/melio0504" target="_blank" rel="noopener noreferrer" class="text-gray-300 hover:text-white">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"></path>
</svg>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Product</h3>
<ul class="space-y-2 text-gray-300">
<li><a href="#" class="hover:text-white">Features</a></li>
<li><a href="#" class="hover:text-white">Pricing</a></li>
<li><a href="#" class="hover:text-white">Download</a></li>
<li><a href="#" class="hover:text-white">Status</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Company</h3>
<ul class="space-y-2 text-gray-300">
<li><a href="#" class="hover:text-white">About</a></li>
<li><a href="#" class="hover:text-white">Blog</a></li>
<li><a href="#" class="hover:text-white">Careers</a></li>
<li><a href="#" class="hover:text-white">Contact</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">Support</h3>
<ul class="space-y-2 text-gray-300">
<li><a href="#" class="hover:text-white">Help Center</a></li>
<li><a href="#" class="hover:text-white">Privacy Policy</a></li>
<li><a href="#" class="hover:text-white">Terms of Service</a></li>
<li><a href="#" class="hover:text-white">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-white mt-12 pt-8 text-center text-white-400">
<p>© 2025 Blepnote | Romelio Teodoro. All rights reserved.</p>
</div>
</div>
</footer>
<button id="scrollToTopBtn" class="fixed bottom-8 right-8 p-3 bg-blue-600 text-white rounded-full shadow-lg hover:bg-blue-700 transition-all duration-300 opacity-0 invisible transform translate-y-4 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</button>
<!-- Login & Signup Modal -->
<div id="authModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 opacity-0 invisible transition-opacity duration-300">
<div id="notification" class="fixed top-4 right-4 z-50 hidden">
<div class="px-6 py-4 rounded-lg shadow-lg border-l-4 flex items-start max-w-md bg-green-50 text-green-800 border-green-500">
<svg id="notificationIcon" class="h-6 w-6 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div>
<h3 id="notificationTitle" class="font-bold"></h3>
<p id="notificationMessage" class="text-sm"></p>
</div>
<button onclick="hideNotification()" class="ml-4 text-gray-500 hover:text-gray-700">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-2xl max-w-md w-full mx-4 overflow-hidden transform transition-all duration-300 scale-95 relative">
<div class="flex border-b">
<button id="loginTab" class="flex-1 py-4 font-medium text-gray-600 focus:outline-none border-b-2 border-blue-600 text-blue-600">
Login
</button>
<button id="signupTab" class="flex-1 py-4 font-medium text-gray-600 focus:outline-none">
Sign Up
</button>
</div>
<div id="loginForm" class="p-6">
<h3 class="text-2xl font-bold text-gray-800 mb-6">Welcome back!</h3>
<form id="loginFormElement">
<div class="mb-4">
<label for="loginEmail" class="block text-gray-700 mb-2">Email</label>
<input type="email" id="loginEmail" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
</div>
<div class="mb-6">
<label for="loginPassword" class="block text-gray-700 mb-2">Password</label>
<input type="password" id="loginPassword" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
Login
</button>
</form>
<div class="mt-4 text-center text-sm text-gray-600">
Don't have an account? <button class="text-blue-600 hover:underline focus:outline-none switch-to-signup">Sign up</button>
</div>
</div>
<div id="signupForm" class="p-6 hidden">
<h3 class="text-2xl font-bold text-gray-800 mb-6">Create your account</h3>
<form id="signupFormElement">
<div class="mb-4">
<label for="signupName" class="block text-gray-700 mb-2">Full Name</label>
<input type="text" id="signupName" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
</div>
<div class="mb-4">
<label for="signupEmail" class="block text-gray-700 mb-2">Email</label>
<input type="email" id="signupEmail" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
</div>
<div class="mb-4">
<label for="signupPassword" class="block text-gray-700 mb-2">Password</label>
<input type="password" id="signupPassword" required
class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
oninput="checkPasswordRequirements()">
<div class="password-requirements">
<div id="lengthReq" class="requirement invalid">
<svg class="requirement-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span>At least 8 characters</span>
</div>
<div id="uppercaseReq" class="requirement invalid">
<svg class="requirement-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span>At least 1 uppercase letter</span>
</div>
<div id="lowercaseReq" class="requirement invalid">
<svg class="requirement-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span>At least 1 lowercase letter</span>
</div>
<div id="numberReq" class="requirement invalid">
<svg class="requirement-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span>At least 1 number</span>
</div>
<div id="specialReq" class="requirement invalid">
<svg class="requirement-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<span>At least 1 special character</span>
</div>
</div>
</div>
<div class="mb-6">
<label for="signupPasswordConfirm" class="block text-gray-700 mb-2">Repeat Password</label>
<input type="password" id="signupPasswordConfirm" required
class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
oninput="checkPasswordRequirements()">
<div id="passwordMatchError" class="error-message">
Passwords do not match
</div>
</div>
<button type="submit" id="signupSubmitBtn" disabled class="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 opacity-50 cursor-not-allowed">
Sign Up
</button>
</form>
<div class="mt-4 text-center text-sm text-gray-600">
Already have an account? <button class="text-blue-600 hover:underline focus:outline-none switch-to-login">Login</button>
</div>
</div>
<button id="closeModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div id="signupSuccessMessage" class="hidden mb-4 p-3 bg-green-100 text-green-800 rounded-lg text-sm">
Account created successfully! Please log in.
</div>
</div>
</body>
</html>