دعوة على لينك بطلب واحد

Build me an invitation page as a single-file HTML Artifact (one file: HTML, CSS and JavaScript inside it). I will send it to guests as a link.
Reply and write all page text in Egyptian Arabic.

THE EVENT (my details):
- Occasion: [OCCASION]  ← نوع المناسبة: عيد ميلاد، خطوبة، سبوع، افتتاح…
- Name(s): [NAME]  ← اسم صاحب المناسبة
- Host line: [HOST]  ← مين اللي بيعزم، مثلًا «ماما وبابا» (اختياري)
- Date and time: [DATE] at [TIME]  ← اليوم والتاريخ والساعة، مثلًا: الجمعة 23 أكتوبر 2026، 5 العصر
- Time zone: Egypt (Africa/Cairo)  ← غيّرها لو انت في بلد تاني
- Venue name and area: [VENUE]  ← اسم المكان والمنطقة
- Google Maps link: [MAPS_LINK]  ← لينك المكان من Google Maps
- WhatsApp number for RSVPs: [WHATSAPP]  ← بكود البلد، من غير + ولا أول صفر، مثلًا 2010xxxxxxxx
- Note for guests: [NOTE]  ← سطر للضيوف (اختياري)
- Style: [STYLE: calm or fun]  ← calm = هادي · fun = مبهج بألوان وبالونات

PAGE SECTIONS, in this order:
1. Hero: the occasion as a small line, the name big and clear, and one warm welcome sentence (with the host line if I gave one).
2. Date and time: day name, date and time in Arabic, in one clear card.
3. Countdown: live boxes for days, hours and minutes left until the event (in the time zone above), updating every second. When the time has passed, hide the boxes and show a friendly message like «اليوم وصل! مستنيينكم». If the date can't be read, show the date only, never a broken countdown.
4. Venue: the venue name and area, and a big button «افتح اللوكيشن» that opens [MAPS_LINK] in a new tab.
5. RSVP: a big green WhatsApp button «هحضر إن شاء الله» that opens https://wa.me/[WHATSAPP]?text=<message>. The message is in Egyptian Arabic, mentions the occasion and the name, and leaves a place for the guest's name, e.g. «أهلًا! أنا [اسمي] وهحضر [OCCASION] بتاع [NAME] إن شاء الله». Build it with encodeURIComponent so the Arabic arrives correctly. Add a second, smaller button «مش هقدر آجي» with a short, polite apology message.
6. Note for guests (only if I gave one), then a short closing line.

DESIGN:
- Arabic, right to left (dir="rtl", lang="ar"), with a clear Arabic font from Google Fonts.
- Mobile first: most guests will open it on a phone. Big text, big buttons that are easy to tap, nothing wider than the screen. It should look good on a laptop too.
- Style calm: soft light background, one main colour, lots of space, no loud gradients.
- Style fun: brighter colours and a few simple balloon or confetti shapes made with CSS only, playful but still easy to read.
- Countdown numbers big and readable at a glance.
- No external images.

RULES:
- Use only the details I gave. Don't invent names, dates, addresses, prices or phone numbers.
- If something is missing or unclear, leave a visible placeholder like [هنا] and tell me what's missing.
- Before you build, if the date, time or WhatsApp number is missing, ask me up to 2 short questions.
- After the page, tell me in 3 short lines how to test the countdown, the map button and the WhatsApp button.

اعمللي صفحة دعوة كـ Artifact في ملف HTML واحد (HTML وCSS وJavaScript جوّه نفس الملف). هبعتها للضيوف كلينك.
اكتب كل كلام الصفحة بالمصري.

المناسبة (معلوماتي):
- نوع المناسبة: [عيد ميلاد / خطوبة / سبوع / افتتاح…]
- الاسم: [اسم صاحب المناسبة]
- مين اللي بيعزم: [مثلًا «ماما وبابا»] (اختياري)
- اليوم والساعة: [مثلًا: الجمعة 23 أكتوبر 2026، 5 العصر]
- التوقيت: توقيت مصر (Africa/Cairo) [غيّره لو انت في بلد تاني]
- المكان: [اسم المكان والمنطقة]
- لينك المكان من Google Maps: [اللينك]
- رقم الواتساب لتأكيد الحضور: [بكود البلد، من غير + ولا أول صفر، مثلًا 2010xxxxxxxx]
- سطر للضيوف: [اختياري]
- الستايل: [هادي / مبهج]

أقسام الصفحة بالترتيب:
1) أول الصفحة: نوع المناسبة في سطر صغير، والاسم كبير وواضح، وجملة ترحيب دافية (ومعاها مين اللي بيعزم لو كتبته).
2) اليوم والساعة: اسم اليوم والتاريخ والساعة بالعربي، في كارت واحد واضح.
3) عدّ تنازلي: مربعات للأيام والساعات والدقايق الفاضلة على المناسبة (بالتوقيت اللي فوق)، بتتحدّث كل ثانية. لما المعاد يعدّي، اخفي المربعات واكتب رسالة لطيفة زي «اليوم وصل! مستنيينكم». ولو التاريخ مش واضح، اكتب التاريخ بس، ومتعملش عدّاد بايظ.
4) المكان: اسم المكان والمنطقة، وزرار كبير «افتح اللوكيشن» بيفتح لينك الخريطة في صفحة جديدة.
5) تأكيد الحضور: زرار واتساب أخضر كبير «هحضر إن شاء الله» بيفتح https://wa.me/[الرقم]?text=<الرسالة>. الرسالة بالمصري، فيها المناسبة والاسم، ومكان لاسم الضيف، زي: «أهلًا! أنا [اسمي] وهحضر [المناسبة] بتاع [الاسم] إن شاء الله». اعمل الرسالة بـ encodeURIComponent عشان العربي يوصل سليم. وزرار تاني أصغر «مش هقدر آجي» برسالة اعتذار قصيرة ومؤدبة.
6) سطر الضيوف (لو كتبته)، وبعده جملة ختام قصيرة.

الشكل:
- عربي من اليمين للشمال (dir=rtl و lang=ar)، بخط عربي واضح من Google Fonts.
- معمولة للموبايل الأول، لأن أغلب الضيوف هيفتحوها من الموبايل: كلام كبير، زراير كبيرة سهل تدوس عليها، ومفيش حاجة خارجة برّه الشاشة. وتبان كويس على اللابتوب برضو.
- الستايل الهادي: خلفية فاتحة ناعمة، لون أساسي واحد، مسافات واسعة، ومن غير تدرجات صارخة.
- الستايل المبهج: ألوان أفتح وأشكال بالونات أو قصاقيص بسيطة معمولة بالـ CSS بس، مبهجة بس الكلام مقروء.
- أرقام العدّاد كبيرة وتتقري من أول نظرة.
- من غير صور من برّه.

القواعد:
- استخدم المعلومات اللي أنا كتبتها بس. متخترعش أسماء ولا تواريخ ولا عناوين ولا أسعار ولا أرقام تليفونات.
- لو حاجة ناقصة أو مش واضحة، سيب مكانها [هنا] باين في الصفحة، وقولّي إيه اللي ناقص.
- قبل ما تبدأ: لو التاريخ أو الساعة أو رقم الواتساب ناقصين، اسألني سؤالين قصيّرين بالكتير.
- بعد الصفحة: قولّي في 3 سطور قصيرة أجرّب العدّاد وزرار الخريطة وزرار الواتساب إزاي.

ليه شغال؟الأقسام بالترتيب والزراير محددة بالظبط بيقفلوا باب التخمين. encodeURIComponent بيخلّي رسالة الواتساب العربي توصل سليمة، وسطر «متخترعش» بيخلّي كل معلومة في الدعوة صح.

غيّر ألوان الصفحة بس، ومتغيّرش الكلام ولا الأقسام:
اللون الأساسي [مثلًا: وردي هادي / كحلي ودهبي / أخضر نعناعي]، والخلفية [فاتحة / كريمي].
وخلّي زرار الواتساب أخضر وواضح.

خلّي اسم [الاسم] أكبر وأوضح في أول الصفحة، بخط عناوين مميز ومقروء على الموبايل.
وخلّي العدّاد تحته على طول، من غير ما الضيف يحتاج ينزل.
متغيّرش أي حاجة تانية.

ليه شغال؟«متغيّرش أي حاجة تانية» بتخلي Claude يعدّل مكان واحد، فمبيبوّظش حاجات كانت شغالة كويس.

زوّد مكان صغير لصورة دايرية فوق الاسم.
لو مفيش صورة، يظهر مكانها دايرة ملوّنة فيها أول حرف من الاسم.
خلّي الصورة اختيارية: هحط لينكها بنفسي بعدين في السطر ده: [لينك الصورة].

المناسبة خطوبة [اسم العريس] و[اسم العروسة].
الاسمين جنب بعض بخط كبير، وبينهم علامة بسيطة (♥ أو &).
الستايل: هادي وشيك، [أبيض ودهبي / بيج ووردي هادي]، من غير بالونات.
رسالة الواتساب: «مبروك مقدمًا! أنا [اسمي] وهحضر الخطوبة إن شاء الله».

المناسبة سبوع [اسم البيبي].
ستايل ناعم ومبهج: [لبني / وردي / ألوان فاتحة]، وأشكال بسيطة زي نجوم وقمر بالـ CSS.
رسالة الواتساب: «ألف مبروك! أنا [اسمي] وجاي السبوع إن شاء الله».

المناسبة افتتاح [اسم المحل] في [المنطقة].
ستايل نضيف بألوان المحل: [اللونين].
زوّد قسم صغير «هتلاقي عندنا إيه» فيه 3 حاجات: [..]، وسطر عن عرض الافتتاح لو موجود فعلًا: [العرض، أو امسح السطر ده].
الزرار يبقى «هعدّي عليكم»، ورسالته: «أهلًا، شفت دعوة افتتاح [اسم المحل] وهعدّي إن شاء الله».

ليه شغال؟«لو موجود فعلًا» بيمنع Claude يكتب عرض انت مقلتهوش، وده مهم لأن الناس هتيجي على أساسه.

اعمللي الدعوة دي ملف HTML واحد اسمه index.html أقدر أنزّله.

ليه شغال؟Netlify Drop محتاج ملف واحد اسمه index.html، فلما تطلبه بالاسم ده مش هتغيّر حاجة.