<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ZenEx Key System</title>
  <style>
    /* General Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #000;
      overflow: hidden;
      font-family: Arial, sans-serif;
      color: white;
      margin-bottom: 30px;
    }

    /* Background Particles Effect */
    .particles {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;
    }

    .particle {
      position: absolute;
      width: 2px;
      height: 10px;
      background: rgba(255, 255, 255, 0.1);
      animation: rain 2s linear infinite;
    }

    @keyframes rain {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100vh);
      }
    }

 .splash-logo {
      position: absolute;
      width: 120px;
      height: 120px;
      background-image: url("https://i.postimg.cc/Jsv4XRbh/1737483066569.png");
      background-size: cover;
      background-position: center;
      border-radius: 50%;
      animation: spin 5s linear, moveToCenter 1s ease-in-out 5s forwards, hideLogo 0.5s ease-in-out 29.5s forwards;
      margin: 20px auto;
    }

    @keyframes moveToCenter {
      0% {
        transform: translateX(-50%);
      }
      100% {
        bottom: 30%;
        transform: translate(-50%, -50%);
      }
    }

    @keyframes hideLogo {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .splash-logo {
      left: 50%;
      transform: translateX(-50%);
    }

    .splash-screen {
      display: none;
      text-align: center;
      opacity: 0;
      animation: fadeIn 1.5s ease-in-out forwards, fadeOut 1s ease-in 29.5s forwards;
      margin-bottom: 30px;
    }

    .splash-screen .content {
  position: relative;
  top: 50px; /* Moves everything down */
}

.loading-bar-container {
  margin-top: 50px; /* Further fine-tune spacing below */
}

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    @keyframes fadeOut {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .loading-bar-container {
      width: 80%;
      max-width: 400px;
      height: 10px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 5px;
      margin: 20px auto;
      overflow: hidden;
    }

    .loading-bar {
      width: 0;
      height: 100%;
      background: #4caf50;
      animation: loading 30s linear;
    }

    @keyframes loading {
      0% {
        width: 0;
      }
      100% {
        width: 100%;
      }
    }

    /* Key System UI */
    .key-system {
      display: none;
      flex-direction: column;
      align-items: center;
      text-align: center;
      animation: fadeIn 1s ease-in forwards;
    }

    .key-system-logo {
      width: 100px;
      height: 100px;
      background-image: url('https://i.postimg.cc/Jsv4XRbh/1737483066569.png');
      background-size: cover;
      background-position: center;
      margin-bottom: 20px;
    }

    .key-system-title {
      font-size: 2.5rem;
      margin-bottom: 10px;
    }

    .key-input {
      width: 80%;
      max-width: 400px;
      padding: 10px;
      margin: 15px 0;
      border: none;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      font-size: 1.2rem;
      text-align: center;
    }

    .key-input:focus {
      outline: none;
      box-shadow: 0 0 10px #4caf50;
    }

    .key-buttons {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }

    .key-button {
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.1);
      color: white;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 1rem;
    }

    .key-button:hover {
      background: #4caf50;
      color: black;
      transform: scale(1.1);
    }

    .toast {
  visibility: hidden;
  position: fixed;
  top: 20px; /* Top positioning */
  right: 20px; /* Right positioning */
  transform: translateX(0); /* Center translation removed */
  background: #444;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.5s, visibility 0.5s;
}

.toast.show {
  visibility: visible;
  opacity: 1;
}

.toast.success {
  background: #4caf50;
}

.toast.error {
  background: #f44336;
}
  </style>
</head>
<body>
  <div class="particles"></div>
  <div class="splash-logo"></div>
  <div class="splash-screen">
    <div class="content">
      <div>
        <div class="title">ZenEx Windows</div>
        <div class="loading-bar-container">
          <div class="loading-bar"></div>
        </div>
        <div class="loading-text" id="loading-text">Loading...</div>
      </div>
    </div>
  </div>

  <div class="key-system">
    <div class="key-system-logo"></div>
    <div class="key-system-title">ZenEx Key System</div>
    <input type="text" class="key-input" placeholder="Enter your key here" aria-label="Key input">
    <div class="key-buttons">
      <button class="key-button" aria-label="Get key button">Get Key</button>
      <button class="key-button" aria-label="Check key button">Check Key</button>
    </div>
  </div>

  <div class="toast" id="toast"></div>

  <script>
    // Toast Notification Function
    function showToast(message, type) {
      const toast = document.getElementById("toast");
      toast.textContent = message;
      toast.className = `toast show ${type}`;
      setTimeout(() => { toast.className = toast.className.replace("show", ""); }, 3000);
    }

    // Handle messages from WebView2
    window.chrome.webview.addEventListener('message', (event) => {
      const data = event.data;
      if (data.action === "showToast") {
        showToast(data.message, data.type);
      }
    });

    // Function to notify C# for "Get Key"
    function getKey() {
      window.chrome.webview.postMessage({ action: "get_key" });
    }

    // Function to notify C# for "Check Key"
    function checkKey() {
      const key = document.querySelector(".key-input").value.trim();
      if (!key) {
        showToast("Please enter a key to check!", "error");
        return;
      }

      // Notify C# to validate key
      window.chrome.webview.postMessage({ action: "check_key", key });
    }

    // Button Events
    document.querySelectorAll(".key-button").forEach((button, index) => {
      button.addEventListener("click", () => {
        if (index === 0) getKey(); // "Get Key"
        else checkKey(); // "Check Key"
      });
    });

    // Create particles for background
    const particleContainer = document.querySelector('.particles');
    for (let i = 0; i < 100; i++) {
      const particle = document.createElement('div');
      particle.classList.add('particle');
      particle.style.left = `${Math.random() * 100}vw`;
      particle.style.animationDelay = `${Math.random() * 2}s`;
      particleContainer.appendChild(particle);
    }

    const loadingMessages = [
    'Initializing Components...',
            'Loading Form...',
            'Getting ScriptHub...',
            'Getting API...',
            'Checking Version...',
            'Finalizing Setup...',
    ];

    const splashLogo = document.querySelector('.splash-logo');
    const splashScreen = document.querySelector('.splash-screen');
    const keySystem = document.querySelector('.key-system');
    const loadingText = document.getElementById('loading-text');

    // Show splash screen after spinning animation
    setTimeout(() => {
      splashScreen.style.display = 'block';

      // Display loading messages
      let i = 0;
      const interval = setInterval(() => {
        if (i < loadingMessages.length) {
          loadingText.textContent = loadingMessages[i];
          i++;
        } else {
          clearInterval(interval);
        }
      }, 1750);
    }, 5000);

    // Hide splash screen and show key system
    setTimeout(() => {
      splashScreen.style.display = 'none';
      keySystem.style.display = 'flex';
    }, 30000);
  </script>
</body>
</html>
