تنسيق #بطاقة_انكي ب #الذكاء_الاصطناعي...
شرح التعديلات المهمة
✅ حل مشكلة لون النص الفاتح
تمت إضافة كلاس منفصل front-content مع لون نص غامق (color: #111827;).
تم حذف أي ألوان فاتحة من الـ CSS الأصلي.
✅ دمج حقول أنكي بشكل صحيح
الحقل في أنكي المكان في الواجهة الوصف
{{أمام}} داخل .front-content يظهر كمحتوى السؤال (أمام البطاقة)
{{خلف}} داخل .answer-content يظهر كإجابة مع عنوان فرعي
{{صوت}} داخل زر الصوت يظهر أيقونة الصوت أو رابط الصوت
{{صورة}} أعلى المحتوى يعرض الصور المضافة تلقائيًا
✅ تنسيق موحد للمحتوى
تم استبدال DejaVu Sans Mono بخط Cairo لضمان قابلية القراءة في العربية.
أضيف خط فاصل بين السؤال والإجابة لتمييز الأجزاء.
ستظهر البطاقة كالتالي:
السؤال بلون غامق في الأعلى
خط فاصل
الإجابة باللون الأخضر مع عنوان فرعي
زر صوت في الزاوية العلوية اليمنى
الصورة إن وجدت
لقد قمت بدمج الكود الخاص بك وتنظيفه بالكامل ليكون جاهزاً للنسخ واللصق في برنامج أنكي (#Anki).
لقد قمت بالآتي:
1. **إصلاح أخطاء HTML:** أزلت الأقواس المفتوحة والتكرار في كودك.
2. **حل مشكلة التباين:** جعلت الخط داكناً (`#1f2937`) ليظهر بوضوح على الخلفية البيضاء.
3. **تنظيم الحقول:** وضعت `{{أمام}}`، `{{خلف}}`، `{{صوت}}`، و`{{صورة}}` في أماكنها الصحيحة.
انسخ الأقسام الثلاثة التالية وضعها في أماكنها داخل #أنكي:
---
### 1. التنسيق (Styling)
امسح أي كود قديم هنا والصق هذا الكود:
```css
/* استيراد خط Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
.card {
font-family: 'Cairo', sans-serif;
font-size: 20px;
text-align: center;
color: black;
background-color: #f0f2f5; /* لون خلفية النافذة */
}
/* الحاوية الرئيسية (الرمادية) */
.shell {
background: #f3f4f6;
border-radius: 18px;
width: 95%;
max-width: 600px;
margin: 20px auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
direction: rtl;
}
/* البطاقة البيضاء الداخلية */
.my-card {
background: #ffffff;
border-radius: 16px;
width: 100%;
min-height: 300px;
display: flex;
flex-direction: column;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
overflow: hidden;
}
/* رأس البطاقة */
.card-header {
display: flex;
align-items: center;
justify-content: flex-end; /* الأيقونة لليسار */
padding: 15px;
height: 50px;
background: #fff;
}
/* تنسيق زر الصوت الخاص بأنكي */
.replay-button svg {
width: 24px;
height: 24px;
fill: #6b7280;
}
/* جسم البطاقة */
.card-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 30px 40px;
text-align: center;
}
/* تنسيق السؤال (الأمام) */
.question-text {
color: #1f2937; /* لون داكن جداً للقراءة */
font-size: 22px;
font-weight: 700;
line-height: 1.6;
margin-bottom: 15px;
}
/* تنسيق الإجابة (الخلف) */
.answer-text {
color: #059669; /* لون أخضر */
font-size: 20px;
font-weight: 600;
line-height: 1.6;
}
/* خط فاصل */
hr.separator {
width: 60%;
border: 0;
border-top: 1px solid #e5e7eb;
margin: 20px 0;
}
/* تنسيق الصور */
.img-container img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* الملاحظة السفلية */
.note {
margin-top: 20px;
font-size: 12px;
color: #9ca3af;
text-align: center;
line-height: 1.5;
}
```
---
### 2. القالب الأمامي (Front Template)
الصق هذا الكود في خانة **Front Template**:
```html
<div class="shell">
<section class="my-card">
<!-- رأس فارغ للحفاظ على الشكل -->
<div class="card-header"></div>
<div class="card-body">
<!-- عرض السؤال -->
<div class="question-text">
{{أمام}}
</div>
</div>
</section>
</div>
```
---
### 3. القالب الخلفي (Back Template)
الصق هذا الكود في خانة **Back Template**:
```html
<div class="shell">
<section class="my-card">
<!-- رأس البطاقة مع زر الصوت -->
<div class="card-header">
{{صوت}}
</div>
<div class="card-body">
<!-- عرض الصورة إن وجدت -->
{{#صورة}}
<div class="img-container">
{{صورة}}
</div>
{{/صورة}}
<!-- إعادة عرض السؤال للتذكير -->
<div class="question-text">
{{أمام}}
</div>
<!-- خط فاصل -->
<hr class="separator">
<!-- الإجابة -->
<div class="answer-text">
{{خلف}}
</div>
</div>
</section>
<!-- الملاحظة السفلية -->
<p class="note">
ملاحظة: المراجع الذكي - علاقات دولية<br>
يمكن تعديل هذه البطاقة لعرض أي محتوى تريده.
</p>
</div>
```
### النتيجة المتوقعة:
1. **الخط:** سيظهر خط Cairo العربي الجميل.
2. **الألوان:** السؤال سيكون باللون الرمادي الغامق (واضح جداً)، والإجابة باللون الأخضر.
3. **التخطيط:** ستظهر الصورة في الأعلى (إن وجدت)، تحتها السؤال، ثم خط فاصل، ثم الإجابة.
4. **الصوت:** زر الصوت سيظهر في الزاوية العلوية اليسرى (لأن الاتجاه RTL).
😅😁 استمتع واستخدمت هذه الأداة :
الرابط: 
شرح التعديلات المهمة
✅ حل مشكلة لون النص الفاتح
تمت إضافة كلاس منفصل front-content مع لون نص غامق (color: #111827;).
تم حذف أي ألوان فاتحة من الـ CSS الأصلي.
✅ دمج حقول أنكي بشكل صحيح
الحقل في أنكي المكان في الواجهة الوصف
{{أمام}} داخل .front-content يظهر كمحتوى السؤال (أمام البطاقة)
{{خلف}} داخل .answer-content يظهر كإجابة مع عنوان فرعي
{{صوت}} داخل زر الصوت يظهر أيقونة الصوت أو رابط الصوت
{{صورة}} أعلى المحتوى يعرض الصور المضافة تلقائيًا
✅ تنسيق موحد للمحتوى
تم استبدال DejaVu Sans Mono بخط Cairo لضمان قابلية القراءة في العربية.
أضيف خط فاصل بين السؤال والإجابة لتمييز الأجزاء.
ستظهر البطاقة كالتالي:
السؤال بلون غامق في الأعلى
خط فاصل
الإجابة باللون الأخضر مع عنوان فرعي
زر صوت في الزاوية العلوية اليمنى
الصورة إن وجدت
لقد قمت بدمج الكود الخاص بك وتنظيفه بالكامل ليكون جاهزاً للنسخ واللصق في برنامج أنكي (#Anki).
لقد قمت بالآتي:
1. **إصلاح أخطاء HTML:** أزلت الأقواس المفتوحة والتكرار في كودك.
2. **حل مشكلة التباين:** جعلت الخط داكناً (`#1f2937`) ليظهر بوضوح على الخلفية البيضاء.
3. **تنظيم الحقول:** وضعت `{{أمام}}`، `{{خلف}}`، `{{صوت}}`، و`{{صورة}}` في أماكنها الصحيحة.
انسخ الأقسام الثلاثة التالية وضعها في أماكنها داخل #أنكي:
---
### 1. التنسيق (Styling)
امسح أي كود قديم هنا والصق هذا الكود:
```css
/* استيراد خط Cairo */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
.card {
font-family: 'Cairo', sans-serif;
font-size: 20px;
text-align: center;
color: black;
background-color: #f0f2f5; /* لون خلفية النافذة */
}
/* الحاوية الرئيسية (الرمادية) */
.shell {
background: #f3f4f6;
border-radius: 18px;
width: 95%;
max-width: 600px;
margin: 20px auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
direction: rtl;
}
/* البطاقة البيضاء الداخلية */
.my-card {
background: #ffffff;
border-radius: 16px;
width: 100%;
min-height: 300px;
display: flex;
flex-direction: column;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
overflow: hidden;
}
/* رأس البطاقة */
.card-header {
display: flex;
align-items: center;
justify-content: flex-end; /* الأيقونة لليسار */
padding: 15px;
height: 50px;
background: #fff;
}
/* تنسيق زر الصوت الخاص بأنكي */
.replay-button svg {
width: 24px;
height: 24px;
fill: #6b7280;
}
/* جسم البطاقة */
.card-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 30px 40px;
text-align: center;
}
/* تنسيق السؤال (الأمام) */
.question-text {
color: #1f2937; /* لون داكن جداً للقراءة */
font-size: 22px;
font-weight: 700;
line-height: 1.6;
margin-bottom: 15px;
}
/* تنسيق الإجابة (الخلف) */
.answer-text {
color: #059669; /* لون أخضر */
font-size: 20px;
font-weight: 600;
line-height: 1.6;
}
/* خط فاصل */
hr.separator {
width: 60%;
border: 0;
border-top: 1px solid #e5e7eb;
margin: 20px 0;
}
/* تنسيق الصور */
.img-container img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* الملاحظة السفلية */
.note {
margin-top: 20px;
font-size: 12px;
color: #9ca3af;
text-align: center;
line-height: 1.5;
}
```
---
### 2. القالب الأمامي (Front Template)
الصق هذا الكود في خانة **Front Template**:
```html
<div class="shell">
<section class="my-card">
<!-- رأس فارغ للحفاظ على الشكل -->
<div class="card-header"></div>
<div class="card-body">
<!-- عرض السؤال -->
<div class="question-text">
{{أمام}}
</div>
</div>
</section>
</div>
```
---
### 3. القالب الخلفي (Back Template)
الصق هذا الكود في خانة **Back Template**:
```html
<div class="shell">
<section class="my-card">
<!-- رأس البطاقة مع زر الصوت -->
<div class="card-header">
{{صوت}}
</div>
<div class="card-body">
<!-- عرض الصورة إن وجدت -->
{{#صورة}}
<div class="img-container">
{{صورة}}
</div>
{{/صورة}}
<!-- إعادة عرض السؤال للتذكير -->
<div class="question-text">
{{أمام}}
</div>
<!-- خط فاصل -->
<hr class="separator">
<!-- الإجابة -->
<div class="answer-text">
{{خلف}}
</div>
</div>
</section>
<!-- الملاحظة السفلية -->
<p class="note">
ملاحظة: المراجع الذكي - علاقات دولية<br>
يمكن تعديل هذه البطاقة لعرض أي محتوى تريده.
</p>
</div>
```
### النتيجة المتوقعة:
1. **الخط:** سيظهر خط Cairo العربي الجميل.
2. **الألوان:** السؤال سيكون باللون الرمادي الغامق (واضح جداً)، والإجابة باللون الأخضر.
3. **التخطيط:** ستظهر الصورة في الأعلى (إن وجدت)، تحتها السؤال، ثم خط فاصل، ثم الإجابة.
4. **الصوت:** زر الصوت سيظهر في الزاوية العلوية اليسرى (لأن الاتجاه RTL).
😅😁 استمتع واستخدمت هذه الأداة :
الرابط: LMArena
LMArena
An open platform for evaluating AI through human preference