<!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 location</h2>
<input type="text" id="location" placeholder="Enter location" />
<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</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>