<!--tampilan mobile topup-->
<div class="mobile-only" style="position: relative; background: var(--primary-background);">
            <div class="appbar">
                <a href="/" style="width: auto"><img class="logoimg" src="<?php echo $urlwebs; ?>/upload/favicon.png" alt=""></a>

                <button style="position: absolute; right: 16px; background: transparent; border: none; width: auto; padding: 0px; height: 100%; margin: auto" class="mobile-only" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
                    <i class="bi bi-person-lines-fill" style="color: var(--menu-item-color); font-size: 26px"></i>
                </button>
            </div>
        </div>

<!--tampilan desktop/pc topup-->
<header class="header">
            <div class="header-content">
                <div class="logo" href="/">
                    <a href='/'><img src="<?php echo $urlweb; ?>/upload/favicon.png" class='logoimg' alt=""></a>
                </div>
                <div id="marquee-mobile" class="marquee mobile-only">
                    <div class="marquee-content">
                        <div class="d-flex align-items-center gap-2">
                            <i class="bi bi-volume-down" style="padding: 0 4px; font-size: 24px"></i>
                        </div>
                        <div class="running">
                        <div class="marquee-shadow"></div>
                        <marquee behavior="scroll" direction="" id="broadcast" style="color: #white; width: 100%"><?php echo $s0['news']; ?></marquee>
                        </div>
                        
                        <div class="d-flex align-items-center gap-2">
                        </div>
                    </div>
                </div>

               <!--tampilan mobile gambar slide-->
               <div class="mslider mobile-only">
               <div id="mobile-slider" class="carousel slide" data-bs-ride="carousel" style="height: 100%">
               <div class="carousel-indicators">
               <?php
               // Ambil daftar banner dari database
               $queryBanners = "SELECT * FROM tb_slide";
               $resultBannersMobile = mysqli_query($conn, $queryBanners);

               // Tampilkan indikator carousel secara dinamis
               $active = 'active';
               $index = 0;
               while ($banner = mysqli_fetch_assoc($resultBannersMobile)) {
               echo'<button data-bs-target="#mobile-slider" data-bs-slide-to="' . $index . '" class="' . $active . '" $aria-current="true"></button>';
               $active = '';
               $index++;
               }
               ?>
               </div>

                              <div class="carousel-inner" style="height: 100%">
                              <?php
                              // Tampilkan slide secara dinamis
                              $active = 'active';
                              mysqli_data_seek($resultBannersMobile, 0); // Kembalikan kursor ke awal
                              while ($banner = mysqli_fetch_assoc($resultBannersMobile)) {
                              echo '<div class="carousel-item ' . $active . '" style="height: 100%">
                              <img src="../upload/' .$banner['image'] . '" alt="' . $banner['deskripsi'] . '" class="d-block w-100" style="height: 100%">
                           </div>';
                         $active = '';
                        }
                        ?>
                     </div>
                    </div>
                  </div>

                <div class="login">

                       <!--tampilan group login desktop/pc-->
                    <div class="desktop-only">
                        <form class="login-form form" action="<?php echo $urlweb; ?>/login-proses.php" method="POST">
                            <div id="msgbox" style="margin-right: 8px; color: #b29459; font-size: 1rem"></div>
                            <div class="input-group login-field">
                                <span class="input-group-text prepend mobile-only ">
                                    <div class="h-100 center"><i class="bi bi-person-circle prepend-icon"></i></div>
                                </span>
                                <input type="text" name="user" class="form-control login-input-field username" placeholder="Nama Akun" aria-label="Username">
                            </div>


                            <!--tampilan marquee mobile-->
                            <div id="marquee" class="marquee mobile-only">
                                <div class="marquee-content">
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="bi bi-megaphone-fill desktop-only"></i>
                                    </div>
                                    <div class="running">
                                    <marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();" style="color: #white; width: 100%"><?php echo $s0['news']; ?></marquee>
                                    </div>
                                </div>
                            </div>

                              <!--tampilan group login&register desktop/pc-->
                            <div class="input-group login-field">
                                <span class="input-group-text mobile-only prepend">
                                    <div class="h-100 center"><i class="bi bi-shield-lock-fill prepend-icon"></i></div>
                                </span>
                                <input type="password" name="pass" class="form-control login-input-field password" placeholder="Kata Sandi" aria-label="Password">
                            </div>
                            <button type="submit" class="btn btn-masuk fw-bold p-0 px-2 submit">Masuk</button>
                            <button type="button" class="btn btn-daftar btn-daftar-desktop fw-bold p-0 px-2 desktop-only" onclick="window.location.href='register.php'">Daftar</button>
                            <input type="hidden" name="task" value="login">
                        </form>
                    </div>


                    <!--tampilan group login&register mobile-->
                    <div id="" class="mobile-only" style="width: 100%">
                            <?php
                    error_reporting(0);
                    if (!empty($_GET['notif'])) {
                      if ($_GET['notif'] == 1) {
                        echo '
                          <div class="alert alert-success alert-dismissible mb-2" role="alert">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <div class="alert-icon">
                              <i class="fa fa-check"></i>
                            </div>
                            <div class="alert-message">
                              <span><strong>Congrats!</strong> Akun Berhasil Dibuat!</span>
                            </div>
                          </div>
                        ';
                      }
                      if ($_GET['notif'] == 2) {
                        echo '
                          <div class="alert alert-warning alert-dismissible mb-2" role="alert">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <div class="alert-icon">
                              <i class="fa fa-exclamation-triangle"></i>
                            </div>
                            <div class="alert-message">
                              <span><strong>Warning!</strong> Username Sudah Terdaftar, <a href="'.$urlweb.'/forgot/">Klik Disini</a> Apabila Anda Lupa dengan Password Anda!</span>
                            </div>
                          </div>
                        ';
                      }
                      if ($_GET['notif'] == 3) {
                        echo '
                          <div class="alert alert-warning alert-dismissible mb-2" role="alert">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <div class="alert-icon">
                              <i class="fa fa-exclamation-triangle"></i>
                            </div>
                            <div class="alert-message">
                              <span><strong>Warning!</strong> Alamat Email Sudah Terdaftar!</span>
                            </div>
                          </div>
                        ';
                      }
                      if ($_GET['notif'] == 4) {
                        echo '
                          <div class="alert alert-warning alert-dismissible mb-2" role="alert">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <div class="alert-icon">
                              <i class="fa fa-exclamation-triangle"></i>
                            </div>
                            <div class="alert-message">
                              <span><strong>Congrats!</strong> Akun Berhasil Dibuat,Silahkan Login Menggunakan Username dan Pasword Anda!</span>
                            </div>
                          </div>
                        ';
                      }
                      if ($_GET['notif'] == 5) {
                        echo '
                          <div class="alert alert-warning alert-dismissible mb-2" role="alert">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <div class="alert-icon">
                              <i class="fa fa-exclamation-triangle"></i>
                            </div>
                            <div class="alert-message">
                              <span><strong>Warning!</strong> Nomor Rekening Sudah Terdaftar!</span>
                            </div>
                          </div>
                        ';
                      }
                    }
                  ?>
                                                <form class="login-form form" action="<?php echo $urlweb; ?>/login-proses.php" method="POST">
                            <div id="msgbox" style="font-size: 1rem; width: 100%"></div>
                            <div class="input-group login-field">
                                <span class="input-group-text prepend mobile-only ">
                                    <div class="h-100 center"><i class="bi bi-person-circle prepend-icon"></i></div>
                                </span>
                                <input type="text" name="user" class="form-control login-input-field username" placeholder="Username" aria-label="Username">
                            </div>
                            <div class="input-group login-field">
                                <span class="input-group-text mobile-only prepend">
                                    <div class="h-100 center"><i class="bi bi-shield-lock-fill prepend-icon"></i></div>
                                </span>
                                <input type="password" name="pass" class="form-control login-input-field password" placeholder="Password" aria-label="Password">
                            </div>


                            <button type="submit" class="btn btn-masuk fw-bold p-0 px-2 submit">Masuk</button>
                            <button type="button" class="btn btn-daftar btn-info btn-daftar-mobile fw-bold p-0 px-2 mobile-only" onclick="openDaftar()">Daftar Sekarang</button>


                            <input type="hidden" name="task" value="login">
                            <input type="hidden" name="loginmobile" value="+v4dC+4CPthuyW3kVnmDNE0PYWu641DrFdiSplLk2Ys=">
                        </form>
                    </div>


                    <div id="mobile-daftar-form" style="width: 100%; display: none">
                        <div>

                            
                            <form action="<?php echo $urlweb; ?>/function/step-2.php" method="POST" class="login-form">
                                <div id="statusRegister" style="margin-bottom: 5px; width: 100%"></div>
                                <div class="prepend" style="width: 100%; height: 36px; display: grid; place-items: center; border-radius: 3px; font-size: 1.2rem; font-weight: bold">REGISTER</div>
                                <div class="input-group login-field">
                                    <span class="input-group-text mobile-only prepend">
                                        <div class="h-100 center"><i class="bi bi-person-circle prepend-icon"></i></div>
                                    </span>
                                    <input type="hidden" name="status" value="Aktif">
                                    <input type="text" class="form-control login-input-field" name="user" placeholder="Username 6-16 karakter standar (A~Z, a~z, 0~9) dan tanpa spasi" required>
                                </div>
                                <div class="input-group login-field">
                                    <span class="input-group-text mobile-only prepend">
                                        <div class="h-100 center"><i class="bi bi-shield-lock-fill prepend-icon"></i></div>
                                    </span>
                                    <input type="password" class="form-control login-input-field" name="pass" placeholder="Password (6 karakter atau lebih)" required>
                                </div>
                                <div class="input-group login-field">
                                    <span class="input-group-text mobile-only prepend">
                                        <div class="h-100 center"><i class="bi bi-envelope-fill prepend-icon"></i></div>
                                    </span>
                                    <input type="text" class="form-control login-input-field" name="email" placeholder="Email">
                                </div>
                                <div class="input-group login-field">
                                    <span class="input-group-text mobile-only prepend">
                                        <div class="h-100 center"><i class="bi bi-telephone-fill prepend-icon"></i></div>
                                    </span>
                                    <input type="text" inputmode="numeric" class="form-control login-input-field" name="no_hp" class="form-control" placeholder="Telpon">
                                </div>

                                <div class="input-group login-field">
                                    <select class="form-select login-input-field" name="akun">
                                        <option value="">Pilih Bank</option>
                                        <option value='BCA'>BCA</option>
                                        <option value='Mandiri'>Mandiri</option>
                                        <option value='BNI'>BNI</option>
                                        <option value='BRI'>BRI</option>
                                        <option value='CIMB'>CIMB</option>
                                        <option value='PANIN'>PANIN</option>
                                        <option value='DANA'>DANA</option>
                                        <option value='OVO'>OVO</option>
                                        <option value='GOPAY'>GOPAY</option>
                                        <option value='LinkAja'>LinkAja</option>
                                    </select>
                                </div>

                                <div class="input-group login-field">
                                    <span class="input-group-text mobile-only prepend" style="">
                                        <div class="h-100 center"><i class="bi bi-piggy-bank-fill prepend-icon"></i></div>
                                    </span>
                                    <input type="text" class="form-control login-input-field" name="no_rek" placeholder="No Rekening">
                                </div>
                                <div class="input-group login-field">
                                    <span class="input-group-text mobile-only prepend">
                                        <div class="h-100 center"><i class="bi bi-person-fill prepend-icon"></i></div>
                                    </span>
                                    <input type="text" class="form-control login-input-field" name="full_name" placeholder="Nama Rekening">
                                </div>
                                <div class="input-group login-field">
                                    <span class="input-group-text mobile-only prepend">
                                        <div class="h-100 center"><i class="bi bi-file-earmark-person-fill prepend-icon"></i></div>
                                    </span>
                                    <input type="text" class="form-control login-input-field" name="ref" type="text" placeholder="Username Referal bila ada" value="" readonly>
                                </div>
                                <!-- <input type="text" class="form-control" placeholder="Nama Akun" aria-label="Nama Akun">
                                            <input type="password" class="form-control" placeholder="Kata Sandi" aria-label="Kata Sandi"> -->

                                <button type="submit" name="submit" class="btn btn-masuk fw-bold p-0 px-2">Register</button>
                                <button type="button" class="btn btn-secondary fw-bold p-0 px-2" value="Close" onClick="closeDaftar()" id="buttonClose">Close</button>

                            </form>

                        </div>
                    </div>




                </div>

                <div class="menu">
                    <div class="menu-item desktop-only">
                        <label><a href="/"><i class="bi bi-house-door-fill"></i></a></label>
                    </div>
                    <span class="desktop-only" style="color: var(--menu-item-color)">|</span>
                    <a href="/?content=register" class="menu-item" onmouseover="showProducts('hover-togel')" onmouseout="hideProducts('hover-togel')">
                        <img class="mobile-only" src="https://ligaserbuslott.net/assets/togel.png" alt="">
                        <label>TOGEL</label>
                    </a>
                    <span class="desktop-only" style="color: var(--menu-item-color)">|</span>
                    <a href="/?content=slot" class="menu-item" onmouseover="showProducts('hover-slot')" onmouseout="hideProducts('hover-slot')">
                        <img class="mobile-only" src="https://ligaserbuslott.net/assets/slot.png" alt="">
                        <label>SLOT</label>
                    </a>
                    <span class="desktop-only" style="color: var(--menu-item-color)">|</span>
                    <a href="/?content=casino" class="menu-item" onmouseover="showProducts('hover-live')" onmouseout="hideProducts('hover-live')">
                        <img class="mobile-only" src="https://ligaserbuslott.net/assets/live.png" alt="">
                        <label>LIVE CASINO</label>
                    </a>
                    <span class="desktop-only" style="color: var(--menu-item-color)">|</span>
                    <a href="/?content=sport" class="menu-item" onmouseover="showProducts('hover-sport')" onmouseout="hideProducts('hover-sport')">
                        <img class="mobile-only" src="https://ligaserbuslott.net/assets/sport.png" alt="">
                        <label>SPORT</label>
                    </a>
                    <!--<span class="desktop-only" style="color: var(--menu-item-color)">|</span>-->
                    <!--<a href="/?content=register" class="menu-item" onmouseover="showProducts('hover-esport')" onmouseout="hideProducts('hover-esport')">-->
                    <!--    <img class="mobile-only" src="assets/esport.png" alt="">-->
                    <!--    <label>E-SPORT</label>-->
                    <!--</a>-->
                    <!--<span class="desktop-only" style="color: var(--menu-item-color)">|</span>-->
                    <!--<a href="/?content=register" class="menu-item" onmouseover="showProducts('hover-sabung')" onmouseout="hideProducts('hover-sabung')">-->
                    <!--    <img class="mobile-only" src="assets/sabung.png" alt="">-->
                    <!--    <label>SABUNG</label>-->
                    <!--</a>-->
                    <span class="desktop-only" style="color: var(--menu-item-color)">|</span>
                    <a href="/?content=fish" class="menu-item" onmouseover="showProducts('hover-fishing')" onmouseout="hideProducts('hover-fishing')">
                        <img class="mobile-only" src="https://ligaserbuslott.net/assets/fishing.png" alt="">
                        <label>ARCADE</label>
                    </a>
                    <span class="desktop-only" style="color: var(--menu-item-color)">|</span>
                    <a href="?content=sabung" class="menu-item" onmouseover="showProducts('hover-sabung')" onmouseout="hideProducts('hover-sabung')">
                        <img class="mobile-only" src="images/sabung-ws.png" alt="">
                        <label>SABUNG</label>
                    </a>
                    <span class="desktop-only" style="color: var(--menu-item-color)">|</span>
                </div>


                <div class="menu-mobile mobile-only" style="width: 100%; overflow-x: hidden; position: relative; border-top: 3px solid var(--primary-color); border-bottom: 3px solid var(--theme-color)">
                        
                        
                            <div style="position: absolute; height: 100%; background: var(--primary-color); display: grid; place-items: center; left: 0; padding: 0px 6px" onclick="document.getElementById('menu-mobile').scrollBy(-40, 0)">
                                <i class="bi bi-caret-left-fill" style="font-size: 16px; color: var(--marquee-color)"></i>
                            </div>
                            
                            <div style="position: absolute; height: 100%; background:  var(--primary-color); display: grid; place-items: center; right: 0; padding: 0px 6px;" onclick="document.getElementById('menu-mobile').scrollBy(40, 0)">
                                <i class="bi bi-caret-right-fill" style="font-size: 16px; color: var(--marquee-color)"></i>
                            </div>
                        
                        
                        <div id="menu-mobile" style="height:68px; overflow-x: scroll; overflow-y: hidden; max-width: 100%; display: block; margin-left: 28px; margin-right: 28px; background: linear-gradient(90deg, rgba(26,26,26,0.3) 0%, rgba(0,0,0,0.3) 10%, rgba(0,0,0,0.3) 100%), var(--primary-color)">
                        
                        
                            <div style="white-space: nowrap; height: 100%; font-size: 0px">
                                                                                
                                        <a href="#togel-mobile" style="height: 100%; width: 92px; display: inline-block;">
                                            <div style="display: grid; place-items: center; height: 100%">
                                                <div class="menu-item">
                                                    <img class="mobile-only" src="https://img.viva88athenae.com//icon-togel.png" alt="">
                                                    <label>TOGEL</label>
                                                </div>
                                            </div>
                                        </a>
                                            
                                                                        <div style="height: 100%; width: 92px; display: inline-block;">
                                        <div style="display: grid; place-items: center; height: 100%">
                                            <div class="menu-item" onclick="showProviderSlot('slot')">
                                                <img class="mobile-only" src="https://img.viva88athenae.com//icon-slot.png" alt="">
                                                <label>SLOT</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 100%; width: 92px; display: inline-block;">
                                        <div style="display: grid; place-items: center; height: 100%">
                                            <div class="menu-item" onclick="showProviderLiveCasino('casino')">
                                                <img class="mobile-only" src="https://img.viva88athenae.com//icon-live.png" alt="">
                                                <label>LIVE CASINO</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div style="height: 100%; width: 92px; display: inline-block;">
                                        <div style="display: grid; place-items: center; height: 100%">
                                            <div href="/sport" class="menu-item" onclick="showProvidersport('sport')">
                                                <img class="mobile-only" src="https://img.viva88athenae.com//icon-sport.png" alt="">
                                                <label>SPORT</label>
                                            </div>
                                        </div>
                                    </div>
                                    <!--<div style="height: 100%; width: 92px; display: inline-block;">-->
                                    <!--    <div style="display: grid; place-items: center; height: 100%">-->
                                    <!--        <div class="menu-item" onclick="showProvider('esport')">-->
                                    <!--            <img class="mobile-only" src="https://img.viva88athenae.com//icon-esport.png" alt="">-->
                                    <!--            <label>E-SPORT</label>-->
                                    <!--        </div>-->
                                    <!--    </div>-->
                                    <!--</div>-->
                                    <div style="height: 100%; width: 92px; display: inline-block;">
                                        <div style="display: grid; place-items: center; height: 100%">
                                        <div class="menu-item" onclick="showProviderarcade('fish')">
                                            <img class="mobile-only" src="https://img.viva88athenae.com//icon-fishing.png" alt="">
                                            <label>ARCADE</label>
                                        </div>
                                        </div>
                                    </div>
                                    <div style="height: 100%; width: 92px; display: inline-block;">
                                        <div style="display: grid; place-items: center; height: 100%">
                                            <div class="menu-item" onclick="showProvidersabung('sabung')">
                                                <img class="mobile-only" src="https://img.viva88athenae.com//icon-sabung.png" alt="">
                                                <label>SABUNG</label>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                        </div>                                                                                                                        
                    </div>
                <div class="menu-content mobile-only">
                    <div id="main-content" style="background: var(--content-box-background)">
                    </div>
                    </div>

                <div class="promosi">

                    <!-- Desktop -->

                    <button class="btn-promosi fw-bold desktop-only" onclick="window.location.href='promosi.php'" style="border: none; font-size: 1.1rem; padding: 0px 8px;">PROMOSI</button>

                    <!-- Mobile -->

                    <div class="mobile-only">

                        <div class="d-flex gap-3 justify-content-center align-items-center">
                            <a href="" style="display: grid; place-items: center; font-size: 1.2rem; cursor: pointer; color: var(--menu-item-color)">Desktop</a>
                            <div style="height: 1.1rem; width: 1.5px; background: var(--menu-item-color)"></div>
                            <a href="" style="display: grid; place-items: center; font-size: 1.2rem; cursor: pointer; color: var(--menu-item-color)">Wap</a>
                        </div>
                    </div>
                </div>
            </div>
        </header>



        <div id="marquee" class="marquee desktop-only">
            <div class="marquee-content">
                <div class="d-flex align-items-center gap-2">
                    <div id="timenow" class="desktop-only" style="white-space: nowrap;">
                    <?php
    function getDayIndonesia($date)
    {
        if($date != '0000-00-00'){
            $data = hari(date('D', strtotime($date)));
        }else{
            $data = '-';
        }
  
        return $data;
    }
  
  
    function hari($day) {
        $hari = $day;
  
        switch ($hari) {
            case "Sun":
                $hari = "Minggu";
                break;
            case "Mon":
                $hari = "Senin";
                break;
            case "Tue":
                $hari = "Selasa";
                break;
            case "Wed":
                $hari = "Rabu";
                break;
            case "Thu":
                $hari = "Kamis";
                break;
            case "Fri":
                $hari = "Jum'at";
                break;
            case "Sat":
                $hari = "Sabtu";
                break;
        }
        return $hari;
    }
  
    // Menampilkan nama hari format Bahasa Indonesia
    $hari_ini   = date('Y-m-d');
    echo getDayIndonesia($hari_ini);
?>
                    <?php 
date_default_timezone_set('Asia/Jakarta'); // Zona Waktu indonesia
echo date(' d-m-Y '); //kombinasi jam dan tanggal
?> <b><span id="jam" style="font-size:24"></span></b>
    
    <script type="text/javascript">
        window.onload = function() { jam(); }
       
        function jam() {
            var e = document.getElementById('jam'),
            d = new Date(), h, m, s;
            h = d.getHours();
            m = set(d.getMinutes());
            s = set(d.getSeconds());
       
            e.innerHTML = h +':'+ m +':'+ s;
       
            setTimeout('jam()', 1000);
        }
       
        function set(e) {
            e = e < 10 ? '0'+ e : e;
            return e;
        }
    </script></div>
                    <i class="bi bi-megaphone-fill desktop-only"></i>
                </div>
                <div class="running">
                <marquee behavior="scroll" direction="left" onmousedown="this.stop();" onmouseup="this.start();" style="color: #white; width: 100%"><?php echo $s0['news']; ?></marquee>
                </div>
                <div class="d-flex align-items-center gap-2">
                <a href="/?content=event">
                            <img src="<?php echo $urlweb; ?>/images/btnevent.png" alt="EVENT" height="24px"/>
                        </a>
                </div>
            </div>
        </div>
        <!--tampilan tereakhir desktop uptop marquee-->