پرش به محتوا

لوکیشن/دماوند پلیمر - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۱ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مسیریابی و اشتراک‌گذاری</title>


<div style="width: 100%; max-width: 1000px; font-family: Tahoma, sans-serif; direction: rtl;">
    <style>
  <style>
        :root {
    .map-card { position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden; background: #fff; line-height: 0; }
            --primary-bg: #ffffff;
    .map-frame { display: block; width: 100%; height: 280px; border: none; }
            --btn-route: #e3f2fd;
    .map-overlay-link { position: absolute; inset: 0; z-index: 2; display: block; background: transparent; cursor: pointer; }
            --text-route: #1976d2;
    .map-actions { display: flex; gap: 10px; margin-top: 15px; }
            --btn-call: #e8f5e9;
    .map-actions a, .map-actions button { flex: 1; padding: 12px; text-align: center; border-radius: 8px; font-weight: bold; border: 1px solid transparent; cursor: pointer; font-family: inherit; font-size: 14px; text-decoration: none; transition: 0.2s; }
            --text-call: #388e3c;
    .btn-route { background: #e3f2fd; color: #1976d2; border-color: #bbdefb; }
            --btn-share: #fff3e0;
    .btn-contact { background: #e8f5e9; color: #388e3c; border-color: #c8e6c9; }
            --text-share: #f57c00;
    .btn-share { background: #fff3e0; color: #f57c00; border-color: #ffe0b2; }
        }
    .share-sheet { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.55); align-items: center; justify-content: center; padding: 16px; line-height: normal; }
    .share-panel { width: 100%; max-width: 400px; background: #f3efe7; border-radius: 22px; padding: 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); }
    .share-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
    .share-close { background: transparent; border: 0; font-size: 22px; cursor: pointer; color: #333; }
    .share-title { font-size: 18px; font-weight: 700; color: #222; }
    .share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; text-align: center; }
    .share-item { text-decoration: none; color: inherit; background: transparent; border: 0; cursor: pointer; padding: 0; }
    .share-icon { width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); font-size: 24px; }
    .share-label { font-size: 13px; color: #222; }
    .share-link-text { margin-top: 20px; font-size: 11px; color: #999; direction: ltr; text-align: left; word-break: break-all; opacity: 0.8; }
  </style>


  <!-- تنظیمات مختصات و لینک‌ها -->
        .location-container {
  <script>
            width: 100%;
    // مختصات جدید ارسالی شما
            max-width: none;
    const MAP_LAT = 35.56192273941163;
            margin: 0;
    const MAP_LNG = 51.16097081423416;
            font-family: Tahoma, sans-serif;
   
            box-sizing: border-box;
    // تنظیم زوم (عدد کمتر = زوم بیشتر)
        }
    const MAP_BBOX_DELTA = 0.003;


    // لینک نشان با مختصات جدید
        .map-card {
    const NESHAN_URL = `https://neshan.org/maps/@${MAP_LAT},${MAP_LNG},17z`;
            position: relative;
    const CONTACT_PHONE = "09120000000"; // شماره خود را اینجا وارد کنید
            width: 100%;
            border: 1px solid #e0e0e0;
            border-radius: 16px;
            overflow: hidden;
            background: #eee;
            height: 280px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            box-sizing: border-box;
        }


    function buildOsmUrl(lat, lng, delta) {
        .map-frame {
      const minLat = lat - delta; const maxLat = lat + delta;
            width: 100%;
      const minLng = lng - delta; const maxLng = lng + delta;
            height: 100%;
      return `https://www.openstreetmap.org/export/embed.html?bbox=${minLng}%2C${minLat}%2C${maxLng}%2C${maxLat}&layer=mapnik&marker=${lat}%2C${lng}`;
            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;
            width: 100%;
        }
 
        .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;
            box-sizing: border-box;
        }
 
        .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 */
        .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;
            box-sizing: border-box;
        }
 
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
 
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
 
        /* Grid 2 rows, 3 columns */
        .share-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin: 25px 0;
        }
 
        .share-item {
            text-decoration: none;
            text-align: center;
            color: #333;
            border: none;
            background: transparent;
            cursor: pointer;
        }
 
        .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;
        }
 
        .full-width-banner {
            position: relative;
            left: 50%;
            right: 50%;
            width: 100vw;
            margin-left: -50vw;
            margin-right: -50vw;
            overflow: hidden;
        }
    </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%; 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 = "09192472912";
 
    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() {
     function openShareSheet() {
      const url = window.location.href;
 
      const text = "لوکیشن مجموعه ما";
        const url = window.location.href;
      document.getElementById("shareSheet").style.display = "flex";
        const text = "لوکیشن ما";
      document.getElementById("shareLinkText").textContent = url;
 
      document.getElementById("shareTelegram").href = `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
        document.getElementById("shareSheet").style.display = "flex";
      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("shareTelegram").href =
      document.getElementById("shareBale").href = `https://ble.ir/share?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
            `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
      document.getElementById("shareX").href = `https://x.com/intent/tweet?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";
     }
     }


    function closeShareSheet() { document.getElementById("shareSheet").style.display = "none"; }


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


    async function nativeShare() {
         await navigator.clipboard.writeText(window.location.href);
      if (navigator.share) {
 
         try { await navigator.share({ title: document.title, url: window.location.href }); } catch (e) {}
        alert("لینک کپی شد");
      } else { copyLink(); }
 
        closeShareSheet();
     }
     }


    document.addEventListener("DOMContentLoaded", () => {
      document.getElementById("mapFrame").src = buildOsmUrl(MAP_LAT, MAP_LNG, MAP_BBOX_DELTA);
      document.getElementById("neshanOverlay").href = NESHAN_URL;
      document.getElementById("routeBtn").href = NESHAN_URL;
      document.getElementById("callBtn").href = "tel:" + CONTACT_PHONE;
    });
  </script>
  <!-- بخش بصری -->
  <div class="map-card">
    <a id="neshanOverlay" class="map-overlay-link" target="_blank" rel="noopener noreferrer" title="باز کردن در نشان"></a>
    <iframe id="mapFrame" class="map-frame" loading="lazy" src=""></iframe>
  </div>


  <div class="map-actions">
     init();
     <a id="routeBtn" class="btn-route" target="_blank" rel="noopener noreferrer">مسیریابی</a>
    <a id="callBtn" class="btn-contact">تماس</a>
    <button type="button" class="btn-share" onclick="openShareSheet()">اشتراک‌گذاری</button>
  </div>


  <!-- شیت اشتراک‌گذاری -->
</script>
  <div id="shareSheet" class="share-sheet" onclick="if(event.target===this)closeShareSheet()">
    <div class="share-panel">
      <div class="share-header">
        <button type="button" class="share-close" onclick="closeShareSheet()">✕</button>
        <div class="share-title">اشتراک‌گذاری</div>
      </div>
      <div class="share-grid">
        <button type="button" class="share-item" onclick="copyLink()">
          <div class="share-icon">🔗</div><div class="share-label">کپی لینک</div>
        </button>
        <a id="shareTelegram" class="share-item" target="_blank">
          <div class="share-icon">✈️</div><div class="share-label">تلگرام</div>
        </a>
        <a id="shareWhatsApp" class="share-item" target="_blank">
          <div class="share-icon">💬</div><div class="share-label">واتساپ</div>
        </a>
        <a id="shareEitaa" class="share-item" target="_blank">
          <div class="share-icon" style="font-weight:bold; font-size:20px; font-family:serif;">E</div><div class="share-label">ایتا</div>
        </a>
        <a id="shareBale" class="share-item" target="_blank">
          <div class="share-icon">🗨️</div><div class="share-label">بله</div>
        </a>
        <a id="shareX" class="share-item" target="_blank">
       
<!--          جدید          -->
<a href="rubika://send?text=متن" class="share-button">
    <div class="share-icon">
            <img src="https://dl.faraghaib.ir/m/100/robika.png"
      </div>
    <div class="share-label">روبیکا</div>
</a>
<!--          جدید          -->
         
       
      </div>
      <!-- div id="shareLinkText" class="share-link-text"></div-->
    </div>
  </div>
</div>


</body>
</html>
</html>

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

مسیریابی و اشتراک‌گذاری

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

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:لوکیشن/دماوند_پلیمر&oldid=6698»