226 lines
13 KiB
PHP
226 lines
13 KiB
PHP
<?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>
|