gallery

# مولّد معرض لقطات الشاشة لمتاجر التطبيقات

**أنشئ معرض لقطات شاشة احترافيًا وجاهزًا للنشر لتطبيق iOS/macOS/Android، بتصميم يبدو من تنفيذ نخبة مطوري التطبيقات.**

## السياق

أنت تبني صفحة معرض لقطات شاشة لتطبيق. يحتوي المشروع على لقطات شاشة داخل مجلد، غالبًا `screenshots/` أو `fastlane/screenshots/` أو ما يشابهها. يجب أن يكون المعرض ملف HTML واحدًا يمكن نشره على Netlify أو Vercel أو أي استضافة ثابتة.

## المتطلبات

### 1. أساس نظام التصميم

أنشئ خصائص CSS مخصصة (design tokens) لـ:

- **الألوان**: لوحة ألوان أساسية بدرجات (50-900)، ولوحة ثانوية/تمييز، ودرجات رمادية محايدة (50-900)
- **الأسطح**: ثلاثة مستويات للأسطح (surface-1, surface-2, surface-3)
- **الخطوط**: حزمة خطين؛ mono لعناصر الواجهة، و sans للنصوص الأساسية
- **المسافات**: مقياس ثابت ومتناسق بأساس 4px
- **الحدود**: مقياس تدوير الزوايا (sm, md, lg, xl, 2xl, 3xl)
- **الظلال**: خمسة مستويات ارتفاع (sm, md, lg, xl, 2xl)
- **الانتقالات**: ثلاث سرعات (fast: 150ms, normal: 300ms, smooth: 400ms مع cubic-bezier)

### 2. بنية التخطيط

- **الحاوية**: أقصى عرض 1600px، تتموضع في المنتصف، مع هوامش داخلية متجاوبة
- **الشبكة**: شبكة متجاوبة بأسلوب Masonry باستخدام `grid-template-columns: repeat(auto-fill, minmax(340px, 1fr))`
- **المسافات بين العناصر**: 2rem على سطح المكتب، و1.5rem على الأجهزة اللوحية، و1rem على الجوال
- **نسبة أبعاد البطاقة**: حافظ على عرض متناسق للقطات الشاشة

### 3. قسم الترويسة

- **شارة التطبيق**: شارة صغيرة بشكل كبسولة مع أيقونة ونص "IOS APPLICATION" أو نص المنصة
- **العنوان**: اسم التطبيق بحجم كبير ووزن عريض مع معالجة نصية بتدرج لوني
- **العنوان الفرعي**: وصف من سطر واحد يذكر أهم التقنيات والميزات
- **الخلفية**: طبقة نمط شبكي خفيفة تضيف عمقًا بدون مبالغة
- **الهوامش الداخلية**: قلّل المسافات العمودية لإحساس أكثر اختصارًا (3rem من الأعلى، 2rem من الأسفل)

### 4. بطاقات لقطات الشاشة

يجب أن تحتوي كل بطاقة على:

- **الحاوية**: خلفية بيضاء/قريبة من الأبيض، زوايا مستديرة (2xl)، وظل خفيف
- **حاوية الصورة**: خلفية بتدرج لوني، مع لقطة شاشة في المنتصف وإطار أبيض (8px)
- **تأثيرات المرور بالماوس**:
  - ترتفع البطاقة للأعلى (-8px translateY) مع ظل أوضح
  - تكبر لقطة الشاشة (1.04) مع دوران بسيط (0.5deg)
  - يظهر حد علوي على شكل شريط بتدرج لوني
  - تظهر طبقة توهج شعاعي تدريجيًا
- **شريط البيانات**:
  - شارة رقم بخلفية متدرجة، مربعة 26px
  - اسم الجهاز بحروف كبيرة، وخط صغير، وبخط mono
- **العنوان**: عريض، بخط mono، مقاس 1rem
- **الوصف**: تعليق من سطر واحد، بخط أصغر ولون هادئ

### 5. ترتيب رحلة المستخدم

رتّب لقطات الشاشة حسب طريقة تجربة المستخدم للتطبيق:

1. **تسجيل الدخول/التهيئة الأولى** - أول شاشة يراها المستخدم
2. **لوحة التحكم/الرئيسية** - الصفحة الأساسية بعد تسجيل الدخول
3. **واجهات الميزة الأساسية** - وظائف التطبيق الرئيسية
4. **الإعدادات/التهيئة** - شاشات التخصيص
5. **الصلاحيات/التكاملات** - HealthKit، والإشعارات، وغيرها
6. **الميزات المتقدمة** - المزامنة، والمشاركة، والمزايا السحابية
7. **التحليلات/التقارير** - شاشات عرض البيانات والرسوم
8. **الأرشيف/السجل** - واجهات البيانات التاريخية

### 6. الحركات

- **الدخول**: ظهور تدريجي متتابع مع translateY، بفاصل 0.1s بين البطاقات
- **المرور بالماوس**: حركة ناعمة باستخدام cubic-bezier بالقيم (0.16, 1, 0.3, 1)
- **التمرير**: استخدم IntersectionObserver لتفعيل الحركات عند دخول البطاقات في مجال الرؤية
- **الأداء**: استخدم `will-change` مع transform و opacity

### 7. التذييل

- **الخلفية**: داكنة (neutral-900) مع طبقة تدرج خفيفة
- **تدوير الزوايا**: الزوايا العلوية فقط (2xl)
- **المحتوى**: بيانات مختصرة مثل الجهاز، والتاريخ، والحالة مع أيقونات
- **المسافات**: مضغوطة، بهوامش داخلية 2rem

### 8. نقاط التوقف المتجاوبة

- **سطح المكتب** (>1280px): من 4 إلى 5 أعمدة
- **الأجهزة اللوحية** (768-1280px): من 2 إلى 3 أعمدة
- **الجوال** (<768px): عمود واحد، مع تقليل الهوامش الداخلية في كامل الصفحة

### 9. المتطلبات التقنية

- **ملف HTML واحد**: كل CSS داخل وسم `<style>`
- **الاعتماديات الخارجية فقط**:
  - Pico.css، إطار CSS خفيف
  - Font Awesome للأيقونات
  - Google Fonts، خطا Inter + IBM Plex Mono
  - Animate.css اختياري لإضافة حركات إضافية
- **بدون خطوة بناء**: يجب أن يعمل كملف HTML ثابت
- **الأداء**: حركات محسّنة، بدون إزاحة مفاجئة في التخطيط
- **إمكانية الوصول**: HTML دلالي، ونصوص alt للصور

### 10. تفاصيل الصقل النهائي

- **تدرجات خفيفة**: خلفيات شعاعية تضيف عمقًا بدون إزعاج
- **معالجة الحدود**: حد 1px solid مع شفافية alpha
- **طبقات الظلال**: استخدم أكثر من قيمة ظل لعمق بصري أفضل
- **الخطوط**: قلّل تباعد الحروف في العناوين (-0.03em)
- **ثبات الألوان**: استخدم design tokens في كل مكان، بدون قيم مشفّرة مباشرة hardcoded
- **عرض الصور**: إطار أبيض حول لقطات الشاشة لإيحاء إطار الجهاز

## صيغة الإخراج

أنشئ ملف `index.html` واحدًا يحتوي على:

1. بنية HTML كاملة
2. CSS داخلي مع design tokens
3. JavaScript لحركات التمرير باستخدام IntersectionObserver
4. جميع بطاقات لقطات الشاشة مع بياناتها الصحيحة
5. تصميم متجاوب مع كل أحجام الشاشات

## مثال على بنية بطاقة لقطة الشاشة

```html
<div class="screenshot-card">
    <div class="screenshot-img-container">
        <img src="screenshot-name.png" alt="وصف الشاشة" class="screenshot-img">
    </div>
    <div class="screenshot-info">
        <div class="screenshot-meta">
            <div class="screenshot-number">1</div>
            <div class="screenshot-device">iPhone 17 Pro Max</div>
        </div>
        <h3 class="screenshot-title">عنوان الشاشة</h3>
        <p class="screenshot-desc">تعليق مختصر من سطر واحد</p>
    </div>
</div>
```

## الفروقات المهمة عن المعارض ذات طابع الذكاء الاصطناعي

❌ **تجنّب**:
- المبالغة في التدرجات والألوان
- بطاقات إحصاءات كبيرة تستهلك مساحة بدون داعٍ
- أوصاف طويلة وقوائم ميزات كثيرة
- فواصل أقسام وعناوين تصنيف غير ضرورية
- حركات كثيرة ومشتتة
- مسافات غير متناسقة
- أسلوب صور عام يشبه الصور الجاهزة

✅ **حاكِ أسلوب**:
- صفحات المنتجات في Apple App Store
- مواقع Linear و Raycast و Superhuman التسويقية
- تصميم بسيط يضع المحتوى أولًا
- تفاعلات خفيفة ومصقولة
- إيقاع بصري متناسق
- تسلسل هرمي مبني على الخطوط
- استخدام المساحات البيضاء كجزء من التصميم

## ملاحظات النشر

- يجب نشر المعرض داخل `project-root/screenshots-gallery/` أو مسار مشابه
- أضف مجلد `.netlify` مع ملف `netlify.toml` للإعدادات
- يجب أن تكون كل لقطات الشاشة في نفس مجلد `index.html`
- لا توجد حاجة لأي عملية بناء؛ HTML ثابت بالكامل

---

**طريقة الاستخدام**: انسخ هذا البرومبت وقدّمه لمساعد ذكاء اصطناعي مع:
1. قائمة ملفات لقطات الشاشة في مشروعك
2. اسم التطبيق ووصف من سطر واحد
3. المنصة (iOS, macOS, Android, web)
4. أهم التقنيات المستخدمة (SwiftUI, React Native, Flutter، وغيرها)

سيولّد المساعد معرضًا جاهزًا للنشر بتصميم احترافي.