Attendify_website/index.html at main · Setur413/Attendify_website · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Attendify - QR Code Class Attendance App</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📱</text></svg>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Header -->
    <header>
        <div class="container">
            <nav class="navbar">
                <div class="logo">
                    <i class="fas fa-qrcode"></i>
                    <span>Attendify</span>
                </div>
                <ul class="nav-links">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#how-it-works">How It Works</a></li>
                    <li><a href="#screenshots">Screenshots</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
                <div class="mobile-menu">
                    <i class="fas fa-bars"></i>
                </div>
            </nav>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero" id="home">
        <div class="container">
            <h1>Revolutionizing Class Attendance with QR Codes</h1>
            <p>Attendify is a secure, efficient, and fraud-resistant mobile application that automates class attendance tracking using QR codes with geolocation verification and IP authentication.</p>
            <a href="https://github.com/Setur413/AUTOMATED_ATTENDANCE/releases/download/v1.0.0/app-release.apk
" class="btn">Download App</a>
            <a href="#features" class="btn btn-secondary">Learn More</a>
        </div>
    </section>

    <!-- Features Section -->
    <section class="section" id="features">
        <div class="container">
            <div class="section-title">
                <h2>Key Features</h2>
                <p>Discover how Attendify transforms traditional attendance tracking with modern technology</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-qrcode"></i>
                    </div>
                    <h3>QR Code Attendance</h3>
                    <p>Students scan unique, time-limited QR codes generated by lecturers to mark attendance quickly and securely.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <h3>Geolocation Verification</h3>
                    <p>Confirm student presence within classroom boundaries using precise location tracking to prevent proxy attendance.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-network-wired"></i>
                    </div>
                    <h3>IP Address Validation</h3>
                    <p>Verify connection to institutional networks to ensure attendance is marked from authorized locations.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3>Device Authentication</h3>
                    <p>Link attendance records to specific registered devices, preventing credential sharing and unauthorized access.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-chart-bar"></i>
                    </div>
                    <h3>Automated Reporting</h3>
                    <p>Generate comprehensive attendance reports and analytics with just a few clicks, saving valuable administrative time.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <h3>Cloud-Based Storage</h3>
                    <p>Securely store attendance data in the cloud with Firebase, ensuring accessibility and reliability.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section class="section how-it-works" id="how-it-works">
        <div class="container">
            <div class="section-title">
                <h2>How It Works</h2>
                <p>Simple three-step process for efficient attendance management</p>
            </div>
            <div class="steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <h3>Generate QR Code</h3>
                    <p>Lecturers create unique, time-limited QR codes for each class session using the Attendify app.</p>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <h3>Scan & Verify</h3>
                    <p>Students scan the QR code with their mobile devices, automatically verifying location and device.</p>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <h3>Record & Report</h3>
                    <p>Attendance is instantly recorded in the system, and reports are automatically generated for lecturers.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- App Screenshots Section -->
    <section class="section screenshots" id="screenshots">
        <div class="container">
            <div class="section-title">
                <h2>App Screenshots</h2>
                <p>Get a glimpse of the Attendify app interface and functionality</p>
            </div>
            <div class="screenshot-container">
                <div class="screenshot-placeholder">
                    <i class="fas fa-qrcode"></i>
                    <p>QR Code Scanner</p>
                </div>
                <div class="screenshot-placeholder">
                    <i class="fas fa-user-graduate"></i>
                    <p>Student Dashboard</p>
                </div>
                <div class="screenshot-placeholder">
                    <i class="fas fa-chalkboard-teacher"></i>
                    <p>Lecturer Interface</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Download Section -->
    <section class="download-section" id="download">
        <div class="container">
            <h2>Download Attendify Now</h2>
            <p>Get started with the most efficient attendance tracking solution for educational institutions</p>
            <a href="#" class="btn btn-download" id="downloadBtn">
                <i class="fas fa-download"></i> Download App
            </a>
            <p style="margin-top: 15px; font-size: 0.9rem;">Available for Android devices</p>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section class="section testimonials">
        <div class="container">
            <div class="section-title">
                <h2>What Users Say</h2>
                <p>Feedback from educators and students who have experienced Attendify</p>
            </div>
            <div class="testimonial-slider">
                <div class="testimonial">
                    <p class="testimonial-text">"Attendify has completely transformed how I track attendance in my large classes. The process is quick, accurate, and I no longer have to worry about proxy attendance."</p>
                    <p class="testimonial-author">- Dr. Jane, Computer Science Department</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section class="section" id="contact">
        <div class="container">
            <div class="section-title">
                <h2>Get In Touch</h2>
                <p>Interested in implementing Attendify at your institution? Contact us for more information</p>
            </div>
            <div class="contact-form">
                <form id="contactForm" netlify>
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" id="name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" id="email" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="institution">Institution</label>
                        <input type="text" id="institution" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" class="form-control" rows="5" required></textarea>
                    </div>
                    <button type="submit" class="btn">Send Message</button>
                </form>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>Attendify</h3>
                    <p>A secure, efficient QR code-based attendance tracking system.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                        <a href="#"><i class="fab fa-linkedin-in"></i></a>
                        <a href="#"><i class="fab fa-github"></i></a>
                    </div>
                </div>
                <div class="footer-column">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#features">Features</a></li>
                        <li><a href="#how-it-works">How It Works</a></li>
                        <li><a href="#screenshots">Screenshots</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Contact Info</h3>
                    <ul class="footer-links">
                        <li><i class="fas fa-map-marker-alt"></i> University of Kabianga, Kenya</li>
                        <li><i class="fas fa-envelope"></i> [email protected]</li>
                        <li><i class="fas fa-phone"></i> +254 724 492 630</li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2023 Attendify. All Rights Reserved. | COM 423 - Computer Science Project</p>
            </div>
        </div>
    </footer>

<script src="script.js"></script>
</body>
</html>