| <!DOCTYPE html> |
| <html lang="ar" dir="rtl"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
| <title>مدرب الفهرسة MARC 21</title> |
|
|
| <style> |
| * { |
| box-sizing: border-box; |
| } |
| |
| body { |
| margin: 0; |
| font-family: Arial, Tahoma, sans-serif; |
| background: #f4f6f9; |
| color: #1f2937; |
| } |
| |
| |
| header { |
| background: linear-gradient(135deg, #17365d, #2563eb); |
| color: white; |
| padding: 22px 35px; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| box-shadow: 0 3px 10px rgba(0,0,0,0.15); |
| } |
| |
| header h1 { |
| margin: 0; |
| font-size: 25px; |
| } |
| |
| header p { |
| margin: 6px 0 0; |
| opacity: 0.85; |
| } |
| |
| .language-btn { |
| border: none; |
| background: white; |
| color: #17365d; |
| padding: 10px 18px; |
| border-radius: 8px; |
| cursor: pointer; |
| font-weight: bold; |
| } |
| |
| |
| .container { |
| max-width: 1400px; |
| margin: 30px auto; |
| padding: 0 20px; |
| } |
| |
| |
| .card { |
| background: white; |
| border-radius: 14px; |
| padding: 25px; |
| margin-bottom: 25px; |
| box-shadow: 0 3px 12px rgba(0,0,0,0.08); |
| } |
| |
| .card h2 { |
| margin-top: 0; |
| color: #17365d; |
| } |
| |
| |
| .book-info { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 15px; |
| } |
| |
| .form-group label { |
| display: block; |
| font-weight: bold; |
| margin-bottom: 7px; |
| } |
| |
| input, |
| select { |
| width: 100%; |
| padding: 11px; |
| border: 1px solid #d1d5db; |
| border-radius: 7px; |
| font-size: 15px; |
| } |
| |
| input:focus, |
| select:focus { |
| outline: none; |
| border-color: #2563eb; |
| } |
| |
| |
| .table-wrapper { |
| overflow-x: auto; |
| } |
| |
| table { |
| width: 100%; |
| border-collapse: collapse; |
| min-width: 900px; |
| } |
| |
| th { |
| background: #17365d; |
| color: white; |
| padding: 13px; |
| } |
| |
| td { |
| border: 1px solid #ddd; |
| padding: 8px; |
| text-align: center; |
| } |
| |
| tr:nth-child(even) { |
| background: #f8fafc; |
| } |
| |
| .tag { |
| width: 80px; |
| font-weight: bold; |
| text-align: center; |
| } |
| |
| .indicator { |
| width: 80px; |
| text-align: center; |
| } |
| |
| .subfield { |
| width: 90px; |
| text-align: center; |
| } |
| |
| .value { |
| min-width: 350px; |
| } |
| |
| |
| .actions { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| margin-top: 20px; |
| } |
| |
| button { |
| border: none; |
| padding: 11px 18px; |
| border-radius: 8px; |
| cursor: pointer; |
| font-size: 14px; |
| font-weight: bold; |
| } |
| |
| .btn-add { |
| background: #16a34a; |
| color: white; |
| } |
| |
| .btn-check { |
| background: #2563eb; |
| color: white; |
| } |
| |
| .btn-clear { |
| background: #dc2626; |
| color: white; |
| } |
| |
| .btn-delete { |
| background: #ef4444; |
| color: white; |
| padding: 7px 10px; |
| } |
| |
| .btn-copy { |
| background: #64748b; |
| color: white; |
| padding: 7px 10px; |
| } |
| |
| button:hover { |
| opacity: 0.85; |
| } |
| |
| |
| .result { |
| display: none; |
| border-radius: 12px; |
| padding: 20px; |
| margin-top: 20px; |
| } |
| |
| .score { |
| font-size: 30px; |
| font-weight: bold; |
| color: #16a34a; |
| } |
| |
| .success { |
| color: #15803d; |
| margin: 8px 0; |
| } |
| |
| .warning { |
| color: #ca8a04; |
| margin: 8px 0; |
| } |
| |
| .error { |
| color: #dc2626; |
| margin: 8px 0; |
| } |
| |
| |
| footer { |
| text-align: center; |
| padding: 25px; |
| color: #64748b; |
| } |
| |
| |
| @media (max-width: 700px) { |
| |
| header { |
| flex-direction: column; |
| gap: 15px; |
| text-align: center; |
| } |
| |
| .book-info { |
| grid-template-columns: 1fr; |
| } |
| |
| .container { |
| padding: 10px; |
| } |
| } |
| </style> |
| </head> |
|
|
|
|
| <body> |
|
|
| <header> |
|
|
| <div> |
| <h1>📚 مدرّب الفهرسة MARC 21</h1> |
| <p>منصة تدريبية على الفهرسة الآلية وقواعد RDA</p> |
| </div> |
|
|
| <button class="language-btn" onclick="changeLanguage()"> |
| English |
| </button> |
|
|
| </header> |
|
|
|
|
| <main class="container"> |
|
|
| |
|
|
| <section class="card"> |
|
|
| <h2>📖 بيانات المصدر</h2> |
|
|
| <div class="book-info"> |
|
|
| <div class="form-group"> |
| <label>عنوان الكتاب</label> |
| <input |
| type="text" |
| id="bookTitle" |
| value="مبادئ علم المكتبات"> |
| </div> |
|
|
| <div class="form-group"> |
| <label>المؤلف</label> |
| <input |
| type="text" |
| id="author" |
| value="أحمد بن علي"> |
| </div> |
|
|
| <div class="form-group"> |
| <label>مكان النشر</label> |
| <input |
| type="text" |
| id="place" |
| value="مسقط"> |
| </div> |
|
|
| <div class="form-group"> |
| <label>الناشر</label> |
| <input |
| type="text" |
| id="publisher" |
| value="دار المعرفة"> |
| </div> |
|
|
| <div class="form-group"> |
| <label>سنة النشر</label> |
| <input |
| type="text" |
| id="year" |
| value="2026"> |
| </div> |
|
|
| <div class="form-group"> |
| <label>عدد الصفحات</label> |
| <input |
| type="text" |
| id="pages" |
| value="250 صفحة"> |
| </div> |
|
|
| </div> |
|
|
| </section> |
|
|
|
|
| |
|
|
| <section class="card"> |
|
|
| <h2>📝 محرر سجل MARC 21</h2> |
|
|
| <div class="table-wrapper"> |
|
|
| <table> |
|
|
| <thead> |
|
|
| <tr> |
| <th>Tag</th> |
| <th>المؤشر 1</th> |
| <th>المؤشر 2</th> |
| <th>الحقل الفرعي</th> |
| <th>القيمة</th> |
| <th>الإجراءات</th> |
| </tr> |
|
|
| </thead> |
|
|
| <tbody id="marcTable"> |
|
|
| <tr> |
|
|
| <td> |
| <input |
| class="tag" |
| value="001"> |
| </td> |
|
|
| <td> |
| <input |
| class="indicator" |
| value=""> |
| </td> |
|
|
| <td> |
| <input |
| class="indicator" |
| value=""> |
| </td> |
|
|
| <td> |
| <input |
| class="subfield" |
| value=""> |
| </td> |
|
|
| <td> |
| <input |
| class="value" |
| value="000012345"> |
| </td> |
|
|
| <td> |
|
|
| <button |
| class="btn-copy" |
| onclick="copyRow(this)"> |
| نسخ |
| </button> |
|
|
| <button |
| class="btn-delete" |
| onclick="deleteRow(this)"> |
| حذف |
| </button> |
|
|
| </td> |
|
|
| </tr> |
|
|
|
|
| <tr> |
|
|
| <td> |
| <input class="tag" value="020"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="#"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="#"> |
| </td> |
|
|
| <td> |
| <input class="subfield" value="$a"> |
| </td> |
|
|
| <td> |
| <input |
| class="value" |
| value="978-99969-0-0000-0"> |
| </td> |
|
|
| <td> |
|
|
| <button |
| class="btn-copy" |
| onclick="copyRow(this)"> |
| نسخ |
| </button> |
|
|
| <button |
| class="btn-delete" |
| onclick="deleteRow(this)"> |
| حذف |
| </button> |
|
|
| </td> |
|
|
| </tr> |
|
|
|
|
| <tr> |
|
|
| <td> |
| <input class="tag" value="100"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="1"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="#"> |
| </td> |
|
|
| <td> |
| <input class="subfield" value="$a"> |
| </td> |
|
|
| <td> |
| <input |
| class="value" |
| value="أحمد بن علي"> |
| </td> |
|
|
| <td> |
|
|
| <button |
| class="btn-copy" |
| onclick="copyRow(this)"> |
| نسخ |
| </button> |
|
|
| <button |
| class="btn-delete" |
| onclick="deleteRow(this)"> |
| حذف |
| </button> |
|
|
| </td> |
|
|
| </tr> |
|
|
|
|
| <tr> |
|
|
| <td> |
| <input class="tag" value="245"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="1"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="0"> |
| </td> |
|
|
| <td> |
| <input class="subfield" value="$a"> |
| </td> |
|
|
| <td> |
| <input |
| class="value" |
| value="مبادئ علم المكتبات"> |
| </td> |
|
|
| <td> |
|
|
| <button |
| class="btn-copy" |
| onclick="copyRow(this)"> |
| نسخ |
| </button> |
|
|
| <button |
| class="btn-delete" |
| onclick="deleteRow(this)"> |
| حذف |
| </button> |
|
|
| </td> |
|
|
| </tr> |
|
|
|
|
| <tr> |
|
|
| <td> |
| <input class="tag" value="264"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="#"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="1"> |
| </td> |
|
|
| <td> |
| <input class="subfield" value="$a"> |
| </td> |
|
|
| <td> |
| <input |
| class="value" |
| value="مسقط"> |
| </td> |
|
|
| <td> |
|
|
| <button |
| class="btn-copy" |
| onclick="copyRow(this)"> |
| نسخ |
| </button> |
|
|
| <button |
| class="btn-delete" |
| onclick="deleteRow(this)"> |
| حذف |
| </button> |
|
|
| </td> |
|
|
| </tr> |
|
|
|
|
| <tr> |
|
|
| <td> |
| <input class="tag" value="300"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="#"> |
| </td> |
|
|
| <td> |
| <input class="indicator" value="#"> |
| </td> |
|
|
| <td> |
| <input class="subfield" value="$a"> |
| </td> |
|
|
| <td> |
| <input |
| class="value" |
| value="250 صفحة"> |
| </td> |
|
|
| <td> |
|
|
| <button |
| class="btn-copy" |
| onclick="copyRow(this)"> |
| نسخ |
| </button> |
|
|
| <button |
| class="btn-delete" |
| onclick="deleteRow(this)"> |
| حذف |
| </button> |
|
|
| </td> |
|
|
| </tr> |
|
|
| </tbody> |
|
|
| </table> |
|
|
| </div> |
|
|
|
|
| <div class="actions"> |
|
|
| <button |
| class="btn-add" |
| onclick="addField()"> |
| ➕ إضافة حقل |
| </button> |
|
|
| <button |
| class="btn-check" |
| onclick="checkRecord()"> |
| 🔍 التحقق من السجل |
| </button> |
|
|
| <button |
| class="btn-clear" |
| onclick="clearRecord()"> |
| 🗑️ مسح السجل |
| </button> |
|
|
| </div> |
|
|
| </section> |
|
|
|
|
| |
|
|
| <section |
| class="card result" |
| id="result"> |
|
|
| <h2>📊 نتيجة التدريب</h2> |
|
|
| <div class="score"> |
| 87 / 100 |
| </div> |
|
|
| <p class="success"> |
| ✅ الحقل 245 موجود. |
| </p> |
|
|
| <p class="success"> |
| ✅ الحقل 100 موجود. |
| </p> |
|
|
| <p class="success"> |
| ✅ الحقل 300 موجود. |
| </p> |
|
|
| <p class="warning"> |
| ⚠️ راجع مؤشرات الحقل 245. |
| </p> |
|
|
| <p class="warning"> |
| ⚠️ راجع بيان المسؤولية وفق قواعد RDA. |
| </p> |
|
|
| </section> |
|
|
| </main> |
|
|
|
|
| <footer> |
|
|
| MARC 21 Trainer © 2026 |
| <br> |
| منصة تدريبية تعليمية |
|
|
| </footer> |
|
|
|
|
| <script> |
| |
| |
| |
| |
| |
| function addField() { |
| |
| const table = document.getElementById("marcTable"); |
| |
| const row = document.createElement("tr"); |
| |
| row.innerHTML = ` |
| |
| <td> |
| <input |
| class="tag" |
| placeholder="Tag"> |
| </td> |
| |
| <td> |
| <input |
| class="indicator" |
| placeholder="#"> |
| </td> |
| |
| <td> |
| <input |
| class="indicator" |
| placeholder="#"> |
| </td> |
| |
| <td> |
| <input |
| class="subfield" |
| placeholder="$a"> |
| </td> |
| |
| <td> |
| <input |
| class="value" |
| placeholder="القيمة"> |
| </td> |
| |
| <td> |
| |
| <button |
| class="btn-copy" |
| onclick="copyRow(this)"> |
| نسخ |
| </button> |
| |
| <button |
| class="btn-delete" |
| onclick="deleteRow(this)"> |
| حذف |
| </button> |
| |
| </td> |
| |
| `; |
| |
| table.appendChild(row); |
| } |
| |
| |
| |
| |
| |
| |
| function deleteRow(button) { |
| |
| const row = button.closest("tr"); |
| |
| row.remove(); |
| } |
| |
| |
| |
| |
| |
| |
| function copyRow(button) { |
| |
| const row = button.closest("tr"); |
| |
| const clone = row.cloneNode(true); |
| |
| document |
| .getElementById("marcTable") |
| .appendChild(clone); |
| } |
| |
| |
| |
| |
| |
| |
| function clearRecord() { |
| |
| if ( |
| confirm("هل تريد بالفعل مسح سجل MARC بالكامل؟") |
| ) { |
| |
| document |
| .getElementById("marcTable") |
| .innerHTML = ""; |
| |
| } |
| } |
| |
| |
| |
| |
| |
| |
| function checkRecord() { |
| |
| const rows = |
| document.querySelectorAll( |
| "#marcTable tr" |
| ); |
| |
| let has245 = false; |
| let has100 = false; |
| let has300 = false; |
| |
| rows.forEach(row => { |
| |
| const tag = |
| row.querySelector(".tag").value.trim(); |
| |
| if (tag === "245") { |
| has245 = true; |
| } |
| |
| if (tag === "100") { |
| has100 = true; |
| } |
| |
| if (tag === "300") { |
| has300 = true; |
| } |
| |
| }); |
| |
| |
| let score = 70; |
| |
| if (has245) score += 10; |
| if (has100) score += 10; |
| if (has300) score += 10; |
| |
| if (score > 100) { |
| score = 100; |
| } |
| |
| |
| const result = |
| document.getElementById("result"); |
| |
| result.style.display = "block"; |
| |
| |
| result.innerHTML = ` |
| |
| <h2>📊 نتيجة التدريب</h2> |
| |
| <div class="score"> |
| ${score} / 100 |
| </div> |
| |
| ${ |
| has245 |
| ? '<p class="success">✅ الحقل 245 موجود.</p>' |
| : '<p class="error">❌ الحقل 245 غير موجود.</p>' |
| } |
| |
| ${ |
| has100 |
| ? '<p class="success">✅ الحقل 100 موجود.</p>' |
| : '<p class="error">❌ الحقل 100 غير موجود.</p>' |
| } |
| |
| ${ |
| has300 |
| ? '<p class="success">✅ الحقل 300 موجود.</p>' |
| : '<p class="error">❌ الحقل 300 غير موجود.</p>' |
| } |
| |
| <p class="warning"> |
| 💡 هذه نسخة تدريبية أولية. |
| يمكن لاحقًا إضافة محرك تحقق حقيقي لقواعد MARC 21 وRDA. |
| </p> |
| |
| `; |
| |
| } |
| |
| |
| |
| |
| |
| |
| function changeLanguage() { |
| |
| alert( |
| "سيتم في النسخة القادمة دعم العربية والإنجليزية بشكل كامل." |
| ); |
| |
| } |
| |
| </script> |
|
|
| </body> |
|
|
| </html> |
