<!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>
/* استيراد الخطوط الفاخرة للعنوان والنصوص الرومانسية */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital@1&family=Cairo:wght@300;400;600;700&display=swap');
:root {
--primary-pink: #ffb7b2;
--soft-pink: #ffe5ec;
--dark-pink: #ff4d6d;
--deep-pink: #c9184a;
--glass-bg: rgba(255, 255, 255, 0.45);
--glass-border: rgba(255, 255, 255, 0.6);
--text-color: #4a3e3e;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Cairo', sans-serif;
-webkit-tap-highlight-color: transparent;
}
body, html {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #000000;
}
/* 1. الشاشة السوداء الافتتاحية */
#intro-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, #111111 0%, #000000 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 100;
transition: opacity 2s ease;
}
.stars {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px);
background-size: 550px 550px, 350px 350px;
background-position: 0 0, 40px 60px;
opacity: 0.3;
animation: twinkle 10s linear infinite;
}
@keyframes twinkle {
from { background-position: 0 0, 40px 60px; }
to { background-position: 550px 550px, 390px 410px; }
}
.intro-text {
color: #ffffff;
font-size: 1.4rem;
font-weight: 300;
text-align: center;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 2s ease forwards 0.5s;
cursor: pointer;
padding: 20px;
z-index: 102;
text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
.click-hint {
color: rgba(255,255,255,0.4);
font-size: 0.85rem;
margin-top: 15px;
animation: pulseHint 1.5s infinite ease-in-out;
}
@keyframes pulseHint {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* 2. الخلفية الوردية الحالمة بعد الدخول */
#main-app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
position: relative;
background: linear-gradient(135deg, #ffe5ec 0%, #ffc6ff 50%, #bde0fe 100%);
background-size: 400% 400%;
animation: gradientMove 20s ease infinite;
opacity: 0;
transition: opacity 2s ease;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
#hearts-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* حاوية محتوى الهدية الرئيسي */
.wrapper {
width: 100%;
max-width: 440px;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
}
/* كارت الـ Glassmorphism */
.gift-card {
background: var(--glass-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
border-radius: 30px;
padding: 30px 24px;
width: 100%;
text-align: center;
box-shadow: 0 10px 40px rgba(255, 182, 193, 0.25);
position: relative;
overflow: hidden;
transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* أنيميشن دخول الدبدوب والاسم */
.teddy-box {
width: 130px;
height: 130px;
margin: 0 auto 10px;
transform: scale(0);
transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.teddy-box.active {
transform: scale(1);
animation: floatTeddy 5s ease-in-out infinite 1.2s;
}
@keyframes floatTeddy {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(2deg); }
}
.recipient-name {
font-size: 2.6rem;
color: var(--dark-pink);
font-weight: 700;
margin-bottom: 15px;
opacity: 0;
transform: translateY(15px);
transition: all 1s ease;
text-shadow: 0 2px 10px rgba(255,77,109,0.1);
}
.recipient-name.active {
opacity: 1;
transform: translateY(0);
animation: softGlow 3s ease-in-out infinite alternate;
}
@keyframes softGlow {
from { text-shadow: 0 0 5px rgba(255,77,109,0.1); }
to { text-shadow: 0 0 20px rgba(255,77,109,0.3); }
}
/* صندوق النصوص المكتوبة سينمائياً */
.text-stream {
font-size: 1.08rem;
line-height: 1.85;
color: var(--text-color);
min-height: 160px;
text-align: justify;
text-justify: inter-word;
margin-bottom: 20px;
font-weight: 400;
}
.type-cursor {
display: inline-block;
width: 2px;
height: 1.2rem;
background-color: var(--dark-pink);
margin-right: 3px;
animation: blink 0.8s step-end infinite;
vertical-align: middle;
}
@keyframes blink {
from, to { background-color: transparent }
50% { background-color: var(--dark-pink); }
}
/* أزرار التفاعل المدمجة */
.action-space {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60px;
width: 100%;
}
.btn {
background: linear-gradient(45deg, #ff4d6d, #ff758f);
border: none;
color: white;
padding: 14px 32px;
font-size: 1.15rem;
font-weight: 600;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 6px 20px rgba(255, 77, 109, 0.3);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
opacity: 0;
transform: scale(0.8);
pointer-events: none;
display: none;
}
.btn.visible {
opacity: 1;
transform: scale(1);
pointer-events: auto;
display: block;
}
.btn:active {
transform: scale(0.95);
}
/* شاشات الانتقالات والمفاجآت التفاعلية المشفرة داخل الكارت */
.sub-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 240, 243, 0.97);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 25px;
opacity: 0;
pointer-events: none;
transition: all 0.8s ease;
z-index: 20;
transform: translateY(100%);
}
.sub-screen.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.surprise-title {
font-size: 2rem;
color: var(--deep-pink);
font-weight: 700;
margin-bottom: 25px;
line-height: 1.5;
}
/* العداد اللطيف الصغير */
.counter-badge {
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
padding: 6px 16px;
border-radius: 20px;
font-size: 0.8rem;
color: #6c5a5a;
margin-top: 15px;
display: flex;
align-items: center;
gap: 6px;
opacity: 0;
transition: opacity 1s ease;
}
.counter-badge.show {
opacity: 1;
}
/* التذييل والأدوات في أسفل الصفحة */
.footer-credits {
margin-top: 20px;
font-size: 0.75rem;
color: #6c5a5a;
text-align: center;
opacity: 0;
transition: opacity 1s ease;
font-weight: 400;
}
.tools-area {
display: flex;
align-items: center;
gap: 15px;
margin-top: 15px;
opacity: 0;
transition: opacity 1s ease;
}
.tools-area.show, .footer-credits.show {
opacity: 1;
}
.share-circle {
width: 36px;
height: 36px;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.3s;
}
.share-circle:hover {
background: #ffffff;
}
/* أنيميشن اهتزاز الكارت الاحترافي */
@keyframes subtleShake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-4px); }
40%, 80% { transform: translateX(4px); }
}
.shake-effect {
animation: subtleShake 0.4s ease-in-out;
}
/* عناصر القلوب الطائرة الطليقة */
.floating-heart {
position: absolute;
pointer-events: none;
opacity: 0;
animation: ascend linear forwards;
}
@keyframes ascend {
0% {
transform: translateY(105vh) scale(0) rotate(0deg);
opacity: 0;
}
15% { opacity: 0.7; }
85% { opacity: 0.7; }
100% {
transform: translateY(-15vh) scale(1) rotate(360deg);
opacity: 0;
}
}
/* إخفاء مشغل صوت الموسيقى */
#audio-element { display: none; }
@keyframes fadeInUp {
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<div id="intro-screen" onclick="startExperience()">
<div class="stars"></div>
<div class="intro-text">
<p>في شيء صغير أبيك تشوفينه 🤍</p>
<p class="click-hint">اضغطي في أي مكان للفتح...</p>
</div>
</div>
<div id="main-app">
<div id="hearts-canvas"></div>
<div class="wrapper">
<div class="gift-card" id="main-card">
<div class="teddy-box" id="gift-teddy">
<svg viewBox="0 0 200 200" width="100%" height="100%">
<circle cx="52" cy="52" r="24" fill="#be9370" />
<circle cx="52" cy="52" r="14" fill="#ffccd5" />
<circle cx="148" cy="52" r="24" fill="#be9370" />
<circle cx="148" cy="52" r="14" fill="#ffccd5" />
<circle cx="100" cy="100" r="58" fill="#a7744d" />
<circle cx="76" cy="92" r="6.5" fill="#221108" />
<circle cx="74" cy="90" r="2" fill="#ffffff" />
<circle cx="124" cy="92" r="6.5" fill="#221108" />
<circle cx="124" cy="90" r="2" fill="#ffffff" />
<circle cx="62" cy="112" r="9" fill="#ffb7b2" opacity="0.5" />
<circle cx="138" cy="112" r="9" fill="#ffb7b2" opacity="0.5" />
<ellipse cx="100" cy="116" rx="16" ry="11" fill="#e9c46a" />
<polygon points="100,113 94,108 106,108" fill="#221108" />
<path d="M 93 119 Q 100 126 100 119 Q 100 126 107 119" stroke="#221108" stroke-width="2" fill="none" />
</svg>
</div>
<h1 class="recipient-name" id="gift-name">ملاك</h1>
<div class="text-stream" id="typing-box">
<span id="text-node"></span><span class="type-cursor" id="cursor-node"></span>
</div>
<div class="action-space">
<button class="btn" id="btn-step-1" onclick="triggerFirstSurprise()">تبين تعرفين شعوري الحقيقي؟</button>
</div>
<div class="sub-screen" id="surprise-1">
<div style="width: 80px; height: 80px; margin-bottom: 15px;">
<svg viewBox="0 0 32 32" width="100%" height="100%">
<path d="M16,28.22 C16,28.22 3,20.19 3,11.38 C3,6.23 7.18,2.05 12.33,2.05 C15.42,2.05 18.17,3.56 19.86,5.88 C21.55,3.56 24.3,2.05 27.4,2.05 C32.55,2.05 36.73,6.23 36.73,11.38 C36.73,20.19 23.73,28.22 16,28.22 Z" fill="#ff4d6d" transform="translate(-4,0)"/>
</svg>
</div>
<h2 class="surprise-title">أنا أحبك يا ملاك 🤍</h2>
<button class="btn visible" id="btn-step-2" onclick="triggerFinalMessage()">رسالة أخيرة</button>
</div>
<div class="sub-screen" id="surprise-2">
<h2 class="surprise-title" style="font-size: 1.5rem; font-weight: 600; color: #4a3e3e;">
"ولو رجع فيني الوقت ألف مرة… بكل مرة باختارك أنتِ."
</h2>
<div style="width: 50px; height: 50px; margin-top: 10px;">
<svg viewBox="0 0 32 32" width="100%" height="100%">
<path d="M16,28.22 C16,28.22 3,20.19 3,11.38 C3,6.23 7.18,2.05 12.33,2.05 C15.42,2.05 18.17,3.56 19.86,5.88 C21.55,3.56 24.3,2.05 27.4,2.05 C32.55,2.05 36.73,6.23 36.73,11.38 C36.73,20.19 23.73,28.22 16,28.22 Z" fill="#ff87ab" transform="translate(-4,0)"/>
</svg>
</div>
</div>
</div>
<div class="counter-badge" id="live-counter">
<span>عدد مرات التفكير فيك اليوم:</span>
<span style="font-weight: 700; color: var(--dark-pink); font-size: 1.1rem; line-height: 1;">∞</span>
</div>
<div class="tools-area" id="tools-panel">
<div class="share-circle" onclick="shareExperience()" title="مشاركة الرابط">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#6c5a5a" stroke-width="2">
<circle cx="18" cy="5" r="3"/>
<circle cx="6" cy="12" r="3"/>
<circle cx="18" cy="19" r="3"/>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
</svg>
</div>
</div>
<div class="footer-credits" id="credits-note">
من شخص يشوفك أجمل صدفة بحياته 🤍
</div>
</div>
</div>
<audio id="audio-element" loop preload="auto">
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mpeg">
</audio>
<script>
const letterText = `ملاك…\n\nأحياناً أحس إن وجودك بحياتي صدفة جميلة ما تتكرر مرتين.\n\nفيك شيء يخليني أهدأ حتى وأنا أكثر شخص مشتت.\n\nأحب تفاصيلك بدون سبب… صوتك، كلامك، وحتى طريقتك العفوية.\n\nيمكن ما أقول كثير، لكنك صرتِ جزء من يومي بشكل ما أتخيله يختفي 🤍`;
const introScreen = document.getElementById('intro-screen');
const mainApp = document.getElementById('main-app');
const textNode = document.getElementById('text-node');
const cursorNode = document.getElementById('cursor-node');
const btnStep1 = document.getElementById('btn-step-1');
const mainCard = document.getElementById('main-card');
const audio = document.getElementById('audio-element');
let charIndex = 0;
let heartInterval;
// دالة بدء التجربة الشاملة وإزالة الشاشة السوداء
function startExperience() {
introScreen.style.opacity = '0';
setTimeout(() => {
introScreen.style.display = 'none';
mainApp.style.opacity = '1';
// تشغيل الخلفية الموسيقية بجهير ناعم ومناسب بعد تفاعل مباشر
audio.volume = 0.35;
audio.play().catch(e => console.log("Audio play deferred"));
// تفعيل أنيميشن دخول الدبدوب والاسم بتتابع أنيق
setTimeout(() => { document.getElementById('gift-teddy').classList.add('active'); }, 400);
setTimeout(() => { document.getElementById('gift-name').classList.add('active'); }, 1000);
// بدء محاكاة الآلة الكاتبة السينمائية للنص
setTimeout(startTyping, 2200);
}, 1000);
}
// دالة الطباعة التدريجية للحروف بلمسة وفواصل زمنية طبيعية
function startTyping() {
function type() {
if (charIndex < letterText.length) {
let nextChar = letterText.charAt(charIndex);
if (nextChar === '\n') {
textNode.innerHTML += '<br>';
} else {
textNode.innerHTML += nextChar;
}
charIndex++;
setTimeout(type, Math.random() * 45 + 55); // سرعة كتابة بشرية متفاوتة
} else {
// عند انتهاء الرسالة بالكامل
cursorNode.style.display = 'none';
btnStep1.classList.add('visible');
// بدء هطول القلوب المنتظم والناعم في فضاء الخلفية
triggerHeartsRain(20, 800);
// إظهار التذييل والعداد تدريجياً
document.getElementById('live-counter').classList.add('show');
document.getElementById('tools-panel').classList.add('show');
document.getElementById('credits-note').classList.add('show');
}
}
type();
}
// إنشاء وتوليد عناصر الـ SVG للقلوب الطائرة عشوائياً بدقة
function generateSingleHeart(isIntense = false) {
const canvas = document.getElementById('hearts-canvas');
const heart = document.createElement('div');
heart.classList.add('floating-heart');
const pinkPalettes = ['#ff4d6d', '#ff758f', '#ff87ab', '#ffaab9', '#ffffff'];
const chosenColor = pinkPalettes[Math.floor(Math.random() * pinkPalettes.length)];
// أحجام متفاوتة بناءً على نوع الحدث (عادي أم انفجار عند الضغط)
const scaleSize = isIntense ? (Math.random() * 22 + 12) : (Math.random() * 16 + 10);
heart.style.left = Math.random() * 100 + 'vw';
heart.style.width = scaleSize + 'px';
heart.style.height = scaleSize + 'px';
heart.innerHTML = `
<svg viewBox="0 0 32 32" width="100%" height="100%">
<path d="M16,28.22 C16,28.22 3,20.19 3,11.38 C3,6.23 7.18,2.05 12.33,2.05 C15.42,2.05 18.17,3.56 19.86,5.88 C21.55,3.56 24.3,2.05 27.4,2.05 C32.55,2.05 36.73,6.23 36.73,11.38 C36.73,20.19 23.73,28.22 16,28.22 Z" fill="${chosenColor}" transform="translate(-4,0)"/>
</svg>
`;
// مدة الحركة عشوائية لضمان التدفق الطبيعي غير المتماثل
const speedDuration = isIntense ? (Math.random() * 2.5 + 3) : (Math.random() * 3 + 4.5);
heart.style.animation = `ascend ${speedDuration}s linear forwards`;
canvas.appendChild(heart);
setTimeout(() => { heart.remove(); }, speedDuration * 1000);
}
function triggerHeartsRain(initialCount, continuousInterval) {
for(let i = 0; i < initialCount; i++) {
setTimeout(() => { generateSingleHeart(false); }, i * 250);
}
if(!heartInterval) {
heartInterval = setInterval(() => { generateSingleHeart(false); }, continuousInterval);
}
}
// تفعيل شاشة المفاجأة الأولى عند نقر زر الاكتشاف والاهتزاز
function triggerFirstSurprise() {
// اهتزاز خفيف وناعم للكارت لتعزيز الإحساس بالحدث التفاعلي
mainCard.classList.add('shake-effect');
setTimeout(() => { mainCard.classList.remove('shake-effect'); }, 500);
// إطلاق انفجار وموجة كثيفة من القلوب الطائرة فوراً بالشاشة
for (let i = 0; i < 60; i++) {
setTimeout(() => { generateSingleHeart(true); }, i * 35);
}
// إظهار شاشة النتيجة الأولى فوق الكارت بسلاسة
document.getElementById('surprise-1').classList.add('active');
}
// تفعيل رسالة النهاية المطلقة
function triggerFinalMessage() {
document.getElementById('surprise-2').classList.add('active');
// زيادة إضافية خفيفة لمعدل القلوب المتساقطة بالخلفية كاحتفالية نهائية
setInterval(() => { generateSingleHeart(false); }, 350);
}
// ميزة مشاركة الرابط عبر النظام الأصلي للجهاز أو النسخ الاحتياطي في الحافظة
function shareExperience() {
if (navigator.share) {
navigator.share({
title: 'هدية خاصة إلى ملاك 🤍',
url: window.location.href
}).catch(err => console.log(err));
} else {
navigator.clipboard.writeText(window.location.href);
alert('تم نسخ رابط الصفحة اللطيفة بنجاح لإهدائها ومشاركتها! 🤍');
}
}
</script>
</body>
</html>
Error code
ERRW:1.0:K1.0:FHD0.1
Were you logged in?
Yes
Your username (if logged in)
No response
Your HTML
Your JavaScript
هيلوووYour CSS