Smart Exam Suite - Master Dashboard

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Manual - Structure Builder</title>
    <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&family=Amiri:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap" rel="stylesheet">
    
    <style>
    
     /* Add this to the CSS inside code-tab1, code-tab2, etc. */
@media (max-width: 600px) {
    .container {
        padding: 15px; /* Reduce padding from 40px to 15px */
        width: auto; /* Ensure it fits the screen */
    }
    
    h1 {
        font-size: 22px; /* Smaller header text */
    }
    
    .box {
        padding: 10px; /* Smaller inner spacing */
    }
}
        :root { --primary: #2c3e50; --accent: #27ae60; --bg: #f4f6f9; }
        body { font-family: 'Segoe UI', sans-serif; background-color: var(--bg); margin: 0; padding: 20px; color: #333; }
        .container { max-width: 900px; margin: 0 auto; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .lang-switcher { display: flex; gap: 10px; margin-bottom: 30px; justify-content: center; }
        .guide-btn { padding: 10px 30px; border: 2px solid #ddd; border-radius: 30px; cursor: pointer; font-weight: bold; font-size: 14px; background: #f0f0f0; color: #555; transition: all 0.2s; }
        .guide-btn.active-lang { background: #2c3e50; color: white; border-color: #2c3e50; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
        .guide-btn:hover { background: #e0e0e0; transform: translateY(-2px); }
        .content-section { display: none; animation: fadeIn 0.5s; }
        .content-section.active { display: block; }
        h1 { color: var(--primary); text-align: center; border-bottom: 2px solid #eee; padding-bottom: 20px; }
        h2 { color: var(--accent); margin-top: 30px; display: flex; align-items: center; gap: 10px; }
        h3 { color: #555; margin-bottom: 5px; }
        p, li { line-height: 1.8; color: #444; }
        .box { background: #f8f9fa; border-left: 4px solid var(--accent); padding: 15px; margin: 15px 0; border-radius: 4px; }
        .key-command { background: #333; color: white; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 12px; }
        .rtl { direction: rtl; text-align: right; }
        .ur-font { font-family: 'Noto Nastaliq Urdu', serif; line-height: 2.2; }
        .ar-font { font-family: 'Amiri', serif; line-height: 2; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        /* --- MOBILE RESPONSIVE FIX --- */
@media (max-width: 600px) {
    body { padding: 5px !important; }
    
    .container { 
        padding: 15px !important; /* Reduces huge padding */
        width: 100% !important;   /* Ensures it fits screen */
        box-sizing: border-box;   /* Prevents overflow */
    }

/* Fix Language Buttons (Stack them) */
    .lang-switcher, .lang-tabs { 
        flex-wrap: wrap; 
        gap: 5px; 
    }
    
    .guide-btn, .tab-btn { 
        flex: 1 1 100%; /* Make buttons full width on phone */
        text-align: center;
        margin-bottom: 5px;
    }

/* Fix Font Sizes */
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    ul, ol { padding-left: 20px; }
}
    </style>
</head>
<body>

<div class="container">
    <div class="lang-switcher">
        <button id="btn-en" class="guide-btn active-lang" onclick="switchGuideLanguage('en')">English</button>
        <button id="btn-ur" class="guide-btn" onclick="switchGuideLanguage('ur')">اردو (Urdu)</button>
        <button id="btn-ar" class="guide-btn" onclick="switchGuideLanguage('ar')">العربية (Arabic)</button>
    </div>

<div id="en" class="content-section active">
        <h1>🛠️ Structure & Data Builder Manual</h1>
        <p>The <strong>Smart Result Builder</strong> is the heart of the software. This is where you define your school details, create classes, subjects, and enter student marks.</p>

<h2>1. Institute & Visual Settings</h2>
        <div class="box">
            <h3>Setup Your Branding</h3>
            <ul>
                <li><strong>Institute Name:</strong> Enter your school or madrasa name (e.g., "Al-Huda Academy").</li>
                <li><strong>Exam Name:</strong> Define the exam title (e.g., "Annual Examination 2026").</li>
                <li><strong>Logo & Background:</strong> Click "Choose File" to upload your school logo (PNG/JPG) and a background watermark.</li>
                <li><strong>Typography:</strong>
                    <ul>
                        <li>Select <em>"Urdu (Nastaleeq)"</em> if you are creating Urdu cards.</li>
                        <li>Select <em>"Right to Left (RTL)"</em> for Urdu/Arabic layouts.</li>
                    </ul>
                </li>
            </ul>
        </div>

<h2>2. Class Structure (The Setup)</h2>
        <div class="box">
            <h3>Create Classes & Subjects</h3>
            <ol>
                <li><strong>Add Class:</strong> Enter a name (e.g., "Class 9th"), Total Marks, and Pass %. Click <b>+ Add Class</b>.</li>
                <li><strong>Total Mode (Auto/Manual):</strong>
                    <ul>
                        <li><b>Auto Sum:</b> Automatically calculates total marks based on subjects added.</li>
                        <li><b>Manual:</b> You define a fixed total (e.g., 550) regardless of subject sums.</li>
                    </ul>
                </li>
                <li><strong>Add Subjects:</strong> Inside the class box, type a Subject Name (e.g., "English"), Total Marks (e.g., 100), and Pass Marks (e.g., 33). Click <b>Add Subject</b>.</li>
            </ol>
            <p><i>Note: You can delete subjects or classes using the red delete/cross buttons.</i></p>
        </div>

<h2>3. Student Data Entry (The Magic)</h2>
        <div class="box">
            <h3>Excel Copy-Paste Feature</h3>
            <p>You do not need to type every student manually! Follow these steps:</p>
            <ol>
                <li>Select your class from the dropdown menu.</li>
                <li>Open your <strong>Excel Sheet</strong> containing: <em>Roll No, Name, Father Name, Subject Marks</em>.</li>
                <li>Copy the data from Excel (<span class="key-command">Ctrl + C</span>).</li>
                <li>In the software, click the <strong>First Cell (Roll No)</strong> of the first row.</li>
                <li>Press <span class="key-command">Ctrl + V</span> to paste.</li>
            </ol>
            <p>The software will automatically create rows and fill in all the data for you.</p>
        </div>

<h2>4. Saving Your Data</h2>
        <div class="box">
            <p>Once you are done, click the green <strong>💾 Save JSON</strong> button. This will download a file to your computer. Keep this file safe! You will load this file into the <em>Card Generator</em> and <em>Result Viewer</em>.</p>
        </div>
    </div>

<div id="ur" class="content-section rtl">
        <h1 class="ur-font">🛠️ اسٹرکچر اور ڈیٹا بلڈر - ہدایت نامہ</h1>
        <p class="ur-font"><strong>اسمارٹ رزلٹ بلڈر</strong> اس سافٹ ویئر کا دل ہے۔ یہاں آپ اپنے اسکول کی تفصیلات، کلاسز، مضامین اور طلباء کے نمبرز درج کرتے ہیں۔ یہاں بنائی گئی ڈیٹا فائل (JSON) باقی تمام ٹولز میں استعمال ہوتی ہے۔</p>

<h2 class="ur-font">۱۔ ادارہ اور بصری ترتیبات (Settings)</h2>
        <div class="box ur-font">
            <h3>اپنی برانڈنگ سیٹ کریں</h3>
            <ul>
                <li><strong>ادارے کا نام:</strong> اپنے اسکول یا مدرسے کا نام لکھیں (مثلاً: "الحق اکیڈمی")۔</li>
                <li><strong>امتحان کا نام:</strong> امتحان کا عنوان دیں (مثلاً: "سالانہ امتحان ۲۰۲۶")۔</li>
                <li><strong>لوگو اور بیک گراؤنڈ:</strong> اپنے اسکول کا مونوگرام اور واٹر مارک اپ لوڈ کریں۔</li>
                <li><strong>ٹائپوگرافی (لکھائی):</strong>
                    <ul>
                        <li>اگر آپ اردو کارڈ بنا رہے ہیں تو <em>"Urdu (Nastaleeq)"</em> منتخب کریں۔</li>
                        <li>اردو کے لیے سمت <em>"Right to Left (RTL)"</em> منتخب کریں۔</li>
                    </ul>
                </li>
            </ul>
        </div>

<h2 class="ur-font">۲۔ کلاس کا ڈھانچہ (Class Structure)</h2>
        <div class="box ur-font">
            <h3>کلاس اور مضامین بنائیں</h3>
            <ol>
                <li><strong>کلاس شامل کریں:</strong> نام (مثلاً "نہم کلاس")، کل نمبر اور پاس فیصد لکھیں۔ <b>+ Add Class</b> پر کلک کریں۔</li>
                <li><strong>ٹوٹل موڈ (Auto/Manual):</strong>
                    <ul>
                        <li><b>Auto Sum:</b> مضامین کے نمبروں کو خودکار جمع کر کے ٹوٹل بنائے گا۔</li>
                        <li><b>Manual:</b> آپ اپنی مرضی کا فکس ٹوٹل (مثلاً 500) رکھ سکتے ہیں۔</li>
                    </ul>
                </li>
                <li><strong>مضمون شامل کریں:</strong> مضمون کا نام (مثلاً "اردو")، کل نمبر اور پاس نمبر لکھ کر <b>Add Subject</b> پر کلک کریں۔</li>
            </ol>
        </div>

<h2 class="ur-font">۳۔ اسٹوڈنٹ ڈیٹا انٹری (جادوئی فیچر)</h2>
        <div class="box ur-font">
            <h3>ایکسل (Excel) کاپی پیسٹ</h3>
            <p>آپ کو ہر طالب علم کا ڈیٹا ہاتھ سے لکھنے کی ضرورت نہیں! درج ذیل طریقہ اپنائیں:</p>
            <ol>
                <li>ڈراپ ڈاؤن سے اپنی کلاس منتخب کریں۔</li>
                <li>اپنی <strong>ایکسل شیٹ</strong> کھولیں جس میں: <em>رول نمبر، نام، ولدیت، اور نمبرز</em> موجود ہوں۔</li>
                <li>ایکسل سے ڈیٹا کاپی کریں (<span class="key-command">Ctrl + C</span>)۔</li>
                <li>سافٹ ویئر میں آکر پہلی قطار کے <strong>پہلے خانے (Roll No)</strong> پر کلک کریں۔</li>
                <li>کی بورڈ سے <span class="key-command">Ctrl + V</span> دبائیں۔</li>
            </ol>
            <p>سافٹ ویئر خودکار طریقے سے تمام قطاریں بنا دے گا اور ڈیٹا بھر دے گا۔</p>
        </div>

<h2 class="ur-font">۴۔ ڈیٹا محفوظ کرنا</h2>
        <div class="box ur-font">
            <p>کام مکمل ہونے پر سبز رنگ کے <strong>💾 Save JSON</strong> بٹن پر کلک کریں۔ یہ فائل آپ کے کمپیوٹر میں محفوظ ہو جائے گی۔ اس فائل کو سنبھال کر رکھیں، یہی فائل رزلٹ کارڈ بنانے کے لیے استعمال ہوگی۔</p>
        </div>
    </div>

<div id="ar" class="content-section rtl">
        <h1 class="ar-font">🛠️ دليل المستخدم - منشئ الهيكل والبيانات</h1>
        <p class="ar-font">يعد <strong>Smart Result Builder</strong> قلب البرنامج. هنا تقوم بتحديد تفاصيل مدرستك، وإنشاء الفصول والمواد، وإدخال درجات الطلاب. يتم استخدام ملف البيانات (JSON) الذي تم إنشاؤه هنا بواسطة جميع الأدوات الأخرى.</p>

<h2 class="ar-font">١. إعدادات المعهد والمظهر</h2>
        <div class="box ar-font">
            <h3>إعداد الهوية البصرية</h3>
            <ul>
                <li><strong>اسم المعهد:</strong> أدخل اسم مدرستك أو معهدك.</li>
                <li><strong>اسم الامتحان:</strong> حدد عنوان الامتحان (مثل "الامتحان السنوي ٢٠٢٦").</li>
                <li><strong>الشعار والخلفية:</strong> قم بتحميل شعار المدرسة وصورة العلامة المائية.</li>
                <li><strong>الخط والاتجاه:</strong>
                    <ul>
                        <li>اختر <em>"Arabic"</em> للخطوط العربية الجميلة.</li>
                        <li>اختر <em>"Right to Left (RTL)"</em> لاتجاه النص من اليمين لليسار.</li>
                    </ul>
                </li>
            </ul>
        </div>

<h2 class="ar-font">٢. هيكل الفصل (Class Structure)</h2>
        <div class="box ar-font">
            <h3>إنشاء الفصول والمواد</h3>
            <ol>
                <li><strong>إضافة فصل:</strong> أدخل الاسم، المجموع الكلي، ونسبة النجاح. انقر على <b>+ Add Class</b>.</li>
                <li><strong>وضع المجموع (Total Mode):</strong>
                    <ul>
                        <li><b>Auto Sum:</b> يحسب تلقائياً مجموع درجات المواد.</li>
                        <li><b>Manual:</b> تحدد أنت المجموع الكلي يدوياً.</li>
                    </ul>
                </li>
                <li><strong>إضافة مواد:</strong> اكتب اسم المادة، الدرجة الكلية، ودرجة النجاح، ثم انقر <b>Add Subject</b>.</li>
            </ol>
        </div>

<h2 class="ar-font">٣. إدخال بيانات الطالب (الميزة الذكية)</h2>
        <div class="box ar-font">
            <h3>النسخ واللصق من إكسل (Excel)</h3>
            <p>لا تحتاج إلى كتابة كل طالب يدوياً! اتبع الخطوات التالية:</p>
            <ol>
                <li>اختر الفصل من القائمة المنسدلة.</li>
                <li>افتح <strong>ملف Excel</strong> الذي يحتوي على: <em>رقم الجلوس، الاسم، اسم الأب، الدرجات</em>.</li>
                <li>انسخ البيانات من Excel (<span class="key-command">Ctrl + C</span>).</li>
                <li>في البرنامج، انقر فوق <strong>الخلية الأولى (Roll No)</strong> في الصف الأول.</li>
                <li>اضغط <span class="key-command">Ctrl + V</span> للصق.</li>
            </ol>
            <p>سيقوم البرنامج بإنشاء الصفوف تلقائياً وملء جميع البيانات.</p>
        </div>

<h2 class="ar-font">٤. حفظ البيانات</h2>
        <div class="box ar-font">
            <p>بمجرد الانتهاء، انقر فوق الزر الأخضر <strong>💾 Save JSON</strong>. سيتم تنزيل ملف على جهاز الكمبيوتر الخاص بك. احتفظ بهذا الملف! ستستخدمه لاحقاً لإنشاء البطاقات.</p>
        </div>
    </div>
</div>

const buttons = document.querySelectorAll('.guide-btn');
        buttons.forEach(btn => { btn.classList.remove('active-lang'); });

const targetSection = document.getElementById(langCode);
        if (targetSection) { targetSection.style.display = 'block'; targetSection.classList.add('active'); }

const targetBtn = document.getElementById('btn-' + langCode);
        if (targetBtn) { targetBtn.classList.add('active-lang'); }
    }
    
    document.addEventListener('DOMContentLoaded', function() { switchGuideLanguage('en'); });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Manual - Result Viewer</title>
    <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&family=Amiri:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap" rel="stylesheet">
    
    <style>
     /* Add this to the CSS inside code-tab1, code-tab2, etc. */
@media (max-width: 600px) {
    .container {
        padding: 15px; /* Reduce padding from 40px to 15px */
        width: auto; /* Ensure it fits the screen */
    }
    
    h1 {
        font-size: 22px; /* Smaller header text */
    }
    
    .box {
        padding: 10px; /* Smaller inner spacing */
    }
}
    .tab-btn[data-target="tab5"].active { border-bottom-color: #8e44ad; } /* Purple for Videos */
        :root { --primary: #8e44ad; --accent: #9b59b6; --bg: #f4f6f9; }
        body { font-family: 'Segoe UI', sans-serif; background-color: var(--bg); margin: 0; padding: 20px; color: #333; }
        .container { max-width: 900px; margin: 0 auto; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .lang-tabs { display: flex; gap: 10px; margin-bottom: 30px; justify-content: center; }
        .tab-btn { padding: 10px 25px; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; font-size: 14px; background: #e0e0e0; color: #555; transition: 0.3s; }
        .tab-btn.active { background: var(--primary); color: white; }
        .content-section { display: none; animation: fadeIn 0.5s; }
        .content-section.active { display: block; }
        h1 { color: var(--primary); text-align: center; border-bottom: 2px solid #eee; padding-bottom: 20px; }
        h2 { color: var(--accent); margin-top: 30px; border-left: 5px solid var(--primary); padding-left: 10px; }
        ul, ol { line-height: 1.8; color: #444; }
        li { margin-bottom: 8px; }
        .box { background: #fdfdfd; border: 1px solid #eee; padding: 15px; margin: 15px 0; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
        .highlight { color: #e74c3c; font-weight: bold; }
        .rtl { direction: rtl; text-align: right; }
        .rtl h2 { border-left: none; border-right: 5px solid var(--primary); padding-left: 0; padding-right: 10px; }
        .ur-font { font-family: 'Noto Nastaliq Urdu', serif; line-height: 2.4; }
        .ar-font { font-family: 'Amiri', serif; line-height: 2.2; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        /* --- MOBILE RESPONSIVE FIX --- */
@media (max-width: 600px) {
    body { padding: 5px !important; }
    
    .container { 
        padding: 15px !important; /* Reduces huge padding */
        width: 100% !important;   /* Ensures it fits screen */
        box-sizing: border-box;   /* Prevents overflow */
    }

/* Fix Font Sizes */
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    ul, ol { padding-left: 20px; }
}
    </style>
</head>
<body>

<div class="container">
    
    <div class="lang-tabs">
        <button class="tab-btn active" onclick="showLang('en')">English</button>
        <button class="tab-btn" onclick="showLang('ur')">اردو (Urdu)</button>
        <button class="tab-btn" onclick="showLang('ar')">العربية (Arabic)</button>
    </div>

<div id="en" class="content-section active">
        <h1>📊 Result Viewer & Gazette Guide</h1>
        <p>The <strong>Result Viewer</strong> allows you to visualize the entire class performance in a list format (Gazette). It also creates analytical graphs and statistics automatically based on the data you created in the Builder.</p>

<h2>1. Getting Started</h2>
        <div class="box">
            <ul>
                <li><strong>Load Data:</strong> Click <span class="highlight">📂 Load JSON</span> and select the file you saved from the <em>Structure Builder</em>.</li>
                <li><strong>Select Class:</strong> Choose the class from the dropdown menu to generate the gazette immediately.</li>
            </ul>
        </div>

<h2>2. Customizing the View</h2>
        <div class="box">
            <ul>
                <li><strong>Themes:</strong> Choose between <em>Simple</em> (Gray/Clean), <em>Pro</em> (Colored Headers), or <em>Elegant</em> (Classic Serif font).</li>
                <li><strong>Paper Size:</strong> Select A4, Legal, or Custom size. Use <em>Landscape</em> for wide tables with many subjects.</li>
                <li><strong>Content Toggles:</strong> You can hide/show Father Name, Student Photos, or the Summary Table using the checkboxes in Section 4.</li>
            </ul>
        </div>

<h2>3. Analytics & Graphs</h2>
        <div class="box">
            <p>The software automatically generates a summary at the end of the result:</p>
            <ul>
                <li><strong>Class Statistics:</strong> Total Students, Passed, Failed, and Success Rate %.</li>
                <li><strong>Subject Analysis:</strong> Shows how many students passed/failed in each specific subject.</li>
                <li><strong>Graphs:</strong> Select "Student Perf." to see bar charts of student marks, or "Subject Perf." to see pass percentages per subject.</li>
            </ul>
        </div>

<h2>4. Exporting (PDF / Print)</h2>
        <div class="box">
            <ul>
                <li><strong>Save PDF:</strong> Click <strong>🚀 Save PDF</strong>. The system generates a clean PDF document, handling page breaks automatically.</li>
                <li><strong>Print:</strong> Use the standard browser print dialog. Ensure "Background Graphics" is enabled in your browser settings for colors to appear.</li>
            </ul>
        </div>
    </div>

<div id="ur" class="content-section rtl">
        <h1 class="ur-font">📊 رزلٹ ویور (گزٹ میکر) - ہدایت نامہ</h1>
        <p class="ur-font"><strong>رزلٹ ویور</strong> آپ کو پوری کلاس کا نتیجہ ایک لسٹ (گزٹ) کی شکل میں دیکھنے کی سہولت دیتا ہے۔ یہ خودکار طریقے سے گراف اور شماریات (Statistics) بھی تیار کرتا ہے۔</p>

<h2 class="ur-font">۱۔ شروعات کریں</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>ڈیٹا لوڈ کریں:</strong> <span class="highlight">📂 Load JSON</span> پر کلک کریں اور وہ فائل منتخب کریں جو آپ نے <em>اسٹرکچر بلڈر</em> سے محفوظ کی تھی۔</li>
                <li><strong>کلاس منتخب کریں:</strong> ڈراپ ڈاؤن سے کلاس منتخب کریں، گزٹ فوراً ظاہر ہو جائے گا۔</li>
            </ul>
        </div>

<h2 class="ur-font">۲۔ ڈیزائن اور سیٹنگز</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>تھیمز (Themes):</strong> آپ <em>Simple</em> (سادہ)، <em>Pro</em> (رنگین)، یا <em>Elegant</em> (کلاسک) ڈیزائن منتخب کر سکتے ہیں۔</li>
                <li><strong>پیپر سائز:</strong> A4 یا Legal پیج منتخب کریں۔ اگر مضامین زیادہ ہیں تو <em>Landscape</em> (افقی) موڈ استعمال کریں۔</li>
                <li><strong>مواد چھپائیں/دکھائیں:</strong> آپ ولدیت، تصاویر، یا خلاصہ (Summary) کو چیک باکس کے ذریعے آن یا آف کر سکتے ہیں۔</li>
            </ul>
        </div>

<h2 class="ur-font">۳۔ گراف اور تجزیہ</h2>
        <div class="box ur-font">
            <p class="ur-font">سافٹ ویئر خودکار طریقے سے نتیجے کے آخر میں خلاصہ تیار کرتا ہے:</p>
            <ul>
                <li><strong>کلاس کے اعدادوشمار:</strong> کل طلباء، پاس، فیل، اور کامیابی کا تناسب۔</li>
                <li><strong>مضامین کا تجزیہ:</strong> ہر مضمون میں کتنے بچے پاس اور فیل ہوئے۔</li>
                <li><strong>گراف:</strong> طلباء کے نمبروں کا گراف یا مضامین کی کارکردگی کا گراف منتخب کریں۔</li>
            </ul>
        </div>

<h2 class="ur-font">۴۔ پرنٹ اور پی ڈی ایف</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>Save PDF:</strong> بٹن پر کلک کریں۔ سسٹم خودکار طریقے سے بہترین PDF فائل بنا دے گا۔</li>
                <li><strong>Print:</strong> براؤزر پرنٹ استعمال کریں۔ یاد رکھیں کہ پرنٹ سیٹنگ میں "Background Graphics" آن ہونا چاہیے۔</li>
            </ul>
        </div>
    </div>

<div id="ar" class="content-section rtl">
        <h1 class="ar-font">📊 دليل عارض النتائج (صانع الجريدة)</h1>
        <p class="ar-font">تتيح لك أداة <strong>Result Viewer</strong> عرض أداء الفصل بأكمله في تنسيق قائمة (جريدة رسمية). كما تقوم بإنشاء رسوم بيانية وإحصاءات تحليلية تلقائياً.</p>

<h2 class="ar-font">١. البداية</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>تحميل البيانات:</strong> انقر على <span class="highlight">📂 Load JSON</span> وحدد الملف الذي حفظته من <em>منشئ الهيكل</em>.</li>
                <li><strong>اختر الفصل:</strong> حدد الفصل من القائمة لإنشاء الجريدة فوراً.</li>
            </ul>
        </div>

<h2 class="ar-font">٢. تخصيص العرض</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>السمات (Themes):</strong> اختر بين <em>Simple</em> (بسيط)، <em>Pro</em> (ملون)، أو <em>Elegant</em> (أنيق).</li>
                <li><strong>حجم الورق:</strong> حدد A4 أو Legal. استخدم الوضع <em>Landscape</em> (أفقي) للجداول العريضة.</li>
                <li><strong>خيارات المحتوى:</strong> يمكنك إخفاء/إظهار اسم الأب، وصور الطلاب، أو جدول الملخص باستخدام مربعات الاختيار.</li>
            </ul>
        </div>

<h2 class="ar-font">٣. التحليلات والرسوم البيانية</h2>
        <div class="box ar-font">
            <p class="ar-font">يقوم البرنامج تلقائياً بإنشاء ملخص في نهاية النتيجة:</p>
            <ul>
                <li><strong>إحصائيات الفصل:</strong> إجمالي الطلاب، الناجحين، الراسبين، ونسبة النجاح.</li>
                <li><strong>تحليل المواد:</strong> يوضح عدد الطلاب الناجحين/الراسبين في كل مادة.</li>
                <li><strong>الرسوم البيانية:</strong> اعرض الرسوم البيانية لأداء الطلاب أو نسب النجاح للمواد.</li>
            </ul>
        </div>

<h2 class="ar-font">٤. التصدير (PDF / طباعة)</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>حفظ PDF:</strong> انقر على <strong>🚀 Save PDF</strong>. سيقوم النظام بإنشاء ملف PDF منظم.</li>
                <li><strong>طباعة:</strong> استخدم طباعة المتصفح. تأكد من تفعيل "Background Graphics" في إعدادات الطباعة لظهور الألوان.</li>
            </ul>
        </div>
    </div>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Manual - Card Generator</title>
    <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&family=Amiri:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap" rel="stylesheet">
    
    <style>
     /* Add this to the CSS inside code-tab1, code-tab2, etc. */
@media (max-width: 600px) {
    .container {
        padding: 15px; /* Reduce padding from 40px to 15px */
        width: auto; /* Ensure it fits the screen */
    }
    
    h1 {
        font-size: 22px; /* Smaller header text */
    }
    
    .box {
        padding: 10px; /* Smaller inner spacing */
    }
}
        :root { --primary: #c0392b; --accent: #e74c3c; --bg: #f4f6f9; }
        body { font-family: 'Segoe UI', sans-serif; background-color: var(--bg); margin: 0; padding: 20px; color: #333; }
        .container { max-width: 900px; margin: 0 auto; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .lang-tabs { display: flex; gap: 10px; margin-bottom: 30px; justify-content: center; }
        .tab-btn { padding: 10px 25px; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; font-size: 14px; background: #e0e0e0; color: #555; transition: 0.3s; }
        .tab-btn.active { background: var(--primary); color: white; }
        .content-section { display: none; animation: fadeIn 0.5s; }
        .content-section.active { display: block; }
        h1 { color: var(--primary); text-align: center; border-bottom: 2px solid #eee; padding-bottom: 20px; }
        h2 { color: var(--accent); margin-top: 30px; border-left: 5px solid var(--primary); padding-left: 10px; }
        ul, ol { line-height: 1.8; color: #444; }
        li { margin-bottom: 8px; }
        .box { background: #fffdfd; border: 1px solid #eee; padding: 15px; margin: 15px 0; border-radius: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.03); }
        .highlight { color: #2980b9; font-weight: bold; }
        .rtl { direction: rtl; text-align: right; }
        .rtl h2 { border-left: none; border-right: 5px solid var(--primary); padding-left: 0; padding-right: 10px; }
        .ur-font { font-family: 'Noto Nastaliq Urdu', serif; line-height: 2.4; }
        .ar-font { font-family: 'Amiri', serif; line-height: 2.2; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        /* --- MOBILE RESPONSIVE FIX --- */
@media (max-width: 600px) {
    body { padding: 5px !important; }
    
    .container { 
        padding: 15px !important; /* Reduces huge padding */
        width: 100% !important;   /* Ensures it fits screen */
        box-sizing: border-box;   /* Prevents overflow */
    }

/* Fix Font Sizes */
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    ul, ol { padding-left: 20px; }
}
    </style>
</head>
<body>

<div id="en" class="content-section active">
        <h1>🖨️ Professional Card Generator Guide</h1>
        <p>The <strong>Card Generator</strong> is designed to create beautiful, printable result cards. It supports custom fonts (like Jameel Noori Nastaleeq), watermarks, and bulk printing.</p>

<h2>1. Loading Data</h2>
        <div class="box">
            <ul>
                <li><strong>Source:</strong> Click <span class="highlight">Load Student JSON</span> and select the file saved from the Builder.</li>
                <li><strong>Select Class:</strong> Use the dropdown to choose which class to print. The cards will appear instantly.</li>
            </ul>
        </div>

<h2>2. Customizing Design</h2>
        <div class="box">
            <ul>
                <li><strong>Fonts:</strong> In the "Typography" section, you can set fonts for Headers and Body text separately. Select <em>"Urdu (Noori)"</em> for the best Urdu look.</li>
                <li><strong>Colors:</strong> Change the <em>Primary</em> (Header/Footer) and <em>Accent</em> (Badges) colors to match your school brand.</li>
                <li><strong>Watermark:</strong> Upload a PNG image to appear behind the result card. Use the "Opacity" slider to make it faint or strong.</li>
                <li><strong>Signatures:</strong> Upload a signature image for the Principal, or type a name directly.</li>
            </ul>
        </div>

<h2>3. Page Layout & Scaling</h2>
        <div class="box">
            <ul>
                <li><strong>Paper Size:</strong> Choose A4, A5, or Legal. Use A5 if you want to print two cards on one A4 page (requires printer setting).</li>
                <li><strong>Card Scale:</strong> Use the slider to shrink or enlarge the card content to fit perfectly on your paper.</li>
                <li><strong>Margins:</strong> Adjust Top, Bottom, Left, and Right margins in millimeters.</li>
            </ul>
        </div>

<h2>4. Exporting</h2>
        <div class="box">
            <ul>
                <li><strong>💾 Save PDF:</strong> Generates a single PDF file containing all student cards. This is best for sharing or printing later.</li>
                <li><strong>🖨️ Print (Browser):</strong> Sends the cards directly to your printer. Ensure "Background Graphics" is enabled.</li>
            </ul>
        </div>
    </div>

<div id="ur" class="content-section rtl">
        <h1 class="ur-font">🖨️ پروفیشنل کارڈ جنریٹر - ہدایت نامہ</h1>
        <p class="ur-font"><strong>کارڈ جنریٹر</strong> خوبصورت اور پرنٹ کے قابل رزلٹ کارڈ بنانے کے لیے ڈیزائن کیا گیا ہے۔ یہ اردو (جمیل نوری نستعلیق)، واٹر مارک اور بلک پرنٹنگ کو سپورٹ کرتا ہے۔</p>

<h2 class="ur-font">۱۔ ڈیٹا لوڈ کرنا</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>سورس:</strong> <span class="highlight">Load Student JSON</span> پر کلک کریں اور بلڈر والی فائل منتخب کریں۔</li>
                <li><strong>کلاس کا انتخاب:</strong> ڈراپ ڈاؤن سے کلاس منتخب کریں۔ تمام کارڈز فوراً ظاہر ہو جائیں گے۔</li>
            </ul>
        </div>

<h2 class="ur-font">۲۔ ڈیزائن کی سیٹنگ</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>فونٹ:</strong> "Typography" سیکشن میں ہیڈر اور باڈی کے لیے الگ الگ فونٹ منتخب کریں۔ بہترین اردو کے لیے <em>"Urdu (Noori)"</em> منتخب کریں۔</li>
                <li><strong>رنگ:</strong> اپنے اسکول کے برانڈ کے مطابق <em>Primary</em> اور <em>Accent</em> رنگ تبدیل کریں۔</li>
                <li><strong>واٹر مارک:</strong> کارڈ کے پیچھے مدھم لوگو لگانے کے لیے تصویر اپ لوڈ کریں۔ "Opacity" سلائیڈر سے اسے ہلکا یا گہرا کریں۔</li>
                <li><strong>دستخط:</strong> پرنسپل کے دستخط کی تصویر اپ لوڈ کریں یا نام ٹائپ کریں۔</li>
            </ul>
        </div>

<h2 class="ur-font">۳۔ پیج لے آؤٹ اور اسکیل</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>پیپر سائز:</strong> A4، A5 یا لیگل منتخب کریں۔ A5 تب استعمال کریں جب ایک صفحے پر دو کارڈ پرنٹ کرنے ہوں۔</li>
                <li><strong>کارڈ اسکیل:</strong> اگر کارڈ کٹ رہا ہو تو "Card Scale" سلائیڈر کا استعمال کرکے اسے چھوٹا یا بڑا کریں۔</li>
                <li><strong>مارجن:</strong> اوپر، نیچے، دائیں اور بائیں حاشیے (Margins) ملی میٹر میں سیٹ کریں۔</li>
            </ul>
        </div>

<h2 class="ur-font">۴۔ پرنٹ اور پی ڈی ایف</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>💾 Save PDF:</strong> تمام طلباء کے کارڈز پر مشتمل ایک پی ڈی ایف فائل بنائیں۔ یہ محفوظ کرنے کے لیے بہترین ہے۔</li>
                <li><strong>🖨️ Print:</strong> براؤزر کے ذریعے براہ راست پرنٹ کریں۔ پرنٹ سیٹنگ میں "Background Graphics" آن رکھیں۔</li>
            </ul>
        </div>
    </div>

<div id="ar" class="content-section rtl">
        <h1 class="ar-font">🖨️ دليل مولد البطاقات الاحترافي</h1>
        <p class="ar-font">تم تصميم <strong>Card Generator</strong> لإنشاء بطاقات نتائج جميلة وقابلة للطباعة. يدعم الخطوط العربية المخصصة (مثل الأميري)، والعلامات المائية، والطباعة المجمعة.</p>

<h2 class="ar-font">١. تحميل البيانات</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>المصدر:</strong> انقر على <span class="highlight">Load Student JSON</span> وحدد الملف المحفوظ من المنشئ.</li>
                <li><strong>تحديد الفصل:</strong> استخدم القائمة المنسدلة لاختيار الفصل. ستظهر البطاقات فوراً.</li>
            </ul>
        </div>

<h2 class="ar-font">٢. تصميم البطاقة</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>الخطوط:</strong> في قسم "Typography"، حدد <em>"Arabic (Amiri)"</em> للحصول على أفضل مظهر للنصوص العربية.</li>
                <li><strong>الألوان:</strong> قم بتغيير الألوان الأساسية والفرعية لتتناسب مع هوية مدرستك.</li>
                <li><strong>العلامة المائية:</strong> قم بتحميل صورة لتظهر خلف النص. استخدم شريط التمرير "Opacity" للتحكم في الشفافية.</li>
                <li><strong>التوقيعات:</strong> قم بتحميل صورة توقيع المدير أو اكتب الاسم مباشرة.</li>
            </ul>
        </div>

<h2 class="ar-font">٣. تخطيط الصفحة والمقياس</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>حجم الورق:</strong> اختر A4 أو A5 أو Legal. استخدم A5 إذا كنت تريد طباعة بطاقتين على صفحة A4 واحدة.</li>
                <li><strong>المقياس (Scale):</strong> استخدم شريط التمرير لتكبير أو تصغير محتوى البطاقة ليتناسب تماماً مع الورق.</li>
                <li><strong>الهوامش:</strong> ضبط الهوامش العلوية والسفلية واليمنى واليسرى بالملليمتر.</li>
            </ul>
        </div>

<h2 class="ar-font">٤. التصدير</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>💾 Save PDF:</strong> ينشئ ملف PDF واحد يحتوي على جميع بطاقات الطلاب.</li>
                <li><strong>🖨️ Print:</strong> يرسل البطاقات مباشرة إلى الطابعة. تأكد من تفعيل "Background Graphics".</li>
            </ul>
        </div>
    </div>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Manual - WhatsApp Dispatcher</title>
    <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&family=Amiri:wght@400;700&family=Noto+Nastaliq+Urdu:wght@400;700&display=swap" rel="stylesheet">
    
    <style>
     /* Add this to the CSS inside code-tab1, code-tab2, etc. */
@media (max-width: 600px) {
    .container {
        padding: 15px; /* Reduce padding from 40px to 15px */
        width: auto; /* Ensure it fits the screen */
    }
    
    h1 {
        font-size: 22px; /* Smaller header text */
    }
    
    .box {
        padding: 10px; /* Smaller inner spacing */
    }
}
        :root { --primary: #27ae60; --accent: #2ecc71; --bg: #f4f6f9; }
        body { font-family: 'Segoe UI', sans-serif; background-color: var(--bg); margin: 0; padding: 20px; color: #333; }
        .container { max-width: 900px; margin: 0 auto; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .lang-tabs { display: flex; gap: 10px; margin-bottom: 30px; justify-content: center; }
        .tab-btn { padding: 10px 25px; border: none; border-radius: 25px; cursor: pointer; font-weight: bold; font-size: 14px; background: #e0e0e0; color: #555; transition: 0.3s; }
        .tab-btn.active { background: var(--primary); color: white; }
        .content-section { display: none; animation: fadeIn 0.5s; }
        .content-section.active { display: block; }
        h1 { color: var(--primary); text-align: center; border-bottom: 2px solid #eee; padding-bottom: 20px; }
        h2 { color: var(--primary); margin-top: 30px; border-left: 5px solid var(--accent); padding-left: 10px; }
        ul, ol { line-height: 1.8; color: #444; }
        li { margin-bottom: 8px; }
        .box { background: #f0fdf4; border: 1px solid #d1e7dd; padding: 15px; margin: 15px 0; border-radius: 6px; }
        .highlight { color: #198754; font-weight: bold; background: #e8f5e9; padding: 2px 6px; border-radius: 4px; }
        .key-cmd { background: #333; color: white; padding: 2px 6px; border-radius: 4px; font-family: monospace; }
        .rtl { direction: rtl; text-align: right; }
        .rtl h2 { border-left: none; border-right: 5px solid var(--accent); padding-left: 0; padding-right: 10px; }
        .ur-font { font-family: 'Noto Nastaliq Urdu', serif; line-height: 2.4; }
        .ar-font { font-family: 'Amiri', serif; line-height: 2.2; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        /* --- MOBILE RESPONSIVE FIX --- */
@media (max-width: 600px) {
    body { padding: 5px !important; }
    
    .container { 
        padding: 15px !important; /* Reduces huge padding */
        width: 100% !important;   /* Ensures it fits screen */
        box-sizing: border-box;   /* Prevents overflow */
    }

/* Fix Font Sizes */
    h1 { font-size: 22px; }
    h2 { font-size: 18px; }
    ul, ol { padding-left: 20px; }
}
    </style>
</head>
<body>

<div id="en" class="content-section active">
        <h1>🚀 WhatsApp Dispatcher Guide</h1>
        <p>The <strong>Rapid Dispatcher</strong> is a semi-automated tool that helps you send result cards to hundreds of parents quickly. It converts the PDF page into an image, copies it to your clipboard, and opens the student's WhatsApp chat automatically.</p>

<h2>1. Selecting the Mode</h2>
        <div class="box">
            <ul>
                <li><strong>🖥️ Desktop App:</strong> Best for speed. Select this if you have the WhatsApp Desktop application installed on your PC.</li>
                <li><strong>🌐 Web Browser:</strong> Select this if you use WhatsApp Web (web.whatsapp.com) in Chrome or Edge.</li>
            </ul>
        </div>

<h2>2. Preparing Files</h2>
        <div class="box">
            <ol>
                <li><strong>Upload PDF:</strong> Click "Upload PDF" and select the result card PDF generated by the <em>Card Generator</em>.</li>
                <li><strong>Upload JSON:</strong> Load the student data file. The system will match student names with the PDF pages.</li>
                <li><strong>Check Status:</strong> Ensure the "Status" bar shows a green checkmark ✅ (Student Count matches PDF Pages).</li>
            </ol>
        </div>

<h2>3. Entering Phone Numbers</h2>
        <div class="box">
            <p>You can type numbers manually or use the <strong>Bulk Paste</strong> feature:</p>
            <ul>
                <li><strong>Copy Column:</strong> Copy a list of phone numbers from Excel.</li>
                <li><strong>Smart Paste:</strong> Click on the first student's phone input box and press <span class="key-cmd">Ctrl + V</span>. The system will automatically fill the numbers for all students downwards.</li>
                <li><strong>Format:</strong> Use international format without '+' (e.g., <em>923001234567</em> for Pakistan).</li>
            </ul>
        </div>

<h2>4. Sending Process (The Loop)</h2>
        <div class="box">
            <p>Once setup is complete, repeat this process for each student:</p>
            <ol>
                <li>Click the <strong>🚀 Send</strong> button next to a student name.</li>
                <li>The system will <strong>Copy the Result Image</strong> and open WhatsApp.</li>
                <li>In WhatsApp, press <span class="key-cmd">Ctrl + V</span> to paste the image.</li>
                <li>Press <span class="key-cmd">Enter</span> to send.</li>
                <li>Close the WhatsApp tab/window and return to the software for the next student.</li>
            </ol>
        </div>
    </div>

<div id="ur" class="content-section rtl">
        <h1 class="ur-font">🚀 واٹس ایپ ڈسپیچر - ہدایت نامہ</h1>
        <p class="ur-font"><strong>ریپڈ ڈسپیچر</strong> ایک نیم خودکار ٹول ہے جو آپ کو سینکڑوں والدین کو رزلٹ کارڈ بھیجنے میں مدد کرتا ہے۔ یہ پی ڈی ایف کے صفحے کو تصویر میں تبدیل کرتا ہے، اسے کلپ بورڈ پر کاپی کرتا ہے، اور خودکار طور پر واٹس ایپ چیٹ کھول دیتا ہے۔</p>

<h2 class="ur-font">۱۔ موڈ کا انتخاب (Mode Selection)</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>🖥️ ڈیسک ٹاپ ایپ:</strong> تیز ترین رفتار کے لیے۔ اسے منتخب کریں اگر آپ کے کمپیوٹر میں WhatsApp Desktop ایپ انسٹال ہے۔</li>
                <li><strong>🌐 ویب براؤزر:</strong> اسے منتخب کریں اگر آپ Chrome یا Edge میں WhatsApp Web استعمال کرتے ہیں۔</li>
            </ul>
        </div>

<h2 class="ur-font">۲۔ فائلز کی تیاری</h2>
        <div class="box ur-font">
            <ol>
                <li><strong>PDF اپ لوڈ کریں:</strong> "Card Generator" سے بنائی گئی رزلٹ کارڈ کی PDF فائل اپ لوڈ کریں۔</li>
                <li><strong>JSON اپ لوڈ کریں:</strong> اسٹوڈنٹ ڈیٹا فائل لوڈ کریں۔ سسٹم طلباء کے ناموں کو پی ڈی ایف کے صفحات کے ساتھ میچ کرے گا۔</li>
                <li><strong>اسٹیٹس چیک کریں:</strong> یقینی بنائیں کہ اسٹیٹس بار میں سبز نشان ✅ نظر آئے (یعنی طلباء کی تعداد اور پی ڈی ایف کے صفحات برابر ہوں)۔</li>
            </ol>
        </div>

<h2 class="ur-font">۳۔ فون نمبرز درج کرنا</h2>
        <div class="box ur-font">
            <p class="ur-font">آپ نمبر ہاتھ سے لکھ سکتے ہیں یا <strong>Bulk Paste</strong> فیچر استعمال کریں:</p>
            <ul>
                <li><strong>کاپی کریں:</strong> ایکسل سے فون نمبرز کی لسٹ کاپی کریں۔</li>
                <li><strong>پیسٹ کریں:</strong> پہلے طالب علم کے فون باکس پر کلک کریں اور <span class="key-cmd">Ctrl + V</span> دبائیں۔ سسٹم خودکار طور پر نیچے والے تمام خانوں میں نمبر بھر دے گا۔</li>
                <li><strong>فارمیٹ:</strong> نمبر بین الاقوامی فارمیٹ میں لکھیں (مثلاً: <em>923001234567</em>)۔</li>
            </ul>
        </div>

<h2 class="ur-font">۴۔ بھیجنے کا طریقہ (Process)</h2>
        <div class="box ur-font">
            <p class="ur-font">سیٹ اپ مکمل ہونے کے بعد، ہر طالب علم کے لیے یہ عمل دہرائیں:</p>
            <ol>
                <li>طالب علم کے نام کے آگے <strong>🚀 Send</strong> بٹن پر کلک کریں۔</li>
                <li>سسٹم <strong>رزلٹ کی تصویر کاپی</strong> کرے گا اور واٹس ایپ کھول دے گا۔</li>
                <li>واٹس ایپ میں، تصویر پیسٹ کرنے کے لیے <span class="key-cmd">Ctrl + V</span> دبائیں۔</li>
                <li>بھیجنے کے لیے <span class="key-cmd">Enter</span> دبائیں۔</li>
                <li>واٹس ایپ ٹیب بند کریں اور اگلے طالب علم کے لیے سافٹ ویئر پر واپس آئیں۔</li>
            </ol>
        </div>
    </div>

<div id="ar" class="content-section rtl">
        <h1 class="ar-font">🚀 دليل المرسل عبر واتساب</h1>
        <p class="ar-font">أداة <strong>Rapid Dispatcher</strong> هي أداة شبه آلية تساعدك على إرسال بطاقات نتائج لمئات أولياء الأمور بسرعة. تقوم بتحويل صفحة PDF إلى صورة، ونسخها إلى الحافظة، وفتح دردشة واتساب للطالب تلقائياً.</p>

<h2 class="ar-font">١. اختيار الوضع (Mode)</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>🖥️ تطبيق سطح المكتب:</strong> الأفضل للسرعة. اختر هذا إذا كان لديك تطبيق WhatsApp Desktop مثبتاً على جهاز الكمبيوتر.</li>
                <li><strong>🌐 متصفح الويب:</strong> اختر هذا إذا كنت تستخدم WhatsApp Web في Chrome أو Edge.</li>
            </ul>
        </div>

<h2 class="ar-font">٢. إعداد الملفات</h2>
        <div class="box ar-font">
            <ol>
                <li><strong>تحميل PDF:</strong> قم بتحميل ملف PDF الخاص ببطاقة النتيجة الذي تم إنشاؤه بواسطة <em>مولد البطاقات</em>.</li>
                <li><strong>تحميل JSON:</strong> قم بتحميل ملف بيانات الطالب. سيقوم النظام بمطابقة أسماء الطلاب مع صفحات PDF.</li>
                <li><strong>التحقق من الحالة:</strong> تأكد من ظهور علامة اختيار خضراء ✅ في شريط الحالة (تطابق عدد الطلاب مع صفحات PDF).</li>
            </ol>
        </div>

<h2 class="ar-font">٣. إدخال أرقام الهواتف</h2>
        <div class="box ar-font">
            <p class="ar-font">يمكنك كتابة الأرقام يدوياً أو استخدام ميزة <strong>النسخ المجمع (Bulk Paste)</strong>:</p>
            <ul>
                <li><strong>نسخ القائمة:</strong> انسخ قائمة أرقام الهواتف من Excel.</li>
                <li><strong>اللصق الذكي:</strong> انقر فوق مربع إدخال الهاتف للطالب الأول واضغط على <span class="key-cmd">Ctrl + V</span>. سيقوم النظام تلقائياً بملء الأرقام لجميع الطلاب.</li>
            </ul>
        </div>

<h2 class="ar-font">٤. عملية الإرسال</h2>
        <div class="box ar-font">
            <p class="ar-font">بمجرد اكتمال الإعداد، كرر هذه العملية لكل طالب:</p>
            <ol>
                <li>انقر فوق الزر <strong>🚀 Send</strong> بجوار اسم الطالب.</li>
                <li>سيقوم النظام <strong>بنسخ صورة النتيجة</strong> وفتح تطبيق واتساب.</li>
                <li>في واتساب، اضغط على <span class="key-cmd">Ctrl + V</span> للصق الصورة.</li>
                <li>اضغط على <span class="key-cmd">Enter</span> للإرسال.</li>
                <li>أغلق علامة تبويب واتساب وعد إلى البرنامج للطالب التالي.</li>
            </ol>
        </div>
    </div>

</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Video Tutorials</title>
    <link href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
     /* Add this to the CSS inside code-tab1, code-tab2, etc. */
@media (max-width: 600px) {
    .container {
        padding: 15px; /* Reduce padding from 40px to 15px */
        width: auto; /* Ensure it fits the screen */
    }
    
    h1 {
        font-size: 22px; /* Smaller header text */
    }
    
    .box {
        padding: 10px; /* Smaller inner spacing */
    }
}
        body { font-family: 'Segoe UI', sans-serif; background: #f4f6f9; padding: 30px; margin: 0; }
        .container { max-width: 1000px; margin: 0 auto; }
        h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; border-bottom: 2px solid #ddd; padding-bottom: 15px; }
        .video-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Reduced from 300px */
    gap: 20px; 
}

/* Add this media query for Tab 5 */
@media (max-width: 600px) {
    body { padding: 15px; } /* Reduce body padding */
    .video-grid { grid-template-columns: 1fr; } /* Force single column on mobile */
}
        .video-card { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        
        /* Updated Video Wrapper CSS to handle standard video tags perfectly */
        .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; background: #000; }
        .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
        
        h3 { margin: 15px 0 5px; color: #34495e; font-size: 16px; }
        p { color: #7f8c8d; font-size: 13px; margin: 0; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎥 Video Tutorials</h1>
        <div class="video-grid">
            
            <div class="video-card">
                <div class="video-wrapper">
                    <video controls preload="metadata">
                        <source src="http://smartedusystem.online/wp-content/uploads/2026/02/Part1.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <h3>1. How to use Data Builder</h3>
                <p>Learn how to create classes and subjects.</p>
            </div>

<div class="video-card">
                <div class="video-wrapper">
                    <video controls preload="metadata">
                        <source src="http://smartedusystem.online/wp-content/uploads/2026/02/Part2.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <h3>2. Class Result</h3>
                <p>A quick guide to generate class result report.</p>
            </div>

<div class="video-card">
                <div class="video-wrapper">
                    <video controls preload="metadata">
                        <source src="http://smartedusystem.online/wp-content/uploads/2026/02/Part3.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <h3>3. Generating Result Cards</h3>
                <p>Customizing fonts and printing cards.</p>
            </div>

<div class="video-card">
                <div class="video-wrapper">
                    <video controls preload="metadata">
                        <source src="http://smartedusystem.online/wp-content/uploads/2026/02/Part4.mp4" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <h3>4. Sending via WhatsApp</h3>
                <p>How to use the semi-auto dispatcher.</p>
            </div>

</div>
    </div>
</body>
</html>