PDF Designer

<div style="font-family: Arial, Helvetica, sans-serif; max-width: 900px; margin: 0 auto; color: #333; line-height: 1.6;">

    <!-- HERO / HEADER -->
    <div style="background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); color: #fff; padding: 40px 35px; border-radius: 12px; text-align: center; margin-bottom: 30px;">
        <div style="font-size: 48px; margin-bottom: 10px;">?</div>
        <h1 style="margin: 0 0 8px; font-size: 36px; font-weight: 800; letter-spacing: -0.5px;">PDF Designer</h1>
        <p style="margin: 0 0 15px; font-size: 18px; color: #a8d8ea; font-weight: 300;">Visual PDF Template Designer for Dolibarr</p>
        <p style="margin: 0 0 20px; font-size: 15px; color: #ccc;">Create professional, fully customized PDF documents with an intuitive drag-and-drop visual editor. No coding required.</p>
        <div style="display: inline-block; background: #e94560; color: #fff; padding: 12px 30px; border-radius: 25px; font-size: 22px; font-weight: 700;">?150</div>
        <p style="margin: 10px 0 0; font-size: 13px; color: #aaa;">Compatible with Dolibarr 16.0+ &nbsp;|&nbsp; PHP 7.4+ &nbsp;|&nbsp; GPL v3 License</p>
    </div>

    <!-- BADGES -->
    <div style="text-align: center; margin-bottom: 30px;">
        <span style="display: inline-block; background: #e8f5e9; color: #2e7d32; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; margin: 4px;">? Visual Drag &amp; Drop Editor</span>
        <span style="display: inline-block; background: #e3f2fd; color: #1565c0; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; margin: 4px;">? 8 Document Types</span>
        <span style="display: inline-block; background: #fce4ec; color: #c62828; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; margin: 4px;">? Extrafields Supported</span>
        <span style="display: inline-block; background: #fff3e0; color: #e65100; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; margin: 4px;">? Auto-translated Labels</span>
        <span style="display: inline-block; background: #f3e5f5; color: #6a1b9a; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; margin: 4px;">?? Embedded Images</span>
    </div>

    <!-- WHY PDF DESIGNER? -->
    <div style="background: #f8f9fa; border-left: 5px solid #0f3460; padding: 25px 30px; border-radius: 0 8px 8px 0; margin-bottom: 30px;">
        <h2 style="margin: 0 0 12px; font-size: 22px; color: #0f3460;">Why PDF Designer?</h2>
        <p style="margin: 0; font-size: 15px;">Dolibarr's default PDF templates (Sponge, Crabe...) are limited and hard to customize. <strong>PDF Designer</strong> lets you create documents with <strong>your own corporate identity</strong>, using an <strong>intuitive visual editor</strong> powered by <a href="https://grapesjs.com/" style="color: #0f3460;">GrapesJS</a>: drag blocks, modify styles, insert variables, and get perfect PDFs in seconds.</p>
    </div>

    <!-- KEY FEATURES - GRID -->
    <h2 style="text-align: center; font-size: 26px; color: #1a1a2e; margin-bottom: 25px;">? Key Features</h2>

    <table style="width: 100%; border-collapse: separate; border-spacing: 15px;" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 50%; vertical-align: top; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 22px;">
                <div style="font-size: 32px; margin-bottom: 8px;">?</div>
                <h3 style="margin: 0 0 8px; font-size: 17px; color: #1a1a2e;">Visual Drag &amp; Drop Editor</h3>
                <p style="margin: 0; font-size: 14px; color: #555;">Full-featured editor powered by GrapesJS with pre-built blocks for PDF sections: header, client info, lines table, totals, footer, and more. Drag, resize, and customize every element.</p>
            </td>
            <td style="width: 50%; vertical-align: top; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 22px;">
                <div style="font-size: 32px; margin-bottom: 8px;">?</div>
                <h3 style="margin: 0 0 8px; font-size: 17px; color: #1a1a2e;">8 Document Types</h3>
                <p style="margin: 0; font-size: 14px; color: #555;">Invoices, proposals, orders, interventions, shipments, supplier invoices, supplier orders, and supplier proposals. A different template for each document type.</p>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; vertical-align: top; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 22px;">
                <div style="font-size: 32px; margin-bottom: 8px;">??</div>
                <h3 style="margin: 0 0 8px; font-size: 17px; color: #1a1a2e;">Smart Variable System</h3>
                <p style="margin: 0; font-size: 14px; color: #555;">60+ variables organized by categories: company, client, document, lines, translated labels, and miscellaneous. Side panel with drag or click-to-copy. Automatically replaced when generating the PDF.</p>
            </td>
            <td style="width: 50%; vertical-align: top; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 22px;">
                <div style="font-size: 32px; margin-bottom: 8px;">?</div>
                <h3 style="margin: 0 0 8px; font-size: 17px; color: #1a1a2e;">Extrafields Support</h3>
                <p style="margin: 0; font-size: 14px; color: #555;">Full support for Dolibarr extrafields: document, line, and third-party (client). Dynamically loaded from the database. Use <code style="background:#f0f0f0;padding:2px 5px;border-radius:3px;">{extra_field}</code> in your template.</p>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; vertical-align: top; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 22px;">
                <div style="font-size: 32px; margin-bottom: 8px;">?</div>
                <h3 style="margin: 0 0 8px; font-size: 17px; color: #1a1a2e;">Multi-language Labels</h3>
                <p style="margin: 0; font-size: 14px; color: #555;">Translated label variables like <code style="background:#f0f0f0;padding:2px 5px;border-radius:3px;">{label_Invoice}</code>, <code style="background:#f0f0f0;padding:2px 5px;border-radius:3px;">{label_TotalHT}</code> are automatically translated to the document/client language.</p>
            </td>
            <td style="width: 50%; vertical-align: top; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 22px;">
                <div style="font-size: 32px; margin-bottom: 8px;">?</div>
                <h3 style="margin: 0 0 8px; font-size: 17px; color: #1a1a2e;">Linux + wkhtmltopdf</h3>
                <p style="margin: 0; font-size: 14px; color: #555;">Works exclusively on <strong>Linux servers</strong> with <strong>wkhtmltopdf</strong> installed. Full CSS support: flexbox, advanced borders, web fonts, and modern layouts for pixel-perfect PDFs.</p>
            </td>
        </tr>
        <tr>
            <td style="width: 50%; vertical-align: top; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 22px;">
                <div style="font-size: 32px; margin-bottom: 8px;">??</div>
                <h3 style="margin: 0 0 8px; font-size: 17px; color: #1a1a2e;">Base64 Embedded Images</h3>
                <p style="margin: 0; font-size: 14px; color: #555;">Upload images directly into the editor. They are embedded as base64 within the template, ensuring they always display correctly in the PDF without relying on external paths.</p>
            </td>
            <td style="width: 50%; vertical-align: top; background: #fff; border: 1px solid #e0e0e0; border-radius: 10px; padding: 22px;">
                <div style="font-size: 32px; margin-bottom: 8px;">?</div>
                <h3 style="margin: 0 0 8px; font-size: 17px; color: #1a1a2e;">Full Page Configuration</h3>
                <p style="margin: 0; font-size: 14px; color: #555;">Page format (A4, Letter), orientation (portrait/landscape), customizable margins (top, bottom, left, right) in millimeters. Editor preview adapts to selected format.</p>
            </td>
        </tr>
    </table>

    <!-- SUPPORTED DOCUMENT TYPES -->
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 30px 35px; border-radius: 12px; margin: 30px 0;">
        <h2 style="margin: 0 0 20px; font-size: 22px; text-align: center;">? Supported Document Types</h2>
        <table style="width: 100%; border-collapse: collapse;" cellpadding="0" cellspacing="0">
            <tr>
                <td style="width: 25%; text-align: center; padding: 12px;">
                    <div style="font-size: 30px;">?</div>
                    <div style="font-size: 14px; font-weight: 600; margin-top: 5px;">Invoices</div>
                </td>
                <td style="width: 25%; text-align: center; padding: 12px;">
                    <div style="font-size: 30px;">?</div>
                    <div style="font-size: 14px; font-weight: 600; margin-top: 5px;">Proposals</div>
                </td>
                <td style="width: 25%; text-align: center; padding: 12px;">
                    <div style="font-size: 30px;">?</div>
                    <div style="font-size: 14px; font-weight: 600; margin-top: 5px;">Orders</div>
                </td>
                <td style="width: 25%; text-align: center; padding: 12px;">
                    <div style="font-size: 30px;">?</div>
                    <div style="font-size: 14px; font-weight: 600; margin-top: 5px;">Interventions</div>
                </td>
            </tr>
            <tr>
                <td style="width: 25%; text-align: center; padding: 12px;">
                    <div style="font-size: 30px;">?</div>
                    <div style="font-size: 14px; font-weight: 600; margin-top: 5px;">Shipments</div>
                </td>
                <td style="width: 25%; text-align: center; padding: 12px;">
                    <div style="font-size: 30px;">?</div>
                    <div style="font-size: 14px; font-weight: 600; margin-top: 5px;">Supplier Invoices</div>
                </td>
                <td style="width: 25%; text-align: center; padding: 12px;">
                    <div style="font-size: 30px;">?</div>
                    <div style="font-size: 14px; font-weight: 600; margin-top: 5px;">Supplier Orders</div>
                </td>
                <td style="width: 25%; text-align: center; padding: 12px;">
                    <div style="font-size: 30px;">?</div>
                    <div style="font-size: 14px; font-weight: 600; margin-top: 5px;">Supplier Proposals</div>
                </td>
            </tr>
        </table>
    </div>

    <!-- AVAILABLE VARIABLES -->
    <h2 style="text-align: center; font-size: 24px; color: #1a1a2e; margin-bottom: 5px;">?? Variable System</h2>
    <p style="text-align: center; color: #777; font-size: 14px; margin-bottom: 25px;">Over 60 variables organized by categories, available in the editor's side panel</p>

    <table style="width: 100%; border-collapse: collapse; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 30px;" cellpadding="0" cellspacing="0">
        <thead>
            <tr style="background: #1a1a2e; color: #fff;">
                <th style="padding: 12px 15px; text-align: left; font-size: 14px; font-weight: 600;">Category</th>
                <th style="padding: 12px 15px; text-align: left; font-size: 14px; font-weight: 600;">Example Variables</th>
                <th style="padding: 12px 15px; text-align: left; font-size: 14px; font-weight: 600;">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr style="border-bottom: 1px solid #eee;">
                <td style="padding: 10px 15px; font-weight: 600; color: #0f3460;">? Company</td>
                <td style="padding: 10px 15px;"><code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{company_name}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{company_logo}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{company_siret}</code></td>
                <td style="padding: 10px 15px; font-size: 13px; color: #555;">Name, address, phone, email, website, SIRET, SIREN, capital, VAT number, logo</td>
            </tr>
            <tr style="border-bottom: 1px solid #eee; background: #fafafa;">
                <td style="padding: 10px 15px; font-weight: 600; color: #0f3460;">? Client</td>
                <td style="padding: 10px 15px;"><code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{client_name}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{client_address}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{client_tva_intra}</code></td>
                <td style="padding: 10px 15px; font-size: 13px; color: #555;">Name, address, zip, city, country, phone, email, VAT number, code, SIRET</td>
            </tr>
            <tr style="border-bottom: 1px solid #eee;">
                <td style="padding: 10px 15px; font-weight: 600; color: #0f3460;">? Document</td>
                <td style="padding: 10px 15px;"><code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{doc_ref}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{doc_date}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{doc_total_ttc}</code></td>
                <td style="padding: 10px 15px; font-size: 13px; color: #555;">Reference, date, due date, public/private notes, totals (excl./incl. tax), currency, payment terms &amp; method</td>
            </tr>
            <tr style="border-bottom: 1px solid #eee; background: #fafafa;">
                <td style="padding: 10px 15px; font-weight: 600; color: #0f3460;">? Lines</td>
                <td style="padding: 10px 15px;"><code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{line_desc}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{line_qty}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{line_total_ht}</code></td>
                <td style="padding: 10px 15px; font-size: 13px; color: #555;">Position, description, quantity, unit price, VAT rate, line total, discount, product ref, start/end dates</td>
            </tr>
            <tr style="border-bottom: 1px solid #eee;">
                <td style="padding: 10px 15px; font-weight: 600; color: #0f3460;">? Labels</td>
                <td style="padding: 10px 15px;"><code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{label_Invoice}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{label_TotalHT}</code> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;font-size:12px;">{label_Qty}</code></td>
                <td style="padding: 10px 15px; font-size: 13px; color: #555;">Labels auto-translated to the third party's language: Invoice, Proposal, Order, Total, VAT, etc.</td>
            </tr>
            <tr style="background: #fafafa;">
                <td style="padding: 10px 15px; font-weight: 600; color: #9b59b6;">? Extrafields</td>
                <td style="padding: 10px 15px;"><code style="background:#f3e5f5;padding:2px 6px;border-radius:3px;font-size:12px;">{extra_field}</code> <code style="background:#f3e5f5;padding:2px 6px;border-radius:3px;font-size:12px;">{extra_line_field}</code> <code style="background:#f3e5f5;padding:2px 6px;border-radius:3px;font-size:12px;">{extra_client_field}</code></td>
                <td style="padding: 10px 15px; font-size: 13px; color: #555;">Document, line, and third-party extrafields. Dynamically loaded from the database.</td>
            </tr>
        </tbody>
    </table>

    <!-- LINES LOOP -->
    <div style="background: #fff8e1; border: 1px solid #ffcc02; border-radius: 10px; padding: 22px 28px; margin-bottom: 30px;">
        <h3 style="margin: 0 0 10px; font-size: 18px; color: #f57f17;">?? Lines Loop System</h3>
        <p style="margin: 0 0 12px; font-size: 14px; color: #555;">Wrap your table rows with the <code style="background:#fff;padding:2px 6px;border-radius:3px;border:1px solid #ddd;">{lines}</code> and <code style="background:#fff;padding:2px 6px;border-radius:3px;border:1px solid #ddd;">{/lines}</code> tags to repeat them automatically for each document line:</p>
        <div style="background: #263238; color: #e0e0e0; padding: 15px 20px; border-radius: 6px; font-family: monospace; font-size: 13px; line-height: 1.8; overflow-x: auto;">
            <span style="color: #80cbc4;">&lt;tbody&gt;</span><br>
            &nbsp;&nbsp;<span style="color: #ffcc02; font-weight: bold;">{lines}</span><br>
            &nbsp;&nbsp;<span style="color: #80cbc4;">&lt;tr&gt;</span><br>
            &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #80cbc4;">&lt;td&gt;</span><span style="color: #a5d6a7;">{line_pos}</span><span style="color: #80cbc4;">&lt;/td&gt;</span><br>
            &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #80cbc4;">&lt;td&gt;</span><span style="color: #a5d6a7;">{line_desc}</span><span style="color: #80cbc4;">&lt;/td&gt;</span><br>
            &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #80cbc4;">&lt;td&gt;</span><span style="color: #a5d6a7;">{line_qty}</span><span style="color: #80cbc4;">&lt;/td&gt;</span><br>
            &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #80cbc4;">&lt;td&gt;</span><span style="color: #a5d6a7;">{line_total_ht}</span><span style="color: #80cbc4;">&lt;/td&gt;</span><br>
            &nbsp;&nbsp;<span style="color: #80cbc4;">&lt;/tr&gt;</span><br>
            &nbsp;&nbsp;<span style="color: #ffcc02; font-weight: bold;">{/lines}</span><br>
            <span style="color: #80cbc4;">&lt;/tbody&gt;</span>
        </div>
    </div>

    <!-- HOW IT WORKS -->
    <h2 style="text-align: center; font-size: 24px; color: #1a1a2e; margin-bottom: 25px;">? How Does It Work?</h2>

    <table style="width: 100%; border-collapse: separate; border-spacing: 12px;" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width: 25%; text-align: center; vertical-align: top; background: #e8f5e9; border-radius: 10px; padding: 25px 15px;">
                <div style="background: #2e7d32; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; font-size: 20px; font-weight: 700; margin: 0 auto 12px;">1</div>
                <h4 style="margin: 0 0 8px; font-size: 15px; color: #2e7d32;">Create a Template</h4>
                <p style="margin: 0; font-size: 13px; color: #555;">Select the document type, page format, and margins.</p>
            </td>
            <td style="width: 25%; text-align: center; vertical-align: top; background: #e3f2fd; border-radius: 10px; padding: 25px 15px;">
                <div style="background: #1565c0; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; font-size: 20px; font-weight: 700; margin: 0 auto 12px;">2</div>
                <h4 style="margin: 0 0 8px; font-size: 15px; color: #1565c0;">Design Visually</h4>
                <p style="margin: 0; font-size: 13px; color: #555;">Use the drag &amp; drop editor. Drag blocks and variables from the side panel.</p>
            </td>
            <td style="width: 25%; text-align: center; vertical-align: top; background: #fff3e0; border-radius: 10px; padding: 25px 15px;">
                <div style="background: #e65100; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; font-size: 20px; font-weight: 700; margin: 0 auto 12px;">3</div>
                <h4 style="margin: 0 0 8px; font-size: 15px; color: #e65100;">Set as Default</h4>
                <p style="margin: 0; font-size: 13px; color: #555;">Assign the template as default and activate the PDF Designer model.</p>
            </td>
            <td style="width: 25%; text-align: center; vertical-align: top; background: #fce4ec; border-radius: 10px; padding: 25px 15px;">
                <div style="background: #c62828; color: #fff; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; font-size: 20px; font-weight: 700; margin: 0 auto 12px;">4</div>
                <h4 style="margin: 0 0 8px; font-size: 15px; color: #c62828;">Generate Your PDFs!</h4>
                <p style="margin: 0; font-size: 13px; color: #555;">Your documents will automatically use your custom design.</p>
            </td>
        </tr>
    </table>

    <!-- PRE-BUILT BLOCKS -->
    <div style="background: #f5f5f5; border-radius: 12px; padding: 28px 30px; margin: 30px 0;">
        <h2 style="margin: 0 0 18px; font-size: 22px; color: #1a1a2e; text-align: center;">? Ready-to-Use Pre-built Blocks</h2>
        <table style="width: 100%; border-collapse: collapse;" cellpadding="0" cellspacing="0">
            <tr>
                <td style="padding: 8px 12px; font-size: 14px;">? <strong>Header</strong> ? Logo, company info, and document reference</td>
                <td style="padding: 8px 12px; font-size: 14px;">? <strong>Client Info</strong> ? Block with all third-party information</td>
            </tr>
            <tr>
                <td style="padding: 8px 12px; font-size: 14px;">? <strong>Lines Table</strong> ? Full table with integrated lines loop</td>
                <td style="padding: 8px 12px; font-size: 14px;">? <strong>Totals</strong> ? Tax-exclusive, VAT, and tax-inclusive totals</td>
            </tr>
            <tr>
                <td style="padding: 8px 12px; font-size: 14px;">? <strong>Payment Info</strong> ? Payment terms and payment method</td>
                <td style="padding: 8px 12px; font-size: 14px;">? <strong>Notes</strong> ? Document public note block</td>
            </tr>
            <tr>
                <td style="padding: 8px 12px; font-size: 14px;">? <strong>Footer</strong> ? SIRET, VAT number, and pagination</td>
                <td style="padding: 8px 12px; font-size: 14px;">? <strong>Basic Elements</strong> ? Text, heading, image, divider, columns</td>
            </tr>
        </table>
    </div>

    <!-- TECHNICAL REQUIREMENTS -->
    <div style="border: 1px solid #e0e0e0; border-radius: 10px; padding: 25px 30px; margin-bottom: 30px;">
        <h2 style="margin: 0 0 15px; font-size: 20px; color: #1a1a2e;">?? Technical Requirements</h2>
        <table style="width: 100%; border-collapse: collapse;" cellpadding="0" cellspacing="0">
            <tr style="border-bottom: 1px solid #eee;">
                <td style="padding: 8px 0; font-weight: 600; width: 200px; color: #555;">Operating System</td>
                <td style="padding: 8px 0;"><strong>Linux</strong> (Ubuntu, Debian, CentOS, RHEL, etc.)</td>
            </tr>
            <tr style="border-bottom: 1px solid #eee;">
                <td style="padding: 8px 0; font-weight: 600; color: #555;">Dolibarr</td>
                <td style="padding: 8px 0;">16.0 or higher</td>
            </tr>
            <tr style="border-bottom: 1px solid #eee;">
                <td style="padding: 8px 0; font-weight: 600; color: #555;">PHP</td>
                <td style="padding: 8px 0;">7.4 or higher</td>
            </tr>
            <tr>
                <td style="padding: 8px 0; font-weight: 600; color: #555;">PDF Engine</td>
                <td style="padding: 8px 0;"><strong>wkhtmltopdf</strong> (required) ? Full CSS support</td>
            </tr>
        </table>
    </div>

    <!-- IMPORTANT NOTICE -->
    <div style="background: #fff3e0; border-left: 5px solid #e65100; padding: 18px 24px; border-radius: 0 10px 10px 0; margin-bottom: 30px;">
        <h3 style="margin: 0 0 8px; font-size: 17px; color: #e65100;">?? Important: Linux + wkhtmltopdf Only</h3>
        <p style="margin: 0; font-size: 14px; color: #555;">This module requires a <strong>Linux server</strong> with <strong>wkhtmltopdf</strong> installed. It is not compatible with Windows servers. wkhtmltopdf is required to generate PDFs with advanced CSS support (flexbox, borders, web fonts).</p>
    </div>

    <!-- WKHTMLTOPDF INSTALLATION -->
    <div style="background: #263238; color: #e0e0e0; border-radius: 10px; padding: 25px 30px; margin-bottom: 30px;">
        <h3 style="margin: 0 0 15px; font-size: 18px; color: #80cbc4;">? Installing wkhtmltopdf on Linux</h3>

        <p style="margin: 0 0 8px; font-size: 13px; color: #aaa; font-weight: 600;">Ubuntu / Debian:</p>
        <div style="background: #1a1a2e; padding: 10px 15px; border-radius: 6px; font-family: monospace; font-size: 13px; margin-bottom: 15px; overflow-x: auto;">
            <span style="color: #4fc3f7;">sudo</span> apt-get update<br>
            <span style="color: #4fc3f7;">sudo</span> apt-get install -y wkhtmltopdf
        </div>

        <p style="margin: 0 0 8px; font-size: 13px; color: #aaa; font-weight: 600;">CentOS / RHEL / AlmaLinux:</p>
        <div style="background: #1a1a2e; padding: 10px 15px; border-radius: 6px; font-family: monospace; font-size: 13px; margin-bottom: 15px; overflow-x: auto;">
            <span style="color: #4fc3f7;">sudo</span> yum install -y wkhtmltopdf
        </div>

        <p style="margin: 0 0 8px; font-size: 13px; color: #aaa; font-weight: 600;">Full support version (recommended for headless servers):</p>
        <div style="background: #1a1a2e; padding: 10px 15px; border-radius: 6px; font-family: monospace; font-size: 13px; margin-bottom: 15px; overflow-x: auto;">
            <span style="color: #999;"># Download patched Qt version (better rendering)</span><br>
            <span style="color: #4fc3f7;">wget</span> https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6.1-3/wkhtmltox_0.12.6.1-3.jammy_amd64.deb<br>
            <span style="color: #4fc3f7;">sudo</span> apt install -y ./wkhtmltox_0.12.6.1-3.jammy_amd64.deb
        </div>

        <p style="margin: 0 0 8px; font-size: 13px; color: #aaa; font-weight: 600;">Verify installation:</p>
        <div style="background: #1a1a2e; padding: 10px 15px; border-radius: 6px; font-family: monospace; font-size: 13px; margin-bottom: 10px; overflow-x: auto;">
            <span style="color: #4fc3f7;">wkhtmltopdf</span> --version
        </div>

        <p style="margin: 10px 0 0; font-size: 12px; color: #78909c;">? On headless servers (no GUI), you may also need to install: <span style="font-family:monospace;">xvfb</span> ? <span style="font-family:monospace;">sudo apt-get install -y xvfb</span></p>
    </div>

    <!-- PERMISSIONS -->
    <div style="background: #e8eaf6; border-radius: 10px; padding: 22px 28px; margin-bottom: 30px;">
        <h3 style="margin: 0 0 10px; font-size: 18px; color: #283593;">? Permission System</h3>
        <p style="margin: 0; font-size: 14px; color: #555;">Granular access control: <strong>Read</strong> templates, <strong>Create/Modify</strong> templates, and <strong>Delete</strong> templates. Configure which users or groups can design and manage PDF templates.</p>
    </div>

    <!-- ONLINE DEMO -->
    <div style="background: linear-gradient(135deg, #ff9a56 0%, #e94560 100%); color: #fff; padding: 30px 35px; border-radius: 12px; margin-bottom: 30px; text-align: center;">
        <div style="font-size: 42px; margin-bottom: 8px;">??</div>
        <h2 style="margin: 0 0 10px; font-size: 24px; font-weight: 800;">Try it before you buy!</h2>
        <p style="margin: 0 0 18px; font-size: 15px; color: #fff;">We have an online demo instance where you can see PDF Designer in real action.</p>
        <a href="https://dolibarr.erpmodplus.com" target="_blank" style="display: inline-block; background: #fff; color: #e94560; padding: 12px 32px; border-radius: 25px; font-size: 17px; font-weight: 700; text-decoration: none; margin-bottom: 12px;">? Access the online demo</a>
        <p style="margin: 12px 0 0; font-size: 14px; color: #ffe0e0;">To request your demo access credentials, send an email to:<br><a href="mailto:info@erpmodplus.com" style="color: #fff; font-weight: 700; font-size: 16px; text-decoration: underline;">? info@erpmodplus.com</a></p>
    </div>

    <!-- INSTALLATION -->
    <div style="background: #e0f2f1; border-radius: 10px; padding: 22px 28px; margin-bottom: 30px;">
        <h3 style="margin: 0 0 10px; font-size: 18px; color: #00695c;">? Easy Installation</h3>
        <p style="margin: 0 0 8px; font-size: 14px; color: #555;"><strong>1.</strong> Download the module from Dolistore</p>
        <p style="margin: 0 0 8px; font-size: 14px; color: #555;"><strong>2.</strong> Go to <em>Home ? Setup ? Modules ? Deploy external module</em> and upload the ZIP</p>
        <p style="margin: 0 0 8px; font-size: 14px; color: #555;"><strong>3.</strong> Activate the "PDFDesigner" module</p>
        <p style="margin: 0; font-size: 14px; color: #555;"><strong>4.</strong> Start designing your PDF templates!</p>
    </div>

    <!-- FOOTER -->
    <div style="text-align: center; padding: 25px 0; border-top: 2px solid #e0e0e0; margin-top: 20px;">
        <p style="margin: 0 0 5px; font-size: 16px; font-weight: 700; color: #1a1a2e;">PDF Designer for Dolibarr</p>
        <p style="margin: 0 0 10px; font-size: 14px; color: #777;">Version 1.0.0 &nbsp;|&nbsp; GPL v3 License &nbsp;|&nbsp; Compatible with Dolibarr 16.0+</p>
        <div style="display: inline-block; background: #e94560; color: #fff; padding: 10px 28px; border-radius: 25px; font-size: 20px; font-weight: 700;">?150</div>
    </div>

</div>