<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study USA Welcome</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
/* Apply Inter font family to the body */
body {
font-family: 'Inter', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #142142; /* Changed background color */
overflow: hidden; /* Prevent scroll during animations */
}
/* Digital sign specific styles - Removed background, shadow, and text-shadow */
.digital-sign {
font-family: 'Press Start 2P', cursive; /* A pixelated font for digital look */
color: #b1ddf6; /* Changed text color */
}
/* Door animation styles */
.door-half {
transition: transform 2s ease-in-out, opacity 2s ease-in-out;
}
.door-left-open {
transform: translateX(-100%);
opacity: 0;
}
.door-right-open {
transform: translateX(100%);
opacity: 0;
}
/* Fade out animation for initial scene */
.initial-scene-fade-out {
opacity: 0;
transition: opacity 1.5s ease-in-out;
}
/* Marquee text glow */
.marquee-char {
display: inline-block; /* Allows individual animation */
opacity: 0; /* Hidden initially */
transform: scale(0.8); /* Slightly smaller initially */
transition: opacity 0.1s ease-out, transform 0.1s ease-out; /* For sequential reveal */
text-shadow: 0 0 8px rgba(255, 255, 0, 0.7), /* Yellow glow */
0 0 15px rgba(255, 255, 0, 0.5);
color: #FFD700; /* Gold color for text */
}
/* New style for explicit space handling */
.marquee-space {
display: inline-block; /* Treat spaces as blocks */
width: 0.5em; /* Adjust space width as needed */
opacity: 0;
transition: opacity 0.1s ease-out;
}
.marquee-char.visible, .marquee-space.visible {
opacity: 1;
transform: scale(1);
}
/* Fireworks container */
.firework-container {
position: fixed; /* Fixed position to cover the whole viewport */
width: 100vw;
height: 100vh;
pointer-events: none; /* Allows clicks to pass through */
z-index: 10; /* Above other content */
top: 0;
left: 0;
opacity: 0; /* Hidden initially */
transition: opacity 1s ease-in;
}
/* Firework particle styles and animation */
.firework-particle {
width: 6px; /* Increased size of particle */
height: 6px; /* Increased size of particle */
position: absolute;
border-radius: 50%;
opacity: 0; /* Hidden initially */
transform: translate(-50%, -50%); /* Center particle on its origin */
animation: particle-explode 2.5s ease-out forwards; /* Increased duration for longer visibility */
}
@keyframes particle-explode {
0% {
transform: translate(-50%, -50%) scale(0); /* Start from center, small */
opacity: 1;
}
10% {
transform: translate(-50%, -50%) scale(1); /* Expand slightly */
opacity: 1;
}
100% {
transform: translate(calc(-50% + var(--particle-dx)), calc(-50% + var(--particle-dy))) scale(0);
opacity: 0;
}
}
/* Subtle button pulse animation */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.03);
box-shadow: 0 0 15px rgba(66, 153, 225, 0.6); /* Blue glow */
}
}
.button-pulse {
animation: pulse 2s infinite ease-in-out;
}
</style>
</head>
<body class="bg-gray-900 text-white p-4">
<div id="firework-container" class="firework-container"></div>
<div id="initial-scene" class="flex flex-col items-center justify-center p-4">
<img src="https://files.constantcontact.com/1e4ea038001/db772b79-bf9f-46e2-b3e1-4fb3d4e29be2.png" alt="Branding Placeholder" class="w-full max-w-xl h-auto rounded-lg shadow-xl mb-12">
<div class="text-white text-left mb-8 max-w-xl mx-auto space-y-4 text-lg">
<p>
Embark on your academic journey with Study USA! We're thrilled to welcome you to an exciting new chapter filled with learning, discovery, and growth.
</p>
<p>
Get ready to experience top-tier education and build lasting connections in a dynamic environment designed for your success.
</p>
</div>
<div class="relative w-full h-64 md:h-80 lg:h-96 overflow-hidden rounded-lg shadow-2xl mb-8 flex">
<div id="door-left" class="door-half flex-1 bg-gradient-to-r from-gray-500 to-gray-400 border-r-2 border-gray-600 rounded-l-lg"></div>
<div id="door-right" class="door-half flex-1 bg-gradient-to-l from-gray-500 to-gray-400 border-l-2 border-gray-600 rounded-r-lg"></div>
</div>
<div id="digital-sign" class="digital-sign text-2xl md:text-3xl lg:text-4xl mb-8 p-4 text-center w-full max-w-2xl">
Are You Ready?!
</div>
<button id="reveal-button" class="bg-red-600 hover:bg-red-700 text-white font-bold py-4 px-8 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-red-500 focus:ring-opacity-50">
Reveal
</button>
</div>
<div id="revealed-content" class="hidden flex flex-col items-center justify-center text-center p-4 max-w-2xl mx-auto opacity-0 transition-opacity duration-1000 ease-in-out">
<img src="https://files.constantcontact.com/1e4ea038001/db772b79-bf9f-46e2-b3e1-4fb3d4e29be2.png" alt="Branding Placeholder" class="w-full max-w-xl h-auto rounded-lg shadow-xl mb-12">
<h1 id="marquee-header" class="text-3xl md:text-4xl lg:text-5xl font-extrabold mb-8 relative z-20 text-center"">
</h1>
<div class="text-left space-y-4 mb-8 text-lg md:text-xl relative z-20 w-full max-w-xl">
<p>
Get ready for an unforgettable adventure! Study USA offers an unparalleled educational experience, blending rigorous academics with a vibrant campus life. You'll gain valuable knowledge, make lifelong friends, and explore new cultures.
</p>
<p>
Our programs are designed to empower you with the skills and global perspective needed to thrive in today's interconnected world. From innovative classrooms to exciting extracurricular activities, every moment is an opportunity to learn and grow.
</p>
<p>
Join a diverse community of ambitious students from around the globe. Discover your potential, broaden your horizons, and embark on a journey that will shape your future. Welcome to your new home away from home!
</p>
</div>
<button id="study-usa-button" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-5 px-10 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 relative z-20 text-xl button-pulse">
Yeeeeeaaaaaaahh We're Gonna Study in the U-S-A!
</button>
</div>
<script>
// Get references to DOM elements
const initialScene = document.getElementById('initial-scene');
const revealButton = document.getElementById('reveal-button');
const doorLeft = document.getElementById('door-left');
const doorRight = document.getElementById('door-right');
const revealedContent = document.getElementById('revealed-content');
const marqueeHeader = document.getElementById('marquee-header');
const studyUsaButton = document.getElementById('study-usa-button');
const fireworkContainer = document.getElementById('firework-container');
// Text for the marquee header with a custom line break indicator
const marqueeText = "Study USA Welcomes|You To Campus";
let fireworkInterval; // Variable to hold the interval ID for clearing
// Function to create a single firework burst
function createFireworkBurst() {
const particleColors = ['#FF0000', '#FFFFFF', '#0000FF']; // Red, White, Blue
const numParticles = 20 + Math.floor(Math.random() * 10); // 20-30 particles per burst
const explosionRadius = 90; // Increased max pixels particles travel from center for larger spread
// Random position for the firework within the upper 60% of the screen
const x = Math.random() * 80 + 10; // X position from 10% to 90%
const y = Math.random() * 60 + 5; // Y position from 5% to 65% (upper portion)
// Create particles for the burst
for (let i = 0; i < numParticles; i++) {
const particle = document.createElement('div');
particle.classList.add('firework-particle');
fireworkContainer.appendChild(particle);
const angle = Math.random() * 2 * Math.PI; // Random angle in radians
const travelDistance = explosionRadius * (0.8 + Math.random() * 0.2); // Vary travel distance
const dx = Math.cos(angle) * travelDistance;
const dy = Math.sin(angle) * travelDistance;
// Set initial position of the particle (relative to container)
particle.style.left = `${x}%`;
particle.style.top = `${y}%`;
particle.style.backgroundColor = particleColors[Math.floor(Math.random() * particleColors.length)];
// Set CSS variables for animation
particle.style.setProperty('--particle-dx', `${dx}px`);
particle.style.setProperty('--particle-dy', `${dy}px`);
particle.style.animationDelay = `${Math.random() * 0.3}s`; // Stagger particle animation slightly
// Remove particle after animation to prevent DOM bloat
particle.addEventListener('animationend', () => {
particle.remove();
});
}
}
// Event listener for the initial reveal button
revealButton.addEventListener('click', () => {
// Fade out the entire initial scene including branding image
initialScene.classList.add('initial-scene-fade-out');
// Slide open the door simultaneously
doorLeft.classList.add('door-left-open');
doorRight.classList.add('door-right-open');
// After the fade-out and door opening animation, reveal new content
setTimeout(() => {
initialScene.classList.add('hidden'); // Hide the initial scene completely
revealedContent.classList.remove('hidden'); // Show the new content container
revealedContent.classList.add('opacity-100'); // Fade in the new content
// Animate marquee text character by character
let delay = 0;
for (let i = 0; i < marqueeText.length; i++) {
const char = marqueeText[i];
let spanElement;
if (char === ' ') {
spanElement = document.createElement('span');
spanElement.innerHTML = ' '; // Use non-breaking space for explicit spacing
spanElement.classList.add('marquee-space'); // Add a class for space styling
} else if (char === '|') { // Handle the line break
spanElement = document.createElement('br');
// No delay added for a line break, and no 'visible' class
}
else {
spanElement = document.createElement('span');
spanElement.textContent = char;
spanElement.classList.add('marquee-char');
}
marqueeHeader.appendChild(spanElement);
// Only apply visible class timeout if it's not a line break
if (char !== '|') {
setTimeout(() => {
spanElement.classList.add('visible');
}, delay);
delay += 50; // Delay for each character
}
}
// Show and start constant fireworks after marquee text starts
fireworkContainer.classList.add('opacity-100'); // Fade in firework container
// Start continuous fireworks
fireworkInterval = setInterval(createFireworkBurst, 700); // Create a new burst every 0.7 seconds
}, 2000); // Wait for 2 seconds (1.5s fade-out + 0.5s for door to open fully)
});
// Event listener for the final "Study in the U-S-A!" button
studyUsaButton.addEventListener('click', () => {
console.log("Yeeeeeaaaaaaahh We're Gonna Study in the U-S-A! Button Clicked!");
// You might want to stop fireworks here if navigating away or showing a final message
// clearInterval(fireworkInterval);
});
</script>
</body>
</html>