<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeafBox Technologies - Holiday Innovation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@300;400;500;700;900&family=Poppins:wght@300;400;500;600;700&display=swap');
:root {
--primary-dark: #0a0e27;
--secondary-dark: #1a1f3a;
--accent-gold: #ffd700;
--accent-green: #00ff88;
--accent-blue: #00ccff;
--text-light: #e0e6ed;
--text-dim: #8892b0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
color: var(--text-light);
overflow-x: hidden;
position: relative;
}
/* Animated Background */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.bg-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(rgba(0, 255, 136, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 255, 136, 0.05) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(50px, 50px);
}
}
/* Snow Canvas */
#snowCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
}
/* Header */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 50px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
background: rgba(10, 14, 39, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}
.logo {
display: flex;
align-items: center;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
font-size: 1.5rem;
color: var(--accent-green);
text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}
.logo i {
margin-right: 10px;
font-size: 1.8rem;
}
nav ul {
display: flex;
list-style: none;
gap: 30px;
}
nav a {
color: var(--text-light);
text-decoration: none;
transition: all 0.3s ease;
position: relative;
padding: 5px 0;
}
nav a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--accent-gold);
transition: width 0.3s ease;
}
nav a:hover::after {
width: 100%;
}
.theme-toggle {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-light);
padding: 8px 15px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.theme-toggle:hover {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 100px 20px 50px;
position: relative;
}
.christmas-tree {
width: 200px;
height: 300px;
position: relative;
margin-bottom: 50px;
}
.tree-layer {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-style: solid;
filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.8));
}
.tree-layer:nth-child(1) {
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid rgba(0, 255, 136, 0.8);
top: 0;
animation: treeGlow 3s infinite alternate;
}
.tree-layer:nth-child(2) {
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 80px solid rgba(0, 255, 136, 0.7);
top: 70px;
animation: treeGlow 3s infinite alternate 0.5s;
}
.tree-layer:nth-child(3) {
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid rgba(0, 255, 136, 0.6);
top: 130px;
animation: treeGlow 3s infinite alternate 1s;
}
.tree-trunk {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 30px;
background: linear-gradient(to bottom, #8B4513, #654321);
border-radius: 0 0 5px 5px;
}
.tree-star {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
color: var(--accent-gold);
font-size: 30px;
animation: starPulse 2s infinite;
}
@keyframes treeGlow {
0% {
filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.8));
}
100% {
filter: drop-shadow(0 0 20px rgba(0, 255, 136, 1));
}
}
@keyframes starPulse {
0%,
100% {
transform: translateX(-50%) scale(1);
}
50% {
transform: translateX(-50%) scale(1.2);
}
}
.hero-content {
text-align: center;
max-width: 800px;
}
.hero h1 {
font-family: 'Orbitron', sans-serif;
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(90deg, var(--accent-gold), var(--accent-green), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: textGlow 3s infinite alternate;
}
@keyframes textGlow {
0% {
filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}
100% {
filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.8));
}
}
.hero p {
font-size: 1.2rem;
color: var(--text-dim);
margin-bottom: 30px;
}
.cta-button {
display: inline-block;
padding: 15px 30px;
background: linear-gradient(45deg, var(--accent-green), var(--accent-blue));
color: var(--primary-dark);
font-weight: 600;
text-decoration: none;
border-radius: 50px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.3);
transition: left 0.5s ease;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 255, 136, 0.3);
}
/* About Section */
.about {
padding: 100px 20px;
position: relative;
}
.section-title {
font-family: 'Orbitron', sans-serif;
font-size: 2.5rem;
text-align: center;
margin-bottom: 50px;
color: var(--accent-gold);
text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.timeline {
max-width: 1000px;
margin: 0 auto;
position: relative;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(to bottom, var(--accent-green), var(--accent-blue));
}
.timeline-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 50px;
position: relative;
}
.timeline-item:nth-child(odd) {
flex-direction: row-reverse;
}
.timeline-content {
width: 45%;
padding: 20px;
background: rgba(26, 31, 58, 0.7);
border: 1px solid rgba(0, 255, 136, 0.3);
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.timeline-content:hover {
transform: scale(1.03);
box-shadow: 0 8px 25px rgba(0, 255, 136, 0.2);
}
.timeline-dot {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
background: var(--accent-gold);
border-radius: 50%;
box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}
.timeline-date {
font-family: 'Orbitron', sans-serif;
color: var(--accent-blue);
margin-bottom: 10px;
}
.timeline-title {
font-size: 1.3rem;
margin-bottom: 10px;
color: var(--text-light);
}
.timeline-description {
color: var(--text-dim);
line-height: 1.6;
}
/* Services Section */
.services {
padding: 100px 20px;
background: rgba(10, 14, 39, 0.5);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.service-card {
background: rgba(26, 31, 58, 0.7);
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 15px;
padding: 30px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(0, 255, 136, 0.1), transparent);
transform: rotate(45deg);
transition: all 0.5s ease;
opacity: 0;
}
.service-card:hover::before {
animation: shimmer 0.5s ease;
}
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
opacity: 0;
}
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 255, 136, 0.2);
border-color: var(--accent-green);
}
.service-icon {
font-size: 3rem;
margin-bottom: 20px;
background: linear-gradient(45deg, var(--accent-gold), var(--accent-green));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.service-title {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--text-light);
}
.service-description {
color: var(--text-dim);
line-height: 1.6;
margin-bottom: 20px;
}
.service-link {
color: var(--accent-green);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.service-link i {
margin-left: 5px;
transition: transform 0.3s ease;
}
.service-link:hover i {
transform: translateX(5px);
}
/* Contact Section */
.contact {
padding: 100px 20px;
text-align: center;
position: relative;
}
.greeting-text {
font-size: 2rem;
margin-bottom: 30px;
animation: textFadeIn 2s ease;
}
@keyframes textFadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.contact-form {
max-width: 600px;
margin: 0 auto;
background: rgba(26, 31, 58, 0.7);
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 15px;
padding: 30px;
}
.form-group {
margin-bottom: 20px;
text-align: left;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: var(--text-light);
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 12px;
background: rgba(10, 14, 39, 0.5);
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 8px;
color: var(--text-light);
font-family: inherit;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent-green);
box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
}
.submit-button {
background: linear-gradient(45deg, var(--accent-gold), var(--accent-green));
color: var(--primary-dark);
border: none;
padding: 12px 30px;
border-radius: 25px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-button:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 255, 136, 0.3);
}
/* Footer */
footer {
padding: 50px 20px;
background: rgba(10, 14, 39, 0.9);
border-top: 1px solid rgba(0, 255, 136, 0.2);
text-align: center;
}
.countdown {
font-family: 'Orbitron', sans-serif;
font-size: 2rem;
margin-bottom: 30px;
color: var(--accent-gold);
text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.countdown-timer {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.countdown-item {
background: rgba(26, 31, 58, 0.7);
border: 1px solid rgba(0, 255, 136, 0.3);
border-radius: 10px;
padding: 15px;
min-width: 80px;
}
.countdown-value {
font-size: 2rem;
font-weight: 700;
color: var(--accent-green);
display: block;
}
.countdown-label {
font-size: 0.8rem;
color: var(--text-dim);
text-transform: uppercase;
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 30px;
}
.social-links a {
color: var(--text-light);
font-size: 1.5rem;
transition: all 0.3s ease;
}
.social-links a:hover {
color: var(--accent-green);
transform: translateY(-5px);
}
.copyright {
color: var(--text-dim);
font-size: 0.9rem;
}
/* Easter Egg */
.easter-egg {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: rgba(26, 31, 58, 0.7);
border: 1px solid rgba(0, 255, 136, 0.2);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 100;
}
.easter-egg:hover {
transform: scale(1.1);
box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}
.easter-egg-message {
position: fixed;
bottom: 80px;
right: 20px;
background: rgba(26, 31, 58, 0.9);
border: 1px solid rgba(0, 255, 136, 0.3);
border-radius: 10px;
padding: 20px;
max-width: 300px;
display: none;
z-index: 100;
}
.easter-egg-message.show {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Light Mode */
body.light-mode {
background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);
color: #334155;
}
body.light-mode :root {
--primary-dark: #f0f4f8;
--secondary-dark: #d9e2ec;
--accent-gold: #f59e0b;
--accent-green: #10b981;
--accent-blue: #3b82f6;
--text-light: #334155;
--text-dim: #64748b;
}
body.light-mode header {
background: rgba(255, 255, 255, 0.8);
border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}
body.light-mode .timeline-content,
body.light-mode .service-card,
body.light-mode .contact-form,
body.light-mode .countdown-item,
body.light-mode .easter-egg {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(16, 185, 129, 0.2);
}
/* Responsive Design */
@media (max-width: 768px) {
header {
padding: 15px 20px;
}
nav ul {
gap: 15px;
}
.hero h1 {
font-size: 2rem;
}
.timeline::before {
left: 20px;
}
.timeline-item,
.timeline-item:nth-child(odd) {
flex-direction: column;
align-items: flex-start;
padding-left: 50px;
}
.timeline-content {
width: 100%;
}
.timeline-dot {
left: 20px;
}
.countdown-timer {
flex-wrap: wrap;
}
}
</style>
</head>
<body>
<!-- Animated Background -->
<div class="bg-animation">
<div class="bg-grid"></div>
</div>
<!-- Snow Canvas -->
<canvas id="snowCanvas"></canvas>
<!-- Header -->
<header>
<div class="logo">
<i class="fas fa-cube"></i>
LeafBox Technologies
</div>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<button class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
</header>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="christmas-tree">
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-layer"></div>
<div class="tree-trunk"></div>
<div class="tree-star">
<i class="fas fa-star"></i>
</div>
</div>
<div class="hero-content">
<h1>Merry Christmas from LeafBox Technologies</h1>
<p>Innovating into the Future</p>
<a href="#services" class="cta-button">Explore Our Magic</a>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<h2 class="section-title">Our Journey of Innovation</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2019</div>
<div class="timeline-title">The Beginning</div>
<div class="timeline-description">LeafBox Technologies was founded with a vision to blend cutting-edge technology with sustainable solutions.</div>
</div>
<div class="timeline-dot"></div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2020</div>
<div class="timeline-title">First Breakthrough</div>
<div class="timeline-description">Launched our revolutionary AI-powered data management system, transforming how businesses handle information.</div>
</div>
<div class="timeline-dot"></div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2021</div>
<div class="timeline-title">Global Expansion</div>
<div class="timeline-description">Expanded operations to 15 countries, bringing innovative tech solutions to a global audience.</div>
</div>
<div class="timeline-dot"></div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2022</div>
<div class="timeline-title">Sustainability Focus</div>
<div class="timeline-description">Achieved carbon neutrality and launched our green tech initiative, aligning with global environmental goals.</div>
</div>
<div class="timeline-dot"></div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<div class="timeline-date">2023</div>
<div class="timeline-title">Holiday Innovation</div>
<div class="timeline-description">This holiday season, we're unveiling our most advanced AI platform yet, designed to make the future brighter for everyone.</div>
</div>
<div class="timeline-dot"></div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services" id="services">
<h2 class="section-title">Our Digital Gifts</h2>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-brain"></i>
</div>
<h3 class="service-title">AI Solutions</h3>
<p class="service-description">Harness the power of artificial intelligence to transform your business operations and unlock new possibilities.</p>
<a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-cloud"></i>
</div>
<h3 class="service-title">Cloud Computing</h3>
<p class="service-description">Scale your infrastructure with our secure, high-performance cloud solutions designed for the modern enterprise.</p>
<a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="service-title">Cybersecurity</h3>
<p class="service-description">Protect your digital assets with our advanced security protocols and threat detection systems.</p>
<a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3 class="service-title">Data Analytics</h3>
<p class="service-description">Turn your data into actionable insights with our powerful analytics platform and visualization tools.</p>
<a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-robot"></i>
</div>
<h3 class="service-title">Automation</h3>
<p class="service-description">Streamline your workflows with intelligent automation solutions that adapt to your business needs.</p>
<a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-globe"></i>
</div>
<h3 class="service-title">IoT Integration</h3>
<p class="service-description">Connect your world with our Internet of Things solutions, creating smarter environments for work and life.</p>
<a href="#" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<h2 class="section-title">Holiday Greetings</h2>
<div class="greeting-text">Wishing you innovation, joy, and success this holiday season</div>
<form class="contact-form" id="contactForm">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Holiday Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<button type="submit" class="submit-button">Send Holiday Wishes</button>
</form>
</section>
<!-- Footer -->
<footer>
<div class="countdown">Countdown to New Year</div>
<div class="countdown-timer" id="countdown">
<div class="countdown-item">
<span class="countdown-value" id="days">00</span>
<span class="countdown-label">Days</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="hours">00</span>
<span class="countdown-label">Hours</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="minutes">00</span>
<span class="countdown-label">Minutes</span>
</div>
<div class="countdown-item">
<span class="countdown-value" id="seconds">00</span>
<span class="countdown-label">Seconds</span>
</div>
</div>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
<div class="copyright">
© 2023 LeafBox Technologies. All rights reserved. | Spreading Tech Joy This Holiday Season
</div>
</footer>
<!-- Easter Egg -->
<div class="easter-egg" id="easterEgg">
<i class="fas fa-gift"></i>
</div>
<div class="easter-egg-message" id="easterEggMessage">
<h3>🎄 Secret Holiday Message 🎄</h3>
<p>From all of us at LeafBox Technologies, thank you for being part of our journey this year. May your holidays be filled with joy, innovation, and endless possibilities!</p>
</div>
<script>
// Snow Animation
const canvas = document.getElementById('snowCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const snowflakes = [];
const maxSnowflakes = 100;
class Snowflake {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random() * 3 + 1;
this.speed = Math.random() * 1 + 0.5;
this.wind = Math.random() * 0.5 - 0.25;
this.color = Math.random() > 0.5 ? '#00ff88' : '#00ccff';
}
update() {
this.y += this.speed;
this.x += this.wind;
if (this.y > canvas.height) {
this.y = 0;
this.x = Math.random() * canvas.width;
}
if (this.x > canvas.width) {
this.x = 0;
} else if (this.x < 0) {
this.x = canvas.width;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
}
function initSnowflakes() {
for (let i = 0; i < maxSnowflakes; i++) {
snowflakes.push(new Snowflake());
}
}
function animateSnowflakes() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snowflakes.forEach(snowflake => {
snowflake.update();
snowflake.draw();
});
requestAnimationFrame(animateSnowflakes);
}
initSnowflakes();
animateSnowflakes();
// Resize canvas on window resize
window.addEventListener('resize', () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
});
// Interactive snow effect on mouse move
document.addEventListener('mousemove', (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
snowflakes.forEach(snowflake => {
const dx = mouseX - snowflake.x;
const dy = mouseY - snowflake.y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 100) {
const force = (100 - distance) / 100;
snowflake.x -= (dx / distance) * force * 2;
snowflake.y -= (dy / distance) * force * 2;
}
});
});
// Theme Toggle
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
themeToggle.addEventListener('click', () => {
body.classList.toggle('light-mode');
const icon = themeToggle.querySelector('i');
if (body.classList.contains('light-mode')) {
icon.classList.remove('fa-moon');
icon.classList.add('fa-sun');
} else {
icon.classList.remove('fa-sun');
icon.classList.add('fa-moon');
}
});
// Countdown Timer
function updateCountdown() {
const now = new Date();
const currentYear = now.getFullYear();
const newYear = new Date(`January 1, ${currentYear + 1} 00:00:00`);
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();
// Easter Egg
const easterEgg = document.getElementById('easterEgg');
const easterEggMessage = document.getElementById('easterEggMessage');
easterEgg.addEventListener('click', () => {
easterEggMessage.classList.toggle('show');
if (easterEggMessage.classList.contains('show')) {
setTimeout(() => {
easterEggMessage.classList.remove('show');
}, 5000);
}
});
// Contact Form
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Create a success message
const successMessage = document.createElement('div');
successMessage.style.position = 'fixed';
successMessage.style.top = '50%';
successMessage.style.left = '50%';
successMessage.style.transform = 'translate(-50%, -50%)';
successMessage.style.background = 'rgba(0, 255, 136, 0.9)';
successMessage.style.color = '#0a0e27';
successMessage.style.padding = '20px 40px';
successMessage.style.borderRadius = '10px';
successMessage.style.fontWeight = '600';
successMessage.style.zIndex = '1000';
successMessage.textContent = 'Your holiday wishes have been sent! 🎄';
document.body.appendChild(successMessage);
// Reset form
contactForm.reset();
// Remove message after 3 seconds
setTimeout(() => {
successMessage.remove();
}, 3000);
});
// 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'
});
}
});
});
// Add some extra glow effects to service cards on hover
const serviceCards = document.querySelectorAll('.service-card');
serviceCards.forEach(card => {
card.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 15px 30px rgba(0, 255, 136, 0.2), 0 0 30px rgba(0, 255, 136, 0.1)';
});
card.addEventListener('mouseleave', function() {
this.style.boxShadow = '0 15px 30px rgba(0, 255, 136, 0.2)';
});
});
// Add some animation to the timeline items when they come into view
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.timeline-item').forEach(item => {
item.style.opacity = '0';
item.style.transform = 'translateY(20px)';
item.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
observer.observe(item);
});
</script>
</body>
</html>