# EV Seminar Registration System - Presentation

## Overview
This is a professional HTML5 presentation for the **EV Seminar Registration System** project, created for the **SEHS4701 Advanced Information Systems Development** course.

The presentation is designed for a **25-minute presentation** with **18 comprehensive slides** covering all aspects of the full-stack application.

## 📋 Presentation Structure

### Slides Overview

1. **Title Slide** - Project introduction with team details
2. **Project Overview** - Objectives, scope, and stakeholders
3. **Problem Statement & Motivation** - Current challenges and solutions
4. **System Architecture Overview** - Two-tier architecture design
5. **Technology Stack - Frontend** - Next.js, React, TypeScript, Tailwind CSS
6. **Technology Stack - Backend** - Spring Boot, Java 21, MySQL
7. **Database Design** - Entity relationships and schema
8. **Key Features - User Perspective** - User-facing functionality
9. **Key Features - Admin Perspective** - Administrative capabilities
10. **API Endpoints Summary** - RESTful API overview
11. **User Registration Flow** - 3-step registration process
12. **Seminar Registration Workflow** - Complete booking flow
13. **Security & Best Practices** - Security measures
14. **Deployment & Setup** - Installation and configuration
15. **Challenges & Solutions** - Technical challenges faced
16. **Project Achievements & Metrics** - What was accomplished
17. **Future Enhancements** - Roadmap for improvements
18. **Conclusion & Team** - Summary and team member credits

## 👥 Project Team

- **Lee Cheuk Him** (24076812S)
- **Chan Suet Ying** (24064653S)
- **Sin Cheuk Wai** (24063411S)
- **Lee Men Ngai** (24064468S)
- **Ng Ho Yin** (24042206S)
- **HO Hoi Kit** (24060170S)

## 🎨 Design Features

### Visual Design
- **Aspect Ratio**: 16:9 (widescreen)
- **Color Scheme**: 
  - Primary: Cyan (#00D4FF)
  - Accent: Teal (#4ECDC4)
  - Danger: Red (#FF6B6B)
- **Typography**: Modern sans-serif with Segoe UI
- **Animations**: Smooth transitions with 3D perspective effects

### Custom SVG Decorations
All decorative elements are created with inline SVG, including:
- Geometric shapes (circles, triangles, rectangles)
- Icons for features and concepts
- Flow diagrams and connections
- No external icon libraries used

### Responsive Elements
- Grid-based layouts
- Flexbox arrangements
- Hover effects and transitions
- Smooth scrolling within slides

## 🎮 Navigation Controls

### Keyboard Shortcuts
- **→ Arrow Right / Space / Enter**: Next slide
- **← Arrow Left**: Previous slide
- **Home**: First slide
- **End**: Last slide

### Mouse & Touch
- **Mouse Wheel**: Scroll up/down to navigate
- **Touch Swipe**: Left/right swipe for slide navigation
- **Click Buttons**: Use prev/next buttons at bottom

### On-Screen Controls
- Previous/Next buttons
- Slide counter (e.g., "5 / 18")
- Progress bar at the top

## 📁 File Structure

```
presentation/
├── index.html              # Main presentation file (all 18 slides)
├── assets/
│   ├── style.css          # Complete styling
│   ├── script.js          # Navigation and interactivity
│   └── images/            # Image folder (for future use)
└── README.md              # This file
```

## 🚀 How to Use

### Opening the Presentation
1. Open the `index.html` file in any modern web browser
2. Or access via local server: `http://localhost/seminar/presentation/`

### Navigating Slides
- Use keyboard arrow keys
- Use mouse wheel to scroll
- Use touch swipe on mobile devices
- Click the Previous/Next buttons
- Use keyboard shortcuts (Home/End for first/last slide)

### Full-Screen Mode
Most browsers support full-screen presentations:
- Press **F11** for full-screen (browser-specific)
- Or present using the browser's presentation mode

## 💻 Technical Stack

- **HTML5**: Semantic markup and structure
- **CSS3**: Modern styling with gradients, animations, and transitions
- **JavaScript (Vanilla)**: Navigation without external dependencies
- **SVG**: All decorative elements created with inline SVG

## 🎯 Presentation Timing (25 minutes)

Recommended speaking time per slide:
- **Slides 1-2**: 1 minute (Title + Overview)
- **Slides 3-7**: 3 minutes (Problem, Architecture, Tech Stack, Database)
- **Slides 8-10**: 2.5 minutes (Features & API)
- **Slides 11-12**: 2 minutes (Workflows)
- **Slides 13-15**: 3 minutes (Security, Deployment, Challenges)
- **Slides 16-18**: 2.5 minutes (Achievements, Future, Conclusion)

**Total**: ~25 minutes

## 📊 Content Highlights

### Technical Depth
- Full-stack architecture
- 20+ API endpoints
- 5+ database tables
- Dual user roles with RBAC
- Email automation system
- Async processing

### User Experience
- 8 main pages
- Responsive design
- Multi-language support
- Theme switching
- Intuitive workflows

### Security
- Bcrypt password hashing
- JWT authentication
- Email verification
- CORS configuration
- Global error handling

## 🔧 Customization

To modify the presentation:

1. **Edit Slide Content**: Modify the HTML slide sections in `index.html`
2. **Change Colors**: Update CSS variables in `style.css` (lines 8-14)
3. **Adjust Sizing**: Modify padding/font-size values in style.css
4. **Update SVG Icons**: Edit the SVG elements within slide divs

## 🌐 Browser Compatibility

Works on all modern browsers:
- Chrome/Chromium 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## 📝 Notes for Presenters

1. **Practice Timing**: Use the built-in slide counter to keep track
2. **Presenter Mode**: Use keyboard shortcuts to navigate discreetly
3. **Zoom Control**: Disabled for presentation consistency (use browser zoom if needed)
4. **Smooth Transitions**: All animations are optimized for 60fps
5. **Offline Ready**: Entire presentation works without internet connection

## ✨ Features

✓ All 18 slides with complete content
✓ Professional gradient design
✓ Smooth 3D animations
✓ Keyboard & mouse navigation
✓ Touch gesture support
✓ Progress bar tracking
✓ Responsive layouts
✓ No external dependencies
✓ All 6 team members listed
✓ Custom SVG decorations

---

**Created for**: SEHS4701 Advanced Information Systems Development  
**Project**: EV Seminar Registration System  
**Date**: April 2026
