1<!doctype html> 2<html lang="id" class="scroll-smooth"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 9 10 <title>Visi dan Misi â Provinsi Kepulauan Rau</title> 11 <meta name="description" content="Visi dan Misi"> 12 <meta name="robots" content="index, follow"> 13 14 <!-- Canonical URL --> 15 <link rel="canonical" href="https://kepriprov.go.id/laman/visi-dan-misi"> 16 17 <!-- Open Graph --> 18 <meta property="og:type" content="website"> 19 <meta property="og:title" content="Visi dan Misi â Provinsi Kepulauan Rau"> 20 <meta property="og:description" content="Visi dan Misi"> 21 <meta property="og:url" content="https://kepriprov.go.id/laman/visi-dan-misi"> 22 <meta property="og:image" content="https://kepriprov.go.id/assets/media/logo-kepri.webp"> 23 <meta property="og:image:alt" content="Visi dan Misi â Provinsi Kepulauan Rau"> 24 <meta property="og:image:width" content="1200"> 25 <meta property="og:image:height" content="630"> 26 <meta property="og:locale" content="id_ID"> 27 <meta property="og:site_name" content="Portal Pemerintah Provinsi Kepulauan Riau"> 28 29 30 <!-- Twitter Card --> 31 <meta name="twitter:card" content="summary_large_image"> 32 <meta name="twitter:title" content="Visi dan Misi â Provinsi Kepulauan Rau"> 33 <meta name="twitter:description" content="Visi dan Misi"> 34 <meta name="twitter:image" content="https://kepriprov.go.id/assets/media/logo-kepri.webp"> 35 <meta name="theme-color" content="#006db0"> 36 37 <!-- Favicon --> 38 <link rel="icon" type="image/png" href="https://cms.kepriprov.go.id/api/files/uploads/2026/04/bda0a87f-ab96-4fdc-84cb-d3220d4f3eca.png"> 39 <link rel="shortcut icon" href="https://cms.kepriprov.go.id/api/files/uploads/2026/04/bda0a87f-ab96-4fdc-84cb-d3220d4f3eca.png"> 40 <link rel="apple-touch-icon" href="https://cms.kepriprov.go.id/api/files/uploads/2026/04/bda0a87f-ab96-4fdc-84cb-d3220d4f3eca.png"> 41 42 <!-- DNS Prefetch & Preconnect --> 43 <link rel="preconnect" href="https://fonts.googleapis.com"> 44 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 45 <link rel="dns-prefetch" href="https://unpkg.com"> 46 <link rel="preconnect" href="https://unpkg.com"> 47 48 <!-- Google Fonts â Non-blocking (preload trick) --> 49 <link rel="preload" as="style" 50 href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap" 51 onload="this.onload=null;this.rel='stylesheet'"> 52 <noscript> 53 <link rel="stylesheet" 54 href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap"> 55 </noscript> 56 57 <!-- Phosphor Icons â Async, non-blocking --> 58
58<script> 59 (function () { 60 var s = document.createElement('script'); 61 s.src = 'https://unpkg.com/@phosphor-icons/[email protected]'; 62 s.async = true; 63 document.head.appendChild(s); 64 })(); 65 </script>
65 66 67 <!-- App CSS (Tailwind compiled) --> 68 <link rel="stylesheet" href="https://kepriprov.go.id/assets/css/app.css?v=?v=20260506"> 69 70 <!-- Dynamic theme color override --> 71 <style> 72 :root { 73 --color-primary: 74 #006db0 ; 75 --color-secondary: 76 #edbc1b ; 77 } 78 </style> 79 80 <style> 81 /* Semantic line-clamp utilities */ 82 .line-clamp-1, 83 .line-clamp-2, 84 .line-clamp-3 { 85 display: -webkit-box; 86 -webkit-box-orient: vertical; 87 overflow: hidden; 88 } 89 90 .line-clamp-1 { 91 -webkit-line-clamp: 1; 92 } 93 94 .line-clamp-2 { 95 -webkit-line-clamp: 2; 96 } 97 98 .line-clamp-3 { 99 -webkit-line-clamp: 3; 100 } 101 102 @media (min-width: 768px) { 103 .md\:line-clamp-1 { 104 -webkit-line-clamp: 1 !important; 105 display: -webkit-box; 106 -webkit-box-orient: vertical; 107 overflow: hidden; 108 } 109 110 .md\:line-clamp-2 { 111 -webkit-line-clamp: 2 !important; 112 display: -webkit-box; 113 -webkit-box-orient: vertical; 114 overflow: hidden; 115 } 116 117 .md\:line-clamp-3 { 118 -webkit-line-clamp: 3 !important; 119 display: -webkit-box; 120 -webkit-box-orient: vertical; 121 overflow: hidden; 122 } 123 } 124 </style> 125</head> 126 127<body class="bg-slate-50 text-slate-800 antialiased font-sans overflow-x-hidden relative"> 128 129 130<style> 131 .glass-nav { 132 overflow: visible; 133 } 134 135 .group-hover-menu { 136 position: relative; 137 } 138 139 .group-hover-menu::after { 140 content: ''; 141 position: absolute; 142 bottom: -15px; 143 left: 0; 144 width: 100%; 145 height: 15px; 146 } 147 148 .group-hover-menu:hover > .nav-dropdown-l2 { 149 opacity: 1; 150 visibility: visible; 151 transform: scale(1); 152 pointer-events: auto; 153 } 154 155 .nav-item-l2:hover > .nav-dropdown-l3 { 156 opacity: 1; 157 visibility: visible; 158 transform: scale(1); 159 pointer-events: auto; 160 } 161 162 /* bridge hover area level 2 -> level 3 agar tidak terlalu sensitif */ 163 .nav-item-l2::after { 164 content: ''; 165 position: absolute; 166 top: 0; 167 right: -18px; 168 width: 18px; 169 height: 100%; 170 } 171 172 .nav-dropdown-l2, 173 .nav-dropdown-l3 { 174 pointer-events: none; 175 width: max-content; 176 max-width: min(92vw, 34rem); 177 } 178 179 /* pastikan dropdown level 2 benar-benar berada di bawah navbar/menu level 1 */ 180 .nav-dropdown-l2 { 181 top: calc(100% + 6px); 182 left: 0; 183 min-width: 16rem; 184 z-index: 50; 185 } 186 187 /* pastikan dropdown level 3 selalu flyout ke kanan dari level 2 */ 188 .nav-dropdown-l3 { 189 top: 0; 190 left: 100%; 191 margin-left: 0 !important; 192 min-width: 18rem; 193 z-index: 60; 194 } 195 196 .nav-dropdown-l2 a, 197 .nav-dropdown-l3 a { 198 white-space: nowrap; 199 } 200 201 .sub-menu-gap::before { 202 content: ''; 203 position: absolute; 204 top: 0; 205 left: -15px; 206 width: 15px; 207 height: 100%; 208 } 209 210 .mobile-menu-overlay { 211 transition: opacity 0.3s ease-in-out; 212 } 213 214 .mobile-menu-panel { 215 transition: transform 0.3s ease-in-out; 216 } 217 218 .accordion-content { 219 transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; 220 max-height: 0; 221 opacity: 0; 222 overflow: hidden; 223 } 224 225 .accordion-content.active { 226 max-height: 500px; 227 opacity: 1; 228 } 229</style> 230 231<nav class="fixed w-full z-50 glass-nav transition-all duration-300 shadow-sm" id="navbar"> 232 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> 233 <div class="flex justify-between items-center h-16 md:h-20"> 234 235 <!-- Logo --> 236 <a href="https://kepriprov.go.id/" class="flex items-center gap-2 md:gap-3 group cursor-pointer shrink-0"> 237 <div class="relative"> 238 <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/fe699190-71f5-4eda-a63d-d6416df27cd1.png" alt="Logo Pemerintah Provinsi" 239 class="h-8 md:h-11 relative z-10 transition-transform group-hover:scale-105 duration-300"> 240 </div> 241 <div class="leading-tight"> 242 <h1 class="font-bold text-penyengat-green text-xs md:text-sm tracking-wide">Pemerintah Provinsi</h1> 243 <p class="font-extrabold text-penyengat-yellow text-sm md:text-base">Kepulauan Riau </p> 244 </div> 245 </a> 246 247 <!-- Desktop Menu --> 248 <div class="hidden lg:flex items-center h-full"> 249 <ul class="flex space-x-2 h-full items-center"> 250 <li class="h-full flex items-center"><a href="https://kepriprov.go.id/" class="px-3 py-2 text-sm font-semibold transition-colors relative text-slate-600 hover:text-penyengat-green">Beranda</a></li> <li class="h-full flex items-center relative group group-hover-menu px-2"><a href="https://kepriprov.go.id/laman/tentang-kami" class="px-2 py-2 text-sm font-semibold transition-colors flex items-center gap-1.5 cursor-pointer relative text-penyengat-green border-b-2 border-penyengat-yellow">Profil Pemda<i class="ph-bold ph-caret-down text-xs transition-transform group-hover:rotate-180"></i></a><div class="absolute top-full left-0 bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 nav-dropdown-l2"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/laman/tentang-kepri" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Sejarah</a></li><li><a href="https://kepriprov.go.id/laman/visi-dan-misi" class="block px-5 py-2.5 text-sm transition-colors font-medium text-penyengat-green bg-penyengat-softgreen/60">Visi dan Misi</a></li><li><a href="#" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Perangkat Derah</a></li><li class="relative group/sub w-full nav-item-l2"><a href="#" class="flex items-center justify-between w-full px-5 py-2.5 text-sm text-slate-600 hover:text-penyengat-green hover:bg-slate-50 transition-colors font-medium cursor-pointer sub-menu
250-gap">Kepala Daerah<i class="ph-bold ph-caret-right text-xs"></i></a><div class="absolute top-0 left-full bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 ml-1 nav-dropdown-l3"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/laman/gubernur" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/wakil-gubernur" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Wakil Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/sekretaris-daerah" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/asisten-sekretaris-daerah" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Asisten Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/tim-percepatan-pembangunan" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Tim Percepatan Pembangunan</a></li><li><a href="https://kepriprov.go.id/laman/staff-ahli" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Staf Ahli</a></li><li><a href="https://kepriprov.go.id/laman/ketua-dprd" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Ketua DPRD</a></li></ul></div></li></ul></div></li> <li class="h-full flex items-center"><a href="https://kepriprov.go.id/layanan" class="px-3 py-2 text-sm font-semibold transition-colors relative text-slate-600 hover:text-penyengat-green">Layanan</a></li> <li class="h-full flex items-center relative group group-hover-menu px-2"><a href="https://kepriprov.go.id/" class="px-2 py-2 text-sm font-semibold transition-colors flex items-center gap-1.5 cursor-pointer relative text-slate-600 hover:text-penyengat-green">Publikasi<i class="ph-bold ph-caret-down text-xs transition-transform group-hover:rotate-180"></i></a><div class="absolute top-full left-0 bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 nav-dropdown-l2"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/berita" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Artikel / Berita</a></li><li><a href="https://kepriprov.go.id/siaran-pers" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Siaran Pers</a></li><li><a href="https://kepriprov.go.id/pengumuman" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Pengumuman</a></li><li class="relative group/sub w-full nav-item-l2"><a href="#" class="flex items-center justify-between w-full px-5 py-2.5 text-sm text-slate-600 hover:text-penyengat-green hover:bg-slate-50 transition-colors font-medium cursor-pointer sub-menu-gap">Statistik<i class="ph-bold ph-caret-right text-xs"></i></a><div class="absolute top-0 left-full bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 ml-1 nav-dropdown-l3"><ul class="flex flex-col"><li><a href="#" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Publikasi BPS Kepri</a></li><li><a href="https://kepriprov.go.id/statistik" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Publikasi Pemprov Kepri</a></li></ul></div></li><li><a href="https://kepriprov.go.id/aset-multimedia" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Aset Multimedia</a></li></ul></div></li> <li class="h-full flex items-center relative group group-hover-menu px-2"><a href="https://kepriprov.go.id/dokumen" class="px-2 py-2 text-sm font-semibold transition-colors flex items-center gap-1.5 cursor-pointer relative text-slate-600 hover:text-penyengat-green">Dokumen & Peraturan<i class="ph-bold ph-caret-down text-xs transition-transform group-hover:rotate-180"></i></a><div class="absolute top-full left-0 bg-white rounded-2xl shadow-dropdown border border-slate-200 opacity-0 invisible transition-all duration-200 transform origin-top-left scale-95 z-50 py-2 nav-dropdown-l2"><ul class="flex flex-col"><li><a href="https://kepriprov.go.id/dokumen" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Laporan Tahunan</a></li><li><a href="https://jdih.kepriprov.go.id/dokumenhukum.phtml" class="block px-5 py-2.5 text-sm transition-colors font-medium text-slate-600 hover:text-penyengat-green hover:bg-slate-50">Produk Hukum (JDIH)</a></li></ul></div></li> </ul> 251 252 <a href="https://kepriprov.go.id/pencarian" id="btn-search-nav" 253 class="w-10 h-10 ml-4 rounded-full bg-penyengat-softgreen flex items-center justify-center text-penyengat-green hover:bg-penyengat-yellow hover:text-white transition shadow-sm hover:shadow-glow shrink-0" 254 title="Pencarian"> 255 <i class="ph ph-magnifying-glass text-lg"></i> 256 </a> 257 </div> 258 259 <!-- Mobile menu button --> 260 <div class="lg:hidden flex items-center"> 261 <button id="btn-mobile-menu" class="text-penyengat-green hover:text-penyengat-yellow focus:outline-none p-2" 262 aria-label="Menu"> 263 <i class="ph ph-list text-3xl"></i> 264 </button> 265 </div> 266 </div> 267 </div> 268 269 <!-- Mobile Menu Overlay & Panel (Full Screen Drawer) --> 270 <div id="mobile-menu-wrapper" class="fixed inset-0 z-[100] hidden"> 271 <div id="mobile-backdrop" class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm op
271acity-0 mobile-menu-overlay"></div> 272 273 <div id="mobile-panel" 274 class="absolute inset-0 w-full h-full max-w-none bg-white shadow-2xl transform translate-y-full mobile-menu-panel flex flex-col"> 275 276 <div class="flex items-center justify-between p-5 border-b border-slate-200"> 277 <div class="flex items-center gap-2"> 278 <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/fe699190-71f5-4eda-a63d-d6416df27cd1.png" alt="Logo" class="h-8"> 279 <span class="font-bold text-penyengat-green">Menu Navigasi</span> 280 </div> 281 <button id="btn-close-menu" 282 class="w-8 h-8 rounded-full bg-slate-100 text-slate-500 flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition-colors" 283 type="button"> 284 <i class="ph-bold ph-x text-lg"></i> 285 </button> 286 </div> 287 288 <div class="flex-grow overflow-y-auto pb-8 custom-scroll"> 289 <ul class="flex flex-col w-full"> 290 <li class="border-b border-slate-50"><a href="https://kepriprov.go.id/" class="block px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700">Beranda</a></li> <li class="border-b border-slate-50 flex flex-col"><button type="button" onclick="toggleAccordion('m1-1-8b024091', this)" class="w-full flex items-center justify-between px-6 py-4 font-bold text-base hover:bg-slate-50 text-penyengat-green"><span>Profil Pemda</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform rotate-180"></i></button><div id="m1-1-8b024091" class="accordion-content bg-slate-50 active"><ul class="flex flex-col border-l-2 border-slate-200 ml-8 my-2"><li><a href="https://kepriprov.go.id/laman/tentang-kepri" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Sejarah</a></li><li><a href="https://kepriprov.go.id/laman/visi-dan-misi" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-penyengat-green bg-penyengat-softgreen/60 rounded-lg">Visi dan Misi</a></li><li><a href="#" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Perangkat Derah</a></li><li class="flex flex-col"><button type="button" onclick="toggleAccordion('m1-1-8b024091-3-108f6edd', this)" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold hover:text-penyengat-green text-slate-600"><span>Kepala Daerah</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform text-xs "></i></button><div id="m1-1-8b024091-3-108f6edd" class="accordion-content bg-slate-100 rounded-lg mx-2 mb-2 "><ul class="flex flex-col py-2 px-2"><li><a href="https://kepriprov.go.id/laman/gubernur" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/wakil-gubernur" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Wakil Gubernur</a></li><li><a href="https://kepriprov.go.id/laman/sekretaris-daerah" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/asisten-sekretaris-daerah" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Asisten Sekretaris Daerah</a></li><li><a href="https://kepriprov.go.id/laman/tim-percepatan-pembangunan" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Tim Percepatan Pembangunan</a></li><li><a href="https://kepriprov.go.id/laman/staff-ahli" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Staf Ahli</a></li><li><a href="https://kepriprov.go.id/laman/ketua-dprd" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Ketua DPRD</a></li></ul></div></li></ul></div></li> <li class="border-b border-slate-50"><a href="https://kepriprov.go.id/layanan" class="block px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700">Layanan</a></li> <li class="border-b border-slate-50 flex flex-col"><button type="button" onclick="toggleAccordion('m1-3-219bddd0', this)" class="w-full flex items-center justify-between px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700"><span>Publikasi</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform "></i></button><div id="m1-3-219bddd0" class="accordion-content bg-slate-50 "><ul class="flex flex-col border-l-2 border-slate-200 ml-8 my-2"><li><a href="https://kepriprov.go.id/berita" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Artikel / Berita</a></li><li><a href="https://kepriprov.go.id/siaran-pers" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Siaran Pers</a></li><li><a href="https://kepriprov.go.id/pengumuman" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Pengumuman</a></li><li class="flex flex-col"><button type="button" onclick="toggleAccordion('m1-3-219bddd0-3-77c23c3f', this)" class="w-full flex items-center justify-between px-4 py-2.5 text-sm font-bold hover:text-penyengat-green text-slate-600"><span>Statistik</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform text-xs "></i></button><div id="m1-3-219bddd0-3-77c23c3f" class="accordion-content bg-slate-100 rounded-lg mx-2 mb-2 "><ul class="flex flex-col py-2 px-2"><li><a href="#" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Publikasi BPS Kepri</a></li><li><a href="https://kepriprov.go.id/statistik" class="block px-3 py-2 text-xs font-medium hover:text-penyengat-green text-slate-500">Publikasi Pemprov Kepri</a></li></ul></div></li><li><a href="https://kepriprov.go.id/aset-multimedia" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Aset Multimedia</a></li></ul></div></li> <li class="border-b border-slate-50 flex flex-col"><button type="button" onclick="toggleAccordion('m1-4-f487b38b', this)" class="w-full flex items-center justify-between px-6 py-4 font-bold text-base hover:bg-slate-50 text-slate-700"><span>Dokumen & Peraturan</span><i class="ph-bold ph-caret-down text-slate-400 transition-transform "></i></button><div id="m1-4-f487b38b" class="accordion-content bg-slate-50 "><ul class="flex flex-col border-l-2 border-slate-200 ml-8 my-2"><li><a href="https://kepriprov.go.id/dokumen" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Laporan Tahunan</a></li><li><a href="https://jdih.kepriprov.go.id/dokumenhukum.phtml" class="block px-4 py-2.5 text-sm font-medium hover:text-penyengat-green text-slate-600">Produk Hukum (JDIH)</a></li></ul></div></li> </ul> 291 </div> 292 </div> 293 </div> 294</nav> 295
296<script> 297 // ââ Sticky navbar âââââââââââââââââââââââââââââââââââââââââââââââââââââââââ 298 window.addEventListener('scroll', () => { 299 document.getElementById('navbar').classList.toggle('shadow-md', window.scrollY > 20); 300 }); 301 302 // ââ Mobile menu toggle (drawer) âââââââââââââââââââââââââââââââââââââââââââ 303 const btnMenu = document.getElementById('btn-mobile-menu'); 304 const btnCloseMenu = document.getElementById('btn-close-menu'); 305 const mobileMenuWrapper = document.getElementById('mobile-menu-wrapper'); 306 const mobileBackdrop = document.getElementById('mobile-backdrop'); 307 const mobilePanel = document.getElementById('mobile-panel'); 308 309 window.openMobileMenu = function() { 310 if (!mobileMenuWrapper || !mobileBackdrop || !mobilePanel) return; 311 mobileMenuWrapper.classList.remove('hidden'); 312 setTimeout(() => { 313 mobileBackdrop.classList.remove('opacity-0'); 314 mobilePanel.classList.remove('translate-y-full'); 315 document.body.style.overflow = 'hidden'; 316 }, 10); 317 } 318 319 window.closeMobileMenu = function() { 320 if (!mobileMenuWrapper || !mobileBackdrop || !mobilePanel) return; 321 mobileBackdrop.classList.add('opacity-0'); 322 mobilePanel.classList.add('translate-y-full'); 323 document.body.style.overflow = 'auto'; 324 325 setTimeout(() => { 326 mobileMenuWrapper.classList.add('hidden'); 327 }, 300); 328 } 329 330 if (btnMenu) btnMenu.addEventListener('click', openMobileMenu); 331 if (btnCloseMenu) btnCloseMenu.addEventListener('click', closeMobileMenu); 332 if (mobileBackdrop) mobileBackdrop.addEventListener('click', closeMobileMenu); 333 334 // Auto-close mobile menu when an internal link is clicked (excluding dropdown triggers) 335 if (mobilePanel) { 336 mobilePanel.addEventListener('click', (e) => { 337 const link = e.target.closest('a'); 338 if (link) { 339 const href = link.getAttribute('href'); 340 // Close only if it's an internal link (not starting with http/https unless it's the same domain) 341 // and it's not a dropdown toggle (though mobile uses buttons for toggles, let's be safe) 342 const isExternal = href.startsWith('http') && !href.includes(window.location.hostname); 343 const isAnchor = href.startsWith('#'); 344 345 if (!isExternal && !isAnchor) { 346 closeMobileMenu(); 347 } 348 } 349 }); 350 } 351 352 // ââ Mobile accordion ââââââââââââââââââââââââââââââââââââââââââââââââââââââ 353 function toggleAccordion(contentId, buttonElement) { 354 const content = document.getElementById(contentId); 355 const icon = buttonElement.querySelector('i'); 356 357 if (!content) return; 358 359 if (content.classList.contains('active')) { 360 content.classList.remove('active'); 361 if (icon) icon.classList.remove('rotate-180'); 362 buttonElement.classList.remove('text-penyengat-green'); 363 } else { 364 content.classList.add('active'); 365 if (icon) icon.classList.add('rotate-180'); 366 buttonElement.classList.add('text-penyengat-green'); 367 } 368 } 369</script>
369 370 371 <main id="main-content"> 372 373<section class="relative pt-24 pb-16 md:pt-32 md:pb-16 bg-penyengat-dark overflow-hidden"> 374 <div class="absolute top-0 right-10 w-72 h-72 bg-penyengat-yellow rounded-full mix-blend-screen filter blur-[100px] opacity-20 animate-pulse pointer-events-none"></div> 375 <div class="absolute bottom-0 left-10 w-80 h-80 bg-penyengat-green rounded-full mix-blend-screen filter blur-[100px] opacity-40 pointer-events-none"></div> 376 377 <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> 378 <nav class="flex justify-center mb-10 md:mb-14" aria-label="Breadcrumb"> 379 <ol class="inline-flex items-center space-x-1 md:space-x-2 bg-white/10 backdrop-blur-md px-4 py-1.5 rounded-full border border-white/20 shadow-sm"> 380 <li><a href="https://kepriprov.go.id/" class="inline-flex items-center text-xs font-medium text-green-100 hover:text-penyengat-yellow transition-colors">Beranda</a></li> 381 <li><i class="ph-bold ph-caret-right text-green-100/50 mx-1 text-xs"></i></li> 382 <li><span class="text-xs font-bold text-penyengat-yellow ml-1">Visi dan Misi</span></li> 383 </ol> 384 </nav> 385 386 <h1 class="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white tracking-tight leading-tight mb-6">Visi dan Misi</h1> 387 <div class="flex justify-center items-center gap-2 text-xs md:text-sm text-green-100/70 font-bold tracking-widest"> 388 <i class="ph-fill ph-clock-counter-clockwise text-penyengat-yellow text-base"></i> 389 Terakhir Diperbarui: 07 Juli 2026 </div> 390 <div class="mt-3 flex justify-center items-center gap-2 text-xs md:text-sm text-green-100/70 font-bold tracking-widest"> 391 <i class="ph-fill ph-eye text-penyengat-yellow text-base"></i> 392 25,200 Tayangan 393 </div> 394 </div> 395</section> 396 397<section class="pt-16 md:pt-20 pb-16 md:pb-24 bg-white relative"> 398 <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-20"> 399 400 <article class="prose-portal max-w-none"> 401 <h3>Pemerintah Provinsi Kepulauan Riau</h3><p><strong>VISI :</strong></p><p>"Terwujudnya Kepulauan Riau yang Maju, Makmur, dan Merata"</p><p><strong>MISI :</strong></p><ol><li><p>Meningkatkan Pertumbuhan dan Pemerataan Ekonomi Berbasis Maritim dan Keunggulan Wilayah</p></li><li><p>Meningkatkan Pemerataan Pembangunan Infrastruktur dan Konektivitas Antar Wilayah</p></li><li><p>Mewujudkan Pemerataan dan Meningkatkan Kualitas Sumber Daya Manusia yang berdaya Saing dan berkarakter</p></li><li><p>Melaksanakan Tata Kelola Pemerintahan yang Bersih, Demokratis, Terbuka, Berbasis Teknologi Informasi dan Berorientasi Pelayanan</p></li><li><p>Mengembangkan dan Melestarikan Budaya Melayu dan Nasional serta Ekologi dalam Mendukung Pembangunan Berkelanjutan</p></li></ol><p> </p> </article> 402 403 <div class="mt-12 pt-8 border-t border-slate-100"> 404 <div class="flex flex-col md:flex-row md:items-center justify-between gap-6"> 405 <h4 class="text-slate-800 font-extrabold text-base tracking-tight">Bagikan Halaman</h4> 406 <div class="flex items-center gap-3"> 407 408<button 409 type="button" 410 class="w-full md:w-auto inline-flex items-center justify-center gap-2 bg-penyengat-green hover:bg-penyengat-dark text-white font-bold px-6 py-2.5 rounded-xl transition-all group" 411 data-share-trigger="1" 412 data-share-url="https://kepriprov.go.id/laman/visi-dan-misi" 413 data-share-title="Visi dan Misi" 414> 415 <i class="ph-fill ph-share-network text-lg group-hover:rotate-12 transition-transform"></i> 416 Bagikan</button> 417 </div> 418 </div> 419 </div> 420 </div> 421</section> 422 </main> 423 424 <footer 425 class="bg-penyengat-dark pt-28 md:pt-36 pb-0 text-green-50/70 overflow-hidden relative shadow-[0_-10px_30px_rgba(0,0,0,0.15)]"> 426 <!-- Batik Frame Border Top --> 427 <div class="absolute top-0 left-0 w-full h-8 md:h-12 z-20 opacity-100" 428 style="background-image: url('https://kepriprov.go.id/assets/media/patterns-batik-2.png'); background-repeat: repeat-x; background-size: auto 100%;"> 429 </div> 430 431 <!-- Footer Pattern Background --> 432 <div class="absolute inset-0 z-0 pointer-events-none" 433 style="background-image: url('https://kepriprov.go.id/assets/media/patterns-footer.png'); background-position: bottom center; background-size: 100% auto; background-repeat: no-repeat;"> 434 </div> 435 436 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> 437 438 <!-- ââ TOP GRID ââ --> 439 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-10 lg:gap-20 mb-12 pb-12"> 440 441 <!-- Col 1: Identitas Instansi + Kontak + Sosmed --> 442 <div class="lg:col-span-4"> 443 <!-- Logo & nama --> 444 <div class="flex items-center gap-4 mb-8"> 445 <img src="https://cms.kepriprov.go.id/api/files/uploads/2026/04/bda0a87f-ab96-4fdc-84cb-d3220d4f3eca.png" alt="Logo Portal Pemerintah Provinsi Kepulauan Riau" class="h-12" loading="lazy"> 446 <div class="border-l border-white/10 pl-4"> 447 <p class="text-white font-semibold text-sm tracking-tight leading-tight uppercase">Portal Pemerintah Provinsi Kepulauan Riau</p> 448 </div> 449 </div> 450 451 <!-- Alamat --> 452 <p class="text-sm leading-relaxed mb-6 max-w-sm text-green-50/60 font-normal"> 453 Pusat Pemerintahan Provinsi Kepulauan Riau Istana Kota Piring Gedung Sultan Mahmud Riayat Syah, Pulau Dompak, Kec. Bukit Bestari, Kota Tanjungpinang. </p> 454 455 <p 456 class="text-xs text-green-50/40 font-medium leading-relaxed max-w-xs mt-8 italic border-t border-white/5 pt-6"> 457 Portal ini dikembangkan dan dikelola oleh Dinas Komunikasi dan Informatika Provinsi Kepulauan Riau. 458 </p> 459 </div> 460 461 <!-- Col 2: Navigasi Portal --> 462 <div class="lg:col-span-3"> 463 <h3 class="text-white font-bold mb-6 text-base tracking-wide"> 464 Navigasi Utama 465 </h3> 466 <ul class="space-y-4"> 467 <li> 468 <a href="https://kepriprov.go.id/profil" 469 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
470 <span 471 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Profil Pimpinan</span> 472 </a> 473 </li> 474 <li> 475 <a href="https://kepriprov.go.id/laman/visi-misi" 476 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 477 <span 478 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Visi & Misi Daerah</span> 479 </a> 480 </li> 481 <li> 482 <a href="https://kepriprov.go.id/berita" 483 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 484 <span 485 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Berita & Siaran Pers</span> 486 </a> 487 </li> 488 <li> 489 <a href="https://kepriprov.go.id/agenda" 490 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 491 <span 492 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Agenda Kegiatan</span> 493 </a> 494 </li> 495 <li> 496 <a href="https://kepriprov.go.id/program" 497 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 498 <span 499 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Program Unggulan</span> 500 </a> 501 </li> 502 <li> 503 <a href="https://kepriprov.go.id/proyek" 504 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 505 <span 506 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Proyek Strategis</span> 507 </a> 508 </li> 509 <li> 510 <a href="https://kepriprov.go.id/dokumen" 511 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 512 <span 513 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Dokumen & Laporan</span> 514 </a> 515 </li> 516 <li> 517 <a href="https://kepriprov.go.id/#kontak" 518 class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 519 <span 520 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Kontak & Bantuan</span> 521 </a> 522 </li> 523 </ul> 524 </div> 525 526 <!-- Col 3: Informasi Publik --> 527 <div class="lg:col-span-3"> 528 <h3 class="text-white font-bold mb-6 text-base tracking-wide"> 529 Tautan Terintegrasi 530 </h3> 531 <ul class="space-y-4"> 532 <li> 533 <a href="https://ppid.kepriprov.go.id/" target="_blank" rel="noopener noreferrer" class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 534 <span 535 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Portal PPID Kepri</span> 536 </a> 537 </li> 538 <li> 539 <a href="https://jdih.kepriprov.go.id/" target="_blank" rel="noopener noreferrer" class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 540 <span 541 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">JDIH Produk Hukum</span> 542 </a> 543 </li> 544 <li> 545 <a href="https://kepri.lapor.go.id/instansi/pemerintah-provinsi-kepulauan-riau" target="_blank" rel="noopener noreferrer" class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group">
546 <span 547 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Satu Data Kepri</span> 548 </a> 549 </li> 550 <li> 551 <a href="https://www.lapor.go.id/" target="_blank" rel="noopener noreferrer" class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 552 <span 553 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Portal SP4N LAPOR!</span> 554 </a> 555 </li> 556 <li> 557 <a href="https://spse.inaproc.id/kepriprov" target="_blank" rel="noopener noreferrer" class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 558 <span 559 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">LPSE Pengadaan</span> 560 </a> 561 </li> 562 <li> 563 <a href="https://beasiswa.kepriprov.go.id/" target="_blank" rel="noopener noreferrer" class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 564 <span 565 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Beasiswa Kepri</span> 566 </a> 567 </li> 568 <li> 569 <a href="https://dpmptsp.kepriprov.go.id/" target="_blank" rel="noopener noreferrer" class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 570 <span 571 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Simpadu Perizinan</span> 572 </a> 573 </li> 574 <li> 575 <a href="https://bapenda.kepriprov.go.id/" target="_blank" rel="noopener noreferrer" class="block text-sm font-medium text-green-50/60 hover:text-penyengat-yellow transition group"> 576 <span 577 class="border-b border-transparent group-hover:border-penyengat-yellow/20 pb-0.5">Info Pajak Kendaraan</span> 578 </a> 579 </li> 580 </ul> 581 </div> 582 583 <!-- Col 4: Statistik --> 584 <div class="lg:col-span-2"> 585 <h3 class="text-white font-bold mb-6 text-base tracking-wide"> 586 Visitor 587 </h3> 588 589 <!-- Visitor Stats --> 590 <div class="space-y-4"> 591 <div 592 class="bg-white/5 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-md hover:border-penyengat-yellow/30 transition-colors group"> 593 <p 594 class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-penyengat-yellow/50 transition-colors"> 595 Online</p> 596 <p id="visitor-online" class="text-2xl font-bold text-penyengat-yellow leading-none"> 597 92 </p> 598 </div> 599 <div 600 class="bg-white/5 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-md hover:border-white/30 transition-colors group"> 601 <p 602 class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-white/50 transition-colors"> 603 Hari Ini</p> 604 <p id="visitor-today" class="text-2xl font-bold text-white leading-none"> 605 27,945 </p> 606 </div> 607 <div 608 class="bg-white/5 rounded-2xl px-5 py-4 border border-white/10 backdrop-blur-md hover:border-green-400/30 transition-colors group"> 609 <p 610 class="text-[10px] uppercase tracking-widest text-white/30 mb-1 group-hover:text-green-400/50 transition-colors"> 611 Kemarin</p> 612 <p id="visitor-yesterday" class="text-xl font-bold text-green-400 leading-none"> 613 30,323 </p> 614 </div> 615 </div> 616 </div> 617 618 </div> 619 620 <!-- ââ BOTTOM BAR ââ --> 621 <div 622 class="py-10 flex flex-col md:flex-row justify-between items-center gap-6 text-xs font-medium text-white/30 border-t-2 border-white/10"> 623 <div class="flex items-center gap-4 flex-col md:flex-row text-center md:text-left"> 624 <p> 625 © 2026 Dinas Komunikasi & Informatika Provinsi Kepulauan Riau.<br class="md:hidden"> Hak 626 Cipta Dilindungi. 627 </p> 628 </div> 629 <div class="flex gap-6 md:gap-8 justify-center flex-wrap tracking-wider text-[10px]"> 630 <a href="https://kepriprov.go.id/laman/kebijakan-privasi" 631 class="hover:text-penyengat-yellow transition-colors underline decoration-white/10 underline-offset-4">Kebijakan 632 Privasi</a> 633 <a href="https://kepriprov.go.id/laman/ketentuan-penggunaan" 634 class="hover:text-penyengat-yellow transition-colors underline decoration-white/10 underline-offset-4">Ketentuan 635 Penggunaan</a> 636 </div> 637 </div> 638 </div> 639</footer> <!-- Floating Action Menu --> 640<div class="fixed right-2 md:right-4 top-1/2 transform -translate-y-1/2 z-50 flex flex-col items-end gap-2 md:gap-3"> 641 642 <!-- Survei / Penilaian --> 643 <button type="button" id="btn-open-survey-modal" data-survey-url="https://skm.kepriprov.go.id/survey/25c1b6cd-2e11-4f6b-89dd-1ffeb6ad266e" class="group flex flex-col items-center bg-penyengat-yellow hover:bg-penyengat-yellow-hover text-penyengat-dark rounded-xl md:rounded-2xl shadow-float transition-all duration-300 px-3 py-2 md:py-2.5 border border-black/10 hover:scale-[1.02]" 644 style="writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);">
645 <span class="text-[10px] md:text-xs font-extrabold tracking-tight leading-none">Survei Kepuasan Masyarakat</span> 646 </button> 647 648 649 650</div> 651 652 <div id="survey-modal" class="fixed inset-0 z-[99999] hidden items-center justify-center bg-black/70 p-0" 653 aria-hidden="true" role="dialog" aria-modal="true" aria-label="Survei Kepuasan" style="z-index: 99999;"> 654 <div class="relative z-[100000] h-full w-full overflow-hidden bg-white shadow-2xl" 655 style="z-index: 100000; width: 100%; height: 100%;"> 656 <div class="flex h-14 items-center justify-between border-b px-4 py-3 bg-white"> 657 <h3 class="text-sm font-bold text-slate-800 md:text-base">Survei Kepuasan Masyarakat</h3> 658 <button type="button" id="btn-close-survey-modal" 659 class="inline-flex h-8 w-8 items-center justify-center rounded-md text-slate-600 hover:bg-slate-100 hover:text-slate-900" 660 aria-label="Tutup dialog survei"> 661 <i class="ph-bold ph-x text-lg"></i> 662 </button> 663 </div> 664 <iframe id="survey-modal-iframe" title="Widget Survei Kepuasan" class="w-full border-none" 665 style="height: calc(100% - 56px); width: 100%;" src="about:blank" 666 loading="lazy" referrerpolicy="strict-origin-when-cross-origin"></iframe> 667 </div> 668 </div> 669 670
670<script> 671 (function () { 672 const openBtn = document.getElementById('btn-open-survey-modal'); 673 const modal = document.getElementById('survey-modal'); 674 const closeBtn = document.getElementById('btn-close-survey-modal'); 675 const iframe = document.getElementById('survey-modal-iframe'); 676 if (!openBtn || !modal || !closeBtn || !iframe) return; 677 678 const surveyUrl = openBtn.getAttribute('data-survey-url') || ''; 679 if (!surveyUrl || surveyUrl === '#') return; 680 681 const openModal = () => { 682 iframe.setAttribute('src', surveyUrl); 683 modal.classList.remove('hidden'); 684 modal.classList.add('flex'); 685 modal.setAttribute('aria-hidden', 'false'); 686 document.body.classList.add('overflow-hidden'); 687 document.documentElement.classList.add('overflow-hidden'); 688 }; 689 690 const closeModal = () => { 691 modal.classList.add('hidden'); 692 modal.classList.remove('flex'); 693 modal.setAttribute('aria-hidden', 'true'); 694 iframe.setAttribute('src', 'about:blank'); 695 document.body.classList.remove('overflow-hidden'); 696 document.documentElement.classList.remove('overflow-hidden'); 697 }; 698 699 openBtn.addEventListener('click', openModal); 700 closeBtn.addEventListener('click', closeModal); 701 })(); 702 </script>
702 703 <!-- Global Image Preview Modal --> 704<div id="globalImagePreviewModal" class="fixed inset-0 z-[100] flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300"> 705 <!-- Backdrop --> 706 <div class="absolute inset-0 bg-slate-900/95 backdrop-blur-md cursor-zoom-out btn-close-image-preview"></div> 707 708 <!-- Content Container --> 709 <div class="relative z-10 w-full max-w-5xl mx-auto p-4 md:p-6 flex flex-col items-center justify-center scale-95 transition-transform duration-300 delay-75" id="globalImagePreviewContent"> 710 711 <!-- Top Bar --> 712 <div class="w-full flex items-start justify-between gap-4 mb-4 md:mb-6 px-2"> 713 <div class="text-white flex-1 min-w-0"> 714 <h3 id="globalImagePreviewTitle" class="text-lg md:text-xl text-white font-extrabold truncate">Pratinjau Gambar</h3> 715 <p id="globalImagePreviewCaption" class="text-sm text-green-100/70 mt-1 line-clamp-2 md:w-3/4 hidden"></p> 716 </div> 717 <div class="flex items-center gap-2 shrink-0"> 718 <a href="#" id="globalImagePreviewDownload" download 719 class="w-10 h-10 md:w-11 md:h-11 rounded-full bg-white/10 hover:bg-penyengat-green text-white flex items-center justify-center transition-all border border-white/20 select-none" title="Download Gambar"> 720 <i class="ph-bold ph-download-simple text-lg md:text-xl"></i> 721 </a> 722 <button class="w-10 h-10 md:w-11 md:h-11 rounded-full bg-white/10 hover:bg-red-500 text-white flex items-center justify-center transition-all border border-white/20 select-none btn-close-image-preview" title="Tutup"> 723 <i class="ph-bold ph-x text-lg md:text-xl"></i> 724 </button> 725 </div> 726 </div> 727 728 <!-- Image Wrapper --> 729 <div class="relative w-full max-h-[75vh] flex items-center justify-center rounded-[1.5rem] md:rounded-[2rem] overflow-hidden bg-black/40 ring-1 ring-white/10 shadow-2xl backdrop-blur-sm group" id="globalImagePreviewWrapper"> 730 <!-- Loading spinner --> 731 <div id="globalImagePreviewLoading" class="absolute inset-0 flex items-center justify-center bg-transparent"> 732 <div class="w-10 h-10 border-4 border-penyengat-green/30 border-t-penyengat-green rounded-full animate-spin"></div> 733 </div> 734 <!-- Image --> 735 <img id="globalImagePreviewImg" src="" class="max-w-full max-h-[75vh] object-contain transition-opacity duration-500 opacity-0" alt="Pratinjau Gambar"> 736 737 <!-- Navigation Prev --> 738 <button id="globalImagePreviewPrev" class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-black/50 hover:bg-penyengat-green text-white flex items-center justify-center transition-all opacity-0 group-hover:opacity-100 backdrop-blur-sm border border-white/20 select-none hidden"> 739 <i class="ph-bold ph-caret-left text-2xl"></i> 740 </button> 741 742 <!-- Navigation Next --> 743 <button id="globalImagePreviewNext" class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full bg-black/50 hover:bg-penyengat-green text-white flex items-center justify-center transition-all opacity-0 group-hover:opacity-100 backdrop-blur-sm border border-white/20 select-none hidden"> 744 <i class="ph-bold ph-caret-right text-2xl"></i> 745 </button> 746 </div> 747 748 </div> 749</div> 750 <!-- Public Service Bottom Sheet / Modal --> 751<div id="serviceModalOverlay" class="service-modal-overlay"></div> 752<div id="serviceModal" class="service-modal-content"> 753 <!-- Bottom Sheet Handle (Mobile Only) --> 754 <div class="md:hidden flex justify-center py-4"> 755 <div class="w-12 h-1.5 bg-slate-200 rounded-full"></div> 756 </div> 757 758 <!-- Modal Header --> 759 <div class="px-6 md:px-8 pb-4 pt-2 md:pt-8 flex justify-between items-start"> 760 <div class="max-w-[85%]"> 761 <h2 id="serviceModalTitle" class="text-xl md:text-2xl font-extrabold text-penyengat-dark tracking-tight leading-tight">Layanan</h2> 762 <p id="serviceModalDesc" class="text-slate-500 text-sm mt-1 line-clamp-2"></p> 763 </div> 764 <button type="button" id="closeServiceModal" class="w-10 h-10 rounded-full bg-slate-50 text-slate-400 flex items-center justify-center hover:bg-red-50 hover:text-red-500 transition-colors"> 765 <i class="ph-bold ph-x text-lg"></i> 766 </button> 767 </div> 768 769 <!-- Content Area --> 770 <div class="modal-scroll flex-grow px-6 md:px-8 pb-8 pt-2 custom-scroll"> 771 <!-- Loading State --> 772 <div id="serviceModalLoading" class="hidden py-12 flex flex-col items-center justify-center text-center"> 773 <div class="w-12 h-12 border-4 border-penyengat-softgreen border-t-penyengat-green rounded-full animate-spin mb
773-4"></div> 774 <p class="text-slate-400 text-sm font-medium">Memuat daftar layanan...</p> 775 </div> 776 777 <!-- List Container --> 778 <div id="serviceModalList" class="grid grid-cols-1 gap-3"> 779 <!-- JS will inject items here --> 780 </div> 781 782 <!-- Empty State --> 783 <div id="serviceModalEmpty" class="hidden py-12 text-center"> 784 <i class="ph-duotone ph-folder-open text-5xl text-slate-200 mb-3 block mx-auto"></i> 785 <p class="text-slate-400 text-sm">Belum ada layanan tersedia untuk kategori ini.</p> 786 </div> 787 </div> 788 789 <!-- Footer Action (Optional) --> 790 <div class="px-6 md:px-8 py-5 border-t border-slate-100 bg-slate-50/50 rounded-b-[2rem]"> 791 <a id="serviceModalAllLink" href="https://kepriprov.go.id/layanan" class="w-full inline-flex items-center justify-center gap-2 bg-white text-penyengat-green font-bold px-6 py-3 rounded-xl border border-slate-200 hover:border-penyengat-green transition-all shadow-sm"> 792 Lihat Semua Layanan <i class="ph-bold ph-arrow-right"></i> 793 </a> 794 </div> 795</div> 796 797 <!-- Back to Top Button --> 798 <button id="back-to-top" 799 class="fixed bottom-24 right-6 md:bottom-8 md:right-8 z-[60] w-12 h-12 rounded-2xl bg-white shadow-float border border-slate-100 flex items-center justify-center text-penyengat-green transform translate-y-28 opacity-0 pointer-events-none transition-all duration-500 hover:bg-penyengat-green hover:text-white hover:-translate-y-1 group" 800 aria-label="Kembali ke Atas"> 801 <i class="ph-bold ph-caret-up text-xl transition-transform group-hover:-translate-y-0.5"></i> 802 </button> 803 804 <!-- Google Analytics (gtag.js) -->
vendor: 66 bytes, lines 804-805
804 805 <script async src="https://www.googletagmanager.com/gtag/js?id=
805G-8CVWMJYEDX
vendor: 14 bytes, lines 805-806
805"></script> 806
806<script> 807
vendor: 142 bytes, lines 807-810
807window.dataLayer = window.dataLayer || []; 808 function gtag() { dataLayer.push(arguments); } 809 gtag('js', new Date()); 810 gtag('config', '
810G-8CVWMJYEDX
vendor: 6 bytes, lines 810-811
810'); 811
811</script>
811 812 813 <!-- CMS Kepri Analytics --> 814
814<script> 815 (function () { 816 var apiToken = "cms_b51f711db3174048a0fc805932e77b34"; 817 var apiUrl = "https://cms.kepriprov.go.id/api/v1/analytics/track"; 818 819 function getUtmParam(name) { 820 var params = new URLSearchParams(window.location.search); 821 return params.get(name) || null; 822 } 823 824 function track() { 825 var visitorId = localStorage.getItem('cms_visitor_id'); 826 var sessionId = sessionStorage.getItem('cms_session_id'); 827 828 var payload = { 829 url: window.location.href, 830 title: document.title, 831 referrer: document.referrer || null, 832 visitorId: visitorId, 833 sessionId: sessionId, 834 utmSource: getUtmParam('utm_source'), 835 utmMedium: getUtmParam('utm_medium'), 836 utmCampaign: getUtmParam('utm_campaign'), 837 screenResolution: window.screen.width + 'x' + window.screen.height, 838 language: navigator.language || null, 839 // userAgent di body sebagai fallback; IP real diambil dari CF-Connecting-IP header 840 userAgent: navigator.userAgent || null, 841 }; 842 843 if (window.performance && window.performance.timing) { 844 var t = window.performance.timing; 845 if (t.loadEventEnd > 0) { 846 payload.loadTime = t.loadEventEnd - t.navigationStart; 847 } 848 } 849 850 fetch(apiUrl, { 851 method: 'POST', 852 headers: { 'Content-Type': 'application/json', 'x-api-token': apiToken }, 853 body: JSON.stringify(payload) 854 }) 855 .then(function (res) { return res.json(); }) 856 .then(function (data) { 857 if (data.visitorId) localStorage.setItem('cms_visitor_id', data.visitorId); 858 if (data.sessionId) sessionStorage.setItem('cms_session_id', data.sessionId); 859 }) 860 .catch(function () { /* silent fail */ }); 861 } 862 863 if (document.readyState === 'complete') { 864 track(); 865 } else { 866 window.addEventListener('load', track); 867 } 868 869 // SPA navigation support 870 var _push = history.pushState; 871 history.pushState = function () { _push.apply(history, arguments); setTimeout(track, 100); }; 872 window.addEventListener('popstate', track); 873 })(); 874 </script>
874 875 876 <!-- Core Scripts --> 877
877<script src="https://kepriprov.go.id/assets/js/particles.js"></script>
877 878
878<script src="https://kepriprov.go.id/assets/js/spa.js?v=20260506"></script>
878 879
880<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a43b2bdc2e613d6e',t:'MTc5MDg1NDYwNA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
880<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"4ad3abb0e76a43a29c5e459e7ef39cfe","r":1,"spa":2}' crossorigin="anonymous"></script>
880 881</body> 882 883</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.