<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fleaks Request</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <style>
    body {
      background-color: black;
      color: white;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      font-family: Arial, sans-serif;
    }
    h1 {
      margin-bottom: 20px;
      font-size: 2.5em;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      display: inline-block;
      position: relative;
      transition: transform 0.2s ease;
    }
    h1 span {
      display: inline-block;
      transition: transform 0.2s ease;
    }
    form {
      width: 100%;
      max-width: 400px;
      text-align: center;
      z-index: 10;
    }
    img {
      margin-top: 20px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }
    img:hover {
      transform: scale(1.1);
    }
    .input-effect {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-align: left;
    }
    .input-effect:focus {
      transform: scale(1.05);
      outline: none;
    }
    .glow {
      animation: glow 0.5s forwards;
    }
    @keyframes glow {
      0% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
      }
      50% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 1);
      }
      100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
      }
    }
    .snowflake {
      position: absolute;
      top: -10px;
      color: white;
      font-size: 1em;
      opacity: 0.8;
      pointer-events: none;
      animation: fall linear infinite;
    }
    @keyframes fall {
      to {
        transform: translateY(100vh);
      }
    }
    .made-by {
      position: absolute;
      top: 10px;
      right: 10px;
      color: white;
      text-decoration: none;
      font-size: 14px;
    }
    .made-by:hover {
      text-decoration: underline;
    }
    .notification {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0, 123, 255, 0.8);
      color: white;
      padding: 10px 20px;
      border-radius: 5px;
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: 100;
    }
    .notification.show {
      opacity: 1;
    }
    .shake {
      animation: shake 0.5s;
    }
    @keyframes shake {
      0% {
        transform: translateX(0);
      }
      25% {
        transform: translateX(-5px);
      }
      50% {
        transform: translateX(5px);
      }
      75% {
        transform: translateX(-5px);
      }
      100% {
        transform: translateX(0);
      }
    }
    .notification.error {
      background-color: rgba(255, 0, 0, 0.8);
    }
    .gold-button {
      position: absolute;
      top: 10px;
      left: 10px;
      background: linear-gradient(45deg, #ffd700, #ffa500, #ffb300);
      color: black;
      padding: 12px 24px;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
      animation: glow 2s ease-in-out infinite;
    }
    #requestType {
      width: 20%;
      margin: 0 auto;
    }
    .rgb-glow {
      animation: rgbGlow 3s forwards;
    }
    @keyframes rgbGlow {
      0% {
        box-shadow: 0 0 10px red, 0 0 20px green, 0 0 30px blue;
      }
      50% {
        box-shadow: 0 0 20px red, 0 0 30px green, 0 0 40px blue;
      }
      100% {
        box-shadow: 0 0 10px red, 0 0 20px green, 0 0 30px blue;
      }
    }
    .message-input-glow:focus {
      box-shadow: 0 0 10px rgba(255, 215, 0, 1);
    }
  </style>
</head>
<body oncontextmenu="return false;" oncopy="return false;">
  <a href="https://discord.com/users/1131745793628442624" class="made-by" target="_blank">made by flanch</a>
  <h1 id="fleaksText">
    <span>f</span><span>l</span><span>e</span><span>a</span><span>k</span><span>s</span>
  </h1>
  <form onsubmit="sendMessage(event)">
    <div class="mb-3">
      <label for="requestType" class="form-label"></label>
      <select class="form-control input-effect" id="requestType" required>
        <option value="">Select</option>
        <option value="app">App</option>
        <option value="game">Game</option>
      </select>
    </div>
    <div class="mb-3">
      <label for="messageInput" class="form-label">Enter your request</label>
      <input type="text" class="form-control input-effect" id="messageInput" required>
    </div>
    <button type="submit" class="btn btn-primary" id="submitButton">Submit</button>
  </form>
  <a href="https://discord.gg/eMs3q29yzK" target="_blank">
    <img src="https://static.vecteezy.com/system/resources/previews/006/892/622/non_2x/discord-logo-icons-editorial-collection-free-vector.jpg" alt="Discord Logo" width="100">
  </a>
  <button class="gold-button" onclick="window.location.href='http://fleaksvip.ct.ws/'">VIP</button>
  <div class="notification" id="notification"></div>
  <script>
    function createSnowflake() {
      const snowflake = document.createElement('div');
      snowflake.className = 'snowflake';
      snowflake.innerHTML = '❄';
      snowflake.style.left = Math.random() * 100 + 'vw';
      snowflake.style.fontSize = Math.random() * 1.5 + 0.5 + 'em';
      snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
      snowflake.style.opacity = Math.random();
      document.body.appendChild(snowflake);
      snowflake.addEventListener('animationend', () => {
        snowflake.remove();
      });
    }

    setInterval(() => {
      const numberOfSnowflakes = Math.floor(Math.random() * 1) + 1;
      for (let i = 0; i < numberOfSnowflakes; i++) {
        createSnowflake();
      }
    }, 500);

    let submittedMessages = JSON.parse(localStorage.getItem('submittedMessages')) || [];
    let cooldownEndTime = localStorage.getItem('cooldownEndTime') ? parseInt(localStorage.getItem('cooldownEndTime')) : 0;

    function updateCooldownDisplay() {
      const submitButton = document.getElementById('submitButton');
      const currentTime = Date.now();
      if (currentTime < cooldownEndTime) {
        const remainingCooldown = Math.ceil((cooldownEndTime - currentTime) / 1000);
        submitButton.innerText = `Cooldown... (${remainingCooldown}s)`;
        submitButton.disabled = true;
      } else {
        submitButton.innerText = 'Submit';
        submitButton.disabled = false;
      }
    }

    updateCooldownDisplay();

    async function sendMessage(ev) {
      ev.preventDefault();
      const requestType = document.getElementById('requestType').value;
      const messageContent = document.getElementById('messageInput').value;
      const notification = document.getElementById('notification');

      if (submittedMessages.includes(messageContent)) {
        notification.innerText = 'Request already submitted!';
        notification.classList.add('show', 'shake', 'error');
        setTimeout(() => {
          notification.classList.remove('show', 'shake', 'error');
        }, 3000);
        return;
      }

      const currentTime = Date.now();
      if (currentTime < cooldownEndTime) {
        updateCooldownDisplay();
        return;
      }

      let cooldownTime = 10;
      cooldownEndTime = currentTime + cooldownTime * 1000;
      localStorage.setItem('cooldownEndTime', cooldownEndTime);

      const interval = setInterval(() => {
        updateCooldownDisplay();
        if (Date.now() >= cooldownEndTime) {
          clearInterval(interval);
        }
      }, 1000);

      const webhookBody = {
        content: `${requestType.toUpperCase()}: ${messageContent}`,
      };

      const webhookUrl = 'https://discord.com/api/webhooks/1318206235949924482/LBFyFffhUnKMFKIsVAir92RXD5KAIDGMqmGfQtpafss_vtMDY-APrlrdH_VJMr_7jAZE';

      try {
        const response = await fetch(webhookUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(webhookBody),
        });

        if (response.ok) {
          notification.innerText = 'Request submitted successfully!';
          notification.classList.add('show');
          setTimeout(() => {
            notification.classList.remove('show');
          }, 3000);
          submittedMessages.push(messageContent);
          localStorage.setItem('submittedMessages', JSON.stringify(submittedMessages));
        } else {
          console.error("Error with webhook submission:", response.statusText);
          notification.innerText = 'Error. Please try again later.';
          notification.classList.add('show', 'shake');
          setTimeout(() => {
            notification.classList.remove('show', 'shake');
          }, 3000);
        }
      } catch (error) {
        console.error("Fetch error:", error);
        notification.innerText = 'Network error. Please try again later.';
        notification.classList.add('show', 'shake');
        setTimeout(() => {
          notification.classList.remove('show', 'shake');
        }, 3000);
      }
    }

    const fleaksText = document.getElementById('fleaksText');
    const fleaksLetters = fleaksText.querySelectorAll('span');
    fleaksText.addEventListener('mousemove', (e) => {
      const rect = fleaksText.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;
      const letterWidth = rect.width / fleaksLetters.length;
      const letterIndex = Math.floor(x / letterWidth);

      fleaksLetters.forEach((letter, index) => {
        if (index === letterIndex) {
          letter.style.transform = `translateX(${(x / letterWidth - 0.5) * 20}px)`;
        } else {
          letter.style.transform = 'translateX(0)';
        }
      });
      fleaksText.style.transform = `translateX(${(x / rect.width - 0.5) * 20}px)`;
    });

    fleaksText.addEventListener('mouseleave', () => {
      fleaksLetters.forEach((letter) => {
        letter.style.transform = 'translateX(0)';
      });
      fleaksText.style.transform = 'translateX(0)';
    });

    setInterval(() => {
      fleaksLetters.forEach((letter) => {
        letter.style.transform = 'translateX(0)';
      });
      fleaksText.style.transform = 'translateX(0)';
    }, 2000);

    const requestType = document.getElementById('requestType');
    requestType.addEventListener('focus', () => {
      requestType.classList.add('rgb-glow');
    });
    requestType.addEventListener('blur', () => {
      requestType.classList.remove('rgb-glow');
    });

    document.getElementById('messageInput').classList.add('message-input-glow');
  </script>
</body>
</html>
