|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ASNFLUL_JA | خدمات التصميم الفخمة</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Changa:wght@400;700;800;900&display=swap" rel="stylesheet"> |
|
|
|
|
|
<style> |
|
|
|
|
|
.font-heading { |
|
|
font-family: 'Changa', sans-serif; |
|
|
} |
|
|
.font-body { |
|
|
font-family: 'Amiri', serif; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Amiri', serif; |
|
|
background-color: #FFFFFF; |
|
|
color: #1C1C1C; |
|
|
} |
|
|
|
|
|
|
|
|
.header-bg { |
|
|
background-color: #1C1C1C; |
|
|
} |
|
|
|
|
|
.text-design-primary { color: #1C1C1C; } |
|
|
.bg-design-primary { background-color: #1C1C1C; } |
|
|
.text-accent-gold { color: #FFC300; } |
|
|
.bg-accent-gold { background-color: #FFC300; } |
|
|
.bg-success-green { background-color: #10B981; } |
|
|
|
|
|
|
|
|
.product-card { |
|
|
border: 1px solid #E0E0E0; |
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
|
|
|
.card-white { |
|
|
background-color: #FFFFFF; |
|
|
} |
|
|
|
|
|
.card-light-gray { |
|
|
background-color: #F8F8F8; |
|
|
border-color: #F0F0F0; |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
box-shadow: 0 8px 15px rgba(255, 195, 0, 0.2); |
|
|
transform: translateY(-2px); |
|
|
border-color: #FFC300; |
|
|
} |
|
|
|
|
|
|
|
|
.scroll-container { |
|
|
-ms-overflow-style: none; |
|
|
scrollbar-width: none; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
.scroll-container::-webkit-scrollbar { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
|
|
|
.icon-svg { |
|
|
color: #1C1C1C; |
|
|
transition: color 0.3s, transform 0.3s; |
|
|
} |
|
|
.group:hover .icon-svg { |
|
|
color: #FFC300; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
|
|
|
.modal-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-color: rgba(0, 0, 0, 0.7); |
|
|
display: none; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 1000; |
|
|
} |
|
|
.modal-content { |
|
|
background-color: #fff; |
|
|
padding: 30px; |
|
|
border-radius: 12px; |
|
|
max-width: 90%; |
|
|
width: 550px; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
|
|
|
.btn-details-gold { |
|
|
background-color: #1C1C1C; |
|
|
color: white; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
.btn-details-gold:hover { |
|
|
background-color: #333333; |
|
|
} |
|
|
|
|
|
|
|
|
.animate-spin { |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
@keyframes spin { |
|
|
from { transform: rotate(0deg); } |
|
|
to { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
|
|
|
.video-responsive { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
max-width: 100%; |
|
|
background: #000; |
|
|
border: 4px solid #FFC300; |
|
|
border-radius: 12px; |
|
|
} |
|
|
.video-responsive iframe { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
</style> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
|
|
|
'primary': '#1C1C1C', |
|
|
'secondary': '#FFFFFF', |
|
|
'accent': '#FFC300', |
|
|
'light-bg': '#F8F8F8', |
|
|
}, |
|
|
spacing: { |
|
|
'128': '32rem', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-secondary antialiased text-right font-body"> |
|
|
|
|
|
<header class="header-bg relative h-auto" id="home"> |
|
|
<nav class="bg-primary/95 text-white font-medium py-4 font-heading border-b border-gray-700 shadow-xl"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex justify-between items-center"> |
|
|
|
|
|
<a href="#" class="flex items-center space-x-2 flex-row-reverse group"> |
|
|
<span class="text-xl tracking-widest uppercase font-extrabold text-white"></span> |
|
|
</a> |
|
|
|
|
|
<div class="hidden md:flex space-x-8 text-sm flex-row-reverse"> |
|
|
<a href="#home" class="hover:text-accent-gold transition">الرئيسية</a> |
|
|
<a href="#services" class="hover:text-accent-gold transition">خدماتنا</a> |
|
|
<a href="#portfolio" class="hover:text-accent-gold transition">أعمالنا</a> |
|
|
<a href="#about" class="hover:text-accent-gold transition">من نحن</a> |
|
|
<a href="#contact" class="hover:text-accent-gold transition">اتصل بنا</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
<div class="w-full h-96 bg-cover bg-center relative flex flex-col justify-center items-center text-center p-4" |
|
|
style="background-image: url('images/Gemini_Generated_Image_f46h8if46h8if46h.png');"> |
|
|
|
|
|
<div class="absolute inset-0 bg-primary/40"></div> |
|
|
|
|
|
<div class="relative z-10 text-white"> |
|
|
<p class="text-2xl text-accent-gold font-light font-body tracking-widest uppercase mb-2 drop-shadow-lg">الفخامة في كل تفصيل</p> |
|
|
<h1 class="text-5xl md:text-7xl font-extrabold leading-tight mb-8 font-heading drop-shadow-lg"> |
|
|
تصاميم بصرية <span class="text-accent-gold">تليق بمكانتك</span>. |
|
|
</h1> |
|
|
<a href="#services" class="inline-block px-8 py-3 text-lg font-bold bg-accent-gold text-primary rounded-full hover:bg-opacity-90 transition duration-300 shadow-xl shadow-accent-gold/40 font-heading"> |
|
|
اطلب الآن (نبدأ العمل) |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<div class="bg-secondary py-10 border-b border-gray-200"> |
|
|
<div class="max-w-5xl mx-auto flex justify-around text-center"> |
|
|
|
|
|
<div class="flex flex-col items-center group cursor-pointer"> |
|
|
<svg class="w-8 h-8 mb-2 icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 21.423 5.52 21.425l-.463-.463A2 2 0 014 18.948v-1.666L16.862 4.487z" /> |
|
|
</svg> |
|
|
<span class="text-sm font-medium text-design-primary font-body">هوية بصرية</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center group cursor-pointer"> |
|
|
<svg class="w-8 h-8 mb-2 icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/24/24/svg" stroke-width="1.5"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 3v2.25l7.5 7.5L3 18.75V21h18v-2.25l-7.5-7.5L21 5.25V3H3zm18 18h-2.25V18h2.25v3zM3 3h2.25v2.25H3V3z" /> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18"/> |
|
|
</svg> |
|
|
<span class="text-sm font-medium text-design-primary font-body">إعلانات خارجية</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center group cursor-pointer"> |
|
|
<svg class="w-8 h-8 mb-2 icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 8.25h-6M10.5 12.75h-6M10.5 17.25h-6M13.5 8.25h6M13.5 12.75h6M13.5 17.25h6"/> |
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> |
|
|
</svg> |
|
|
<span class="text-sm font-medium text-design-primary font-body">تطوير مواقع</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col items-center group cursor-pointer"> |
|
|
<svg class="w-8 h-8 mb-2 icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-width="1.5"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9.5 2h5a1 1 0 011 1v1a1 1 0 01-1 1h-5a1 1 0 01-1-1V3a1 1 0 011-1zM12 5v17m0 0l-4-4m4 4l4-4"/> |
|
|
</svg> |
|
|
<span class="text-sm font-medium text-design-primary font-body">رسم يدوي</span> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<main> |
|
|
<section id="services" class="py-20 bg-secondary"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-extrabold tracking-tight text-design-primary font-heading">خدماتنا المتميزة</h2> |
|
|
<p class="mt-2 text-gray-500 max-w-3xl mx-auto font-body">نقدم حلولاً تصميمية تتجاوز التوقعات وتلبي تطلعات الرفاهية.</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-4xl mx-auto mb-20 p-4 bg-light-bg rounded-xl shadow-2xl shadow-gray-300"> |
|
|
<div class="text-center mb-6"> |
|
|
<h3 class="text-3xl font-extrabold text-design-primary font-heading mb-2">شاهد قصتنا!</h3> |
|
|
<p class="text-gray-600 font-body">نظرة سريعة على جودة خدماتنا وأسلوب عملنا الاحترافي.</p> |
|
|
</div> |
|
|
|
|
|
<div class="video-responsive mx-auto"> |
|
|
<iframe |
|
|
width="560" |
|
|
height="315" |
|
|
src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" |
|
|
title="YouTube video player" |
|
|
frameborder="0" |
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
|
|
allowfullscreen> |
|
|
</iframe> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 scroll-container"> |
|
|
|
|
|
<div class="service-card-item" data-title="تصميم بطاقات الأعمال الاحترافية"> |
|
|
<div class="rounded-xl product-card card-white h-full flex flex-col"> |
|
|
<img src="images/unnamed (15).jpg" alt="تصميم بطاقات الأعمال الاحترافية" class="w-full card-image h-56 object-cover rounded-t-xl" onerror="this.onerror=null; this.src='https://placehold.co/400x300/FFFFFF/1C1C1C?text=بطاقات+أعمال+فاخرة';"> |
|
|
<div class="p-6 text-center flex flex-col flex-grow"> |
|
|
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم بطاقات الأعمال الاحترافية</h3> |
|
|
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">لمسة أولى خالدة</p> |
|
|
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto"> |
|
|
<button onclick="openServiceDetails(0)" class="flex-1 px-4 py-2 text-sm font-semibold btn-details-gold rounded-full hover:shadow-lg transition duration-300 font-heading"> |
|
|
التفاصيل |
|
|
</button> |
|
|
<button onclick="openOrderForm(0)" class="flex-1 px-4 py-2 text-sm font-semibold text-primary bg-accent-gold rounded-full hover:bg-opacity-90 transition duration-300 font-heading"> |
|
|
اطلب الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card-item" data-title="تصميم وتطوير المواقع الإلكترونية العصرية"> |
|
|
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col"> |
|
|
<img src="images/ecc217e5986e846f40de88a9b9e5b0f2.jpg" alt="تطوير مواقع عصرية" class="w-full card-image h-56 object-cover rounded-t-xl" onerror="this.onerror=null; this.src='https://placehold.co/400x300/FFFFFF/1C1C1C?text=تطوير+مواقع+عصرية';"> |
|
|
<div class="p-6 text-center flex flex-col flex-grow"> |
|
|
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم وتطوير المواقع الإلكترونية العصرية</h3> |
|
|
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">واجهة المستقبل</p> |
|
|
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto"> |
|
|
<button onclick="openServiceDetails(1)" class="flex-1 px-4 py-2 text-sm font-semibold btn-details-gold rounded-full hover:shadow-lg transition duration-300 font-heading"> |
|
|
التفاصيل |
|
|
</button> |
|
|
<button onclick="openOrderForm(1)" class="flex-1 px-4 py-2 text-sm font-semibold text-primary bg-accent-gold rounded-full hover:bg-opacity-90 transition duration-300 font-heading"> |
|
|
اطلب الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card-item" data-title="تصميم أغلفة الكتب والمجلات الفنية"> |
|
|
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col"> |
|
|
<img src="images/ed62a05b9eb9075567d4dc1a5d77cda8.jpg" alt="أغلفة كتب مذهلة" class="w-full card-image h-56 object-cover rounded-t-xl" onerror="this.onerror=null; this.src='https://placehold.co/400x300/FFFFFF/1C1C1C?text=أغلفة+كتب+مذهلة';"> |
|
|
<div class="p-6 text-center flex flex-col flex-grow"> |
|
|
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم أغلفة الكتب والمجلات الفنية</h3> |
|
|
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">جاذبية القراءة</p> |
|
|
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto"> |
|
|
<button onclick="openServiceDetails(2)" class="flex-1 px-4 py-2 text-sm font-semibold btn-details-gold rounded-full hover:shadow-lg transition duration-300 font-heading"> |
|
|
التفاصيل |
|
|
</button> |
|
|
<button onclick="openOrderForm(2)" class="flex-1 px-4 py-2 text-sm font-semibold text-primary bg-accent-gold rounded-full hover:bg-opacity-90 transition duration-300 font-heading"> |
|
|
اطلب الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card-item" data-title="تصميم الشعارات والهوية البصرية المتكاملة"> |
|
|
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col"> |
|
|
<img src="images/unnamed (14).jpg" alt="تصميم هوية بصرية" class="w-full card-image h-56 object-cover rounded-t-xl" onerror="this.onerror=null; this.src='https://placehold.co/400x300/FFFFFF/1C1C1C?text=هوية+بصرية+فخمة';"> |
|
|
<div class="p-6 text-center flex flex-col flex-grow"> |
|
|
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم الشعارات والهوية البصرية المتكاملة</h3> |
|
|
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">بصمة لا تُمحى</p> |
|
|
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto"> |
|
|
<button onclick="openServiceDetails(3)" class="flex-1 px-4 py-2 text-sm font-semibold btn-details-gold rounded-full hover:shadow-lg transition duration-300 font-heading"> |
|
|
التفاصيل |
|
|
</button> |
|
|
<button onclick="openOrderForm(3)" class="flex-1 px-4 py-2 text-sm font-semibold text-primary bg-accent-gold rounded-full hover:bg-opacity-90 transition duration-300 font-heading"> |
|
|
اطلب الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card-item" data-title="تصميم اللافتات والإعلانات الخارجية"> |
|
|
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col"> |
|
|
<img src="images/c45bc1007ae39e2e2c41c0136abf15a8.jpg" alt="Outdoor Advertising" class="w-full card-image h-56 object-cover rounded-t-xl" onerror="this.onerror=null; this.src='https://placehold.co/400x300/FFFFFF/1C1C1C?text=إعلانات+خارجية+مميزة';"> |
|
|
<div class="p-6 text-center flex flex-col flex-grow"> |
|
|
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم اللافتات والإعلانات الخارجية</h3> |
|
|
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">وصول مؤثر</p> |
|
|
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto"> |
|
|
<button onclick="openServiceDetails(4)" class="flex-1 px-4 py-2 text-sm font-semibold btn-details-gold rounded-full hover:shadow-lg transition duration-300 font-heading"> |
|
|
التفاصيل |
|
|
</button> |
|
|
<button onclick="openOrderForm(4)" class="flex-1 px-4 py-2 text-sm font-semibold text-primary bg-accent-gold rounded-full hover:bg-opacity-90 transition duration-300 font-heading"> |
|
|
اطلب الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card-item" data-title="تصميم قوائم الطعام الفاخرة"> |
|
|
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col"> |
|
|
<img src="images/cf64416fb305108adf549e9dde61483e.jpg" alt="Luxury Menus" class="w-full card-image h-56 object-cover rounded-t-xl" onerror="this.onerror=null; this.src='https://placehold.co/400x300/FFFFFF/1C1C1C?text=قوائم+طعام+فاخرة';"> |
|
|
<div class="p-6 text-center flex flex-col flex-grow"> |
|
|
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم قوائم الطعام الفاخرة</h3> |
|
|
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">مذاق بصري</p> |
|
|
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto"> |
|
|
<button onclick="openServiceDetails(5)" class="flex-1 px-4 py-2 text-sm font-semibold btn-details-gold rounded-full hover:shadow-lg transition duration-300 font-heading"> |
|
|
التفاصيل |
|
|
</button> |
|
|
<button onclick="openOrderForm(5)" class="flex-1 px-4 py-2 text-sm font-semibold text-primary bg-accent-gold rounded-full hover:bg-opacity-90 transition duration-300 font-heading"> |
|
|
اطلب الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card-item" data-title="تصميم الشواهد التكريمية والتقديرية"> |
|
|
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col"> |
|
|
<img src="images/fb2834bdef94e8a7e2a119bf9b330344.jpg" alt="Commemorative Plaques" class="w-full card-image h-56 object-cover rounded-t-xl" onerror="this.onerror=null; this.src='https://placehold.co/400x300/FFFFFF/1C1C1C?text=شهادات+تقدير+فخمة';"> |
|
|
<div class="p-6 text-center flex flex-col flex-grow"> |
|
|
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم الشواهد التكريمية والتقديرية</h3> |
|
|
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">تخليد الإنجاز</p> |
|
|
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto"> |
|
|
<button onclick="openServiceDetails(6)" class="flex-1 px-4 py-2 text-sm font-semibold btn-details-gold rounded-full hover:shadow-lg transition duration-300 font-heading"> |
|
|
التفاصيل |
|
|
</button> |
|
|
<button onclick="openOrderForm(6)" class="flex-1 px-4 py-2 text-sm font-semibold text-primary bg-accent-gold rounded-full hover:bg-opacity-90 transition duration-300 font-heading"> |
|
|
اطلب الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="service-card-item" data-title="الرسم الفني اليدوي بالقلم الجاف (تقنيات متنوعة)"> |
|
|
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col"> |
|
|
<img src="images/bef0440b95be23806377608014e0c8d1.jpg" alt="Pen Art" class="w-full card-image h-56 object-cover rounded-t-xl" onerror="this.onerror=null; this.src='https://placehold.co/400x300/FFFFFF/1C1C1C?text=رسم+يدوي+فني';"> |
|
|
<div class="p-6 text-center flex flex-col flex-grow"> |
|
|
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">الرسم الفني اليدوي بالقلم الجاف (تقنيات متنوعة)</h3> |
|
|
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">إبداع أصيل</p> |
|
|
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto"> |
|
|
<button onclick="openServiceDetails(7)" class="flex-1 px-4 py-2 text-sm font-semibold btn-details-gold rounded-full hover:shadow-lg transition duration-300 font-heading"> |
|
|
التفاصيل |
|
|
</button> |
|
|
<button onclick="openOrderForm(7)" class="flex-1 px-4 py-2 text-sm font-semibold text-primary bg-accent-gold rounded-full hover:bg-opacity-90 transition duration-300 font-heading"> |
|
|
اطلب الآن |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
<div id="service-modal-overlay" class="modal-overlay" onclick="closeModal()"> |
|
|
<div id="service-modal-content" class="modal-content" onclick="event.stopPropagation()"> |
|
|
<button onclick="closeModal()" class="absolute top-4 left-4 text-gray-500 hover:text-gray-900 transition focus:outline-none"> |
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg> |
|
|
</button> |
|
|
|
|
|
<h3 class="text-2xl font-bold text-primary mb-2 font-heading">تفاصيل وطلب الخدمة</h3> |
|
|
<p class="text-accent-gold font-semibold mb-6 text-base font-body">الخدمة المختارة: <span id="modal-service-name" class="text-design-primary">لم يتم تحديد خدمة</span></p> |
|
|
|
|
|
<div id="details-view"> |
|
|
<p id="modal-service-description" class="text-gray-700 mb-8 leading-relaxed font-body"> |
|
|
الوصف التفصيلي للخدمة يظهر هنا... |
|
|
</p> |
|
|
|
|
|
<button onclick="switchToForm()" class="w-full py-3 font-semibold text-primary bg-accent-gold rounded-lg shadow-md font-heading hover:bg-opacity-90 transition"> |
|
|
اطلب هذه الخدمة (الانتقال للنموذج) |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<form id="form-view" onsubmit="handleOrderSubmission(event)" class="hidden"> |
|
|
|
|
|
<h4 class="text-lg font-bold text-design-primary mb-4 font-heading">املأ بياناتك لحفظ الطلب وإرساله عبر الواتساب:</h4> |
|
|
|
|
|
<input type="hidden" id="service-name-hidden" name="serviceName"> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="full-name" class="block text-sm font-medium text-gray-700 mb-1 font-body">الاسم الكامل</label> |
|
|
<input type="text" id="full-name" name="fullName" required |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body" |
|
|
placeholder="أدخل اسمك الكامل"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1 font-body">رقم الهاتف (الواتساب)</label> |
|
|
<input type="tel" id="phone" name="phone" required |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body" |
|
|
placeholder="أدخل رقم الواتساب الخاص بك"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1 font-body">البريد الإلكتروني</label> |
|
|
<input type="email" id="email" name="email" required |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body" |
|
|
placeholder="example@domain.com"> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<label for="description" class="block text-sm font-medium text-gray-700 mb-1 font-body">وصف موجز للمشروع</label> |
|
|
<textarea id="description" name="description" rows="4" required |
|
|
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body" |
|
|
placeholder="اذكر متطلباتك الأساسية وأي تفاصيل هامة عن مشروعك"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" id="submit-order-button" class="w-full py-3 font-semibold text-primary bg-accent-gold rounded-lg shadow-md font-heading hover:bg-opacity-90 transition disabled:bg-gray-400 flex items-center justify-center"> |
|
|
إرسال الطلب وحفظ البيانات |
|
|
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/24/24/svg"><path d="M12.039 1.018A10.99 10.99 0 0 0 1.08 12.029c0 1.764.453 3.45 1.303 4.935L1 23l6.23-1.644a11.025 11.025 0 0 0 4.81 1.258h.005c6.071 0 11.002-4.931 11.002-11.001 0-3.235-1.353-6.232-3.535-8.414S15.274 1.018 12.039 1.018zM17.58 15.632c-.105.276-.395.733-.564.912-.17.18-.328.204-.616.082-.288-.122-1.218-.445-2.327-1.435-1.109-.99-1.859-2.209-2.083-2.583-.223-.374-.015-.572.164-.733.167-.16.395-.418.528-.567.133-.148.177-.306.264-.465.088-.16.044-.3-.022-.445-.065-.145-.583-1.41-.8-1.928-.217-.517-.435-.447-.6-.452-.167-.005-.357-.005-.546-.005-.188 0-.497.066-.757.327-.26.26-.992.977-.992 2.385 0 1.408 1.022 2.766 1.166 2.962.144.197 2.023 3.1 4.91 4.317 2.886 1.218 2.886.812 3.415.752.529-.06 1.737-.704 1.986-1.385.248-.68.248-1.263.17-1.407-.077-.145-.285-.23-.55-.375z"/></svg> |
|
|
</button> |
|
|
</form> |
|
|
|
|
|
<div id="submission-message" class="mt-4 p-4 rounded-lg text-center hidden font-body"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="bg-primary text-gray-400 py-12"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 text-right font-body"> |
|
|
<div class="col-span-2 md:col-span-1"> |
|
|
<h3 class="text-2xl font-extrabold text-accent-gold mb-4 uppercase tracking-widest font-heading">ASNFLUL_JA</h3> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading">الخصوصية</h4> |
|
|
<ul class="space-y-2 text-xs"> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">سياسة الخصوصية</a></li> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">الشروط والأحكام</a></li> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">سياسة الكوكيز</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading">خدماتنا</h4> |
|
|
<ul class="space-y-2 text-xs"> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">تصميم الشعارات</a></li> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">تطوير المواقع</a></li> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">الرسم اليدوي</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading">من نحن</h4> |
|
|
<ul class="space-y-2 text-xs"> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">قصتنا</a></li> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">فريق العمل</a></li> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">مواقعنا</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading">معلومات</h4> |
|
|
<ul class="space-y-2 text-xs"> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">الوظائف</a></li> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">الأسئلة الشائعة</a></li> |
|
|
<li><a href="#" class="hover:text-accent-gold transition">التواصل</a></li> |
|
|
</ul> |
|
|
<h4 class="text-white font-semibold mt-6 mb-3 uppercase text-sm font-heading">تابعنا</h4> |
|
|
<div class="flex space-x-4 flex-row-reverse"> |
|
|
|
|
|
<a href="https://www.facebook.com/share/1CKU2rHzcg/" target="_blank" class="text-gray-400 hover:text-accent-gold transition"> |
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h3v-3h-3c-3.79 0-5 2.22-5 5v2h-3v4h3v10h4v-10z"/></svg> |
|
|
</a> |
|
|
|
|
|
<a href="https://www.instagram.com/asnflul_ja?igsh=MTFlcmVsazBwbDBpbQ==" target="_blank" class="text-gray-400 hover:text-accent-gold transition"> |
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.8 2h8.4C17.37 2 18 2.63 18 3.4v8.4c0 .77-.63 1.4-1.4 1.4H7.8c-.77 0-1.4-.63-1.4-1.4V3.4C6.4 2.63 7.03 2 7.8 2zm-.4 3.4v8.4h8.4V5.4H7.4zm7.6 1.4c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zm-2.1 2.3c0 1.25-1.01 2.26-2.26 2.26S8.78 11.35 8.78 10.1c0-1.25 1.01-2.26 2.26-2.26s2.26 1.01 2.26 2.26z"/></svg> |
|
|
</a> |
|
|
|
|
|
<a href="https://twitter.com/yourusername" target="_blank" class="text-gray-400 hover:text-accent-gold transition"> |
|
|
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18.244 2.25h3.308l-7.227 8.261 8.845 11.45H16.27l-6.883-8.66-4.505 8.66H2.25l7.743-11.238L1.625 2.25H4.93L12 10.84 18.244 2.25zM15.424 21.08h2.072L7.753 3.76H5.509L15.424 21.08z"/></svg> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text-center mt-10 text-xs border-t border-gray-700 pt-6 font-body"> |
|
|
© 2025 ASNFLUL_JA. جميع الحقوق محفوظة. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<script type="module"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const WHATSAPP_LINK_BASE = "https://wa.me/message/P3DXRV6NTZ63L1"; |
|
|
|
|
|
const GOOGLE_FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLSfCxo5djRcGGwfBp3siqMpWaT2-6LgxHzycaV4SN8w-JwnAJQ/formResponse"; |
|
|
|
|
|
|
|
|
const GOOGLE_FORM_ENTRIES = { |
|
|
serviceName: 'entry.2048232046', |
|
|
fullName: 'entry.273358955', |
|
|
phone: 'entry.2006001208', |
|
|
email: 'entry.2047708974', |
|
|
description: 'entry.513059298' |
|
|
}; |
|
|
|
|
|
let currentServiceIndex = -1; |
|
|
const serviceData = [ |
|
|
{ title: "تصميم بطاقات الأعمال الاحترافية", description: "بطاقات أعمال أنيقة تعكس احترافيتك. نختار أفضل الخامات والتصاميم المبتكرة لضمان ترك انطباع دائم ومميز عند تبادل الاتصال. تتضمن تصميم الوجهين وتهيئة ملفات الطباعة الاحترافية." }, |
|
|
{ title: "تصميم وتطوير المواقع الإلكترونية العصرية", description: "تصميم واجهات مستخدم (UI) وتجربة مستخدم (UX) سلسة وجذابة للمواقع والتطبيقات، بالإضافة إلى تطوير الموقع بالكامل ليكون متجاوباً وسريعاً على جميع الأجهزة." }, |
|
|
{ title: "تصميم أغلفة الكتب والمجلات الفنية", description: "نصمم أغلفة فنية تخطف الأنظار وتلخص محتوى الكتاب أو المجلة بلمسة إبداعية. نضمن أن يكون الغلاف بمثابة بوابة جذابة لعملك الأدبي، مع مراعاة الجاذبية البصرية ومتطلبات النشر." }, |
|
|
{ title: "تصميم الشعارات والهوية البصرية المتكاملة", description: "نعمل على بناء هوية بصرية قوية ومتماسكة تبدأ من تصميم شعار فريد يحكي قصة علامتك التجارية، وصولاً إلى اختيار الألوان والخطوط وأنماط التصميم التي تميزك عن المنافسين. تشمل هذه الخدمة: تصميم الشعار، دليل الاستخدام، الألوان، الخطوط، وتطبيقات الهوية الأساسية." }, |
|
|
{ title: "تصميم اللافتات والإعلانات الخارجية", description: "حلول إعلانية خارجية جذابة ومؤثرة، تشمل تصميم لوحات الإعلانات الكبيرة، لافتات المحلات، والبنرات الدعائية، مع التركيز على الوضوح والرسالة السريعة. نضمن دقة المقاسات والجاهزية للطباعة على مختلف الخامات." }, |
|
|
{ title: "تصميم قوائم الطعام الفاخرة", description: "تصميم قوائم طعام راقية ومنظمة، تراعي سيكولوجية العميل وتبرز الأطباق المميزة، باستخدام صور ذات جودة عالية وتنسيق فاخر. تشمل تصميم القائمة المطبوعة والرقمية (QR Menu)." }, |
|
|
{ title: "تصميم الشواهد التكريمية والتقديرية", description: "نقدم تصميمات راقية لشهادات الشكر والتقدير والدروع التذكارية، باستخدام خطوط أنيقة وتنسيقات رسمية تعكس قيمة التكريم والتقدير. نركز على الفخامة والبساطة في آن واحد." }, |
|
|
{ title: "الرسم الفني اليدوي بالقلم الجاف (تقنيات متنوعة)", description: "خدمات رسم فني شخصية ومخصصة باستخدام تقنية القلم الجاف، لإنشاء لوحات فريدة أو رسومات توضيحية ذات طابع خاص وعميق. تشمل رسومات البورتريه والمناظر الطبيعية الفنية." } |
|
|
]; |
|
|
|
|
|
|
|
|
window.openServiceDetails = function(index) { |
|
|
currentServiceIndex = index; |
|
|
const data = serviceData[index]; |
|
|
if (!data) return; |
|
|
|
|
|
|
|
|
document.getElementById('modal-service-name').textContent = data.title; |
|
|
document.getElementById('modal-service-description').textContent = data.description; |
|
|
document.getElementById('service-name-hidden').value = data.title; |
|
|
|
|
|
|
|
|
document.getElementById('details-view').style.display = 'block'; |
|
|
document.getElementById('form-view').style.display = 'none'; |
|
|
document.getElementById('submission-message').style.display = 'none'; |
|
|
|
|
|
document.getElementById('service-modal-overlay').style.display = 'flex'; |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
|
|
|
window.openOrderForm = function(index) { |
|
|
currentServiceIndex = index; |
|
|
const data = serviceData[index]; |
|
|
if (!data) return; |
|
|
document.getElementById('modal-service-name').textContent = data.title; |
|
|
document.getElementById('service-name-hidden').value = data.title; |
|
|
|
|
|
|
|
|
document.getElementById('details-view').style.display = 'none'; |
|
|
document.getElementById('form-view').style.display = 'block'; |
|
|
document.getElementById('submission-message').style.display = 'none'; |
|
|
document.getElementById('form-view').reset(); |
|
|
document.getElementById('submit-order-button').disabled = false; |
|
|
document.getElementById('submit-order-button').innerHTML = 'إرسال الطلب وحفظ البيانات <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/24/24/svg"><path d="M12.039 1.018A10.99 10.99 0 0 0 1.08 12.029c0 1.764.453 3.45 1.303 4.935L1 23l6.23-1.644a11.025 11.025 0 0 0 4.81 1.258h.005c6.071 0 11.002-4.931 11.002-11.001 0-3.235-1.353-6.232-3.535-8.414S15.274 1.018 12.039 1.018zM17.58 15.632c-.105.276-.395.733-.564.912-.17.18-.328.204-.616.082-.288-.122-1.218-.445-2.327-1.435-1.109-.99-1.859-2.209-2.083-2.583-.223-.374-.015-.572.164-.733.167-.16.395-.418.528-.567.133-.148.177-.306.264-.465.088-.16.044-.3-.022-.445-.065-.145-.583-1.41-.8-1.928-.217-.517-.435-.447-.6-.452-.167-.005-.357-.005-.546-.005-.188 0-.497.066-.757.327-.26.26-.992.977-.992 2.385 0 1.408 1.022 2.766 1.166 2.962.144.197 2.023 3.1 4.91 4.317 2.886 1.218 2.886.812 3.415.752.529-.06 1.737-.704 1.986-1.385.248-.68.248-1.263.17-1.407-.077-.145-.285-.23-.55-.375z"/></svg>'; |
|
|
|
|
|
document.getElementById('service-modal-overlay').style.display = 'flex'; |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
|
|
|
window.switchToForm = function() { |
|
|
document.getElementById('details-view').style.display = 'none'; |
|
|
document.getElementById('form-view').style.display = 'block'; |
|
|
document.getElementById('form-view').reset(); |
|
|
} |
|
|
|
|
|
window.closeModal = function() { |
|
|
document.getElementById('service-modal-overlay').style.display = 'none'; |
|
|
document.body.style.overflow = ''; |
|
|
currentServiceIndex = -1; |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
async function saveToGoogleForm(formData) { |
|
|
const formPayload = new FormData(); |
|
|
|
|
|
|
|
|
const BEARER_TOKEN = "YOUR_SECURE_API_KEY_OR_TOKEN_12345"; |
|
|
|
|
|
|
|
|
formPayload.append(GOOGLE_FORM_ENTRIES.serviceName, formData.get('serviceName')); |
|
|
formPayload.append(GOOGLE_FORM_ENTRIES.fullName, formData.get('fullName')); |
|
|
formPayload.append(GOOGLE_FORM_ENTRIES.phone, formData.get('phone')); |
|
|
formPayload.append(GOOGLE_FORM_ENTRIES.email, formData.get('email')); |
|
|
formPayload.append(GOOGLE_FORM_ENTRIES.description, formData.get('description')); |
|
|
|
|
|
|
|
|
const headersForRealApi = { |
|
|
'Authorization': `Bearer ${BEARER_TOKEN}`, |
|
|
'Content-Type': 'application/json' |
|
|
}; |
|
|
|
|
|
|
|
|
try { |
|
|
|
|
|
const response = await fetch(GOOGLE_FORM_URL, { |
|
|
method: 'POST', |
|
|
mode: 'no-cors', |
|
|
body: formPayload, |
|
|
}); |
|
|
|
|
|
console.log("Bearer Token Concept: The Authorization header would be sent if this were your actual API endpoint."); |
|
|
return { success: true }; |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Error submitting to Google Form:", error); |
|
|
return { success: false, error: error.message }; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
window.handleOrderSubmission = async function(event) { |
|
|
event.preventDefault(); |
|
|
const form = event.target; |
|
|
const submissionMessage = document.getElementById('submission-message'); |
|
|
const submitButton = document.getElementById('submit-order-button'); |
|
|
const originalButtonContent = 'إرسال الطلب وحفظ البيانات <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/24/24/svg"><path d="M12.039 1.018A10.99 10.99 0 0 0 1.08 12.029c0 1.764.453 3.45 1.303 4.935L1 23l6.23-1.644a11.025 11.025 0 0 0 4.81 1.258h.005c6.071 0 11.002-4.931 11.002-11.001 0-3.235-1.353-6.232-3.535-8.414S15.274 1.018 12.039 1.018zM17.58 15.632c-.105.276-.395.733-.564.912-.17.18-.328.204-.616.082-.288-.122-1.218-.445-2.327-1.435-1.109-.99-1.859-2.209-2.083-2.583-.223-.374-.015-.572.164-.733.167-.16.395-.418.528-.567.133-.148.177-.306.264-.465.088-.16.044-.3-.022-.445-.065-.145-.583-1.41-.8-1.928-.217-.517-.435-.447-.6-.452-.167-.005-.357-.005-.546-.005-.188 0-.497.066-.757.327-.26.26-.992.977-.992 2.385 0 1.408 1.022 2.766 1.166 2.962.144.197 2.023 3.1 4.91 4.317 2.886 1.218 2.886.812 3.415.752.529-.06 1.737-.704 1.986-1.385.248-.68.248-1.263.17-1.407-.077-.145-.285-.23-.55-.375z"/></svg>'; |
|
|
|
|
|
|
|
|
const formData = new FormData(form); |
|
|
|
|
|
|
|
|
submitButton.disabled = true; |
|
|
submitButton.innerHTML = 'جارٍ حفظ البيانات... <span class="animate-spin inline-block mr-2">⟳</span>'; |
|
|
submissionMessage.style.display = 'none'; |
|
|
|
|
|
|
|
|
|
|
|
const saveResult = await saveToGoogleForm(formData); |
|
|
|
|
|
|
|
|
if (saveResult.success) { |
|
|
submissionMessage.textContent = 'تم حفظ بياناتك بنجاح. الآن سيتم تحويلك إلى الواتساب.'; |
|
|
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-green-100 text-green-700 font-bold font-body border border-green-500'; |
|
|
} else { |
|
|
submissionMessage.textContent = 'حدث خطأ أثناء حفظ البيانات (قد يكون تم الحفظ، أو لا). سننتقل إلى الواتساب الآن.'; |
|
|
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-yellow-100 text-yellow-700 font-bold font-body border border-yellow-500'; |
|
|
} |
|
|
submissionMessage.style.display = 'block'; |
|
|
|
|
|
|
|
|
|
|
|
submitButton.innerHTML = 'جارٍ التوجيه إلى الواتساب... <span class="animate-spin inline-block mr-2">⟳</span>'; |
|
|
|
|
|
const message = `*طلب خدمة تصميم جديد*\n\n` + |
|
|
`*الخدمة:* ${formData.get('serviceName')}\n` + |
|
|
`*الاسم:* ${formData.get('fullName')}\n` + |
|
|
`*البريد الإلكتروني:* ${formData.get('email')}\n` + |
|
|
`*رقم الهاتف:* ${formData.get('phone')}\n\n` + |
|
|
`*تفاصيل المشروع:*\n${formData.get('description')}`; |
|
|
|
|
|
const encodedMessage = encodeURIComponent(message); |
|
|
const whatsappLink = `${WHATSAPP_LINK_BASE}?text=${encodedMessage}`; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
window.open(whatsappLink, '_blank'); |
|
|
|
|
|
|
|
|
submitButton.disabled = false; |
|
|
submitButton.innerHTML = originalButtonContent; |
|
|
|
|
|
submissionMessage.innerHTML = 'تم توجيهك إلى الواتساب. <strong>الرجاء إرسال الرسالة لإتمام طلبك.</strong>'; |
|
|
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-accent-gold text-primary font-bold font-body'; |
|
|
|
|
|
form.style.display = 'none'; |
|
|
document.getElementById('details-view').style.display = 'none'; |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
document.addEventListener('keydown', function(e) { |
|
|
if (e.key === 'Escape') { |
|
|
closeModal(); |
|
|
} |
|
|
}); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
