<!-- Mengambil sumber video tanpa ijin merupakan tindakan pencurian.
Mengklaim sumber video sebagai domain publik dan mendistribusikan ulang untuk kepentingan pribadi merupakan tindak kejahatan. 
Tidak ada instansi pemerintah manapun yang menyebarkan sumber video secara terbuka untuk dipakai pihak lain tanpa ijin

                                                                $$\                                    $$$$\               
                                                                \__|                                  $$  $$\              
                        $$$$$$$\  $$\   $$\  $$$$$$\   $$$$$$\  $$\        $$$$$$\   $$$$$$\   $$$$$$\\__/$$ |             
                        $$  __$$\ $$ |  $$ | \____$$\ $$  __$$\ $$ |       \____$$\ $$  __$$\  \____$$\  $$  |             
                        $$ |  $$ |$$ |  $$ | $$$$$$$ |$$ |  \__|$$ |       $$$$$$$ |$$ /  $$ | $$$$$$$ |$$  /              
                        $$ |  $$ |$$ |  $$ |$$  __$$ |$$ |      $$ |      $$  __$$ |$$ |  $$ |$$  __$$ |\__/               
                        $$ |  $$ |\$$$$$$$ |\$$$$$$$ |$$ |      $$ |      \$$$$$$$ |$$$$$$$  |\$$$$$$$ |$$\                
                        \__|  \__| \____$$ | \_______|\__|      \__|       \_______|$$  ____/  \_______|\__|               
                                  $$\   $$ |                                        $$ |                                   
                                  \$$$$$$  |                                        $$ |                                   
                                   \______/                                         \__|                                   
                                                                                                                           
                                                                                                                           
                                                $$$$$$\$$$$\   $$$$$$\  $$\   $$\                                          
                                                $$  _$$  _$$\  \____$$\ $$ |  $$ |                                         
                                                $$ / $$ / $$ | $$$$$$$ |$$ |  $$ |                                         
                                                $$ | $$ | $$ |$$  __$$ |$$ |  $$ |                                         
                                                $$ | $$ | $$ |\$$$$$$$ |\$$$$$$  |                                         
                                                \__| \__| \__| \_______| \______/                                          
                                                                                                                           
                                                                                                                           
                                                                                                                           
                                                $$\ $$\                                 $$\            $$\                 
                                                $$ |\__|                                $$ |           $$ |                
                        $$$$$$\$$$$\   $$$$$$\  $$ |$$\ $$$$$$$\   $$$$$$\         $$$$$$$ | $$$$$$\ $$$$$$\    $$$$$$\    
                        $$  _$$  _$$\  \____$$\ $$ |$$ |$$  __$$\ $$  __$$\       $$  __$$ | \____$$\\_$$  _|   \____$$\   
                        $$ / $$ / $$ | $$$$$$$ |$$ |$$ |$$ |  $$ |$$ /  $$ |      $$ /  $$ | $$$$$$$ | $$ |     $$$$$$$ |  
                        $$ | $$ | $$ |$$  __$$ |$$ |$$ |$$ |  $$ |$$ |  $$ |      $$ |  $$ |$$  __$$ | $$ |$$\ $$  __$$ |  
                        $$ | $$ | $$ |\$$$$$$$ |$$ |$$ |$$ |  $$ |\$$$$$$$ |      \$$$$$$$ |\$$$$$$$ | \$$$$  |\$$$$$$$ |  
                        \__| \__| \__| \_______|\__|\__|\__|  \__| \____$$ |       \_______| \_______|  \____/  \_______|  
                                                                  $$\   $$ |                                               
                                                                  \$$$$$$  |                                               
                                                                   \______/                                                
                                                               $$\               $$\                                       
                                                               $$ |              $$ |                                      
                                          $$\   $$\ $$$$$$$\ $$$$$$\   $$\   $$\ $$ |  $$\                                 
                                          $$ |  $$ |$$  __$$\\_$$  _|  $$ |  $$ |$$ | $$  |                                
                                          $$ |  $$ |$$ |  $$ | $$ |    $$ |  $$ |$$$$$$  /                                 
                                          $$ |  $$ |$$ |  $$ | $$ |$$\ $$ |  $$ |$$  _$$<                                  
                                          \$$$$$$  |$$ |  $$ | \$$$$  |\$$$$$$  |$$ | \$$\                                 
                                           \______/ \__|  \__|  \____/  \______/ \__|  \__|                                
                                                                                                                           
                                                                                                                           
                                                                                                                           
                        $$\                                      $$\                                                       
                        $$ |                                     $$ |                                                      
                        $$ |  $$\  $$$$$$\  $$\   $$\ $$$$$$$\ $$$$$$\   $$\   $$\ $$$$$$$\   $$$$$$\   $$$$$$\  $$$$$$$\  
                        $$ | $$  |$$  __$$\ $$ |  $$ |$$  __$$\\_$$  _|  $$ |  $$ |$$  __$$\ $$  __$$\  \____$$\ $$  __$$\ 
                        $$$$$$  / $$$$$$$$ |$$ |  $$ |$$ |  $$ | $$ |    $$ |  $$ |$$ |  $$ |$$ /  $$ | $$$$$$$ |$$ |  $$ |
                        $$  _$$<  $$   ____|$$ |  $$ |$$ |  $$ | $$ |$$\ $$ |  $$ |$$ |  $$ |$$ |  $$ |$$  __$$ |$$ |  $$ |
                        $$ | \$$\ \$$$$$$$\ \$$$$$$  |$$ |  $$ | \$$$$  |\$$$$$$  |$$ |  $$ |\$$$$$$$ |\$$$$$$$ |$$ |  $$ |
                        \__|  \__| \_______| \______/ \__|  \__|  \____/  \______/ \__|  \__| \____$$ | \_______|\__|  \__|
                                                                                             $$\   $$ |                    
                                                                                             \$$$$$$  |                    
                                                                                              \______/                     
                                                  $$\ $$\                       $$\ $$\                          $$$$\     
                                                  \__|$$ |                      $$ |\__|                        $$  $$\    
                               $$$$$$\   $$$$$$\  $$\ $$$$$$$\   $$$$$$\   $$$$$$$ |$$\       $$\   $$\  $$$$$$\\__/$$ |   
                              $$  __$$\ $$  __$$\ $$ |$$  __$$\  \____$$\ $$  __$$ |$$ |      $$ |  $$ | \____$$\  $$  |   
                              $$ /  $$ |$$ |  \__|$$ |$$ |  $$ | $$$$$$$ |$$ /  $$ |$$ |      $$ |  $$ | $$$$$$$ |$$  /    
                              $$ |  $$ |$$ |      $$ |$$ |  $$ |$$  __$$ |$$ |  $$ |$$ |      $$ |  $$ |$$  __$$ |\__/     
                              $$$$$$$  |$$ |      $$ |$$$$$$$  |\$$$$$$$ |\$$$$$$$ |$$ |      \$$$$$$$ |\$$$$$$$ |$$\      
                              $$  ____/ \__|      \__|\_______/  \_______| \_______|\__|       \____$$ | \_______|\__|     
                              $$ |                                                            $$\   $$ |                   
                              $$ |                                                            \$$$$$$  |                   
                              \__|                                                             \______/                    
--->



 

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>CCTV ATCS Kabupaten Grobogan</title>
    <meta name="description" content="Layanan CCTV Online Dishub Grobogan. Pantau real-time kondisi lalu lintas, jalan, dan titik keramaian di seluruh wilayah Kabupaten Grobogan.">
    <meta name="keywords" content="CCTV Dishub Grobogan, CCTV Online Grobogan, Pantau Lalu Lintas Grobogan, Kondisi Jalan Grobogan, Dinas Perhubungan Grobogan, Live CCTV Grobogan, Titik Keramaian Grobogan, Streaming CCTV Grobogan, Pemantauan Lalu Lintas Real-time, CCTV Purwodadi, Grobogan, Cradnu, Cristian Adi Nugroho">
    <meta name="author" content="Cristian Adi Nugroho">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="CCTV ATCS Kabupaten Grobogan">
    <meta property="og:description" content="Pantau real-time kondisi lalu lintas, jalan, dan titik keramaian di seluruh wilayah Kabupaten Grobogan.">
    <meta property="og:image" content="https://cctv.dishub.grobogan.go.id/og1.jpg">
    <meta property="og:url" content="https://cctv.dishub.grobogan.go.id/">

    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <!-- Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css">
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css">
    <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

    <!-- Local CSS -->
    <link rel="stylesheet" href="1csscris/1css-12feb.css">
    <link rel="stylesheet" href="1csscris/1css-cuaca3.css">
    <link rel="stylesheet" href="1csscris/tambahan.css">

    <!-- Google Analytics -->
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-HQYS94PKVN');
    </script>

    <!-- Cegah iframe embedding -->
    <script>
        if (window.self !== window.top) {
            window.top.location.href = window.location.href;
        }
    </script>
</head>

<body class="min-h-screen flex flex-col">

<!-- ============================
     HEADER
============================= -->
<header class="bg-white shadow-md sticky top-0 z-40">
    <div class="w-full max-w-none px-4 md:px-6 py-4">
        <div class="flex items-center justify-between gap-2">

            <!-- Hamburger Menu (Mobile/Tablet) -->
            <button id="hamburgerBtn" class="hamburger-menu">
                <span></span>
                <span></span>
                <span></span>
            </button>

            <!-- Logo -->
            <div class="flex items-center space-x-3 md:space-x-4">
                <img src="logoheader.png" alt="CCTV Monitoring Dinas Perhubungan Kab. Grobogan" class="h-12 md:h-16 w-auto">
            </div>

            <!-- Navigation Desktop -->
            <nav class="hidden lg:flex items-center gap-2">

                <a href="#" class="menu-item-header active">Beranda</a>

                <a href="https://dishub.grobogan.go.id/" target="_blank" class="menu-item-header">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                    </svg>
                    Website Dishub
                </a>

                <a href="#" onclick="showInfoPopup()" class="menu-item-header">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
                    </svg>
                    Informasi
                </a>

                <a href="#" onclick="showKontribusiPopup()" class="menu-item-header">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
                        <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5"/>
                    </svg>
                    Kontribusi
                </a>

                <a href="https://dishub.grobogan.go.id/atcs" target="_blank"  class="menu-item-header">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stoplights" viewBox="0 0 16 16">
                      <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m1.5 2.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
                      <path d="M4 2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2h2c-.167.5-.8 1.6-2 2v2h2c-.167.5-.8 1.6-2 2v2h2c-.167.5-.8 1.6-2 2v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1c-1.2-.4-1.833-1.5-2-2h2V8c-1.2-.4-1.833-1.5-2-2h2V4c-1.2-.4-1.833-1.5-2-2zm2-1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
                    </svg>
                    ATCS
                </a> 
                <!-- <a href="#" onclick="showKomunitas()" class="menu-item-header">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
                        <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9 9 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.4 10.4 0 0 1-.524 2.318l-.003.011a11 11 0 0 1-.244.637c-.079.186.074.394.273.362a22 22 0 0 0 .693-.125m.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6-3.004 6-7 6a8 8 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a11 11 0 0 0 .398-2"/>
                    </svg>
                    Lapor Kondisi
                </a> -->

                <!-- Dropdown Lainnya -->
                <div class="relative group">
                    <button class="menu-item-header flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
                        </svg>
                        Lainnya
                        <svg class="w-3 h-3 transition-transform group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>

                    <div class="absolute top-full right-0 mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50">
                        <div class="py-2">

                            <a href="#" onclick="openWeatherModal(); return false;" class="flex items-center gap-3 px-4 py-3 hover:bg-blue-50 transition-colors">
                                <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-blue-600" viewBox="0 0 16 16">
                                        <path d="M4 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m2 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M13.405 4.027a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 10H13a3 3 0 0 0 .405-5.973"/>
                                    </svg>
                                </div>
                                <div>
                                    <div class="font-semibold text-blue-900 text-sm">Info Cuaca</div>
                                    <div class="text-xs text-blue-500">Prakiraan & kondisi cuaca</div>
                                </div>
                            </a>

                            <div class="h-px bg-blue-200 my-1"></div>

                            <a href="#" onclick="openEarthquakePopup(); return false;" class="flex items-center gap-3 px-4 py-3 hover:bg-blue-50 transition-colors">
                                <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-blue-600" viewBox="0 0 16 16">
                                        <path d="m10.495 6.92 1.278-.619a.483.483 0 0 0 .126-.782c-.252-.244-.682-.139-.932.107-.23.226-.513.373-.816.53l-.102.054c-.338.178-.264.626.1.736a.48.48 0 0 0 .346-.027ZM7.741 9.808V9.78a.413.413 0 1 1 .783.183l-.22.443a.6.6 0 0 1-.12.167l-.193.185a.36.36 0 1 1-.5-.516l.112-.108a.45.45 0 0 0 .138-.326M5.672 12.5l.482.233A.386.386 0 1 0 6.32 12h-.416a.7.7 0 0 1-.419-.139l-.277-.206a.302.302 0 1 0-.298.52z"/>
                                        <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M1.612 10.867l.756-1.288a1 1 0 0 1 1.545-.225l1.074 1.005a.986.986 0 0 0 1.36-.011l.038-.037a.88.88 0 0 0 .26-.755c-.075-.548.37-1.033.92-1.099.728-.086 1.587-.324 1.728-.957.086-.386-.114-.83-.361-1.2-.207-.312 0-.8.374-.8.123 0 .24-.055.318-.15l.393-.474c.196-.237.491-.368.797-.403.554-.064 1.407-.277 1.583-.973.098-.391-.192-.634-.484-.88-.254-.212-.51-.426-.515-.741a7 7 0 0 1 3.425 7.692 1 1 0 0 0-.087-.063l-.316-.204a1 1 0 0 0-.977-.06l-.169.082a1 1 0 0 1-.741.051l-1.021-.329A1 1 0 0 0 11.205 9h-.165a1 1 0 0 0-.945.674l-.172.499a1 1 0 0 1-.404.514l-.802.518a1 1 0 0 0-.458.84v.455a1 1 0 0 0 1 1h.257a1 1 0 0 1 .542.16l.762.49a1 1 0 0 0 .283.126 7 7 0 0 1-9.49-3.409Z"/>
                                    </svg>
                                </div>
                                <div>
                                    <div class="font-semibold text-blue-900 text-sm">Gempa Terkini</div>
                                    <div class="text-xs text-blue-500">Data gempa bumi realtime</div>
                                </div>
                            </a>

                            <div class="h-px bg-blue-200 my-1"></div>

                            <a href="https://dishub.grobogan.go.id/prasarana" class="flex items-center gap-3 px-4 py-3 hover:bg-blue-50 transition-colors">
                                <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-blue-600" viewBox="0 0 16 16">
                                        <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/>
                                    </svg>
                                </div>
                                <div>
                                    <div class="font-semibold text-blue-900 text-sm">Layanan Prasarana</div>
                                    <div class="text-xs text-blue-500">Pilih layanan lain</div>
                                </div>
                            </a>

                        </div>
                    </div>
                </div>
            </nav>

            <!-- Dark Mode Toggle -->
            <button id="darkModeToggle" class="p-3 rounded-xl hover:bg-gray-100 transition-all">
                <svg id="darkModeIcon" class="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                </svg>
            </button>

        </div>
    </div>
</header>

<!-- ============================
     MOBILE SIDEBAR MENU
============================= -->
<div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>

<div class="mobile-menu" id="mobileMenu">
    <div class="mobile-menu-header">
        <div>
            <h3 class="font-bold text-lg">Menu</h3>
            <p class="text-sm text-blue-100">CCTV/ATCS Dishub Grobogan</p>
        </div>
        <button id="closeMenuBtn" class="p-2 hover:bg-white/20 rounded-lg transition-all">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    </div>

    <div class="mobile-menu-items">

        <a href="#" class="mobile-menu-item active">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            <span class="font-semibold">Beranda</span>
        </a>

        <a href="https://dishub.grobogan.go.id/" target="_blank" class="mobile-menu-item">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
            </svg>
            <span>Website Dishub</span>
        </a>

        <a href="https://dishub.grobogan.go.id/siapsigap" target="_blank" class="mobile-menu-item">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
            </svg>
            <span>Lapor Prasarana</span>
        </a>

        <a href="https://dishub.grobogan.go.id/prasarana" target="_blank" class="mobile-menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/>
            </svg>
            <span>Layanan Prasarana</span>
        </a>

        <a href="#" onclick="showInfoPopup(); closeMobileMenu();" class="mobile-menu-item">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
                <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
            </svg>
            <span>Informasi</span>
        </a>

        <a href="#" onclick="showKontribusiPopup(); closeMobileMenu();" class="mobile-menu-item">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 16 16">
                <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z"/>
                <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5"/>
            </svg>
            Kontribusi
        </a>
        <a href="https://dishub.grobogan.go.id/atcs" target="_blank" class="mobile-menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stoplights" viewBox="0 0 16 16">
              <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m0 4a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m1.5 2.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
              <path d="M4 2a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2h2c-.167.5-.8 1.6-2 2v2h2c-.167.5-.8 1.6-2 2v2h2c-.167.5-.8 1.6-2 2v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-1c-1.2-.4-1.833-1.5-2-2h2V8c-1.2-.4-1.833-1.5-2-2h2V4c-1.2-.4-1.833-1.5-2-2zm2-1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"/>
            </svg>
            ATCS
        </a>
        <!-- <a href="#" onclick="showKomunitas(); closeMobileMenu();" class="mobile-menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
                <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9 9 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.4 10.4 0 0 1-.524 2.318l-.003.011a11 11 0 0 1-.244.637c-.079.186.074.394.273.362a22 22 0 0 0 .693-.125m.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6-3.004 6-7 6a8 8 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a11 11 0 0 0 .398-2"/>
            </svg>
            Lapor Kondisi
        </a> -->

        <a href="#" onclick="openWeatherModal(); closeMobileMenu();" class="mobile-menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M4 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m2 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M13.405 4.027a5.001 5.001 0 0 0-9.499-1.004A3.5 3.5 0 1 0 3.5 10H13a3 3 0 0 0 .405-5.973"/>
            </svg>
            Info Cuaca
        </a>

        <a href="#" onclick="openEarthquakePopup(); closeMobileMenu(); return false;" class="mobile-menu-item">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="m10.495 6.92 1.278-.619a.483.483 0 0 0 .126-.782c-.252-.244-.682-.139-.932.107-.23.226-.513.373-.816.53l-.102.054c-.338.178-.264.626.1.736a.48.48 0 0 0 .346-.027ZM7.741 9.808V9.78a.413.413 0 1 1 .783.183l-.22.443a.6.6 0 0 1-.12.167l-.193.185a.36.36 0 1 1-.5-.516l.112-.108a.45.45 0 0 0 .138-.326M5.672 12.5l.482.233A.386.386 0 1 0 6.32 12h-.416a.7.7 0 0 1-.419-.139l-.277-.206a.302.302 0 1 0-.298.52z"/>
                <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M1.612 10.867l.756-1.288a1 1 0 0 1 1.545-.225l1.074 1.005a.986.986 0 0 0 1.36-.011l.038-.037a.88.88 0 0 0 .26-.755c-.075-.548.37-1.033.92-1.099.728-.086 1.587-.324 1.728-.957.086-.386-.114-.83-.361-1.2-.207-.312 0-.8.374-.8.123 0 .24-.055.318-.15l.393-.474c.196-.237.491-.368.797-.403.554-.064 1.407-.277 1.583-.973.098-.391-.192-.634-.484-.88-.254-.212-.51-.426-.515-.741a7 7 0 0 1 3.425 7.692 1 1 0 0 0-.087-.063l-.316-.204a1 1 0 0 0-.977-.06l-.169.082a1 1 0 0 1-.741.051l-1.021-.329A1 1 0 0 0 11.205 9h-.165a1 1 0 0 0-.945.674l-.172.499a1 1 0 0 1-.404.514l-.802.518a1 1 0 0 0-.458.84v.455a1 1 0 0 0 1 1h.257a1 1 0 0 1 .542.16l.762.49a1 1 0 0 0 .283.126 7 7 0 0 1-9.49-3.409Z"/>
            </svg>
            Data Gempa Bumi
        </a>

    </div>
</div>

<!-- ============================
     MAIN CONTENT
============================= -->
<main class="flex-1">

    <!-- Weather Widget -->
    <div class="bg-white dark:bg-gray-800 border-b shadow-sm" style="background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);">
        <div class="w-full px-3 md:px-6">
            <div class="flex flex-col lg:flex-row lg:items-center gap-2 cursor-pointer hover:bg-white/5 rounded-lg px-2 py-1.5 transition-all"
                onclick="openWeatherModal()">

                <!-- Info Cuaca Utama -->
                <div id="rotatingWeatherContainer" class="flex items-center gap-2 md:gap-3 lg:flex-shrink-0">
                    <span class="font-bold text-xs md:text-sm" id="rotatingLocationName" style="color: #fef08a;">Memuat...</span>
                    <span id="rotatingIcon" class="text-xl md:text-2xl">🌤️</span>
                    <span class="font-extrabold text-base md:text-xl text-white" id="rotatingTemp">--°C</span>
                    <span class="font-medium text-xs md:text-sm text-white" id="rotatingDesc">Memuat...</span>

                    <div class="flex items-center gap-2 md:gap-3 text-xs text-blue-100 ml-2">
                        <span class="hidden md:flex items-center gap-1">
                            <span>💧</span>
                            <span id="rotatingHumidity">--%</span>
                        </span>
                        <span class="hidden lg:flex items-center gap-1">
                            <span id="rotatingWind">💨 -- km/h</span>
                        </span>
                        <span class="flex items-center gap-1 font-semibold">
                            <span id="rotatingUV">🟡 UV --</span>
                        </span>
                        <span class="flex items-center gap-1 font-semibold" id="rotatingAQI" style="display: none;">
                            <span>🟢 AQI --</span>
                        </span>
                    </div>
                </div>

                <!-- Himbauan Cuaca -->
                <div class="flex-1 bg-white/10 rounded-md px-2 py-1.5 backdrop-blur-sm border border-white/20 hover:bg-white/15 transition-all">
                    <div class="flex items-start gap-1.5 text-xs md:text-sm text-white">
                        <span class="text-yellow-300 flex-shrink-0 text-sm animate-pulse">💡</span>
                        <span id="weatherAdvisory" class="flex-1 font-medium leading-snug">Memuat himbauan cuaca, izinkan akses lokasi..</span>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Weather Forecast Modal -->
    <div class="weather-modal" id="weatherModal" onclick="closeWeatherModal(event)">
        <div class="weather-modal-content" onclick="event.stopPropagation()">

            <!-- Modal Header -->
            <div class="relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900 opacity-90"></div>
                <div class="relative p-3 md:p-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2 md:gap-3">
                            <div class="bg-yellow-400/20 backdrop-blur-sm p-1.5 md:p-2 rounded-lg border-2 border-yellow-400/40">
                                <svg class="w-6 h-6 md:w-7 md:h-7 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
                                </svg>
                            </div>
                            <div>
                                <h2 class="text-white text-lg md:text-xl font-bold flex items-center gap-1.5">
                                    Prakiraan Cuaca <span class="text-base md:text-lg">🌤️</span>
                                </h2>
                                <p class="text-blue-100 text-xs mt-0.5">Prakiraan per jam hingga 3 hari ke depan</p>
                            </div>
                        </div>
                        <button onclick="closeWeatherModal(event)" class="p-1.5 md:p-2 hover:bg-white/20 rounded-lg transition-all group">
                            <svg class="w-5 h-5 md:w-6 md:h-6 text-white group-hover:rotate-90 transition-transform duration-300"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Modal Body -->
            <div class="p-2.5 md:p-4" id="forecastContainer">
                <div class="location-selector">
                    <button class="location-btn active" id="userLocationBtn" onclick="switchLocation('user')">
                        <span class="location-btn-icon">📍</span>
                        <span id="userLocationLabel">Lokasi Anda</span>
                    </button>
                    <button class="location-btn" id="purwodadiLocationBtn" onclick="switchLocation('purwodadi')">
                        <span class="location-btn-icon">🏛️</span>
                        <span>Purwodadi</span>
                    </button>
                </div>
                <div class="loading-forecast">
                    <div class="loading-spinner"></div>
                    <p>Memuat prakiraan cuaca...</p>
                </div>
            </div>

        </div>
    </div>

    <!-- Traffic Newsticker -->
    <div id="trafficTicker" class="traffic-ticker-bar">
        <div class="ticker-label" onclick="window.location.href='/traffic';">
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" viewBox="0 0 16 16">
                <path d="M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5M.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5"/>
                <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
            </svg>
            <span>Lalu Lintas</span>
        </div>
        <div class="ticker-track-wrapper" onclick="window.location.href='/traffic';">
            <div class="ticker-track" id="tickerTrack">
                <span class="ticker-loading">Memuat data lalu lintas…</span>
            </div>
        </div>
    </div>

    <!-- Earthquake Modal -->
    <div class="weather-modal" id="earthquakeModal" onclick="closeEarthquakePopup(event)">
        <div class="weather-modal-content" onclick="event.stopPropagation()"
            style="max-width: 900px; max-height: 90vh; display: flex; flex-direction: column;">

            <!-- Modal Header -->
            <div class="relative overflow-hidden flex-shrink-0">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900 opacity-90"></div>
                <div class="relative p-3 md:p-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2 md:gap-3">
                            <div class="bg-yellow-400/20 backdrop-blur-sm p-1.5 md:p-2 rounded-lg border-2 border-yellow-400/40">
                                <svg class="w-6 h-6 md:w-7 md:h-7 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                </svg>
                            </div>
                            <div>
                                <h2 class="text-white text-lg md:text-xl font-bold flex items-center gap-1.5">
                                    Data Gempa Bumi Terkini <span class="text-base md:text-lg">🌍</span>
                                </h2>
                            </div>
                        </div>
                        <button onclick="closeEarthquakePopup(event)" class="p-1.5 md:p-2 hover:bg-white/20 rounded-lg transition-all group">
                            <svg class="w-5 h-5 md:w-6 md:h-6 text-white group-hover:rotate-90 transition-transform duration-300"
                                fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Info Bar -->
            <div class="bg-gradient-to-r from-blue-50 to-blue-100 border-b-2 border-blue-400 p-3 flex-shrink-0">
                <div class="flex items-center gap-2 text-xs md:text-sm">
                    <svg class="w-4 h-4 text-blue-700 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                    </svg>
                    <div>
                        <span class="font-semibold text-blue-900">Data Real-time:</span>
                        <span class="text-blue-700 ml-1">Gempa dalam radius 2000km dari lokasi Anda • Sumber: USGS & BMKG</span>
                    </div>
                </div>
            </div>

            <!-- Legend -->
            <div class="bg-gray-50 border-b p-2.5 flex-shrink-0">
                <div class="flex flex-wrap items-center gap-3 text-xs">
                    <div class="font-semibold text-gray-700">Keterangan:</div>
                    <div class="flex items-center gap-1.5">
                        <div class="w-3 h-3 rounded-full bg-red-600"></div>
                        <span class="text-gray-600">M7+ Sangat Kuat</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <div class="w-3 h-3 rounded-full bg-orange-600"></div>
                        <span class="text-gray-600">M5+ Kuat</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                        <span class="text-gray-600">M4+ Sedang</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        <span class="text-gray-600">M3+ Ringan</span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <span class="text-sm">📍</span>
                        <span class="text-gray-600 font-semibold">&lt; 300km (Dekat Anda — ada notifikasi browser)</span>
                    </div>
                </div>
            </div>

            <!-- Body -->
            <div class="p-2.5 md:p-4 overflow-y-auto flex-1" id="earthquakeListContainer"
                style="background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);">
                <div style="text-align: center; padding: 40px;">
                    <div style="width:50px; height:50px; border:4px solid #e5e7eb; border-top-color:#3b82f6; border-radius:50%; margin:0 auto 16px; animation:spin 1s linear infinite;"></div>
                    <p style="color:#6b7280; font-size:14px;">Memuat data gempa bumi...</p>
                </div>
            </div>

            <!-- Footer -->
            <div class="bg-gray-100 border-t p-3 flex-shrink-0">
                <div class="flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-gray-600">
                    <div class="flex items-center gap-1.5">
                        <svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                        <span>Data dari <strong>USGS Earthquake Catalog, Gempa Terkini BMKG</strong></span>
                    </div>
                    <div class="flex items-center gap-1.5">
                        <svg class="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                        <span>Terverifikasi & Real-time</span>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- Stats & Controls Bar -->
    <div class="bg-white border-b shadow-sm">
        <div class="w-full max-w-none px-4 md:px-6 py-3">
            <div class="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-3">

                <!-- Stats -->
                <div class="w-full lg:w-auto">
                    <div class="stats-row">
                        <div class="stat-item">
                            <span class="stat-label">Total:</span>
                            <span class="stat-value stat-total" id="totalCameras">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="w-2 h-2 bg-green-500 rounded-full live-indicator"></span>
                            <span class="stat-label">Online:</span>
                            <span class="stat-value stat-online" id="onlineCameras">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                            <span class="stat-label">Offline:</span>
                            <span class="stat-value stat-offline" id="offlineCameras">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
                            <span class="stat-label">Maintenance:</span>
                            <span class="stat-value stat-maintenance" id="maintenanceCameras">0</span>
                        </div>
                        <div class="stat-item">
                            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <span class="stat-label">Update:</span>
                            <span class="stat-value text-gray-700" id="lastUpdate">-</span>
                        </div>
                    </div>
                </div>

                <!-- Controls -->
                <div class="flex items-center gap-3 w-full lg:w-auto">

                    <!-- Search -->
                    <div class="flex-1 lg:flex-initial relative">
                        <input
                            type="text"
                            id="searchInput"
                            placeholder="Cari kamera, lokasi, jalan..."
                            class="w-full lg:w-64 pl-10 pr-4 py-2 border-2 border-gray-200 rounded-lg focus:border-blue-500 focus:outline-none text-sm"
                            oninput="filterCameras(this.value)"
                        >
                        <svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2"
                            fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                        </svg>
                    </div>

                    <!-- Refresh -->
                    <button onclick="fetchCameras()" class="p-2 hover:bg-gray-100 rounded-lg transition-all" title="Refresh">
                        <svg id="refreshIcon" class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                    </button>

                    <!-- View Toggle -->
                    <div class="flex items-center gap-1 bg-gray-100 rounded-lg p-1">
                        <button onclick="setView('map')" id="mapBtn"
                            class="px-3 py-2 rounded-md transition-all text-gray-600 hover:bg-gray-200 text-xs font-semibold flex items-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"/>
                            </svg>
                            <span class="hidden sm:inline">Map View</span>
                        </button>
                        <button onclick="setView('grid')" id="gridBtn"
                            class="px-3 py-2 rounded-md transition-all bg-blue-600 text-white text-xs font-semibold flex items-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <rect x="3" y="3" width="7" height="7" stroke-width="2"/>
                                <rect x="14" y="3" width="7" height="7" stroke-width="2"/>
                                <rect x="14" y="14" width="7" height="7" stroke-width="2"/>
                                <rect x="3" y="14" width="7" height="7" stroke-width="2"/>
                            </svg>
                            <span class="hidden sm:inline">Grid View</span>
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- Loading Screen -->
    <div id="loadingScreen" class="w-full max-w-none p-6 text-center">
        <div class="bg-white rounded-2xl p-12 max-w-md mx-auto shadow-lg border border-gray-200">
            <svg class="w-16 h-16 text-blue-600 animate-spin mx-auto mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
            </svg>
            <p class="text-gray-600 text-lg font-semibold">Loading camera feeds...</p>
        </div>
    </div>

    <!-- Error Screen -->
    <div id="errorScreen" class="w-full max-w-none p-6 hidden">
        <div class="bg-white rounded-2xl shadow-lg p-12 max-w-md mx-auto text-center border border-red-200">
            <div class="text-red-500 mb-6">
                <svg class="w-20 h-20 mx-auto mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="10" stroke-width="2"/>
                    <line x1="12" y1="8" x2="12" y2="12" stroke-width="2"/>
                    <line x1="12" y1="16" x2="12.01" y2="16" stroke-width="2"/>
                </svg>
                <h2 class="text-2xl font-bold mb-3 text-gray-900">Connection Error</h2>
                <p class="text-gray-600" id="errorMessage"></p>
            </div>
            <button onclick="fetchCameras()"
                class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-xl hover:from-blue-700 hover:to-blue-900 transition-all flex items-center justify-center shadow-lg font-semibold">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                </svg>
                Retry Connection
            </button>
        </div>
    </div>

    <!-- Map View -->
    <div id="mapView" class="w-full max-w-none px-4 md:px-6 py-6">
        <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200">
            <div class="bg-gradient-to-r from-blue-700 to-blue-900 p-4 md:p-5 border-b-4 border-yellow-400">
                <h2 class="text-white text-lg md:text-xl font-bold flex items-center gap-2 md:gap-3">
                    <svg class="w-5 h-5 md:w-6 md:h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    Peta Lokasi Kamera
                </h2>
                <p class="text-blue-100 text-xs md:text-sm mt-1">Klik marker untuk melihat detail kamera</p>
            </div>
            <div class="p-3 md:p-4">
                <div id="map"></div>
            </div>
        </div>
    </div>

    <!-- Grid View -->
    <div id="gridView" class="w-full max-w-none px-4 md:px-6 py-6 hidden">
        <div id="noResultsMessage" class="hidden bg-white rounded-2xl shadow-lg p-12 text-center border border-gray-200">
            <svg class="w-16 h-16 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
            <p class="text-gray-600 text-lg font-semibold">Tidak ada kamera yang ditemukan</p>
            <p class="text-gray-500 text-sm mt-2">Coba ubah kata kunci pencarian Anda</p>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6" id="gridContainer"></div>
    </div>

</main>

<!-- ============================
     FOOTER
============================= -->
<footer class="text-white mt-auto">
    <div class="w-full max-w-none px-4 md:px-6 py-6 md:py-8">
        <div class="flex flex-col md:flex-row items-center justify-between gap-4 md:gap-6">

            <!-- Copyright & Links -->
            <div class="text-center md:text-left">
                <p class="font-semibold text-base md:text-lg mb-1">
                    &copy; 2025-2026 CCTV Dinas Perhubungan Kab. Grobogan
                </p>
                <div class="flex items-center gap-3 justify-center md:justify-start">
                    <p onclick="showServerInfo()"
                        class="text-blue-200 text-xs md:text-sm transition duration-200 hover:text-white hover:tracking-wide cursor-pointer">
                        Informasi Datacenter
                    </p>
                    <span class="text-blue-400 text-xs">|</span>
                    <a href="/privacy.html"
                        class="text-blue-200 text-xs md:text-sm transition duration-200 hover:text-white hover:tracking-wide">
                        Privacy Policy
                    </a>
                </div>
            </div>

            <!-- Histats Counter -->
            <div id="histats_counter"></div>
            <script type="text/javascript">
                var _Hasync = _Hasync || [];
                _Hasync.push(['Histats.start', '1,4981941,4,22,130,30,00011111']);
                _Hasync.push(['Histats.fasi', '1']);
                _Hasync.push(['Histats.track_hits', '']);
                (function () {
                    var hs = document.createElement('script');
                    hs.type = 'text/javascript';
                    hs.async = true;
                    hs.src = '//s10.histats.com/js15_as.js';
                    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
                })();
            </script>
            <noscript>
                <a href="/" target="_blank">
                    <img src="//sstatic1.histats.com/0.gif?4981941&101" alt="" border="0">
                </a>
            </noscript>

            <!-- Social & Branding Links -->
            <div class="footer-links flex flex-wrap items-center justify-center gap-3">

                <!-- Instagram Button (BARU) -->
                <a href="https://www.instagram.com/atcsgrobogan"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="flex items-center gap-2 text-white rounded-xl px-4 py-2 transition-all duration-200 shadow-md font-semibold text-sm hover:opacity-90"
                    style="background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
                    </svg>
                    @atcsgrobogan
                </a>

                <!-- Powered by Cradnu -->
                <a href="https://cradnu.com/" target="_blank" class="cradnu-badge">
                    <span class="badge-text text-white font-semibold text-xs md:text-sm">Powered by</span>
                    <img src="https://cradnu.com/csft.png" alt="Cradnu Studios" class="cradnu-logo">
                    <span class="badge-shine"></span>
                </a>

            </div>

        </div>
    </div>
</footer>

<!-- ============================
     VIDEO MODAL
============================= -->
<div id="videoModal"
    class="fixed inset-0 bg-black/90 flex items-center justify-center z-50 p-2 sm:p-4 hidden backdrop-blur-sm">
    <div class="bg-white rounded-2xl shadow-2xl border-4 border-yellow-400 overflow-hidden max-w-2xl w-full max-h-[95vh] flex flex-col">

        <!-- Modal Header -->
        <div class="bg-gradient-to-r from-blue-700 to-blue-900 p-1 sm:p-2 flex items-center justify-between border-b-4 border-yellow-400 flex-shrink-0">
            <div class="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
                <span class="relative flex h-3 w-3 sm:h-4 sm:w-4 flex-shrink-0">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-yellow-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-full w-full bg-yellow-400"></span>
                </span>
                <div class="flex-1 min-w-0">
                    <h3 class="text-base sm:text-xl font-bold text-white truncate" id="modalTitle"></h3>
                    <div class="flex items-center gap-1.5 mt-0.5">
                        <svg class="w-3 h-3 sm:w-4 sm:h-4 text-yellow-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                        <span class="text-xs sm:text-sm text-blue-100 truncate" id="modalLocation"></span>
                    </div>
                </div>
            </div>
            <button onclick="closeVideo()" class="p-1.5 sm:p-2 hover:bg-white/20 rounded-lg transition-all flex-shrink-0 ml-2" aria-label="Tutup">
                <svg class="w-5 h-5 sm:w-6 sm:h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>
        </div>

        <!-- Video Player -->
        <div class="bg-black p-2 sm:p-3 flex-shrink-0" id="videoPlayerContainer">
            <div class="relative" id="playerWrapper">
                <div id="modalIklan" class="hidden"></div>
            </div>
        </div>

        <!-- Camera Info -->
        <div class="p-3 sm:p-4 bg-gray-50 border-t border-gray-200 flex-shrink-0">
            <div class="flex flex-wrap items-center gap-2 sm:gap-3">
                <div id="modalStatus" class="flex-shrink-0"></div>

                <!-- Quality Selector -->
                <div id="modalQualitySelector" class="hidden flex-shrink-0">
                    <div class="flex items-center gap-1 bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
                        <span class="px-2 text-xs text-gray-400 font-medium select-none">Pilih</span>
                        <button id="btnQualityHD" onclick="switchQuality('hd')"
                            class="px-3 py-1.5 text-xs font-bold transition-all bg-blue-600 text-white"
                            title="Stream kualitas tinggi">
                            Server 1
                        </button>
                        <button id="btnQualitySD" onclick="switchQuality('sd')"
                            class="px-3 py-1.5 text-xs font-bold transition-all bg-white text-gray-600 hover:bg-gray-100"
                            title="Stream kualitas rendah (hemat data)">
                            Server 2
                        </button>
                    </div>
                </div>

                <!-- Camera ID -->
                <div class="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg border border-blue-200">
                    <svg class="w-3.5 h-3.5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
                    </svg>
                    <span class="text-xs font-mono font-bold text-gray-700" id="modalId"></span>
                </div>

                <!-- Last Update -->
                <div class="flex items-center gap-1.5 px-3 py-1.5 bg-white rounded-lg border border-gray-200">
                    <svg class="w-3.5 h-3.5 text-gray-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-xs font-semibold text-gray-700" id="modalUpdate"> data diperbaharui</span>
                </div>

                <!-- Description -->
                <div class="w-full mt-2 px-3 py-2 bg-white rounded-lg border border-gray-200">
                    <p class="text-xs sm:text-sm text-gray-600 leading-relaxed" id="modalDescription"></p>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- ============================
     FLOATING SHARE BUTTONS
============================= -->
<div class="floating-share">
    <a href="#" class="share-btn facebook" onclick="shareToFacebook(); return false;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
        </svg>
    </a>
    <a href="#" class="share-btn whatsapp" onclick="shareToWhatsApp(); return false;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
        </svg>
    </a>
    <a href="#" class="share-btn threads" onclick="shareToThreads(); return false;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8 29.2 14.1 50.6 35.2 61.8 61.4 15.7 36.5 17.2 95.8-30.3 143.2-36.2 36.2-80.3 52.5-142.6 53l-.3 0c-70.2-.5-124.1-24.1-160.4-70.2-32.3-41-48.9-98.1-49.5-169.6l0-.5C17 184.3 33.6 127.2 65.9 86.2 102.2 40.1 156.2 16.5 226.4 16l.3 0c70.3 .5 124.9 24 162.3 69.9 18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4-29.2-35.8-73-54.2-130.5-54.6-57 .5-100.1 18.8-128.2 54.4-26.2 33.3-39.8 81.5-40.3 143.2 .5 61.7 14.1 109.9 40.3 143.3 28 35.6 71.2 53.9 128.2 54.4 51.4-.4 85.4-12.6 113.7-40.9 32.3-32.2 31.7-71.8 21.4-95.9-6.1-14.2-17.1-26-31.9-34.9-3.7 26.9-11.8 48.3-24.7 64.8-17.1 21.8-41.4 33.6-72.7 35.3-23.6 1.3-46.3-4.4-63.9-16-20.8-13.8-33-34.8-34.3-59.3-2.5-48.3 35.7-83 95.2-86.4 21.1-1.2 40.9-.3 59.2 2.8-2.4-14.8-7.3-26.6-14.6-35.2-10-11.7-25.6-17.7-46.2-17.8l-.7 0c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1l.8 0c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2 .1 0zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3 25.6-1.4 54.6-11.4 59.5-73.2-13.2-2.9-27.8-4.4-43.4-4.4-4.8 0-9.6 .1-14.4 .4-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"/>
        </svg>
    </a>
    <a href="#" class="share-btn twitter" onclick="shareToTwitter(); return false;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
        </svg>
    </a>
</div>

<!-- ============================
     GOOGLE TRANSLATE
============================= -->
<div class="gtranslate_wrapper"></div>
<script>
    window.gtranslateSettings = {
        "default_language": "id",
        "native_language_names": true,
        "detect_browser_language": true,
        "languages": ["id", "en", "ko", "ja", "ar", "zh-CN", "pt", "es", "fr", "af"],
        "wrapper_selector": ".gtranslate_wrapper",
        "flag_size": 16,
        "switcher_horizontal_position": "right",
        "switcher_open_direction": "top",
        "switcher_text_color": "#f7f7f7",
        "switcher_arrow_color": "#f2f2f2",
        "switcher_border_color": "#161616",
        "switcher_background_color": "#303030",
        "switcher_background_shadow_color": "#474747",
        "switcher_background_hover_color": "#3a3a3a",
        "dropdown_text_color": "#eaeaea",
        "dropdown_hover_color": "#748393",
        "dropdown_background_color": "#474747"
    };
</script>
<script src="https://cdn.gtranslate.net/widgets/latest/dwf.js" defer></script>

<!-- ============================
     WEBVIEW WARNING
============================= -->
<div id="webview-warning" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, #e3f2fd 0%, #bbdef5 100%); z-index:9999; text-align:center; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:90%; max-width:340px; background:white; border-radius:28px; padding:40px 24px 32px; box-shadow:0 20px 40px rgba(0,0,0,0.1);">
        <div style="text-align:center; margin-bottom:20px;">
            <img src="logoheader.png" alt="Logo" style="width:100%; max-width:80px; height:auto; border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,0.08);">
        </div>
        <h2 style="color:#1565c0; margin-bottom:12px; font-size:24px; font-weight:700;">Gunakan Browser Standar</h2>
        <p style="color:#5a5a6e; margin-bottom:24px; font-size:15px; line-height:1.5;">Demi keamanan dan kenyamanan, silakan buka website ini di Chrome atau Safari.</p>
        <p>Awas! Jangan menggunakan aplikasi ilegal. Lindungi data anda</p>
        <br>
        <p style="color:#5a5a6e; margin-bottom:24px; font-size:10px; line-height:1;">Pakai yang resmi: cctv.dishub.grobogan.go.id Atau Aplikasi Grobogan Smart City</p>
        <a id="open-browser-link" href="#"
            style="display:inline-block; padding:14px 28px; background:#1976d2; color:white; text-decoration:none; border-radius:40px; font-weight:600; font-size:16px; box-shadow:0 4px 12px rgba(25,118,210,0.3);">
            Buka di Browser
        </a>
    </div>
</div>

<!-- ============================
     LOCAL SCRIPTS
============================= -->
<script src="1jscris/utils.js"></script>
<script src="1jscris/cameras.js"></script>
<script src="1jscris/grid.js"></script>
<script src="1jscris/map.js"></script>
<script src="1jscris/video-modals-speeds.js"></script>
<script src="1jscris/popup.js"></script>
<script src="1jscris/share.js"></script>
<script src="1jscris/ui.js"></script>
<script src="1jscris/main.js"></script>
<script src="1jscris/newstickerssss.js"></script>
<script src="1jscris/1jscuacaa.js"></script>
<script src="1jscris/1js-gempass.js"></script>

<!-- Webview Detection -->
<script>
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    var isWebView = ua.includes("wv") || ua.includes("FBAN") || ua.includes("FBAV") || ua.includes("Instagram");
    var isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;

    if (isWebView && !isIOS) {
        document.getElementById('webview-warning').style.display = 'block';
        var currentUrl = window.location.href;
        var urlWithoutScheme = currentUrl.replace(/^https?:\/\//, '');
        document.getElementById('open-browser-link').href = "intent://" + urlWithoutScheme + "#Intent;scheme=https;package=com.android.chrome;end";
    }
</script>

</body>
</html>