Files
external-public-addons/report_carbone/static/description/index.html

485 lines
44 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carbone Document Generator</title>
<link rel="stylesheet" href="/report_carbone/static/description/assets/description.css">
</head>
<body>
<div class="container" style="font-family: 'Inter', sans-serif; line-height: 1.7; color: #001E2B;background-color: #ffffff; max-width: 1200px; margin: 0 auto; padding: 20px;">
<!-- Header -->
<div class="header">
<img src="assets/logo/Carbone BentoGrid.png" style="max-width: 100%;border-radius: 20px;"/>
</div>
<h1 style="font-size: 2.5em;font-weight: 700;letter-spacing: -0.02em;margin-bottom:20px">Carbone Document Generator</h1>
<!-- Description -->
<div class="section" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;">
<div class="text-item" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative;">
<h2 class="text-bottom" style="color: #001E2B; font-size: 2.2em; margin-bottom: 30px; border-bottom: 1px solid #001E2B; padding-bottom: 15px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1;">Description</h2>
<!-- <img src="./assets/logo/icon-description.png" style="position: absolute;height: 100%;top: 0;right: -5px;"/>-->
</div>
<p style="font-size: 1.1em; line-height: 1.8;">
<strong>Carbone Document Generator</strong> is the ultimate solution for automating the creation of professional documents from your Odoo data and a Template file.
Whether you need to generate invoices, contracts, reports, or any other type of document, Carbone makes it easy and efficient, without any coding.
To get started: simply select your Odoo data, design a template in your preferred text editor (LibreOffice, Word, Excel, PowerPoint, or Google Docs), add Carbone tags (placeholders), and youre ready to automate your documents!
</p>
<div style="text-align: center;background-color: #5e17eb; padding: 25px 30px; margin: 30px 0; border-radius: 0; color: white;border-radius: 10px;">
This integration is the official <b><a style="color:white" href="https://carbone.io" target="_blank">Carbone.io</a></b> connector for Odoo, developed and maintained by <b><a style="color:white" href="https://mangono.fr/">Mangono</a></b>, an Official Carbone Partner ⭐️
</div>
</div>
<!-- Use cases -->
<div class="section" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;">
<div class="text-item" style="padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative;">
<h2 class="text-bottom" style="color: #001E2B; font-size: 2.2em; margin-bottom: 30px; border-bottom: 1px solid #001E2B; padding-bottom: 15px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1;">Use Cases</h2>
<!-- <img src="./assets/logo/icon-use-case.png" style="position: absolute;height: 100%;top: 0;right: -5px;"/>-->
</div>
<ul style=" list-style-type: none">
<li><b>Sales:</b> Generate quotes, contracts, and purchase orders.</li>
<li><b>Logistics:</b> Create delivery notes, packing slips, and shipping labels.</li>
<li><b>Human Resources:</b> Automate the creation of employment contracts, payslips, and onboarding documents.</li>
<li><b>Finance:</b> Produce invoices, financial statements, and expense reports.</li>
<li><b>Marketing:</b> Render personalized proposals, campaign reports, and promotional materials.</li>
<li><b>Custom Models:</b> Build documents from any custom Odoo model to fit your specific business needs.</li>
</ul>
</div>
<!-- Fonctionnalités -->
<div class="section" style="margin-bottom: 20px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;">
<div class="text-item" style="padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative;">
<h2 class="text-bottom" style="color: #001E2B; font-size: 2.2em; margin-bottom: 30px; border-bottom: 1px solid #001E2B; padding-bottom: 15px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1;">Key Features</h2>
<!-- <img src="./assets/logo/icon-key-features.png" style="position: absolute;height: 100%;top: 0;right: -5px;"/>-->
</div>
<div class="features-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px;">
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;"><img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/></span> Generate and Convert Documents Instantly</h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">Generate and convert documents from a customized Template and your Odoo data, including Leads, Contacts, Orders, and custom models.</p>
</div>
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;"><img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/></span>Flexible Template Format Support</h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">Carbone supports an extensive range of input formats: PDF, DOCX, XLSX, PPTX, ODG, IDML, ODT, ODS, ODP, XML, HTML, and Markdown.</p>
</div>
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;"><img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/></span> Export to Any Format You Need</h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">Export your documents to 100+ formats, including PDF, ODT, DOCX, JPG, PNG, EPUB, ODS, XLSX, CSV, ODP, PPTX, XML, HTML, TXT, IDML, and many more.</p>
</div>
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;"><img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/></span> Design Templates in Your Preferred Editor</h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">Create your templates using the tools you already know and love, such as LibreOffice, Word, Excel, PowerPoint, Google Docs, Pages, and OnlyOffice. No need to learn new software or coding.</p>
</div>
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;"><img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/></span> Enterprise-Grade Features</h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">Enrich your documents with dynamic charts, tables, barcodes, images, colors, SVGs, hyperlinks, HTML from WYSIWYG editors, conditional rendering, and more.</p>
</div>
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;">
<img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/>
</span> Multi-Language Support</h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">Generate international reports with full support for multiple languages, numbers, dates, times, and currency formats.</p>
</div>
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;"><img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/></span> E-Signature Support</h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">Enhance your documents with electronic signatures for secure and legally binding agreements.</p>
</div>
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;"><img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/></span> Merge PDFs </h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">Combine multiple documents into a single PDF document for streamlined document management.</p>
</div>
<div class="feature-card" style="border:1px solid #ebebeb;background-color: #ffffff; padding: 35px; border-radius: 16px; transition: transform 0.2s ease, box-shadow 0.2s ease;">
<h4 style="color: #001E2B; font-size: 1.15em; margin-bottom: 12px; display: flex; align-items: center; font-weight: 500;"><span class="icon" style="font-size: 1.4em; margin-right: 12px; opacity: 0.8;"><img src="assets/svg/green-dot-empty.svg" alt="green-dot-empty"/></span> HTML to PDF Conversion </h4>
<p style="color: #5a5a5a; line-height: 1.6; font-size: 0.95em;">If you're already using Gothenberg or Puppeteer, migrate to Carbone in seconds, and enjoy the powerful Carbone conversion, the fastest in the industry.</p>
</div>
</div>
</div>
<!-- Screenshots Section -->
<div class="section" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;">
<div class="text-item" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative;">
<h2 class="text-bottom" style="color: #001E2B; font-size: 2.2em; margin-bottom: 30px; border-bottom: 1px solid #001E2B; padding-bottom: 15px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1;">Screenshots</h2>
<!-- <img src="./assets/logo/icon-screenshots.png" style="position: absolute;height: 100%;top: 0;right: -5px;"/>-->
</div>
<div class="title-item" style="display: flex; align-items: center;flex-direction: column;padding-bottom: 10px;">
<div style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Odoo Module Configuration</h3>
</div>
<p> After installing the module, youll need to add your Carbone API key (found in your <a style="color : #5e17eb" href="https://account.carbone.io/">Carbone account</a>). No subscription yet? No problem—use the free test API key to try it out first!</p>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/add_api_keys.png"/>
</div>
<div class="title-item" style="display: flex; align-items: left;flex-direction: column;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Creating Carbone Templates</h3>
</div>
<ul style=" list-style-type: none">
<li><b>Step 1:</b> Open <a style="color : #5e17eb" href="https://studio.carbone.io/">Carbone Studio</a> (the web interface for managing templates).</li>
<ul>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/open_carbone_studio.png"/>
</div>
<ul style=" list-style-type: none">
<li><b>Step 2:</b> On the home page, click "Start from scratch" to begin designing your template.</li>
<ul>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/landing_page_carbone.png"/>
</div>
<ul style=" list-style-type: none">
<li><b>Step 3:</b> Create your template using a text editor, and upload on Carbone Studio. The editor has three key sections to help you design your template:</li>
<ul style=" list-style-type: none">
<li>📄 Template Panel (on the top right panel): Where you upload and version your Template (e.g., invoices, contracts).</li>
<li>📊 Data Model Editor (left panel): Here, you define the JSON data that fills your template (e.g., {d.firstName}).</li>
<li>🔍 Document Preview (right panel): See a real-time PDF preview of your final document as you edit.</li>
</ul>
<ul><br>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/create_new_template_carbone.png"/>
</div>
<b>Step 4:</b> Once your design is ready, save your changes, and get a Template ID.
<ul style=" list-style-type: none">
<li>1. Click "New document" to upload your template.</li>
<li>2. Disable "Auto-reload" (to finalize changes).</li>
<li>3. Click "Save": this generates a unique Template Version ID (youll need this for Odoo).</li>
</ul>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/copie_template_carbone_id.png"/>
</div>
<div class="title-item" style="display: flex; align-items: center;padding-bottom: 10px;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Setting Up Document Generation in Odoo</h3>
</div>
<ul style=" list-style-type: none">
<li>In Odoo, go to Document Generation (main menu).</li>
<li>Click "New" to create a document workflow.</li>
</ul>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/open_carbone_menu.png"/>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/new_button.png"/>
</div>
<div class="title-item" style="display: flex; align-items: center;padding-bottom: 10px;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Copy Your Template Version ID from Carbone into Odoo</h3>
</div>
<ul style=" list-style-type: none">
<li>1. Paste your Template Version ID from Carbone Studio (1).</li>
<li>2. Select the Odoo data model (e.g., Invoices, Contacts).</li>
<li>3. Customize translation and language settings (if needed).</li>
<li>4. Click "Add to Print Menu" (2), now youre ready to generate documents!</li>
</ul>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/copie_carbone_template_id_add_menu.png"/>
</div>
<div class="title-item" style="display: flex; align-items: center;padding-bottom: 10px;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Real-time Configuration of your Document</h3>
</div>
With Carbones Odoo integration, you can:
<ul style="margin-left: 18px;">
<li>Download your template and tweak it anytime using in your favorite text editor.</li>
<li>See changes instantly with a live preview of the final document.</li>
</ul>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/gifs/live-reload-change-record.gif"/>
</div>
<div class="title-item" style="display: flex; align-items: center;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Document Generation</h3>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/gifs/generate-report-from-report.gif"/>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/gifs/generate-report-from-po.gif"/>
</div>
<div class="title-item" style="display: flex; align-items: center;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Track and Version Your Documents</h3>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/copie_unique_template_id.png"/>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/unique_template_id_on_odoo.png"/>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/gifs/different-report-with-one-template-id.gif"/>
</div>
<div class="title-item" style="display: flex; align-items: center;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Choose Your Own Data Models for Reports</h3>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/select_one_record.png"/>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/pop-up-export.png"/>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img src="assets/screenshots/pop-up-export-2.png"/>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/find-your-export.png"/>
</div>
<div class="title-item" style="display: flex; align-items: center;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0; ">Add and Manage Translations with Ease</h3>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/add_translate.png"/>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/add_source_and_translate.png"/>
</div>
<div class="title-item" style="display: flex; align-items: center;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin:0;">Translation for Multi-Language Reports</h3>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/gifs/report-translated.gif"/>
</div>
<div class="title-item" style="display: flex; align-items: center;">
<div class="green-horizontal" style="width: 70px;height: 1px; background-color: #5e17eb; position: relative; flex-shrink: 0;right: 90px;"></div>
<h3 style="color: #001E2B; font-size: 1.4em; font-weight: 500; margin: 0;">Manage Access Rights Through Group-Based Permissions</h3>
</div>
<div class="screenshot-placeholder" style="background-color: #ffffff; border-radius: 0; padding: 0; text-align: center; margin: 30px 0; color: #8a8a8a; font-size: 1em; font-weight: 400; letter-spacing: 0.02em; overflow: hidden; display: flex; flex-direction: column;">
<img style="width: 100%; height: auto; object-fit: contain;display: block;" src="assets/screenshots/carbone_groups.png"/>
</div>
</div>
<!-- Avantages -->
<div class="section" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;">
<div class="text-item" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative;">
<h2 class="text-bottom" style="color: #001E2B; font-size: 2.2em; margin-bottom: 30px; border-bottom: 1px solid #001E2B; padding-bottom: 15px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1;">Why Youll Love Carbone</h2>
<!-- <img src="./assets/logo/icon-why-carbone2.png" style="position: absolute;height: 100%;top: 0;right: -5px;"/>-->
</div>
<ul class="benefits-list" style="list-style: '— '; padding: 0;" >
<li style="padding: 20px 0; border-bottom: 1px solid #e8e6df; display: flex; align-items: start;">
<div>
<strong>Premium Support</strong><br>
Get priority assistance through our official support ticketing system, backed by the Carbone engineering team.<br>
Were committed to providing the best premium support experience—youll be heard, championed, and empowered to succeed.
</div>
</li>
<li style="padding: 20px 0; border-bottom: 1px solid #e8e6df; display: flex; align-items: start;">
<div>
<strong>Future-proof</strong><br>
Every template you create is guaranteed to work with all future versions of the Carbone Engine. <br>
Youll never have to update or recreate your templates due to software changes.<br>
New features are always optional and backward-compatible, so you can adopt them on your terms.<br>
With Carbone, you can focus on your business, not maintenance.
</div>
</li>
<li style="padding: 20px 0; border-bottom: 1px solid #e8e6df; display: flex; align-items: start;">
<div>
<strong>Built for Speed and Scalability</strong><br>
Carbone delivers high-performance document generation, optimized at every level for speed, and efficiency.<br>
Whether youre generating a few documents or thousands, Carbone scales to meet your demands without compromising quality or performance.
Its powerful rendering engine is designed to handle high-throughput processing, ensuring rapid processing and reliability, even with complex templates or high-volume batches.<br>
</div>
</li>
<li style="padding: 20px 0; border-bottom: 1px solid #e8e6df; display: flex; align-items: start;">
<div>
<strong>Empowering you with Your Own Tools</strong><br>
Not only can you create templates using your preferred text editor (LibreOffice, Word, Google Doc, and more),<br>
but you can also sign your generated documents using leading e-signature providers like:<br>
Docusign, Yousign, Documenso, DocuSeal, SignWell and more.
</div>
</li>
<li style="padding: 20px 0; border-bottom: 1px solid #e8e6df; display: flex; align-items: start;">
<div>
<strong>Security & Privacy</strong><br>
At Carbone, we carefully design products with the highest level of security to protect your privacy and give you control over your information.<br>
Generated documents are processed in real time and returned directly to your Odoo application, and never stored on Carbone Servers.<br>
Odoo data samples are not saved or logged on our servers. We prioritize your privacy and do not store any sensitive information.<br>
Template files are stored securely on our servers, but they do not contain sensitive information unless explicitly added by you.
</div>
</li>
<li style="padding: 20px 0; border-bottom: 1px solid #e8e6df; display: flex; align-items: start;">
<div>
<strong>Flexible Deployment: Cloud, Self-Hosted, or Private Cloud</strong><br>
By default, the Carbone integration for Odoo uses the Carbone Cloud API, hosted and managed by us for seamless performance.<br>
For organizations with <b>strict privacy or security requirements</b>, you can easily deploy Carbone On-Premise on your own infrastructure (GCP, Azure, AWS, or others).
The transition from Cloud to On-Premise is instantaneous: simply update the API endpoint, and youre up and running in minutes.
</div>
</li>
<li style="padding: 20px 0; border-bottom: 1px solid #e8e6df; display: flex; align-items: start;">
<div>
<strong>Open Source</strong><br>
The Carbone plugin for Odoo is open-source under the LGPL-3 license.<br>
The Carbone Document Engine is open-core and available on <a href="https://github.com/carboneio/carbone" target="_blank">GitHub</a>, licensed under the <a href="https://github.com/carboneio/carbone/blob/master/LICENSE.md" target="_blank">Carbone Community License</a>.
</div>
</li>
<li style="padding: 20px 0; border-bottom: 1px solid #e8e6df; display: flex; align-items: start;">
<div>
<strong>Trusted by Thousands of Happy Users</strong><br>
Carbone is highly rated on major review platforms:<br> <b>|</b>
G2: 4.8/5 (Top-rated document automation solution)<br> <b>|</b>
Capterra: 4.8/5 (Loved for ease of use and reliability)<br> <b>|</b>
Trustpilot: 4.7/5 (Praise for the best customer support in the industry)
</div>
</li>
</ul>
</div>
<!-- Installation -->
<div class="section" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;">
<div class="text-item" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative;">
<h2 class="text-bottom" style="color: #001E2B; font-size: 2.2em; margin-bottom: 30px; border-bottom: 1px solid #001E2B; padding-bottom: 15px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1;">Installation & Configuration</h2>
<!-- <img src="./assets/logo/icon-installation.png" style="position: absolute;height: 100%;top: 0;right: -5px;"/>-->
</div>
<h3>1. Installation</h3>
<p>Install the module from the Odoo Store or directly from your Odoo interface:</p>
<ul style="margin-left: 40px; margin-top: 10px;">
<li>Applications → Search for "Carbone Document Generator"</li>
<li>Click on "Install"</li>
</ul>
<h3>2. Configuration</h3>
<p>Set up your Carbone.io API key:</p>
<ul style="margin-left: 40px; margin-top: 10px;">
<li>Settings → Carbone.io Integration → API Keys</li>
<li>Enter your API key (Get yours at your <a style="color : #5e17eb" href="https://account.carbone.io">Carbone Account</a>)</li>
</ul>
<h3>3. Usage</h3>
<p>To automate documents in Odoo:</p>
<ul style="margin-left: 40px; margin-top: 10px;">
<li>Upload your templates to your Carbone account</li>
<li>Create a new "report" in the dedicated menu</li>
<li>Link them to Odoo models (invoices, quotes, etc.)</li>
<li>Generate your documents in one click!</li>
</ul>
</div>
<!-- Spécifications Techniques -->
<div class="section" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;">
<div class="text-item" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative;">
<h2 class="text-bottom" style="color: #001E2B; font-size: 2.2em; margin-bottom: 30px; border-bottom: 1px solid #001E2B; padding-bottom: 15px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1;">Technical Specifications</h2>
<!-- <img src="./assets/logo/icon-technical-specs.png" style="position: absolute;height: 100%;top: 0;right: -5px;"/>-->
</div>
<div class="tech-specs" style="background-color: #ffffff; padding: 30px; border-radius: 20px; margin-top: 30px; border: 1px solid #e8e6df;">
<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; font-weight: 500; color: #001E2B; width: 240px;">Version Odoo</td>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; color: #5a5a5a;">18.0</td>
</tr>
<tr>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; font-weight: 500; color: #001E2B; width: 240px;">Dépendances</td>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; color: #5a5a5a;">base, web, base_setup, export_json</td>
</tr>
<tr>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; font-weight: 500; color: #001E2B; width: 240px;">Catégorie</td>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; color: #5a5a5a;">Productivity / Reporting / Automation / Nocode / Lowcode</td>
</tr>
<tr>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; font-weight: 500; color: #001E2B; width: 240px;">Licence</td>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; color: #5a5a5a;">LGPL-3</td>
</tr>
<tr>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; font-weight: 500; color: #001E2B; width: 240px;">API Carbone</td>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; color: #5a5a5a;">Compatible v3, v4 and v5</td>
</tr>
<tr>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; font-weight: 500; color: #001E2B; width: 240px;">Supported input formats</td>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; color: #5a5a5a;">PDF, DOCX, XLSX, PPTX, ODG, IDML, ODT, ODS, ODP, XML, HTML, and Markdown.</td>
</tr>
<tr>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; font-weight: 500; color: #001E2B; width: 240px;">Supported output formats</td>
<td style="padding: 15px 0; border-bottom: 1px solid #e8e6df;font-size: 0.95em; color: #5a5a5a;">PDF, DOCX, ODT, BIB, DOC, DOC6, DOC95, DOCBOOK, DOCX7, FODT, HTML, LATEX, MEDIAWIKI, OOXML, OTT, PDB, PSW, RTF, SDW, SDW4, SDW3, STW, SXW, TEXT, TXT, UOT, VOR, VOR4, VOR3, XHTML, JPG, JPEG, PNG, EPUB, XLSX, ODS, CSV, DBF, DIF, FODS, OTS, PXL, SDC, SDC4, SDC3, SLK, STC, SXC, UOS, XLS, XLS5, XLS95, XLT, XLT5, XLT95, PPTX, ODP, BMP, EMF, EPS, FODP, GIF, MET, ODG, PBM, PCT, PGM, PPM, PWP, RAS, SDA, SDD, SDD3, SDD4, SXD, STI, SVG, SVM, SWF, SXI, TIFF, UOP, VOR5, OTP, POTM, POT, PPS, PPT, ETEXT, HTML10, TEXT10, ODD, OTG, STD, SXD3, SXD5, SXW, XPM, and IDML</td>
</tr>
</table>
</div>
</div>
<!-- Documentation -->
<div class="section" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;">
<div class="text-item" style="margin-bottom: 40px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative;">
<h2 class="text-bottom" style="color: #001E2B; font-size: 2.2em; margin-bottom: 30px; border-bottom: 1px solid #001E2B; padding-bottom: 15px; font-weight: 700; letter-spacing: -0.01em; position: relative; z-index: 1;">Documentation & Ressource</h2>
<img src="./assets/logo/icon-documentation.png" style="position: absolute;height: 100%;top: 0;right: -5px;"/>
</div>
<ul class="doc-ressource-list" style=" list-style:'— '; padding: 0;margin-left: 40px; margin-right: 20px; line-height: 2; color: #5e17eb;
font-weight: 400; margin-top: 2px;">
<li><a style="color : #5e17eb" href="https://carbone.io/examples/">Templates Examples</a></li>
<li><a style="color : #5e17eb" href="https://carbone.io/documentation/design/overview/getting-started.html">Getting started</a></li>
<li><a style="color : #5e17eb" href="https://carbone.io/documentation/design/overview/philosophy.html">Philosophy</a></li>
</ul>
</div>
<!-- CTA -->
<div class="cta-section" style="background-color: #2C003B; color: #f5f3ed; padding: 70px 60px; border-radius: 30px; text-align: center; margin-top: 80px;">
<h2 style="color: white; border: none; font-size: 2.2em; margin-bottom: 15px;">
Ready to Upgrade Your Odoo Reports?
</h2>
<p style="font-size: 1.2em; margin-bottom: 10px;">
Download the module for free and start generating professional documents in minutes!
</p>
<a href="#" class="cta-button" style="display: inline-block; background: transparent; color: #f5f3ed; border: 2px solid #f5f3ed; padding: 16px 45px; border-radius: 2px; text-decoration: none; font-weight: 400; font-size: 1em; margin-top: 25px; transition: all 0.3s ease; letter-spacing: 0.05em; text-transform: uppercase;">Download</a>
</div>
<!-- Footer -->
<div class="footer" style="text-align: center; padding: 40px 20px; color: #666;">
<p style="margin-top: 10px;">Questions? Contact us at <a style="color:#5e17eb" href="mailto:contact+odoo@carbone.io">Carbone</a></p>.
</div>
</div>
</body>
</html>