Update index.html
Browse files- index.html +143 -469
index.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
-
<!DOCTYPE html>
|
| 2 |
-
<html lang="ar" dir="
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
@@ -158,7 +158,7 @@
|
|
| 158 |
}
|
| 159 |
</script>
|
| 160 |
</head>
|
| 161 |
-
<body class="bg-secondary antialiased font-body
|
| 162 |
|
| 163 |
<header class="header-bg relative h-auto" id="home">
|
| 164 |
<nav class="bg-primary/95 text-white font-medium py-4 font-heading border-b border-gray-700 shadow-xl">
|
|
@@ -168,21 +168,12 @@
|
|
| 168 |
<span class="text-xl tracking-widest uppercase font-extrabold text-white"></span>
|
| 169 |
</a>
|
| 170 |
|
| 171 |
-
<div class="hidden md:flex space-x-8 text-sm flex-row-reverse
|
| 172 |
-
<a href="#home" class="hover:text-accent-gold transition"
|
| 173 |
-
<a href="#services" class="hover:text-accent-gold transition"
|
| 174 |
-
<a href="#portfolio" class="hover:text-accent-gold transition"
|
| 175 |
-
<a href="#about" class="hover:text-accent-gold transition"
|
| 176 |
-
<a href="#contact" class="hover:text-accent-gold transition"
|
| 177 |
-
|
| 178 |
-
<div class="relative ml-4">
|
| 179 |
-
<select id="language-switcher" onchange="window.setLanguage(this.value)"
|
| 180 |
-
class="bg-primary text-accent-gold border border-accent-gold text-sm rounded-lg p-1.5 focus:ring-accent-gold focus:border-accent-gold cursor-pointer">
|
| 181 |
-
<option value="ar">العربية</option>
|
| 182 |
-
<option value="fr">Français</option>
|
| 183 |
-
<option value="en">English</option>
|
| 184 |
-
</select>
|
| 185 |
-
</div>
|
| 186 |
</div>
|
| 187 |
</div>
|
| 188 |
</nav>
|
|
@@ -193,12 +184,11 @@
|
|
| 193 |
<div class="absolute inset-0 bg-primary/40"></div>
|
| 194 |
|
| 195 |
<div class="relative z-10 text-white">
|
| 196 |
-
<p class="text-2xl text-accent-gold font-light font-body tracking-widest uppercase mb-2 drop-shadow-lg"
|
| 197 |
-
|
| 198 |
-
<h1 id="hero-title" class="text-5xl md:text-7xl font-extrabold leading-tight mb-8 font-heading drop-shadow-lg">
|
| 199 |
تصاميم بصرية <span class="text-accent-gold">تليق بمكانتك</span>.
|
| 200 |
</h1>
|
| 201 |
-
<a
|
| 202 |
اطلب الآن (نبدأ العمل)
|
| 203 |
</a>
|
| 204 |
</div>
|
|
@@ -212,7 +202,7 @@
|
|
| 212 |
<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">
|
| 213 |
<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" />
|
| 214 |
</svg>
|
| 215 |
-
<span class="text-sm font-medium text-design-primary font-body"
|
| 216 |
</div>
|
| 217 |
|
| 218 |
<div class="flex flex-col items-center group cursor-pointer">
|
|
@@ -220,7 +210,7 @@
|
|
| 220 |
<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" />
|
| 221 |
<path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18"/>
|
| 222 |
</svg>
|
| 223 |
-
<span class="text-sm font-medium text-design-primary font-body"
|
| 224 |
</div>
|
| 225 |
|
| 226 |
<div class="flex flex-col items-center group cursor-pointer">
|
|
@@ -228,14 +218,14 @@
|
|
| 228 |
<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"/>
|
| 229 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
| 230 |
</svg>
|
| 231 |
-
<span class="text-sm font-medium text-design-primary font-body"
|
| 232 |
</div>
|
| 233 |
|
| 234 |
<div class="flex flex-col items-center group cursor-pointer">
|
| 235 |
<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">
|
| 236 |
<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"/>
|
| 237 |
</svg>
|
| 238 |
-
<span class="text-sm font-medium text-design-primary font-body"
|
| 239 |
</div>
|
| 240 |
|
| 241 |
</div>
|
|
@@ -245,14 +235,14 @@
|
|
| 245 |
<section id="services" class="py-20 bg-secondary">
|
| 246 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 247 |
<div class="text-center mb-16">
|
| 248 |
-
<h2 class="text-4xl font-extrabold tracking-tight text-design-primary font-heading"
|
| 249 |
-
<p class="mt-2 text-gray-500 max-w-3xl mx-auto font-body"
|
| 250 |
</div>
|
| 251 |
|
| 252 |
<div class="max-w-4xl mx-auto mb-20 p-4 bg-light-bg rounded-xl shadow-2xl shadow-gray-300">
|
| 253 |
<div class="text-center mb-6">
|
| 254 |
-
<h3 class="text-3xl font-extrabold text-design-primary font-heading mb-2"
|
| 255 |
-
<p class="text-gray-600 font-body"
|
| 256 |
</div>
|
| 257 |
|
| 258 |
<div class="video-responsive mx-auto">
|
|
@@ -269,17 +259,17 @@
|
|
| 269 |
</div>
|
| 270 |
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 scroll-container">
|
| 271 |
|
| 272 |
-
<div class="service-card-item" data-
|
| 273 |
<div class="rounded-xl product-card card-white h-full flex flex-col">
|
| 274 |
<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=بطاقات+أعمال+فاخرة';">
|
| 275 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 276 |
-
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary"
|
| 277 |
-
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold"
|
| 278 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 279 |
-
<button onclick="
|
| 280 |
التفاصيل
|
| 281 |
</button>
|
| 282 |
-
<button onclick="
|
| 283 |
اطلب الآن
|
| 284 |
</button>
|
| 285 |
</div>
|
|
@@ -287,17 +277,17 @@
|
|
| 287 |
</div>
|
| 288 |
</div>
|
| 289 |
|
| 290 |
-
<div class="service-card-item" data-
|
| 291 |
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col">
|
| 292 |
<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=تطوير+مواقع+عصرية';">
|
| 293 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 294 |
-
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary"
|
| 295 |
-
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold"
|
| 296 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 297 |
-
<button onclick="
|
| 298 |
التفاصيل
|
| 299 |
</button>
|
| 300 |
-
<button onclick="
|
| 301 |
اطلب الآن
|
| 302 |
</button>
|
| 303 |
</div>
|
|
@@ -305,17 +295,17 @@
|
|
| 305 |
</div>
|
| 306 |
</div>
|
| 307 |
|
| 308 |
-
<div class="service-card-item" data-
|
| 309 |
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col">
|
| 310 |
<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=أغلفة+كتب+مذهلة';">
|
| 311 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 312 |
-
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary"
|
| 313 |
-
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold"
|
| 314 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 315 |
-
<button onclick="
|
| 316 |
التفاصيل
|
| 317 |
</button>
|
| 318 |
-
<button onclick="
|
| 319 |
اطلب الآن
|
| 320 |
</button>
|
| 321 |
</div>
|
|
@@ -323,17 +313,17 @@
|
|
| 323 |
</div>
|
| 324 |
</div>
|
| 325 |
|
| 326 |
-
<div class="service-card-item" data-
|
| 327 |
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col">
|
| 328 |
<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=هوية+بصرية+فخمة';">
|
| 329 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 330 |
-
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary"
|
| 331 |
-
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold"
|
| 332 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 333 |
-
<button onclick="
|
| 334 |
التفاصيل
|
| 335 |
</button>
|
| 336 |
-
<button onclick="
|
| 337 |
اطلب الآن
|
| 338 |
</button>
|
| 339 |
</div>
|
|
@@ -341,17 +331,17 @@
|
|
| 341 |
</div>
|
| 342 |
</div>
|
| 343 |
|
| 344 |
-
<div class="service-card-item" data-
|
| 345 |
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col">
|
| 346 |
<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=إعلانات+خارجية+مميزة';">
|
| 347 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 348 |
-
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary"
|
| 349 |
-
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold"
|
| 350 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 351 |
-
<button onclick="
|
| 352 |
التفاصيل
|
| 353 |
</button>
|
| 354 |
-
<button onclick="
|
| 355 |
اطلب الآن
|
| 356 |
</button>
|
| 357 |
</div>
|
|
@@ -359,17 +349,17 @@
|
|
| 359 |
</div>
|
| 360 |
</div>
|
| 361 |
|
| 362 |
-
<div class="service-card-item" data-
|
| 363 |
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col">
|
| 364 |
<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=قوائم+طعام+فاخرة';">
|
| 365 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 366 |
-
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary"
|
| 367 |
-
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold"
|
| 368 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 369 |
-
<button onclick="
|
| 370 |
التفاصيل
|
| 371 |
</button>
|
| 372 |
-
<button onclick="
|
| 373 |
اطلب الآن
|
| 374 |
</button>
|
| 375 |
</div>
|
|
@@ -377,17 +367,17 @@
|
|
| 377 |
</div>
|
| 378 |
</div>
|
| 379 |
|
| 380 |
-
<div class="service-card-item" data-
|
| 381 |
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col">
|
| 382 |
<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=شهادات+تقدير+فخمة';">
|
| 383 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 384 |
-
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary"
|
| 385 |
-
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold"
|
| 386 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 387 |
-
<button onclick="
|
| 388 |
التفاصيل
|
| 389 |
</button>
|
| 390 |
-
<button onclick="
|
| 391 |
اطلب الآن
|
| 392 |
</button>
|
| 393 |
</div>
|
|
@@ -395,17 +385,17 @@
|
|
| 395 |
</div>
|
| 396 |
</div>
|
| 397 |
|
| 398 |
-
<div class="service-card-item" data-
|
| 399 |
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col">
|
| 400 |
<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=رسم+يدوي+فني';">
|
| 401 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 402 |
-
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary"
|
| 403 |
-
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold"
|
| 404 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 405 |
-
<button onclick="
|
| 406 |
التفاصيل
|
| 407 |
</button>
|
| 408 |
-
<button onclick="
|
| 409 |
اطلب الآن
|
| 410 |
</button>
|
| 411 |
</div>
|
|
@@ -418,61 +408,61 @@
|
|
| 418 |
</section>
|
| 419 |
</main>
|
| 420 |
|
| 421 |
-
<div id="service-modal-overlay" class="modal-overlay" onclick="
|
| 422 |
<div id="service-modal-content" class="modal-content" onclick="event.stopPropagation()">
|
| 423 |
-
<button onclick="
|
| 424 |
<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>
|
| 425 |
</button>
|
| 426 |
|
| 427 |
-
<h3 class="text-2xl font-bold text-primary mb-2 font-heading"
|
| 428 |
-
<p class="text-accent-gold font-semibold mb-6 text-base font-body"
|
| 429 |
|
| 430 |
<div id="details-view">
|
| 431 |
<p id="modal-service-description" class="text-gray-700 mb-8 leading-relaxed font-body">
|
| 432 |
الوصف التفصيلي للخدمة يظهر هنا...
|
| 433 |
</p>
|
| 434 |
|
| 435 |
-
<button onclick="
|
| 436 |
اطلب هذه الخدمة (الانتقال للنموذج)
|
| 437 |
</button>
|
| 438 |
</div>
|
| 439 |
|
| 440 |
|
| 441 |
-
<form id="form-view" onsubmit="
|
| 442 |
|
| 443 |
-
<h4 class="text-lg font-bold text-design-primary mb-4 font-heading"
|
| 444 |
|
| 445 |
<input type="hidden" id="service-name-hidden" name="serviceName">
|
| 446 |
|
| 447 |
<div class="mb-4">
|
| 448 |
-
<label for="full-name" class="block text-sm font-medium text-gray-700 mb-1 font-body"
|
| 449 |
<input type="text" id="full-name" name="fullName" required
|
| 450 |
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body"
|
| 451 |
placeholder="أدخل اسمك الكامل">
|
| 452 |
</div>
|
| 453 |
|
| 454 |
<div class="mb-4">
|
| 455 |
-
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1 font-body"
|
| 456 |
<input type="tel" id="phone" name="phone" required
|
| 457 |
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body"
|
| 458 |
placeholder="أدخل رقم الواتساب الخاص بك">
|
| 459 |
</div>
|
| 460 |
|
| 461 |
<div class="mb-4">
|
| 462 |
-
<label for="email" class="block text-sm font-medium text-gray-700 mb-1 font-body"
|
| 463 |
<input type="email" id="email" name="email" required
|
| 464 |
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body"
|
| 465 |
placeholder="example@domain.com">
|
| 466 |
</div>
|
| 467 |
|
| 468 |
<div class="mb-6">
|
| 469 |
-
<label for="description" class="block text-sm font-medium text-gray-700 mb-1 font-body"
|
| 470 |
<textarea id="description" name="description" rows="4" required
|
| 471 |
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body"
|
| 472 |
placeholder="اذكر متطلباتك الأساسية وأي تفاصيل هامة عن مشروعك"></textarea>
|
| 473 |
</div>
|
| 474 |
|
| 475 |
-
<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"
|
| 476 |
إرسال الطلب وحفظ البيانات
|
| 477 |
<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>
|
| 478 |
</button>
|
|
@@ -484,46 +474,46 @@
|
|
| 484 |
|
| 485 |
<footer class="bg-primary text-gray-400 py-12">
|
| 486 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 487 |
-
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 font-body">
|
| 488 |
-
<div class="col-span-2 md:col-span-1
|
| 489 |
<h3 class="text-2xl font-extrabold text-accent-gold mb-4 uppercase tracking-widest font-heading">ASNFLUL_JA</h3>
|
| 490 |
</div>
|
| 491 |
|
| 492 |
<div>
|
| 493 |
-
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading"
|
| 494 |
<ul class="space-y-2 text-xs">
|
| 495 |
-
<li><a href="#" class="hover:text-accent-gold transition"
|
| 496 |
-
<li><a href="#" class="hover:text-accent-gold transition"
|
| 497 |
-
<li><a href="#" class="hover:text-accent-gold transition"
|
| 498 |
</ul>
|
| 499 |
</div>
|
| 500 |
|
| 501 |
<div>
|
| 502 |
-
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading"
|
| 503 |
<ul class="space-y-2 text-xs">
|
| 504 |
-
<li
|
| 505 |
-
<li
|
| 506 |
-
<li
|
| 507 |
</ul>
|
| 508 |
</div>
|
| 509 |
|
| 510 |
<div>
|
| 511 |
-
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading"
|
| 512 |
<ul class="space-y-2 text-xs">
|
| 513 |
-
<li
|
| 514 |
-
<li
|
| 515 |
-
<li
|
| 516 |
</ul>
|
| 517 |
</div>
|
| 518 |
|
| 519 |
<div>
|
| 520 |
-
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading"
|
| 521 |
<ul class="space-y-2 text-xs">
|
| 522 |
-
<li
|
| 523 |
-
<li
|
| 524 |
-
<li
|
| 525 |
</ul>
|
| 526 |
-
<h4 class="text-white font-semibold mt-6 mb-3 uppercase text-sm font-heading"
|
| 527 |
<div class="flex space-x-4 flex-row-reverse">
|
| 528 |
|
| 529 |
<a href="https://www.facebook.com/share/1CKU2rHzcg/" target="_blank" class="text-gray-400 hover:text-accent-gold transition">
|
|
@@ -541,352 +531,23 @@
|
|
| 541 |
</div>
|
| 542 |
</div>
|
| 543 |
<div class="text-center mt-10 text-xs border-t border-gray-700 pt-6 font-body">
|
| 544 |
-
© 2025 ASNFLUL_JA.
|
| 545 |
</div>
|
| 546 |
</div>
|
| 547 |
</footer>
|
| 548 |
|
| 549 |
|
| 550 |
-
<script>
|
| 551 |
|
| 552 |
// ----------------------------------------------------
|
| 553 |
-
//
|
| 554 |
-
// ----------------------------------------------------
|
| 555 |
-
const translations = {
|
| 556 |
-
ar: {
|
| 557 |
-
// الاتجاه والتنسيق
|
| 558 |
-
dir: 'rtl',
|
| 559 |
-
textAlign: 'text-right',
|
| 560 |
-
|
| 561 |
-
// شريط التنقل
|
| 562 |
-
navHome: 'الرئيسية',
|
| 563 |
-
navServices: 'خدماتنا',
|
| 564 |
-
navPortfolio: 'أعمالنا',
|
| 565 |
-
navAbout: 'من نحن',
|
| 566 |
-
navContact: 'اتصل بنا',
|
| 567 |
-
|
| 568 |
-
// قسم الأبطال (Hero)
|
| 569 |
-
heroSubtitle: 'الفخامة في كل تفصيل',
|
| 570 |
-
heroTitle: 'تصاميم بصرية <span class="text-accent-gold">تليق بمكانتك</span>.',
|
| 571 |
-
heroButton: 'اطلب الآن (نبدأ العمل)',
|
| 572 |
-
|
| 573 |
-
// الأيقونات
|
| 574 |
-
icon1: 'هوية بصرية',
|
| 575 |
-
icon2: 'إعلانات خارجية',
|
| 576 |
-
icon3: 'تطوير مواقع',
|
| 577 |
-
icon4: 'رسم يدوي',
|
| 578 |
-
|
| 579 |
-
// قسم الخدمات
|
| 580 |
-
servicesTitle: 'خدماتنا المتميزة',
|
| 581 |
-
servicesSubtitle: 'نقدم حلولاً تصميمية تتجاوز التوقعات وتلبي تطلعات الرفاهية.',
|
| 582 |
-
videoTitle: 'شاهد قصتنا!',
|
| 583 |
-
videoSubtitle: 'نظرة سريعة على جودة خدماتنا وأسلوب عملنا الاحترافي.',
|
| 584 |
-
btnDetails: 'التفاصيل',
|
| 585 |
-
btnOrder: 'اطلب الآن',
|
| 586 |
-
|
| 587 |
-
// تذييل الصفحة (Footer)
|
| 588 |
-
footerPrivacy: 'الخصوصية',
|
| 589 |
-
footerPolicy: 'سياسة الخصوصية',
|
| 590 |
-
footerTerms: 'الشروط والأحكام',
|
| 591 |
-
footerCookies: 'سياسة الكوكيز',
|
| 592 |
-
footerServices: 'خدماتنا',
|
| 593 |
-
footerService1: 'تصميم الشعارات',
|
| 594 |
-
footerService2: 'تطوير المواقع',
|
| 595 |
-
footerService3: 'الرسم اليدوي',
|
| 596 |
-
footerAbout: 'من نحن',
|
| 597 |
-
footerAbout1: 'قصتنا',
|
| 598 |
-
footerAbout2: 'فريق العمل',
|
| 599 |
-
footerAbout3: 'مواقعنا',
|
| 600 |
-
footerContactInfo: 'معلومات',
|
| 601 |
-
footerInfo1: 'الوظائف',
|
| 602 |
-
footerInfo2: 'الأسئلة الشائعة',
|
| 603 |
-
footerInfo3: 'التواصل',
|
| 604 |
-
footerFollowUs: 'تابعنا',
|
| 605 |
-
footerCopyright: 'جميع الحقوق محفوظة.',
|
| 606 |
-
|
| 607 |
-
// المودال
|
| 608 |
-
modalTitle: 'تفاصيل وطلب الخدمة',
|
| 609 |
-
modalSelectedService: 'الخدمة المختارة:',
|
| 610 |
-
modalBtnSwitchToForm: 'اطلب هذه الخدمة (الانتقال للنموذج)',
|
| 611 |
-
formTitle: 'املأ بياناتك لحفظ الطلب وإرساله عبر الواتساب:',
|
| 612 |
-
formNameLabel: 'الاسم الكامل',
|
| 613 |
-
formPhoneLabel: 'رقم الهاتف (الواتساب)',
|
| 614 |
-
formEmailLabel: 'البريد الإلكتروني',
|
| 615 |
-
formDescLabel: 'وصف موجز للمشروع',
|
| 616 |
-
formDescPlaceholder: 'اذكر متطلباتك الأساسية وأي تفاصيل هامة عن مشروعك',
|
| 617 |
-
formSubmitButton: 'إرسال الطلب وحفظ البيانات',
|
| 618 |
-
// رسائل النموذج
|
| 619 |
-
msgSaving: 'جارٍ حفظ البيانات... ⟳',
|
| 620 |
-
msgSavedSuccess: 'تم حفظ بياناتك بنجاح. الآن سيتم تحويلك إلى الواتساب.',
|
| 621 |
-
msgSavedError: 'حدث خطأ أثناء حفظ البيانات. سننتقل إلى الواتساب الآن.',
|
| 622 |
-
msgRedirecting: 'جارٍ التوجيه إلى الواتساب... ⟳',
|
| 623 |
-
msgFinal: 'تم توجيهك إلى الواتساب. <strong>الرجاء إرسال الرسالة لإتمام طلبك.</strong>',
|
| 624 |
-
|
| 625 |
-
// بيانات الخدمات
|
| 626 |
-
serviceTitles: [
|
| 627 |
-
'تصميم بطاقات الأعمال الاحترافية', 'تصميم وتطوير المواقع الإلكترونية العصرية', 'تصميم أغلفة الكتب والمجلات الفنية',
|
| 628 |
-
'تصميم الشعارات والهوية البصرية المتكاملة', 'تصميم اللافتات والإعلانات الخارجية', 'تصميم قوائم الطعام الفاخرة',
|
| 629 |
-
'تصميم الشواهد التكريمية والتقديرية', 'الرسم الفني اليدوي بالقلم الجاف (تقنيات متنوعة)'
|
| 630 |
-
],
|
| 631 |
-
serviceTags: [
|
| 632 |
-
'لمسة أولى خالدة', 'واجهة المستقبل', 'جاذبية القراءة', 'بصمة لا تُمحى',
|
| 633 |
-
'وصول مؤثر', 'مذاق بصري', 'تخليد الإنجاز', 'إبداع أصيل'
|
| 634 |
-
],
|
| 635 |
-
serviceDescriptions: [
|
| 636 |
-
"بطاقات أعمال أنيقة تعكس احترافيتك. نختار أفضل الخامات والتصاميم المبتكرة لضمان ترك انطباع دائم ومميز عند تبادل الاتصال. تتضمن تصميم الوجهين وتهيئة ملفات الطباعة الاحترافية.",
|
| 637 |
-
"تصميم واجهات مستخدم (UI) وتجربة مستخدم (UX) سلسة وجذابة للمواقع والتطبيقات، بالإضافة إلى تطوير الموقع بالكامل ليكون متجاوباً وسريعاً على جميع الأجهزة.",
|
| 638 |
-
"نصمم أغلفة فنية تخطف الأنظار وتلخص محتوى الكتاب أو المجلة بلمسة إبداعية. نضمن أن يكون الغلاف بمثابة بوابة جذابة لعملك الأدبي، مع مراعاة الجاذبية البصرية ومتطلبات النشر.",
|
| 639 |
-
"نعمل على بناء هوية بصرية قوية ومتماسكة تبدأ من تصميم شعار فريد يحكي قصة علامتك التجارية، وصولاً إلى اختيار الألوان والخطوط وأنماط التصميم التي تميزك عن المنافسين. تشمل هذه الخدمة: تصميم الشعار، دليل الاستخدام، الألوان، الخطوط، وتطبيقات الهوية الأساسية.",
|
| 640 |
-
"حلول إعلانية خارجية جذابة ومؤثرة، تشمل تصميم لوحات الإعلانات الكبيرة، لافتات المحلات، والبنرات الدعائية، مع التركيز على الوضوح والرسالة السريعة. نضمن ��قة المقاسات والجاهزية للطباعة على مختلف الخامات.",
|
| 641 |
-
"تصميم قوائم طعام راقية ومنظمة، تراعي سيكولوجية العميل وتبرز الأطباق المميزة، باستخدام صور ذات جودة عالية وتنسيق فاخر. تشمل تصميم القائمة المطبوعة والرقمية (QR Menu).",
|
| 642 |
-
"نقدم تصميمات راقية لشهادات الشكر والتقدير والدروع التذكارية، باستخدام خطوط أنيقة وتنسيقات رسمية تعكس قيمة التكريم والتقدير. نركز على الفخامة والبساطة في آن واحد.",
|
| 643 |
-
"خدمات رسم فني شخصية ومخصصة باستخدام تقنية القلم الجاف، لإنشاء لوحات فريدة أو رسومات توضيحية ذات طابع خاص وعميق. تشمل رسومات البورتريه والمناظر الطبيعية الفنية."
|
| 644 |
-
]
|
| 645 |
-
},
|
| 646 |
-
fr: {
|
| 647 |
-
dir: 'ltr',
|
| 648 |
-
textAlign: 'text-left',
|
| 649 |
-
|
| 650 |
-
navHome: 'Accueil',
|
| 651 |
-
navServices: 'Services',
|
| 652 |
-
navPortfolio: 'Portfolio',
|
| 653 |
-
navAbout: 'À propos',
|
| 654 |
-
navContact: 'Contactez-nous',
|
| 655 |
-
|
| 656 |
-
heroSubtitle: 'Le luxe dans chaque détail',
|
| 657 |
-
heroTitle: 'Designs visuels <span class="text-accent-gold">dignes de votre statut</span>.',
|
| 658 |
-
heroButton: 'Commander maintenant (Démarrer)',
|
| 659 |
-
|
| 660 |
-
icon1: 'Identité Visuelle',
|
| 661 |
-
icon2: 'Publicité Extérieure',
|
| 662 |
-
icon3: 'Développement Web',
|
| 663 |
-
icon4: 'Dessin à la main',
|
| 664 |
-
|
| 665 |
-
servicesTitle: 'Nos Services Exceptionnels',
|
| 666 |
-
servicesSubtitle: 'Nous offrons des solutions de conception qui dépassent les attentes et répondent aux aspirations de luxe.',
|
| 667 |
-
videoTitle: 'Découvrez notre histoire!',
|
| 668 |
-
videoSubtitle: 'Un aperçu rapide de la qualité de nos services et de notre approche professionnelle.',
|
| 669 |
-
btnDetails: 'Détails',
|
| 670 |
-
btnOrder: 'Commander maintenant',
|
| 671 |
-
|
| 672 |
-
footerPrivacy: 'Confidentialité',
|
| 673 |
-
footerPolicy: 'Politique de Confidentialité',
|
| 674 |
-
footerTerms: 'Termes et Conditions',
|
| 675 |
-
footerCookies: 'Politique de Cookies',
|
| 676 |
-
footerServices: 'Nos Services',
|
| 677 |
-
footerService1: 'Conception de Logos',
|
| 678 |
-
footerService2: 'Développement Web',
|
| 679 |
-
footerService3: 'Dessin à la main',
|
| 680 |
-
footerAbout: 'Qui sommes-nous',
|
| 681 |
-
footerAbout1: 'Notre Histoire',
|
| 682 |
-
footerAbout2: 'Notre Équipe',
|
| 683 |
-
footerAbout3: 'Nos Emplacements',
|
| 684 |
-
footerContactInfo: 'Information',
|
| 685 |
-
footerInfo1: 'Carrières',
|
| 686 |
-
footerInfo2: 'FAQ',
|
| 687 |
-
footerInfo3: 'Contact',
|
| 688 |
-
footerFollowUs: 'Suivez-nous',
|
| 689 |
-
footerCopyright: 'Tous droits réservés.',
|
| 690 |
-
|
| 691 |
-
modalTitle: 'Détails et Commande de Service',
|
| 692 |
-
modalSelectedService: 'Service sélectionné:',
|
| 693 |
-
modalBtnSwitchToForm: 'Commander ce service (Aller au formulaire)',
|
| 694 |
-
formTitle: 'Remplissez vos coordonnées pour enregistrer et envoyer la commande par WhatsApp:',
|
| 695 |
-
formNameLabel: 'Nom complet',
|
| 696 |
-
formPhoneLabel: 'Numéro de téléphone (WhatsApp)',
|
| 697 |
-
formEmailLabel: 'E-mail',
|
| 698 |
-
formDescLabel: 'Brève description du projet',
|
| 699 |
-
formDescPlaceholder: 'Mentionnez vos exigences de base et tout détail important de votre projet',
|
| 700 |
-
formSubmitButton: 'Envoyer la commande et enregistrer',
|
| 701 |
-
|
| 702 |
-
msgSaving: 'Enregistrement des données... ⟳',
|
| 703 |
-
msgSavedSuccess: 'Vos données ont été enregistrées avec succès. Vous allez être redirigé vers WhatsApp.',
|
| 704 |
-
msgSavedError: 'Une erreur est survenue lors de l\'enregistrement. Nous allons vous rediriger vers WhatsApp maintenant.',
|
| 705 |
-
msgRedirecting: 'Redirection vers WhatsApp... ⟳',
|
| 706 |
-
msgFinal: 'Vous avez été redirigé vers WhatsApp. <strong>Veuillez envoyer le message pour finaliser votre commande.</strong>',
|
| 707 |
-
|
| 708 |
-
serviceTitles: [
|
| 709 |
-
'Conception de cartes de visite professionnelles', 'Conception et développement de sites Web modernes', 'Conception de couvertures de livres et de magazines artistiques',
|
| 710 |
-
'Conception de logos et d\'identité visuelle intégrée', 'Conception d\'affiches et de publicités extérieures', 'Conception de menus de restaurant de luxe',
|
| 711 |
-
'Conception de plaques commémoratives et de reconnaissance', 'Dessin artistique au stylo (diverses techniques)'
|
| 712 |
-
],
|
| 713 |
-
serviceTags: [
|
| 714 |
-
'Une première impression durable', 'L\'interface du futur', 'Attrait de la lecture', 'Une empreinte indélébile',
|
| 715 |
-
'Un impact efficace', 'Goût visuel', 'Immortalisation de l\'accomplissement', 'Créativité authentique'
|
| 716 |
-
],
|
| 717 |
-
serviceDescriptions: [
|
| 718 |
-
"Des cartes de visite élégantes qui reflètent votre professionnalisme. Nous sélectionnons les meilleurs matériaux et des designs innovants pour assurer une impression durable et distinctive lors de l'échange de contacts. Comprend la conception recto-verso et la préparation des fichiers d'impression professionnels.",
|
| 719 |
-
"Conception d'interfaces utilisateur (UI) et d'expérience utilisateur (UX) fluides et attrayantes pour les sites Web et les applications, ainsi que le développement complet du site pour qu'il soit réactif et rapide sur tous les appareils.",
|
| 720 |
-
"Nous concevons des couvertures artistiques qui attirent l'attention et résument le contenu du livre ou du magazine avec une touche créative. Nous garantissons que la couverture est une porte d'entrée attrayante vers votre œuvre littéraire, en tenant compte de l'attrait visuel et des exigences d'édition.",
|
| 721 |
-
"Nous travaillons à la construction d'une identité visuelle forte et cohérente, à partir de la conception d'un logo unique racontant l'histoire de votre marque, jusqu'au choix des couleurs, des polices et des styles de conception qui vous distinguent de la concurrence. Ce service comprend : la conception du logo, le guide d'utilisation, les couleurs, les polices et les applications d'identité de base.",
|
| 722 |
-
"Solutions publicitaires extérieures attrayantes et percutantes, comprenant la conception de grands panneaux d'affichage, d'enseignes de magasins et de bannières promotionnelles, en mettant l'accent sur la clarté et le message rapide. Nous garantissons la précision des mesures et la préparation pour l'impression sur divers matériaux.",
|
| 723 |
-
"Conception de menus de restaurant élégants et organisés, tenant compte de la psychologie du client et mettant en évidence les plats spéciaux, en utilisant des images de haute qualité et un format de luxe. Comprend la conception du menu imprimé et numérique (QR Menu).",
|
| 724 |
-
"Nous proposons des designs élégants pour les certificats de remerciement et d'appréciation et les boucliers commémoratifs, en utilisant des polices élégantes et des formats officiels qui reflètent la valeur de l'honneur et de la reconnaissance. Nous nous concentrons sur le luxe et la simplicité simultanément.",
|
| 725 |
-
"Services de dessin artistique personnel et personnalisé utilisant la technique du stylo, pour créer des œuvres uniques ou des illustrations avec un caractère spécial et profond. Comprend des portraits et des paysages artistiques."
|
| 726 |
-
]
|
| 727 |
-
},
|
| 728 |
-
en: {
|
| 729 |
-
dir: 'ltr',
|
| 730 |
-
textAlign: 'text-left',
|
| 731 |
-
|
| 732 |
-
navHome: 'Home',
|
| 733 |
-
navServices: 'Services',
|
| 734 |
-
navPortfolio: 'Portfolio',
|
| 735 |
-
navAbout: 'About Us',
|
| 736 |
-
navContact: 'Contact Us',
|
| 737 |
-
|
| 738 |
-
heroSubtitle: 'Luxury in Every Detail',
|
| 739 |
-
heroTitle: 'Visual Designs <span class="text-accent-gold">Worthy of Your Status</span>.',
|
| 740 |
-
heroButton: 'Order Now (Start Working)',
|
| 741 |
-
|
| 742 |
-
icon1: 'Visual Identity',
|
| 743 |
-
icon2: 'Outdoor Advertising',
|
| 744 |
-
icon3: 'Web Development',
|
| 745 |
-
icon4: 'Hand Drawing',
|
| 746 |
-
|
| 747 |
-
servicesTitle: 'Our Exceptional Services',
|
| 748 |
-
servicesSubtitle: 'We offer design solutions that exceed expectations and meet luxury aspirations.',
|
| 749 |
-
videoTitle: 'Watch Our Story!',
|
| 750 |
-
videoSubtitle: 'A quick look at the quality of our services and our professional approach.',
|
| 751 |
-
btnDetails: 'Details',
|
| 752 |
-
btnOrder: 'Order Now',
|
| 753 |
-
|
| 754 |
-
footerPrivacy: 'Privacy',
|
| 755 |
-
footerPolicy: 'Privacy Policy',
|
| 756 |
-
footerTerms: 'Terms & Conditions',
|
| 757 |
-
footerCookies: 'Cookies Policy',
|
| 758 |
-
footerServices: 'Services',
|
| 759 |
-
footerService1: 'Logo Design',
|
| 760 |
-
footerService2: 'Web Development',
|
| 761 |
-
footerService3: 'Hand Drawing',
|
| 762 |
-
footerAbout: 'About Us',
|
| 763 |
-
footerAbout1: 'Our Story',
|
| 764 |
-
footerAbout2: 'Our Team',
|
| 765 |
-
footerAbout3: 'Our Locations',
|
| 766 |
-
footerContactInfo: 'Information',
|
| 767 |
-
footerInfo1: 'Careers',
|
| 768 |
-
footerInfo2: 'FAQ',
|
| 769 |
-
footerInfo3: 'Contact',
|
| 770 |
-
footerFollowUs: 'Follow Us',
|
| 771 |
-
footerCopyright: 'All Rights Reserved.',
|
| 772 |
-
|
| 773 |
-
modalTitle: 'Service Details & Order',
|
| 774 |
-
modalSelectedService: 'Selected Service:',
|
| 775 |
-
modalBtnSwitchToForm: 'Order This Service (Go to Form)',
|
| 776 |
-
formTitle: 'Fill in your details to save and send the order via WhatsApp:',
|
| 777 |
-
formNameLabel: 'Full Name',
|
| 778 |
-
formPhoneLabel: 'Phone Number (WhatsApp)',
|
| 779 |
-
formEmailLabel: 'Email Address',
|
| 780 |
-
formDescLabel: 'Brief Project Description',
|
| 781 |
-
formDescPlaceholder: 'Mention your basic requirements and any important project details',
|
| 782 |
-
formSubmitButton: 'Submit Order and Save Data',
|
| 783 |
-
|
| 784 |
-
msgSaving: 'Saving data... ⟳',
|
| 785 |
-
msgSavedSuccess: 'Your data has been saved successfully. You will now be redirected to WhatsApp.',
|
| 786 |
-
msgSavedError: 'An error occurred while saving data. We will redirect you to WhatsApp now.',
|
| 787 |
-
msgRedirecting: 'Redirecting to WhatsApp... ⟳',
|
| 788 |
-
msgFinal: 'You have been redirected to WhatsApp. <strong>Please send the message to finalize your order.</strong>',
|
| 789 |
-
|
| 790 |
-
serviceTitles: [
|
| 791 |
-
'Professional Business Card Design', 'Modern Website Design and Development', 'Artistic Book and Magazine Cover Design',
|
| 792 |
-
'Integrated Logo and Visual Identity Design', 'Outdoor Advertising and Banner Design', 'Luxury Restaurant Menu Design',
|
| 793 |
-
'Commemorative Plaques and Appreciation Certificates Design', 'Hand-Drawn Pen Art (Various Techniques)'
|
| 794 |
-
],
|
| 795 |
-
serviceTags: [
|
| 796 |
-
'A Lasting First Impression', 'The Interface of the Future', 'Reading Appeal', 'An Indelible Mark',
|
| 797 |
-
'Effective Reach', 'Visual Taste', 'Immortalizing Achievement', 'Authentic Creativity'
|
| 798 |
-
],
|
| 799 |
-
serviceDescriptions: [
|
| 800 |
-
"Elegant business cards that reflect your professionalism. We select the finest materials and innovative designs to ensure a lasting and distinctive impression when exchanging contacts. Includes double-sided design and professional print file preparation.",
|
| 801 |
-
"Designing smooth and attractive User Interfaces (UI) and User Experiences (UX) for websites and applications, along with full site development to be responsive and fast on all devices.",
|
| 802 |
-
"We design eye-catching artistic covers that summarize the content of the book or magazine with a creative touch. We ensure the cover is an attractive gateway to your literary work, considering visual appeal and publishing requirements.",
|
| 803 |
-
"We work on building a strong and cohesive visual identity starting with the design of a unique logo that tells your brand's story, down to the selection of colors, fonts, and design patterns that set you apart from the competition. This service includes: logo design, usage guide, colors, fonts, and basic identity applications.",
|
| 804 |
-
"Attractive and impactful outdoor advertising solutions, including the design of large billboards, store signs, and promotional banners, focusing on clarity and quick messaging. We ensure measurement accuracy and readiness for printing on various materials.",
|
| 805 |
-
"Designing sophisticated and organized restaurant menus, considering customer psychology and highlighting special dishes, using high-quality images and a luxurious format. Includes printed and digital menu design (QR Menu).",
|
| 806 |
-
"We offer elegant designs for thank you and appreciation certificates and commemorative shields, using stylish fonts and official formats that reflect the value of honor and recognition. We focus on luxury and simplicity simultaneously.",
|
| 807 |
-
"Personalized and customized artistic drawing services using pen technique, to create unique artwork or illustrations with a special and profound character. Includes portrait drawings and artistic landscapes."
|
| 808 |
-
]
|
| 809 |
-
}
|
| 810 |
-
};
|
| 811 |
-
|
| 812 |
-
// ----------------------------------------------------
|
| 813 |
-
// 2. الدوال والمنطق (تم تحديثها للتعامل مع الترجمة)
|
| 814 |
-
// ----------------------------------------------------
|
| 815 |
-
|
| 816 |
-
let currentLang = 'ar'; // اللغة الافتراضية
|
| 817 |
-
|
| 818 |
-
// الوظيفة الرئيسية لتعيين اللغة (تم وضعها على كائن window لضمان الوصول من HTML)
|
| 819 |
-
window.setLanguage = function(lang) {
|
| 820 |
-
const langData = translations[lang];
|
| 821 |
-
if (!langData) return;
|
| 822 |
-
currentLang = lang;
|
| 823 |
-
|
| 824 |
-
// 1. تحديث اتجاه النص (RTL/LTR)
|
| 825 |
-
document.documentElement.setAttribute('dir', langData.dir);
|
| 826 |
-
document.documentElement.setAttribute('lang', lang);
|
| 827 |
-
|
| 828 |
-
// 2. تحديث المحاذاة العامة للجسم
|
| 829 |
-
document.body.classList.remove('text-right', 'text-left');
|
| 830 |
-
document.body.classList.add(langData.textAlign);
|
| 831 |
-
|
| 832 |
-
// 3. تحديث محاذاة حقول الإدخال
|
| 833 |
-
document.querySelectorAll('input[type="text"], input[type="email"], input[type="tel"], textarea').forEach(input => {
|
| 834 |
-
input.classList.remove('text-right', 'text-left');
|
| 835 |
-
input.classList.add(langData.textAlign);
|
| 836 |
-
});
|
| 837 |
-
|
| 838 |
-
|
| 839 |
-
// 4. ترجمة النصوص باستخدام data-lang-key
|
| 840 |
-
document.querySelectorAll('[data-lang-key]').forEach(element => {
|
| 841 |
-
const key = element.getAttribute('data-lang-key');
|
| 842 |
-
if (langData[key] !== undefined) {
|
| 843 |
-
// نستخدم innerHTML للسماح بالـ span في heroTitle
|
| 844 |
-
element.innerHTML = langData[key];
|
| 845 |
-
}
|
| 846 |
-
});
|
| 847 |
-
|
| 848 |
-
// 5. تحديث محتوى بطاقات الخدمات
|
| 849 |
-
document.querySelectorAll('[data-service-index]').forEach(card => {
|
| 850 |
-
const index = parseInt(card.getAttribute('data-service-index'));
|
| 851 |
-
if (index !== undefined) {
|
| 852 |
-
// تحديث عنوان البطاقة
|
| 853 |
-
const titleElement = card.querySelector(`[data-service-title="${index}"]`);
|
| 854 |
-
if(titleElement) {
|
| 855 |
-
titleElement.textContent = langData.serviceTitles[index];
|
| 856 |
-
}
|
| 857 |
-
// تحديث الـ Tag
|
| 858 |
-
const tagElement = card.querySelector(`[data-service-tag="${index}"]`);
|
| 859 |
-
if(tagElement) {
|
| 860 |
-
tagElement.textContent = langData.serviceTags[index];
|
| 861 |
-
}
|
| 862 |
-
}
|
| 863 |
-
});
|
| 864 |
-
|
| 865 |
-
// 6. حفظ اللغة المختارة في الذاكرة المحلية (Local Storage)
|
| 866 |
-
localStorage.setItem('selectedLanguage', lang);
|
| 867 |
-
}
|
| 868 |
-
|
| 869 |
-
// تحميل اللغة المحفوظة عند فتح الصفحة
|
| 870 |
-
document.addEventListener('DOMContentLoaded', () => {
|
| 871 |
-
const savedLang = localStorage.getItem('selectedLanguage') || 'ar'; // الافتراضية هي العربية
|
| 872 |
-
const switcher = document.getElementById('language-switcher');
|
| 873 |
-
|
| 874 |
-
if (switcher) {
|
| 875 |
-
switcher.value = savedLang;
|
| 876 |
-
// التأكد من تطبيق setLanguage عند التحميل الأول
|
| 877 |
-
window.setLanguage(savedLang);
|
| 878 |
-
}
|
| 879 |
-
});
|
| 880 |
-
|
| 881 |
-
// ----------------------------------------------------
|
| 882 |
-
// 3. منطق الطلبات والنافذة المنبثقة (Modal Logic)
|
| 883 |
// ----------------------------------------------------
|
| 884 |
|
| 885 |
const WHATSAPP_LINK_BASE = "https://wa.me/message/P3DXRV6NTZ63L1"; // رابط الواتساب
|
| 886 |
// !!! تأكد من أن هذا الرابط يعمل بشكل صحيح لنموذج جوجل الخاص بك !!!
|
| 887 |
const GOOGLE_FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLSfCxo5djRcGGwfBp3siqMpWaT2-6LgxHzycaV4SN8w-JwnAJQ/formResponse";
|
| 888 |
|
| 889 |
-
// معرفات حقول نموذج جوجل
|
| 890 |
const GOOGLE_FORM_ENTRIES = {
|
| 891 |
serviceName: 'entry.2048232046',
|
| 892 |
fullName: 'entry.273358955',
|
|
@@ -896,19 +557,27 @@
|
|
| 896 |
};
|
| 897 |
|
| 898 |
let currentServiceIndex = -1;
|
| 899 |
-
|
| 900 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 901 |
window.openServiceDetails = function(index) {
|
| 902 |
currentServiceIndex = index;
|
| 903 |
-
const
|
|
|
|
| 904 |
|
| 905 |
-
//
|
| 906 |
-
|
| 907 |
-
|
| 908 |
-
|
| 909 |
-
document.getElementById('modal-service-name').textContent = title;
|
| 910 |
-
document.getElementById('modal-service-description').textContent = description;
|
| 911 |
-
document.getElementById('service-name-hidden').value = title;
|
| 912 |
|
| 913 |
// إظهار نافذة التفاصيل وإخفاء نموذج الطلب
|
| 914 |
document.getElementById('details-view').style.display = 'block';
|
|
@@ -919,14 +588,13 @@
|
|
| 919 |
document.body.style.overflow = 'hidden';
|
| 920 |
}
|
| 921 |
|
| 922 |
-
// وظيفة تفتح نموذج الطلب مباشرة (عند الضغط على "اطلب الآن")
|
| 923 |
window.openOrderForm = function(index) {
|
| 924 |
currentServiceIndex = index;
|
| 925 |
-
const
|
| 926 |
-
|
| 927 |
-
|
| 928 |
-
document.getElementById('
|
| 929 |
-
document.getElementById('service-name-hidden').value = title;
|
| 930 |
|
| 931 |
// الانتقال مباشرة إلى النموذج
|
| 932 |
document.getElementById('details-view').style.display = 'none';
|
|
@@ -934,21 +602,19 @@
|
|
| 934 |
document.getElementById('submission-message').style.display = 'none';
|
| 935 |
document.getElementById('form-view').reset();
|
| 936 |
document.getElementById('submit-order-button').disabled = false;
|
| 937 |
-
document.getElementById('submit-order-button').innerHTML =
|
| 938 |
-
' <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>';
|
| 939 |
|
| 940 |
document.getElementById('service-modal-overlay').style.display = 'flex';
|
| 941 |
document.body.style.overflow = 'hidden';
|
| 942 |
}
|
| 943 |
|
| 944 |
-
// وظيفة التحويل من عرض التفاصيل إلى عرض النموذج
|
| 945 |
window.switchToForm = function() {
|
| 946 |
document.getElementById('details-view').style.display = 'none';
|
| 947 |
document.getElementById('form-view').style.display = 'block';
|
| 948 |
document.getElementById('form-view').reset();
|
| 949 |
}
|
| 950 |
|
| 951 |
-
// وظيفة إغلاق المودال (متاحة عالمياً)
|
| 952 |
window.closeModal = function() {
|
| 953 |
document.getElementById('service-modal-overlay').style.display = 'none';
|
| 954 |
document.body.style.overflow = '';
|
|
@@ -957,10 +623,14 @@
|
|
| 957 |
|
| 958 |
/**
|
| 959 |
* دالة حفظ البيانات في نموذج جوجل (Google Form) عبر طلب POST في الخلفية.
|
|
|
|
| 960 |
*/
|
| 961 |
async function saveToGoogleForm(formData) {
|
| 962 |
const formPayload = new FormData();
|
| 963 |
|
|
|
|
|
|
|
|
|
|
| 964 |
// تعيين البيانات إلى معرفات حقول نموذج جوجل
|
| 965 |
formPayload.append(GOOGLE_FORM_ENTRIES.serviceName, formData.get('serviceName'));
|
| 966 |
formPayload.append(GOOGLE_FORM_ENTRIES.fullName, formData.get('fullName'));
|
|
@@ -968,42 +638,46 @@
|
|
| 968 |
formPayload.append(GOOGLE_FORM_ENTRIES.email, formData.get('email'));
|
| 969 |
formPayload.append(GOOGLE_FORM_ENTRIES.description, formData.get('description'));
|
| 970 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 971 |
try {
|
| 972 |
-
|
| 973 |
-
|
| 974 |
-
await fetch(GOOGLE_FORM_URL, {
|
| 975 |
method: 'POST',
|
| 976 |
mode: 'no-cors',
|
| 977 |
body: formPayload,
|
| 978 |
});
|
| 979 |
|
|
|
|
| 980 |
return { success: true };
|
| 981 |
|
| 982 |
} catch (error) {
|
| 983 |
console.error("Error submitting to Google Form:", error);
|
| 984 |
-
// نعتبره ناجحاً حتى لو فشل الاتصال بسبب 'no-cors' لضمان انتقال المستخدم للواتساب
|
| 985 |
return { success: false, error: error.message };
|
| 986 |
}
|
| 987 |
}
|
| 988 |
|
| 989 |
/**
|
| 990 |
-
* دالة معالجة إرسال الطلب: حفظ البيانات ثم التوجيه إلى
|
| 991 |
*/
|
| 992 |
window.handleOrderSubmission = async function(event) {
|
| 993 |
event.preventDefault();
|
| 994 |
const form = event.target;
|
| 995 |
const submissionMessage = document.getElementById('submission-message');
|
| 996 |
const submitButton = document.getElementById('submit-order-button');
|
| 997 |
-
const
|
| 998 |
-
const originalButtonContent = langData.formSubmitButton +
|
| 999 |
-
' <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>';
|
| 1000 |
|
| 1001 |
// جمع البيانات من النموذج
|
| 1002 |
const formData = new FormData(form);
|
| 1003 |
|
| 1004 |
// 1. تفعيل حالة التحميل
|
| 1005 |
submitButton.disabled = true;
|
| 1006 |
-
submitButton.innerHTML =
|
| 1007 |
submissionMessage.style.display = 'none';
|
| 1008 |
|
| 1009 |
|
|
@@ -1012,19 +686,19 @@
|
|
| 1012 |
|
| 1013 |
// إظهار رسالة بناءً على نتيجة الحفظ
|
| 1014 |
if (saveResult.success) {
|
| 1015 |
-
submissionMessage.textContent =
|
| 1016 |
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-green-100 text-green-700 font-bold font-body border border-green-500';
|
| 1017 |
} else {
|
| 1018 |
-
submissionMessage.textContent =
|
| 1019 |
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-yellow-100 text-yellow-700 font-bold font-body border border-yellow-500';
|
| 1020 |
}
|
| 1021 |
submissionMessage.style.display = 'block';
|
| 1022 |
|
| 1023 |
|
| 1024 |
// 3. بناء وتجهيز رابط الواتساب (التوجيه)
|
| 1025 |
-
submitButton.innerHTML =
|
| 1026 |
|
| 1027 |
-
const message = `*طلب خدمة تصميم
|
| 1028 |
`*الخدمة:* ${formData.get('serviceName')}\n` +
|
| 1029 |
`*الاسم:* ${formData.get('fullName')}\n` +
|
| 1030 |
`*البريد الإلكتروني:* ${formData.get('email')}\n` +
|
|
@@ -1042,7 +716,7 @@
|
|
| 1042 |
submitButton.disabled = false;
|
| 1043 |
submitButton.innerHTML = originalButtonContent;
|
| 1044 |
|
| 1045 |
-
submissionMessage.innerHTML =
|
| 1046 |
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-accent-gold text-primary font-bold font-body';
|
| 1047 |
|
| 1048 |
form.style.display = 'none'; // إخفاء النموذج بعد الإرسال
|
|
@@ -1052,7 +726,7 @@
|
|
| 1052 |
|
| 1053 |
document.addEventListener('keydown', function(e) {
|
| 1054 |
if (e.key === 'Escape') {
|
| 1055 |
-
|
| 1056 |
}
|
| 1057 |
});
|
| 1058 |
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="ar" dir="rtl">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
| 158 |
}
|
| 159 |
</script>
|
| 160 |
</head>
|
| 161 |
+
<body class="bg-secondary antialiased text-right font-body">
|
| 162 |
|
| 163 |
<header class="header-bg relative h-auto" id="home">
|
| 164 |
<nav class="bg-primary/95 text-white font-medium py-4 font-heading border-b border-gray-700 shadow-xl">
|
|
|
|
| 168 |
<span class="text-xl tracking-widest uppercase font-extrabold text-white"></span>
|
| 169 |
</a>
|
| 170 |
|
| 171 |
+
<div class="hidden md:flex space-x-8 text-sm flex-row-reverse">
|
| 172 |
+
<a href="#home" class="hover:text-accent-gold transition">الرئيسية</a>
|
| 173 |
+
<a href="#services" class="hover:text-accent-gold transition">خدماتنا</a>
|
| 174 |
+
<a href="#portfolio" class="hover:text-accent-gold transition">أعمالنا</a>
|
| 175 |
+
<a href="#about" class="hover:text-accent-gold transition">من نحن</a>
|
| 176 |
+
<a href="#contact" class="hover:text-accent-gold transition">اتصل بنا</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 177 |
</div>
|
| 178 |
</div>
|
| 179 |
</nav>
|
|
|
|
| 184 |
<div class="absolute inset-0 bg-primary/40"></div>
|
| 185 |
|
| 186 |
<div class="relative z-10 text-white">
|
| 187 |
+
<p class="text-2xl text-accent-gold font-light font-body tracking-widest uppercase mb-2 drop-shadow-lg">الفخامة في كل تفصيل</p>
|
| 188 |
+
<h1 class="text-5xl md:text-7xl font-extrabold leading-tight mb-8 font-heading drop-shadow-lg">
|
|
|
|
| 189 |
تصاميم بصرية <span class="text-accent-gold">تليق بمكانتك</span>.
|
| 190 |
</h1>
|
| 191 |
+
<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">
|
| 192 |
اطلب الآن (نبدأ العمل)
|
| 193 |
</a>
|
| 194 |
</div>
|
|
|
|
| 202 |
<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">
|
| 203 |
<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" />
|
| 204 |
</svg>
|
| 205 |
+
<span class="text-sm font-medium text-design-primary font-body">هوية بصرية</span>
|
| 206 |
</div>
|
| 207 |
|
| 208 |
<div class="flex flex-col items-center group cursor-pointer">
|
|
|
|
| 210 |
<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" />
|
| 211 |
<path stroke-linecap="round" stroke-linejoin="round" d="M3 21h18"/>
|
| 212 |
</svg>
|
| 213 |
+
<span class="text-sm font-medium text-design-primary font-body">إعلانات خارجية</span>
|
| 214 |
</div>
|
| 215 |
|
| 216 |
<div class="flex flex-col items-center group cursor-pointer">
|
|
|
|
| 218 |
<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"/>
|
| 219 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
| 220 |
</svg>
|
| 221 |
+
<span class="text-sm font-medium text-design-primary font-body">تطوير مواقع</span>
|
| 222 |
</div>
|
| 223 |
|
| 224 |
<div class="flex flex-col items-center group cursor-pointer">
|
| 225 |
<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">
|
| 226 |
<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"/>
|
| 227 |
</svg>
|
| 228 |
+
<span class="text-sm font-medium text-design-primary font-body">رسم يدوي</span>
|
| 229 |
</div>
|
| 230 |
|
| 231 |
</div>
|
|
|
|
| 235 |
<section id="services" class="py-20 bg-secondary">
|
| 236 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 237 |
<div class="text-center mb-16">
|
| 238 |
+
<h2 class="text-4xl font-extrabold tracking-tight text-design-primary font-heading">خدماتنا المتميزة</h2>
|
| 239 |
+
<p class="mt-2 text-gray-500 max-w-3xl mx-auto font-body">نقدم حلولاً تصميمية تتجاوز التوقعات وتلبي تطلعات الرفاهية.</p>
|
| 240 |
</div>
|
| 241 |
|
| 242 |
<div class="max-w-4xl mx-auto mb-20 p-4 bg-light-bg rounded-xl shadow-2xl shadow-gray-300">
|
| 243 |
<div class="text-center mb-6">
|
| 244 |
+
<h3 class="text-3xl font-extrabold text-design-primary font-heading mb-2">شاهد قصتنا!</h3>
|
| 245 |
+
<p class="text-gray-600 font-body">نظرة سريعة على جودة خدماتنا وأسلوب عملنا الاحترافي.</p>
|
| 246 |
</div>
|
| 247 |
|
| 248 |
<div class="video-responsive mx-auto">
|
|
|
|
| 259 |
</div>
|
| 260 |
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 scroll-container">
|
| 261 |
|
| 262 |
+
<div class="service-card-item" data-title="تصميم بطاقات الأعمال الاحترافية">
|
| 263 |
<div class="rounded-xl product-card card-white h-full flex flex-col">
|
| 264 |
<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=بطاقات+أعمال+فاخرة';">
|
| 265 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 266 |
+
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم بطاقات الأعمال الاحترافية</h3>
|
| 267 |
+
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">لمسة أولى خالدة</p>
|
| 268 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 269 |
+
<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">
|
| 270 |
التفاصيل
|
| 271 |
</button>
|
| 272 |
+
<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">
|
| 273 |
اطلب الآن
|
| 274 |
</button>
|
| 275 |
</div>
|
|
|
|
| 277 |
</div>
|
| 278 |
</div>
|
| 279 |
|
| 280 |
+
<div class="service-card-item" data-title="تصميم وتطوير المواقع الإلكترونية العصرية">
|
| 281 |
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col">
|
| 282 |
<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=تطوير+مواقع+عصرية';">
|
| 283 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 284 |
+
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم وتطوير المواقع الإلكترونية العصرية</h3>
|
| 285 |
+
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">واجهة المستقبل</p>
|
| 286 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 287 |
+
<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">
|
| 288 |
التفاصيل
|
| 289 |
</button>
|
| 290 |
+
<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">
|
| 291 |
اطلب الآن
|
| 292 |
</button>
|
| 293 |
</div>
|
|
|
|
| 295 |
</div>
|
| 296 |
</div>
|
| 297 |
|
| 298 |
+
<div class="service-card-item" data-title="تصميم أغلفة الكتب والمجلات الفنية">
|
| 299 |
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col">
|
| 300 |
<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=أغلفة+كتب+مذهلة';">
|
| 301 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 302 |
+
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم أغلفة الكتب والمجلات الفنية</h3>
|
| 303 |
+
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">جاذبية القراءة</p>
|
| 304 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 305 |
+
<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">
|
| 306 |
التفاصيل
|
| 307 |
</button>
|
| 308 |
+
<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">
|
| 309 |
اطلب الآن
|
| 310 |
</button>
|
| 311 |
</div>
|
|
|
|
| 313 |
</div>
|
| 314 |
</div>
|
| 315 |
|
| 316 |
+
<div class="service-card-item" data-title="تصميم الشعارات والهوية البصرية المتكاملة">
|
| 317 |
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col">
|
| 318 |
<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=هوية+بصرية+فخمة';">
|
| 319 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 320 |
+
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم الشعارات والهوية البصرية المتكاملة</h3>
|
| 321 |
+
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">بصمة لا تُمحى</p>
|
| 322 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 323 |
+
<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">
|
| 324 |
التفاصيل
|
| 325 |
</button>
|
| 326 |
+
<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">
|
| 327 |
اطلب الآن
|
| 328 |
</button>
|
| 329 |
</div>
|
|
|
|
| 331 |
</div>
|
| 332 |
</div>
|
| 333 |
|
| 334 |
+
<div class="service-card-item" data-title="تصميم اللافتات والإعلانات الخارجية">
|
| 335 |
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col">
|
| 336 |
<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=إعلانات+خارجية+مميزة';">
|
| 337 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 338 |
+
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم اللافتات والإعلانات الخارجية</h3>
|
| 339 |
+
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">وصول مؤثر</p>
|
| 340 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 341 |
+
<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">
|
| 342 |
التفاصيل
|
| 343 |
</button>
|
| 344 |
+
<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">
|
| 345 |
اطلب الآن
|
| 346 |
</button>
|
| 347 |
</div>
|
|
|
|
| 349 |
</div>
|
| 350 |
</div>
|
| 351 |
|
| 352 |
+
<div class="service-card-item" data-title="تصميم قوائم الطعام الفاخرة">
|
| 353 |
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col">
|
| 354 |
<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=قوائم+طعام+فاخرة';">
|
| 355 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 356 |
+
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم قوائم الطعام الفاخرة</h3>
|
| 357 |
+
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">مذاق بصري</p>
|
| 358 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 359 |
+
<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">
|
| 360 |
التفاصيل
|
| 361 |
</button>
|
| 362 |
+
<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">
|
| 363 |
اطلب الآن
|
| 364 |
</button>
|
| 365 |
</div>
|
|
|
|
| 367 |
</div>
|
| 368 |
</div>
|
| 369 |
|
| 370 |
+
<div class="service-card-item" data-title="تصميم الشواهد التكريمية والتقديرية">
|
| 371 |
<div class="rounded-xl overflow-hidden product-card card-white h-full flex flex-col">
|
| 372 |
<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=شهادات+تقدير+فخمة';">
|
| 373 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 374 |
+
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">تصميم الشواهد التكريمية والتقديرية</h3>
|
| 375 |
+
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">تخليد الإنجاز</p>
|
| 376 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 377 |
+
<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">
|
| 378 |
التفاصيل
|
| 379 |
</button>
|
| 380 |
+
<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">
|
| 381 |
اطلب الآن
|
| 382 |
</button>
|
| 383 |
</div>
|
|
|
|
| 385 |
</div>
|
| 386 |
</div>
|
| 387 |
|
| 388 |
+
<div class="service-card-item" data-title="الرسم الفني اليدوي بالقلم الجاف (تقنيات متنوعة)">
|
| 389 |
<div class="rounded-xl overflow-hidden product-card card-light-gray h-full flex flex-col">
|
| 390 |
<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=رسم+يدوي+فني';">
|
| 391 |
<div class="p-6 text-center flex flex-col flex-grow">
|
| 392 |
+
<h3 class="text-lg font-bold leading-relaxed font-heading mb-3 flex-grow text-design-primary">الرسم الفني اليدوي بالقلم الجاف (تقنيات متنوعة)</h3>
|
| 393 |
+
<p class="font-semibold mt-1 mb-3 text-sm font-body text-accent-gold">إبداع أصيل</p>
|
| 394 |
<div class="flex justify-center space-x-2 flex-row-reverse mt-auto">
|
| 395 |
+
<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">
|
| 396 |
التفاصيل
|
| 397 |
</button>
|
| 398 |
+
<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">
|
| 399 |
اطلب الآن
|
| 400 |
</button>
|
| 401 |
</div>
|
|
|
|
| 408 |
</section>
|
| 409 |
</main>
|
| 410 |
|
| 411 |
+
<div id="service-modal-overlay" class="modal-overlay" onclick="closeModal()">
|
| 412 |
<div id="service-modal-content" class="modal-content" onclick="event.stopPropagation()">
|
| 413 |
+
<button onclick="closeModal()" class="absolute top-4 left-4 text-gray-500 hover:text-gray-900 transition focus:outline-none">
|
| 414 |
<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>
|
| 415 |
</button>
|
| 416 |
|
| 417 |
+
<h3 class="text-2xl font-bold text-primary mb-2 font-heading">تفاصيل وطلب الخدمة</h3>
|
| 418 |
+
<p class="text-accent-gold font-semibold mb-6 text-base font-body">الخدمة المختارة: <span id="modal-service-name" class="text-design-primary">لم يتم تحديد خدمة</span></p>
|
| 419 |
|
| 420 |
<div id="details-view">
|
| 421 |
<p id="modal-service-description" class="text-gray-700 mb-8 leading-relaxed font-body">
|
| 422 |
الوصف التفصيلي للخدمة يظهر هنا...
|
| 423 |
</p>
|
| 424 |
|
| 425 |
+
<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">
|
| 426 |
اطلب هذه الخدمة (الانتقال للنموذج)
|
| 427 |
</button>
|
| 428 |
</div>
|
| 429 |
|
| 430 |
|
| 431 |
+
<form id="form-view" onsubmit="handleOrderSubmission(event)" class="hidden">
|
| 432 |
|
| 433 |
+
<h4 class="text-lg font-bold text-design-primary mb-4 font-heading">املأ بياناتك لحفظ الطلب وإرساله عبر الواتساب:</h4>
|
| 434 |
|
| 435 |
<input type="hidden" id="service-name-hidden" name="serviceName">
|
| 436 |
|
| 437 |
<div class="mb-4">
|
| 438 |
+
<label for="full-name" class="block text-sm font-medium text-gray-700 mb-1 font-body">الاسم الكامل</label>
|
| 439 |
<input type="text" id="full-name" name="fullName" required
|
| 440 |
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body"
|
| 441 |
placeholder="أدخل اسمك الكامل">
|
| 442 |
</div>
|
| 443 |
|
| 444 |
<div class="mb-4">
|
| 445 |
+
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1 font-body">رقم الهاتف (الواتساب)</label>
|
| 446 |
<input type="tel" id="phone" name="phone" required
|
| 447 |
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body"
|
| 448 |
placeholder="أدخل رقم الواتساب الخاص بك">
|
| 449 |
</div>
|
| 450 |
|
| 451 |
<div class="mb-4">
|
| 452 |
+
<label for="email" class="block text-sm font-medium text-gray-700 mb-1 font-body">البريد الإلكتروني</label>
|
| 453 |
<input type="email" id="email" name="email" required
|
| 454 |
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body"
|
| 455 |
placeholder="example@domain.com">
|
| 456 |
</div>
|
| 457 |
|
| 458 |
<div class="mb-6">
|
| 459 |
+
<label for="description" class="block text-sm font-medium text-gray-700 mb-1 font-body">وصف موجز للمشروع</label>
|
| 460 |
<textarea id="description" name="description" rows="4" required
|
| 461 |
class="w-full p-3 border border-gray-300 rounded-lg focus:border-accent-gold focus:ring-accent-gold text-right font-body"
|
| 462 |
placeholder="اذكر متطلباتك الأساسية وأي تفاصيل هامة عن مشروعك"></textarea>
|
| 463 |
</div>
|
| 464 |
|
| 465 |
+
<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">
|
| 466 |
إرسال الطلب وحفظ البيانات
|
| 467 |
<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>
|
| 468 |
</button>
|
|
|
|
| 474 |
|
| 475 |
<footer class="bg-primary text-gray-400 py-12">
|
| 476 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 477 |
+
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 text-right font-body">
|
| 478 |
+
<div class="col-span-2 md:col-span-1">
|
| 479 |
<h3 class="text-2xl font-extrabold text-accent-gold mb-4 uppercase tracking-widest font-heading">ASNFLUL_JA</h3>
|
| 480 |
</div>
|
| 481 |
|
| 482 |
<div>
|
| 483 |
+
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading">الخصوصية</h4>
|
| 484 |
<ul class="space-y-2 text-xs">
|
| 485 |
+
<li><a href="#" class="hover:text-accent-gold transition">سياسة الخصوصية</a></li>
|
| 486 |
+
<li><a href="#" class="hover:text-accent-gold transition">الشروط والأحكام</a></li>
|
| 487 |
+
<li><a href="#" class="hover:text-accent-gold transition">سياسة الكوكيز</a></li>
|
| 488 |
</ul>
|
| 489 |
</div>
|
| 490 |
|
| 491 |
<div>
|
| 492 |
+
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading">خدماتنا</h4>
|
| 493 |
<ul class="space-y-2 text-xs">
|
| 494 |
+
<li><a href="#" class="hover:text-accent-gold transition">تصميم الشعارات</a></li>
|
| 495 |
+
<li><a href="#" class="hover:text-accent-gold transition">تطوير المواقع</a></li>
|
| 496 |
+
<li><a href="#" class="hover:text-accent-gold transition">الرسم اليدوي</a></li>
|
| 497 |
</ul>
|
| 498 |
</div>
|
| 499 |
|
| 500 |
<div>
|
| 501 |
+
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading">من نحن</h4>
|
| 502 |
<ul class="space-y-2 text-xs">
|
| 503 |
+
<li><a href="#" class="hover:text-accent-gold transition">قصتنا</a></li>
|
| 504 |
+
<li><a href="#" class="hover:text-accent-gold transition">فريق العمل</a></li>
|
| 505 |
+
<li><a href="#" class="hover:text-accent-gold transition">مواقعنا</a></li>
|
| 506 |
</ul>
|
| 507 |
</div>
|
| 508 |
|
| 509 |
<div>
|
| 510 |
+
<h4 class="text-white font-semibold mb-3 uppercase text-sm font-heading">معلومات</h4>
|
| 511 |
<ul class="space-y-2 text-xs">
|
| 512 |
+
<li><a href="#" class="hover:text-accent-gold transition">الوظائف</a></li>
|
| 513 |
+
<li><a href="#" class="hover:text-accent-gold transition">الأسئلة الشائعة</a></li>
|
| 514 |
+
<li><a href="#" class="hover:text-accent-gold transition">التواصل</a></li>
|
| 515 |
</ul>
|
| 516 |
+
<h4 class="text-white font-semibold mt-6 mb-3 uppercase text-sm font-heading">تابعنا</h4>
|
| 517 |
<div class="flex space-x-4 flex-row-reverse">
|
| 518 |
|
| 519 |
<a href="https://www.facebook.com/share/1CKU2rHzcg/" target="_blank" class="text-gray-400 hover:text-accent-gold transition">
|
|
|
|
| 531 |
</div>
|
| 532 |
</div>
|
| 533 |
<div class="text-center mt-10 text-xs border-t border-gray-700 pt-6 font-body">
|
| 534 |
+
© 2025 ASNFLUL_JA. جميع الحقوق محفوظة.
|
| 535 |
</div>
|
| 536 |
</div>
|
| 537 |
</footer>
|
| 538 |
|
| 539 |
|
| 540 |
+
<script type="module">
|
| 541 |
|
| 542 |
// ----------------------------------------------------
|
| 543 |
+
// 2. منطق الطلبات والنافذة المنبثقة (Google Form + WhatsApp)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 544 |
// ----------------------------------------------------
|
| 545 |
|
| 546 |
const WHATSAPP_LINK_BASE = "https://wa.me/message/P3DXRV6NTZ63L1"; // رابط الواتساب
|
| 547 |
// !!! تأكد من أن هذا الرابط يعمل بشكل صحيح لنموذج جوجل الخاص بك !!!
|
| 548 |
const GOOGLE_FORM_URL = "https://docs.google.com/forms/d/e/1FAIpQLSfCxo5djRcGGwfBp3siqMpWaT2-6LgxHzycaV4SN8w-JwnAJQ/formResponse";
|
| 549 |
|
| 550 |
+
// معرفات حقول نموذج جوجل (تم استخلاصها من الرابط الذي قدمته)
|
| 551 |
const GOOGLE_FORM_ENTRIES = {
|
| 552 |
serviceName: 'entry.2048232046',
|
| 553 |
fullName: 'entry.273358955',
|
|
|
|
| 557 |
};
|
| 558 |
|
| 559 |
let currentServiceIndex = -1;
|
| 560 |
+
const serviceData = [
|
| 561 |
+
{ title: "تصميم بطاقات الأعمال الاحترافية", description: "بطاقات أعمال أنيقة تعكس احترافيتك. نختار أفضل الخامات والتصاميم المبتكرة لضمان ترك انطباع دائم ومميز عند تبادل الاتصال. تتضمن تصميم الوجهين وتهيئة ملفات الطباعة الاحترافية." },
|
| 562 |
+
{ title: "تصميم وتطوير المواقع الإلكترونية العصرية", description: "تصميم واجهات مستخدم (UI) وتجربة مستخدم (UX) سلسة وجذابة للمواقع والتطبيقات، بالإضافة إلى تطوير الموقع بالكامل ليكون متجاوباً وسريعاً على جميع الأجهزة." },
|
| 563 |
+
{ title: "تصميم أغلفة الكتب والمجلات الفنية", description: "نصمم أغلفة فنية تخطف الأنظار وتلخص محتوى الكتاب أو المجلة بلمسة إبداعية. نضمن أن يكون الغلاف بمثابة بوابة جذابة لعملك الأدبي، مع مراعاة الجاذبية البصرية ومتطلبات النشر." },
|
| 564 |
+
{ title: "تصميم الشعارات والهوية البصرية المتكاملة", description: "نعمل عل�� بناء هوية بصرية قوية ومتماسكة تبدأ من تصميم شعار فريد يحكي قصة علامتك التجارية، وصولاً إلى اختيار الألوان والخطوط وأنماط التصميم التي تميزك عن المنافسين. تشمل هذه الخدمة: تصميم الشعار، دليل الاستخدام، الألوان، الخطوط، وتطبيقات الهوية الأساسية." },
|
| 565 |
+
{ title: "تصميم اللافتات والإعلانات الخارجية", description: "حلول إعلانية خارجية جذابة ومؤثرة، تشمل تصميم لوحات الإعلانات الكبيرة، لافتات المحلات، والبنرات الدعائية، مع التركيز على الوضوح والرسالة السريعة. نضمن دقة المقاسات والجاهزية للطباعة على مختلف الخامات." },
|
| 566 |
+
{ title: "تصميم قوائم الطعام الفاخرة", description: "تصميم قوائم طعام راقية ومنظمة، تراعي سيكولوجية العميل وتبرز الأطباق المميزة، باستخدام صور ذات جودة عالية وتنسيق فاخر. تشمل تصميم القائمة المطبوعة والرقمية (QR Menu)." },
|
| 567 |
+
{ title: "تصميم الشواهد التكريمية والتقديرية", description: "نقدم تصميمات راقية لشهادات الشكر والتقدير والدروع التذكارية، باستخدام خطوط أنيقة وتنسيقات رسمية تعكس قيمة التكريم والتقدير. نركز على الفخامة والبساطة في آن واحد." },
|
| 568 |
+
{ title: "الرسم الفني اليدوي بالقلم الجاف (تقنيات متنوعة)", description: "خدمات رسم فني شخصية ومخصصة باستخدام تقنية القلم الجاف، لإنشاء لوحات فريدة أو رسومات توضيحية ذات طابع خاص وعميق. تشمل رسومات البورتريه والمناظر الطبيعية الفنية." }
|
| 569 |
+
];
|
| 570 |
+
|
| 571 |
+
// وظيفة تفتح نافذة التفاصيل
|
| 572 |
window.openServiceDetails = function(index) {
|
| 573 |
currentServiceIndex = index;
|
| 574 |
+
const data = serviceData[index];
|
| 575 |
+
if (!data) return;
|
| 576 |
|
| 577 |
+
// إظهار المحتوى الصحيح للخدمة
|
| 578 |
+
document.getElementById('modal-service-name').textContent = data.title;
|
| 579 |
+
document.getElementById('modal-service-description').textContent = data.description;
|
| 580 |
+
document.getElementById('service-name-hidden').value = data.title;
|
|
|
|
|
|
|
|
|
|
| 581 |
|
| 582 |
// إظهار نافذة التفاصيل وإخفاء نموذج الطلب
|
| 583 |
document.getElementById('details-view').style.display = 'block';
|
|
|
|
| 588 |
document.body.style.overflow = 'hidden';
|
| 589 |
}
|
| 590 |
|
| 591 |
+
// وظيفة تفتح نموذج الطلب مباشرة (عند الضغط على "اطلب الآن")
|
| 592 |
window.openOrderForm = function(index) {
|
| 593 |
currentServiceIndex = index;
|
| 594 |
+
const data = serviceData[index];
|
| 595 |
+
if (!data) return;
|
| 596 |
+
document.getElementById('modal-service-name').textContent = data.title;
|
| 597 |
+
document.getElementById('service-name-hidden').value = data.title;
|
|
|
|
| 598 |
|
| 599 |
// الانتقال مباشرة إلى النموذج
|
| 600 |
document.getElementById('details-view').style.display = 'none';
|
|
|
|
| 602 |
document.getElementById('submission-message').style.display = 'none';
|
| 603 |
document.getElementById('form-view').reset();
|
| 604 |
document.getElementById('submit-order-button').disabled = false;
|
| 605 |
+
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>';
|
|
|
|
| 606 |
|
| 607 |
document.getElementById('service-modal-overlay').style.display = 'flex';
|
| 608 |
document.body.style.overflow = 'hidden';
|
| 609 |
}
|
| 610 |
|
| 611 |
+
// وظيفة التحويل من عرض التفاصيل إلى عرض النموذج
|
| 612 |
window.switchToForm = function() {
|
| 613 |
document.getElementById('details-view').style.display = 'none';
|
| 614 |
document.getElementById('form-view').style.display = 'block';
|
| 615 |
document.getElementById('form-view').reset();
|
| 616 |
}
|
| 617 |
|
|
|
|
| 618 |
window.closeModal = function() {
|
| 619 |
document.getElementById('service-modal-overlay').style.display = 'none';
|
| 620 |
document.body.style.overflow = '';
|
|
|
|
| 623 |
|
| 624 |
/**
|
| 625 |
* دالة حفظ البيانات في نموذج جوجل (Google Form) عبر طلب POST في الخلفية.
|
| 626 |
+
* تم إضافة منطق Bearer Token للأغراض التعليمية.
|
| 627 |
*/
|
| 628 |
async function saveToGoogleForm(formData) {
|
| 629 |
const formPayload = new FormData();
|
| 630 |
|
| 631 |
+
// تعريف الرمز الحامل (Bearer Token) - هذا مجرد مثال
|
| 632 |
+
const BEARER_TOKEN = "YOUR_SECURE_API_KEY_OR_TOKEN_12345";
|
| 633 |
+
|
| 634 |
// تعيين البيانات إلى معرفات حقول نموذج جوجل
|
| 635 |
formPayload.append(GOOGLE_FORM_ENTRIES.serviceName, formData.get('serviceName'));
|
| 636 |
formPayload.append(GOOGLE_FORM_ENTRIES.fullName, formData.get('fullName'));
|
|
|
|
| 638 |
formPayload.append(GOOGLE_FORM_ENTRIES.email, formData.get('email'));
|
| 639 |
formPayload.append(GOOGLE_FORM_ENTRIES.description, formData.get('description'));
|
| 640 |
|
| 641 |
+
// ⚠️ مثال على كيفية بناء ترويسة Authorization لطلبات API حقيقية:
|
| 642 |
+
const headersForRealApi = {
|
| 643 |
+
'Authorization': `Bearer ${BEARER_TOKEN}`,
|
| 644 |
+
'Content-Type': 'application/json'
|
| 645 |
+
};
|
| 646 |
+
// (الترويسة لا تستخدم في طلب Google Form بسبب قيود 'no-cors')
|
| 647 |
+
|
| 648 |
try {
|
| 649 |
+
|
| 650 |
+
const response = await fetch(GOOGLE_FORM_URL, {
|
|
|
|
| 651 |
method: 'POST',
|
| 652 |
mode: 'no-cors',
|
| 653 |
body: formPayload,
|
| 654 |
});
|
| 655 |
|
| 656 |
+
console.log("Bearer Token Concept: The Authorization header would be sent if this were your actual API endpoint.");
|
| 657 |
return { success: true };
|
| 658 |
|
| 659 |
} catch (error) {
|
| 660 |
console.error("Error submitting to Google Form:", error);
|
|
|
|
| 661 |
return { success: false, error: error.message };
|
| 662 |
}
|
| 663 |
}
|
| 664 |
|
| 665 |
/**
|
| 666 |
+
* دالة معالجة إرسال الطلب: حفظ البيانات ثم التوجيه إلى الواتساب.
|
| 667 |
*/
|
| 668 |
window.handleOrderSubmission = async function(event) {
|
| 669 |
event.preventDefault();
|
| 670 |
const form = event.target;
|
| 671 |
const submissionMessage = document.getElementById('submission-message');
|
| 672 |
const submitButton = document.getElementById('submit-order-button');
|
| 673 |
+
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>';
|
|
|
|
|
|
|
| 674 |
|
| 675 |
// جمع البيانات من النموذج
|
| 676 |
const formData = new FormData(form);
|
| 677 |
|
| 678 |
// 1. تفعيل حالة التحميل
|
| 679 |
submitButton.disabled = true;
|
| 680 |
+
submitButton.innerHTML = 'جارٍ حفظ البيانات... <span class="animate-spin inline-block mr-2">⟳</span>';
|
| 681 |
submissionMessage.style.display = 'none';
|
| 682 |
|
| 683 |
|
|
|
|
| 686 |
|
| 687 |
// إظهار رسالة بناءً على نتيجة الحفظ
|
| 688 |
if (saveResult.success) {
|
| 689 |
+
submissionMessage.textContent = 'تم حفظ بياناتك بنجاح. الآن سيتم تحويلك إلى الواتساب.';
|
| 690 |
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-green-100 text-green-700 font-bold font-body border border-green-500';
|
| 691 |
} else {
|
| 692 |
+
submissionMessage.textContent = 'حدث خطأ أثناء حفظ البيانات (قد يكون تم الحفظ، أو لا). سننتقل إلى الواتساب الآن.';
|
| 693 |
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-yellow-100 text-yellow-700 font-bold font-body border border-yellow-500';
|
| 694 |
}
|
| 695 |
submissionMessage.style.display = 'block';
|
| 696 |
|
| 697 |
|
| 698 |
// 3. بناء وتجهيز رابط الواتساب (التوجيه)
|
| 699 |
+
submitButton.innerHTML = 'جارٍ التوجيه إلى الواتساب... <span class="animate-spin inline-block mr-2">⟳</span>';
|
| 700 |
|
| 701 |
+
const message = `*طلب خدمة تصميم جديد*\n\n` +
|
| 702 |
`*الخدمة:* ${formData.get('serviceName')}\n` +
|
| 703 |
`*الاسم:* ${formData.get('fullName')}\n` +
|
| 704 |
`*البريد الإلكتروني:* ${formData.get('email')}\n` +
|
|
|
|
| 716 |
submitButton.disabled = false;
|
| 717 |
submitButton.innerHTML = originalButtonContent;
|
| 718 |
|
| 719 |
+
submissionMessage.innerHTML = 'تم توجيهك إلى الواتساب. <strong>الرجاء إرسال الرسالة لإتمام طلبك.</strong>';
|
| 720 |
submissionMessage.className = 'mt-4 p-4 rounded-lg text-center bg-accent-gold text-primary font-bold font-body';
|
| 721 |
|
| 722 |
form.style.display = 'none'; // إخفاء النموذج بعد الإرسال
|
|
|
|
| 726 |
|
| 727 |
document.addEventListener('keydown', function(e) {
|
| 728 |
if (e.key === 'Escape') {
|
| 729 |
+
closeModal();
|
| 730 |
}
|
| 731 |
});
|
| 732 |
|