فراغیب

الگو:لوکیشن/پوشاک بابازاده: تفاوت میان نسخه‌ها

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


<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; }
      --map-height: 280px; /* ارتفاع نقشه را اینجا تغییر بده */
    .map-frame { display: block; width: 100%; height: 280px; border: none; }
      --border: #d8d8d8;
    .map-overlay-link { position: absolute; inset: 0; z-index: 2; display: block; background: transparent; cursor: pointer; }
      --shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    .map-actions { display: flex; gap: 10px; margin-top: 15px; }
      --radius: 14px;
    .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: #222;
    .btn-route { background: #e3f2fd; color: #1976d2; border-color: #bbdefb; }
      --bg: #fff;
    .btn-contact { background: #e8f5e9; color: #388e3c; border-color: #c8e6c9; }
     }
    .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>


     * {
  <!-- تنظیمات مختصات و لینک‌ها -->
      box-sizing: border-box;
  <script>
     }
    // مختصات جدید ارسالی شما
     const MAP_LAT = 35.56192273941163;
    const MAP_LNG = 51.16097081423416;
      
    // تنظیم زوم (عدد کمتر = زوم بیشتر)
    const MAP_BBOX_DELTA = 0.003;


     body {
     // لینک نشان با مختصات جدید
      margin: 0;
    const NESHAN_URL = `https://neshan.org/maps/@${MAP_LAT},${MAP_LNG},17z`;
      font-family: Tahoma, Arial, sans-serif;
    const CONTACT_PHONE = "09120000000"; // شماره خود را اینجا وارد کنید
      background: #fafafa;
      color: var(--text);
    }


     .map-wrap {
     function buildOsmUrl(lat, lng, delta) {
       width: 100%;
       const minLat = lat - delta; const maxLat = lat + delta;
       max-width: 1000px;
       const minLng = lng - delta; const maxLng = lng + delta;
      margin: 0 auto;
       return `https://www.openstreetmap.org/export/embed.html?bbox=${minLng}%2C${minLat}%2C${maxLng}%2C${maxLat}&layer=mapnik&marker=${lat}%2C${lng}`;
       padding: 12px;
     }
     }


     .map-card {
     function openShareSheet() {
       position: relative;
      const url = window.location.href;
       border: 1px solid var(--border);
      const text = "لوکیشن مجموعه ما";
       border-radius: var(--radius);
      document.getElementById("shareSheet").style.display = "flex";
       overflow: hidden;
      document.getElementById("shareLinkText").textContent = url;
       background: #fff;
       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("shareX").href = `https://x.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
     }
     }


     .map-frame {
     function closeShareSheet() { document.getElementById("shareSheet").style.display = "none"; }
      display: block;
      width: 100%;
      height: var(--map-height);
      border: 0;
    }


     /* لایه شفاف روی نقشه برای باز کردن لینک نشان */
     async function copyLink() {
    .map-overlay-link {
       await navigator.clipboard.writeText(window.location.href);
       position: absolute;
       alert("لینک کپی شد");
       inset: 0;
      z-index: 2;
      display: block;
      text-decoration: none;
      background: transparent;
     }
     }


     .map-overlay-link span {
     async function nativeShare() {
       position: absolute;
       if (navigator.share) {
      inset: 0;
        try { await navigator.share({ title: document.title, url: window.location.href }); } catch (e) {}
      background: transparent;
       } else { copyLink(); }
       cursor: pointer;
     }
     }


     .map-badge {
     document.addEventListener("DOMContentLoaded", () => {
       position: absolute;
       document.getElementById("mapFrame").src = buildOsmUrl(MAP_LAT, MAP_LNG, MAP_BBOX_DELTA);
      top: 12px;
       document.getElementById("neshanOverlay").href = NESHAN_URL;
      right: 12px;
       document.getElementById("routeBtn").href = NESHAN_URL;
      z-index: 3;
       document.getElementById("callBtn").href = "tel:" + CONTACT_PHONE;
      background: rgba(255, 255, 255, 0.96);
     });
       color: #222;
  </script>
       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;
   <div class="map-card">
      gap: 10px;
     <a id="neshanOverlay" class="map-overlay-link" target="_blank" rel="noopener noreferrer" title="باز کردن در نشان"></a>
      margin-top: 12px;
    <iframe id="mapFrame" class="map-frame" loading="lazy" src=""></iframe>
    }
  </div>
 
    .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) مختصات مرکز نقشه:
          MAP_LAT و MAP_LNG
 
        2) زوم نقشه:
          MAP_ZOOM
 
        3) محدوده bbox برای iframe:
          BBOX_LEFT, BBOX_BOTTOM, BBOX_RIGHT, BBOX_TOP
          (اگر فقط زوم را می‌خواهی تغییر بدهی، بهتر است این چهار عدد هم متناسب با زوم تنظیم شوند)
 
        4) لینک نشان:
          NESHAN_HREF
          - بخش #cLAT-LNG-ZOOMz-0p را تغییر بده
          - اگر صفحه/مکان نشان هم عوض شد، URL پایه قبل از # را هم تغییر بده
 
        5) دکمه مسیریابی:
          ROUTE_HREF
          - اگر خواستی مستقیم به نشان برود، همین لینک را نگه دار
      -->
 
      <!-- لایه شفاف روی نقشه: کل نقشه را به لینک نشان تبدیل می‌کند -->
      <a
        id="mapOverlayLink"
        class="map-overlay-link"
        href="#"
        target="_blank"
        rel="noopener noreferrer"
        title="باز کردن در نشان"
        aria-label="باز کردن در نشان"
      >
        <span></span>
      </a>
 
      <!-- خود نقشه -->
      <iframe
        id="mapFrame"
        class="map-frame"
        width="100%"
        height="280"
        loading="lazy"
        title="نقشه موقعیت"
        src=""
      ></iframe>
 
      <!-- دکمه کوچک روی نقشه -->
      <a
        id="mapBadgeLink"
        class="map-badge"
        href="#"
        target="_blank"
        rel="noopener noreferrer"
      >
        باز کردن در نشان
      </a>
    </div>


    <!-- دکمه‌ها -->
  <div class="map-actions">
    <div class="actions">
    <a id="routeBtn" class="btn-route" target="_blank" rel="noopener noreferrer">مسیریابی</a>
      <a id="routeBtn" class="action-btn btn-route" href="#" target="_blank" rel="noopener noreferrer">
    <a id="callBtn" class="btn-contact">تماس</a>
        مسیریابی
    <button type="button" class="btn-share" onclick="openShareSheet()">اشتراک‌گذاری</button>
      </a>
 
      <a class="action-btn btn-call" href="tel:09120000000">
        تماس
      </a>
 
      <button type="button" class="action-btn btn-share" onclick="openShareSheet()">
        اشتراک‌گذاری
      </button>
    </div>
   </div>
   </div>


   <!-- Share Sheet -->
   <!-- شیت اشتراک‌گذاری -->
   <div id="shareBackdrop" class="share-backdrop" aria-hidden="true">
   <div id="shareSheet" class="share-sheet" onclick="if(event.target===this)closeShareSheet()">
     <div class="share-sheet" role="dialog" aria-modal="true" aria-labelledby="shareTitle">
     <div class="share-panel">
       <div class="share-head">
       <div class="share-header">
         <button type="button" class="close-btn" onclick="closeShareSheet()" aria-label="بستن">✕</button>
         <button type="button" class="share-close" onclick="closeShareSheet()">✕</button>
         <div id="shareTitle" class="share-title">اشتراک‌گذاری</div>
         <div class="share-title">اشتراک‌گذاری</div>
       </div>
       </div>
       <div class="share-grid">
       <div class="share-grid">
         <button type="button" class="share-native share-item" onclick="copyShareLink()">
         <button type="button" class="share-item" onclick="copyLink()">
           <div class="share-icon">🔗</div>
           <div class="share-icon">🔗</div><div class="share-label">کپی لینک</div>
          <div class="share-label">کپی لینک</div>
         </button>
         </button>
 
         <a id="shareTelegram" class="share-item" target="_blank">
         <a id="shareTelegram" class="share-item" target="_blank" rel="noopener noreferrer">
           <div class="share-icon">✈️</div><div class="share-label">تلگرام</div>
           <div class="share-icon">✈️</div>
          <div class="share-label">تلگرام</div>
         </a>
         </a>
 
         <a id="shareWhatsApp" class="share-item" target="_blank">
         <a id="shareWhatsApp" class="share-item" target="_blank" rel="noopener noreferrer">
           <div class="share-icon">💬</div><div class="share-label">واتساپ</div>
           <div class="share-icon">💬</div>
          <div class="share-label">واتساپ</div>
         </a>
         </a>
 
         <a id="shareEitaa" class="share-item" target="_blank">
         <a id="shareEitaa" class="share-item" target="_blank" rel="noopener noreferrer">
           <div class="share-icon" style="font-weight:bold; font-size:20px; font-family:serif;">E</div><div class="share-label">ایتا</div>
           <div class="share-icon" style="font-weight:700; font-size:20px;">E</div>
          <div class="share-label">ایتا</div>
         </a>
         </a>
 
         <a id="shareBale" class="share-item" target="_blank">
         <a id="shareBale" class="share-item" target="_blank" rel="noopener noreferrer">
           <div class="share-icon">🗨️</div><div class="share-label">بله</div>
           <div class="share-icon">🗨️</div>
          <div class="share-label">بله</div>
         </a>
         </a>
 
         <a id="shareX" class="share-item" target="_blank">
         <a id="shareX" class="share-item" target="_blank" rel="noopener noreferrer">
           <div class="share-icon" style="font-weight:bold; font-size:20px;">X</div><div class="share-label">ایکس</div>
           <div class="share-icon" style="font-weight:700; font-size:20px;">X</div>
          <div class="share-label">ایکس</div>
         </a>
         </a>
 
         <button type="button" class="share-item" onclick="nativeShare()">
         <button type="button" class="share-native share-item" onclick="nativeShare()">
           <div class="share-icon">⬆️</div><div class="share-label">بیشتر</div>
           <div class="share-icon">⬆️</div>
          <div class="share-label">بیشتر</div>
         </button>
         </button>
       </div>
       </div>
 
       <div id="shareLinkText" class="share-link-text"></div>
       <div id="shareLinkText" class="share-link">https://example.com</div>
     </div>
     </div>
   </div>
   </div>
</div>


  <script>
    // =========================
    // فقط این بخش را برای تغییر مختصات عوض کن      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/51.16096110327811',
      // شماره تماس
      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() {
      const url = currentUrl();
      const text = 'مشاهده این مکان';
      const title = document.title || 'اشتراک‌گذاری';
      document.getElementById('shareBackdrop').style.display = 'flex';
      document.getElementById('shareBackdrop').setAttribute('aria-hidden', 'false');
      document.getElementById('shareLinkText').textContent = url;
      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('shareX').href =
        `https://x.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
    }
    function closeShareSheet() {
      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);
      }
      alert('لینک کپی شد');
    }
    async function nativeShare() {
      const url = currentUrl();
      const title = document.title || 'اشتراک‌گذاری';
      const text = 'مشاهده این مکان';
      if (navigator.share) {
        try {
          await navigator.share({ title, text, url });
        } catch (e) {
          // کاربر لغو کرده یا مرورگر پشتیبانی نکرده
        }
      } else {
        copyShareLink();
      }
    }
    document.getElementById('shareBackdrop').addEventListener('click', function (e) {
      if (e.target === this) closeShareSheet();
    });
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') closeShareSheet();
    });
    setLinks();
  </script>
</body>
</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:لوکیشن/پوشاک_بابازاده»