لوکیشن/دماوند پلیمر - فراغیب
بدون خلاصۀ ویرایش |
بدون خلاصۀ ویرایش |
||
| (۱۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد) | |||
| خط ۱: | خط ۱: | ||
<html> | <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: 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; | |||
} | |||
.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; | |||
} | |||
.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> | ||
<a id=" | |||
<a id="callBtn" | |||
class="btn btn-call"> | |||
تماس | |||
</a> | </a> | ||
<button | |||
< | type="button" | ||
class="btn btn-share" | |||
onclick="openShareSheet()"> | |||
اشتراکگذاری | |||
</button> | |||
</ | |||
</div> | </div> | ||
<div class="share-label"> | </div> | ||
</a> | |||
< | |||
<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> | ||
</div> | </div> | ||
<script> | |||
const MAP_LAT = 35.51553379708153; | |||
const MAP_LNG = 51.1508280605789; | |||
const CONTACT_PHONE = "09192472912"; | |||
const BALAD_URL = | |||
`https://balad.ir/p/${MAP_LAT},${MAP_LNG}`; | |||
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 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() { | |||
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/`; | |||
} | |||
function closeShareSheet() { | |||
document.getElementById("shareSheet").style.display = | |||
"none"; | |||
} | |||
async function copyLink() { | |||
await navigator.clipboard.writeText(window.location.href); | |||
alert("لینک کپی شد"); | |||
closeShareSheet(); | |||
} | |||
init(); | |||
</script> | |||
</body> | |||
</html> | </html> | ||
