15 August Code
Code & Video Showcase
Code Examples
HTML Code
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Page Title -->
<title>
स्वतंत्रता दिवस 2025 की शुभकामनाएं | 15 August Wishes, Quotes & Images
</title>
<!-- Meta Description -->
<meta
name="description"
content="15 अगस्त 2025 के शुभ अवसर पर भेजें देशभक्ति से भरे शुभकामनाएं संदेश, कोट्स और सुंदर इमेजेस। स्वतंत्रता दिवस की बधाई हिंदी में।"
/>
<!-- Keywords (not required for Google, but some search engines still use them) -->
<meta
name="keywords"
content="15 August 2025, स्वतंत्रता दिवस, स्वतंत्रता दिवस शुभकामनाएं, Independence Day wishes in Hindi, 15 August quotes, 15 August images, देशभक्ति संदेश, Independence Day 2025"
/>
<!-- Author -->
<meta name="author" content="Tabrej Azam - Tabrej" />
<!-- Open Graph Meta Tags (for Facebook, LinkedIn, etc.) -->
<meta
property="og:title"
content="स्वतंत्रता दिवस 2025 की शुभकामनाएं | 15 August Wishes"
/>
<meta
property="og:description"
content="15 अगस्त के इस पावन अवसर पर साझा करें देशभक्ति से भरे शुभकामनाएं संदेश, कोट्स और इमेजेस।"
/>
<meta
property="og:image"
content="https://yourdomain.com/images/15aug-banner.jpg"
/>
<meta property="og:url" content="https://yourdomain.com/15august2025" />
<meta property="og:type" content="website" />
<!-- Twitter Card Meta -->
<meta name="twitter:card" content="summary_large_image" />
<meta
name="twitter:title"
content="स्वतंत्रता दिवस 2025 की शुभकामनाएं | 15 August Wishes"
/>
<meta
name="twitter:description"
content="15 अगस्त 2025 को भेजें शानदार देशभक्ति शुभकामनाएं संदेश, कोट्स और HD इमेजेस।"
/>
<meta
name="twitter:image"
content="https://yourdomain.com/images/15aug-banner.jpg"
/>
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600&family=Noto+Sans+Devanagari:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<style></style>
</head>
<script
type="text/javascript"
src="//pl27304325.profitableratecpm.com/15/d9/76/15d97613d4fcce5aa926e43e870fe885.js"
></script>
<body>
<!-- Background Music - Single Song for Everything -->
<audio id="backgroundMusic" loop preload="auto" style="display: none">
<source
src="https://res.cloudinary.com/tabrej/video/upload/v1753617354/indian-flute-and-tabla-new-tune-remastered-277266-_AudioTrimmer.com_nq7szz.mp3"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
<!-- Music Control Button -->
<button
id="musicControl"
class="music-control"
onclick="toggleMusic()"
title="Music On/Off"
>
<i class="fas fa-music"></i>
</button>
<!-- Music Notification -->
<div id="musicNotification" class="music-notification">
<i class="fas fa-music musical-note"></i>
<span>देशभक्ति संगीत चल रहा है</span>
</div>
<!-- Tricolor Particle System -->
<div class="particles-container" id="particlesContainer"></div>
<!-- Form Page -->
<div class="form-page" id="formPage">
<div class="container">
<div class="header">
<h1>🇮🇳 स्वतंत्रता दिवस की शुभकामनाएं 🇮🇳</h1>
<p>🌟 15 अगस्त 2025 🌟</p>
<p>आजादी का पावन त्योहार</p>
<p class="subtitle">वतन की खुशियां सबके साथ बांटें</p>
</div>
<div class="gradient-border">
<div class="gradient-border-inner">
<div class="form-section" id="formSection">
<div class="form-group">
<label for="userName">🇮🇳 अपना प्यारा नाम लिखें:</label>
<input
type="text"
id="userName"
class="name-input"
placeholder="जैसे: राहुल, प्रिया, अमित, सुनीता..."
maxlength="50"
/>
</div>
<button
class="btn template-btn"
id="chooseTemplateBtn"
onclick="openTemplateModal()"
>
<i class="fas fa-images"></i>
<span id="templateBtnText">स्वतंत्रता दिवस की फोटो चुनें</span>
</button>
<button
class="btn"
id="generateBtn"
onclick="generateIndependenceLink()"
>
<span id="btnText">
🇮🇳 स्वतंत्रता दिवस की शुभकामना तैयार करें
</span>
<span class="loading-spinner hidden" id="loadingSpinner"></span>
</button>
<div class="generated-link hidden" id="generatedLink">
<p>🎉 आपकी स्वतंत्रता दिवस की शुभकामनाएं तैयार हैं!</p>
<div class="link-display" id="linkDisplay"></div>
<button class="btn copy-btn" onclick="copyToClipboard()">
<i class="fa-regular fa-copy"></i> लिंक कॉपी करें
</button>
<button
class="btn"
onclick="shareOnWhatsApp()"
style="background: linear-gradient(135deg, #138808, #ff9933)"
>
<i class="fa-brands fa-whatsapp"></i> व्हाट्सऐप पर भेजें
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Envelope Page -->
<div class="envelope-page" id="envelopePage">
<!-- Tricolor Particle System for Envelope Page -->
<div class="particles-container" id="envelopeParticlesContainer"></div>
<div class="envelope-container" id="envelope-container">
<div class="wrapper" id="envelope-wrapper">
<div class="lid one"></div>
<div class="lid two"></div>
<div class="envelope"></div>
<button class="open-btn" id="open-btn">
<i class="fas fa-envelope-open"></i>
</button>
<div class="letter">
<img
id="envelope-image"
src="https://i.postimg.cc/zXhTtJ6y/16.webp"
alt="स्वतंत्रता दिवस की शुभकामना"
crossorigin="anonymous"
/>
</div>
</div>
</div>
<div class="content-container" id="content-container">
<div class="content-card">
<img
id="main-image"
src="https://i.postimg.cc/zXhTtJ6y/16.webp"
alt="स्वतंत्रता दिवस की शुभकामना"
class="independence-image"
crossorigin="anonymous"
/>
<button class="download-btn" id="download-btn">
<i class="fas fa-download"></i>
Download Image
</button>
<div class="wish-text" id="wish-text">
ने आपको स्वतंत्रता दिवस की हार्दिक शुभकामनाएं भेजी हैं!
</div>
<div class="action-buttons">
<button class="action-btn" onclick="showIndependenceDayInfo()">
स्वतंत्रता दिवस के बारे में जानें
</button>
<button class="action-btn secondary" onclick="createNewWish()">
नई शुभकामना बनाएं
</button>
</div>
</div>
</div>
</div>
<!-- Template Selection Modal -->
<div id="templateModal" class="modal">
<!-- Tricolor Particle System for Modal -->
<div class="particles-container" id="modalParticlesContainer"></div>
<div class="modal-content">
<span class="close" onclick="closeTemplateModal()">×</span>
<h1 class="modal-title">स्वतंत्रता दिवस की फोटो चुनें</h1>
<div class="carousel-container">
<div class="carousel">
<div class="carousel-slide active">
<img
src="https://i.postimg.cc/zXhTtJ6y/16.webp"
alt="Independence Day 1"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/ZRy8ypk5/17.webp"
alt="Independence Day 2"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/Y0Rh4CSS/18.webp"
alt="Independence Day 3"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/1XmzZ1K1/19.webp"
alt="Independence Day 4"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/rssLJVJs/20.webp"
alt="Independence Day 5"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/7PzvqWWp/21.webp"
alt="Independence Day 6"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/wTYCMkK3/22.webp"
alt="Independence Day 7"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/K8Jw9S1g/24.webp"
alt="Independence Day 8"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/7h8WCqWj/25.webp"
alt="Independence Day 9"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/kGvfBK8t/26.webp"
alt="Independence Day 10"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/VLsFKSnD/27.webp"
alt="Independence Day 10"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/Wz1JwkCZ/29.webp"
alt="Independence Day 10"
/>
</div>
<div class="carousel-slide">
<img
src="https://i.postimg.cc/283Zqn4R/28.webp"
alt="Independence Day 10"
/>
</div>
</div>
<button class="nav-button prev-btn" onclick="prevSlide()">
<i class="fas fa-chevron-left"></i>
</button>
<button class="nav-button next-btn" onclick="nextSlide()">
<i class="fas fa-chevron-right"></i>
</button>
<button class="select-button" onclick="selectTemplate()">
<span class="select-text">
<i class="fas fa-check"></i>
Select
</span>
<i class="fas fa-check check-icon"></i>
</button>
</div>
</div>
</div>
<!-- Independence Day Information Modal -->
<div id="infoModal" class="info-modal">
<!-- Tricolor Particle System for Info Modal -->
<div class="particles-container" id="infoModalParticlesContainer"></div>
<span class="info-close" onclick="closeInfoModal()">×</span>
<div class="info-modal-content">
<div class="info-content">
<!-- Header -->
<header class="page-header">
<h1>
<i class="fas fa-flag-alt"></i>
15 अगस्त स्वतंत्रता दिवस
</h1>
<p class="subtitle">
सिर्फ एक तारीख नहीं, बल्कि भारत के पुनर्जन्म का दिन है
</p>
</header>
<!-- गुलामी से आज़ादी की ओर -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"><i class="fas fa-sun"></i></span>
गुलामी से आज़ादी की ओर: 200 साल की दर्दनाक दास्तान
</h2>
<div class="highlight-box">
<h3 class="story-title">
<i class="fas fa-question-circle story-icon"></i>
क्या आप जानते हैं?
</h3>
<p class="content-text">
भारत, जो कभी सोने की चिड़िया कहा जाता था, 1600 ईस्वी के बाद
ब्रिटिश ईस्ट इंडिया कंपनी के शिकंजे में जकड़ा जाने लगा। वे
व्यापारी बनकर आए थे, लेकिन धीरे-धीरे हमारे राजाओं को लड़वाया,
कूटनीति और धोखे से जमीन छीनी, और अंत में पूरे भारत को गुलामी की
जंजीरों में जकड़ दिया।
</p>
<p class="content-text">
1857 में पहली बार भारतवासियों ने मिलकर आवाज़ उठाई – जिसे "प्रथम
स्वतंत्रता संग्राम" या "सिपाही विद्रोह" कहा जाता है।
</p>
<p class="content-text">
<strong
>लेकिन ये सिर्फ शुरुआत थी… असली संग्राम तो 90 साल और
चला!</strong
>
</p>
</div>
</div>
<!-- गुलामी का मतलब -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"
><i class="fas fa-broken-heart"></i
></span>
गुलामी का मतलब क्या था?
</h2>
<div class="story-box">
<p class="content-text">
<i class="fas fa-seedling"></i> हमारी भूमि पर टैक्स इतना ज़्यादा
था कि किसान भूख से मरते थे।
</p>
<p class="content-text">
<i class="fas fa-crown"></i> अंग्रेज़ अफसर राजा बन बैठे, और भारत
के लोग नौकर बनकर रह गए।
</p>
<p class="content-text">
<i class="fas fa-book"></i> हमारी संस्कृति को पिछड़ा बताया गया,
शिक्षा का हक सिर्फ अंग्रेज़ी जानने वालों को दिया गया।
</p>
<p class="content-text">
<i class="fas fa-user-times"></i> भारतीयों को कुत्तों से भी बदतर
समझा जाता था।
</p>
</div>
<div class="warning-box">
<h4 class="story-title">
<i class="fas fa-exclamation-triangle story-icon"></i>
ब्रिटिश क्लबों पर बोर्ड होता था:
</h4>
<div class="quote-box">
<i class="fas fa-times-circle"></i>
<strong>"Dogs and Indians Not Allowed"</strong>
</div>
</div>
</div>
<!-- आज़ादी की चिंगारी -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"><i class="fas fa-fire"></i></span>
आज़ादी की चिंगारी – वो वीर जिन्होंने इतिहास रच दिया
</h2>
<div class="historical-box">
<h3 class="story-title">
<i class="fas fa-medal story-icon"></i>
प्रमुख स्वतंत्रता सेनानी:
</h3>
<table class="info-table">
<thead>
<tr>
<th><i class="fas fa-user"></i> नाम</th>
<th><i class="fas fa-hands-helping"></i> योगदान</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>महात्मा गांधी</strong></td>
<td>सत्याग्रह और अहिंसा का मार्ग</td>
</tr>
<tr>
<td><strong>भगत सिंह</strong></td>
<td>लाहौर में बम फेंककर अदालत को चुनौती</td>
</tr>
<tr>
<td><strong>सुभाष चंद्र बोस</strong></td>
<td>आज़ाद हिंद फौज बनाकर ब्रिटिश फौज से टकराव</td>
</tr>
<tr>
<td><strong>बाल गंगाधर तिलक</strong></td>
<td>"स्वराज मेरा जन्मसिद्ध अधिकार है"</td>
</tr>
</tbody>
</table>
</div>
<div class="highlight-box">
<h4 class="story-title">
<i class="fas fa-heart-broken story-icon"></i>
लेकिन कुछ ऐसे नाम भी हैं जिन्हें कोई याद नहीं करता:
</h4>
<p class="content-text">
<i class="fas fa-user-friends"></i>
<strong>अशफाकउल्ला खान</strong> – रामप्रसाद बिस्मिल के साथी, देश
के लिए फाँसी चढ़े।
</p>
<p class="content-text">
<i class="fas fa-shield-alt"></i> <strong>वीर सावरकर</strong> –
अंडमान की कालापानी जेल में अमानवीय यातनाएँ झेलीं।
</p>
<p class="content-text">
<i class="fas fa-female"></i> <strong>दुर्गा भाभी</strong> – भगत
सिंह को पुलिस से बचाकर ले गईं।
</p>
<p class="content-text">
<strong>इन सबकी कुर्बानी से ही भारत की आत्मा आज़ाद हुई।</strong>
</p>
</div>
</div>
<!-- आधी रात का सूरज -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"><i class="fas fa-clock"></i></span>
आधी रात का सूरज – 14 अगस्त की रात क्या हुआ था?
</h2>
<p class="content-text">
1947 की रात, 12 बजे, जब दुनिया सो रही थी, भारत जाग रहा था – अपने
नए जीवन में कदम रखने के लिए।
</p>
<div class="quote-box">
<h4 class="story-title">
<i class="fas fa-scroll story-icon"></i>
नेहरू का ऐतिहासिक भाषण:
</h4>
<p class="content-text">
"At the stroke of the midnight hour, when the world sleeps,
India will awake to life and freedom…"
</p>
</div>
<div class="warning-box">
<h4 class="story-title">
<i class="fas fa-exclamation-triangle story-icon"></i>
लेकिन इस आज़ादी की कीमत बहुत भारी थी:
</h4>
<p class="content-text">
<i class="fas fa-map-marked-alt"></i> भारत और पाकिस्तान का
बँटवारा हुआ।
</p>
<p class="content-text">
<i class="fas fa-skull-crossbones"></i> 10 लाख से ज़्यादा लोग
मारे गए।
</p>
<p class="content-text">
<i class="fas fa-home"></i> 1.5 करोड़ लोग बेघर हुए।
</p>
<p class="content-text">
<i class="fas fa-female"></i> बहनें, बेटियाँ, माँएँ — सबने दर्द
की कीमत चुकाई।
</p>
</div>
</div>
<!-- 15 अगस्त 1947 -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"><i class="fas fa-flag-alt"></i></span>
15 अगस्त 1947 – स्वतंत्र भारत की पहली सुबह
</h2>
<div class="historical-box">
<h3 class="story-title">
<i class="fas fa-calendar-day story-icon"></i>
उस दिन:
</h3>
<p class="content-text">
<i class="fas fa-flag"></i> ब्रिटिश ध्वज यूनियन जैक को हटाकर
तिरंगा फहराया गया।
</p>
<p class="content-text">
<i class="fas fa-user-tie"></i> पंडित नेहरू भारत के पहले
प्रधानमंत्री बने।
</p>
<p class="content-text">
<i class="fas fa-crown"></i> लॉर्ड माउंटबेटन ने भारत को स्वतंत्र
राष्ट्र घोषित किया।
</p>
<p class="content-text">
<i class="fas fa-fort-awesome"></i> लाल किले से पहली बार
प्रधानमंत्री ने जनता को संबोधित किया।
</p>
</div>
<div class="highlight-box">
<h4 class="story-title">
<i class="fas fa-lightbulb story-icon"></i>
पर एक सच ये भी है…
</h4>
<p class="content-text">
सुभाष चंद्र बोस ने 1943 में ही अंडमान-निकोबार में आज़ाद हिंद
झंडा फहरा दिया था, जो बहुतों को नहीं पता।
</p>
</div>
</div>
<!-- अनसुने तथ्य -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"><i class="fas fa-brain"></i></span>
कुछ अनसुने तथ्य – जो शायद आपको नहीं पता
</h2>
<table class="info-table">
<thead>
<tr>
<th><i class="fas fa-question"></i> तथ्य</th>
<th><i class="fas fa-info-circle"></i> जानकारी</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i class="fas fa-flag"></i>
<strong>भारत का तिरंगा पहले कैसा था?</strong>
</td>
<td>हरा-पीला-सुनहरा और "वंदे मातरम्" लिखा हुआ</td>
</tr>
<tr>
<td>
<i class="fas fa-medal"></i>
<strong>पहला झंडा कब फहराया गया?</strong>
</td>
<td>1906 में कोलकाता में</td>
</tr>
<tr>
<td>
<i class="fas fa-candle-holder"></i>
<strong>सबसे छोटी उम्र में बलिदान?</strong>
</td>
<td>खुदीराम बोस (18 वर्ष)</td>
</tr>
<tr>
<td>
<i class="fas fa-music"></i>
<strong>भारत का पहला राष्ट्रगान कब गाया गया?</strong>
</td>
<td>1911 में कांग्रेस अधिवेशन में</td>
</tr>
<tr>
<td>
<i class="fas fa-scroll"></i>
<strong>संविधान कब लागू हुआ?</strong>
</td>
<td>26 जनवरी 1950 को</td>
</tr>
</tbody>
</table>
</div>
<!-- कैसे मनाते हैं स्वतंत्रता दिवस -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"
><i class="fas fa-party-horn"></i
></span>
कैसे मनाते हैं स्वतंत्रता दिवस?
</h2>
<div class="story-box">
<h3 class="story-title">
<i class="fas fa-calendar-alt story-icon"></i>
हर साल 15 अगस्त को पूरे देश में:
</h3>
<p class="content-text">
<i class="fas fa-fort-awesome"></i> लाल किला पर तिरंगा फहरता है।
</p>
<p class="content-text">
<i class="fas fa-music"></i> देशभक्ति गीत गूंजते हैं – "ऐ मेरे
वतन के लोगों", "जन गण मन", "सारे जहाँ से अच्छा"।
</p>
<p class="content-text">
<i class="fas fa-school"></i> स्कूलों, कॉलेजों में भाषण, नाटक और
झंडा वंदन होते हैं।
</p>
<p class="content-text">
<i class="fas fa-kite"></i> कई शहरों में पतंग उड़ाकर आज़ादी का
उत्सव मनाया जाता है।
</p>
</div>
</div>
<!-- 15 अगस्त का असली मतलब -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"><i class="fas fa-heart"></i></span>
15 अगस्त का असली मतलब क्या है?
</h2>
<div class="highlight-box">
<h3 class="story-title">
<i class="fas fa-calendar-day story-icon"></i>
ये सिर्फ एक दिन नहीं है…
</h3>
<p class="content-text">
ये हर उस इंसान की याद है जिसने बिना नाम के देश के लिए जान दे दी।
</p>
<p class="content-text">
<i class="fas fa-wind"></i> आज़ादी की हवा, जो हम रोज़ महसूस करते
हैं… वो किसी की आखिरी साँस की कीमत पर मिली है।
</p>
</div>
<div class="story-box">
<h4 class="story-title">
<i class="fas fa-hands-praying story-icon"></i>
इसलिए,
</h4>
<p class="content-text">जब भी तिरंगा देखो, रुककर सलाम करना।</p>
<p class="content-text">
जब भी राष्ट्रगान बजे, खड़े होकर आदर देना।
</p>
<p class="content-text">
और जब भी कोई पूछे, "भारत क्या है?" तो गर्व से कहना —
</p>
<div class="quote-box">
<strong
>"भारत मेरा स्वाभिमान है, मेरा सम्मान है, मेरी जान
है।"</strong
>
</div>
</div>
</div>
<!-- तिरंगे के रंगों का अर्थ -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"><i class="fas fa-palette"></i></span>
तिरंगे के रंगों का गहरा अर्थ
</h2>
<table class="info-table">
<thead>
<tr>
<th><i class="fas fa-palette"></i> रंग</th>
<th><i class="fas fa-info-circle"></i> अर्थ</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="color-indicator saffron-color"></span
><strong>केसरी</strong>
</td>
<td>बलिदान और साहस</td>
</tr>
<tr>
<td>
<span class="color-indicator white-color"></span
><strong>सफेद</strong>
</td>
<td>शांति और सच्चाई</td>
</tr>
<tr>
<td>
<span class="color-indicator green-color"></span
><strong>हरा</strong>
</td>
<td>समृद्धि और विकास</td>
</tr>
<tr>
<td>
<span class="color-indicator blue-color"></span
><strong>अशोक चक्र</strong>
</td>
<td>धर्म, नीति और समय का चक्र (24 घंटे सेवा)</td>
</tr>
</tbody>
</table>
</div>
<!-- अंत में कविता -->
<div class="info-content-card">
<h2 class="section-title">
<span class="section-icon"
><i class="fas fa-fist-raised"></i
></span>
अंत में एक कविता की तरह कुछ शब्द:
</h2>
<div class="quote-box">
<p
class="content-text"
style="font-size: 1.3rem; text-align: center; font-weight: 600"
>
तुम भूल न जाओ उनको<br />
इस लिये कही ये कहानी<br />
जो शहीद हुए हैं उनकी<br />
ज़रा याद करो क़ुर्बानी<br /><br />
<strong style="color: var(--saffron); font-size: 1.5rem"
>जय हिंद!</strong
>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Toast Notification -->
<div class="toast" id="toast">🇮🇳 लिंक सफलतापूर्वक कॉपी हो गया!</div>
<script></script>
</body>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--saffron: #ff9933;
--white: #ffffff;
--green: #138808;
--primary-gradient: linear-gradient(135deg,
#ff9933 0%,
#ffffff 50%,
#138808 100%);
--glass-bg: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
--text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
--box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
body {
font-family: "Poppins", sans-serif;
overflow-x: hidden;
min-height: 100vh;
background: linear-gradient(135deg,
#ff9933 0%,
#ffffff 25%,
#138808 50%,
#ff9933 75%,
#138808 100%);
background-attachment: fixed;
position: relative;
overflow: hidden;
}
/* Tricolor particle system */
.particles-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.particle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
animation: float 10s infinite ease-in-out;
}
.particle.saffron {
background: #ff9933;
box-shadow: 0 0 10px #ff9933;
}
.particle.white {
background: #ffffff;
box-shadow: 0 0 10px #ffffff;
}
.particle.green {
background: #138808;
box-shadow: 0 0 10px #138808;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) translateX(0px) rotate(0deg);
opacity: 0.3;
}
33% {
transform: translateY(-30px) translateX(20px) rotate(120deg);
opacity: 1;
}
66% {
transform: translateY(-60px) translateX(-20px) rotate(240deg);
opacity: 0.7;
}
}
/* Gradient Border Wrapper */
.gradient-border {
position: relative;
background: linear-gradient(45deg, #ff9933, #ffffff, #138808);
border-radius: 25px;
padding: 2px;
}
.gradient-border-inner {
background: var(--glass-bg);
backdrop-filter: blur(15px);
border-radius: 23px;
width: 100%;
height: 100%;
}
/* Main Container */
.container {
position: relative;
z-index: 10;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
/* Form Page Styles */
.form-page {
display: block;
}
.form-page.hidden {
display: none;
}
/* Header */
.header {
text-align: center;
margin-bottom: 40px;
}
.header h1 {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
color: #005fff;
background: linear-gradient(45deg, #ff9933, #ffffff, #138808);
background-clip: text;
text-shadow: var(--text-shadow);
margin-bottom: 15px;
font-family: "Dancing Script", cursive;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.header p {
font-size: clamp(1rem, 2.5vw, 1.3rem);
color: rgba(255, 255, 255, 0.95);
text-shadow: var(--text-shadow);
margin-bottom: 8px;
font-weight: 600;
}
.header .subtitle {
font-size: clamp(0.9rem, 2vw, 1rem);
color: rgba(255, 255, 255, 0.9);
font-style: italic;
}
/* Flag Images */
.flag-img {
filter: drop-shadow(0 0 15px rgba(255, 153, 51, 0.7));
vertical-align: middle;
}
.flag-img-header {
width: clamp(35px, 6vw, 60px);
height: clamp(25px, 4vw, 45px);
}
.flag-img-main {
width: clamp(60px, 8vw, 100px);
height: clamp(45px, 6vw, 75px);
margin: 20px 0;
}
.flag-img-btn {
width: 18px;
height: 13px;
margin-right: 8px;
}
.flag-img-toast {
width: 20px;
height: 15px;
margin-right: 10px;
}
/* Form Section */
.form-section {
text-align: center;
box-shadow: var(--box-shadow);
max-width: 600px;
width: 100%;
position: relative;
padding: 40px;
}
.form-group {
margin-bottom: 30px;
}
.form-group label {
display: block;
color: #fff;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 12px;
text-shadow: var(--text-shadow);
}
.name-input {
width: 100%;
padding: 16px 20px;
border: 2px solid rgba(255, 153, 51, 0.5);
border-radius: 20px;
background: rgba(255, 255, 255, 0.2);
color: #333;
font-size: 1.1rem;
font-weight: 500;
outline: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.name-input:focus {
border-color: #ff9933;
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 153, 51, 0.3);
}
.name-input::placeholder {
color: rgba(51, 51, 51, 0.7);
}
/* Buttons */
.btn {
background: var(--primary-gradient);
color: #333;
border: none;
padding: 15px 35px;
border-radius: 20px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(255, 153, 51, 0.4);
margin: 10px;
font-family: "Poppins", sans-serif;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(255, 153, 51, 0.5);
}
.template-btn {
background: linear-gradient(135deg, #138808 0%, #ff9933 100%);
color: white;
box-shadow: 0 8px 20px rgba(19, 136, 8, 0.3);
}
.template-btn.selected {
background: linear-gradient(135deg, #ff9933 0%, #138808 100%);
box-shadow: 0 8px 20px rgba(255, 153, 51, 0.3);
}
.copy-btn {
background: linear-gradient(135deg, #ff9933 0%, #138808 100%);
color: white;
box-shadow: 0 8px 20px rgba(255, 153, 51, 0.3);
}
/* Generated Link */
.generated-link {
margin: 30px 0;
padding: 25px;
background: rgba(255, 255, 255, 0.15);
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.generated-link p {
color: #fff;
font-weight: 600;
margin-bottom: 12px;
text-shadow: var(--text-shadow);
}
.link-display {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 10px;
color: #fff;
font-family: "Courier New", monospace;
word-break: break-all;
font-size: 0.9rem;
margin-bottom: 15px;
}
/* Template Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
#ff9933 0%,
#ffffff 25%,
#138808 50%,
#ff9933 75%,
#138808 100%);
background-attachment: fixed;
backdrop-filter: blur(10px);
align-items: center;
justify-content: center;
padding: 20px;
}
.modal.hidden {
display: none;
}
.modal.show {
display: flex;
}
.modal-content {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95),
rgba(245, 245, 245, 0.95));
border-radius: 25px;
width: 100%;
max-width: 800px;
position: relative;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
max-height: 90vh;
overflow-y: auto;
padding: 30px;
margin: 0;
transform: scale(0.9);
opacity: 0;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal.show .modal-content {
transform: scale(1);
opacity: 1;
}
.close {
color: #666;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 20px;
right: 25px;
z-index: 1001;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(0, 0, 0, 0.1);
}
.close:hover {
color: #ff9933;
background: rgba(255, 255, 255, 1);
transform: scale(1.1);
border-color: #ff9933;
}
.modal-title {
text-align: center;
font-size: 2.5rem;
font-weight: bold;
color: #333;
margin-bottom: 30px;
font-family: "Dancing Script", cursive;
background: linear-gradient(135deg, #ff9933, #138808);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Independence Day Information Modal */
.info-modal {
display: none;
position: fixed;
z-index: 2000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
#ff9933 0%,
#ffffff 25%,
#138808 50%,
#ff9933 75%,
#138808 100%);
background-attachment: fixed;
overflow-y: auto;
}
.info-modal.show {
display: block;
}
.info-modal-content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
color: #333;
line-height: 1.7;
}
.info-close {
color: #fff;
font-size: 35px;
font-weight: bold;
position: fixed;
top: 20px;
right: 30px;
z-index: 2001;
background: rgba(255, 153, 51, 0.9);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.info-close:hover {
background: rgba(19, 136, 8, 0.9);
transform: scale(1.1);
border-color: rgba(255, 255, 255, 0.6);
}
/* Carousel */
.carousel-container {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
.carousel-container::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(45deg, #ff9933, #ffffff, #138808);
border-radius: 23px;
z-index: -1;
}
.carousel {
position: relative;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
}
.carousel-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.carousel-slide.active {
opacity: 1;
}
.carousel-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 153, 51, 0.95);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.nav-button:hover {
background: rgba(255, 153, 51, 1);
transform: translateY(-50%) scale(1.15);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.prev-btn {
left: 20px;
}
.next-btn {
right: 20px;
}
/* Enhanced Select Button */
.select-button {
position: absolute;
top: 20px;
right: 20px;
border: none;
padding: 12px 24px;
border-radius: 25px;
font-size: 1rem;
font-weight: bold;
background: linear-gradient(135deg, #ff9933, #138808);
color: white;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 15;
display: flex;
align-items: center;
gap: 8px;
box-shadow: 0 8px 20px rgba(255, 153, 51, 0.4);
min-width: 120px;
justify-content: center;
}
.select-button:hover:not(.selected) {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 30px rgba(255, 153, 51, 0.6);
}
.select-button.selected {
background: linear-gradient(135deg, #138808, #ff9933);
border-radius: 50%;
width: 40px;
height: 40px;
min-width: 40px;
padding: 0;
transform: scale(1.1);
box-shadow: 0 10px 25px rgba(19, 136, 8, 0.5);
animation: selectSuccess 0.6s ease-in-out;
}
.select-button.selected .select-text {
display: none;
}
.select-button.selected .check-icon {
display: block;
font-size: 18px;
animation: checkBounce 0.6s ease-in-out;
}
.select-button .check-icon {
display: none;
}
@keyframes selectSuccess {
0% {
transform: scale(1);
border-radius: 25px;
}
50% {
transform: scale(1.2);
border-radius: 35px;
}
100% {
transform: scale(1.1);
border-radius: 50%;
}
}
@keyframes checkBounce {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Music Control Button */
.music-control {
position: fixed;
top: 30px;
right: 30px;
padding: 15px;
background: var(--primary-gradient);
color: #333;
border: none;
border-radius: 50%;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 10px 25px rgba(255, 153, 51, 0.4);
z-index: 101;
transition: all 0.3s ease;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.music-control:hover {
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(255, 153, 51, 0.5);
}
.music-control.muted {
background: linear-gradient(135deg, #138808 0%, #ff9933 100%);
color: white;
box-shadow: 0 10px 25px rgba(19, 136, 8, 0.4);
}
/* Music Notification */
.music-notification {
position: fixed;
top: 100px;
right: 30px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 15px 20px;
border-radius: 15px;
color: #fff;
font-size: 0.9rem;
box-shadow: 0 10px 25px rgba(255, 153, 51, 0.3);
z-index: 102;
opacity: 0;
transform: translateX(100px);
transition: all 0.5s ease;
display: flex;
align-items: center;
gap: 10px;
max-width: 250px;
}
.music-notification.show {
opacity: 1;
transform: translateX(0);
}
.musical-note {
animation: musicBounce 1s infinite ease-in-out;
color: #ff9933;
}
@keyframes musicBounce {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
/* Envelope Page Styles */
.envelope-page {
display: none;
height: 100vh;
width: 100%;
justify-content: center;
align-items: center;
position: relative;
background: linear-gradient(135deg,
#ff9933 0%,
#ffffff 25%,
#138808 50%,
#ff9933 75%,
#138808 100%);
background-attachment: fixed;
}
.envelope-page.active {
display: flex;
}
.envelope-container {
position: relative;
z-index: 10;
transition: opacity 1s ease, transform 1s ease;
}
.envelope-container.hidden {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
.wrapper {
height: 180px;
width: 270px;
background: linear-gradient(135deg, #ff9933, #138808);
position: relative;
display: flex;
justify-content: center;
z-index: 10;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.lid {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-right: 135px solid transparent;
border-bottom: 90px solid transparent;
border-left: 135px solid transparent;
transform-origin: top;
transition: transform 0.25s linear;
}
.lid.one {
border-top: 90px solid #ff9933;
transform: rotateX(0deg);
z-index: 3;
transition-delay: 0.75s;
}
.lid.two {
border-top: 90px solid #138808;
transform: rotateX(90deg);
z-index: 1;
transition-delay: 0.5s;
}
.envelope {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
border-top: 90px solid transparent;
border-right: 135px solid #ffffff;
border-bottom: 90px solid #ffffff;
border-left: 135px solid #ffffff;
z-index: 3;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
}
.letter {
position: absolute;
top: 5%;
left: 5%;
width: 90%;
height: 90%;
background-color: white;
border-radius: 10px;
z-index: 2;
transition: all 0.8s ease;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.letter img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.open-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ff9933;
color: white;
border: none;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
font-size: 16px;
z-index: 4;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.open-btn:hover {
transform: translate(-50%, -50%) scale(1.1);
background: #138808;
}
/* Opening Animation */
.wrapper.opening .lid.one {
transform: rotateX(90deg);
transition-delay: 0s;
}
.wrapper.opening .lid.two {
transform: rotateX(180deg);
transition-delay: 0.25s;
}
.wrapper.opening .letter {
transform: translateY(-60px) scale(1.2);
z-index: 10;
transition-delay: 0.3s;
}
.wrapper.opening .open-btn {
opacity: 0;
visibility: hidden;
}
/* Content Container */
.content-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: all 1s ease;
z-index: 20;
width: 90%;
max-width: 450px;
}
.content-container.show {
opacity: 1;
visibility: visible;
}
.content-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border-radius: 20px;
padding: 40px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
position: relative;
}
.content-card::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff9933, #ffffff, #138808);
border-radius: 22px;
z-index: -1;
}
.independence-image {
width: 100%;
max-width: 320px;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 15px;
margin-bottom: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
position: relative;
}
.independence-image::before {
content: "";
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #ff9933, #138808);
border-radius: 17px;
z-index: -1;
}
.download-btn {
background: linear-gradient(135deg, #ff9933 0%, #138808 100%);
color: white;
border: none;
padding: 12px 25px;
border-radius: 20px;
cursor: pointer;
font-size: 14px;
font-weight: bold;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
margin: 15px auto;
justify-content: center;
}
.download-btn:hover {
transform: scale(1.05);
}
.download-btn.loading {
pointer-events: none;
opacity: 0.7;
}
.download-btn.loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.wish-text {
font-size: 1.2rem;
font-weight: 600;
color: #333;
margin: 20px 0;
line-height: 1.5;
font-family: "Dancing Script", cursive;
}
.action-buttons {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 25px;
}
.action-btn {
background: linear-gradient(135deg, #138808 0%, #ff9933 100%);
color: white;
border: none;
padding: 12px 20px;
border-radius: 20px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
transition: all 0.3s ease;
font-family: "Poppins", sans-serif;
}
.action-btn:hover {
transform: translateY(-2px);
}
.action-btn.secondary {
background: linear-gradient(135deg, #ff9933 0%, #138808 100%);
color: white;
}
/* Independence Day Info Content */
.info-content {
font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
color: #333;
line-height: 1.7;
}
.page-header {
text-align: center;
margin-bottom: 60px;
padding: 60px 40px;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95),
rgba(245, 245, 245, 0.95));
border: 2px solid rgba(255, 153, 51, 0.3);
border-radius: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.page-header h1 {
color: #333;
font-size: 3.5rem;
margin-bottom: 20px;
font-weight: 700;
font-family: "Dancing Script", "Noto Sans Devanagari", sans-serif;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.page-header .subtitle {
color: #444;
font-size: 1.4rem;
font-style: italic;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.info-content-card {
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(255, 153, 51, 0.2);
padding: 45px;
border-radius: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
margin-bottom: 40px;
position: relative;
overflow: hidden;
}
.section-title {
color: #333;
font-size: 2rem;
margin-bottom: 25px;
font-weight: 700;
display: flex;
align-items: center;
gap: 15px;
font-family: "Dancing Script", "Noto Sans Devanagari", sans-serif;
border-bottom: 2px solid rgba(255, 153, 51, 0.3);
padding-bottom: 15px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.section-icon {
color: var(--saffron);
font-size: 1.3em;
background: rgba(255, 153, 51, 0.1);
padding: 8px;
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.content-text {
color: #333;
font-size: 1.15rem;
line-height: 1.8;
text-align: justify;
margin-bottom: 20px;
text-shadow: none;
}
.story-box {
background: rgba(255, 153, 51, 0.05);
border: 2px solid rgba(255, 153, 51, 0.2);
border-radius: 15px;
padding: 30px;
color: #333;
font-size: 1.1em;
margin: 25px 0;
}
.highlight-box {
background: rgba(255, 153, 51, 0.1);
border: 2px solid var(--saffron);
border-radius: 15px;
padding: 25px;
margin: 25px 0;
}
.historical-box {
background: rgba(19, 136, 8, 0.1);
border: 2px solid var(--green);
border-radius: 15px;
padding: 30px;
margin: 25px 0;
}
.warning-box {
background: rgba(220, 53, 69, 0.1);
border: 2px solid #dc3545;
border-radius: 15px;
padding: 25px;
margin: 25px 0;
}
.story-title {
font-size: 1.4rem;
font-weight: 600;
color: #333;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
font-family: "Dancing Script", "Noto Sans Devanagari", sans-serif;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.story-icon {
color: var(--saffron);
font-size: 1.2em;
}
.info-table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 2px solid rgba(255, 153, 51, 0.2);
}
.info-table th {
background: var(--primary-gradient);
color: #333;
padding: 20px 18px;
font-weight: 600;
font-size: 1.1rem;
text-align: left;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.info-table td {
padding: 18px;
border-bottom: 1px solid rgba(255, 153, 51, 0.1);
font-size: 1rem;
color: #333;
}
.info-table tr:nth-child(even) {
background: rgba(255, 153, 51, 0.03);
}
.info-table tr:nth-child(odd) {
background: rgba(255, 255, 255, 0.95);
}
h3,
h4 {
font-size: 24px;
font-weight: bold;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
font-family: "Dancing Script", "Noto Sans Devanagari", sans-serif;
}
.quote-box {
background: rgba(255, 153, 51, 0.1);
border-left: 4px solid var(--saffron);
padding: 25px;
margin: 25px 0;
border-radius: 8px;
font-style: italic;
font-size: 1.2rem;
color: #333;
}
.color-indicator {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 8px;
vertical-align: middle;
border: 2px solid rgba(51, 51, 51, 0.3);
}
.saffron-color {
background-color: var(--saffron);
}
.white-color {
background-color: var(--white);
}
.green-color {
background-color: var(--green);
}
.blue-color {
background-color: #000080;
}
/* Toast Notification */
.toast {
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #ff9933, #138808);
color: #fff;
padding: 15px 25px;
border-radius: 12px;
box-shadow: 0 15px 30px rgba(255, 153, 51, 0.3);
transform: translateX(400px);
transition: all 0.4s ease;
z-index: 1000;
font-weight: 600;
display: flex;
align-items: center;
}
.toast.show {
transform: translateX(0);
}
.hidden {
display: none;
}
/* Loading Spinner */
.loading-spinner {
width: 20px;
height: 20px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top: 2px solid #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Responsive Design */
@media (max-width: 768px) {
body {
padding-bottom: 90px;
/* More space for footer ad on mobile */
}
.container {
padding: 15px;
}
.form-section {
padding: 30px 20px;
}
.btn {
padding: 12px 25px;
font-size: 1rem;
width: 100%;
margin: 8px 0;
}
.name-input {
padding: 14px 18px;
font-size: 1rem;
}
.modal {
padding: 15px;
align-items: center;
}
.modal-content {
width: 100%;
max-width: 95vw;
max-height: 85vh;
padding: 20px;
border-radius: 20px;
}
.modal-title {
font-size: 1.8rem;
margin-bottom: 20px;
}
.carousel-container {
border-radius: 15px;
}
.nav-button {
width: 40px;
height: 40px;
font-size: 16px;
}
.prev-btn {
left: 15px;
}
.next-btn {
right: 15px;
}
.select-button {
padding: 10px 20px;
font-size: 0.9rem;
top: 15px;
right: 15px;
min-width: 100px;
}
.select-button.selected {
width: 30px;
height: 30px;
min-width: 40px;
}
.music-control {
top: 20px;
right: 20px;
width: 50px;
height: 50px;
padding: 12px;
font-size: 1rem;
}
.music-notification {
top: 80px;
right: 20px;
max-width: 200px;
padding: 12px 15px;
font-size: 0.8rem;
}
.wrapper {
height: 140px;
width: 210px;
}
.lid {
border-right: 105px solid transparent;
border-left: 105px solid transparent;
border-bottom: 70px solid transparent;
}
.lid.one {
border-top: 70px solid #ff9933;
}
.lid.two {
border-top: 70px solid #138808;
}
.envelope {
border-top: 70px solid transparent;
border-right: 105px solid #ffffff;
border-bottom: 70px solid #ffffff;
border-left: 105px solid #ffffff;
}
.content-card {
padding: 20px;
margin: 0 10px;
}
.independence-image {
height: 180px;
}
.wish-text {
font-size: 1.1rem;
}
.info-close {
top: 15px;
right: 20px;
width: 45px;
height: 45px;
font-size: 30px;
}
.info-modal-content {
padding: 15px;
}
.page-header {
padding: 40px 25px;
}
.page-header h1 {
font-size: 2.5rem;
}
.info-content-card {
padding: 30px 25px;
}
.section-title {
font-size: 1.7rem;
flex-direction: column;
text-align: center;
gap: 10px;
}
}
@media (max-width: 480px) {
body {
padding-bottom: 100px;
/* Even more space for footer ad on small mobile */
}
.header h1 {
font-size: 2rem;
}
.flag-img-header {
width: 30px;
height: 22px;
}
.form-section {
padding: 25px 15px;
}
.modal {
padding: 10px;
}
.modal-content {
padding: 15px;
border-radius: 15px;
}
.modal-title {
font-size: 1.5rem;
margin-bottom: 15px;
}
.nav-button {
width: 35px;
height: 35px;
font-size: 14px;
}
.prev-btn {
left: 10px;
}
.next-btn {
right: 10px;
}
.select-button {
padding: 8px 16px;
font-size: 0.8rem;
top: 10px;
right: 10px;
min-width: 80px;
}
.select-button.selected {
width: 30px;
height: 30px;
min-width: 30px;
}
.wrapper {
height: 120px;
width: 180px;
}
.lid {
border-right: 90px solid transparent;
border-left: 90px solid transparent;
border-bottom: 60px solid transparent;
}
.lid.one {
border-top: 60px solid #ff9933;
}
.lid.two {
border-top: 60px solid #138808;
}
.envelope {
border-top: 60px solid transparent;
border-right: 90px solid #ffffff;
border-bottom: 60px solid #ffffff;
border-left: 90px solid #ffffff;
}
.open-btn {
width: 40px;
height: 40px;
font-size: 14px;
}
.independence-image {
height: 160px;
}
.info-close {
top: 10px;
right: 15px;
width: 40px;
height: 40px;
font-size: 25px;
}
.content-text {
font-size: 1rem;
}
.info-table th,
.info-table td {
padding: 12px 10px;
font-size: 0.9rem;
}
.story-box,
.highlight-box,
.historical-box,
.warning-box {
padding: 20px;
}
}
@media (max-height: 600px) and (max-width: 768px) {
.modal-content {
max-height: 95vh;
padding: 15px;
}
.modal-title {
font-size: 1.5rem;
margin-bottom: 15px;
}
}
a:visited {
color: white;
}
JavaScript Code
// Music variables - Simplified to use only one song
let isMusicPlaying = false;
let backgroundMusic = null;
// Download flag to prevent double downloads
let isDownloading = false;
// Footer Ad functions
function closeFooterAd() {
const footerAdContainer = document.getElementById("footerAdContainer");
if (footerAdContainer) {
footerAdContainer.classList.add("hidden");
// Adjust body padding when ad is closed
document.body.style.paddingBottom = "20px";
}
}
// Initialize music when page loads
function initializeMusic() {
backgroundMusic = document.getElementById("backgroundMusic");
if (backgroundMusic) {
backgroundMusic.volume = 0.3;
document.addEventListener(
"click",
function playMusicOnFirstInteraction() {
if (!isMusicPlaying) {
playMusic();
}
document.removeEventListener(
"click",
playMusicOnFirstInteraction
);
},
{ once: true }
);
backgroundMusic
.play()
.then(() => {
isMusicPlaying = true;
updateMusicButton();
showMusicNotification(
"\u0926\u0947\u0936\u092D\u0915\u094D\u0924\u093F \u0938\u0902\u0917\u0940\u0924 \u091A\u0932 \u0930\u0939\u093E \u0939\u0948"
);
})
.catch((error) => {
console.log("Autoplay prevented, waiting for user interaction");
});
}
}
function playMusic() {
if (backgroundMusic && !isMusicPlaying) {
backgroundMusic
.play()
.then(() => {
isMusicPlaying = true;
updateMusicButton();
showMusicNotification(
"\u0926\u0947\u0936\u092D\u0915\u094D\u0924\u093F \u0938\u0902\u0917\u0940\u0924 \u091A\u0932 \u0930\u0939\u093E \u0939\u0948"
);
})
.catch((error) => {
console.log("Could not play music:", error);
});
}
}
// Toggle music function
function toggleMusic() {
if (isMusicPlaying) {
backgroundMusic.pause();
isMusicPlaying = false;
hideMusicNotification();
} else {
playMusic();
}
updateMusicButton();
}
// Update music button appearance
function updateMusicButton() {
const musicControl = document.getElementById("musicControl");
const icon = musicControl.querySelector("i");
if (isMusicPlaying) {
icon.className = "fas fa-music";
musicControl.classList.remove("muted");
musicControl.title =
"\u0938\u0902\u0917\u0940\u0924 \u092C\u0902\u0926 \u0915\u0930\u0947\u0902";
} else {
icon.className = "fas fa-volume-mute";
musicControl.classList.add("muted");
musicControl.title =
"\u0938\u0902\u0917\u0940\u0924 \u091A\u093E\u0932\u0942 \u0915\u0930\u0947\u0902";
}
}
// Show music notification
function showMusicNotification(message) {
const notification = document.getElementById("musicNotification");
if (notification) {
notification.querySelector("span").textContent = message;
notification.classList.add("show");
setTimeout(() => {
notification.classList.remove("show");
}, 4000);
}
}
// Hide music notification
function hideMusicNotification() {
const notification = document.getElementById("musicNotification");
if (notification) {
notification.classList.remove("show");
}
}
// Independence Day messages
const independenceMessages = {
baseTemplate:
"\u0906\u092A\u0915\u094B \u0938\u094D\u0935\u0924\u0902\u0924\u094D\u0930\u0924\u093E \u0926\u093F\u0935\u0938 \u0915\u0940 \u0939\u093E\u0930\u094D\u0926\u093F\u0915 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E\u090F\u0902",
colors: ["#FF9933", "#FFFFFF", "#138808"],
toast: {
linkCopied:
"\u0932\u093F\u0902\u0915 \u0938\u092B\u0932\u0924\u093E\u092A\u0942\u0930\u094D\u0935\u0915 \u0915\u0949\u092A\u0940 \u0939\u094B \u0917\u092F\u093E!",
templateSelected:
"\u091F\u0947\u092E\u094D\u092A\u094D\u0932\u0947\u091F \u0938\u0947\u0932\u0947\u0915\u094D\u091F \u0939\u094B \u0917\u092F\u093E! \ud83c\udfa8",
wishGenerated:
"\u0938\u094D\u0935\u0924\u0902\u0924\u094D\u0930\u0924\u093E \u0926\u093F\u0935\u0938 \u0915\u0940 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E \u0924\u0948\u092F\u093E\u0930 \u0939\u094B \u0917\u0908!",
enterName:
"\u0915\u0943\u092A\u092F\u093E \u0905\u092A\u0928\u093E \u0928\u093E\u092E \u0926\u0930\u094D\u091C \u0915\u0930\u0947\u0902! \ud83d\ude4f",
},
wishes: {
ready:
"\ud83c\udf89 \u0906\u092A\u0915\u0940 \u0938\u094D\u0935\u0924\u0902\u0924\u094D\u0930\u0924\u093E \u0926\u093F\u0935\u0938 \u0915\u0940 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E\u090F\u0902 \u0924\u0948\u092F\u093E\u0930 \u0939\u0948\u0902!",
copyLink:
"\ud83d\udccb \u0932\u093F\u0902\u0915 \u0915\u0949\u092A\u0940 \u0915\u0930\u0947\u0902",
shareWhatsApp:
"\ud83d\udcf1 \u0935\u094D\u0939\u093E\u091F\u094D\u0938\u0905\u092A \u092A\u0930 \u092D\u0947\u091C\u0947\u0902",
newWish:
"\ud83c\udfe0 \u0928\u0908 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E \u092C\u0928\u093E\u090F\u0902",
wishText:
"\u0928\u0947 \u0906\u092A\u0915\u094B \u0938\u094D\u0935\u0924\u0902\u0924\u094D\u0930\u0924\u093E \u0926\u093F\u0935\u0938 \u0915\u0940 \u0939\u093E\u0930\u094D\u0926\u093F\u0915 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E\u090F\u0902 \u092D\u0947\u091C\u0940 \u0939\u0948\u0902!",
aboutIndependence:
"\u0938\u094D\u0935\u0924\u0902\u0924\u094D\u0930\u0924\u093E \u0926\u093F\u0935\u0938 \u0915\u0947 \u092C\u093E\u0930\u0947 \u092E\u0947\u0902 \u091C\u093E\u0928\u0947\u0902",
downloadError:
"\u0921\u093E\u0909\u0928\u0932\u094B\u0921 \u092E\u0947\u0902 \u0938\u092E\u0938\u094D\u092F\u093E",
shareError:
"\u0936\u0947\u092F\u0930 \u092E\u0947\u0902 \u0938\u092E\u0938\u094D\u092F\u093E",
copyError:
"\u0915\u0949\u092A\u0940 \u092E\u0947\u0902 \u0938\u092E\u0938\u094D\u092F\u093E",
},
};
// Template Images - Independence Day themed
const templateImages = [
"https://i.postimg.cc/zXhTtJ6y/16.webp",
"https://i.postimg.cc/ZRy8ypk5/17.webp",
"https://i.postimg.cc/Y0Rh4CSS/18.webp",
"https://i.postimg.cc/1XmzZ1K1/19.webp",
"https://i.postimg.cc/rssLJVJs/20.webp",
"https://i.postimg.cc/7PzvqWWp/21.webp",
"https://i.postimg.cc/wTYCMkK3/22.webp",
"https://i.postimg.cc/y8V2XY8H/23.webp",
"https://i.postimg.cc/K8Jw9S1g/24.webp",
"https://i.postimg.cc/7h8WCqWj/25.webp",
"https://i.postimg.cc/kGvfBK8t/26.webp",
"https://i.postimg.cc/VLsFKSnD/27.webp",
"https://i.postimg.cc/Wz1JwkCZ/29.webp",
"https://i.postimg.cc/283Zqn4R/28.webp",
];
// Global variables
let currentSlide = 0;
let selectedTemplate = null;
let isEnvelopeOpened = false;
let userName = "";
let selectedImage = "";
// Check page mode
function checkPageMode() {
const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get("name");
if (name) {
document.getElementById("formPage").classList.add("hidden");
document.getElementById("envelopePage").classList.add("active");
initializeEnvelopePage();
} else {
document.getElementById("formPage").classList.remove("hidden");
document.getElementById("envelopePage").classList.remove("active");
initializeFormPage();
}
}
// Initialize Form Page
function initializeFormPage() {
createTricolorParticles();
initializeEventListeners();
initializeMusic();
}
// Initialize Envelope Page
function initializeEnvelopePage() {
const urlParams = new URLSearchParams(window.location.search);
userName =
urlParams.get("name") ||
"\u0915\u094B\u0908 \u0916\u093E\u0938 \u0935\u094D\u092F\u0915\u094D\u0924\u093F";
const templateIndex = urlParams.get("template");
if (
templateIndex !== null &&
templateIndex >= 0 &&
templateIndex < templateImages.length
) {
selectedImage = templateImages[parseInt(templateIndex)];
} else {
selectedImage = templateImages[0];
}
document.getElementById("envelope-image").src = selectedImage;
document.getElementById("main-image").src = selectedImage;
document.getElementById("wish-text").textContent =
userName + " " + independenceMessages.wishes.wishText;
createTricolorParticles("envelopeParticlesContainer");
initializeEnvelopeEvents();
initializeMusic();
}
// Tricolor particle system
function createTricolorParticles(containerId = "particlesContainer") {
const container = document.getElementById(containerId);
if (!container) return;
// Clear existing particles
container.innerHTML = "";
const colors = ["saffron", "white", "green"];
for (let i = 0; i < 30; i++) {
const particle = document.createElement("div");
particle.className = `particle ${colors[i % 3]}`;
particle.style.left = Math.random() * 100 + "%";
particle.style.top = Math.random() * 100 + "%";
particle.style.animationDelay = Math.random() * 10 + "s";
particle.style.animationDuration = Math.random() * 5 + 8 + "s";
container.appendChild(particle);
}
}
// Initialize envelope events
function initializeEnvelopeEvents() {
const openBtn = document.getElementById("open-btn");
const downloadBtn = document.getElementById("download-btn");
const envelopeWrapper = document.getElementById("envelope-wrapper");
const envelopeContainer = document.getElementById("envelope-container");
const contentContainer = document.getElementById("content-container");
openBtn.addEventListener("click", function () {
if (!isEnvelopeOpened) {
isEnvelopeOpened = true;
envelopeWrapper.classList.add("opening");
setTimeout(() => {
envelopeContainer.classList.add("hidden");
setTimeout(() => {
contentContainer.classList.add("show");
}, 500);
}, 2000);
}
});
downloadBtn.addEventListener("click", function () {
downloadImage();
});
}
// Modal Functions
function openTemplateModal() {
const modal = document.getElementById("templateModal");
if (modal) {
createTricolorParticles("modalParticlesContainer");
modal.classList.remove("hidden");
modal.classList.add("show");
document.body.style.overflow = "hidden";
showSlide(0);
}
}
function closeTemplateModal() {
const modal = document.getElementById("templateModal");
if (modal) {
modal.classList.remove("show");
document.body.style.overflow = "auto";
setTimeout(() => {
modal.classList.add("hidden");
}, 300);
const selectBtn = document.querySelector(".select-button");
if (selectBtn && selectBtn.classList.contains("selected")) {
resetSelectButton();
}
}
}
// Info Modal Functions
function showIndependenceDayInfo() {
const infoModal = document.getElementById("infoModal");
if (infoModal) {
createTricolorParticles("infoModalParticlesContainer");
infoModal.classList.add("show");
document.body.style.overflow = "hidden";
}
}
function closeInfoModal() {
const infoModal = document.getElementById("infoModal");
if (infoModal) {
infoModal.classList.remove("show");
document.body.style.overflow = "auto";
}
}
// Select Template Function
function selectTemplate() {
const selectBtn = document.querySelector(".select-button");
const templateBtn = document.getElementById("chooseTemplateBtn");
const templateBtnText = document.getElementById("templateBtnText");
if (selectBtn && !selectBtn.classList.contains("selected")) {
selectBtn.classList.add("selected");
selectedTemplate = templateImages[currentSlide];
templateBtn.classList.add("selected");
templateBtnText.innerHTML =
"\u0906\u092A\u0915\u093E \u092B\u094B\u091F\u094B \u091A\u0941\u0928 \u0932\u093F\u092F\u093E \u0917\u092F\u093E \u0939\u0948\u0964";
setTimeout(() => {
showToast(independenceMessages.toast.templateSelected);
setTimeout(() => {
closeTemplateModal();
}, 1000);
}, 600);
}
}
// Reset select button
function resetSelectButton() {
const selectBtn = document.querySelector(".select-button");
if (selectBtn) {
selectBtn.classList.remove("selected");
}
}
// Carousel Functions
function showSlide(index) {
const slides = document.querySelectorAll(".carousel-slide");
slides.forEach((slide) => slide.classList.remove("active"));
if (slides[index]) {
slides[index].classList.add("active");
}
resetSelectButton();
}
function nextSlide() {
const slides = document.querySelectorAll(".carousel-slide");
currentSlide = (currentSlide + 1) % slides.length;
showSlide(currentSlide);
}
function prevSlide() {
const slides = document.querySelectorAll(".carousel-slide");
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
showSlide(currentSlide);
}
// Generate Independence Day Link
function generateIndependenceLink() {
const userNameInput = document.getElementById("userName");
const btnText = document.getElementById("btnText");
const loadingSpinner = document.getElementById("loadingSpinner");
if (!userNameInput) return;
const userName = userNameInput.value.trim();
if (!userName) {
showToast(independenceMessages.toast.enterName);
return;
}
if (btnText) btnText.classList.add("hidden");
if (loadingSpinner) loadingSpinner.classList.remove("hidden");
setTimeout(function () {
const currentUrl = window.location.origin + window.location.pathname;
let greetingUrl =
currentUrl + "?name=" + encodeURIComponent(userName);
if (selectedTemplate) {
const templateIndex = templateImages.indexOf(selectedTemplate);
greetingUrl += "&template=" + templateIndex;
}
const linkDisplay = document.getElementById("linkDisplay");
if (linkDisplay) {
linkDisplay.textContent = greetingUrl;
}
const generatedLink = document.getElementById("generatedLink");
if (generatedLink) {
generatedLink.classList.remove("hidden");
}
if (btnText) btnText.classList.remove("hidden");
if (loadingSpinner) loadingSpinner.classList.add("hidden");
showToast(independenceMessages.toast.wishGenerated);
}, 1000);
}
// Copy to Clipboard
function copyToClipboard() {
const linkDisplay = document.getElementById("linkDisplay");
if (!linkDisplay) return;
const linkText = linkDisplay.textContent || linkDisplay.innerText;
if (navigator.clipboard) {
navigator.clipboard
.writeText(linkText)
.then(function () {
showToast(independenceMessages.toast.linkCopied);
})
.catch(function () {
fallbackCopyTextToClipboard(linkText);
});
} else {
fallbackCopyTextToClipboard(linkText);
}
}
function fallbackCopyTextToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-999999px";
textArea.style.top = "-999999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand("copy");
showToast(independenceMessages.toast.linkCopied);
} catch (err) {
showToast(independenceMessages.wishes.copyError);
}
textArea.remove();
}
// WhatsApp Share
function shareOnWhatsApp() {
const linkDisplay = document.getElementById("linkDisplay");
if (!linkDisplay) return;
const linkText = linkDisplay.textContent || linkDisplay.innerText;
try {
const urlParams = new URLSearchParams(linkText.split("?")[1]);
const userName =
urlParams.get("name") || "\u0915\u093F\u0938\u0940 \u0928\u0947";
const message =
userName +
" " +
independenceMessages.wishes.wishText +
"\n\n\u2728\u092F\u0939\u093E\u0901 \u0926\u0947\u0916\u0947\u0902: " +
linkText +
"\n\n\ud83c\uddee\ud83c\uddf3 \u0938\u094D\u0935\u0924\u0902\u0924\u094D\u0930\u0924\u093E \u0926\u093F\u0935\u0938 \u0915\u0940 \u0939\u093E\u0930\u094D\u0926\u093F\u0915 \u0936\u0941\u092D\u0915\u093E\u092E\u0928\u093E\u090F\u0902! \ud83c\uddee\ud83c\uddf3";
const whatsappUrl =
"https://wa.me/?text=" + encodeURIComponent(message);
window.open(whatsappUrl, "_blank");
} catch (e) {
showToast(independenceMessages.wishes.shareError);
}
}
// Show Toast
function showToast(message) {
const toast = document.getElementById("toast");
if (!toast) return;
toast.textContent = message;
toast.classList.add("show");
setTimeout(function () {
toast.classList.remove("show");
}, 3000);
}
// Download Image Function
function downloadImage() {
if (isDownloading) {
return;
}
isDownloading = true;
const downloadBtn = document.getElementById("download-btn");
downloadBtn.classList.add("loading");
downloadBtn.innerHTML = '<i class="fas fa-spinner"></i> Downloading...';
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
const img = new Image();
img.crossOrigin = "anonymous";
img.onload = null;
img.onerror = null;
img.onload = function () {
try {
const aspectRatio = 16 / 9;
let canvasWidth = img.naturalWidth;
let canvasHeight = img.naturalHeight;
if (canvasWidth / canvasHeight > aspectRatio) {
canvasWidth = canvasHeight * aspectRatio;
} else {
canvasHeight = canvasWidth / aspectRatio;
}
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const x = (img.naturalWidth - canvasWidth) / 2;
const y = (img.naturalHeight - canvasHeight) / 2;
ctx.drawImage(
img,
x,
y,
canvasWidth,
canvasHeight,
0,
0,
canvasWidth,
canvasHeight
);
canvas.toBlob(
function (blob) {
if (blob) {
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.href = url;
link.download = "independence-day-" + Date.now() + ".jpg";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
resetDownloadButton();
} else {
fallbackDownload();
}
},
"image/jpeg",
0.95
);
} catch (error) {
console.error("Canvas download error:", error);
fallbackDownload();
}
};
img.onerror = function () {
console.error("Image load error");
fallbackDownload();
};
img.src = selectedImage;
}
function fallbackDownload() {
try {
const link = document.createElement("a");
link.href = selectedImage;
link.download = "independence-day-" + Date.now() + ".jpg";
link.target = "_blank";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
resetDownloadButton();
} catch (error) {
console.error("Fallback download error:", error);
resetDownloadButton();
}
}
function resetDownloadButton() {
const downloadBtn = document.getElementById("download-btn");
setTimeout(() => {
downloadBtn.classList.remove("loading");
downloadBtn.innerHTML =
'<i class="fas fa-download"></i> Download Image';
isDownloading = false;
}, 1000);
}
function createNewWish() {
// Close info modal if open
closeInfoModal();
// Go to form page
window.location.href = window.location.pathname;
}
// Event Listeners
function initializeEventListeners() {
const userName = document.getElementById("userName");
if (userName) {
userName.addEventListener("keypress", function (e) {
if (e.key === "Enter") {
generateIndependenceLink();
}
});
}
}
// Keyboard navigation for modal
document.addEventListener("keydown", function (e) {
const templateModal = document.getElementById("templateModal");
const infoModal = document.getElementById("infoModal");
if (templateModal && templateModal.classList.contains("show")) {
if (e.key === "ArrowLeft") {
prevSlide();
} else if (e.key === "ArrowRight") {
nextSlide();
} else if (e.key === "Escape") {
closeTemplateModal();
} else if (e.key === "Enter") {
selectTemplate();
}
}
if (infoModal && infoModal.classList.contains("show")) {
if (e.key === "Escape") {
closeInfoModal();
}
}
});
// Touch support for mobile
let startX = 0;
function initializeTouchEvents() {
const carouselContainer = document.querySelector(".carousel-container");
if (carouselContainer) {
carouselContainer.addEventListener("touchstart", function (e) {
startX = e.touches[0].clientX;
});
carouselContainer.addEventListener("touchend", function (e) {
if (!startX) return;
const endX = e.changedTouches[0].clientX;
const diffX = startX - endX;
if (Math.abs(diffX) > 50) {
if (diffX > 0) {
nextSlide();
} else {
prevSlide();
}
}
startX = 0;
});
}
}
// Close modal when clicking outside
window.onclick = function (event) {
const templateModal = document.getElementById("templateModal");
const infoModal = document.getElementById("infoModal");
if (event.target === templateModal) {
closeTemplateModal();
}
if (event.target === infoModal) {
closeInfoModal();
}
};
// Initialize Page on Load
window.addEventListener("load", function () {
checkPageMode();
initializeTouchEvents();
});
// Handle browser navigation
window.addEventListener("popstate", function () {
checkPageMode();
});
// DOM Content Loaded fallback
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function () {
checkPageMode();
});
} else {
checkPageMode();
}
// Handle music events
document.addEventListener("DOMContentLoaded", function () {
if (backgroundMusic) {
backgroundMusic.addEventListener("ended", function () {
isMusicPlaying = true; // Keep looping
});
backgroundMusic.addEventListener("pause", function () {
isMusicPlaying = false;
updateMusicButton();
});
backgroundMusic.addEventListener("play", function () {
isMusicPlaying = true;
updateMusicButton();
});
}
});
// Prevent right-click on music elements
document.addEventListener("contextmenu", function (e) {
if (e.target.id === "backgroundMusic") {
e.preventDefault();
}
});
Comments
Post a Comment