Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AttendAI Pro — AI-Powered Anti-Proxy Attendance System</title> | |
| <meta name="description" content="Production-ready AI-based attendance system with face recognition, GPS geofencing, and fraud detection for universities and organizations worldwide."> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="css/main.css"> | |
| <link rel="stylesheet" href="css/landing.css"> | |
| </head> | |
| <body> | |
| <!-- Loading Screen --> | |
| <div class="loading-screen" id="loadingScreen"> | |
| <div class="loading-logo">Attend<span>AI</span> Pro</div> | |
| <div style="color:rgba(255,255,255,0.4);font-size:14px;margin-top:-10px">Initializing secure environment...</div> | |
| <div class="loading-bar"><div class="loading-bar-fill"></div></div> | |
| </div> | |
| <!-- Setup Banner (shown when OAuth not configured) --> | |
| <div id="setupBanner" style="display:none;background:linear-gradient(90deg,#F59E0B,#EF4444);color:white;padding:12px 24px;text-align:center;font-size:14px;font-weight:600;position:sticky;top:0;z-index:300"> | |
| ⚙️ <strong>Setup Required:</strong> Configure your Google OAuth Client ID in <code style="background:rgba(255,255,255,0.2);padding:2px 8px;border-radius:4px">js/config.js</code> to enable authentication. | |
| <a href="#" onclick="document.getElementById('setupBanner').style.display='none'" style="color:white;text-decoration:underline">Dismiss</a> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="landing-nav"> | |
| <div class="nav-container"> | |
| <div class="nav-logo"> | |
| <div class="logo-mark"> | |
| <svg width="28" height="28" viewBox="0 0 28 28" fill="none"> | |
| <rect width="28" height="28" rx="8" fill="#4F46E5"/> | |
| <path d="M14 6C9.58 6 6 9.58 6 14s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2a9.79 9.79 0 01-7-3.08C7.02 18.18 10.36 17 14 17s6.98 1.18 7 3.12A9.79 9.79 0 0114 23.2z" fill="white"/> | |
| </svg> | |
| </div> | |
| <span class="nav-brand">Attend<span>AI</span> Pro</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#features" class="nav-link">Features</a> | |
| <a href="#how-it-works" class="nav-link">How It Works</a> | |
| <a href="#security" class="nav-link">Security</a> | |
| <a href="#pricing" class="nav-link">For Institutions</a> | |
| </div> | |
| <div class="nav-cta"> | |
| <a href="#role-select" class="btn btn-primary">Login →</a> | |
| </div> | |
| <button class="nav-hamburger" id="navHamburger">☰</button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="mobile-nav" id="mobileNav"> | |
| <a href="#features">Features</a> | |
| <a href="#how-it-works">How It Works</a> | |
| <a href="#security">Security</a> | |
| <a href="#role-select" class="btn btn-primary btn-full">Login</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="hero-bg"> | |
| <div class="hero-blob blob-1"></div> | |
| <div class="hero-blob blob-2"></div> | |
| <div class="hero-grid"></div> | |
| </div> | |
| <div class="hero-container"> | |
| <div class="hero-badge"> | |
| <span class="badge-pulse"></span> | |
| AI-Powered • Real-Time • Zero-Proxy | |
| </div> | |
| <h1 class="hero-title"> | |
| Attendance That<br> | |
| <span class="gradient-text">Cannot Be Faked</span> | |
| </h1> | |
| <p class="hero-subtitle"> | |
| The world's most advanced anti-proxy attendance system — combining face recognition, | |
| GPS geofencing, and behavioral AI to ensure every attendance record is genuine. | |
| </p> | |
| <div class="hero-actions"> | |
| <a href="#role-select" class="btn btn-primary btn-xl hero-btn-primary"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M13 12H3"/></svg> | |
| Access Your Portal | |
| </a> | |
| <a href="#how-it-works" class="btn btn-secondary btn-xl"> | |
| Watch How It Works | |
| </a> | |
| </div> | |
| <div class="hero-stats"> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">99.8%</div> | |
| <div class="hero-stat-label">Fraud Detection Rate</div> | |
| </div> | |
| <div class="hero-stat-divider"></div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value"><3s</div> | |
| <div class="hero-stat-label">Attendance Marking</div> | |
| </div> | |
| <div class="hero-stat-divider"></div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">Zero</div> | |
| <div class="hero-stat-label">Proxy Tolerance</div> | |
| </div> | |
| <div class="hero-stat-divider"></div> | |
| <div class="hero-stat"> | |
| <div class="hero-stat-value">∞</div> | |
| <div class="hero-stat-label">Scalability</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hero-scroll-indicator"> | |
| <span>Scroll to explore</span> | |
| <div class="scroll-arrow"></div> | |
| </div> | |
| </section> | |
| <!-- Role Selection Section --> | |
| <section class="role-section" id="role-select"> | |
| <div class="role-container"> | |
| <div class="section-label">SECURE PORTAL ACCESS</div> | |
| <h2 class="section-title-lg">Choose Your Role</h2> | |
| <p class="section-subtitle">All access is verified through Google OAuth and institutional database records. Unauthorized users will be denied immediately.</p> | |
| <div class="role-cards"> | |
| <!-- Student Role --> | |
| <div class="role-card role-student" onclick="navigateTo('student-login.html')"> | |
| <div class="role-card-glow"></div> | |
| <div class="role-icon-wrap student-icon"> | |
| <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M22 10v6M2 10l10-5 10 5-10 5z"/> | |
| <path d="M6 12v5c3 3 9 3 12 0v-5"/> | |
| </svg> | |
| </div> | |
| <h3>Student</h3> | |
| <p>Mark attendance via QR scan with face verification and GPS validation</p> | |
| <ul class="role-features"> | |
| <li>✓ Scan QR code to attend</li> | |
| <li>✓ Live face verification</li> | |
| <li>✓ GPS location check</li> | |
| <li>✓ View attendance history</li> | |
| </ul> | |
| <div class="role-btn"> | |
| Student Login | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg> | |
| </div> | |
| <div class="role-card-footer"> | |
| <span>🔒</span> Requires institutional email | |
| </div> | |
| </div> | |
| <!-- Teacher Role --> | |
| <div class="role-card role-teacher featured" onclick="navigateTo('teacher-login.html')"> | |
| <div class="featured-badge">Most Used</div> | |
| <div class="role-card-glow"></div> | |
| <div class="role-icon-wrap teacher-icon"> | |
| <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="2" y="3" width="20" height="14" rx="2"/> | |
| <path d="M8 21h8M12 17v4"/> | |
| </svg> | |
| </div> | |
| <h3>Teacher / Faculty</h3> | |
| <p>Generate QR sessions, monitor real-time attendance, and detect fraud instantly</p> | |
| <ul class="role-features"> | |
| <li>✓ Generate live QR sessions</li> | |
| <li>✓ Real-time attendance tracking</li> | |
| <li>✓ AI fraud alerts</li> | |
| <li>✓ Reports & analytics</li> | |
| </ul> | |
| <div class="role-btn teacher-btn"> | |
| Teacher Login | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg> | |
| </div> | |
| <div class="role-card-footer"> | |
| <span>🔒</span> Pre-approved accounts only | |
| </div> | |
| </div> | |
| <!-- Admin Role --> | |
| <div class="role-card role-admin" onclick="navigateTo('admin-panel.html')"> | |
| <div class="role-card-glow"></div> | |
| <div class="role-icon-wrap admin-icon"> | |
| <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/> | |
| <path d="M9 12l2 2 4-4"/> | |
| </svg> | |
| </div> | |
| <h3>Developer / Admin</h3> | |
| <p>Full system control: manage users, configure rules, view logs and analytics</p> | |
| <ul class="role-features"> | |
| <li>✓ User management</li> | |
| <li>✓ System configuration</li> | |
| <li>✓ Audit logs</li> | |
| <li>✓ AI model oversight</li> | |
| </ul> | |
| <div class="role-btn admin-btn"> | |
| Admin Panel | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg> | |
| </div> | |
| <div class="role-card-footer"> | |
| <span>🔒</span> Restricted access only | |
| </div> | |
| </div> | |
| </div> | |
| <div class="auth-notice"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg> | |
| All logins are authenticated via <strong>Google OAuth 2.0</strong>. Your account must be pre-registered by your institution's administrator. | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="features-section" id="features"> | |
| <div class="features-container"> | |
| <div class="section-label">CORE CAPABILITIES</div> | |
| <h2 class="section-title-lg">Everything You Need to Eliminate Proxy</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon" style="background:rgba(79,70,229,0.1);color:#4F46E5">🤖</div> | |
| <h3>AI Face Recognition</h3> | |
| <p>Deep learning models verify student identity in real-time. No photo or video tricks can fool our liveness detection system.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon" style="background:rgba(6,182,212,0.1);color:#06B6D4">📍</div> | |
| <h3>GPS Geofencing</h3> | |
| <p>Attendance is only accepted from within a configurable radius (default 100m) of the classroom. VPN-based location spoofing is detected.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon" style="background:rgba(16,185,129,0.1);color:#10B981">📱</div> | |
| <h3>Rotating QR Codes</h3> | |
| <p>QR codes refresh every 60 seconds. Screenshot sharing is completely useless — each session token is unique and time-bound.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon" style="background:rgba(245,158,11,0.1);color:#F59E0B">⚡</div> | |
| <h3>Real-Time Updates</h3> | |
| <p>Teacher dashboards update live as students mark attendance. No page refresh needed — see exactly who's present, absent, or late.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon" style="background:rgba(239,68,68,0.1);color:#EF4444">🛡️</div> | |
| <h3>Fraud Detection AI</h3> | |
| <p>Behavioral analysis detects multiple device usage, GPS spoofing, repeated failures, and unusual patterns, triggering immediate alerts.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon" style="background:rgba(124,58,237,0.1);color:#7C3AED">📊</div> | |
| <h3>Predictive Analytics</h3> | |
| <p>AI forecasts which students are at risk of falling below the 75% threshold and alerts teachers before it becomes a problem.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon" style="background:rgba(59,130,246,0.1);color:#3B82F6">🔐</div> | |
| <h3>Google OAuth Only</h3> | |
| <p>No passwords to hack. Authentication is handled entirely by Google's secure OAuth 2.0. All tokens are verified server-side.</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon" style="background:rgba(16,185,129,0.1);color:#10B981">📄</div> | |
| <h3>Automated Reports</h3> | |
| <p>Generate detailed attendance reports by date, class, or student. Export to CSV/PDF. All data is 100% verified and real.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="how-section" id="how-it-works"> | |
| <div class="how-container"> | |
| <div class="section-label">THE PROCESS</div> | |
| <h2 class="section-title-lg">How Anti-Proxy Attendance Works</h2> | |
| <div class="how-tabs"> | |
| <button class="how-tab active" onclick="switchTab('student')">For Students</button> | |
| <button class="how-tab" onclick="switchTab('teacher')">For Teachers</button> | |
| </div> | |
| <div class="how-steps" id="studentSteps"> | |
| <div class="step-card"> | |
| <div class="step-number">01</div> | |
| <div class="step-content"> | |
| <h3>Login with Google</h3> | |
| <p>Authenticate using your institutional Google account. System verifies your email against the registered student database.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">02</div> | |
| <div class="step-content"> | |
| <h3>Scan Teacher's QR Code</h3> | |
| <p>Use your phone to scan the live QR displayed by your teacher. The code changes every 60 seconds — no screenshots work.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">03</div> | |
| <div class="step-content"> | |
| <h3>Enter Roll Number</h3> | |
| <p>Type your roll number for cross-verification. It must match your registered profile exactly.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">04</div> | |
| <div class="step-content"> | |
| <h3>Face Capture + GPS</h3> | |
| <p>Camera opens for a live selfie. Simultaneously, GPS verifies you're within the classroom geofence. Both must pass.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">05</div> | |
| <div class="step-content"> | |
| <h3>Instant Confirmation</h3> | |
| <p>AI verifies all data points in under 3 seconds. Attendance is marked with a timestamp, and you receive confirmation.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="how-steps hidden" id="teacherSteps"> | |
| <div class="step-card"> | |
| <div class="step-number">01</div> | |
| <div class="step-content"> | |
| <h3>Login & Start Session</h3> | |
| <p>Authenticate with your approved teacher account. Create a new attendance session for your class and subject.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">02</div> | |
| <div class="step-content"> | |
| <h3>Display Live QR Code</h3> | |
| <p>A rotating QR code is generated and refreshes every 60 seconds. Project it on the board for students to scan.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">03</div> | |
| <div class="step-content"> | |
| <h3>Watch Live Updates</h3> | |
| <p>The dashboard updates in real-time as students mark attendance. See each student's name, roll number, and verification status.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">04</div> | |
| <div class="step-content"> | |
| <h3>Receive Fraud Alerts</h3> | |
| <p>AI instantly flags suspicious behavior — duplicate devices, GPS spoofing, face mismatch — with detailed alert notifications.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">05</div> | |
| <div class="step-content"> | |
| <h3>End Session & Report</h3> | |
| <p>Close the session to auto-generate present/absent lists. Export reports or view analytics with one click.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Security Section --> | |
| <section class="security-section" id="security"> | |
| <div class="security-container"> | |
| <div class="security-content"> | |
| <div class="section-label light">ENTERPRISE SECURITY</div> | |
| <h2 style="color:white">Zero Compromise on Security</h2> | |
| <p style="color:rgba(255,255,255,0.7);margin:16px 0 32px">Every layer of the system is hardened against fraud, abuse, and unauthorized access.</p> | |
| <div class="security-list"> | |
| <div class="security-item"> | |
| <div class="security-check">✓</div> | |
| <div><strong>Google OAuth 2.0 Only</strong> — No passwords, no phishing risk</div> | |
| </div> | |
| <div class="security-item"> | |
| <div class="security-check">✓</div> | |
| <div><strong>JWT Session Management</strong> — Secure, time-bound tokens</div> | |
| </div> | |
| <div class="security-item"> | |
| <div class="security-check">✓</div> | |
| <div><strong>Multi-Factor Attendance</strong> — QR + Face + GPS + Roll Number</div> | |
| </div> | |
| <div class="security-item"> | |
| <div class="security-check">✓</div> | |
| <div><strong>Device Fingerprinting</strong> — Detect multiple device usage</div> | |
| </div> | |
| <div class="security-item"> | |
| <div class="security-check">✓</div> | |
| <div><strong>Real-Time Fraud Detection</strong> — Behavioral AI monitoring</div> | |
| </div> | |
| <div class="security-item"> | |
| <div class="security-check">✓</div> | |
| <div><strong>Audit Trail</strong> — Every action logged with IP and timestamp</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="security-visual"> | |
| <div class="shield-graphic"> | |
| <div class="shield-layers"> | |
| <div class="shield-layer l1">Face AI</div> | |
| <div class="shield-layer l2">GPS Guard</div> | |
| <div class="shield-layer l3">QR Token</div> | |
| <div class="shield-layer l4">OAuth 2.0</div> | |
| <div class="shield-center">🛡️</div> | |
| </div> | |
| <div class="shield-label">4-Layer Verification</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="landing-footer"> | |
| <div class="footer-container"> | |
| <div class="footer-brand"> | |
| <div class="footer-logo">Attend<span>AI</span> Pro</div> | |
| <p>The most trusted AI-based attendance system for universities, colleges, and organizations worldwide.</p> | |
| <div class="footer-badges"> | |
| <span class="tech-badge">React Ready</span> | |
| <span class="tech-badge">Node.js</span> | |
| <span class="tech-badge">MongoDB</span> | |
| <span class="tech-badge">Redis</span> | |
| <span class="tech-badge">WebSockets</span> | |
| </div> | |
| </div> | |
| <div class="footer-links-group"> | |
| <h4>Product</h4> | |
| <a href="#features">Features</a> | |
| <a href="#security">Security</a> | |
| <a href="#how-it-works">How It Works</a> | |
| </div> | |
| <div class="footer-links-group"> | |
| <h4>Portals</h4> | |
| <a href="student-login.html">Student Login</a> | |
| <a href="teacher-login.html">Teacher Login</a> | |
| <a href="admin-panel.html">Admin Panel</a> | |
| </div> | |
| <div class="footer-links-group"> | |
| <h4>Technology</h4> | |
| <a href="#">API Documentation</a> | |
| <a href="#">System Architecture</a> | |
| <a href="#">Security Whitepaper</a> | |
| </div> | |
| </div> | |
| <div class="footer-bottom"> | |
| <span>© 2024 AttendAI Pro. All rights reserved. Built for real-world production use.</span> | |
| <span>v2.0.0 • Zero Demo Data Policy</span> | |
| </div> | |
| </footer> | |
| <script src="js/config.js"></script> | |
| <script> | |
| // Check if already logged in → redirect to appropriate dashboard | |
| window.addEventListener('DOMContentLoaded', () => { | |
| setTimeout(() => { | |
| document.getElementById('loadingScreen').style.opacity = '0'; | |
| document.getElementById('loadingScreen').style.transition = '0.5s'; | |
| setTimeout(() => document.getElementById('loadingScreen').style.display = 'none', 500); | |
| }, 1200); | |
| const user = AuthState.get(); | |
| if (user) { | |
| if (user.role === 'student') window.location.href = 'student-dashboard.html'; | |
| else if (user.role === 'teacher') window.location.href = 'teacher-dashboard.html'; | |
| else if (user.role === 'admin') window.location.href = 'admin-panel.html'; | |
| } | |
| // Show setup banner if OAuth not configured | |
| if (APP_CONFIG.googleClientId === 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com') { | |
| document.getElementById('setupBanner').style.display = 'block'; | |
| } | |
| }); | |
| // Navigation | |
| function navigateTo(page) { window.location.href = page; } | |
| // Mobile nav | |
| document.getElementById('navHamburger').addEventListener('click', () => { | |
| document.getElementById('mobileNav').classList.toggle('open'); | |
| }); | |
| // How it works tabs | |
| function switchTab(tab) { | |
| document.querySelectorAll('.how-tab').forEach(t => t.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| document.getElementById('studentSteps').classList.toggle('hidden', tab !== 'student'); | |
| document.getElementById('teacherSteps').classList.toggle('hidden', tab !== 'teacher'); | |
| } | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(a => { | |
| a.addEventListener('click', e => { | |
| e.preventDefault(); | |
| const target = document.querySelector(a.getAttribute('href')); | |
| if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' }); | |
| }); | |
| }); | |
| // Intersection observer for animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('animate-in'); }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.feature-card, .role-card, .step-card, .security-item').forEach(el => observer.observe(el)); | |
| </script> | |
| </body> | |
| </html> | |