<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  body { font-family: sans-serif; background: #f0f2f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 10px; }
  .box { width: 100%; max-width: 380px; background: #fff; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); padding: 15px; }
  .header { background: #d63384; color: white; padding: 10px; border-radius: 10px; text-align: center; font-weight: bold; margin-bottom: 15px; }
  .msg { background: #e9ecef; padding: 10px 14px; border-radius: 12px; margin-bottom: 10px; font-size: 0.95rem; line-height: 1.4; }
  .user-msg { background: #d63384; color: white; margin-left: 20%; }
  .btn { width: 100%; background: #d63384; color: white; border: none; padding: 12px; border-radius: 10px; font-weight: bold; margin-top: 5px; cursor: pointer; text-align: center; text-decoration: none; display: block; box-sizing: border-box; }
</style>
</head>
<body>
<div class="box">
  <div class="header">✨ مفاجأة لـ جمانة من صادق ✨</div>
  <div id="chat"></div>
  <div id="btns"></div>
</div>
<script>
const c = document.getElementById('chat'), b = document.getElementById('btns');
function add(t, u) { c.innerHTML += `<div class="msg ${u?'user-msg':''}">${t}</div>`; }
function step1() {
  add("أهلاً جمانتي.. صادق ودالچ مفاجأة حلوة بمناسبة عيد ميلادچ! تحبين تشوفين شنو هي؟ 🤍");
  b.innerHTML = `<button class="btn" onclick="add('إييي طبعاً! ✨',1); step2();">إييي طبعاً! ✨</button>`;
}
function step2() {
  b.innerHTML = '';
  setTimeout(() => {
    add("اليوم بالنسبة لإلي مو مجرد تاريخ انضاف لعمرچ، اليوم هو ذكرى اليوم اللي إجت بيه للدنيا إنسانة صارت تعنيلي أكثر مما أگدر أوصف بالكلام.. 🥹❤️");
    add("أتمنى من كل قلبي يكون عامچ الجديد مليان فرح وراحة وأيام حلوة تشبه گلبچ، وأتمنى كل أمنية تتمنينها تلقى طريقها إلچ وما أشوف بعينچ غير الفرح.");
    b.innerHTML = `<button class="btn" onclick="add('واصلي القراءة 💌',1); step3();">واصلي القراءة 💌</button>`;
  }, 500);
}
function step3() {
  b.innerHTML = '';
  setTimeout(() => {
    add("وإن شاء الله أبقى قريب منچ أشاركچ أيامچ الحلوة، وأكون الشخص اللي تلتفتين له بكل فرحة مثل ما صرتِ إنتِ الشخص اللي أحب أشاركه كل شيء.");
    add("أحبچ وأحب تفاصيلچ وأحب وجودچ بحياتي أكثر مما تعرفين.. كل عام وإنتِ حبيبتي، كل عام وإنتِ جمانتي، وكل عام وقلبي يختارچ من جديد. ميلاد سعيد يا أحب إنسانة لقلبي ❤️");
    b.innerHTML = `<button class="btn" onclick="add('اسمعي شنو يگول الشعر ✨',1); step4();">اسمعي شنو يگول الشعر ✨</button>`;
  }, 500);
}
function step4() {
  b.innerHTML = '';
  setTimeout(() => {
    add("وَما كُنتُ أَدري قَبلَ رُؤيَتِكِ الهَوى.. وَلا كَيفَ تَهوي بِالقُلوبِ الجَواهِرُ ✨");
    add("فَأَنتِ العيدُ في كُلِّ عامٍ لِعُمري.. وَأَنتِ 'جُمانَةٌ' بَينَ النِّساءِ نَوادِرُ ❤️");
    b.innerHTML = `<button class="btn" onclick="add('هدية الموسيقى 🎵',1); step5();">هدية الموسيقى 🎵</button>`;
  }, 500);
}
function step5() {
  b.innerHTML = '';
  setTimeout(() => {
    add("صادق يهديلچ هذه الأغنية وبس يسألچ: هل عندكِ شك؟ 🎵");
    b.innerHTML = `<a href="https://www.youtube.com/watch?v=9fXvAxd-XTQ" target="_blank" class="btn">🎵 اضغطي هنا لتسمعي الأغنية</a>`;
  }, 500);
}
step1();
</script>
</body>
</html>
