<!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, #instagram-popup, #broken-popup, #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 {
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 {
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;
margin: 0 auto;
position: relative;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
background: transparent;
color: white;
border: none;
font-size: 20px;
cursor: pointer;
}
.close-btn:hover {
color: red;
}
.gif-container img {
width: 250px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Weather Checker</h1>
<div id="city-input">
<h2>Enter Your Location</h2>
<input type="text" id="location" placeholder="Enter city name">
<button class="btn btn-primary" onclick="startFakeLoading()">Check Weather</button>
</div>
<div id="loading-screen">
<h2>Checking weather data...</h2>
<div id="progress-container">
<div id="progress-bar" class="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" class="progress-bar"></div>
</div>
<p><strong>Finalizing...</strong></p>
</div>
<div id="weather-box">
<button class="btn btn-primary" onclick="redirectToWeather()">Show Weather</button>
</div>
<script>
// On page load, check if the user already clicked "Follow on Instagram"
window.addEventListener("load", function() {
if (localStorage.getItem("weatherStage") === "instagramClicked") {
showFinalLoadingScreen();
} else {
document.getElementById("city-input").style.display = "block";
}
});
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 progress = 0;
const progressBar = document.getElementById("progress-bar");
const messages = [
"Checking satellite data...",
"Analyzing global temperature...",
"Processing real-time conditions...",
"Finalizing weather model..."
];
function updateProgress() {
if (progress < 100) {
progress += Math.floor(Math.random() * 10) + 10;
if (progress > 100) progress = 100;
progressBar.style.width = progress + "%";
document.getElementById("loading-text").innerText = messages[Math.floor(Math.random() * messages.length)];
setTimeout(updateProgress, 1000);
} else {
document.getElementById("loading-screen").style.display = "none";
document.getElementById("instagram-popup").style.display = "block";
}
}
updateProgress();
}
function redirectToInstagram() {
// Save state so that when the user returns the final screen is shown.
localStorage.setItem("weatherStage", "instagramClicked");
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";
}
function showFinalLoadingScreen() {
// Hide other sections and display final loading screen.
document.getElementById("city-input").style.display = "none";
document.getElementById("loading-screen").style.display = "none";
document.getElementById("instagram-popup").style.display = "none";
document.getElementById("broken-popup").style.display = "none";
document.getElementById("final-loading-screen").style.display = "block";
startFinalLoading();
}
function startFinalLoading() {
let progress = 0;
const progressBar = document.getElementById("final-progress-bar");
function updateFinalProgress() {
if (progress < 100) {
progress += Math.floor(Math.random() * 10) + 10;
if (progress > 100) progress = 100;
progressBar.style.width = progress + "%";
setTimeout(updateFinalProgress, 1000);
} else {
document.getElementById("final-loading-screen").style.display = "none";
document.getElementById("weather-box").style.display = "block";
// Clear the state so a refresh returns to the initial screen if desired.
localStorage.removeItem("weatherStage");
}
}
updateFinalProgress();
}
function redirectToWeather() {
const location = document.getElementById("location").value.trim() || "your city";
window.location.href = `https://www.google.com/search?q=${encodeURIComponent(location)}+weather`;
}
</script>
</body>
</html>