index.db_font.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>مصحف التلاوة - النسخة المصغرة (db_font)</title>
    <style>
        /* 1. استدعاء الخطوط المحلية من مجلدك مباشرة */
        @font-face {
            font-family: 'Font1';
            src: url('fonts/1.woff2') format('woff2');
            font-display: swap;
        }
        @font-face {
            font-family: 'Font2';
            src: url('fonts/2.woff2') format('woff2');
            font-display: swap;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
            background-color: #e9ecef;
            margin: 0;
            padding: 20px;
        }

        /* 2. تصميم لوحة التحكم */
        .controls-bar {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        select {
            padding: 12px 20px;
            font-size: 16px;
            font-family: inherit;
            border: 2px solid #ced4da;
            border-radius: 8px;
            background-color: #fff;
            cursor: pointer;
            outline: none;
            transition: border-color 0.3s;
            min-width: 250px;
        }
        select:focus { border-color: #198754; }

        /* 3. تصميم صفحة المصحف */
        .mushaf-container {
            background-color: #fffdf7;
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            text-align: center;
            min-height: 500px;
            border: 8px solid #e2d9b3;
            max-width: 1200px;
            margin: 0 auto;
        }

        .surah-header {
            font-size: 32px;
            color: #212529;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 2px solid #e2d9b3;
            font-weight: bold;
        }

        /* 4. كلاسات الخطوط */
        .style-f1 { font-family: 'Font1', sans-serif; font-size: 48px; line-height: 2.8; color: #000; }
        .style-f2 { font-family: 'Font2', sans-serif; font-size: 48px; line-height: 2.5; color: #000; }

        .status-msg { color: #198754; font-size: 22px; font-weight: bold; padding: 40px; }
        .error-msg { color: #dc3545; }
    </style>
</head>
<body>

    <div class="controls-bar">
        <select id="surahSelect">
            <option value="">جاري تحميل قائمة السور...</option>
        </select>

        <select id="fontSelect">
            <!-- سيتم إضافة الخطوط هنا من الـ Config -->
        </select>
    </div>

    <div class="mushaf-container">
        <div class="surah-header" id="surahTitle">الرجاء اختيار سورة</div>
        <div id="quranText" class="status-msg">جاري التهيئة...</div>
    </div>

    <script>
        // === 1. خريطة الإعدادات لملفات db_font المصغرة (1.4MB) ===
        const fontConfig = {
            "f1": {
                name: "1. الخط الهندي (1.woff2)",
                cssClass: "style-f1",
                jsonFile: "data/db_font1.json", // هنا نقرأ الملف المصغر الأول
                database: null 
            },
            "f2": {
                name: "2. خط ديجيتال خط (2.woff2)",
                cssClass: "style-f2",
                jsonFile: "data/db_font2.json", // هنا نقرأ الملف المصغر الثاني
                database: null 
            }
        };

        const surahSelect = document.getElementById('surahSelect');
        const fontSelect = document.getElementById('fontSelect');
        const quranText = document.getElementById('quranText');
        const surahTitle = document.getElementById('surahTitle');
        let surahsMetaData = [];

        // === 2. التهيئة وتحميل ملف السور (surah.json) ===
        async function init() {
            for (const key in fontConfig) {
                surahSelect.disabled = true;
                const opt = new Option(fontConfig[key].name, key);
                fontSelect.add(opt);
            }

            try {
                const response = await fetch('data/surah.json');
                if (!response.ok) throw new Error("ملف surah.json غير موجود!");
                surahsMetaData = await response.json();
                
                surahSelect.innerHTML = '';
                surahsMetaData.forEach((surah, index) => {
                    const name = surah.surahNameArabic || surah.name || `سورة ${index + 1}`;
                    const ayahsCount = surah.totalAyah || surah.numberOfAyahs || "";
                    surahSelect.add(new Option(`${index + 1}. سُورَةُ ${name} (${ayahsCount} آية)`, index + 1));
                });
                
                surahSelect.disabled = false;
                loadAndRender(); // عرض السورة الأولى
            } catch (error) {
                quranText.innerHTML = `<span class="error-msg">حدث خطأ في قراءة surah.json!</span>`;
            }
        }

        // === 3. تحميل الـ JSON وعرض السورة ===
        async function loadAndRender() {
            const surahNumber = surahSelect.value;
            const fontKey = fontSelect.value;
            const currentFont = fontConfig[fontKey]; 

            if (!surahNumber) return;

            const surahInfo = surahsMetaData[surahNumber - 1];
            const name = surahInfo.surahNameArabic || surahInfo.name || `سورة ${surahNumber}`;
            surahTitle.innerText = `سُورَةُ ${name}`;
            quranText.className = currentFont.cssClass;

            // Lazy Load: تحميل الملف مرة واحدة فقط
            if (currentFont.database === null) {
                quranText.innerHTML = `<div class="status-msg">جاري تحميل ${currentFont.jsonFile} (~1.4MB)...</div>`;
                try {
                    const response = await fetch(currentFont.jsonFile);
                    if (!response.ok) throw new Error("الملف غير موجود");
                    currentFont.database = await response.json();
                } catch (error) {
                    quranText.innerHTML = `<div class="error-msg">خطأ: لم يتم العثور على ملف ${currentFont.jsonFile}!</div>`;
                    return; 
                }
            }

            const db = currentFont.database;
            const totalAyahs = surahInfo.totalAyah || surahInfo.numberOfAyahs || 7; 
            let finalHtml = '';

            // تجميع الآيات
            for (let i = 1; i <= totalAyahs; i++) {
                const verseKey = `${surahNumber}:${i}`;
                
                // التغيير هنا: db[verseKey] مباشرة بدون .text
                if (db[verseKey]) {
                    finalHtml += db[verseKey] + ' '; 
                } else {
                    finalHtml += `<span style="color:red; font-size:16px;"> [نقص في البيانات: ${verseKey}] </span>`;
                }
            }

            quranText.innerHTML = finalHtml;
        }

        surahSelect.addEventListener('change', loadAndRender);
        fontSelect.addEventListener('change', loadAndRender);

        init();
    </script>
</body>
</html>