Smart ID Card Generator - 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 - Canvas Editor</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: #e74c3c; --accent: #c0392b; --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>🎨 Canvas Editor Manual</h1>
        <p>The <strong>Canvas Editor</strong> is where you design the visual layout of your ID cards. Drag, drop, and style your template here.</p>

<h2>1. Canvas & Background Settings</h2>
        <div class="box">
            <ul>
                <li><strong>Size & Sides:</strong> Set your card dimensions in millimeters or pixels. Choose between a 1-sided or 2-sided card.</li>
                <li><strong>Backgrounds:</strong> Upload a custom background image for the front and back. Adjust the opacity or fitting (Cover/Stretch).</li>
            </ul>
        </div>

<h2>2. Adding Elements</h2>
        <div class="box">
            <ul>
                <li>Use the <strong>Add Elements</strong> panel to insert Text, Dynamic Fields (like Name, ID), Profile Pictures, QR Codes, and Barcodes.</li>
                <li><strong>Dynamic Fields:</strong> Whenever you add a "Data Field", it creates a new column in the Batch Data Grid below.</li>
                <li>Click and drag any element on the canvas to position it perfectly.</li>
            </ul>
        </div>

<h2>3. Styling Engine</h2>
        <div class="box">
            <p>Click on any element on the canvas to open the <strong>Styling Engine</strong>. Here you can change fonts, colors, text alignment, upload custom `.ttf` fonts, or adjust the size of images and QR codes.</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> ملی میٹر یا پکسلز میں کارڈ کا سائز مقرر کریں اور 1 یا 2 رخ منتخب کریں۔</li>
                <li><strong>پس منظر:</strong> فرنٹ اور بیک کے لیے اپنی مرضی کی تصویر اپ لوڈ کریں۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۲۔ عناصر شامل کریں</h2>
        <div class="box ur-font">
            <ul>
                <li>ٹیکسٹ، ڈائنامک فیلڈز (جیسے نام، رول نمبر)، کیو آر کوڈز اور تصاویر کا اضافہ کریں۔</li>
                <li>آپ جو بھی نیا <strong>Data Field</strong> شامل کریں گے، وہ نیچے ڈیٹا گرڈ میں ایک نیا کالم بنا دے گا۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۳۔ اسٹائلنگ انجن</h2>
        <div class="box ur-font">
            <p>کسی بھی عنصر پر کلک کر کے آپ اس کا رنگ، فونٹ، سائز اور الائنمنٹ تبدیل کر سکتے ہیں، یا اپنے کسٹم فونٹس اپ لوڈ کر سکتے ہیں۔</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>أضف النصوص والحقول الديناميكية ورموز QR والصور والباركود.</li>
                <li>يؤدي إضافة حقل بيانات إلى إنشاء عمود جديد في شبكة البيانات أدناه.</li>
            </ul>
        </div>
        <h2 class="ar-font">٣. محرك التصميم</h2>
        <div class="box ar-font">
            <p>انقر فوق أي عنصر لتغيير الخطوط والألوان والحجم أو تحميل خطوط مخصصة.</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 - Batch Data Grid</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>⚡ Batch Data Grid Guide</h1>
        <p>The <strong>Data Grid</strong> allows you to rapidly generate hundreds of cards by linking list data to your canvas template.</p>

<h2>1. Adding Data</h2>
        <div class="box">
            <ul>
                <li><strong>Manual Entry:</strong> Click "+ Add Row" and type the details directly into the table.</li>
                <li><strong>Google Sheets / Excel:</strong> Copy a block of data from your spreadsheet. Click the top-left cell of the grid and press <code>Ctrl+V</code>, or use the "Paste from Sheets" button.</li>
            </ul>
        </div>

<h2>2. Managing Profile Pictures</h2>
        <div class="box">
            <ul>
                <li>In the "Profile Image" column, you can either paste a direct URL link to an image hosted online, or click "Choose File" to upload an image locally from your computer for each row.</li>
            </ul>
        </div>

<h2>3. Live Preview</h2>
        <div class="box">
            <ul>
                <li>Clicking anywhere on a row will highlight it in green.</li>
                <li>The Canvas above will instantly update to show the ID card for the currently selected row, including their unique QR/Barcodes.</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><strong>ایکسل اور شیٹس:</strong> گوگل شیٹس یا مائیکروسافٹ ایکسل سے ڈیٹا کاپی کر کے براہ راست ٹیبل میں پیسٹ کریں۔</li>
                <li>آپ <strong>+ Add Row</strong> بٹن کے ذریعے نیا ڈیٹا دستی طور پر بھی لکھ سکتے ہیں۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۲۔ پروفائل تصاویر</h2>
        <div class="box ur-font">
            <ul>
                <li>پروفائل امیج کے کالم میں آپ تصویر کا آن لائن لنک پیسٹ کر سکتے ہیں یا اپنے کمپیوٹر سے تصویر اپ لوڈ کر سکتے ہیں۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۳۔ لائیو پریویو</h2>
        <div class="box ur-font">
            <ul>
                <li>ٹیبل میں کسی بھی قطار (Row) پر کلک کرنے سے اوپر کینوس میں اسی شخص کا کارڈ ظاہر ہو جائے گا۔</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>انسخ والصق البيانات مباشرة من جوجل شيت أو إكسل.</li>
                <li>أو انقر فوق الزر "+ إضافة صف" للإدخال اليدوي.</li>
            </ul>
        </div>
        <h2 class="ar-font">٢. إدارة الصور</h2>
        <div class="box ar-font">
            <ul>
                <li>في عمود صورة الملف الشخصي ، يمكنك لصق رابط الصورة أو تحميلها مباشرة من جهازك لكل صف.</li>
            </ul>
        </div>
        <h2 class="ar-font">٣. المعاينة المباشرة</h2>
        <div class="box ar-font">
            <ul>
                <li>سيؤدي النقر فوق أي صف إلى تحديث القماش أعلاه فورًا لعرض بطاقة الهوية الخاصة بذلك الشخص.</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 - Print & PDF</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>🖨️ Print & PDF Export Guide</h1>
        <p>Once your template is designed and your data grid is populated, you are ready to generate your cards.</p>

<h2>1. Open Print Preview</h2>
        <div class="box">
            <ul>
                <li>Click the blue <strong>Print / PDF</strong> button in the top navigation bar.</li>
                <li>A dark overlay modal will appear. The system will loop through every row in your Data Grid and arrange the final ID cards onto print-ready pages.</li>
            </ul>
        </div>

<h2>2. Adjust Layout Options</h2>
        <div class="box">
            <ul>
                <li><strong>Page Size:</strong> Select your paper dimensions (A4, Letter, Legal).</li>
                <li><strong>Cards Per Page:</strong> Control the density. Choose 2, 4, or 8 cards per page to optimize paper usage depending on your card dimensions.</li>
            </ul>
        </div>

<h2>3. Exporting</h2>
        <div class="box">
            <ul>
                <li><strong>Download PDF:</strong> Generates a high-quality, pixel-perfect PDF file containing all pages. Ideal for saving or sending to a professional print shop.</li>
                <li><strong>Print:</strong> Opens your browser's native print dialog to send the pages directly to your local printer.</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>اوپر موجود <strong>Print / PDF</strong> بٹن پر کلک کریں۔ سسٹم خودکار طور پر تمام کارڈز تیار کر کے صفحات پر ترتیب دے دے گا۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۲۔ پیج سیٹ اپ</h2>
        <div class="box ur-font">
            <ul>
                <li>کاغذ کا سائز (A4, Letter) منتخب کریں۔</li>
                <li>کاغذ کی بچت کے لیے فی صفحہ کارڈز کی تعداد (2, 4, 8) متعین کریں۔</li>
            </ul>
        </div>
        <h2 class="ur-font">۳۔ پرنٹ اور ایکسپورٹ</h2>
        <div class="box ur-font">
            <ul>
                <li><strong>Download PDF:</strong> اعلیٰ معیار کی پی ڈی ایف ڈاؤن لوڈ کریں۔</li>
                <li><strong>Print:</strong> اپنے پرنٹر سے براہ راست پرنٹ نکالیں۔</li>
            </ul>
        </div>
    </div>

<div id="ar" class="content-section rtl">
        <h1 class="ar-font">🖨️ دليل الطباعة وتصدير PDF</h1>
        <p class="ar-font">بمجرد تصميم القالب وملء شبكة البيانات ، تصبح جاهزًا لتوليد البطاقات.</p>
        <h2 class="ar-font">١. فتح معاينة الطباعة</h2>
        <div class="box ar-font">
            <ul>
                <li>انقر فوق زر <strong>Print / PDF</strong> في شريط التنقل العلوي. سيقوم النظام بترتيب جميع البطاقات تلقائيًا على صفحات جاهزة للطباعة.</li>
            </ul>
        </div>
        <h2 class="ar-font">٢. خيارات التخطيط</h2>
        <div class="box ar-font">
            <ul>
                <li>حدد حجم الورق (A4، Letter، Legal).</li>
                <li>اختر عدد البطاقات في كل صفحة لتحسين استخدام الورق.</li>
            </ul>
        </div>
        <h2 class="ar-font">٣. التصدير</h2>
        <div class="box ar-font">
            <ul>
                <li><strong>Download PDF:</strong> لإنشاء ملف PDF عالي الجودة يحتوي على جميع البطاقات.</li>
                <li><strong>Print:</strong> للطباعة مباشرة من جهازك.</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. Designing Your Card Template</h3>
                <p>Learn how to use the canvas, set sizes, and style elements.</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. Pasting Data & QR Codes</h3>
                <p>Guide to using the batch data grid and setting up dynamic QR/Barcodes.</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. Printing & PDF Export Guide</h3>
                <p>Configuring paper size, layouts, and generating final print files.</p>
            </div>

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