root/gasemi_tier
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+2
View File
@@ -58,3 +58,5 @@ tmp/
.vscode/
*.swp
*.swo
.server.pid
admin/index.php
+328
View File
@@ -0,0 +1,328 @@
<?php
// admin/index.php
require_once __DIR__ . '/../includes/db.php';
$message = '';
$error = '';
// Handle add / update tire
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$action = $_POST['admin_action'] ?? '';
if ($action === 'add_tire') {
$id = 'TR-' . (count(TireStore::getTires()) + 101);
$name = trim($_POST['name'] ?? '');
$brand = trim($_POST['brand'] ?? '');
$country = trim($_POST['country'] ?? '');
$category = trim($_POST['category'] ?? 'سواری');
$width = intval($_POST['width'] ?? 185);
$aspect = intval($_POST['aspect_ratio'] ?? 65);
$rim = intval($_POST['rim'] ?? 14);
$speed = trim($_POST['speed_index'] ?? 'H');
$load = trim($_POST['load_index'] ?? '86');
$price = intval($_POST['price'] ?? 0);
$stock = intval($_POST['stock'] ?? 10);
$warranty = intval($_POST['warranty_months'] ?? 36);
$vehicles = array_filter(array_map('trim', explode(',', $_POST['vehicles'] ?? '')));
$desc = trim($_POST['description'] ?? '');
if ($name && $brand && $price > 0) {
$newTire = [
"id" => $id,
"name" => $name,
"brand" => $brand,
"country" => $country,
"category" => $category,
"width" => $width,
"aspect_ratio" => $aspect,
"rim" => $rim,
"size_str" => "{$width}/{$aspect}R{$rim}",
"speed_index" => $speed,
"load_index" => $load,
"season" => "four_season",
"season_fa" => "چهار فصل",
"warranty_months" => $warranty,
"production_year" => "2026",
"fuel_efficiency" => "B",
"wet_grip" => "A",
"noise_level" => "69 dB",
"price" => $price,
"discount_percent" => 0,
"stock" => $stock,
"rating" => 5.0,
"reviews_count" => 1,
"vehicles" => $vehicles,
"description" => $desc,
"features" => ["تولید سال ۲۰۲۶ با گارانتی شرکتی", "ترکیب سیلیکایی با دوام بالا"],
"image" => "assets/images/tire_barez_p648.svg",
"is_featured" => false,
"is_best_seller" => false
];
TireStore::addTire($newTire);
$message = 'تایر جدید با موفقیت به انبار و کاتالوگ اضافه گردید.';
} else {
$error = 'لطفاً تمامی فیلدهای الزامی را پر کنید.';
}
}
if ($action === 'delete_tire') {
$delId = $_POST['tire_id'] ?? '';
if ($delId) {
TireStore::deleteTire($delId);
$message = "تایر با شناسه {$delId} حذف گردید.";
}
}
}
$tires = TireStore::getTires();
$consultations = TireStore::getConsultations();
?>
<!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>پنل مدیریت و انبارداری | تایر قاسمی</title>
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700;900&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
* { font-family: 'Vazirmatn', sans-serif; }
</style>
</head>
<body class="bg-[#0b0f17] text-slate-100 min-h-screen">
<!-- Top Admin Bar -->
<header class="border-b border-slate-800 bg-slate-900/80 sticky top-0 z-40 backdrop-blur">
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-brand-600 flex items-center justify-center text-white">
<i data-lucide="shield" class="w-5 h-5"></i>
</div>
<div>
<h1 class="text-base font-black text-white">داشبورد مدیریت تایر قاسمی</h1>
<p class="text-[10px] text-slate-400">انبارداری، استعلام‌ها و کاتالوگ محصولات</p>
</div>
</div>
<div class="flex items-center gap-3">
<a href="../index.php" class="px-3.5 py-1.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-xs font-bold text-slate-300 flex items-center gap-1.5">
<i data-lucide="external-link" class="w-3.5 h-3.5"></i>
مشاهده سایت
</a>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 py-8 space-y-8">
<?php if ($message): ?>
<div class="p-4 rounded-2xl bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 text-xs font-bold flex items-center gap-2">
<i data-lucide="check-circle" class="w-4 h-4"></i> <?= htmlspecialchars($message) ?>
</div>
<?php endif; ?>
<?php if ($error): ?>
<div class="p-4 rounded-2xl bg-rose-500/20 border border-rose-500/30 text-rose-300 text-xs font-bold flex items-center gap-2">
<i data-lucide="alert-circle" class="w-4 h-4"></i> <?= htmlspecialchars($error) ?>
</div>
<?php endif; ?>
<!-- Stats Overview Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="p-5 rounded-2xl bg-slate-900 border border-slate-800">
<span class="text-xs text-slate-400">تنوع کل تایرها در انبار</span>
<div class="text-2xl font-black text-white mt-1"><?= count($tires) ?> <span class="text-xs text-slate-500 font-normal">مدل</span></div>
</div>
<div class="p-5 rounded-2xl bg-slate-900 border border-slate-800">
<span class="text-xs text-slate-400">مجموع موجودی حلقه‌ها</span>
<div class="text-2xl font-black text-amber-400 mt-1"><?= array_sum(array_column($tires, 'stock')) ?> <span class="text-xs text-slate-500 font-normal">حلقه</span></div>
</div>
<div class="p-5 rounded-2xl bg-slate-900 border border-slate-800">
<span class="text-xs text-slate-400">درخواست‌های مشاوره و استعلام</span>
<div class="text-2xl font-black text-emerald-400 mt-1"><?= count($consultations) ?> <span class="text-xs text-slate-500 font-normal">مورد</span></div>
</div>
<div class="p-5 rounded-2xl bg-slate-900 border border-slate-800">
<span class="text-xs text-slate-400">وضعیت سرور و اتصال گیت</span>
<div class="text-sm font-bold text-cyan-400 mt-2 flex items-center gap-1.5">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span> آنلاین و فعال
</div>
</div>
</div>
<!-- Add New Tire Form Accordion -->
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4">
<h2 class="text-base font-black text-white flex items-center gap-2">
<i data-lucide="plus-circle" class="w-5 h-5 text-brand-400"></i>
افزودن تایر جدید به انبار و کاتالوگ
</h2>
<form method="POST" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-xs">
<input type="hidden" name="admin_action" value="add_tire">
<div>
<label class="block font-bold text-slate-300 mb-1">نام و مدل تایر *</label>
<input type="text" name="name" required placeholder="مثلاً: بارز پریمیوم P660" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">برند سازنده *</label>
<input type="text" name="brand" required placeholder="بارز، کویر، هانکوک..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">کشور سازنده</label>
<input type="text" name="country" placeholder="ایران، کره جنوبی، فرانسه..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">دسته‌بندی</label>
<select name="category" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
<option value="سواری">سواری شهری</option>
<option value="اسپرت">اسپرت و ریسینگ</option>
<option value="شاسی بلند و آفرود (SUV/4x4)">شاسی بلند و آفرود (SUV/4x4)</option>
<option value="لوکس و پرمیوم">لوکس و پرمیوم</option>
</select>
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">پهنا (Width - mm)</label>
<input type="number" name="width" value="205" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">نسبت فاق (Aspect - %)</label>
<input type="number" name="aspect_ratio" value="55" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">قطر رینگ (Rim - اینچ)</label>
<input type="number" name="rim" value="16" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">قیمت هر حلقه (تومان) *</label>
<input type="number" name="price" required placeholder="5500000" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">موجودی انبار (حلقه)</label>
<input type="number" name="stock" value="20" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div>
<label class="block font-bold text-slate-300 mb-1">گارانتی (ماه)</label>
<input type="number" name="warranty_months" value="36" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div class="sm:col-span-2">
<label class="block font-bold text-slate-300 mb-1">خودروهای سازگار (با کاما جدا کنید)</label>
<input type="text" name="vehicles" placeholder="دنا پلاس, تارا, شاهین, مگان" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div class="sm:col-span-4">
<label class="block font-bold text-slate-300 mb-1">توضیحات فنی و کاربرد</label>
<input type="text" name="description" placeholder="توضیح کوتاه درباره کارایی و چسبندگی تایر..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-white">
</div>
<div class="sm:col-span-4 pt-2">
<button type="submit" class="px-6 py-2.5 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white font-bold transition-all shadow">
افزودن و انتشار در کاتالوگ
</button>
</div>
</form>
</div>
<!-- Tire Inventory Table -->
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4">
<h2 class="text-base font-black text-white flex items-center gap-2">
<i data-lucide="database" class="w-5 h-5 text-amber-400"></i>
مدیریت موجودی و قیمت تایرها
</h2>
<div class="overflow-x-auto">
<table class="w-full text-right text-xs">
<thead>
<tr class="border-b border-slate-800 text-slate-400">
<th class="p-3">کد</th>
<th class="p-3">نام و مدل تایر</th>
<th class="p-3">برند</th>
<th class="p-3">سایز</th>
<th class="p-3">قیمت مصوب</th>
<th class="p-3">موجودی</th>
<th class="p-3">گارانتی</th>
<th class="p-3 text-center">عملیات</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800/60 text-slate-200">
<?php foreach ($tires as $t): ?>
<tr class="hover:bg-slate-800/30">
<td class="p-3 font-mono text-slate-400"><?= $t['id'] ?></td>
<td class="p-3 font-bold text-white"><?= htmlspecialchars($t['name']) ?></td>
<td class="p-3 text-brand-400 font-medium"><?= htmlspecialchars($t['brand']) ?></td>
<td class="p-3"><span class="px-2 py-0.5 rounded bg-slate-800"><?= $t['size_str'] ?></span></td>
<td class="p-3 font-bold"><?= number_format($t['price']) ?> تومان</td>
<td class="p-3"><span class="px-2 py-0.5 rounded <?= $t['stock'] > 10 ? 'bg-emerald-500/20 text-emerald-400' : 'bg-rose-500/20 text-rose-400' ?>"><?= $t['stock'] ?> حلقه</span></td>
<td class="p-3"><?= $t['warranty_months'] ?> ماه</td>
<td class="p-3 text-center">
<form method="POST" onsubmit="return confirm('آیا از حذف این تایر مطمئن هستید؟');" class="inline">
<input type="hidden" name="admin_action" value="delete_tire">
<input type="hidden" name="tire_id" value="<?= $t['id'] ?>">
<button type="submit" class="p-1.5 rounded-lg bg-rose-500/10 hover:bg-rose-500/30 text-rose-400 transition-colors" title="حذف تایر">
<i data-lucide="trash-2" class="w-4 h-4"></i>
</button>
</form>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<!-- Inquiries / Consultations Table -->
<div class="p-6 rounded-3xl bg-slate-900 border border-slate-800 space-y-4">
<h2 class="text-base font-black text-white flex items-center gap-2">
<i data-lucide="headset" class="w-5 h-5 text-emerald-400"></i>
درخواست‌های استعلام قیمت و مشاوره کاربران
</h2>
<div class="overflow-x-auto">
<table class="w-full text-right text-xs">
<thead>
<tr class="border-b border-slate-800 text-slate-400">
<th class="p-3">کد</th>
<th class="p-3">نام مشتری</th>
<th class="p-3">شماره تماس</th>
<th class="p-3">خودرو</th>
<th class="p-3">متن پیام</th>
<th class="p-3">تاریخ ثبت</th>
<th class="p-3">وضعیت</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800/60 text-slate-200">
<?php foreach ($consultations as $c): ?>
<tr class="hover:bg-slate-800/30">
<td class="p-3 font-mono text-slate-400"><?= $c['id'] ?></td>
<td class="p-3 font-bold text-white"><?= htmlspecialchars($c['name']) ?></td>
<td class="p-3 font-mono text-brand-400"><?= htmlspecialchars($c['phone']) ?></td>
<td class="p-3 text-slate-300"><?= htmlspecialchars($c['car'] ?: '-') ?></td>
<td class="p-3 text-slate-400 max-w-xs truncate"><?= htmlspecialchars($c['message'] ?: '-') ?></td>
<td class="p-3 text-slate-500"><?= htmlspecialchars($c['created_at']) ?></td>
<td class="p-3"><span class="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-400 font-bold"><?= htmlspecialchars($c['status']) ?></span></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</main>
<script>
lucide.createIcons();
</script>
</body>
</html>
api.php
+66
View File
@@ -0,0 +1,66 @@
<?php
// api.php
header('Content-Type: application/json; charset=utf-8');
require_once __DIR__ . '/includes/db.php';
$action = $_GET['action'] ?? $_POST['action'] ?? '';
switch ($action) {
case 'get_tires':
$tires = TireStore::getTires();
$brand = $_GET['brand'] ?? '';
$rim = $_GET['rim'] ?? '';
$season = $_GET['season'] ?? '';
$category = $_GET['category'] ?? '';
$q = trim($_GET['q'] ?? '');
$filtered = array_filter($tires, function($t) use ($brand, $rim, $season, $category, $q) {
if ($brand && $t['brand'] !== $brand) return false;
if ($rim && (string)$t['rim'] !== (string)$rim) return false;
if ($season && $t['season'] !== $season) return false;
if ($category && stripos($t['category'], $category) === false) return false;
if ($q) {
$searchContent = $t['name'] . ' ' . $t['brand'] . ' ' . $t['size_str'] . ' ' . implode(' ', $t['vehicles'] ?? []);
if (stripos($searchContent, $q) === false) return false;
}
return true;
});
echo json_encode(["status" => "success", "count" => count($filtered), "data" => array_values($filtered)], JSON_UNESCAPED_UNICODE);
break;
case 'get_tire':
$id = $_GET['id'] ?? '';
$tire = TireStore::getTireById($id);
if ($tire) {
echo json_encode(["status" => "success", "data" => $tire], JSON_UNESCAPED_UNICODE);
} else {
echo json_encode(["status" => "error", "message" => "تایر مورد نظر یافت نشد."], JSON_UNESCAPED_UNICODE);
}
break;
case 'submit_consultation':
$name = trim($_POST['name'] ?? '');
$phone = trim($_POST['phone'] ?? '');
$car = trim($_POST['car'] ?? '');
$message = trim($_POST['message'] ?? '');
if (!$name || !$phone) {
echo json_encode(["status" => "error", "message" => "لطفاً نام و شماره تماس خود را وارد نمایید."], JSON_UNESCAPED_UNICODE);
exit;
}
$res = TireStore::addConsultation([
"name" => $name,
"phone" => $phone,
"car" => $car,
"message" => $message
]);
echo json_encode(["status" => "success", "message" => "درخواست مشاوره شما با موفقیت ثبت شد. کارشناسان ما به زودی با شما تماس خواهند گرفت.", "data" => $res], JSON_UNESCAPED_UNICODE);
break;
default:
echo json_encode(["status" => "error", "message" => "Invalid action"], JSON_UNESCAPED_UNICODE);
break;
}
assets/generate_svgs.php
+133
View File
@@ -0,0 +1,133 @@
<?php
// assets/generate_svgs.php
$dir = __DIR__ . '/images';
if (!is_dir($dir)) {
mkdir($dir, 0755, true);
}
// Generate realistic SVG tire graphics with tread patterns and styling
function makeTireSvg($filename, $name, $badgeColor = '#e11d48', $treadType = 'standard') {
$svg = '<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="' . $badgeColor . '" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">' . htmlspecialchars(strtoupper($name)) . ' - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="' . $badgeColor . '"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="' . $badgeColor . '"/>
</svg>';
file_put_contents($filename, $svg);
}
// Generate brand logo SVGs
function makeBrandLogo($filename, $title, $accentColor, $symbol) {
$svg = '<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="' . $accentColor . '" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="' . $accentColor . '"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">' . $symbol . '</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">' . htmlspecialchars($title) . '</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>';
file_put_contents($filename, $svg);
}
makeTireSvg(__DIR__ . '/images/tire_barez_p648.svg', 'BAREZ P648', '#2563eb');
makeTireSvg(__DIR__ . '/images/tire_kavir_kb14.svg', 'KAVIR KB14', '#059669');
makeTireSvg(__DIR__ . '/images/tire_yazd_neptune.svg', 'YAZD NEPTUNE', '#d97706');
makeTireSvg(__DIR__ . '/images/tire_hankook_k135.svg', 'HANKOOK K135', '#ea580c');
makeTireSvg(__DIR__ . '/images/tire_kumho_ps31.svg', 'KUMHO ECSTA PS31', '#dc2626');
makeTireSvg(__DIR__ . '/images/tire_michelin_primacy.svg', 'MICHELIN PRIMACY 4+', '#1d4ed8');
makeTireSvg(__DIR__ . '/images/tire_pirelli_pzero.svg', 'PIRELLI P ZERO', '#e11d48');
makeTireSvg(__DIR__ . '/images/tire_maxxis_at771.svg', 'MAXXIS AT771', '#7c3aed');
makeTireSvg(__DIR__ . '/images/tire_triangle_tr259.svg', 'TRIANGLE TR259', '#0284c7');
makeTireSvg(__DIR__ . '/images/tire_nexen_su4.svg', 'NEXEN NFERA SU4', '#4f46e5');
makeBrandLogo(__DIR__ . '/images/logo_barez.svg', 'BAREZ', '#2563eb', 'B');
makeBrandLogo(__DIR__ . '/images/logo_kavir.svg', 'KAVIR', '#059669', 'K');
makeBrandLogo(__DIR__ . '/images/logo_yazd.svg', 'YAZD TIRE', '#d97706', 'Y');
makeBrandLogo(__DIR__ . '/images/logo_hankook.svg', 'HANKOOK', '#ea580c', 'H');
makeBrandLogo(__DIR__ . '/images/logo_kumho.svg', 'KUMHO', '#dc2626', 'K');
makeBrandLogo(__DIR__ . '/images/logo_michelin.svg', 'MICHELIN', '#1d4ed8', 'M');
makeBrandLogo(__DIR__ . '/images/logo_pirelli.svg', 'PIRELLI', '#e11d48', 'P');
makeBrandLogo(__DIR__ . '/images/logo_maxxis.svg', 'MAXXIS', '#7c3aed', 'M');
echo "SVG generation complete.\n";
assets/images/logo_barez.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="#2563eb" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="#2563eb"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">B</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">BAREZ</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 715 B

assets/images/logo_hankook.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="#ea580c" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="#ea580c"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">H</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">HANKOOK</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 717 B

assets/images/logo_kavir.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="#059669" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="#059669"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">K</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">KAVIR</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 715 B

assets/images/logo_kumho.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="#dc2626" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="#dc2626"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">K</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">KUMHO</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 715 B

assets/images/logo_maxxis.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="#7c3aed" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="#7c3aed"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">M</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">MAXXIS</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 716 B

assets/images/logo_michelin.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="#1d4ed8" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="#1d4ed8"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">M</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">MICHELIN</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 718 B

assets/images/logo_pirelli.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="#e11d48" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="#e11d48"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">P</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">PIRELLI</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 717 B

assets/images/logo_yazd.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="240" height="120" viewBox="0 0 240 120" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="240" height="120" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
<circle cx="60" cy="60" r="32" fill="#d97706" fill-opacity="0.15"/>
<circle cx="60" cy="60" r="24" fill="#d97706"/>
<text x="60" y="67" font-family="Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle">Y</text>
<text x="105" y="58" font-family="Arial, sans-serif" font-size="17" font-weight="bold" fill="#f8fafc">YAZD TIRE</text>
<text x="105" y="77" font-family="Arial, sans-serif" font-size="11" fill="#94a3b8">ORIGINAL BRAND</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 719 B

assets/images/tire_barez_p648.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#2563eb" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">BAREZ P648 - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#2563eb"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#2563eb"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_hankook_k135.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#ea580c" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">HANKOOK K135 - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#ea580c"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#ea580c"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_kavir_kb14.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#059669" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">KAVIR KB14 - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#059669"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#059669"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_kumho_ps31.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#dc2626" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">KUMHO ECSTA PS31 - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#dc2626"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#dc2626"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_maxxis_at771.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#7c3aed" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">MAXXIS AT771 - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#7c3aed"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#7c3aed"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_michelin_primacy.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#1d4ed8" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">MICHELIN PRIMACY 4+ - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#1d4ed8"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#1d4ed8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_nexen_su4.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4f46e5" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">NEXEN NFERA SU4 - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#4f46e5"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#4f46e5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_pirelli_pzero.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#e11d48" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">PIRELLI P ZERO - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#e11d48"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#e11d48"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_triangle_tr259.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#0284c7" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">TRIANGLE TR259 - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#0284c7"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#0284c7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

assets/images/tire_yazd_neptune.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="tireGrad" cx="50%" cy="50%" r="50%" fx="30%" fy="30%">
<stop offset="0%" stop-color="#374151" />
<stop offset="70%" stop-color="#111827" />
<stop offset="100%" stop-color="#030712" />
</radialGradient>
<radialGradient id="rimGrad" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#f3f4f6" />
<stop offset="45%" stop-color="#9ca3af" />
<stop offset="85%" stop-color="#4b5563" />
<stop offset="100%" stop-color="#1f2937" />
</radialGradient>
<radialGradient id="centerCap" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#d97706" />
<stop offset="100%" stop-color="#0f172a" />
</radialGradient>
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
<feDropShadow dx="0" dy="10" stdDeviation="15" flood-color="#000000" flood-opacity="0.5"/>
</filter>
</defs>
<!-- Outer Shadow & Tire Rubber -->
<circle cx="200" cy="200" r="175" fill="url(#tireGrad)" filter="url(#shadow)" stroke="#1e293b" stroke-width="4"/>
<!-- Outer Tread Marks -->
<circle cx="200" cy="200" r="162" fill="none" stroke="#262e3d" stroke-width="8" stroke-dasharray="14, 8"/>
<circle cx="200" cy="200" r="148" fill="none" stroke="#1f2937" stroke-width="4" stroke-dasharray="8, 6"/>
<!-- Sidewall -->
<circle cx="200" cy="200" r="138" fill="#18202f" stroke="#0f172a" stroke-width="3"/>
<circle cx="200" cy="200" r="115" fill="#0f172a"/>
<!-- Sidewall Text Emulation -->
<path id="textPath1" d="M 90,200 A 110,110 0 0,1 310,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="#64748b" letter-spacing="3">
<textPath href="#textPath1" startOffset="50%" text-anchor="middle">YAZD NEPTUNE - HIGH PERFORMANCE</textPath>
</text>
<path id="textPath2" d="M 310,200 A 110,110 0 0,1 90,200" fill="none"/>
<text font-family="Arial, sans-serif" font-size="9" font-weight="bold" fill="#475569" letter-spacing="2">
<textPath href="#textPath2" startOffset="50%" text-anchor="middle">SAFETY &amp; TRACTION TECH - GASEMI TIRE</textPath>
</text>
<!-- Alloy Rim Outer Lip -->
<circle cx="200" cy="200" r="105" fill="url(#rimGrad)" stroke="#374151" stroke-width="3"/>
<circle cx="200" cy="200" r="92" fill="#0b0f19"/>
<!-- Alloy Spokes (5-Star / 10-Spoke Sport Design) -->
<g stroke="#94a3b8" stroke-width="12" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<g stroke="#cbd5e1" stroke-width="6" stroke-linecap="round">
<line x1="200" y1="200" x2="200" y2="110"/>
<line x1="200" y1="200" x2="285" y2="172"/>
<line x1="200" y1="200" x2="253" y2="270"/>
<line x1="200" y1="200" x2="147" y2="270"/>
<line x1="200" y1="200" x2="115" y2="172"/>
</g>
<!-- Brake Disc & Caliper Behind Rim -->
<circle cx="200" cy="200" r="65" fill="#475569" opacity="0.6"/>
<circle cx="200" cy="200" r="60" fill="none" stroke="#334155" stroke-dasharray="4,6" stroke-width="3"/>
<!-- Caliper -->
<path d="M 235,160 A 65,65 0 0,1 255,200 L 240,200 A 50,50 0 0,0 225,170 Z" fill="#d97706"/>
<!-- Center Hub & Wheel Lug Nuts -->
<circle cx="200" cy="200" r="35" fill="#1e293b" stroke="#64748b" stroke-width="2"/>
<circle cx="200" cy="200" r="22" fill="url(#centerCap)"/>
<!-- Lug Nuts -->
<circle cx="200" cy="178" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="221" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="213" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="187" cy="218" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<circle cx="179" cy="193" r="4.5" fill="#e2e8f0" stroke="#475569" stroke-width="1.5"/>
<!-- Center Logo Emblem -->
<circle cx="200" cy="200" r="14" fill="#0f172a" stroke="#ffffff" stroke-width="1.5"/>
<path d="M195 200 L200 193 L205 200 L202 200 L202 206 L198 206 L198 200 Z" fill="#d97706"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

calculator.php
+321
View File
@@ -0,0 +1,321 @@
<?php
// calculator.php
$pageTitle = 'محاسبه‌گر آنلاین تغییر سایز و خطای کیلومترشمار تایر | تایر قاسمی';
$activeNav = 'calculator';
require_once __DIR__ . '/includes/header.php';
?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Title Header -->
<div class="text-center max-w-3xl mx-auto mb-10">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-600/20 text-brand-400 text-xs font-bold mb-3">
<i data-lucide="calculator" class="w-4 h-4"></i>
ابزار مهندسی و تخصصی
</div>
<h1 class="text-3xl sm:text-4xl font-black text-white">محاسبه‌گر تبدیل سایز و مقایسه رینگ و لاستیک</h1>
<p class="text-sm text-slate-400 mt-2">
بررسی دقیق میزان تغییر قطر کل، فاق لاستیک، تغییر ارتفاع خودرو و میزان خطای سرعت‌سنج (Speedometer Error) هنگام تعویض یا ارتقای سایز رینگ و لاستیک.
</p>
</div>
<!-- Quick Car Presets Bar -->
<div class="glass-card p-4 rounded-2xl border border-slate-800 mb-8">
<div class="flex flex-wrap items-center justify-between gap-3 text-xs">
<span class="font-bold text-white flex items-center gap-1.5"><i data-lucide="zap" class="w-4 h-4 text-amber-400"></i> سایزهای فابریک خودروهای پرکاربرد:</span>
<div class="flex flex-wrap gap-2">
<button onclick="setPreset(165, 65, 13, 175, 70, 13)" class="px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-brand-600/40 text-slate-300 hover:text-white transition-colors">پراید: 165/65R13 ← 175/70R13</button>
<button onclick="setPreset(185, 65, 14, 205, 60, 14)" class="px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-brand-600/40 text-slate-300 hover:text-white transition-colors">پژو 206/405: 185/65R14 ← 205/60R14</button>
<button onclick="setPreset(185, 65, 15, 205, 60, 15)" class="px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-brand-600/40 text-slate-300 hover:text-white transition-colors">سمند/ال90: 185/65R15 ← 205/60R15</button>
<button onclick="setPreset(195, 60, 15, 205, 55, 16)" class="px-2.5 py-1 rounded-lg bg-slate-800 hover:bg-brand-600/40 text-slate-300 hover:text-white transition-colors">دنا/تارا: 195/60R15 ← 205/55R16</button>
</div>
</div>
</div>
<!-- Main Calculator Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Left Column: Inputs Form -->
<div class="lg:col-span-5 space-y-6">
<!-- Tire 1 (Original) -->
<div class="glass-card p-6 rounded-3xl border border-blue-500/30 space-y-4 relative">
<div class="flex items-center justify-between">
<h3 class="text-base font-black text-white flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-blue-500"></span>
سایز تایر فعلی (فابریک خودرو)
</h3>
<span class="text-xs px-2 py-0.5 rounded bg-blue-500/20 text-blue-400 font-bold" id="size1-str">185/65R14</span>
</div>
<div class="grid grid-cols-3 gap-3">
<div>
<label class="block text-[11px] font-bold text-slate-400 mb-1">پهنا (Width - mm)</label>
<select id="w1" onchange="calculate()" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-2.5 py-2 text-sm text-white focus:outline-none focus:border-blue-500">
<?php foreach ([155, 165, 175, 185, 195, 205, 215, 225, 235, 245, 255, 265, 275] as $val): ?>
<option value="<?= $val ?>" <?= $val == 185 ? 'selected' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<label class="block text-[11px] font-bold text-slate-400 mb-1">فاق (Aspect - %)</label>
<select id="a1" onchange="calculate()" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-2.5 py-2 text-sm text-white focus:outline-none focus:border-blue-500">
<?php foreach ([40, 45, 50, 55, 60, 65, 70, 75, 80] as $val): ?>
<option value="<?= $val ?>" <?= $val == 65 ? 'selected' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<label class="block text-[11px] font-bold text-slate-400 mb-1">رینگ (Rim - اینچ)</label>
<select id="r1" onchange="calculate()" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-2.5 py-2 text-sm text-white focus:outline-none focus:border-blue-500">
<?php foreach ([13, 14, 15, 16, 17, 18, 19, 20] as $val): ?>
<option value="<?= $val ?>" <?= $val == 14 ? 'selected' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<!-- Tire 2 (New / Target) -->
<div class="glass-card p-6 rounded-3xl border border-brand-500/40 space-y-4 relative">
<div class="flex items-center justify-between">
<h3 class="text-base font-black text-white flex items-center gap-2">
<span class="w-3 h-3 rounded-full bg-brand-500"></span>
سایز تایر جدید (هدف / پهن‌تر)
</h3>
<span class="text-xs px-2 py-0.5 rounded bg-brand-500/20 text-brand-400 font-bold" id="size2-str">205/60R14</span>
</div>
<div class="grid grid-cols-3 gap-3">
<div>
<label class="block text-[11px] font-bold text-slate-400 mb-1">پهنا (Width - mm)</label>
<select id="w2" onchange="calculate()" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-2.5 py-2 text-sm text-white focus:outline-none focus:border-brand-500">
<?php foreach ([155, 165, 175, 185, 195, 205, 215, 225, 235, 245, 255, 265, 275] as $val): ?>
<option value="<?= $val ?>" <?= $val == 205 ? 'selected' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<label class="block text-[11px] font-bold text-slate-400 mb-1">فاق (Aspect - %)</label>
<select id="a2" onchange="calculate()" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-2.5 py-2 text-sm text-white focus:outline-none focus:border-brand-500">
<?php foreach ([40, 45, 50, 55, 60, 65, 70, 75, 80] as $val): ?>
<option value="<?= $val ?>" <?= $val == 60 ? 'selected' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<label class="block text-[11px] font-bold text-slate-400 mb-1">رینگ (Rim - اینچ)</label>
<select id="r2" onchange="calculate()" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-2.5 py-2 text-sm text-white focus:outline-none focus:border-brand-500">
<?php foreach ([13, 14, 15, 16, 17, 18, 19, 20] as $val): ?>
<option value="<?= $val ?>" <?= $val == 14 ? 'selected' : '' ?>><?= $val ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
<!-- Tolerance Safety Alert Box -->
<div id="safety-box" class="p-5 rounded-2xl border transition-all">
<div class="flex items-start gap-3">
<i id="safety-icon" data-lucide="check-circle" class="w-6 h-6 shrink-0 mt-0.5"></i>
<div>
<h4 id="safety-title" class="text-sm font-bold">وضعیت انحراف استاندارد</h4>
<p id="safety-desc" class="text-xs mt-1 leading-relaxed"></p>
</div>
</div>
</div>
</div>
<!-- Right Column: Results & Side-by-Side Comparison -->
<div class="lg:col-span-7 space-y-6">
<!-- Result Cards Table -->
<div class="glass-card rounded-3xl p-6 border border-slate-800 overflow-hidden">
<h3 class="text-base font-black text-white mb-4 flex items-center gap-2">
<i data-lucide="bar-chart-3" class="w-5 h-5 text-brand-400"></i>
جدول مقایسه دقیق پارامترها
</h3>
<div class="overflow-x-auto">
<table class="w-full text-right text-xs">
<thead>
<tr class="border-b border-slate-800 text-slate-400">
<th class="pb-3 font-semibold">پارامتر مهندسی</th>
<th class="pb-3 font-semibold text-blue-400">سایز فعلی</th>
<th class="pb-3 font-semibold text-brand-400">سایز جدید</th>
<th class="pb-3 font-semibold text-white">اختلاف</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800/60 text-slate-200">
<tr>
<td class="py-3 font-medium text-slate-400">قطر کل چرخ (Diameter)</td>
<td class="py-3" id="res-d1">-</td>
<td class="py-3" id="res-d2">-</td>
<td class="py-3 font-bold" id="res-diff-d">-</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-400">ارتفاع دیواره لاستیک (فاق)</td>
<td class="py-3" id="res-sw1">-</td>
<td class="py-3" id="res-sw2">-</td>
<td class="py-3 font-bold" id="res-diff-sw">-</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-400">محیط چرخش تایر (Circumference)</td>
<td class="py-3" id="res-c1">-</td>
<td class="py-3" id="res-c2">-</td>
<td class="py-3 font-bold" id="res-diff-c">-</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-400">تعداد چرخش در هر کیلومتر</td>
<td class="py-3" id="res-rev1">-</td>
<td class="py-3" id="res-rev2">-</td>
<td class="py-3 font-bold" id="res-diff-rev">-</td>
</tr>
<tr>
<td class="py-3 font-medium text-slate-400">تغییر ارتفاع زیر خودرو (Clearance)</td>
<td class="py-3">-</td>
<td class="py-3">-</td>
<td class="py-3 font-bold text-amber-400" id="res-diff-height">-</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Speedometer Error Gauge Box -->
<div class="glass-card rounded-3xl p-6 border border-slate-800 bg-gradient-to-r from-slate-900 via-slate-900 to-slate-950">
<div class="flex items-center justify-between gap-4 mb-4">
<div>
<h4 class="text-sm font-bold text-white">انحراف سرعت واقعی خودرو در ۱۰۰ کیلومتر بر ساعت</h4>
<p class="text-xs text-slate-400 mt-0.5">وقتی کیلومترشمار روی ۱۰۰ است، سرعت واقعی شما چقدر است؟</p>
</div>
<div class="text-2xl font-black text-brand-400" id="res-speed-real">100.0 km/h</div>
</div>
<div class="w-full bg-slate-950 h-3 rounded-full overflow-hidden border border-slate-800 relative">
<div id="speed-indicator" class="h-full bg-gradient-to-r from-blue-500 via-emerald-500 to-brand-500 transition-all duration-500" style="width: 50%;"></div>
</div>
<div class="flex justify-between text-[10px] text-slate-500 mt-2">
<span>خطای منفی (سرعت واقعی کمتر)</span>
<span>بدون خطا (۱۰۰٪ استاندارد)</span>
<span>خطای مثبت (سرعت واقعی بیشتر)</span>
</div>
</div>
<!-- Technical Advice & Rules -->
<div class="p-5 rounded-2xl bg-slate-900/80 border border-slate-800 text-xs text-slate-300 space-y-2">
<div class="font-bold text-white flex items-center gap-1.5"><i data-lucide="info" class="w-4 h-4 text-blue-400"></i> قانون استاندارد بین‌المللی تغییر سایز (Tire Sizing Rule):</div>
<p class="leading-relaxed text-slate-400">
تغییر قطر کل چرخ حداکثر مجاز به <strong>±۲.۵ الی ۳ درصد</strong> است. تغییرات فراتر از این محدوده باعث گیج شدن سیستم ترمز ABS، انحراف کیلومترشمار، گیر کردن لاستیک به گلگیر در هنگام چرخش کامل فرمان و آسیب به سیستم جلوبندی خودرو می‌شود.
</p>
</div>
</div>
</div>
</div>
<script>
function setPreset(w1, a1, r1, w2, a2, r2) {
document.getElementById('w1').value = w1;
document.getElementById('a1').value = a1;
document.getElementById('r1').value = r1;
document.getElementById('w2').value = w2;
document.getElementById('a2').value = a2;
document.getElementById('r2').value = r2;
calculate();
}
function calculate() {
const w1 = parseFloat(document.getElementById('w1').value);
const a1 = parseFloat(document.getElementById('a1').value);
const r1 = parseFloat(document.getElementById('r1').value);
const w2 = parseFloat(document.getElementById('w2').value);
const a2 = parseFloat(document.getElementById('a2').value);
const r2 = parseFloat(document.getElementById('r2').value);
document.getElementById('size1-str').innerText = `${w1}/${a1}R${r1}`;
document.getElementById('size2-str').innerText = `${w2}/${a2}R${r2}`;
// Sidewall
const sw1 = w1 * (a1 / 100);
const sw2 = w2 * (a2 / 100);
// Diameter in mm (Rim in inches * 25.4 + 2 * sidewall)
const d1 = (r1 * 25.4) + (2 * sw1);
const d2 = (r2 * 25.4) + (2 * sw2);
// Circumference
const c1 = Math.PI * d1;
const c2 = Math.PI * d2;
// Revolutions per km
const rev1 = 1000000 / c1;
const rev2 = 1000000 / c2;
// Differences
const diffD = d2 - d1;
const diffDPercent = ((d2 - d1) / d1) * 100;
const diffSw = sw2 - sw1;
const diffC = c2 - c1;
const diffRev = rev2 - rev1;
const diffHeight = diffD / 2;
// Real speed at 100 km/h
const realSpeed = 100 * (d2 / d1);
// Fill Table
document.getElementById('res-d1').innerText = `${d1.toFixed(1)} mm`;
document.getElementById('res-d2').innerText = `${d2.toFixed(1)} mm`;
document.getElementById('res-diff-d').innerText = `${diffD >= 0 ? '+' : ''}${diffD.toFixed(1)} mm (${diffDPercent >= 0 ? '+' : ''}${diffDPercent.toFixed(2)}%)`;
document.getElementById('res-sw1').innerText = `${sw1.toFixed(1)} mm`;
document.getElementById('res-sw2').innerText = `${sw2.toFixed(1)} mm`;
document.getElementById('res-diff-sw').innerText = `${diffSw >= 0 ? '+' : ''}${diffSw.toFixed(1)} mm`;
document.getElementById('res-c1').innerText = `${c1.toFixed(1)} mm`;
document.getElementById('res-c2').innerText = `${c2.toFixed(1)} mm`;
document.getElementById('res-diff-c').innerText = `${diffC >= 0 ? '+' : ''}${diffC.toFixed(1)} mm`;
document.getElementById('res-rev1').innerText = `${Math.round(rev1)} دور/km`;
document.getElementById('res-rev2').innerText = `${Math.round(rev2)} دور/km`;
document.getElementById('res-diff-rev').innerText = `${diffRev >= 0 ? '+' : ''}${Math.round(diffRev)} دور`;
document.getElementById('res-diff-height').innerText = `${diffHeight >= 0 ? '+' : ''}${diffHeight.toFixed(1)} mm ${diffHeight >= 0 ? '(افزایش ارتفاع)' : '(کاهش ارتفاع)'}`;
document.getElementById('res-speed-real').innerText = `${realSpeed.toFixed(1)} km/h`;
// Safety Assessment
const safetyBox = document.getElementById('safety-box');
const safetyTitle = document.getElementById('safety-title');
const safetyDesc = document.getElementById('safety-desc');
const absDiff = Math.abs(diffDPercent);
if (absDiff <= 2.0) {
safetyBox.className = 'p-5 rounded-2xl border bg-emerald-500/10 border-emerald-500/30 text-emerald-300';
safetyTitle.innerText = '✅ کاملاً استاندارد و ایمن (توصیه می‌شود)';
safetyDesc.innerText = `انحراف قطر چرخ تنها ${diffDPercent.toFixed(2)}٪ است. این سایز کاملاً با استاندارد خودرو سازگار بوده و بدون هیچ‌گونه اختلالی در عملکرد ترمز، تعلیق و کیلومترشمار قابل استفاده است.`;
} else if (absDiff <= 3.0) {
safetyBox.className = 'p-5 rounded-2xl border bg-amber-500/10 border-amber-500/30 text-amber-300';
safetyTitle.innerText = '⚠️ در مرز مجاز (نیاز به دقت و تست)';
safetyDesc.innerText = `انحراف قطر چرخ ${diffDPercent.toFixed(2)}٪ است. تغییر سایز در محدوده مجاز اما مرزی قرار دارد. پیشنهاد می‌شود فاصله لبه لاستیک تا گلگیر و چرخش کامل فرمان چک شود.`;
} else {
safetyBox.className = 'p-5 rounded-2xl border bg-rose-500/10 border-rose-500/30 text-rose-300';
safetyTitle.innerText = '⛔ انحراف غیرمجاز و خطرناک (توصیه نمی‌شود)';
safetyDesc.innerText = `انحراف قطر چرخ ${diffDPercent.toFixed(2)}٪ است (بیش از ۳ درصد مجاز). این تغییر سایز ممکن است باعث گیر کردن لاستیک، برهم خوردن تعادل و خطای سنسورهای ABS و ESP گردد.`;
}
}
document.addEventListener('DOMContentLoaded', () => {
calculate();
});
</script>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
compare.php
+286
View File
@@ -0,0 +1,286 @@
<?php
// compare.php
require_once __DIR__ . '/includes/db.php';
$allTires = TireStore::getTires();
$pageTitle = 'مقایسه آنلاین و تخصصی تایرها | تایر قاسمی';
$activeNav = 'compare';
require_once __DIR__ . '/includes/header.php';
?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
<div>
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-600/20 text-brand-400 text-xs font-bold mb-2">
<i data-lucide="git-compare" class="w-4 h-4"></i>
ابزار مقایسه آنلاین
</div>
<h1 class="text-2xl sm:text-3xl font-black text-white">مقایسه تخصصی ویژگی‌های تایرها</h1>
<p class="text-xs text-slate-400 mt-1">تایرهای مورد نظر خود را انتخاب کرده و از نظر قیمت، گارانتی، چسبندگی و رده صدا مقایسه کنید.</p>
</div>
<div class="flex items-center gap-3">
<button onclick="clearAllCompare()" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-rose-900/30 hover:text-rose-400 text-slate-300 text-xs font-bold transition-all flex items-center gap-1.5 border border-slate-700">
<i data-lucide="trash-2" class="w-4 h-4"></i>
پاک کردن لیست
</button>
<a href="index.php#catalog" class="px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-xs font-bold transition-all flex items-center gap-1.5 shadow">
<i data-lucide="plus" class="w-4 h-4"></i>
افزودن تایر جدید
</a>
</div>
</div>
<!-- Quick Add Tire Selector Bar -->
<div class="glass-card p-4 rounded-2xl border border-slate-800 mb-8 flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3 w-full sm:w-auto">
<i data-lucide="plus-circle" class="w-5 h-5 text-brand-400 shrink-0"></i>
<span class="text-xs font-bold text-slate-200">افزودن سریع تایر به جدول:</span>
</div>
<div class="flex items-center gap-3 w-full sm:w-auto flex-1 max-w-md">
<select id="quick-add-select" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white focus:outline-none focus:border-brand-500">
<option value="">یک تایر را انتخاب کنید...</option>
<?php foreach ($allTires as $t): ?>
<option value="<?= $t['id'] ?>"><?= htmlspecialchars($t['brand']) ?> - <?= htmlspecialchars($t['name']) ?> (<?= $t['size_str'] ?>)</option>
<?php endforeach; ?>
</select>
<button onclick="addSelectedTire()" class="px-4 py-2 rounded-xl bg-slate-800 hover:bg-brand-600 text-white text-xs font-bold whitespace-nowrap transition-all">
افزودن
</button>
</div>
</div>
<!-- Comparison Table Container -->
<div id="compare-table-container" class="glass-card rounded-3xl p-6 border border-slate-800 overflow-x-auto">
<div id="compare-empty" class="text-center py-16">
<i data-lucide="git-compare" class="w-12 h-12 text-slate-600 mx-auto mb-3"></i>
<h3 class="text-base font-bold text-white">هنوز هیچ تایری به لیست مقایسه اضافه نشده است!</h3>
<p class="text-xs text-slate-400 mt-1 mb-4">از کاتالوگ محصولات تایرها را انتخاب کنید یا از منوی بالای همین صفحه تایر اضافه نمایید.</p>
<a href="index.php#catalog" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 text-white rounded-xl text-xs font-bold inline-block">مشاهده کاتالوگ</a>
</div>
<div id="compare-content" class="hidden">
<table class="w-full text-right text-xs min-w-[700px]">
<thead>
<tr id="row-header" class="border-b border-slate-800">
<th class="p-4 w-44 font-bold text-slate-400">مشخصه فنی</th>
<!-- Injected product headers -->
</tr>
</thead>
<tbody class="divide-y divide-slate-800/80 text-slate-200">
<tr id="row-image">
<td class="p-4 font-bold text-slate-400">تصویر محصول</td>
</tr>
<tr id="row-brand">
<td class="p-4 font-bold text-slate-400">برند و کشور سازنده</td>
</tr>
<tr id="row-size">
<td class="p-4 font-bold text-slate-400">سایز تایر (ابعاد)</td>
</tr>
<tr id="row-category">
<td class="p-4 font-bold text-slate-400">دسته‌بندی و کاربری</td>
</tr>
<tr id="row-season">
<td class="p-4 font-bold text-slate-400">فصل کاربری</td>
</tr>
<tr id="row-speed">
<td class="p-4 font-bold text-slate-400">شاخص حداکثر سرعت</td>
</tr>
<tr id="row-load">
<td class="p-4 font-bold text-slate-400">شاخص تحمل وزن</td>
</tr>
<tr id="row-wet">
<td class="p-4 font-bold text-slate-400">چسبندگی ترمز خیس (EU)</td>
</tr>
<tr id="row-fuel">
<td class="p-4 font-bold text-slate-400">رده مصرف سوخت</td>
</tr>
<tr id="row-noise">
<td class="p-4 font-bold text-slate-400">میزان صدای داخل اتاق</td>
</tr>
<tr id="row-warranty">
<td class="p-4 font-bold text-slate-400">مدت زمان گارانتی</td>
</tr>
<tr id="row-price">
<td class="p-4 font-bold text-slate-400">قیمت مصوب (حلقه)</td>
</tr>
<tr id="row-vehicles">
<td class="p-4 font-bold text-slate-400">خودروهای سازگار</td>
</tr>
<tr id="row-action">
<td class="p-4 font-bold text-slate-400">اقدام خرید و استعلام</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
const ALL_TIRES = <?= json_encode($allTires, JSON_UNESCAPED_UNICODE) ?>;
function renderCompare() {
let list = CompareStore.getList();
// If empty on first visit, preload 2 popular ones
if (list.length === 0) {
list = ['TR-101', 'TR-103'];
localStorage.setItem(CompareStore.getKey(), JSON.stringify(list));
CompareStore.updateBadge();
}
const emptyBox = document.getElementById('compare-empty');
const contentBox = document.getElementById('compare-content');
if (list.length === 0) {
emptyBox.classList.remove('hidden');
contentBox.classList.add('hidden');
return;
}
emptyBox.classList.add('hidden');
contentBox.classList.remove('hidden');
const activeTires = list.map(id => ALL_TIRES.find(t => t.id === id)).filter(Boolean);
// Reset rows
document.getElementById('row-header').innerHTML = '<th class="p-4 w-44 font-bold text-slate-400">مشخصه فنی</th>';
document.getElementById('row-image').innerHTML = '<td class="p-4 font-bold text-slate-400">تصویر محصول</td>';
document.getElementById('row-brand').innerHTML = '<td class="p-4 font-bold text-slate-400">برند و کشور سازنده</td>';
document.getElementById('row-size').innerHTML = '<td class="p-4 font-bold text-slate-400">سایز تایر (ابعاد)</td>';
document.getElementById('row-category').innerHTML = '<td class="p-4 font-bold text-slate-400">دسته‌بندی و کاربری</td>';
document.getElementById('row-season').innerHTML = '<td class="p-4 font-bold text-slate-400">فصل کاربری</td>';
document.getElementById('row-speed').innerHTML = '<td class="p-4 font-bold text-slate-400">شاخص حداکثر سرعت</td>';
document.getElementById('row-load').innerHTML = '<td class="p-4 font-bold text-slate-400">شاخص تحمل وزن</td>';
document.getElementById('row-wet').innerHTML = '<td class="p-4 font-bold text-slate-400">چسبندگی ترمز خیس (EU)</td>';
document.getElementById('row-fuel').innerHTML = '<td class="p-4 font-bold text-slate-400">رده مصرف سوخت</td>';
document.getElementById('row-noise').innerHTML = '<td class="p-4 font-bold text-slate-400">میزان صدای داخل اتاق</td>';
document.getElementById('row-warranty').innerHTML = '<td class="p-4 font-bold text-slate-400">مدت زمان گارانتی</td>';
document.getElementById('row-price').innerHTML = '<td class="p-4 font-bold text-slate-400">قیمت مصوب (حلقه)</td>';
document.getElementById('row-vehicles').innerHTML = '<td class="p-4 font-bold text-slate-400">خودروهای سازگار</td>';
document.getElementById('row-action').innerHTML = '<td class="p-4 font-bold text-slate-400">اقدام خرید و استعلام</td>';
activeTires.forEach(t => {
// Header
document.getElementById('row-header').innerHTML += `
<th class="p-4 text-right">
<div class="flex items-center justify-between gap-2">
<span class="font-bold text-white text-sm">${t.name}</span>
<button onclick="removeCompareItem('${t.id}')" class="p-1 rounded-lg bg-slate-800 text-slate-400 hover:text-rose-400 transition-colors" title="حذف از مقایسه">
<i data-lucide="x" class="w-4 h-4"></i>
</button>
</div>
</th>
`;
// Image
document.getElementById('row-image').innerHTML += `
<td class="p-4">
<img src="${t.image}" alt="${t.name}" class="w-28 h-28 object-contain mx-auto">
</td>
`;
// Brand & Country
document.getElementById('row-brand').innerHTML += `
<td class="p-4 font-semibold text-brand-400">
${t.brand} <span class="text-slate-400 text-[11px]">(${t.country})</span>
</td>
`;
// Size
document.getElementById('row-size').innerHTML += `
<td class="p-4 font-black text-white text-sm">
<span class="px-2.5 py-1 rounded-lg bg-slate-800 border border-slate-700">${t.size_str}</span>
</td>
`;
// Category
document.getElementById('row-category').innerHTML += `<td class="p-4">${t.category}</td>`;
// Season
document.getElementById('row-season').innerHTML += `<td class="p-4">${t.season_fa}</td>`;
// Speed
document.getElementById('row-speed').innerHTML += `<td class="p-4 font-bold text-amber-400">${t.speed_index}</td>`;
// Load
document.getElementById('row-load').innerHTML += `<td class="p-4 font-bold text-slate-300">${t.load_index}</td>`;
// Wet Grip
document.getElementById('row-wet').innerHTML += `
<td class="p-4">
<span class="px-2 py-0.5 rounded bg-emerald-500/20 text-emerald-400 font-bold">گرید ${t.wet_grip}</span>
</td>
`;
// Fuel
document.getElementById('row-fuel').innerHTML += `
<td class="p-4">
<span class="px-2 py-0.5 rounded bg-amber-500/20 text-amber-400 font-bold">گرید ${t.fuel_efficiency}</span>
</td>
`;
// Noise
document.getElementById('row-noise').innerHTML += `<td class="p-4 font-bold text-cyan-400">${t.noise_level}</td>`;
// Warranty
document.getElementById('row-warranty').innerHTML += `<td class="p-4 text-emerald-400 font-bold">${t.warranty_months} ماه</td>`;
// Price
document.getElementById('row-price').innerHTML += `
<td class="p-4 font-black text-base text-white">
${Number(t.price).toLocaleString('fa-IR')} <span class="text-xs text-brand-400 font-normal">تومان</span>
</td>
`;
// Vehicles
document.getElementById('row-vehicles').innerHTML += `
<td class="p-4">
<div class="flex flex-wrap gap-1 max-w-xs">
${(t.vehicles || []).map(v => `<span class="px-1.5 py-0.5 rounded bg-slate-800 text-slate-300 text-[10px]">${v}</span>`).join('')}
</div>
</td>
`;
// Action
document.getElementById('row-action').innerHTML += `
<td class="p-4">
<a href="tel:02188889900" class="px-4 py-2 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-xs inline-flex items-center gap-1.5 shadow">
<i data-lucide="phone" class="w-3.5 h-3.5"></i>
استعلام و سفارش
</a>
</td>
`;
});
lucide.createIcons();
}
function removeCompareItem(id) {
CompareStore.remove(id);
renderCompare();
}
function clearAllCompare() {
CompareStore.clear();
renderCompare();
}
function addSelectedTire() {
const sel = document.getElementById('quick-add-select');
const id = sel.value;
if (!id) return;
if (CompareStore.add(id)) {
renderCompare();
}
sel.value = '';
}
document.addEventListener('DOMContentLoaded', () => {
renderCompare();
});
</script>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
contact.php
+147
View File
@@ -0,0 +1,147 @@
<?php
// contact.php
$pageTitle = 'تماس با ما، شعب و خدمات تخصصی | تایر قاسمی';
$activeNav = 'contact';
require_once __DIR__ . '/includes/header.php';
?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
<!-- Title Header -->
<div class="text-center max-w-3xl mx-auto">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-600/20 text-brand-400 text-xs font-bold mb-3">
<i data-lucide="map-pin" class="w-4 h-4"></i>
شعب و پشتیبانی
</div>
<h1 class="text-3xl sm:text-4xl font-black text-white">تماس با مجموعه تخصصی تایر قاسمی</h1>
<p class="text-sm text-slate-400 mt-2">
آماده پاسخگویی و ارائه خدمات تخصصی تعویض، بالانس و مشاوره خرید به صورت حضوری و تلفنی.
</p>
</div>
<!-- Branch Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Branch 1 -->
<div class="glass-card p-6 rounded-3xl border border-slate-800 space-y-4">
<div class="flex items-center justify-between">
<span class="px-3 py-1 rounded-lg bg-brand-600/20 text-brand-400 text-xs font-bold">شعبه اصلی (غرب تهران)</span>
<i data-lucide="building" class="w-5 h-5 text-brand-400"></i>
</div>
<h3 class="text-base font-black text-white">مجتمع خدمات خودرویی یادگار</h3>
<p class="text-xs text-slate-400 leading-relaxed">
تهران، خیابان آزادی، تقاطع بزرگراه یادگار امام، جنب پمپ بنزین، پلاک ۲۳۴
</p>
<div class="pt-3 border-t border-slate-800 space-y-2 text-xs text-slate-300">
<div class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-brand-400"></i> تلفن: ۰۲۱-۸۸۸۸۹۹۰۰</div>
<div class="flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-amber-400"></i> ساعت کاری: ۸:۰۰ الی ۲۱:۰۰</div>
<div class="flex items-center gap-2"><i data-lucide="wrench" class="w-4 h-4 text-emerald-400"></i> مجهز به بالانس سه بعدی و نیتروژن</div>
</div>
</div>
<!-- Branch 2 -->
<div class="glass-card p-6 rounded-3xl border border-slate-800 space-y-4">
<div class="flex items-center justify-between">
<span class="px-3 py-1 rounded-lg bg-blue-600/20 text-blue-400 text-xs font-bold">شعبه ۲ (شرق و شمال شرق)</span>
<i data-lucide="building" class="w-5 h-5 text-blue-400"></i>
</div>
<h3 class="text-base font-black text-white">مرکز تایر پاسداران</h3>
<p class="text-xs text-slate-400 leading-relaxed">
تهران، بزرگراه شهید صیاد شیرازی، بالاتر از میدان هروی، خیابان وفامنش
</p>
<div class="pt-3 border-t border-slate-800 space-y-2 text-xs text-slate-300">
<div class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-blue-400"></i> تلفن: ۰۲۱-۲۲۲۲۳۳۴۴</div>
<div class="flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-amber-400"></i> ساعت کاری: ۸:۳۰ الی ۲۰:۳۰</div>
<div class="flex items-center gap-2"><i data-lucide="wrench" class="w-4 h-4 text-emerald-400"></i> خدمات ویژه خودروهای وارداتی و SUV</div>
</div>
</div>
<!-- Branch 3 -->
<div class="glass-card p-6 rounded-3xl border border-slate-800 space-y-4">
<div class="flex items-center justify-between">
<span class="px-3 py-1 rounded-lg bg-emerald-600/20 text-emerald-400 text-xs font-bold">واحد امداد و تعویض در محل</span>
<i data-lucide="truck" class="w-5 h-5 text-emerald-400"></i>
</div>
<h3 class="text-base font-black text-white">ناوگان سیار تایر قاسمی</h3>
<p class="text-xs text-slate-400 leading-relaxed">
ارائه کلیه خدمات تعویض، پنچرگیری و باد نیتروژن در محل سکونت یا محل کار شما در سراسر تهران
</p>
<div class="pt-3 border-t border-slate-800 space-y-2 text-xs text-slate-300">
<div class="flex items-center gap-2"><i data-lucide="phone" class="w-4 h-4 text-emerald-400"></i> خط ویژه اعزام امداد: ۰۹۱۲۳۴۵۶۷۸۹</div>
<div class="flex items-center gap-2"><i data-lucide="clock" class="w-4 h-4 text-amber-400"></i> ساعت خدمت‌رسانی: ۲۴ ساعته ۷ روز هفته</div>
<div class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> بدون هزینه ایاب و ذهاب در مناطق مرکزی</div>
</div>
</div>
</div>
<!-- Contact Form & Map Representation -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
<div class="lg:col-span-6 glass-card p-8 rounded-3xl border border-slate-800">
<h3 class="text-xl font-black text-white mb-2">ارسال پیام یا انتقاد و پیشنهاد</h3>
<p class="text-xs text-slate-400 mb-6">پیام‌های شما مستقیماً توسط مدیریت بازبینی و پاسخ داده می‌شود.</p>
<form onsubmit="submitContactMessage(event)" class="space-y-4">
<div id="contact-alert" class="hidden p-3 rounded-xl text-xs font-bold"></div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-1">نام کامل شما</label>
<input type="text" id="c-name" required placeholder="نام و نام خانوادگی" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-brand-500">
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-1">شماره همراه</label>
<input type="tel" id="c-phone" required placeholder="0912..." dir="ltr" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-brand-500 text-right">
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-1">متن پیام یا درخواست</label>
<textarea id="c-msg" rows="4" required placeholder="متن پیام خود را بنویسید..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-xs text-white focus:outline-none focus:border-brand-500"></textarea>
</div>
<button type="submit" class="w-full py-3 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-xs shadow-lg transition-all">
ارسال پیام به مدیریت
</button>
</form>
</div>
<div class="lg:col-span-6 glass-card p-8 rounded-3xl border border-slate-800 space-y-6">
<h3 class="text-xl font-black text-white">موقعیت جغرافیایی و دسترسی</h3>
<div class="h-64 rounded-2xl bg-slate-950 border border-slate-800 flex flex-col items-center justify-center p-6 text-center space-y-3 relative overflow-hidden">
<div class="w-14 h-14 rounded-full bg-brand-600/20 text-brand-400 border border-brand-500/30 flex items-center justify-center">
<i data-lucide="map" class="w-7 h-7"></i>
</div>
<h4 class="text-sm font-bold text-white">مسیریابی هوشمند با نشان، بلد و ویز</h4>
<p class="text-xs text-slate-400 max-w-sm">
با جستجوی عبارت <strong>«تایر قاسمی»</strong> در اپلیکیشن‌های نشان، بلد یا Google Maps سریع‌ترین مسیر را تا فروشگاه و تعمیرگاه پیدا کنید.
</p>
<div class="flex items-center gap-2 pt-2">
<a href="https://nshn.ir" target="_blank" class="px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-slate-300 hover:text-white text-xs font-bold transition-colors">مسیریابی در نشان</a>
<a href="https://balad.ir" target="_blank" class="px-3 py-1.5 rounded-lg bg-slate-900 border border-slate-700 text-slate-300 hover:text-white text-xs font-bold transition-colors">مسیریابی در بلد</a>
</div>
</div>
<div class="p-4 rounded-2xl bg-slate-950 border border-slate-800/80 text-xs text-slate-400 space-y-2">
<div class="font-bold text-white flex items-center gap-1.5"><i data-lucide="check" class="w-4 h-4 text-emerald-400"></i> خدمات ویژه مشتریان حضوری:</div>
<p>پارکینگ اختصاصی، اتاق استراحت مشتریان، تست رایگان بالانس و فشار باد و تنظیم زاویه چرخ با تخفیف ویژه.</p>
</div>
</div>
</div>
</div>
<script>
function submitContactMessage(e) {
e.preventDefault();
const alertBox = document.getElementById('contact-alert');
alertBox.className = 'p-3 rounded-xl text-xs font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30';
alertBox.innerText = 'پیام شما با موفقیت دریافت شد. با تشکر از همراهی شما.';
alertBox.classList.remove('hidden');
e.target.reset();
}
</script>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
data/init.php
+429
View File
@@ -0,0 +1,429 @@
<?php
// data/init.php
$tiresData = [
[
"id" => "TR-101",
"name" => "بارز الپیدا P648 (Alpidia)",
"brand" => "بارز (Barez)",
"country" => "ایران",
"category" => "سواری",
"width" => 185,
"aspect_ratio" => 65,
"rim" => 14,
"size_str" => "185/65R14",
"speed_index" => "H (210 km/h)",
"load_index" => "86 (530 kg)",
"season" => "four_season",
"season_fa" => "چهار فصل",
"warranty_months" => 36,
"production_year" => "2026",
"fuel_efficiency" => "C",
"wet_grip" => "B",
"noise_level" => "70 dB",
"price" => 4850000,
"discount_percent" => 5,
"stock" => 24,
"rating" => 4.6,
"reviews_count" => 38,
"vehicles" => ["پژو 206", "پژو 207", "پژو 405", "پژو پارس", "رانا", "کوئیک"],
"description" => "تایر پرطرفدار و استاندارد برای خانواده پژو و رانا با دوام بالا، چسبندگی عالی در جاده‌های خشک و بارانی و کارکرد طولانی‌مدت در اقلیم ایران.",
"features" => [
"طراحی ویژه شیارهای عمیق جهت تخلیه سریع آب و ممانعت از هیدروپلنینگ",
"ترکیب سیلیکایی پیشرفته برای نرمی و سواری بی‌صدا",
"مقاومت سایشی بالا و گارانتی معتبر ۳ ساله"
],
"image" => "assets/images/tire_barez_p648.svg",
"is_featured" => true,
"is_best_seller" => true
],
[
"id" => "TR-102",
"name" => "کویر تایر توریست KB-14",
"brand" => "کویر تایر (Kavir Tire)",
"country" => "ایران",
"category" => "سواری",
"width" => 175,
"aspect_ratio" => 70,
"rim" => 13,
"size_str" => "175/70R13",
"speed_index" => "T (190 km/h)",
"load_index" => "82 (475 kg)",
"season" => "four_season",
"season_fa" => "چهار فصل",
"warranty_months" => 48,
"production_year" => "2026",
"fuel_efficiency" => "C",
"wet_grip" => "C",
"noise_level" => "69 dB",
"price" => 3950000,
"discount_percent" => 8,
"stock" => 30,
"rating" => 4.4,
"reviews_count" => 52,
"vehicles" => ["پراید 111", "پراید 131", "پراید 132", "تیبا", "پی کی", "ماتیز"],
"description" => "سایز پهن و محبوب برای پراید و تیبا، ارائه‌دهنده پایداری بهتر در پیچ‌ها، فرمان‌پذیری نرم و ترمزگیری قوی‌تر نسبت به سایز فابریک.",
"features" => [
"فرمان‌پذیری نرم و سواری راحت در معابر شهری",
"کاهش خط ترمز تا ۱۲ درصد نسبت به تایر ۱۶۵",
"گارانتی طلایی ۴۸ ماهه کویر تایر"
],
"image" => "assets/images/tire_kavir_kb14.svg",
"is_featured" => true,
"is_best_seller" => true
],
[
"id" => "TR-103",
"name" => "یزد تایر نپتون (Neptune) اسپرت",
"brand" => "یزد تایر (Yazd Tire)",
"country" => "ایران (وردشتاین هلند)",
"category" => "سواری اسپرت",
"width" => 205,
"aspect_ratio" => 55,
"rim" => 16,
"size_str" => "205/55R16",
"speed_index" => "V (240 km/h)",
"load_index" => "91 (615 kg)",
"season" => "four_season",
"season_fa" => "چهار فصل",
"warranty_months" => 36,
"production_year" => "2026",
"fuel_efficiency" => "B",
"wet_grip" => "A",
"noise_level" => "68 dB",
"price" => 5900000,
"discount_percent" => 0,
"stock" => 18,
"rating" => 4.8,
"reviews_count" => 44,
"vehicles" => ["تارا", "دنا پلاس", "شاهین", "مگان", "ساندرو استپ‌وی", "سراتو", "هیوندای آوانته", "مزدا 3"],
"description" => "تولید شده تحت لیسانس و تکنولوژی پیشرفته Vredestein هلند، با طرح آج نامتقارن برای حداکثر پایداری در سرعت بالا و عملکرد بی‌نظیر ترمزگیری.",
"features" => [
"تکنولوژی هلندی با طراحی مدرن آج جهت زیبایی و چسبندگی فوق‌العاده",
"نرمی مثال‌زدنی و جذب ضربات دست‌اندازهای جاده",
"شاخص سرعت V مناسب رانندگی پرسرعت در اتوبان"
],
"image" => "assets/images/tire_yazd_neptune.svg",
"is_featured" => true,
"is_best_seller" => false
],
[
"id" => "TR-104",
"name" => "هانکوک ونوس پرایم 4 (Ventus Prime 4 K135)",
"brand" => "هانکوک (Hankook)",
"country" => "کره جنوبی",
"category" => "لوکس و اسپرت",
"width" => 215,
"aspect_ratio" => 55,
"rim" => 17,
"size_str" => "215/55R17",
"speed_index" => "W (270 km/h)",
"load_index" => "94 (670 kg)",
"season" => "four_season",
"season_fa" => "چهار فصل پرمیوم",
"warranty_months" => 60,
"production_year" => "2025/2026",
"fuel_efficiency" => "A",
"wet_grip" => "A",
"noise_level" => "67 dB",
"price" => 14800000,
"discount_percent" => 6,
"stock" => 14,
"rating" => 4.9,
"reviews_count" => 61,
"vehicles" => ["تویوتا کمری", "کیا اپتیما", "هیوندای سوناتا", "نیسان تیانا", "رنو تالیسمان", "پژو 508", "چانگان CS35"],
"description" => "شاهکار مهندسی هانکوک کره جنوبی، برنده جوایز متعدد تست‌های ایمنی اروپایی؛ ترکیب نهایت راحتی آکوستیک با پایداری استثنایی در پیچ‌های تند.",
"features" => [
"تکنولوژی Low-Noise با شیارهای زیک‌زاک آکوستیک برای به صفر رساندن صدای تایر در کابین",
"فرمولاسیون کامپاند ژل سیلیکا با طول عمر پیمایش تا ۹۰ هزار کیلومتر",
"ترمزگیری فوق سریع در سطوح خیس با رتبه A استاندارد اتحادیه اروپا"
],
"image" => "assets/images/tire_hankook_k135.svg",
"is_featured" => true,
"is_best_seller" => true
],
[
"id" => "TR-105",
"name" => "کومهو اکستا PS31 (Ecsta PS31)",
"brand" => "کومهو (Kumho)",
"country" => "کره جنوبی",
"category" => "اسپرت سواری",
"width" => 205,
"aspect_ratio" => 50,
"rim" => 16,
"size_str" => "205/50R16",
"speed_index" => "V (240 km/h)",
"load_index" => "87 (545 kg)",
"season" => "summer",
"season_fa" => "تابستانه و اسپرت",
"warranty_months" => 60,
"production_year" => "2025",
"fuel_efficiency" => "B",
"wet_grip" => "A",
"noise_level" => "69 dB",
"price" => 11200000,
"discount_percent" => 0,
"stock" => 10,
"rating" => 4.7,
"reviews_count" => 29,
"vehicles" => ["دنا پلاس توربو", "پژو 207 رینگ 16", "جک J5", "ام‌وی‌ام 315", "هیوندای اکسنت", "تویوتا یاریس"],
"description" => "طراحی عضلانی و تهاجمی برای علاقمندان به رانندگی اسپرت، چسبندگی بالا به آسفالت داغ و فرمان‌پذیری لحظه‌ای بدون کوچک‌ترین لغزش.",
"features" => [
"آج جهت‌دار V شکل برای خروج آنی قطرات آب و خنک‌شوندگی مداوم",
"دیواره تقویت‌شده جهت مقاومت در برابر ضربات و لبه‌های جدول",
"افزایش محسوس شتاب و کاهش زمان واکنش فرمان"
],
"image" => "assets/images/tire_kumho_ps31.svg",
"is_featured" => false,
"is_best_seller" => false
],
[
"id" => "TR-106",
"name" => "میشلن پریماسی 4 پلاس (Primacy 4+)",
"brand" => "میشلن (Michelin)",
"country" => "فرانسه / آلمان",
"category" => "سوپرمعتبر پرمیوم",
"width" => 225,
"aspect_ratio" => 50,
"rim" => 17,
"size_str" => "225/50R17",
"speed_index" => "Y (300 km/h)",
"load_index" => "98 (750 kg)",
"season" => "four_season",
"season_fa" => "چهار فصل لوکس",
"warranty_months" => 60,
"production_year" => "2026",
"fuel_efficiency" => "A",
"wet_grip" => "A",
"noise_level" => "66 dB",
"price" => 22500000,
"discount_percent" => 4,
"stock" => 8,
"rating" => 5.0,
"reviews_count" => 75,
"vehicles" => ["ب‌ام‌و سری 3", "ب‌ام‌و سری 5", "مرسدس بنز C-Class", "آئودی A4", "هیوندای آزرا", "تویوتا آریون", "کیا کادنزا"],
"description" => "استاندارد طلایی تایر در جهان؛ بالاترین سطح ایمنی از کیلومتر اول تا آخرین میلی‌متر سایش آج تایر با تکنولوژی پیشرفته EverGrip.",
"features" => [
"تکنولوژی انحصاری EverGrip برای حفظ ۱۰۰٪ چسبندگی حتی در انتهای عمر تایر",
"کم‌صداترین تایر بازار با رده صدای فوق‌العاده ۶۶ دسی‌بل",
"کاهش مصرف سوخت خودرو به لطف مقاومت غلتشی بهینه A"
],
"image" => "assets/images/tire_michelin_primacy.svg",
"is_featured" => true,
"is_best_seller" => false
],
[
"id" => "TR-107",
"name" => "پیرلی پی زیرو (Pirelli P Zero)",
"brand" => "پیرلی (Pirelli)",
"country" => "ایتالیا",
"category" => "سوپراسپرت",
"width" => 235,
"aspect_ratio" => 45,
"rim" => 18,
"size_str" => "235/45R18",
"speed_index" => "Y (300 km/h)",
"load_index" => "98 (750 kg)",
"season" => "summer",
"season_fa" => "تابستانه ریسینگ",
"warranty_months" => 60,
"production_year" => "2025/2026",
"fuel_efficiency" => "B",
"wet_grip" => "A",
"noise_level" => "69 dB",
"price" => 26400000,
"discount_percent" => 0,
"stock" => 6,
"rating" => 4.9,
"reviews_count" => 33,
"vehicles" => ["پورشه ماکان", "مرسدس بنز E-Class", "لکسوس GS", "آلفارومئو جولیتا", "فولکس واگن پاسات", "کیا استینگر"],
"description" => "تایر مورد تایید خودروسازان فراری، لامبورگینی و مک‌لارن. بالاترین دقت فرمان‌پذیری و چسبندگی در پیست و جاده‌های کوهستانی.",
"features" => [
"تکنولوژی مسابقه‌ای فرمول ۱ پیرلی برای حداکثر پایداری جانبی",
"کنترل حرارت در سرعت‌های فراتر از ۲۵۰ کیلومتر بر ساعت",
"طراحی ریب‌های مرکزی سفت برای پاسخ فوق‌العاده سریع به فرامین فرمان"
],
"image" => "assets/images/tire_pirelli_pzero.svg",
"is_featured" => true,
"is_best_seller" => false
],
[
"id" => "TR-108",
"name" => "مکسس براوو AT-771 (All-Terrain)",
"brand" => "مکسس (Maxxis)",
"country" => "تایوان",
"category" => "شاسی بلند و آفرود (SUV/4x4)",
"width" => 265,
"aspect_ratio" => 65,
"rim" => 17,
"size_str" => "265/65R17",
"speed_index" => "T (190 km/h)",
"load_index" => "112 (1120 kg)",
"season" => "four_season",
"season_fa" => "آفرود و آنرود (A/T)",
"warranty_months" => 60,
"production_year" => "2026",
"fuel_efficiency" => "D",
"wet_grip" => "B",
"noise_level" => "73 dB",
"price" => 18900000,
"discount_percent" => 7,
"stock" => 12,
"rating" => 4.8,
"reviews_count" => 40,
"vehicles" => ["تویوتا پرادو", "تویوتا هایلوکس", "میتسوبیشی پاجرو", "نیسان رونیز", "نیسان پیکاپ", "فوتون تونلند", "کی‌ام‌سی T8"],
"description" => "تایر تخصصی همه‌جارو (All-Terrain) برای رانندگی لذت‌بخش در کویر، سنگلاخ و برف و در عین حال سواری نرم و کنترل‌پذیر در آسفالت شهر.",
"features" => [
"عاج‌های سه‌بعدی مقاوم در برابر بریدگی و سوراخ‌شدگی سنگ‌ها",
"دیواره دوبل مسلح برای تحمل وزن سنگین و فشارهای ناگهانی آفرود",
"شیارهای خودپاک‌کننده برای خروج گل، لای و سنگریزه‌ها"
],
"image" => "assets/images/tire_maxxis_at771.svg",
"is_featured" => true,
"is_best_seller" => true
],
[
"id" => "TR-109",
"name" => "تراینگل ادونتکس TR259 (AdvanteX)",
"brand" => "تراینگل (Triangle)",
"country" => "چین (درجه ۱ بین‌المللی)",
"category" => "کراس‌اوور و SUV",
"width" => 225,
"aspect_ratio" => 60,
"rim" => 18,
"size_str" => "225/60R18",
"speed_index" => "H (210 km/h)",
"load_index" => "100 (800 kg)",
"season" => "four_season",
"season_fa" => "چهار فصل شهری و مسافرتی",
"warranty_months" => 36,
"production_year" => "2026",
"fuel_efficiency" => "C",
"wet_grip" => "B",
"noise_level" => "71 dB",
"price" => 8400000,
"discount_percent" => 5,
"stock" => 16,
"rating" => 4.5,
"reviews_count" => 27,
"vehicles" => ["هیوندای توسان", "کیا اسپورتیج", "تیگو 7 پرو", "تیگو 8 پرو", "دیگنیتی", "فیدلیتی", "هایما S7"],
"description" => "انتخاب اقتصادی و هوشمندانه برای کراس‌اوورهای مدرن چینی و کره‌ای با سواری نرم و کنترل عالی در سفرهای خانوادگی.",
"features" => [
"طراحی بهینه مصرف سوخت برای خودروهای توربوشارژ",
"شیارهای طولی ۴ تایی جهت دفع پرفشار آب در بارندگی",
"ارزش خرید بسیار بالا در برابر کیفیت و کارایی"
],
"image" => "assets/images/tire_triangle_tr259.svg",
"is_featured" => false,
"is_best_seller" => true
],
[
"id" => "TR-110",
"name" => "نکسن ان فرا SU4 (N'Fera SU4)",
"brand" => "نکسن (Nexen)",
"country" => "کره جنوبی",
"category" => "سواری نیمه اسپرت",
"width" => 195,
"aspect_ratio" => 60,
"rim" => 15,
"size_str" => "195/60R15",
"speed_index" => "H (210 km/h)",
"load_index" => "88 (560 kg)",
"season" => "four_season",
"season_fa" => "چهار فصل بی صدا",
"warranty_months" => 60,
"production_year" => "2025/2026",
"fuel_efficiency" => "B",
"wet_grip" => "A",
"noise_level" => "68 dB",
"price" => 9100000,
"discount_percent" => 0,
"stock" => 15,
"rating" => 4.7,
"reviews_count" => 35,
"vehicles" => ["سمند LX / سورن", "دنا معمولی", "ال 90 (تندر 90)", "ساندرو", "زانتیا", "برلیانس H330", "ام‌وی‌ام 530"],
"description" => "تایر نرم و باکیفیت کره‌ای ایده‌آل برای ارتقای کیفیت سواری و کاهش کوبش در سیستم تعلیق سمند، ال ۹۰ و خودروهای سایز ۱۵.",
"features" => [
"جذب استثنایی دست‌اندازهای خیابان و حذف لرزش اتاق",
"آمیزه پلیمری مدرن برای ترمزگیری مطمئن در باران",
"عمر کارکرد استاندارد تا ۷۰ هزار کیلومتر"
],
"image" => "assets/images/tire_nexen_su4.svg",
"is_featured" => true,
"is_best_seller" => false
]
];
$brandsData = [
["name" => "بارز (Barez)", "country" => "ایران", "logo" => "assets/images/logo_barez.svg", "desc" => "بزرگترین تولیدکننده تایر در خاورمیانه با استانداردها و تکنولوژی روز"],
["name" => "کویر تایر (Kavir Tire)", "country" => "ایران", "logo" => "assets/images/logo_kavir.svg", "desc" => "پیشرو در نوآوری، تولید تایرهای سبز و فناوری‌های نوین رادیال در ایران"],
["name" => "یزد تایر (Yazd Tire)", "country" => "ایران (وردشتاین هلند)", "logo" => "assets/images/logo_yazd.svg", "desc" => "همکاری مستقیم و تولید تحت لیسانس کمپانی خوشنام وردشتاین هلند"],
["name" => "هانکوک (Hankook)", "country" => "کره جنوبی", "logo" => "assets/images/logo_hankook.svg", "desc" => "یکی از برترین برندهای تایر پرمیوم جهان و تامین‌کننده اصلی خودروسازان جهانی"],
["name" => "کومهو (Kumho)", "country" => "کره جنوبی", "logo" => "assets/images/logo_kumho.svg", "desc" => "تایرهای اسپرت، بادوام و با بالاترین استانداردهای هندلینگ و دینامیک رانندگی"],
["name" => "میشلن (Michelin)", "country" => "فرانسه", "logo" => "assets/images/logo_michelin.svg", "desc" => "اسطوره صنعت تایر جهان؛ بالاترین طول عمر، ایمنی و آرامش درون کابین"],
["name" => "پیرلی (Pirelli)", "country" => "ایتالیا", "logo" => "assets/images/logo_pirelli.svg", "desc" => "انتخاب شماره یک خودروهای سوپراسپرت، نماد سرعت و طراحی اصیل ایتالیایی"],
["name" => "مکسس (Maxxis)", "country" => "تایوان", "logo" => "assets/images/logo_maxxis.svg", "desc" => "قهرمان بلامنازع تایرهای آفرود، شاسی‌بلند و شرایط سخت جاده‌ای و کوهستانی"]
];
$articlesData = [
[
"id" => "art-1",
"title" => "راهنمای جامع خواندن مشخصات و کدهای روی تایر (سایز، سال ساخت و شاخص سرعت)",
"category" => "راهنمای فنی",
"read_time" => "۵ دقیقه",
"date" => "۱۴۰۳/۱۱/۲۰",
"summary" => "کدهایی نظیر 205/55R16 91V یا عدد ۴ رقمی DOT روی لاستیک به چه معنا هستند و چرا دانستن آن‌ها در هنگام خرید حیاتی است؟",
"content" => "روی دیواره هر تایر اطلاعات کاملی از قبیل پهنای مقطع به میلیمتر، نسبت فاق به پهنا، ساختار رادیال، قطر رینگ به اینچ، شاخص وزن قابل تحمل و حداکثر سرعت مجاز درج شده است. همچنین کد ۴ رقمی نشان‌دهنده هفته و سال تولید تایر می‌باشد.",
"icon" => "file-text"
],
[
"id" => "art-2",
"title" => "تفاوت تایر چهار فصل، تابستانه و زمستانه؛ کدامیک مناسب آب و هوای شماست؟",
"category" => "مشاوره خرید",
"read_time" => "۴ دقیقه",
"date" => "۱۴۰۳/۱۱/۲۸",
"summary" => "بررسی ساختار شیمیایی و فرمولاسیون لاستیک‌ها در شرایط دمایی مختلف و مزایای تایرهای چهارفصل در جاده‌های ایران.",
"content" => "تایرهای تابستانه در دمای بالای ۷ درجه سانتی‌گراد بهترین عملکرد را دارند در حالی که تایرهای زمستانه با درصد بالای سیلیس در سرمای شدید منجمد نمی‌شوند. تایرهای چهارفصل انتخابی متعادل برای اکثر شهرهای ایران هستند.",
"icon" => "sun"
],
[
"id" => "art-3",
"title" => "جدول تنظیم باد استاندارد خودروها و تاثیر آن بر مصرف سوخت و طول عمر تایر",
"category" => "نگهداری خودرو",
"read_time" => "۶ دقیقه",
"date" => "۱۴۰۳/۱۲/۰۵",
"summary" => "تنظیم باد دوره‌ای تایرها تا ۱۵ درصد در کاهش مصرف بنزین و افزایش ۲۵ درصدی طول عمر لاستیک موثر است.",
"content" => "فشار باد مناسب باید زمانی اندازه‌گیری شود که تایرها کاملاً سرد هستند (حداقل ۲ ساعت پس از رانندگی یا کمتر از ۲ کیلومتر پیمایش). کم‌بادی باعث ساییدگی لبه‌ها و افزایش حرارت داخلی تایر می‌گردد.",
"icon" => "gauge"
]
];
$tirePressureGuide = [
["vehicle" => "پراید (تمام مدل‌ها)", "front_psi" => "30 - 32", "rear_psi" => "30 - 32", "standard_tire" => "165/65R13 یا 175/70R13"],
["vehicle" => "پژو 206 / 207 / رانا", "front_psi" => "31 - 33", "rear_psi" => "31 - 33", "standard_tire" => "185/65R14 یا 205/50R16"],
["vehicle" => "پژو 405 / پارس / سمند / سورن", "front_psi" => "30 - 32", "rear_psi" => "30 - 32", "standard_tire" => "185/65R15 یا 205/60R15"],
["vehicle" => "دنا / دنا پلاس / تارا / شاهین", "front_psi" => "32 - 34", "rear_psi" => "32 - 34", "standard_tire" => "195/60R15 یا 205/55R16"],
["vehicle" => "ال 90 (تندر 90) / ساندرو", "front_psi" => "30 - 32", "rear_psi" => "30 - 32", "standard_tire" => "185/65R15 یا 195/60R15"],
["vehicle" => "کراس‌اوورها (هایما، جک S5، تیگو)", "front_psi" => "33 - 35", "rear_psi" => "33 - 35", "standard_tire" => "225/60R18 یا 225/65R17"],
["vehicle" => "شاسی بلندها (هایلوکس، پرادو، پاجرو)", "front_psi" => "32 - 35", "rear_psi" => "35 - 38", "standard_tire" => "265/65R17 یا 265/70R16"]
];
$data = [
"tires" => $tiresData,
"brands" => $brandsData,
"articles" => $articlesData,
"pressure_guide" => $tirePressureGuide,
"consultations" => [
[
"id" => "CNS-101",
"name" => "علی رضایی",
"phone" => "09123456789",
"car" => "دنا پلاس توربو",
"message" => "برای رینگ ۱۶ فابریک چه سایز تایری برای نرمی بیشتر پیشنهاد می‌کنید؟",
"created_at" => "2026-08-30 11:30",
"status" => "پاسخ داده شده"
]
]
];
file_put_contents(__DIR__ . '/store.json', json_encode($data, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
echo "Store initialized successfully.\n";
data/store.json
+568
View File
@@ -0,0 +1,568 @@
{
"tires": [
{
"id": "TR-101",
"name": "بارز الپیدا P648 (Alpidia)",
"brand": "بارز (Barez)",
"country": "ایران",
"category": "سواری",
"width": 185,
"aspect_ratio": 65,
"rim": 14,
"size_str": "185\/65R14",
"speed_index": "H (210 km\/h)",
"load_index": "86 (530 kg)",
"season": "four_season",
"season_fa": "چهار فصل",
"warranty_months": 36,
"production_year": "2026",
"fuel_efficiency": "C",
"wet_grip": "B",
"noise_level": "70 dB",
"price": 4850000,
"discount_percent": 5,
"stock": 24,
"rating": 4.6,
"reviews_count": 38,
"vehicles": [
"پژو 206",
"پژو 207",
"پژو 405",
"پژو پارس",
"رانا",
"کوئیک"
],
"description": "تایر پرطرفدار و استاندارد برای خانواده پژو و رانا با دوام بالا، چسبندگی عالی در جاده‌های خشک و بارانی و کارکرد طولانی‌مدت در اقلیم ایران.",
"features": [
"طراحی ویژه شیارهای عمیق جهت تخلیه سریع آب و ممانعت از هیدروپلنینگ",
"ترکیب سیلیکایی پیشرفته برای نرمی و سواری بی‌صدا",
"مقاومت سایشی بالا و گارانتی معتبر ۳ ساله"
],
"image": "assets\/images\/tire_barez_p648.svg",
"is_featured": true,
"is_best_seller": true
},
{
"id": "TR-102",
"name": "کویر تایر توریست KB-14",
"brand": "کویر تایر (Kavir Tire)",
"country": "ایران",
"category": "سواری",
"width": 175,
"aspect_ratio": 70,
"rim": 13,
"size_str": "175\/70R13",
"speed_index": "T (190 km\/h)",
"load_index": "82 (475 kg)",
"season": "four_season",
"season_fa": "چهار فصل",
"warranty_months": 48,
"production_year": "2026",
"fuel_efficiency": "C",
"wet_grip": "C",
"noise_level": "69 dB",
"price": 3950000,
"discount_percent": 8,
"stock": 30,
"rating": 4.4,
"reviews_count": 52,
"vehicles": [
"پراید 111",
"پراید 131",
"پراید 132",
"تیبا",
"پی کی",
"ماتیز"
],
"description": "سایز پهن و محبوب برای پراید و تیبا، ارائه‌دهنده پایداری بهتر در پیچ‌ها، فرمان‌پذیری نرم و ترمزگیری قوی‌تر نسبت به سایز فابریک.",
"features": [
"فرمان‌پذیری نرم و سواری راحت در معابر شهری",
"کاهش خط ترمز تا ۱۲ درصد نسبت به تایر ۱۶۵",
"گارانتی طلایی ۴۸ ماهه کویر تایر"
],
"image": "assets\/images\/tire_kavir_kb14.svg",
"is_featured": true,
"is_best_seller": true
},
{
"id": "TR-103",
"name": "یزد تایر نپتون (Neptune) اسپرت",
"brand": "یزد تایر (Yazd Tire)",
"country": "ایران (وردشتاین هلند)",
"category": "سواری اسپرت",
"width": 205,
"aspect_ratio": 55,
"rim": 16,
"size_str": "205\/55R16",
"speed_index": "V (240 km\/h)",
"load_index": "91 (615 kg)",
"season": "four_season",
"season_fa": "چهار فصل",
"warranty_months": 36,
"production_year": "2026",
"fuel_efficiency": "B",
"wet_grip": "A",
"noise_level": "68 dB",
"price": 5900000,
"discount_percent": 0,
"stock": 18,
"rating": 4.8,
"reviews_count": 44,
"vehicles": [
"تارا",
"دنا پلاس",
"شاهین",
"مگان",
"ساندرو استپ‌وی",
"سراتو",
"هیوندای آوانته",
"مزدا 3"
],
"description": "تولید شده تحت لیسانس و تکنولوژی پیشرفته Vredestein هلند، با طرح آج نامتقارن برای حداکثر پایداری در سرعت بالا و عملکرد بی‌نظیر ترمزگیری.",
"features": [
"تکنولوژی هلندی با طراحی مدرن آج جهت زیبایی و چسبندگی فوق‌العاده",
"نرمی مثال‌زدنی و جذب ضربات دست‌اندازهای جاده",
"شاخص سرعت V مناسب رانندگی پرسرعت در اتوبان"
],
"image": "assets\/images\/tire_yazd_neptune.svg",
"is_featured": true,
"is_best_seller": false
},
{
"id": "TR-104",
"name": "هانکوک ونوس پرایم 4 (Ventus Prime 4 K135)",
"brand": "هانکوک (Hankook)",
"country": "کره جنوبی",
"category": "لوکس و اسپرت",
"width": 215,
"aspect_ratio": 55,
"rim": 17,
"size_str": "215\/55R17",
"speed_index": "W (270 km\/h)",
"load_index": "94 (670 kg)",
"season": "four_season",
"season_fa": "چهار فصل پرمیوم",
"warranty_months": 60,
"production_year": "2025\/2026",
"fuel_efficiency": "A",
"wet_grip": "A",
"noise_level": "67 dB",
"price": 14800000,
"discount_percent": 6,
"stock": 14,
"rating": 4.9,
"reviews_count": 61,
"vehicles": [
"تویوتا کمری",
"کیا اپتیما",
"هیوندای سوناتا",
"نیسان تیانا",
"رنو تالیسمان",
"پژو 508",
"چانگان CS35"
],
"description": "شاهکار مهندسی هانکوک کره جنوبی، برنده جوایز متعدد تست‌های ایمنی اروپایی؛ ترکیب نهایت راحتی آکوستیک با پایداری استثنایی در پیچ‌های تند.",
"features": [
"تکنولوژی Low-Noise با شیارهای زیک‌زاک آکوستیک برای به صفر رساندن صدای تایر در کابین",
"فرمولاسیون کامپاند ژل سیلیکا با طول عمر پیمایش تا ۹۰ هزار کیلومتر",
"ترمزگیری فوق سریع در سطوح خیس با رتبه A استاندارد اتحادیه اروپا"
],
"image": "assets\/images\/tire_hankook_k135.svg",
"is_featured": true,
"is_best_seller": true
},
{
"id": "TR-105",
"name": "کومهو اکستا PS31 (Ecsta PS31)",
"brand": "کومهو (Kumho)",
"country": "کره جنوبی",
"category": "اسپرت سواری",
"width": 205,
"aspect_ratio": 50,
"rim": 16,
"size_str": "205\/50R16",
"speed_index": "V (240 km\/h)",
"load_index": "87 (545 kg)",
"season": "summer",
"season_fa": "تابستانه و اسپرت",
"warranty_months": 60,
"production_year": "2025",
"fuel_efficiency": "B",
"wet_grip": "A",
"noise_level": "69 dB",
"price": 11200000,
"discount_percent": 0,
"stock": 10,
"rating": 4.7,
"reviews_count": 29,
"vehicles": [
"دنا پلاس توربو",
"پژو 207 رینگ 16",
"جک J5",
"ام‌وی‌ام 315",
"هیوندای اکسنت",
"تویوتا یاریس"
],
"description": "طراحی عضلانی و تهاجمی برای علاقمندان به رانندگی اسپرت، چسبندگی بالا به آسفالت داغ و فرمان‌پذیری لحظه‌ای بدون کوچک‌ترین لغزش.",
"features": [
"آج جهت‌دار V شکل برای خروج آنی قطرات آب و خنک‌شوندگی مداوم",
"دیواره تقویت‌شده جهت مقاومت در برابر ضربات و لبه‌های جدول",
"افزایش محسوس شتاب و کاهش زمان واکنش فرمان"
],
"image": "assets\/images\/tire_kumho_ps31.svg",
"is_featured": false,
"is_best_seller": false
},
{
"id": "TR-106",
"name": "میشلن پریماسی 4 پلاس (Primacy 4+)",
"brand": "میشلن (Michelin)",
"country": "فرانسه \/ آلمان",
"category": "سوپرمعتبر پرمیوم",
"width": 225,
"aspect_ratio": 50,
"rim": 17,
"size_str": "225\/50R17",
"speed_index": "Y (300 km\/h)",
"load_index": "98 (750 kg)",
"season": "four_season",
"season_fa": "چهار فصل لوکس",
"warranty_months": 60,
"production_year": "2026",
"fuel_efficiency": "A",
"wet_grip": "A",
"noise_level": "66 dB",
"price": 22500000,
"discount_percent": 4,
"stock": 8,
"rating": 5,
"reviews_count": 75,
"vehicles": [
"ب‌ام‌و سری 3",
"ب‌ام‌و سری 5",
"مرسدس بنز C-Class",
"آئودی A4",
"هیوندای آزرا",
"تویوتا آریون",
"کیا کادنزا"
],
"description": "استاندارد طلایی تایر در جهان؛ بالاترین سطح ایمنی از کیلومتر اول تا آخرین میلی‌متر سایش آج تایر با تکنولوژی پیشرفته EverGrip.",
"features": [
"تکنولوژی انحصاری EverGrip برای حفظ ۱۰۰٪ چسبندگی حتی در انتهای عمر تایر",
"کم‌صداترین تایر بازار با رده صدای فوق‌العاده ۶۶ دسی‌بل",
"کاهش مصرف سوخت خودرو به لطف مقاومت غلتشی بهینه A"
],
"image": "assets\/images\/tire_michelin_primacy.svg",
"is_featured": true,
"is_best_seller": false
},
{
"id": "TR-107",
"name": "پیرلی پی زیرو (Pirelli P Zero)",
"brand": "پیرلی (Pirelli)",
"country": "ایتالیا",
"category": "سوپراسپرت",
"width": 235,
"aspect_ratio": 45,
"rim": 18,
"size_str": "235\/45R18",
"speed_index": "Y (300 km\/h)",
"load_index": "98 (750 kg)",
"season": "summer",
"season_fa": "تابستانه ریسینگ",
"warranty_months": 60,
"production_year": "2025\/2026",
"fuel_efficiency": "B",
"wet_grip": "A",
"noise_level": "69 dB",
"price": 26400000,
"discount_percent": 0,
"stock": 6,
"rating": 4.9,
"reviews_count": 33,
"vehicles": [
"پورشه ماکان",
"مرسدس بنز E-Class",
"لکسوس GS",
"آلفارومئو جولیتا",
"فولکس واگن پاسات",
"کیا استینگر"
],
"description": "تایر مورد تایید خودروسازان فراری، لامبورگینی و مک‌لارن. بالاترین دقت فرمان‌پذیری و چسبندگی در پیست و جاده‌های کوهستانی.",
"features": [
"تکنولوژی مسابقه‌ای فرمول ۱ پیرلی برای حداکثر پایداری جانبی",
"کنترل حرارت در سرعت‌های فراتر از ۲۵۰ کیلومتر بر ساعت",
"طراحی ریب‌های مرکزی سفت برای پاسخ فوق‌العاده سریع به فرامین فرمان"
],
"image": "assets\/images\/tire_pirelli_pzero.svg",
"is_featured": true,
"is_best_seller": false
},
{
"id": "TR-108",
"name": "مکسس براوو AT-771 (All-Terrain)",
"brand": "مکسس (Maxxis)",
"country": "تایوان",
"category": "شاسی بلند و آفرود (SUV\/4x4)",
"width": 265,
"aspect_ratio": 65,
"rim": 17,
"size_str": "265\/65R17",
"speed_index": "T (190 km\/h)",
"load_index": "112 (1120 kg)",
"season": "four_season",
"season_fa": "آفرود و آنرود (A\/T)",
"warranty_months": 60,
"production_year": "2026",
"fuel_efficiency": "D",
"wet_grip": "B",
"noise_level": "73 dB",
"price": 18900000,
"discount_percent": 7,
"stock": 12,
"rating": 4.8,
"reviews_count": 40,
"vehicles": [
"تویوتا پرادو",
"تویوتا هایلوکس",
"میتسوبیشی پاجرو",
"نیسان رونیز",
"نیسان پیکاپ",
"فوتون تونلند",
"کی‌ام‌سی T8"
],
"description": "تایر تخصصی همه‌جارو (All-Terrain) برای رانندگی لذت‌بخش در کویر، سنگلاخ و برف و در عین حال سواری نرم و کنترل‌پذیر در آسفالت شهر.",
"features": [
"عاج‌های سه‌بعدی مقاوم در برابر بریدگی و سوراخ‌شدگی سنگ‌ها",
"دیواره دوبل مسلح برای تحمل وزن سنگین و فشارهای ناگهانی آفرود",
"شیارهای خودپاک‌کننده برای خروج گل، لای و سنگریزه‌ها"
],
"image": "assets\/images\/tire_maxxis_at771.svg",
"is_featured": true,
"is_best_seller": true
},
{
"id": "TR-109",
"name": "تراینگل ادونتکس TR259 (AdvanteX)",
"brand": "تراینگل (Triangle)",
"country": "چین (درجه ۱ بین‌المللی)",
"category": "کراس‌اوور و SUV",
"width": 225,
"aspect_ratio": 60,
"rim": 18,
"size_str": "225\/60R18",
"speed_index": "H (210 km\/h)",
"load_index": "100 (800 kg)",
"season": "four_season",
"season_fa": "چهار فصل شهری و مسافرتی",
"warranty_months": 36,
"production_year": "2026",
"fuel_efficiency": "C",
"wet_grip": "B",
"noise_level": "71 dB",
"price": 8400000,
"discount_percent": 5,
"stock": 16,
"rating": 4.5,
"reviews_count": 27,
"vehicles": [
"هیوندای توسان",
"کیا اسپورتیج",
"تیگو 7 پرو",
"تیگو 8 پرو",
"دیگنیتی",
"فیدلیتی",
"هایما S7"
],
"description": "انتخاب اقتصادی و هوشمندانه برای کراس‌اوورهای مدرن چینی و کره‌ای با سواری نرم و کنترل عالی در سفرهای خانوادگی.",
"features": [
"طراحی بهینه مصرف سوخت برای خودروهای توربوشارژ",
"شیارهای طولی ۴ تایی جهت دفع پرفشار آب در بارندگی",
"ارزش خرید بسیار بالا در برابر کیفیت و کارایی"
],
"image": "assets\/images\/tire_triangle_tr259.svg",
"is_featured": false,
"is_best_seller": true
},
{
"id": "TR-110",
"name": "نکسن ان فرا SU4 (N'Fera SU4)",
"brand": "نکسن (Nexen)",
"country": "کره جنوبی",
"category": "سواری نیمه اسپرت",
"width": 195,
"aspect_ratio": 60,
"rim": 15,
"size_str": "195\/60R15",
"speed_index": "H (210 km\/h)",
"load_index": "88 (560 kg)",
"season": "four_season",
"season_fa": "چهار فصل بی صدا",
"warranty_months": 60,
"production_year": "2025\/2026",
"fuel_efficiency": "B",
"wet_grip": "A",
"noise_level": "68 dB",
"price": 9100000,
"discount_percent": 0,
"stock": 15,
"rating": 4.7,
"reviews_count": 35,
"vehicles": [
"سمند LX \/ سورن",
"دنا معمولی",
"ال 90 (تندر 90)",
"ساندرو",
"زانتیا",
"برلیانس H330",
"ام‌وی‌ام 530"
],
"description": "تایر نرم و باکیفیت کره‌ای ایده‌آل برای ارتقای کیفیت سواری و کاهش کوبش در سیستم تعلیق سمند، ال ۹۰ و خودروهای سایز ۱۵.",
"features": [
"جذب استثنایی دست‌اندازهای خیابان و حذف لرزش اتاق",
"آمیزه پلیمری مدرن برای ترمزگیری مطمئن در باران",
"عمر کارکرد استاندارد تا ۷۰ هزار کیلومتر"
],
"image": "assets\/images\/tire_nexen_su4.svg",
"is_featured": true,
"is_best_seller": false
}
],
"brands": [
{
"name": "بارز (Barez)",
"country": "ایران",
"logo": "assets\/images\/logo_barez.svg",
"desc": "بزرگترین تولیدکننده تایر در خاورمیانه با استانداردها و تکنولوژی روز"
},
{
"name": "کویر تایر (Kavir Tire)",
"country": "ایران",
"logo": "assets\/images\/logo_kavir.svg",
"desc": "پیشرو در نوآوری، تولید تایرهای سبز و فناوری‌های نوین رادیال در ایران"
},
{
"name": "یزد تایر (Yazd Tire)",
"country": "ایران (وردشتاین هلند)",
"logo": "assets\/images\/logo_yazd.svg",
"desc": "همکاری مستقیم و تولید تحت لیسانس کمپانی خوشنام وردشتاین هلند"
},
{
"name": "هانکوک (Hankook)",
"country": "کره جنوبی",
"logo": "assets\/images\/logo_hankook.svg",
"desc": "یکی از برترین برندهای تایر پرمیوم جهان و تامین‌کننده اصلی خودروسازان جهانی"
},
{
"name": "کومهو (Kumho)",
"country": "کره جنوبی",
"logo": "assets\/images\/logo_kumho.svg",
"desc": "تایرهای اسپرت، بادوام و با بالاترین استانداردهای هندلینگ و دینامیک رانندگی"
},
{
"name": "میشلن (Michelin)",
"country": "فرانسه",
"logo": "assets\/images\/logo_michelin.svg",
"desc": "اسطوره صنعت تایر جهان؛ بالاترین طول عمر، ایمنی و آرامش درون کابین"
},
{
"name": "پیرلی (Pirelli)",
"country": "ایتالیا",
"logo": "assets\/images\/logo_pirelli.svg",
"desc": "انتخاب شماره یک خودروهای سوپراسپرت، نماد سرعت و طراحی اصیل ایتالیایی"
},
{
"name": "مکسس (Maxxis)",
"country": "تایوان",
"logo": "assets\/images\/logo_maxxis.svg",
"desc": "قهرمان بلامنازع تایرهای آفرود، شاسی‌بلند و شرایط سخت جاده‌ای و کوهستانی"
}
],
"articles": [
{
"id": "art-1",
"title": "راهنمای جامع خواندن مشخصات و کدهای روی تایر (سایز، سال ساخت و شاخص سرعت)",
"category": "راهنمای فنی",
"read_time": "۵ دقیقه",
"date": "۱۴۰۳\/۱۱\/۲۰",
"summary": "کدهایی نظیر 205\/55R16 91V یا عدد ۴ رقمی DOT روی لاستیک به چه معنا هستند و چرا دانستن آن‌ها در هنگام خرید حیاتی است؟",
"content": "روی دیواره هر تایر اطلاعات کاملی از قبیل پهنای مقطع به میلیمتر، نسبت فاق به پهنا، ساختار رادیال، قطر رینگ به اینچ، شاخص وزن قابل تحمل و حداکثر سرعت مجاز درج شده است. همچنین کد ۴ رقمی نشان‌دهنده هفته و سال تولید تایر می‌باشد.",
"icon": "file-text"
},
{
"id": "art-2",
"title": "تفاوت تایر چهار فصل، تابستانه و زمستانه؛ کدامیک مناسب آب و هوای شماست؟",
"category": "مشاوره خرید",
"read_time": "۴ دقیقه",
"date": "۱۴۰۳\/۱۱\/۲۸",
"summary": "بررسی ساختار شیمیایی و فرمولاسیون لاستیک‌ها در شرایط دمایی مختلف و مزایای تایرهای چهارفصل در جاده‌های ایران.",
"content": "تایرهای تابستانه در دمای بالای ۷ درجه سانتی‌گراد بهترین عملکرد را دارند در حالی که تایرهای زمستانه با درصد بالای سیلیس در سرمای شدید منجمد نمی‌شوند. تایرهای چهارفصل انتخابی متعادل برای اکثر شهرهای ایران هستند.",
"icon": "sun"
},
{
"id": "art-3",
"title": "جدول تنظیم باد استاندارد خودروها و تاثیر آن بر مصرف سوخت و طول عمر تایر",
"category": "نگهداری خودرو",
"read_time": "۶ دقیقه",
"date": "۱۴۰۳\/۱۲\/۰۵",
"summary": "تنظیم باد دوره‌ای تایرها تا ۱۵ درصد در کاهش مصرف بنزین و افزایش ۲۵ درصدی طول عمر لاستیک موثر است.",
"content": "فشار باد مناسب باید زمانی اندازه‌گیری شود که تایرها کاملاً سرد هستند (حداقل ۲ ساعت پس از رانندگی یا کمتر از ۲ کیلومتر پیمایش). کم‌بادی باعث ساییدگی لبه‌ها و افزایش حرارت داخلی تایر می‌گردد.",
"icon": "gauge"
}
],
"pressure_guide": [
{
"vehicle": "پراید (تمام مدل‌ها)",
"front_psi": "30 - 32",
"rear_psi": "30 - 32",
"standard_tire": "165\/65R13 یا 175\/70R13"
},
{
"vehicle": "پژو 206 \/ 207 \/ رانا",
"front_psi": "31 - 33",
"rear_psi": "31 - 33",
"standard_tire": "185\/65R14 یا 205\/50R16"
},
{
"vehicle": "پژو 405 \/ پارس \/ سمند \/ سورن",
"front_psi": "30 - 32",
"rear_psi": "30 - 32",
"standard_tire": "185\/65R15 یا 205\/60R15"
},
{
"vehicle": "دنا \/ دنا پلاس \/ تارا \/ شاهین",
"front_psi": "32 - 34",
"rear_psi": "32 - 34",
"standard_tire": "195\/60R15 یا 205\/55R16"
},
{
"vehicle": "ال 90 (تندر 90) \/ ساندرو",
"front_psi": "30 - 32",
"rear_psi": "30 - 32",
"standard_tire": "185\/65R15 یا 195\/60R15"
},
{
"vehicle": "کراس‌اوورها (هایما، جک S5، تیگو)",
"front_psi": "33 - 35",
"rear_psi": "33 - 35",
"standard_tire": "225\/60R18 یا 225\/65R17"
},
{
"vehicle": "شاسی بلندها (هایلوکس، پرادو، پاجرو)",
"front_psi": "32 - 35",
"rear_psi": "35 - 38",
"standard_tire": "265\/65R17 یا 265\/70R16"
}
],
"consultations": [
{
"id": "CNS-101",
"name": "علی رضایی",
"phone": "09123456789",
"car": "دنا پلاس توربو",
"message": "برای رینگ ۱۶ فابریک چه سایز تایری برای نرمی بیشتر پیشنهاد می‌کنید؟",
"created_at": "2026-08-30 11:30",
"status": "پاسخ داده شده"
}
]
}
guide.php
+255
View File
@@ -0,0 +1,255 @@
<?php
// guide.php
require_once __DIR__ . '/includes/db.php';
$pressureGuide = TireStore::getPressureGuide();
$articles = TireStore::getArticles();
$pageTitle = 'راهنمای جامع، جدول تنظیم باد و نگهداری تایر | تایر قاسمی';
$activeNav = 'guide';
require_once __DIR__ . '/includes/header.php';
?>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-16">
<!-- Title Header -->
<div class="text-center max-w-3xl mx-auto">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-600/20 text-brand-400 text-xs font-bold mb-3">
<i data-lucide="book-open" class="w-4 h-4"></i>
مرکز آموزش و راهنمای فنی
</div>
<h1 class="text-3xl sm:text-4xl font-black text-white">دانشنامه و راهنمای جامع تایر خودرو</h1>
<p class="text-sm text-slate-400 mt-2">
آموزش خواندن کدهای روی لاستیک، جدول تنظیم باد استاندارد انواع خودروها و عیب‌یابی علائم ساییدگی و خرابی تایر.
</p>
</div>
<!-- 1. Interactive Tire Sidewall Decoder -->
<div class="glass-card rounded-3xl p-6 sm:p-10 border border-slate-800 space-y-6">
<div class="flex items-center gap-3 pb-4 border-b border-slate-800">
<div class="w-10 h-10 rounded-xl bg-brand-600/20 border border-brand-500/30 flex items-center justify-center text-brand-400">
<i data-lucide="info" class="w-5 h-5"></i>
</div>
<div>
<h2 class="text-lg font-black text-white">راهنمای رمزگشایی و خواندن مشخصات روی دیواره تایر</h2>
<p class="text-xs text-slate-400">روی هر بخش از کد زیر کلیک کنید تا مفهوم فنی آن را مشاهده کنید:</p>
</div>
</div>
<!-- Interactive Code Blocks -->
<div class="flex flex-wrap items-center justify-center gap-2 sm:gap-3 py-4 text-center">
<button onclick="showDecoder('width')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-brand-500 text-white font-black text-xl hover:scale-105 transition-all shadow-lg shadow-brand-900/30">
205
<span class="block text-[10px] text-brand-400 font-normal mt-1">عرض (mm)</span>
</button>
<span class="text-2xl font-black text-slate-600">/</span>
<button onclick="showDecoder('aspect')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-amber-500 text-white font-black text-xl hover:scale-105 transition-all">
55
<span class="block text-[10px] text-amber-400 font-normal mt-1">نسبت فاق (%)</span>
</button>
<button onclick="showDecoder('structure')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-emerald-500 text-white font-black text-xl hover:scale-105 transition-all">
R
<span class="block text-[10px] text-emerald-400 font-normal mt-1">ساختار رادیال</span>
</button>
<button onclick="showDecoder('rim')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-blue-500 text-white font-black text-xl hover:scale-105 transition-all">
16
<span class="block text-[10px] text-blue-400 font-normal mt-1">قطر رینگ (اینچ)</span>
</button>
<button onclick="showDecoder('load')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-purple-500 text-white font-black text-xl hover:scale-105 transition-all">
91
<span class="block text-[10px] text-purple-400 font-normal mt-1">شاخص بار</span>
</button>
<button onclick="showDecoder('speed')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-rose-500 text-white font-black text-xl hover:scale-105 transition-all">
V
<span class="block text-[10px] text-rose-400 font-normal mt-1">شاخص سرعت</span>
</button>
<button onclick="showDecoder('dot')" class="dec-btn px-4 py-3 rounded-2xl bg-slate-900 border-2 border-slate-700 hover:border-cyan-500 text-white font-black text-xl hover:scale-105 transition-all">
DOT 2626
<span class="block text-[10px] text-cyan-400 font-normal mt-1">تاریخ تولید</span>
</button>
</div>
<!-- Decoder Explanation Box -->
<div id="decoder-info-box" class="p-5 rounded-2xl bg-slate-950 border border-slate-800 text-sm">
<h3 id="dec-title" class="font-bold text-brand-400 text-base mb-1">عدد ۲۰۵: پهنای مقطع تایر (Section Width)</h3>
<p id="dec-desc" class="text-xs text-slate-300 leading-relaxed">
این عدد نشان‌دهنده عرض لاستیک به میلی‌متر از خارجی‌ترین لبه دیواره تا لبه مخالف آن در حالت باد شده استاندارد است. افزایش پهنا باعث چسبندگی بهتر و کوتاه‌تر شدن خط ترمز می‌شود.
</p>
</div>
</div>
<!-- 2. Searchable Tire Pressure Table -->
<div class="glass-card rounded-3xl p-6 sm:p-10 border border-slate-800 space-y-6">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4 border-b border-slate-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400">
<i data-lucide="gauge" class="w-5 h-5"></i>
</div>
<div>
<h2 class="text-lg font-black text-white">جدول میزان باد استاندارد انواع خودروها (PSI)</h2>
<p class="text-xs text-slate-400">تنظیم باد در حالت سرد (حداقل ۲ ساعت پس از توقف خودرو)</p>
</div>
</div>
<!-- Search in table -->
<div class="relative max-w-xs w-full">
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute right-3 top-3"></i>
<input type="text" id="pressure-search" oninput="filterPressureTable()" placeholder="جستجوی مدل خودرو..." class="w-full bg-slate-950 border border-slate-800 rounded-xl pr-9 pl-3.5 py-2 text-xs text-white focus:outline-none focus:border-amber-500">
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-right text-xs" id="pressure-table">
<thead>
<tr class="border-b border-slate-800 text-slate-400">
<th class="p-3.5 font-bold">مدل خودرو</th>
<th class="p-3.5 font-bold text-amber-400">فشار چرخ جلو (PSI)</th>
<th class="p-3.5 font-bold text-amber-400">فشار چرخ عقب (PSI)</th>
<th class="p-3.5 font-bold text-slate-300">سایز تایر استاندارد</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-800/60 text-slate-200">
<?php foreach ($pressureGuide as $pg): ?>
<tr class="pressure-row hover:bg-slate-800/30 transition-colors">
<td class="p-3.5 font-bold text-white"><?= htmlspecialchars($pg['vehicle']) ?></td>
<td class="p-3.5 font-bold text-amber-400"><?= htmlspecialchars($pg['front_psi']) ?> PSI</td>
<td class="p-3.5 font-bold text-amber-400"><?= htmlspecialchars($pg['rear_psi']) ?> PSI</td>
<td class="p-3.5 text-slate-400"><?= htmlspecialchars($pg['standard_tire']) ?></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<!-- 3. Tire Wear Diagnostic Guide -->
<div class="glass-card rounded-3xl p-6 sm:p-10 border border-slate-800 space-y-6">
<div class="flex items-center gap-3 pb-4 border-b border-slate-800">
<div class="w-10 h-10 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
<i data-lucide="activity" class="w-5 h-5"></i>
</div>
<div>
<h2 class="text-lg font-black text-white">راهنمای عیب‌یابی خودرو از روی الگوی ساییدگی لاستیک</h2>
<p class="text-xs text-slate-400">شکل سایش آج تایر رازهای مهمی از وضعیت جلوبندی و سیستم تعلیق را فاش می‌کند:</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
<span class="px-2.5 py-1 rounded bg-rose-500/20 text-rose-400 text-xs font-bold inline-block">ساییدگی دو لبه خارجی</span>
<h4 class="text-sm font-bold text-white">علت: کم‌بادی مزمن (Under-Inflation)</h4>
<p class="text-xs text-slate-400 leading-relaxed">
وقتی باد تایر کم است، وزن خودرو به دو لبه کناری وارد شده و مرکز لاستیک بالا می‌آید. این حالت مصرف بنزین را شدیداً افزایش می‌دهد.
</p>
</div>
<div class="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
<span class="px-2.5 py-1 rounded bg-amber-500/20 text-amber-400 text-xs font-bold inline-block">ساییدگی فقط خط وسط</span>
<h4 class="text-sm font-bold text-white">علت: پُربادی بیش از حد (Over-Inflation)</h4>
<p class="text-xs text-slate-400 leading-relaxed">
باد زیاد باعث باد کردن بخش میانی تایر و کاهش سطح تماس با زمین می‌گردد؛ در نتیجه کوبش سیستم تعلیق و کاهش تعادل رخ می‌دهد.
</p>
</div>
<div class="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
<span class="px-2.5 py-1 rounded bg-blue-500/20 text-blue-400 text-xs font-bold inline-block">ساییدگی یک‌طرفه (لبه داخل یا خارج)</span>
<h4 class="text-sm font-bold text-white">علت: عدم تنظیم زاویه چرخ (کمبر / تو این)</h4>
<p class="text-xs text-slate-400 leading-relaxed">
نشان‌دهنده کج بودن زاویه چرخ نسبت به خط عمود است. نیاز فوری به تنظیم فرمان با دستگاه لیزری دارد.
</p>
</div>
<div class="p-5 rounded-2xl bg-slate-950 border border-slate-800 space-y-2">
<span class="px-2.5 py-1 rounded bg-purple-500/20 text-purple-400 text-xs font-bold inline-block">ساییدگی پله‌پله و تکه‌ای (Cup)</span>
<h4 class="text-sm font-bold text-white">علت: خرابی کمک‌فنرها یا نابالانسی شدید</h4>
<p class="text-xs text-slate-400 leading-relaxed">
پریدن چرخ روی دست‌اندازها به علت مستهلک بودن کمک‌فنرها باعث کنده شدن موضعی تکه‌های لاستیک و ایجاد صدای زوزه می‌شود.
</p>
</div>
</div>
</div>
<!-- 4. Articles & Maintenance Tips -->
<div class="space-y-6">
<h2 class="text-xl font-black text-white flex items-center gap-2">
<i data-lucide="file-text" class="w-5 h-5 text-brand-400"></i>
مقالات و نکات طلایی نگهداری لاستیک
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<?php foreach ($articles as $art): ?>
<div class="glass-card p-6 rounded-3xl border border-slate-800 flex flex-col justify-between space-y-4">
<div>
<div class="flex items-center justify-between text-[11px] text-slate-400 mb-2">
<span class="px-2 py-0.5 rounded bg-slate-800 text-brand-400 font-bold"><?= htmlspecialchars($art['category']) ?></span>
<span><?= htmlspecialchars($art['date']) ?></span>
</div>
<h3 class="text-base font-bold text-white line-clamp-2"><?= htmlspecialchars($art['title']) ?></h3>
<p class="text-xs text-slate-400 mt-2 leading-relaxed"><?= htmlspecialchars($art['summary']) ?></p>
</div>
<div class="pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-500">
<span>زمان مطالعه: <?= htmlspecialchars($art['read_time']) ?></span>
<a href="#consultation" class="text-brand-400 font-bold hover:underline">مشاوره بیشتر</a>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<script>
const decoderData = {
width: {
title: "عدد ۲۰۵: پهنای مقطع تایر (Section Width)",
desc: "این عدد نشان‌دهنده عرض لاستیک به میلی‌متر از خارجی‌ترین لبه دیواره تا لبه مخالف آن در حالت باد شده استاندارد است. افزایش پهنا باعث چسبندگی بهتر و کوتاه‌تر شدن خط ترمز می‌شود."
},
aspect: {
title: "عدد ۵۵: نسبت منظر یا فاق (Aspect Ratio)",
desc: "نسبت ارتفاع دیواره لاستیک به پهنای آن به درصد. یعنی در این تایر، ارتفاع فاق برابر با ۵۵ درصد از ۲۰۵ میلی‌متر (معادل ۱۱۲.۷۵ میلی‌متر) می‌باشد. هر چه این عدد کمتر باشد، تایر اسپرت‌تر و کنترل‌پذیرتر اما خشک‌تر خواهد بود."
},
structure: {
title: "حرف R: ساختار رادیال (Radial Construction)",
desc: "نشان‌دهنده چیدمان لایه‌های سیمی و بافت داخلی تایر به صورت شعاعی و ۹۰ درجه نسبت به جهت حرکت است که امروزه استاندارد ۱۰۰٪ تایرهای سواری مدرن به دلیل دوام و خنک‌شوندگی بالا است."
},
rim: {
title: "عدد ۱۶: قطر رینگ (Rim Diameter)",
desc: "قطر لبه داخلی تایر که روی رینگ فلزی سوار می‌شود بر حسب اینچ. تایر رینگ ۱۶ تنها و تنها روی رینگ ۱۶ اینچی قابل نصب است."
},
load: {
title: "عدد ۹۱: شاخص تحمل بار (Load Index)",
desc: "کد عددی که حداکثر وزن قابل تحمل توسط یک حلقه لاستیک در حداکثر فشار باد مجاز را مشخص می‌کند. کد ۹۱ به معنای ظرفیت تحمل ۶۱۵ کیلوگرم برای هر چرخ (مجموعاً ۲۴۶۰ کیلوگرم برای ۴ چرخ) است."
},
speed: {
title: "حرف V: شاخص حداکثر سرعت مجاز (Speed Rating)",
desc: "نمایانگر حداکثر سرعتی است که تایر می‌تواند بدون افت پایداری و متلاشی شدن حرارتی طی کند. شاخص V به معنی حداکثر سرعت مجاز ۲۴۰ کیلومتر بر ساعت است. شاخص‌های متداول: T=190, H=210, V=240, W=270, Y=300 km/h."
},
dot: {
title: "کد DOT 2626: تاریخ و هفته تولید تایر (Date of Manufacture)",
desc: "چهار رقم آخر کد DOT نشان‌دهنده زمان تولید است. دو رقم اول نشان‌دهنده هفته و دو رقم آخر نشان‌دهنده سال میلادی است. مثلاً ۲۶۲۶ یعنی تولید شده در هفته بیست و ششم سال ۲۰۲۶ میلادی."
}
};
function showDecoder(key) {
const item = decoderData[key];
if (!item) return;
document.getElementById('dec-title').innerText = item.title;
document.getElementById('dec-desc').innerText = item.desc;
}
function filterPressureTable() {
const q = document.getElementById('pressure-search').value.toLowerCase().trim();
const rows = document.querySelectorAll('.pressure-row');
rows.forEach(r => {
if (r.innerText.toLowerCase().includes(q)) {
r.classList.remove('hidden');
} else {
r.classList.add('hidden');
}
});
}
</script>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
includes/db.php
+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);
}
}
includes/footer.php
+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>
includes/header.php
+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>
index.php
+703
View File
@@ -0,0 +1,703 @@
<?php
// index.php
require_once __DIR__ . '/includes/db.php';
$tires = TireStore::getTires();
$brands = TireStore::getBrands();
$articles = TireStore::getArticles();
$pageTitle = 'تایر قاسمی | سامانه هوشمند معرفی، بررسی و انتخاب لاستیک خودرو';
$activeNav = 'home';
require_once __DIR__ . '/includes/header.php';
?>
<!-- Hero Section -->
<section class="relative overflow-hidden pt-8 pb-16 lg:pt-14 lg:pb-24 border-b border-slate-800">
<!-- Ambient Background Lighting -->
<div class="absolute top-1/4 -right-20 w-96 h-96 bg-brand-600/15 rounded-full blur-3xl pointer-events-none"></div>
<div class="absolute bottom-10 -left-20 w-96 h-96 bg-amber-600/10 rounded-full blur-3xl pointer-events-none"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<!-- Hero Text & CTA -->
<div class="lg:col-span-7 space-y-6 text-center lg:text-right">
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-brand-500/10 border border-brand-500/30 text-brand-400 text-xs font-semibold">
<i data-lucide="award" class="w-4 h-4"></i>
<span>بزرگترین مرکز تخصصی تایر در پایتخت با گارانتی اصالت</span>
</div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight leading-tight text-white">
انتخاب هوشمند <span class="bg-gradient-to-l from-brand-500 via-rose-500 to-amber-400 bg-clip-text text-transparent">تایر مناسب</span> خودروی شما با بهترین قیمت
</h1>
<p class="text-base sm:text-lg text-slate-300 font-normal leading-relaxed max-w-2xl mx-auto lg:mx-0">
مرجع کامل مشخصات فنی، بررسی‌های تخصصی، مقایسه ابعاد، تاریخ تولید به‌روز (DOT 2026) و تامین مستقیم انواع لاستیک‌های ایرانی و برندهای معتبر جهانی.
</p>
<!-- Quick Stats Badges -->
<div class="grid grid-cols-3 gap-3 pt-2 max-w-lg mx-auto lg:mx-0">
<div class="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800 text-center">
<div class="text-xl sm:text-2xl font-black text-brand-500">+۲۵</div>
<div class="text-[11px] text-slate-400 font-medium">برند معتبر جهانی و ایرانی</div>
</div>
<div class="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800 text-center">
<div class="text-xl sm:text-2xl font-black text-amber-400">۱۰۰٪</div>
<div class="text-[11px] text-slate-400 font-medium">تضمین تاریخ تولید روز</div>
</div>
<div class="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800 text-center">
<div class="text-xl sm:text-2xl font-black text-emerald-400">۶۰ ماه</div>
<div class="text-[11px] text-slate-400 font-medium">گارانتی طلایی تعویض</div>
</div>
</div>
<!-- Action CTAs -->
<div class="flex flex-wrap items-center justify-center lg:justify-start gap-4 pt-4">
<a href="#finder" class="px-6 py-3.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-sm shadow-xl shadow-brand-600/30 flex items-center gap-2 hover:-translate-y-0.5 transition-all">
<i data-lucide="search" class="w-4 h-4"></i>
جستجوی هوشمند بر اساس خودرو
</a>
<a href="calculator.php" class="px-6 py-3.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-200 font-bold text-sm flex items-center gap-2 transition-all">
<i data-lucide="calculator" class="w-4 h-4"></i>
محاسبه‌گر تغییر سایز
</a>
</div>
</div>
<!-- Hero Tire Showcase Visual -->
<div class="lg:col-span-5 relative flex items-center justify-center">
<div class="relative w-72 sm:w-88 lg:w-full max-w-sm group">
<div class="absolute inset-0 bg-gradient-to-tr from-brand-600 to-amber-500 rounded-full blur-2xl opacity-30 group-hover:opacity-50 transition-opacity"></div>
<img src="assets/images/tire_michelin_primacy.svg" alt="Tire Showcase" class="relative z-10 w-full h-auto drop-shadow-[0_20px_35px_rgba(0,0,0,0.8)] animate-pulse-slow">
<!-- Floating Highlight Tag 1 -->
<div class="absolute -top-4 right-2 z-20 glass-card px-3.5 py-2 rounded-xl shadow-xl flex items-center gap-2 border border-brand-500/40">
<span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-ping"></span>
<span class="text-xs font-bold text-white">تکنولوژی ترمز خیس A</span>
</div>
<!-- Floating Highlight Tag 2 -->
<div class="absolute -bottom-4 left-2 z-20 glass-card px-3.5 py-2 rounded-xl shadow-xl flex items-center gap-2 border border-slate-700">
<i data-lucide="sparkles" class="w-4 h-4 text-amber-400"></i>
<span class="text-xs font-bold text-slate-200">فوق‌العاده نرم و بی‌صدا</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Smart Tire Finder Filter Box -->
<section id="finder" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-20">
<div class="glass-card rounded-3xl p-6 sm:p-8 shadow-2xl border border-slate-700/80 bg-slate-900/90">
<div class="flex flex-col md:flex-row items-center justify-between gap-4 pb-6 border-b border-slate-800">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-brand-600/20 border border-brand-500/30 flex items-center justify-center text-brand-400">
<i data-lucide="filter" class="w-5 h-5"></i>
</div>
<div>
<h3 class="text-lg font-bold text-white">جستجوگر تخصصی و هوشمند تایر</h3>
<p class="text-xs text-slate-400">یافتن دقیق‌ترین سایز متناسب با خودرو یا ابعاد استاندارد</p>
</div>
</div>
<!-- Switch Mode Tabs -->
<div class="flex items-center bg-slate-950 p-1 rounded-xl border border-slate-800 text-xs font-semibold">
<button id="tab-btn-car" onclick="switchFinderTab('car')" class="px-4 py-2 rounded-lg bg-brand-600 text-white transition-all">بر اساس مدل خودرو</button>
<button id="tab-btn-size" onclick="switchFinderTab('size')" class="px-4 py-2 rounded-lg text-slate-400 hover:text-white transition-all">بر اساس ابعاد (سایز)</button>
</div>
</div>
<!-- Mode 1: By Car Model -->
<div id="finder-car-tab" class="pt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
<div>
<label class="block text-xs font-bold text-slate-300 mb-2">۱. گروه خودروساز</label>
<select id="filter-car-brand" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
<option value="">همه خودروسازان</option>
<option value="ایران خودرو">ایران خودرو (پژو، دنا، تارا، سمند، رانا)</option>
<option value="سایپا">سایپا (پراید، تیبا، شاهین، کوئیک)</option>
<option value="کره ای">هیوندای / کیا (سوناتا، اپتیما، آزرا، توسان)</option>
<option value="ژاپنی">تویوتا / نیسان (کمری، هایلوکس، پرادو)</option>
<option value="چینی">مدیران خودرو / بهمن (تیگو، دیگنیتی، فیدلیتی، هایما)</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-2">۲. خودروی شما</label>
<input type="text" id="filter-car-name" placeholder="مثلاً: پژو ۲۰۶، دنا پلاس، کمری..." class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-2">۳. فصل کاربری</label>
<select id="filter-car-season" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
<option value="">همه فصول</option>
<option value="four_season">چهار فصل (همه‌کاره)</option>
<option value="summer">تابستانه و اسپرت</option>
<option value="winter">زمستانه</option>
</select>
</div>
<div>
<button onclick="applyFilters()" class="w-full py-2.5 px-4 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-sm shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2 transition-all">
<i data-lucide="search" class="w-4 h-4"></i>
نمایش تایرهای سازگار
</button>
</div>
</div>
<!-- Mode 2: By Tire Dimensions (Hidden by default) -->
<div id="finder-size-tab" class="hidden pt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 items-end">
<div>
<label class="block text-xs font-bold text-slate-300 mb-2">پهنای تایر (عرض - mm)</label>
<select id="filter-size-width" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
<option value="">همه پهنا‌ها</option>
<option value="165">165</option>
<option value="175">175</option>
<option value="185">185</option>
<option value="195">195</option>
<option value="205">205</option>
<option value="215">215</option>
<option value="225">225</option>
<option value="235">235</option>
<option value="265">265</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-2">نسبت منظر (فاق - %)</label>
<select id="filter-size-aspect" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
<option value="">همه فاق‌ها</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60">60</option>
<option value="65">65</option>
<option value="70">70</option>
</select>
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-2">قطر رینگ (Rim - اینچ)</label>
<select id="filter-size-rim" class="w-full bg-slate-950 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
<option value="">همه رینگ‌ها</option>
<option value="13">رینگ ۱۳</option>
<option value="14">رینگ ۱۴</option>
<option value="15">رینگ ۱۵</option>
<option value="16">رینگ ۱۶</option>
<option value="17">رینگ ۱۷</option>
<option value="18">رینگ ۱۸</option>
</select>
</div>
<div>
<button onclick="applyFilters()" class="w-full py-2.5 px-4 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-sm shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2 transition-all">
<i data-lucide="check" class="w-4 h-4"></i>
اعمال فیلتر ابعاد
</button>
</div>
</div>
</div>
</section>
<!-- Main Products Catalog Section -->
<section id="catalog" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
<div>
<div class="inline-flex items-center gap-2 text-xs font-bold text-brand-400 uppercase tracking-widest mb-1">
<i data-lucide="layers" class="w-4 h-4"></i>
کاتالوگ تخصصی
</div>
<h2 class="text-2xl sm:text-3xl font-black text-white">انواع تایرهای سواری، اسپرت و شاسی‌بلند</h2>
</div>
<!-- Category Filter Pills -->
<div class="flex flex-wrap items-center gap-2" id="quick-category-pills">
<button onclick="filterCategory('')" class="cat-pill active px-4 py-2 rounded-xl text-xs font-bold bg-brand-600 text-white border border-brand-500/50 shadow transition-all">همه محصولات</button>
<button onclick="filterCategory('سواری')" class="cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all">سواری شهری</button>
<button onclick="filterCategory('اسپرت')" class="cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all">اسپرت و ریسینگ</button>
<button onclick="filterCategory('SUV')" class="cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all">شاسی بلند و آفرود (4x4)</button>
<button onclick="filterCategory('پرمیوم')" class="cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all">لوکس و وارداتی</button>
</div>
</div>
<!-- Live Products Grid -->
<div id="tires-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<?php foreach ($tires as $tire): ?>
<div class="tire-card group rounded-3xl bg-slate-900/90 border border-slate-800 hover:border-brand-500/50 p-6 flex flex-col justify-between transition-all duration-300 hover:shadow-2xl hover:shadow-brand-950/40 hover:-translate-y-1"
data-brand="<?= htmlspecialchars($tire['brand']) ?>"
data-rim="<?= $tire['rim'] ?>"
data-category="<?= htmlspecialchars($tire['category']) ?>"
data-season="<?= $tire['season'] ?>"
data-name="<?= htmlspecialchars($tire['name']) ?>"
data-vehicles="<?= htmlspecialchars(implode(',', $tire['vehicles'] ?? [])) ?>">
<div>
<!-- Top Badges -->
<div class="flex items-center justify-between gap-2 mb-4">
<span class="px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 text-xs font-bold border border-slate-700 flex items-center gap-1.5">
<i data-lucide="globe" class="w-3.5 h-3.5 text-brand-400"></i>
<?= htmlspecialchars($tire['country']) ?>
</span>
<div class="flex items-center gap-1.5">
<?php if (!empty($tire['is_best_seller'])): ?>
<span class="px-2.5 py-1 rounded-lg bg-amber-500/20 text-amber-400 border border-amber-500/30 text-[11px] font-bold">پرفروش</span>
<?php endif; ?>
<span class="px-2.5 py-1 rounded-lg bg-brand-500/20 text-brand-400 border border-brand-500/30 text-xs font-bold tracking-wider"><?= htmlspecialchars($tire['size_str']) ?></span>
</div>
</div>
<!-- Tire Graphic -->
<div class="relative py-4 flex items-center justify-center">
<img src="<?= htmlspecialchars($tire['image']) ?>" alt="<?= htmlspecialchars($tire['name']) ?>" class="w-44 h-44 object-contain group-hover:scale-105 transition-transform duration-500">
</div>
<!-- Title & Brand -->
<div class="text-right mt-2">
<div class="text-xs text-brand-400 font-bold mb-1"><?= htmlspecialchars($tire['brand']) ?></div>
<h3 class="text-lg font-black text-white group-hover:text-brand-400 transition-colors line-clamp-1"><?= htmlspecialchars($tire['name']) ?></h3>
<p class="text-xs text-slate-400 mt-1 line-clamp-2 leading-relaxed"><?= htmlspecialchars($tire['description']) ?></p>
</div>
<!-- EU Specs Label Chips -->
<div class="grid grid-cols-3 gap-2 mt-4 pt-4 border-t border-slate-800 text-[11px]">
<div class="p-2 rounded-xl bg-slate-950 border border-slate-800/80 text-center">
<span class="block text-slate-500">چسبندگی</span>
<span class="font-bold text-emerald-400">گرید <?= $tire['wet_grip'] ?></span>
</div>
<div class="p-2 rounded-xl bg-slate-950 border border-slate-800/80 text-center">
<span class="block text-slate-500">مصرف سوخت</span>
<span class="font-bold text-amber-400">گرید <?= $tire['fuel_efficiency'] ?></span>
</div>
<div class="p-2 rounded-xl bg-slate-950 border border-slate-800/80 text-center">
<span class="block text-slate-500">صدای داخل</span>
<span class="font-bold text-cyan-400"><?= $tire['noise_level'] ?></span>
</div>
</div>
<!-- Compatible Vehicles Preview -->
<div class="mt-3 flex flex-wrap gap-1">
<?php foreach (array_slice($tire['vehicles'] ?? [], 0, 3) as $v): ?>
<span class="px-2 py-0.5 rounded-md bg-slate-800/70 text-slate-400 text-[10px]"><?= htmlspecialchars($v) ?></span>
<?php endforeach; ?>
<?php if (count($tire['vehicles'] ?? []) > 3): ?>
<span class="px-1.5 py-0.5 rounded-md bg-slate-800/70 text-slate-500 text-[10px]">+<?= count($tire['vehicles']) - 3 ?> دیگر</span>
<?php endif; ?>
</div>
</div>
<!-- Footer Price & CTA -->
<div class="mt-5 pt-4 border-t border-slate-800/80 flex items-center justify-between gap-3">
<div>
<span class="text-[10px] text-slate-500 block">قیمت مصوب (حلقه)</span>
<div class="text-base font-black text-white">
<?= number_format($tire['price']) ?> <span class="text-xs text-brand-400 font-normal">تومان</span>
</div>
</div>
<div class="flex items-center gap-2">
<!-- Compare Button -->
<button onclick="toggleCompare('<?= $tire['id'] ?>')" class="p-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 border border-slate-700 text-slate-300 hover:text-brand-400 transition-all" title="افزودن به مقایسه">
<i data-lucide="git-compare" class="w-4 h-4"></i>
</button>
<!-- Detail Modal Trigger -->
<button onclick="openTireModal('<?= $tire['id'] ?>')" class="px-3.5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white font-bold text-xs shadow-md shadow-brand-600/20 flex items-center gap-1.5 transition-all">
<span>مشخصات فنی</span>
<i data-lucide="arrow-left" class="w-3.5 h-3.5"></i>
</button>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<!-- Empty State (Hidden) -->
<div id="no-tires-found" class="hidden text-center py-16 bg-slate-900/50 rounded-3xl border border-slate-800">
<i data-lucide="help-circle" class="w-12 h-12 text-slate-600 mx-auto mb-3"></i>
<h3 class="text-lg font-bold text-white">تایری با این مشخصات یافت نشد!</h3>
<p class="text-xs text-slate-400 mt-1 mb-4">می‌توانید فیلترها را تغییر داده یا مستقیماً از کارشناسان ما مشاوره تلفنی بگیرید.</p>
<button onclick="resetFilters()" class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-semibold">پاک کردن فیلترها</button>
</div>
</section>
<!-- Brand Showcase Carousel / Grid -->
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 border-t border-slate-800">
<div class="text-center max-w-2xl mx-auto mb-10">
<h3 class="text-xs font-bold text-brand-400 uppercase tracking-widest mb-1">تامین مستقیم و رسمی</h3>
<h2 class="text-2xl sm:text-3xl font-black text-white">برترین برندهای تایر ایرانی و بین‌المللی</h2>
<p class="text-xs text-slate-400 mt-2">کلیه محصولات با تضمین سلامت فیزیکی، بیمه‌نامه معتبر و برگ گارانتی کارخانه عرضه می‌گردد.</p>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
<?php foreach ($brands as $b): ?>
<div class="glass-card p-5 rounded-2xl border border-slate-800 hover:border-brand-500/40 transition-all text-center flex flex-col items-center justify-center group">
<img src="<?= htmlspecialchars($b['logo']) ?>" alt="<?= htmlspecialchars($b['name']) ?>" class="h-16 w-auto object-contain mb-3 group-hover:scale-105 transition-transform">
<h4 class="text-sm font-black text-white"><?= htmlspecialchars($b['name']) ?></h4>
<span class="text-[11px] text-slate-400 mt-1"><?= htmlspecialchars($b['desc']) ?></span>
</div>
<?php endforeach; ?>
</div>
</section>
<!-- Why Choose Us / Features -->
<section class="bg-slate-900/60 border-y border-slate-800 py-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-12">
<h3 class="text-xs font-bold text-brand-400 uppercase tracking-widest mb-1">مزیت‌های رقابتی</h3>
<h2 class="text-2xl sm:text-3xl font-black text-white">چرا خرید و مشاوره از تایر قاسمی؟</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-3">
<div class="w-12 h-12 rounded-xl bg-brand-600/20 border border-brand-500/30 flex items-center justify-center text-brand-400">
<i data-lucide="calendar" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-white">تاریخ تولید کاملاً به‌روز (DOT)</h4>
<p class="text-xs text-slate-400 leading-relaxed">
تمامی تایرهای موجود در انبار دارای کد ساخت سال جاری هستند و هرگز تایر انبارخورده یا تاریخ گذشته ارسال نمی‌شود.
</p>
</div>
<div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-3">
<div class="w-12 h-12 rounded-xl bg-amber-500/20 border border-amber-500/30 flex items-center justify-center text-amber-400">
<i data-lucide="wrench" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-white">نصب و بالانس لیزری در شعب</h4>
<p class="text-xs text-slate-400 leading-relaxed">
مجهز به مدرن‌ترین دستگاه‌های دیاگ و بالانس دیجیتال سه بعدی جهت تضمین نرمی و جلوگیری از هرگونه لرزش فرمان.
</p>
</div>
<div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-3">
<div class="w-12 h-12 rounded-xl bg-emerald-500/20 border border-emerald-500/30 flex items-center justify-center text-emerald-400">
<i data-lucide="shield-check" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-white">گارانتی تعویض و اصالت شرکتی</h4>
<p class="text-xs text-slate-400 leading-relaxed">
کلیه تایرها با ضمانت‌نامه رسمی ۳۶ الی ۶۰ ماهه شرکتی و خدمات پس از فروش سراسری تقدیم می‌گردند.
</p>
</div>
<div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-3">
<div class="w-12 h-12 rounded-xl bg-blue-500/20 border border-blue-500/30 flex items-center justify-center text-blue-400">
<i data-lucide="truck" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-white">ارسال سریع و مطمئن</h4>
<p class="text-xs text-slate-400 leading-relaxed">
تحویل ۲ ساعته در شهر تهران و ارسال سریع با باربری اختصاصی به کلیه شهرستان‌ها با بسته‌بندی مقاوم.
</p>
</div>
</div>
</div>
</section>
<!-- Consultation & Inquiry Section -->
<section id="consultation" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
<div class="glass-card rounded-3xl p-8 sm:p-12 border border-brand-500/30 bg-gradient-to-br from-slate-900 via-slate-900 to-brand-950/40 relative overflow-hidden">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-6 space-y-4">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-500/20 text-brand-400 text-xs font-bold">
<i data-lucide="phone-call" class="w-3.5 h-3.5"></i>
پاسخگویی سریع کمتر از ۱۵ دقیقه
</div>
<h3 class="text-2xl sm:text-3xl font-black text-white leading-tight">در انتخاب سایز یا برند مناسب مردد هستید؟</h3>
<p class="text-sm text-slate-300 leading-relaxed">
شماره تماس و مدل خودروی خود را وارد کنید تا کارشناسان فنی تایر قاسمی بهترین گزینه‌های متناسب با بودجه و سبک رانندگی شما را معرفی کنند.
</p>
<div class="flex items-center gap-4 text-xs text-slate-400 pt-2">
<span class="flex items-center gap-1"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i> مشاوره کاملاً رایگان</span>
<span class="flex items-center gap-1"><i data-lucide="check-circle" class="w-4 h-4 text-emerald-400"></i> بدون نیاز به خرید حتمی</span>
</div>
</div>
<div class="lg:col-span-6">
<form id="consultation-form" onsubmit="submitConsultationForm(event)" class="bg-slate-950/90 p-6 rounded-2xl border border-slate-800 space-y-4">
<div id="consultation-alert" class="hidden p-3 rounded-xl text-xs font-bold"></div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label class="block text-xs font-bold text-slate-300 mb-1.5">نام و نام خانوادگی *</label>
<input type="text" name="name" required placeholder="مثلاً: محمد کریمی" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-1.5">شماره تماس همراه *</label>
<input type="tel" name="phone" required placeholder="0912..." dir="ltr" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500 text-right">
</div>
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-1.5">مدل خودرو و سایز فعلی</label>
<input type="text" name="car" placeholder="مثلاً: دنا پلاس، رینگ ۱۶ فابریک" class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3.5 py-2.5 text-sm text-white focus:outline-none focus:border-brand-500">
</div>
<div>
<label class="block text-xs font-bold text-slate-300 mb-1.5">توضیحات یا اولویت شما (اختیاری)</label>
<textarea name="message" rows="2" placeholder="نرمی، دوام بالا، سواری کم‌صدا..." class="w-full bg-slate-900 border border-slate-800 rounded-xl px-3.5 py-2 text-sm text-white focus:outline-none focus:border-brand-500"></textarea>
</div>
<button type="submit" id="consultation-submit-btn" class="w-full py-3 rounded-xl bg-gradient-to-r from-brand-600 to-rose-600 hover:from-brand-500 hover:to-rose-500 text-white font-bold text-sm shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2 transition-all">
<i data-lucide="send" class="w-4 h-4"></i>
ثبت درخواست استعلام و تماس کارشناس
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Tire Detail Modal -->
<div id="tire-modal" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-md hidden flex items-center justify-center p-4">
<div class="bg-slate-900 border border-slate-700 rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto p-6 sm:p-8 shadow-2xl relative">
<button onclick="closeTireModal()" class="absolute top-6 left-6 p-2 rounded-xl bg-slate-800 text-slate-400 hover:text-white transition-colors">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
<div id="modal-content" class="space-y-6">
<!-- Injected via JavaScript -->
</div>
</div>
</div>
<script>
// Tab switching in smart finder
function switchFinderTab(tab) {
const carTab = document.getElementById('finder-car-tab');
const sizeTab = document.getElementById('finder-size-tab');
const btnCar = document.getElementById('tab-btn-car');
const btnSize = document.getElementById('tab-btn-size');
if (tab === 'car') {
carTab.classList.remove('hidden');
sizeTab.classList.add('hidden');
btnCar.className = 'px-4 py-2 rounded-lg bg-brand-600 text-white transition-all';
btnSize.className = 'px-4 py-2 rounded-lg text-slate-400 hover:text-white transition-all';
} else {
carTab.classList.add('hidden');
sizeTab.classList.remove('hidden');
btnSize.className = 'px-4 py-2 rounded-lg bg-brand-600 text-white transition-all';
btnCar.className = 'px-4 py-2 rounded-lg text-slate-400 hover:text-white transition-all';
}
}
// Category pills filter
function filterCategory(cat) {
document.querySelectorAll('#quick-category-pills .cat-pill').forEach(btn => {
btn.className = 'cat-pill px-4 py-2 rounded-xl text-xs font-bold bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800 transition-all';
});
event.target.className = 'cat-pill active px-4 py-2 rounded-xl text-xs font-bold bg-brand-600 text-white border border-brand-500/50 shadow transition-all';
const cards = document.querySelectorAll('.tire-card');
let count = 0;
cards.forEach(card => {
const cardCat = card.getAttribute('data-category') || '';
if (!cat || cardCat.includes(cat)) {
card.classList.remove('hidden');
count++;
} else {
card.classList.add('hidden');
}
});
toggleEmptyState(count);
}
// Apply combined filters
function applyFilters() {
const carName = document.getElementById('filter-car-name').value.trim().toLowerCase();
const season = document.getElementById('filter-car-season').value;
const width = document.getElementById('filter-size-width').value;
const aspect = document.getElementById('filter-size-aspect').value;
const rim = document.getElementById('filter-size-rim').value;
const cards = document.querySelectorAll('.tire-card');
let count = 0;
cards.forEach(card => {
const name = card.getAttribute('data-name').toLowerCase();
const vehicles = card.getAttribute('data-vehicles').toLowerCase();
const cardRim = card.getAttribute('data-rim');
const cardSeason = card.getAttribute('data-season');
let match = true;
if (carName && !vehicles.includes(carName) && !name.includes(carName)) {
match = false;
}
if (season && cardSeason !== season) {
match = false;
}
if (rim && cardRim !== rim) {
match = false;
}
if (match) {
card.classList.remove('hidden');
count++;
} else {
card.classList.add('hidden');
}
});
toggleEmptyState(count);
document.getElementById('catalog').scrollIntoView({ behavior: 'smooth' });
}
function resetFilters() {
document.getElementById('filter-car-name').value = '';
document.getElementById('filter-car-season').value = '';
document.getElementById('filter-size-rim').value = '';
document.querySelectorAll('.tire-card').forEach(c => c.classList.remove('hidden'));
toggleEmptyState(1);
}
function toggleEmptyState(count) {
const empty = document.getElementById('no-tires-found');
if (count === 0) {
empty.classList.remove('hidden');
} else {
empty.classList.add('hidden');
}
}
// Toggle Compare item
function toggleCompare(tireId) {
if (CompareStore.add(tireId)) {
alert('تایر با موفقیت به لیست مقایسه اضافه شد.');
}
}
// Open detailed modal
async function openTireModal(id) {
const modal = document.getElementById('tire-modal');
const content = document.getElementById('modal-content');
content.innerHTML = '<div class="text-center py-12 text-slate-400"><i data-lucide="loader-2" class="w-8 h-8 animate-spin mx-auto mb-2"></i> در حال بارگذاری مشخصات...</div>';
lucide.createIcons();
modal.classList.remove('hidden');
try {
const res = await fetch(`api.php?action=get_tire&id=${id}`);
const data = await res.json();
if (data.status === 'success') {
const t = data.data;
content.innerHTML = `
<div class="flex flex-col sm:flex-row items-center gap-6 pb-6 border-b border-slate-800">
<img src="${t.image}" alt="${t.name}" class="w-40 h-40 object-contain">
<div class="text-right flex-1">
<span class="text-xs font-bold text-brand-400">${t.brand} - ساخت ${t.country}</span>
<h2 class="text-xl font-black text-white mt-1">${t.name}</h2>
<p class="text-xs text-slate-300 mt-2 leading-relaxed">${t.description}</p>
<div class="mt-3 text-lg font-black text-white">
${Number(t.price).toLocaleString('fa-IR')} <span class="text-xs text-brand-400 font-normal">تومان</span>
</div>
</div>
</div>
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3 text-xs">
<div class="p-3 rounded-xl bg-slate-950 border border-slate-800">
<span class="text-slate-400 block">سایز تایر</span>
<span class="font-bold text-white text-sm mt-0.5 block">${t.size_str}</span>
</div>
<div class="p-3 rounded-xl bg-slate-950 border border-slate-800">
<span class="text-slate-400 block">شاخص سرعت</span>
<span class="font-bold text-white text-sm mt-0.5 block">${t.speed_index}</span>
</div>
<div class="p-3 rounded-xl bg-slate-950 border border-slate-800">
<span class="text-slate-400 block">شاخص تحمل وزن</span>
<span class="font-bold text-white text-sm mt-0.5 block">${t.load_index}</span>
</div>
<div class="p-3 rounded-xl bg-slate-950 border border-slate-800">
<span class="text-slate-400 block">مدت گارانتی</span>
<span class="font-bold text-emerald-400 text-sm mt-0.5 block">${t.warranty_months} ماه شرکتی</span>
</div>
</div>
<div>
<h4 class="text-sm font-bold text-white mb-2">ویژگی‌های برجسته:</h4>
<ul class="space-y-1.5 text-xs text-slate-300">
${(t.features || []).map(f => `<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-emerald-400 shrink-0"></i> ${f}</li>`).join('')}
</ul>
</div>
<div>
<h4 class="text-sm font-bold text-white mb-2">خودروهای سازگار:</h4>
<div class="flex flex-wrap gap-1.5">
${(t.vehicles || []).map(v => `<span class="px-2.5 py-1 rounded-lg bg-slate-800 text-slate-300 text-xs font-medium border border-slate-700">${v}</span>`).join('')}
</div>
</div>
<div class="pt-4 border-t border-slate-800 flex items-center justify-between gap-4">
<button onclick="toggleCompare('${t.id}')" class="px-4 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-slate-200 text-xs font-bold flex items-center gap-2">
<i data-lucide="git-compare" class="w-4 h-4"></i> افزودن به مقایسه
</button>
<a href="tel:02188889900" class="px-6 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 text-white text-xs font-bold shadow-lg flex items-center gap-2">
<i data-lucide="phone" class="w-4 h-4"></i> سفارش و استعلام فوری
</a>
</div>
`;
lucide.createIcons();
}
} catch(e) {
content.innerHTML = '<div class="text-center py-8 text-rose-400">خطا در بارگذاری اطلاعات تایر.</div>';
}
}
function closeTireModal() {
document.getElementById('tire-modal').classList.add('hidden');
}
// Submit consultation form
async function submitConsultationForm(e) {
e.preventDefault();
const form = e.target;
const btn = document.getElementById('consultation-submit-btn');
const alertBox = document.getElementById('consultation-alert');
btn.disabled = true;
btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> در حال ثبت...';
lucide.createIcons();
const formData = new FormData(form);
formData.append('action', 'submit_consultation');
try {
const res = await fetch('api.php', {
method: 'POST',
body: formData
});
const data = await res.json();
alertBox.classList.remove('hidden');
if (data.status === 'success') {
alertBox.className = 'p-3 rounded-xl text-xs font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-500/30';
alertBox.innerText = data.message;
form.reset();
} else {
alertBox.className = 'p-3 rounded-xl text-xs font-bold bg-rose-500/20 text-rose-300 border border-rose-500/30';
alertBox.innerText = data.message;
}
} catch(err) {
alertBox.classList.remove('hidden');
alertBox.className = 'p-3 rounded-xl text-xs font-bold bg-rose-500/20 text-rose-300 border border-rose-500/30';
alertBox.innerText = 'خطای اتصال به سرور. لطفاً با شماره تلفن تماس بگیرید.';
} finally {
btn.disabled = false;
btn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i> ثبت درخواست استعلام و تماس کارشناس';
lucide.createIcons();
}
}
</script>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
run.sh
Executable
+19
View File
@@ -0,0 +1,19 @@
#!/usr/bin/env bash
PORT=8091
PID_FILE="/root/projects/78649634/gasemi_tier/.server.pid"
if [ -f "$PID_FILE" ]; then
OLD_PID=$(cat "$PID_FILE")
if kill -0 "$OLD_PID" 2>/dev/null; then
kill "$OLD_PID" 2>/dev/null || true
sleep 1
fi
rm -f "$PID_FILE"
fi
# Kill any stray process on this port
fuser -k ${PORT}/tcp 2>/dev/null || true
nohup php -S 0.0.0.0:${PORT} -t /root/projects/78649634/gasemi_tier > /root/projects/78649634/gasemi_tier/server.log 2>&1 &
echo $! > "$PID_FILE"
echo "Server started on port ${PORT} with PID $(cat "$PID_FILE")"