لوکیشن - فراغیب

→ تفاوت با ویرایش قدیمی‌تر

دیداریویکی‌متن

نسخهٔ کنونی تا ‏۱۷ اوت ۲۰۲۶، ساعت ۱۳:۲۸

مسیریابی تماس

@@ خط ۱: / خط ۱: @@
+<html>
-<html lang="fa" dir="rtl">
+<html>
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <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 - Centered */
+<div style="width: 100%; max-width: 1000px; font-family: Tahoma, sans-serif;">
-        .share-sheet { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; padding: 15px; }
+  <!-- نقشه اصلی -->
-        .share-panel { width: 100%; max-width: 350px; background: #fff; border-radius: 20px; padding: 25px; animation: fadeIn 0.3s; }
+  <div style="position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden;">
-        @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+    <iframe
+      width="100%"
-        /* Grid 2 rows, 3 columns */
+      height="200"
-        .share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 25px 0; }
+      style="display: block; border: none;"
-        .share-item { text-decoration: none; text-align: center; color: #333; border: none; background: transparent; cursor: pointer; }
+      loading="lazy"
-        .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); }
+      src="https://www.openstreetmap.org/export/embed.html?bbox=61.65516381168245%2C26.67101622855383%2C61.67516381168245%2C26.69101622855383&layer=mapnik&marker=26.68101622855383%2C61.66516381168245">
-        .share-icon img { width: 100%; height: 100%; object-fit: cover; }
+     </iframe>
-        .share-label { font-size: 12px; }
+  </div>
-     </style>
-</head>
-<body>
-<div class="location-container">
+  <!-- دکمه‌های زیر نقشه -->
-    <div class="map-card">
+  <div style="display: flex; gap: 10px; margin-top: 15px;">
-        <a id="neshanOverlay" class="map-overlay-link" target="_blank" rel="noopener noreferrer" aria-label="باز کردن در نقشه"></a>
+    <a href="https://neshan.org/maps/places/19087e7434f593216155a7c6bde38efd" 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;">
-        <iframe id="mapFrame" class="map-frame" loading="lazy" src=""></iframe>
+      مسیریابی
-    </div>
+    </a>
+    <a href="tel:09333009575" 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;">
-    <div class="map-actions">
+      تماس
-        <a id="routeBtn" class="btn btn-route" target="_blank" rel="noopener noreferrer">مسیریابی</a>
+    </a>
-        <a id="callBtn" class="btn btn-call">تماس</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 type="button" class="btn btn-share" onclick="openShareSheet()">اشتراک‌گذاری</button>
+      اشتراک‌گذاری
-    </div>
+    </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%; padding:12px; border:none; background:#f0f0f0; border-radius:10px; font-weight:bold;">بستن</button>
-    </div>
 </div>
-<script>
-    const MAP_LAT = 35.51553379708153;
-    const MAP_LNG = 51.1508280605789;
-    const CONTACT_PHONE = "09120000000";
-    const BALAD_URL = `https://balad.ir/p/${MAP_LAT},${MAP_LNG}`;
-    function buildOsmUrl(lat, lng) {
-        const delta = 0.003;
-        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}`;
-    }
-    function init() {
-        document.getElementById("mapFrame").src = buildOsmUrl(MAP_LAT, MAP_LNG);
-        document.getElementById("neshanOverlay").href = BALAD_URL;
-        document.getElementById("routeBtn").href = BALAD_URL;
-        document.getElementById("callBtn").href = "tel:" + CONTACT_PHONE;
-    }
-    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/`;
-    }
-    function closeShareSheet() { document.getElementById("shareSheet").style.display = "none"; }
-    async function copyLink() {
-        await navigator.clipboard.writeText(window.location.href);
-        alert("لینک کپی شد");
-        closeShareSheet();
-    }
-    init();
-</script>
-</body>
 </html>