### Comprehensive UI/UX Design Specification for AttendEase #### **System Overview** AttendEase is a mobile-first attendance system combining facial recognition and geofencing. The interface features 28 screens across 3 user roles with consistent navigation patterns and responsive design. --- ### **Global Design Elements** 1. **Color Scheme**: - Primary Gradient: `#667eea` → `#764ba2` - Role Accents: - Student: `#5d3be3` - Lecturer: `#3b82e3` - Admin: `#9c3be3` - Success: `#28a745` - Warning: `#ffc107` - Danger: `#dc3545` 2. **Icons** (Font Awesome 6): - 👨‍🎓 Student role - 👨‍🏫 Lecturer role - 👨‍💼 Admin role - 📷 Camera (face scan) - 📍 Location pin - ✅ Check mark - ⚙️ Settings - 📊 Reports 3. **Logo Placement**: - Top-left corner (20px padding) - Size: 40x40px - Format: Your JPG logo ```html <!-- Implementation example --> <div class="app-logo"> <img src="your-logo.jpg" alt="AttendEase"> </div> ``` 4. **Responsive Behavior**: - Flexbox layouts reorganize on small screens - Font sizes scale: 16px → 14px on <360px screens - Touch targets minimum 44x44px - Media query breakpoint: 414px width --- ### **Page Inventory & Transitions** **Total Screens**: 28 **Navigation Flow**: ```mermaid graph TD A[Home] --> B[Role Select] B --> C1[Student Signup] B --> C2[Lecturer Signup] B --> C3[Admin Signup] B --> D1[Student Login] B --> D2[Lecturer Login] B --> D3[Admin Login] C1 --> E[2FA Verification] C2 --> E C3 --> E E --> F[Success Screen] F --> D1 D1 --> G1[Student Dashboard] D2 --> G2[Lecturer Dashboard] D3 --> G3[Admin Dashboard] G1 --> H1[Course Check-in] G1 --> H2[Attendance History] G1 --> H3[Student Profile] G2 --> I1[Session Management] G2 --> I2[Realtime Attendance] G2 --> I3[Lecturer Profile] G3 --> J1[User Management] G3 --> J2[Geofence Setup] G3 --> J3[System Settings] ``` --- ### **Core Screen Specifications** #### **1. Home Screen** - **Elements**: - App name (center) - 4 background slides (.jpg) - "Sign Up" and "Login" buttons (bottom) - **Icons**: None (clean layout) - **Behavior**: - Slides auto-rotate every 5s - Buttons open Role Selection modal #### **2. Role Selection Modal** - **Options**: - 👨‍🎓 Student: "Check-in to classes" - 👨‍🏫 Lecturer: "Manage attendance" - 👨‍💼 Admin: "System configuration" - **Action**: Click role → Opens corresponding form #### **3. Student Signup** - **Form Fields**: - Full Name: "John Doe" - Matricle: "CS2021001" - Department: "Computer Science" (dropdown) - Level: "300" (dropdown) - Gender: "Male" (dropdown) - Email: "john@university.edu" - Password: "••••••••" - **Special Sections**: - Face Registration: Camera icon 📷 with "Scan Face" button - Permissions: "Enable Camera Access" toggle - **Action**: Submit → Triggers 2FA email #### **4. 2FA Verification** - **Elements**: - 🔒 Icon (top) - 6-digit input boxes - "Resend Code" link - **Button**: "Verify & Continue" → Success Screen #### **5. Student Dashboard** - **Actionable Elements**: - Course Cards (3+): - "Data Structures" title - "10:00 AM" time - "Check In" button (gray/inactive) - Attendance Summary Cards: - "85%" (large text) - "Overall Attendance" label - **Behavior**: - "Check In" activates only when: 1. Lecturer starts session 2. Student is in geofenced area 3. Current time matches class #### **6. Check-in Process** 1. Tap "Check In" → Location verification 2. If GPS off → "Enable Location" prompt 3. Camera activates → "Blink to verify" instruction 4. Success → Green check animation 5. Failure → "Try Again" (max 3 attempts) #### **7. Lecturer Dashboard** - **Actionable Elements**: - "Start Session" button (green) - Course Cards: "Upload Student List" button - "Live Attendance" panel: - Student avatars - Real-time check-in status - **Manual Override**: 1. Tap student → "Mark Present/Absent" 2. Type justification 3. "Confirm Override" #### **8. Admin Dashboard** - **Management Cards**: - "Manage Lecturers": Assign courses - "Geofences": Add/Test locations - "Reports": Generate PDF/CSV - **Button Actions**: - "Add Lecturer": Opens form - "Define Geofence": Map interface --- ### **Data Flow** ```mermaid sequenceDiagram Student->>Mobile App: Tap Check-In Mobile App->>GPS: Verify Location GPS-->>Mobile App: Coordinates Mobile App->>Server: Location within geofence? Server-->>Mobile App: Yes/No Mobile App->>Camera: Activate Scan Camera->>AI: Facial Embeddings AI->>Database: Match Patterns Database-->>Server: Verification Result Server->>Lecturer Dashboard: Update Attendance Server->>Student: Success/Fail Notification ``` --- ### **Replication Guide** 1. **Viewport Setup**: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 2. **Responsive Grid**: ```css .course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; } @media (max-width: 414px) { .course-grid { grid-template-columns: 1fr; } } ``` 3. **Geofence Workflow**: - Lecturer selects classroom → Activates GPS check - Students within radius (50m) can see active "Check In" - Out-of-range students see "Move to classroom" warning 4. **Icon Implementation**: ```html <!-- Font Awesome inclusion --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <!-- Example icon --> <i class="fas fa-camera"></i> ``` 5. **Button Specifications**: | Button Text | Color | Action | |-------------------|-------------|---------------------------------| | Check In | Green (#28a745) | Initiate facial scan | | Start Session | Gradient | Activate class check-in | | Manual Override | Blue (#3b82e3) | Open student selection | | Export Report | Purple (#764ba2) | Generate PDF/CSV | --- ### **Error Handling** - **Failed Face Match**: 1. Gender mismatch → "Verification failed" 2. 3 failures → "Manual override requested" - **Location Issues**: - "Enable GPS" prompt with settings link - "You're 15m outside classroom" warning - **Session Conflicts**: - "Session ended" (button disables) - "Class starts in 15 minutes" notification This specification enables exact replication of AttendEase with all interactive elements, responsive behaviors, and real-life workflows. The design maintains consistency across 28 screens while adapting perfectly to any mobile screen size.

are you sure this is all. first provide the overall file structure then you work based on that

yes please