Smart Admission System - 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 Setup</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>
        @media (max-width: 600px) { .container { padding: 15px; width: auto; } h1 { font-size: 22px; } .box { padding: 10px; } }
        :root { --primary: #f39c12; --accent: #d68910; --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: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
        .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; }
        p, li { line-height: 1.8; color: #444; }
        .box { background: #fdfbf7; border-left: 4px solid var(--accent); padding: 15px; margin: 15px 0; border-radius: 4px; }
        .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); } }
        @media (max-width: 600px) { body { padding: 5px !important; } .container { padding: 15px !important; width: 100% !important; box-sizing: border-box; } .lang-switcher { flex-wrap: wrap; gap: 5px; } .guide-btn { flex: 1 1 100%; text-align: center; margin-bottom: 5px; } 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 Setup Manual</h1>
        <p>The <strong>Structure Setup</strong> tool configures the global settings for your admission forms. You only need to do this once.</p>

<h2>1. General Settings</h2>
        <div class="box">
            <ul>
                <li><strong>Language:</strong> Choose English, Urdu, or Arabic. This automatically translates all form labels.</li>
                <li><strong>Text Direction:</strong> Automatically switches between Left-to-Right (LTR) and Right-to-Left (RTL).</li>
                <li><strong>Font:</strong> Automatically selects appropriate fonts (e.g., Jameel Noori Nastaleeq for Urdu).</li>
            </ul>
        </div>

<h2>2. Institute Details</h2>
        <div class="box">
            <ul>
                <li>Enter your Institute Name, Address, Phone, and Email.</li>
                <li><strong>Logo:</strong> Upload your school's logo image to display on the form header.</li>
                <li>Watch the <strong>Live Preview</strong> on the right side to see exactly how your form header will look.</li>
            </ul>
        </div>

<h2>3. Save Configuration</h2>
        <div class="box">
            <p>Once you are happy with the preview, click <strong>Save Structure (JSON)</strong>. A file named <code>header_structure.json</code> will download. Keep this file safe to load into the Admission Entry tool.</p>
        </div>
    </div>

<div id="ur" class="content-section rtl">
        <h1 class="ur-font">🏗️ اسٹرکچر سیٹ اپ - ہدایت نامہ</h1>
        <p class="ur-font">یہ ٹول آپ کے داخلہ فارم کی بنیادی سیٹنگز محفوظ کرتا ہے۔ آپ کو یہ عمل صرف ایک بار کرنا ہے۔</p>
        <h2 class="ur-font">۱۔ عمومی سیٹنگز</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>زبان:</strong> انگریزی، اردو، یا عربی منتخب کریں۔ لیبلز خودکار تبدیل ہو جائیں گے۔</li>
                <li><strong>فونٹ:</strong> اردو کے لیے جمیل نوری نستعلیق خود بخود سیٹ ہو جائے گا۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۲۔ ادارے کی تفصیلات</h2>
        <div class="box ur-font">
            <ul>
                <li>ادارے کا نام، پتہ، فون نمبر اور ای میل درج کریں۔</li>
                <li><strong>لوگو:</strong> فارم کے ہیڈر کے لیے مونوگرام اپ لوڈ کریں۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۳۔ محفوظ کریں</h2>
        <div class="box ur-font">
            <p>گرین بٹن پر کلک کر کے <code>header_structure.json</code> فائل ڈاؤن لوڈ کر لیں۔</p>
        </div>
    </div>

<div id="ar" class="content-section rtl">
        <h1 class="ar-font">🏗️ إعداد الهيكل - دليل المستخدم</h1>
        <p class="ar-font">تقوم هذه الأداة بتكوين الإعدادات الأساسية لاستمارات القبول الخاصة بك. تحتاج إلى القيام بذلك مرة واحدة فقط.</p>
        <h2 class="ar-font">١. الإعدادات العامة</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>اللغة:</strong> اختر الإنجليزية أو الأردية أو العربية.</li>
                <li><strong>اتجاه النص والخط:</strong> يتم ضبطهما تلقائيًا بناءً على اللغة.</li>
            </ul>
        </div>
        <h2 class="ar-font">٢. تفاصيل المعهد</h2>
        <div class="box ar-font">
            <ul>
                <li>أدخل اسم المعهد والعنوان والهاتف والبريد الإلكتروني.</li>
                <li>قم بتحميل شعار المدرسة لمشاهدة المعاينة المباشرة.</li>
            </ul>
        </div>
        <h2 class="ar-font">٣. الحفظ</h2>
        <div class="box ar-font">
            <p>انقر فوق "Save Structure" لتنزيل ملف <code>header_structure.json</code> الخاص بك.</p>
        </div>
    </div>
</div>
<script>
    function switchGuideLanguage(langCode) {
        document.querySelectorAll('.content-section').forEach(sec => { sec.style.display = 'none'; sec.classList.remove('active'); });
        document.querySelectorAll('.guide-btn').forEach(btn => { btn.classList.remove('active-lang'); });
        document.getElementById(langCode).style.display = 'block';
        document.getElementById(langCode).classList.add('active');
        document.getElementById('btn-' + langCode).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 - Admission Entry</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>
        @media (max-width: 600px) { .container { padding: 15px; width: auto; } h1 { font-size: 22px; } .box { padding: 10px; } }
        :root { --primary: #3498db; --accent: #2980b9; --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: #f4f9fd; border: 1px solid #eee; padding: 15px; margin: 15px 0; border-radius: 6px; }
        .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); } }
        @media (max-width: 600px) { body { padding: 5px !important; } .container { padding: 15px !important; width: 100% !important; box-sizing: border-box; } .lang-tabs { flex-wrap: wrap; gap: 5px; } .tab-btn { flex: 1 1 100%; text-align: center; margin-bottom: 5px; } 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>📝 Admission Form Entry Guide</h1>
        <p>This tool is used to enter individual student data, apply your institute's structure, and export records.</p>

<h2>1. Apply Structure</h2>
        <div class="box">
            <ul>
                <li>In the top control panel under <strong>1. Structure</strong>, upload the <code>header_structure.json</code> file you created in the previous step.</li>
                <li>Click <strong>Load Settings</strong>. The form will instantly adapt to your school's branding and chosen language.</li>
            </ul>
        </div>

<h2>2. Data Entry</h2>
        <div class="box">
            <ul>
                <li>Fill out all fields including Personal Info, Guardian Info, Qualifications, and Admission Details.</li>
                <li><strong>Photo Upload:</strong> Click the dashed "Passport Image" box to upload a student picture. It gets converted to Base64 and saved directly inside the JSON record.</li>
                <li>Click <strong>+ Add Row</strong> to add more previous qualifications.</li>
            </ul>
        </div>

<h2>3. Saving & Exporting</h2>
        <div class="box">
            <ul>
                <li><strong>Save JSON:</strong> Click this to download the student's complete profile as <code>Admission_Record_[RegNo].json</code>. You must provide a Registration Number to save.</li>
                <li><strong>Download PDF:</strong> Generates a clean, print-ready A4 PDF form instantly using HTML2PDF.</li>
                <li><strong>Clear:</strong> Empties the form to prepare for the next student.</li>
            </ul>
        </div>
    </div>

<div id="ur" class="content-section rtl">
        <h1 class="ur-font">📝 داخلہ فارم انٹری - ہدایت نامہ</h1>
        <p class="ur-font">یہ ٹول انفرادی طلباء کا ڈیٹا درج کرنے اور پی ڈی ایف بنانے کے لیے استعمال ہوتا ہے۔</p>
        <h2 class="ur-font">۱۔ اسٹرکچر لاگو کریں</h2>
        <div class="box ur-font">
            <ul>
                <li>سب سے پہلے <code>header_structure.json</code> فائل لوڈ کریں تاکہ اسکول کا نام اور لوگو ظاہر ہو۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۲۔ ڈیٹا انٹری</h2>
        <div class="box ur-font">
            <ul>
                <li>طالب علم کی معلومات، سرپرست کی تفصیلات اور تعلیمی قابلیت درج کریں۔</li>
                <li><strong>تصویر اپ لوڈ:</strong> تصویر والے خانے پر کلک کر کے طالب علم کی تصویر لگائیں۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۳۔ پرنٹ اور محفوظ کریں</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>Save JSON:</strong> طالب علم کا ڈیٹا کمپیوٹر میں محفوظ کرنے کے لیے۔</li>
                <li><strong>Download PDF:</strong> پرنٹ ایبل پی ڈی ایف فارم ڈاؤن لوڈ کرنے کے لیے۔</li>
            </ul>
        </div>
    </div>

<div id="ar" class="content-section rtl">
        <h1 class="ar-font">📝 إدخال استمارة القبول - دليل المستخدم</h1>
        <p class="ar-font">تُستخدم هذه الأداة لإدخال بيانات الطلاب الفردية وتطبيق هيكل المعهد الخاص بك.</p>
        <h2 class="ar-font">١. تطبيق الهيكل</h2>
        <div class="box ar-font">
            <ul>
                <li>قم بتحميل ملف <code>header_structure.json</code> لتطبيق الشعار واللغة الخاصة بك.</li>
            </ul>
        </div>
        <h2 class="ar-font">٢. إدخال البيانات</h2>
        <div class="box ar-font">
            <ul>
                <li>املأ المعلومات الشخصية ومعلومات ولي الأمر.</li>
                <li>انقر فوق مربع الصورة لتحميل صورة الطالب.</li>
            </ul>
        </div>
        <h2 class="ar-font">٣. الحفظ والتصدير</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>Save JSON:</strong> حفظ سجل الطالب على جهاز الكمبيوتر الخاص بك.</li>
                <li><strong>Download PDF:</strong> إنشاء استمارة PDF جاهزة للطباعة.</li>
            </ul>
        </div>
    </div>
</div>
<script>
    function showLang(lang) {
        document.querySelectorAll('.content-section').forEach(el => el.classList.remove('active'));
        document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
        document.getElementById(lang).classList.add('active');
        const index = lang === 'en' ? 0 : lang === 'ur' ? 1 : 2;
        document.querySelectorAll('.tab-btn')[index].classList.add('active');
    }
</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 - Records Dashboard</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>
        @media (max-width: 600px) { .container { padding: 15px; width: auto; } h1 { font-size: 22px; } .box { padding: 10px; } }
        :root { --primary: #2ecc71; --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-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; }
        .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); } }
        @media (max-width: 600px) { body { padding: 5px !important; } .container { padding: 15px !important; width: 100% !important; box-sizing: border-box; } .lang-tabs { flex-wrap: wrap; gap: 5px; } .tab-btn { flex: 1 1 100%; text-align: center; margin-bottom: 5px; } 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>📊 Records Dashboard Guide</h1>
        <p>The <strong>Dashboard</strong> helps you manage all the individual JSON files you saved from the Admission tool.</p>

<h2>1. Loading Data</h2>
        <div class="box">
            <ul>
                <li><strong>Load Folder:</strong> The easiest way to view all students is to select the entire folder on your computer where your JSON files are saved.</li>
                <li><strong>Load Files:</strong> Alternatively, you can select multiple specific JSON files.</li>
                <li>The table will automatically populate with Registration Numbers, Names, CNICs, and Admission details.</li>
            </ul>
        </div>

<h2>2. Searching & Managing</h2>
        <div class="box">
            <ul>
                <li><strong>Search Bar:</strong> Type a name, Reg #, or CNIC to instantly filter the list of students.</li>
                <li><strong>View Form:</strong> Click this yellow button next to any student to open their complete, styled admission form.</li>
                <li><strong>Delete:</strong> This hides the record from the dashboard (Note: You still need to manually delete the file from your computer's folder for security reasons).</li>
            </ul>
        </div>

<h2>3. Re-Printing Forms</h2>
        <div class="box">
            <ul>
                <li>When viewing a specific form, you can use the <strong>Print A4 Form</strong> or <strong>Download PDF</strong> buttons at the top to generate their documents again at any time.</li>
            </ul>
        </div>
    </div>

<div id="ur" class="content-section rtl">
        <h1 class="ur-font">📊 ریکارڈ ڈیش بورڈ - ہدایت نامہ</h1>
        <p class="ur-font">ڈیش بورڈ آپ کو تمام طلباء کی JSON فائلز ایک جگہ دیکھنے کی سہولت دیتا ہے۔</p>
        <h2 class="ur-font">۱۔ ڈیٹا لوڈ کریں</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>Load Folder:</strong> وہ فولڈر منتخب کریں جہاں آپ نے تمام طلباء کی فائلز محفوظ کی ہیں۔</li>
                <li>مکمل ٹیبل خود بخود تیار ہو جائے گا۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۲۔ تلاش اور انتظام</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>تلاش:</strong> سرچ بار میں نام یا رجسٹریشن نمبر لکھ کر طلباء کو تلاش کریں۔</li>
                <li><strong>View Form:</strong> طالب علم کا مکمل فارم دیکھنے کے لیے پیلے بٹن پر کلک کریں۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۳۔ دوبارہ پرنٹ نکالنا</h2>
        <div class="box ur-font">
            <ul>
                <li>کسی بھی فارم کو کھول کر آپ اسے دوبارہ پرنٹ یا PDF میں ڈاؤن لوڈ کر سکتے ہیں۔</li>
            </ul>
        </div>
    </div>

<div id="ar" class="content-section rtl">
        <h1 class="ar-font">📊 لوحة السجلات - دليل المستخدم</h1>
        <p class="ar-font">تساعدك لوحة المعلومات على إدارة جميع ملفات JSON الفردية التي حفظتها من أداة القبول.</p>
        <h2 class="ar-font">١. تحميل البيانات</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>Load Folder:</strong> حدد المجلد بأكمله على جهاز الكمبيوتر الخاص بك لعرض جميع الطلاب مرة واحدة.</li>
            </ul>
        </div>
        <h2 class="ar-font">٢. البحث والإدارة</h2>
        <div class="box ar-font">
            <ul>
                <li>استخدم مربع البحث لتصفية الطلاب بالاسم أو رقم التسجيل.</li>
                <li>انقر فوق <strong>View Form</strong> لفتح استمارة القبول الكاملة لأي طالب.</li>
            </ul>
        </div>
        <h2 class="ar-font">٣. إعادة الطباعة</h2>
        <div class="box ar-font">
            <ul>
                <li>أثناء عرض نموذج معين ، يمكنك تنزيل ملف PDF أو طباعته مرة أخرى.</li>
            </ul>
        </div>
    </div>
</div>
<script>
    function showLang(lang) {
        document.querySelectorAll('.content-section').forEach(el => el.classList.remove('active'));
        document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));
        document.getElementById(lang).classList.add('active');
        const index = lang === 'en' ? 0 : lang === 'ur' ? 1 : 2;
        document.querySelectorAll('.tab-btn')[index].classList.add('active');
    }
</script>
</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>
        @media (max-width: 600px) { body { padding: 15px !important; } .video-grid { grid-template-columns: 1fr !important; } }
        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)); gap: 20px; }
        .video-card { background: white; padding: 15px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        .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="#" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <h3>1. Setup Institute Structure</h3>
                <p>Learn how to add your logo and create the JSON file.</p>
            </div>

<div class="video-card">
                <div class="video-wrapper">
                    <video controls preload="metadata">
                        <source src="#" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <h3>2. Admission Data Entry</h3>
                <p>Guide to filling forms and generating PDFs.</p>
            </div>

<div class="video-card">
                <div class="video-wrapper">
                    <video controls preload="metadata">
                        <source src="#" type="video/mp4">
                        Your browser does not support the video tag.
                    </video>
                </div>
                <h3>3. Managing the Dashboard</h3>
                <p>Loading folders and printing from records.</p>
            </div>

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