پرش به محتوا

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

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۸ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl">
<head>
<head>
  <meta charset="UTF-8" />
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="نمایش موقعیت روی نقشه به همراه دکمه‌های مسیریابی، تماس و اشتراک‌گذاری با طراحی ریسپانسیو و افکت حرفه‌ای." />
    <title>مسیریابی و اشتراک‌گذاری</title>
  <meta name="robots" content="index,follow" />
 
  <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: none;
            margin: 0;
            font-family: Tahoma, sans-serif;
            box-sizing: border-box;
        }
 
        .map-card {
            position: relative;
            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;
        }
 
        .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;
            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;
        }


  <style>
        .share-item {
    :root {
            text-decoration: none;
      --radius: 12px;
            text-align: center;
      --radius-sm: 10px;
            color: #333;
      --transition: 0.35s ease;
            border: none;
      --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.08);
            background: transparent;
      --shadow-hover: 0 14px 28px rgba(0, 0, 0, 0.14);
            cursor: pointer;
      --map-border: #d9d9d9;
        }


      --route-bg: #e3f2fd;
        .share-icon {
      --route-text: #1976d2;
            width: 50px;
      --route-border: #bbdefb;
            height: 50px;
            margin: 0 auto 8px;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }


      --call-bg: #e8f5e9;
        .share-icon img {
      --call-text: #388e3c;
            width: 100%;
      --call-border: #c8e6c9;
            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>


      --share-bg: #fff3e0;
      --share-text: #f57c00;
      --share-border: #ffe0b2;
    }


    * {
<script>
      box-sizing: border-box;
    }


     html {
     const MAP_LAT = 35.51553379708153;
      scroll-behavior: smooth;
    const MAP_LNG = 51.1508280605789;
     }
     const CONTACT_PHONE = "09192472912";


     body {
     const BALAD_URL =
      margin: 0;
        `https://balad.ir/p/${MAP_LAT},${MAP_LNG}`;
      font-family: Tahoma, sans-serif;
      background: #ffffff;
      color: #222;
      line-height: 1.6;
    }


    .location-card {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 12px;
    }


     .map-frame {
     function buildOsmUrl(lat, lng) {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--map-border);
      border-radius: var(--radius);
      background: #f8f8f8;
    }


    .map-frame iframe {
        const delta = 0.003;
      display: block;
      width: 100%;
      height: 250px;
      border: 0;
    }


    .action-buttons {
        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}`;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 15px;
     }
     }


    .action-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 12px 16px;
      border-radius: var(--radius-sm);
      border: 1px solid transparent;
      text-decoration: none;
      font-weight: 700;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
      overflow: hidden;
      isolation: isolate;
      transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        background-color var(--transition),
        color var(--transition);
      will-change: transform;
      -webkit-tap-highlight-color: transparent;
    }


     .action-btn::before {
     function init() {
      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 {
        document.getElementById("mapFrame").src =
      position: relative;
            buildOsmUrl(MAP_LAT, MAP_LNG);
      z-index: 1;
      white-space: nowrap;
    }


    .action-btn:hover,
        document.getElementById("neshanOverlay").href =
    .action-btn:focus-visible {
            BALAD_URL;
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
    }


    .action-btn:hover::before,
        document.getElementById("routeBtn").href =
    .action-btn:focus-visible::before {
            BALAD_URL;
      opacity: 1;
      animation: buttonShine 0.9s ease forwards;
    }


    .action-btn:focus-visible {
        document.getElementById("callBtn").href =
      outline: 2px solid rgba(25, 118, 210, 0.35);
            "tel:" + CONTACT_PHONE;
      outline-offset: 3px;
     }
     }


    .action-btn:active {
      transform: translateY(-1px);
      box-shadow: var(--shadow-soft);
    }


     .route-btn {
     function openShareSheet() {
      background: var(--route-bg);
      color: var(--route-text);
      border-color: var(--route-border);
    }


    .call-btn {
        const url = window.location.href;
      background: var(--call-bg);
        const text = "لوکیشن ما";
      color: var(--call-text);
      border-color: var(--call-border);
    }


    .share-btn {
        document.getElementById("shareSheet").style.display = "flex";
      background: var(--share-bg);
      color: var(--share-text);
      border-color: var(--share-border);
    }


    @keyframes buttonShine {
         document.getElementById("shareTelegram").href =
      0% {
            `https://t.me/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
         right: -30%;
        bottom: -120%;
        opacity: 0;
      }
      15% {
        opacity: 1;
      }
      100% {
        right: 78%;
        bottom: 105%;
        opacity: 0;
      }
    }


    @media (max-width: 768px) {
        document.getElementById("shareWhatsApp").href =
      .map-frame iframe {
            `https://wa.me/?text=${encodeURIComponent(text + " " + url)}`;
        height: 220px;
      }


      .action-buttons {
        document.getElementById("shareEitaa").href =
        grid-template-columns: 1fr;
            `https://eitaa.com/share/url?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
      }


      .action-btn {
        document.getElementById("shareBale").href =
        width: 100%;
            `https://ble.ir/share?url=${encodeURIComponent(url)}&text=${encodeURIComponent(text)}`;
        min-height: 48px;
        font-size: 14px;
      }


      .action-btn span {
        document.getElementById("shareRobika").href =
        white-space: normal;
            `https://rubika.ir/`;
      }
     }
     }


    @media (prefers-reduced-motion: reduce) {
      .action-btn,
      .action-btn::before {
        transition: none;
        animation: none !important;
      }


      .action-btn:hover,
    function closeShareSheet() {
      .action-btn:focus-visible,
      .action-btn:active {
        transform: none;
      }


      .action-btn:hover::before,
        document.getElementById("shareSheet").style.display =
      .action-btn:focus-visible::before {
            "none";
        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;
    async function copyLink() {
          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}`;
        await navigator.clipboard.writeText(window.location.href);


          document.getElementById("dynamic-map").src = mapUrl;
        alert("لینک کپی شد");
        </script>
      </div>
    </section>


    <nav class="action-buttons" aria-label="راه‌های ارتباطی و دسترسی">
         closeShareSheet();
      <a
    }
         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
    init();
        type="button"
        class="action-btn share-btn"
        title="اشتراک‌گذاری لینک این صفحه"
        aria-label="اشتراک‌گذاری لینک صفحه"
        onclick="sharePage()"
      >
        <span>اشتراک‌گذاری</span>
      </button>
    </nav>
  </main>


  <script>
</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>
</body>
</html>
</html>

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

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

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

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