<?php
// unlock.php
// 密码 -> URL 映射表
// 左侧是 8 位密码，右侧是跳转 URL
$mapping = [
    '20230805' => 'http://hinashome.shike.me:19527/alist',
    '11111111' => 'https://tf.shike.me/redirect_url.html',
    'A1B2C3D4' => 'https://example.com/admin',
];

// 错误提示
$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $pwd = isset($_POST['password']) ? trim($_POST['password']) : '';

    // 只接受长度为8的密码
    if (mb_strlen($pwd, 'UTF-8') === 8) {

        // 匹配映射表
        if (isset($mapping[$pwd])) {
            header("Location: {$mapping[$pwd]}");
            exit;
        } else {
            $error = '密码错误。';
        }

    } else {
        $error = '请输入 8 位密码。';
    }
}
?>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>访问授权</title>
<style>
  html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;}
  body{
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(1000px 600px at 10% 20%,rgba(51,52,76,0.35),transparent),
               radial-gradient(1200px 800px at 90% 80%,rgba(10,255,200,0.06),transparent),
               linear-gradient(180deg,#030611,#070d1f 40%,#0b1228 100%);
    color:#e6f7ff;
    padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .wrap{
    width:min(820px,94vw);padding:40px;border-radius:18px;
    box-shadow:0 10px 40px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    backdrop-filter:blur(6px) saturate(120%);
    border:1px solid rgba(255,255,255,0.03);text-align:center;
  }

  .logo{font-weight:700;letter-spacing:2px;font-size:14px;color:rgba(158,222,255,0.9);margin-bottom:18px;text-transform:uppercase;}

  .pw{
    width:100%;max-width:560px;height:88px;margin:14px auto;
    font-size:32px;text-align:center;padding:18px 22px;
    border-radius:14px;border:1px solid rgba(255,255,255,0.06);
    background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
    color:#e8fbff;caret-color:#00ffd0;
    box-shadow:0 6px 22px rgba(3,6,15,0.6), inset 0 -2px 10px rgba(0,0,0,0.25);
  }
  .pw::placeholder{color:rgba(230,247,255,0.28);font-size:28px;}
  .hint{margin-top:10px;font-size:14px;color:rgba(255,130,130,0.95);height:22px;}
  .sub{margin-top:18px;font-size:12px;color:rgba(200,230,255,0.25);}
  input{font-size:32px;}

  @keyframes pulse {
    0%{box-shadow:0 6px 22px rgba(3,6,15,0.6);}
    50%{box-shadow:0 10px 36px rgba(0,200,150,0.06);}
    100%{box-shadow:0 6px 22px rgba(3,6,15,0.6);}
  }
  .pw:focus{animation:pulse 2.2s infinite;}

  @media (max-width:600px){
    .wrap{padding:28px;}
    .pw{height:76px;font-size:28px;padding:14px;}
  }
</style>
</head>
<body>
  <div class="wrap">
    <div class="logo">SYSTEM ACCESS</div>

    <form method="post" action="" autocomplete="off" novalidate>
      <input id="password" name="password" class="pw" type="password"
             inputmode="latin" maxlength="64"
             placeholder="Enter password" autofocus />

      <div class="hint" id="hint"><?= htmlspecialchars($error, ENT_QUOTES) ?></div>
      <div class="sub">  </div>
    </form>
  </div>

<script>
(function(){
  const input = document.getElementById('password');
  const hint = document.getElementById('hint');

  input.addEventListener('input', function(e){
    hint.textContent = '';
    if (input.value.length === 8) {
      if (navigator.vibrate) navigator.vibrate(30);
      setTimeout(()=>{ input.closest('form').submit(); }, 120);
    }
  });

  window.addEventListener('pageshow', ()=>{ input.value = ''; });
})();
</script>
</body>
</html>
