<?php 
include '../function/connect.php'; 
 $cuk = mysqli_query($koneksi, "SELECT * FROM tb_web");
 $cek_web = mysqli_fetch_array($cuk);

 $urlweb    = $cek_web['url'];
 $logo      = $cek_web['logo'];
 $icon      = $cek_web['icon_web'];
 $title     = $cek_web['title'];
 $deskripsi = $cek_web['deskripsi'];
 $keyword   = $cek_web['keyword'];

 $pisah = explode('|', $title);
 $judul = trim($pisah[0]);
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title><?php echo $title; ?></title>
    <link rel="icon" type="image/png" href="../assets/img/<?php echo $logo ?>">
    
    <!-- ICON & CSS -->
    <link href="dist/css/style.min.css?v=2.6.0.0" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <style>
        :root {
            --primary: #4f46e5;
            --bg-dark: #0f1115;
            --border-color: #1f2430;
            --text-main: #e6e6e6;
            --text-muted: #9aa4b2;
        }

        body{
            margin:0;
            font-family: "Inter", system-ui, sans-serif;
            background: var(--bg-dark);
            color: var(--text-main);
            overflow-x: hidden;
        }

        /* Background Modern */
        .bg-pattern {
            position: fixed;
            inset: 0;
            z-index: -1;
            background-color: #0f1115;
            background-image: 
                radial-gradient(at 47% 33%, hsl(218, 39%, 15%) 0, transparent 59%), 
                radial-gradient(at 82% 65%, hsl(218, 39%, 12%) 0, transparent 55%);
        }
        .bg-grid {
            position: fixed;
            inset: 0;
            z-index: -1;
            background-size: 50px 50px;
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        }

        .login-wrapper{
            min-height:100vh;
            display:flex;
            justify-content:center;
            align-items:center;
            padding:20px;
        }

        .login-card{
            width:100%;
            max-width:400px;
            background: rgba(22, 26, 33, 0.9);
            backdrop-filter: blur(10px);
            border-radius:16px;
            padding:35px;
            box-shadow:0 20px 50px rgba(0,0,0,.6);
            border:1px solid rgba(255, 255, 255, 0.05);
            animation: fadeIn 0.6s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .login-header{
            text-align:center;
            margin-bottom:30px;
        }

        .login-header .avatar{
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #4f46e5, #06b6d4);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            box-shadow: 0 8px 16px rgba(79, 70, 229, 0.3);
        }
        .login-header .avatar i { font-size: 26px; color: #fff; }

        .login-header h2{
            margin:0;
            font-size:22px;
            font-weight:700;
        }
        .login-header p{
            margin-top:6px;
            font-size:13px;
            color: var(--text-muted);
        }

        .form-group{ margin-bottom:18px; }
        .form-group label{
            display:block;
            font-size:12px;
            margin-bottom:6px;
            color: var(--text-muted);
            font-weight: 500;
        }

        .input-wrapper{
            display:flex;
            align-items:center;
            background: #0a0c0f;
            border:1px solid var(--border-color);
            border-radius:8px;
            padding:0 14px;
            transition: all .3s;
            position: relative;
        }
        .input-wrapper i{
            color: var(--text-muted);
            font-size:17px;
            margin-right: 10px;
        }
        .input-wrapper input{
            flex: 1;
            background:transparent;
            border:none;
            outline:none;
            color:#fff;
            font-size:14px;
            padding: 14px 0;
            font-family: inherit;
        }
        .input-wrapper:focus-within{
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
        }

        /* 
           CSS UNTUK TOMBOL MATA (FIX KOTAK & GARIS MIRING)
        */
        .input-wrapper .btn-show-pass {
            background: transparent !important;
            border: none !important;
            outline: none !important;
            box-shadow: none !important;
            cursor: pointer;
            padding: 0;
            margin: 0;
            margin-left: 8px;
            color: var(--text-muted);
            font-size: 16px;
            display: inline-block;
            position: relative;
            transition: color 0.2s;
        }
        .input-wrapper .btn-show-pass:hover { color: #fff; }
        .input-wrapper .btn-show-pass:active,
        .input-wrapper .btn-show-pass:focus {
            outline: none !important;
            border: none !important;
            box-shadow: none !important;
        }

        .icon-slash {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            width: 20px; 
            height: 2px;  
            background-color: rgba(255, 255, 255, 0.8); 
            border-radius: 1px;
            display: none; 
        }
        .btn-show-pass.show .icon-slash {
            display: block;
        }

        /* 
           CSS UNTUK TOMBOL LOGIN SHIMMER (GLOW UP)
        */
        .btn-login{
            width:100%;
            padding:14px;
            border:none;
            border-radius:8px;
            background: linear-gradient(135deg, #4f46e5, #06b6d4);
            color:#fff;
            font-weight:600;
            font-size:14px;
            cursor:pointer;
            transition: all .3s;
            margin-top:12px;
            box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
            position: relative;
            overflow: hidden; /* Penting agar shimmer tidak keluar tombol */
        }
        .btn-login:hover{
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
        }

        /* Efek Shimmer (Kilauan) */
        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%; /* Awalnya di luar tombol */
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg, 
                transparent, 
                rgba(255, 255, 255, 0.4), 
                transparent
            );
            animation: shimmer 2s infinite; /* Gerakan infinite */
        }

        @keyframes shimmer {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .login-footer{
            margin-top:25px;
            text-align:center;
            font-size:11px;
            color:#6b7280;
        }

        /* Preloader */
        .preloader{
            position:fixed;
            inset:0;
            background:#0f1115;
            display:flex;
            justify-content:center;
            align-items:center;
            z-index:9999;
        }
        .lds-ripple { display: inline-block; position: relative; width: 64px; height: 64px; }
        .lds-ripple div { position: absolute; border: 4px solid #fff; opacity: 1; border-radius: 50%; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }
        .lds-ripple div:nth-child(2) { animation-delay: -0.5s; }
        @keyframes lds-ripple { 0% { top: 28px; left: 28px; width: 0; height: 0; opacity: 1; } 100% { top: -1px; left: -1px; width: 58px; height: 58px; opacity: 0; } }
    </style>
</head>

<body>

<div class="bg-pattern"></div>
<div class="bg-grid"></div>

<!-- Preloader -->
<div class="preloader">
    <div class="lds-ripple"><div></div><div></div></div>
</div>

<div class="login-wrapper">
    <div class="login-card">

        <div class="login-header">
            <div class="avatar">
                <i class="ti-lock"></i>
            </div>
            <!-- GANTI NAMA JADI RONI DEV -->
            <h2>RONI DEV</h2>
            <p>Masuk untuk mengelola sistem</p>
        </div>

        <form action="function/cek_login.php" method="POST" onsubmit="return validasi()">

            <div class="form-group">
                <label>Username</label>
                <div class="input-wrapper">
                    <i class="ti-user"></i>
                    <input type="text" name="username" id="username" placeholder="Masukkan username">
                </div>
            </div>

            <div class="form-group">
                <label>Password</label>
                <div class="input-wrapper">
                    <i class="ti-key"></i>
                    <input type="password" name="password" id="password" placeholder="Masukkan password">
                    
                    <span class="btn-show-pass" onclick="togglePassword()">
                        <i class="ti-eye"></i>
                        <span class="icon-slash"></span>
                    </span>
                </div>
            </div>

            <button type="submit" name="login" class="btn-login">
                Login
            </button>

        </form>

        <div class="login-footer">
            © <?php echo date('Y'); ?> <?php echo $judul; ?>
        </div>

    </div>
</div>

<script src="assets/libs/jquery/dist/jquery.min.js"></script>
<script>
    // Preloader
    $(document).ready(function() {
        $(".preloader").fadeOut(500);
    });

    // Validasi
    function validasi(){
        var u = document.getElementById("username").value;
        var p = document.getElementById("password").value;
        if(u !== "" && p !== "") return true;
        alert("Username dan Password harus di isi!");
        return false;
    }

    // Toggle Password
    function togglePassword() {
        var passInput = document.getElementById("password");
        var btnIcon = document.querySelector('.btn-show-pass');

        if (passInput.type === "password") {
            passInput.type = "text";
            btnIcon.classList.add("show");
        } else {
            passInput.type = "password";
            btnIcon.classList.remove("show");
        }
    }
</script>

</body>
</html>