764 lines
46 KiB
HTML
764 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fa" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>شهرنگار | سامانه جامع مدیریت و رسیدگی به مسائل شهری</title>
|
|
|
|
<!-- Tailwind CSS CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
vazir: ['Vazirmatn', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#ecfdf5',
|
|
100: '#d1fae5',
|
|
500: '#10b981',
|
|
600: '#059669',
|
|
700: '#047857',
|
|
800: '#065f46',
|
|
900: '#064e3b',
|
|
},
|
|
city: {
|
|
blue: '#2563eb',
|
|
dark: '#0f172a',
|
|
card: '#1e293b'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Google Font Vazirmatn -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
|
|
<!-- FontAwesome Icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
|
|
<!-- Leaflet CSS & JS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<!-- Chart.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<!-- SweetAlert2 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
}
|
|
.leaflet-popup-content-wrapper {
|
|
border-radius: 12px;
|
|
direction: rtl;
|
|
font-family: 'Vazirmatn', sans-serif;
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: #f1f5f9;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: #cbd5e1;
|
|
border-radius: 4px;
|
|
}
|
|
.pulse-dot {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: .5; transform: scale(1.15); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-800 antialiased min-h-screen flex flex-col">
|
|
|
|
<!-- Top Announcement Bar -->
|
|
<div class="bg-gradient-to-r from-emerald-700 via-teal-700 to-cyan-800 text-white text-xs py-2 px-4 text-center font-medium flex items-center justify-between shadow-inner">
|
|
<div class="flex items-center gap-2 mx-auto">
|
|
<span class="bg-white/20 px-2 py-0.5 rounded-full text-[11px] animate-pulse">سامانه برخط ۱۳۷</span>
|
|
<span>همراهی شما برای شهری زیباتر، ایمنتر و پاکتر • پاسخگویی ۲۴ ساعته</span>
|
|
</div>
|
|
<div class="hidden md:flex items-center gap-4 text-emerald-100">
|
|
<span id="currentDateTime"><i class="fa-regular fa-clock ml-1"></i> امروز شنبه</span>
|
|
<span>|</span>
|
|
<span><i class="fa-solid fa-phone-volume ml-1"></i> تلفن ارتباط مردمی: ۱۳۷</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Navigation -->
|
|
<header class="bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-20">
|
|
|
|
<!-- Logo & Title -->
|
|
<div class="flex items-center gap-3 cursor-pointer" onclick="switchTab('feed')">
|
|
<div class="w-12 h-12 rounded-2xl bg-gradient-to-tr from-emerald-600 to-teal-500 flex items-center justify-center text-white shadow-lg shadow-emerald-500/20 text-2xl">
|
|
<i class="fa-solid fa-city"></i>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-2xl font-black bg-gradient-to-l from-emerald-700 to-teal-600 bg-clip-text text-transparent">شهرنگار</span>
|
|
<span class="text-[10px] uppercase tracking-wider bg-emerald-100 text-emerald-800 font-bold px-2 py-0.5 rounded">نسخه هوشمند</span>
|
|
</div>
|
|
<p class="text-xs text-slate-500 font-medium">سامانه یکپارچه گزارش و نظارت مردمی بر مسائل شهری</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation Tabs -->
|
|
<nav class="hidden md:flex items-center gap-1 bg-slate-100/80 p-1.5 rounded-2xl border border-slate-200/80">
|
|
<button onclick="switchTab('feed')" id="nav-feed" class="nav-btn px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-200 bg-white text-emerald-700 shadow-sm">
|
|
<i class="fa-solid fa-list-check ml-1.5"></i>گزارشهای مردمی
|
|
</button>
|
|
<button onclick="switchTab('map')" id="nav-map" class="nav-btn px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-200 text-slate-600 hover:text-emerald-600">
|
|
<i class="fa-solid fa-map-location-dot ml-1.5"></i>نقشه تعاملی
|
|
</button>
|
|
<button onclick="switchTab('track')" id="nav-track" class="nav-btn px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-200 text-slate-600 hover:text-emerald-600">
|
|
<i class="fa-solid fa-magnifying-glass ml-1.5"></i>پیگیری گزارش
|
|
</button>
|
|
<button onclick="switchTab('admin')" id="nav-admin" class="nav-btn px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-200 text-slate-600 hover:text-emerald-600">
|
|
<i class="fa-solid fa-chart-pie ml-1.5"></i>داشبورد مدیریت
|
|
</button>
|
|
</nav>
|
|
|
|
<!-- Call to Action Button -->
|
|
<div class="flex items-center gap-3">
|
|
<button onclick="openNewReportModal()" class="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white px-4 sm:px-6 py-2.5 rounded-xl font-bold text-sm shadow-md shadow-emerald-600/20 hover:shadow-lg transition-all duration-200 flex items-center gap-2">
|
|
<i class="fa-solid fa-circle-plus text-base"></i>
|
|
<span>ثبت گزارش مشکل</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Nav Bar -->
|
|
<div class="md:hidden flex items-center justify-around border-t border-slate-200 py-2 bg-slate-50 text-xs">
|
|
<button onclick="switchTab('feed')" class="flex flex-col items-center gap-1 text-emerald-700 font-bold">
|
|
<i class="fa-solid fa-list-check text-base"></i>
|
|
<span>گزارشها</span>
|
|
</button>
|
|
<button onclick="switchTab('map')" class="flex flex-col items-center gap-1 text-slate-600">
|
|
<i class="fa-solid fa-map-location-dot text-base"></i>
|
|
<span>نقشه</span>
|
|
</button>
|
|
<button onclick="switchTab('track')" class="flex flex-col items-center gap-1 text-slate-600">
|
|
<i class="fa-solid fa-magnifying-glass text-base"></i>
|
|
<span>پیگیری</span>
|
|
</button>
|
|
<button onclick="switchTab('admin')" class="flex flex-col items-center gap-1 text-slate-600">
|
|
<i class="fa-solid fa-chart-pie text-base"></i>
|
|
<span>مدیریت</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero & Quick Search Section -->
|
|
<section class="bg-gradient-to-b from-white to-slate-100 border-b border-slate-200 py-8 px-4 sm:px-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-center">
|
|
|
|
<!-- Left Banner / Text -->
|
|
<div class="lg:col-span-7 space-y-4">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-100 text-emerald-800 text-xs font-semibold">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span>
|
|
<span>صدای شما، اقدام سریع شهرداری و بازرسان شهری</span>
|
|
</div>
|
|
<h1 class="text-2xl sm:text-4xl font-extrabold text-slate-900 leading-tight">
|
|
شهر خود را با مشارکت هوشمند، <br class="hidden sm:inline">
|
|
<span class="text-emerald-600">زیباتر و امنتر</span> بسازید
|
|
</h1>
|
|
<p class="text-slate-600 text-sm sm:text-base leading-relaxed max-w-2xl">
|
|
خرابی آسفالت، سد معبر، نقص روشنایی پارکها، انباشت پسماند یا مشکلات ترافیکی را در کمتر از ۱ دقیقه گزارش کنید و وضعیت رسیدگی را مرحله به مرحله رصد نمایید.
|
|
</p>
|
|
|
|
<!-- Quick Search / Track Form -->
|
|
<div class="pt-2 flex flex-col sm:flex-row gap-2 max-w-xl">
|
|
<div class="relative flex-1">
|
|
<i class="fa-solid fa-hashtag absolute right-3.5 top-3.5 text-slate-400 text-sm"></i>
|
|
<input type="text" id="quickTrackInput" placeholder="کد رهگیری (مثلاً SHR-78214) یا عبارت جستجو..." class="w-full pr-10 pl-4 py-3 rounded-xl border border-slate-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-200 outline-none text-sm font-medium transition-all shadow-sm">
|
|
</div>
|
|
<button onclick="handleQuickSearch()" class="bg-slate-900 hover:bg-slate-800 text-white px-6 py-3 rounded-xl font-bold text-sm transition-all shadow-sm flex items-center justify-center gap-2">
|
|
<i class="fa-solid fa-search"></i>
|
|
<span>جستجو و پیگیری</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Real-time Stats Cards -->
|
|
<div class="lg:col-span-5 grid grid-cols-2 gap-3">
|
|
<div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-md transition-all">
|
|
<div class="flex items-center justify-between text-slate-400 mb-2">
|
|
<span class="text-xs font-semibold text-slate-500">کل موارد ثبتشده</span>
|
|
<div class="w-8 h-8 rounded-lg bg-blue-50 text-blue-600 flex items-center justify-center text-sm">
|
|
<i class="fa-solid fa-file-lines"></i>
|
|
</div>
|
|
</div>
|
|
<div class="text-2xl sm:text-3xl font-black text-slate-900" id="stat-total">--</div>
|
|
<div class="text-[11px] text-slate-400 mt-1">گزارشهای شهروندی</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-md transition-all">
|
|
<div class="flex items-center justify-between text-slate-400 mb-2">
|
|
<span class="text-xs font-semibold text-emerald-600">مسائل رفع شده</span>
|
|
<div class="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center text-sm">
|
|
<i class="fa-solid fa-circle-check"></i>
|
|
</div>
|
|
</div>
|
|
<div class="text-2xl sm:text-3xl font-black text-emerald-600" id="stat-resolved">--</div>
|
|
<div class="text-[11px] text-emerald-600/80 mt-1 font-medium" id="stat-rate">نرخ تکمیل: --٪</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-md transition-all">
|
|
<div class="flex items-center justify-between text-slate-400 mb-2">
|
|
<span class="text-xs font-semibold text-amber-600">در حال عملیات و اجرا</span>
|
|
<div class="w-8 h-8 rounded-lg bg-amber-50 text-amber-600 flex items-center justify-center text-sm">
|
|
<i class="fa-solid fa-screwdriver-wrench"></i>
|
|
</div>
|
|
</div>
|
|
<div class="text-2xl sm:text-3xl font-black text-amber-600" id="stat-in-progress">--</div>
|
|
<div class="text-[11px] text-slate-400 mt-1">اکیپ مستقر در محل</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-4 rounded-2xl border border-slate-200/80 shadow-sm hover:shadow-md transition-all">
|
|
<div class="flex items-center justify-between text-slate-400 mb-2">
|
|
<span class="text-xs font-semibold text-purple-600">تایید و همراهی شهروندان</span>
|
|
<div class="w-8 h-8 rounded-lg bg-purple-50 text-purple-600 flex items-center justify-center text-sm">
|
|
<i class="fa-solid fa-thumbs-up"></i>
|
|
</div>
|
|
</div>
|
|
<div class="text-2xl sm:text-3xl font-black text-purple-600" id="stat-upvotes">--</div>
|
|
<div class="text-[11px] text-slate-400 mt-1">رأی و حمایت مردمی</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Categories Horizontal Bar -->
|
|
<div class="bg-white border-b border-slate-200 py-3 px-4 shadow-sm overflow-x-auto custom-scrollbar">
|
|
<div class="max-w-7xl mx-auto flex items-center gap-2 min-w-max">
|
|
<span class="text-xs font-bold text-slate-400 ml-2">دستهبندیها:</span>
|
|
<button onclick="filterByCategory('all')" class="cat-pill active px-3.5 py-1.5 rounded-full text-xs font-bold bg-slate-900 text-white transition-all">
|
|
همه موضوعات
|
|
</button>
|
|
<button onclick="filterByCategory('آسفالت و معابر')" class="cat-pill px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 hover:bg-emerald-50 hover:text-emerald-700 transition-all flex items-center gap-1.5">
|
|
<i class="fa-solid fa-road text-amber-500"></i> آسفالت و چالهها
|
|
</button>
|
|
<button onclick="filterByCategory('روشنایی و برق')" class="cat-pill px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 hover:bg-emerald-50 hover:text-emerald-700 transition-all flex items-center gap-1.5">
|
|
<i class="fa-solid fa-lightbulb text-yellow-500"></i> روشنایی و تیر برق
|
|
</button>
|
|
<button onclick="filterByCategory('نظافت و پسماند')" class="cat-pill px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 hover:bg-emerald-50 hover:text-emerald-700 transition-all flex items-center gap-1.5">
|
|
<i class="fa-solid fa-trash-can text-red-500"></i> نظافت و سطل زباله
|
|
</button>
|
|
<button onclick="filterByCategory('فضای سبز و بوستانها')" class="cat-pill px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 hover:bg-emerald-50 hover:text-emerald-700 transition-all flex items-center gap-1.5">
|
|
<i class="fa-solid fa-tree text-emerald-500"></i> بوستان و درختان
|
|
</button>
|
|
<button onclick="filterByCategory('ترافیک و حملونقل')" class="cat-pill px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 hover:bg-emerald-50 hover:text-emerald-700 transition-all flex items-center gap-1.5">
|
|
<i class="fa-solid fa-traffic-light text-blue-500"></i> چراغ و علائم ترافیکی
|
|
</button>
|
|
<button onclick="filterByCategory('ساختمانسازی و سد معبر')" class="cat-pill px-3.5 py-1.5 rounded-full text-xs font-semibold bg-slate-100 text-slate-600 hover:bg-emerald-50 hover:text-emerald-700 transition-all flex items-center gap-1.5">
|
|
<i class="fa-solid fa-person-digging text-orange-500"></i> سد معبر و ساختمانی
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Views Container -->
|
|
<main class="flex-1 max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
|
|
<!-- VIEW 1: PUBLIC FEED -->
|
|
<div id="view-feed" class="space-y-6">
|
|
|
|
<!-- Filters and Sorting Toolbar -->
|
|
<div class="bg-white p-4 rounded-2xl border border-slate-200 flex flex-wrap items-center justify-between gap-4 shadow-sm">
|
|
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
<!-- District Filter -->
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-xs font-bold text-slate-500">منطقه شهرداری:</label>
|
|
<select id="filterDistrict" onchange="applyFilters()" class="text-xs bg-slate-50 border border-slate-300 rounded-lg px-3 py-1.5 font-medium outline-none focus:ring-1 focus:ring-emerald-500">
|
|
<option value="0">تمام مناطق (۱ تا ۲۲)</option>
|
|
<option value="1">منطقه ۱ (شمرانات/تجریش)</option>
|
|
<option value="2">منطقه ۲ (سعادتآباد/شهرک غرب)</option>
|
|
<option value="3">منطقه ۳ (ونک/قلهک/میرداماد)</option>
|
|
<option value="4">منطقه ۴ (تهرانپارس/هروی)</option>
|
|
<option value="5">منطقه ۵ (صادقیه/پونک/جنتآباد)</option>
|
|
<option value="6">منطقه ۶ (یوسفآباد/امیرآباد/فاطمی)</option>
|
|
<option value="7">منطقه ۷ (سهروردی/مطهری)</option>
|
|
<option value="8">منطقه ۸ (نارمک/مجیدیه)</option>
|
|
<option value="9">منطقه ۹ (آزادی/استادمعین)</option>
|
|
<option value="10">منطقه ۱۰ (نواب/جیحون)</option>
|
|
<option value="11">منطقه ۱۱ (جمهوری/منیریه)</option>
|
|
<option value="12">منطقه ۱۲ (بازار/بهارستان)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Status Filter -->
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-xs font-bold text-slate-500">وضعیت رسیدگی:</label>
|
|
<select id="filterStatus" onchange="applyFilters()" class="text-xs bg-slate-50 border border-slate-300 rounded-lg px-3 py-1.5 font-medium outline-none focus:ring-1 focus:ring-emerald-500">
|
|
<option value="all">همه وضعیتها</option>
|
|
<option value="pending">در صف بررسی اولیه</option>
|
|
<option value="reviewing">بررسی کارشناسی</option>
|
|
<option value="in_progress">در حال اجرای عملیات</option>
|
|
<option value="resolved">رفع و حل شده</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Priority Filter -->
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-xs font-bold text-slate-500">سطح فوریت:</label>
|
|
<select id="filterPriority" onchange="applyFilters()" class="text-xs bg-slate-50 border border-slate-300 rounded-lg px-3 py-1.5 font-medium outline-none focus:ring-1 focus:ring-emerald-500">
|
|
<option value="all">همه اولویتها</option>
|
|
<option value="emergency">🚨 فوری و خطرآفرین</option>
|
|
<option value="high">اولویت بالا</option>
|
|
<option value="medium">متوسط</option>
|
|
<option value="low">عادی</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sort By -->
|
|
<div class="flex items-center gap-2">
|
|
<label class="text-xs font-bold text-slate-500">مرتبسازی:</label>
|
|
<select id="sortBy" onchange="applyFilters()" class="text-xs bg-slate-50 border border-slate-300 rounded-lg px-3 py-1.5 font-medium outline-none focus:ring-1 focus:ring-emerald-500">
|
|
<option value="newest">جدیدترین گزارشها</option>
|
|
<option value="upvotes">بیشترین تایید شهروندی (محبوبترین)</option>
|
|
<option value="emergency">بیشترین فوریت و خطر</option>
|
|
<option value="oldest">قدیمیترین</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Issues Cards Grid -->
|
|
<div id="issuesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Dynamic Cards rendered via JS -->
|
|
</div>
|
|
|
|
<!-- Empty State / Loading -->
|
|
<div id="feedLoading" class="py-16 text-center">
|
|
<div class="inline-block animate-spin text-4xl text-emerald-600 mb-3">
|
|
<i class="fa-solid fa-circle-notch"></i>
|
|
</div>
|
|
<p class="text-slate-500 text-sm font-medium">در حال بارگذاری گزارشهای شهری...</p>
|
|
</div>
|
|
|
|
<div id="feedEmpty" class="hidden py-16 bg-white rounded-3xl border border-slate-200 text-center px-4">
|
|
<div class="w-16 h-16 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center mx-auto text-2xl mb-3">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-slate-800 mb-1">موردی با این مشخصات یافت نشد</h3>
|
|
<p class="text-slate-500 text-sm mb-4">میتوانید فیلترها را تغییر دهید یا خودتان اولین گزارش را ثبت کنید.</p>
|
|
<button onclick="openNewReportModal()" class="bg-emerald-600 text-white px-5 py-2 rounded-xl text-sm font-bold shadow hover:bg-emerald-700">
|
|
ثبت گزارش جدید
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- VIEW 2: INTERACTIVE MAP -->
|
|
<div id="view-map" class="hidden space-y-4">
|
|
<div class="bg-white p-4 rounded-2xl border border-slate-200 flex flex-wrap items-center justify-between gap-3 shadow-sm">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
|
|
<i class="fa-solid fa-map-marked-alt text-emerald-600"></i>
|
|
<span>نقشه زنده و پراکندگی مسائل شهری</span>
|
|
</h2>
|
|
<p class="text-xs text-slate-500">برای مشاهده جزئیات، عکسها و وضعیت هر موضوع، روی نشانگرهای نقشه کلیک کنید.</p>
|
|
</div>
|
|
|
|
<!-- Map Legend -->
|
|
<div class="flex flex-wrap items-center gap-3 text-xs">
|
|
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-amber-500"></span> در حال بررسی/اجرا</span>
|
|
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-emerald-500"></span> رفع شده</span>
|
|
<span class="flex items-center gap-1.5"><span class="w-3 h-3 rounded-full bg-red-500"></span> نیازمند اقدام فوری</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Container -->
|
|
<div class="bg-white p-2 rounded-3xl border border-slate-200 shadow-md">
|
|
<div id="leafletMap" class="w-full h-[600px] rounded-2xl z-10"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- VIEW 3: TRACKING PORTAL -->
|
|
<div id="view-track" class="hidden space-y-6">
|
|
|
|
<!-- Tracking Search Box -->
|
|
<div class="bg-gradient-to-br from-slate-900 via-slate-800 to-teal-950 text-white p-6 sm:p-10 rounded-3xl shadow-xl">
|
|
<div class="max-w-2xl mx-auto text-center space-y-4">
|
|
<div class="w-14 h-14 bg-emerald-500/20 text-emerald-400 rounded-2xl flex items-center justify-center mx-auto text-2xl">
|
|
<i class="fa-solid fa-route"></i>
|
|
</div>
|
|
<h2 class="text-2xl sm:text-3xl font-black">سامانه پیگیری و استعلام گزارشهای شهری</h2>
|
|
<p class="text-slate-300 text-sm leading-relaxed">
|
|
با وارد کردن کد پیگیری (مانند <span class="font-mono bg-white/10 px-2 py-0.5 rounded text-emerald-300">SHR-78214</span>)، از آخرین وضعیت اقدامات شهرداری، اعزام اکیپ و تصاویر قبل و بعد مطلع شوید.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-2 pt-2">
|
|
<input type="text" id="trackCodeInput" placeholder="کد رهگیری را اینجا وارد کنید..." class="flex-1 px-5 py-3.5 rounded-2xl bg-white/10 border border-white/20 text-white placeholder-slate-400 focus:bg-white/20 focus:border-emerald-400 outline-none text-center font-bold tracking-wider text-base">
|
|
<button onclick="fetchTrackingDetail()" class="bg-emerald-500 hover:bg-emerald-600 text-slate-950 font-black px-8 py-3.5 rounded-2xl transition-all shadow-lg shadow-emerald-500/30 flex items-center justify-center gap-2">
|
|
<i class="fa-solid fa-magnifying-glass"></i>
|
|
<span>استعلام وضعیت</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tracking Result Container -->
|
|
<div id="trackResultContainer" class="hidden bg-white rounded-3xl border border-slate-200 p-6 sm:p-8 shadow-sm space-y-8">
|
|
<!-- Populated via JS -->
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- VIEW 4: ADMIN / MUNICIPALITY DASHBOARD -->
|
|
<div id="view-admin" class="hidden space-y-6">
|
|
|
|
<!-- Admin Header -->
|
|
<div class="bg-white p-6 rounded-3xl border border-slate-200 flex flex-wrap items-center justify-between gap-4 shadow-sm">
|
|
<div>
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 text-blue-800 text-xs font-bold mb-2">
|
|
<i class="fa-solid fa-shield-halved"></i>
|
|
<span>مرکز کنترل و نظارت شهرداری (شهردید)</span>
|
|
</div>
|
|
<h2 class="text-xl sm:text-2xl font-black text-slate-900">میز خدمت کارشناسان و بازرسان شهری</h2>
|
|
<p class="text-xs sm:text-sm text-slate-500 mt-1">رسیدگی به تیکتهای شهروندان، تغییر وضعیت، ثبت گزارش اکیپ اجرایی و صدور دستور کار</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<button onclick="loadStats(); loadAdminIssues();" class="bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-xl text-xs font-bold flex items-center gap-2">
|
|
<i class="fa-solid fa-rotate"></i>
|
|
<span>بروزرسانی دادهها</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
<!-- Categories Bar Chart -->
|
|
<div class="lg:col-span-8 bg-white p-6 rounded-3xl border border-slate-200 shadow-sm">
|
|
<h3 class="text-sm font-bold text-slate-800 mb-4 flex items-center gap-2">
|
|
<i class="fa-solid fa-chart-column text-emerald-600"></i>
|
|
<span>توزیع موضوعی مسائل گزارششده</span>
|
|
</h3>
|
|
<div class="h-64">
|
|
<canvas id="categoryChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Doughnut Chart -->
|
|
<div class="lg:col-span-4 bg-white p-6 rounded-3xl border border-slate-200 shadow-sm">
|
|
<h3 class="text-sm font-bold text-slate-800 mb-4 flex items-center gap-2">
|
|
<i class="fa-solid fa-chart-pie text-teal-600"></i>
|
|
<span>وضعیت پروندهها</span>
|
|
</h3>
|
|
<div class="h-64 flex items-center justify-center">
|
|
<canvas id="statusChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Admin Issues Table -->
|
|
<div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<div class="p-5 border-b border-slate-100 flex flex-wrap items-center justify-between gap-3 bg-slate-50/50">
|
|
<h3 class="text-sm font-bold text-slate-900 flex items-center gap-2">
|
|
<i class="fa-solid fa-table-list text-slate-600"></i>
|
|
<span>جدول مدیریت و صدور دستور کار پروندهها</span>
|
|
</h3>
|
|
<span class="text-xs text-slate-500" id="adminTableCount">در حال بارگذاری...</span>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-right text-xs">
|
|
<thead class="bg-slate-100/70 text-slate-600 font-bold border-b border-slate-200">
|
|
<tr>
|
|
<th class="py-3.5 px-4">کد رهگیری</th>
|
|
<th class="py-3.5 px-4">عنوان و موقعیت</th>
|
|
<th class="py-3.5 px-4">دستهبندی</th>
|
|
<th class="py-3.5 px-4">منطقه</th>
|
|
<th class="py-3.5 px-4">اولویت</th>
|
|
<th class="py-3.5 px-4">وضعیت جاری</th>
|
|
<th class="py-3.5 px-4">تاریخ ثبت</th>
|
|
<th class="py-3.5 px-4 text-center">عملیات بازرسی</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="adminTableBody" class="divide-y divide-slate-100">
|
|
<!-- Populated via JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- MODAL 1: SUBMIT NEW REPORT -->
|
|
<div id="newReportModal" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm hidden flex items-center justify-center p-4 overflow-y-auto">
|
|
<div class="bg-white rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl border border-slate-100 custom-scrollbar">
|
|
|
|
<!-- Modal Header -->
|
|
<div class="bg-gradient-to-r from-emerald-700 to-teal-700 text-white p-6 sticky top-0 z-20 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center text-lg">
|
|
<i class="fa-solid fa-bullhorn"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold">ثبت گزارش جدید مشکل شهری</h3>
|
|
<p class="text-xs text-emerald-100">گزارش شما مستقیماً به شهرداری منطقه و سامانه ۱۳۷ ارسال خواهد شد</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="closeNewReportModal()" class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/25 flex items-center justify-center transition-all">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Body Form -->
|
|
<form id="newReportForm" onsubmit="submitNewReport(event)" class="p-6 space-y-5">
|
|
|
|
<!-- Category Selector -->
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-2">دستهبندی موضوع <span class="text-red-500">*</span></label>
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 gap-2" id="modalCategoryGrid">
|
|
<label class="category-radio border border-slate-200 rounded-xl p-3 flex flex-col items-center gap-1.5 cursor-pointer hover:border-emerald-500 transition-all text-center">
|
|
<input type="radio" name="category" value="آسفالت و معابر" checked class="hidden">
|
|
<i class="fa-solid fa-road text-amber-500 text-lg"></i>
|
|
<span class="text-xs font-semibold">آسفالت و معابر</span>
|
|
</label>
|
|
<label class="category-radio border border-slate-200 rounded-xl p-3 flex flex-col items-center gap-1.5 cursor-pointer hover:border-emerald-500 transition-all text-center">
|
|
<input type="radio" name="category" value="روشنایی و برق" class="hidden">
|
|
<i class="fa-solid fa-lightbulb text-yellow-500 text-lg"></i>
|
|
<span class="text-xs font-semibold">روشنایی و تیر برق</span>
|
|
</label>
|
|
<label class="category-radio border border-slate-200 rounded-xl p-3 flex flex-col items-center gap-1.5 cursor-pointer hover:border-emerald-500 transition-all text-center">
|
|
<input type="radio" name="category" value="نظافت و پسماند" class="hidden">
|
|
<i class="fa-solid fa-trash-can text-red-500 text-lg"></i>
|
|
<span class="text-xs font-semibold">نظافت و پسماند</span>
|
|
</label>
|
|
<label class="category-radio border border-slate-200 rounded-xl p-3 flex flex-col items-center gap-1.5 cursor-pointer hover:border-emerald-500 transition-all text-center">
|
|
<input type="radio" name="category" value="فضای سبز و بوستانها" class="hidden">
|
|
<i class="fa-solid fa-tree text-emerald-500 text-lg"></i>
|
|
<span class="text-xs font-semibold">فضای سبز</span>
|
|
</label>
|
|
<label class="category-radio border border-slate-200 rounded-xl p-3 flex flex-col items-center gap-1.5 cursor-pointer hover:border-emerald-500 transition-all text-center">
|
|
<input type="radio" name="category" value="ترافیک و حملونقل" class="hidden">
|
|
<i class="fa-solid fa-traffic-light text-blue-500 text-lg"></i>
|
|
<span class="text-xs font-semibold">ترافیک و تابلوها</span>
|
|
</label>
|
|
<label class="category-radio border border-slate-200 rounded-xl p-3 flex flex-col items-center gap-1.5 cursor-pointer hover:border-emerald-500 transition-all text-center">
|
|
<input type="radio" name="category" value="ساختمانسازی و سد معبر" class="hidden">
|
|
<i class="fa-solid fa-person-digging text-orange-500 text-lg"></i>
|
|
<span class="text-xs font-semibold">سد معبر</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">عنوان خلاصه مشکل <span class="text-red-500">*</span></label>
|
|
<input type="text" id="reportTitle" required placeholder="مثال: چاله عمیق در تقاطع خیابان ولیعصر" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none text-sm">
|
|
</div>
|
|
|
|
<!-- District & Priority Row -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">منطقه شهرداری <span class="text-red-500">*</span></label>
|
|
<select id="reportDistrict" required class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none text-sm">
|
|
<option value="1">منطقه ۱ (شمرانات/تجریش)</option>
|
|
<option value="2">منطقه ۲ (سعادتآباد/شهرک غرب)</option>
|
|
<option value="3" selected>منطقه ۳ (ونک/قلهک/میرداماد)</option>
|
|
<option value="4">منطقه ۴ (تهرانپارس/هروی)</option>
|
|
<option value="5">منطقه ۵ (صادقیه/پونک)</option>
|
|
<option value="6">منطقه ۶ (یوسفآباد/امیرآباد)</option>
|
|
<option value="7">منطقه ۷ (مطهری/سهروردی)</option>
|
|
<option value="8">منطقه ۸ (نارمک/مجیدیه)</option>
|
|
<option value="9">منطقه ۹ (آزادی/استادمعین)</option>
|
|
<option value="10">منطقه ۱۰ (نواب/جیحون)</option>
|
|
<option value="11">منطقه ۱۱ (جمهوری/منیریه)</option>
|
|
<option value="12">منطقه ۱۲ (بازار/بهارستان)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">سطح فوریت و خطر</label>
|
|
<select id="reportPriority" class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none text-sm font-semibold">
|
|
<option value="low">🟢 عادی</option>
|
|
<option value="medium" selected>🟡 متوسط</option>
|
|
<option value="high">🟠 بالا</option>
|
|
<option value="emergency">🔴 فوری و خطر جانی/مالی</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Address -->
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">نشانی دقیق محل <span class="text-red-500">*</span></label>
|
|
<input type="text" id="reportAddress" required placeholder="خیابان، کوچه، پلاک یا نشانه بارز نزدیک محل..." class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none text-sm">
|
|
</div>
|
|
|
|
<!-- Interactive Map Location Picker -->
|
|
<div>
|
|
<div class="flex items-center justify-between mb-1.5">
|
|
<label class="text-xs font-bold text-slate-700">تعیین دقیق موقعیت روی نقشه</label>
|
|
<span class="text-[11px] text-emerald-600 font-medium"><i class="fa-solid fa-location-crosshairs ml-1"></i>نشانگر را حرکت دهید یا روی نقشه کلیک کنید</span>
|
|
</div>
|
|
<div id="pickerMap" class="w-full h-44 rounded-xl border border-slate-300 z-10"></div>
|
|
<input type="hidden" id="reportLat" value="35.7538">
|
|
<input type="hidden" id="reportLng" value="51.4172">
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">شرح کامل مشکل <span class="text-red-500">*</span></label>
|
|
<textarea id="reportDescription" rows="3" required placeholder="لطفاً جزئیات بیشتری درباره مشکل، ابعاد و خسارتهای احتمالی بنویسید..." class="w-full px-4 py-2.5 rounded-xl border border-slate-300 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none text-sm"></textarea>
|
|
</div>
|
|
|
|
<!-- Photo Selection / Upload -->
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">تصویر مشکل (اختیاری)</label>
|
|
<div class="grid grid-cols-3 gap-2 mb-2">
|
|
<div onclick="selectSampleImage(this, 'https://images.unsplash.com/photo-1515162816999-a0c47dc192f7?auto=format&fit=crop&w=800&q=80')" class="sample-img-card border-2 border-slate-200 rounded-xl overflow-hidden cursor-pointer hover:border-emerald-500 transition-all p-1 text-center">
|
|
<img src="https://images.unsplash.com/photo-1515162816999-a0c47dc192f7?auto=format&fit=crop&w=300&q=80" class="w-full h-14 object-cover rounded-lg mb-1">
|
|
<span class="text-[10px] text-slate-600 block">نمونه آسفالت</span>
|
|
</div>
|
|
<div onclick="selectSampleImage(this, 'https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?auto=format&fit=crop&w=800&q=80')" class="sample-img-card border-2 border-slate-200 rounded-xl overflow-hidden cursor-pointer hover:border-emerald-500 transition-all p-1 text-center">
|
|
<img src="https://images.unsplash.com/photo-1532996122724-e3c354a0b15b?auto=format&fit=crop&w=300&q=80" class="w-full h-14 object-cover rounded-lg mb-1">
|
|
<span class="text-[10px] text-slate-600 block">نمونه پسماند</span>
|
|
</div>
|
|
<div onclick="selectSampleImage(this, 'https://images.unsplash.com/photo-1509114397022-ed747cca3f65?auto=format&fit=crop&w=800&q=80')" class="sample-img-card border-2 border-slate-200 rounded-xl overflow-hidden cursor-pointer hover:border-emerald-500 transition-all p-1 text-center">
|
|
<img src="https://images.unsplash.com/photo-1509114397022-ed747cca3f65?auto=format&fit=crop&w=300&q=80" class="w-full h-14 object-cover rounded-lg mb-1">
|
|
<span class="text-[10px] text-slate-600 block">نمونه روشنایی</span>
|
|
</div>
|
|
</div>
|
|
<input type="text" id="reportImageUrl" placeholder="یا آدرس تصویر اینترنتی را وارد کنید..." class="w-full px-4 py-2 rounded-xl border border-slate-300 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none text-xs">
|
|
</div>
|
|
|
|
<!-- Reporter Contact Info -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 bg-slate-50 p-4 rounded-2xl border border-slate-200">
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1">نام گزارشدهنده (اختیاری)</label>
|
|
<input type="text" id="reporterName" placeholder="مثلاً: محمد رضایی" class="w-full px-3 py-2 rounded-lg border border-slate-300 bg-white text-xs outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1">شماره همراه (جهت پیامک پیگیری)</label>
|
|
<input type="tel" id="reporterPhone" placeholder="0912..." class="w-full px-3 py-2 rounded-lg border border-slate-300 bg-white text-xs outline-none dir-ltr text-right">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="pt-3 border-t border-slate-100 flex items-center justify-end gap-3">
|
|
<button type="button" onclick="closeNewReportModal()" class="px-5 py-2.5 rounded-xl border border-slate-300 text-slate-600 hover:bg-slate-50 text-sm font-semibold transition-all">
|
|
انصراف
|
|
</button>
|
|
<button type="submit" id="submitReportBtn" class="bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white px-8 py-2.5 rounded-xl font-bold text-sm shadow-md shadow-emerald-600/30 transition-all flex items-center gap-2">
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
<span>ارسال و ثبت نهایی گزارش</span>
|
|
</button>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL 2: ISSUE DETAIL & TIMELINE -->
|
|
<div id="detailModal" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm hidden flex items-center justify-center p-4 overflow-y-auto">
|
|
<div class="bg-white rounded-3xl max-w-3xl w-full max-h-[92vh] overflow-y-auto shadow-2xl border border-slate-100 custom-scrollbar">
|
|
<div id="detailModalContent">
|
|
<!-- Dynamically rendered via JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL 3: ADMIN STATUS UPDATE -->
|
|
<div id="adminActionModal" class="fixed inset-0 z-50 bg-slate-900/60 backdrop-blur-sm hidden flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-3xl max-w-lg w-full p-6 shadow-2xl border border-slate-100 space-y-4">
|
|
<div class="flex items-center justify-between border-b border-slate-100 pb-3">
|
|
<h3 class="text-base font-bold text-slate-900 flex items-center gap-2">
|
|
<i class="fa-solid fa-pen-to-square text-emerald-600"></i>
|
|
<span>بهروزرسانی وضعیت و پاسخ کارشناسی</span>
|
|
</h3>
|
|
<button onclick="closeAdminActionModal()" class="text-slate-400 hover:text-slate-600">
|
|
<i class="fa-solid fa-xmark text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="adminActionForm" onsubmit="submitAdminAction(event)" class="space-y-4">
|
|
<input type="hidden" id="adminTargetIssueId">
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1">تغییر وضعیت پرونده</label>
|
|
<select id="adminNewStatus" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm font-semibold outline-none focus:border-emerald-500">
|
|
<option value="pending">در صف بررسی اولیه</option>
|
|
<option value="reviewing">بررسی کارشناسی و ارجاع به اکیپ</option>
|
|
<option value="in_progress">در حال اجرای عملیات میدانی</option>
|
|
<option value="resolved">رفع و حل کامل مشکل</option>
|
|
<option value="rejected">رد گزارش (خارج از اختیارات/اطلاعات ناقص)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1">عنوان مرحله در تایملاین</label>
|
|
<input type="text" id="adminTimelineTitle" placeholder="مثال: اعزام اکیپ آسفالتریزی به محل..." class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs outline-none">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1">پاسخ رسمی و توضیحات اکیپ اجرایی</label>
|
|
<textarea id="adminOfficialResponse" rows="3" placeholder="توضیحات دقیق بازرس، کد اکیپ اعزامی، اقدامات انجام شده..." class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs outline-none"></textarea>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-slate-700 mb-1">آدرس تصویر رفع مشکل (پس از انجام کار)</label>
|
|
<input type="text" id="adminResolvedImage" placeholder="https://..." class="w-full px-3.5 py-2 rounded-xl border border-slate-300 text-xs outline-none dir-ltr text-right">
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-2 pt-2 border-t border-slate-100">
|
|
<button type="button" onclick="closeAdminActionModal()" class="px-4 py-2 rounded-xl border border-slate-200 text-xs font-semibold">انصراف</button>
|
|
<button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-2 rounded-xl text-xs font-bold shadow-md shadow-emerald-600/20">ثبت تغییرات</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-slate-900 text-slate-400 text-xs py-8 px-4 border-t border-slate-800 mt-12">
|
|
<div class="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-xl bg-emerald-600 text-white flex items-center justify-center text-sm font-bold">
|
|
<i class="fa-solid fa-city"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-slate-200 font-bold">سامانه هوشمند گزارش و رسیدگی به مسائل شهری «شهرنگار»</p>
|
|
<p class="text-[11px] text-slate-500">طراحی و پیادهسازی برای ارتقای کیفیت زندگی و خدمات شهری</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-6 text-slate-400">
|
|
<span class="hover:text-white cursor-pointer" onclick="switchTab('feed')">گزارشها</span>
|
|
<span class="hover:text-white cursor-pointer" onclick="switchTab('map')">نقشه زنده</span>
|
|
<span class="hover:text-white cursor-pointer" onclick="switchTab('track')">استعلام کد رهگیری</span>
|
|
<span class="hover:text-white cursor-pointer" onclick="switchTab('admin')">پنل بازرسان</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- App Logic JS -->
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|