650 lines
25 KiB
HTML
650 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
<meta name="theme-color" content="#2c3e50">
|
|
<meta name="referrer" content="strict-origin-when-cross-origin">
|
|
<title>مواقف السيارات في دمشق</title>
|
|
|
|
<!-- Leaflet CSS for interactive map -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
input, button { -webkit-user-select: text; user-select: text; }
|
|
|
|
body {
|
|
background-color: #f8f9fa;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
padding-bottom: 70px;
|
|
padding-bottom: calc(70px + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 16px;
|
|
}
|
|
|
|
/* ===== HEADER ===== */
|
|
header {
|
|
background: linear-gradient(135deg, #2c3e50, #4a6491);
|
|
color: white;
|
|
padding: 16px 0;
|
|
text-align: center;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
border-bottom: 4px solid #e74c3c;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo { font-size: 24px; }
|
|
h1 { font-size: 22px; font-weight: 700; }
|
|
.subtitle {
|
|
text-align: center;
|
|
margin: 12px 0 20px;
|
|
color: #7f8c8d;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* ===== SEARCH BAR ===== */
|
|
.search-bar {
|
|
display: flex;
|
|
margin: 16px 0;
|
|
gap: 8px;
|
|
background: white;
|
|
padding: 8px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.search-bar input {
|
|
flex: 1;
|
|
padding: 12px 16px;
|
|
border: 1px solid #e1e8ed;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.search-bar button {
|
|
background: linear-gradient(135deg, #3498db, #2980b9);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
min-width: 70px;
|
|
}
|
|
|
|
/* ===== CONTENT LAYOUT - DESKTOP DEFAULT ===== */
|
|
.content {
|
|
display: flex;
|
|
gap: 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.parking-list {
|
|
flex: 1;
|
|
min-width: 300px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 19px;
|
|
margin: 10px 0 15px;
|
|
color: #2c3e50;
|
|
padding-bottom: 8px;
|
|
border-bottom: 2px solid #e74c3c;
|
|
display: inline-block;
|
|
}
|
|
|
|
.parking-item {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
margin-bottom: 14px;
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
|
|
border-right: 4px solid #3498db;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.parking-item:active { background: #f8f9ff; }
|
|
|
|
.parking-name {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
color: #2c3e50;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.parking-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.info-item { display: flex; align-items: center; gap: 4px; color: #555; }
|
|
|
|
.available, .full, .limited {
|
|
font-weight: bold;
|
|
padding: 4px 12px;
|
|
border-radius: 20px;
|
|
font-size: 13px;
|
|
}
|
|
.available { color: #27ae60; background: rgba(39, 174, 96, 0.12); }
|
|
.full { color: #e74c3c; background: rgba(231, 76, 60, 0.12); }
|
|
.limited { color: #f39c12; background: rgba(243, 156, 18, 0.12); }
|
|
|
|
/* ===== MAP CONTAINER ===== */
|
|
.map-toggle-btn {
|
|
display: none;
|
|
width: 100%;
|
|
padding: 12px;
|
|
background: #3498db;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.map-container {
|
|
height: 400px;
|
|
background-color: #e0e0e0;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
#map { width: 100%; height: 100%; }
|
|
|
|
/* ===== MODAL ===== */
|
|
.details-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background-color: white;
|
|
width: 100%;
|
|
max-width: 550px;
|
|
border-radius: 20px 20px 0 0;
|
|
padding: 24px 20px 30px;
|
|
position: relative;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.details-modal { align-items: center; }
|
|
.modal-content { border-radius: 16px; }
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
top: 12px;
|
|
left: 12px;
|
|
font-size: 26px;
|
|
cursor: pointer;
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: #f1f2f6;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 21px;
|
|
margin-bottom: 18px;
|
|
color: #2c3e50;
|
|
padding-left: 40px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 14px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px solid #f1f2f6;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.info-label { color: #7f8c8d; }
|
|
.info-value { color: #2c3e50; font-weight: 600; }
|
|
|
|
.reserve-btn {
|
|
background: linear-gradient(135deg, #27ae60, #2ecc71);
|
|
color: white;
|
|
border: none;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
font-size: 17px;
|
|
font-weight: 700;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.reserve-btn:disabled {
|
|
background: #bdc3c7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ===== FOOTER NAV (YouTube-style) ===== */
|
|
.app-footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
border-top: 1px solid #e1e8ed;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
|
|
z-index: 200;
|
|
box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
color: #7f8c8d;
|
|
font-size: 11px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-item.active { color: #3498db; background: rgba(52, 152, 219, 0.1); }
|
|
.nav-icon { font-size: 22px; }
|
|
|
|
/* ===== 📱 MOBILE-ONLY STYLES (max-width: 767px) ===== */
|
|
@media (max-width: 767px) {
|
|
.content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.parking-list {
|
|
order: 1;
|
|
min-width: 100%;
|
|
}
|
|
|
|
.map-toggle-btn {
|
|
display: block;
|
|
}
|
|
|
|
.map-container {
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition: height 0.3s ease;
|
|
}
|
|
|
|
.map-container.expanded {
|
|
height: 300px;
|
|
}
|
|
|
|
.modal-content {
|
|
border-radius: 16px 16px 0 0;
|
|
margin: 0 12px;
|
|
}
|
|
|
|
.nav-text { display: none; }
|
|
.nav-item { min-width: 50px; }
|
|
}
|
|
|
|
/* ===== DESKTOP: Hide app footer, show classic footer ===== */
|
|
@media (min-width: 1024px) {
|
|
.app-footer { display: none; }
|
|
body { padding-bottom: 0; }
|
|
.footer {
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
padding: 24px;
|
|
color: #7f8c8d;
|
|
border-top: 1px solid #ecf0f1;
|
|
display: block;
|
|
}
|
|
}
|
|
.footer { display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="container">
|
|
<div class="header-content">
|
|
<div class="logo">🅿️</div>
|
|
<h1>مواقف السيارات في دمشق</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<p class="subtitle">ابحث عن أقرب موقف سيارات متاح في دمشق واحجز مكانك بسهولة</p>
|
|
|
|
<div class="search-bar">
|
|
<input type="text" id="searchInput" placeholder="ابحث باسم الموقف أو المنطقة..." autocomplete="off">
|
|
<button id="searchBtn">بحث</button>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="parking-list">
|
|
<button class="map-toggle-btn" id="mapToggleBtn">🗺️ عرض الخريطة</button>
|
|
|
|
<div class="map-container" id="mapContainer">
|
|
<div id="map"></div>
|
|
</div>
|
|
|
|
<h2 class="section-title">مواقف السيارات المتاحة</h2>
|
|
<div id="parkingList"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Details Modal -->
|
|
<div class="details-modal" id="detailsModal">
|
|
<div class="modal-content">
|
|
<span class="close-btn" id="closeModal">×</span>
|
|
<h2 class="modal-title" id="modalTitle">اسم الموقف</h2>
|
|
<div class="modal-info">
|
|
<div class="info-row"><span class="info-label">السعة الكلية:</span><span class="info-value" id="modalTotal">0</span></div>
|
|
<div class="info-row"><span class="info-label">الأماكن المتاحة:</span><span class="info-value" id="modalAvailable">0</span></div>
|
|
<div class="info-row"><span class="info-label">سعر الساعة:</span><span class="info-value" id="modalPrice">0</span></div>
|
|
<div class="info-row"><span class="info-label">ساعات العمل:</span><span class="info-value" id="modalHours">24/7</span></div>
|
|
<div class="info-row"><span class="info-label">العنوان:</span><span class="info-value" id="modalAddress">...</span></div>
|
|
</div>
|
|
<button class="reserve-btn" id="reserveBtn">احجز مكان</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- YouTube-Style Footer Nav -->
|
|
<nav class="app-footer">
|
|
<a href="#" class="nav-item active" data-page="home"><span class="nav-icon">🏠</span><span class="nav-text">الرئيسية</span></a>
|
|
<a href="#" class="nav-item" data-page="map"><span class="nav-icon">🗺️</span><span class="nav-text">الخريطة</span></a>
|
|
<a href="#" class="nav-item" data-page="favorites"><span class="nav-icon">❤️</span><span class="nav-text">المفضلة</span></a>
|
|
<a href="#" class="nav-item" data-page="history"><span class="nav-icon">🕒</span><span class="nav-text">السجل</span></a>
|
|
<a href="#" class="nav-item" data-page="profile"><span class="nav-icon">👤</span><span class="nav-text">حسابي</span></a>
|
|
</nav>
|
|
|
|
<div class="footer">
|
|
<div class="container">
|
|
<p>تطبيق مواقف السيارات في دمشق © 2026 - جميع الحقوق محفوظة</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<script>
|
|
const parkingData = [
|
|
{ id: 1, name: "موقف ساحة الأمويين", address: "ساحة الأمويين، وسط مدينة دمشق", totalSpaces: 150, availableSpaces: 32, pricePerHour: 500, hours: "24/7", lat: 33.5138, lng: 36.2765 },
|
|
{ id: 2, name: "موقف الحرمون", address: "شارع الحرمون، المزة", totalSpaces: 80, availableSpaces: 0, pricePerHour: 300, hours: "06:00 - 00:00", lat: 33.4809, lng: 36.2586 },
|
|
{ id: 3, name: "موقف الجامعة", address: "جامعة دمشق، البرامكة", totalSpaces: 200, availableSpaces: 45, pricePerHour: 200, hours: "07:00 - 20:00", lat: 33.5102, lng: 36.2784 },
|
|
{ id: 4, name: "موقف الشعلان", address: "حي الشعلان، أبو رمانة", totalSpaces: 60, availableSpaces: 12, pricePerHour: 400, hours: "24/7", lat: 33.5215, lng: 36.2932 },
|
|
{ id: 5, name: "موقف المطار", address: "مطار دمشق الدولي", totalSpaces: 300, availableSpaces: 120, pricePerHour: 600, hours: "24/7", lat: 33.4144, lng: 36.5200 },
|
|
{ id: 6, name: "موقف التكية السليمانية", address: "التكية السليمانية، المرجة", totalSpaces: 100, availableSpaces: 25, pricePerHour: 350, hours: "08:00 - 22:00", lat: 33.5147, lng: 36.3065 },
|
|
{ id: 7, name: "موقف صحيفة تشرين", address: "جادة صحيفة تشرين، المالكي", totalSpaces: 70, availableSpaces: 5, pricePerHour: 450, hours: "07:00 - 23:00", lat: 33.5180, lng: 36.2760 },
|
|
{ id: 8, name: "موقف شارع بغداد", address: "شارع بغداد، الجسر الأبيض", totalSpaces: 90, availableSpaces: 40, pricePerHour: 300, hours: "24/7", lat: 33.5210, lng: 36.2900 }
|
|
];
|
|
|
|
const parkingList = document.getElementById('parkingList');
|
|
const searchInput = document.getElementById('searchInput');
|
|
const searchBtn = document.getElementById('searchBtn');
|
|
const detailsModal = document.getElementById('detailsModal');
|
|
const closeModal = document.getElementById('closeModal');
|
|
const reserveBtn = document.getElementById('reserveBtn');
|
|
const mapToggleBtn = document.getElementById('mapToggleBtn');
|
|
const mapContainer = document.getElementById('mapContainer');
|
|
|
|
let map, markers = [];
|
|
let currentParking = null;
|
|
|
|
function getAvailabilityStatus(available, total) {
|
|
if (available === 0) return 'full';
|
|
if (available < total * 0.2) return 'limited';
|
|
return 'available';
|
|
}
|
|
|
|
function formatPrice(price) {
|
|
return `${price.toLocaleString('ar-SY')} ل.س`;
|
|
}
|
|
|
|
function initMap() {
|
|
map = L.map('map', { attributionControl: false }).setView([33.5138, 36.2765], 12);
|
|
|
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
|
|
attribution: '',
|
|
subdomains: 'abcd',
|
|
maxZoom: 20
|
|
}).addTo(map);
|
|
|
|
parkingData.forEach(parking => {
|
|
const marker = L.marker([parking.lat, parking.lng]).addTo(map);
|
|
marker.bindPopup(`
|
|
<b>${parking.name}</b><br>
|
|
${parking.address}<br>
|
|
<span style="color:${parking.availableSpaces > 0 ? '#27ae60' : '#e74c3c'}">
|
|
${parking.availableSpaces} متاح من ${parking.totalSpaces}
|
|
</span>
|
|
`);
|
|
marker.parkingId = parking.id;
|
|
markers.push(marker);
|
|
});
|
|
|
|
if (markers.length > 0) {
|
|
const group = new L.featureGroup(markers);
|
|
const bounds = group.getBounds().pad(0.1);
|
|
map.fitBounds(bounds, {
|
|
padding: [20, 20],
|
|
maxZoom: 14
|
|
});
|
|
} else {
|
|
map.setView([33.5138, 36.2765], 13);
|
|
}
|
|
|
|
setTimeout(() => {
|
|
if (map) map.invalidateSize();
|
|
}, 300);
|
|
}
|
|
|
|
function displayParkingList(parkings) {
|
|
parkingList.innerHTML = '';
|
|
|
|
if (parkings.length === 0) {
|
|
parkingList.innerHTML = `
|
|
<div class="parking-item" style="text-align:center;padding:30px;background:#f8f9fa">
|
|
<p style="font-size:16px;color:#7f8c8d">لا توجد مواقف مطابقة للبحث</p>
|
|
<p style="margin-top:8px;font-size:13px;color:#95a5a6">جرب استخدام كلمات بحث أخرى</p>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
parkings.forEach(parking => {
|
|
const status = getAvailabilityStatus(parking.availableSpaces, parking.totalSpaces);
|
|
const statusText = {
|
|
'available': `${parking.availableSpaces} متاحة`,
|
|
'limited': `${parking.availableSpaces} متاحة (محدود)`,
|
|
'full': 'ممتلئ'
|
|
}[status];
|
|
|
|
const item = document.createElement('div');
|
|
item.className = 'parking-item';
|
|
item.innerHTML = `
|
|
<div class="parking-name"><span>🅿️</span>${parking.name}</div>
|
|
<div class="parking-info">
|
|
<div class="info-item"><span>📍</span><span>${parking.address}</span></div>
|
|
</div>
|
|
<div class="parking-info">
|
|
<div class="info-item"><span>🚗</span><span>${parking.totalSpaces} مكان</span></div>
|
|
<div class="${status}">${statusText}</div>
|
|
</div>
|
|
<div class="parking-info">
|
|
<div class="info-item"><span>💰</span><span>${formatPrice(parking.pricePerHour)}/ساعة</span></div>
|
|
<div class="info-item"><span>🕒</span><span>${parking.hours}</span></div>
|
|
</div>
|
|
`;
|
|
item.addEventListener('click', () => {
|
|
showParkingDetails(parking);
|
|
if (window.innerWidth < 768 && map) {
|
|
map.setView([parking.lat, parking.lng], 14);
|
|
if (!mapContainer.classList.contains('expanded')) {
|
|
mapContainer.classList.add('expanded');
|
|
mapToggleBtn.textContent = '🔼 إخفاء الخريطة';
|
|
setTimeout(() => map.invalidateSize(), 300);
|
|
}
|
|
}
|
|
});
|
|
parkingList.appendChild(item);
|
|
});
|
|
}
|
|
|
|
function showParkingDetails(parking) {
|
|
currentParking = parking;
|
|
document.getElementById('modalTitle').textContent = parking.name;
|
|
document.getElementById('modalTotal').textContent = parking.totalSpaces;
|
|
document.getElementById('modalAvailable').textContent = parking.availableSpaces;
|
|
document.getElementById('modalPrice').textContent = formatPrice(parking.pricePerHour) + '/ساعة';
|
|
document.getElementById('modalHours').textContent = parking.hours;
|
|
document.getElementById('modalAddress').textContent = parking.address;
|
|
|
|
if (parking.availableSpaces > 0) {
|
|
reserveBtn.textContent = 'احجز مكان الآن';
|
|
reserveBtn.disabled = false;
|
|
} else {
|
|
reserveBtn.textContent = 'لا توجد أماكن متاحة';
|
|
reserveBtn.disabled = true;
|
|
}
|
|
|
|
detailsModal.style.display = 'flex';
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeDetailsModal() {
|
|
detailsModal.style.display = 'none';
|
|
document.body.style.overflow = '';
|
|
}
|
|
|
|
function searchParkings() {
|
|
const term = searchInput.value.toLowerCase().trim();
|
|
const filtered = term === '' ? parkingData : parkingData.filter(p =>
|
|
p.name.toLowerCase().includes(term) ||
|
|
p.address.toLowerCase().includes(term)
|
|
);
|
|
displayParkingList(filtered);
|
|
|
|
if (map) {
|
|
markers.forEach(marker => {
|
|
const parking = parkingData.find(p => p.id === marker.parkingId);
|
|
if (!parking) return;
|
|
|
|
if (filtered.some(fp => fp.id === parking.id)) {
|
|
if (!map.hasLayer(marker)) marker.addTo(map);
|
|
} else {
|
|
if (map.hasLayer(marker)) map.removeLayer(marker);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function reserveParking() {
|
|
if (!currentParking || currentParking.availableSpaces <= 0) return;
|
|
|
|
currentParking.availableSpaces--;
|
|
showParkingDetails(currentParking);
|
|
displayParkingList(parkingData);
|
|
|
|
const marker = markers.find(m => m.parkingId === currentParking.id);
|
|
if (marker) {
|
|
marker.setPopupContent(`
|
|
<b>${currentParking.name}</b><br>
|
|
${currentParking.address}<br>
|
|
<span style="color:${currentParking.availableSpaces > 0 ? '#27ae60' : '#e74c3c'}">
|
|
${currentParking.availableSpaces} متاح من ${currentParking.totalSpaces}
|
|
</span>
|
|
`);
|
|
}
|
|
}
|
|
|
|
mapToggleBtn.addEventListener('click', () => {
|
|
const isExpanded = mapContainer.classList.toggle('expanded');
|
|
mapToggleBtn.textContent = isExpanded ? '🔼 إخفاء الخريطة' : '🗺️ عرض الخريطة';
|
|
if (map) setTimeout(() => map.invalidateSize(), 300);
|
|
});
|
|
|
|
searchBtn.addEventListener('click', searchParkings);
|
|
searchInput.addEventListener('keyup', (e) => { if (e.key === 'Enter') searchParkings(); });
|
|
closeModal.addEventListener('click', closeDetailsModal);
|
|
reserveBtn.addEventListener('click', reserveParking);
|
|
detailsModal.addEventListener('click', (e) => { if (e.target === detailsModal) closeDetailsModal(); });
|
|
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
|
|
item.classList.add('active');
|
|
|
|
const page = item.dataset.page;
|
|
if (page === 'map' && window.innerWidth < 768) {
|
|
if (!mapContainer.classList.contains('expanded')) {
|
|
mapContainer.classList.add('expanded');
|
|
mapToggleBtn.textContent = '🔼 إخفاء الخريطة';
|
|
if (map) setTimeout(() => map.invalidateSize(), 300);
|
|
}
|
|
const mapSection = document.getElementById('mapContainer');
|
|
if (mapSection) {
|
|
mapSection.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
displayParkingList(parkingData);
|
|
setTimeout(initMap, 100);
|
|
});
|
|
|
|
window.addEventListener('resize', () => {
|
|
if (map) map.invalidateSize();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|