<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Season's Greetings - Christmas & New Year Celebration</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #c41e3a;
--secondary-color: #165b33;
--accent-color: #f8d568;
--dark-color: #0a2463;
--light-color: #ffffff;
--snow-color: rgba(255, 255, 255, 0.8);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
background-color: var(--dark-color);
color: var(--light-color);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Mountains of Christmas', cursive;
color: var(--light-color);
}
/* Snowfall Animation */
.snowfall {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 100;
overflow: hidden;
}
.snowflake {
position: absolute;
top: -10px;
color: var(--snow-color);
user-select: none;
animation: fall linear infinite;
font-size: 14px;
}
@keyframes fall {
to {
transform: translateY(100vh) rotate(360deg);
}
}
/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
background-color: rgba(10, 36, 99, 0.9);
backdrop-filter: blur(10px);
z-index: 1000;
transition: all 0.3s ease;
}
header.scrolled {
padding: 15px 50px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 2rem;
font-weight: 700;
color: var(--light-color);
text-decoration: none;
display: flex;
align-items: center;
gap: 10px;
}
.logo i {
color: var(--accent-color);
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
}
.nav-links a {
color: var(--light-color);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
}
.nav-links a:hover {
color: var(--accent-color);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: var(--accent-color);
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
.menu-toggle {
display: none;
background: none;
border: none;
color: var(--light-color);
font-size: 1.5rem;
cursor: pointer;
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 0 20px;
background: linear-gradient(rgba(10, 36, 99, 0.7), rgba(10, 36, 99, 0.7)), url('https://picsum.photos/seed/christmas/1920/1080.jpg');
background-size: cover;
background-position: center;
position: relative;
overflow: hidden;
}
.hero-content {
z-index: 2;
max-width: 800px;
animation: fadeInUp 1s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero h1 {
font-size: 5rem;
margin-bottom: 20px;
color: var(--light-color);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
color: var(--light-color);
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn {
padding: 12px 30px;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: none;
cursor: pointer;
font-size: 1rem;
}
.btn-primary {
background-color: var(--primary-color);
color: var(--light-color);
}
.btn-primary:hover {
background-color: #a01830;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(196, 30, 58, 0.3);
}
.btn-secondary {
background-color: transparent;
color: var(--light-color);
border: 2px solid var(--light-color);
}
.btn-secondary:hover {
background-color: var(--light-color);
color: var(--dark-color);
transform: translateY(-3px);
}
/* Countdown Section */
.countdown {
padding: 80px 20px;
background-color: var(--secondary-color);
text-align: center;
}
.countdown h2 {
font-size: 3rem;
margin-bottom: 50px;
color: var(--light-color);
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.time-unit {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 20px;
min-width: 120px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.time-unit:hover {
transform: translateY(-5px);
background-color: rgba(255, 255, 255, 0.2);
}
.time-value {
font-size: 3rem;
font-weight: 700;
color: var(--accent-color);
display: block;
margin-bottom: 10px;
}
.time-label {
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Features Section */
.features {
padding: 80px 20px;
background-color: var(--dark-color);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 3rem;
margin-bottom: 50px;
color: var(--light-color);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background-color: rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
}
.feature-card.visible {
opacity: 1;
transform: translateY(0);
}
.feature-card:hover {
transform: translateY(-10px);
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.feature-icon {
font-size: 3rem;
color: var(--accent-color);
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 1.8rem;
margin-bottom: 15px;
}
.feature-card p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
}
/* Gallery Section */
.gallery {
padding: 80px 20px;
background-color: var(--secondary-color);
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 10px;
height: 250px;
cursor: pointer;
opacity: 0;
transform: scale(0.9);
transition: all 0.5s ease;
}
.gallery-item.visible {
opacity: 1;
transform: scale(1);
}
.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.gallery-item:hover img {
transform: scale(1.1);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
display: flex;
align-items: flex-end;
padding: 20px;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay h3 {
font-size: 1.5rem;
color: var(--light-color);
}
/* Newsletter Section */
.newsletter {
padding: 80px 20px;
background: linear-gradient(rgba(10, 36, 99, 0.9), rgba(10, 36, 99, 0.9)), url('https://picsum.photos/seed/newyear/1920/600.jpg');
background-size: cover;
background-position: center;
text-align: center;
}
.newsletter-content {
max-width: 600px;
margin: 0 auto;
}
.newsletter h2 {
font-size: 3rem;
margin-bottom: 20px;
}
.newsletter p {
font-size: 1.2rem;
margin-bottom: 30px;
color: rgba(255, 255, 255, 0.9);
}
.newsletter-form {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.newsletter-form input {
flex: 1;
padding: 15px;
border: none;
border-radius: 50px;
font-size: 1rem;
background-color: rgba(255, 255, 255, 0.9);
}
.newsletter-form button {
padding: 15px 30px;
background-color: var(--primary-color);
color: var(--light-color);
border: none;
border-radius: 50px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.newsletter-form button:hover {
background-color: #a01830;
transform: translateY(-3px);
}
.form-message {
margin-top: 15px;
font-size: 0.9rem;
color: var(--accent-color);
opacity: 0;
transition: opacity 0.3s ease;
}
.form-message.show {
opacity: 1;
}
/* Footer */
footer {
padding: 50px 20px 20px;
background-color: rgba(10, 36, 99, 0.9);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.footer-column h3 {
font-size: 1.8rem;
margin-bottom: 20px;
color: var(--accent-color);
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 10px;
}
.footer-column ul li a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.footer-column ul li a:hover {
color: var(--accent-color);
}
.social-links {
display: flex;
gap: 15px;
margin-top: 20px;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
color: var(--light-color);
transition: all 0.3s ease;
}
.social-links a:hover {
background-color: var(--accent-color);
color: var(--dark-color);
transform: translateY(-3px);
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
/* Music Player */
.music-player {
position: fixed;
bottom: 30px;
left: 30px;
z-index: 1001;
background: linear-gradient(135deg, rgba(10, 36, 99, 0.95), rgba(22, 91, 51, 0.95));
backdrop-filter: blur(15px);
border: 1px solid rgba(248, 213, 104, 0.3);
border-radius: 60px;
padding: 12px 20px;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
0 0 20px rgba(248, 213, 104, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.music-player:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5),
0 0 30px rgba(248, 213, 104, 0.3);
}
.music-player.expanded {
border-radius: 20px;
padding: 15px 25px;
}
.play-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary-color), #a01830);
border: none;
color: var(--light-color);
font-size: 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(196, 30, 58, 0.4);
}
.play-btn:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(196, 30, 58, 0.6);
}
.play-btn.playing {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 5px 15px rgba(196, 30, 58, 0.4);
}
50% {
box-shadow: 0 5px 25px rgba(196, 30, 58, 0.8),
0 0 40px rgba(248, 213, 104, 0.3);
}
}
.music-info {
display: none;
flex-direction: column;
gap: 8px;
min-width: 180px;
}
.music-player.expanded .music-info {
display: flex;
}
.music-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--accent-color);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.music-title i {
margin-right: 8px;
animation: bounce 0.6s ease infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.progress-container {
display: flex;
align-items: center;
gap: 10px;
}
.progress-bar {
flex: 1;
height: 5px;
background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
cursor: pointer;
overflow: hidden;
min-width: 120px;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
border-radius: 5px;
width: 0%;
transition: width 0.1s linear;
}
.time-display {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.7);
min-width: 75px;
text-align: right;
}
.volume-control {
display: flex;
align-items: center;
gap: 8px;
}
.volume-btn {
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.volume-btn:hover {
color: var(--accent-color);
}
.volume-slider {
width: 60px;
height: 4px;
-webkit-appearance: none;
appearance: none;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 12px;
height: 12px;
background: var(--accent-color);
border-radius: 50%;
cursor: pointer;
}
.toggle-expand {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
font-size: 0.8rem;
transition: all 0.3s ease;
padding: 5px;
}
.toggle-expand:hover {
color: var(--accent-color);
}
/* Responsive Design */
@media (max-width: 768px) {
header {
padding: 15px 20px;
}
.nav-links {
position: fixed;
top: 70px;
left: 0;
width: 100%;
background-color: var(--dark-color);
flex-direction: column;
padding: 20px;
gap: 15px;
transform: translateY(-100vh);
transition: transform 0.3s ease;
}
.nav-links.active {
transform: translateY(0);
}
.menu-toggle {
display: block;
}
.hero h1 {
font-size: 3rem;
}
.countdown h2, .section-title, .newsletter h2 {
font-size: 2rem;
}
.time-value {
font-size: 2rem;
}
.newsletter-form {
flex-direction: column;
}
.music-player {
left: 15px;
bottom: 15px;
padding: 10px 15px;
}
.music-player.expanded {
padding: 12px 18px;
}
.play-btn {
width: 42px;
height: 42px;
font-size: 1rem;
}
.music-info {
min-width: 140px;
}
.progress-bar {
min-width: 80px;
}
.volume-control {
display: none;
}
}
</style>
</head>
<body>
<!-- Snowfall Animation -->
<div class="snowfall" id="snowfall"></div>
<!-- Header -->
<header id="header">
<nav>
<a href="#" class="logo">
<i class="fas fa-snowflake"></i>
Holiday Season
</a>
<ul class="nav-links" id="navLinks">
<li><a href="#home">Home</a></li>
<li><a href="#countdown">Countdown</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#newsletter">Newsletter</a></li>
</ul>
<button class="menu-toggle" id="menuToggle">
<i class="fas fa-bars"></i>
</button>
</nav>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="hero-content">
<h1>Season's Greetings</h1>
<p>Wishing you joy, peace, and happiness this Christmas and a prosperous New Year!</p>
<div class="cta-buttons">
<a href="#countdown" class="btn btn-primary">Countdown to New Year</a>
<a href="#newsletter" class="btn btn-secondary">Join Our Celebration</a>
</div>
</div>
</section>
<!-- Countdown Section -->
<section class="countdown" id="countdown">
<div class="container">
<h2>Countdown to New Year</h2>
<div class="countdown-timer" id="countdownTimer">
<div class="time-unit">
<span class="time-value" id="days">00</span>
<span class="time-label">Days</span>
</div>
<div class="time-unit">
<span class="time-value" id="hours">00</span>
<span class="time-label">Hours</span>
</div>
<div class="time-unit">
<span class="time-value" id="minutes">00</span>
<span class="time-label">Minutes</span>
</div>
<div class="time-unit">
<span class="time-value" id="seconds">00</span>
<span class="time-label">Seconds</span>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="features" id="features">
<div class="container">
<h2 class="section-title">Holiday Highlights</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-gift"></i>
</div>
<h3>Special Gifts</h3>
<p>Discover our curated collection of unique gifts for your loved ones this holiday season.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-cookie-bite"></i>
</div>
<h3>Festive Treats</h3>
<p>Indulge in delicious holiday treats and traditional recipes passed down through generations.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-music"></i>
</div>
<h3>Seasonal Music</h3>
<p>Enjoy the sounds of the season with our collection of classic and modern holiday tunes.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-tree"></i>
</div>
<h3>Decorations</h3>
<p>Transform your home into a winter wonderland with our beautiful holiday decorations.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-snowman"></i>
</div>
<h3>Winter Activities</h3>
<p>Make the most of the season with fun winter activities for the whole family.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-champagne-glasses"></i>
</div>
<h3>New Year's Eve</h3>
<p>Celebrate the arrival of the new year with spectacular events and festivities.</p>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="gallery" id="gallery">
<div class="container">
<h2 class="section-title">Holiday Moments</h2>
<div class="gallery-grid">
<div class="gallery-item">
<img src="https://picsum.photos/seed/christmas1/500/500.jpg" alt="Christmas Scene">
<div class="gallery-overlay">
<h3>Winter Wonderland</h3>
</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/seed/christmas2/500/500.jpg" alt="Christmas Decorations">
<div class="gallery-overlay">
<h3>Festive Decorations</h3>
</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/seed/christmas3/500/500.jpg" alt="Christmas Gifts">
<div class="gallery-overlay">
<h3>Gift Giving</h3>
</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/seed/christmas4/500/500.jpg" alt="Christmas Dinner">
<div class="gallery-overlay">
<h3>Holiday Feast</h3>
</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/seed/christmas5/500/500.jpg" alt="New Year Celebration">
<div class="gallery-overlay">
<h3>New Year's Eve</h3>
</div>
</div>
<div class="gallery-item">
<img src="https://picsum.photos/seed/christmas6/500/500.jpg" alt="Family Gathering">
<div class="gallery-overlay">
<h3>Family Gathering</h3>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter Section -->
<section class="newsletter" id="newsletter">
<div class="container">
<div class="newsletter-content">
<h2>Join Our Celebration</h2>
<p>Subscribe to our newsletter for exclusive holiday offers and New Year's updates!</p>
<form class="newsletter-form" id="newsletterForm">
<input type="email" placeholder="Enter your email address" required>
<button type="submit">Subscribe</button>
</form>
<div class="form-message" id="formMessage">Thank you for subscribing! We'll keep you updated with our latest offers.</div>
</div>
</div>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3>About Us</h3>
<p>We're dedicated to making your holiday season magical with our curated collection of gifts, decorations, and festive experiences.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
</div>
</div>
<div class="footer-column">
<h3>Quick Links</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#countdown">Countdown</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#gallery">Gallery</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Customer Service</h3>
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Shipping Info</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">FAQ</a></li>
</ul>
</div>
<div class="footer-column">
<h3>Legal</h3>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Cookie Policy</a></li>
<li><a href="#">Accessibility</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2023 Holiday Season. All rights reserved. Made with <i class="fas fa-heart" style="color: var(--primary-color);"></i> for the festive season.</p>
</div>
</div>
</footer>
<!-- Music Player -->
<div class="music-player" id="musicPlayer">
<button class="play-btn" id="playBtn" title="Play/Pause">
<i class="fas fa-play"></i>
</button>
<div class="music-info">
<div class="music-title">
<i class="fas fa-music"></i>
<span id="songTitle">Holiday Music</span>
</div>
<div class="progress-container">
<div class="progress-bar" id="progressBar">
<div class="progress-fill" id="progressFill"></div>
</div>
<span class="time-display" id="timeDisplay">0:00 / 0:00</span>
</div>
</div>
<div class="volume-control">
<button class="volume-btn" id="volumeBtn">
<i class="fas fa-volume-up"></i>
</button>
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.1" value="0.7">
</div>
<button class="toggle-expand" id="toggleExpand" title="Expand/Collapse">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<!-- Audio Element -->
<audio id="bgMusic" preload="auto">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>
<script>
// Snowfall Animation
function createSnowflake() {
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.innerHTML = '❄';
snowflake.style.left = Math.random() * window.innerWidth + 'px';
snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
snowflake.style.opacity = Math.random();
snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
document.getElementById('snowfall').appendChild(snowflake);
setTimeout(() => {
snowflake.remove();
}, 5000);
}
setInterval(createSnowflake, 200);
// Header Scroll Effect
window.addEventListener('scroll', () => {
const header = document.getElementById('header');
if (window.scrollY > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
});
// Mobile Menu Toggle
const menuToggle = document.getElementById('menuToggle');
const navLinks = document.getElementById('navLinks');
menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
const icon = menuToggle.querySelector('i');
icon.classList.toggle('fa-bars');
icon.classList.toggle('fa-times');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
navLinks.classList.remove('active');
const icon = menuToggle.querySelector('i');
icon.classList.add('fa-bars');
icon.classList.remove('fa-times');
});
});
// Countdown Timer
function updateCountdown() {
const now = new Date();
const currentYear = now.getFullYear();
const newYear = new Date(`January 1, ${currentYear + 1} 00:00:00`);
// If it's already January 1st, set the target to next year
if (now.getMonth() === 0 && now.getDate() === 1) {
newYear.setFullYear(currentYear + 1);
}
const diff = newYear - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
document.getElementById('days').textContent = days.toString().padStart(2, '0');
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
}
setInterval(updateCountdown, 1000);
updateCountdown();
// Scroll Animations
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('.feature-card, .gallery-item').forEach(el => {
observer.observe(el);
});
// Newsletter Form
const newsletterForm = document.getElementById('newsletterForm');
const formMessage = document.getElementById('formMessage');
newsletterForm.addEventListener('submit', (e) => {
e.preventDefault();
const email = newsletterForm.querySelector('input[type="email"]').value;
// Simulate form submission
formMessage.classList.add('show');
newsletterForm.reset();
// Hide message after 5 seconds
setTimeout(() => {
formMessage.classList.remove('show');
}, 5000);
});
// Smooth Scrolling
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
// Music Player Controls
const musicPlayer = document.getElementById('musicPlayer');
const audio = document.getElementById('bgMusic');
const playBtn = document.getElementById('playBtn');
const progressBar = document.getElementById('progressBar');
const progressFill = document.getElementById('progressFill');
const timeDisplay = document.getElementById('timeDisplay');
const volumeBtn = document.getElementById('volumeBtn');
const volumeSlider = document.getElementById('volumeSlider');
const toggleExpand = document.getElementById('toggleExpand');
let isExpanded = false;
// Set initial volume
audio.volume = 0.7;
// Play/Pause toggle
playBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playBtn.innerHTML = '<i class="fas fa-pause"></i>';
playBtn.classList.add('playing');
if (!isExpanded) {
expandPlayer();
}
} else {
audio.pause();
playBtn.innerHTML = '<i class="fas fa-play"></i>';
playBtn.classList.remove('playing');
}
});
// Update progress bar
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
progressFill.style.width = progress + '%';
timeDisplay.textContent = formatTime(audio.currentTime) + ' / ' + formatTime(audio.duration);
});
// Seek functionality
progressBar.addEventListener('click', (e) => {
const rect = progressBar.getBoundingClientRect();
const percent = (e.clientX - rect.left) / rect.width;
audio.currentTime = percent * audio.duration;
});
// Volume control
volumeSlider.addEventListener('input', (e) => {
audio.volume = e.target.value;
updateVolumeIcon();
});
volumeBtn.addEventListener('click', () => {
audio.muted = !audio.muted;
updateVolumeIcon();
});
function updateVolumeIcon() {
const icon = volumeBtn.querySelector('i');
if (audio.muted || audio.volume === 0) {
icon.className = 'fas fa-volume-mute';
} else if (audio.volume < 0.5) {
icon.className = 'fas fa-volume-down';
} else {
icon.className = 'fas fa-volume-up';
}
}
// Expand/Collapse player
toggleExpand.addEventListener('click', () => {
if (isExpanded) {
collapsePlayer();
} else {
expandPlayer();
}
});
function expandPlayer() {
musicPlayer.classList.add('expanded');
toggleExpand.innerHTML = '<i class="fas fa-chevron-left"></i>';
isExpanded = true;
}
function collapsePlayer() {
musicPlayer.classList.remove('expanded');
toggleExpand.innerHTML = '<i class="fas fa-chevron-right"></i>';
isExpanded = false;
}
// Format time helper
function formatTime(seconds) {
if (isNaN(seconds)) return '0:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return mins + ':' + (secs < 10 ? '0' : '') + secs;
}
// Reset when song ends
audio.addEventListener('ended', () => {
playBtn.innerHTML = '<i class="fas fa-play"></i>';
playBtn.classList.remove('playing');
progressFill.style.width = '0%';
});
</script>
</body>
</html>