الخطوط

عنوان كبير - H1

عنوان رئيسي - H2

عنوان فرعي - H3

عنوان صغير - H4

نص كبير للمحتوى

نص عادي للمحتوى

نص صغير للمحتوى


 <h1 class="text-5xl font-bold">عنوان كبير - H1</h1>
 <h2 class="text-4xl font-bold">عنوان رئيسي - H2</h2>
 <h3 class="text-3xl font-bold">عنوان فرعي - H3</h3>
 <h4 class="text-2xl font-bold">عنوان صغير - H4</h4>
 <p class="text-lg">نص كبير للمحتوى</p>
 <p class="text-base">نص عادي للمحتوى</p>
 <p class="text-sm">نص صغير للمحتوى</p>

نص عريض

نص مائل

نص مسطر

نص مشطوب

نص متدرج


 <p class="font-bold">نص عريض</p>
 <p class="italic">نص مائل</p>
 <p class="underline">نص مسطر</p>
 <p class="line-through">نص مشطوب</p>
 <p class="gradient-text">نص متدرج</p>

الألوان

الألوان الرئيسية

Accent Primary

#00916E

Accent Secondary

#005F47

ألوان الخلفية

Black Primary

#000000

Black Secondary

#0A0A0A

ألوان النصوص

Text Primary

#FFFFFF

Text Secondary

#94A3B8

الأزرار


<button class="btn-primary px-6 py-3 rounded-xl">زر رئيسي</button>
<button class="glow-effect px-6 py-3 rounded-xl border border-white/10">زر ثانوي</button>
<button class="px-6 py-3 rounded-xl bg-black/30 border border-white/10 disabled:opacity-50" disabled>زر معطل</button>
<button class="btn-primary px-6 py-3 rounded-xl flex items-center gap-2">
<i class="fas fa-plus"></i>
<span>زر مع أيقونة</span>
</button>


<button class="btn-primary px-4 py-2 text-sm rounded-lg">صغير</button>
<button class="btn-primary px-6 py-3 rounded-xl">متوسط</button>
<button class="btn-primary px-8 py-4 text-lg rounded-2xl">كبير</button>


<button class="btn-primary px-6 py-3 rounded-xl flex items-center gap-2">
<span class="animate-spin">
    <i class="fas fa-circle-notch"></i>
</span>
<span>جاري التحميل</span>
</button>

النماذج


<form class="space-y-4">
<div>
    <label class="block mb-2">حقل نص</label>
    <input type="text" class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 focus:border-[var(--accent-primary)] outline-none" placeholder="أدخل نصاً">
</div>

<div>
    <label class="block mb-2">بريد إلكتروني</label>
    <input type="email" class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 focus:border-[var(--accent-primary)] outline-none" placeholder="email@example.com">
</div>

<div>
    <label class="block mb-2">كلمة المرور</label>
    <input type="password" class="w-full px-4 py-3 rounded-xl bg-black/30 border border-white/10 focus:border-[var(--accent-primary)] outline-none" placeholder="********">
</div>
</form>

البطاقات

بطاقة بسيطة

محتوى البطاقة هنا

بطاقة مع أيقونة

محتوى البطاقة هنا

بطاقة تفاعلية

حرك المؤشر فوق البطاقة


<div class="card gradient-border rounded-xl p-6">
<h3 class="text-xl font-bold mb-4">بطاقة بسيطة</h3>
<p class="text-[var(--text-secondary)]">محتوى البطاقة هنا</p>
</div>

<div class="card gradient-border rounded-xl p-6">
<div class="flex items-center gap-4 mb-4">
    <div class="w-12 h-12 rounded-full bg-[var(--accent-primary)]/10 flex items-center justify-center">
        <i class="fas fa-star text-[var(--accent-primary)]"></i>
    </div>
    <h3 class="text-xl font-bold">بطاقة مع أيقونة</h3>
</div>
<p class="text-[var(--text-secondary)]">محتوى البطاقة هنا</p>
</div>

<div class="card gradient-border rounded-xl p-6 hover:-translate-y-2 transition-transform cursor-pointer">
<h3 class="text-xl font-bold mb-4">بطاقة تفاعلية</h3>
<p class="text-[var(--text-secondary)]">حرك المؤشر فوق البطاقة</p>
</div>

التنبيهات

تم حفظ التغييرات بنجاح

حدث خطأ أثناء المعالجة

تحذير: يرجى التحقق من المدخلات


<div class="bg-green-900/20 border border-green-500/20 text-green-500 p-4 rounded-xl flex items-center gap-3">
<i class="fas fa-check-circle"></i>
<span>تم حفظ التغييرات بنجاح</span>
</div>

<div class="bg-red-900/20 border border-red-500/20 text-red-500 p-4 rounded-xl flex items-center gap-3">
<i class="fas fa-exclamation-circle"></i>
<span>حدث خطأ أثناء المعالجة</span>
</div>

<div class="bg-yellow-900/20 border border-yellow-500/20 text-yellow-500 p-4 rounded-xl flex items-center gap-3">
<i class="fas fa-exclamation-triangle"></i>
<span>تحذير: يرجى التحقق من المدخلات</span>
</div>

النوافذ المنبثقة


<!-- Modal Trigger Button -->
<button onclick="showModal('demo-modal')" class="btn-primary px-6 py-3 rounded-xl">
    عرض النافذة
</button>

<!-- Modal Structure -->
<div id="demo-modal" style="z-index: 200;" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center hidden">
    <div class="bg-[var(--black-secondary)] rounded-2xl w-full max-w-md p-6 m-4">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold">عنوان النافذة</h3>
            <button onclick="hideModal('demo-modal')" class="text-[var(--text-secondary)] hover:text-white">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <p class="text-[var(--text-secondary)] mb-6">محتوى النافذة المنبثقة هنا</p>
        <div class="flex justify-end gap-4">
            <button onclick="hideModal('demo-modal')" class="px-4 py-2 rounded-xl border border-white/10">
                إلغاء
            </button>
            <button onclick="hideModal('demo-modal')" class="btn-primary px-4 py-2 rounded-xl">
                موافق
            </button>
        </div>
    </div>
</div>

الشارات والعلامات

شارة خطأ نجاح


<span class="bg-[var(--accent-primary)]/20 text-[var(--accent-primary)] px-3 py-1 rounded-full text-sm">شارة</span>
<span class="bg-red-500/20 text-red-500 px-3 py-1 rounded-full text-sm">خطأ</span>
<span class="bg-green-500/20 text-green-500 px-3 py-1 rounded-full text-sm">نجاح</span>

مؤشرات التحميل


<div class="w-8 h-8 border-4 border-[var(--accent-primary)]/20 border-t-[var(--accent-primary)] rounded-full animate-spin"></div>
<div class="w-8 h-8 border-4 border-r-transparent border-[var(--accent-primary)] rounded-full animate-spin"></div>