<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ATD Wikipedia App</title>
<style>
/* Full-screen background image */
body {
margin: 0;
padding: 0;
height: 100vh;
background-image: url('../assets/colorful-abstract-background-with-
gradient-vector.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Full-screen black screen */
#black-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 0 20px 10px #6a0dad, inset 0 0 20px 10px #6a0dad; /*
Purple glow around edges */
overflow: hidden;
transition: opacity 1s ease, filter 4s ease; /* Added transition for
filter (blur) */
}
/* Loading bar container with glowing purple outline */
#loading-bar-container {
position: absolute;
top: 75%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px 5px #6a0dad; /* Purple glowing outline */
}
/* Actual loading bar */
#loading-bar {
height: 100%;
width: 0;
background-color: #9b59b6;
border-radius: 10px;
transition: width 0.1s ease-in-out;
}
/* Loading percentage text */
#loading-text {
position: absolute;
top: calc(75% - 60px);
left: 50%;
transform: translateX(-50%);
font-size: 36px;
color: #6a0dad;
font-weight: bold;
z-index: 1001;
}
/* Enlarged logo with adjusted positioning */
#logo {
width: 300px; /* Increased width for a larger logo */
height: auto;
margin-bottom: 10px; /* Reduced bottom margin */
margin-top: -20px; /* Added negative margin to move it up */
}
/* Random message text area */
#random-message {
position: absolute;
top: calc(60% - 20px); /* Adjusted to be more between the logo and
percentage */
left: 50%;
transform: translateX(-50%);
font-size: 32px; /* Increased font size for larger messages */
color: #ffffff;
font-weight: 500;
opacity: 0;
transition: opacity 1s ease;
text-align: center;
z-index: 1001;
}
/* Main content of the app */
#app-content {
display: none;
text-align: center;
padding: 20px;
}
/* Particle animation */
.particle {
position: absolute;
bottom: -10px;
width: 8px; /* Smaller size */
height: 8px; /* Smaller size */
border-radius: 50%;
animation: floatUp 3s linear infinite, shineGlow 3s ease-in-out
infinite;
}
/* Animation for floating up */
@keyframes floatUp {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(-100vh) scale(0.5);
opacity: 0;
}
}
/* Animation for shining and glowing effect */
@keyframes shineGlow {
0% {
box-shadow: 0 0 5px #6a0dad, 0 0 10px #6a0dad, 0 0 15px #6a0dad;
opacity: 1;
}
50% {
box-shadow: 0 0 20px #D8A0D9, 0 0 30px #D8A0D9, 0 0 50px #D8A0D9;
opacity: 0.7;
}
100% {
box-shadow: 0 0 5px #6a0dad, 0 0 10px #6a0dad, 0 0 15px #6a0dad;
opacity: 1;
}
}
</style>
</head>
<body>
<!-- Black screen overlay -->
<div id="black-screen">
<!-- Logo in the center -->
<img id="logo" src="../assets/ATD.png" alt="ATD Logo">
<!-- Random message text area -->
<div id="random-message">Loading message...</div>
<!-- Loading bar container -->
<div id="loading-bar-container">
<div id="loading-bar"></div>
</div>
<!-- Loading percentage text -->
<div id="loading-text">0%</div>
</div>
<!-- Main content of the app -->
<div id="app-content" style="display: none;">
<h1>Welcome to ATD Wikipedia App!</h1>
</div>
<script>
// Array of random messages
const messages = [
"Initializing systems...",
"Gathering resources...",
"Connecting to the database...",
"Loading user preferences...",
"Optimizing performance...",
"Fetching latest data...",
"Finalizing setup...",
"Preparing interface...",
"Almost there...",
"Ready to launch!"
];
let messageIndex = 0;
const randomMessageElement = document.getElementById('random-message');
function showNextMessage() {
randomMessageElement.style.opacity = '0'; // Fade out
setTimeout(() => {
randomMessageElement.innerText = messages[messageIndex];
randomMessageElement.style.opacity = '1'; // Fade in
messageIndex = (messageIndex + 1) % messages.length;
}, 1000); // 1-second fade out
}
// Run message transition every 2 seconds
setInterval(showNextMessage, 2000);
showNextMessage(); // Show first message immediately
// Simulate loading progress with visible percentage
let loadingBar = document.getElementById('loading-bar');
let loadingText = document.getElementById('loading-text');
let progress = 0;
// Update the loading bar and percentage every 50ms
let interval = setInterval(() => {
if (progress < 100) {
progress++;
loadingBar.style.width = progress + '%'; // Increase the width of
the loading bar
loadingText.innerText = progress + '%'; // Update the displayed
percentage
} else {
clearInterval(interval); // Stop the interval once the loading is
complete
// When the bar reaches 100%, show the "Ready to Launch!" message
randomMessageElement.innerText = "Ready to launch!";
randomMessageElement.style.opacity = '1'; // Ensure it's visible
}
}, 50); // Adjust the speed by changing the interval timing
// After the loading completes (about 5 seconds for this duration)
setTimeout(() => {
// Select elements to fade out
const elementsToFade = [
document.getElementById('loading-bar-container'),
document.getElementById('loading-text'),
document.getElementById('logo'),
document.getElementById('random-message')
];
// Add blur effect and fade out loading elements simultaneously
const blackScreen = document.getElementById('black-screen');
blackScreen.style.transition = 'filter 4s ease, opacity 1s ease'; // Add blur
and opacity transitions
blackScreen.style.filter = 'blur(10px)'; // Start blur effect
elementsToFade.forEach(element => {
element.style.transition = 'opacity 4s ease'; // Match duration to blur
effect
element.style.opacity = '0'; // Fade out elements
});
// After blur and fade out complete, hide black screen and show app content
setTimeout(() => {
blackScreen.style.transition = 'opacity 1s ease';
blackScreen.style.opacity = '0'; // Fade out black screen itself
setTimeout(() => {
blackScreen.style.display = 'none';
document.getElementById('app-content').style.display = 'block';
}, 1000); // Wait for black screen fade-out to complete
}, 4000); // Wait for blur effect to complete
}, 5000); // Wait for 5 seconds before transitioning out
// Particle creation function (Constrained to the loading screen)
function createParticlesGradually() {
const particleContainer = document.getElementById('black-screen'); // Confine
particles to the black screen
const numberOfParticles = 10; // Adjusted number of particles
setInterval(() => {
for (let i = 0; i < numberOfParticles; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// Randomly assign one of the two color combinations
const colorCombo = Math.random() > 0.5 ?
['#ff0000', '#808080'] : // Red and grey
['#D8A0D9', '#6a0dad']; // Lavender and dark purple
particle.style.backgroundColor = colorCombo[Math.floor(Math.random() *
colorCombo.length)];
const xPos = Math.random() * window.innerWidth;
const size = Math.random() * 8 + 5; // Smaller particle size between
5px and 13px
particle.style.left = xPos + 'px';
particle.style.width = size + 'px';
particle.style.height = size + 'px';
particleContainer.appendChild(particle);
// Remove particles after animation
setTimeout(() => {
particle.remove();
}, 3000); // Remove after 3 seconds
}
}, 150); // Adjust interval to prevent overloading
}
createParticlesGradually(); // Start particle animation
</script>
</body>
</html>
