grapes-andrewdingus
Version:
GRAPES OS static site — CDN-ready via unpkg
243 lines (211 loc) • 6.26 kB
HTML
<html lang="en">
<head>
<!-- <link rel="dns-prefetch" href="https://universal.wgplayer.com" />
-->
<meta charset="UTF-8" />
<meta
property="og:image"
content="https://grapes-os.org/assets/img/grapes_mascot.png"
/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="GRAPES OS" />
<meta
name="description"
content="learn and have fun with this interactive experience"
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" />
<title>Loading — GRAPES OS</title>
<link rel="icon" type="image/x-icon" href="../assets/img/grapes_mascot.png" />
<link rel="mask-icon" type="" href="../assets/img/grapes_mascot.png" color="#111" />
<noscript
>Your browser doesn't have JavaScript enabled. Please enable JavaScript or
switch to a browser that supports it.</noscript
>
<style>
/* Loading Page Styles */
.loading-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #6e8efb, #a777e3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease-out;
}
.duck-loader {
width: 100px;
height: 100px;
position: relative;
margin-bottom: 30px;
}
.duck-body {
width: 80px;
height: 60px;
background-color: #ffd700;
border-radius: 50% 50% 40% 40%;
position: absolute;
top: 20px;
left: 10px;
}
.duck-head {
width: 50px;
height: 50px;
background-color: #ffd700;
border-radius: 50%;
position: absolute;
top: 0;
left: 40px;
}
.duck-beak {
width: 20px;
height: 10px;
background-color: #ffa500;
border-radius: 50%;
position: absolute;
top: 25px;
left: 80px;
transform: rotate(15deg);
}
.duck-eye {
width: 8px;
height: 8px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 15px;
left: 65px;
}
.loading-text {
color: white;
font-family: Arial, sans-serif;
font-size: 24px;
margin-top: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.progress-bar {
width: 200px;
height: 8px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 4px;
margin-top: 20px;
overflow: hidden;
}
.progress {
height: 100%;
width: 0%;
background-color: white;
border-radius: 4px;
animation: load 3s ease-in-out infinite;
}
@keyframes load {
0% {
width: 0%;
}
50% {
width: 100%;
}
100% {
width: 0%;
}
}
.bubbles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.bubble {
position: absolute;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
animation: float linear infinite;
}
@keyframes float {
to {
transform: translateY(-100vh);
opacity: 0;
}
}
.hidden {
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>
<!-- Loading Screen -->
<div class="loading-container" id="loadingScreen">
<div class="bubbles" id="bubbles"></div>
<div class="duck-loader">
<div class="duck-body"></div>
<div class="duck-head"></div>
<div class="duck-beak"></div>
<div class="duck-eye"></div>
</div>
<div class="loading-text">Quacking up the fun...</div>
<div class="progress-bar">
<div class="progress"></div>
</div>
</div>
<!-- Your main content would go here -->
<div id="mainContent" style="display: none; width:100%; height:100vh;">
<iframe
id="gameFrame"
style="width:100%; height:100%; border:none;"
></iframe>
</div>
<script>
// Create bubbles
function createBubbles() {
const bubblesContainer = document.getElementById("bubbles");
const bubbleCount = 20;
for (let i = 0; i < bubbleCount; i++) {
const bubble = document.createElement("div");
bubble.classList.add("bubble");
// Random size between 5 and 20px
const size = Math.random() * 15 + 5;
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
// Random position
bubble.style.left = `${Math.random() * 100}%`;
bubble.style.bottom = `-${size}px`;
// Random animation duration between 5 and 15s
const duration = Math.random() * 10 + 5;
bubble.style.animationDuration = `${duration}s`;
// Random delay
bubble.style.animationDelay = `${Math.random() * 5}s`;
bubblesContainer.appendChild(bubble);
}
}
// Simulate loading completion
function simulateLoad() {
const params = new URLSearchParams(location.search);
const title = params.get("title");
// 👇 IMPORTANT: load the SAME route Firebase used
const gameUrl = title ? `index.html?title=${encodeURIComponent(title)}` : "index.html";
setTimeout(() => {
document.getElementById("loadingScreen").classList.add("hidden");
const iframe = document.getElementById("gameFrame");
iframe.src = gameUrl; // ✅ THIS matches your working system
document.getElementById("mainContent").style.display = "block";
setTimeout(() => {
document.getElementById("loadingScreen").style.display = "none";
}, 500);
}, 2000);
}
// Initialize
window.addEventListener("DOMContentLoaded", () => {
createBubbles();
simulateLoad();
});
</script>
</body>
</html>