Maksutov Design ماكسوتوف ديزاين
تصميم ويب نظام تصميم PWA RU / EN

قارئ الأيورفيدا

تطبيق ويب لقراءة النصوص الكلاسيكية للأيورفيدا: 9 كتب و841 فصلًا وأكثر من 34,500 بيت بالنص الأصلي والنقحرة والترجمة. صمّمتُ الواجهة وبنيتُ نظام تصميم بنمطين فاتح وداكن ورسمتُ 91 أيقونة وفكّرتُ في نسخة الجوال ونفّذتُ كل شيء بجافاسكربت خالصة.

01 / الحجم والمهمة

مكتبة مصادر أصلية يسهل قراءتها على أي شاشة

9كتب: من «أشتانغا هريدايا» إلى «راسارتنا سموتشايا»
841فصلًا في قارئ واحد
34,500+بيت: ديفاناغاري وIAST وترجمة
241مقالة موسوعية في 45 قسمًا
397مصطلح سنسكريتي في المسرد
84مرضًا في مسرد مستقل
113علاجًا منزليًا
60سؤالًا في اختبار البنية

كانت المهمة الأصلية جعل ما يُقرأ عادةً في ملفات PDF والمسوحات سهل القراءة: النص السنسكريتي بجانب النقحرة العلمية والترجمة والتعليقات والمصطلحات المشروحة. وينبغي أن يُعثر على أي بيت في ثوانٍ، وأن يُقرأ الفصل الطويل دون إجهاد للعين.

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

02 / بنية الواجهة

تنقل جانبي وعمود قراءة واحد ولا شيء زائد

تتكوّن الشاشة من منطقتين. العمود الجانبي بعرض 280 px هو التنقل: الشعار ومبدّلا اللغة والنمط والبحث في كل الكتب واختيار الكتاب والفصول بحسب الأجزاء (sthana) وعشرة أقسام للتطبيق. والمنطقة الأخرى هي المحتوى: ترحيب وبطاقات كتب في الصفحة الرئيسية، وعمود نص ضيق بطول سطر مريح في القارئ.

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

ayurvedareader.ru
01 — الرئيسية: المكتبة
01 — الرئيسية: المكتبةترحيب وإحصاءات في شرائح وشبكة من تسع بطاقات كتب. لكل كتاب أيقونته الملونة.
ayurvedareader.ru
02 — القارئ
02 — القارئعنوان الفصل ومبدّل «ديفاناغاري / نقحرة» والانتقال إلى بيت بالرقم وبطاقة بيت بثلاث طبقات من النص.

تشريح بطاقة البيت

  • رقم البيت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 / الشاشات

تسعة أقسام — نظام واحد

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

ayurvedareader.ru
03 — البحث في كل الكتب
03 — البحث في كل الكتببحث فوري في نص تسعة كتب مع تمييز المطابقات: كلمة «доша» تعطي 1,443 نتيجة، وكل نتيجة تقود إلى بيت.
ayurvedareader.ru
04 — الموسوعة
04 — الموسوعة45 قسمًا بأيقونات ملونة وعدّاد مقالات ووصف قصير. يفتح القسم قائمة مقالات، وتفتح المقالة نصًّا كاملًا مع المصادر.
ayurvedareader.ru
05 — مقالة من الموسوعة
05 — مقالة من الموسوعةمقالة: عنوان وملخص قصير ونص منظّم وقائمة مصادر في الأسفل.
ayurvedareader.ru
06 — مسرد المصطلحات
06 — مسرد المصطلحات397 مصطلحًا سنسكريتيًا مع النقحرة والشرح ورابط إلى مقالة في الموسوعة وزر مشاركة.
ayurvedareader.ru
07 — مسرد الأمراض
07 — مسرد الأمراض84 مرضًا: الدوشا والفئة والوصف وتلميح للعلاج مع ربط بفصول المصادر الأصلية.
ayurvedareader.ru
08 — العلاجات المنزلية
08 — العلاجات المنزلية113 علاجًا في قائمة قابلة للبحث وبطاقات بالمكوّنات وطريقة الاستخدام.
ayurvedareader.ru
09 — جدول أوقات الطعام
09 — جدول أوقات الطعامجدول بأفضل وقت لتناول كل طعام: مرشحات للفئات ومقياس «من أي ساعة إلى أي ساعة» لكل منتج.
ayurvedareader.ru
10 — اختبار البنية
10 — اختبار البنية60 سؤالًا في ثلاثة أقسام — فاتا وبيتا وكافا: منزلق من 0 إلى 6 وتقدّم ونتيجة نهائية.
ayurvedareader.ru
11 — المصادر
11 — المصادرقائمة بالطبعات المستخدمة: المترجمون والمعلّقون وأصل كل نص في الموقع.

04 / نظام التصميم

نظام تصميم كامل: ألوان وخطوط وأيقونات ومكوّنات وحالات

يعيش نظام التصميم في متغيرات CSS ومجموعة مكوّنات مشتركة واحدة — وعليه تقوم كل الشاشات. وفيما يلي يُفكَّك بالكامل: متغيرات الألوان لنمطين وثلاث عائلات خطوط وسلّم طباعي و91 أيقونة ومكوّنات حيّة، إضافة إلى الزوايا والظلال والطبقات والحركات. كل الأمثلة في هذه الصفحة HTML حقيقي لا صور.

4.1

الألوان

لوحة «ورقية» دافئة ونمطان فاتح وداكن

بُنيت اللوحة حول الورق الدافئ وخط التمييز البني «الحبري»: خلفية كريمية دافئة ونص بني قريب من الأسود ولون تمييز ذهبي داكن. لا ألوان باردة في الواجهة — لا تستخدمها إلا ترميزات ألوان الأيقونات وألوان الدوشا الثلاثة في الاختبار. كل الألوان متغيرات على :root، ويستبدلها النمط الداكن بالفئة body.dark.

النمط الفاتح

--bg#faf8f4
--bg-sidebar#f2ede4
--bg-card#ffffff
--bg-verse#fffef8
--bg-comment#f7f5f0
--bg-hover#ede8dd
--bg-active#d9c9a8
--text#2c2416
--text-muted#776a52
--text-sidebar#4a3e2c
--accent#7a5c2e
--accent-light#c9a96e
--border#e0d8c8
--border-strong#c8bda8
--verse-num#9a7d4a
--comment-tag#7a8a6a
--search-bg#fffdf8
--term-bgrgba(122,92,46,.10)
--term-borderrgba(122,92,46,.30)
--accent-glowrgba(122,92,46,.15)

النمط الداكن

--bg#1a1712
--bg-sidebar#141210
--bg-card#1f1c17
--bg-verse#1f1c17
--bg-comment#18160f
--bg-hover#2a261d
--bg-active#3d3220
--text#e8dfc8
--text-muted#9a8d6e
--text-sidebar#c8b898
--accent#c9a96e
--accent-light#e8c98a
--border#2e2a20
--border-strong#3e3828
--verse-num#c9a96e
--comment-tag#8a9a7a
--search-bg#1f1c17
--term-bgrgba(201,169,110,.12)
--term-borderrgba(201,169,110,.30)
--accent-glowrgba(201,169,110,.15)

ألوان الدوشا في اختبار البنية

فاتا Vataالهواء · خفة وحركة
بيتا Pittaالنار · دفء وأيض
كافا Kaphaالأرض والماء · ثبات

يتغير لون التمييز بين النمطين: #7a5c2e (ذهبي داكن) في الفاتح و#c9a96e (ذهبي فاتح) في الداكن، فيبقى تباين الأزرار والروابط. وتأخذ الحالات التفاعلية ألوانها من --bg-hover و--bg-active، ويأخذ تمييز المصطلحات من --term-bg و--term-border.

4.2

الطباعة

Georgia · system-ui · Noto Sans Devanagari

للنظام ثلاث عائلات خطوط ولكل منها دور. Georgia (مزوَّد) للعناوين والترجمة والنقحرة: يمنح نبرة «كتابية». وsystem-ui للواجهة والنص الأساسي: خط نظام التشغيل الأصلي بلا تحميل. وNoto Sans Devanagari هو الخط الوحيد المحمَّل ويلزم للسنسكريتية.

Display / H1Georgia 700 · 32 / 38.4 px
السمهيتات الكلاسيكية للأيورفيدا
Chapter titleGeorgia 700 · 27.2 / 34 px
الفصل 1. Ayushkamiya Adhyaya
Subtitlesystem-ui مائل · 14 / 22.4 px
السعي إلى طول العمر
Bodysystem-ui 400 · 15 / 27 px
المجد للطبيب الذي لا نظير له، الذي أزال بلا بقية أمراضًا مثل راغا (الشهوة) وغيرها.
DevanagariNoto Sans Devanagari 400 · 18 / 36 px · +0.36
रागादि-रोगान् सततानुषक्तान् अ-शेष-काय-प्रसृतान्
IASTGeorgia مائل · 14 / 25.2 px · +0.14
rāgādi-rogān satatānuṣaktān a-śeṣa-kāya-prasṛtān
TranslationGeorgia 400 · 15.5 / 28.2 px
والآن نشرح فصل أيوشكاميا — هكذا قال أتريا وسائر الحكماء.
Commentsystem-ui 400 · 14.5 / 26.1 px
تعليق ف. ف. فيتروف: كلمة «أيوس» تجمع حياة الجسد والحواس والعقل والروح.
Label / eyebrowsystem-ui 700 · 10–11 px · أحرف كبيرة صغيرة +0.8–1 px
Sutrasthana · البيت 1 · تعليق
UI controlsArial 600 · 12–13 px
الرئيسية · أشتانغا هريدايا · البحث في النص…
الدورالعائلةالحجم / ارتفاع السطرالوزنالنمط / التباعد
العناوينGeorgia, Times New Roman, serif27–32 px / 34–38 px700عادي
النص الأساسيsystem-ui, -apple-system, sans-serif15–16 px / 27 px400عادي
السنسكريتيةNoto Sans Devanagari, serif18 px / 36 px400+0.36 px
IAST والترجمةGeorgia14–15.5 px / 25–28 px400مائل لـ IAST، +0.14 px
الوسومsystem-ui9–11 px / 16 px700أحرف كبيرة صغيرة، +0.8–1 px
الأزرار والحقولArial11–13 px600+0.24–0.33 px

أربعة أحجام للقراءة

يختار المستخدم حجم النص بزر «A» ويُحفظ في المتصفح: ينطبق المقياس على النص الأساسي وكل الأحجام المشتقة.

small · 14 px

صغير

normal · 16 px

عادي

large · 18 px

كبير

xlarge · 21 px

كبير جدًا

4.3

الأيقونات

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

terms
pulse
mortar
book
books
clock
beaker
user
friends
heart
chat

الواجهة · 17

lotus
offline
speaker
lock
copy
send
close
pencil
dna
medical
pray
arrow_back
readbook
feat_term
feat_search
feat_theme
share

الكتب · 9

leaf
scroll
scalpel
magnifier
flask
sprout
bookmark
baby
flask-conical

جدول الطعام · 9

ft_dairy
ft_spice
ft_fruit
ft_oil
ft_nuts
ft_veggie
ft_grain
ft_drink
ft_shroom

الموسوعة · 45

enc_foundations
enc_prakriti
enc_nutrition
enc_herbs
enc_yoga
enc_massage
enc_beauty
enc_lifestyle
enc_digestion
enc_psychology
enc_panchakarma
enc_diagnostics
enc_marma
enc_seasonal
enc_quiz
enc_prana
enc_rasayana
enc_dinacharya
enc_food_wisdom
enc_tantra
enc_home_remedy
enc_cleanse
enc_kitchen
enc_alchemy
enc_elements
enc_family
enc_polarity
enc_philosophy
enc_history
enc_mudra
enc_sound
enc_gems
enc_pediatrics
enc_pk_protocol
enc_aroma
enc_eye
enc_preparations
enc_womens
enc_pk_joshi
enc_srota
enc_clinical
enc_chakra
enc_aroma_form
enc_vedic
enc_three_paths

تبدو الأيقونات متطابقة في النمطين الفاتح والداكن: الخلفية شبه شفافة فتتلوّن بلون الأرضية.

4.4

المكوّنات

أزرار وحقول وبطاقات وبيت وتعليق واختبار

المكوّنات مبنية حيّة من المتغيرات نفسها — مرّر المؤشر لترى الحالات. وفيما يلي أهمها.

أزرار وشرائح ومبدّلات

9 كتب841 فصلًا
⌂ الرئيسيةAرقم البيت →←
AR☀

كل العناصر التفاعلية «حبوب» أو بلاطات بزوايا 8–20 px؛ وتُملأ الحالة النشطة بـ --bg-active والإجراء الرئيسي بلون التمييز.

حقول الإدخال واختيار الكتاب

البحث في النص…

اختر كتابًا

أشتانغا هريدايا▾

قائمة الأقسام

الأقسام

مسرد المصطلحات
الموسوعة
أوقات الطعام
اختبار البنية

قائمة الفصول

SUTRASTHANA
1.Ayushkamiya Adhyaya
2.Dinacharya Adhyaya
3.Ritucharya Adhyaya

البيت 1

रागादि-रोगान् सततानुषक्तान् अ-शेष-काय-प्रसृतान् अ-शेषान्

rāgādi-rogān satatānuṣaktān a-śeṣa-kāya-prasṛtān a-śeṣān

والآن نشرح فصل أيوشكاميا (السعي إلى طول العمر) – هكذا قال أتريا وسائر الحكماء.

RU

▸ تعليقف.ف. فيتروف

البيت 1

रागादि-रोगान् सततानुषक्तान् अ-शेष-काय-प्रसृतान् अ-शेषान्

rāgādi-rogān satatānuṣaktān a-śeṣa-kāya-prasṛtān a-śeṣān

والآن نشرح فصل أيوشكاميا (السعي إلى طول العمر) – هكذا قال أتريا وسائر الحكماء.

RU

▸ تعليقف.ف. فيتروف

تمييز المصطلحات

…الذي أزال أمراضًا مثل راغا (الشهوة) وموها (الوهم)…

بطاقات الكتب والأقسام

أشتانغا هريدايافاغبهاتا · القرن 7 م118 فصلًا · 7000+ بيت
تشاراكاتشاراكا · دريدهابالا · القرون 1–4 م120 فصلًا · 9000+ بيت
البنية (براكريتي)
4 مقالات

ثلاثة أنواع من البنية وكيف تحدد نوعك.

الأعشاب والنباتات
20 مقالة

نباتات أساسية: الخصائص والاستخدام والجرعات.

الاختبار والخط الزمني

0 / 60 سؤالًا
فاتا Vata20 سؤالًا
1. أنا بطبيعتي نشيط جدًا وأنجز الأمور عادةً بسرعة
062
الحليب06:00 – 21:00

الحالات

  • Defaultالحالة الهادئة
  • Hover--bg-hover وحد بلون التمييز وارتفاع البطاقة 2 px
  • Active--bg-active ونص أثقل
  • Focusfocus-visible: إطار؛ وللحقول حدّ بلون التمييز
  • Disabledopacity 0.4
  • Playing--accent-glow على زر القراءة بصوت عالٍ
4.5

المسافات والزوايا والظلال والطبقات والحركات

باقي متغيرات النظام

إلى جانب اللون والخط يصف النظام الشكل والسلوك: أي زوايا لأي عناصر، وكم «تعلو» البطاقة، وما فوق ماذا، وكيف تتحرك الأشياء.

الزوايا
2–4 pxتمييز المصطلحات والعناصر الصغيرة
8 px--radius: الأزرار والحقول وبطاقات الأبيات
10–14 pxبطاقات الكتب والأقسام وأزرار الإجراءات
16–20 pxالشرائح وأزرار رأس الفصل
24 px و999 pxالحبوب والتقدم والمبدّلات
50%الأيقونات المستديرة والصورة الرمزية
الظلال
--shadow-sm0 1px 3px rgba(0,0,0,.06)
--shadow-md0 4px 16px rgba(0,0,0,.08)
Popover0 6px 24px rgba(0,0,0,.25)
Modal0 12px 48px rgba(0,0,0,.3)
Sidebar4px 0 32px rgba(0,0,0,.22)
Focus ring0 0 0 2px var(--accent)
طبقات z-index
10عناصر لاصقة
200–300اللوحة الجانبية والطبقة المعتمة
350–500النوافذ المنبثقة والمحادثة
9000–9999التلميحات واللافتات
الحركات والانتقالات
--transition0.18s ease — التمرير والحالات
versePulseتمييز البيت عند اتباع رابط
verseTargetPulseنبض ناعم للبيت المستهدف
chatDotsمؤشر الكتابة في روبوت المحادثة
نقاط التوقف
≤ 700 pxالعمود الرئيسي والقوائم والبطاقات
≤ 640 pxرأس الفصل والأزرار والكثافة
≤ 600 pxتصبح اللوحة الجانبية قائمة منزلقة
4.6

النمط الداكن

body.dark · استبدال المتغيرات

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

ayurvedareader.ru
12 — القارئ في النمط الداكن
12 — القارئ في النمط الداكنالبيت نفسه وطبقات النص نفسها — لوحة مختلفة. يبقى تباين النص الأساسي عاليًا ويُبرز التمييز الذهبي العناوين وأرقام الأبيات.
ayurvedareader.ru
13 — الرئيسية في النمط الداكن
13 — الرئيسية في النمط الداكنبطاقات الكتب وشرائح الإحصاء على ورق داكن.

05 / نسخة الجوال

الهاتف هو سيناريو القراءة الرئيسي

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

قائمة منزلقةتُفتح اللوحة الجانبية بزر في الزاوية وتُغلق بلمسة على الخلفية المعتمة. وكتلة «الأقسام» مطوية افتراضيًا ليظهر الفصل فورًا.
القراءةيشغل عمود النص العرض كله ويبقى ارتفاع السطر وتلتف أزرار الفصل في صف واحد.
أهداف لمس مريحةعناصر القوائم بلاطات بعرض السطر كله، ومنزلق الاختبار كبير ويتحرك بالإصبع.
النمط الداكنمناسب للقراءة مساءً — يُبدَّل بالطريقة نفسها كما على سطح المكتب.
14 — الرئيسية والقائمة والقارئ والبحث
14 — الرئيسية والقائمة والقارئ والبحثأربع حالات متتالية: ترحيب وقائمة منزلقة وفصل مع بيت ونتائج بحث.
15 — الموسوعة والمسرد والاختبار وأوقات الطعام
15 — الموسوعة والمسرد والاختبار وأوقات الطعامالمكوّنات نفسها على شاشة ضيقة: البطاقات في عمود واحد والمقاييس بالعرض كله.
16 — النمط الداكن على الهاتف
16 — النمط الداكن على الهاتفالرئيسية واختبار البنية في النمط الداكن.

06 / الوصف التقني

موقع ثابت بجافاسكربت خالصة دون أداة تجميع

التطبيق موقع ثابت من صفحة واحدة: HTML وملف CSS واحد ووحدات ES دون أطر عمل أو عملية بناء. يُفتح مباشرةً في المتصفح ولا يتطلب تسجيلًا ويعمل دون اتصال كـ PWA بعد الزيارة الأولى.

0أطر عمل وأدوات تجميع
~600 KBالتحميل الأولي
~28 MBنصوص الكتب وتُحمَّل كسولًا
v565رقم الإصدار لإبطال الذاكرة المؤقتة

البنية

  • موقع من صفحة واحدة بتوجيه عبر التجزئة: رابط مثل #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 KB397 مصطلحًا سنسكريتيًا وتلميحات داخل النص
quiz.js~21 KB60 سؤالًا وحساب البنية
icons.js~14 KB91 أيقونة ودالة icon(key)
sw.js~3 KBservice worker للعمل دون اتصال

مقتطف: أيقونة كدالة

icons.js
// مفتاح ← لون ومسار؛ الخلفية والخط يتشاركان لونًا واحدًا
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
  • كلمات مفتاحية: أيورفيدا، سمهيتا، أشتانغا هريدايا، تشاراكا، سوشروتا

ناقش المشروع

هل تحتاج واجهة كهذه؟

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

اطلب تصميمًا

10 / مشاريع أخرى في هذه الخدمة