هل تعاني من التعب المستمر...
+ عدّله إلى مشكلتك الصحية الخاصة + +▶ تغيير العنوان الفرعي (السطر: 19) + الحالي:اكتشف الحل العلمي...
+ اكتب الحل الذي يقدمه منتجك + +▶ تغيير اسم المنتج (السطر: 10) + الحالي:
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ الخطوة 7: SEO - تحسين محركات البحث
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+📍 الملف: index.html (السطور: 5-7)
+
+▶ غيّر الوصف:
+
+ اكتب وصف مختصر لمنتجك (150-160 حرف)
+
+▶ غيّر الكلمات المفتاحية:
+
+ أضف كلمات متعلقة بمنتجك
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ الخطوة 8: إضافة Google Analytics (اختياري)
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+▶ إذا أردت تتبع الزوار:
+ 1. سجّل في: https://analytics.google.com
+ 2. أنشئ property جديد
+ 3. احصل على كود التتبع
+ 4. الصقه قبل في index.html
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ الخطوة 9: اختبار قبل النشر
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✓ افتح index.html في المتصفح
+✓ تأكد من أن كل النصوص صحيحة
+✓ جرّب الضغط على زر "اشترِ الآن"
+✓ تأكد من أنه يوجهك لصفحة الدفع الصحيحة
+✓ افتح الموقع من الهاتف وتأكد من أنه responsive
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ الخطوة 10: رفع المشروع على Replit
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+1. اذهب إلى: https://replit.com
+2. اضغط: Create Repl
+3. اختر: HTML, CSS, JS
+4. ارفع جميع الملفات
+5. اضغط: Run
+6. انسخ الرابط وشاركه مع العملاء!
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ نصائح إضافية
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✓ احتفظ بنسخة احتياطية من الملفات الأصلية
+✓ جرّب عملية الشراء بنفسك أولاً (Stripe Test Mode)
+✓ راجع التهجئة والأخطاء الإملائية
+✓ تأكد من أن جميع الروابط تعمل
+✓ اختبر الموقع على متصفحات مختلفة
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ هل تحتاج مساعدة؟
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+راجع ملف README.md للحصول على شرح مفصّل أكثر.
+
+بالتوفيق! 🚀
diff --git a/LICENSE.txt b/LICENSE.txt
new file mode 100644
index 00000000..93fc437b
--- /dev/null
+++ b/LICENSE.txt
@@ -0,0 +1,209 @@
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ DIGITAL HEALTH PRODUCT TEMPLATE LICENSE
+ رخصة قالب المنتج الرقمي الصحي
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+Version 1.0 - 2025
+Copyright © 2025 Digital Store 2025
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ النسخة العربية | ARABIC VERSION
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+هذا القالب مُرخّص للاستخدام الشخصي والتجاري تحت الشروط التالية:
+
+✅ الاستخدامات المسموحة:
+━━━━━━━━━━━━━━━━━━━━━━
+
+1. استخدام شخصي غير محدود
+ - يمكنك استخدام القالب لمشاريعك الشخصية
+ - لا حدود على عدد المشاريع
+
+2. استخدام تجاري
+ - يمكنك استخدام القالب لبيع منتجاتك الرقمية
+ - يمكنك تحصيل أموال من العملاء
+ - لا حدود على الأرباح
+
+3. التعديل والتخصيص
+ - يمكنك تعديل الكود بالكامل
+ - يمكنك تغيير التصميم والألوان
+ - يمكنك إضافة/حذف أي ميزات
+
+4. استخدام للعملاء
+ - يمكنك استخدامه في مشاريع العملاء
+ - يمكنك تقديمه كخدمة
+
+5. الاستضافة
+ - يمكنك رفعه على أي منصة (Replit, Netlify, Vercel, إلخ)
+ - استضافة غير محدودة
+
+❌ الاستخدامات الممنوعة:
+━━━━━━━━━━━━━━━━━━━━━━
+
+1. إعادة البيع كقالب
+ - ممنوع بيع القالب نفسه لأشخاص آخرين كقالب
+ - ممنوع توزيعه كمنتج منفصل
+
+2. ادعاء الملكية
+ - ممنوع ادعاء أنك المطور الأصلي
+ - ممنوع إزالة أي إشارات للمطور الأصلي (إن وجدت)
+
+3. الاستخدامات غير القانونية
+ - ممنوع استخدامه في أي نشاط غير قانوني
+ - ممنوع استخدامه للاحتيال أو الخداع
+ - ممنوع استخدامه للترويج لمنتجات طبية غير مصرّحة
+
+4. المنافسة المباشرة
+ - ممنوع بيعه كقالب منافس
+ - ممنوع إنشاء نسخ طبق الأصل للبيع كقوالب
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ الشروط الإضافية
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+⚠️ إخلاء المسؤولية:
+
+1. القالب مقدم "كما هو" بدون أي ضمانات
+2. المطور الأصلي غير مسؤول عن:
+ - أي أضرار ناتجة عن استخدام القالب
+ - أي مشاكل تقنية
+ - خسائر مالية أو تجارية
+ - انتهاك القوانين المحلية
+
+3. المستخدم مسؤول عن:
+ - التأكد من توافق المحتوى مع القوانين المحلية
+ - التأكد من صحة المعلومات الطبية (إن وجدت)
+ - الامتثال لقوانين حماية المستهلك
+ - أمان بيانات العملاء
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ تنويه صحي مهم
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+إذا كنت تستخدم هذا القالب لبيع منتجات صحية:
+
+1. لا تقدم نصائح طبية بدون ترخيص
+2. اذكر دائمًا: "هذا المنتج للأغراض التثقيفية ولا يغني عن استشارة الطبيب"
+3. لا تدعي علاج أمراض بدون دليل علمي
+4. التزم بقوانين بلدك بخصوص المنتجات الصحية
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ التحديثات والدعم
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✓ التحديثات المستقبلية مجانية للمستخدمين الحاليين
+✓ الدعم الفني متاح عبر البريد الإلكتروني
+✓ إصلاح الأخطاء (Bugs) مجاني
+✓ الميزات الجديدة قد تكون مجانية أو مدفوعة
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ الاتصال
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+للأسئلة حول الرخصة أو الاستخدام:
+Email: support@yourdomain.com
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+ ENGLISH VERSION | النسخة الإنجليزية
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+This template is licensed for personal and commercial use under the
+following terms:
+
+✅ PERMITTED USES:
+━━━━━━━━━━━━━━━━
+
+1. Personal Use
+ - Use for your personal projects
+ - No limits on number of projects
+
+2. Commercial Use
+ - Sell your digital products using this template
+ - Charge customers for your products
+ - No profit limits
+
+3. Modification
+ - Modify the code completely
+ - Change design and colors
+ - Add/remove any features
+
+4. Client Work
+ - Use in client projects
+ - Offer as a service
+
+5. Hosting
+ - Host on any platform (Replit, Netlify, Vercel, etc.)
+ - Unlimited hosting
+
+❌ PROHIBITED USES:
+━━━━━━━━━━━━━━━━
+
+1. Resale as Template
+ - Cannot sell the template itself to others
+ - Cannot distribute as a separate product
+
+2. Claiming Ownership
+ - Cannot claim to be the original developer
+ - Cannot remove attribution (if present)
+
+3. Illegal Activities
+ - Cannot use for illegal activities
+ - Cannot use for fraud or deception
+ - Cannot promote unauthorized medical products
+
+4. Direct Competition
+ - Cannot sell as competing template
+ - Cannot create exact copies for sale as templates
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ WARRANTY DISCLAIMER
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+THE TEMPLATE IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE TEMPLATE OR THE USE OR
+OTHER DEALINGS IN THE TEMPLATE.
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ HEALTH PRODUCT DISCLAIMER
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+If using this template for health products:
+
+1. Do not provide medical advice without proper licensing
+2. Always include: "This product is for educational purposes only
+ and does not replace professional medical advice"
+3. Do not claim to cure diseases without scientific evidence
+4. Comply with your country's laws regarding health products
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ UPDATES & SUPPORT
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+✓ Future updates are free for current users
+✓ Technical support available via email
+✓ Bug fixes are free
+✓ New features may be free or paid
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+ CONTACT
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+For questions about licensing or usage:
+Email: support@yourdomain.com
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+© 2025 Digital Store 2025. All Rights Reserved.
+
+Last Updated: January 2025
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
diff --git a/README.md b/README.md
index 3f4e6314..436d1856 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,398 @@
-# .github
+# 🏥 قالب المنتج الرقمي الصحي | Digital Health Product Template
-*Community health files for the [@GitHub](https://github.com/github) organization*
+
-For more information, please see the article on [creating a default community health file for your organization](https://help.github.com/en/articles/creating-a-default-community-health-file-for-your-organization).
+## 📖 نظرة عامة
+
+قالب جاهز للبيع، مُصمم خصيصًا لبيع المنتجات الرقمية الصحية. يعمل مباشرة على Replit بدون أي backend أو برمجة معقدة.
+
+### ✨ المميزات
+
+- ✅ **جاهز للاستخدام فورًا** - لا حاجة لخبرة برمجية
+- ✅ **تصميم احترافي نظيف** - مستوحى من أفضل الممارسات (OpenAI Style)
+- ✅ **RTL عربي كامل** - مناسب للسوق العربي
+- ✅ **Responsive 100%** - يعمل على جميع الأجهزة
+- ✅ **تكامل دفع مباشر** - Stripe & PayPal جاهز
+- ✅ **سريع وخفيف** - تحميل سريع وبدون اعتماديات ثقيلة
+- ✅ **SEO محسّن** - جاهز لمحركات البحث
+- ✅ **سهل التخصيص** - تعديلات بسيطة من ملف CONFIG.txt
+
+---
+
+## 📁 هيكل المشروع
+
+```
+📦 digital-health-template/
+├── 📄 index.html # صفحة المبيعات الرئيسية
+├── 📄 thank-you.html # صفحة الشكر بعد الشراء
+├── 📄 CONFIG.txt # دليل التخصيص السريع
+├── 📄 README.md # هذا الملف
+├── 📄 LICENSE.txt # رخصة الاستخدام
+└── 📁 assets/
+ ├── 📁 css/
+ │ └── style.css # ملف التنسيق الرئيسي
+ └── 📁 images/ # مجلد الصور (فارغ - أضف صورك)
+```
+
+---
+
+## 🚀 البدء السريع (5 دقائق)
+
+### الخطوة 1️⃣: تحميل المشروع
+
+```bash
+# استنساخ أو تحميل المشروع
+git clone https://github.com/yourusername/digital-health-template.git
+cd digital-health-template
+```
+
+### الخطوة 2️⃣: تعديل روابط الدفع
+
+**افتح `index.html` وابحث عن السطور 186-193:**
+
+```html
+
+
+
+
+
+```
+
+**كيف تحصل على رابط Stripe:**
+1. سجّل في [Stripe](https://stripe.com)
+2. اذهب إلى: **Products** → **Create Payment Link**
+3. أدخل السعر والتفاصيل
+4. انسخ الرابط
+
+**نفس الخطوات لـ PayPal:**
+- رابط PayPal: `https://paypal.me/YOUR_USERNAME/27`
+
+### الخطوة 3️⃣: تخصيص المحتوى
+
+افتح ملف **`CONFIG.txt`** واتبع الإرشادات خطوة بخطوة لتخصيص:
+- العنوان الرئيسي
+- السعر
+- محتويات المنتج
+- معلومات الاتصال
+
+### الخطوة 4️⃣: رفع على Replit
+
+1. اذهب إلى [Replit.com](https://replit.com)
+2. اضغط **Create Repl**
+3. اختر **HTML, CSS, JS**
+4. ارفع جميع الملفات (Drag & Drop)
+5. اضغط **Run**
+6. 🎉 موقعك جاهز!
+
+---
+
+## 🎨 التخصيص المتقدم
+
+### تغيير الألوان
+
+افتح `assets/css/style.css` وعدّل المتغيرات:
+
+```css
+:root {
+ /* ألوان أساسية */
+ --primary-color: #10B981; /* أخضر صحي */
+ --primary-dark: #059669;
+
+ /* جرّب ألوان أخرى: */
+ /* أزرق: #3B82F6 */
+ /* برتقالي: #F59E0B */
+ /* بنفسجي: #8B5CF6 */
+}
+```
+
+### إضافة شعارك
+
+```html
+
+
+ 
+
+```
+
+### إضافة Google Analytics
+
+```html
+
+
+
+```
+
+---
+
+## 💳 إعداد الدفع
+
+### Stripe (موصى به)
+
+**المميزات:**
+- قبول جميع البطاقات
+- حماية عالية
+- دعم العملات المختلفة
+
+**الإعداد:**
+1. سجّل في [stripe.com](https://stripe.com)
+2. أكمل التحقق من الهوية
+3. أنشئ منتج جديد
+4. اختر "Payment Link"
+5. حدد السعر ($27 أو حسب رغبتك)
+6. احصل على الرابط
+
+### PayPal
+
+**المميزات:**
+- معروف عالميًا
+- سهل الاستخدام
+- لا رسوم إعداد
+
+**الإعداد:**
+1. سجّل في [paypal.com](https://paypal.com)
+2. فعّل حساب Business (اختياري)
+3. فعّل PayPal.Me من الإعدادات
+4. اختر اسم مستخدم: `yourusername`
+5. الرابط: `https://paypal.me/yourusername/27`
+
+---
+
+## 📧 إعداد توصيل المنتج
+
+بعد أن يدفع العميل، يجب أن تُرسل له المنتج. هناك طريقتان:
+
+### الطريقة 1: يدويًا (مجانية)
+
+1. ستصلك إشعارات الدفع من Stripe/PayPal
+2. أرسل بريد إلكتروني للعميل يدويًا مع رابط التحميل
+3. استخدم Google Drive أو Dropbox لرفع المنتج
+
+**مثال بريد:**
+```
+الموضوع: منتجك جاهز للتحميل 🎉
+
+عزيزي العميل،
+
+شكرًا لشرائك [اسم المنتج]!
+
+رابط التحميل:
+https://drive.google.com/file/d/xxxxxxx
+
+بالتوفيق!
+```
+
+### الطريقة 2: أوتوماتيكية (مدفوعة)
+
+استخدم خدمات مثل:
+- **Gumroad** - يدير كل شيء تلقائيًا
+- **SendOwl** - إرسال تلقائي للمنتجات
+- **Stripe + Zapier** - أتمتة كاملة
+
+---
+
+## 🎯 نصائح للنجاح
+
+### 1. اختبر قبل البيع
+- ✅ افتح الموقع من هاتفك
+- ✅ جرّب عملية الدفع (Stripe Test Mode)
+- ✅ تأكد من وصول البريد الإلكتروني
+
+### 2. صمم منتجًا قيّمًا
+- اجعل المحتوى عالي الجودة
+- قدّم حلولًا حقيقية للمشاكل
+- لا تبالغ في الوعود الطبية
+
+### 3. التسويق
+- شارك على وسائل التواصل الاجتماعي
+- استخدم إعلانات Facebook/Google
+- اطلب تقييمات من العملاء
+
+### 4. خدمة العملاء
+- رد سريع على الاستفسارات
+- قدّم دعم فني جيد
+- احترم ضمان استرداد الأموال
+
+---
+
+## 🛠️ استكشاف الأخطاء
+
+### المشكلة: الموقع لا يعمل على Replit
+
+**الحل:**
+- تأكد من رفع جميع الملفات والمجلدات
+- تحقق من أن `index.html` في المجلد الرئيسي
+- اضغط F5 لإعادة تحميل الصفحة
+
+### المشكلة: زر الدفع لا يعمل
+
+**الحل:**
+- تأكد من استبدال `YOUR_STRIPE_PAYMENT_LINK`
+- افتح الرابط في تبويب جديد للتأكد من صحته
+- تحقق من عدم وجود مسافات زائدة في الرابط
+
+### المشكلة: النصوص العربية تظهر بشكل خاطئ
+
+**الحل:**
+- تأكد من حفظ الملف بترميز UTF-8
+- لا تحذف `dir="rtl"` من ``
+- تحقق من استيراد خط Tajawal
+
+---
+
+## 📱 التوافق
+
+| المتصفح | الإصدار | الحالة |
+|---------|---------|---------|
+| Chrome | 90+ | ✅ مدعوم |
+| Firefox | 88+ | ✅ مدعوم |
+| Safari | 14+ | ✅ مدعوم |
+| Edge | 90+ | ✅ مدعوم |
+| Opera | 76+ | ✅ مدعوم |
+
+| الجهاز | الحالة |
+|--------|---------|
+| Desktop | ✅ مدعوم |
+| Tablet | ✅ مدعوم |
+| Mobile | ✅ مدعوم |
+
+---
+
+## 📄 الترخيص
+
+هذا القالب مُرخّص للاستخدام الشخصي والتجاري.
+
+**يمكنك:**
+- ✅ استخدامه لمشاريعك الشخصية
+- ✅ استخدامه لمشاريع العملاء
+- ✅ تعديله كما تشاء
+- ✅ بيع المنتجات من خلاله
+
+**لا يمكنك:**
+- ❌ إعادة بيع القالب نفسه كما هو
+- ❌ ادعاء ملكية الكود الأصلي
+- ❌ استخدامه في أنشطة غير قانونية
+
+للتفاصيل الكاملة، راجع ملف `LICENSE.txt`
+
+---
+
+## 💡 الأسئلة الشائعة
+
+### هل أحتاج خبرة برمجية؟
+لا! القالب جاهز تمامًا، فقط عدّل النصوص والروابط.
+
+### هل يمكنني استخدامه لأي منتج رقمي؟
+نعم! رغم أنه مصمم للمنتجات الصحية، يمكنك تعديله لأي نوع.
+
+### كم يستغرق الإعداد؟
+حوالي 10-15 دقيقة للإعداد الكامل.
+
+### هل يعمل بدون إنترنت؟
+نعم، لكن لن تعمل روابط الدفع. يحتاج إنترنت للنشر.
+
+### هل Replit مجاني؟
+نعم، لديهم خطة مجانية كافية لهذا المشروع.
+
+---
+
+## 🤝 الدعم
+
+إذا واجهت أي مشكلة:
+
+1. راجع ملف **CONFIG.txt**
+2. اقرأ قسم **استكشاف الأخطاء** أعلاه
+3. تحقق من الكود في `index.html` السطور المذكورة
+4. تواصل معنا: support@yourdomain.com
+
+---
+
+## 🎓 موارد تعليمية
+
+### لتعلم المزيد عن HTML/CSS:
+- [MDN Web Docs](https://developer.mozilla.org/ar/)
+- [W3Schools](https://www.w3schools.com)
+
+### لتعلم التسويق الرقمي:
+- [Google Digital Garage](https://learndigital.withgoogle.com)
+- [HubSpot Academy](https://academy.hubspot.com)
+
+### لتحسين SEO:
+- [Moz Beginner's Guide](https://moz.com/beginners-guide-to-seo)
+- [Google Search Central](https://developers.google.com/search)
+
+---
+
+## 🚀 التحديثات المستقبلية
+
+نخطط لإضافة:
+- [ ] دعم اللغة الإنجليزية
+- [ ] نماذج اتصال مباشرة
+- [ ] تكامل مع Mailchimp
+- [ ] صفحات إضافية (سياسة الخصوصية، الشروط)
+- [ ] قوالب بريد إلكتروني جاهزة
+
+---
+
+## ⭐ ساهم في التطوير
+
+وجدت خطأ؟ لديك اقتراح؟
+- افتح Issue على GitHub
+- أرسل Pull Request
+- راسلنا على البريد
+
+---
+
+## 🎉 شكرًا لاستخدامك هذا القالب!
+
+نتمنى لك النجاح في بيع منتجاتك الرقمية.
+لا تنسَ مشاركة قصة نجاحك معنا!
+
+**صُنع بـ ❤️ للمبدعين العرب**
+
+---
+
+
+
+---
+
+# 🇬🇧 English Version
+
+## Overview
+
+A ready-to-sell template designed specifically for digital health products. Works directly on Replit without any backend or complex programming.
+
+## Quick Start
+
+1. **Clone the repository**
+2. **Edit payment links** in `index.html` (lines 186-193)
+3. **Customize content** using `CONFIG.txt` guide
+4. **Deploy to Replit** - upload files and click Run
+5. **Start selling!**
+
+## Features
+
+- ✅ Ready to use immediately
+- ✅ Clean professional design (OpenAI-inspired)
+- ✅ RTL Arabic support
+- ✅ Fully responsive
+- ✅ Stripe & PayPal integration
+- ✅ Fast & lightweight
+- ✅ SEO optimized
+- ✅ Easy customization
+
+## Support
+
+For questions or issues, contact: support@yourdomain.com
+
+## License
+
+Licensed for personal and commercial use. See `LICENSE.txt` for details.
+
+---
+
+**Made with ❤️ for Arab Creators**
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 00000000..cf923ff7
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,938 @@
+/* ============================================
+ DIGITAL HEALTH PRODUCT TEMPLATE - CSS
+ RTL Arabic / Responsive / Minimal Design
+ ============================================ */
+
+/* ============================================
+ 1. RESET & BASE STYLES
+ ============================================ */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ /* Primary Colors - Calm Health Theme */
+ --primary-color: #10B981;
+ --primary-dark: #059669;
+ --primary-light: #D1FAE5;
+
+ /* Secondary Colors */
+ --secondary-color: #3B82F6;
+ --secondary-dark: #2563EB;
+
+ /* Neutral Colors */
+ --text-dark: #1F2937;
+ --text-medium: #4B5563;
+ --text-light: #6B7280;
+ --bg-white: #FFFFFF;
+ --bg-gray: #F9FAFB;
+ --bg-light: #F3F4F6;
+ --border-color: #E5E7EB;
+
+ /* Accent Colors */
+ --accent-yellow: #FBBF24;
+ --accent-red: #EF4444;
+
+ /* Spacing */
+ --space-xs: 0.5rem;
+ --space-sm: 1rem;
+ --space-md: 1.5rem;
+ --space-lg: 2rem;
+ --space-xl: 3rem;
+ --space-2xl: 4rem;
+ --space-3xl: 6rem;
+
+ /* Typography */
+ --font-primary: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font-size-xs: 0.75rem;
+ --font-size-sm: 0.875rem;
+ --font-size-base: 1rem;
+ --font-size-lg: 1.125rem;
+ --font-size-xl: 1.25rem;
+ --font-size-2xl: 1.5rem;
+ --font-size-3xl: 2rem;
+ --font-size-4xl: 2.5rem;
+ --font-size-5xl: 3rem;
+
+ /* Border Radius */
+ --radius-sm: 0.375rem;
+ --radius-md: 0.5rem;
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --radius-2xl: 1.5rem;
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+ --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ font-family: var(--font-primary);
+ font-size: var(--font-size-base);
+ line-height: 1.6;
+ color: var(--text-dark);
+ background-color: var(--bg-white);
+ direction: rtl;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* ============================================
+ 2. LAYOUT & CONTAINERS
+ ============================================ */
+.container {
+ width: 100%;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 var(--space-md);
+}
+
+section {
+ padding: var(--space-3xl) 0;
+}
+
+/* ============================================
+ 3. TYPOGRAPHY
+ ============================================ */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: 700;
+ line-height: 1.2;
+ color: var(--text-dark);
+ margin-bottom: var(--space-md);
+}
+
+h1 {
+ font-size: var(--font-size-4xl);
+}
+
+h2 {
+ font-size: var(--font-size-3xl);
+}
+
+h3 {
+ font-size: var(--font-size-2xl);
+}
+
+p {
+ margin-bottom: var(--space-sm);
+ color: var(--text-medium);
+ line-height: 1.7;
+}
+
+a {
+ text-decoration: none;
+ color: var(--primary-color);
+ transition: all 0.3s ease;
+}
+
+a:hover {
+ color: var(--primary-dark);
+}
+
+/* ============================================
+ 4. BUTTONS & CTAs
+ ============================================ */
+.cta-button {
+ display: inline-block;
+ padding: var(--space-md) var(--space-xl);
+ font-size: var(--font-size-lg);
+ font-weight: 600;
+ text-align: center;
+ border-radius: var(--radius-lg);
+ cursor: pointer;
+ transition: all 0.3s ease;
+ border: 2px solid transparent;
+ text-decoration: none;
+}
+
+.cta-button.primary {
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+ color: var(--bg-white);
+ box-shadow: var(--shadow-lg);
+}
+
+.cta-button.primary:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--shadow-xl);
+ background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
+}
+
+.cta-button.secondary {
+ background-color: transparent;
+ color: var(--primary-color);
+ border: 2px solid var(--primary-color);
+}
+
+.cta-button.secondary:hover {
+ background-color: var(--primary-color);
+ color: var(--bg-white);
+}
+
+/* ============================================
+ 5. HERO SECTION
+ ============================================ */
+.hero {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: var(--bg-white);
+ text-align: center;
+ padding: var(--space-3xl) 0;
+ min-height: 70vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.hero-content {
+ max-width: 800px;
+ margin: 0 auto;
+}
+
+.hero-title {
+ font-size: var(--font-size-5xl);
+ font-weight: 900;
+ margin-bottom: var(--space-lg);
+ color: var(--bg-white);
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.hero-subtitle {
+ font-size: var(--font-size-xl);
+ margin-bottom: var(--space-xl);
+ color: rgba(255, 255, 255, 0.95);
+ font-weight: 400;
+}
+
+/* ============================================
+ 6. SECTION TITLES
+ ============================================ */
+.section-title {
+ text-align: center;
+ font-size: var(--font-size-3xl);
+ margin-bottom: var(--space-2xl);
+ position: relative;
+ padding-bottom: var(--space-md);
+}
+
+.section-title::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ right: 50%;
+ transform: translateX(50%);
+ width: 80px;
+ height: 4px;
+ background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
+ border-radius: 2px;
+}
+
+/* ============================================
+ 7. PROBLEM SECTION
+ ============================================ */
+.problem {
+ background-color: var(--bg-gray);
+}
+
+.problem-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: var(--space-lg);
+ margin-top: var(--space-2xl);
+}
+
+.problem-item {
+ background-color: var(--bg-white);
+ padding: var(--space-xl);
+ border-radius: var(--radius-xl);
+ text-align: center;
+ box-shadow: var(--shadow-md);
+ transition: all 0.3s ease;
+}
+
+.problem-item:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--shadow-xl);
+}
+
+.problem-icon {
+ font-size: 3rem;
+ margin-bottom: var(--space-md);
+}
+
+.problem-item h3 {
+ font-size: var(--font-size-xl);
+ margin-bottom: var(--space-sm);
+ color: var(--text-dark);
+}
+
+.problem-item p {
+ color: var(--text-medium);
+ font-size: var(--font-size-base);
+}
+
+/* ============================================
+ 8. SOLUTION SECTION
+ ============================================ */
+.solution {
+ background-color: var(--bg-white);
+}
+
+.solution-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: var(--space-2xl);
+ align-items: start;
+}
+
+.solution-text h3 {
+ font-size: var(--font-size-2xl);
+ margin-bottom: var(--space-md);
+ color: var(--primary-dark);
+}
+
+.solution-text p {
+ font-size: var(--font-size-lg);
+ margin-bottom: var(--space-lg);
+ line-height: 1.8;
+}
+
+.benefit-list {
+ list-style: none;
+ padding: 0;
+}
+
+.benefit-list li {
+ padding: var(--space-sm) 0;
+ font-size: var(--font-size-lg);
+ color: var(--text-medium);
+ position: relative;
+ padding-right: var(--space-lg);
+}
+
+.benefit-list li::before {
+ position: absolute;
+ right: 0;
+}
+
+.solution-visual {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+}
+
+.feature-box {
+ background: linear-gradient(135deg, var(--primary-light), var(--bg-white));
+ padding: var(--space-lg);
+ border-radius: var(--radius-xl);
+ border-right: 4px solid var(--primary-color);
+ box-shadow: var(--shadow-sm);
+}
+
+.feature-box h4 {
+ font-size: var(--font-size-xl);
+ margin-bottom: var(--space-sm);
+ color: var(--primary-dark);
+}
+
+.feature-box p {
+ color: var(--text-medium);
+ margin: 0;
+}
+
+/* ============================================
+ 9. CONTENTS SECTION
+ ============================================ */
+.contents {
+ background-color: var(--bg-gray);
+}
+
+.contents-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: var(--space-lg);
+ margin-top: var(--space-2xl);
+}
+
+.content-item {
+ background-color: var(--bg-white);
+ padding: var(--space-xl);
+ border-radius: var(--radius-xl);
+ box-shadow: var(--shadow-md);
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.content-item:hover {
+ transform: translateY(-5px);
+ box-shadow: var(--shadow-xl);
+}
+
+.content-number {
+ position: absolute;
+ top: -10px;
+ right: var(--space-lg);
+ font-size: 5rem;
+ font-weight: 900;
+ color: var(--primary-light);
+ opacity: 0.3;
+ line-height: 1;
+}
+
+.content-item h3 {
+ font-size: var(--font-size-xl);
+ margin-bottom: var(--space-sm);
+ position: relative;
+ z-index: 1;
+}
+
+.content-item p {
+ position: relative;
+ z-index: 1;
+ margin: 0;
+}
+
+/* ============================================
+ 10. PRICING SECTION
+ ============================================ */
+.pricing {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: var(--bg-white);
+}
+
+.pricing .section-title {
+ color: var(--bg-white);
+}
+
+.pricing .section-title::after {
+ background: linear-gradient(90deg, var(--bg-white), rgba(255, 255, 255, 0.5));
+}
+
+.pricing-card {
+ max-width: 600px;
+ margin: 0 auto;
+ background-color: var(--bg-white);
+ padding: var(--space-2xl);
+ border-radius: var(--radius-2xl);
+ box-shadow: var(--shadow-xl);
+ text-align: center;
+}
+
+.price-tag {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-xs);
+ margin-bottom: var(--space-md);
+}
+
+.currency {
+ font-size: var(--font-size-2xl);
+ font-weight: 700;
+ color: var(--text-medium);
+}
+
+.amount {
+ font-size: 5rem;
+ font-weight: 900;
+ color: var(--primary-color);
+ line-height: 1;
+}
+
+.period {
+ font-size: var(--font-size-base);
+ color: var(--text-medium);
+ margin-right: var(--space-sm);
+}
+
+.price-old {
+ margin-bottom: var(--space-xl);
+}
+
+.price-old del {
+ font-size: var(--font-size-2xl);
+ color: var(--text-light);
+ margin-left: var(--space-sm);
+}
+
+.discount {
+ display: inline-block;
+ background-color: var(--accent-red);
+ color: var(--bg-white);
+ padding: var(--space-xs) var(--space-md);
+ border-radius: var(--radius-md);
+ font-size: var(--font-size-sm);
+ font-weight: 700;
+}
+
+.pricing-features {
+ list-style: none;
+ text-align: right;
+ margin: var(--space-xl) 0;
+ padding: 0;
+}
+
+.pricing-features li {
+ padding: var(--space-md) 0;
+ font-size: var(--font-size-lg);
+ color: var(--text-medium);
+ border-bottom: 1px solid var(--border-color);
+}
+
+.pricing-features li:last-child {
+ border-bottom: none;
+}
+
+.payment-buttons {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-md);
+ margin: var(--space-xl) 0;
+}
+
+.stripe-btn {
+ background: linear-gradient(135deg, #635BFF, #4F46E5) !important;
+}
+
+.paypal-btn {
+ background: linear-gradient(135deg, #0070BA, #003087) !important;
+ color: var(--bg-white) !important;
+}
+
+.guarantee {
+ display: flex;
+ align-items: center;
+ gap: var(--space-md);
+ background-color: var(--primary-light);
+ padding: var(--space-lg);
+ border-radius: var(--radius-lg);
+ margin-top: var(--space-xl);
+ text-align: right;
+}
+
+.guarantee-icon {
+ font-size: 3rem;
+ flex-shrink: 0;
+}
+
+.guarantee-text strong {
+ display: block;
+ color: var(--primary-dark);
+ font-size: var(--font-size-lg);
+ margin-bottom: var(--space-xs);
+}
+
+.guarantee-text p {
+ margin: 0;
+ font-size: var(--font-size-sm);
+ color: var(--text-medium);
+}
+
+/* ============================================
+ 11. FAQ SECTION
+ ============================================ */
+.faq {
+ background-color: var(--bg-white);
+}
+
+.faq-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+ gap: var(--space-lg);
+ margin-top: var(--space-2xl);
+}
+
+.faq-item {
+ background-color: var(--bg-gray);
+ padding: var(--space-xl);
+ border-radius: var(--radius-lg);
+ border-right: 4px solid var(--primary-color);
+}
+
+.faq-item h3 {
+ font-size: var(--font-size-lg);
+ color: var(--primary-dark);
+ margin-bottom: var(--space-sm);
+}
+
+.faq-item p {
+ margin: 0;
+ color: var(--text-medium);
+}
+
+/* ============================================
+ 12. FOOTER
+ ============================================ */
+.footer {
+ background-color: var(--text-dark);
+ color: var(--bg-white);
+ padding: var(--space-xl) 0;
+ text-align: center;
+}
+
+.footer p {
+ color: rgba(255, 255, 255, 0.8);
+ margin-bottom: var(--space-sm);
+}
+
+.disclaimer {
+ font-size: var(--font-size-sm);
+ color: rgba(255, 255, 255, 0.6);
+ font-style: italic;
+ max-width: 800px;
+ margin: var(--space-md) auto;
+}
+
+.footer-links {
+ display: flex;
+ justify-content: center;
+ gap: var(--space-lg);
+ margin-top: var(--space-md);
+}
+
+.footer-links a {
+ color: rgba(255, 255, 255, 0.8);
+ font-size: var(--font-size-sm);
+ transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+ color: var(--primary-color);
+}
+
+/* ============================================
+ 13. THANK YOU PAGE
+ ============================================ */
+.thank-you-page {
+ min-height: 80vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: var(--bg-gray);
+ padding: var(--space-2xl) 0;
+}
+
+.thank-you-content {
+ max-width: 800px;
+ text-align: center;
+}
+
+.success-icon {
+ margin: 0 auto var(--space-xl);
+ animation: scaleIn 0.5s ease-out;
+}
+
+@keyframes scaleIn {
+ from {
+ transform: scale(0);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+.thank-you-title {
+ font-size: var(--font-size-3xl);
+ color: var(--primary-dark);
+ margin-bottom: var(--space-md);
+}
+
+.thank-you-subtitle {
+ font-size: var(--font-size-xl);
+ color: var(--text-medium);
+ margin-bottom: var(--space-2xl);
+}
+
+.next-steps {
+ background-color: var(--bg-white);
+ padding: var(--space-2xl);
+ border-radius: var(--radius-xl);
+ box-shadow: var(--shadow-lg);
+ margin-bottom: var(--space-xl);
+ text-align: right;
+}
+
+.next-steps h2 {
+ text-align: center;
+ margin-bottom: var(--space-xl);
+}
+
+.steps-grid {
+ display: grid;
+ gap: var(--space-lg);
+}
+
+.step-item {
+ display: flex;
+ gap: var(--space-lg);
+ align-items: start;
+}
+
+.step-number {
+ width: 50px;
+ height: 50px;
+ background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+ color: var(--bg-white);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--font-size-xl);
+ font-weight: 900;
+ flex-shrink: 0;
+}
+
+.step-content h3 {
+ font-size: var(--font-size-lg);
+ margin-bottom: var(--space-xs);
+}
+
+.step-content p {
+ margin: 0;
+}
+
+.important-note {
+ background-color: #FEF3C7;
+ padding: var(--space-lg);
+ border-radius: var(--radius-lg);
+ display: flex;
+ gap: var(--space-md);
+ margin-bottom: var(--space-xl);
+ text-align: right;
+ border-right: 4px solid var(--accent-yellow);
+}
+
+.note-icon {
+ font-size: 2rem;
+ flex-shrink: 0;
+}
+
+.note-content h3 {
+ color: #92400E;
+ margin-bottom: var(--space-xs);
+}
+
+.note-content p {
+ color: #78350F;
+ margin-bottom: var(--space-xs);
+}
+
+.support-box {
+ background-color: var(--bg-white);
+ padding: var(--space-xl);
+ border-radius: var(--radius-lg);
+ box-shadow: var(--shadow-md);
+ margin-bottom: var(--space-xl);
+}
+
+.support-email {
+ display: inline-block;
+ font-size: var(--font-size-lg);
+ font-weight: 700;
+ color: var(--primary-color);
+ margin: var(--space-md) 0;
+}
+
+.support-note {
+ font-size: var(--font-size-sm);
+ color: var(--text-light);
+}
+
+.tips-box {
+ background-color: var(--primary-light);
+ padding: var(--space-xl);
+ border-radius: var(--radius-lg);
+ margin-bottom: var(--space-xl);
+ text-align: right;
+}
+
+.tips-box h3 {
+ color: var(--primary-dark);
+ margin-bottom: var(--space-md);
+}
+
+.tips-list {
+ list-style: none;
+ padding: 0;
+}
+
+.tips-list li {
+ padding: var(--space-sm) 0;
+ padding-right: var(--space-lg);
+ position: relative;
+ color: var(--text-medium);
+}
+
+.tips-list li::before {
+ content: '✓';
+ position: absolute;
+ right: 0;
+ color: var(--primary-color);
+ font-weight: 900;
+}
+
+.social-share {
+ margin-bottom: var(--space-xl);
+}
+
+.share-buttons {
+ display: flex;
+ justify-content: center;
+ gap: var(--space-md);
+ margin-top: var(--space-md);
+}
+
+.share-btn {
+ padding: var(--space-sm) var(--space-lg);
+ border-radius: var(--radius-md);
+ color: var(--bg-white);
+ font-weight: 600;
+ font-size: var(--font-size-sm);
+}
+
+.share-btn.whatsapp {
+ background-color: #25D366;
+}
+
+.share-btn.twitter {
+ background-color: #1DA1F2;
+}
+
+.share-btn.facebook {
+ background-color: #1877F2;
+}
+
+.back-home {
+ margin-top: var(--space-xl);
+}
+
+/* ============================================
+ 14. RESPONSIVE DESIGN
+ ============================================ */
+@media (max-width: 768px) {
+ :root {
+ --font-size-5xl: 2rem;
+ --font-size-4xl: 1.75rem;
+ --font-size-3xl: 1.5rem;
+ --space-3xl: 3rem;
+ }
+
+ .hero {
+ min-height: 60vh;
+ padding: var(--space-2xl) 0;
+ }
+
+ .solution-content {
+ grid-template-columns: 1fr;
+ gap: var(--space-lg);
+ }
+
+ .problem-grid,
+ .contents-grid,
+ .faq-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .pricing-card {
+ padding: var(--space-lg);
+ }
+
+ .amount {
+ font-size: 3.5rem;
+ }
+
+ .payment-buttons {
+ flex-direction: column;
+ }
+
+ .guarantee {
+ flex-direction: column;
+ text-align: center;
+ }
+
+ .footer-links {
+ flex-direction: column;
+ gap: var(--space-sm);
+ }
+
+ .share-buttons {
+ flex-direction: column;
+ }
+}
+
+@media (max-width: 480px) {
+ .container {
+ padding: 0 var(--space-sm);
+ }
+
+ section {
+ padding: var(--space-xl) 0;
+ }
+
+ .hero-title {
+ font-size: var(--font-size-2xl);
+ }
+
+ .hero-subtitle {
+ font-size: var(--font-size-base);
+ }
+
+ .cta-button {
+ padding: var(--space-sm) var(--space-lg);
+ font-size: var(--font-size-base);
+ }
+}
+
+/* ============================================
+ 15. UTILITIES
+ ============================================ */
+.text-center {
+ text-align: center;
+}
+
+.mt-1 { margin-top: var(--space-sm); }
+.mt-2 { margin-top: var(--space-md); }
+.mt-3 { margin-top: var(--space-lg); }
+.mt-4 { margin-top: var(--space-xl); }
+
+.mb-1 { margin-bottom: var(--space-sm); }
+.mb-2 { margin-bottom: var(--space-md); }
+.mb-3 { margin-bottom: var(--space-lg); }
+.mb-4 { margin-bottom: var(--space-xl); }
+
+/* ============================================
+ 16. ANIMATIONS
+ ============================================ */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.fade-in {
+ animation: fadeIn 0.6s ease-out;
+}
+
+/* Print Styles */
+@media print {
+ .hero,
+ .footer,
+ .payment-buttons,
+ .social-share {
+ display: none;
+ }
+}
diff --git a/config/repolinter-ruleset.json b/config/repolinter-ruleset.json
index c57e1b87..c0467d79 100644
--- a/config/repolinter-ruleset.json
+++ b/config/repolinter-ruleset.json
@@ -62,7 +62,7 @@
},
"policyInfo": "GitHub requires a CODEOWNERS file in all projects. This enables GitHub to contact the maintainers in the event it is necessary.",
"policyUrl": "https://github.com/github/open-source/blob/main/policies/release.md"
- },
+ }
},
"formatOptions": {
"disclaimer": "🤖*This issue was automatically generated by [repolinter-action](https://github.com/newrelic/repolinter-action), developed by the Open Source and Developer Advocacy team at New Relic.*"
diff --git a/config/text-summarizer-eval.yaml b/config/text-summarizer-eval.yaml
new file mode 100644
index 00000000..1648d920
--- /dev/null
+++ b/config/text-summarizer-eval.yaml
@@ -0,0 +1,23 @@
+name: Text Summarizer
+description: Summarizes input text concisely
+model: openai/gpt-4o-mini
+modelParameters:
+ temperature: 0.5
+messages:
+ - role: system
+ content: You are a text summarizer. Your only job is to summarize text given to you.
+ - role: user
+ content: |
+ Summarize the given text, beginning with "Summary -":
+
+
+
+
+
+
+
+
+
+
diff --git a/design/radio-dashboard-prototype.md b/design/radio-dashboard-prototype.md
new file mode 100644
index 00000000..c465f10b
--- /dev/null
+++ b/design/radio-dashboard-prototype.md
@@ -0,0 +1,125 @@
+# لوحة التحكم الإعلامية لإذاعة "صوت القدس" — نموذج أولي جاهز للبرمجة
+
+يوثق هذا المستند نموذجًا أوليًا (low/medium fidelity) للوحة تحكم توليد محتوى لحظي. يشمل بنية الواجهة، تدفقات الاستخدام، التكامل مع نماذج الذكاء الاصطناعي، واستقبال الأخبار من مصادر خارجية (RSS/API)، مع خصائص النسخ والتصدير السريع.
+
+## 1) أهداف المنتج
+- توليد محتوى عربي إذاعي/تحريري بسرعة مع ضبط النبرة (إذاعي، إخباري، مهني).
+- تحديث لحظي للأخبار (1 أو 5 دقائق) مع مرونة تخصيص الصيغة والإخراج.
+- تصدير سريع للنشر (نسخ فوري، ملفات، أو ربط مع قنوات توزيع).
+- حوكمة تحريرية: إبراز المصادر، حفظ سياق المراجعة البشرية، ومنع النشر الآلي غير المراقب.
+
+## 2) خارطة الواجهة (مكونات رئيسية)
+1. **شريط علوي**: شعار الإذاعة + حالة الاتصال + مؤشر آخر تحديث.
+2. **لوحة التحكم السريعة** (يمين/يسار حسب اللغة):
+ - اختيار نوع المحتوى: زرّ/قائمة (منشور، نشرة إذاعية، تغطية عاجلة، ملخّص تحليلي).
+ - فترة التحديث: أزرار راديو (1 دقيقة، 5 دقائق) + خيار إيقاف/تشغيل التحديث التلقائي.
+ - مصدر الأخبار: اختيار/بحث (RSS جاهز + مصادر API) مع شارة الموثوقية.
+ - لغة الإخراج: عربي/ثنائي/إنجليزي.
+ - نبرة التحرير: (إذاعي، رسمي، ميداني، تحليلي) مع وصف موجز.
+3. **لوحة الأخبار الحية**: جدول/بطاقات بعناوين الأخبار، المصدر، الزمن، الوسوم (عاجل/تحليلي). دعم فرز/بحث/تصفية.
+4. **منطقة الصياغة المدعومة بالذكاء الاصطناعي**:
+ - حقل نصي متعدد الأسطر + عداد أحرف.
+ - أزرار قوالب جاهزة (عاجل 🔴، نشرة 📻، تواصل اجتماعي 📱).
+ - معلمات الذكاء الاصطناعي: مستوى الإيجاز/التفصيل، درجة الرسمية، إدراج اقتباسات، احترام دليل المصطلحات.
+ - زر **توليد** + حالة انتظار/إشعار نجاح أو فشل.
+5. **التصدير السريع**:
+ - **نسخ فوري** (Copy) مع رسالة نجاح.
+ - **حفظ كملف** (TXT/HTML/Markdown).
+ - **نشر عبر API** (Webhook/CMS/Social) مع مفتاح سري مخزّن آمنًا.
+ - سجل آخر 10 مخارج محفوظة للتراجع أو الإعادة.
+6. **لوحة المراجعة والتحريرية**: حقل لملاحظات المراجع، حالة "مراجَع/غير مراجَع"، سجلات تغييرات مختصرة.
+
+## 3) تدفقات الاستخدام الأساسية
+1. **اختيار نوع المحتوى** → يظهر نموذج الإعدادات المناسب (مثلاً النشرة الإذاعية تعرض مدة النشرة + فواصل صوتية).
+2. **التحديث اللحظي**: تحديد 1 أو 5 دقائق → اشتراك في WebSocket/Interval لجلب الأخبار → تحديث لوحة الأخبار الحية + مؤشر آخر تحديث.
+3. **التوليد**: اختيار عناصر إخبارية (Checkbox) → النقر "توليد" → إرسال Prompt للـ GPT API → عرض المسودة في منطقة الصياغة.
+4. **المراجعة**: تحرير النص يدويًا → تحديد الحالة "مراجَع" → إضافة ملاحظات.
+5. **التصدير**: نسخ/حفظ ملف/استدعاء Webhook → إشعار نجاح مع وقت التنفيذ.
+
+## 4) التكامل مع نماذج الذكاء الاصطناعي (مثال تقني)
+- **إعدادات**: مفتاح API مشفّر، اختيار نموذج (GPT-4.x)، حدّ الطول، والتحكم في الـ temperature.
+- **مثال طلب (Node.js/Fetch)**:
+ ```js
+ const body = {
+ model: "gpt-4.1-mini",
+ temperature: 0.4,
+ messages: [
+ { role: "system", content: "أنت محرر إذاعي فلسطيني..." },
+ { role: "user", content: `
+ لخص الأخبار التالية بنبرة إذاعية مهنية:
+ - [${selectedItems.join(" | ")}]
+ التنسيق: فقرة افتتاحية + 3 نقاط رئيسية + خاتمة دعوية قصيرة.
+ راعِ دليل المصطلحات: الاحتلال/المقاومة/الأسرى...
+ ` }
+ ]
+ };
+ const res = await fetch("/api/ai/generate", { method: "POST", body: JSON.stringify(body) });
+ const { content } = await res.json();
+ ```
+- **إدارة الأخطاء**: إشعارات صديقة، إعادة المحاولة، وضع عدم الاتصال (Offline Mode) يحفظ الطلبات ويرسلها لاحقًا.
+
+## 5) استقبال الأخبار (RSS/API)
+- **جلب RSS**: مهمة مجدولة (CRON/Interval) لكل 1 أو 5 دقائق.
+- **تنظيف المحتوى**: إزالة الوسوم المكررة، اكتشاف اللغة، تصنيف (عاجل/رسمي/ميداني/تحليلي).
+- **نموذج بيانات مقترح**:
+ ```json
+ {
+ "id": "uuid",
+ "source": "safa.ps",
+ "title": "عنوان الخبر",
+ "link": "https://...",
+ "published_at": "2025-01-01T10:00:00Z",
+ "language": "ar",
+ "tags": ["عاجل", "ميداني"],
+ "reliability": 4.5,
+ "summary": "ملخص قصير",
+ "body": "النص الكامل",
+ "enriched": {
+ "entities": ["غزة", "بيت لاهيا"],
+ "locations": ["فلسطين"],
+ "topics": ["سياسة", "ميداني"]
+ }
+ }
+ ```
+- **التخزين المؤقت**: IndexedDB أو LocalStorage للمتصفح + Cache API لضمان سرعة الواجهة.
+- **توحيد المصادر المحمية**: دعم RSS.app/FetchRSS مع مفاتيح منفصلة.
+
+## 6) النسخ والتصدير
+- زر نسخ واضح أعلى منطقة الصياغة + تأكيد Toast.
+- زر "تنزيل" مع اختيار النوع (TXT/HTML/MD).
+- حقل Webhook URL + مفتاح سرّي للاستخدام مع CMS/شبكات اجتماعية.
+- سجل المخارج: جدول بالعناصر الأخيرة مع وقت التوليد، الحالة (مراجَع/غير مراجَع)، ومصدر البيانات.
+
+## 7) إرشادات تصميم الواجهة
+- **تصميم RTL أولاً** مع دعم LTR.
+- ألوان: تباين عالٍ، حالات للمصدر (موثوق/محمي/محدود) عبر شارات.
+- حالات Loading/Empty/Error واضحة.
+- رموز واضحة: 🔴 للعاجل، 📻 للنشرة، 📱 للتواصل.
+- إمكانية تخصيص خط عربي مناسب للإذاعة (مثلاً "Cairo" أو "Noto Sans Arabic").
+
+## 8) نموذج بيانات الإعدادات (Front-End)
+```ts
+type Settings = {
+ contentType: "post" | "radio_bulletin" | "breaking" | "analysis";
+ refreshIntervalSec: 60 | 300;
+ autoRefresh: boolean;
+ aiTone: "radio" | "official" | "field" | "analytical";
+ language: "ar" | "ar_en" | "en";
+ sources: string[];
+ webhookUrl?: string;
+ exportFormats: ("copy" | "txt" | "html" | "md" | "webhook")[];
+};
+```
+
+## 9) نماذج قوالب التوليد (جاهزة للاستخدام)
+- **عاجل 🔴**: جملة افتتاحية + حدث رئيسي + مصدر + نداء للمتابعة.
+- **نشرة 📻**: مقدمة، 3-5 فقرات مختصرة مع توقيت، خاتمة دعوية قصيرة.
+- **تواصل اجتماعي 📱**: نص قصير، هاشتاقات، رابط مختصر.
+- جميع القوالب تلتزم بدليل المصطلحات: "الاحتلال"، "المقاومة"، "الأسرى"، وتجنب مصطلحات مضللة.
+
+## 10) ملاحظات للتطوير/النشر
+- اعتماد مبدأ Offline-first + Sync عند الاتصال.
+- حماية المفاتيح الحساسة في الخادم أو مخزن أسرار.
+- رصد زمن التوليد والتحديث لقياس الأداء.
+- تسجيل التدخلات البشرية للحوكمة التحريرية.
+
diff --git a/design/radio-dashboard-wireflow.md b/design/radio-dashboard-wireflow.md
new file mode 100644
index 00000000..0dae172c
--- /dev/null
+++ b/design/radio-dashboard-wireflow.md
@@ -0,0 +1,72 @@
+# لوحة التحكم الإعلامية — مخطط التدفق التفاعلي (Wireflow)
+
+يوضح هذا المستند تدفق الشاشات والقرارات الرئيسية لبناء نموذج أولي تفاعلي (Figma/Webflow) للوحة التحكم الخاصة بإذاعة "صوت القدس". يركّز على كيفية انتقال المستخدم بين الخطوات، التحكم في التحديث اللحظي، والتكامل مع نماذج الذكاء الاصطناعي ومصادر الأخبار.
+
+## 1) الشاشات الأساسية
+1. **شاشة البداية / تسجيل الدخول البسيط**
+ - حقل مفتاح API (يُحفظ مشفّرًا في المتصفح أو عبر الخادم).
+ - اختيار نموذج AI الافتراضي + زر "حفظ الإعدادات".
+2. **لوحة التحكم الرئيسية**
+ - مؤشر آخر تحديث + حالة الاتصال (Online/Offline).
+ - عناصر اختيار نوع المحتوى (منشور/نشرة إذاعية/عاجل/تحليلي).
+ - إعداد فترة التحديث (1 أو 5 دقائق) + زر تشغيل/إيقاف التحديث التلقائي.
+ - اختيار المصادر (RSS/API) بشارات موثوقية.
+ - زر "فتح لوحة الأخبار" وزر "فتح منطقة الصياغة".
+3. **لوحة الأخبار الحية**
+ - قائمة أو بطاقات بعناوين الأخبار + المصدر + زمن النشر + الوسوم.
+ - فلاتر (عاجل/رسمي/ميداني/تحليلي) + بحث نصي.
+ - خانة تحديد (Checkbox) لاختيار الأخبار التي ستُستخدم في التوليد.
+ - زر "إرسال إلى الصياغة".
+4. **منطقة الصياغة المدعومة بالذكاء الاصطناعي**
+ - حقل نصي متعدد الأسطر + عداد أحرف.
+ - أزرار القوالب الجاهزة (عاجل 🔴 / نشرة 📻 / تواصل 📱).
+ - معلمات AI: درجة الإيجاز، الرسمية، إدراج اقتباسات، احترام دليل المصطلحات.
+ - زر "توليد" + حالة التحميل/النجاح/الخطأ.
+ - حقل ملاحظات المراجع + حالة "مراجَع/غير مراجَع".
+5. **التصدير والمشاركة**
+ - أزرار: نسخ، تنزيل (TXT/HTML/MD)، إرسال Webhook.
+ - قائمة بالمخارج الأخيرة مع وقت التوليد والحالة.
+ - زر "إعادة استخدام" لإعادة فتح المخرج في منطقة الصياغة.
+
+## 2) تدفق المستخدم (Wireflow مبسط)
+1. تسجيل الدخول المفتاحي → حفظ الإعدادات → الانتقال للوحة التحكم.
+2. اختيار نوع المحتوى + فترة التحديث + المصادر → تشغيل التحديث التلقائي (Interval/WebSocket).
+3. فتح "لوحة الأخبار" → اختيار عناصر → "إرسال إلى الصياغة".
+4. ضبط القالب/النبرة → "توليد" → مراجعة النص → تغيير الحالة إلى "مراجَع".
+5. اختيار وسيلة الإخراج (نسخ/تنزيل/Webhook) → إشعار نجاح → سجل المخرجات يُحدّث.
+6. (اختياري) تعديل الإعدادات أو تبديل المصادر → إعادة توليد/تصدير.
+
+## 3) عناصر تفاعلية مقترحة في Figma/Webflow
+- **Components**:
+ - Buttons (Primary/Secondary/Danger) مع حالات Hover/Active/Disabled.
+ - Cards للأخبار مع شارات موثوقية.
+ - Tabs للفصل بين "الأخبار" و"الصياغة" و"التصدير".
+ - Toasts للإشعارات (نجاح/خطأ/تنبيه اتصال).
+ - Badges لوسوم المصدر والنوع (عاجل/تحليلي/رسمي).
+- **Interactions**:
+ - Auto-Refresh Indicator يتغير كل 1 أو 5 دقائق.
+ - Modal لطلب مفتاح API أو إعداد Webhook.
+ - Sidebar قابل للطيّ يحتوي على التحكم السريع.
+ - Animations خفيفة للتحميل والتبديل بين القوالب.
+
+## 4) مخطط بيانات التفاعل (Events)
+- `onSourceSelect(sourceId)`: تحديث قائمة الاشتراك في جلب RSS/API.
+- `onIntervalChange(60|300)`: ضبط مؤقت التحديث وجدولة الجلب.
+- `onNewsSelect(ids[])`: حفظ العناصر المختارة للتوليد.
+- `onGenerate(settings, selectedNews)`: استدعاء API للذكاء الاصطناعي + تسجيل وقت الطلب.
+- `onExport(mode)`: تنفيذ نسخ/تنزيل/Webhook + إضافة سجل.
+- `onReview(status, notes)`: تحديث حالة المراجعة وحفظ الملاحظات محليًا/على الخادم.
+
+## 5) توصيات تجربة الاستخدام
+- إبراز دليل المصطلحات في لوحة جانبية أو Tooltip.
+- عرض مصدر كل فقرة مولدة (إدراج روابط أو وسوم).
+- دعم لوحة مفاتيح (اختصارات للنسخ، توليد، تبديل القوالب).
+- تخزين Draft محليًا تلقائيًا لمنع فقدان العمل.
+- إظهار زمن الاستجابة من الـ AI لإدارة التوقعات.
+
+## 6) متطلبات تسليم التصميم
+- ملف Figma أو Webflow يتضمن:
+ - صفحات الشاشات الخمس أعلاه.
+ - مكونات قابلة لإعادة الاستخدام (Design System مصغر).
+ - تفاعلات Click/Hover/Auto-Refresh موثقة.
+- تصدير Prototype Link للمطورين مع ملاحظات (Dev Mode).
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..33d18106
--- /dev/null
+++ b/index.html
@@ -0,0 +1,209 @@
+
+
+
+
+
+
+
+
+
+
+
+ لوحة تحكم صوت القدس · Voice of Quds
+
+
+ العربية · RTL
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 🔧 الإعدادات الأساسية · Core Setup
+
+
+
+
+
+
+
+ نشرة · Bulletin
+ منشور · Post
+ تغريدة · Tweet
+
+
+
+
+
+ كل دقيقة
+ كل 5 دقائق
+
+
+
+
+
+
+
+
+
+
+ 🌐 المصادر · Sources
+ +
+
+ غرفة الأخبار المحلية
+ RSS / Atom
+ API خارجي
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ✏️ التخصيص · Tone & Format
+ + +
+
+
+
+
+
+
+
+
+
+ 🚀 التوليد والنشر · Generate & Publish
+
+
+
+
+
+
+
+ عنوان مبدئي · Headline
+هنا سيظهر النص المولد بناءً على الإعدادات المختارة. This area previews the generated content.
+ + +
+ ⚙️ جاهز للدمج مع واجهات الذكاء الاصطناعي و RSS.
+
+
+
+
+
+
+ هل تعاني من التعب المستمر وقلة النشاط؟
+اكتشف الحل العلمي لاستعادة طاقتك وحيويتك في 30 يومًا فقط
+ احصل على الدليل الآن +
+
+ المشكلة التي نعاني منها
+
+
+
+
+
+ انخفاض الطاقة
+شعور دائم بالتعب والإرهاق حتى بعد النوم الكافي
+
+
+
+ اضطرابات النوم
+صعوبة في النوم أو الاستيقاظ المتكرر خلال الليل
+
+
+
+ ضعف التركيز
+صعوبة في التركيز وإنجاز المهام اليومية
+
+
+
+ الضغط النفسي
+توتر وقلق مستمر يؤثر على جودة الحياة
+
+
+ الحل العملي والمضمون
+
+
+
+
+ دليل شامل مبني على أسس علمية
+منهج متكامل يجمع بين التغذية السليمة، النشاط البدني المناسب، وتقنيات الاسترخاء المثبتة علميًا.
+-
+
- ✓ خطة غذائية متوازنة لمدة 30 يومًا +
- ✓ تمارين بسيطة يمكن ممارستها في المنزل +
- ✓ تقنيات استرخاء وتأمل فعّالة +
- ✓ جداول متابعة يومية وأسبوعية +
- ✓ نصائح عملية قابلة للتطبيق فورًا +
+
+
+
+ 📱 رقمي بالكامل
+احصل على الدليل فورًا بعد الشراء
+
+
+ 📚 سهل التطبيق
+خطوات واضحة ومباشرة للمبتدئين
+
+
+ ⏱️ 30 يوم فقط
+برنامج مكثف ومركّز للنتائج السريعة
+
+
+ ماذا ستحصل عليه؟
+
+
+
+
+ 01
+ دليل التغذية الصحية
+خطة غذائية كاملة مع قوائم طعام يومية ووصفات سهلة التحضير
+
+
+ 02
+ برنامج التمارين المنزلية
+تمارين بسيطة وفعّالة لا تحتاج معدات، مع صور توضيحية
+
+
+ 03
+ دليل النوم الصحي
+استراتيجيات مثبتة لتحسين جودة النوم والاستيقاظ بنشاط
+
+
+ 04
+ تقنيات الاسترخاء
+تمارين تنفس وتأمل لتقليل التوتر والقلق
+
+
+ 05
+ جداول المتابعة
+نماذج قابلة للطباعة لتتبع تقدمك اليومي
+
+
+ 06
+ مكافأة خاصة
+دليل إضافي للعادات الصحية طويلة المدى
+
+
+ استثمر في صحتك اليوم
+
+
+
+ $
+ 27
+ دفعة واحدة فقط
+
+
+ $67
+ خصم 60%
+
+ -
+
- ✓ دليل شامل بصيغة PDF عالية الجودة +
- ✓ وصول فوري ومباشر بعد الدفع +
- ✓ جميع المكونات الستة المذكورة أعلاه +
- ✓ تحديثات مجانية مدى الحياة +
- ✓ دعم فني عبر البريد الإلكتروني +
+
+
+
+ ضمان استرداد كامل لمدة 14 يومًا
+
+ إذا لم تكن راضيًا تمامًا، سنعيد لك أموالك بالكامل دون أي أسئلة
+
+
+ أسئلة شائعة
+
+
+
+
+ كيف أحصل على المنتج بعد الدفع؟
+فورًا بعد إتمام عملية الدفع، ستصلك رسالة بريد إلكتروني تحتوي على رابط التحميل المباشر.
+
+
+ هل المنتج مناسب للمبتدئين؟
+نعم، الدليل مصمم ليكون سهل الفهم والتطبيق حتى لمن ليس لديهم خبرة سابقة.
+
+
+ ما هي صيغة الملف؟
+الدليل بصيغة PDF يمكن فتحه على أي جهاز (كمبيوتر، هاتف، تابلت).
+
+
+ هل يمكنني طباعة الدليل؟
+نعم بالتأكيد، يمكنك طباعة الدليل أو الاحتفاظ به رقميًا حسب تفضيلك.
+
+
+
+
+
+
+
+
+ شكرًا لك! تم استلام طلبك بنجاح 🎉
+نحن سعداء بانضمامك إلينا في رحلة الصحة والعافية
+ + + + + +
+
+
+
+
+
+
+ تنبيه هام
+إذا لم تجد الرسالة في البريد الوارد، تحقق من مجلد الرسائل غير المرغوب فيها (Spam)
+البريد المرسِل: noreply@yourdomain.com
+
+
+
+
+ هل تحتاج مساعدة؟
+إذا لم تستلم الرسالة خلال 30 دقيقة، أو واجهت أي مشكلة:
+ support@yourdomain.com +سنرد عليك خلال 24 ساعة كحد أقصى
+
+
+
+
+
+
+
+
+ نصائح للبدء 💡
+-
+
- اقرأ الدليل بالكامل أولًا للحصول على فكرة شاملة +
- حدد موعدًا للبدء والتزم به +
- استخدم جداول المتابعة المرفقة لتتبع تقدمك +
- كن صبورًا مع نفسك - التغيير يحتاج وقتًا +
- شارك رحلتك مع صديق لمزيد من الدعم +