gasemi_tier/calculator.php

<?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'; ?>