HTMLify

Hik
Views: 429 | Author: amar
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Weather Checker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #111;
      color: white;
      padding: 20px;
    }
    #city-input, #loading-screen, #final-loading-screen, #weather-box {
      display: none;
      margin-top: 30px;
    }
    #progress-container {
      width: 80%;
      max-width: 400px;
      background: #333;
      border-radius: 10px;
      margin: 20px auto;
      height: 20px;
      overflow: hidden;
    }
    #progress-bar, #final-progress-bar {
      width: 0%;
      height: 100%;
      background: limegreen;
      border-radius: 10px;
      transition: width 0.3s linear;
    }
    .btn {
      padding: 12px 20px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      border-radius: 8px;
      font-weight: bold;
      width: 85%;
      max-width: 300px;
      display: block;
      margin: 15px auto;
      transition: all 0.3s ease-in-out;
    }
    .btn-primary {
      background: #007bff;
      color: white;
      box-shadow: 0px 4px 10px rgba(0, 123, 255, 0.4);
    }
    .btn-primary:hover {
      background: #0056b3;
    }
    .btn-danger {
      background: red;
      color: white;
      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
    }
    .btn-danger:hover {
      background: darkred;
    }
    .btn-follow {
      background: #ff007f;
      color: white;
      box-shadow: 0px 4px 10px rgba(255, 0, 127, 0.4);
    }
    .btn-follow:hover {
      background: #cc0066;
    }
    input {
      padding: 12px;
      font-size: 16px;
      border-radius: 8px;
      width: 85%;
      max-width: 300px;
      text-align: center;
      border: 2px solid #007bff;
      background: #222;
      color: white;
    }
    .popup {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #222;
      color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.2);
      text-align: center;
      width: 320px;
    }
    .close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 20px;
      position: absolute;
      top: 10px;
      right: 15px;
      cursor: pointer;
    }
    .gif-container img {
      width: 100%;
      border-radius: 8px;
    }
    /* Style for the weather sticker */
    .weather-sticker {
      width: 50px;
      height: 50px;
      margin-top: 15px;
    }
  </style>
</head>
<body>
  <h1>Weather Checker</h1>

  <div id="city-input">
    <h2>Enter Your City</h2>
    <input type="text" id="location" placeholder="Enter city..." />
    <button class="btn btn-primary" id="check-btn" onclick="startFakeLoading()">Check Weather</button>
  </div>

  <div id="loading-screen">
    <h2>Checking weather data...</h2>
    <div id="progress-container">
      <div id="progress-bar"></div>
    </div>
    <p id="loading-text">Initializing...</p>
  </div>

  <div id="instagram-popup" class="popup">
    <h2>One Last Step</h2>
    <p>Follow me on Instagram to unlock the weather results!</p>
    <button class="btn btn-follow" onclick="redirectToInstagram()">Follow on Instagram</button>
    <button class="btn btn-danger" onclick="showBrokenPopup()">✖ Close</button>
  </div>

  <div id="broken-popup" class="popup">
    <button class="close-btn" onclick="backToInstagramPopup()">✖</button>
    <div class="gif-container">
      <img src="https://i.kym-cdn.com/photos/images/original/002/738/959/060.gif" alt="Broken Button GIF" />
    </div>
  </div>

  <div id="final-loading-screen">
    <h2>Finalizing Data...</h2>
    <div id="progress-container">
      <div id="final-progress-bar"></div>
    </div>
    <p id="final-loading-text">Processing data...</p>
  </div>

  <div id="weather-box">
    <button class="btn btn-primary" id="search-btn" onclick="redirectToWeather()">Show Weather</button>
    <!-- Moved Weather Sticker Here -->
    <img src="https://img.icons8.com/fluency/48/000000/sun.png" alt="Weather Sticker" class="weather-sticker" />
  </div>

  <script>
    document.getElementById("city-input").style.display = "block";

    // First Loading Screen: Sequential messages (order preserved)
    const messages = [
      "Boiling 3 eggs... one started screaming.",
      "Scraping the trash bin... found a deleted 76.jpg. It reappeared.",
      "Predicting your future... error: no future detected.",
      "Downloading past weather data... found records for 2099 and 1856. Neither match reality.",
      "Adjusting gravity settings... wait, why do we have access?"
    ];
    // Total time for first loading in milliseconds (e.g., 10 seconds)
    const firstLoadingDuration = 10000;
    // Calculate interval based on number of messages
    const firstInterval = firstLoadingDuration / messages.length;
    const firstProgressIncrement = 100 / messages.length;

    function startFakeLoading() {
      const location = document.getElementById("location").value.trim();
      if (!location) {
        alert("Please enter a city name.");
        return;
      }

      document.getElementById("city-input").style.display = "none";
      document.getElementById("loading-screen").style.display = "block";

      let msgIndex = 0;
      let progress = 0;
      function updateProgress() {
        if (msgIndex < messages.length) {
          progress += firstProgressIncrement;
          document.getElementById("progress-bar").style.width = progress + "%";
          document.getElementById("loading-text").innerText = messages[msgIndex];
          msgIndex++;
          setTimeout(updateProgress, firstInterval);
        } else {
          document.getElementById("loading-screen").style.display = "none";
          document.getElementById("instagram-popup").style.display = "block";
        }
      }
      updateProgress();
    }

    function redirectToInstagram() {
      localStorage.setItem("followedOnInstagram", "true");
      window.open("https://www.instagram.com/eternalamar", "_blank");
    }

    function showBrokenPopup() {
      document.getElementById("instagram-popup").style.display = "none";
      document.getElementById("broken-popup").style.display = "block";
    }

    function backToInstagramPopup() {
      document.getElementById("broken-popup").style.display = "none";
      document.getElementById("instagram-popup").style.display = "block";
    }

    // Final Loading Screen: Sequential messages (order preserved)
    const finalMessages = [
      "Checking system logs... last recorded entry: 08:18 AM. But it’s 7:42 now.",
      "Restoring corrupted files... ‘file_8’ and ‘file_18’ keep renaming themselves.",
      "Adjusting oxygen levels... wait, who requested this?",
      "Checking for updates... server responds: ‘DO NOT UPDATE.’",
      "Saving changes... unauthorized action detected. Who else is here?"
    ];
    // Total time for final loading in milliseconds (10 seconds)
    const finalLoadingDuration = 10000;
    // Calculate interval and progress increment dynamically
    const finalInterval = finalLoadingDuration / finalMessages.length;
    const finalProgressIncrement = 100 / finalMessages.length;

    document.addEventListener("visibilitychange", function () {
      if (!document.hidden && localStorage.getItem("followedOnInstagram") === "true") {
        localStorage.removeItem("followedOnInstagram");
        document.getElementById("instagram-popup").style.display = "none";
        document.getElementById("final-loading-screen").style.display = "block";

        let msgIndex = 0;
        let progress = 0;
        function updateFinal() {
          if (msgIndex < finalMessages.length) {
            progress += finalProgressIncrement;
            document.getElementById("final-progress-bar").style.width = progress + "%";
            document.getElementById("final-loading-text").innerText = finalMessages[msgIndex];
            msgIndex++;
            setTimeout(updateFinal, finalInterval);
          } else {
            document.getElementById("final-loading-screen").style.display = "none";
            document.getElementById("weather-box").style.display = "block";
          }
        }
        updateFinal();

        // Countdown timer updated every second for final loading
        let countdown = 10;
        const countdownInterval = setInterval(function () {
          countdown--;
          if (countdown <= 0) {
            clearInterval(countdownInterval);
          }
        }, 1000);
      }
    });

    function redirectToWeather() {
      const location = document.getElementById("location").value.trim();
      window.location.href = `https://www.google.com/search?q=${encodeURIComponent(location)}+weather`;
    }
  </script>
</body>
</html>
HTMLify

Share this file:
