لوکیشن/دماوند پلیمر - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
< | <html lang="fa" dir="rtl"> | ||
<head> | |||
<meta charset="UTF-8"> | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
<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: 600px; margin: 0 auto; font-family: Tahoma, sans-serif; } | |||
.map-card { position: relative; border: 1px solid #e0e0e0; border-radius: 16px; overflow: hidden; background: #eee; height: 280px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); } | |||
.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; } | |||
.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; } | |||
.share- | .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; } | |||
@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; } | |||
.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 img { width: 100%; height: 100%; object-fit: cover; } | |||
.share-label { font-size: 12px; } | |||
</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> | |||
<script> | |||
const MAP_LAT = 35.51553379708153; | const MAP_LAT = 35.51553379708153; | ||
const MAP_LNG = 51.1508280605789; | const MAP_LNG = 51.1508280605789; | ||
const CONTACT_PHONE = "09120000000"; | |||
const BALAD_URL = `https://balad.ir/p/${MAP_LAT},${MAP_LNG}`; | |||
const | |||
function buildOsmUrl(lat, lng) { | |||
const delta = 0.003; | |||
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}`; | |||
} | |||
function | function init() { | ||
document.getElementById("mapFrame").src = buildOsmUrl(MAP_LAT, MAP_LNG); | |||
document.getElementById("neshanOverlay").href = BALAD_URL; | |||
document.getElementById("routeBtn").href = BALAD_URL; | |||
document.getElementById("callBtn").href = "tel:" + CONTACT_PHONE; | |||
} | } | ||
function openShareSheet() { | function openShareSheet() { | ||
const url = window.location.href; | |||
const text = "لوکیشن ما"; | |||
document.getElementById("shareSheet").style.display = "flex"; | |||
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("shareRobika").href = `https://rubika.ir/`; | |||
} | } | ||
| خط ۵۷: | خط ۱۰۲: | ||
async function copyLink() { | async function copyLink() { | ||
await navigator.clipboard.writeText(window.location.href); | |||
alert("لینک کپی شد"); | |||
closeShareSheet(); | |||
} | } | ||
init(); | |||
</script> | |||
</body> | |||
</html> | </html> | ||
