<?php
defined("ALLOW") or exit('No direct script access allowed');
?>

<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Anticode Sign-in</title>
    <meta name="description" content="Fullstack Developer">
    <meta name="author" content="Anticode">
    <link rel="shortcut icon" href="<?= base_url() ?>ANTICODE/Ansrc/favicons/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="<?= base_url() ?>ANTICODE/Ansrc/favicons/android-chrome-192x192.png" type="image/x-icon">
    <link rel="apple-touch-icon" href="<?= base_url() ?>ANTICODE/Ansrc/favicons/apple-touch-icon.png">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/bootstrap-icons.svg">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.css" rel="stylesheet">
</head>

  <style>
        body {
            font-family: 'Press Start 2P', cursive;
        }
        
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        
        .rain-container {
            position: absolute;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }
        
        .raindrop {
            position: absolute;
            width: 2px;
            height: 20px;
            background: rgb(136, 255, 0);
            opacity: 0.7;
            animation: fall linear infinite;
        }
        
        .raindrop:nth-child(1) {
            left: 10%;
            animation-duration: 1.2s;
            animation-delay: 0s;
        }
        .raindrop:nth-child(2) {
            left: 20%;
            animation-duration: 1.5s;
            animation-delay: 0.2s;
        }
        .raindrop:nth-child(3) {
            left: 30%;
            animation-duration: 1.8s;
            animation-delay: 0.5s;
        }
        .raindrop:nth-child(4) {
            left: 40%;
            animation-duration: 1.3s;
            animation-delay: 0.3s;
        }
        .raindrop:nth-child(5) {
            left: 50%;
            animation-duration: 1.7s;
            animation-delay: 0.6s;
        }
        .raindrop:nth-child(6) {
            left: 60%;
            animation-duration: 1.4s;
            animation-delay: 0.1s;
        }
        .raindrop:nth-child(7) {
            left: 70%;
            animation-duration: 1.9s;
            animation-delay: 0.4s;
        }
        .raindrop:nth-child(8) {
            left: 80%;
            animation-duration: 1.6s;
            animation-delay: 0.7s;
        }
        
        @keyframes fall {
            0% {
                top: -10%;
                opacity: 0;
            }
            30% {
                opacity: 1;
            }
            100% {
                top: 100%;
                opacity: 0;
            }
        }


        .raindropx-container {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .raindropx {
            position: absolute;
            font-size: 30px;
            color: #40ff005f; 
            animation: fall 5s ease-in infinite, fadeInOut 5s ease-in-out infinite;
        }

        @keyframes fadeInOut {
            0%, 100% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
        }


        .form-control::before {
            border-color: transparent;
        }

        .form-control {
            border-color :rgb(136, 255, 0);
            box-shadow: none;
        }

        .form-control:focus {
            border-color:transparent;
            box-shadow: 0 0 1px 1px rgb(136, 255, 0);
        }

        .text-anticode {
            color:rgb(136, 255, 0);
        }
        
        .btn-darkz {
            background-color: transparent;
            border-color:transparent;
            box-shadow:none;
            color:#b7b7b7;
        }

        .btn-darkz:hover {
            background-color: transparent;
            box-shadow: none;
            border-color:transparent;
        }
        .btn-darkx:hover {
            background-color: transparent;
            color:rgb(136, 255, 0);
            box-shadow: 0 0 2px 2px rgb(136, 255, 0);
            border:1px solid rgb(0, 0, 0);
        }
        .btn-darkx {
            background-color: transparent;
            border: 1px solid #87dc4b9e;
            color:#b7b7b7;
        }
        .form-control::placeholder {
            color: rgba(136, 255, 0, 0.637); 
            font-style: normal; 
            font-size: 13px; 
        }

        .lbl-anticode {
            color: rgba(136, 255, 0, 0.637);
            font-size: 14px;
            margin-bottom: 3px;
            font-style: italic;
        }

        .logo-container {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
        }

        .logo {
            font-size: 100px; 
            color: #2c3e50; 
            transition: color 1s ease-in-out;
        }


        .logo:hover {
            color: #f39c12;
        }
        .card {
            border: 2px dotted #6aff0058;
            border-radius: 5px;
            width: 400px;
            box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.527);
        }

        .card:hover {
            border-color:transparent;
            box-shadow: 0 0 3px 3px rgba(136, 255, 0, 0.327);
        }
        .text-anticode-dark {
            color: #87dc4b9e; 
        }

        .smx {
            font-size: 13px;
        }

        #typing-text {
            font-size: 9px;
            white-space: nowrap;
            overflow: hidden; 
            border-right: 1px solid #00ff2a70;
            padding-right: 5px;
        }

        .input-group-text {
            border-color:transparent;
            box-shadow: none;
            border:none;
        }
        
        .input-group {
            border : 1px solid #87dc4b9e;
            box-shadow: none;
            border-radius: 10px;
            height:50px;
        }
        
        .input-group:focus {
            border-color : 1px solid black;
            box-shadow: 0 0 2px 2px rgb(136, 255, 0);
        }
        
         .input-group:hover {
            border-color : 1px solid black;
            box-shadow: 0 0 2px 2px rgb(136, 255, 0);
        }
        
        
    </style>

<body>
    <div class="rain-container">
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>
        <span class="raindrop"></span>

        <div class="row m-3">
            <div class="col-2">
                <div class="raindropx-container">
                    <i class="fab fa-ethereum raindropx ms-5" style="--random-x: 0.1; animation-delay: 0s;"></i>
                </div>
            </div>
            <div class="col-2">
                <div class="raindropx-container">
                    <i class="fa fa-dollar-sign raindropx ms-5" style="--random-x: 0.3; animation-delay: 1s;"></i>
                </div>
            </div>
            <div class="col-2">
                <div style="margin-left: 30px;" class="raindropx-container">
                    <i class="fab fa-bitcoin  raindropx ms-5" style="--random-x: 0.5; animation-delay: 2s;"></i>
                </div>
            </div>
            <div class="col-2">
                <div style="margin-left: 30px;" class="raindropx-container">
                    <i class="fa fa-dollar-sign raindropx ms-5" style="--random-x: 0.7; animation-delay: 2s;"></i>
                </div>
            </div>
            <div class="col-2">
                <div class="raindropx-container">
                    <i class="fab fa-ethereum raindropx ms-5" style="--random-x: 0.9; animation-delay: 1s;"></i>
                </div>
            </div>
            <div class="col-2">
                <div class="raindropx-container">
                    <i class="fab fa-bitcoin raindropx ms-5" style="--random-x: 0.1; animation-delay: 0s;"></i>
                </div>
            </div>
        </div>
    </div>


    <div class="container-fluid d-flex justify-content-center align-items-center mt-5">
        <div class="card x bg-transparent mt-5">
            <div class="logo-container mt-4 mb-3">
                <i class="fab fa-napster text-anticode fa-5x"></i>
            </div>
            <div class="text-center">
                <h4 class="text-anticode">HELLO</h4>
                <span id="typing-text" class="text-anticode smx"></span>
            </div>
            <form action="process" method="post">
                <div class="row m-3 mt-3">
                    <div class="form-group">
                        <input style="height: 50px; color:rgb(136, 255, 0); font-size:10px;" type="password" name="token" class="form-control bg-transparent" placeholder="Your Key" autocomplete="off" required>
                    </div>
                </div>
                <div class="row m-3 mb-5">
                    <div class="col-md-12 col-12 mt-4">
                        <button style="padding: 13px; border-radius: 5px; font-size:10px;" class="btn btn-darkx d-block w-100" name="action" type="submit"> Sign in</button>
                    </div>
                </div>
                <div class="row m-3 mt-3">
                    <div class="col-10">
                        <span style="font-size:8px;" class="text-anticode-dark">&copy; 2025 Anticode</span>
                    </div>
                    <div class="col-2">
                        <span style="font-size:16px;"><i class="fab fa-napster text-anticode-dark ms-4"></i></span>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/js/all.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.min.js"></script>
    <script>
        const text = "Please sign in to continue...";
        const typingElement = document.getElementById("typing-text");
        let index = 0;
        function type() {
            if (index < text.length) {
                typingElement.textContent += text.charAt(index);
                index++;
                setTimeout(type, 150);
            }
        }
        window.onload = type;
    </script>
    <?php if (@$_SESSION['sukses']) { ?>
        <script>
            <?php echo $_SESSION['sukses']; ?>
        </script>
    <?php unset($_SESSION['sukses']);
    } ?>
</body>
</html>