پرش به محتوا

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

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


<html lang="fa" dir="rtl">
<div style="width: 100%; max-width: 1000px; font-family: Tahoma, sans-serif; direction: rtl;">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="نمایش موقعیت روی نقشه به همراه دکمه‌های مسیریابی، تماس و اشتراک‌گذاری با طراحی ریسپانسیو و افکت حرفه‌ای." />
  <meta name="robots" content="index,follow" />
  <title>نقشه موقعیت و راه‌های ارتباطی</title>
 
   <style>
   <style>
     :root {
     .map-card { position: relative; border: 1px solid #ccc; border-radius: 12px; overflow: hidden; background: #fff; line-height: 0; }
      --radius: 12px;
    .map-frame { display: block; width: 100%; height: 280px; border: none; }
      --radius-sm: 10px;
    .map-overlay-link { position: absolute; inset: 0; z-index: 2; display: block; background: transparent; cursor: pointer; }
      --transition: 0.35s ease;
    .map-actions { display: flex; gap: 10px; margin-top: 15px; }
      --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.08);
    .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; }
      --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.14);
    .btn-route { background: #e3f2fd; color: #1976d2; border-color: #bbdefb; }
      --map-border: #d9d9d9;
    .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>


      --route-bg: #e3f2fd;
  <!-- تنظیمات مختصات و لینک‌ها -->
      --route-text: #1976d2;
  <script>
      --route-border: #bbdefb;
    // مختصات جدید ارسالی شما
    const MAP_LAT = 35.56192273941163;
    const MAP_LNG = 51.16097081423416;
   
    // تنظیم زوم (عدد کمتر = زوم بیشتر)
    const MAP_BBOX_DELTA = 0.003;  


      --call-bg: #e8f5e9;
    // لینک نشان با مختصات جدید
      --call-text: #388e3c;
    const NESHAN_URL = `https://neshan.org/maps/@${MAP_LAT},${MAP_LNG},17z`;
      --call-border: #c8e6c9;
    const CONTACT_PHONE = "09120000000"; // شماره خود را اینجا وارد کنید


       --share-bg: #fff3e0;
    function buildOsmUrl(lat, lng, delta) {
       --share-text: #f57c00;
       const minLat = lat - delta; const maxLat = lat + delta;
       --share-border: #ffe0b2;
       const minLng = lng - delta; const maxLng = lng + delta;
       return `https://www.openstreetmap.org/export/embed.html?bbox=${minLng}%2C${minLat}%2C${maxLng}%2C${maxLat}&layer=mapnik&marker=${lat}%2C${lng}`;
     }
     }


     * {
     function openShareSheet() {
       box-sizing: border-box;
       const url = window.location.href;
      const text = "لوکیشن مجموعه ما";
      document.getElementById("shareSheet").style.display = "flex";
      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?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
     }
     }


     html {
     function closeShareSheet() { document.getElementById("shareSheet").style.display = "none"; }
      scroll-behavior: smooth;
    }


     body {
     async function copyLink() {
       margin: 0;
       await navigator.clipboard.writeText(window.location.href);
      font-family: Tahoma, sans-serif;
       alert("لینک کپی شد");
      background: #ffffff;
       color: #222;
      line-height: 1.6;
     }
     }


     .location-card {
     async function nativeShare() {
       width: 100%;
       if (navigator.share) {
      max-width: 1000px;
        try { await navigator.share({ title: document.title, url: window.location.href }); } catch (e) {}
      margin: 0 auto;
       } else { copyLink(); }
       padding: 0 12px;
     }
     }


     .map-frame {
     document.addEventListener("DOMContentLoaded", () => {
       position: relative;
       document.getElementById("mapFrame").src = buildOsmUrl(MAP_LAT, MAP_LNG, MAP_BBOX_DELTA);
       overflow: hidden;
       document.getElementById("neshanOverlay").href = NESHAN_URL;
       border: 1px solid var(--map-border);
       document.getElementById("routeBtn").href = NESHAN_URL;
       border-radius: var(--radius);
       document.getElementById("callBtn").href = "tel:" + CONTACT_PHONE;
      background: #f8f8f8;
     });
     }
  </script>


     .map-frame iframe {
  <!-- بخش بصری -->
      display: block;
  <div class="map-card">
      width: 100%;
     <a id="neshanOverlay" class="map-overlay-link" target="_blank" rel="noopener noreferrer" title="باز کردن در نشان"></a>
      height: 250px;
    <iframe id="mapFrame" class="map-frame" loading="lazy" src=""></iframe>
      border: 0;
  </div>
    }


     .action-buttons {
  <div class="map-actions">
      display: grid;
     <a id="routeBtn" class="btn-route" target="_blank" rel="noopener noreferrer">مسیریابی</a>
      grid-template-columns: repeat(3, minmax(0, 1fr));
    <a id="callBtn" class="btn-contact">تماس</a>
      gap: 10px;
    <button type="button" class="btn-share" onclick="openShareSheet()">اشتراک‌گذاری</button>
      margin-top: 15px;
  </div>
    }


    .action-btn {
  <!-- شیت اشتراک‌گذاری -->
      position: relative;
  <div id="shareSheet" class="share-sheet" onclick="if(event.target===this)closeShareSheet()">
      display: inline-flex;
     <div class="share-panel">
      align-items: center;
       <div class="share-header">
      justify-content: center;
        <button type="button" class="share-close" onclick="closeShareSheet()">✕</button>
      min-height: 50px;
         <div class="share-title">اشتراک‌گذاری</div>
      padding: 12px 16px;
       </div>
      border-radius: var(--radius-sm);
       <div class="share-grid">
      border: 1px solid transparent;
         <button type="button" class="share-item" onclick="copyLink()">
      text-decoration: none;
          <div class="share-icon">🔗</div><div class="share-label">کپی لینک</div>
      font-weight: 700;
         </button>
      font-size: 15px;
         <a id="shareTelegram" class="share-item" target="_blank">
      text-align: center;
          <div class="share-icon">✈️</div><div class="share-label">تلگرام</div>
      cursor: pointer;
        </a>
      overflow: hidden;
        <a id="shareWhatsApp" class="share-item" target="_blank">
      isolation: isolate;
          <div class="share-icon">💬</div><div class="share-label">واتساپ</div>
      transition:
        </a>
        transform var(--transition),
         <a id="shareEitaa" class="share-item" target="_blank">
        box-shadow var(--transition),
           <div class="share-icon" style="font-weight:bold; font-size:20px; font-family:serif;">E</div><div class="share-label">ایتا</div>
        border-color var(--transition),
        </a>
        background-color var(--transition),
        <a id="shareBale" class="share-item" target="_blank">
        color var(--transition);
           <div class="share-icon">🗨️</div><div class="share-label">بله</div>
      will-change: transform;
         </a>
      -webkit-tap-highlight-color: transparent;
        <a id="shareX" class="share-item" target="_blank">
    }
           <div class="share-icon" style="font-weight:bold; font-size:20px;">X</div><div class="share-label">روبیکا</div>
 
         </a>
    .action-btn::before {
       
      content: "";
      position: absolute;
      right: -30%;
      bottom: -120%;
      width: 42%;
      height: 240%;
      transform: rotate(28deg);
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.18) 25%,
        rgba(255, 255, 255, 0.62) 50%,
        rgba(255, 255, 255, 0.18) 75%,
        rgba(255, 255, 255, 0) 100%
      );
      opacity: 0;
      pointer-events: none;
      z-index: 0;
     }
 
    .action-btn span {
      position: relative;
      z-index: 1;
      white-space: nowrap;
    }
 
    .action-btn:hover,
    .action-btn:focus-visible {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }
 
    .action-btn:hover::before,
    .action-btn:focus-visible::before {
      opacity: 1;
      animation: buttonShine 0.9s ease forwards;
    }
 
    .action-btn:focus-visible {
      outline: 2px solid rgba(25, 118, 210, 0.35);
      outline-offset: 3px;
    }
 
    .action-btn:active {
      transform: translateY(-1px);
      box-shadow: var(--shadow-soft);
    }
 
    .route-btn {
      background: var(--route-bg);
      color: var(--route-text);
      border-color: var(--route-border);
    }
 
    .call-btn {
      background: var(--call-bg);
      color: var(--call-text);
      border-color: var(--call-border);
    }
 
    .share-btn {
       background: var(--share-bg);
      color: var(--share-text);
      border-color: var(--share-border);
    }
 
    @keyframes buttonShine {
      0% {
         right: -30%;
        bottom: -120%;
        opacity: 0;
       }
       15% {
        opacity: 1;
      }
      100% {
        right: 78%;
        bottom: 105%;
        opacity: 0;
      }
    }
 
    @media (max-width: 768px) {
      .map-frame iframe {
        height: 220px;
      }
 
      .action-buttons {
        grid-template-columns: 1fr;
      }
 
      .action-btn {
         width: 100%;
        min-height: 48px;
        font-size: 14px;
      }
 
      .action-btn span {
        white-space: normal;
      }
    }
 
    @media (prefers-reduced-motion: reduce) {
      .action-btn,
      .action-btn::before {
         transition: none;
         animation: none !important;
      }
 
      .action-btn:hover,
      .action-btn:focus-visible,
      .action-btn:active {
        transform: none;
      }
 
      .action-btn:hover::before,
      .action-btn:focus-visible::before {
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <main class="location-card">
    <section aria-label="نقشه موقعیت">
      <div class="map-frame">
         <div id="osm-map-container">
           <iframe
            id="dynamic-map"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            title="نقشه موقعیت"
            aria-label="نقشه موقعیت مکانی"
           ></iframe>
        </div>
 
         <script>
          const lat = 35.515761827084475;
          const lon = 51.15124735976357;
          const zoomLevel = 0.005;
 
           const minLon = lon - zoomLevel;
          const minLat = lat - zoomLevel;
          const maxLon = lon + zoomLevel;
          const maxLat = lat + zoomLevel;
 
          const mapUrl = `https://www.openstreetmap.org/export/embed.html?bbox=${minLon},${minLat},${maxLon},${maxLat}&layer=mapnik&marker=${lat},${lon}`;
 
          document.getElementById("dynamic-map").src = mapUrl;
         </script>
       </div>
       </div>
    </section>
       <!-- div id="shareLinkText" class="share-link-text"></div-->
 
     </div>
    <nav class="action-buttons" aria-label="راه‌های ارتباطی و دسترسی">
   </div>
       <a
</div>
        href="https://neshan.org/maps/places/35.515761827084475,51.15124735976357"
        target="_blank"
        rel="noopener noreferrer"
        class="action-btn route-btn"
        title="مشاهده مسیر روی نقشه"
        aria-label="مسیریابی به این موقعیت"
      >
        <span>مسیریابی</span>
      </a>
 
      <a
        href="tel:09123005025"
        class="action-btn call-btn"
        title="تماس با این شماره"
        aria-label="تماس با شماره ۰۹۱۲۳۰۰۵۰۲۵"
      >
        <span>تماس</span>
      </a>
 
      <button
        type="button"
        class="action-btn share-btn"
        title="اشتراک‌گذاری لینک این صفحه"
        aria-label="اشتراک‌گذاری لینک صفحه"
        onclick="sharePage()"
      >
        <span>اشتراک‌گذاری</span>
      </button>
     </nav>
   </main>
 
  <script>
    async function sharePage() {
      const pageUrl = window.location.href;


      try {
        if (navigator.share) {
          await navigator.share({
            title: document.title,
            url: pageUrl
          });
        } else if (navigator.clipboard) {
          await navigator.clipboard.writeText(pageUrl);
          alert("لینک کپی شد!");
        } else {
          alert("امکان اشتراک‌گذاری در این مرورگر در دسترس نیست.");
        }
      } catch (error) {
        console.error("Share failed:", error);
      }
    }
  </script>
</body>
</html>
</html>

نسخهٔ ‏۱۰ اوت ۲۰۲۶، ساعت ۰۸:۴۴

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

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