<?php session_start();
if (!empty($_SESSION['SESSION_USER']) && !empty($_SESSION['SESSION_ID'])) {
    header('location:../');
    exit;
} else {
    require_once '../../sw-library/sw-config.php';
?>
  <!DOCTYPE html>
  <html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Login Administrator</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta name="description" content="Login">
    <meta name="author" content="pixelcave">
    <meta name="robots" content="noindex, nofollow">

    <!-- Icons -->
    <link rel="shortcut icon" href="../../sw-content/favicon.png">
    <link rel="apple-touch-icon" href="../../sw-content/favicon.png">

    <link rel="stylesheet" href="../sw-assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../sw-assets/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../sw-assets/css/skin-blue-light.css">
    <link rel="stylesheet" href="../sw-assets/css/font-awesome.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Google Font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

    <style>
  /* Pengaturan Tema Hitam Kosmis dan Deep Space */
  body.login-page {
    background-color: #020208 !important; /* Hitam pekat dengan sedikit tint biru malam */
    font-family: 'Poppins', 'Inter', 'Segoe UI', sans-serif;
  }
  
  #particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    /* Gradasi lembut menciptakan kedalaman dimensi ruang angkasa */
    background: radial-gradient(circle at 50% 50%, #0a0a26 0%, #020208 80%);
  }
  
  .login-box {
    position: relative;
    z-index: 2;
    margin-top: 7%;
  }

  .login-logo a {
    color: #ffffff !important;
    /* Efek pendaran bintang (Star Glow) berwarna cyan/biru muda */
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.8), 0 0 20px rgba(0, 212, 255, 0.4);
    font-weight: 700;
    letter-spacing: 1.5px;
  }
  
  /* Kotak login Glassmorphism (Transparansi Panel Pesawat Luar Angkasa) */
  .login-box-body {
    background: rgba(10, 10, 30, 0.6) !important; 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    /* Border tipis berwarna nebula aurora */
    border: 1px solid rgba(0, 212, 255, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(102, 51, 238, 0.1);
    border-radius: 12px; /* Sudut melengkung modern */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    color: #ffffff !important;
  }
  
  .login-box-body:hover {
    transform: translateY(-4px);
    border: 1px solid rgba(0, 212, 255, 0.45);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 212, 255, 0.2);
  }

  .login-box-msg {
    color: #b0b5c9 !important; /* Abu-abu kebiruan nebula */
    letter-spacing: 0.5px;
  }

  /* Form Input Futuristik */
  .login-box-body .form-control {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 6px;
    transition: all 0.3s ease;
  }

  .login-box-body .form-control:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #00d4ff !important; /* Menyala biru starlight saat fokus */
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.25) !important;
  }

  .login-box-body .form-control-feedback {
    color: rgba(0, 212, 255, 0.6) !important;
  }

  .login-box-body hr {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  /* ====================================================
     EFEK CAHAYA BINTANG PADA BUTTON (COSMIC GLOW)
     ==================================================== */
  .btn-glow {
    position: relative;
    background: linear-gradient(135deg, #4433ff 0%, #00d4ff 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
    transition: all 0.3s ease;
  }

  /* Efek Hover Tombol didorong energi kosmis */
  .btn-glow:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5), 0 0 15px rgba(68, 51, 255, 0.4);
    opacity: 0.95;
    color: #ffffff !important;
  }

  /* Efek kilatan bintang berekor (Comet tail) mengikuti kursor */
  .btn-glow::before {
    content: '';
    position: absolute;
    top: var(--y, 0);
    left: var(--x, 0);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    pointer-events: none;
  }

  .btn-glow:hover::before {
    width: 250px;
    height: 250px;
  }
  
  footer {
    position: relative;
    z-index: 2;
    margin-top: 30px;
  }
  footer, footer a {
    color: #6a7185 !important; /* Warna pudar stardust */
  }
  footer a:hover {
    color: #00d4ff !important;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
  }
</style>
    
  </head>

  <body class="hold-transition login-page">
    
    <!-- Kontainer untuk Animasi Molekul -->
    <div id="particles-js"></div>

    <?php echo '
    <div class="login-box">
      <div class="login-logo">
        <a href="./"><img src="../../sw-content/' . $site_logo . '" oncontextmenu="return false;" height="50"></a>
      </div>
      <!-- /.login-logo -->
      <div class="login-box-body">
        <p class="login-box-msg">Masukkan Username dan Password :</p>

          <div class="form-group has-feedback">
            <input type="text" id="username" name="username" class="form-control" placeholder="Username">
            <span class="fa fa-user form-control-feedback"></span>
          </div>
          
          <div class="form-group has-feedback">
            <input type="password" id="password" name="password" class="form-control" placeholder="Password">
            <span class="glyphicon glyphicon-lock form-control-feedback"></span>
          </div>
         <hr>
          <div class="row">
          <div class="col-md-12" style="min-height:40px;"><span id="stat"></span></div>
            <div class="col-xs-12">
              <!-- Class diganti dari btn-success menjadi btn-glow -->
              <button type="submit" class="btn btn-block btn-flat btn-glow" id="login">Login to Admin</button>
            </div>
            <!-- /.col -->
          </div>
      </div>
      <!-- /.login-box-body -->
    </div>
    <!-- /.login-box -->'; ?>

    <footer class="text-white text-center">
  <small>
    <span id="credits">
      <a class="credits text-white" style="color: #ffffff !important;" href="https://s-widodo.com" target="_blank"></a> 
      BML. IT DIVISION | 
    </span>
    <em style="color: #ffffff !important;"><b>PT. BERKAT MANDIRI LESTARI</b></em>
  </small>
</footer>

    <script src="../sw-assets/js/jquery.min.js"></script>
    <script src="../sw-assets/js/bootstrap.min.js"></script>
    <script src="../sw-assets/js/adminlte.js"></script>
    <script src="../sw-assets/js/demo.js"></script>
    <script src="./jquery-login.js"></script>
    
   <!-- Menggunakan HTML5 Canvas Native untuk Efek Matrix Rain (Lebih Ringan & Otentik) -->
Berikut adalah perubahan script canvas yang telah dirombak total menjadi animasi Starfield Simulation (Perjalanan Menembus Luar Angkasa).

Bukan lagi bergerak jatuh ke bawah seperti hujan Matrix, kode ini akan membuat partikel-partikel bintang muncul dari tengah layar dan melesat maju ke arah penonton (warp speed/hyperspace effect), serasi dengan style CSS kosmis yang baru.

HTML
<!-- Native HTML5 Canvas untuk Efek Deep Space Starfield -->
<script>
  // ====================================================
  // SCRIPT ANIMASI LUAR ANGKASA (STARFIELD EFFECT)
  // ====================================================
  const canvasContainer = document.getElementById('particles-js');
  const canvas = document.createElement('canvas');
  canvasContainer.appendChild(canvas);
  const ctx = canvas.getContext('2d');

  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);

  // Konfigurasi Bintang
  const numStars = 150; // Jumlah bintang di layar
  const stars = [];
  const speed = 2;     // Kecepatan pergerakan menembus ruang angkasa

  // Inisialisasi data bintang
  function initStars() {
    for (let i = 0; i < numStars; i++) {
      stars[i] = {
        // Posisi X dan Y relatif terhadap titik pusat (0,0 adalah tengah layar)
        x: Math.random() * canvas.width - canvas.width / 2,
        y: Math.random() * canvas.height - canvas.height / 2,
        // Kedalaman bintang (Z-axis). Semakin kecil Z, bintang semakin dekat
        z: Math.random() * canvas.width
      };
    }
  }
  initStars();

  // Jalankan ulang init jika layar di-resize agar kalkulasi tengah layar tetap akurat
  window.addEventListener('resize', initStars);

  function drawSpace() {
    // Membuat background hitam kosmis dengan sedikit opacity agar ada efek jejak (warp trail)
    ctx.fillStyle = 'rgba(2, 2, 8, 0.2)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Titik pusat layar (pusat ledakan/kemunculan bintang)
    const cx = canvas.width / 2;
    const cy = canvas.height / 2;

    for (let i = 0; i < numStars; i++) {
      const star = stars[i];

      // Gerakkan bintang mendekati penonton dengan mengurangi nilai kedalaman Z
      star.z -= speed;

      // Jika bintang sudah melewati penonton (Z <= 0), reset posisinya kembali ke kejauhan
      if (star.z <= 0) {
        star.z = canvas.width;
        star.x = Math.random() * canvas.width - canvas.width / 2;
        star.y = Math.random() * canvas.height - canvas.height / 2;
      }

      // Proyeksi 3D ke 2D (Kalkulasi posisi x & y di layar berdasarkan kedalaman Z)
      const px = (star.x / star.z) * canvas.width + cx;
      const py = (star.y / star.z) * canvas.height + cy;

      // Kalkulasi ukuran bintang (Makin dekat/Z kecil = Makin besar)
      const size = (1 - star.z / canvas.width) * 4;

      // Tampilkan bintang jika posisinya berada di dalam area layar
      if (px >= 0 && px <= canvas.width && py >= 0 && py <= canvas.height) {
        
        // Variasi warna bintang: mayoritas putih, beberapa cyan/biru muda khas stardust
        if (i % 5 === 0) {
          ctx.fillStyle = 'rgba(0, 212, 255, ' + (1 - star.z / canvas.width) + ')';
        } else {
          ctx.fillStyle = 'rgba(255, 255, 255, ' + (1 - star.z / canvas.width) + ')';
        }

        // Gambar bintang berbentuk lingkaran kecil
        ctx.beginPath();
        ctx.arc(px, py, size < 0.5 ? 0.5 : size, 0, Math.all || Math.PI * 2);
        ctx.fill();
      }
    }

    // Loop animasi menggunakan requestAnimationFrame (lebih smooth & hemat baterai dibanding setInterval)
    requestAnimationFrame(drawSpace);
  }

  // Mulai animasi luar angkasa
  requestAnimationFrame(drawSpace);


  // ====================================================
  // SCRIPT MENDETEKSI POSISI KURSOR PADA BUTTON (COSMIC GLOW)
  // ====================================================
  const btn = document.getElementById('login');
  if (btn) {
    btn.addEventListener('mousemove', (e) => {
      const rect = e.currentTarget.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      
      btn.style.setProperty('--x', x + 'px');
      btn.style.setProperty('--y', y + 'px');
    });
  }
</script>
  </body>

  </html>
<?php } ?>