

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CHALLAN BOT</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(to right, #2c5364, #203a43, #0f2027);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      min-height: 100vh;
      padding: 40px 20px;
      margin: 0;
    }

    h1 {
      font-family: 'Orbitron', sans-serif;
      color: #00f0ff;
      /* text-shadow: 0 0 10px #00f0ff, 0 0 20px #00f0ff, 0 0 30px #00f0ff; */
      /* animation: flicker 2s infinite; */
      text-transform: uppercase;
      letter-spacing: 2px;
      text-align: center;
      margin-bottom: 30px;
      font-size: clamp(24px, 6vw, 48px);
    }

    form {
      background: #fff;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
      margin-bottom: 30px;
      width: 100%;
      max-width: 500px;
      box-sizing: border-box;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: #333;
    }

    input[type="text"],
    input[type="password"],
    input[type="file"],
    button {
      width: 100%;
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-sizing: border-box;
      font-size: 16px;
    }

    button {
      background-color: #28a745;
      color: white;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    button:disabled {
      background-color: #ccc;
      cursor: not-allowed;
    }

    button:hover:not(:disabled) {
      background-color: #218838;
    }

    h2 {
      color: #fff;
      text-align: center;
      margin-bottom: 15px;
      font-size: 1.4em;
    }

    @keyframes flicker {
      0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
      }
      20%, 22%, 24%, 55% {
        opacity: 0.4;
      }
    }

    /* Small devices */
    @media (max-width: 480px) {
      form {
        padding: 20px;
      }
      h2 {
        font-size: 1.2em;
      }
      button {
        font-size: 14px;
      }
    }

    /* Tablets */
    @media (min-width: 481px) and (max-width: 768px) {
      form {
        padding: 22px;
      }
    }

    /* Desktops */
    @media (min-width: 1024px) {
      body {
        padding: 60px 20px;
      }
    }
  </style>
</head>
<body>
  <h1>🤖 CHALLAN BOT</h1>

  <form id="uploadForm" action="/" method="post" enctype="multipart/form-data">
    <label for="username">ICEGATE ID:</label>
    <input type="text" name="username" id="username" required>

    <label for="password">Password:</label>
    <input type="password" name="password" id="password" required>

    <label for="excel_file">Excel File:</label>
    <input type="file" name="excel_file" id="excel_file" accept=".xlsx" required>

    <!-- <label for="required_files">Required Documents:</label>
    <input type="file" name="required_files" id="required_files" multiple required> -->

    <button type="submit" id="start_process_btn">Start Process</button>
  </form>
  <script>
    
    // Basic form validation
    document.getElementById('uploadForm').addEventListener('submit', function (event) {
      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();

      if (!username || !password) {
        alert('Username and Password cannot be empty.');
        event.preventDefault();
      }
    });

  </script>
</body>
</html>
