{"path":"/public_html/harta.php","name":"harta.php","size":44956,"extension":".php","modified":"2026-06-26T15:54:28.917501643Z","mode":420,"isDir":false,"isSymlink":false,"type":"text","content":"\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"sq\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"/\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/\u003e\n \u003ctitle\u003eLinProjekt — Harta e Projekteve\u003c/title\u003e\n \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"/\u003e\n \u003clink href=\"https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900\u0026family=Space+Mono:wght@400;700\u0026display=swap\" rel=\"stylesheet\"/\u003e\n \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css\"/\u003e\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js\"\u003e\u003c/script\u003e\n \u003cstyle\u003e\n :root {\n --black: #0a0e0c;\n --coal: #101512;\n --mint: #62c79b;\n --mint-s: #8fd9b9;\n --white: #f3f6f4;\n --grey: #8a958f;\n --line: rgba(98,199,155,.22);\n --line-s: rgba(98,199,155,.10);\n --amber: #e8a044;\n }\n *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\n body { font-family: 'Archivo', sans-serif; background: var(--black); color: var(--white); height: 100vh; display: flex; flex-direction: column; overflow: hidden; -webkit-font-smoothing: antialiased; }\n header { background: rgba(10,14,12,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); height: 60px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 1000; }\n .logo { display: flex; align-items: baseline; gap: 10px; font-weight: 900; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }\n .logo span { color: var(--mint); }\n .logo small { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--grey); letter-spacing: .2em; font-weight: 400; }\n .header-center { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--mint); display: flex; align-items: center; gap: 14px; }\n .header-center::before, .header-center::after { content: \"\"; width: 30px; height: 1px; background: var(--mint); }\n .header-stats { display: flex; gap: 28px; }\n .stat { text-align: right; line-height: 1; }\n .stat-num { font-size: 18px; font-weight: 800; color: var(--mint); letter-spacing: -.02em; }\n .stat-lbl { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); margin-top: 3px; }\n .main { display: flex; flex: 1; overflow: hidden; }\n .sidebar { width: 290px; background: var(--coal); border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; }\n .sidebar-top { padding: 14px 16px; border-bottom: 1px solid var(--line); }\n .search-wrap { position: relative; margin-bottom: 12px; }\n .search-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--grey); pointer-events: none; }\n .search-input { width: 100%; background: var(--black); border: 1px solid var(--line); color: var(--white); padding: 9px 12px 9px 34px; font-size: 12px; font-family: 'Archivo', sans-serif; outline: none; transition: border-color .2s; }\n .search-input:focus { border-color: var(--mint); }\n .search-input::placeholder { color: var(--grey); opacity: .6; }\n .filters { display: flex; gap: 5px; flex-wrap: wrap; }\n .fbtn { background: transparent; border: 1px solid var(--line); color: var(--grey); font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 5px 10px; cursor: pointer; transition: all .15s; }\n .fbtn:hover { border-color: var(--mint); color: var(--mint); }\n .fbtn.active { background: var(--mint); border-color: var(--mint); color: var(--black); }\n .proj-list { overflow-y: auto; flex: 1; }\n .proj-list::-webkit-scrollbar { width: 3px; }\n .proj-list::-webkit-scrollbar-thumb { background: var(--line); }\n .city-hdr { display: flex; align-items: center; padding: 8px 16px; background: var(--black); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; gap: 8px; }\n .city-dot { width: 5px; height: 5px; background: var(--mint); border-radius: 50%; flex-shrink: 0; }\n .city-name { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); flex: 1; }\n .city-cnt { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--grey); background: var(--line-s); border: 1px solid var(--line); padding: 1px 6px; }\n .proj-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line-s); cursor: pointer; transition: background .12s; }\n .proj-item:hover { background: rgba(98,199,155,.04); }\n .proj-item.active { background: rgba(98,199,155,.08); border-left: 2px solid var(--mint); padding-left: 14px; }\n .proj-ic { width: 30px; height: 30px; background: var(--black); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n .proj-item.active .proj-ic { border-color: var(--mint); background: rgba(98,199,155,.08); }\n .proj-info { flex: 1; min-width: 0; }\n .proj-name { font-size: 12px; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }\n .proj-type { font-family: 'Space Mono', monospace; font-size: 9px; color: var(--grey); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .08em; }\n .proj-badge { flex-shrink: 0; font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border: 1px solid; }\n .proj-badge.realizuar { color: var(--mint); border-color: var(--mint); background: rgba(98,199,155,.08); }\n .proj-badge.ne-realizim { color: var(--amber); border-color: var(--amber); background: rgba(232,160,68,.08); }\n #map { flex: 1; z-index: 1; }\n .leaflet-container { background: #0a0e0c; }\n .lp-popup .leaflet-popup-content-wrapper { background: var(--coal); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 16px 48px rgba(0,0,0,.8); color: var(--white); padding: 0; overflow: hidden; }\n .lp-popup .leaflet-popup-tip-container { display: none; }\n .lp-popup .leaflet-popup-content { margin: 0; min-width: 240px; }\n .lp-popup .leaflet-popup-close-button { color: var(--grey) !important; top: 10px !important; right: 12px !important; font-size: 18px !important; z-index: 10; }\n .pu-top { background: var(--black); border-bottom: 1px solid var(--line); padding: 14px 16px; display: flex; align-items: center; gap: 12px; }\n .pu-title { font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--white); line-height: 1; }\n .pu-city { font-family: 'Space Mono', monospace; font-size: 10px; color: var(--mint); margin-top: 4px; letter-spacing: .2em; }\n .pu-body { padding: 14px 16px; }\n .pu-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-s); font-size: 11px; }\n .pu-row:last-child { border-bottom: none; }\n .pu-key { font-family: 'Space Mono', monospace; font-size: 9px; letter-spacing: .14em; color: var(--grey); text-transform: uppercase; }\n .pu-val { font-weight: 600; color: var(--white); font-size: 11px; }\n .pu-status { font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid; }\n .pu-status.realizuar { color: var(--mint); border-color: var(--mint); background: rgba(98,199,155,.08); }\n .pu-status.ne-realizim { color: var(--amber); border-color: var(--amber); background: rgba(232,160,68,.08); }\n .legend { position: absolute; bottom: 28px; right: 14px; z-index: 900; background: rgba(16,21,18,.95); border: 1px solid var(--line); padding: 14px 16px; backdrop-filter: blur(8px); }\n .legend-title { font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin-bottom: 12px; }\n .legend-row { display: flex; align-items: center; gap: 9px; font-family: 'Space Mono', monospace; font-size: 10px; color: var(--grey); letter-spacing: .1em; margin-bottom: 8px; }\n .legend-row:last-child { margin-bottom: 0; }\n @media (max-width:640px) { .sidebar { display:none; } .header-stats,.header-center { display:none; } }\n \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cheader\u003e\n \u003cdiv class=\"logo\"\u003eLIN\u003cspan\u003ePROJEKT\u003c/span\u003e \u003csmall\u003eEST. 1991\u003c/small\u003e\u003c/div\u003e\n \u003cdiv class=\"header-center\"\u003eHarta e Projekteve\u003c/div\u003e\n \u003cdiv class=\"header-stats\"\u003e\n \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"stat-num\"\u003e28\u003c/div\u003e\u003cdiv class=\"stat-lbl\"\u003eProjekte\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"stat-num\"\u003e3\u003c/div\u003e\u003cdiv class=\"stat-lbl\"\u003eQytete\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"stat-num\"\u003e35+\u003c/div\u003e\u003cdiv class=\"stat-lbl\"\u003eVite\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n\u003c/header\u003e\n\u003cdiv class=\"main\"\u003e\n \u003cdiv class=\"sidebar\"\u003e\n \u003cdiv class=\"sidebar-top\"\u003e\n \u003cdiv class=\"search-wrap\"\u003e\n \u003csvg class=\"search-ic\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\u003e\u003ccircle cx=\"11\" cy=\"11\" r=\"8\"/\u003e\u003cpath d=\"m21 21-4.35-4.35\"/\u003e\u003c/svg\u003e\n \u003cinput class=\"search-input\" id=\"searchInput\" type=\"text\" placeholder=\"Kerko projekt...\"/\u003e\n \u003c/div\u003e\n \u003cdiv class=\"filters\"\u003e\n \u003cbutton class=\"fbtn active\" onclick=\"filterBy('all',this)\"\u003eTe gjitha\u003c/button\u003e\n \u003cbutton class=\"fbtn\" onclick=\"filterBy('Mitrovice',this)\"\u003eMitrovice\u003c/button\u003e\n \u003cbutton class=\"fbtn\" onclick=\"filterBy('Prishtine',this)\"\u003ePrishtine\u003c/button\u003e\n \u003cbutton class=\"fbtn\" onclick=\"filterBy('Vushtrri',this)\"\u003eVushtrri\u003c/button\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"proj-list\" id=\"projList\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n \u003cdiv class=\"legend\"\u003e\n \u003cdiv class=\"legend-title\"\u003eLegjenda\u003c/div\u003e\n \u003cdiv class=\"legend-row\"\u003e\n \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 40 40\"\u003e\u003crect x=\"2\" y=\"2\" width=\"36\" height=\"36\" rx=\"2\" fill=\"#62c79b\"/\u003e\u003crect x=\"9\" y=\"7\" width=\"22\" height=\"24\" rx=\"1\" fill=\"#0a0e0c\" opacity=\".9\"/\u003e\u003crect x=\"7\" y=\"27\" width=\"26\" height=\"4\" rx=\".5\" fill=\"#0a0e0c\"/\u003e\u003crect x=\"12\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#62c79b\"/\u003e\u003crect x=\"22\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#62c79b\"/\u003e\u003crect x=\"12\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#62c79b\"/\u003e\u003crect x=\"22\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#62c79b\"/\u003e\u003crect x=\"16\" y=\"24\" width=\"8\" height=\"7\" rx=\".5\" fill=\"#62c79b\"/\u003e\u003c/svg\u003e\n Realizuar\n \u003c/div\u003e\n \u003cdiv class=\"legend-row\"\u003e\n \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 40 40\"\u003e\u003crect x=\"2\" y=\"2\" width=\"36\" height=\"36\" rx=\"2\" fill=\"#e8a044\"/\u003e\u003crect x=\"9\" y=\"7\" width=\"22\" height=\"24\" rx=\"1\" fill=\"#0a0e0c\" opacity=\".9\"/\u003e\u003crect x=\"7\" y=\"27\" width=\"26\" height=\"4\" rx=\".5\" fill=\"#0a0e0c\"/\u003e\u003crect x=\"12\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#e8a044\"/\u003e\u003crect x=\"22\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#e8a044\"/\u003e\u003crect x=\"12\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#e8a044\"/\u003e\u003crect x=\"22\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#e8a044\"/\u003e\u003crect x=\"16\" y=\"24\" width=\"8\" height=\"7\" rx=\".5\" fill=\"#e8a044\"/\u003e\u003c/svg\u003e\n Ne realizim\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n\u003cscript\u003e\nconst projektet = [\n { id:'lp1', emri:'LP 1', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8908441, lng:20.8681172 },\n { id:'lp2', emri:'LP 2', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8905702, lng:20.8683610 },\n { id:'lp3', emri:'LP 3', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8892683, lng:20.8671902 },\n { id:'lp6', emri:'LP 6', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8897552, lng:20.8676297 },\n { id:'lp7', emri:'LP 7', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8797500, lng:20.8656067 },\n { id:'lp8', emri:'LP 8', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8877725, lng:20.8711176 },\n { id:'lp10', emri:'LP 10', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8882869, lng:20.8674064 },\n { id:'lp11', emri:'LP 11', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8892130, lng:20.8675700 },\n { id:'lp12', emri:'LP 12', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8889553, lng:20.8702328 },\n { id:'lp13', emri:'LP 13', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8900013, lng:20.8703320 },\n { id:'lp14', emri:'LP 14', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8869774, lng:20.8654414 },\n { id:'lp15', emri:'LP 15', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8884351, lng:20.8706274 },\n { id:'lp16', emri:'LP 16', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8800249, lng:20.8652355 },\n { id:'lp17', emri:'LP 17', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8912641, lng:20.8679070 },\n { id:'lp18', emri:'LP 18', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'ne-realizim', lat:42.8912113, lng:20.8693618 },\n { id:'lp19', emri:'LP 19', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8915029, lng:20.8697249 },\n { id:'lp20', emri:'LP 20', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8919109, lng:20.8701792 },\n { id:'lp21', emri:'LP 21', qyteti:'Mitrovice', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8920173, lng:20.8705392 },\n { id:'aquapark', emri:'Aquapark Mitrovica', qyteti:'Mitrovice', lloji:'Atraksion Rekreativ', statusi:'realizuar', lat:42.8841461, lng:20.8529745 },\n { id:'aci', emri:'Betonjerka ACI', qyteti:'Mitrovice', lloji:'Fabrike Betoni', statusi:'realizuar', lat:42.8986304, lng:20.8753193 },\n { id:'liqeni', emri:'Projektimi Liqeni Akumulues', qyteti:'Mitrovice', lloji:'Projekt Urbanistik', statusi:'realizuar', lat:42.8782152, lng:20.8431599 },\n { id:'komuna', emri:'Projektimi Komuna e Mitrovices', qyteti:'Mitrovice', lloji:'Projekt Urbanistik', statusi:'realizuar', lat:42.8888807, lng:20.8658689 },\n { id:'shetitorja', emri:'Shetitorja e Qytetit', qyteti:'Mitrovice', lloji:'Hapesire Publike Urbane', statusi:'realizuar', lat:42.8892720, lng:20.8690349 },\n { id:'vushtrri', emri:'LinProjekt Vushtrri', qyteti:'Vushtrri', lloji:'Kompleks Banesor-Afarist',statusi:'ne-realizim', lat:42.8164267, lng:20.9738734 },\n { id:'mati1', emri:'LinProjekt Mati 1', qyteti:'Prishtine', lloji:'Kompleks Banesor-Afarist', statusi:'realizuar', lat:42.6510892, lng:21.1764730 },\n { id:'prishtine-kulla', emri:'LinProjekt Prishtine 2 Kulla', qyteti:'Prishtine', lloji:'Kompleks Banesor-Afarist', statusi:'realizuar', lat:42.6523905, lng:21.1808256 },\n { id:'kalabria', emri:'LinProjekt Kalabria', qyteti:'Prishtine', lloji:'Kompleks Banesor-Afarist', statusi:'realizuar', lat:42.6368727, lng:21.1515238 },\n { id:'dardania', emri:'Plani Zhvillimor Dardania', qyteti:'Prishtine', lloji:'Plan Zhvillimor Urban', statusi:'realizuar', lat:42.6516754, lng:21.1540632 },\n];\nfunction mkIcon(statusi) {\n const c = statusi === 'realizuar' ? '#62c79b' : '#e8a044';\n const bg = '#0a0e0c';\n const svg = '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\" width=\"40\" height=\"40\"\u003e\u003cfilter id=\"sh\"\u003e\u003cfeDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"3\" flood-color=\"'+c+'\" flood-opacity=\".35\"/\u003e\u003c/filter\u003e\u003crect x=\"2\" y=\"2\" width=\"36\" height=\"36\" rx=\"2\" fill=\"'+c+'\" filter=\"url(#sh)\"/\u003e\u003crect x=\"9\" y=\"7\" width=\"22\" height=\"24\" rx=\"1\" fill=\"'+bg+'\" opacity=\".92\"/\u003e\u003crect x=\"7\" y=\"27\" width=\"26\" height=\"4\" rx=\".5\" fill=\"'+bg+'\"/\u003e\u003crect x=\"12\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003crect x=\"22\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003crect x=\"12\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003crect x=\"22\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003crect x=\"16\" y=\"24\" width=\"8\" height=\"7\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003c/svg\u003e';\n return L.divIcon({ html: svg, className:'', iconSize:[40,40], iconAnchor:[20,20], popupAnchor:[0,-24] });\n}\nconst map = L.map('map', { center:[42.79,20.98], zoom:10 });\nL.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', { attribution:'© CARTO', subdomains:'abcd', maxZoom:19 }).addTo(map);\nconst markers = {};\nfunction bIcon(c) { return '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"14\" height=\"14\"\u003e\u003crect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"1\" fill=\"none\" stroke=\"'+c+'\" stroke-width=\"1.8\"/\u003e\u003crect x=\"5\" y=\"7\" width=\"4\" height=\"3\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003crect x=\"15\" y=\"7\" width=\"4\" height=\"3\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003crect x=\"5\" y=\"13\" width=\"4\" height=\"3\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003crect x=\"15\" y=\"13\" width=\"4\" height=\"3\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003crect x=\"9\" y=\"16\" width=\"6\" height=\"5\" rx=\".5\" fill=\"'+c+'\"/\u003e\u003c/svg\u003e'; }\nprojektet.forEach(p =\u003e {\n const c = p.statusi==='realizuar'?'#62c79b':'#e8a044';\n const sLabel = p.statusi==='realizuar'?'Realizuar':'Ne realizim';\n const m = L.marker([p.lat,p.lng],{icon:mkIcon(p.statusi)}).addTo(map);\n m.bindPopup('\u003cdiv class=\"pu-top\"\u003e\u003cdiv style=\"flex-shrink:0\"\u003e'+bIcon(c)+'\u003c/div\u003e\u003cdiv\u003e\u003cdiv class=\"pu-title\"\u003e'+p.emri+'\u003c/div\u003e\u003cdiv class=\"pu-city\"\u003e'+p.qyteti+'\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\u003cdiv class=\"pu-body\"\u003e\u003cdiv class=\"pu-row\"\u003e\u003cspan class=\"pu-key\"\u003eLloji\u003c/span\u003e\u003cspan class=\"pu-val\"\u003e'+p.lloji+'\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"pu-row\"\u003e\u003cspan class=\"pu-key\"\u003eStatusi\u003c/span\u003e\u003cspan class=\"pu-status '+p.statusi+'\"\u003e'+sLabel+'\u003c/span\u003e\u003c/div\u003e\u003c/div\u003e',{className:'lp-popup',maxWidth:260});\n m.on('click',()=\u003e{document.querySelectorAll('.proj-item').forEach(e=\u003ee.classList.remove('active'));const el=document.getElementById('i-'+p.id);if(el){el.classList.add('active');el.scrollIntoView({behavior:'smooth',block:'nearest'});}});\n markers[p.id]=m;\n});\nconst CITIES=['Mitrovice','Vushtrri','Prishtine'];\nfunction buildList(data){\n const list=document.getElementById('projList');list.innerHTML='';\n const byCity={};\n data.forEach(p=\u003e{if(!byCity[p.qyteti])byCity[p.qyteti]=[];byCity[p.qyteti].push(p);});\n CITIES.forEach(city=\u003e{\n if(!byCity[city]?.length)return;\n const sec=document.createElement('div');\n const ch=document.createElement('div');ch.className='city-hdr';\n ch.innerHTML='\u003cdiv class=\"city-dot\"\u003e\u003c/div\u003e\u003cspan class=\"city-name\"\u003e'+city+'\u003c/span\u003e\u003cspan class=\"city-cnt\"\u003e'+byCity[city].length+'\u003c/span\u003e';\n sec.appendChild(ch);\n byCity[city].forEach(p=\u003e{\n const c=p.statusi==='realizuar'?'#62c79b':'#e8a044';\n const el=document.createElement('div');el.className='proj-item';el.id='i-'+p.id;\n el.innerHTML='\u003cdiv class=\"proj-ic\"\u003e'+bIcon(c)+'\u003c/div\u003e\u003cdiv class=\"proj-info\"\u003e\u003cdiv class=\"proj-name\"\u003e'+p.emri+'\u003c/div\u003e\u003cdiv class=\"proj-type\"\u003e'+p.lloji+'\u003c/div\u003e\u003c/div\u003e\u003cspan class=\"proj-badge '+p.statusi+'\"\u003e'+(p.statusi==='realizuar'?'\u0026#10003;':'\u0026#9679;')+'\u003c/span\u003e';\n el.addEventListener('click',()=\u003e{document.querySelectorAll('.proj-item').forEach(e=\u003ee.classList.remove('active'));el.classList.add('active');map.setView([p.lat,p.lng],16,{animate:true});markers[p.id].openPopup();});\n sec.appendChild(el);\n });\n list.appendChild(sec);\n });\n}\nbuildList(projektet);\nlet curCity='all';\nfunction filterBy(city,btn){curCity=city;document.querySelectorAll('.fbtn').forEach(b=\u003eb.classList.remove('active'));btn.classList.add('active');apply();}\ndocument.getElementById('searchInput').addEventListener('input',apply);\nfunction apply(){\n const q=document.getElementById('searchInput').value.toLowerCase();\n const f=projektet.filter(p=\u003e(curCity==='all'||p.qyteti===curCity)\u0026\u0026(p.emri.toLowerCase().includes(q)||p.lloji.toLowerCase().includes(q)));\n buildList(f);\n projektet.forEach(p=\u003e{const show=f.find(x=\u003ex.id===p.id);if(show\u0026\u0026!map.hasLayer(markers[p.id]))markers[p.id].addTo(map);if(!show\u0026\u0026map.hasLayer(markers[p.id]))map.removeLayer(markers[p.id]);});\n if(f.length)map.fitBounds(L.latLngBounds(f.map(p=\u003e[p.lat,p.lng])),{padding:[60,60]});\n}\nmap.fitBounds(L.latLngBounds(projektet.map(p=\u003e[p.lat,p.lng])),{padding:[60,60]});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\u003chtml lang=\"sq\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"UTF-8\"/\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/\u003e\n \u003ctitle\u003eLinProjekt — Harta e Projekteve\u003c/title\u003e\n \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"/\u003e\n \u003clink href=\"https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900\u0026family=Space+Mono:wght@400;700\u0026display=swap\" rel=\"stylesheet\"/\u003e\n \u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css\"/\u003e\n \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js\"\u003e\u003c/script\u003e\n \u003cstyle\u003e\n :root {\n --black: #0a0e0c;\n --coal: #101512;\n --mint: #62c79b;\n --mint-s: #8fd9b9;\n --white: #f3f6f4;\n --grey: #8a958f;\n --line: rgba(98,199,155,.22);\n --line-s: rgba(98,199,155,.10);\n --amber: #e8a044;\n }\n *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\n\n body {\n font-family: 'Archivo', sans-serif;\n background: var(--black);\n color: var(--white);\n height: 100vh;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n -webkit-font-smoothing: antialiased;\n }\n\n /* ── HEADER ───────────────────────────────────────── */\n header {\n background: rgba(10,14,12,.92);\n backdrop-filter: blur(14px);\n border-bottom: 1px solid var(--line);\n height: 60px;\n padding: 0 28px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n z-index: 1000;\n }\n .logo {\n display: flex;\n align-items: baseline;\n gap: 10px;\n font-weight: 900;\n font-size: 18px;\n letter-spacing: .04em;\n text-transform: uppercase;\n }\n .logo span { color: var(--mint); }\n .logo small {\n font-family: 'Space Mono', monospace;\n font-size: 10px;\n color: var(--grey);\n letter-spacing: .2em;\n font-weight: 400;\n }\n .header-center {\n font-family: 'Space Mono', monospace;\n font-size: 11px;\n letter-spacing: .28em;\n text-transform: uppercase;\n color: var(--mint);\n display: flex;\n align-items: center;\n gap: 14px;\n }\n .header-center::before,\n .header-center::after {\n content: \"\";\n width: 30px;\n height: 1px;\n background: var(--mint);\n }\n .header-stats {\n display: flex;\n gap: 28px;\n }\n .stat { text-align: right; line-height: 1; }\n .stat-num {\n font-size: 18px;\n font-weight: 800;\n color: var(--mint);\n letter-spacing: -.02em;\n }\n .stat-lbl {\n font-family: 'Space Mono', monospace;\n font-size: 9px;\n letter-spacing: .18em;\n text-transform: uppercase;\n color: var(--grey);\n margin-top: 3px;\n }\n\n /* ── LAYOUT ───────────────────────────────────────── */\n .main { display: flex; flex: 1; overflow: hidden; }\n\n /* ── SIDEBAR ──────────────────────────────────────── */\n .sidebar {\n width: 290px;\n background: var(--coal);\n border-right: 1px solid var(--line);\n display: flex;\n flex-direction: column;\n flex-shrink: 0;\n overflow: hidden;\n }\n\n .sidebar-top {\n padding: 14px 16px;\n border-bottom: 1px solid var(--line);\n }\n\n .search-wrap { position: relative; margin-bottom: 12px; }\n .search-ic {\n position: absolute;\n left: 11px; top: 50%;\n transform: translateY(-50%);\n color: var(--grey);\n pointer-events: none;\n }\n .search-input {\n width: 100%;\n background: var(--black);\n border: 1px solid var(--line);\n color: var(--white);\n padding: 9px 12px 9px 34px;\n font-size: 12px;\n font-family: 'Archivo', sans-serif;\n outline: none;\n transition: border-color .2s;\n }\n .search-input:focus { border-color: var(--mint); }\n .search-input::placeholder { color: var(--grey); opacity: .6; }\n\n .filters { display: flex; gap: 5px; flex-wrap: wrap; }\n .fbtn {\n background: transparent;\n border: 1px solid var(--line);\n color: var(--grey);\n font-family: 'Space Mono', monospace;\n font-size: 9px;\n font-weight: 700;\n letter-spacing: .18em;\n text-transform: uppercase;\n padding: 5px 10px;\n cursor: pointer;\n transition: all .15s;\n }\n .fbtn:hover { border-color: var(--mint); color: var(--mint); }\n .fbtn.active {\n background: var(--mint);\n border-color: var(--mint);\n color: var(--black);\n }\n\n /* list */\n .proj-list { overflow-y: auto; flex: 1; }\n .proj-list::-webkit-scrollbar { width: 3px; }\n .proj-list::-webkit-scrollbar-thumb { background: var(--line); }\n\n .city-hdr {\n display: flex;\n align-items: center;\n padding: 8px 16px;\n background: var(--black);\n border-bottom: 1px solid var(--line);\n position: sticky; top: 0; z-index: 2;\n gap: 8px;\n }\n .city-dot {\n width: 5px; height: 5px;\n background: var(--mint);\n border-radius: 50%;\n flex-shrink: 0;\n }\n .city-name {\n font-family: 'Space Mono', monospace;\n font-size: 9px;\n font-weight: 700;\n letter-spacing: .22em;\n text-transform: uppercase;\n color: var(--grey);\n flex: 1;\n }\n .city-cnt {\n font-family: 'Space Mono', monospace;\n font-size: 9px;\n color: var(--grey);\n background: var(--line-s);\n border: 1px solid var(--line);\n padding: 1px 6px;\n }\n\n .proj-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 10px 16px;\n border-bottom: 1px solid var(--line-s);\n cursor: pointer;\n transition: background .12s;\n }\n .proj-item:hover { background: rgba(98,199,155,.04); }\n .proj-item.active {\n background: rgba(98,199,155,.08);\n border-left: 2px solid var(--mint);\n padding-left: 14px;\n }\n\n .proj-ic {\n width: 30px; height: 30px;\n background: var(--black);\n border: 1px solid var(--line);\n display: flex; align-items: center; justify-content: center;\n flex-shrink: 0;\n }\n .proj-item.active .proj-ic { border-color: var(--mint); background: rgba(98,199,155,.08); }\n\n .proj-info { flex: 1; min-width: 0; }\n .proj-name {\n font-size: 12px;\n font-weight: 700;\n color: var(--white);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n letter-spacing: .01em;\n }\n .proj-type {\n font-family: 'Space Mono', monospace;\n font-size: 9px;\n color: var(--grey);\n margin-top: 3px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n letter-spacing: .08em;\n }\n .proj-badge {\n flex-shrink: 0;\n font-family: 'Space Mono', monospace;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: .1em;\n text-transform: uppercase;\n padding: 3px 7px;\n border: 1px solid;\n }\n .proj-badge.realizuar { color: var(--mint); border-color: var(--mint); background: rgba(98,199,155,.08); }\n .proj-badge.ne-realizim { color: var(--amber); border-color: var(--amber); background: rgba(232,160,68,.08); }\n\n /* ── MAP ──────────────────────────────────────────── */\n #map { flex: 1; z-index: 1; }\n .leaflet-container { background: #0a0e0c; }\n\n /* ── POPUP ────────────────────────────────────────── */\n .lp-popup .leaflet-popup-content-wrapper {\n background: var(--coal);\n border: 1px solid var(--line);\n border-radius: 0;\n box-shadow: 0 16px 48px rgba(0,0,0,.8);\n color: var(--white);\n padding: 0;\n overflow: hidden;\n }\n .lp-popup .leaflet-popup-tip-container { display: none; }\n .lp-popup .leaflet-popup-content { margin: 0; min-width: 240px; }\n .lp-popup .leaflet-popup-close-button {\n color: var(--grey) !important;\n top: 10px !important;\n right: 12px !important;\n font-size: 18px !important;\n z-index: 10;\n }\n\n .pu-top {\n background: var(--black);\n border-bottom: 1px solid var(--line);\n padding: 14px 16px;\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .pu-title {\n font-size: 15px;\n font-weight: 800;\n letter-spacing: .02em;\n text-transform: uppercase;\n color: var(--white);\n line-height: 1;\n }\n .pu-city {\n font-family: 'Space Mono', monospace;\n font-size: 10px;\n color: var(--mint);\n margin-top: 4px;\n letter-spacing: .2em;\n }\n .pu-body { padding: 14px 16px; }\n .pu-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 6px 0;\n border-bottom: 1px solid var(--line-s);\n font-size: 11px;\n }\n .pu-row:last-child { border-bottom: none; }\n .pu-key {\n font-family: 'Space Mono', monospace;\n font-size: 9px;\n letter-spacing: .14em;\n color: var(--grey);\n text-transform: uppercase;\n }\n .pu-val { font-weight: 600; color: var(--white); font-size: 11px; }\n .pu-status {\n font-family: 'Space Mono', monospace;\n font-size: 8px;\n font-weight: 700;\n letter-spacing: .12em;\n text-transform: uppercase;\n padding: 3px 8px;\n border: 1px solid;\n }\n .pu-status.realizuar { color: var(--mint); border-color: var(--mint); background: rgba(98,199,155,.08); }\n .pu-status.ne-realizim { color: var(--amber); border-color: var(--amber); background: rgba(232,160,68,.08); }\n\n /* ── LEGEND ───────────────────────────────────────── */\n .legend {\n position: absolute;\n bottom: 28px; right: 14px;\n z-index: 900;\n background: rgba(16,21,18,.95);\n border: 1px solid var(--line);\n padding: 14px 16px;\n backdrop-filter: blur(8px);\n }\n .legend-title {\n font-family: 'Space Mono', monospace;\n font-size: 9px;\n font-weight: 700;\n letter-spacing: .22em;\n text-transform: uppercase;\n color: var(--grey);\n margin-bottom: 12px;\n }\n .legend-row {\n display: flex;\n align-items: center;\n gap: 9px;\n font-family: 'Space Mono', monospace;\n font-size: 10px;\n color: var(--grey);\n letter-spacing: .1em;\n margin-bottom: 8px;\n }\n .legend-row:last-child { margin-bottom: 0; }\n\n @media (max-width:640px) { .sidebar { display:none; } .header-stats,.header-center { display:none; } }\n \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\n\u003cheader\u003e\n \u003cdiv class=\"logo\"\u003eLIN\u003cspan\u003ePROJEKT\u003c/span\u003e \u003csmall\u003eEST. 1991\u003c/small\u003e\u003c/div\u003e\n \u003cdiv class=\"header-center\"\u003eHarta e Projekteve\u003c/div\u003e\n \u003cdiv class=\"header-stats\"\u003e\n \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"stat-num\"\u003e28\u003c/div\u003e\u003cdiv class=\"stat-lbl\"\u003eProjekte\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"stat-num\"\u003e3\u003c/div\u003e\u003cdiv class=\"stat-lbl\"\u003eQytete\u003c/div\u003e\u003c/div\u003e\n \u003cdiv class=\"stat\"\u003e\u003cdiv class=\"stat-num\"\u003e35+\u003c/div\u003e\u003cdiv class=\"stat-lbl\"\u003eVite\u003c/div\u003e\u003c/div\u003e\n \u003c/div\u003e\n\u003c/header\u003e\n\n\u003cdiv class=\"main\"\u003e\n \u003cdiv class=\"sidebar\"\u003e\n \u003cdiv class=\"sidebar-top\"\u003e\n \u003cdiv class=\"search-wrap\"\u003e\n \u003csvg class=\"search-ic\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\u003e\u003ccircle cx=\"11\" cy=\"11\" r=\"8\"/\u003e\u003cpath d=\"m21 21-4.35-4.35\"/\u003e\u003c/svg\u003e\n \u003cinput class=\"search-input\" id=\"searchInput\" type=\"text\" placeholder=\"Kërko projekt...\"/\u003e\n \u003c/div\u003e\n \u003cdiv class=\"filters\"\u003e\n \u003cbutton class=\"fbtn active\" onclick=\"filterBy('all',this)\"\u003eTë gjitha\u003c/button\u003e\n \u003cbutton class=\"fbtn\" onclick=\"filterBy('Mitrovicë',this)\"\u003eMitrovicë\u003c/button\u003e\n \u003cbutton class=\"fbtn\" onclick=\"filterBy('Prishtinë',this)\"\u003ePrishtinë\u003c/button\u003e\n \u003cbutton class=\"fbtn\" onclick=\"filterBy('Vushtrri',this)\"\u003eVushtrri\u003c/button\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"proj-list\" id=\"projList\"\u003e\u003c/div\u003e\n \u003c/div\u003e\n\n \u003cdiv id=\"map\"\u003e\u003c/div\u003e\n\n \u003cdiv class=\"legend\"\u003e\n \u003cdiv class=\"legend-title\"\u003eLegjenda\u003c/div\u003e\n \u003cdiv class=\"legend-row\"\u003e\n \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 40 40\"\u003e\n \u003crect x=\"2\" y=\"2\" width=\"36\" height=\"36\" rx=\"2\" fill=\"#62c79b\"/\u003e\n \u003crect x=\"9\" y=\"7\" width=\"22\" height=\"24\" rx=\"1\" fill=\"#0a0e0c\" opacity=\".9\"/\u003e\n \u003crect x=\"7\" y=\"27\" width=\"26\" height=\"4\" rx=\".5\" fill=\"#0a0e0c\"/\u003e\n \u003crect x=\"12\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#62c79b\"/\u003e\n \u003crect x=\"22\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#62c79b\"/\u003e\n \u003crect x=\"12\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#62c79b\"/\u003e\n \u003crect x=\"22\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#62c79b\"/\u003e\n \u003crect x=\"16\" y=\"24\" width=\"8\" height=\"7\" rx=\".5\" fill=\"#62c79b\"/\u003e\n \u003c/svg\u003e\n Realizuar\n \u003c/div\u003e\n \u003cdiv class=\"legend-row\"\u003e\n \u003csvg width=\"20\" height=\"20\" viewBox=\"0 0 40 40\"\u003e\n \u003crect x=\"2\" y=\"2\" width=\"36\" height=\"36\" rx=\"2\" fill=\"#e8a044\"/\u003e\n \u003crect x=\"9\" y=\"7\" width=\"22\" height=\"24\" rx=\"1\" fill=\"#0a0e0c\" opacity=\".9\"/\u003e\n \u003crect x=\"7\" y=\"27\" width=\"26\" height=\"4\" rx=\".5\" fill=\"#0a0e0c\"/\u003e\n \u003crect x=\"12\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#e8a044\"/\u003e\n \u003crect x=\"22\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#e8a044\"/\u003e\n \u003crect x=\"12\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#e8a044\"/\u003e\n \u003crect x=\"22\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"#e8a044\"/\u003e\n \u003crect x=\"16\" y=\"24\" width=\"8\" height=\"7\" rx=\".5\" fill=\"#e8a044\"/\u003e\n \u003c/svg\u003e\n Në realizim\n \u003c/div\u003e\n \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cscript\u003e\nconst projektet = [\n { id:'lp1', emri:'LP 1', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8908441, lng:20.8681172 },\n { id:'lp2', emri:'LP 2', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8905702, lng:20.8683610 },\n { id:'lp3', emri:'LP 3', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8892683, lng:20.8671902 },\n { id:'lp6', emri:'LP 6', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8897552, lng:20.8676297 },\n { id:'lp7', emri:'LP 7', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8797500, lng:20.8656067 },\n { id:'lp8', emri:'LP 8', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8877725, lng:20.8711176 },\n { id:'lp10', emri:'LP 10', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8882869, lng:20.8674064 },\n { id:'lp11', emri:'LP 11', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8892130, lng:20.8675700 },\n { id:'lp12', emri:'LP 12', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8889553, lng:20.8702328 },\n { id:'lp13', emri:'LP 13', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8900013, lng:20.8703320 },\n { id:'lp14', emri:'LP 14', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8869774, lng:20.8654414 },\n { id:'lp15', emri:'LP 15', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8884351, lng:20.8706274 },\n { id:'lp16', emri:'LP 16', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8800249, lng:20.8652355 },\n { id:'lp17', emri:'LP 17', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8912641, lng:20.8679070 },\n { id:'lp18', emri:'LP 18', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'ne-realizim', lat:42.8912113, lng:20.8693618 },\n { id:'lp19', emri:'LP 19', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8915029, lng:20.8697249 },\n { id:'lp20', emri:'LP 20', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8919109, lng:20.8701792 },\n { id:'lp21', emri:'LP 21', qyteti:'Mitrovicë', lloji:'Objekt Banesor-Afarist', statusi:'realizuar', lat:42.8920173, lng:20.8705392 },\n { id:'aquapark', emri:'Aquapark Mitrovica', qyteti:'Mitrovicë', lloji:'Atraksion Rekreativ', statusi:'realizuar', lat:42.8841461, lng:20.8529745 },\n { id:'aci', emri:'Betonjerka ACI', qyteti:'Mitrovicë', lloji:'Fabrikë Betoni', statusi:'realizuar', lat:42.8986304, lng:20.8753193 },\n { id:'liqeni', emri:'Projektimi \"Liqeni Akumulues\"', qyteti:'Mitrovicë', lloji:'Projekt Urbanistik', statusi:'realizuar', lat:42.8782152, lng:20.8431599 },\n { id:'komuna', emri:'Projektimi \"Komuna e Mitrovicës\"', qyteti:'Mitrovicë', lloji:'Projekt Urbanistik', statusi:'realizuar', lat:42.8888807, lng:20.8658689 },\n { id:'shetitorja', emri:'Shëtitorja e Qytetit', qyteti:'Mitrovicë', lloji:'Hapësirë Publike Urbane', statusi:'realizuar', lat:42.8892720, lng:20.8690349 },\n { id:'vushtrri', emri:'LinProjekt Vushtrri', qyteti:'Vushtrri', lloji:'Kompleks Banesor-Afarist',statusi:'ne-realizim', lat:42.8164267, lng:20.9738734 },\n { id:'mati1', emri:'LinProjekt Mati 1', qyteti:'Prishtinë', lloji:'Kompleks Banesor-Afarist', statusi:'realizuar', lat:42.6510892, lng:21.1764730 },\n { id:'prishtine-kulla', emri:'LinProjekt Prishtinë (2 Kulla)', qyteti:'Prishtinë', lloji:'Kompleks Banesor-Afarist', statusi:'realizuar', lat:42.6523905, lng:21.1808256 },\n { id:'kalabria', emri:'LinProjekt Kalabria', qyteti:'Prishtinë', lloji:'Kompleks Banesor-Afarist', statusi:'realizuar', lat:42.6368727, lng:21.1515238 },\n { id:'dardania', emri:'Plani Zhvillimor \"Dardania\"', qyteti:'Prishtinë', lloji:'Plan Zhvillimor Urban', statusi:'realizuar', lat:42.6516754, lng:21.1540632 },\n];\n\n// ── BUILDING ICON ─────────────────────────────────────────────\nfunction mkIcon(statusi) {\n const c = statusi === 'realizuar' ? '#62c79b' : '#e8a044';\n const bg = '#0a0e0c';\n const svg = `\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\" width=\"40\" height=\"40\"\u003e\n \u003cfilter id=\"sh\"\u003e\u003cfeDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"3\" flood-color=\"${c}\" flood-opacity=\".35\"/\u003e\u003c/filter\u003e\n \u003crect x=\"2\" y=\"2\" width=\"36\" height=\"36\" rx=\"2\" fill=\"${c}\" filter=\"url(#sh)\"/\u003e\n \u003crect x=\"9\" y=\"7\" width=\"22\" height=\"24\" rx=\"1\" fill=\"${bg}\" opacity=\".92\"/\u003e\n \u003crect x=\"7\" y=\"27\" width=\"26\" height=\"4\" rx=\".5\" fill=\"${bg}\"/\u003e\n \u003crect x=\"12\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003crect x=\"22\" y=\"11\" width=\"6\" height=\"5\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003crect x=\"12\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003crect x=\"22\" y=\"18\" width=\"6\" height=\"5\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003crect x=\"16\" y=\"24\" width=\"8\" height=\"7\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003c/svg\u003e`;\n return L.divIcon({ html: svg, className:'', iconSize:[40,40], iconAnchor:[20,20], popupAnchor:[0,-24] });\n}\n\n// ── MAP ───────────────────────────────────────────────────────\nconst map = L.map('map', { center:[42.79,20.98], zoom:10 });\nL.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {\n attribution:'© \u003ca href=\"https://carto.com/\"\u003eCARTO\u003c/a\u003e', subdomains:'abcd', maxZoom:19\n}).addTo(map);\n\n// ── MARKERS ───────────────────────────────────────────────────\nconst markers = {};\nconst buildIconSVG = (c) =\u003e `\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" width=\"14\" height=\"14\"\u003e\n \u003crect x=\"2\" y=\"3\" width=\"20\" height=\"18\" rx=\"1\" fill=\"none\" stroke=\"${c}\" stroke-width=\"1.8\"/\u003e\n \u003crect x=\"5\" y=\"7\" width=\"4\" height=\"3\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003crect x=\"15\" y=\"7\" width=\"4\" height=\"3\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003crect x=\"5\" y=\"13\" width=\"4\" height=\"3\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003crect x=\"15\" y=\"13\" width=\"4\" height=\"3\" rx=\".5\" fill=\"${c}\"/\u003e\n \u003crect x=\"9\" y=\"16\" width=\"6\" height=\"5\" rx=\".5\" fill=\"${c}\"/\u003e\n\u003c/svg\u003e`;\n\nprojektet.forEach(p =\u003e {\n const c = p.statusi === 'realizuar' ? '#62c79b' : '#e8a044';\n const sLabel = p.statusi === 'realizuar' ? 'Realizuar' : 'Në realizim';\n const m = L.marker([p.lat, p.lng], { icon: mkIcon(p.statusi) }).addTo(map);\n m.bindPopup(`\n \u003cdiv class=\"pu-top\"\u003e\n \u003cdiv style=\"flex-shrink:0\"\u003e${buildIconSVG(c)}\u003c/div\u003e\n \u003cdiv\u003e\n \u003cdiv class=\"pu-title\"\u003e${p.emri}\u003c/div\u003e\n \u003cdiv class=\"pu-city\"\u003e◆ ${p.qyteti}\u003c/div\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n \u003cdiv class=\"pu-body\"\u003e\n \u003cdiv class=\"pu-row\"\u003e\n \u003cspan class=\"pu-key\"\u003eLloji\u003c/span\u003e\n \u003cspan class=\"pu-val\"\u003e${p.lloji}\u003c/span\u003e\n \u003c/div\u003e\n \u003cdiv class=\"pu-row\"\u003e\n \u003cspan class=\"pu-key\"\u003eStatusi\u003c/span\u003e\n \u003cspan class=\"pu-status ${p.statusi}\"\u003e${sLabel}\u003c/span\u003e\n \u003c/div\u003e\n \u003c/div\u003e\n `, { className:'lp-popup', maxWidth:260 });\n\n m.on('click', () =\u003e {\n document.querySelectorAll('.proj-item').forEach(e =\u003e e.classList.remove('active'));\n const el = document.getElementById('i-'+p.id);\n if (el) { el.classList.add('active'); el.scrollIntoView({ behavior:'smooth', block:'nearest' }); }\n });\n markers[p.id] = m;\n});\n\n// ── SIDEBAR ───────────────────────────────────────────────────\nconst CITIES = ['Mitrovicë','Vushtrri','Prishtinë'];\nfunction buildList(data) {\n const list = document.getElementById('projList');\n list.innerHTML = '';\n const byCity = {};\n data.forEach(p =\u003e { if (!byCity[p.qyteti]) byCity[p.qyteti]=[]; byCity[p.qyteti].push(p); });\n CITIES.forEach(city =\u003e {\n if (!byCity[city]?.length) return;\n const sec = document.createElement('div');\n const ch = document.createElement('div');\n ch.className = 'city-hdr';\n ch.innerHTML = `\u003cdiv class=\"city-dot\"\u003e\u003c/div\u003e\u003cspan class=\"city-name\"\u003e${city}\u003c/span\u003e\u003cspan class=\"city-cnt\"\u003e${byCity[city].length}\u003c/span\u003e`;\n sec.appendChild(ch);\n byCity[city].forEach(p =\u003e {\n const c = p.statusi === 'realizuar' ? '#62c79b' : '#e8a044';\n const el = document.createElement('div');\n el.className = 'proj-item';\n el.id = 'i-'+p.id;\n el.innerHTML = `\n \u003cdiv class=\"proj-ic\"\u003e${buildIconSVG(c)}\u003c/div\u003e\n \u003cdiv class=\"proj-info\"\u003e\n \u003cdiv class=\"proj-name\"\u003e${p.emri}\u003c/div\u003e\n \u003cdiv class=\"proj-type\"\u003e${p.lloji}\u003c/div\u003e\n \u003c/div\u003e\n \u003cspan class=\"proj-badge ${p.statusi}\"\u003e${p.statusi==='realizuar'?'✓':'●'}\u003c/span\u003e`;\n el.addEventListener('click', () =\u003e {\n document.querySelectorAll('.proj-item').forEach(e =\u003e e.classList.remove('active'));\n el.classList.add('active');\n map.setView([p.lat,p.lng], 16, { animate:true });\n markers[p.id].openPopup();\n });\n sec.appendChild(el);\n });\n list.appendChild(sec);\n });\n}\nbuildList(projektet);\n\n// ── FILTER ────────────────────────────────────────────────────\nlet curCity = 'all';\nfunction filterBy(city, btn) {\n curCity = city;\n document.querySelectorAll('.fbtn').forEach(b =\u003e b.classList.remove('active'));\n btn.classList.add('active');\n apply();\n}\ndocument.getElementById('searchInput').addEventListener('input', apply);\nfunction apply() {\n const q = document.getElementById('searchInput').value.toLowerCase();\n const f = projektet.filter(p =\u003e\n (curCity==='all' || p.qyteti===curCity) \u0026\u0026\n (p.emri.toLowerCase().includes(q) || p.lloji.toLowerCase().includes(q))\n );\n buildList(f);\n projektet.forEach(p =\u003e {\n const show = f.find(x =\u003e x.id===p.id);\n if (show \u0026\u0026 !map.hasLayer(markers[p.id])) markers[p.id].addTo(map);\n if (!show \u0026\u0026 map.hasLayer(markers[p.id])) map.removeLayer(markers[p.id]);\n });\n if (f.length) map.fitBounds(L.latLngBounds(f.map(p=\u003e[p.lat,p.lng])), { padding:[60,60] });\n}\n\nmap.fitBounds(L.latLngBounds(projektet.map(p=\u003e[p.lat,p.lng])), { padding:[60,60] });\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","link":""}