Created
August 1, 2026 11:09
-
-
Save m79411418-del/c01340421504db75f8e169b5fa7a7a26 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>عيد ميلاد سعيد يا زينب 🎂</title> | |
| <style> | |
| /* ===== RESET & BASE ===== */ | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| width: 100%; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| position: relative; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| direction: rtl; | |
| } | |
| /* ===== ANIMATED GRADIENT BACKGROUND ===== */ | |
| .bg-animation { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| background: linear-gradient(-45deg, #ffeef8, #f3e5f5, #fff0f5, #fafafa, #f8f4ff); | |
| background-size: 400% 400%; | |
| animation: gradientShift 15s ease infinite; | |
| z-index: 0; | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| /* ===== BALLOONS ===== */ | |
| .balloons-container { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| z-index: 1; | |
| overflow: hidden; | |
| } | |
| .balloon { | |
| position: absolute; | |
| bottom: -120px; | |
| width: 50px; | |
| height: 65px; | |
| border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; | |
| opacity: 0.7; | |
| animation: floatUp linear infinite; | |
| } | |
| .balloon::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 2px; | |
| height: 40px; | |
| background: rgba(0,0,0,0.2); | |
| } | |
| .balloon::before { | |
| content: ''; | |
| position: absolute; | |
| top: 8px; | |
| left: 12px; | |
| width: 12px; | |
| height: 18px; | |
| border-radius: 50%; | |
| background: rgba(255,255,255,0.4); | |
| transform: rotate(30deg); | |
| } | |
| @keyframes floatUp { | |
| 0% { transform: translateY(0) rotate(-5deg); opacity: 0.7; } | |
| 25% { transform: translateY(-25vh) rotate(5deg); } | |
| 50% { transform: translateY(-50vh) rotate(-3deg); } | |
| 75% { transform: translateY(-75vh) rotate(4deg); } | |
| 100% { transform: translateY(-120vh) rotate(-2deg); opacity: 0; } | |
| } | |
| /* ===== PARTICLES (CONFETTI, STARS, HEARTS) ===== */ | |
| .particles-container { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| z-index: 2; | |
| overflow: hidden; | |
| } | |
| .particle { | |
| position: absolute; | |
| pointer-events: none; | |
| animation: fall linear infinite; | |
| } | |
| .confetti { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 2px; | |
| } | |
| .star { | |
| color: #ffd700; | |
| font-size: 14px; | |
| text-shadow: 0 0 8px rgba(255,215,0,0.6); | |
| } | |
| .heart-particle { | |
| color: #ff69b4; | |
| font-size: 16px; | |
| text-shadow: 0 0 10px rgba(255,105,180,0.5); | |
| } | |
| @keyframes fall { | |
| 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } | |
| 100% { transform: translateY(105vh) rotate(720deg); opacity: 0; } | |
| } | |
| /* ===== MOUSE EFFECTS ===== */ | |
| .mouse-effects { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| pointer-events: none; | |
| z-index: 3; | |
| } | |
| .mouse-heart, .mouse-bubble { | |
| position: absolute; | |
| pointer-events: none; | |
| animation: mouseFloat 1.5s ease-out forwards; | |
| } | |
| .mouse-heart { | |
| color: #ff69b4; | |
| font-size: 20px; | |
| text-shadow: 0 0 10px rgba(255,105,180,0.6); | |
| } | |
| .mouse-bubble { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: rgba(255,182,193,0.5); | |
| border: 1px solid rgba(255,255,255,0.6); | |
| } | |
| @keyframes mouseFloat { | |
| 0% { transform: translate(0,0) scale(1); opacity: 1; } | |
| 100% { transform: translate(var(--tx), -80px) scale(0.3); opacity: 0; } | |
| } | |
| /* ===== CONTENT WRAPPER ===== */ | |
| .content-wrapper { | |
| position: relative; | |
| z-index: 10; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .hidden { display: none !important; } | |
| /* ===== WELCOME SCREEN ===== */ | |
| .welcome-screen { | |
| text-align: center; | |
| animation: fadeIn 1s ease; | |
| } | |
| .typewriter { | |
| font-size: clamp(1.8rem, 5vw, 3.5rem); | |
| color: #8b5a8c; | |
| font-weight: 700; | |
| min-height: 80px; | |
| text-shadow: 2px 2px 4px rgba(139,90,140,0.2); | |
| letter-spacing: 1px; | |
| } | |
| .typewriter::after { | |
| content: '|'; | |
| animation: blink 0.8s infinite; | |
| color: #d4af37; | |
| margin-right: 4px; | |
| } | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0; } | |
| } | |
| .sparkles { | |
| font-size: 3rem; | |
| margin-top: 20px; | |
| animation: sparklePulse 2s ease-in-out infinite; | |
| } | |
| @keyframes sparklePulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.8; } | |
| 50% { transform: scale(1.3); opacity: 1; } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* ===== MAIN CONTENT ===== */ | |
| .main-content { | |
| text-align: center; | |
| animation: fadeIn 0.8s ease; | |
| } | |
| .surprise-btn { | |
| position: relative; | |
| padding: 18px 45px; | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| color: #fff; | |
| background: linear-gradient(135deg, #e1bee7, #f8bbd0); | |
| border: none; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| overflow: hidden; | |
| box-shadow: 0 8px 25px rgba(225,190,231,0.4), 0 0 0 4px rgba(255,255,255,0.3); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| font-family: inherit; | |
| } | |
| .surprise-btn:hover { | |
| transform: translateY(-5px) scale(1.05); | |
| box-shadow: 0 15px 35px rgba(225,190,231,0.6), 0 0 0 6px rgba(255,255,255,0.4); | |
| } | |
| .surprise-btn:active { | |
| transform: translateY(-2px) scale(0.98); | |
| } | |
| .btn-shine { | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); | |
| transition: left 0.6s; | |
| } | |
| .surprise-btn:hover .btn-shine { | |
| left: 100%; | |
| } | |
| .sound-toggle { | |
| position: fixed; | |
| top: 20px; | |
| left: 20px; | |
| width: 45px; | |
| height: 45px; | |
| border-radius: 50%; | |
| border: 2px solid rgba(139,90,140,0.3); | |
| background: rgba(255,255,255,0.8); | |
| backdrop-filter: blur(10px); | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| z-index: 100; | |
| } | |
| .sound-toggle:hover { | |
| transform: scale(1.1); | |
| background: rgba(255,255,255,0.95); | |
| box-shadow: 0 4px 15px rgba(139,90,140,0.2); | |
| } | |
| /* ===== COUNTDOWN ===== */ | |
| .countdown-screen { | |
| position: fixed; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 50; | |
| background: rgba(255,255,255,0.3); | |
| backdrop-filter: blur(5px); | |
| } | |
| .countdown-number { | |
| font-size: 8rem; | |
| font-weight: 800; | |
| color: #8b5a8c; | |
| text-shadow: 0 0 30px rgba(139,90,140,0.3); | |
| animation: countPulse 1s ease-in-out; | |
| } | |
| @keyframes countPulse { | |
| 0% { transform: scale(2); opacity: 0; } | |
| 50% { transform: scale(1); opacity: 1; } | |
| 100% { transform: scale(0.8); opacity: 0.5; } | |
| } | |
| /* ===== CELEBRATION SCREEN ===== */ | |
| .celebration-screen { | |
| text-align: center; | |
| animation: fadeIn 1s ease; | |
| width: 100%; | |
| max-width: 600px; | |
| } | |
| /* ===== 3D CAKE ===== */ | |
| .cake-container { | |
| position: relative; | |
| margin: 0 auto 30px; | |
| width: 220px; | |
| height: 200px; | |
| } | |
| .cake { | |
| position: relative; | |
| width: 200px; | |
| margin: 0 auto; | |
| animation: cakeBounce 2s ease-in-out infinite; | |
| } | |
| @keyframes cakeBounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-8px); } | |
| } | |
| .cake-base { | |
| position: relative; | |
| } | |
| .cake-layer { | |
| margin: 0 auto; | |
| border-radius: 8px; | |
| position: relative; | |
| box-shadow: 0 4px 15px rgba(0,0,0,0.1); | |
| } | |
| .layer-3 { | |
| width: 180px; | |
| height: 45px; | |
| background: linear-gradient(180deg, #f8bbd0 0%, #f48fb1 100%); | |
| border-radius: 8px 8px 4px 4px; | |
| } | |
| .layer-2 { | |
| width: 140px; | |
| height: 40px; | |
| background: linear-gradient(180deg, #e1bee7 0%, #ce93d8 100%); | |
| margin-top: -5px; | |
| border-radius: 6px 6px 3px 3px; | |
| } | |
| .layer-1 { | |
| width: 100px; | |
| height: 35px; | |
| background: linear-gradient(180deg, #fff9c4 0%, #fff176 100%); | |
| margin-top: -4px; | |
| border-radius: 5px 5px 2px 2px; | |
| } | |
| .frosting { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| pointer-events: none; | |
| } | |
| .drip { | |
| position: absolute; | |
| width: 15px; | |
| background: #fff; | |
| border-radius: 0 0 10px 10px; | |
| opacity: 0.9; | |
| } | |
| .d1 { height: 18px; left: 20px; top: 38px; } | |
| .d2 { height: 25px; left: 55px; top: 38px; } | |
| .d3 { height: 15px; left: 90px; top: 38px; } | |
| .d4 { height: 22px; left: 125px; top: 38px; } | |
| .d5 { height: 16px; left: 155px; top: 38px; } | |
| .candles { | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| display: flex; | |
| gap: 25px; | |
| } | |
| .candle { | |
| width: 8px; | |
| height: 30px; | |
| background: linear-gradient(180deg, #fff 0%, #f8bbd0 100%); | |
| border-radius: 3px 3px 0 0; | |
| position: relative; | |
| } | |
| .candle::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -6px; | |
| left: -3px; | |
| width: 14px; | |
| height: 6px; | |
| background: #f8bbd0; | |
| border-radius: 3px; | |
| } | |
| .flame { | |
| position: absolute; | |
| top: -18px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 12px; | |
| height: 18px; | |
| background: radial-gradient(ellipse at 50% 80%, #ff9800 0%, #ff5722 40%, transparent 70%); | |
| border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; | |
| animation: flicker 0.5s ease-in-out infinite alternate; | |
| opacity: 0; | |
| } | |
| .candle.lit .flame { | |
| opacity: 1; | |
| } | |
| .glow { | |
| position: absolute; | |
| top: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 30px; | |
| height: 30px; | |
| background: radial-gradient(circle, rgba(255,152,0,0.4) 0%, transparent 70%); | |
| border-radius: 50%; | |
| opacity: 0; | |
| animation: glowPulse 1s ease-in-out infinite alternate; | |
| } | |
| .candle.lit .glow { | |
| opacity: 1; | |
| } | |
| @keyframes flicker { | |
| 0% { transform: translateX(-50%) scale(1) rotate(-2deg); } | |
| 100% { transform: translateX(-50%) scale(1.1) rotate(2deg); } | |
| } | |
| @keyframes glowPulse { | |
| 0% { transform: translateX(-50%) scale(1); opacity: 0.6; } | |
| 100% { transform: translateX(-50%) scale(1.3); opacity: 0.9; } | |
| } | |
| .sprinkles { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| pointer-events: none; | |
| } | |
| .sprinkles span { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| animation: sprinkleGlow 2s ease-in-out infinite; | |
| } | |
| .sprinkles span:nth-child(1) { background: #ff69b4; top: 15px; left: 30px; animation-delay: 0s; } | |
| .sprinkles span:nth-child(2) { background: #ffd700; top: 25px; left: 80px; animation-delay: 0.3s; } | |
| .sprinkles span:nth-child(3) { background: #87ceeb; top: 10px; left: 130px; animation-delay: 0.6s; } | |
| .sprinkles span:nth-child(4) { background: #98fb98; top: 30px; left: 160px; animation-delay: 0.9s; } | |
| .sprinkles span:nth-child(5) { background: #dda0dd; top: 20px; left: 50px; animation-delay: 1.2s; } | |
| .sprinkles span:nth-child(6) { background: #f4a460; top: 35px; left: 110px; animation-delay: 1.5s; } | |
| .sprinkles span:nth-child(7) { background: #ff69b4; top: 45px; left: 70px; animation-delay: 0.2s; } | |
| .sprinkles span:nth-child(8) { background: #ffd700; top: 40px; left: 140px; animation-delay: 0.5s; } | |
| .sprinkles span:nth-child(9) { background: #87ceeb; top: 50px; left: 40px; animation-delay: 0.8s; } | |
| .sprinkles span:nth-child(10) { background: #98fb98; top: 55px; left: 100px; animation-delay: 1.1s; } | |
| @keyframes sprinkleGlow { | |
| 0%, 100% { transform: scale(1); opacity: 0.8; } | |
| 50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 8px currentColor; } | |
| } | |
| .plate { | |
| width: 220px; | |
| height: 12px; | |
| background: linear-gradient(180deg, #f5f5f5 0%, #e0e0e0 100%); | |
| border-radius: 50%; | |
| margin: 5px auto 0; | |
| box-shadow: 0 3px 10px rgba(0,0,0,0.1); | |
| } | |
| /* ===== GLASS CARD ===== */ | |
| .glass-card { | |
| position: relative; | |
| background: rgba(255, 255, 255, 0.25); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.4); | |
| border-radius: 24px; | |
| padding: 35px 30px; | |
| margin: 20px auto; | |
| max-width: 450px; | |
| box-shadow: 0 8px 32px rgba(139, 90, 140, 0.15), inset 0 1px 0 rgba(255,255,255,0.6); | |
| overflow: hidden; | |
| animation: cardAppear 1s ease 0.5s both; | |
| } | |
| @keyframes cardAppear { | |
| from { opacity: 0; transform: translateY(30px) scale(0.95); } | |
| to { opacity: 1; transform: translateY(0) scale(1); } | |
| } | |
| .card-shine { | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%); | |
| animation: shineMove 4s ease-in-out infinite; | |
| } | |
| @keyframes shineMove { | |
| 0% { transform: translateX(-100%) rotate(45deg); } | |
| 100% { transform: translateX(100%) rotate(45deg); } | |
| } | |
| .card-content { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .glass-card h2 { | |
| font-size: clamp(1.4rem, 4vw, 2rem); | |
| color: #8b5a8c; | |
| margin-bottom: 18px; | |
| font-weight: 700; | |
| text-shadow: 1px 1px 2px rgba(139,90,140,0.1); | |
| } | |
| .glass-card p { | |
| font-size: clamp(1rem, 2.5vw, 1.2rem); | |
| color: #6a4c6a; | |
| line-height: 1.8; | |
| margin-bottom: 10px; | |
| font-weight: 500; | |
| } | |
| /* ===== FIREWORKS ===== */ | |
| .firework { | |
| position: fixed; | |
| pointer-events: none; | |
| z-index: 40; | |
| } | |
| .firework-particle { | |
| position: absolute; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| animation: fireworkExplode 1s ease-out forwards; | |
| } | |
| @keyframes fireworkExplode { | |
| 0% { transform: translate(0,0) scale(1); opacity: 1; } | |
| 100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; } | |
| } | |
| /* ===== FOOTER ===== */ | |
| .footer { | |
| position: fixed; | |
| bottom: 20px; | |
| left: 0; | |
| right: 0; | |
| text-align: center; | |
| z-index: 10; | |
| animation: fadeIn 2s ease 2s both; | |
| } | |
| .footer p { | |
| font-size: 1rem; | |
| color: #8b5a8c; | |
| font-weight: 600; | |
| text-shadow: 1px 1px 2px rgba(139,90,140,0.1); | |
| opacity: 0.9; | |
| } | |
| /* ===== RESPONSIVE ===== */ | |
| @media (max-width: 480px) { | |
| .cake-container { transform: scale(0.85); } | |
| .glass-card { padding: 25px 20px; margin: 10px; } | |
| .countdown-number { font-size: 6rem; } | |
| .sound-toggle { top: 10px; left: 10px; width: 40px; height: 40px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- خلفية متدرجة متحركة --> | |
| <div class="bg-animation"></div> | |
| <!-- بالونات متحركة --> | |
| <div class="balloons-container" id="balloons"></div> | |
| <!-- جسيمات ساقطة (كونفيتي، نجوم، قلوب) --> | |
| <div class="particles-container" id="particles"></div> | |
| <!-- مؤثرات الماوس --> | |
| <div class="mouse-effects" id="mouseEffects"></div> | |
| <!-- المحتوى الرئيسي --> | |
| <div class="content-wrapper"> | |
| <!-- شاشة الترحيب --> | |
| <div class="welcome-screen" id="welcomeScreen"> | |
| <h1 class="typewriter" id="typewriter"></h1> | |
| <div class="sparkles">✨</div> | |
| </div> | |
| <!-- المحتوى الرئيسي (زر المفاجأة) --> | |
| <div class="main-content hidden" id="mainContent"> | |
| <button class="surprise-btn" id="surpriseBtn" onclick="startSurprise()"> | |
| <span class="btn-text">اضغطي هنا للمفاجأة 🎁</span> | |
| <span class="btn-shine"></span> | |
| </button> | |
| </div> | |
| <!-- شاشة العد التنازلي --> | |
| <div class="countdown-screen hidden" id="countdownScreen"> | |
| <div class="countdown-number" id="countdownNumber">3</div> | |
| </div> | |
| <!-- شاشة الاحتفال --> | |
| <div class="celebration-screen hidden" id="celebrationScreen"> | |
| <!-- كعكة عيد الميلاد --> | |
| <div class="cake-container"> | |
| <div class="cake"> | |
| <div class="cake-base"> | |
| <div class="cake-layer layer-3"></div> | |
| <div class="cake-layer layer-2"></div> | |
| <div class="cake-layer layer-1"></div> | |
| </div> | |
| <div class="frosting"> | |
| <div class="drip d1"></div> | |
| <div class="drip d2"></div> | |
| <div class="drip d3"></div> | |
| <div class="drip d4"></div> | |
| <div class="drip d5"></div> | |
| </div> | |
| <div class="candles"> | |
| <div class="candle c1"> | |
| <div class="flame"></div> | |
| <div class="glow"></div> | |
| </div> | |
| <div class="candle c2"> | |
| <div class="flame"></div> | |
| <div class="glow"></div> | |
| </div> | |
| <div class="candle c3"> | |
| <div class="flame"></div> | |
| <div class="glow"></div> | |
| </div> | |
| </div> | |
| <div class="sprinkles"> | |
| <span></span><span></span><span></span><span></span><span></span> | |
| <span></span><span></span><span></span><span></span><span></span> | |
| </div> | |
| </div> | |
| <div class="plate"></div> | |
| </div> | |
| <!-- بطاقة التهنئة الزجاجية --> | |
| <div class="glass-card" id="glassCard"> | |
| <div class="card-shine"></div> | |
| <div class="card-content"> | |
| <h2>عيد ميلاد سعيد يا زينب 🎂💖</h2> | |
| <p>أتمنى لك سنة مليئة بالسعادة والنجاح والضحكات الجميلة.</p> | |
| <p>الله يحقق كل أحلامك ويحفظك دائمًا.</p> | |
| <p>كل عام وأنتِ أجمل وألطف إنسانة. 🌸✨</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- زر التحكم بالصوت --> | |
| <button class="sound-toggle" id="soundToggle" onclick="toggleSound()">🔊</button> | |
| <!-- تذييل الصفحة --> | |
| <div class="footer hidden" id="footer"> | |
| <p>صُنعت هذه المفاجأة بكل الحب من أجلك يا زينب ❤️</p> | |
| </div> | |
| <script> | |
| // ===== الإعدادات ===== | |
| const CONFIG = { | |
| welcomeText: 'كل عام وأنتِ بخير يا زينب 🤍✨', | |
| typeSpeed: 120, | |
| soundEnabled: true, | |
| colors: ['#ff69b4', '#ffd700', '#87ceeb', '#98fb98', '#dda0dd', '#f4a460', '#ffb6c1', '#e6e6fa'] | |
| }; | |
| // ===== المتغيرات ===== | |
| let soundCtx = null; | |
| let isSoundOn = true; | |
| // ===== نظام الصوت (Web Audio API) ===== | |
| function initAudio() { | |
| if (!soundCtx) { | |
| soundCtx = new (window.AudioContext || window.webkitAudioContext)(); | |
| } | |
| } | |
| function playTone(freq, duration, type = 'sine', volume = 0.15) { | |
| if (!isSoundOn || !soundCtx) return; | |
| const osc = soundCtx.createOscillator(); | |
| const gain = soundCtx.createGain(); | |
| osc.type = type; | |
| osc.frequency.setValueAtTime(freq, soundCtx.currentTime); | |
| gain.gain.setValueAtTime(volume, soundCtx.currentTime); | |
| gain.gain.exponentialRampToValueAtTime(0.01, soundCtx.currentTime + duration); | |
| osc.connect(gain); | |
| gain.connect(soundCtx.destination); | |
| osc.start(); | |
| osc.stop(soundCtx.currentTime + duration); | |
| } | |
| function playCelebrationSound() { | |
| if (!isSoundOn || !soundCtx) return; | |
| // لحن احتفالي | |
| const notes = [523, 587, 659, 784, 659, 784, 1047, 784, 1047]; | |
| const times = [0, 0.15, 0.3, 0.45, 0.6, 0.75, 0.9, 1.05, 1.2]; | |
| notes.forEach((freq, i) => { | |
| setTimeout(() => playTone(freq, 0.3, 'sine', 0.12), times[i] * 1000); | |
| }); | |
| // أصوات لامعة | |
| for (let i = 0; i < 15; i++) { | |
| setTimeout(() => { | |
| playTone(2000 + Math.random() * 1000, 0.1, 'sine', 0.05); | |
| }, i * 80); | |
| } | |
| } | |
| function toggleSound() { | |
| isSoundOn = !isSoundOn; | |
| document.getElementById('soundToggle').textContent = isSoundOn ? '🔊' : '🔇'; | |
| if (isSoundOn) initAudio(); | |
| } | |
| // ===== تأثير الكتابة التدريجي ===== | |
| function typeWriter(element, text, speed, callback) { | |
| let i = 0; | |
| element.textContent = ''; | |
| function type() { | |
| if (i < text.length) { | |
| element.textContent += text.charAt(i); | |
| i++; | |
| if (isSoundOn && soundCtx && i % 2 === 0) { | |
| playTone(800 + Math.random() * 200, 0.05, 'sine', 0.03); | |
| } | |
| setTimeout(type, speed); | |
| } else { | |
| if (callback) setTimeout(callback, 800); | |
| } | |
| } | |
| type(); | |
| } | |
| // ===== إنشاء البالونات ===== | |
| function createBalloons() { | |
| const container = document.getElementById('balloons'); | |
| const colors = ['#ffb6c1', '#e6e6fa', '#ffd700', '#f8bbd0', '#ce93d8', '#fff9c4', '#b2dfdb']; | |
| for (let i = 0; i < 12; i++) { | |
| const b = document.createElement('div'); | |
| b.className = 'balloon'; | |
| b.style.left = Math.random() * 100 + '%'; | |
| b.style.background = colors[Math.floor(Math.random() * colors.length)]; | |
| b.style.animationDuration = (8 + Math.random() * 10) + 's'; | |
| b.style.animationDelay = (Math.random() * 8) + 's'; | |
| container.appendChild(b); | |
| } | |
| } | |
| // ===== إنشاء الجسيمات ===== | |
| function createParticles() { | |
| const container = document.getElementById('particles'); | |
| const types = ['confetti', 'star', 'heart-particle']; | |
| const colors = ['#ff69b4', '#ffd700', '#87ceeb', '#98fb98', '#dda0dd', '#f4a460']; | |
| for (let i = 0; i < 30; i++) { | |
| const p = document.createElement('div'); | |
| const type = types[Math.floor(Math.random() * types.length)]; | |
| p.className = 'particle ' + type; | |
| p.style.left = Math.random() * 100 + '%'; | |
| p.style.animationDuration = (6 + Math.random() * 8) + 's'; | |
| p.style.animationDelay = (Math.random() * 10) + 's'; | |
| if (type === 'confetti') { | |
| p.style.background = colors[Math.floor(Math.random() * colors.length)]; | |
| p.style.transform = 'rotate(' + Math.random() * 360 + 'deg)'; | |
| } else if (type === 'star') { | |
| p.textContent = '★'; | |
| } else { | |
| p.textContent = '♥'; | |
| } | |
| container.appendChild(p); | |
| } | |
| } | |
| // ===== مؤثرات الماوس ===== | |
| let mouseTimeout; | |
| document.addEventListener('mousemove', (e) => { | |
| clearTimeout(mouseTimeout); | |
| mouseTimeout = setTimeout(() => { | |
| createMouseEffect(e.clientX, e.clientY); | |
| }, 30); | |
| }); | |
| function createMouseEffect(x, y) { | |
| const container = document.getElementById('mouseEffects'); | |
| if (Math.random() > 0.6) { | |
| const heart = document.createElement('div'); | |
| heart.className = 'mouse-heart'; | |
| heart.textContent = '♥'; | |
| heart.style.left = x + 'px'; | |
| heart.style.top = y + 'px'; | |
| heart.style.setProperty('--tx', (Math.random() * 40 - 20) + 'px'); | |
| container.appendChild(heart); | |
| setTimeout(() => heart.remove(), 1500); | |
| } | |
| if (Math.random() > 0.7) { | |
| const bubble = document.createElement('div'); | |
| bubble.className = 'mouse-bubble'; | |
| bubble.style.left = x + 'px'; | |
| bubble.style.top = y + 'px'; | |
| bubble.style.setProperty('--tx', (Math.random() * 30 - 15) + 'px'); | |
| container.appendChild(bubble); | |
| setTimeout(() => bubble.remove(), 1500); | |
| } | |
| } | |
| // ===== الألعاب النارية ===== | |
| function launchFireworks() { | |
| for (let i = 0; i < 5; i++) { | |
| setTimeout(() => createFirework(), i * 300); | |
| } | |
| } | |
| function createFirework() { | |
| const fw = document.createElement('div'); | |
| fw.className = 'firework'; | |
| const x = Math.random() * window.innerWidth; | |
| const y = Math.random() * window.innerHeight * 0.5 + 50; | |
| fw.style.left = x + 'px'; | |
| fw.style.top = y + 'px'; | |
| const colors = ['#ff69b4', '#ffd700', '#87ceeb', '#98fb98', '#ff5722', '#e1bee7']; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| for (let i = 0; i < 16; i++) { | |
| const p = document.createElement('div'); | |
| p.className = 'firework-particle'; | |
| p.style.background = color; | |
| const angle = (i / 16) * Math.PI * 2; | |
| const dist = 60 + Math.random() * 60; | |
| p.style.setProperty('--tx', Math.cos(angle) * dist + 'px'); | |
| p.style.setProperty('--ty', Math.sin(angle) * dist + 'px'); | |
| fw.appendChild(p); | |
| } | |
| document.body.appendChild(fw); | |
| if (isSoundOn && soundCtx) { | |
| playTone(300 + Math.random() * 500, 0.3, 'sine', 0.08); | |
| } | |
| setTimeout(() => fw.remove(), 1200); | |
| } | |
| // ===== انفجار الكونفيتي ===== | |
| function confettiBurst() { | |
| const container = document.getElementById('particles'); | |
| for (let i = 0; i < 50; i++) { | |
| const c = document.createElement('div'); | |
| c.className = 'particle confetti'; | |
| c.style.left = '50%'; | |
| c.style.top = '50%'; | |
| c.style.background = CONFIG.colors[Math.floor(Math.random() * CONFIG.colors.length)]; | |
| c.style.width = (6 + Math.random() * 6) + 'px'; | |
| c.style.height = c.style.width; | |
| const angle = Math.random() * Math.PI * 2; | |
| const dist = 100 + Math.random() * 300; | |
| c.style.animation = 'none'; | |
| c.style.transition = 'all 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)'; | |
| container.appendChild(c); | |
| requestAnimationFrame(() => { | |
| c.style.transform = 'translate(' + Math.cos(angle) * dist + 'px, ' + Math.sin(angle) * dist + 'px) rotate(' + Math.random() * 720 + 'deg)'; | |
| c.style.opacity = '0'; | |
| }); | |
| setTimeout(() => c.remove(), 1500); | |
| } | |
| } | |
| // ===== تسلسل المفاجأة ===== | |
| function startSurprise() { | |
| initAudio(); | |
| document.getElementById('mainContent').classList.add('hidden'); | |
| document.getElementById('countdownScreen').classList.remove('hidden'); | |
| let count = 3; | |
| const numEl = document.getElementById('countdownNumber'); | |
| numEl.textContent = count; | |
| if (isSoundOn) playTone(440, 0.3, 'sine', 0.1); | |
| const interval = setInterval(() => { | |
| count--; | |
| if (count > 0) { | |
| numEl.textContent = count; | |
| numEl.style.animation = 'none'; | |
| void numEl.offsetWidth; | |
| numEl.style.animation = 'countPulse 1s ease-in-out'; | |
| if (isSoundOn) playTone(440 + (3-count) * 100, 0.3, 'sine', 0.1); | |
| } else { | |
| clearInterval(interval); | |
| document.getElementById('countdownScreen').classList.add('hidden'); | |
| showCelebration(); | |
| } | |
| }, 1000); | |
| } | |
| function showCelebration() { | |
| const screen = document.getElementById('celebrationScreen'); | |
| screen.classList.remove('hidden'); | |
| // إضاءة الشموع | |
| setTimeout(() => { | |
| document.querySelectorAll('.candle').forEach((c, i) => { | |
| setTimeout(() => c.classList.add('lit'), i * 300); | |
| }); | |
| }, 500); | |
| // إطلاق المؤثرات | |
| setTimeout(() => { | |
| launchFireworks(); | |
| confettiBurst(); | |
| playCelebrationSound(); | |
| }, 1200); | |
| // إظهار التذييل | |
| document.getElementById('footer').classList.remove('hidden'); | |
| // ألعاب نارية متتالية | |
| let fwCount = 0; | |
| const fwInterval = setInterval(() => { | |
| if (fwCount < 8) { | |
| createFirework(); | |
| fwCount++; | |
| } else { | |
| clearInterval(fwInterval); | |
| } | |
| }, 800); | |
| } | |
| // ===== التهيئة ===== | |
| window.addEventListener('DOMContentLoaded', () => { | |
| createBalloons(); | |
| createParticles(); | |
| const typeEl = document.getElementById('typewriter'); | |
| typeWriter(typeEl, CONFIG.welcomeText, CONFIG.typeSpeed, () => { | |
| setTimeout(() => { | |
| document.getElementById('welcomeScreen').classList.add('hidden'); | |
| document.getElementById('mainContent').classList.remove('hidden'); | |
| }, 1000); | |
| }); | |
| }); | |
| // تفعيل الصوت عند أول تفاعل | |
| document.addEventListener('click', () => { | |
| if (soundCtx && soundCtx.state === 'suspended') { | |
| soundCtx.resume(); | |
| } | |
| }, { once: true }); | |
| </script> | |
| </body> | |
| </html>''' | |
| with open('/mnt/agents/output/zainab_birthday.html', 'w', encoding='utf-8') as f: | |
| f.write(html_code) | |
| print("تم حفظ الملف بنجاح!") | |
| print(f"حجم الملف: {len(html_code)} حرف") | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment