admin/38703-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sadiq

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-23 11:06:46 +00:00
parent a53d29cad2
commit 4f8d01cddc
5 changed files with 424 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
MONOGRAPH.md Normal file
View File

@ -0,0 +1,132 @@
# Comprehensive Project Monograph: Advanced Vehicle Marketplace System
## 1. Introduction
This document serves as a complete technical monograph for the Vehicle Marketplace System, a full-stack web application designed for the educational sector and general vehicle trading. This system provides a robust platform for users to list vehicles, manage sales, and for buyers to submit purchase requests through a secure, modern interface.
## 2. System Architecture
The application follows a modular LAMP (Linux, Apache, MySQL/MariaDB, PHP) architecture. It is designed to be scalable, secure, and user-centric.
### 2.1 Backend Layer
- **Language:** PHP 8.x (Vanilla PHP for maximum performance and compatibility).
- **Database Interaction:** PDO (PHP Data Objects) with prepared statements to prevent SQL injection.
- **Session Management:** Secure PHP sessions for user authentication and role-based access control.
### 2.2 Frontend Layer
- **HTML5 & CSS3:** Modern semantic markup and advanced styling.
- **Design Paradigm:** Sophisticated Dark Theme with Glassmorphism effects.
- **Typography:** Inter font family for high legibility and professional aesthetics.
- **Responsive Design:** Mobile-first approach using CSS Grid and Flexbox.
### 2.3 Database Layer
- **Engine:** MariaDB/MySQL.
- **Schema Design:** Normalized relational structure with foreign key constraints.
## 3. Technology Stack Detail
### 3.1 PHP (Hypertext Preprocessor)
Used for all server-side logic, including:
- User registration and authentication.
- CRUD operations for vehicle listings.
- Purchase request processing.
- Admin panel logic.
- Email notifications via `MailService.php`.
### 3.2 MariaDB
The database stores all critical information:
- **users table:** Stores user credentials, contact info (phone, address), and roles.
- **cars table:** Stores vehicle details (brand, model, price, description, status).
- **car_images table:** Manages multiple images per vehicle with a primary image flag.
- **purchases table:** Tracks buying requests, bank transaction IDs, and status (pending/approved/rejected).
- **messages table:** Stores contact form submissions.
### 3.3 CSS (Cascading Style Sheets)
The styling is centralized in `assets/css/style.css`, featuring:
- **Custom Variables:** `--primary-color` (Gold), `--bg-color` (Deep Slate), etc.
- **Glassmorphism:** Using `backdrop-filter: blur()` and semi-transparent backgrounds for a premium feel.
- **Animations:** Smooth transitions (`cubic-bezier`) for interactive elements.
## 4. Database Schema Specification
### 4.1 Table: users
| Column | Type | Description |
|---|---|---|
| id | INT | Primary Key, Auto-increment |
| username | VARCHAR(50) | Unique username |
| password | VARCHAR(255) | Hashed password |
| email | VARCHAR(100) | Unique email |
| phone | VARCHAR(20) | User contact number |
| address | TEXT | User physical address |
| role | ENUM | 'user' or 'admin' |
| created_at | TIMESTAMP | Account creation date |
### 4.2 Table: cars
| Column | Type | Description |
|---|---|---|
| id | INT | Primary Key |
| user_id | INT | Foreign Key to users |
| brand | VARCHAR(50) | Vehicle brand |
| model | VARCHAR(50) | Vehicle model |
| year | INT | Manufacturing year |
| price | DECIMAL | Listing price |
| city | VARCHAR(50) | Location |
| description | TEXT | Detailed info |
| status | ENUM | 'pending', 'approved', 'rejected', 'sold' |
### 4.3 Table: purchases
| Column | Type | Description |
|---|---|---|
| id | INT | Primary Key |
| car_id | INT | Foreign Key to cars |
| user_id | INT | Foreign Key to users |
| bank_id | VARCHAR(100) | Transaction reference |
| personal_info| TEXT | Buyer's additional info |
| status | ENUM | 'pending', 'approved', 'rejected' |
## 5. Functional Walkthrough
### 5.1 User Experience (UX)
The user journey starts at the landing page (`index.php`), featuring a high-impact hero section. Users can browse vehicles in `cars.php` with advanced filtering.
### 5.2 Seller Workflow
1. **Login/Register:** Secure entry point.
2. **Dashboard:** Overview of listings.
3. **Add Car:** Upload vehicle details and images.
4. **Management:** Edit or mark listings as sold.
### 5.3 Buyer Workflow
1. **Discovery:** Find a vehicle.
2. **Purchase Request:** Submit a formal request with payment reference (Bank ID).
3. **Tracking:** View request status in the dashboard.
4. **Receipt:** Generate a digital receipt upon approval.
### 5.4 Admin Capabilities
- **Dashboard:** High-level stats (Total sales, users, cars).
- **Approval System:** Approve or reject car listings and purchase requests.
- **User Management:** Oversee the community.
- **Communications:** Manage messages from the contact form.
## 6. UI/UX Design Principles
### 6.1 Sophisticated Dark Theme
The "Darker and User-Friendly" theme uses a color palette that reduces eye strain and emphasizes high-value content.
- **Background:** `#0f172a` (Deep Space)
- **Accents:** `#d4af37` (Luxury Gold)
- **Contrast:** High legibility white and slate-gray text.
### 6.2 Modern Components
- **Cards:** Elevated cards with hover scaling.
- **Glassmorphism:** Professional blur effects for navigation and overlays.
- **Buttons:** Large, accessible touch targets with subtle shadows.
## 7. Security and Integrity
- **Password Hashing:** `password_hash()` and `password_verify()` for industry-standard security.
- **SQL Protection:** 100% usage of PDO prepared statements.
- **Input Sanitization:** `htmlspecialchars()` for XSS prevention.
- **State Management:** Secure session handling and CSRF awareness.
## 8. Conclusion
This system represents a state-of-the-art vehicle marketplace, combining technical excellence with a premium user experience. It is designed to be both a functional tool and a beautiful interface, adhering to the highest standards of modern web development.
---
*Monograph created on February 23, 2026.*
*Version 1.0.0*

460
assets/css/style.css
View File

@ -1,17 +1,18 @@
:root { :root {
--primary-color: #d4af37; /* Gold */ --primary-color: #d4af37; /* Gold */
--secondary-color: #1a1a1a; /* Dark Gray */ --secondary-color: #1e293b; /* Dark Slate Blue */
--bg-color: #0b0b0b; --bg-color: #0f172a; /* Deep Background */
--card-bg: rgba(255, 255, 255, 0.05); --card-bg: #1e293b;
--glass-border: rgba(255, 255, 255, 0.1); --glass-border: rgba(255, 255, 255, 0.1);
--text-primary: #ffffff; --text-primary: #f8fafc;
--text-secondary: #a0a0a0; --text-secondary: #94a3b8;
--transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--sidebar-width: 260px; --sidebar-width: 260px;
--danger: #ff4757; --danger: #ff4757;
--success: #2ed573; --success: #2ed573;
--warning: #ffa502; --warning: #ffa502;
--info: #1e90ff; --info: #1e90ff;
--glass-bg: rgba(30, 41, 59, 0.7);
} }
* { * {
@ -30,18 +31,19 @@ body {
/* Glassmorphism utility */ /* Glassmorphism utility */
.glass { .glass {
background: rgba(255, 255, 255, 0.03); background: var(--glass-bg);
backdrop-filter: blur(15px); backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
border: 1px solid var(--glass-border); border: 1px solid var(--glass-border);
border-radius: 20px; border-radius: 20px;
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
transition: var(--transition); transition: var(--transition);
} }
.glass:hover { .glass:hover {
border-color: rgba(212, 175, 55, 0.3); border-color: rgba(212, 175, 55, 0.5);
background: rgba(255, 255, 255, 0.05); background: rgba(30, 41, 59, 0.9);
box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.4);
} }
/* Navbar */ /* Navbar */
@ -53,7 +55,7 @@ nav {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1000; z-index: 1000;
background: rgba(11, 11, 11, 0.8); background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(20px); backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);
} }
@ -84,7 +86,7 @@ nav {
transition: var(--transition); transition: var(--transition);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1px; letter-spacing: 1px;
opacity: 0.7; opacity: 0.8;
} }
.nav-links a:hover { .nav-links a:hover {
@ -92,6 +94,15 @@ nav {
opacity: 1; opacity: 1;
} }
/* Container */
.container {
padding: 0 6%;
}
.container-fluid {
padding: 0 4%;
}
/* Hero Section */ /* Hero Section */
.hero { .hero {
height: 85vh; height: 85vh;
@ -100,358 +111,269 @@ nav {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 0 10%; background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.15), transparent),
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/hero-bg.jpg') center/cover no-repeat fixed; radial-gradient(circle at bottom left, rgba(30, 41, 59, 0.5), transparent);
border-bottom: 1px solid var(--glass-border);
} }
.hero h1 { .hero h1 {
font-size: 5.5rem; font-size: 5rem;
margin-bottom: 1.5rem;
font-weight: 900; font-weight: 900;
line-height: 1.1;
margin-bottom: 2rem;
letter-spacing: -2px; letter-spacing: -2px;
line-height: 1; color: #ffffff;
} }
.hero p { .hero p {
font-size: 1.2rem; font-size: 1.4rem;
color: var(--text-secondary); color: var(--text-secondary);
max-width: 600px; max-width: 600px;
margin-bottom: 3.5rem; margin-bottom: 3rem;
}
/* Form Styles */
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
}
.form-control {
width: 100%;
padding: 1rem 1.2rem;
border-radius: 12px;
background: var(--card-bg);
border: 1px solid var(--glass-border);
color: var(--text-primary);
font-family: inherit;
transition: var(--transition);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
} }
/* Buttons */ /* Buttons */
.btn { .btn {
padding: 0.9rem 2.2rem; padding: 1rem 2rem;
border-radius: 12px; border-radius: 12px;
text-decoration: none;
font-weight: 700; font-weight: 700;
transition: var(--transition);
cursor: pointer; cursor: pointer;
border: 1px solid transparent; text-decoration: none;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; gap: 0.8rem;
gap: 0.5rem; transition: var(--transition);
border: none;
font-size: 0.95rem; font-size: 0.95rem;
} }
.btn-primary { .btn-primary {
background: var(--primary-color); background: var(--primary-color);
color: #000; color: #000;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25); box-shadow: 0 10px 20px -5px rgba(212, 175, 55, 0.4);
} }
.btn-primary:hover { .btn-primary:hover {
transform: translateY(-4px); transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.4); box-shadow: 0 15px 30px -5px rgba(212, 175, 55, 0.6);
background: #e5be48; background: #e5be47;
} }
.btn-outline { .btn-outline {
background: transparent; background: transparent;
border: 1px solid var(--glass-border); border: 2px solid var(--glass-border);
color: var(--text-primary); color: var(--text-primary);
} }
.btn-outline:hover { .btn-outline:hover {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border-color: var(--primary-color); border-color: var(--text-primary);
color: var(--primary-color); }
.btn-sm {
padding: 0.6rem 1.2rem;
font-size: 0.85rem;
} }
.btn-auth { .btn-auth {
padding: 0.6rem 1.4rem; padding: 0.8rem 1.5rem;
border-radius: 10px; border-radius: 12px;
border: 2px solid var(--glass-border);
text-decoration: none; text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
transition: var(--transition);
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary); color: var(--text-primary);
font-weight: 700;
font-size: 0.9rem;
transition: var(--transition);
} }
.btn-auth:hover { .btn-auth:hover {
background: var(--primary-color);
color: #000;
border-color: var(--primary-color); border-color: var(--primary-color);
color: var(--primary-color);
} }
/* Grid & Layout */ /* Grid Layouts */
.container {
padding: 5rem 6%;
max-width: 1400px;
margin: 0 auto;
}
.section-title {
font-size: 2.8rem;
margin-bottom: 4rem;
text-align: center;
font-weight: 900;
letter-spacing: -1px;
}
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2.5rem;
gap: 3rem;
} }
/* Admin Dashboard Layout */ .grid-3 { grid-template-columns: repeat(3, 1fr); }
.dashboard-container { .grid-4 { grid-template-columns: repeat(4, 1fr); }
display: flex;
min-height: 100vh; /* Card Styling */
.card {
background: var(--card-bg);
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--glass-border);
transition: var(--transition);
} }
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
border-color: rgba(212, 175, 55, 0.3);
}
.card-img {
width: 100%;
height: 250px;
object-fit: cover;
}
.card-content {
padding: 2rem;
}
/* Table styling */
table thead tr {
background: rgba(255, 255, 255, 0.05) !important;
}
table tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
table td {
padding: 1.2rem;
color: var(--text-secondary);
}
table th {
padding: 1.2rem;
text-align: left;
color: var(--text-primary);
font-weight: 700;
}
/* Sidebar (Admin) */
.sidebar { .sidebar {
width: var(--sidebar-width); width: var(--sidebar-width);
background: rgba(15, 15, 15, 0.9);
border-right: 1px solid var(--glass-border);
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
position: fixed;
height: 100vh; height: 100vh;
z-index: 100; background: var(--bg-color);
border-right: 1px solid var(--glass-border);
position: fixed;
padding: 3rem 2rem;
} }
.main-content { .sidebar-link {
flex: 1;
margin-left: var(--sidebar-width);
padding: 2.5rem;
}
.sidebar-brand {
font-size: 1.4rem;
font-weight: 900;
color: var(--primary-color);
margin-bottom: 3rem;
padding-left: 1rem;
text-decoration: none;
}
.sidebar-menu {
list-style: none;
flex: 1;
}
.sidebar-menu li {
margin-bottom: 0.8rem;
}
.sidebar-menu a {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.8rem 1.2rem; gap: 1rem;
padding: 1.2rem;
color: var(--text-secondary); color: var(--text-secondary);
text-decoration: none; text-decoration: none;
border-radius: 12px;
transition: var(--transition);
font-weight: 600; font-weight: 600;
border-radius: 12px;
margin-bottom: 0.5rem;
transition: var(--transition);
} }
.sidebar-menu a:hover, .sidebar-menu a.active { .sidebar-link:hover, .sidebar-link.active {
background: rgba(212, 175, 55, 0.1); background: rgba(212, 175, 55, 0.1);
color: var(--primary-color); color: var(--primary-color);
} }
.sidebar-footer {
padding-top: 2rem;
border-top: 1px solid var(--glass-border);
}
/* Dashboard Stats Card */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.stat-card {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.stat-value {
font-size: 2.2rem;
font-weight: 900;
color: var(--text-primary);
}
.stat-label {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Tables */
.table-container {
overflow-x: auto;
margin-top: 2rem;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
th {
padding: 1.2rem;
border-bottom: 1px solid var(--glass-border);
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
}
td {
padding: 1.2rem;
border-bottom: 1px solid rgba(255,255,255,0.03);
font-size: 0.95rem;
}
tr:hover td {
background: rgba(255,255,255,0.02);
}
.badge {
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.badge-success { background: rgba(46, 213, 115, 0.1); color: var(--success); }
.badge-warning { background: rgba(255, 165, 2, 0.1); color: var(--warning); }
.badge-danger { background: rgba(255, 71, 87, 0.1); color: var(--danger); }
/* Alerts */ /* Alerts */
.alert { .alert {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-radius: 12px; border-radius: 12px;
margin-bottom: 2rem; margin-bottom: 1rem;
font-weight: 600; font-weight: 600;
} }
.alert-error {
background: rgba(255, 71, 87, 0.15);
color: #ff6b81;
border: 1px solid rgba(255, 71, 87, 0.3);
}
.alert-success { .alert-success {
background: rgba(46, 213, 115, 0.1); background: rgba(46, 213, 115, 0.15);
color: var(--success); color: #7bed9f;
border: 1px solid rgba(46, 213, 115, 0.2); border: 1px solid rgba(46, 213, 115, 0.3);
} }
/* Car Card Enhancement */ /* Box component */
.car-card {
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
}
.car-info {
padding: 1.8rem;
}
.car-price {
color: var(--primary-color);
font-size: 1.6rem;
font-weight: 900;
}
/* Forms */
.form-group {
margin-bottom: 1.5rem;
}
.form-control {
width: 100%;
padding: 0.9rem 1.2rem;
background: rgba(255,255,255,0.03);
border: 1px solid var(--glass-border);
border-radius: 12px;
color: #fff;
font-size: 0.95rem;
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary-color);
background: rgba(255,255,255,0.06);
outline: none;
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}
/* Specialized Box Component */
.box { .box {
background: rgba(255, 255, 255, 0.02); background: var(--card-bg);
border: 1px solid var(--glass-border);
border-radius: 24px; border-radius: 24px;
padding: 2.5rem; border: 1px solid var(--glass-border);
transition: var(--transition); box-shadow: 0 10px 30px rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
} }
.box::before { /* Stats Card */
content: ''; .stats-card {
position: absolute; padding: 2rem;
top: 0; border-radius: 20px;
left: 0; background: var(--card-bg);
width: 100%; border: 1px solid var(--glass-border);
height: 100%;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
pointer-events: none;
} }
.box:hover { .stats-card h3 {
transform: translateY(-5px); font-size: 0.9rem;
border-color: rgba(212, 175, 55, 0.2); color: var(--text-secondary);
background: rgba(255, 255, 255, 0.04); text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
} }
@media (max-width: 992px) { .stats-card .value {
.sidebar { width: 80px; padding: 2rem 0.5rem; } font-size: 2.5rem;
.sidebar-brand, .sidebar-menu span { display: none; } font-weight: 900;
.main-content { margin-left: 80px; } color: var(--primary-color);
}
@media (max-width: 768px) {
.hero h1 { font-size: 3.5rem; }
.nav-links { display: none; }
} }
/* Footer Styles */ /* Footer Styles */
footer { footer {
background: rgba(11, 11, 11, 0.8); background: var(--bg-color);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--glass-border); border-top: 1px solid var(--glass-border);
padding: 6rem 6% 3rem; padding: 6rem 6% 3rem;
margin-top: 5rem; color: var(--text-primary);
} }
.footer-grid { .footer-grid {
display: grid; display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr; grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 4rem; gap: 4rem;
max-width: 1400px; margin-bottom: 4rem;
margin: 0 auto;
} }
.footer-col h4 { .footer-col h4 {
color: var(--primary-color);
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 800; font-weight: 800;
margin-bottom: 2rem; margin-bottom: 2rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 2px; letter-spacing: 1px;
} }
.footer-col ul { .footer-col ul {
@ -459,7 +381,7 @@ footer {
} }
.footer-col ul li { .footer-col ul li {
margin-bottom: 1rem; margin-bottom: 1.2rem;
} }
.footer-col ul li a { .footer-col ul li a {
@ -471,30 +393,24 @@ footer {
.footer-col ul li a:hover { .footer-col ul li a:hover {
color: var(--primary-color); color: var(--primary-color);
padding-left: 5px; padding-left: 0.5rem;
} }
.footer-bottom { .footer-bottom {
margin-top: 6rem;
padding-top: 3rem; padding-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.05); border-top: 1px solid var(--glass-border);
text-align: center; text-align: center;
}
.footer-bottom p {
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.9rem; font-size: 0.9rem;
} }
@media (max-width: 1200px) { @media (max-width: 1024px) {
.footer-grid { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
grid-template-columns: 1fr 1fr; .footer-grid { grid-template-columns: 1fr 1fr; }
}
} }
@media (max-width: 600px) { @media (max-width: 768px) {
.footer-grid { .grid-4, .grid-3 { grid-template-columns: 1fr; }
grid-template-columns: 1fr; .hero h1 { font-size: 3rem; }
gap: 3rem; .footer-grid { grid-template-columns: 1fr; }
}
} }

22
cars.php
View File

@ -37,7 +37,7 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<div class="container" style="padding: 2rem 0;"> <div class="container" style="padding: 2rem 0;">
<div style="margin-bottom: 4rem;"> <div style="margin-bottom: 4rem;">
<h1 style="font-size: 3rem; font-weight: 900; margin-bottom: 1rem;">Premium Inventory</h1> <h1 style="font-size: 3rem; font-weight: 900; margin-bottom: 1rem; color: #fff;">Premium Inventory</h1>
<p style="color: var(--text-secondary); font-size: 1.2rem;">Find the perfect vehicle for your lifestyle in our verified marketplace.</p> <p style="color: var(--text-secondary); font-size: 1.2rem;">Find the perfect vehicle for your lifestyle in our verified marketplace.</p>
</div> </div>
@ -45,11 +45,11 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<div class="glass" style="padding: 2rem; margin-bottom: 4rem;"> <div class="glass" style="padding: 2rem; margin-bottom: 4rem;">
<form method="GET" style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1.5rem; align-items: end;"> <form method="GET" style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1.5rem; align-items: end;">
<div class="form-group" style="margin-bottom: 0;"> <div class="form-group" style="margin-bottom: 0;">
<label>Search</label> <label style="color: var(--text-secondary);">Search</label>
<input type="text" name="search" class="form-control" placeholder="Search brand or model..." value="<?= htmlspecialchars($search) ?>"> <input type="text" name="search" class="form-control" placeholder="Search brand or model..." value="<?= htmlspecialchars($search) ?>">
</div> </div>
<div class="form-group" style="margin-bottom: 0;"> <div class="form-group" style="margin-bottom: 0;">
<label>City</label> <label style="color: var(--text-secondary);">City</label>
<select name="city" class="form-control"> <select name="city" class="form-control">
<option value="">All Cities</option> <option value="">All Cities</option>
<?php foreach ($cities as $c): ?> <?php foreach ($cities as $c): ?>
@ -58,7 +58,7 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
</select> </select>
</div> </div>
<div class="form-group" style="margin-bottom: 0;"> <div class="form-group" style="margin-bottom: 0;">
<label>Brand</label> <label style="color: var(--text-secondary);">Brand</label>
<select name="brand" class="form-control"> <select name="brand" class="form-control">
<option value="">All Brands</option> <option value="">All Brands</option>
<?php foreach ($brands as $b): ?> <?php foreach ($brands as $b): ?>
@ -66,7 +66,7 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
</div> </div>
<button type="submit" class="btn btn-primary" style="height: 50px;">Apply Filters</button> <button type="submit" class="btn btn-primary" style="height: 50px; color: #000;">Apply Filters</button>
</form> </form>
</div> </div>
@ -76,21 +76,21 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<div class="glass car-card" style="padding: 0; overflow: hidden; position: relative;"> <div class="glass car-card" style="padding: 0; overflow: hidden; position: relative;">
<div style="height: 220px; background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center; position: relative;"> <div style="height: 220px; background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center; position: relative;">
<?php if ($car['status'] === 'sold'): ?> <?php if ($car['status'] === 'sold'): ?>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: 2;"> <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 2;">
<div style="border: 4px solid #fff; color: #fff; padding: 10px 25px; font-weight: 900; font-size: 2rem; transform: rotate(-15deg); letter-spacing: 4px;">SOLD</div> <div style="border: 4px solid var(--primary-color); color: var(--primary-color); padding: 10px 25px; font-weight: 900; font-size: 2rem; transform: rotate(-15deg); letter-spacing: 4px; text-shadow: 0 5px 15px rgba(0,0,0,0.5);">SOLD</div>
</div> </div>
<?php elseif ($car['is_hot_deal']): ?> <?php elseif ($car['is_hot_deal']): ?>
<span style="position: absolute; top: 1.5rem; left: 1.5rem; background: var(--danger); color: white; padding: 0.5rem 1rem; border-radius: 30px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; z-index: 1;">Hot Deal</span> <span style="position: absolute; top: 1.5rem; left: 1.5rem; background: var(--danger); color: white; padding: 0.5rem 1rem; border-radius: 30px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; z-index: 1;">Hot Deal</span>
<?php endif; ?> <?php endif; ?>
</div> </div>
<div style="padding: 2rem;"> <div style="padding: 2rem;">
<h3 style="font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3> <h3 style="font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem; color: #fff;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem;"> <p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem;">
<span>📍</span> <?= htmlspecialchars($car['city']) ?> • <?= $car['year'] ?> <span>📍</span> <?= htmlspecialchars($car['city']) ?> • <?= $car['year'] ?>
</p> </p>
<div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1.5rem;"> <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1.5rem;">
<span style="font-size: 1.5rem; font-weight: 900; color: var(--primary-color);">$<?= number_format($car['price']) ?></span> <span style="font-size: 1.5rem; font-weight: 900; color: var(--primary-color);">$<?= number_format($car['price']) ?></span>
<a href="car_detail.php?id=<?= $car['id'] ?>" class="btn btn-primary btn-sm" style="<?= $car['status'] === 'sold' ? 'background: #555; pointer-events: none;' : '' ?>">View Details</a> <a href="car_detail.php?id=<?= $car['id'] ?>" class="btn btn-primary btn-sm" style="<?= $car['status'] === 'sold' ? 'background: #334155; pointer-events: none; color: #94a3b8;' : 'color: #000;' ?>">View Details</a>
</div> </div>
</div> </div>
</div> </div>
@ -100,10 +100,10 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<?php if (empty($cars)): ?> <?php if (empty($cars)): ?>
<div style="text-align: center; padding: 10rem 0;"> <div style="text-align: center; padding: 10rem 0;">
<div style="font-size: 4rem; margin-bottom: 2rem;">🔍</div> <div style="font-size: 4rem; margin-bottom: 2rem;">🔍</div>
<h2 style="font-weight: 800; margin-bottom: 1rem;">No vehicles found</h2> <h2 style="font-weight: 800; margin-bottom: 1rem; color: #fff;">No vehicles found</h2>
<p style="color: var(--text-secondary);">Try adjusting your filters or search terms.</p> <p style="color: var(--text-secondary);">Try adjusting your filters or search terms.</p>
</div> </div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<?php require_once __DIR__ . '/includes/footer.php'; ?> <?php require_once __DIR__ . '/includes/footer.php'; ?>

90
dashboard.php
View File

@ -33,51 +33,53 @@ $stmt->execute([$user_id]);
$my_purchases = $stmt->fetchAll(); $my_purchases = $stmt->fetchAll();
?> ?>
<div class="container" style="padding: 2rem 0;"> <div class="container" style="padding: 4rem 0;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem;">
<div> <div>
<h1 style="font-size: 2.5rem; font-weight: 900; margin-bottom: 0.5rem;">User Dashboard</h1> <h1 style="font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem; color: #fff;">User Dashboard</h1>
<p style="color: var(--text-secondary);">Manage your vehicle listings and track your purchase requests.</p> <p style="color: var(--text-secondary); font-size: 1.1rem;">Manage your vehicle listings and track your purchase requests.</p>
</div> </div>
<a href="add_car.php" class="btn btn-primary">List New Vehicle</a> <a href="add_car.php" class="btn btn-primary">List New Vehicle</a>
</div> </div>
<div style="display: grid; grid-template-columns: 1fr; gap: 4rem;"> <div style="display: grid; grid-template-columns: 1fr; gap: 5rem;">
<!-- My Listings Section --> <!-- My Listings Section -->
<section> <section>
<h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem;"> <h2 style="font-size: 2rem; font-weight: 800; margin-bottom: 2.5rem; display: flex; align-items: center; gap: 1rem; color: #fff;">
<span style="background: var(--primary-color); color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.2rem;">🚗</span> <span style="background: var(--primary-color); color: #000; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.3rem;">🚗</span>
My Vehicle Listings My Vehicle Listings
</h2> </h2>
<?php if (empty($my_listings)): ?> <?php if (empty($my_listings)): ?>
<div class="glass" style="padding: 4rem; text-align: center;"> <div class="box" style="padding: 5rem; text-align: center;">
<p style="color: var(--text-secondary); margin-bottom: 2rem;">You haven't listed any vehicles yet.</p> <p style="color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.2rem;">You haven't listed any vehicles yet.</p>
<a href="add_car.php" class="btn btn-outline">Start Selling Today</a> <a href="add_car.php" class="btn btn-outline">Start Selling Today</a>
</div> </div>
<?php else: ?> <?php else: ?>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;"> <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.5rem;">
<?php foreach ($my_listings as $car): ?> <?php foreach ($my_listings as $car): ?>
<div class="glass" style="padding: 0; overflow: hidden; position: relative;"> <div class="card" style="position: relative;">
<div style="height: 180px; background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center;"> <div style="height: 200px; background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center;">
<?php if ($car['status'] === 'sold'): ?> <?php if ($car['status'] === 'sold'): ?>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 180px; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 2rem; letter-spacing: 5px;">SOLD</div> <div style="position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-weight: 900; font-size: 2.5rem; letter-spacing: 5px; text-shadow: 0 5px 15px rgba(0,0,0,0.5);">SOLD</div>
<?php endif; ?> <?php endif; ?>
</div> </div>
<div style="padding: 1.5rem;"> <div class="card-content">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;"> <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem;">
<div> <div>
<h3 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 0.2rem;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3> <h3 style="font-size: 1.4rem; font-weight: 800; margin-bottom: 0.3rem; color: #fff;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<p style="color: var(--text-secondary); font-size: 0.85rem;"><?= $car['year'] ?> - <?= htmlspecialchars($car['city']) ?></p> <p style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;"><?= $car['year'] ?> • <?= htmlspecialchars($car['city']) ?></p>
</div> </div>
<span class="badge" style="background: <?= $car['status'] === 'approved' ? 'var(--success)' : ($car['status'] === 'sold' ? '#000' : ($car['status'] === 'rejected' ? 'var(--danger)' : 'var(--primary-color)')) ?>; color: white; padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 0.7rem; text-transform: uppercase; font-weight: 700;"> <span style="background: <?= $car['status'] === 'approved' ? 'var(--success)' : ($car['status'] === 'sold' ? 'rgba(255,255,255,0.1)' : ($car['status'] === 'rejected' ? 'var(--danger)' : 'var(--primary-color)')) ?>; color: <?= $car['status'] === 'approved' || $car['status'] === 'rejected' || $car['status'] === 'sold' ? '#fff' : '#000' ?>; padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.75rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px;">
<?= $car['status'] ?> <?= $car['status'] ?>
</span> </span>
</div> </div>
<div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1rem; margin-top: 1rem;"> <div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1.5rem;">
<span style="font-weight: 800; color: var(--primary-color);">$<?= number_format($car['price']) ?></span> <span style="font-weight: 900; color: var(--primary-color); font-size: 1.25rem;">$<?= number_format($car['price']) ?></span>
<a href="edit_car.php?id=<?= $car['id'] ?>" style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;">Edit Details</a> <a href="edit_car.php?id=<?= $car['id'] ?>" style="color: var(--text-primary); font-size: 0.95rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 0.5rem;">
Edit Details <span style="color: var(--primary-color);">→</span>
</a>
</div> </div>
</div> </div>
</div> </div>
@ -88,52 +90,52 @@ $my_purchases = $stmt->fetchAll();
<!-- My Purchase Requests Section --> <!-- My Purchase Requests Section -->
<section> <section>
<h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem;"> <h2 style="font-size: 2rem; font-weight: 800; margin-bottom: 2.5rem; display: flex; align-items: center; gap: 1rem; color: #fff;">
<span style="background: var(--primary-color); color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.2rem;">💰</span> <span style="background: var(--primary-color); color: #000; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.3rem;">💰</span>
My Purchase Requests My Purchase Requests
</h2> </h2>
<?php if (empty($my_purchases)): ?> <?php if (empty($my_purchases)): ?>
<div class="glass" style="padding: 4rem; text-align: center;"> <div class="box" style="padding: 5rem; text-align: center;">
<p style="color: var(--text-secondary); margin-bottom: 2rem;">You haven't made any purchase requests yet.</p> <p style="color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.2rem;">You haven't made any purchase requests yet.</p>
<a href="cars.php" class="btn btn-outline">Browse Marketplace</a> <a href="cars.php" class="btn btn-outline">Browse Marketplace</a>
</div> </div>
<?php else: ?> <?php else: ?>
<div class="glass" style="padding: 0; overflow: hidden;"> <div class="box" style="overflow: hidden; padding: 0;">
<table style="width: 100%; border-collapse: collapse; text-align: left;"> <table style="width: 100%; border-collapse: collapse; text-align: left;">
<thead> <thead>
<tr style="background: rgba(0,0,0,0.03);"> <tr style="background: rgba(255,255,255,0.02);">
<th style="padding: 1.5rem;">Vehicle</th> <th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Vehicle</th>
<th style="padding: 1.5rem;">Price</th> <th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Price</th>
<th style="padding: 1.5rem;">Bank ID</th> <th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Bank ID</th>
<th style="padding: 1.5rem;">Status</th> <th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Status</th>
<th style="padding: 1.5rem;">Action</th> <th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Action</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<?php foreach ($my_purchases as $p): ?> <?php foreach ($my_purchases as $p): ?>
<tr style="border-bottom: 1px solid var(--glass-border);"> <tr style="border-bottom: 1px solid var(--glass-border);">
<td style="padding: 1.2rem 1.5rem;"> <td style="padding: 1.5rem;">
<div style="display: flex; align-items: center; gap: 1rem;"> <div style="display: flex; align-items: center; gap: 1.2rem;">
<img src="<?= htmlspecialchars($p['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px;"> <img src="<?= htmlspecialchars($p['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>" style="width: 80px; height: 50px; object-fit: cover; border-radius: 8px;">
<div> <div>
<div style="font-weight: 700; font-size: 0.95rem;"><?= htmlspecialchars($p['brand'] . ' ' . $p['model']) ?></div> <div style="font-weight: 800; font-size: 1.1rem; color: #fff;"><?= htmlspecialchars($p['brand'] . ' ' . $p['model']) ?></div>
<div style="font-size: 0.75rem; color: var(--text-secondary);"><?= $p['year'] ?></div> <div style="font-size: 0.85rem; color: var(--text-secondary); font-weight: 600;"><?= $p['year'] ?> Model</div>
</div> </div>
</div> </div>
</td> </td>
<td style="padding: 1.2rem 1.5rem; font-weight: 700;">$<?= number_format($p['price']) ?></td> <td style="padding: 1.5rem; font-weight: 900; color: var(--primary-color); font-size: 1.1rem;">$<?= number_format($p['price']) ?></td>
<td style="padding: 1.2rem 1.5rem;"><code style="font-size: 0.8rem;"><?= htmlspecialchars($p['bank_id']) ?></code></td> <td style="padding: 1.5rem;"><code style="font-size: 0.9rem; background: rgba(255,255,255,0.05); padding: 0.4rem 0.8rem; border-radius: 6px; font-weight: 700; color: var(--primary-color);"><?= htmlspecialchars($p['bank_id']) ?></code></td>
<td style="padding: 1.2rem 1.5rem;"> <td style="padding: 1.5rem;">
<span style="color: <?= $p['status'] === 'approved' ? 'var(--success)' : ($p['status'] === 'rejected' ? 'var(--danger)' : 'var(--primary-color)') ?>; font-weight: 700; font-size: 0.85rem; text-transform: uppercase;"> <span style="color: <?= $p['status'] === 'approved' ? 'var(--success)' : ($p['status'] === 'rejected' ? 'var(--danger)' : 'var(--primary-color)') ?>; font-weight: 800; font-size: 0.9rem; text-transform: uppercase;">
<?= $p['status'] ?> <?= $p['status'] ?>
</span> </span>
</td> </td>
<td style="padding: 1.2rem 1.5rem;"> <td style="padding: 1.5rem;">
<?php if ($p['status'] === 'approved'): ?> <?php if ($p['status'] === 'approved'): ?>
<a href="receipt.php?id=<?= $p['id'] ?>" class="btn btn-primary" style="padding: 0.4rem 0.8rem; font-size: 0.8rem;">View Receipt</a> <a href="receipt.php?id=<?= $p['id'] ?>" class="btn btn-primary btn-sm">View Receipt</a>
<?php else: ?> <?php else: ?>
<span style="color: var(--text-secondary); font-size: 0.8rem;">Waiting for review</span> <span style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;">Under Review</span>
<?php endif; ?> <?php endif; ?>
</td> </td>
</tr> </tr>

92
index.php
View File

@ -27,10 +27,10 @@ $testimonials = [
]; ];
?> ?>
<section class="hero" style="background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('assets/images/hero-home.jpg') center/cover no-repeat fixed;"> <section class="hero" style="background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('assets/images/hero-home.jpg') center/cover no-repeat fixed;">
<div style="z-index: 2; position: relative;"> <div style="z-index: 2; position: relative;">
<h1>Find Your Premium Ride</h1> <h1 style="color: #ffffff; font-size: 5rem; font-weight: 900; letter-spacing: -2px;">Find Your Premium Ride</h1>
<p>Exclusive luxury vehicles and reliable everyday cars in Afghanistan's most trusted marketplace.</p> <p style="color: var(--text-secondary); font-size: 1.4rem; max-width: 700px; margin: 0 auto 3rem;">Exclusive luxury vehicles and reliable everyday cars in Afghanistan's most trusted marketplace.</p>
<div style="display: flex; gap: 1.5rem; justify-content: center;"> <div style="display: flex; gap: 1.5rem; justify-content: center;">
<a href="cars.php" class="btn btn-primary">View Marketplace</a> <a href="cars.php" class="btn btn-primary">View Marketplace</a>
<?php if (!isset($_SESSION['user_id'])): ?> <?php if (!isset($_SESSION['user_id'])): ?>
@ -42,45 +42,47 @@ $testimonials = [
</div> </div>
</section> </section>
<div class="container"> <div class="container" style="margin-top: 5rem; margin-bottom: 5rem;">
<h2 class="section-title">Hot Deals</h2> <h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 3rem; text-align: center; color: #fff;">Hot Deals</h2>
<div class="grid"> <div class="grid grid-3">
<?php foreach ($hotDeals as $car): ?> <?php foreach ($hotDeals as $car): ?>
<div class="car-card glass"> <div class="card">
<div class="car-img-container" style="overflow: hidden; height: 240px; border-bottom: 1px solid var(--glass-border);"> <div class="car-img-container" style="overflow: hidden; height: 240px; border-bottom: 1px solid var(--glass-border);">
<div class="car-img" style="background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center; height: 100%;"></div> <img src="<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>" style="width: 100%; height: 100%; object-fit: cover;">
</div> </div>
<div class="car-info"> <div class="card-content">
<div class="car-meta"> <div style="display: flex; gap: 1rem; color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1rem; font-weight: 600;">
<span>📅 <?= htmlspecialchars($car['year']) ?></span> <span>📅 <?= htmlspecialchars($car['year']) ?></span>
<span>📍 <?= htmlspecialchars($car['city']) ?></span> <span>📍 <?= htmlspecialchars($car['city']) ?></span>
</div> </div>
<h3><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3> <h3 style="margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 800; color: #fff;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<div class="car-price">$<?= number_format($car['price']) ?></div> <div style="display: flex; justify-content: space-between; align-items: center;">
<a href="car_detail.php?id=<?= $car['id'] ?>" class="btn btn-outline" style="width: 100%; text-align: center;">View Details</a> <div style="font-size: 1.5rem; font-weight: 900; color: var(--primary-color);">$<?= number_format($car['price']) ?></div>
<a href="car_detail.php?id=<?= $car['id'] ?>" class="btn btn-outline btn-sm">View Details</a>
</div>
</div> </div>
</div> </div>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>
</div> </div>
<section style="background: rgba(212, 175, 55, 0.03); padding: 8rem 0;"> <section style="background: var(--card-bg); padding: 8rem 0; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);">
<div class="container"> <div class="container">
<h2 class="section-title">What Our Clients Say</h2> <h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 4rem; text-align: center; color: #fff;">What Our Clients Say</h2>
<div class="grid"> <div class="grid grid-3">
<?php foreach ($testimonials as $t): ?> <?php foreach ($testimonials as $t): ?>
<div class="box"> <div class="box" style="padding: 3rem; background: var(--bg-color);">
<div class="review-stars" style="color: var(--primary-color); margin-bottom: 1.5rem;"> <div class="review-stars" style="color: var(--primary-color); margin-bottom: 1.5rem; font-size: 1.5rem;">
<?php for($i=0; $i<$t['rating']; $i++) echo '★'; ?> <?php for($i=0; $i<$t['rating']; $i++) echo '★'; ?>
</div> </div>
<p style="font-style: italic; color: var(--text-secondary); line-height: 1.8; margin-bottom: 2rem;">"<?= htmlspecialchars($t['text']) ?>"</p> <p style="font-style: italic; color: var(--text-secondary); line-height: 1.8; margin-bottom: 2rem; font-size: 1.1rem;">"<?= htmlspecialchars($t['text']) ?>"</p>
<div class="review-author" style="display: flex; align-items: center; gap: 1rem;"> <div class="review-author" style="display: flex; align-items: center; gap: 1rem;">
<div style="width: 45px; height: 45px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #000;"> <div style="width: 50px; height: 50px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #000;">
<?= substr($t['name'], 0, 1) ?> <?= substr($t['name'], 0, 1) ?>
</div> </div>
<div> <div>
<h4 style="margin: 0; font-size: 1rem;"><?= htmlspecialchars($t['name']) ?></h4> <h4 style="margin: 0; font-size: 1.1rem; font-weight: 700; color: #fff;"><?= htmlspecialchars($t['name']) ?></h4>
<p style="margin: 0; font-size: 0.8rem; color: var(--text-secondary);"><?= htmlspecialchars($t['city']) ?></p> <p style="margin: 0; font-size: 0.85rem; color: var(--text-secondary);"><?= htmlspecialchars($t['city']) ?></p>
</div> </div>
</div> </div>
</div> </div>
@ -89,35 +91,35 @@ $testimonials = [
</div> </div>
</section> </section>
<div class="container"> <div class="container" style="padding: 8rem 0;">
<h2 class="section-title">Our Physical Showrooms</h2> <h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 4rem; text-align: center; color: #fff;">Our Physical Showrooms</h2>
<div class="grid"> <div class="grid grid-3">
<div class="box" style="text-align: center;"> <div class="box" style="text-align: center; padding: 4rem 2rem;">
<div style="font-size: 3rem; margin-bottom: 1.5rem;">📍</div> <div style="font-size: 4rem; margin-bottom: 2rem;">📍</div>
<h3>Kabul HQ</h3> <h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #fff;">Kabul HQ</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">Wazir Akbar Khan, Street 15</p> <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Wazir Akbar Khan, Street 15</p>
<p style="font-weight: 700; color: var(--primary-color); font-size: 1.1rem;">+93 700 123 456</p> <p style="font-weight: 800; color: var(--primary-color); font-size: 1.25rem;">+93 700 123 456</p>
</div> </div>
<div class="box" style="text-align: center;"> <div class="box" style="text-align: center; padding: 4rem 2rem;">
<div style="font-size: 3rem; margin-bottom: 1.5rem;">📍</div> <div style="font-size: 4rem; margin-bottom: 2rem;">📍</div>
<h3>Herat Branch</h3> <h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #fff;">Herat Branch</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">Jada-e-Main, Near Blue Mosque</p> <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Jada-e-Main, Near Blue Mosque</p>
<p style="font-weight: 700; color: var(--primary-color); font-size: 1.1rem;">+93 700 987 654</p> <p style="font-weight: 800; color: var(--primary-color); font-size: 1.25rem;">+93 700 987 654</p>
</div> </div>
<div class="box" style="text-align: center;"> <div class="box" style="text-align: center; padding: 4rem 2rem;">
<div style="font-size: 3rem; margin-bottom: 1.5rem;">📍</div> <div style="font-size: 4rem; margin-bottom: 2rem;">📍</div>
<h3>Mazar-i-Sharif</h3> <h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #fff;">Mazar-i-Sharif</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">Balkh Gate Road</p> <p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Balkh Gate Road</p>
<p style="font-weight: 700; color: var(--primary-color); font-size: 1.1rem;">+93 700 456 789</p> <p style="font-weight: 800; color: var(--primary-color); font-size: 1.25rem;">+93 700 456 789</p>
</div> </div>
</div> </div>
</div> </div>
<div class="container" style="text-align: center; margin-bottom: 4rem;"> <div class="container" style="text-align: center; margin-bottom: 8rem;">
<div class="box" style="padding: 6rem 3rem; background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), transparent);"> <div class="box" style="padding: 8rem 4rem; background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(30, 41, 59, 0.5));">
<h2 style="font-size: 3rem; margin-bottom: 1.5rem; font-weight: 900;">Ready to sell your car?</h2> <h2 style="font-size: 3.5rem; margin-bottom: 2rem; font-weight: 900; color: #fff;">Ready to sell your car?</h2>
<p style="color: var(--text-secondary); margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 1.1rem;">Join thousands of Afghans who have successfully sold their vehicles through our platform. No hidden fees, just results.</p> <p style="color: var(--text-secondary); margin-bottom: 4rem; max-width: 700px; margin-left: auto; margin-right: auto; font-size: 1.2rem; line-height: 1.8;">Join thousands of Afghans who have successfully sold their vehicles through our platform. No hidden fees, just results.</p>
<a href="register.php" class="btn btn-primary" style="padding: 1.2rem 3rem;">Start Listing Now</a> <a href="register.php" class="btn btn-primary" style="padding: 1.5rem 4rem; font-size: 1.1rem;">Start Listing Now</a>
</div> </div>
</div> </div>