Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
194 lines (177 loc) · 13.2 KB
/
Copy pathindex.html
File metadata and controls
194 lines (177 loc) · 13.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Attendrix | Smart AI-Powered Attendance</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500;1,700&family=Inter:wght@100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="global-loader">
<div class="relative">
<div class="w-20 h-20 border-4 border-indigo-600/20 border-t-indigo-600 rounded-full animate-spin"></div>
<i data-lucide="scan-face" class="w-8 h-8 text-indigo-500 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></i>
</div>
<p class="mt-8 text-[10px] font-black uppercase tracking-[0.5em] text-indigo-400 animate-pulse">Initializing AI System</p>
</div>
<div id="cursor-dot"></div>
<div id="cursor-outline"></div>
<canvas id="snow-canvas"></canvas>
<header class="fixed top-0 left-0 right-0 z-50 glass-nav">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="flex items-center gap-3 transition-all hover:scale-105 group">
<div class="bg-indigo-600 p-2 rounded-xl shadow-lg shadow-indigo-600/40 group-hover:rotate-12 transition-transform">
<i data-lucide="scan-face" class="w-6 h-6 text-white"></i>
</div>
<div class="text-2xl font-black tracking-tighter text-white">Attendrix</div>
</a>
<ul class="hidden md:flex items-center space-x-12 text-gray-400 font-bold text-[11px] uppercase tracking-[0.2em]">
<li class="hover:text-white transition"><a href="#hero">Home</a></li>
<li class="dropdown-trigger">
<span class="flex items-center gap-1 hover:text-white transition cursor-pointer">Features <i data-lucide="chevron-down" class="w-3 h-3"></i></span>
<div class="dropdown-menu">
<ul class="bg-[#0a0a0f] border border-white/10 shadow-2xl rounded-2xl w-64 py-4 overflow-hidden">
<li><a href="#features" class="block px-6 py-2 hover:bg-white/5 transition text-xs text-gray-400 hover:text-white">AI Face Tracking</a></li>
<li><a href="#features" class="block px-6 py-2 hover:bg-white/5 transition text-xs text-gray-400 hover:text-white">Automated Entry</a></li>
</ul>
</div>
</li>
<li class="dropdown-trigger">
<span class="flex items-center gap-1 hover:text-white transition cursor-pointer">More <i data-lucide="chevron-down" class="w-3 h-3"></i></span>
<div class="dropdown-menu">
<ul class="bg-[#0a0a0f] border border-white/10 shadow-2xl rounded-2xl w-56 py-4 overflow-hidden">
<li><a href="#builders" class="block px-6 py-2 hover:bg-white/5 transition text-xs text-gray-400 hover:text-white">The Builders</a></li>
<li><a href="mailto:contact@attendrix.com" class="block px-6 py-2 hover:bg-white/5 transition text-xs text-gray-400 hover:text-white">Contact Us</a></li>
</ul>
</div>
</li>
</ul>
<div class="flex items-center gap-8">
<button onclick="navigateWithLoader('dashboard.html')" class="text-[10px] font-black uppercase tracking-widest text-gray-400 hover:text-white transition">Log In</button>
<button onclick="navigateWithLoader('https://docs.google.com/forms/d/e/1FAIpQLSeV9FC5nI054UvdCuKPc81bk_w-u4026KPfyHPhzEF3kHqaXw/viewform?usp=publish-editor')" class="px-8 py-3 rounded-full bg-white text-black font-black text-[10px] uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all duration-300">Register</button>
</div>
</nav>
</header>
<main id="hero" class="hero-section text-center px-6 overflow-hidden">
<div class="video-overlay">
<video autoplay muted loop playsinline>
<source src="hero-bg.mp4" type="video/mp4">
</video>
</div>
<div class="reveal relative z-10">
<div class="inline-flex items-center gap-2 bg-indigo-600/10 border border-indigo-600/20 px-4 py-2 rounded-full text-[10px] font-black tracking-[0.2em] text-indigo-400 mb-8 uppercase">
<i data-lucide="sparkles" class="w-3 h-3"></i> AI Attendance Intelligence
</div>
<h1 class="text-7xl md:text-[8.5rem] font-black tracking-tighter mb-6 leading-none cinematic-text">Attendrix</h1>
<p class="text-xl md:text-3xl font-extralight mb-12 text-gray-400 max-w-2xl mx-auto">One group photo. Instant identification. One Click.</p>
<div class="flex flex-col sm:flex-row justify-center gap-8">
<button onclick="navigateWithLoader('https://docs.google.com/forms/d/e/1FAIpQLSeV9FC5nI054UvdCuKPc81bk_w-u4026KPfyHPhzEF3kHqaXw/viewform?usp=publish-editor')" class="px-12 py-5 rounded-2xl font-black text-[11px] uppercase tracking-[0.2em] bg-indigo-600 text-white hover:bg-indigo-500 transition-all shadow-2xl shadow-indigo-600/30">Register</button>
<button onclick="navigateWithLoader('dashboard.html')" class="px-12 py-5 rounded-2xl font-black text-[11px] uppercase tracking-[0.2em] border border-white/20 hover:border-white transition-all">Demo</button>
</div>
</div>
</main>
<section id="features" class="container mx-auto px-6 py-32 relative z-10">
<div class="text-center mb-24 reveal">
<h3 class="text-5xl md:text-7xl font-black tracking-tighter">Features You'll <span class="text-indigo-500">Love</span></h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="feature-card p-12 rounded-[40px] reveal">
<div class="w-16 h-16 rounded-2xl bg-indigo-600/20 text-indigo-500 flex items-center justify-center mb-8"><i data-lucide="camera" class="w-8 h-8"></i></div>
<h4 class="text-2xl font-bold mb-4">AI Face Scan</h4>
<p class="text-gray-400 text-sm leading-relaxed">Simply capture a photo of the group, and our AI scans and identifies all students simultaneously.</p>
</div>
<div class="feature-card p-12 rounded-[40px] reveal" style="transition-delay: 0.1s;">
<div class="w-16 h-16 rounded-2xl bg-green-500/20 text-green-500 flex items-center justify-center mb-8"><i data-lucide="check-circle" class="w-8 h-8"></i></div>
<h4 class="text-2xl font-bold mb-4">Entry</h4>
<p class="text-gray-400 text-sm leading-relaxed">Manual logging required. The system automatically updates the database in real-time.</p>
</div>
<div class="feature-card p-12 rounded-[40px] reveal" style="transition-delay: 0.2s;">
<div class="w-16 h-16 rounded-2xl bg-yellow-500/20 text-yellow-500 flex items-center justify-center mb-8"><i data-lucide="zap" class="w-8 h-8"></i></div>
<h4 class="text-2xl font-bold mb-4">Priced Right!</h4>
<p class="text-gray-400 text-sm leading-relaxed">Why pay for expensive tracking? Attendrix is completely free for all educators.</p>
</div>
</div>
</section>
<section class="py-48 relative reveal overflow-hidden">
<div class="container mx-auto px-6 max-w-5xl text-center flex flex-col items-center">
<div class="quote-bg-symbol">“</div>
<p class="cinematic-quote text-4xl md:text-6xl italic text-gray-200 mb-12 relative z-10">
"Technology is just a tool. In terms of getting the kids working together and motivating them, the teacher is the most important thing."
</p>
<div class="flex items-center gap-6">
<div class="h-[1px] w-16 bg-indigo-500/40"></div>
<p class="text-[11px] font-black tracking-[0.5em] text-indigo-500 uppercase">Bill Gates</p>
<div class="h-[1px] w-16 bg-indigo-500/40"></div>
</div>
</div>
</section>
<section id="builders" class="container mx-auto px-6 py-32 border-t border-white/5 relative z-10">
<div class="text-center mb-24 reveal">
<h3 class="text-5xl md:text-7xl font-black tracking-tighter">The <span class="text-indigo-500">Builders</span></h3>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<div class="builder-card p-10 rounded-[40px] text-center reveal">
<div class="w-48 h-56 mx-auto rounded-3xl overflow-hidden mb-8 border border-white/10">
<img src="" alt="" class="w-full h-full object-cover builder-img" onerror="this.src='https://via.placeholder.com/400x500/111/fff?text=Manoj'">
</div>
<h4 class="text-xl font-black uppercase tracking-tight">nakshatra</h4>
<p class="text-indigo-400 text-[9px] font-bold uppercase tracking-widest mt-2">...</p>
</div>
<div class="builder-card p-10 rounded-[40px] text-center reveal" style="transition-delay: 0.1s;">
<div class="w-48 h-56 mx-auto rounded-3xl overflow-hidden mb-8 border border-indigo-500/20">
<img src="RJ.jpeg" alt="RJ" class="w-full h-full object-cover builder-img" onerror="this.src='https://via.placeholder.com/400x500/111/fff?text=RJ'">
</div>
<h4 class="text-xl font-black uppercase tracking-tight">RJ</h4>
<p class="text-indigo-400 text-[9px] font-bold uppercase tracking-widest mt-2">Fullstack Architect</p>
</div>
<div class="builder-card p-10 rounded-[40px] text-center reveal" style="transition-delay: 0.2s;">
<div class="w-48 h-56 mx-auto rounded-3xl overflow-hidden mb-8 border border-white/10">
<img src="" alt="Ayush" class="w-full h-full object-cover builder-img" onerror="this.src='https://via.placeholder.com/400x500/111/fff?text=Ayush'">
</div>
<h4 class="text-xl font-black uppercase tracking-tight">dhanunjay</h4>
<p class="text-indigo-400 text-[9px] font-bold uppercase tracking-widest mt-2">...</p>
</div>
</div>
</section>
<footer class="bg-[#020205] border-t border-white/5 pt-32 pb-12 relative z-10">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-20">
<div>
<h4 class="text-white font-black mb-8 text-[11px] uppercase tracking-widest">Platform</h4>
<ul class="space-y-4 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
<li><a href="#" class="hover:text-white transition">Fast Entry</a></li>
<li><a href="#" class="hover:text-white transition">Dashboards</a></li>
<li><a href="#" class="hover:text-white transition">Messaging</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-black mb-8 text-[11px] uppercase tracking-widest">Benefits</h4>
<ul class="space-y-4 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
<li><a href="#" class="hover:text-white transition">Track Anywhere</a></li>
<li><a href="#" class="hover:text-white transition">Free Tools</a></li>
<li><a href="#" class="hover:text-white transition">Data Export</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-black mb-8 text-[11px] uppercase tracking-widest">Company</h4>
<ul class="space-y-4 text-gray-500 text-[10px] font-bold uppercase tracking-widest">
<li><a href="#builders" class="hover:text-white transition">About Us</a></li>
<li><a href="mailto:contact@attendrix.com" class="hover:text-white transition">Contact</a></li>
</ul>
</div>
<div class="bg-indigo-600/5 p-8 rounded-[32px] border border-indigo-500/20">
<h4 class="text-white font-black mb-4 text-sm tracking-tighter">Ready to Start?</h4>
<a href="mailto:contact@attendrix.com" class="block w-full text-center py-4 bg-white text-black font-black text-[10px] uppercase tracking-widest rounded-2xl hover:bg-indigo-600 hover:text-white transition-all">Support</a>
</div>
</div>
<div class="text-center pt-12 border-t border-white/5">
<p class="text-[10px] text-gray-700 font-bold uppercase tracking-[0.5em]">© 2026 Attendrix AI. All Rights Reserved.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>