purple-earthy

byNour Nour

مرحبا

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirements Document for purple-earthy

1. Introduction

purple-earthy هو تطبيق ويب بسيط ومركّز مسؤول عن حساب القاسم المشترك الأكبر (GCD — Greatest Common Divisor) لأي عددين يُدخلهما المستخدم. الفكرة الجوهرية للمنتج هي أداة حسابية واحدة: يأتي المستخدم بعددين، فيحصل على نتيجتهما من القاسم المشترك الأكبر، مع عرض خطوات خوارزمية إقليدس التي وصلت إلى النتيجة.

الجمهور المستهدف هو أي شخص يحتاج معرفة القاسم المشترك الأكبر لعددين — طالب، مهندس، أو مستخدم عادي — في سياق عربي يتوقع وضوحاً فورياً ونتيجة موثوقة. المنتج لا يقدّم حسابات أخرى، ولا مكتبة أرقام، ولا سجلاً للحسابات السابقة؛ إنه أداة واحدة تُنجز مهمة واحدة بإتقان بصري ورياضي.

Page 1 of 19

2. System Overview

purple-earthy تطبيق ويب من صفحتين: صفحة Landing عامة تشرح أن التطبيق يحسب القاسم المشترك الأكبر لأي عددين، وصفحة حاسبة GCD التي يدخل فيها المستخدم العددين ويطلب الحساب ويقرأ الناتج مع خطوات الخوارزمية.

الفاعلون:

  • مستخدم حساب GCD (فاعل بشري): الشخص الذي يُدخل أي عددين ويطلب حساب القاسم المشترك الأكبر لهما ويقرأ الناتج.
  • خدمة الحساب (فاعل نظامي غير بشري): الجزء الخلفي الذي ينفّذ خوارزمية إقليدس ويعيد النتيجة وخطواتها.

السلوك المقبول: إدخال أي عددين، طلب الحساب، عرض قيمة GCD الصحيحة، وعرض خطوات خوارزمية إقليدس المؤدية إلى النتيجة.

الاستثناءات الضيقة: لا حساب لأكثر من عددين، ولا عمليات حسابية أخرى (مضاعف مشترك أصغر، تحليل إلى عوامل، إلخ)، ولا حفظ لسجل الحسابات، ولا حسابات مستخدمين أو تسجيل دخول.

2a. Product Interpretation and Delivery Boundary

purple-earthy منتج أول-الطرف (first-party) بواجهة مخصّصة بالكامل. لا توجد حسابات مستخدمين ولا تسجيل دخول: كلتا الصفحتين متاحتان دون أي هوية، لأن العمل نفسه (إدخال عددين وقراءة نتيجة) لا ينشئ علاقة دائمة ولا التزاماً ولا قيمة تُنسب إلى مستخدم بعينه، فلا حاجة إلى استمرارية هوية.

حدود التسليم الحالية: صفحة هبوط عامة + صفحة حاسبة GCD، مع خدمة حساب خلفية تنفّذ خوارزمية إقليدس.

حدود مستقبلية (خارج النطاق الحالي): أي توسّع في أنواع الحسابات، أو حفظ السجل، أو حسابات المستخدمين، أو مشاركة النتائج — كلها غير مطلوبة حالياً ولا تُبنى.

Page 2 of 19

2b. Source Content Inventory

لا ينطبق — لم يُرفق أي توجيه مرجعي من نوع content_source.

2c. Page Content and Component Coverage

Landing

  • المعلومات والحالة: شرح موجز أن التطبيق يحسب القاسم المشترك الأكبر لأي عددين. لا حالة محفوظة؛ الصفحة ثابتة المحتوى.
  • الإجراءات الأساسية: زر البدء الوحيد الذي ينقل المستخدم إلى حاسبة GCD.
  • الإجراءات المساندة: رابط "الحاسبة" في الشريط العلوي.
  • كيانات المجال: لا كيانات بيانات؛ الصفحة تعريفية.
  • مسؤوليات المكوّنات:
    • الشريط العلوي: اسم التطبيق بحروف صغيرة متباعدة على اليسار، ورابط واحد "الحاسبة" على اليمين، يفصلهما خط شعري أفقي بعرض الشاشة كاملة.
    • العمود النصي (يسار الشاشة): عنوان سيريف بخط Instrument Serif يلف على 3 أسطر، تحته سطر واحد بخط Space Grotesk 18px يشرح أن التطبيق يحسب القاسم المشترك الأكبر لأي عددين.
    • زر البدء: مستطيل أسود صلب بحرف أبيض، بعرض المحتوى وليس متمركزاً، ينقل إلى حاسبة GCD.
    • الفراغ الأيمن: دائرة Euclid مرسومة بخط 1px أسود بقوسين متقاطعين، يقطعها خط بنفسجي رأسي واحد (#7A2E8E) يمتد من أعلى الشاشة إلى أسفلها.
  • الحالات:
    • التحميل: لا حالة تحميل (محتوى ثابت).
    • الفراغ: لا ينطبق.
    • النجاح: عرض الصفحة كاملة كما هو موصوف.
    • الخطأ: لا ينطبق (لا عمليات شبكية).
    • الاسترجاع: لا ينطبق.
Page 3 of 19

حاسبة GCD

Page 4 of 19
  • المعلومات والحالة: حقلان لإدخال العددين، منطقة النتيجة، وعمود خطوات خوارزمية إقليدس. الحالة: فارغة قبل الإدخال، ممتلئة بعد الحساب.
  • الإجراءات الأساسية: إدخال العدد الأول، إدخال العدد الثاني، الضغط على "احسب".
  • الإجراءات المساندة: لا يوجد.
  • كيانات المجال: العدد الأول (عدد صحيح)، العدد الثاني (عدد صحيح)، النتيجة (قيمة GCD)، خطوات الخوارزمية (قائمة مرقّمة).
  • مسؤوليات المكوّنات:
    • حقل العدد الأول: مربع أبيض بحد أسود 1px، بلا زوايا دائرية، بلا ظل؛ التركيز يغيّر لون الحد إلى البنفسجي الترابي (#7A2E8E) فقط.
    • حقل العدد الثاني: نفس مواصفات حقل العدد الأول.
    • زر "احسب": مستطيل أسود صلب بحرف أبيض، بلا زوايا دائرية.
    • منطقة النتيجة: رقم النتيجة بخط Instrument Serif بحجم clamp(72px, 14vw, 176px)، محاذى لليمين في عمود النتيجة، فوقه سطر بيانات صغير متباعد الأحرف "GCD" بخط Space Grotesk 12px، وتحته خط شعري أسود واحد بعرض العمود.
    • عمود خطوات الخوارزمية: خطوات إقليدس كبيانات مرقّمة (01, 02, 03...) بأرقام بخط Space Grotesk، كل خطوة على سطر واحد مع خط شعري فاصل.
    • شبكة 12 عموداً: الحقول في العمودين 1–4، خطوات الخوارزمية في 6–9، والنتيجة في 10–12.
  • الحالات:
    • التحميل: عند الضغط على "احسب" تظهر حالة انتظار قصيرة حتى تعود النتيجة من خدمة الحساب.
    • الفراغ: قبل أي إدخال، الحقول فارغة ومنطقة النتيجة وعمود الخطوات فارغان.
    • النجاح: يظهر رقم النتيجة بتلاشٍ قصير 240ms، ويمر خط بنفسجي أفقي رقيق تحت النتيجة مرة واحدة ثم يثبت، وتظهر خطوات الخوارزمية متتالية بتأخير 60ms بين كل خطوة.
    • الخطأ: إذا كان أحد الحقلين فارغاً أو غير صالح كعدد صحيح، لا يُعرض رقم نتيجة، ويُطلب من المستخدم تصحيح الإدخال.
    • الاسترجاع: بعد تصحيح الإدخال والضغط على "احسب" مرة أخرى، تُعرض النتيجة والخطوات بشكل صحيح.
Page 5 of 19

3. Functional Requirements

FR-1 — حساب القاسم المشترك الأكبر لأي عددين

As a مستخدم حساب GCD I should أُدخل أي عددين وأحصل على القاسم المشترك الأكبر لهما so that أعرف النتيجة الصحيحة دون حساب يدوي.

  • Provenance: explicit
  • Trigger/Input: إدخال العدد الأول والعدد الثاني في حاسبة GCD، ثم الضغط على "احسب".
  • Observable result: عرض قيمة GCD الصحيحة للعددين المُدخلين في منطقة النتيجة.
  • Access state: لا يتطلب أي هوية؛ الصفحة متاحة للجميع.
  • Failure/recovery: إذا كان الإدخال فارغاً أو غير صالح كعدد صحيح، لا تُعرض نتيجة، ويُطلب من المستخدم تصحيح الإدخال ثم إعادة المحاولة.
  • Continuation: بعد ظهور النتيجة، يمكن للمستخدم تعديل العددين والضغط على "احسب" مرة أخرى لحساب جديد.

FR-2 — قبول أي عددين كمدخلات

As a مستخدم حساب GCD I should أستطيع إدخال أي عددين في الحقلين المخصّصين so that يحسب التطبيق القاسم المشترك الأكبر لهما.

  • Provenance: explicit
  • Trigger/Input: كتابة قيمة في حقل العدد الأول وكتابة قيمة في حقل العدد الثاني.
  • Observable result: الحقلان يقبلان القيم المدخلة ويعرضانها؛ التركيز على الحقل يغيّر لون حده إلى البنفسجي الترابي (#7A2E8E).
  • Access state: لا يتطلب أي هوية.
  • Failure/recovery: إذا تُرك حقل فارغاً، لا يمكن إتمام الحساب حتى يُملأ.
  • Continuation: بعد إدخال العددين، ينتقل المستخدم إلى الضغط على "احسب".
Page 6 of 19

FR-3 — عرض نتيجة GCD للعددين المُدخلين

As a مستخدم حساب GCD I should أرى قيمة القاسم المشترك الأكبر معروضة بوضوح so that أقرأ النتيجة فوراً.

  • Provenance: explicit
  • Trigger/Input: اكتمال الحساب بعد الضغط على "احسب".
  • Observable result: رقم النتيجة يظهر بخط Instrument Serif بحجم clamp(72px, 14vw, 176px)، محاذى لليمين، فوقه سطر "GCD" بخط Space Grotesk 12px، وتحته خط شعري أسود واحد بعرض العمود.
  • Access state: لا يتطلب أي هوية.
  • Failure/recovery: إذا فشل الحساب، لا يُعرض رقم، وتظهر رسالة تطلب تصحيح الإدخال.
  • Continuation: يمكن للمستخدم بدء حساب جديد بتعديل العددين.

FR-4 — عرض خطوات خوارزمية إقليدس

As a مستخدم حساب GCD I should أرى خطوات خوارزمية إقليدس المؤدية إلى النتيجة so that أفهم كيف وصل التطبيق إلى القاسم المشترك الأكبر.

  • Provenance: required_inference (مشتق من عرض النتيجة؛ الخطوات هي المكوّن البصري الذي يشرح مسار الحساب في التصميم المطلوب)
  • Trigger/Input: اكتمال الحساب بعد الضغط على "احسب".
  • Observable result: خطوات إقليدس تظهر كبيانات مرقّمة (01, 02, 03...) في عمود منفصل، كل خطوة على سطر واحد مع خط شعري فاصل، وتظهر متتالية بتأخير 60ms بين كل خطوة.
  • Access state: لا يتطلب أي هوية.
  • Failure/recovery: إذا فشل الحساب، لا تظهر خطوات.
  • Continuation: تبقى الخطوات معروضة حتى يبدأ المستخدم حساباً جديداً.
Page 7 of 19

FR-5 — الانتقال من صفحة الهبوط إلى الحاسبة

As a مستخدم حساب GCD I should أنتقل من صفحة الهبوط إلى حاسبة GCD بزر واحد واضح so that أبدأ الحساب بسرعة.

  • Provenance: required_inference (سطح الدخول العام الموصوف في التصميم)
  • Trigger/Input: الضغط على زر البدء الأسود في صفحة الهبوط، أو على رابط "الحاسبة" في الشريط العلوي.
  • Observable result: الانتقال إلى صفحة حاسبة GCD.
  • Access state: لا يتطلب أي هوية.
  • Failure/recovery: لا ينطبق.
  • Continuation: يبدأ المستخدم إدخال العددين.

4. User Personas

Page 8 of 19

مستخدم حساب GCD

سياق المنتج: شخص يحتاج معرفة القاسم المشترك الأكبر لعددين — طالب يحل تمريناً، مهندس يبسّط كسوراً، أو مستخدم عادي يريد نتيجة سريعة. يتوقع واجهة عربية واضحة ونتيجة موثوقة دون تعقيد.

الهدف الأساسي: إدخال أي عددين والحصول على القاسم المشترك الأكبر لهما مع رؤية خطوات الحساب.

المسؤوليات المقبولة:

  • إدخال العدد الأول والعدد الثاني في الحقلين المخصّصين.
  • الضغط على "احسب" لطلب الحساب.
  • قراءة قيمة GCD المعروضة.
  • قراءة خطوات خوارزمية إقليدس لفهم مسار الحساب.
  • تصحيح الإدخال عند الخطأ وإعادة المحاولة.

المدخلات والقرارات: يقرّر العددين المراد حسابهما، ويقرّر متى يطلب الحساب، ويقرّر ما إذا كان يريد حساباً جديداً بعد قراءة النتيجة.

التفاعل مع الفاعلين الآخرين: لا يتفاعل مع فاعلين بشريين آخرين. يتفاعل مع خدمة الحساب الخلفية بشكل غير مباشر عبر واجهة الحاسبة.

النجاح الملحوظ: ظهور قيمة GCD الصحيحة للعددين المُدخلين بخط كبير واضح، مع خطوات الخوارزمية المؤدية إليها.

ما يميّز هذا الدور: مسؤوليته المتكررة الوحيدة هي إدخال عددين وطلب الحساب وقراءة الناتج — لا إدارة حسابات، ولا حفظ سجل، ولا عمليات أخرى. دوره محصور في دورة واحدة بسيطة وقابلة للتكرار.

5. Core User Flows

Page 9 of 19

الرحلة 1: حساب GCD لعددين من صفحة الهبوط

  1. نقطة البداية: يفتح المستخدم صفحة Landing في المتصفح. لا هوية مطلوبة.
  2. يقرأ المستخدم العنوان بخط Instrument Serif الذي يشرح أن التطبيق يحسب القاسم المشترك الأكبر لأي عددين.
  3. يرى المستخدم دائرة Euclid والخط البنفسجي الرأسي في الفراغ الأيمن.
  4. إجراء المستخدم: يضغط على زر البدء الأسود (أو رابط "الحاسبة" في الشريط العلوي).
  5. النتيجة الملحوظة: ينتقل المستخدم إلى صفحة حاسبة GCD.
  6. الخطوة التالية: يبدأ المستخدم إدخال العددين.

الرحلة 2: إدخال العددين وطلب الحساب

  1. نقطة البداية: المستخدم على صفحة حاسبة GCD، والحقول فارغة.
  2. إجراء المستخدم: يكتب العدد الأول في حقل العدد الأول. عند التركيز، يتحول لون حد الحقل إلى البنفسجي الترابي (#7A2E8E).
  3. إجراء المستخدم: يكتب العدد الثاني في حقل العدد الثاني.
  4. إجراء المستخدم: يضغط على زر "احسب".
  5. النتيجة الملحوظة: تظهر حالة انتظار قصيرة حتى تعود النتيجة من خدمة الحساب.
  6. الخطوة التالية: عرض النتيجة والخطوات.
Page 10 of 19

الرحلة 3: قراءة النتيجة وخطوات الخوارزمية

  1. نقطة البداية: المستخدم أدخل العددين وضغط على "احسب".
  2. النتيجة الملحوظة: يظهر رقم النتيجة بخط Instrument Serif بحجم clamp(72px, 14vw, 176px) محاذى لليمين، بتلاشٍ قصير 240ms.
  3. النتيجة الملحوظة: يمر خط بنفسجي أفقي رقيق تحت النتيجة مرة واحدة ثم يثبت.
  4. النتيجة الملحوظة: تظهر خطوات خوارزمية إقليدس متتالية في العمود المخصّص بتأخير 60ms بين كل خطوة، كبيانات مرقّمة (01, 02, 03...) مع خط شعري فاصل بينها.
  5. الخطوة التالية: يمكن للمستخدم قراءة النتيجة والخطوات، أو بدء حساب جديد.

الرحلة 4: تصحيح إدخال غير صالح

  1. نقطة البداية: المستخدم ضغط على "احسب" وأحد الحقلين فارغ أو غير صالح كعدد صحيح.
  2. النتيجة الملحوظة: لا يُعرض رقم نتيجة، وتظهر رسالة تطلب تصحيح الإدخال.
  3. إجراء المستخدم: يصحّح المستخدم الحقل غير الصالح.
  4. إجراء المستخدم: يضغط على "احسب" مرة أخرى.
  5. النتيجة الملحوظة: تُعرض النتيجة والخطوات بشكل صحيح.
  6. الخطوة التالية: يمكن للمستخدم بدء حساب جديد.
Page 11 of 19

الرحلة 5: بدء حساب جديد

  1. نقطة البداية: المستخدم قرأ النتيجة والخطوات.
  2. إجراء المستخدم: يعدّل العدد الأول أو العدد الثاني في الحقلين.
  3. إجراء المستخدم: يضغط على "احسب".
  4. النتيجة الملحوظة: تُستبدل النتيجة السابقة بالنتيجة الجديدة، وتُستبدل الخطوات السابقة بالخطوات الجديدة.
  5. الخطوة التالية: يمكن للمستخدم تكرار الدورة.

6. Visuals Colors and Theme

الميوز: Peter Saville — رقم واحد، لون واحد، صمت واسع.

العنوان: أداة حسابية تعليمية/هندسية بسيطة بطقس شبه معماري حول عملية رياضية واحدة.

الألوان (الوضع الفاتح)

الدورالقيمةالاستخدام
الخلفية (أرضية عاجية دافئة)#F4F1EA~70% من كل شاشة
السطح (بطاقة بيضاء نقية)#FFFFFF~8% — القطعة المعروضة
النص (أسود حبري)#111111~20% — النص والحدود
الأساسي#1B1B1Bالأزرار الصلبة
التمييز (بنفسجي ترابي)#7A2E8E~2% — كود فقط: خط رأسي واحد، رقم النتيجة، رقم الخطوة النشطة
الباهت (رمادي دافئ)#B9B3A6البيانات الثانوية والحدود الشعرية

النسبة: 70% أرضية / 20% حبر / 8% بيضاء / 2% بنفسجي.

Page 12 of 19

الخطوط

  • العناوين: Instrument Serif — سيريف كلاسيكي معاصر بأوزان خفيفة وتباعد ضيق (letter-spacing: -0.02em).
  • العناوين العربية: Noto Naskh Arabic بوزن 400.
  • النص: Space Grotesk.
  • السلّم: 1.25 مع قفزة عرض واحدة: 12/14/18/24/32/48 للواجهة.
  • رقم النتيجة: clamp(72px, 14vw, 176px).
  • عنوان الهبوط: clamp(40px, 9vw, 112px).

لغة الشكل

  • مستطيلات صلبة بزوايا حادة 0px.
  • خطوط شعرية 1px فقط.
  • دائرة واحدة كاملة (رمز الخوارزمية) بلا ظلال ولا تدرجات.
  • لا يوجد أي شكل عضوي أو منحنى — كل شيء يتبع شبكة صارمة.

الصور

  • لا صور فوتوغرافية.
  • الصورة الوحيدة هي الرسم التخطيطي: دائرة Euclid بقوسين متقاطعين مرسومين بخط 1px أسود، وخط رأسي بنفسجي واحد يقطعها.
  • يمكن إضافة شبكة نقاط خفيفة جداً (#B9B3A6 بنسبة 10%) كخلفية في منطقة النتيجة فقط.
Page 13 of 19

7. Signature Design Concept

الفكرة: الخط البنفسجي الرأسي الواحد هو "الكود" في هوية سافيل — يمتد من حافة أعلى الشاشة إلى أسفلها في صفحة الهبوط، ومنه تنبثق دائرة Euclid. لا يوجد أي عنصر آخر بنفسجي في الصفحة.

التنفيذ على صفحة الهبوط:

  • عمود نصي على يسار الشاشة يبدأ من الحافة اليسرى بهامش 48px على الديسكتوب و20px على الموبايل.
  • عنوان السيريف بضخامة 112px على الديسكتوب و40px على الموبايل يلف على 3 أسطر.
  • تحته سطر واحد بخط Space Grotesk 18px يشرح أن التطبيق يحسب القاسم المشترك الأكبر لأي عددين.
  • على يمين الشاشة، في الفراغ الأبيض، دائرة Euclid مرسومة بخط 1px بقطر 320px على الديسكتوب و180px على الموبايل، يقطعها خط بنفسجي رأسي واحد يمتد من أعلى الشاشة إلى أسفلها.
  • زر البدء الوحيد مستطيل أسود صلب بحرف أبيض، بعرض المحتوى وليس متمركزاً.
  • الشريط العلوي: اسم التطبيق بحروف صغيرة متباعدة على اليسار، ورابط واحد "الحاسبة" على اليمين، يفصلهما خط شعري أفقي بعرض الشاشة كاملة.
Page 14 of 19

الحركات المميزة:

  • رقم النتيجة يُعرض بحجم clamp(72px, 14vw, 176px) بخط Instrument Serif، محاذى لليمين في عمود النتيجة، فوقه سطر بيانات صغير متباعد الأحرف "GCD" بخط Space Grotesk 12px، وتحته خط شعري أسود واحد بعرض العمود.
  • خطوات خوارزمية إقليدس تُعرض كبيانات مرقّمة في عمود منفصل (01, 02, 03...) بأرقام بخط Space Grotesk، كل خطوة على سطر واحد مع خط شعري فاصل — الجدول نفسه هو الصورة.
  • عند الضغط على "احسب" يمر خط بنفسجي أفقي رقيق تحت النتيجة مرة واحدة ثم يثبت؛ لا حركة أخرى في الصفحة كلها.
  • الحقول (العدد الأول / العدد الثاني) ليست بطاقات: مربعان أبيضان بحد أسود 1px، بلا زوايا دائرية، بلا ظل، والتركيز يغيّر لون الحد إلى البنفسجي الترابي فقط.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction)

Motion Tempo: still

Hero Dimensionality: flat

Page 15 of 19

Landing Hero Motion Brief

  • الموضوع البؤري: دائرة Euclid بقوسين متقاطعين مرسومين بخط 1px أسود، يقطعها خط بنفسجي رأسي واحد (#7A2E8E) يمتد من أعلى الشاشة إلى أسفلها.
  • أطروحة الإدخال ← التحويل ← النتيجة: لا حركة عند التمرير ولا hover-lift ولا نبض. الصفحة ساكنة بالكامل؛ الحركة الوحيدة في التطبيق تحدث عند الضغط على "احسب" في صفحة الحاسبة.
  • مفردات الحركة: شبه ساكنة — لا حركة عند التمرير، لا hover-lift، لا نبض.
  • الإطار الأول المُركّب: عمود نصي على يسار الشاشة بعنوان سيريف ضخم يلف على 3 أسطر، تحته سطر شرح واحد، وزر أسود صلب بعرض المحتوى؛ على اليمين فراغ أبيض يحمل دائرة Euclid والخط البنفسجي الرأسي.
  • حالة تقليل الحركة: الصفحة ساكنة أصلاً، فلا تغيير مطلوب؛ تبقى جميع العناصر ثابتة وقابلة للقراءة بالكامل.

9. Non-Functional Requirements

NFR-1 — دقة الحساب

Constraint: يجب أن تكون قيمة GCD المعروضة صحيحة رياضياً للعددين المُدخلين. Provenance: explicit (المنتج مسؤول عن حساب GCD). Rationale: النتيجة هي المخرج الوحيد للمنتج؛ أي خطأ فيها يُبطل الغرض.

NFR-2 — وضوح النتيجة

Constraint: يجب أن يُعرض رقم النتيجة بحجم clamp(72px, 14vw, 176px) بخط Instrument Serif، محاذى لليمين. Provenance: explicit (من التوجيه الإبداعي). Rationale: الرقم هو بطل الشاشة؛ حجمه يعطيه وزناً بصرياً.

Page 16 of 19

NFR-3 — ثبات النص والعناصر

Constraint: يجب أن تبقى العناوين والكلمات والعلامات والأرقام والنصوص وعناصر التحكم كاملة داخل الشاشة وحاوياتها عند 375px و768px و1280px، مع الالتفاف أو التغيير بالحجم (clamp(...)) لتناسب العرض، وألا يغطي أي عنصر آخر أي جزء منها. Provenance: explicit (من التوجيه الإبداعي). Rationale: قابلية القراءة في كل أحجام الشاشة.

NFR-4 — الأداء

Constraint: يجب أن يعود الحساب بالنتيجة بسرعة كافية لتجربة فورية. Provenance: required_inference. Rationale: خوارزمية إقليدس سريعة بطبيعتها؛ الانتظار الطويل يُفسد تجربة الأداة.

NFR-5 — إمكانية الوصول

Constraint: يجب أن تكون الحقول والأزرار قابلة للوصول بلوحة المفاتيح، وأن يكون التباين بين النص والخلفية كافياً. Provenance: required_inference. Rationale: الأداة موجّهة لجمهور عام.

10. Tech Stack

  • الواجهة الأمامية: React — لبناء صفحتي Landing وحاسبة GCD بواجهة مخصّصة.
  • الخلفية: Python / FastAPI — لتنفيذ خوارزمية إقليدس وإرجاع النتيجة والخطوات.
  • التخزين: لا حاجة إلى قاعدة بيانات؛ لا يوجد سجل حسابات ولا حالة دائمة.
  • الحاويات: Docker / docker-compose — لتشغيل الواجهة والخلفية معاً.
Page 17 of 19

11. Assumptions and Constraints

الافتراضات

  1. [Default — not specified by user] الأعداد المُدخلة أعداد صحيحة موجبة أو سالبة؛ تُعالج القيم المطلقة.
  2. [Default — not specified by user] لا يوجد حد أقصى لحجم الأعداد المُدخلة ضمن نطاق الأعداد الصحيحة القياسي.
  3. [Default — not specified by user] التطبيق يعمل في المتصفح فقط، دون تطبيق جوال أصلي.
  4. [Default — not specified by user] لا يوجد حفظ لسجل الحسابات السابقة.

القيود

  1. لا حسابات مستخدمين: لا تسجيل دخول ولا هوية؛ كلتا الصفحتين متاحتان للجميع.
  2. لا عمليات حسابية أخرى: التطبيق يحسب GCD فقط، لا LCM ولا تحليل عوامل ولا غيرها.
  3. لا أكثر من عددين: الإدخال محصور في عددين فقط.
  4. قيود بصرية صارمة: لا أزرق (#2563EB / #4F46E5 / #6366F1)، لا Inter/Roboto/Poppins/system-ui للعناوين أو النصوص، لا تدرجات، لا كرات ضبابية، لا زجاج ضبابي، لا ظلال ناعمة، لا زوايا دائرية على الحقول أو الأزرار (0px فقط)، لا صور فوتوغرافية، لا أكثر من لون تمييز واحد في الشاشة الواحدة.
  5. البنفسجي الوحيد المسموح: #7A2E8E الترابي، ويُستخدم ككود لا كزخرفة.
Page 18 of 19

12. Glossary

  • GCD (القاسم المشترك الأكبر): أكبر عدد صحيح يقسم عددين دون باقٍ.
  • خوارزمية إقليدس: طريقة تكرارية لإيجاد GCD عددين عبر القسمة المتكررة.
  • حاسبة GCD: الصفحة التي يُدخل فيها المستخدم العددين ويطلب الحساب ويقرأ الناتج.
  • Landing: صفحة الهبوط العامة التي تشرح التطبيق وتنقل إلى الحاسبة.
  • دائرة Euclid: الرسم التخطيطي المميز في صفحة الهبوط — دائرة بقوسين متقاطعين يقطعها خط بنفسجي رأسي.
Page 19 of 19

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: قراءة شرح حساب القاسم المشترك الأكبر
Landing: الضغط على زر البدء
حاسبة GCD: إدخال العدد الأول
حاسبة GCD: إدخال العدد الثاني
حاسبة GCD: 1. الضغط على احسب
حاسبة GCD: 2. قراءة قيمة GCD
حاسبة GCD: 3. قراءة خطوات إقليدس
حاسبة GCD: 4. تصحيح الإدخال غير الصالح
حاسبة GCD: 5. إعادة الضغط على احسب
حاسبة GCD: 6. تعديل العددين لحساب جديد

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: قراءة شرح حساب القاسم المشترك الأكبر
Landing: الضغط على زر البدء
حاسبة GCD: إدخال العدد الأول
حاسبة GCD: إدخال العدد الثاني
حاسبة GCD: 1. الضغط على احسب
حاسبة GCD: 2. قراءة قيمة GCD
حاسبة GCD: 3. قراءة خطوات إقليدس
حاسبة GCD: 4. تصحيح الإدخال غير الصالح
حاسبة GCD: 5. إعادة الضغط على احسب
حاسبة GCD: 6. تعديل العددين لحساب جديد