Animated Order Button

نظرة عامة

هذا المشروع عبارة عن زر طلب (Order Button) تفاعلي مع رسوم متحركة جذابة عند الضغط عليه، مصمم باستخدام HTML وCSS وJavaScript (jQuery). عند الضغط على الزر، تظهر حركة شاحنة توصيل وصندوق، ويتغير نص الزر ليعرض رسالة نجاح.

---

مكونات المشروع

• index.html
  يحتوي على هيكل الزر والعناصر الرسومية (الشاحنة، الصندوق، الخطوط، إلخ).

• style.css
  يضم جميع التنسيقات والرسوم المتحركة (Animations) الخاصة بالزر والعناصر المرتبطة به.

• script.js
  يحتوي على كود JavaScript الذي يتحكم في إضافة وإزالة كلاس animate للزر عند الضغط عليه لتفعيل الرسوم المتحركة.

---

كيف يعمل الكود؟

1. عند الضغط على الزر
   يتم إضافة الكلاس animate إلى الزر لمدة 10 ثوانٍ، وخلال هذه الفترة يتم تفعيل الرسوم المتحركة على الشاحنة والصندوق والخطوط وتغيير نص الزر.

2. الرسوم المتحركة
   يتم التحكم بها بالكامل عبر CSS باستخدام keyframes، حيث تتحرك الشاحنة والصندوق وتظهر الخطوط بشكل متسلسل.

3. إعادة الزر للحالة الأصلية
   بعد انتهاء مدة الرسوم المتحركة (10 ثوانٍ)، يتم إزالة الكلاس animate ويعود الزر لحالته الأصلية.

---

كيف تعدل على الكود؟

• تغيير الألوان:
  يمكنك تعديل الألوان من خلال متغيرات CSS في بداية ملف style.css (مثل: --primary, --dark, إلخ).

• تغيير النص:
  عدل نص الزر من خلال ملف `// filepath: c:\Users\NTC\Desktop\test project\Animated Order Button\Animated Order Button\README.md

Animated Order Button

نظرة عامة

هذا المشروع عبارة عن زر طلب (Order Button) تفاعلي مع رسوم متحركة جذابة عند الضغط عليه، مصمم باستخدام HTML وCSS وJavaScript (jQuery). عند الضغط على الزر، تظهر حركة شاحنة توصيل وصندوق، ويتغير نص الزر ليعرض رسالة نجاح.

---

مكونات المشروع

• index.html
  يحتوي على هيكل الزر والعناصر الرسومية (الشاحنة، الصندوق، الخطوط، إلخ).

• style.css
  يضم جميع التنسيقات والرسوم المتحركة (Animations) الخاصة بالزر والعناصر المرتبطة به.

• script.js
  يحتوي على كود JavaScript الذي يتحكم في إضافة وإزالة كلاس animate للزر عند الضغط عليه لتفعيل الرسوم المتحركة.

---

كيف يعمل الكود؟

1. عند الضغط على الزر
   يتم إضافة الكلاس animate إلى الزر لمدة 10 ثوانٍ، وخلال هذه الفترة يتم تفعيل الرسوم المتحركة على الشاحنة والصندوق والخطوط وتغيير نص الزر.

2. الرسوم المتحركة
   يتم التحكم بها بالكامل عبر CSS باستخدام keyframes، حيث تتحرك الشاحنة والصندوق وتظهر الخطوط بشكل متسلسل.

3. إعادة الزر للحالة الأصلية
   بعد انتهاء مدة الرسوم المتحركة (10 ثوانٍ)، يتم إزالة الكلاس animate ويعود الزر لحالته الأصلية.

---

كيف تعدل على الكود؟

• تغيير الألوان:
  يمكنك تعديل الألوان من خلال متغيرات CSS في بداية ملف style.css (مثل: --primary, --dark, إلخ).

• تغيير النص:
  عدل نص الزر من خلال ملف `