<!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: #111;
color: #fff;
margin: 0;
padding: 0;
}
img {
max-width: 90%;
margin-top: 15px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(255,255,255,0.3);
}
iframe {
width: 90%;
height: 300px;
border: none;
margin: 20px 0;
border-radius: 10px;
}
#countdown {
font-size: 22px;
margin: 20px 0;
font-weight: bold;
color: #ffd700;
}
.whatsapp-btn {
display: inline-block;
padding: 12px 25px;
margin: 20px 0;
background: #25D366;
color: #fff;
text-decoration: none;
border-radius: 30px;
font-size: 18px;
transition: 0.3s;
}
.whatsapp-btn:hover {
background: #1ebe57;
}
</style>
</head>
<body>
<!-- الصورة -->
<img src="https://i.postimg.cc/cCptsdRz/Photo.png" alt="دعوة">
<!-- الخريطة -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d227.04369664829933!2d31.235711!3d30.044420!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzDCsDAyJzQwLjAiTiAzMcKwMTQnMDguNiJF!5e0!3m2!1sar!2seg!4v1694800000000"
allowfullscreen="" loading="lazy">
</iframe>
<!-- العداد -->
<div id="countdown"></div>
<!-- زرار واتساب -->
<a class="whatsapp-btn" href="https://wa.me/201000000000" target="_blank">تواصل عبر واتساب</a>
<script>
// عداد تنازلي
var eventDate = new Date("Sep 25, 2025 20:00:00").getTime();
var countdown = setInterval(function() {
var now = new Date().getTime();
var distance = eventDate - now;
if (distance < 0) {
document.getElementById("countdown").innerHTML = "انتهى الوقت 🎉";
clearInterval(countdown);
return;
}
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 + " ثانية ";
}, 1000);
</script>
</body>
</html>