api/templates/main/usage.html.twig

{% extends 'base.html.twig' %}

{% block title %}راهنمای استفاده از سرویس نقشه می‌مپس | API نقشه رستری ایرانی{% endblock %}

{% block description %}راهنمای کامل استفاده از سرویس نقشه می‌مپس - نحوه استفاده با Leaflet، OpenLayers، موبایل و API نقشه رستری ایرانی. کدهای نمونه و مثال‌های عملی.{% endblock %}

{% block keywords %}راهنمای نقشه, API نقشه, Leaflet, OpenLayers, نقشه موبایل, کد نمونه نقشه, تایل سرور, نقشه رستری, نقشه آنلاین{% endblock %}

{% block og_title %}راهنمای استفاده از سرویس نقشه می‌مپس{% endblock %}

{% block og_description %}راهنمای کامل استفاده از سرویس نقشه می‌مپس - API نقشه رستری ایرانی با مثال‌های عملی{% endblock %}

{% block body %}
    <!-- Hero Section -->
    <section class="hero-section text-white">
        <div class="container">
            <div class="text-center">
                <h1 class="display-4 fw-bold mb-4">
                    راهنمای استفاده
                    <span class="d-block">از سرویس نقشه می‌مپس</span>
                </h1>
                <p class="lead opacity-90">
                    یاد بگیرید چگونه از سرویس نقشه می‌مپس در پروژه‌های خود استفاده کنید - API نقشه رستری ایرانی
                </p>
            </div>
        </div>
    </section>

    <!-- Table of Contents -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h2 class="h3 fw-bold mb-4">فهرست مطالب</h2>
                    <div class="row g-3">
                        <div class="col-lg-4 col-md-6">
                            <a href="#introduction" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-primary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">1</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">معرفی سرویس</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#leaflet" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">2</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">استفاده با Leaflet</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#openlayers" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-warning text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">3</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">استفاده با OpenLayers</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#retina" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-info text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">4</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">صفحه‌نمایش رتینا</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#api-reference" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">5</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">مرجع API</h6>
                                    </div>
                                </div>
                            </a>
                        </div>

                        <div class="col-lg-4 col-md-6">
                            <a href="#mobile" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-dark text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">6</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">موبایل (اندروید/iOS)</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#faq" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-secondary text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">7</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">سوالات متداول</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <a href="#dark" class="text-decoration-none">
                                <div class="card h-100 border-0 shadow-sm hover-card">
                                    <div class="card-body text-center p-3">
                                        <div class="bg-dark text-white rounded-circle d-inline-flex align-items-center justify-content-center mb-2" style="width: 40px; height: 40px;">
                                            <span class="fw-bold">8</span>
                                        </div>
                                        <h6 class="card-title mb-0 text-dark">حالت تاریک (Dark Mode)</h6>
                                    </div>
                                </div>
                            </a>
                        </div>
                </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section id="introduction" class="py-5">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="text-center mb-5">
                        <h2 class="display-5 fw-bold text-gradient mb-3">معرفی سرویس می‌مپس</h2>
                        <p class="lead text-muted">
                            سرویس نقشه می‌مپس یک سرویس رایگان برای ارائه نقشه‌های رستری با کیفیت بالا است
            </p>
        </div>
        
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="h4 fw-bold mb-4">ویژگی‌های کلیدی</h3>
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-check"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">رایگان و بدون محدودیت</h5>
                                            <p class="text-muted mb-0">استفاده کاملاً رایگان بدون نیاز به ثبت‌نام یا کلید API</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-star"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">کیفیت بالا</h5>
                                            <p class="text-muted mb-0">نقشه‌های با کیفیت بالا و جزئیات دقیق</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-cogs"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">سازگاری کامل</h5>
                                            <p class="text-muted mb-0">سازگار با تمام کتابخانه‌های نقشه موجود</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start">
                                        <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px; flex-shrink: 0;">
                                            <i class="fas fa-tachometer-alt"></i>
                                        </div>
                                        <div>
                                            <h5 class="fw-bold mb-2">سرعت بالا</h5>
                                            <p class="text-muted mb-0">بهینه‌سازی شده برای سرعت بارگذاری بالا</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Leaflet Section -->
    <section id="leaflet" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">استفاده با Leaflet</h2>
                <p class="lead text-muted">
                    نحوه استفاده از سرویس می‌مپس با کتابخانه Leaflet
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">کد کامل HTML</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /&gt;
    &lt;script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="map" style="height: 400px;"&gt;&lt;/div&gt;
    &lt;script&gt;
        var map = L.map('map').setView([32.4279, 53.6880], 6);
        
        L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
            attribution: '© می‌مپس',
            maxZoom: 18
        }).addTo(map);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">تنظیمات پیشرفته</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// تنظیمات پیشرفته
L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
    attribution: '© می‌مپس',
    maxZoom: 18,
    minZoom: 1,
    tileSize: 256,
    zoomOffset: 0,
    detectRetina: true
}).addTo(map);

// برای صفحه‌نمایش‌های رتینا (تشخیص خودکار)
L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}@2x.png', {
    attribution: '© می‌مپس',
    maxZoom: 18,
    detectRetina: true
}).addTo(map);

// اضافه کردن مارکر
L.marker([35.6892, 51.3890])
    .bindPopup('تهران')
    .addTo(map);</code></pre>
                        </div>
                </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Retina Display Section -->
    <section id="retina" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">صفحه‌نمایش رتینا</h2>
                <p class="lead text-muted">
                    بهینه‌سازی برای صفحه‌نمایش‌های با تراکم پیکسل بالا
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">روش اول: استفاده از ret</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text text-muted mb-3">
                                با استفاده از <code>ret</code> به جای <code>hot</code>، کاشی‌های 512 پیکسلی دریافت می‌کنید که برای صفحه‌نمایش‌های رتینا بهینه هستند.
                            </p>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// برای صفحه‌نمایش‌های رتینا
L.tileLayer('https://memaps.ir/ret/{z}/{x}/{y}.png', {
    attribution: '© می‌مپس',
    maxZoom: 18,
    tileSize: 512,
    zoomOffset: -1
}).addTo(map);</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">روش دوم: تشخیص خودکار با @2x</h5>
                        </div>
                        <div class="card-body">
                            <p class="card-text text-muted mb-3">
                                سرویس می‌مپس به صورت هوشمند تشخیص می‌دهد و در صورت نیاز تایل‌های 512 پیکسلی ارسال می‌کند.
                            </p>
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// تشخیص خودکار رتینا
L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}@2x.png', {
    attribution: '© می‌مپس',
    maxZoom: 18,
    detectRetina: true
}).addTo(map);</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row g-4 mt-3">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-warning text-white">
                            <h5 class="mb-0">مقایسه کیفیت</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>نوع</th>
                                            <th>اندازه تایل</th>
                                            <th>کیفیت</th>
                                            <th>کاربرد</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>hot</code></td>
                                            <td>256px</td>
                                            <td>استاندارد</td>
                                            <td>عمومی</td>
                                        </tr>
                                        <tr>
                                            <td><code>ret</code></td>
                                            <td>512px</td>
                                            <td>عالی</td>
                                            <td>رتینا</td>
                                        </tr>
                                        <tr>
                                            <td><code>hot@2x</code></td>
                                            <td>512px</td>
                                            <td>عالی</td>
                                            <td>تشخیص خودکار</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">مثال‌های عملی</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// OpenLayers با تشخیص خودکار
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/hot/{z}/{x}/{y}@2x.png',
        crossOrigin: 'anonymous'
    })
});

// Mapbox GL JS
map.addSource('memaps', {
    type: 'raster',
    tiles: ['https://memaps.ir/hot/{z}/{x}/{y}@2x.png'],
    tileSize: 256
});</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <h5 class="fw-bold mb-3">نکات مهم:</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="fw-bold text-primary">روش ret:</h6>
                                    <ul class="list-unstyled">
                                        <li class="mb-2">✅ <strong>tileSize: 512</strong> - اندازه تایل را 512 پیکسل تنظیم کنید</li>
                                        <li class="mb-2">✅ <strong>zoomOffset: -1</strong> - سطح زوم را یک واحد کاهش دهید</li>
                                        <li class="mb-2">✅ <strong>maxZoom: 18</strong> - حداکثر سطح زوم</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="fw-bold text-success">روش @2x:</h6>
                                    <ul class="list-unstyled">
                                        <li class="mb-2">✅ <strong>detectRetina: true</strong> - تشخیص خودکار رتینا</li>
                                        <li class="mb-2">✅ <strong>بدون تنظیمات اضافی</strong> - سرویس خودکار تشخیص می‌دهد</li>
                                        <li class="mb-2">✅ <strong>سازگاری بهتر</strong> - با تمام کتابخانه‌ها</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Dark Mode Section -->
    <section id="dark" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">حالت تاریک (Dark Mode)</h2>
                <p class="lead text-muted">
                    لایه‌های تاریک برای محیط‌های کم‌نور با دو کیفیت استاندارد و رتینا
                </p>
            </div>
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-dark text-white">
                            <h5 class="mb-0">Leaflet – استفاده از لایه‌های تاریک</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// ایجاد نقشه
const map = L.map('map').setView([32.4279, 53.6880], 6);

// لایه‌های روشن
const hot = L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
  maxZoom: 18
});
const ret = L.tileLayer('https://memaps.ir/ret/{z}/{x}/{y}.png', {
  maxZoom: 18,
  tileSize: 512,
  zoomOffset: -1
});

// لایه‌های تاریک
const dark = L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {
  maxZoom: 18
});
const darkRetina = L.tileLayer('https://memaps.ir/dark-retina/{z}/{x}/{y}.png', {
  maxZoom: 18,
  tileSize: 512,
  zoomOffset: -1
});

// لایه پیش‌فرض
hot.addTo(map);

// کنترل سوییچ لایه‌ها
L.control.layers(
  {
    'روشن (استاندارد)': hot,
    'روشن (رتینا)': ret,
    'تاریک (استاندارد)': dark,
    'تاریک (رتینا)': darkRetina
  },
  null,
  { collapsed: false }
).addTo(map);</code></pre>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-secondary text-white">
                            <h5 class="mb-0">OpenLayers – استفاده از لایه تاریک</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// لایه تاریک استاندارد
const darkLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://memaps.ir/dark/{z}/{x}/{y}.png',
    crossOrigin: 'anonymous'
  })
});

// لایه تاریک رتینا
const darkRetinaLayer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'https://memaps.ir/dark-retina/{z}/{x}/{y}.png',
    crossOrigin: 'anonymous',
    tileGrid: ol.tilegrid.createXYZ({
      maxZoom: 18,
      tileSize: 512
    })
  })
});

const map = new ol.Map({
  target: 'map',
  layers: [darkLayer], // یا darkRetinaLayer
  view: new ol.View({
    center: ol.proj.fromLonLat([53.6880, 32.4279]),
    zoom: 6
  })
});</code></pre>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-4 mt-3">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <h5 class="fw-bold mb-3">URLهای حالت تاریک</h5>
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                        <strong>تاریک (استاندارد):</strong><br>
                                        <code>https://memaps.ir/dark/{z}/{x}/{y}.png</code>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                        <strong>تاریک (رتینا):</strong><br>
                                        <code>https://memaps.ir/dark-retina/{z}/{x}/{y}.png</code>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- OpenLayers Section -->
    <section id="openlayers" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">استفاده با OpenLayers</h2>
                <p class="lead text-muted">
                    نحوه استفاده از سرویس می‌مپس با کتابخانه OpenLayers
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-warning text-white">
                            <h5 class="mb-0">کد کامل HTML</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css"&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="map" style="height: 400px;"&gt;&lt;/div&gt;
    &lt;script&gt;
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://memaps.ir/hot/{z}/{x}/{y}.png'
            })
        });
        
        var map = new ol.Map({
            target: 'map',
            layers: [layer],
            view: new ol.View({
                center: ol.proj.fromLonLat([53.6880, 32.4279]),
                zoom: 6
            })
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-6">
                    <div class="card h-100 border-0 shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h5 class="mb-0">تنظیمات پیشرفته</h5>
                        </div>
                        <div class="card-body">
                            <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// تنظیمات پیشرفته
var layer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/hot/{z}/{x}/{y}.png',
        crossOrigin: 'anonymous',
        tileGrid: ol.tilegrid.createXYZ({
            maxZoom: 18,
            minZoom: 1
        })
    })
});

// برای صفحه‌نمایش‌های رتینا
var retinaLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/ret/{z}/{x}/{y}.png',
        crossOrigin: 'anonymous',
        tileGrid: ol.tilegrid.createXYZ({
            maxZoom: 18,
            minZoom: 1,
            tileSize: 512
        })
    })
});

// تشخیص خودکار رتینا
var autoRetinaLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'https://memaps.ir/hot/{z}/{x}/{y}@2x.png',
        crossOrigin: 'anonymous',
        tileGrid: ol.tilegrid.createXYZ({
            maxZoom: 18,
            minZoom: 1
        })
    })
});

// اضافه کردن کنترل‌ها
var map = new ol.Map({
    target: 'map',
    layers: [layer],
    controls: ol.control.defaults().extend([
        new ol.control.FullScreen(),
        new ol.control.ScaleLine()
    ]),
    view: new ol.View({
        center: ol.proj.fromLonLat([53.6880, 32.4279]),
        zoom: 6,
        maxZoom: 18,
        minZoom: 1
    })
});</code></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Mobile Development Section -->
    <section id="mobile" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">توسعه موبایل</h2>
                <p class="lead text-muted">
                    نحوه استفاده از سرویس می‌مپس در اپلیکیشن‌های اندروید و iOS
                </p>
            </div>
            
            <!-- Android Section -->
            <div class="row mb-5">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h4 class="mb-0">📱 اندروید (Android)</h4>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با MapView</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// در layout XML
&lt;com.google.android.gms.maps.MapView
    android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" /&gt;

// در Activity
MapView mapView = findViewById(R.id.mapView);
mapView.onCreate(savedInstanceState);

mapView.getMapAsync(googleMap -&gt; {
    // تنظیم نوع نقشه به None
    googleMap.setMapType(GoogleMap.MAP_TYPE_NONE);
    
    // اضافه کردن TileOverlay
    TileProvider tileProvider = new UrlTileProvider(256, 256) {
        @Override
        public URL getTileUrl(int x, int y, int zoom) {
            String url = String.format(
                "https://memaps.ir/hot/%d/%d/%d.png",
                zoom, x, y
            );
            try {
                return new URL(url);
            } catch (MalformedURLException e) {
                return null;
            }
        }
    };
    
                googleMap.addTileOverlay(new TileOverlayOptions()
                    .tileProvider(tileProvider));
            });</code></pre>
                                    <h6 class="fw-bold mt-3">حالت تاریک</h6>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// تغییر URL به لایه تاریک (استاندارد)
String url = String.format(
    "https://memaps.ir/dark/%d/%d/%d.png",
    zoom, x, y
);

// برای رتینا تاریک (512px)
String url = String.format(
    "https://memaps.ir/dark-retina/%d/%d/%d.png",
    zoom, x, y
);</code></pre>
                                </div>
                                
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با WebView</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// در layout XML
&lt;WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" /&gt;

// در Activity
WebView webView = findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);

String html = "&lt;!DOCTYPE html&gt;" +
    "&lt;html&gt;&lt;head&gt;" +
    "&lt;link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' /&gt;" +
    "&lt;script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'&gt;&lt;/script&gt;" +
    "&lt;/head&gt;&lt;body&gt;" +
    "&lt;div id='map' style='height: 100vh;'&gt;&lt;/div&gt;" +
    "&lt;script&gt;" +
    "var map = L.map('map').setView([32.4279, 53.6880], 6);" +
    "L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {" +
    "attribution: '© می‌مپس'" +
    "}).addTo(map);" +
    "&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;";

webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);

// حالت تاریک با WebView
String htmlDark = "&lt;!DOCTYPE html&gt;" +
    "&lt;html&gt;&lt;head&gt;" +
    "&lt;link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' /&gt;" +
    "&lt;script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'&gt;&lt;/script&gt;" +
    "&lt;/head&gt;&lt;body&gt;" +
    "&lt;div id='map' style='height: 100vh;'&gt;&lt;/div&gt;" +
    "&lt;script&gt;" +
    "var map = L.map('map').setView([32.4279, 53.6880], 6);" +
    "L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {" +
    "attribution: '© می‌مپس'" +
    "}).addTo(map);" +
    "&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;";
webView.loadDataWithBaseURL(null, htmlDark, "text/html", "UTF-8", null);</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- iOS Section -->
            <div class="row">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-primary text-white">
                            <h4 class="mb-0">🍎 iOS</h4>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با MapKit</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>import MapKit

class MapViewController: UIViewController {
    @IBOutlet weak var mapView: MKMapView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // تنظیم مرکز نقشه
        let center = CLLocationCoordinate2D(
            latitude: 32.4279,
            longitude: 53.6880
        )
        let region = MKCoordinateRegion(
            center: center,
            span: MKCoordinateSpan(
                latitudeDelta: 10,
                longitudeDelta: 10
            )
        )
        mapView.setRegion(region, animated: false)
        
        // اضافه کردن TileOverlay
        let tileOverlay = CustomTileOverlay()
        mapView.addOverlay(tileOverlay, level: .aboveLabels)
    }
}

class CustomTileOverlay: MKTileOverlay {
    override init(urlTemplate: String?) {
        // حالت تاریک استاندارد
        super.init(urlTemplate: "https://memaps.ir/dark/{z}/{x}/{y}.png")
    }
}

// حالت تاریک رتینا
class CustomTileOverlayRetina: MKTileOverlay {
    override init(urlTemplate: String?) {
        super.init(urlTemplate: "https://memaps.ir/dark-retina/{z}/{x}/{y}.png")
    }
}</code></pre>
                                </div>
                                
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با WKWebView</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>import WebKit

class WebMapViewController: UIViewController {
    @IBOutlet weak var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let html = """
        &lt;!DOCTYPE html&gt;
        &lt;html&gt;
        &lt;head&gt;
            &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /&gt;
            &lt;script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;div id="map" style="height: 100vh;"&gt;&lt;/div&gt;
            &lt;script&gt;
                var map = L.map('map').setView([32.4279, 53.6880], 6);
                L.tileLayer('https://memaps.ir/hot/{z}/{x}/{y}.png', {
                    attribution: '© می‌مپس'
                }).addTo(map);
            &lt;/script&gt;
        &lt;/body&gt;
        &lt;/html&gt;
        """
        
        webView.loadHTMLString(html, baseURL: nil)
    }
}</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Flutter Section -->
            <div class="row mb-5">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-info text-white">
                            <h4 class="mb-0">🦋 فلاتر (Flutter)</h4>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با flutter_map</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// pubspec.yaml
dependencies:
  flutter_map: ^6.1.0
  latlong2: ^0.9.0

// در widget
import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('نقشه می‌مپس')),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(32.4279, 53.6880),
          zoom: 6.0,
        ),
        children: [
          TileLayer(
            urlTemplate: 'https://memaps.ir/dark/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
            attribution: '© می‌مپس',
          ),
        ],
      ),
    );
  }
}</code></pre>
                                </div>
                                
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با WebView</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// pubspec.yaml
dependencies:
  webview_flutter: ^4.4.2

// در widget
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebMapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final html = '''
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /&gt;
        &lt;script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="map" style="height: 100vh;"&gt;&lt;/div&gt;
        &lt;script&gt;
            var map = L.map('map').setView([32.4279, 53.6880], 6);
            L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {
                attribution: '© می‌مپس'
            }).addTo(map);
        &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    ''';

    return Scaffold(
      appBar: AppBar(title: Text('نقشه وب')),
      body: WebView(
        initialData: WebViewData(
          data: html,
          mimeType: 'text/html',
          encoding: 'utf-8',
        ),
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- React Native Section -->
            <div class="row mb-5">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-warning text-dark">
                            <h4 class="mb-0">⚛️ React Native</h4>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با react-native-maps</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// package.json
npm install react-native-maps

// در component
import React from 'react';
import { View, StyleSheet } from 'react-native';
import MapView, { UrlTile } from 'react-native-maps';

const MapScreen = () => {
  return (
    &lt;View style={styles.container}&gt;
      &lt;MapView
        style={styles.map}
        initialRegion={&lbrace;&lbrace;
          latitude: 32.4279,
          longitude: 53.6880,
          latitudeDelta: 10,
          longitudeDelta: 10,
        &rbrace;&rbrace;}
        mapType="none"
      &gt;
        &lt;UrlTile
          urlTemplate="https://memaps.ir/dark/{z}/{x}/{y}.png"
        /&gt;
      &lt;/MapView&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
});

export default MapScreen;</code></pre>
                                </div>
                                
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با WebView</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// package.json
npm install react-native-webview

// در component
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

const WebMapScreen = () => {
  const html = `
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" /&gt;
        &lt;script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="map" style="height: 100vh;"&gt;&lt;/div&gt;
        &lt;script&gt;
            var map = L.map('map').setView([32.4279, 53.6880], 6);
            L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {
                attribution: '© می‌مپس'
            }).addTo(map);
        &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  `;

  return (
    &lt;View style={styles.container}&gt;
      &lt;WebView
        source={&lbrace;&lbrace; html &rbrace;&rbrace;}
        style={styles.webview}
        javaScriptEnabled={true}
      /&gt;
    &lt;/View&gt;
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

export default WebMapScreen;</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Vue.js Section -->
            <div class="row mb-5">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-success text-white">
                            <h4 class="mb-0">💚 Vue.js</h4>
                        </div>
                        <div class="card-body">
                            <div class="row g-4">
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با Leaflet</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// package.json
npm install leaflet vue-leaflet

// در component
&lt;template&gt;
  &lt;div id="map" style="height: 400px;"&gt;&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

export default {
  name: 'MapComponent',
  mounted() {
    // ایجاد نقشه
    this.map = L.map('map').setView([32.4279, 53.6880], 6);
    
    // اضافه کردن لایه نقشه
    L.tileLayer('https://memaps.ir/dark/{z}/{x}/{y}.png', {
      attribution: '© می‌مپس',
      maxZoom: 18,
    }).addTo(this.map);
  },
  beforeUnmount() {
    if (this.map) {
      this.map.remove();
    }
  },
};
&lt;/script&gt;

&lt;style scoped&gt;
#map {
  width: 100%;
  border-radius: 8px;
}
&lt;/style&gt;</code></pre>
                                </div>
                                
                                <div class="col-lg-6">
                                    <h5 class="fw-bold mb-3">استفاده با OpenLayers</h5>
                                    <pre class="bg-dark text-light p-3 rounded text-end" dir="ltr"><code>// package.json
npm install ol

// در component
&lt;template&gt;
  &lt;div id="map" style="height: 400px;"&gt;&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

export default {
  name: 'OpenLayersMap',
  mounted() {
    // ایجاد نقشه
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://memaps.ir/dark/{z}/{x}/{y}.png',
            attributions: '© می‌مپس',
          }),
        }),
      ],
      view: new View({
        center: fromLonLat([53.6880, 32.4279]),
        zoom: 6,
        maxZoom: 18,
      }),
    });
  },
  beforeUnmount() {
    if (this.map) {
      this.map.setTarget(undefined);
    }
  },
};
&lt;/script&gt;

&lt;style scoped&gt;
#map {
  width: 100%;
  border-radius: 8px;
}
&lt;/style&gt;</code></pre>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Tips Section -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body">
                            <h5 class="fw-bold mb-3">نکات مهم برای توسعه موبایل و وب:</h5>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li class="mb-2">✅ <strong>اندروید:</strong> نیاز به Google Play Services</li>
                                        <li class="mb-2">✅ <strong>iOS:</strong> نیاز به MapKit framework</li>
                                        <li class="mb-2">✅ <strong>فلاتر:</strong> استفاده از flutter_map یا WebView</li>
                                        <li class="mb-2">✅ <strong>React Native:</strong> react-native-maps یا WebView</li>
                                        <li class="mb-2">✅ <strong>Vue.js:</strong> Leaflet یا OpenLayers</li>
                                        <li class="mb-2">✅ <strong>WebView:</strong> ساده‌ترین روش برای موبایل</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <ul class="list-unstyled">
                                        <li class="mb-2">✅ <strong>کش:</strong> برای بهبود عملکرد از کش محلی استفاده کنید</li>
                                        <li class="mb-2">✅ <strong>اینترنت:</strong> بررسی اتصال اینترنت قبل از بارگذاری</li>
                                        <li class="mb-2">✅ <strong>خطا:</strong> مدیریت خطاهای شبکه</li>
                                        <li class="mb-2">✅ <strong>حافظه:</strong> مدیریت حافظه برای نقشه‌های بزرگ</li>
                                        <li class="mb-2">✅ <strong>بهینه‌سازی:</strong> تنظیم سطح زوم مناسب</li>
                                        <li class="mb-2">✅ <strong>Responsive:</strong> طراحی واکنش‌گرا برای همه سایزها</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- API Reference Section -->
    <section id="api-reference" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">مرجع API</h2>
                <p class="lead text-muted">
                    اطلاعات کامل درباره API سرویس می‌مپس
                </p>
            </div>
            
            <div class="row g-4">
                <div class="col-lg-8 mx-auto">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body p-4">
                            <h3 class="h4 fw-bold mb-4">URL Templates</h3>
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                        <strong>استاندارد:</strong><br>
                                        <code>https://memaps.ir/hot/{z}/{x}/{y}.png</code>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                        <strong>رتینا:</strong><br>
                                        <code>https://memaps.ir/ret/{z}/{x}/{y}.png</code>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                        <strong>تشخیص خودکار:</strong><br>
                                        <code>https://memaps.ir/hot/{z}/{x}/{y}@2x.png</code>
                                    </div>
                                </div>
                            </div>
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                        <strong>تاریک (استاندارد):</strong><br>
                                        <code>https://memaps.ir/dark/{z}/{x}/{y}.png</code>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="bg-dark text-light p-3 rounded text-end" dir="ltr">
                                        <strong>تاریک (رتینا):</strong><br>
                                        <code>https://memaps.ir/dark-retina/{z}/{x}/{y}.png</code>
                                    </div>
                                </div>
                            </div>
                            
                            <h4 class="h5 fw-bold mb-3">پارامترها</h4>
                            <div class="table-responsive">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>پارامتر</th>
                                            <th>توضیح</th>
                                            <th>محدوده</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>{z}</code></td>
                                            <td>سطح زوم</td>
                                            <td>1 تا 20</td>
                                        </tr>
                                        <tr>
                                            <td><code>{x}</code></td>
                                            <td>مختصات X تایل</td>
                                            <td>0 تا 2^z-1</td>
                                        </tr>
                                        <tr>
                                            <td><code>{y}</code></td>
                                            <td>مختصات Y تایل</td>
                                            <td>0 تا 2^z-1</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <h4 class="h5 fw-bold mb-3 mt-4">قابلیت‌ها</h4>
                            <ul class="list-unstyled">
                                <li class="mb-2">✅ استفاده رایگان و بدون محدودیت</li>
                                <li class="mb-2">✅ بدون نیاز به کلید API</li>
                                <li class="mb-2">✅ پشتیبانی از CORS</li>
                                <li class="mb-2">✅ بهینه‌سازی شده برای سرعت بالا</li>
                                <li class="mb-2">✅ تشخیص خودکار صفحه‌نمایش‌های رتینا</li>
                                <li class="mb-2">✅ پشتیبانی از تایل‌های 512 پیکسلی</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- FAQ Section -->
    <section id="faq" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold text-gradient mb-3">سوالات متداول</h2>
                <p class="lead text-muted">
                    پاسخ سوالات رایج درباره سرویس می‌مپس
                </p>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item border-0 shadow-sm mb-3">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    آیا استفاده از سرویس رایگان است؟
                                </button>
                            </h2>
                            <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    بله، استفاده از سرویس می‌مپس کاملاً رایگان است و هیچ محدودیتی ندارد.
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item border-0 shadow-sm mb-3">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    آیا نیاز به ثبت‌نام دارم؟
                                </button>
                            </h2>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    خیر، هیچ نیازی به ثبت‌نام یا دریافت کلید API ندارید.
                                </div>
                            </div>
                        </div>
                        
                        <div class="accordion-item border-0 shadow-sm mb-3">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    با چه کتابخانه‌هایی سازگار است؟
                    </button>
                            </h2>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    سرویس با تمام کتابخانه‌های نقشه مانند Leaflet، OpenLayers، Mapbox GL JS و غیره سازگار است.
                                </div>
                </div>
            </div>
            
                        <div class="accordion-item border-0 shadow-sm mb-3">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                    حداکثر سطح زوم چقدر است؟
                    </button>
                            </h2>
                            <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body">
                                    حداکثر سطح زوم 20 است که برای اکثر کاربردها کافی است.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block stylesheets %}
<style>
    .hover-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
    }
    
    .accordion-button:not(.collapsed) {
        background-color: #f8f9fa;
        color: #0d6efd;
    }
    
    .accordion-button:focus {
        box-shadow: none;
        border-color: rgba(0,0,0,0.125);
    }
</style>
{% endblock %}