فراغیب

الگو:لوکیشن: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
خط ۱: خط ۱:
<html>


<div style="width: 100%; max-width: 1000px; font-family: Tahoma, sans-serif;">
<html lang="fa" dir="rtl">
  <!-- نقشه اصلی -->
<head>
  <div style="position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden;">
    <meta charset="UTF-8">
     <div id="osm-map-container">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <iframe id="dynamic-map" width="100%" height="250" style="border: none; display: block;" loading="lazy"></iframe>
    <title>مسیریابی و اشتراک‌گذاری لوکیشن</title>
    <style>
        :root {
            --primary-bg: #ffffff;
            --btn-route: #e3f2fd; --text-route: #1976d2;
            --btn-call: #e8f5e9; --text-call: #388e3c;
            --btn-share: #fff3e0; --text-share: #f57c00;
        }
        .location-container { width: 100%; max-width: 600px; margin: 0 auto; font-family: Tahoma, sans-serif; }
        .map-card { position: relative; border: 1px solid #e0e0e0; border-radius: 16px; overflow: hidden; background: #eee; height: 280px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
        .map-frame { width: 100%; height: 100%; border: none; }
        .map-overlay-link { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
       
        .map-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
        .btn { padding: 12px 5px; text-align: center; border-radius: 10px; font-weight: 600; font-size: 13px; text-decoration: none; border: none; cursor: pointer; transition: transform 0.1s, opacity 0.2s; }
        .btn:active { transform: scale(0.98); }
        .btn-route { background: var(--btn-route); color: var(--text-route); }
        .btn-call { background: var(--btn-call); color: var(--text-call); }
        .btn-share { background: var(--btn-share); color: var(--text-share); }
 
        /* Modal Styles */
        .share-sheet { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); align-items: flex-end; justify-content: center; }
        .share-panel { width: 100%; max-width: 450px; background: #fff; border-radius: 20px 20px 0 0; padding: 20px; animation: slideUp 0.3s ease-out; }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        .share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px; }
        .share-item { text-decoration: none; text-align: center; color: #333; }
        .share-icon { width: 50px; height: 50px; margin: 0 auto 8px; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
        .share-icon img { width: 100%; height: 100%; object-fit: cover; }
        .share-label { font-size: 12px; }
    </style>
</head>
<body>
 
<div class="location-container">
     <div class="map-card">
        <a id="neshanOverlay" class="map-overlay-link" target="_blank" rel="noopener noreferrer" aria-label="باز کردن در نقشه"></a>
        <iframe id="mapFrame" class="map-frame" loading="lazy" src=""></iframe>
    </div>
 
    <div class="map-actions">
        <a id="routeBtn" class="btn btn-route" target="_blank" rel="noopener noreferrer">مسیریابی</a>
        <a id="callBtn" class="btn btn-call">تماس</a>
        <button type="button" class="btn btn-share" onclick="openShareSheet()">اشتراک‌گذاری</button>
    </div>
</div>
 
<div id="shareSheet" class="share-sheet" onclick="if(event.target===this)closeShareSheet()">
     <div class="share-panel">
        <div style="text-align: center; font-weight: bold; margin-bottom: 10px;">اشتراک‌گذاری موقعیت</div>
        <div class="share-grid">
            <button class="share-item" onclick="copyLink()">
                <div class="share-icon"><img src="https://dl.faraghaib.ir/m/100/link.png" alt="کپی"></div><div class="share-label">کپی لینک</div>
            </button>
            <a id="shareTelegram" class="share-item" target="_blank"><div class="share-icon"><img src="https://dl.faraghaib.ir/m/100/telegram2.png" alt="تلگرام"></div><div class="share-label">تلگرام</div></a>
            <a id="shareWhatsApp" class="share-item" target="_blank"><div class="share-icon"><img src="https://dl.faraghaib.ir/m/100/whatsapp2.png" alt="واتساپ"></div><div class="share-label">واتساپ</div></a>
            <a id="shareEitaa" class="share-item" target="_blank"><div class="share-icon"><img src="https://dl.faraghaib.ir/m/100/ita.png" alt="ایتا"></div><div class="share-label">ایتا</div></a>
            <a id="shareBale" class="share-item" target="_blank"><div class="share-icon"><img src="https://dl.faraghaib.ir/m/100/bale.png" alt="بله"></div><div class="share-label">بله</div></a>
            <a id="shareRobika" class="share-item" target="_blank"><div class="share-icon"><img src="https://dl.faraghaib.ir/m/100/robika.png" alt="روبیکا"></div><div class="share-label">روبیکا</div></a>
        </div>
        <button onclick="closeShareSheet()" style="width:100%; margin-top:20px; padding:10px; border:none; background:#eee; border-radius:8px;">بستن</button>
    </div>
</div>
</div>


<script>
<script>
    // --- تنظیمات ساده برای شما ---
     const MAP_LAT = 35.51553379708153;
     const lat = 35.56192149566451; // عرض جغرافیایی
     const MAP_LNG = 51.1508280605789;
     const lon = 51.16101758605524; // طول جغرافیایی
    const CONTACT_PHONE = "09120000000";
     const zoomLevel = 0.005;        // هرچه عدد کوچک‌تر باشد، زوم بیشتر است (مثلاً 0.002 برای زوم خیلی نزدیک)
    // لینک بلد با فرمت دقیق برای باز شدن مستقیم در اپلیکیشن
     const BALAD_URL = `https://balad.ir/p/${MAP_LAT},${MAP_LNG}`;


     // --- محاسبه خودکار محدوده (bbox) ---
     function buildOsmUrl(lat, lng) {
    const minLon = lon - zoomLevel;
        const delta = 0.003;
    const minLat = lat - zoomLevel;
        return `https://www.openstreetmap.org/export/embed.html?bbox=${lng-delta}%2C${lat-delta}%2C${lng+delta}%2C${lat+delta}&layer=mapnik&marker=${lat}%2C${lng}`;
    const maxLon = lon + zoomLevel;
     }
     const maxLat = lat + zoomLevel;


     // --- ساخت آدرس نهایی ---
     function init() {
    const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${minLon},${minLat},${maxLon},${maxLat}&layer=mapnik&marker=${lat},${lon}`;
        document.getElementById("mapFrame").src = buildOsmUrl(MAP_LAT, MAP_LNG);
   
        document.getElementById("neshanOverlay").href = BALAD_URL;
    // --- اعمال به iframe ---
        document.getElementById("routeBtn").href = BALAD_URL;
    document.getElementById('dynamic-map').src = mapUrl;
        document.getElementById("callBtn").href = "tel:" + CONTACT_PHONE;
</script>
    }
 
  </div>


    function openShareSheet() {
        const url = window.location.href;
        const text = "لوکیشن ما در نقشه";
        document.getElementById("shareSheet").style.display = "flex";
       
        document.getElementById("shareTelegram").href = `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
        document.getElementById("shareWhatsApp").href = `https://wa.me/?text=${encodeURIComponent(text + " " + url)}`;
        document.getElementById("shareEitaa").href = `https://eitaa.com/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
        document.getElementById("shareBale").href = `https://ble.ir/share?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
        document.getElementById("shareRobika").href = `https://rubika.ir/`; // روبیکا لینک مستقیم اشتراک‌گذاری عمومی ساده ندارد
    }


<!--     35.56192388976645,51.16100266694792    --->
     function closeShareSheet() { document.getElementById("shareSheet").style.display = "none"; }
  <!-- دکمه‌های زیر نقشه -->
  <div style="display: flex; gap: 10px; margin-top: 15px;">
    <a href="https://neshan.org/maps/places/35.56192388976645" target="_blank" style="flex: 1; padding: 12px; text-align: center; background: #e3f2fd; color: #1976d2; border-radius: 8px; text-decoration: none; font-weight: bold; border: 1px solid #bbdefb;">
      مسیریابی
    </a>
    <a href="tel:09304963449" style="flex: 1; padding: 12px; text-align: center; background: #e8f5e9; color: #388e3c; border-radius: 8px; text-decoration: none; font-weight: bold; border: 1px solid #c8e6c9;">
      تماس
    </a>
    <button onclick="navigator.clipboard.writeText(window.location.href); alert('لینک کپی شد!');" style="flex: 1; padding: 12px; text-align: center; background: #fff3e0; color: #f57c00; border-radius: 8px; text-decoration: none; font-weight: bold; border: 1px solid #ffe0b2; cursor: pointer;">
      اشتراک‌گذاری
    </button>
  </div>
</div>


    async function copyLink() {
        await navigator.clipboard.writeText(window.location.href);
        alert("لینک کپی شد");
        closeShareSheet();
    }


    init();
</script>
</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:لوکیشن»