بسم الله الرحمن الرحيم
التنسبق الثاني لأنكي
### ✅ التصحيح النهائي مع شرح مُفصّل
#### 🔍 المشكلة في الكود السابق:
1. **هيكل HTML غير صحيح**:
- وجود `<style>` داخل `<body>` (يجب أن يكون في `<head>`).
- تكرار `<div class="shell">` مرتين (يجب أن يكون مرة واحدة فقط).
- عدم إغلاق العناصر بشكل صحيح (مثل `<div>` من دون إغلاق).
2. **تضارب في تنسيق النص**:
- تم تعريف `.card-body` مرتين مع خصائص متعارضة (مثل `color: #1f2937` في مكان و `color: #111827` في مكان آخر).
3. **استخدام خاطئ لحقول أنكي**:
- تم فصل الوجه الأمامي والخلفي في قسمين منفصلين (يجب أن يكونا في نفس البطاقة مع شروط تظهر/تخفي المحتوى).
---
### 🛠 الكود المُصلح (انسخه كـ HTML كامل):
```html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>بطاقة أنكي - المراجع الذكي</title>
<!-- خط Cairo للعربية -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #111827;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.shell {
background: #f3f4f6;
border-radius: 18px;
width: 100%;
max-width: 1440px;
min-height: 650px;
padding: 40px 16px 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card {
background: #ffffff;
border-radius: 16px;
width: 100%;
max-width: 540px;
min-height: 380px;
display: flex;
flex-direction: column;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 20px;
border-bottom: 1px solid #e5e7eb;
}
.icon-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
cursor: pointer;
}
.card-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 32px;
text-align: center;
/* ✅ تأكيد لون النص داكن */
color: #111827 !important;
font-size: 1.3rem;
line-height: 1.8;
}
.front-content {
font-weight: 600;
margin-bottom: 24px;
}
.separator {
width: 100%;
border: none;
border-top: 1px dashed #d1d5db;
margin: 15px 0;
}
.answer-content {
font-size: 16px;
color: #059669;
border-top: 1px solid #e5e7eb;
padding-top: 20px;
width: 100%;
}
.note {
margin-top: 26px;
max-width: 540px;
text-align: center;
font-size: 12px;
color: #6b7280;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="shell">
<!-- البطاقة الواحدة مع الوجهين -->
<section class="card">
<div class="card-header">
<button class="icon-btn" aria-label="تشغيل الصوت">
{{صوت}}🔊
</button>
</div>
<div class="card-body">
<!-- الصورة (إن وجدت) -->
<div style="width: 100%; text-align: center; margin-bottom: 20px;">
{{صورة}}
</div>
<!-- الوجه الأمامي (السؤال) -->
<div class="front-content">
{{أمام}}
</div>
<!-- الخط الفاصل -->
<hr class="separator">
<!-- الوجه الخلفي (الإجابة) -->
<div class="answer-content">
<h4 style="margin: 0 0 10px; color: #111827;">{{خلف}}</h4>
</div>
</div>
</section>
<p class="note">
ملاحظة: تظهر جميع الحقول تلقائيًا.
<br>استخدم: <code>{{أمام}}</code>, <code>{{خلف}}</code>, <code>{{صوت}}</code>, <code>{{صورة}}</code>
</p>
</div>
</body>
</html>
```
---
### 🔧 **التعديلات المهمة المُطبّقة:**
#### 1. ✅ حل مشكلة لون النص الفاتح (السبب الجذري)
- **السبب**: في الكود الأصلي، كان النص يرث لونًا فاتحًا من خلفية البطاقة البيضاء.
- **الحل**:
```css
.card-body {
color: #111827 !important; /* تأكيد لون داكن */
}
```
- استخدام `!important` لضمان تطبيق اللون حتى مع أي تداخل مع أنكي.
- استبدال `#1f2937` بأقوى لون (`#111827`) لضمان الوضوح.
#### 2. ✅ هيكلة صحيحة لحقول أنكي
| الحقل | المكان الصحيح | السبب |
|-------------|------------------------|-----------------------------------------------------------------------|
| `{{أمام}}` | داخل `.front-content` | ليظهر كسؤال رئيسي بخط سميك (الواجهة الأمامية) |
| `{{خلف}}` | داخل `.answer-content` | ليظهر كإجابة مع تنسيق منفصل (الواجهة الخلفية) |
| `{{صوت}}` | داخل زر الصوت | لعرض أيقونة الصوت أو رابط الصوت تلقائيًا |
| `{{صورة}}` | أعلى المحتوى | لعرض الصور المضافة دون تشويه التنسيق |
#### 3. ✅ توحيد التنسيق للعربية
- **استبدال الخطوط الفاشلة**: تم حذف `DejaVu Sans Mono` و `Calibri` لأنها لا تدعم العربية جيدًا.
- **استخدام خط Cairo**:
```html
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
```
- يضمن قراءة سلسة للنص العربي مع الحفاظ على التصميم الأصلي.
#### 4. ✅ إصلاح الهيكل العام
- **إزالة التكرار**: تم دمج الوجه الأمامي والخلفي في بطاقة واحدة (كما هو مطلوب في أنكي).
- **التأكد من إغلاق العناصر**: كل `<div>` و `<section>` مُغلقة بشكل صحيح.
- **التركيز على الوظيفية**: لا أزرار زائدة، فقط محتوى الطلب.
---
### 📌 كيفية الاستخدام في أنكي:
1. في إعدادات البطاقة:
- انسخ الكود كاملاً في **القوالب** (الوجه الأمامي والخلفي معًا).
2. عند إنشاء البطاقة:
- املأ الحقل `{{أمام}}` بالسؤال (مثل: "ما هو مؤتمر فيينا؟").
- املأ الحقل `{{خلف}}` بالإجابة (مثل: "مؤتمر عقد عام 1815م لإعادة ترتيب أوروبا بعد حرب Napoleon").
- أضف `{{صوت}}` إن احتجت (مثال: `[sound:file.mp3]`).
- أضف `{{صورة}}` إن احتجت (مثال: `<img src="treaty.jpg">`).
---
### 🌟 النتيجة المتوقعة:
| العنصر | المظهر النهائي |
|----------------------|-----------------------------------------------------------------------------|
| **لون النص** | أسود داكن على خلفية بيضاء (مرئي 100%) |
| **الخط** | خط Cairo واضح مع تباعد سطور مناسب للعربية |
| **الفاصل** | خط متقطع بين السؤال والإجابة لتمييز الأجزاء |
| **الصورة/الصوت** | يظهران تلقائيًا عند إضافتهما دون تشويه التصميم |
إذا لم يظهر النص بشكل واضح بعد هذا التصحيح، تأكد من:
1. عدم وجود إعدادات مخصصة في أنكي تغير ألوان النص (من **القوالب** → **الخصائص**).
2. أنك لم تستخدم `!important` في إعدادات أخرى تطغى على هذا اللون.
-------------------------------------------------------------------------------------------------------------
*المنشور السابق*
nostr:nevent1qvzqqqqqqypzpfjq5d7ucvcm6m2qwqzmu2kh6mswyqnv6rvrp0mjjn0qtkmve9qtqythwumn8ghj7un9d3shjtnswf5k6ctv9ehx2ap0qythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsyhcv7qh88k7cwtz5chn7nljh0f9q7jfpwu5n5dvazjtyfnvgmgfgfucf9t
### ✅ التصحيح النهائي مع شرح مُفصّل
#### 🔍 المشكلة في الكود السابق:
1. **هيكل HTML غير صحيح**:
- وجود `<style>` داخل `<body>` (يجب أن يكون في `<head>`).
- تكرار `<div class="shell">` مرتين (يجب أن يكون مرة واحدة فقط).
- عدم إغلاق العناصر بشكل صحيح (مثل `<div>` من دون إغلاق).
2. **تضارب في تنسيق النص**:
- تم تعريف `.card-body` مرتين مع خصائص متعارضة (مثل `color: #1f2937` في مكان و `color: #111827` في مكان آخر).
3. **استخدام خاطئ لحقول أنكي**:
- تم فصل الوجه الأمامي والخلفي في قسمين منفصلين (يجب أن يكونا في نفس البطاقة مع شروط تظهر/تخفي المحتوى).
---
### 🛠 الكود المُصلح (انسخه كـ HTML كامل):
```html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>بطاقة أنكي - المراجع الذكي</title>
<!-- خط Cairo للعربية -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #111827;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.shell {
background: #f3f4f6;
border-radius: 18px;
width: 100%;
max-width: 1440px;
min-height: 650px;
padding: 40px 16px 32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card {
background: #ffffff;
border-radius: 16px;
width: 100%;
max-width: 540px;
min-height: 380px;
display: flex;
flex-direction: column;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
overflow: hidden;
}
.card-header {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 12px 20px;
border-bottom: 1px solid #e5e7eb;
}
.icon-btn {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
cursor: pointer;
}
.card-body {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 32px;
text-align: center;
/* ✅ تأكيد لون النص داكن */
color: #111827 !important;
font-size: 1.3rem;
line-height: 1.8;
}
.front-content {
font-weight: 600;
margin-bottom: 24px;
}
.separator {
width: 100%;
border: none;
border-top: 1px dashed #d1d5db;
margin: 15px 0;
}
.answer-content {
font-size: 16px;
color: #059669;
border-top: 1px solid #e5e7eb;
padding-top: 20px;
width: 100%;
}
.note {
margin-top: 26px;
max-width: 540px;
text-align: center;
font-size: 12px;
color: #6b7280;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="shell">
<!-- البطاقة الواحدة مع الوجهين -->
<section class="card">
<div class="card-header">
<button class="icon-btn" aria-label="تشغيل الصوت">
{{صوت}}🔊
</button>
</div>
<div class="card-body">
<!-- الصورة (إن وجدت) -->
<div style="width: 100%; text-align: center; margin-bottom: 20px;">
{{صورة}}
</div>
<!-- الوجه الأمامي (السؤال) -->
<div class="front-content">
{{أمام}}
</div>
<!-- الخط الفاصل -->
<hr class="separator">
<!-- الوجه الخلفي (الإجابة) -->
<div class="answer-content">
<h4 style="margin: 0 0 10px; color: #111827;">{{خلف}}</h4>
</div>
</div>
</section>
<p class="note">
ملاحظة: تظهر جميع الحقول تلقائيًا.
<br>استخدم: <code>{{أمام}}</code>, <code>{{خلف}}</code>, <code>{{صوت}}</code>, <code>{{صورة}}</code>
</p>
</div>
</body>
</html>
```
---
### 🔧 **التعديلات المهمة المُطبّقة:**
#### 1. ✅ حل مشكلة لون النص الفاتح (السبب الجذري)
- **السبب**: في الكود الأصلي، كان النص يرث لونًا فاتحًا من خلفية البطاقة البيضاء.
- **الحل**:
```css
.card-body {
color: #111827 !important; /* تأكيد لون داكن */
}
```
- استخدام `!important` لضمان تطبيق اللون حتى مع أي تداخل مع أنكي.
- استبدال `#1f2937` بأقوى لون (`#111827`) لضمان الوضوح.
#### 2. ✅ هيكلة صحيحة لحقول أنكي
| الحقل | المكان الصحيح | السبب |
|-------------|------------------------|-----------------------------------------------------------------------|
| `{{أمام}}` | داخل `.front-content` | ليظهر كسؤال رئيسي بخط سميك (الواجهة الأمامية) |
| `{{خلف}}` | داخل `.answer-content` | ليظهر كإجابة مع تنسيق منفصل (الواجهة الخلفية) |
| `{{صوت}}` | داخل زر الصوت | لعرض أيقونة الصوت أو رابط الصوت تلقائيًا |
| `{{صورة}}` | أعلى المحتوى | لعرض الصور المضافة دون تشويه التنسيق |
#### 3. ✅ توحيد التنسيق للعربية
- **استبدال الخطوط الفاشلة**: تم حذف `DejaVu Sans Mono` و `Calibri` لأنها لا تدعم العربية جيدًا.
- **استخدام خط Cairo**:
```html
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
```
- يضمن قراءة سلسة للنص العربي مع الحفاظ على التصميم الأصلي.
#### 4. ✅ إصلاح الهيكل العام
- **إزالة التكرار**: تم دمج الوجه الأمامي والخلفي في بطاقة واحدة (كما هو مطلوب في أنكي).
- **التأكد من إغلاق العناصر**: كل `<div>` و `<section>` مُغلقة بشكل صحيح.
- **التركيز على الوظيفية**: لا أزرار زائدة، فقط محتوى الطلب.
---
### 📌 كيفية الاستخدام في أنكي:
1. في إعدادات البطاقة:
- انسخ الكود كاملاً في **القوالب** (الوجه الأمامي والخلفي معًا).
2. عند إنشاء البطاقة:
- املأ الحقل `{{أمام}}` بالسؤال (مثل: "ما هو مؤتمر فيينا؟").
- املأ الحقل `{{خلف}}` بالإجابة (مثل: "مؤتمر عقد عام 1815م لإعادة ترتيب أوروبا بعد حرب Napoleon").
- أضف `{{صوت}}` إن احتجت (مثال: `[sound:file.mp3]`).
- أضف `{{صورة}}` إن احتجت (مثال: `<img src="treaty.jpg">`).
---
### 🌟 النتيجة المتوقعة:
| العنصر | المظهر النهائي |
|----------------------|-----------------------------------------------------------------------------|
| **لون النص** | أسود داكن على خلفية بيضاء (مرئي 100%) |
| **الخط** | خط Cairo واضح مع تباعد سطور مناسب للعربية |
| **الفاصل** | خط متقطع بين السؤال والإجابة لتمييز الأجزاء |
| **الصورة/الصوت** | يظهران تلقائيًا عند إضافتهما دون تشويه التصميم |
إذا لم يظهر النص بشكل واضح بعد هذا التصحيح، تأكد من:
1. عدم وجود إعدادات مخصصة في أنكي تغير ألوان النص (من **القوالب** → **الخصائص**).
2. أنك لم تستخدم `!important` في إعدادات أخرى تطغى على هذا اللون.
-------------------------------------------------------------------------------------------------------------
*المنشور السابق*
nostr:nevent1qvzqqqqqqypzpfjq5d7ucvcm6m2qwqzmu2kh6mswyqnv6rvrp0mjjn0qtkmve9qtqythwumn8ghj7un9d3shjtnswf5k6ctv9ehx2ap0qythwumn8ghj7un9d3shjtnwdaehgu3wvfskuep0qqsyhcv7qh88k7cwtz5chn7nljh0f9q7jfpwu5n5dvazjtyfnvgmgfgfucf9t