feat: complete modern PHP tire showcase, calculator, comparison, guide and admin platform

This commit is contained in:
Antigravity Bot
2026-08-30 14:07:07 +03:30
parent db26990247
commit 27d35177b6
33 changed files with 4675 additions and 0 deletions
+89
View File
@@ -0,0 +1,89 @@
<?php
// includes/db.php
class TireStore {
private static $file = __DIR__ . '/../data/store.json';
public static function getData() {
if (!file_exists(self::$file)) {
require_once __DIR__ . '/../data/init.php';
}
$json = file_get_contents(self::$file);
return json_decode($json, true) ?: [];
}
public static function saveData($data) {
return file_put_contents(self::$file, json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
}
public static function getTires() {
$data = self::getData();
return $data['tires'] ?? [];
}
public static function getTireById($id) {
$tires = self::getTires();
foreach ($tires as $tire) {
if ($tire['id'] === $id) {
return $tire;
}
}
return null;
}
public static function getBrands() {
$data = self::getData();
return $data['brands'] ?? [];
}
public static function getArticles() {
$data = self::getData();
return $data['articles'] ?? [];
}
public static function getPressureGuide() {
$data = self::getData();
return $data['pressure_guide'] ?? [];
}
public static function getConsultations() {
$data = self::getData();
return $data['consultations'] ?? [];
}
public static function addConsultation($entry) {
$data = self::getData();
$entry['id'] = 'CNS-' . (count($data['consultations'] ?? []) + 101);
$entry['created_at'] = date('Y-m-d H:i');
$entry['status'] = 'جدید';
$data['consultations'][] = $entry;
self::saveData($data);
return $entry;
}
public static function addTire($tire) {
$data = self::getData();
$data['tires'][] = $tire;
self::saveData($data);
return true;
}
public static function updateTire($id, $updatedFields) {
$data = self::getData();
foreach ($data['tires'] as &$tire) {
if ($tire['id'] === $id) {
$tire = array_merge($tire, $updatedFields);
self::saveData($data);
return true;
}
}
return false;
}
public static function deleteTire($id) {
$data = self::getData();
$data['tires'] = array_values(array_filter($data['tires'], function($t) use ($id) {
return $t['id'] !== $id;
}));
return self::saveData($data);
}
}
+172
View File
@@ -0,0 +1,172 @@
<?php
// includes/footer.php
?>
<!-- Footer Section -->
<footer class="mt-auto bg-slate-950 border-t border-slate-800 text-slate-400 text-sm">
<!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
<!-- Col 1: About & Info -->
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-600 flex items-center justify-center text-white shadow-lg shadow-brand-900/30">
<i data-lucide="disc-3" class="w-6 h-6"></i>
</div>
<div>
<span class="text-xl font-black text-white">تایر</span>
<span class="text-xl font-black text-brand-500">قاسمی</span>
</div>
</div>
<p class="text-xs leading-relaxed text-slate-400">
مجموعه تخصصی تایر قاسمی با بیش از دو دهه تجربه در زمینه تامین، توزیع و خدمات تخصصی انواع لاستیک‌های سبک، اسپرت، SUV و سنگین از برترین برندهای ایرانی و بین‌المللی همراه با گارانتی اصالت کالا.
</p>
<div class="flex items-center gap-3 pt-2">
<a href="#" class="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center hover:text-brand-400 hover:border-brand-500/50 transition-colors"><i data-lucide="instagram" class="w-4 h-4"></i></a>
<a href="#" class="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center hover:text-brand-400 hover:border-brand-500/50 transition-colors"><i data-lucide="send" class="w-4 h-4"></i></a>
<a href="#" class="w-9 h-9 rounded-lg bg-slate-900 border border-slate-800 flex items-center justify-center hover:text-brand-400 hover:border-brand-500/50 transition-colors"><i data-lucide="phone" class="w-4 h-4"></i></a>
</div>
</div>
<!-- Col 2: Quick Links -->
<div>
<h4 class="text-white font-bold text-base mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-brand-500"></span>
دسترسی سریع
</h4>
<ul class="space-y-2.5 text-xs">
<li><a href="index.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> صفحه اصلی و کاتالوگ</a></li>
<li><a href="calculator.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> محاسبه‌گر و تبدیل سایز تایر</a></li>
<li><a href="compare.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> مقایسه هوشمند مشخصات</a></li>
<li><a href="guide.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> جدول فشار باد و راهنمای DOT</a></li>
<li><a href="contact.php" class="hover:text-brand-400 transition-colors flex items-center gap-1.5"><i data-lucide="chevron-left" class="w-3.5 h-3.5"></i> آدرس شعب و درخواست خدمات</a></li>
</ul>
</div>
<!-- Col 3: Popular Brands -->
<div>
<h4 class="text-white font-bold text-base mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-amber-500"></span>
برندهای طرف قرارداد
</h4>
<div class="grid grid-cols-2 gap-2 text-xs">
<span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">بارز (Barez)</span>
<span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">کویر تایر (Kavir)</span>
<span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">یزد تایر (Yazd)</span>
<span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">هانکوک (Hankook)</span>
<span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">کومهو (Kumho)</span>
<span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">میشلن (Michelin)</span>
<span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">پیرلی (Pirelli)</span>
<span class="p-2 rounded-lg bg-slate-900 border border-slate-800/80 text-center">مکسس (Maxxis)</span>
</div>
</div>
<!-- Col 4: Contact and Address -->
<div>
<h4 class="text-white font-bold text-base mb-4 flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-emerald-500"></span>
اطلاعات تماس و نشانی
</h4>
<ul class="space-y-3 text-xs">
<li class="flex items-start gap-2.5">
<i data-lucide="map-pin" class="w-4 h-4 text-brand-500 shrink-0 mt-0.5"></i>
<span>شعبه مرکزی: تهران، خیابان آزادی، تقاطع یادگار امام، مجتمع خدمات خودرویی تایر قاسمی</span>
</li>
<li class="flex items-center gap-2.5">
<i data-lucide="phone" class="w-4 h-4 text-brand-500 shrink-0"></i>
<span>تلفن فروش و استعلام: ۰۲۱-۸۸۸۸۹۹۰۰</span>
</li>
<li class="flex items-center gap-2.5">
<i data-lucide="smartphone" class="w-4 h-4 text-brand-500 shrink-0"></i>
<span>پشتیبانی واتساپ / تلگرام: ۰۹۱۲۳۴۵۶۷۸۹</span>
</li>
<li class="flex items-center gap-2.5">
<i data-lucide="clock" class="w-4 h-4 text-brand-500 shrink-0"></i>
<span>ساعت کاری: همه‌روزه از ۸:۳۰ الی ۲۰:۳۰</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Bottom Copyright and Badge Bar -->
<div class="border-t border-slate-800/80 bg-[#060910] py-6 px-4">
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500">
<p>© <?= date('Y') ?> تمامی حقوق مادی و معنوی متعلق به وب‌سایت تخصصی <strong>تایر قاسمی</strong> می‌باشد.</p>
<div class="flex items-center gap-4 text-slate-400">
<span class="flex items-center gap-1.5"><i data-lucide="shield-check" class="w-4 h-4 text-emerald-400"></i> ضمانت تاریخ تولید روز</span>
<span class="flex items-center gap-1.5"><i data-lucide="wrench" class="w-4 h-4 text-amber-400"></i> خدمات نصب و بالانس لیزری</span>
</div>
</div>
</div>
</footer>
<!-- Compare Drawer & Modals Global Script -->
<script>
// Init Lucide Icons
lucide.createIcons();
// Mobile menu toggle
const mobileBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileBtn && mobileMenu) {
mobileBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
}
// Compare Manager (LocalStorage)
const CompareStore = {
getKey: () => 'gasemi_compare_tires',
getList: function() {
try {
return JSON.parse(localStorage.getItem(this.getKey())) || [];
} catch(e) {
return [];
}
},
add: function(tireId) {
let list = this.getList();
if (!list.includes(tireId)) {
if (list.length >= 4) {
alert('حداکثر می‌توانید ۴ تایر را همزمان با یکدیگر مقایسه نمایید.');
return false;
}
list.push(tireId);
localStorage.setItem(this.getKey(), JSON.stringify(list));
this.updateBadge();
return true;
}
return false;
},
remove: function(tireId) {
let list = this.getList().filter(id => id !== tireId);
localStorage.setItem(this.getKey(), JSON.stringify(list));
this.updateBadge();
},
clear: function() {
localStorage.removeItem(this.getKey());
this.updateBadge();
},
updateBadge: function() {
const list = this.getList();
const badge = document.getElementById('compare-badge');
if (badge) {
badge.innerText = list.length;
if (list.length > 0) {
badge.classList.remove('hidden');
} else {
badge.classList.add('hidden');
}
}
}
};
// Initialize compare badge on load
document.addEventListener('DOMContentLoaded', () => {
CompareStore.updateBadge();
});
</script>
</body>
</html>
+225
View File
@@ -0,0 +1,225 @@
<?php
// includes/header.php
if (!isset($pageTitle)) {
$pageTitle = 'تایر قاسمی | مرکز تخصصی معرفی، مقایسه و انتخاب هوشمند لاستیک خودرو';
}
if (!isset($activeNav)) {
$activeNav = 'home';
}
?>
<!DOCTYPE html>
<html lang="fa" dir="rtl" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($pageTitle) ?></title>
<meta name="description" content="تایر قاسمی - مرجع تخصصی معرفی، مشخصات فنی، مقایسه و مشاوره خرید انواع لاستیک‌های سواری، شاسی‌بلند، باری و اسپرت">
<!-- Fonts: Vazirmatn -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Vazirmatn', 'sans-serif'],
},
colors: {
brand: {
50: '#fff1f2',
100: '#ffe4e6',
200: '#fecdd3',
500: '#f43f5e',
600: '#e11d48',
700: '#be123c',
800: '#9f1239',
900: '#881337',
},
darkbg: {
900: '#0b0f17',
800: '#111827',
700: '#1f2937',
600: '#374151'
}
}
}
}
}
</script>
<!-- Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<style>
* {
font-family: 'Vazirmatn', sans-serif;
scroll-behavior: smooth;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #0f172a;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #e11d48;
}
.glass-card {
background: rgba(17, 24, 39, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-card-light {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(12px);
border: 1px solid rgba(0, 0, 0, 0.06);
}
</style>
</head>
<body class="bg-[#090d16] text-slate-100 min-h-screen flex flex-col selection:bg-brand-600 selection:text-white transition-colors duration-200">
<!-- Top Announcement Bar -->
<div class="bg-gradient-to-r from-brand-900 via-brand-700 to-amber-700 text-xs py-2 px-4 text-center font-medium shadow-md flex justify-between items-center text-white">
<div class="hidden md:flex items-center gap-2">
<i data-lucide="shield-check" class="w-4 h-4 text-emerald-300"></i>
<span>تضمین اصالت کالا و گارانتی معتبر شرکتی تا ۶۰ ماه</span>
</div>
<div class="w-full md:w-auto text-center flex items-center justify-center gap-2">
<span class="inline-block w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
<span>مشاوره و استعلام قیمت آنی تایر:</span>
<a href="tel:02188889900" class="font-bold underline decoration-amber-300 hover:text-amber-200 tracking-wider">۰۲۱-۸۸۸۸۹۹۰۰</a>
</div>
<div class="hidden md:flex items-center gap-4 text-slate-200">
<span class="flex items-center gap-1"><i data-lucide="truck" class="w-3.5 h-3.5"></i> ارسال فوری سراسر کشور</span>
</div>
</div>
<!-- Main Navigation Bar -->
<header class="sticky top-0 z-50 glass-card border-b border-slate-800/80 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo & Brand Name -->
<div class="flex items-center gap-3">
<a href="index.php" class="flex items-center gap-3 group">
<div class="relative w-12 h-12 rounded-2xl bg-gradient-to-br from-brand-600 to-red-800 p-0.5 shadow-lg shadow-brand-900/40 group-hover:scale-105 transition-transform">
<div class="w-full h-full bg-slate-900 rounded-[14px] flex items-center justify-center">
<i data-lucide="disc-3" class="w-7 h-7 text-brand-500 animate-spin-slow group-hover:rotate-180 transition-all duration-700"></i>
</div>
</div>
<div>
<div class="flex items-center gap-1.5">
<span class="text-2xl font-black tracking-tight text-white">تایر</span>
<span class="text-2xl font-black bg-gradient-to-r from-brand-500 to-amber-500 bg-clip-text text-transparent">قاسمی</span>
</div>
<p class="text-[10px] text-slate-400 font-medium">GASEMI TIRE SPECIALIST</p>
</div>
</a>
</div>
<!-- Desktop Menu -->
<nav class="hidden lg:flex items-center gap-1">
<a href="index.php" class="px-4 py-2 rounded-xl text-sm font-semibold transition-all <?= $activeNav === 'home' ? 'bg-brand-600/20 text-brand-400 border border-brand-500/30' : 'text-slate-300 hover:text-white hover:bg-slate-800/60' ?>">
<span class="flex items-center gap-2">
<i data-lucide="home" class="w-4 h-4"></i>
صفحه اصلی
</span>
</a>
<a href="index.php#catalog" class="px-4 py-2 rounded-xl text-sm font-semibold transition-all <?= $activeNav === 'catalog' ? 'bg-brand-600/20 text-brand-400 border border-brand-500/30' : 'text-slate-300 hover:text-white hover:bg-slate-800/60' ?>">
<span class="flex items-center gap-2">
<i data-lucide="layout-grid" class="w-4 h-4"></i>
کاتالوگ تایرها
</span>
</a>
<a href="calculator.php" class="px-4 py-2 rounded-xl text-sm font-semibold transition-all <?= $activeNav === 'calculator' ? 'bg-brand-600/20 text-brand-400 border border-brand-500/30' : 'text-slate-300 hover:text-white hover:bg-slate-800/60' ?>">
<span class="flex items-center gap-2">
<i data-lucide="calculator" class="w-4 h-4"></i>
محاسبه‌گر سایز
</span>
</a>
<a href="compare.php" class="px-4 py-2 rounded-xl text-sm font-semibold transition-all <?= $activeNav === 'compare' ? 'bg-brand-600/20 text-brand-400 border border-brand-500/30' : 'text-slate-300 hover:text-white hover:bg-slate-800/60' ?>">
<span class="flex items-center gap-2">
<i data-lucide="git-compare" class="w-4 h-4"></i>
مقایسه تایرها
</span>
</a>
<a href="guide.php" class="px-4 py-2 rounded-xl text-sm font-semibold transition-all <?= $activeNav === 'guide' ? 'bg-brand-600/20 text-brand-400 border border-brand-500/30' : 'text-slate-300 hover:text-white hover:bg-slate-800/60' ?>">
<span class="flex items-center gap-2">
<i data-lucide="book-open" class="w-4 h-4"></i>
راهنما و تنظیم باد
</span>
</a>
<a href="contact.php" class="px-4 py-2 rounded-xl text-sm font-semibold transition-all <?= $activeNav === 'contact' ? 'bg-brand-600/20 text-brand-400 border border-brand-500/30' : 'text-slate-300 hover:text-white hover:bg-slate-800/60' ?>">
<span class="flex items-center gap-2">
<i data-lucide="phone-call" class="w-4 h-4"></i>
تماس و شعب
</span>
</a>
</nav>
<!-- Quick Action Buttons -->
<div class="flex items-center gap-3">
<a href="compare.php" class="relative p-2.5 rounded-xl bg-slate-800/80 border border-slate-700/60 text-slate-300 hover:text-brand-400 hover:border-brand-500/40 transition-all" title="لیست مقایسه">
<i data-lucide="git-compare" class="w-5 h-5"></i>
<span id="compare-badge" class="hidden absolute -top-1 -right-1 w-5 h-5 bg-brand-600 text-white rounded-full text-xs font-bold flex items-center justify-center shadow">0</span>
</a>
<a href="index.php#consultation" class="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-gradient-to-r from-brand-600 to-rose-600 hover:from-brand-500 hover:to-rose-500 text-white text-sm font-bold shadow-lg shadow-brand-600/30 hover:shadow-brand-600/50 hover:-translate-y-0.5 transition-all">
<i data-lucide="headset" class="w-4 h-4"></i>
مشاوره خرید رایگان
</a>
<a href="admin/index.php" class="p-2.5 rounded-xl bg-slate-800/80 border border-slate-700/60 text-slate-400 hover:text-amber-400 transition-all text-xs flex items-center gap-1.5" title="پنل مدیریت">
<i data-lucide="lock" class="w-4 h-4"></i>
<span class="hidden xl:inline">پنل</span>
</a>
<!-- Mobile Menu Trigger -->
<button id="mobile-menu-btn" class="lg:hidden p-2.5 rounded-xl bg-slate-800 text-slate-300 hover:text-white">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Drawer Navigation -->
<div id="mobile-menu" class="hidden lg:hidden border-t border-slate-800 bg-slate-900/95 backdrop-blur-xl px-4 pt-3 pb-6 space-y-2">
<a href="index.php" class="flex items-center gap-3 px-4 py-3 rounded-xl text-base font-semibold <?= $activeNav === 'home' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800' ?>">
<i data-lucide="home" class="w-5 h-5"></i> صفحه اصلی
</a>
<a href="index.php#catalog" class="flex items-center gap-3 px-4 py-3 rounded-xl text-base font-semibold <?= $activeNav === 'catalog' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800' ?>">
<i data-lucide="layout-grid" class="w-5 h-5"></i> کاتالوگ تایرها
</a>
<a href="calculator.php" class="flex items-center gap-3 px-4 py-3 rounded-xl text-base font-semibold <?= $activeNav === 'calculator' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800' ?>">
<i data-lucide="calculator" class="w-5 h-5"></i> محاسبه‌گر سایز لاستیک
</a>
<a href="compare.php" class="flex items-center gap-3 px-4 py-3 rounded-xl text-base font-semibold <?= $activeNav === 'compare' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800' ?>">
<i data-lucide="git-compare" class="w-5 h-5"></i> مقایسه آنلاین تایرها
</a>
<a href="guide.php" class="flex items-center gap-3 px-4 py-3 rounded-xl text-base font-semibold <?= $activeNav === 'guide' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800' ?>">
<i data-lucide="book-open" class="w-5 h-5"></i> راهنمای فنی و تنظیم باد
</a>
<a href="contact.php" class="flex items-center gap-3 px-4 py-3 rounded-xl text-base font-semibold <?= $activeNav === 'contact' ? 'bg-brand-600 text-white' : 'text-slate-300 hover:bg-slate-800' ?>">
<i data-lucide="phone-call" class="w-5 h-5"></i> تماس، شعب و موقعیت
</a>
<div class="pt-3">
<a href="index.php#consultation" class="w-full flex items-center justify-center gap-2 py-3 rounded-xl bg-brand-600 text-white font-bold shadow-lg">
<i data-lucide="headset" class="w-5 h-5"></i>
درخواست استعلام و مشاوره
</a>
</div>
</div>
</header>