| <!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> |
