ما هذا
المتعلم المفكر
Pixion_ARAB@seewaan.com
npub15eq2...grk7
دعنا نبحث سويا عن إدانة الاحتلال والبحث وراء إدعائاته من خلال https://www.perplexity.ai/spaces/mn-jl-flstyn-for-the-sake-of-p-206N7L.fQYu9WqwQHiRBvw#0 أبحث وانشر هذا حتى يتعلم البقية.🇵🇸
غرفتي https://universes.to/space/naddr1qvzqqqyx7cpzple9xqlfr6r0qye3aey0xfagcex66ensluh9qc4k0m86tjdk5ms8qqyj6mtfv93xjaeex5smjccw او https://chorus.community/group/34550%3Aff25303e91e86f01331ee48f327a8c64dad6670ff2e5062b67ecfa5c9b6a6e07%3A-miabiw95
رابط صفحة المجموعة
Notes (20)
كنت اعتقد انها صوره لعبه في البدايه nostr:note1nfzw9cf5yr70cnzygf9jpvqjmhm0kuxakjdgfkaxdy50afxg23zsxq9uws
تعلمت شيء من #أنكي
صورة معبرة😅
صورة جمعت أخطاء المُصَلين ، مِن اليمين...:
• الأول: يلتفت و نهىٰ النبي عن الإلتفات في الصلاة.
• الثاني: حضره الحدث
• الثالث : يمزح اثناء الصلاه
• الرابع: يأكل.
• الخامس: ينزف و النزيف ينقض الوضوء.
• السادس: لا يستر العورة.
• السابع . خارج عن الصف
• الثامن: يضع يُسراه علىٰ يُمناه و الصحيح هو العكس
• التاسع ينظر للأعلى
• العاشر: يضم رجليه حتىٰ إلتصقا و الصحيح أن يجعل بينهُما فُرج
• الحادي عشر: يقرأ بصوت عالِ.
• الثانى عشر .يسبق الامام
• الثالت عشر: لا يستقبل القبلة الصحيحة.
#منقول من: https://www.facebook.com/share/p/1CtrkxrFTW/
#عرف_غيرك #ملتقى
• الأول: يلتفت و نهىٰ النبي عن الإلتفات في الصلاة.
• الثاني: حضره الحدث
• الثالث : يمزح اثناء الصلاه
• الرابع: يأكل.
• الخامس: ينزف و النزيف ينقض الوضوء.
• السادس: لا يستر العورة.
• السابع . خارج عن الصف
• الثامن: يضع يُسراه علىٰ يُمناه و الصحيح هو العكس
• التاسع ينظر للأعلى
• العاشر: يضم رجليه حتىٰ إلتصقا و الصحيح أن يجعل بينهُما فُرج
• الحادي عشر: يقرأ بصوت عالِ.
• الثانى عشر .يسبق الامام
• الثالت عشر: لا يستقبل القبلة الصحيحة.
#منقول من: https://www.facebook.com/share/p/1CtrkxrFTW/
#عرف_غيرك #ملتقىمعرفة قيمة وقتك
https://youtube.com/shorts/xS9bFpu8Pf0
المادة المخاطية تبدأ من عملية الاخراج
بعد أن تتمم هذه العملية عليك التأكد من أن تختفي اللزوجة أثناء تنظيفك لها بالماء وتأكد بيديك بأنه جف تماما وأصبح المكان خشن.
https://youtube.com/shorts/Gv1azJod9aU
قال
النفوس العزيزة لا ترضى بالادمان
https://youtube.com/shorts/0xEhPOpqWlo
المدمن يريد لذة تدوم في الدنيا
https://youtube.com/shorts/ZNbvzbmhWYg
أحد فهم شيء؟
https://youtube.com/shorts/zMO4sY1Rf1Q
أشعر أنني لا أستوب الجزء الأخير
ال AI هو تشكيل ام تهديد جديد للعالم؟
https://youtube.com/shorts/gdeg63dXxk0?si=dpalgge9sTWgQArX
لا يكلف الله نفسا الا وسعها
https://youtube.com/shorts/ZHVvyM9VKPI
لا تعتقد انه يكلفك ب عمل ليس لديك اداة لفعلها (لتقوم بها).
لا تتعلم السرعة في تعلم دينك على عكس تعلم شيء آخر تستمع دون تسريع المقطع ٢× ٣× (الريلز، تسريع المقطع)
الله ينتظرك على فعلك خطأ :
لان اتاني مشيا اتيته سعيا***وان اتاني سعيا اتيته هرولة / أذهب إليه وتوسل
بيقول لي المنشورات خلصت ههه
الموقع في النسخة الجديدة يتجمد من كثرة المنشورات على عكس السابق سلس
في حد هنا يقدر يساعدني في فهم خصائص تعامل obsidian مع البيانات ؟ وسألت على https://lmarena.ai واعطاني دول وأيه رأيكم؟
1. قاعدة بيانات لتطبيقك: SQLite
هل أفضل قاعدة بيانات لتطبيق على الهاتف (سواء أندرويد أو iOS) .
لماذا SQLite هي الخيار الأمثل؟
السرعة الفائقة: على عكس الاعتقاد الشائع، SQLite أسرع بكثير من التعامل المباشر مع الملفات المنفصلة على القرص.
ال قراءة وكتابة البيانات الصغيرة (مثل الصور المصغرة أو النصوص) يمكن أن تكون أسرع بنسبة 35% عند استخدام SQLite مقارنة بالتعامل مع كل ملاحظة كملف منفصل.
الكفاءة: كل عمليات البحث والقراءة والكتابة تتم داخل ملف واحد مُفهرس بشكل احترافي. هذا يقلل من الحمل على نظام التشغيل الذي لا يحتاج إلى فتح وإغلاق مئات أو آلاف الملفات المنفصلة.
1
مدمجة ولا تحتاج لخادم: قاعدة البيانات تكون عبارة عن ملف واحد فقط (.db) داخل مساحة تخزين تطبيقك. هذا يجعل التطبيق سهل التوزيع ولا يتطلب أي إعدادات من المستخدم.
دعم مدمج: SQLite مدمجة بشكل أساسي في نظامي أندرويد و iOS، مما يعني أنها متاحة دائمًا ولا تحتاج إلى تضمين مكتبات ضخمة.
2
بحث نصي قوي (Full-Text Search): توفر SQLite إضافة FTS5، وهي محرك بحث نصي فائق السرعة ومُحسَّن للبحث داخل آلاف الملاحظات في أجزاء من الثانية، وهو بالضبط ما تحتاجه لتجنب بطء البحث.
3
موثوقية عالية: SQLite تضمن سلامة البيانات حتى في حالة انقطاع الطاقة أو تعطل التطبيق أثناء الكتابة (ما يعرف بـ ACID compliance).
2
الخلاصة: إذا كنت تريد تطبيقًا سريع الاستجابة، استخدم SQLite. إنها الحل الصناعي القياسي للتطبيقات المحمولة التي تحتاج إلى تخزين محلي منظم وسريع.
في اقتراح آخر الخلاصة التنفيذية
استعمل SQLite + FTS5 (أو SQLCipher إذا أردت التشفير).
ضع الملفات المرفقة في مجلد، وخزّن المسار والـhash في جدول مرفق.
أبقِ القاعدة والفهرس على وسيط التخزين الذي يختاره المستخدم، لكن حذِّر من بطء وسائط SD/USB الرخيصة.
احمِ نفسك من التلف بتفعيل WAL والقيام بنقطة Checkpoint عند كل إغلاق أو إزالة وسيط تخزين.
بهذا التصميم ستحصل على زمن بحث واسترجاع تحت 50 مللي ثانية لمعظم العمليات، حتى لو شغّلت التطبيق من بطاقة SD متوسطة الجودة.
متى تختار الحل الثاني (Qt + QML)؟
اختر هذا الحل في معظم الحالات الأخرى، وتحديداً:
إذا كنت مطوراً منفرداً أو ضمن فريق صغير.
إذا كانت خبرتك الأساسية تتركز في C++ وتريد أن تكون منتجاً في أسرع وقت.
إذا كانت سرعة الوصول إلى السوق (Time to Market) عاملاً مهماً.
إذا كنت تخطط لإصدار التطبيق على منصات أخرى لاحقاً (مثل ويندوز، لينكس، ماك)، فهذا الحل يتيح لك ذلك بأقل مجهود.
إذا كان تطبيقك (مثل تطبيق الملاحظات) لا يتطلب رسوميات معقدة أو ألعاب، فإن أداء Qt سيكون أكثر من كافٍ.
وماذا عن كونها صفحة ويب في الوقت الحالي؟
وأي الحلول هذه أفضل: كيفية تحويل تطبيق الويب الحالي إلى تطبيق يعمل على فلاشة USB (portable) أو كتطبيق مستقل على مختلف الأنظمة مع وجود أيقونات.
Portable Web App على فلاشة USB -
يمكن حفظ ملف HTML مع المتصفح المحمول
PWA (Progressive Web App) -
يمكن تثبيته كتطبيق على الهاتف والكمبيوتر < تم اضافتها
Electron - تحويله إلى تطبيق سطح مكتب أصلي
Tauri - بديل أخف من Electron
Capacitor/Cordova - لتطبيقات الهاتف
والكود لا يتجاوز ٢٠٠٠ سطر كود ويب في المشروع.
عملت برنامج بالذكاء الاصطناعي لمقارنة بين أثنين إلى 4 نصوص مختلفة.
بستخدام أداة \Claude Opus 4.5 now available - State-of-the-art coding and reasoning capabilities.
أنشرها الآن وأتيح لكم عدة طرق لأقتصاص الكود ذاته ان شاء الله فيما بعد
بسم الله الرحمن الرحيم
التنسبق الثاني لأنكي
### ✅ التصحيح النهائي مع شرح مُفصّل
#### 🔍 المشكلة في الكود السابق:
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تنسيق #بطاقة_انكي ب #الذكاء_الاصطناعي...
شرح التعديلات المهمة
✅ حل مشكلة لون النص الفاتح
تمت إضافة كلاس منفصل 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).
😅😁 استمتع واستخدمت هذه الأداة :
الرابط: https://lmarena.ai/c/019ab7e9-a8e8-74bb-a1d4-d4c6d5fe1e4c
شرح التعديلات المهمة
✅ حل مشكلة لون النص الفاتح
تمت إضافة كلاس منفصل 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).
😅😁 استمتع واستخدمت هذه الأداة :
الرابط: https://lmarena.ai/c/019ab7e9-a8e8-74bb-a1d4-d4c6d5fe1e4cاعتبر انك شرحت جزء من الموقع nostr:note1jzsns5my3njs673ghuq2llw26zzxf0h62u97cnyavjaeg0kjuchq4fnyrc
اعتبر انك شرحت جزء من الموقع nostr:note10dkzgm6pfqhnlmaattwhqt82axgsgm0djyxd8k7zf3qunp3asrkqnl84sw
الاسوء
عندما يصبح الرقم السري مع السارق nostr:note199vvch682fdsmdlt3endl9mu47et63uj5tky29lrd88fhprq7pfqmdl94z