<?php
/*
 * Copyright (C) 2018 Laksamadi Guko.
 * Redesign: Glassmorphism Responsive (Full Screen di HP).
 */
session_start();

// Judul Halaman
$title_login = isset($_please_login) ? $_please_login : "Welcome Back";

// Logic Error
$show_error = (!empty($error)); 
?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mikhmon Login</title>
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">

    <style>
        /* --- 1. RESET & BACKGROUND --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        
        body {
            font-family: 'Poppins', sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Background Gradient Deep Ocean */
            background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
            color: #fff;
            
            /* Hapus padding body agar bisa full screen di HP */
            padding: 0; 
        }

        /* --- 2. GLASS CARD (DEFAULT DESKTOP) --- */
        .login-card {
            width: 100%; 
            max-width: 500px; /* Lebar maksimal di PC */
            padding: 50px 40px;
            
            /* Efek Kaca */
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            
            /* Sudut bulat untuk tampilan PC */
            border-radius: 20px; 
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
            
            /* Animasi */
            animation: slideUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        /* --- 3. RESPONSIVE KHUSUS HP (FULL SCREEN) --- */
        @media (max-width: 600px) {
            .login-card {
                max-width: 100%;       /* Lebar Penuh */
                height: 100vh;         /* Tinggi Penuh Layar HP */
                border-radius: 0;      /* Hilangkan sudut bulat */
                border: none;          /* Hilangkan garis pinggir */
                background: rgba(0, 0, 0, 0.2); /* Sedikit lebih gelap agar teks jelas */
                
                /* Agar konten tetap di tengah layar HP */
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 40px 30px; /* Padding sisi HP */
            }
            
            /* Sesuaikan ukuran font header di HP */
            .header h3 { font-size: 28px; }
        }

        /* --- 4. HEADER & LOGO --- */
        .header {
            text-align: center;
            margin-bottom: 50px;
        }
        .header img {
            width: 90px;
            margin-bottom: 15px;
            filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
        }
        .header h3 {
            font-weight: 600;
            letter-spacing: 1px;
            font-size: 28px;
            margin-bottom: 5px;
        }
        .header p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }

        /* --- 5. INPUT FIELDS --- */
        .input-group {
            position: relative;
            margin-bottom: 25px;
        }
        
        .input-icon {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            fill: rgba(255, 255, 255, 0.6);
            transition: 0.3s;
        }

        .form-control {
            width: 100%;
            padding: 18px 18px 18px 60px; /* Input lebih besar */
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: #fff;
            font-size: 16px;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        .form-control::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .form-control:focus {
            background: rgba(0, 0, 0, 0.4);
            border-color: #4facfe;
            outline: none;
            box-shadow: 0 0 15px rgba(79, 172, 254, 0.3);
        }

        .form-control:focus + .input-icon {
            fill: #4facfe;
        }

        /* --- 6. TOMBOL --- */
        .btn-login {
            width: 100%;
            padding: 18px; /* Tombol lebih tebal agar mudah dipencet di HP */
            border: none;
            border-radius: 12px;
            background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
            color: #00334e;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            margin-top: 10px;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
        }
        .btn-login:active {
            transform: translateY(0);
        }

        /* --- 7. ERROR MESSAGE --- */
        .error-notif {
            background: rgba(231, 76, 60, 0.2);
            border: 1px solid rgba(231, 76, 60, 0.5);
            color: #ffcccc;
            padding: 15px;
            border-radius: 12px;
            margin-top: 25px;
            font-size: 14px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            animation: shake 0.4s ease-in-out;
        }

        /* --- ANIMASI --- */
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(40px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .footer-copy {
            text-align: center;
            margin-top: 40px;
            font-size: 12px;
            color: rgba(255,255,255,0.3);
        }
    </style>
</head>
<body>

    <div class="login-card">
        
        <div class="header">
            <img src="img/favicon.png" alt="Mikhmon">
            <h3>MIKHMON ONLINE</h3>
            Ros 6.xx By Erwan Rapp
  <br>
        </div>

        <form autocomplete="off" action="" method="post">
            
            <div class="input-group">
                <input type="text" class="form-control" name="user" id="_username" placeholder="Username" required autofocus>
                <svg class="input-icon" viewBox="0 0 24 24">
                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                </svg>
            </div>

            <div class="input-group">
                <input type="password" class="form-control" name="pass" id="_pass" placeholder="Password" required>
                <svg class="input-icon" viewBox="0 0 24 24">
                    <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
                </svg>
            </div>

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

            <?php if ($show_error): ?>
                <div class="error-notif">
                    <svg style="width:20px; height:20px; fill:#ffcccc;" 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>
                    <span>Username atau Password salah</span>
                </div>
            <?php endif; ?>

        </form>

        <div class="footer-copy">
            &copy; 2018 Laksamadi Guko <br> Redesign Responsive
        </div>

    </div>

</body>
</html>