قارئ الأيورفيدا
تطبيق ويب لقراءة النصوص الكلاسيكية للأيورفيدا: 9 كتب و841 فصلًا وأكثر من 34,500 بيت بالنص الأصلي والنقحرة والترجمة. صمّمتُ الواجهة وبنيتُ نظام تصميم بنمطين فاتح وداكن ورسمتُ 91 أيقونة وفكّرتُ في نسخة الجوال ونفّذتُ كل شيء بجافاسكربت خالصة.
01 / الحجم والمهمة
مكتبة مصادر أصلية يسهل قراءتها على أي شاشة
كانت المهمة الأصلية جعل ما يُقرأ عادةً في ملفات PDF والمسوحات سهل القراءة: النص السنسكريتي بجانب النقحرة العلمية والترجمة والتعليقات والمصطلحات المشروحة. وينبغي أن يُعثر على أي بيت في ثوانٍ، وأن يُقرأ الفصل الطويل دون إجهاد للعين.
لذلك صُمّمت الواجهة ككتاب ومرجع معًا: الفهرس والأقسام على جانب، وعمود نص هادئ على الجانب الآخر. وحول القراءة نمت موسوعة ومسارد وعلاجات منزلية وجدول لأوقات الطعام واختبار للبنية — وكلها تعيش في نظام مكوّنات واحد.
02 / بنية الواجهة
تنقل جانبي وعمود قراءة واحد ولا شيء زائد
تتكوّن الشاشة من منطقتين. العمود الجانبي بعرض 280 px هو التنقل: الشعار ومبدّلا اللغة والنمط والبحث في كل الكتب واختيار الكتاب والفصول بحسب الأجزاء (sthana) وعشرة أقسام للتطبيق. والمنطقة الأخرى هي المحتوى: ترحيب وبطاقات كتب في الصفحة الرئيسية، وعمود نص ضيق بطول سطر مريح في القارئ.
في الأسفل شريط رفيع ثابت بروابط قناة تيليجرام والبوت وعدّاد الزوار، وفوقه إخلاء مسؤولية طبي مطوي يمكن إغلاقه. وعلى الجوال يتحول العمود الجانبي إلى قائمة منزلقة.
تشريح بطاقة البيت
- رقم البيت11 px، 700، أحرف كبيرة صغيرة بتباعد 0.88 px، اللون --verse-num
- ديفاناغاريNoto Sans Devanagari، 18 px، ارتفاع سطر 36 px — يُقرأ السنسكريتي كبيرًا
- IASTGeorgia مائل، 14 px، رمادي بني هادئ — النقحرة العلمية
- الترجمةGeorgia، 15.5 px، ارتفاع سطر 1.82 — طبقة المعنى الرئيسية
- الإجراءاتمشاركة البيت وقراءة السنسكريتية أو الترجمة الروسية أو الإنجليزية بصوت عالٍ (Web Speech API)
- التعليقكتلة «تعليق» قابلة للطي بشريط أخضر على الجانب واسم المؤلف
03 / الشاشات
تسعة أقسام — نظام واحد
تختلف الأقسام في المحتوى لكنها مبنية من الأجزاء نفسها: البطاقات والشرائح وحقول البحث والأيقونات والمسافات ذاتها. وبفضل ذلك لا يتعلم المستخدم الواجهة من جديد في كل شاشة.
04 / نظام التصميم
نظام تصميم كامل: ألوان وخطوط وأيقونات ومكوّنات وحالات
يعيش نظام التصميم في متغيرات CSS ومجموعة مكوّنات مشتركة واحدة — وعليه تقوم كل الشاشات. وفيما يلي يُفكَّك بالكامل: متغيرات الألوان لنمطين وثلاث عائلات خطوط وسلّم طباعي و91 أيقونة ومكوّنات حيّة، إضافة إلى الزوايا والظلال والطبقات والحركات. كل الأمثلة في هذه الصفحة HTML حقيقي لا صور.
الألوان
لوحة «ورقية» دافئة ونمطان فاتح وداكنبُنيت اللوحة حول الورق الدافئ وخط التمييز البني «الحبري»: خلفية كريمية دافئة ونص بني قريب من الأسود ولون تمييز ذهبي داكن. لا ألوان باردة في الواجهة — لا تستخدمها إلا ترميزات ألوان الأيقونات وألوان الدوشا الثلاثة في الاختبار. كل الألوان متغيرات على :root، ويستبدلها النمط الداكن بالفئة body.dark.
النمط الفاتح
النمط الداكن
ألوان الدوشا في اختبار البنية
يتغير لون التمييز بين النمطين: #7a5c2e (ذهبي داكن) في الفاتح و#c9a96e (ذهبي فاتح) في الداكن، فيبقى تباين الأزرار والروابط. وتأخذ الحالات التفاعلية ألوانها من --bg-hover و--bg-active، ويأخذ تمييز المصطلحات من --term-bg و--term-border.
الطباعة
Georgia · system-ui · Noto Sans Devanagariللنظام ثلاث عائلات خطوط ولكل منها دور. Georgia (مزوَّد) للعناوين والترجمة والنقحرة: يمنح نبرة «كتابية». وsystem-ui للواجهة والنص الأساسي: خط نظام التشغيل الأصلي بلا تحميل. وNoto Sans Devanagari هو الخط الوحيد المحمَّل ويلزم للسنسكريتية.
| الدور | العائلة | الحجم / ارتفاع السطر | الوزن | النمط / التباعد |
|---|---|---|---|---|
| العناوين | Georgia, Times New Roman, serif | 27–32 px / 34–38 px | 700 | عادي |
| النص الأساسي | system-ui, -apple-system, sans-serif | 15–16 px / 27 px | 400 | عادي |
| السنسكريتية | Noto Sans Devanagari, serif | 18 px / 36 px | 400 | +0.36 px |
| IAST والترجمة | Georgia | 14–15.5 px / 25–28 px | 400 | مائل لـ IAST، +0.14 px |
| الوسوم | system-ui | 9–11 px / 16 px | 700 | أحرف كبيرة صغيرة، +0.8–1 px |
| الأزرار والحقول | Arial | 11–13 px | 600 | +0.24–0.33 px |
أربعة أحجام للقراءة
يختار المستخدم حجم النص بزر «A» ويُحفظ في المتصفح: ينطبق المقياس على النص الأساسي وكل الأحجام المشتقة.
صغير
عادي
كبير
كبير جدًا
الأيقونات
91 أيقونة SVG خطية بأسلوب واحدرُسمت كل الأيقونات من جديد بأسلوب واحد: شبكة 24×24 وخط 1.8 px بأطراف مستديرة وخلفية ملونة بزوايا 6.5 وشفافية 16%. لون الخلفية والخط واحد ويختلف من أيقونة لأخرى. وهذا يساعد العين على التمييز بين الأقسام ويجعل القائمة متناسقة. تُخزَّن الأيقونات كقاموس JS «مفتاح ← لون + مسار» وتُدرج في الواجهة عبر دالة واحدة.
- الشبكة
- 24 × 24 px، viewBox 0 0 24 24
- الخلفية
- rect 21 × 21، rx 6.5، fill-opacity 0.16
- الخط
- stroke 1.8، أطراف ووصلات مستديرة
- اللون
- لون واحد لكل أيقونة: الخلفية والمسار
قائمة الأقسام · 11
الواجهة · 17
الكتب · 9
جدول الطعام · 9
الموسوعة · 45
تبدو الأيقونات متطابقة في النمطين الفاتح والداكن: الخلفية شبه شفافة فتتلوّن بلون الأرضية.
المكوّنات
أزرار وحقول وبطاقات وبيت وتعليق واختبارالمكوّنات مبنية حيّة من المتغيرات نفسها — مرّر المؤشر لترى الحالات. وفيما يلي أهمها.
أزرار وشرائح ومبدّلات
كل العناصر التفاعلية «حبوب» أو بلاطات بزوايا 8–20 px؛ وتُملأ الحالة النشطة بـ --bg-active والإجراء الرئيسي بلون التمييز.
حقول الإدخال واختيار الكتاب
البحث في النص…اختر كتابًا
قائمة الأقسام
الأقسام
قائمة الفصول
البيت 1
रागादि-रोगान् सततानुषक्तान् अ-शेष-काय-प्रसृतान् अ-शेषान्
rāgādi-rogān satatānuṣaktān a-śeṣa-kāya-prasṛtān a-śeṣān
والآن نشرح فصل أيوشكاميا (السعي إلى طول العمر) – هكذا قال أتريا وسائر الحكماء.
البيت 1
रागादि-रोगान् सततानुषक्तान् अ-शेष-काय-प्रसृतान् अ-शेषान्
rāgādi-rogān satatānuṣaktān a-śeṣa-kāya-prasṛtān a-śeṣān
والآن نشرح فصل أيوشكاميا (السعي إلى طول العمر) – هكذا قال أتريا وسائر الحكماء.
▸ تعليقف.ف. فيتروف
تمييز المصطلحات
…الذي أزال أمراضًا مثل راغا (الشهوة) وموها (الوهم)…
بطاقات الكتب والأقسام
ثلاثة أنواع من البنية وكيف تحدد نوعك.
نباتات أساسية: الخصائص والاستخدام والجرعات.
الاختبار والخط الزمني
الحالات
- Defaultالحالة الهادئة
- Hover--bg-hover وحد بلون التمييز وارتفاع البطاقة 2 px
- Active--bg-active ونص أثقل
- Focusfocus-visible: إطار؛ وللحقول حدّ بلون التمييز
- Disabledopacity 0.4
- Playing--accent-glow على زر القراءة بصوت عالٍ
المسافات والزوايا والظلال والطبقات والحركات
باقي متغيرات النظامإلى جانب اللون والخط يصف النظام الشكل والسلوك: أي زوايا لأي عناصر، وكم «تعلو» البطاقة، وما فوق ماذا، وكيف تتحرك الأشياء.
| الزوايا | |
|---|---|
| 2–4 px | تمييز المصطلحات والعناصر الصغيرة |
| 8 px | --radius: الأزرار والحقول وبطاقات الأبيات |
| 10–14 px | بطاقات الكتب والأقسام وأزرار الإجراءات |
| 16–20 px | الشرائح وأزرار رأس الفصل |
| 24 px و999 px | الحبوب والتقدم والمبدّلات |
| 50% | الأيقونات المستديرة والصورة الرمزية |
| الظلال | |
|---|---|
| --shadow-sm | 0 1px 3px rgba(0,0,0,.06) |
| --shadow-md | 0 4px 16px rgba(0,0,0,.08) |
| Popover | 0 6px 24px rgba(0,0,0,.25) |
| Modal | 0 12px 48px rgba(0,0,0,.3) |
| Sidebar | 4px 0 32px rgba(0,0,0,.22) |
| Focus ring | 0 0 0 2px var(--accent) |
| طبقات z-index | |
|---|---|
| 10 | عناصر لاصقة |
| 200–300 | اللوحة الجانبية والطبقة المعتمة |
| 350–500 | النوافذ المنبثقة والمحادثة |
| 9000–9999 | التلميحات واللافتات |
| الحركات والانتقالات | |
|---|---|
| --transition | 0.18s ease — التمرير والحالات |
| versePulse | تمييز البيت عند اتباع رابط |
| verseTargetPulse | نبض ناعم للبيت المستهدف |
| chatDots | مؤشر الكتابة في روبوت المحادثة |
| نقاط التوقف | |
|---|---|
| ≤ 700 px | العمود الرئيسي والقوائم والبطاقات |
| ≤ 640 px | رأس الفصل والأزرار والكثافة |
| ≤ 600 px | تصبح اللوحة الجانبية قائمة منزلقة |
النمط الداكن
body.dark · استبدال المتغيراتالنمط الداكن ليس عكسًا للألوان بل لوحة مستقلة: صارت الخلفية بنية داكنة والتمييز ذهبيًا فاتحًا والبطاقات أفتح قليلًا من الخلفية. المبدّل في رأس اللوحة الجانبية ويُحفظ الاختيار في المتصفح. لا تتغير الصور والأيقونات: خلفيات الأيقونات شفافة.
05 / نسخة الجوال
الهاتف هو سيناريو القراءة الرئيسي
يقرأ الناس أساسًا على الهاتف، لذلك ليست نسخة الجوال سطح مكتب مصغّرًا. تتحول اللوحة الجانبية إلى قائمة منزلقة وتشغل واجهة القراءة العرض كله وتنطوي القوائم الطويلة.
06 / الوصف التقني
موقع ثابت بجافاسكربت خالصة دون أداة تجميع
التطبيق موقع ثابت من صفحة واحدة: HTML وملف CSS واحد ووحدات ES دون أطر عمل أو عملية بناء. يُفتح مباشرةً في المتصفح ولا يتطلب تسجيلًا ويعمل دون اتصال كـ PWA بعد الزيارة الأولى.
البنية
- موقع من صفحة واحدة بتوجيه عبر التجزئة: رابط مثل
#ashtanga/c0يقود إلى فصل محدد. - وحدات ES: app.js هو النواة وbooks.js سجل الكتب، إضافة إلى glossary وdiseases وquiz وfoodtable وcabinet وchatbot وicons.
- البيانات: كل كتاب ملف مستقل يُحمَّل عند فتحه، ولذلك تخفّ الشاشة الأولى.
- النصوص استُخرجت من طبعات مطبوعة وصيغت بصيغة واحدة «أصل ← IAST ← ترجمة».
PWA ودون اتصال
- Service worker: Cache First للثوابت وNetwork First للبيانات؛ والذاكرة المؤقتة بإصدار (
ayurveda-v565). - Manifest: وضع standalone وأيقونات 192 و512 px وأيقونات maskable واختصار «أشتانغا هريدايا».
- لافتة دون اتصال تُعلم بأن الكتب المقروءة سابقًا متاحة.
- Cache busting: إصدار واحد
?v=NNفي index.html وapp.js وbooks.js وsw.js.
ميزات المتصفح
- البحث في كل الكتب على العميل مع تمييز المطابقات وعدّاد النتائج.
- القراءة بصوت عالٍ للبيت عبر Web Speech API: السنسكريتية (hi-IN) والروسية والإنجليزية.
- Share API لرابط البيت ونسخ الرابط.
- الإعدادات في localStorage: النمط وحجم النص ولغة الواجهة.
- ثنائي اللغة: للواجهة والبيانات حقول روسية وإنجليزية (*_en).
جهة الخادم
- مكتب الخبير: تسجيل الدخول عبر Telegram Login Widget دون كلمات مرور؛ وتعديلات الفصول واقتراحات الجمهور.
- الخلفية: دوال serverless على Vercel؛ وإن لم تتوفر يبقى الموقع ثابتًا.
- المساعد الذكي: بحث في الأبيات المحمَّلة واستدعاء Gemini API.
- بوت تيليجرام وقناة: اشتراك ومنشور يومي ببيت.
- التحليلات: عدّاد زوار وYandex.Metrica.
| الملف | الحجم | الغرض |
|---|---|---|
| style.css | ~92 KB | ملف أنماط واحد: متغيرات ومكوّنات ونمطان و3 نقاط توقف |
| app.js | ~201 KB | النواة: التوجيه والقراءة والبحث والقراءة الصوتية والإعدادات |
| books.js | ~244 KB | سجل تسعة كتب وأسماء الأجزاء والفصول (RU/EN) |
| glossary.js | ~206 KB | 397 مصطلحًا سنسكريتيًا وتلميحات داخل النص |
| quiz.js | ~21 KB | 60 سؤالًا وحساب البنية |
| icons.js | ~14 KB | 91 أيقونة ودالة icon(key) |
| sw.js | ~3 KB | service worker للعمل دون اتصال |
مقتطف: أيقونة كدالة
// مفتاح ← لون ومسار؛ الخلفية والخط يتشاركان لونًا واحدًا export function icon(key) { const [c, paths] = G[key]; return `<svg class="app-icon" viewBox="0 0 24 24" fill="none"> <rect x="1.5" y="1.5" width="21" height="21" rx="6.5" fill="${c}" fill-opacity="0.16"/> <g stroke="${c}" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${paths}</g></svg>`; }
07 / إمكانية الوصول والتفاصيل
اهتمام بالتفاصيل: من رابط التخطي إلى القراءة الصوتية
- رابط «انتقل إلى المحتوى» في بداية الصفحة ووسوم aria مفيدة على الأزرار.
- منطقة حيّة لقارئات الشاشة ولافتة منفصلة للعمل دون اتصال بـ role=status.
- حجم النص بأربعة مستويات ويُحفظ الاختيار.
- نمط داكن للقراءة مساءً.
- قراءة البيت بصوت عالٍ: السنسكريتية والروسية والإنجليزية.
- تركيز مرئي بلوحة المفاتيح وتلميحات على أيقونات الإجراءات.
- إخلاء مسؤولية طبي يمكن إغلاقه لكنه متاح دائمًا.
- كتلة مصادر في كل مقالة من الموسوعة.
08 / السيو والبيانات الوصفية
ماذا يرى محرك البحث
للصفحة بيانات وصفية موسّعة: title وdescription بعبارات البحث الأساسية («السمهيتات الكلاسيكية للأيورفيدا» و«أشتانغا هريدايا» و«تشاراكا سمهيتا» و«اختبار براكريتي») وcanonical وOpen Graph وTwitter Card بصورة 1200×630 وmanifest وأيقونات الشاشة الرئيسية. ويمنح البحث في الموقع ومقالات الموسوعة النص «ذيلًا طويلًا» من الاستعلامات.
- Title: «السمهيتات الكلاسيكية للأيورفيدا — مكتبة مجانية على الإنترنت»
- Description بأرقام: الأبيات والكتب والمسرد والموسوعة
- Open Graph وTwitter Card بصورة 1200×630
- Canonical وmanifest وapple-touch-icon
- كلمات مفتاحية: أيورفيدا، سمهيتا، أشتانغا هريدايا، تشاراكا، سوشروتا
09 / الروابط
المشروع الحي والشيفرة المصدرية
| الموقع | ayurvedareader.ru |
| الشيفرة المصدرية | github.com/maksutovdesign/ayurveda-reader |
| قناة تيليجرام | @AyurvedaReader |
| بوت تيليجرام | @AyurvedaReaderBot |
| صفحة المشروع | قارئ الأيورفيدا — كمنتج وتطوير |
ناقش المشروع
هل تحتاج واجهة كهذه؟
أصمّم تطبيق ويب أو موقعًا من الصفر: البنية ونظام التصميم وتخطيطات متجاوبة وبرمجة. حدّثني عن مهمتك — أرد خلال يوم.
اطلب تصميمًا10 / مشاريع أخرى في هذه الخدمة
▸ تعليقف.ف. فيتروف