

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  
  <!-- Primary Meta Tags -->
  <title>PROTOK - Protez ou bann kont Tiktok | TikTok Account Protection System</title>
  <meta name="title" content="PROTOK - Protez ou bann kont Tiktok | TikTok Account Protection System">
  <meta name="description" content="PROTOK - Advanced AI-powered TikTok account protection system. Protect your TikTok account from hackers and fake accounts. Nou p protez pliss ki 200 kont. System la servi enn l'intelizans artificiel bien avance.">
  <meta name="keywords" content="PROTOK, TikTok protection, TikTok account security, protect TikTok account, TikTok account protection, AI TikTok security, TikTok hacker protection, fake TikTok account detection, TikTok account safety, Mauritius TikTok, protect kont TikTok, TikTok security system, artificial intelligence TikTok, TikTok account monitoring, TikTok account verification">
  <meta name="author" content="PROTOK">
  <meta name="robots" content="index, follow">
  <meta name="language" content="English, Creole">
  <meta name="revisit-after" content="7 days">
  <meta name="theme-color" content="#0a0e14">
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://protok.detectum.it.com/">
  <meta property="og:title" content="PROTOK - Protez ou bann kont Tiktok | TikTok Account Protection System">
  <meta property="og:description" content="PROTOK - Advanced AI-powered TikTok account protection system. Protect your TikTok account from hackers and fake accounts. Nou p protez pliss ki 200 kont.">
  <meta property="og:image" content="https://www.protok.net/app-logo-detectum.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="PROTOK">
  <meta property="og:locale" content="en_US">
  
  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://protok.detectum.it.com/">
  <meta property="twitter:title" content="PROTOK - Protez ou bann kont Tiktok | TikTok Account Protection System">
  <meta property="twitter:description" content="PROTOK - Advanced AI-powered TikTok account protection system. Protect your TikTok account from hackers and fake accounts.">
  <meta property="twitter:image" content="https://www.protok.net/app-logo-detectum.png">
  
  <!-- Favicon - Multiple formats for better browser compatibility -->
  <link rel="icon" type="image/png" sizes="32x32" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="icon" type="image/png" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="shortcut icon" href="https://www.protok.net/app-logo-detectum.png">
  
  <!-- Apple Touch Icons -->
  <link rel="apple-touch-icon" sizes="180x180" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="apple-touch-icon" sizes="152x152" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="apple-touch-icon" sizes="144x144" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="apple-touch-icon" sizes="120x120" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="apple-touch-icon" sizes="114x114" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="apple-touch-icon" sizes="76x76" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="apple-touch-icon" sizes="72x72" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="apple-touch-icon" sizes="60x60" href="https://www.protok.net/app-logo-detectum.png">
  <link rel="apple-touch-icon" sizes="57x57" href="https://www.protok.net/app-logo-detectum.png">
  <meta name="apple-mobile-web-app-title" content="PROTOK">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  
  <!-- Web App Manifest -->
  <link rel="manifest" href="./manifest.json">
  
  <!-- Canonical URL -->
  <link rel="canonical" href="https://www.protok.net/">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #0a0e14;
      overflow: hidden;
      height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-tap-highlight-color: transparent;
    }

    @media (max-width: 768px) {
      body {
        overflow-y: auto;
        height: auto;
        min-height: 100vh;
      }
    }

    /* Time Display Top Left */
    .time-display {
      position: fixed;
      top: 30px;
      left: 30px;
      font-size: 48px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.3);
      letter-spacing: 2px;
      z-index: 100;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

    /* Logo styling below time display */
    .logo {
      position: fixed;
      top: 110px;
      left: 30px;
      z-index: 100;
      opacity: 0.8;
      transition: opacity 0.3s ease;
    }

    .logo img {
      width: 120px;
      height: auto;
      display: block;
    }

    .logo:hover {
      opacity: 1;
    }

    /* Adding tagline below the compass clock */
    .tagline {
      position: absolute;
      left: 10%;
      bottom: 15%;
      z-index: 100;
      max-width: 45%;
    }

    /* Tagline Buttons Container */
    .tagline-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 20px;
    }

    /* Making the main tagline bigger and adding subtitle styling */
    .tagline-main {
      font-size: 22px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.3);
      letter-spacing: 2px;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
      margin-bottom: 8px;
    }

    .tagline-sub {
      font-size: 14px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.3);
      letter-spacing: 1.5px;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

    /* Adding description text styling below subtitle */
    .tagline-desc {
      font-size: 11px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.3);
      letter-spacing: 1px;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
      margin-top: 6px;
      max-width: 100%;
      line-height: 1.5;
    }

    /* Documentation Button */
    .documentation-btn {
      display: inline-block;
      margin-top: 15px;
      padding: 12px 30px;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      color: rgba(255, 255, 255, 0.9);
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 2px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      backdrop-filter: blur(5px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .documentation-btn:hover {
      background: rgba(0, 0, 0, 0.6);
      border-color: rgba(255, 255, 255, 0.4);
      color: rgba(255, 255, 255, 1);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
      transform: translateY(-2px);
    }

    /* Login Container */
    .login-container {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      height: 100vh;
      position: relative;
      padding-right: 5%;
    }

    .login-container.hidden {
      display: none;
    }

    /* Clock Container - Left Side */
    .clock-container {
      position: absolute;
      left: 10%;
      width: 400px;
      height: 400px;
    }

    /* Hour Display */
    .hour-display {
      position: absolute;
      left: -80px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 120px;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: -5px;
    }

    /* Circular Clock */
    .circular-clock {
      position: relative;
      width: 400px;
      height: 400px;
      animation: rotateCompass 60s linear infinite;
    }

    /* Minute Highlight */
    .minute-highlight {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 80px;
      height: 50px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
      transition: all 0.3s ease;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }

    /* Login Form - Center */
    .login-form {
      background: rgba(20, 25, 35, 0.9);
      padding: 60px 50px;
      border-radius: 20px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      z-index: 10;
    }

    .login-form h2 {
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 40px;
      font-size: 38px;
      font-weight: 300;
      text-align: center;
      letter-spacing: 2px;
    }

    .input-group {
      margin-bottom: 30px;
    }

    .input-group label {
      display: block;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 10px;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .input-group input {
      width: 300px;
      padding: 15px 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 10px;
      color: #fff;
      font-size: 16px;
      transition: all 0.3s ease;
    }

    .password-wrapper {
      position: relative;
      width: 300px;
    }

    .password-wrapper input {
      width: 100%;
      padding-right: 50px;
    }

    .password-toggle {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      font-size: 20px;
      padding: 5px;
      transition: color 0.3s ease;
      z-index: 10;
    }

    .password-toggle:hover {
      color: rgba(255, 255, 255, 0.9);
    }

    .input-group input:focus {
      outline: none;
      border-color: rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
    }

    .login-btn {
      width: 100%;
      padding: 15px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      color: #fff;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 20px;
    }

    .login-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
      transform: translateY(-2px);
    }

    .error-message {
      color: rgba(255, 100, 100, 0.9);
      font-size: 14px;
      margin-bottom: 20px;
      text-align: center;
      padding: 10px;
      background: rgba(255, 100, 100, 0.1);
      border-radius: 5px;
      border: 1px solid rgba(255, 100, 100, 0.3);
    }

    .success-message {
      color: rgba(100, 255, 100, 0.9);
      font-size: 14px;
      margin-bottom: 20px;
      text-align: center;
      padding: 10px;
      background: rgba(100, 255, 100, 0.1);
      border-radius: 5px;
      border: 1px solid rgba(100, 255, 100, 0.3);
    }

    .switch-form {
      text-align: center;
      margin-top: 20px;
      color: rgba(255, 255, 255, 0.5);
      font-size: 14px;
    }

    .switch-form a {
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      cursor: pointer;
    }

    .switch-form a:hover {
      color: rgba(255, 255, 255, 0.9);
    }

    /* Password Reset Popup */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    .popup-overlay.active {
      display: flex;
    }

    .popup {
      background: rgba(20, 25, 35, 0.95);
      padding: 40px;
      border-radius: 20px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
      max-width: 500px;
      width: 90%;
      position: relative;
    }

    .popup-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      width: 35px;
      height: 35px;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .popup-close:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .popup h3 {
      color: rgba(255, 255, 255, 0.9);
      font-size: 24px;
      font-weight: 300;
      margin-bottom: 25px;
      text-align: center;
      letter-spacing: 1px;
    }

    .popup .input-group {
      margin-bottom: 20px;
    }

    .popup .input-group input {
      width: 100%;
      padding: 12px 15px;
      font-size: 16px;
    }

    .popup .password-wrapper {
      position: relative;
      width: 100%;
    }

    .popup .password-wrapper input {
      width: 100%;
      padding-right: 50px;
    }

    .popup .password-toggle {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      font-size: 20px;
      padding: 5px;
      transition: color 0.3s ease;
      z-index: 10;
    }

    .popup .password-toggle:hover {
      color: rgba(255, 255, 255, 0.9);
    }

    .popup-btn {
      width: 100%;
      padding: 15px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      color: #fff;
      font-size: 16px;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-top: 10px;
    }

    .popup-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
    }

    .popup-message {
      text-align: center;
      padding: 20px;
      color: rgba(100, 255, 100, 0.9);
      font-size: 18px;
      font-weight: 600;
      margin-top: 20px;
    }

    .input-group label span {
      display: inline;
      font-weight: normal;
    }

    /* Clock Numbers and Ticks */
    .clock-number {
      position: absolute;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.4);
      font-weight: 300;
      animation: counterRotate 60s linear infinite, pulse 3s ease-in-out infinite;
    }

    .clock-tick {
      position: absolute;
      width: 2px;
      height: 8px;
      background: rgba(255, 255, 255, 0.4);
      left: 50%;
      top: 0;
      transform-origin: 1px 200px;
    }

    /* Animations */
    @keyframes rotateCompass {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 0.4;
      }
      50% {
        opacity: 0.8;
      }
    }

    @keyframes counterRotate {
      0% {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
        transform: translate(-50%, -50%) rotate(-360deg);
      }
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
      .clock-container {
        left: 5%;
        width: 300px;
        height: 300px;
      }

      .hour-display {
        font-size: 80px;
        left: -60px;
      }

      .circular-clock {
        width: 300px;
        height: 300px;
      }

      .minute-highlight {
        width: 60px;
        height: 40px;
        font-size: 24px;
      }

      .login-form {
        padding: 40px 30px;
      }

      .tagline {
        left: 5%;
        bottom: 10%;
      }
    }

    @media (max-width: 768px) {
      body {
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
      }

      .time-display {
        top: 15px;
        left: 15px;
        font-size: 32px;
      }

      .logo {
        top: 70px;
        left: 15px;
      }

      .logo img {
        width: 80px;
      }

      .clock-container {
        display: none;
      }

      .tagline {
        order: 2;
        position: relative;
        left: auto;
        bottom: auto;
        margin: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        max-width: 100%;
      }

      .tagline-buttons {
        justify-content: center;
        margin-bottom: 15px;
        gap: 10px;
      }

      .tagline-buttons .documentation-btn {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        padding: 10px 20px;
        font-size: 12px;
      }

      .tagline-main {
        font-size: 18px;
      }

      .tagline-sub {
        font-size: 12px;
      }

      .tagline-desc {
        font-size: 10px;
        max-width: 100%;
      }

      .documentation-btn {
        padding: 10px 25px;
        font-size: 12px;
        margin-top: 12px;
      }

      .login-container {
        order: 1;
        padding: 20px;
        padding-top: 90px;
        height: auto;
        min-height: auto;
        margin-top: 0;
      }

      .login-form {
        width: 100%;
        max-width: 100%;
        padding: 30px 20px;
        margin: 5px 0;
      }

      .login-form h2 {
        font-size: 28px;
        margin-bottom: 30px;
      }

      .input-group {
        margin-bottom: 20px;
      }

      .password-wrapper {
        width: 100%;
      }

      .input-group input {
        width: 100%;
        padding: 12px 15px;
        padding-right: 50px;
        font-size: 16px; /* Prevents zoom on iOS */
        -webkit-appearance: none;
        border-radius: 10px;
      }

      /* Ensure captcha input works on mobile */
      #captcha_answer {
        font-size: 16px; /* Prevents zoom on iOS */
        -webkit-appearance: none;
        appearance: none;
        padding-right: 15px; /* Override padding-right for captcha */
      }

      .login-btn {
        padding: 15px;
        font-size: 14px;
        min-height: 44px; /* Touch-friendly */
      }

      .switch-form {
        margin-top: 15px;
        font-size: 12px;
      }
    }

    @media (max-width: 480px) {
      .time-display {
        font-size: 24px;
        top: 10px;
        left: 10px;
      }

      .logo {
        top: 50px;
        left: 10px;
      }

      .logo img {
        width: 60px;
      }

      .tagline {
        margin-top: 20px;
        margin-bottom: 20px;
      }

      .documentation-btn {
        padding: 10px 20px;
        font-size: 11px;
        margin-top: 10px;
      }

      .login-container {
        padding-top: 80px;
      }

      .login-form {
        padding: 25px 15px;
        margin: 5px 0;
      }

      .login-form h2 {
        font-size: 24px;
      }

      .input-group label {
        font-size: 12px;
      }

      .input-group input {
        padding: 12px;
        font-size: 16px;
      }

      .popup {
        padding: 25px 15px;
        max-width: 95%;
      }

      .popup h3 {
        font-size: 20px;
      }

      .popup-btn {
        padding: 12px;
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <!-- Time Display -->
  <div class="time-display" id="timeDisplay">00:00</div>

  <!-- Logo -->
  <div class="logo">
    <img src="https://detectum.it.com/wp-content/uploads/2025/08/detectum-logo-G.png" alt="Detectum Logo">
  </div>

  <!-- Adding tagline below compass -->
  <div class="tagline">
    <div class="tagline-buttons">
      <a href="https://www.protok.net/documentation/" target="_blank" class="documentation-btn">DOKIMANTASYON</a>
      <a href="reviews.php" class="documentation-btn">LOPINYON PIBLIK</a>
    </div>
    <div class="tagline-main">PROTEZ OU KONT TIKTOK</div>
    <div class="tagline-sub">NOU P PROTEZ PLISS KI 200 KONT TIKTOK DAN MAURICE</div>
    <!-- Adding description text below subtitle -->
    <div class="tagline-desc">SA SYSTEM LA LI SERVI ENN L'INTELIZANS ARTIFISYEL BIEN AVANCE KI KAPAV DETEKTE SI KIKEN INN KRE ENN FAUSSE KONT PAREY KOUMA OU KONT TIKTOK, LI KAPAV OUSSI PROTEZ OU KONT CONT BANN HACKER. PROTOK FINN KRE EN COLLABORASYON EST.PHILIPPINES EK DETECTUM CYBERDEFENSE.</div>
  </div>

  <!-- Login View -->
  <div class="login-container" id="loginContainer">
    <!-- Clock Animation -->
    <div class="clock-container">
      <div class="hour-display" id="hourDisplay">00</div>
      <div class="circular-clock" id="circularClock">
        <div class="minute-highlight" id="minuteHighlight">00</div>
      </div>
    </div>

    <!-- Login Form -->
    <div class="login-form">
      <h2 style="font-size: 38px;">PROTOK</h2>
      <h3 id="registrationSubtitle" style="display: none; font-size: 24px; color: rgba(255, 255, 255, 0.7); font-weight: 300; text-align: center; margin-top: -10px; margin-bottom: 30px; letter-spacing: 1px;">KRE OU NOUVO KONT</h3>
      
            
      
      <!-- Login Form -->
      <form id="loginForm" method="POST" action="">
        <input type="hidden" name="login" value="1">
        <div class="input-group">
          <label for="phone">OU LIMORO PORTAB</label>
          <input type="text" id="phone" name="phone" required pattern="^5\d{7}$" placeholder="5XXXXXXX" maxlength="8" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 8);">
        </div>
        <div class="input-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required>
        </div>
        <button type="submit" class="login-btn">Login</button>
      </form>

      <!-- Registration Form (Hidden by default) -->
      <form id="registerForm" method="POST" action="" style="display: none;">
        <input type="hidden" name="register" value="1">
        <div class="input-group">
          <label for="reg_phone">OU LIMORO PORTAB</label>
          <input type="text" id="reg_phone" name="phone" required pattern="^5\d{7}$" placeholder="5XXXXXXX" maxlength="8" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 8);">
        </div>
        <div class="input-group">
          <label for="reg_email">OU EMAIL ADDRESS <span style="color: rgba(255, 255, 255, 0.4); font-size: 12px; font-weight: normal;">(Pas necesser)</span></label>
          <input type="email" id="reg_email" name="email" placeholder="Optional">
        </div>
        <div class="input-group">
          <label for="reg_password">Password</label>
          <div class="password-wrapper">
            <input type="password" id="reg_password" name="password" required minlength="6">
            <button type="button" class="password-toggle" onclick="togglePassword('reg_password', this)">👁️</button>
          </div>
        </div>
        <div class="input-group">
          <label for="captcha_answer">CAPTCHA: 2 + 1 = ? <button type="button" onclick="refreshCaptcha()" style="background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; color: #fff; padding: 5px 10px; margin-left: 10px; cursor: pointer; font-size: 14px; vertical-align: middle;">🔄</button></label>
          <input type="text" inputmode="numeric" pattern="[0-9]*" id="captcha_answer" name="captcha_answer" required placeholder="Enter answer" min="0" max="20" autocomplete="off">
        </div>
        <button type="submit" class="login-btn">KRE MO KONT</button>
      </form>

      <div class="switch-form">
        <a href="#" id="switchLink">Ou pena kont lor Protok?, kre enn, li gratis</a>
        <div id="passwordResetLinkContainer" style="display: none; margin-top: 10px;">
          <a href="#" id="forgotPasswordLinkReg" style="font-size: 13px;">Monn perdi mo password</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Password Reset Verification Popup -->
  <div class="popup-overlay" id="resetVerifyPopup">
    <div class="popup">
      <div class="popup-close" onclick="closePopup('resetVerifyPopup')">&times;</div>
      <h3>RESET PASSWORD</h3>
      <form id="resetVerifyForm">
        <div class="input-group">
          <label for="reset_email">OU EMAIL ADDRESS</label>
          <input type="email" id="reset_email" name="email" required placeholder="Enter your email">
        </div>
        <div class="input-group">
          <label for="reset_phone">OU LIMORO PORTAB</label>
          <input type="text" id="reset_phone" name="phone" required pattern="^5\d{7}$" placeholder="5XXXXXXX" maxlength="8" oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 8);">
        </div>
        <div id="resetVerifyError" class="error-message" style="display: none;"></div>
        <button type="submit" class="popup-btn">VERIFY</button>
      </form>
    </div>
  </div>

  <!-- New Password Popup -->
  <div class="popup-overlay" id="newPasswordPopup">
    <div class="popup">
      <div class="popup-close" onclick="closePopup('newPasswordPopup')">&times;</div>
      <h3>NOUVO PASSWORD</h3>
      <form id="newPasswordForm">
        <div class="input-group">
          <label for="new_password">NOUVO PASSWORD</label>
          <div class="password-wrapper">
            <input type="password" id="new_password" name="new_password" required minlength="6" placeholder="Minimum 6 characters">
            <button type="button" class="password-toggle" onclick="togglePassword('new_password', this)">👁️</button>
          </div>
        </div>
        <div id="newPasswordError" class="error-message" style="display: none;"></div>
        <button type="submit" class="popup-btn">OK</button>
      </form>
    </div>
  </div>

  <!-- Success Message Popup -->
  <div class="popup-overlay" id="successPopup">
    <div class="popup">
      <div class="popup-message">OUNN RESSI CHANZ OU PASSWORD</div>
    </div>
  </div>

  <script>
    // Clock Update Function
    function updateClock() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');

      // Update top left time display
      document.getElementById('timeDisplay').textContent = `${hours}:${minutes}`;

      // Update hour displays
      document.getElementById('hourDisplay').textContent = hours;

      // Update minute highlights
      document.getElementById('minuteHighlight').textContent = minutes;

      // Rotate minute highlight smoothly
      const minuteRotation = (parseInt(minutes) * 6) - 90;
      document.getElementById('minuteHighlight').style.transform = 
        `translate(-50%, -50%) rotate(${minuteRotation}deg)`;
    }

    // Initialize Clock Numbers and Ticks
    function initializeClock(clockId) {
      const clock = document.getElementById(clockId);
      const radius = 200;
      const centerX = 200;
      const centerY = 200;

      // Create clock numbers (0, 5, 10, 15, ... 55)
      for (let i = 0; i < 12; i++) {
        const angle = (i * 30) - 90;
        const radian = (angle * Math.PI) / 180;
        const x = centerX + radius * 0.7 * Math.cos(radian);
        const y = centerY + radius * 0.7 * Math.sin(radian);
        const number = (i * 5).toString().padStart(2, '0');

        const numberElement = document.createElement('div');
        numberElement.className = 'clock-number';
        numberElement.textContent = number;
        numberElement.style.left = `${x}px`;
        numberElement.style.top = `${y}px`;
        clock.appendChild(numberElement);
      }

      // Create tick marks
      for (let i = 0; i < 60; i++) {
        const tick = document.createElement('div');
        tick.className = 'clock-tick';
        tick.style.transform = `rotate(${i * 6}deg)`;
        clock.appendChild(tick);
      }
    }

    // Initialize clock
    initializeClock('circularClock');

    // Update clock every second
    updateClock();
    setInterval(updateClock, 1000);

    // Switch between login and register forms
    let isLogin = true;
    document.getElementById('switchLink').addEventListener('click', function(e) {
      e.preventDefault();
      const loginForm = document.getElementById('loginForm');
      const registerForm = document.getElementById('registerForm');
      const switchLink = document.getElementById('switchLink');
      
      if (isLogin) {
        loginForm.style.display = 'none';
        registerForm.style.display = 'block';
        switchLink.textContent = 'Ou deja ena enn kont lor PROTOK, klik ici pou login';
        document.getElementById('passwordResetLinkContainer').style.display = 'block';
        document.getElementById('registrationSubtitle').style.display = 'block';
        isLogin = false;
      } else {
        loginForm.style.display = 'block';
        registerForm.style.display = 'none';
        switchLink.textContent = "Ou pena kont lor Protok?, kre enn, li gratis";
        document.getElementById('passwordResetLinkContainer').style.display = 'none';
        document.getElementById('registrationSubtitle').style.display = 'none';
        isLogin = true;
      }
    });

    // Toggle password visibility
    function togglePassword(inputId, button) {
      const input = document.getElementById(inputId);
      if (input.type === 'password') {
        input.type = 'text';
        button.textContent = '🙈';
      } else {
        input.type = 'password';
        button.textContent = '👁️';
      }
    }

    // Refresh CAPTCHA
    function refreshCaptcha() {
      // Use AJAX to refresh CAPTCHA without page reload
      const xhr = new XMLHttpRequest();
      xhr.open('GET', 'index.php?refresh_captcha=1', true);
      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          try {
            const response = JSON.parse(xhr.responseText);
            const captchaLabel = document.querySelector('label[for="captcha_answer"]');
            if (captchaLabel) {
              // Update the CAPTCHA question in the label (preserve the refresh button)
              const currentHtml = captchaLabel.innerHTML;
              // Extract the refresh button HTML
              const buttonMatch = currentHtml.match(/(<button[^>]*>🔄<\/button>)/);
              const buttonHtml = buttonMatch ? buttonMatch[1] : '';
              // Update the label with new question
              captchaLabel.innerHTML = 'CAPTCHA: ' + response.question + ' = ? ' + buttonHtml;
            }
            // Clear the input
            const captchaInput = document.getElementById('captcha_answer');
            if (captchaInput) {
              captchaInput.value = '';
            }
          } catch(e) {
            console.error('CAPTCHA refresh error:', e);
            // If AJAX fails, fall back to page reload
            window.location.href = 'index.php?refresh_captcha=1';
          }
        } else if (xhr.readyState === 4 && xhr.status !== 200) {
          // If AJAX fails, fall back to page reload
          window.location.href = 'index.php?refresh_captcha=1';
        }
      };
      xhr.send();
    }

    // Ensure captcha input works properly on mobile devices
    document.addEventListener('DOMContentLoaded', function() {
      const captchaInput = document.getElementById('captcha_answer');
      if (captchaInput) {
        // Ensure numeric keyboard on mobile
        captchaInput.addEventListener('input', function(e) {
          // Only allow numeric input
          this.value = this.value.replace(/[^0-9]/g, '');
          // Limit to max 20
          if (parseInt(this.value) > 20) {
            this.value = '20';
          }
        });
        
        // Handle paste events
        captchaInput.addEventListener('paste', function(e) {
          e.preventDefault();
          const paste = (e.clipboardData || window.clipboardData).getData('text');
          const numericValue = paste.replace(/[^0-9]/g, '');
          const limitedValue = parseInt(numericValue) > 20 ? '20' : numericValue;
          this.value = limitedValue;
        });
      }
    });

    // Service Worker Registration for PWA
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function() {
        navigator.serviceWorker.register('/sw.js').then(function(registration) {
          console.log('ServiceWorker registration successful');
        }, function(err) {
          console.log('ServiceWorker registration failed: ', err);
        });
      });
    }

    // Prompt user to install PWA
    let deferredPrompt;
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      deferredPrompt = e;
      // Show custom install button or notification
      console.log('PWA install prompt available');
    });

    // Password Reset Functionality
    function showPopup(popupId) {
      document.getElementById(popupId).classList.add('active');
    }

    function closePopup(popupId) {
      document.getElementById(popupId).classList.remove('active');
    }

    // Forgot Password Link (from registration form)
    document.getElementById('forgotPasswordLinkReg')?.addEventListener('click', function(e) {
      e.preventDefault();
      showPopup('resetVerifyPopup');
    });

    // Close popups on overlay click
    document.querySelectorAll('.popup-overlay').forEach(overlay => {
      overlay.addEventListener('click', function(e) {
        if (e.target === overlay) {
          overlay.classList.remove('active');
        }
      });
    });

    // Password Reset Verification Form
    document.getElementById('resetVerifyForm')?.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const email = document.getElementById('reset_email').value.trim();
      const phone = document.getElementById('reset_phone').value.trim();
      const errorDiv = document.getElementById('resetVerifyError');
      
      errorDiv.style.display = 'none';
      
      // Validate
      if (!email || !phone) {
        errorDiv.textContent = 'Please enter both email and phone number';
        errorDiv.style.display = 'block';
        return;
      }
      
      // Send verification request
      const formData = new FormData();
      formData.append('reset_verify', '1');
      formData.append('email', email);
      formData.append('phone', phone);
      
      fetch('index.php', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          closePopup('resetVerifyPopup');
          showPopup('newPasswordPopup');
        } else {
          errorDiv.textContent = data.message || 'Verification failed';
          errorDiv.style.display = 'block';
        }
      })
      .catch(error => {
        errorDiv.textContent = 'Error: ' + error;
        errorDiv.style.display = 'block';
      });
    });

    // New Password Form
    document.getElementById('newPasswordForm')?.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const newPassword = document.getElementById('new_password').value;
      const errorDiv = document.getElementById('newPasswordError');
      
      errorDiv.style.display = 'none';
      
      // Validate password length
      if (newPassword.length < 6) {
        errorDiv.textContent = 'Password must be at least 6 characters';
        errorDiv.style.display = 'block';
        return;
      }
      
      // Send password reset request
      const formData = new FormData();
      formData.append('reset_password', '1');
      formData.append('new_password', newPassword);
      
      fetch('index.php', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          closePopup('newPasswordPopup');
          showPopup('successPopup');
          
          // Auto-login and redirect to dashboard after 2 seconds
          setTimeout(() => {
            window.location.href = 'dashboard.php';
          }, 2000);
        } else {
          errorDiv.textContent = data.message || 'Failed to reset password';
          errorDiv.style.display = 'block';
        }
      })
      .catch(error => {
        errorDiv.textContent = 'Error: ' + error;
        errorDiv.style.display = 'block';
      });
    });
  </script>
</body>
</html>

