<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>دعوة فرح</title>
<style>
body {
font-family: "Tahoma", sans-serif;
text-align: center;
background-color: #fff;
margin: 0;
padding: 0;
direction: rtl;
}
img {
max-width: 100%;
height: auto;
margin: 10px 0;
}
#map {
margin: 20px 0;
}
#countdown {
font-size: 18px;
font-weight: bold;
color: red;
margin: 20px 0;
}
.btn-whatsapp {
display: inline-block;
padding: 12px 25px;
background-color: #25D366;
color: white;
text-decoration: none;
font-size: 18px;
border-radius: 8px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- صورة الدعوة -->
<img src="https://i.postimg.cc/cCptsdRz/Photo.png" alt="دعوة">
<!-- الخريطة -->
<div id="map">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3453.934791724161!2d31.287!3d30.050!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzDCsDAzJzAwLjAiTiAzMcKwMTcnMTMuMCJF!5e0!3m2!1sar!2seg!4v1700000000000"
width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<!-- العد التنازلي -->
<p id="countdown">جاري تحميل العد التنازلي...</p>
<!-- زر واتساب -->
<a class="btn-whatsapp" href="https://wa.me/?text=أهلا بيكم.. شرفونا في فرحنا يوم 19 نوفمبر 2025 ❤️" target="_blank">
إرسال الدعوة عبر واتساب
</a>
<script>
// التاريخ والوقت المحدد للفرح (19 نوفمبر 2025 الساعة 7 مساءً)
var countDownDate = new Date("Nov 19, 2025 19:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("countdown").innerHTML =
"متبقي: " + days + " يوم " + hours + " ساعة "
+ minutes + " دقيقة " + seconds + " ثانية ";
if (distance < 0) {
clearInterval(x);
document.getElementById("countdown").innerHTML = "بدأ الحفل 🎉";
}
}, 1000);
</script>
</body>
</html>