Design System
🇧🇷 Português 🇩🇪 Deutsch 🇨🇳 中文 🇯🇵 日本語 🇦🇪 العربية 🇮🇳 हिन्दी 🇷🇺 Русский 🇺🇸 English
عرض الأمثلة
Cerne v0.1

نظام تصميم كامل، من الصفر، دون أي تبعيات خارجية

Cerne إطار عمل قائم بذاته من CSS وJS — دون CDN، دون jQuery، دون بناء إلزامي في الإنتاج. صُمِّم لخدمة مجالات متعددة بنفس نظام الرموز والمكوّنات: لوحات التحكم الإدارية، وبيئات التعلّم، وأنظمة الإدارة، وحجز القاعات، والمدونات.

ITCSS + CUBE CSS أدوات مساعدة أولًا + مكوّنات وضع داكن أصيل متاح افتراضيًا بدون تبعيات
لماذا يوجد Cerne

أداة قوية لعصر تطوير الويب الحديث

Cerne حاليًا في الإصدار 0.1 — نظام تصميم كامل، مبنيّ من الصفر، بهدف بسيط: منح أي شخص أساسًا سريعًا وقويًا ومجانيًا لنقل الأنظمة من الورق إلى الإنترنت، دون الاعتماد على CDN أو ترخيص أو الارتباط بمورّد واحد أو جدار دفع. مفتوح المصدر، متاح للجميع، إلى الأبد.

ما هو جاهز بالفعل في الإصدار 0.1

  • أكثر من 40 مكوّنًا جاهزًا للإنتاج — هيكل تطبيق، جدول بيانات، تقويم، رسوم بيانية، دردشة، مشغّل فيديو، نوافذ منبثقة، نماذج متقدمة، والمزيد.
  • 43 مثالًا كاملًا جاهزًا للنسخ: لوحات تحكم، تجارة إلكترونية، بث، بريد ويب، شبكة اجتماعية، بوابة إخبارية، دردشة LLM، تلفاز ذكي...
  • بدون تبعيات خارجية — دون jQuery، دون CDN، دون بناء إلزامي في الإنتاج. يُفتَح بنقرة مزدوجة على ملف HTML.
  • وضع داكن أصيل، مع احترام تلقائي لـ prefers-reduced-motion/prefers-color-scheme.
  • RTL حقيقي عبر الخصائص المنطقية — وليس حيلة انعكاس.
  • إتاحة WCAG 2.1 AA افتراضيًا في كل مكوّن تفاعلي.
  • تدويل حقيقي — 168 صفحة مثال مترجمة إلى CJK والعربية والهندية والروسية، وليس فقط الواجهة.
  • CSS حديث حقيقي — استعلامات الحاوية، وطبقات التتالي، وcolor-mix()، وclamp()، وكثافة قابلة للتهيئة عبر data-density.

الإصدار 0.1 اختيارٌ لا قيدٌ: فالنواة متينة بالفعل وقيد الاستخدام الفعلي في الأمثلة الـ43 أعلاه، لكن المشروع يستمر في التطور علنًا — كل إصدار جديد يضيف المزيد من العناصر الأساسية واللغات والمكوّنات، دون كسر ما هو موجود بالفعل.

RV
Ricardo Cezar Volert كوريتيبا، بارانا، البرازيل

مبتكر ومشرف صيانة Cerne. صمّم Ricardo الإطار بأكمله — الرموز والمكوّنات والأمثلة الـ43 والمتغيّرات الإقليمية — وبناه بالتعاون مع الذكاء الاصطناعي (Claude من Anthropic)، بهدف ترك أداة جيدة ومفتوحة ومجانية لمن يبني الجيل القادم من أنظمة الويب.

الموقع الإلكتروني Instagram GitHub Codeberg Lattes ORCID LinkedIn

التثبيت

انسخ الملفات المُجمَّعة من dist/ إلى مشروعك وأشِر إليها مباشرة. لا حاجة إلى أي خطوة بناء لاستخدام الإطار.

<link rel="stylesheet" href="dist/css/cerne.css">

<!-- في نهاية body: سكربت كلاسيكي (وليس type="module") لإتاحة window.Cerne -->
<script src="dist/js/cerne.js"></script>

لتجنّب وميض السمة الخاطئة قبل تحميل JS، أدرج هذا المقطع في <head>، قبل CSS: 

<script>
  var t = localStorage.getItem('cerne-theme');
  if (t) document.documentElement.setAttribute('data-theme', t);
</script>

الألوان

لوحات أساسية بـ11 درجة + طبقة دلالية (--cerne-color-primary، -hover، -active، -subtle...) تُبدّل القيمة تلقائيًا بين السمتين الفاتحة والداكنة. القيم أدناه تُقرأ مباشرة من CSS المُجمَّع — ولا تخرج عن التزامن مع هذا التوثيق أبدًا.

التباعد

مقياس بوحدة 4px، متاح كـ--cerne-space-* وكأدوات مساعدة p-*، وm-*، وgap-*.

الطباعة

مقياس نمطي (~1.25)، والخط الافتراضي هو حزمة خطوط النظام (صفر طلبات شبكة). استبدل --cerne-font-sans لاستخدام خط ذاتي الاستضافة.

الانحناء والظل

ارتفاع بوصفات مختلفة للفاتح/الداكن — الظلال الداكنة لا تختفي على خلفية داكنة.

Radius

الظل

الشبكة

واجهة برمجية كلاسيكية .row/.col-* فوق CSS Grid، إضافة إلى أدوات مساعدة .grid-cols-* / .col-span-* ببادئات متجاوبة md:، lg:.

<div class="row">
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
</div>

هيكل التطبيق

العنصر الأساسي المركزي للوحات التحكم: شريط جانبي + شريط علوي + محتوى رئيسي عبر grid-template-areas، مع طيّ إلى لوحة جانبية تحت lg. هذه الصفحة نفسها تستخدم .app-shell.

<div class="app-shell" id="app-shell">
  <div class="app-shell__backdrop"></div>
  <aside class="app-shell__sidebar">...</aside>
  <header class="app-shell__topbar">...</header>
  <main class="app-shell__main">...</main>
</div>

الأزرار

متغيّرات صلبة ومحدَّدة وشبحية لكل لون دلالي، إضافة إلى أحجام وحالة تحميل.

<button class="btn btn-primary">أساسي</button>
<button class="btn btn-outline-primary">محدَّد</button>
<button class="btn btn-ghost-primary">شبحي</button>

النماذج

عناصر تحكم أصيلة منسّقة، وتحقق عبر data-cerne-validate (واجهة Constraint Validation)، ورسائل خطأ قابلة للتخصيص عبر السمات.

<form data-cerne-validate novalidate>
  <div class="form-group">
    <label class="form-label" for="email">البريد الإلكتروني</label>
    <input class="form-control" type="email" id="email" required
      data-error-required="يرجى إدخال بريدك الإلكتروني.">
    <span class="form-error"></span>
  </div>
</form>

نماذج إضافية

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

القوة: —
الأسهم للتنقل، Enter للاختيار، Esc للإغلاق. يظهر مصطلح البحث داخل <mark>.
0/140
اسحب الملفات هنا أو انقر للاختيار 
<div class="form-floating">
  <input class="form-control" placeholder=" " id="name">
  <label for="name">الاسم الكامل</label>
</div>

<div class="otp-input" data-cerne-otp>
  <input class="otp-digit"> <input class="otp-digit"> ...
</div>

<div class="tags-input" data-cerne-tags-input>
  <input type="text" placeholder="أضف وسمًا...">
</div>

<div class="segmented" role="tablist" data-cerne-segmented>
  <button type="button" class="segmented-item is-active" role="tab">30 يومًا</button>
  <!-- ... -->
</div>

<div class="file-drop" data-cerne-file-upload data-cerne-file-list="#file-list">
  <input type="file" multiple>
  <span>اسحب الملفات هنا أو انقر للاختيار</span>
</div>
<div class="file-list" id="file-list"></div>

البطاقات

حجوزات اليوم 24 +12% مقارنة بالأمس
عنوان البطاقة
محتوى البطاقة بنص توضيحي.

الوسائط

.carousel (شريحة واحدة في كل مرة، مع نقاط وتشغيل تلقائي اختياري) و.shelf (صفّ بتمرير أفقي ومتوافق مع RTL) — للواجهة الرئيسية لبوابة مؤسسية وكتالوجات بنمط البث، على التوالي.

دائري (data-cerne-carousel-autoplay)

الشريحة 1
الشريحة 2
الشريحة 3

رفّ (مرّر الفأرة لإظهار الأسهم)

رسم توضيحي لجبال عند الغروب
رسم تجريدي لصورة شخصية
رسم توضيحي لجبال عند الغروب، بالأبيض والأسود
رسم تجريدي لصورة شخصية
رسم توضيحي لجبال عند الغروب 
<div class="carousel" data-cerne-carousel data-cerne-carousel-autoplay="5000">
  <div class="carousel-track">
    <div class="carousel-slide">...</div>
  </div>
  <button data-cerne-carousel-prev>‹</button>
  <button data-cerne-carousel-next>›</button>
  <div class="carousel-dots"></div>
</div>

<div class="shelf" data-cerne-shelf>
  <button data-cerne-shelf-prev>‹</button>
  <div class="shelf-track">
    <div class="shelf-item"><img src="poster.jpg" alt="..." /></div>
  </div>
  <button data-cerne-shelf-next>›</button>
</div>

الفيديو

Cerne.VideoPlayer — تحسين تدريجي فوق ترميز الفيديو الموجود (لا يفرض HTML خاصًا به): تشغيل/إيقاف مؤقت، وتقديم بالنقر، وصوت، وتحكم بالسرعة. يعمل بـ "ساعة محاكاة" عند عدم وجود <video> حقيقي (كما أدناه)، أو يعكس <video> أصيلًا (MP4، HLS عبر hls.js...) عند تمرير [data-video-element] — التوصيل الحقيقي عبر البث التكيّفي مسؤولية من يقوم بالتنفيذ، خارج نطاق إطار عمل CSS/JS.

0:00 / 0:00
السرعة — 1x
<div class="player" id="player" data-duration="196">
  <button data-video-toggle>▶</button>
  <div class="player-controls">
    <div class="progress" data-video-seek><div class="progress-bar" data-video-fill></div></div>
    <button data-video-mute-toggle>🔊</button>
    <input type="range" data-video-volume min="0" max="1" step="0.05" value="1">
    <span data-video-time>0:00 / 0:00</span>
    <button data-video-speed="1.5">1.5x</button>
  </div>
</div>

<script>
  new Cerne.VideoPlayer(document.getElementById("player"), { duration: 196 });
</script>

أمثلة كاملة: فيديو بترجمات WebVTT، بث مع ميزة "الحلقة التالية"، بث مباشر live: true، تلفاز ذكي بتنقّل عبر لوحة الاتجاهات.

الجداول وجدول البيانات

.table للجداول الثابتة؛ يضيف [data-cerne-datatable] ترتيبًا وبحثًا وترقيم صفحات من جانب العميل دون أي تبعية.

الاسم المادة التقدّم
Marina Silvaشبكات الحاسوب92%
Diego Souzaقواعد البيانات78%
Ana Beatrizالخوارزميات65%
Lucas Pereiraشبكات الحاسوب40%
Juliana Meloأنظمة التشغيل88%
Rafael Costaقواعد البيانات55%

المحتوى التحريري

أعمدة، وصناديق إبراز، وتمييز نصي مع ملاحظة توضيحية، وشريط تقدّم القراءة — للمدونة أو البوابة الإخبارية أو أي نص طويل ضمن .prose. بالمناسبة، انظر أعلى الشاشة: الشريط الرفيع الملوّن فوق القائمة هو .reading-progress الذي يتتبّع تمرير صفحة التوثيق هذه نفسها.

صناديق (.callout)

اقرأ أيضًا
رابط إلى مقالة أخرى ذات صلة.
تنبيه أو تصحيح مُبرَز في منتصف النص.
ملاحظة توضيحية لمصطلح مميَّز بـ<mark> في الفقرة أعلاه — بأسلوب "مسرد المصطلحات"/"الذكاء الاصطناعي يشرح" في البوابات الإخبارية.

تمييز نصي (<mark data-cerne-reveal="mark">) + صندوق مسرد مصطلحات — يُلوَّن التمييز من اليسار إلى اليمين (أو العكس مع dir="rtl") عند دخول المصطلح إلى الشاشة، بدلًا من الظهور جاهزًا دفعة واحدة.

أكّد المقرِّر أن الإطار التنظيمي الجديد يغيّر إجراءات الموافقة في الجلسة العامة.

الإطار التنظيمي هو مجموعة القواعد التي تحكم قطاعًا محددًا، والتي يُنشئها أو يعدّلها قانون أو مرسوم.

أعمدة نصية (.columns-2 / .columns-3، ضمن .prose)

العمود الأول: يتدفق النص عموديًا وينتقل إلى العمود التالي.

العمود الثاني: مفيد لقوائم قصيرة من النقاط البارزة أو المسارد أو الاقتباسات — يطوى إلى عمود واحد تحت md.

<p><mark data-cerne-reveal="mark">الإطار التنظيمي</mark> الجديد يغيّر إجراءات الموافقة.</p>
<div class="callout callout-glossary">
  <svg class="callout-icon"><use href="sprite.svg#icon-search"></use></svg>
  <div class="callout-body"><strong>الإطار التنظيمي</strong> هو...</div>
</div>

<div class="columns-2"><p>...</p><p>...</p></div>

<div class="reading-progress"><div class="reading-progress-bar"></div></div>

شاهد مثالًا كاملًا في سياقه في منشور المدونة أو في مقالة البوابة الإخبارية.

النوافذ المنبثقة واللوحات الجانبية

لوحة جانبية

تُستخدَم للتصفية أو سلة التسوق أو التفاصيل السريعة دون مغادرة الصفحة.

التنبيهات والإشعارات

تم بنجاح
تم تأكيد حجزك.
تنبيه
هذا الموعد يكاد يكون ممتلئًا.

التقويم والحجز

شبكة جدول أسبوعي لحجز القاعات — شاهد المثال الكامل في الحجز.

مؤكَّد معلَّق حجزي

الرسوم البيانية

رسوم بيانية SVG صغيرة دون تبعيات (Cerne.Chart.bar/line/donut).

مكوّنات إضافية

مجموعة قوائم، ومؤشر تحميل، وتقييم، وواجهة رئيسية، وتسعير — للمتاجر والبوابات المؤسسية وصفحات التسويق والكتالوجات.

نظرة عامة الإعدادات الإشعارات
4.2 (128)
الأكثر شيوعًا
Pro
49 ريال/شهر
  • مستخدمون غير محدودين
  • دعم ذو أولوية
<div class="rating">
  <svg class="is-filled"><use href="sprite.svg#icon-star"></use></svg>
  <!-- ... -->
  <span class="rating-count">4.2 (128)</span>
</div>

الصور

القصّ (object-fit/aspect-ratio)، ومرشحات CSS (grayscale، blur-*، brightness-*...)، و وصفات معالجة (تكبير عند التمرير، طبقة تعتيم للتعليق، ثنائي اللون، قصّ عضوي) — كل ذلك CSS خالص، دون مكتبة معالجة صور. الصور في هذه الصفحة هي رسوم SVG أصلية، لتبقى الوثيقة قائمة بذاتها 100%.

القصّ ونسبة العرض إلى الارتفاع

تُثبِّت .aspect-video/.aspect-square/.aspect-portrait نسبة عرض الحاوية إلى ارتفاعها؛ ويملأ .object-cover دون تشويه.

رسم توضيحي لجبال عند الغروب aspect-video
رسم تجريدي لصورة شخصية aspect-square
رسم توضيحي لجبال عند الغروب aspect-portrait 
<img class="aspect-video object-cover rounded-md" src="foto.jpg" alt="..." />

المرشحات

أصناف ذرية وقابلة للتركيب (class="grayscale contrast-125") — كلّ منها تتحكم في خاصية filter واحدة.

بدون مرشح بدون مرشح
مرشح تدرّج رمادي grayscale
مرشح بني داكن sepia
مرشح blur-sm blur-sm
مرشح brightness-50 brightness-50
مرشح brightness-150 brightness-150
مرشح contrast-150 contrast-150
مرشح saturate-0 saturate-0
مرشح saturate-200 saturate-200
مرشح hue-rotate-90 hue-rotate-90
مرشح عكس الألوان invert
مرشحات مدمجة: تدرّج رمادي و contrast-125 grayscale contrast-125 
<img class="grayscale" src="foto.jpg" alt="..." />
<img class="sepia" src="foto.jpg" alt="..." />
<img class="blur-sm" src="foto.jpg" alt="..." />
<img class="brightness-150 contrast-125" src="foto.jpg" alt="..." />

المعالجات

أصناف وصفات (بعدة خصائص لكل منها، مثل .bg-aurora) لأنماط شائعة من البطاقات المصحوبة بصور.

رسم توضيحي لجبال عند الغروب
.img-hover-zoom — مرّر الفأرة
رسم توضيحي لجبال عند الغروب
مسار الوادي
.img-scrim — تعليق واضح فوق الصورة
رسم تجريدي لصورة شخصية
.img-duotone
رسم تجريدي لصورة شخصية
.img-blob — قصّ عضوي
<div class="img-hover-zoom rounded-lg aspect-video">
  <img src="foto.jpg" alt="..." />
</div>

<div class="img-scrim rounded-lg aspect-video">
  <img src="foto.jpg" alt="..." />
  <div class="img-scrim-caption"><strong>مسار الوادي</strong></div>
</div>

<div class="img-duotone aspect-square"><img src="foto.jpg" alt="..." /></div>
<div class="img-blob aspect-square"><img src="foto.jpg" alt="..." /></div>

الاتجاهات الحديثة

شبكة بينتو، وبطاقة إضاءة موضعية، وحدود متدرّجة، وتوهّج، وحبيبات/تشويش، وأورورا، ونص متحرك، وزر عائم، وشريط تقدّم القراءة — تقنيات بصرية حديثة، جاهزة لأي تطبيق.

شبكة بينتو شبكة غير متماثلة بأسلوب Apple، مع إضاءة موضعية عند التمرير.
عنصر بسيط
حدود متدرّجة
بطاقة بحدود متدرّجة

نص متحرك (يتوقف عند التمرير)

Design System إتاحة الوصول Dark mode RTL Design System إتاحة الوصول Dark mode RTL
تستخدم هذه الكتلة data-cerne-reveal — مرّر الصفحة لرؤية الحركة.
<div class="bento-grid">
  <div class="bento-item bento-span-2 card-spotlight">...</div>
  <div class="bento-item">...</div>
</div>

<div data-cerne-reveal="up">يظهر عند التمرير</div>
<span data-cerne-count-up="1284" data-cerne-count-up-format>0</span>

متغيّرات الأدوات المساعدة والتكيّف الإقليمي

hover:، وfocus:، وfocus-visible:، وactive:، وdisabled:، وfocus-within:، و dark: قبل أي أداة مساعدة للون/الظل/الشفافية، إضافة إلى group-hover:/peer-checked: بـCSS خالص (دون JS — .group/.peer مجرد علامات)، واستعلامات الحاوية (.cq + cq-md:)، والعناصر الأساسية التي تجعل الإطار قابلًا للتكيّف مع أنماط واجهة أي منطقة — وليس فقط الغربية.

مرّر الفأرة فوق هذه البطاقة

يستخدم الزر المجاور group-hover:opacity-100 — يظهر فقط عندما يكون العنصر الأب (.group) في حالة التمرير.

يؤدي data-density="compact" على <html> إلى مضاعفة مقياس التباعد بالكامل دفعة واحدة — يقارب نمط الكثافة المعلوماتية العالية الشائع في بوابات وتجارة شرق آسيا الإلكترونية. يغطّي .break-keep و.write-vertical كسر النص والكتابة العمودية في CJK؛ ويصبح --cerne-line-height-base أكثر سخاءً تلقائيًا مع :lang(ar|he|hi|bn|ta|te|th). شاهد صفحات الأمثلة الـ9 (متجر/أخبار/لوحة تحكم × CJK/RTL/جنوب آسيا) في عرض الأمثلة. 

<div class="group card">
  <button class="opacity-25 group-hover:opacity-100 hover:bg-primary">...</button>
</div>

<div class="cq">
  <div class="flex-col cq-md:flex-row">...</div> <!-- reage ao espaço do .cq, não do viewport -->
</div>

<html data-density="compact"> <!-- ou "spacious" -->

الأيقونات

87 أيقونة في ملف SVG واحد يحتوي مجموعة رموز (dist/icons/sprite.svg)، أصلية، ويُشار إليها عبر <use>.

إتاحة الوصول

الهدف هو WCAG 2.1 المستوى AA — المعيار الدولي، بغض النظر عن الدولة أو اللغة — وليس أداة أو ختمًا خاصًا بولاية قضائية معينة.

  • لكل مكوّن تفاعلي حالة :focus-visible مرئية وتنقّل بلوحة المفاتيح (الأسهم في التبويبات/القوائم، Esc للإغلاق، حبس Tab في النوافذ المنبثقة، roving tabindex في التبويبات).
  • يُحترَم prefers-reduced-motion وprefers-color-scheme تلقائيًا، دون أي إعداد إضافي.
  • اختيرت ألوان النص فوق الخلفيات الصلبة لتحقيق AA — مع اهتمام خاص بـwarning/info اللذين يستخدمان نصًا داكنًا بدلًا من الأبيض لعدم بلوغهما تباينًا كافيًا.
  • تربط النماذج التسمية (for/id) والخطأ وaria-invalid؛ ولا تعتمد حالة الخطأ على اللون وحده أبدًا.
  • تحصل روابط التنقل النشطة على aria-current="page"؛ وتُبنى بنية المستند لقارئات الشاشة عبر معالم (main، وnav، وaside) و<h1> واحد لكل صفحة.
  • النص البديل الوصفي للصور/الرسوم هو مسؤولية من يستخدم الإطار — لا يستطيع Cerne توليده نيابة عنك. الاصطلاح البرازيلي #PraCegoVer (وصف الصورة في التعليق/alt نفسه) عادة جيدة، لكن الممارسة المهمة — كتابة alt يصف الصورة، دون تكرار ما هو واضح — تصلح بأي لغة.
  • بخصوص VLibras وأدوات ترجمة لغة الإشارة: لا تأتي مضمَّنة عن قصد، لأنها تعتمد على سكربت خارجي (CDN من طرف ثالث) وهي خاصة بلغة/دولة معينة — ما يتعارض مع مبدأ "بدون تبعيات خارجية" و"إطار دولي" في آن واحد. الأساس الصحيح والعالمي هو HTML دلالي جيد + ARIA، الذي تستطيع أي تقنية مساعدة في العالم تفسيره بالفعل؛ يمكن إضافة أداة ترجمة محددة فوقه، مشروعًا بمشروع، عند الحاجة.
  • RTL حقيقي: تستخدم المكوّنات خصائص منطقية (inset-inline-start، وmargin-inline-end، وtext-align: start...) بدلًا من left/right ثابتين، لذا يكفي dir="rtl" على <html> لعكس الشريط الجانبي والقوائم المنسدلة والتبويبات والنماذج والتنقل — دون أي CSS إضافي. شاهد ذلك مباشرة:
بطاقة بلمسة جانبية

تتبع الحدود بداية النص، وليس جانبًا ثابتًا.

<html lang="ar" dir="rtl">
  <!-- الشريط الجانبي، القائمة المنسدلة، التبويبات، النماذج... كل شيء ينعكس تلقائيًا -->

الخصوصية والموافقة

شريط عام لملفات تعريف الارتباط/الموافقة — نفس نمط "أساسي / تحليلات / تسويق" المستخدم في GDPR (الاتحاد الأوروبي)، وLGPD (البرازيل)، وCCPA (كاليفورنيا)، دون الاعتماد على أي منصة طرف ثالث لإدارة الموافقة. 

<div class="consent-banner" data-cerne-consent hidden role="region" aria-label="إشعار ملفات تعريف الارتباط">
  <p class="consent-banner-text">نستخدم ملفات تعريف ارتباط أساسية...</p>
  <div class="consent-banner-actions">
    <button data-cerne-consent-customize
      data-cerne-toggle="modal" data-cerne-target="#consent-preferences">تخصيص</button>
    <button data-cerne-consent-reject>رفض غير الأساسي</button>
    <button data-cerne-consent-accept>قبول الكل</button>
  </div>
</div>

<!-- Cerne.Consent.get() / .set({analytics, marketing}) / .reset() -->

يُحفَظ الاختيار في localStorage (المفتاح cerne-consent)، وليس أبدًا في ملف تعريف ارتباط من طرف ثالث، ولا يُرسَل إلى أي مكان أبدًا — ما يفعله خادمك الخلفي بـCerne.Consent.get() قرارك أنت. يظهر الشريط تلقائيًا فقط عندما تحتوي الصفحة على عنصر [data-cerne-consent]؛ وقد حُذِف عمدًا في هذا التوثيق لتجنّب الإزعاج — شاهد المثال الكامل في المدونة، أو المتجر، أو البوابة المؤسسية.

أمثلة كاملة

42 صفحة مبنية بالكامل باستخدام Cerne، تغطي لوحة التحكم الإدارية والتعليم والإدارة والحجز والمحتوى والبوابة الإخبارية والتجارة الإلكترونية والمواقع المؤسسية والفيديو والشبكة الاجتماعية والبث والمساعد الحواري ومعرض الأعمال — ولكل منها متغيّر CJK وRTL وجنوب آسيا وروسيا خاص بها، بترجمة كاملة للواجهة (168 صفحة إقليمية، بإجمالي نحو 210)، يمكن الوصول إليها عبر شريط "المتغيّر الإقليمي" أعلى أي مثال.

لوحة تحكم إدارية
بيئة تعلّم
صفحة أستاذ
إدارة / CRUD
حجز القاعات
Blog
بوابة إخبارية
متجر تجارة إلكترونية
موقع مختبر
بوابة مؤسسية
موقع مجموعة بحثية
مصادقة (تسجيل دخول/تسجيل)
منصة فيديو
شبكة اجتماعية (تدفق)
شبكة اجتماعية (ملف شخصي)
بث فيديو
مساعد حواري (LLM)
معرض أعمال (شبكة بينتو)
لوحة تحليلات
بريد ويب (بنمط Gmail)
بريد ويب (بنمط Outlook)
محرك بحث (نمط بسيط)
محرك بحث (نمط بوابة كثيفة)
واجهة تلفاز ذكي
نموذج تسجيل دولي متكيّف

المتغيّرات الإقليمية (CJK، RTL، جنوب آسيا، روسيا)

لكل صفحة في كل مثال أعلاه متغيّرات CJK وRTL وجنوب آسيا وروسيا — بإجمالي 168 صفحة إقليمية — افتح أيًّا منها واستخدم شريط "المتغيّر الإقليمي" أعلاه للتنقل بينها. تستخدم متغيّرات CJK وRTL وجنوب آسيا العناصر الأساسية الموصوفة في المتغيّرات والإقليمية — data-density، و.break-keep/.write-vertical، وdir="rtl"، و --cerne-line-height-base لكل لغة؛ ويستخدم متغيّر روسيا lang="ru" بنص روسي فوق نفس البنية من اليسار إلى اليمين للمثال الأصلي (دون خصائص منطقية إضافية، لأن الروسية تتصرف مثل البرتغالية في هذا الصدد). تتوفر الصفحات الـ168 بترجمة كاملة — ليس فقط الواجهة (التنقل، الأزرار، النماذج، التسميات، حالات الفراغ)، بل أيضًا المحتوى الديناميكي: أسماء ووصف المنتجات، ورسائل البريد التوضيحية (الموضوع والنص)، ونتائج البحث، وعناوين/ملخصات الفيديو والمسلسلات، والمحادثة التوضيحية للمساعد، ونص المقالات والمنشورات الطويلة، ولكل مجال نسخة خاصة من بيانات الأمثلة لكل لغة (مثل store-data.cjk.browser.js / store-data.ru.browser.js). تُرجم أيضًا شريط ملفات تعريف الارتباط؛ وتبقى فقط ملاحظات تذييل صغيرة تصف المتغيّر نفسه (وأسماء الأشخاص الحقيقية) باللغة البرتغالية، لأنها نص توثيقي لمن يقرأ الشيفرة المصدرية، وليس محتوى التطبيق.

المثال CJK RTL جنوب آسيا روسيا
لوحة تحكم إداريةفتحفتحفتحفتح
بيئة تعلّمفتحفتحفتحفتح
صفحة أستاذفتحفتحفتحفتح
إدارة / CRUDفتحفتحفتحفتح
حجز القاعاتفتحفتحفتحفتح
مدونةفتحفتحفتحفتح
مدونة — منشورفتحفتحفتحفتح
بوابة إخباريةفتحفتحفتحفتح
بوابة إخبارية — مقالةفتحفتحفتحفتح
متجر تجارة إلكترونيةفتحفتحفتحفتح
متجر تجارة إلكترونية — منتجفتحفتحفتحفتح
موقع مختبرفتحفتحفتحفتح
بوابة مؤسسيةفتحفتحفتحفتح
موقع مجموعة بحثيةفتحفتحفتحفتح
مصادقة — تسجيل الدخولفتحفتحفتحفتح
مصادقة — تسجيلفتحفتحفتحفتح
مصادقة — تحقق OTPفتحفتحفتحفتح
خطأ 404فتحفتحفتحفتح
خطأ 500فتحفتحفتحفتح
منصة فيديوفتحفتحفتحفتح
فيديو — مشاهدةفتحفتحفتحفتح
فيديو — قائمة تشغيلفتحفتحفتحفتح
شبكة اجتماعية (تدفق)فتحفتحفتحفتح
شبكة اجتماعية (ملف شخصي)فتحفتحفتحفتح
بث — تسجيل الدخولفتحفتحفتحفتح
بث — الملفات الشخصيةفتحفتحفتحفتح
بث فيديوفتحفتحفتحفتح
بث — صفحة العملفتحفتحفتحفتح
بث — مشاهدةفتحفتحفتحفتح
بث — استكشاففتحفتحفتحفتح
بث — مباشرفتحفتحفتحفتح
مساعد حواري (LLM)فتحفتحفتحفتح
معرض أعمال (شبكة بينتو)فتحفتحفتحفتح
لوحة تحليلاتفتحفتحفتحفتح
بريد ويب (بنمط Gmail)فتحفتحفتحفتح
بريد ويب (بنمط Outlook)فتحفتحفتحفتح
محرك بحث (بسيط)فتحفتحفتحفتح
محرك بحث (بسيط) — نتائجفتحفتحفتحفتح
محرك بحث (بوابة كثيفة)فتحفتحفتحفتح
محرك بحث (بوابة كثيفة) — نتائجفتحفتحفتحفتح
واجهة تلفاز ذكيفتحفتحفتحفتح
تلفاز ذكي — مشغّلفتحفتحفتحفتح
نموذج تسجيل دولي متكيّف (يتكيّف بالفعل حسب الدولة عبر JS — دون متغيّرات ثابتة)————