فراغیب

الگو:لوکیشن: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
بدون خلاصۀ ویرایش
برچسب: برگردانده‌شده
خط ۴: خط ۴:
     <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">
     <title>مسیریابی و اشتراک‌گذاری لوکیشن</title>
     <title>مسیریابی و اشتراک‌گذاری</title>
     <style>
     <style>
         :root {
         :root {
خط ۲۴: خط ۲۴:
         .btn-share { background: var(--btn-share); color: var(--text-share); }
         .btn-share { background: var(--btn-share); color: var(--text-share); }


         /* Modal Styles */
         /* Modal Styles - Centered */
         .share-sheet { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); align-items: flex-end; justify-content: center; }
         .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: 450px; background: #fff; border-radius: 20px 20px 0 0; padding: 20px; animation: slideUp 0.3s ease-out; }
         .share-panel { width: 100%; max-width: 350px; background: #fff; border-radius: 20px; padding: 25px; animation: fadeIn 0.3s; }
         @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
         @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
         .share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-top: 20px; }
       
         .share-item { text-decoration: none; text-align: center; color: #333; }
        /* 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 { 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-icon img { width: 100%; height: 100%; object-fit: cover; }
خط ۵۲: خط ۵۴:
<div id="shareSheet" class="share-sheet" onclick="if(event.target===this)closeShareSheet()">
<div id="shareSheet" class="share-sheet" onclick="if(event.target===this)closeShareSheet()">
     <div class="share-panel">
     <div class="share-panel">
         <div style="text-align: center; font-weight: bold; margin-bottom: 10px;">اشتراک‌گذاری موقعیت</div>
         <div style="text-align: center; font-weight: bold; margin-bottom: 10px;">اشتراک‌گذاری</div>
         <div class="share-grid">
         <div class="share-grid">
             <button class="share-item" onclick="copyLink()">
             <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>
                 <div class="share-icon"><img src="https://dl.faraghaib.ir/m/100/link.png" alt="کپی"></div><div class="share-label">کپی</div>
             </button>
             </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="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="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>
             <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>
         </div>
         <button onclick="closeShareSheet()" style="width:100%; margin-top:20px; padding:10px; border:none; background:#eee; border-radius:8px;">بستن</button>
         <button onclick="closeShareSheet()" style="width:100%; padding:12px; border:none; background:#f0f0f0; border-radius:10px; font-weight:bold;">بستن</button>
     </div>
     </div>
</div>
</div>
خط ۷۱: خط ۷۳:
     const MAP_LNG = 51.1508280605789;
     const MAP_LNG = 51.1508280605789;
     const CONTACT_PHONE = "09120000000";
     const CONTACT_PHONE = "09120000000";
    // لینک بلد با فرمت دقیق برای باز شدن مستقیم در اپلیکیشن
     const BALAD_URL = `https://balad.ir/p/${MAP_LAT},${MAP_LNG}`;  
     const BALAD_URL = `https://balad.ir/p/${MAP_LAT},${MAP_LNG}`;  


خط ۸۸: خط ۸۹:
     function openShareSheet() {
     function openShareSheet() {
         const url = window.location.href;
         const url = window.location.href;
         const text = "لوکیشن ما در نقشه";
         const text = "لوکیشن ما";
         document.getElementById("shareSheet").style.display = "flex";
         document.getElementById("shareSheet").style.display = "flex";
          
          
خط ۹۵: خط ۹۶:
         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 = `https://ble.ir/share?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/`; // روبیکا لینک مستقیم اشتراک‌گذاری عمومی ساده ندارد
         document.getElementById("shareRobika").href = `https://rubika.ir/`;  
     }
     }


برگرفته از «https://fa.faraghaib.ir/wiki/الگو:لوکیشن»