1<!DOCTYPE html> 2<html lang="id"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="shortcut icon" href="https://sumselprov.go.id/favicon.ico" type="image/x-icon"> 7 <link rel="icon" href="https://sumselprov.go.id/favicon.png" type="image/png"> 8 <title>Portal Resmi Pemerintah Provinsi Sumatera Selatan</title> 9 10 <!-- Premium Fonts --> 11 <link rel="preconnect" href="https://fonts.googleapis.com"> 12 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 13 <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;850&family=Outfit:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"> 14 15 <!-- Tailwind CSS CDN --> 16
16<script src="https://cdn.tailwindcss.com"></script>
16 17
17<script> 18 tailwind.config = { 19 theme: { 20 extend: { 21 colors: { 22 primary: '#0B2F64', 23 gold: '#E3A813', 24 skyPortal: '#489EE7', 25 }, 26 fontFamily: { 27 sans: ['Plus Jakarta Sans', 'sans-serif'], 28 heading: ['Outfit', 'sans-serif'], 29 } 30 } 31 } 32 } 33 </script>
33 34 35 <!-- Visual Enhancements --> 36 <style> 37 .backdrop-blur-md { 38 backdrop-filter: blur(28px) saturate(180%); 39 -webkit-backdrop-filter: blur(28px) saturate(180%); 40 } 41 /* HIGH-INTENSITY MIRROR GLASS CAROUSEL CARDS */ 42 .service-card { 43 background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); 44 border: 1.5px solid rgba(255, 255, 255, 0.28); 45 box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); 46 backdrop-filter: blur(32px) saturate(190%); 47 -webkit-backdrop-filter: blur(32px) saturate(190%); 48 transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 49 } 50 .service-card:hover { 51 background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 100%); 52 border-color: rgba(227, 168, 19, 0.65); 53 transform: translateY(-6px) scale(1.015); 54 box-shadow: 0 35px 65px -15px rgba(227, 168, 19, 0.35); 55 } 56 /* HIGH-INTENSITY GLASS LAYANAN BADGES */ 57 .layanan-badge { 58 background: rgba(255, 255, 255, 0.06); 59 border: 1px solid rgba(255, 255, 255, 0.22); 60 box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); 61 backdrop-filter: blur(20px) saturate(160%); 62 -webkit-backdrop-filter: blur(20px) saturate(160%); 63 transition: all 0.3s ease; 64 } 65 .layanan-badge:hover { 66 background: rgba(255, 255, 255, 0.15); 67 border-color: rgba(227, 168, 19, 0.45); 68 transform: scale(1.08); 69 } 70 /* Hide scrollbars */ 71 .no-scrollbar::-webkit-scrollbar {
72 display: none; 73 } 74 .no-scrollbar { 75 -ms-overflow-style: none; 76 scrollbar-width: none; 77 } 78 </style> 79</head> 80<body class="bg-slate-950 font-sans text-slate-100 overflow-hidden min-h-screen relative flex flex-col justify-between select-none"> 81 82 <!-- 1. FULL-SCREEN BACKGROUND VIDEO --> 83 <div class="fixed inset-0 w-full h-full overflow-hidden z-0 pointer-events-none"> 84 <div class="absolute inset-0 bg-black/45 z-10"></div> 85 <video class="w-full h-full object-cover scale-[1.25]" autoplay loop muted playsinline> 86 <source src="https://sumselprov.go.id/uploads/videos/gateway_video_1785203304.mp4" type="video/mp4"> 87 </video> 88 </div> 89 90 <!-- 2. HEADER BRANDING (TOP AREA) --> 91 <header class="relative z-20 w-full max-w-[1400px] mx-auto px-6 sm:px-12 py-6 flex items-start justify-between"> 92 93 <!-- Left Brand Logo & Text --> 94 <div class="flex items-center gap-4"> 95 <img src="https://sumselprov.go.id/uploads/site_icon_1785203304.png" alt="Logo Sumsel" class="w-11 h-13 object-contain" /> 96 <div class="flex flex-col"> 97 <span class="text-white text-xs sm:text-sm font-bold font-heading tracking-wide"> 98 Portal Pemerintah 99 </span> 100 <span class="text-white text-base sm:text-lg font-extrabold uppercase font-heading leading-tight tracking-wide"> 101 Provinsi Sumatera Selatan 102 </span> 103 <span class="text-slate-300 text-[9px] font-semibold mt-0.5 tracking-wider hidden sm:block"> 104 Situs Resmi Pemerintah Provinsi Sumatera Selatan 105 </span> 106 </div> 107 </div> 108 109 <!-- Right Badge: "Sumsel Maju Untuk Semua" --> 110 <div class="flex flex-col items-end select-none"> 111 <div class="flex items-center gap-2 bg-black/20 border border-white/10 px-4 py-2 rounded-2xl backdrop-blur-md"> 112 <div class="flex flex-col text-right"> 113 <span class="text-white text-[10px] font-extrabold tracking-widest uppercase font-heading leading-none">SUMSEL MAJU</span> 114 <span class="text-gold text-[8px] font-black tracking-widest uppercase font-heading mt-1">UNTUK SEMUA</span> 115 </div> 116 <div class="w-7 h-7 rounded-full bg-gold/20 flex items-center justify-center border border-gold/30"> 117 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 text-gold"> 118 <path fill-rule="evenodd" d="M9 1.5H5.625c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V1.5H9zM12 9.75a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5h-1.5A.75.75 0 0 1 12 9.75z" clip-rule="evenodd" /> 119 </svg> 120 </div> 121 </div> 122 </div> 123 124 </header> 125 126 <!-- 3. MAIN CAROUSEL & SERVICES INTERACTION (MIDDLE AREA) --> 127 <main class="relative z-20 w-full max-w-[1400px] mx-auto px-6 sm:px-12 flex flex-col justify-center flex-grow py-4 gap-12"> 128 129 <!-- AUTO-SCROLLING CAROUSEL: Gorgeous, premium rotating list of priority services --> 130 <div class="w-full max-w-5xl mx-auto relative px-4 sm:px-12 xl:px-0"> 131 132 <!-- Floating Navigation Buttons --> 133 <div class="absolute inset-y-0 left-0 flex items-center z-30 pointer-events-none"> 134 <button onclick="prevSlide()" class="w-10 h-10 rounded-full bg-slate-900/60 border border-white/10 text-white hover:bg-skyPortal hover:border-skyPortal flex items-center justify-center backdrop-blur-md pointer-events-auto transition-all transform translate-x-2 sm:translate-x-6 xl:-translate-x-12 hover:scale-110 active:scale-95 shadow-lg"> 135 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5"> 136 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /> 137 </svg> 138 </button> 139 </div> 140 <div class="absolute inset-y-0 right-0 flex items-center z-30 pointer-events-none"> 141 <button onclick="nextSlide()" class="w-10 h-10 rounded-full bg-slate-900/60 border border-white/10 text-white hover:bg-skyPortal hover:border-skyPortal flex items-center justify-center backdrop-blur-md pointer-events-auto transition-all transform -translate-x-2 sm:-translate-x-6 xl:translate-x-12 hover:scale-110 active:scale-95 shadow-lg"> 142 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-5 h-5"> 143 <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /> 144 </svg> 145 </button> 146 </div> 147 148 <!-- Viewport Slider Container with extra padding to allow unclipped card hovers --> 149 <div class="overflow-hidden py-6 px-4 -mx-4 -my-6"> 150 <div id="carouselContainer" class="flex gap-6 transition-transform duration-500 ease-out no-scrollbar" style="transform: translateX(0px);"> 151 152 153 <div onclick='openSubModal("Trans
153paransi", "", [{"name":"APBD","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/apbd"},{"name":"DPA","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/dpa"},{"name":"RKA","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/rka"},{"name":"RKT","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/rkt"},{"name":"RKPD","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/rkpd"},{"name":"Ljkip\/LAKIP","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/lkjip"},{"name":"LPPD \/ RLPPD","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/lppd"},{"name":"IKU","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/iku"},{"name":"PKT","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/pkt"},{"name":"LHKPN","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/lhkpn"},{"name":"LHKASN","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/lhkasn"},{"name":"RPJMD","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/rpjmd"},{"name":"RPLDD","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/rpldd"},{"name":"Hibah-Bansos","url":"https:\/\/sumselprov.go.id\/page\/transparansi\/hibah-bansos"}])' class="service-card shrink-0 w-[280px] sm:w-[320px] rounded-3xl p-8 flex flex-col justify-between backdrop-blur-md relative overflow-hidden group cursor-pointer"> 154 <!-- Tiny background accent bubble --> 155 <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-bl-full group-hover:scale-150 transition-transform duration-500"></div> 156 157 <!-- Dynamic Icon selector based on setting --> 158 <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white mb-6 shadow-inner"> 159 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 160 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /> 161 </svg> 162 </div> 163 164 <div> 165 <div class="flex items-center justify-between"> 166 <h3 class="text-white text-base sm:text-lg font-black tracking-wide uppercase font-heading leading-tight group-hover:text-gold transition-colors"> 167 Transparansi 168 </h3> 169 <span class="px-2 py-0.5 rounded-full bg-gold/20 text-gold text-[9px] font-extrabold tracking-wider border border-gold/30"> 170 14 Web 171 </span> 172 </div> 173 <p class="text-slate-300 text-[10px] sm:text-xs font-medium mt-1 leading-relaxed"> 174 175 </p> 176 </div> 177 </div> 178 179 <div onclick='openSubModal("Pendidikan Sumsel", "", [{"name":"Rumah Belajar","url":"https:\/\/rumahbelajar.btikp.sumselprov.go.id"}])' class="service-card shrink-0 w-[280px] sm:w-[320px] rounded-3xl p-8 flex flex-col justify-between backdrop-blur-md relative overflow-hidden group cursor-pointer"> 180 <!-- Tiny background accent bubble --> 181 <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-bl-full group-hover:scale-150 transition-transform duration-500"></div> 182 183 <!-- Dynamic Icon selector based on setting --> 184 <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white mb-6 shadow-inner"> 185 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 186 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /> 187 </svg> 188 </div> 189 190 <div> 191 <div class="flex items-center justify-between"> 192 <h3 class="text-white text-base sm:text-lg font-black tracking-wide uppercase font-heading leading-tight group-hover:text-gold transition-colors"> 193 Pendidikan Sumsel 194 </h3> 195 <sp
195an class="px-2 py-0.5 rounded-full bg-gold/20 text-gold text-[9px] font-extrabold tracking-wider border border-gold/30"> 196 1 Web 197 </span> 198 </div> 199 <p class="text-slate-300 text-[10px] sm:text-xs font-medium mt-1 leading-relaxed"> 200 201 </p> 202 </div> 203 </div> 204 205 <div onclick='openSubModal("Tenaga Kerja Dan Transmigrasi", "", [{"name":"Pengaduan Permasalahan Ketenagakerjaan Elektronik","url":"https:\/\/epengaduan.sumselprov.go.id"},{"name":"Layanan P2K3 Disnakertrans Sumsel","url":"https:\/\/layananp2k3.sumselprov.go.id"}])' class="service-card shrink-0 w-[280px] sm:w-[320px] rounded-3xl p-8 flex flex-col justify-between backdrop-blur-md relative overflow-hidden group cursor-pointer"> 206 <!-- Tiny background accent bubble --> 207 <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-bl-full group-hover:scale-150 transition-transform duration-500"></div> 208 209 <!-- Dynamic Icon selector based on setting --> 210 <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white mb-6 shadow-inner"> 211 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 212 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /> 213 </svg> 214 </div> 215 216 <div> 217 <div class="flex items-center justify-between"> 218 <h3 class="text-white text-base sm:text-lg font-black tracking-wide uppercase font-heading leading-tight group-hover:text-gold transition-colors"> 219 Tenaga Kerja Dan Transmigrasi 220 </h3> 221 <span class="px-2 py-0.5 rounded-full bg-gold/20 text-gold text-[9px] font-extrabold tracking-wider border border-gold/30"> 222 2 Web 223 </span> 224 </div> 225 <p class="text-slate-300 text-[10px] sm:text-xs font-medium mt-1 leading-relaxed"> 226 227 </p> 228 </div> 229 </div> 230 231 <a href="https://lapor.go.id" target="_blank" class="service-card shrink-0 w-[280px] sm:w-[320px] rounded-3xl p-8 flex flex-col justify-between backdrop-blur-md relative overflow-hidden group"> 232 <!-- Tiny background accent bubble --> 233 <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-bl-full group-hover:scale-150 transition-transform duration-500"></div> 234 235 <!-- Dynamic Icon selector based on setting --> 236 <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white mb-6 shadow-inner"> 237 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 238 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /> 239 </svg> 240 </div> 241 242 <div> 243 <div class="flex items-center justify-between"> 244 <h3 class="text-white text-base sm:text-lg font-black tracking-wide uppercase font-heading leading-tight group-hover:text-gold transition-colors"> 245 Layanan Aspirasi dan Pengaduan Online 246 </h3> 247 </div> 248 <p class="text-slate-300 text-[10px] sm:text-xs font-medium mt
248-1 leading-relaxed"> 249 Layanan Aspirasi dan Pengaduan Online Rakyat 250 </p> 251 </div> 252 </a> 253 254 <div onclick='openSubModal("Kehutanan", "", [{"name":"Data Dishut","url":"https:\/\/data.dishut.sumselprov.go.id"},{"name":"Sistem Operasi Pengendalian Kebakaran","url":"https:\/\/songket.sumselprov.go.id"}])' class="service-card shrink-0 w-[280px] sm:w-[320px] rounded-3xl p-8 flex flex-col justify-between backdrop-blur-md relative overflow-hidden group cursor-pointer"> 255 <!-- Tiny background accent bubble --> 256 <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-bl-full group-hover:scale-150 transition-transform duration-500"></div> 257 258 <!-- Dynamic Icon selector based on setting --> 259 <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white mb-6 shadow-inner"> 260 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 261 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /> 262 </svg> 263 </div> 264 265 <div> 266 <div class="flex items-center justify-between"> 267 <h3 class="text-white text-base sm:text-lg font-black tracking-wide uppercase font-heading leading-tight group-hover:text-gold transition-colors"> 268 Kehutanan 269 </h3> 270 <span class="px-2 py-0.5 rounded-full bg-gold/20 text-gold text-[9px] font-extrabold tracking-wider border border-gold/30"> 271 2 Web 272 </span> 273 </div> 274 <p class="text-slate-300 text-[10px] sm:text-xs font-medium mt-1 leading-relaxed"> 275 276 </p> 277 </div> 278 </div> 279 280 <a href="https://jdih.sumselprov.go.id" target="_blank" class="service-card shrink-0 w-[280px] sm:w-[320px] rounded-3xl p-8 flex flex-col justify-between backdrop-blur-md relative overflow-hidden group"> 281 <!-- Tiny background accent bubble --> 282 <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-bl-full group-hover:scale-150 transition-transform duration-500"></div> 283 284 <!-- Dynamic Icon selector based on setting --> 285 <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white mb-6 shadow-inner"> 286 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 287 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /> 288 </svg> 289 </div> 290 291 <div> 292 <div class="flex items-center justify-between"> 293 <h3 class="text-white text-base sm:text-lg font-black tracking-wide uppercase font-heading leading-tight group-hover:text-gold transition-colors"> 294 Produk Hukum 295 </h3> 296 </div> 297 <p class="text-slate-300 text-[10px] sm:text-xs font-medium mt
297-1 leading-relaxed"> 298 299 </p> 300 </div> 301 </a> 302 303 <div onclick='openSubModal("Kesehatan", "", [{"name":"RS Ernaldi Bahar","url":"https:\/\/rs-erba.go.id"}])' class="service-card shrink-0 w-[280px] sm:w-[320px] rounded-3xl p-8 flex flex-col justify-between backdrop-blur-md relative overflow-hidden group cursor-pointer"> 304 <!-- Tiny background accent bubble --> 305 <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-bl-full group-hover:scale-150 transition-transform duration-500"></div> 306 307 <!-- Dynamic Icon selector based on setting --> 308 <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white mb-6 shadow-inner"> 309 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 310 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /> 311 </svg> 312 </div> 313 314 <div> 315 <div class="flex items-center justify-between"> 316 <h3 class="text-white text-base sm:text-lg font-black tracking-wide uppercase font-heading leading-tight group-hover:text-gold transition-colors"> 317 Kesehatan 318 </h3> 319 <span class="px-2 py-0.5 rounded-full bg-gold/20 text-gold text-[9px] font-extrabold tracking-wider border border-gold/30"> 320 1 Web 321 </span> 322 </div> 323 <p class="text-slate-300 text-[10px] sm:text-xs font-medium mt-1 leading-relaxed"> 324 325 </p> 326 </div> 327 </div> 328 329 <a href="https://pantaugambut.sumselprov.go.id" target="_blank" class="service-card shrink-0 w-[280px] sm:w-[320px] rounded-3xl p-8 flex flex-col justify-between backdrop-blur-md relative overflow-hidden group"> 330 <!-- Tiny background accent bubble --> 331 <div class="absolute top-0 right-0 w-24 h-24 bg-white/5 rounded-bl-full group-hover:scale-150 transition-transform duration-500"></div> 332 333 <!-- Dynamic Icon selector based on setting --> 334 <div class="w-12 h-12 rounded-2xl bg-white/10 border border-white/20 flex items-center justify-center text-white mb-6 shadow-inner"> 335 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 336 <path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" /> 337 </svg> 338 </div> 339 340 <div> 341 <div class="flex items-center justify-between"> 342 <h3 class="text-white text-base sm:text-lg font-black tracking-wide uppercase font-heading leading-tight group-hover:text-gold transition-colors"> 343 Pantau Gambut 344 </h3> 345 </div> 346 <p class="text-slate-300 text-[10px] sm:text-xs font-medium mt
346-1 leading-relaxed"> 347 348 </p> 349 </div> 350 </a> 351 352 </div> 353 </div> 354 355 <!-- Custom Sliding Dot Indicators --> 356 <div class="flex justify-center items-center gap-3 mt-6"> 357 <span id="dot-0" onclick="goToSlide(0)" class="w-2.5 h-2.5 rounded-full bg-white w-6 transition-all duration-300 cursor-pointer shadow-md"></span> 358 <span id="dot-1" onclick="goToSlide(1)" class="w-2.5 h-2.5 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 359 <span id="dot-2" onclick="goToSlide(2)" class="w-2.5 h-2.5 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 360 <span id="dot-3" onclick="goToSlide(3)" class="w-2.5 h-2.5 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 361 <span id="dot-4" onclick="goToSlide(4)" class="w-2.5 h-2.5 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 362 <span id="dot-5" onclick="goToSlide(5)" class="w-2.5 h-2.5 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 363 <span id="dot-6" onclick="goToSlide(6)" class="w-2.5 h-2.5 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 364 <span id="dot-7" onclick="goToSlide(7)" class="w-2.5 h-2.5 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 365 </div> 366 367 </div> 368 369 <!-- 4. CARD LAYANAN: High-Intensity Glass dynamic service badges --> 370 <div class="w-full max-w-4xl mx-auto flex flex-col items-center"> 371 372 <!-- Title --> 373 <div class="flex items-center gap-2 select-none mb-4"> 374 <span class="w-2 h-2 rounded-full bg-gold/70 animate-pulse"></span> 375 <h2 class="text-slate-350 text-[10px] font-black uppercase tracking-[0.25em] font-heading"> 376 LAYANAN PUBLIK SUMATERA SELATAN 377 </h2> 378 <span class="w-2 h-2 rounded-full bg-gold/70 animate-pulse"></span> 379 </div> 380 381 <!-- Viewport + Buttons Wrapper (Relative) --> 382 <div class="w-full relative px-4 sm:px-12 xl:px-0"> 383 <!-- Floating Navigation Buttons for Badges --> 384 <div class="absolute inset-y-0 left-0 flex items-center z-30 pointer-events-none"> 385 <button id="service-prev-btn" onclick="prevServiceSlide()" class="w-8 h-8 rounded-full bg-slate-900/60 border border-white/10 text-white hover:bg-skyPortal hover:border-skyPortal flex items-center justify-center backdrop-blur-md pointer-events-auto transition-all transform translate-x-2 sm:translate-x-6 xl:-translate-x-10 hover:scale-110 active:scale-95 shadow-lg"> 386 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4"> 387 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" /> 388 </svg> 389 </button> 390 </div> 391 <div class="absolute inset-y-0 right-0 flex items-center z-30 pointer-events-none"> 392 <button id="service-next-btn" onclick="nextServiceSlide()" class="w-8 h-8 rounded-full bg-slate-900/60 border border-white/10 text-white hover:bg-skyPortal hover:border-skyPortal flex items-center justify-center backdrop-blur-md pointer-events-auto transition-all transform -translate-x-2 sm:-translate-x-6 xl:translate-x-10 hover:scale-110 active:scale-95 shadow-lg"> 393 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-4 h-4"> 394 <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" /> 395 </svg> 396 </button> 397 </div> 398 399 <!-- Viewport Slider Container with extra padding to allow unclipped badge hovers --> 400 <div class="overflow-hidden w-full py-4 px-4 -mx-4 -my-4"> 401 <div id="serviceCarouselContainer" class="flex gap-3 sm:gap-4 transition-transform duration-500 ease-out no-scrollbar" style="transform: translateX(0px);"> 402 403 <a href="https://cekfakta.sumselprov.go.id" target="_blank" class="layanan-badge shrink-0 w-[180px] sm:w-[220px] rounded-2xl py-2.5 px-4 flex items-center gap-2.5 shadow-lg group"> 404 <!-- Tiny badge circle dynamic color icon --> 405 <div class="w-6 h-6 rounded-lg bg-gold/10 border border-gold/30 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-primary transition-all shrink-0"> 406 <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> 407 <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> 408 </svg> 409 </div>
410 <span class="text-white text-[11px] font-bold tracking-wide group-hover:text-gold transition-colors font-heading leading-none truncate block min-w-0 w-full"> 411 Cek Fakta 412 </span> 413 </a> 414 415 <a href="https://ppid.sumselprov.go.id" target="_blank" class="layanan-badge shrink-0 w-[180px] sm:w-[220px] rounded-2xl py-2.5 px-4 flex items-center gap-2.5 shadow-lg group"> 416 <!-- Tiny badge circle dynamic color icon --> 417 <div class="w-6 h-6 rounded-lg bg-gold/10 border border-gold/30 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-primary transition-all shrink-0"> 418 <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> 419 <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> 420 </svg> 421 </div> 422 <span class="text-white text-[11px] font-bold tracking-wide group-hover:text-gold transition-colors font-heading leading-none truncate block min-w-0
422w-full"> 423 PPID 424 </span> 425 </a> 426 427 <a href="https://satudata.sumselprov.go.id" target="_blank" class="layanan-badge shrink-0 w-[180px] sm:w-[220px] rounded-2xl py-2.5 px-4 flex items-center gap-2.5 shadow-lg group"> 428 <!-- Tiny badge circle dynamic color icon --> 429 <div class="w-6 h-6 rounded-lg bg-gold/10 border border-gold/30 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-primary transition-all shrink-0"> 430 <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> 431 <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> 432 </svg> 433 </div> 434 <span class="text-white text-[11px] font-bold tracking-wide group-hover:text-gold transition-colors font-heading leading-none truncate block min-w-0
434w-full"> 435 Satu Data 436 </span> 437 </a> 438 439 <a href="https://sdgs.sumselprov.go.id" target="_blank" class="layanan-badge shrink-0 w-[180px] sm:w-[220px] rounded-2xl py-2.5 px-4 flex items-center gap-2.5 shadow-lg group"> 440 <!-- Tiny badge circle dynamic color icon --> 441 <div class="w-6 h-6 rounded-lg bg-gold/10 border border-gold/30 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-primary transition-all shrink-0"> 442 <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> 443 <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> 444 </svg> 445 </div> 446 <span class="text-white text-[11px] font-bold tracking-wide group-hover:text-gold transition-colors font-heading leading-none truncate block min-w-0
446w-full"> 447 SDG Bappeda Sumsel 448 </span> 449 </a> 450 451 <a href="https://ppid-bapenda.sumselprov.go.id/cekpajak" target="_blank" class="layanan-badge shrink-0 w-[180px] sm:w-[220px] rounded-2xl py-2.5 px-4 flex items-center gap-2.5 shadow-lg group"> 452 <!-- Tiny badge circle dynamic color icon --> 453 <div class="w-6 h-6 rounded-lg bg-gold/10 border border-gold/30 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-primary transition-all shrink-0"> 454 <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> 455 <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> 456 </svg> 457 </div> 458 <span class="text-white text-[11px] font-bold tracking-wide group-hover:text-gold transition-colors font-heading leading-none truncate block min-w-0
458w-full"> 459 Cek Pajak Kendaraan 460 </span> 461 </a> 462 463 <a href="https://sultanmuda.sumselprov.go.id" target="_blank" class="layanan-badge shrink-0 w-[180px] sm:w-[220px] rounded-2xl py-2.5 px-4 flex items-center gap-2.5 shadow-lg group"> 464 <!-- Tiny badge circle dynamic color icon --> 465 <div class="w-6 h-6 rounded-lg bg-gold/10 border border-gold/30 flex items-center justify-center text-gold group-hover:bg-gold group-hover:text-primary transition-all shrink-0"> 466 <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> 467 <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /> 468 </svg> 469 </div> 470 <span class="text-white text-[11px] font-bold tracking-wide group-hover:text-gold transition-colors font-heading leading-none truncate block min-w-0
470w-full"> 471 Sultan Muda 472 </span> 473 </a> 474 </div> 475 </div> 476 </div> 477 478 <!-- Custom Sliding Dot Indicators for Badges --> 479 <div id="service-dots-container" class="flex justify-center items-center gap-2 mt-4"> 480 <span id="service-dot-0" onclick="goToServiceSlide(0)" class="w-2 h-2 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 481 <span id="service-dot-1" onclick="goToServiceSlide(1)" class="w-2 h-2 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 482 <span id="service-dot-2" onclick="goToServiceSlide(2)" class="w-2 h-2 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 483 <span id="service-dot-3" onclick="goToServiceSlide(3)" class="w-2 h-2 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 484 <span id="service-dot-4" onclick="goToServiceSlide(4)" class="w-2 h-2 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 485 <span id="service-dot-5" onclick="goToServiceSlide(5)" class="w-2 h-2 rounded-full bg-white/40 transition-all duration-300 cursor-pointer shadow-md"></span> 486 </div> 487 </div> 488 489 </main> 490 491 <!-- 5. BOTTOM AREA: HIGH-INTENSITY TRANSPARENT MIRROR GLASS BUTTON --> 492 <div class="relative z-20 w-full max-w-[1400px] mx-auto px-6 sm:px-12 pb-12 flex justify-center items-center"> 493 <!-- Center: Centered Pill-shaped Transparent Mirror Glass "Tampilkan Website" Button --> 494 <a href="https://sumselprov.go.id/web" class="px-10 py-4 bg-white/10 hover:bg-white/20 active:scale-[0.98] text-white font-extrabold rounded-full text-xs uppercase tracking-[0.25em] border border-white/30 backdrop-blur-2xl shadow-2xl transition-all duration-300 hover:border-gold/60"> 495 Tampilkan Website 496 </a> 497 </div> 498 499 <!-- 6. HIGH-PERFORMANCE AUTO-SCROLLING CAROUSEL JAVASCRIPT --> 500
500<script> 501 // --- MAIN CAROUSEL SLIDER --- 502 let currentSlide = 0; 503 const totalSlides = 8; 504 let slideWidth = 344; // w-[320px] + gap-6 505 const carousel = document.getElementById('carouselContainer'); 506 let autoScrollTimer; 507 508 function updateSlideWidth() { 509 const viewportWidth = window.innerWidth; 510 if (viewportWidth < 640) { 511 slideWidth = 304; // mobile w-[280px] + gap-6 512 } else { 513 slideWidth = 344; // sm w-[320px] + gap-6 514 } 515 } 516 517 function getVisibleSlidesCount() { 518 const width = window.innerWidth; 519 if (width >= 1024) return 3; 520 if (width >= 640) return 2; 521 return 1; 522 } 523 524 function goToSlide(index) { 525 updateSlideWidth(); 526 const visibleCount = getVisibleSlidesCount(); 527 const maxIndex = Math.max(0, totalSlides - visibleCount); 528 529 // Loop slides 530 if (index < 0) { 531 currentSlide = maxIndex; 532 } else if (index > maxIndex) { 533 currentSlide = 0; 534 } else { 535 currentSlide = index; 536 } 537 538 const offset = -currentSlide * slideWidth; 539 carousel.style.transform = `translateX(${offset}px)`; 540 541 // Update sliding indicators (dots) dynamically 542 for (let i = 0; i < totalSlides; i++) { 543 const dot = document.getElementById(`dot-${i}`); 544 if (dot) { 545 if (i === currentSlide) { 546 dot.classList.remove('bg-white/40'); 547 dot.classList.add('bg-white', 'w-6'); 548 } else { 549 dot.classList.remove('bg-white', 'w-6'); 550 dot.classList.add('bg-white/40'); 551 } 552 } 553 } 554 } 555 556 function nextSlide() { 557 goToSlide(currentSlide + 1); 558 resetAutoScroll(); 559 } 560 561 function prevSlide() { 562 goToSlide(currentSlide - 1); 563 resetAutoScroll(); 564 } 565 566 function startAutoScroll() { 567 autoScrollTimer = setInterval(() => { 568 const visibleCount = getVisibleSlidesCount(); 569 const maxIndex = totalSlides - visibleCount; 570 if (currentSlide >= maxIndex) { 571 goToSlide(0); 572 } else { 573 goToSlide(currentSlide + 1); 574 } 575 }, 3000); // Auto scrolls every 3 seconds 576 } 577 578 function resetAutoScroll() { 579 clearInterval(autoScrollTimer); 580 startAutoScroll(); 581 } 582 583 // --- SERVICE BADGES SLIDER --- 584 let currentServiceSlide = 0; 585 const totalServiceSlides = 6; 586 let serviceSlideWidth = 236; // w-[220px] + gap-4 587 const serviceCarousel = document.getElementById('serviceCarouselContainer'); 588 let serviceAutoScrollTimer; 589 590 function updateServiceSlideWidth() { 591 const viewportWidth = window.innerWidth; 592 if (viewportWidth < 640) { 593 serviceSlideWidth = 192; // mobile w-[180px] + gap-3 (12px) 594 } else { 595 serviceSlideWidth = 236; // sm w-[220px] + gap-4 (16px) 596 } 597 } 598 599 function getVisibleServiceSlidesCount() { 600 if (!serviceCarousel) return 1; 601 const containerWidth = serviceCarousel.parentElement.offsetWidth; 602 return Math.max(1, Math.floor(containerWidth / serviceSlideWidth)); 603 } 604 605 function goToServiceSlide(index) { 606 if (!serviceCarousel) return; 607 updateServiceSlideWidth(); 608 const visibleCount = getVisibleServiceSlidesCount(); 609 610 // Check if controls need to be visible 611 const prevBtn = document.getElementById('service-prev-btn'); 612 const nextBtn = document.getElementById('service-next-btn'); 613 const dotsContainer = document.getElementById('service-dots-container'); 614 615 if (totalServiceSlides <= visibleCount) { 616 if (prevBtn) prevBtn.classList.add('hidden'); 617 if (nextBtn) nextBtn.classList.add('hidden'); 618 if (dotsContainer) dotsContainer.classList.add('hidden'); 619 serviceCarousel.style.transform = 'translateX(0px)'; 620 currentServiceSlide = 0; 621 return; 622 } else { 623 if (prevBtn) prevBtn.classList.remove('hidden'); 624 if (nextBtn) nextBtn.classList.remove('hidden'); 625 if (dotsContainer) dotsContainer.classList.remove('hidden'); 626 } 627 628 const maxIndex = Math.max(0, totalServiceSlides - visibleCount); 629 630 // Loop slides 631 if (index < 0) { 632 currentServiceSlide = maxIndex; 633 } else if (index > maxIndex) { 634 currentServiceSlide = 0; 635 } else { 636 currentServiceSlide = index; 637 } 638 639 const offset = -currentServiceSlide * serviceSlideWidth; 640 serviceCarousel.style.transform = `translateX(${offset}px)`; 641 642 // Update sliding indicators (dots) dynamically 643 for (let i = 0; i < totalServiceSlides; i++) { 644 const dot = document.getElementById(`service-dot-${i}`); 645 if (dot) { 646 if (i === currentServiceSlide) { 647 dot.classList.remove('bg-white/40'); 648 dot.classList.add('bg-white', 'w-5'); 649 } else { 650 dot.classList.remove('bg-white', 'w-5'); 651 dot.classList.add('bg-white/40'); 652 } 653 } 654 } 655 } 656 657 function nextServiceSlide() { 658 goToServiceSlide(currentServiceSlide + 1); 659 resetServiceAutoScroll(); 660 } 661 662 function prevServiceSlide() { 663 goToServiceSlide(currentServiceSlide - 1); 664 resetServiceAutoScroll(); 665 } 666 667 function startServiceAutoScroll() { 668 clearInterval(serviceAutoScrollTimer); 669 serviceAutoScrollTimer = setInterval(() => { 670 const visibleCount = getVisibleServiceSlidesCount(); 671 if (totalServiceSlides <= visibleCount) return; 672 673 const maxIndex = totalServiceSlides - visibleCount; 674 if (currentServiceSlide >= maxIndex) { 675 goToServiceSlide(0); 676 } else { 677 goToServiceSlide(currentServiceSlide + 1); 678 } 679 }, 3000); // Auto scrolls every 3 seconds 680 } 681 682 function resetServiceAutoScroll() { 683 clearInterval(serviceAutoScrollTimer); 684 startServiceAutoScroll(); 685 } 686 687 // --- GLOBAL INITIALIZATION & WINDOW RESIZE --- 688 window.addEventListener('resize', () => { 689 goToSlide(currentSlide); 690 goToServiceSlide(currentServiceSlide); 691 }); 692 693 // Initialize Main Slider 694 updateSlideWidth(); 695 goToSlide(0); 696 startAutoScroll(); 697 698 // Initialize Service Badges Slider 699 updateServiceSlideWidth(); 700 goToServiceSlide(0); 701 startServiceAutoScroll(); 702 </script>
702 703 704 <!-- 7. SUB-SERVICES POPUP MODAL (Glassmorphic options modal) --> 705 <div id="subServiceModal" class="fixed inset-0 z-50 hidden flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-md transition-all duration-300"> 706 <div class="relative w-full max-w-lg bg-slate-900/90 border border-white/20 rounded-3xl shadow-2xl p-6 sm:p-8 backdrop-blur-2xl text-white transform transition-all duration-300"> 707 <!-- Close Button --> 708 <button type="button" onclick="closeSubModal()" class="absolute top-5 right-5 w-9 h-9 rounded-full bg-white/10 border border-white/20 text-slate-300 hover:text-white hover:bg-white/20 flex items-center justify-center transition-colors shadow-sm"> 709 <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 710 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> 711 </svg> 712 </button> 713 714 <!-- Modal Header --> 715 <div class="flex items-start gap-4 mb-6"> 716 <div class="w-12 h-12 rounded-2xl bg-gold/20 border border-gold/40 flex items-center justify-center text-gold shrink-0 shadow-inner"> 717 <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 718 <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /> 719 </svg> 720 </div> 721 <div> 722 <span class="text-[10px] font-extrabold tracking-widest text-gold uppercase font-heading">Opsi Website / Sub Layanan</span> 723 <h3 id="modalTitle" class="text-xl font-black text-white font-heading leading-tight mt-0.5"></h3> 724 <p id="modalDesc" class="text-xs text-slate-300 mt-1 leading-relaxed hidden"></p> 725 </div> 726 </div> 727 728 <!-- Modal Links List --> 729 <div id="modalLinksContainer" class="space-y-3 max-h-[55vh] overflow-y-auto pr-1 no-scrollbar"> 730 <!-- Dynamic Sub-service website buttons will be inserted here --> 731 </div> 732 733 <div class="mt-6 pt-4 border-t border-white/10 text-center"> 734 <p class="text-[10px] text-slate-400 font-medium tracking-wide">Pilih salah satu nama website di atas untuk membuka tautan resmi.</p> 735 </div> 736 </div> 737 </div> 738 739
739<script> 740 function openSubModal(title, desc, subServices) { 741 document.getElementById('modalTitle').textContent = title; 742 const descEl = document.getElementById('modalDesc'); 743 if (desc) { 744 descEl.textContent = desc; 745 descEl.classList.remove('hidden'); 746 } else { 747 descEl.classList.add('hidden'); 748 } 749 750 const container = document.getElementById('modalLinksContainer'); 751 container.innerHTML = ''; 752 753 if (Array.isArray(subServices)) { 754 subServices.forEach(sub => { 755 const item = document.createElement('a'); 756 item.href = sub.url; 757 item.target = '_blank'; 758 item.className = 'flex items-center justify-between p-4 rounded-2xl bg-white/5 hover:bg-gold/15 border border-white/10 hover:border-gold/50 transition-all duration-300 group shadow-md'; 759 item.innerHTML = ` 760 <div class="flex items-center gap-3"> 761 <div class="w-8 h-8 rounded-xl bg-gold/10 border border-gold/20 text-gold flex items-center justify-center group-hover:bg-gold group-hover:text-slate-950 transition-all shrink-0"> 762 <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 763 <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9 9 0 100-18 9 9 0 000 18z" /> 764 <path stroke-linecap="round" stroke-linejoin="round" d="M3.6 9h16.8M3.6 15h16.8" /> 765 </svg> 766 </div> 767 <span class="text-sm font-bold text-white group-hover:text-gold transition-colors font-heading">${sub.name}</span> 768 </div> 769 <svg class="w-5 h-5 text-slate-400 group-hover:text-gold group-hover:translate-x-1 transition-all shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> 770 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" /> 771 </svg> 772 `; 773 container.appendChild(item); 774 }); 775 } 776 777 const modal = document.getElementById('subServiceModal'); 778 modal.classList.remove('hidden'); 779 } 780 781 function closeSubModal() { 782 const modal = document.getElementById('subServiceModal'); 783 modal.classList.add('hidden'); 784 } 785 786 document.getElementById('subServiceModal')?.addEventListener('click', function(e) { 787 if (e.target === this) { 788 closeSubModal(); 789 } 790 }); 791 </script>
791 792 793</body> 794</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.