-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
274 lines (244 loc) · 15.9 KB
/
index.html
File metadata and controls
274 lines (244 loc) · 15.9 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notify</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
}
.font-poppins {
font-family: 'Poppins', sans-serif;
}
/* Style for carousel image to ensure it fits well */
#carousel-image {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 antialiased">
<!-- App Container -->
<div id="app" class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-3">
<a href="index.html" class="flex items-center space-x-4">
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
<h1 class="text-2xl font-bold text-gray-800">Notify</h1>
</a>
<div id="auth-buttons" class="flex items-center space-x-2">
<a href="login.html" id="login-btn" class="font-poppins inline-block bg-white text-gray-700 font-bold py-1 px-4 rounded-lg border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-150">
Log in
</a>
<a href="signup.html" id="signup-btn" class="font-poppins inline-block bg-blue-600 text-white font-bold py-1 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-150">
Sign up
</a>
<a href="dashboard.html" id="dashboard-btn" class="font-poppins hidden inline-block bg-blue-600 text-white font-bold py-1 px-4 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-150">
Dashboard
</a>
<button id="logout-btn" class="font-poppins hidden inline-block bg-white text-gray-700 font-bold py-1 px-4 rounded-lg border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-150">
Logout
</button>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow">
<!-- Hero Section -->
<section class="bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<!-- Left Column: Text Content -->
<div class="text-center lg:text-left">
<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-gray-900 tracking-tight leading-tight">
The Digital Hand-Raiser for the <span class="text-blue-600">Modern Classroom</span>.
</h1>
<p class="mt-6 max-w-xl mx-auto lg:mx-0 text-lg sm:text-xl text-gray-600">
Streamline help requests, minimize disruptions, and create a more focused, inclusive, and efficient learning atmosphere for everyone.
</p>
<div class="mt-8">
<a href="signup.html" class="inline-block bg-blue-600 text-white font-bold py-3 px-8 rounded-lg text-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-150">
Sign up for Notify
</a>
</div>
</div>
<!-- Right Column: Image Carousel -->
<div id="image-carousel" class="relative group">
<!-- Image Container -->
<div class="bg-gray-200 rounded-xl aspect-video w-full overflow-hidden">
<img id="carousel-image" src="" alt="Notify application dashboard view" class="transition-opacity duration-500 ease-in-out">
</div>
<!-- Navigation Arrows -->
<button id="prev-slide" class="absolute top-1/2 left-4 -translate-y-1/2 bg-white/50 hover:bg-white/80 p-2 rounded-full text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
</button>
<button id="next-slide" class="absolute top-1/2 right-4 -translate-y-1/2 bg-white/50 hover:bg-white/80 p-2 rounded-full text-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300 focus:outline-none focus:ring-2 focus:ring-gray-400">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
<!-- Navigation Dots -->
<div id="carousel-dots" class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<!-- Dots will be generated by JavaScript -->
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-800">A Better Way to Ask for Help</h2>
<p class="mt-2 text-gray-500">Designed for students and teachers.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
<!-- Feature 1 -->
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="bg-blue-100 text-blue-600 rounded-full h-12 w-12 flex items-center justify-center mx-auto">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="mt-5 text-xl font-semibold text-gray-800">Inclusive for Students</h3>
<p class="mt-2 text-gray-600">Provides a discreet way to ask for help, reducing anxiety for shy or hesitant students and promoting a more inclusive environment.</p>
</div>
<!-- Feature 2 -->
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="bg-green-100 text-green-600 rounded-full h-12 w-12 flex items-center justify-center mx-auto">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
</div>
<h3 class="mt-5 text-xl font-semibold text-gray-800">Organized for Teachers</h3>
<p class="mt-2 text-gray-600">Organizes all incoming requests into a simple, first-come, first-served queue on a private dashboard for efficient classroom management.</p>
</div>
<!-- Feature 3 -->
<div class="bg-white p-8 rounded-xl shadow-md">
<div class="bg-red-100 text-red-600 rounded-full h-12 w-12 flex items-center justify-center mx-auto">
<svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</div>
<h3 class="mt-5 text-xl font-semibold text-gray-800">Focused for Lessons</h3>
<p class="mt-2 text-gray-600">Eliminates the physical disruptions of hand-raising, allowing teachers to address needs without derailing the lesson's momentum.</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-gray-200">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 text-center text-gray-500">
<p>© 2025 Notify. A website created by 4simpleproblems.</p>
</div>
</footer>
</div>
<!-- Firebase SDKs -->
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.1/firebase-auth-compat.js"></script>
<!-- Link to external Firebase config file -->
<script src="../firebase-config.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
// --- Carousel Logic ---
const images = [
'https://placehold.co/1280x720/3b82f6/ffffff?text=Teacher+Dashboard',
'https://placehold.co/1280x720/10b981/ffffff?text=Student+Help+Queue',
'https://placehold.co/1280x720/8b5cf6/ffffff?text=Discreet+Requests'
];
let currentIndex = 0;
let slideInterval;
const carousel = document.getElementById('image-carousel');
if (carousel) { // Check if carousel exists on the page
const imageElement = document.getElementById('carousel-image');
const prevButton = document.getElementById('prev-slide');
const nextButton = document.getElementById('next-slide');
const dotsContainer = document.getElementById('carousel-dots');
// Create navigation dots dynamically
images.forEach((_, index) => {
const dot = document.createElement('button');
dot.classList.add('w-2.5', 'h-2.5', 'rounded-full', 'transition-colors', 'duration-300');
dot.setAttribute('aria-label', `Go to slide ${index + 1}`);
dot.addEventListener('click', () => goToSlide(index));
dotsContainer.appendChild(dot);
});
const dots = dotsContainer.querySelectorAll('button');
function updateCarouselUI() {
imageElement.style.opacity = '0';
setTimeout(() => {
imageElement.src = images[currentIndex];
imageElement.style.opacity = '1';
}, 300);
dots.forEach((dot, index) => {
dot.classList.toggle('bg-white', index === currentIndex);
dot.classList.toggle('bg-white/50', index !== currentIndex);
});
}
function nextSlide() {
currentIndex = (currentIndex + 1) % images.length;
updateCarouselUI();
}
function prevSlide() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateCarouselUI();
}
function goToSlide(index) {
currentIndex = index;
updateCarouselUI();
resetInterval();
}
function startInterval() {
clearInterval(slideInterval);
slideInterval = setInterval(nextSlide, 5000);
}
function stopInterval() {
clearInterval(slideInterval);
}
function resetInterval() {
stopInterval();
startInterval();
}
prevButton.addEventListener('click', () => { prevSlide(); resetInterval(); });
nextButton.addEventListener('click', () => { nextSlide(); resetInterval(); });
carousel.addEventListener('mouseenter', stopInterval);
carousel.addEventListener('mouseleave', startInterval);
updateCarouselUI();
startInterval();
}
// --- Firebase Auth Logic ---
if (typeof firebase !== 'undefined' && typeof firebaseConfig !== 'undefined') {
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
const loginBtn = document.getElementById('login-btn');
const signupBtn = document.getElementById('signup-btn');
const dashboardBtn = document.getElementById('dashboard-btn');
const logoutBtn = document.getElementById('logout-btn');
auth.onAuthStateChanged(user => {
if (user) {
// User is signed in, show dashboard and logout
loginBtn.classList.add('hidden');
signupBtn.classList.add('hidden');
dashboardBtn.classList.remove('hidden');
logoutBtn.classList.remove('hidden');
} else {
// User is signed out, show login and signup
loginBtn.classList.remove('hidden');
signupBtn.classList.remove('hidden');
dashboardBtn.classList.add('hidden');
logoutBtn.classList.add('hidden');
}
});
logoutBtn.addEventListener('click', () => {
auth.signOut().catch(error => {
console.error('Logout Error:', error);
});
});
} else {
console.error("Firebase is not loaded or firebaseConfig is not defined. Please check your script tags and firebase-config.js file.");
}
});
</script>
</body>
</html>