لوکیشن - فراغیب
بدون خلاصۀ ویرایش برچسب: برگرداندهشده |
بدون خلاصۀ ویرایش برچسب: برگرداندهشده |
||
| خط ۴: | خط ۴: | ||
<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> | ||
<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: | .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: | .share-panel { width: 100%; max-width: 350px; background: #fff; border-radius: 20px; padding: 25px; animation: fadeIn 0.3s; } | ||
@keyframes | @keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } | ||
.share-grid { display: grid; grid-template-columns: repeat( | |||
.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 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 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% | <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/`; | ||
} | } | ||
