Luxury Supercars Website

A premium full-stack luxury supercar selling website built with HTML5, CSS3, JavaScript, PHP, and MySQL. Features stunning animations, responsive design, and a complete admin panel.

🚗 Features

Frontend

• Animated Hero Slider - Stunning car showcase with smooth transitions
• Responsive Design - Optimized for all devices (mobile, tablet, desktop)
• Advanced Animations - Hover effects, parallax scrolling, fade-in animations
• Car Filtering - Search and filter by brand, price, year, fuel type
• Car Details - Detailed car pages with image galleries
• Test Drive Booking - Interactive modal with form validation
• Contact Form - Professional contact page with validation
• Premium UI/UX - Dark luxury theme with gold accents

Backend (PHP/MySQL)

• RESTful API - Clean API endpoints for all operations
• Database Integration - Complete MySQL database with proper relationships
• Admin Panel - Secure dashboard for managing cars, requests, and messages
• Form Processing - Server-side validation and data sanitization
• Security - SQL injection prevention, input validation

Admin Features

• Car Management - Add, edit, delete cars with image uploads
• Test Drive Requests - View and manage customer requests
• Contact Messages - Handle customer inquiries
• Dashboard Statistics - Overview of system data
• Secure Authentication - Admin login system

🛠️ Technology Stack

• Frontend: HTML5, CSS3, JavaScript (ES6+)
• Backend: PHP 7.4+
• Database: MySQL 5.7+
• Server: XAMPP (Apache + MySQL + PHP)
• Icons: Font Awesome 6
• Fonts: Google Fonts (Inter, Playfair Display)

📦 Installation & Setup

Prerequisites

• XAMPP (or similar LAMP/WAMP stack)
• Web browser
• Text editor/IDE

Step 1: Download and Setup XAMPP

1. Download XAMPP from https://www.apachefriends.org/
2. Install XAMPP and start Apache and MySQL services
3. Open phpMyAdmin at http://localhost/phpmyadmin

Step 2: Database Setup

1. Create a new database called luxury_supercars
2. Import the SQL schema from database/schema.sql
3. The database will be populated with sample data automatically

Step 3: File Setup

1. Copy all project files to your XAMPP htdocs directory
2. Navigate to htdocs/luxury-supercars/ (or your chosen folder name)
3. Update database credentials in php/config.php if needed

Step 4: Access the Website

• Frontend: http://localhost/luxury-supercars/
• Admin Panel: http://localhost/luxury-supercars/admin.html
• phpMyAdmin: http://localhost/phpmyadmin

🔐 Admin Credentials

Default Admin Login:

• Username: admin
• Password: admin123

📁 Project Structure

luxury-supercars/
├── index.html              # Homepage
├── cars.html              # Car listing page
├── car-details.html       # Individual car details
├── contact.html           # Contact form page
├── admin.html             # Admin panel
├── css/
│   └── style.css          # Main stylesheet
├── js/
│   ├── script.js          # Main JavaScript
│   ├── cars.js            # Car listing functionality
│   ├── car-details.js     # Car details functionality
│   ├── contact.js         # Contact form functionality
│   └── admin.js           # Admin panel functionality
├── php/
│   ├── config.php         # Database configuration
│   └── api/
│       ├── cars.php       # Cars API endpoint
│       ├── test-drives.php # Test drives API
│       └── contact.php    # Contact messages API
├── database/
│   └── schema.sql         # Database schema and sample data
└── README.md              # This file

🎨 Design Features

Color Palette

• Primary Black: #0A0A0A
• Secondary Dark: #1A1A1A
• Luxury Gold: #D4AF37
• Light Gray: #666666
• White: #FFFFFF

Typography

• Headings: Playfair Display (serif)
• Body Text: Inter (sans-serif)
• Weights: 300, 400, 500, 600, 700

Animations

• Fade-in on scroll
• Hover zoom effects
• Smooth transitions
• Parallax scrolling
• Loading animations

🔧 API Endpoints

Cars API (/php/api/cars.php)

• GET - Retrieve all cars or specific car
• POST - Create new car (admin only)
• PUT - Update existing car (admin only)
• DELETE - Delete car (admin only)

Test Drives API (/php/api/test-drives.php)

• GET - Retrieve test drive requests (admin only)
• POST - Submit new test drive request
• PUT - Update request status (admin only)
• DELETE - Delete request (admin only)

Contact API (/php/api/contact.php)

• GET - Retrieve contact messages (admin only)
• POST - Submit new contact message
• PUT - Update message status (admin only)
• DELETE - Delete message (admin only)

📱 Responsive Breakpoints

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

🚀 Performance Features

• Lazy loading images
• Optimized CSS animations
• Efficient database queries
• Compressed assets
• Smooth scrolling

🔒 Security Features

• SQL injection prevention
• Input sanitization
• XSS protection
• CSRF protection
• Admin authentication

🎯 Browser Support

• Chrome 70+
• Firefox 65+
• Safari 12+
• Edge 79+

📝 Customization

Adding New Cars

1. Use the admin panel to add cars through the web interface
2. Or directly insert into the database via phpMyAdmin
3. Ensure image URLs are accessible

Styling Changes

• Modify css/style.css for design changes
• Update CSS custom properties for color scheme changes
• Adjust animations in the keyframes section

Functionality Extensions

• Add new API endpoints in the php/api/ directory
• Extend JavaScript functionality in respective JS files
• Add new database tables as needed

🐛 Troubleshooting

Common Issues

1. Database Connection Error

   • Check XAMPP MySQL service is running
   • Verify database credentials in php/config.php
   • Ensure database exists and is properly imported

2. Images Not Loading

   • Check image URLs are accessible
   • Verify image paths in database
   • Ensure proper file permissions

3. Admin Panel Not Working

   • Clear browser cache
   • Check JavaScript console for errors
   • Verify admin credentials

4. Forms Not Submitting

   • Check PHP error logs
   • Verify API endpoints are accessible
   • Ensure proper form validation

📞 Support

For support and questions:

• Check the troubleshooting section
• Review browser console for JavaScript errors
• Check PHP error logs in XAMPP
• Verify database connections and queries

🎉 Demo Data

The system comes with sample data including:

• 6 luxury supercars (Ferrari, Lamborghini, McLaren, etc.)
• Sample admin user
• Database structure with proper relationships

🔄 Updates

To update the system:

1. Backup your database
2. Replace files with new versions
3. Run any new SQL migrations
4. Clear browser cache

---

Enjoy your luxury supercar website! 🏎️✨