پرش به محتوا

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

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


35.56191098630407,51.16095124556554
  <style>
<div style="width: 100%; max-width: 1000px; font-family: Tahoma, sans-serif;">
    :root {
  <!-- نقشه اصلی -->
      --map-height: 280px; /* ارتفاع نقشه را اینجا تغییر بده */
  <div style="position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden;">
      --border: #d8d8d8;
     <iframe
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
       width="100%"
      --radius: 14px;
       height="200"
      --text: #222;
       style="display: block; border: none;"
      --bg: #fff;
       loading="lazy"
    }
       src="https://www.openstreetmap.org/export/embed.html?bbox=61.65516381168245%2C26.67101622855383%2C61.67516381168245%2C26.69101622855383&layer=mapnik&marker=35.56191098630407%2C51.16095124556554">
 
    </iframe>
    * {
   </div>
      box-sizing: border-box;
    }
 
    body {
      margin: 0;
      font-family: Tahoma, Arial, sans-serif;
      background: #fafafa;
      color: var(--text);
    }
 
    .map-wrap {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      padding: 12px;
    }
 
    .map-card {
      position: relative;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
    }
 
     .map-frame {
      display: block;
       width: 100%;
       height: var(--map-height);
      border: 0;
    }
 
    /* لایه شفاف روی نقشه برای باز کردن لینک نشان */
    .map-overlay-link {
      position: absolute;
      inset: 0;
      z-index: 2;
       display: block;
      text-decoration: none;
      background: transparent;
    }
 
    .map-overlay-link span {
      position: absolute;
      inset: 0;
      background: transparent;
      cursor: pointer;
    }
 
    .map-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 3;
      background: rgba(255, 255, 255, 0.96);
      color: #222;
      border: 1px solid #d0d0d0;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 14px;
      text-decoration: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12);
      white-space: nowrap;
    }
 
    .actions {
      display: flex;
      gap: 10px;
      margin-top: 12px;
    }
 
    .action-btn {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 12px 10px;
      border-radius: 10px;
      text-decoration: none;
       font-weight: 700;
      border: 1px solid transparent;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      transition: transform 0.08s ease, opacity 0.08s ease;
    }
 
    .action-btn:active {
      transform: scale(0.98);
    }
 
    .btn-route {
      background: #e3f2fd;
      color: #1976d2;
       border-color: #bbdefb;
    }
 
    .btn-call {
      background: #e8f5e9;
      color: #2e7d32;
      border-color: #c8e6c9;
    }
 
    .btn-share {
      background: #fff3e0;
      color: #ef6c00;
      border-color: #ffe0b2;
    }
 
    /* Share sheet */
    .share-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: rgba(0, 0, 0, 0.55);
      padding: 16px;
      align-items: center;
      justify-content: center;
    }
 
    .share-sheet {
      width: 100%;
      max-width: 420px;
      background: #f3efe7;
      border-radius: 22px;
      padding: 20px 18px 16px;
      box-shadow: var(--shadow);
      direction: rtl;
    }
 
    .share-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
    }
 
    .share-title {
      font-size: 18px;
      font-weight: 700;
      color: #222;
    }
 
    .close-btn {
      border: 0;
      background: transparent;
      font-size: 22px;
      cursor: pointer;
      color: #333;
      line-height: 1;
      padding: 4px 6px;
    }
 
    .share-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px 12px;
      text-align: center;
    }
 
    .share-item,
    .share-native {
      border: 0;
      background: transparent;
      padding: 0;
      cursor: pointer;
      color: inherit;
      text-decoration: none;
      display: block;
    }
 
    .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: 22px;
      overflow: hidden;
    }
 
    .share-label {
      font-size: 13px;
      color: #222;
      line-height: 1.2;
    }
 
    .share-link {
      margin-top: 18px;
      font-size: 12px;
      color: #888;
      direction: ltr;
      text-align: left;
      word-break: break-all;
    }
 
    @media (max-width: 480px) {
      :root {
        --map-height: 240px; /* ارتفاع کمتر روی موبایل */
      }
 
      .actions {
        gap: 8px;
      }
 
      .action-btn {
        font-size: 13px;
        padding: 11px 8px;
      }
 
      .share-sheet {
        border-radius: 18px;
        padding: 18px 14px 14px;
      }
    }
  </style>
</head>
 
<body>
   <div class="map-wrap">
    <div class="map-card">
      <!--
        =========================
        فقط این بخش‌ها را برای تغییر لوکیشن عوض کن
        =========================


<!-- دکمه‌های زیر نقشه -->
        1) مختصات مرکز نقشه:
<div style="display: flex; gap: 10px; margin-top: 15px;">
          MAP_LAT و MAP_LNG
  <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;">
    مسیریابی
  </a>


  <a href="tel:09120000000" 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;">
        2) زوم نقشه:
    تماس
          MAP_ZOOM
  </a>


  <button type="button" onclick="openShareSheet()" style="flex: 1; padding: 12px; text-align: center; background: #fff3e0; color: #f57c00; border-radius: 8px; font-weight: bold; border: 1px solid #ffe0b2; cursor: pointer;">
        3) محدوده bbox برای iframe:
    اشتراک‌گذاری
          BBOX_LEFT, BBOX_BOTTOM, BBOX_RIGHT, BBOX_TOP
  </button>
          (اگر فقط زوم را می‌خواهی تغییر بدهی، بهتر است این چهار عدد هم متناسب با زوم تنظیم شوند)
</div>


<!-- شیت اشتراک گذاری -->
        4) لینک نشان:
<div id="shareSheet" style="display:none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.55); align-items: center; justify-content: center; padding: 16px;">
          NESHAN_HREF
  <div style="width: 100%; max-width: 420px; background: #f3efe7; border-radius: 22px; padding: 22px 20px 18px; direction: rtl; box-shadow: 0 12px 40px rgba(0,0,0,0.22); font-family: Tahoma, sans-serif;">
          - بخش #cLAT-LNG-ZOOMz-0p را تغییر بده
    <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom: 18px;">
          - اگر صفحه/مکان نشان هم عوض شد، URL پایه قبل از # را هم تغییر بده
      <button type="button" onclick="closeShareSheet()" style="background: transparent; border: 0; font-size: 22px; cursor: pointer; color: #333; line-height: 1;">✕</button>
      <div style="font-size: 18px; font-weight: 700; color: #222;">اشتراک‌گذاری</div>
    </div>


    <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 12px; text-align: center;">
        5) دکمه مسیریابی:
      <button type="button" onclick="copyShareLink()" style="border:0; background:transparent; cursor:pointer;">
          ROUTE_HREF
        <div style="width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #ffffff; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 22px;">🔗</div>
          - اگر خواستی مستقیم به نشان برود، همین لینک را نگه دار
        <div style="font-size: 13px; color:#222;">کپی لینک</div>
       -->
       </button>


       <a id="shareTelegram" target="_blank" rel="noopener noreferrer" style="text-decoration:none; color:inherit;">
      <!-- لایه شفاف روی نقشه: کل نقشه را به لینک نشان تبدیل می‌کند -->
         <div style="width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #ffffff; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 22px;">✈️</div>
       <a
         <div style="font-size: 13px; color:#222;">تلگرام</div>
        id="mapOverlayLink"
        class="map-overlay-link"
        href="#"
        target="_blank"
        rel="noopener noreferrer"
        title="باز کردن در نشان"
         aria-label="باز کردن در نشان"
      >
         <span></span>
       </a>
       </a>


       <a id="shareWhatsApp" target="_blank" rel="noopener noreferrer" style="text-decoration:none; color:inherit;">
       <!-- خود نقشه -->
         <div style="width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #ffffff; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 22px;">💬</div>
      <iframe
         <div style="font-size: 13px; color:#222;">واتساپ</div>
        id="mapFrame"
       </a>
        class="map-frame"
        width="100%"
        height="280"
        loading="lazy"
         title="نقشه موقعیت"
         src=""
       ></iframe>


       <a id="shareEitaa" target="_blank" rel="noopener noreferrer" style="text-decoration:none; color:inherit;">
      <!-- دکمه کوچک روی نقشه -->
         <div style="width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #ffffff; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 20px; font-weight: 700;">E</div>
       <a
         <div style="font-size: 13px; color:#222;">ایتا</div>
        id="mapBadgeLink"
        class="map-badge"
        href="#"
        target="_blank"
         rel="noopener noreferrer"
      >
         باز کردن در نشان
       </a>
       </a>
    </div>


       <a id="shareBale" target="_blank" rel="noopener noreferrer" style="text-decoration:none; color:inherit;">
    <!-- دکمه‌ها -->
        <div style="width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #ffffff; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 22px;">🗨️</div>
    <div class="actions">
         <div style="font-size: 13px; color:#222;">بله</div>
       <a id="routeBtn" class="action-btn btn-route" href="#" target="_blank" rel="noopener noreferrer">
         مسیریابی
       </a>
       </a>


       <a id="shareX" target="_blank" rel="noopener noreferrer" style="text-decoration:none; color:inherit;">
       <a class="action-btn btn-call" href="tel:09120000000">
        <div style="width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #ffffff; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 20px; font-weight: 700;">X</div>
         تماس
         <div style="font-size: 13px; color:#222;">ایکس</div>
       </a>
       </a>


       <button type="button" onclick="nativeShare()" style="border:0; background:transparent; cursor:pointer;">
       <button type="button" class="action-btn btn-share" onclick="openShareSheet()">
        <div style="width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 50%; background: #ffffff; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 8px rgba(0,0,0,0.08); font-size: 22px;">⬆️</div>
         اشتراک‌گذاری
         <div style="font-size: 13px; color:#222;">بیشتر</div>
       </button>
       </button>
     </div>
     </div>
  </div>


     <div id="shareLinkText" style="margin-top: 18px; font-size: 12px; color: #888; direction: ltr; text-align: left; word-break: break-all;">
  <!-- Share Sheet -->
       https://example.com
  <div id="shareBackdrop" class="share-backdrop" aria-hidden="true">
     <div class="share-sheet" role="dialog" aria-modal="true" aria-labelledby="shareTitle">
      <div class="share-head">
        <button type="button" class="close-btn" onclick="closeShareSheet()" aria-label="بستن">✕</button>
        <div id="shareTitle" class="share-title">اشتراک‌گذاری</div>
      </div>
 
      <div class="share-grid">
        <button type="button" class="share-native share-item" onclick="copyShareLink()">
          <div class="share-icon">🔗</div>
          <div class="share-label">کپی لینک</div>
        </button>
 
        <a id="shareTelegram" class="share-item" target="_blank" rel="noopener noreferrer">
          <div class="share-icon">✈️</div>
          <div class="share-label">تلگرام</div>
        </a>
 
        <a id="shareWhatsApp" class="share-item" target="_blank" rel="noopener noreferrer">
          <div class="share-icon">💬</div>
          <div class="share-label">واتساپ</div>
        </a>
 
        <a id="shareEitaa" class="share-item" target="_blank" rel="noopener noreferrer">
          <div class="share-icon" style="font-weight:700; font-size:20px;">E</div>
          <div class="share-label">ایتا</div>
        </a>
 
        <a id="shareBale" class="share-item" target="_blank" rel="noopener noreferrer">
          <div class="share-icon">🗨️</div>
          <div class="share-label">بله</div>
        </a>
 
        <a id="shareX" class="share-item" target="_blank" rel="noopener noreferrer">
          <div class="share-icon" style="font-weight:700; font-size:20px;">X</div>
          <div class="share-label">ایکس</div>
        </a>
 
        <button type="button" class="share-native share-item" onclick="nativeShare()">
          <div class="share-icon">⬆️</div>
          <div class="share-label">بیشتر</div>
        </button>
      </div>
 
       <div id="shareLinkText" class="share-link">https://example.com</div>
     </div>
     </div>
   </div>
   </div>
</div>


<script>
  <script>
  function currentShareUrl() {
    // =========================
     return window.location.href;
    // فقط این بخش را برای تغییر مختصات عوض کن      35.56191925217273,51.16096110327811
  }
    // =========================
    const LOCATION = {
      MAP_LAT: 35.56191925217273,
      MAP_LNG: 51.16096110327811,
      MAP_ZOOM: 22,
 
      // bbox = minLng, minLat, maxLng, maxLat
      // این چهار مقدار را متناسب با زوم دلخواهت تنظیم کن
      BBOX_LEFT: 61.65516381168245,
      BBOX_BOTTOM: 26.67101622855383,
      BBOX_RIGHT: 61.67516381168245,
      BBOX_TOP: 26.69101622855383,
 
      // لینک اصلی نشان
      // اگر فقط مختصات را عوض می‌کنی، بخش #c را با همین الگو تغییر بده
      NESHAN_BASE_URL: 'https://neshan.org/maps/places/19087e7434f593216155a7c6bde38efd',
 
      // شماره تماس
      PHONE_NUMBER: '09120000000'
    };
 
    function buildNeshanUrl() {
      return `${LOCATION.NESHAN_BASE_URL}#c${LOCATION.MAP_LAT}-${LOCATION.MAP_LNG}-${LOCATION.MAP_ZOOM}z-0p`;
    }
 
     function buildOsmUrl() {
      const bbox = [
        LOCATION.BBOX_LEFT,
        LOCATION.BBOX_BOTTOM,
        LOCATION.BBOX_RIGHT,
        LOCATION.BBOX_TOP
      ].join('%2C');
 
      return `https://www.openstreetmap.org/export/embed.html?bbox=${bbox}&layer=mapnik&marker=${LOCATION.MAP_LAT}%2C${LOCATION.MAP_LNG}`;
    }
 
    function currentUrl() {
      return window.location.href;
    }
 
    function setLinks() {
      const neshanUrl = buildNeshanUrl();
      const osmUrl = buildOsmUrl();
 
      document.getElementById('mapOverlayLink').href = neshanUrl;
      document.getElementById('mapBadgeLink').href = neshanUrl;
      document.getElementById('routeBtn').href = neshanUrl;
      document.getElementById('mapFrame').src = osmUrl;
 
      // شماره تماس
      document.querySelector('a[href^="tel:"]').href = `tel:${LOCATION.PHONE_NUMBER}`;
    }


  function openShareSheet() {
    function openShareSheet() {
    const url = currentShareUrl();
      const url = currentUrl();
    const title = document.title || 'اشتراک‌گذاری';
      const text = 'مشاهده این مکان';
    const text = 'مشاهده این مکان';
      const title = document.title || 'اشتراک‌گذاری';


    document.getElementById('shareSheet').style.display = 'flex';
      document.getElementById('shareBackdrop').style.display = 'flex';
    document.getElementById('shareLinkText').textContent = url;
      document.getElementById('shareBackdrop').setAttribute('aria-hidden', 'false');
      document.getElementById('shareLinkText').textContent = url;


    document.getElementById('shareTelegram').href =
      document.getElementById('shareTelegram').href =
      'https://t.me/share/url?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text);
        `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;


    document.getElementById('shareWhatsApp').href =
      document.getElementById('shareWhatsApp').href =
      'https://wa.me/?text=' + encodeURIComponent(text + ' ' + url);
        `https://wa.me/?text=${encodeURIComponent(`${text} ${url}`)}`;


    document.getElementById('shareEitaa').href =
      // این لینک‌ها بسته به سیاست هر سرویس ممکن است تغییر کنند
      'https://eitaa.com/share/url?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text);
      document.getElementById('shareEitaa').href =
        `https://eitaa.com/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;


    document.getElementById('shareBale').href =
      document.getElementById('shareBale').href =
      'https://ble.ir/share?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text);
        `https://ble.ir/share?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;


    document.getElementById('shareX').href =
      document.getElementById('shareX').href =
      'https://x.com/intent/tweet?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text);
        `https://x.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
  }
    }


  function closeShareSheet() {
    function closeShareSheet() {
    document.getElementById('shareSheet').style.display = 'none';
      document.getElementById('shareBackdrop').style.display = 'none';
  }
      document.getElementById('shareBackdrop').setAttribute('aria-hidden', 'true');
    }
 
    async function copyShareLink() {
      const url = currentUrl();
 
      try {
        await navigator.clipboard.writeText(url);
      } catch (e) {
        const input = document.createElement('input');
        input.value = url;
        document.body.appendChild(input);
        input.select();
        document.execCommand('copy');
        document.body.removeChild(input);
      }


  async function copyShareLink() {
    try {
      await navigator.clipboard.writeText(currentShareUrl());
      alert('لینک کپی شد');
    } catch (e) {
      const temp = document.createElement('input');
      temp.value = currentShareUrl();
      document.body.appendChild(temp);
      temp.select();
      document.execCommand('copy');
      document.body.removeChild(temp);
       alert('لینک کپی شد');
       alert('لینک کپی شد');
     }
     }
  }


  async function nativeShare() {
    async function nativeShare() {
    const url = currentShareUrl();
      const url = currentUrl();
    const title = document.title || 'اشتراک‌گذاری';
      const title = document.title || 'اشتراک‌گذاری';
    const text = 'مشاهده این مکان';
      const text = 'مشاهده این مکان';


    if (navigator.share) {
      if (navigator.share) {
      try {
        try {
        await navigator.share({ title, text, url });
          await navigator.share({ title, text, url });
      } catch (e) {}
        } catch (e) {
    } else {
          // کاربر لغو کرده یا مرورگر پشتیبانی نکرده
      copyShareLink();
        }
      } else {
        copyShareLink();
      }
     }
     }
  }


  document.getElementById('shareSheet').addEventListener('click', function (e) {
    document.getElementById('shareBackdrop').addEventListener('click', function (e) {
    if (e.target === this) closeShareSheet();
      if (e.target === this) closeShareSheet();
  });
    });


  document.addEventListener('keydown', function (e) {
    document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') closeShareSheet();
      if (e.key === 'Escape') closeShareSheet();
  });
    });
</script>


    setLinks();
  </script>
</body>
</html>
</html>

نسخهٔ ‏۱۸ ژوئیهٔ ۲۰۲۶، ساعت ۱۰:۰۵

نقشه موقعیت

باز کردن در نشان
مسیریابی تماس

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