EXPLORE PERAK - STUDENT WEB DESIGN DEMO

Purpose:
A complete beginner-friendly multi-page website for classroom demonstration.

Pages:
1. index.html - Home
2. destinations.html - Destinations
3. gallery.html - Gallery
4. about.html - About
5. contact.html - Contact form
6. profile.html - Student profile

Files:
- css/style.css - all website styling
- js/script.js - mobile menu and contact form demo

How to run:
Double-click index.html OR open the folder using VS Code and Live Server.
No PHP, MySQL or database is required.

Teaching points:
- Common navigation across pages
- Relative links
- External CSS
- Responsive layout with media queries
- CSS Grid
- Hover effects
- HTML form
- Simple JavaScript DOM/event handling
- Student profile page

Note:
The visual backgrounds use CSS gradients so the website works immediately without missing image files. Students can later replace these backgrounds with their own images.

UPDATED FEATURES (1 OCT 2026)
- Student Profile renamed to Group Profile.
- Contact form now stores messages in MySQL (contact.php).
- Admin dashboard includes Destinations and Messages tables.
- Messages support Add, Edit and Delete.
- Delete confirmation uses a custom CSS modal popup (not browser confirm()).
- Table No. column is sequential (1,2,3...) even when database IDs have gaps after deletion.
- Active page/navigation button is bold, orange and underlined.
- Admin Login page now includes website navigation.
- Website and admin interface use sans-serif fonts throughout.

IMPORTANT: Re-import explore_perak_db.sql because it now includes the messages table.
