System Requirements Document for spring-jungle

1. Introduction

spring-jungle هو تطبيق ويب عربي أولاً يتيح لصاحب الصور تقديم صوره ضمن معرض سينمائي احترافي يعتمد على الحركة الحية داخل الويب والخلفيات المتحركة. يركز المنتج على إحساس العرض الخاص المتقن: صور ثابتة معروضة بإطارات دقيقة، وحركة ميكانيكية هادئة، وبيئة بصرية داكنة تشبه أداة عرض فاخرة.

الجمهور الحالي للمنتج هو صاحب الصور الذي يريد إعداد معرضه وحفظه واستعراضه، والزائر المشاهد الذي يتصفح المعرض السينمائي بعد الوصول إليه.

المنتج لا ينشئ ملف فيديو، ولا يحوّل الصور إلى فيديو، ولا يصدّر أو يرندر محتوى فيديو. معنى “سينمائي” في هذا المنتج هو العرض الحي داخل صفحة الويب أو التطبيق عبر تأثيرات الحركة والخلفيات المتحركة.

2. System Overview

يوفر spring-jungle واجهة ويب مخصصة تعرض صور المستخدمين في معرض ذي طابع سينمائي حي. يملك صاحب الصور معرضاً محفوظاً بشكل دائم، يضيف إليه الصور ويختار أسلوب العرض السينمائي، ثم يستعرض النتيجة. يستطيع الزائر المشاهد تصفح المعرض السينمائي ضمن وجهة العرض المتاحة له بعد تسجيل الدخول وفق عقد الوصول المعتمد.

يشمل التسليم الحالي:

• صفحة دخول عامة تعرف بالمعرض السينمائي وتوجه صاحب الصور إلى إدارة معرضه والزائر إلى التصفح.
• التسجيل الذاتي والتحقق من المستخدم العائد لصاحب الصور.
• إدارة محفوظة للصور وإعدادات العرض السينمائي.
• معرض صور سينمائي يحتوي على تأثيرات حركة وخلفيات متحركة.
• حفظ دائم للصور وإعدادات العرض المرتبطة بصاحب الصور.
• واجهة React مخصصة.
• واجهات API وتطبيق منطق المجال ضمن عملية FastAPI مشتركة.
• قاعدة بيانات MariaDB لتخزين البيانات الدائمة التي تملكها المنصة.

Removed from scope

• إنشاء أو تصدير ملفات فيديو (also: render video files)
• تحريك الصور إلى ملف فيديو
• أي ادعاء بأن المنتج ينتج فيديوهات

2a. Product Interpretation and Delivery Boundary

يُسلّم spring-jungle كتطبيق ويب مخصص بواجهة يملكها التطبيق. تُدار هوية صاحب الصور داخل التطبيق لأن الصور وإعدادات المعرض تحتاج إلى ارتباط دائم بصاحبها وإمكانية العودة إليها لاحقاً.

تسجيل الدخول والتسجيل الذاتي جزءان من رحلة الوصول إلى إدارة المعرض. لا يضيف ذلك قدرات لإدارة حسابات متقدمة أو صلاحيات تفاضلية أو أدوار إدارية، لأن هذه القدرات غير مطلوبة حالياً.

يظل العرض السينمائي عرضاً مباشراً داخل الويب. تتضمن التجربة صوراً ثابتة، وإضاءة انتقالية، وحركة عرض، وخلفيات متحركة ضمن الواجهة، لكن لا تتضمن إنتاج أصل فيديو أو تنزيل فيديو أو معالجة فيديو.

2b. Page Content and Component Coverage

Landing

• المعلومات والحالة
  • مدخل عام متاح دون تسجيل دخول.
  • تعريف واضح بأن المنتج معرض سينمائي لعرض الصور بتأثيرات حركة وخلفيات متحركة.
  • إبراز أن التجربة تعمل كعرض ويب حي للصور وليس كإنشاء ملف فيديو.
• الإجراءات الأساسية
  • توجيه صاحب الصور إلى صفحة Sign Up لبدء الاستخدام الذاتي.
  • توجيه صاحب الصور العائد إلى صفحة Login.
  • توجيه الزائر المشاهد إلى مسار تصفح المعرض وفق رحلة الوصول المعتمدة.
• الإجراءات الداعمة
  • عرض معاينة بصرية لصور ثابتة ضمن إطار سينمائي حي.
  • عرض مؤشرات وصفية مثل عدد الصور والمشاهد ومدة الحركة بالثواني، عندما تكون هذه البيانات متاحة للمعرض المعروض.
• الكيانات
  • معرض سينمائي.
  • صورة.
  • إعداد عرض سينمائي.
• مسؤوليات المكونات
  • عنوان عربي كبير يعرّف تجربة العرض.
  • شريط إجراء أساسي بلون كهرماني للانتقال إلى التسجيل أو الدخول.
  • إطار صورة رئيسي مع قرص عداد دائري يعرض عدد الصور.
  • صف بيانات وصفي أسفل الصورة.
  • سكة أجهزة ثابتة تتضمن علامات وأرقام الأقسام 01–05.
• الحالات
  • حالة تحميل عند جلب معاينة المعرض أو بياناته.
  • حالة نجاح عند ظهور المعاينة والإجراءات.
  • حالة خطأ عند تعذر تحميل معاينة الصور، مع إبقاء إجراءات التسجيل أو الدخول متاحة.
  • حالة حركة مخفضة توقف دوران الصورة البطيء وتعرض العدادات بقيمها النهائية.

Login

• المعلومات والحالة
  • صفحة وصول عامة دون تسجيل دخول.
  • مخصصة لصاحب الصور العائد.
  • تتيح التحقق لاستعادة الوصول إلى صوره وإعداداته المحفوظة.
• الإجراءات الأساسية
  • إدخال بيانات التحقق.
  • إرسال طلب تسجيل الدخول.
  • الانتقال إلى إدارة المعرض بعد نجاح التحقق.
• الإجراءات الداعمة
  • الانتقال إلى Sign Up عندما لا يكون لدى صاحب الصور حساب قائم.
• الكيانات
  • هوية صاحب الصور.
  • جلسة وصول.
• مسؤوليات المكونات
  • نموذج تحقق واضح باللغة العربية.
  • رسائل نجاح وفشل قابلة للقراءة.
  • رابط أو إجراء انتقال إلى التسجيل الذاتي.
• الحالات
  • حالة انتظار أثناء إرسال بيانات الدخول.
  • حالة نجاح تنشئ جلسة وصول وتتابع إلى إدارة المعرض.
  • حالة خطأ عند فشل التحقق، مع إبقاء المدخلات قابلة للتعديل وإعادة المحاولة.
  • حالة استعادة عند عودة المستخدم إلى الصفحة دون جلسة فعالة.

Sign Up

• المعلومات والحالة
  • صفحة وصول عامة دون تسجيل دخول.
  • مخصصة لصاحب الصور الذي يبدأ استخدام المنتج ذاتياً دون دعوة أو توفير مسبق.
• الإجراءات الأساسية
  • إدخال بيانات التسجيل الذاتي.
  • إنشاء هوية صاحب الصور.
  • متابعة المستخدم إلى إدارة المعرض بعد نجاح التسجيل.
• الإجراءات الداعمة
  • الانتقال إلى Login لصاحب الصور الذي يملك هوية مسبقة.
• الكيانات
  • هوية صاحب الصور.
  • جلسة وصول.
• مسؤوليات المكونات
  • نموذج تسجيل ذاتي.
  • رسائل تحقق من المدخلات.
  • تأكيد واضح عند إنشاء الهوية بنجاح.
• الحالات
  • حالة انتظار أثناء إنشاء الهوية.
  • حالة نجاح تنشئ جلسة وتتيح متابعة إعداد المعرض.
  • حالة خطأ عند تعذر إكمال التسجيل، مع حفظ المدخلات التي يمكن الاحتفاظ بها بأمان وإتاحة إعادة المحاولة.
  • حالة انتقال إلى تسجيل الدخول للحسابات القائمة.

إدارة المعرض

• المعلومات والحالة
  • صفحة محمية تتطلب تسجيل الدخول.
  • مساحة عمل متكررة لصاحب الصور.
  • تعرض الصور المحفوظة وإعدادات العرض السينمائي الخاصة بصاحب الصور.
  • تعرض حالة المعرض الحالية ونتيجة الإعداد القابلة للمعاينة.
• الإجراءات الأساسية
  • إضافة صور إلى المعرض.
  • اختيار طريقة العرض السينمائي.
  • اختيار إعدادات تأثيرات الحركة.
  • اختيار إعدادات الخلفيات المتحركة.
  • حفظ الصور وإعدادات العرض.
  • استعراض النتيجة في المعرض السينمائي.
• الإجراءات الداعمة
  • تعديل الاختيار قبل الحفظ.
  • إعادة المحاولة عند تعذر حفظ الصور أو الإعدادات.
• الكيانات
  • صاحب الصور.
  • معرض.
  • صورة.
  • إعداد حركة الصورة.
  • إعداد الخلفية المتحركة.
  • إعداد وتيرة العرض السينمائي.
• مسؤوليات المكونات
  • منطقة إضافة الصور وإظهار حالتها.
  • قائمة أو مساحة منظمة للصور المضافة.
  • محدد وتيرة العرض كقرص ميكانيكي بثلاث وضعيات: Still وSweep وTurntable.
  • عناصر تحكم لإعداد تأثيرات الحركة والخلفيات المتحركة.
  • إجراء حفظ واضح.

• إجراء للانتقال إلى معاينة المعرض السينمائي.
• الحالات
  • حالة تحميل عند استرجاع الصور والإعدادات المحفوظة.
  • حالة فارغة عندما لا يحتوي المعرض على صور بعد.
  • حالة نجاح عند حفظ التغييرات.
  • حالة خطأ عند تعذر إضافة صورة أو حفظ الإعدادات، مع توضيح الخطأ وإتاحة إعادة المحاولة.
  • حالة استعادة تعرض آخر بيانات محفوظة عند إعادة فتح الصفحة بعد تسجيل الدخول.

المعرض السينمائي

• المعلومات والحالة
  • صفحة محمية تتطلب تسجيل الدخول.
  • وجهة العرض السينمائي لصاحب الصور والزائر المشاهد.
  • تعرض الصور ضمن معرض حي يحتوي على تأثيرات حركة وخلفيات متحركة.
  • تعرض بيانات وصفية مرتبطة بالصور، مثل التاريخ وعدد المشاهد وإحصاءات مرئية بأسلوب إعدادات التعريض عندما تكون متاحة.
• الإجراءات الأساسية
  • تصفح الصور داخل المعرض.
  • مشاهدة الصور مع تأثيرات الحركة.
  • مشاهدة الخلفيات المتحركة المرتبطة بالعرض.
• الإجراءات الداعمة
  • عودة صاحب الصور إلى إدارة المعرض لتعديل الصور أو إعدادات العرض.
  • استمرار الزائر في تصفح الصور المتاحة ضمن المعرض.
• الكيانات
  • معرض سينمائي.
  • صورة.
  • تأثير حركة.
  • خلفية متحركة.
  • بيانات وصفية للصورة.
• مسؤوليات المكونات
  • إطار محكوم بخطوط دقيقة لكل صورة.
  • عداد دائري كهرماني فوق الصور مع إبرة وقيمة رقمية.
  • صف بيانات أسفل كل صورة.
  • سكة تنقل ثابتة بأرقام أقسام وعلامات تدريج.
  • انتقالات إضاءة وحركة صورة تتوافق مع وتيرة العرض المحددة.
• الحالات
  • حالة تحميل عند جلب الصور وإعدادات العرض.
  • حالة فارغة عند عدم وجود صور متاحة في المعرض.

• حالة نجاح عند عرض الصور وإعدادات الحركة والخلفية.
• حالة خطأ عند تعذر تحميل المعرض، مع إتاحة إعادة المحاولة.
• حالة حركة مخفضة تجعل الصور مضاءة بالكامل، توقف الانجراف البطيء، وتثبت العدادات على قيمها النهائية.

3. Functional Requirements

FR-01 — عرض الصور بشكل سينمائي

As a صاحب الصور / العارض, I should عرض صوري ضمن صفحة ويب أو تطبيق ذي مظهر سينمائي احترافي، so that أرى صوري معروضة بصورة جذابة ومصقولة.

• Provenance: explicit
• الممثل: صاحب الصور / العارض.
• المشغّل أو الإدخال: وجود صور محفوظة ضمن معرض صاحب الصور.
• النتيجة القابلة للملاحظة: تظهر الصور ضمن المعرض السينمائي بإطارات وعرض بصري سينمائي حي.
• الوصول: يتطلب تسجيل الدخول إلى المعرض السينمائي.
• الفشل والاستعادة: عند تعذر تحميل الصور، يجب إظهار حالة خطأ وإتاحة إعادة المحاولة.
• الاستمرار: يستطيع صاحب الصور العودة إلى إدارة المعرض لتعديل الصور أو إعدادات العرض.

FR-02 — معرض الصور

As a صاحب الصور / العارض, I should إضافة صوري إلى معرضي وإدارتها، so that يصبح لدي محتوى محفوظ يمكن عرضه سينمائياً.

• Provenance: explicit للمعرض؛ required_inference للحفظ الدائم وإدارة الإضافة اللازمة.
• الممثل: صاحب الصور / العارض.
• المشغّل أو الإدخال: يفتح إدارة المعرض بعد تسجيل الدخول ويضيف صوراً.
• النتيجة القابلة للملاحظة: تظهر الصور المضافة ضمن مساحة إدارة المعرض وتصبح متاحة للعرض في المعرض السينمائي.
• الوصول: يتطلب تسجيل الدخول.
• الفشل والاستعادة: عند فشل إضافة صورة أو حفظها، يجب إبلاغ المستخدم بالفشل وإتاحة إعادة المحاولة دون الادعاء بأن الصورة حُفظت.
• الاستمرار: يحفظ صاحب الصور اختياراته أو يفتح المعرض السينمائي لمراجعة النتيجة.

FR-03 — تأثيرات الحركة على الصور

As a صاحب الصور / العارض, I should اختيار طريقة العرض السينمائي وتأثيرات حركة الصور، so that يطابق المعرض الإحساس السينمائي المطلوب.

• Provenance: explicit
• الممثل: صاحب الصور / العارض.
• المشغّل أو الإدخال: يحدد إعدادات الحركة في إدارة المعرض.
• النتيجة القابلة للملاحظة: ينعكس الإعداد المختار عند استعراض الصور في المعرض السينمائي.
• الوصول: يتطلب تسجيل الدخول.
• الفشل والاستعادة: عند فشل حفظ الإعداد، تبقى حالة الخطأ واضحة ويمكن لصاحب الصور إعادة المحاولة أو تعديل الاختيار.
• الاستمرار: يستعرض صاحب الصور النتيجة في المعرض السينمائي.
• تفصيل واجهة مطلوب: يقدم اختيار وتيرة الحركة بثلاث وضعيات مادية: Still وSweep وTurntable.

FR-04 — خلفيات متحركة

As a صاحب الصور / العارض, I should اختيار خلفيات متحركة لعرض صوري، so that تكتمل تجربة المعرض السينمائي الحية.

• Provenance: explicit
• الممثل: صاحب الصور / العارض.
• المشغّل أو الإدخال: يختار إعداد الخلفية المتحركة من إدارة المعرض.
• النتيجة القابلة للملاحظة: تظهر الخلفية المتحركة ضمن عرض الصور في المعرض السينمائي.
• الوصول: يتطلب تسجيل الدخول.
• الفشل والاستعادة: عند تعذر حفظ إعداد الخلفية، يجب عرض خطأ وإتاحة إعادة المحاولة.
• الاستمرار: يراجع صاحب الصور العرض الناتج في المعرض السينمائي.

FR-05 — التسجيل الذاتي لصاحب الصور

As a صاحب الصور / العارض, I should التسجيل ذاتياً قبل إدارة معرضي، so that ترتبط صوري وإعدادات العرض المحفوظة بهويتي.

• Provenance: required_inference
• الممثل: صاحب الصور / العارض.
• المشغّل أو الإدخال: يختار بدء الاستخدام من Landing ويدخل بيانات التسجيل في Sign Up.
• النتيجة القابلة للملاحظة: تُنشأ هوية لصاحب الصور وتُتاح له جلسة وصول إلى إدارة المعرض.
• الوصول: Sign Up متاح دون تسجيل دخول.
• الفشل والاستعادة: عند عدم اكتمال التسجيل، تعرض الصفحة الخطأ وتتيح تصحيح المدخلات أو إعادة الإرسال.
• الاستمرار: ينتقل صاحب الصور إلى إدارة معرضه بعد نجاح التسجيل.

FR-06 — تحقق صاحب الصور العائد

As a صاحب الصور / العارض, I should التحقق عند العودة، so that أصل إلى صوري وإعدادات العرض المحفوظة.

• Provenance: required_inference
• الممثل: صاحب الصور / العارض.
• المشغّل أو الإدخال: يدخل بيانات التحقق في Login.
• النتيجة القابلة للملاحظة: تبدأ جلسة وصول ويستعاد الوصول إلى الصور والإعدادات المرتبطة بصاحب الصور.
• الوصول: Login متاح دون تسجيل دخول.
• الفشل والاستعادة: عند فشل التحقق، تعرض الصفحة رسالة خطأ وتتيح إعادة المحاولة أو الانتقال إلى التسجيل الذاتي عند الحاجة.
• الاستمرار: ينتقل المستخدم إلى إدارة المعرض.

FR-07 — تصفح الزائر للمعرض السينمائي

As a الزائر المشاهد, I should تصفح الصور في المعرض السينمائي مع تأثيرات الحركة والخلفيات المتحركة، so that أستمتع بعرض سينمائي سلس دون الحاجة إلى إنشاء فيديو.

• Provenance: required_inference المبني على متطلب عرض الصور والزائر المشاهد.
• الممثل: الزائر المشاهد.
• المشغّل أو الإدخال: يصل إلى المعرض السينمائي بعد تسجيل الدخول وفق عقد الوصول.
• النتيجة القابلة للملاحظة: يتصفح الصور المتاحة ضمن عرض سينمائي حي.
• الوصول: يتطلب تسجيل الدخول.
• الفشل والاستعادة: عند تعذر تحميل المعرض، تظهر حالة خطأ مع إجراء لإعادة المحاولة.
• الاستمرار: يستمر الزائر في تصفح الصور المتاحة.
• قيد: لا ينشئ الزائر ولا المنتج ملف فيديو.

FR-08 — الحفظ الدائم للصور وإعدادات العرض

As a صاحب الصور / العارض, I should أن تبقى صوري وإعدادات العرض السينمائي محفوظة عند عودتي، so that أتمكن من استئناف إدارة معرضي واستعراضه.

• Provenance: required_inference
• الممثل: صاحب الصور / العارض.
• المشغّل أو الإدخال: يحفظ الصور أو إعدادات العرض من إدارة المعرض.
• النتيجة القابلة للملاحظة: تستعاد البيانات المحفوظة عند تسجيل الدخول لاحقاً والعودة إلى إدارة المعرض.
• الوصول: يتطلب تسجيل الدخول.
• الفشل والاستعادة: لا يجوز عرض الحفظ كمكتمل عند فشل التخزين؛ يجب عرض خطأ وإتاحة إعادة المحاولة.
• الاستمرار: يمكن لصاحب الصور متابعة التعديل أو فتح المعرض السينمائي.

FR-09 — منع إنشاء الفيديو

As a صاحب الصور / العارض, I should مشاهدة تجربة سينمائية داخل الويب دون أن ينشئ التطبيق ملف فيديو، so that يظل نطاق المنتج عرض الصور الحي فقط.

• Provenance: explicit
• الممثل: صاحب الصور / العارض، الزائر المشاهد.
• المشغّل أو الإدخال: استخدام أي جزء من تجربة العرض السينمائي.
• النتيجة القابلة للملاحظة: تعمل الحركة والخلفيات داخل واجهة الويب فقط.
• الوصول: ينطبق على جميع تجارب العرض.
• الفشل والاستعادة: لا تظهر أي واجهة أو حالة نجاح توحي بتوليد فيديو أو تصديره.
• الاستمرار: يظل المستخدم ضمن تجربة المعرض الحي.

4. User Personas

صاحب الصور / العارض

صاحب الصور هو المستخدم الذي يريد تقديم صوره بأسلوب سينمائي احترافي على صفحة ويب أو تطبيق. تختلف مهمته عن مهمة الزائر لأنه ينشئ محتوى المعرض ويضبطه ويحفظه، ثم يعود لاحقاً لاستئناف العمل على صوره وإعدادات عرضه.

• سياق المنتج: يحتاج إلى مساحة محفوظة لصور المعرض وإعداداته السينمائية.
• الهدف الأساسي: رؤية صوره معروضة بمظهر سينمائي جذاب.
• المسؤوليات المقبولة: التسجيل الذاتي، التحقق عند العودة، إضافة الصور، اختيار طريقة العرض السينمائي، اختيار تأثيرات الحركة والخلفيات المتحركة، حفظ الإعدادات، واستعراض النتيجة.
• المدخلات والقرارات: الصور التي يريد عرضها، واختيار وتيرة الحركة بين Still وSweep وTurntable، وإعدادات الخلفية المتحركة.
• التفاعل مع المشاركين الآخرين: ينشئ المعرض الذي يتصفحه الزائر المشاهد؛ لا توجد صلاحيات أو أدوار إضافية محددة.
• النجاح القابل للملاحظة: يستطيع العودة إلى معرضه المحفوظ ورؤية صوره معروضة ضمن تجربة سينمائية حية.

الزائر المشاهد

الزائر المشاهد هو الشخص الذي يفتح المعرض السينمائي لتصفح الصور والاستمتاع بطريقة عرضها. لا تتمثل مهمته في إنشاء المحتوى أو إدارة إعداداته أو إنتاج فيديو.

• سياق المنتج: يصل إلى المعرض السينمائي بوصفه متصفحاً للصور.
• الهدف الأساسي: تصفح الصور بسلاسة والاستمتاع بعرض سينمائي.
• المسؤوليات المقبولة: فتح المعرض السينمائي وتصفح الصور المعروضة مع تأثيرات الحركة والخلفيات المتحركة.
• المدخلات والقرارات: اختيار استمرار التصفح ضمن الصور المتاحة.
• التفاعل مع المشاركين الآخرين: يشاهد نتيجة الصور والإعدادات التي أعدها صاحب الصور.
• النجاح القابل للملاحظة: تظهر له الصور ضمن تجربة حية واضحة دون أن يحتاج إلى إنشاء فيديو.

5. Core User Flows

5.1 تسجيل صاحب الصور وبدء إدارة المعرض

1. يفتح صاحب الصور صفحة Landing دون تسجيل دخول.
2. يرى تعريفاً بالمعرض السينمائي الحي للصور، مع توضيح أن المنتج لا ينشئ ملفات فيديو.
3. يختار إجراء بدء الاستخدام.
4. ينتقل إلى صفحة Sign Up.
5. يدخل بيانات التسجيل الذاتي ويرسلها.
6. ينشئ التطبيق هوية صاحب الصور وجلسة وصول عند نجاح التسجيل.
7. ينتقل صاحب الصور إلى إدارة المعرض.
8. إذا تعذر التسجيل، تعرض Sign Up رسالة خطأ وتتيح تصحيح المدخلات وإعادة المحاولة.
9. بعد الوصول إلى إدارة المعرض، يستطيع صاحب الصور إضافة الصور واختيار إعدادات العرض.

5.2 عودة صاحب الصور إلى معرضه المحفوظ

1. يفتح صاحب الصور صفحة Landing أو يصل مباشرة إلى صفحة Login.
2. يختار تسجيل الدخول.
3. يدخل بيانات التحقق في Login.
4. يتحقق التطبيق من بياناته.
5. عند النجاح، ينشئ التطبيق جلسة وصول ويعيد إتاحة صوره وإعداداته المحفوظة.
6. ينتقل صاحب الصور إلى إدارة المعرض.
7. إذا فشل التحقق، تعرض الصفحة خطأ واضحاً وتتيح إعادة المحاولة.
8. إذا لم يكن لدى المستخدم حساب قائم، يمكنه متابعة التسجيل الذاتي عبر Sign Up.

5.3 إضافة الصور وضبط العرض السينمائي

1. يدخل صاحب الصور إلى إدارة المعرض بعد تسجيل الدخول.
2. يسترجع التطبيق الصور والإعدادات المحفوظة، أو يعرض حالة فارغة إذا لم توجد صور.
3. يضيف صاحب الصور صورة أو أكثر إلى معرضه.
4. تظهر الصور المضافة ضمن مساحة إدارة المعرض.
5. يختار صاحب الصور طريقة العرض السينمائي.
6. يختار وتيرة الحركة من القرص ذي الوضعيات Still أو Sweep أو Turntable.
7. يختار إعدادات تأثيرات الحركة والخلفيات المتحركة.
8. يحفظ إعدادات المعرض.
9. عند نجاح الحفظ، يعرض التطبيق تأكيداً بأن الصور والإعدادات أصبحت محفوظة.
10. عند فشل الإضافة أو الحفظ، يعرض التطبيق الخطأ ويتيح إعادة المحاولة دون اعتبار التغييرات محفوظة.
11. يختار صاحب الصور استعراض النتيجة في المعرض السينمائي.

5.4 استعراض صاحب الصور للمعرض السينمائي

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

5.5 تصفح الزائر المشاهد للمعرض

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

6. Visuals Colors and Theme

Muse: MARQ by Garmin
Headline: Precision instrument for pictures — titanium dark, amber needles, cinematic stills

الألوان

لا يُستخدم الأزرق أو النيلي في أي جزء من الواجهة.

الخطوط والطباعة

• عناوين لاتينية: Saira Condensed بوزن 600 أو 700.
• عناوين عربية: IBM Plex Sans Arabic بوزن 700 عند الحاجة إلى دعم RTL.
• النص الأساسي: IBM Plex Sans Arabic.
• التسميات الدقيقة والأرقام: Saira Condensed بوزن 500، مع أرقام tabular.
• ممنوع استخدام: Inter أو Roboto أو Arial أو Helvetica أو خطوط النظام العامة.

مقياس الطباعة:

• Display: clamp(40px, 8vw, 104px)
• H1: clamp(32px, 5.5vw, 64px)
• H2: 36px
• H3: 24px
• Body: 17px
• Label: 12px

يكون ارتفاع السطر للعناوين الكبيرة 0.95، وللنصوص 1.6. تستخدم التسميات الدقيقة تباعد أحرف 0.18em بأسلوب نقش أداة قياس.

اللغة الهندسية والأسطح

• دوائر كاملة للعدادات والأقراص.
• زوايا حادة مع شطفة واحدة صغيرة 2px في أحد أركان اللوحات.
• أزرار مستطيلة بحافة نصف قطرها 6px وخط داخلي كهرماني 1px.
• قواعد شعرية تفصل صفوف البيانات.
• لا توجد بطاقات زجاجية أو ضبابية أو blobs أو تدرجات لونية.
• لا تستخدم أزرار بشكل حبوب pills.
• لا تستخدم شبكة بطاقات متطابقة ذات زوايا 24px.

التخطيط

• على سطح المكتب، تستخدم الواجهة عمودين:
  • سكة يسرى ثابتة بعرض 72px تحتوي على علامات تدريج وأرقام أقسام 01–05.
  • مساحة رئيسية تعمل كوجه ساعة أو أداة قياس.
• على الهاتف المحمول، تتحول السكة إلى شريط تدريج سفلي.
• المسافات الرأسية الأساسية: 96px.
• الهوامش الداخلية: 24px عند عرض 375px و64px عند عرض 1280px.
• يمكن للصورة البطولية أن تمتد خارج الحافة اليمنى للشاشة، لكن العنوان والنصوص وعناصر التحكم يجب أن تبقى كاملة داخل حدود العرض.

الصور

• تستخدم صور المستخدم نفسه كمادة بصرية رئيسية.
• تعرض الصور كصور ثابتة macro-cropped ضمن إطارات دقيقة وحواف داكنة.
• تستخدم خطوط طبوغرافية خافتة، وعلامات أقراص محفورة، وملمس تيتانيوم مصقول كرسوم داعمة.
• لا تستخدم صوراً مخزنة لأشخاص أو كاميرات.
• لا تستخدم رسوماً توضيحية للكاميرات.

7. Signature Design Concept

لوحة عرض الصور كوجه جهاز سينمائي

تبدأ صفحة Landing بمسرح داكن كامل العرض. يحتل المستخدم أو مثال المعرض البصري الثلثين الأيمنين داخل إطار معدني محكوم، مع امتداد الصورة خارج الحافة اليمنى دون تغطية أي نص قابل للقراءة. يوضع فوق الزاوية السفلية اليسرى للصورة قرص دائري كهرماني يحتوي على إبرة وقيمة عدد الصور.

يظهر في الثلث الأيسر عنوان عربي كبير متراص بأسلوب نقش أجهزة القياس، يليه شريط CTA كهرماني واحد. تحت الشريط صف بيانات شعري يعرض ثلاثة مؤشرات رقمية: الصور، المشاهد، وثواني الحركة.

تتحول الصور في المعرض السينمائي إلى “وجوه أجهزة”: كل صورة داخل إطار شعري، وتحتها صف بيانات وصفية، وفوقها عداد دائري صغير. تعيد الفكرة تركيب عناصر مقبولة فقط: الصور، عدد الصور، بيانات العرض، الحركة الحية، والخلفيات المتحركة، دون إنشاء صفحة أو قدرة جديدة.

8. Interaction Model & Motion Direction

Interaction Model: Animated
Motion Tempo: cinematic
Hero Dimensionality: dimensional_css

Landing Hero Motion Brief

• الموضوع البؤري: صورة المستخدم الرئيسية داخل إطار معدني داكن، مع عداد دائري كهرماني في الزاوية السفلية اليسرى.
• الأطروحة: صورة ثابتة + إعداد عرض محفوظ → حركة عرض ويب دقيقة ومتحكم بها → معرض سينمائي حي دون إنتاج ملف فيديو.
• الإطار الأول: خلفية غرافيت داكنة مع خطوط طبوغرافية خافتة بنسبة شفافية منخفضة، سكة أجهزة يسرى، عنوان عربي متراص في الثلث الأيسر، وصورة كبيرة في الثلثين الأيمنين داخل إطار دقيق.
• التحول:
  • ترسم الخطوط الشعرية من اليسار إلى اليمين خلال 400ms.
  • تتحرك إبرة العداد بحركة بطيئة دقيقة وتصل إلى القيمة خلال 0.9 ثانية باستخدام ease-out دون ارتداد.
  • تعد الأرقام صعوداً بأسلوب عداد أجهزة.
  • تزداد إضاءة الصور عند دخولها نطاق الرؤية من 60% إلى 100%.
  • تنجرف طبقات الصورة الرئيسية ببطء كحركة turntable مدتها 24 ثانية.
• النتيجة: يقرأ المستخدم الصورة كعنصر عرض سينمائي حي، لا كملف فيديو أو كمشغل فيديو.
• التفاعل: عند تمرير المؤشر فوق بطاقة صورة، تدور حلقة bezel كهرمانية رفيعة بمقدار 8 درجات ويرتفع صف التسمية فقط.
• الحركة المخفضة: تتوقف حركة turntable، تثبت الإضاءة عند 100%، وتظهر الأرقام مباشرة بقيمها النهائية. يجب أن تظل جميع الصور والبيانات قابلة للقراءة والاستخدام دون حركة.

لا يتطلب التصميم مشهد WebGL أو Canvas أو R3F أو Drei، لأن البعد البصري المطلوب يتحقق عبر CSS ذي طبقات وإضاءة وحركة محسوبة.

9. Non-Functional Requirements

NFR-01 — منع توليد الفيديو

• Provenance: explicit
• يجب ألا ينشئ النظام ملف فيديو.
• يجب ألا يحرّك النظام صورة إلى ملف فيديو.
• يجب أن تبقى التجربة السينمائية ضمن صفحة ويب أو تطبيق فقط.
• يجب ألا تظهر واجهة أو نص أو إجراء يوحي بالتصدير أو الرندر أو إنشاء الفيديو.

NFR-02 — استمرارية البيانات

• Provenance: required_inference
• يجب حفظ صور صاحب الصور وإعدادات العرض السينمائي بشكل دائم.
• يجب أن يتمكن صاحب الصور من استعادة صوره وإعداداته بعد التحقق كصاحب صور عائد.
• يجب ألا تعرض الواجهة عملية الحفظ كناجحة عند فشل التخزين.

NFR-03 — الوصول والهوية

• Provenance: required_inference وpage contract version 1
• يجب أن تكون صفحة Landing متاحة دون تسجيل دخول.
• يجب أن تكون صفحة Login متاحة دون تسجيل دخول.
• يجب أن تكون صفحة Sign Up متاحة دون تسجيل دخول.
• يجب أن تتطلب صفحة إدارة المعرض تسجيل الدخول.
• يجب أن تتطلب صفحة المعرض السينمائي تسجيل الدخول.
• لا تضيف المنصة صلاحيات تفاضلية أو RBAC غير منصوص عليها.

NFR-04 — الحركة المخفضة

• Provenance: Creative Direction
• يجب احترام تفضيل prefers-reduced-motion.
• في وضع الحركة المخفضة، يجب:
  • تثبيت العدادات على قيمها النهائية.
  • إيقاف الانجراف البطيء للصور.
  • عرض الصور بإضاءة 100%.
  • ضمان قابلية الاستخدام والقراءة دون اعتماد على الحركة.

NFR-05 — قابلية القراءة والاستجابة

• Provenance: Creative Direction
• يجب أن تبقى العناوين والكلمات والشعارات والتسميات والأرقام والنصوص وعناصر التحكم كاملة داخل الحاوية وإطار العرض عند 375px و768px و1280px.
• يجب ألا يغطي عنصر زخرفي أو صورة أو حركة أي نص قابل للقراءة أو عنصر تحكم.
• يجوز اقتصاص الصور والزخارف أو تدويرها أو مدها خارج الحافة وفق التوجيه البصري، بشرط عدم حجب النص أو عناصر التحكم.
• يجوز للصفوف القابلة للتمرير أفقياً أن تتجاوز الحافة أثناء الحركة أو التمرير، بشرط أن يصبح كل عنصر قابلاً للقراءة الكاملة عند الوصول إليه.
• في وضع الحركة المخفضة، يجب لف العناصر ضمن صفوف أو السماح بالتمرير الأفقي بحيث يمكن الوصول إلى كل عنصر كاملاً.

NFR-06 — دعم العربية واتجاه RTL

• Provenance: Creative Direction
• يجب أن تكون الواجهة عربية أولاً.
• يجب أن تحافظ العناوين العربية على وزن بصري كبير وواضح.
• يجب أن تبقى الأرقام قابلة للقراءة كأسلوب أدوات قياس tabular numerals.
• يجب دعم التخطيط من اليمين إلى اليسار دون فقدان وضوح عناصر التحكم أو البيانات.

NFR-07 — الأداء الإدراكي للحركة

• Provenance: Creative Direction
• يجب أن تكون الحركة ميكانيكية وبطيئة ودقيقة.
• يجب ألا تستخدم الواجهة ارتداداً نابضاً أو easing نابضاً.
• يجب أن تستخدم حركة الإبرة والعدادات انتقالات هادئة من نوع ease-out.
• يجب أن تكون حركة الخلفية والصور جزءاً من تجربة العرض الحي، لا دليلاً على إنشاء فيديو.

10. Tech Stack

Frontend

• React
  • واجهة التطبيق المخصصة.
  • تنفيذ صفحات Landing وLogin وSign Up وإدارة المعرض والمعرض السينمائي.
  • تنفيذ واجهة عربية أولاً ودعم RTL.
  • تنفيذ الحركة الحية للصور والخلفيات المتحركة باستخدام تقنيات الويب المناسبة دون رندر فيديو.

Backend

• Python / FastAPI
  • عملية backend مشتركة لواجهات التطبيق ووحدات المجال.
  • إدارة واجهات API الخاصة بالهوية، الجلسات، الصور، المعرض، وإعدادات العرض.
  • يجب تمديد backend الحالي بوحدات ومسارات جديدة عند الحاجة بدلاً من إنشاء خدمة منفصلة لواجهة معرض الصور.

Database

• MariaDB
  • تخزين بيانات التطبيق الدائمة اللازمة للهوية وصور المعرض وإعدادات العرض.
  • ربط البيانات المحفوظة بصاحب الصور الصحيح.

Containerization

• Docker / docker-compose
  • frontend: تطبيق React.
  • backend: عملية FastAPI المشتركة.
  • database: MariaDB للبيانات الدائمة.
  • يجب أن يعكس ملف docker-compose.yml هذه الخدمات القابلة للتشغيل.

حدود الخدمات

• لا يلزم إنشاء خدمة مستقلة للمعرض أو للحركة السينمائية.
• لا يلزم عامل queue مستقل لأن المتطلبات الحالية لا تتضمن معالجة غير متزامنة مستقلة مثل رندر الفيديو.
• لا يلزم Kubernetes ضمن النطاق الحالي.

11. Assumptions and Constraints

Constraints

• لا يُنشئ التطبيق فيديو ولا يحرّك صورة إلى ملف فيديو؛ العرض السينمائي يكون عبر صفحة ويب أو تطبيق فقط.
• تعتمد تجربة المنتج على صور ثابتة مع حركة حية وخلفيات متحركة داخل الواجهة.
• صفحات التطبيق المعتمدة وترتيبها هي:
  1. Landing
  2. Login
  3. Sign Up
  4. إدارة المعرض
  5. المعرض السينمائي
• يجب الحفاظ على وصول الصفحات كما يلي:
  • Landing: دون تسجيل دخول.
  • Login: دون تسجيل دخول.
  • Sign Up: دون تسجيل دخول.
  • إدارة المعرض: يتطلب تسجيل الدخول.
  • المعرض السينمائي: يتطلب تسجيل الدخول.
• لا يضيف المنتج في نطاقه الحالي تصدير فيديو أو مشاركة فيديو أو مكتبة فيديو أو مشغل فيديو.
• يمنع استخدام نمط SaaS عام أبيض مع أزرق أو نيلي.
• يمنع استخدام glassmorphism أو gradient blobs أو صور stock لأشخاص أو كاميرات.

Assumptions

• [Required inference] يحتاج صاحب الصور إلى هوية مملوكة للتطبيق وجلسة وصول حتى ترتبط الصور وإعدادات العرض المحفوظة به بشكل دائم.
• [Required inference] يحتاج صاحب الصور إلى التسجيل الذاتي أول مرة، وإلى التحقق عند العودة.
• [Default — not specified by user] تكون الرسائل النصية للخطأ والنجاح باللغة العربية بما يتوافق مع اتجاه الواجهة RTL.
• [Default — not specified by user] تخزن ملفات الصور بطريقة مناسبة لتطبيق الويب، بينما تحفظ بياناتها المرجعية وإعداداتها الدائمة في MariaDB.
• [Default — not specified by user] لا تُضاف وظائف إدارة حساب موسعة، أو إدارة مستخدمين، أو أدوار إدارية، أو صلاحيات مشاركة متقدمة ما لم تصبح مطلباً صريحاً مستقبلاً.

12. Glossary

• المعرض السينمائي: عرض صور حي داخل الويب يستخدم تأثيرات حركة وخلفيات متحركة لإعطاء إحساس سينمائي دون إنتاج فيديو.
• صاحب الصور / العارض: المستخدم الذي يضيف الصور ويختار إعدادات العرض ويحفظ معرضه.
• الزائر المشاهد: المستخدم الذي يتصفح الصور ضمن المعرض السينمائي.
• تأثيرات الحركة: حركة واجهة حية تطبق أثناء عرض الصور، مثل تغير الإضاءة أو الانجراف البطيء أو حركة الإبرة، ولا تنتج ملف فيديو.
• الخلفيات المتحركة: عناصر خلفية حية داخل واجهة العرض السينمائي.
• Still: وضع عرض ثابت ضمن محدد وتيرة الحركة.
• Sweep: وضع عرض يعتمد على حركة مسح ميكانيكية دقيقة.
• Turntable: وضع عرض يعتمد على انجراف أو دوران بصري بطيء للصور داخل الواجهة.
• عداد دائري: عنصر واجهة دائري بإبرة وقيمة رقمية يعرض مؤشراً مثل عدد الصور.