@liascript/exporter
Version:
A generic exporter for LiaScript
1,291 lines (1,214 loc) • 60.8 kB
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LiaScript Exporter</title>
<link rel="stylesheet" href="/styles.css" />
<script src="/i18n.js"></script>
</head>
<body>
<nav class="navbar">
<div class="navbar-container">
<a href="/" class="navbar-brand">
<img src="./assets/icon.svg" alt="LiaScript" />
</a>
<ul class="navbar-menu">
<li>
<a href="/" class="navbar-link active" data-i18n="nav.home">Home</a>
</li>
<li>
<a href="/status.html" class="navbar-link" data-i18n="nav.status"
>Status</a
>
</li>
<li class="language-selector-container">
<select id="language-selector" class="language-selector">
<option value="en">EN</option>
<option value="de">DE</option>
</select>
</li>
</ul>
</div>
</nav>
<div class="container">
<header>
<h1 data-i18n="header.title">LiaScript Exporter</h1>
<p class="subtitle" data-i18n="header.subtitle">
Create exports for various LMS and formats
</p>
</header>
<main>
<form id="exportForm" enctype="multipart/form-data">
<!-- Section 1: Project Source -->
<section class="card">
<h2 data-i18n="sections.projectSource">1. Project Source</h2>
<!-- Upload Tab -->
<div class="source-tabs">
<button
type="button"
class="tab-button active"
data-tab="upload"
data-i18n="tabs.fileUpload"
>
File Upload
</button>
<button
type="button"
class="tab-button"
data-tab="git"
data-i18n="tabs.gitRepository"
>
Git Repository
</button>
</div>
<!-- Upload Panel -->
<div class="tab-panel active" id="upload-panel">
<div class="upload-area" id="uploadArea">
<svg
width="48"
height="48"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
<p data-i18n="upload.dropzone">
Drop files here or click to select
</p>
<p class="hint" data-i18n="upload.hint">
ZIP files or multiple files (max. 100MB)
</p>
</div>
<div id="fileList" class="file-list"></div>
</div>
<!-- Git Panel -->
<div class="tab-panel" id="git-panel">
<div class="form-group">
<label for="gitUrl" data-i18n="git.repoUrlRequired"
>Repository URL *</label
>
<input
type="text"
id="gitUrl"
name="gitUrl"
placeholder="https://github.com/user/repo.git"
/>
</div>
<div class="form-row">
<div class="form-group">
<label for="gitBranch" data-i18n="git.branch"
>Branch / Tag</label
>
<input
type="text"
id="gitBranch"
name="gitBranch"
data-i18n-placeholder="git.branchPlaceholder"
placeholder="main"
/>
</div>
<div class="form-group">
<label for="gitSubdir" data-i18n="git.subdirectory"
>Subdirectory</label
>
<input
type="text"
id="gitSubdir"
name="gitSubdir"
data-i18n-placeholder="git.subdirPlaceholder"
placeholder="docs/"
/>
</div>
</div>
</div>
</section>
<!-- Section 2: Export Target -->
<section class="card">
<h2 data-i18n="sections.exportTarget">2. Export Target</h2>
<!-- Export Target Tabs -->
<div class="export-tabs">
<button
type="button"
class="export-tab-button active"
data-export-tab="presets"
data-i18n="exportTabs.presets"
>
Known Configurations
</button>
<button
type="button"
class="export-tab-button"
data-export-tab="formats"
data-i18n="exportTabs.formats"
>
Formats
</button>
</div>
<!-- Presets Panel -->
<div class="export-tab-panel active" id="presets-panel">
<div class="preset-grid" id="presets-grid">
<!-- Presets will be loaded dynamically -->
</div>
<hr
style="
margin: 2rem 0 1rem 0;
border: none;
border-top: 1px solid #e0e0e0;
"
/>
<div
id="preset-description"
style="
padding: 1rem;
background-color: #f8f9fa;
border-radius: 8px;
display: none;
"
>
<p style="margin: 0; color: #555; line-height: 1.6"></p>
</div>
</div>
<!-- Formats Panel -->
<div class="export-tab-panel" id="formats-panel">
<div class="preset-grid">
<label class="preset-tile">
<input
type="radio"
name="format"
value="scorm1.2"
data-i18n-description="formats.scorm12.description"
data-description="E-learning standard for learning management systems. Widely used, but older. Suitable for legacy LMS platforms. <a href='https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/scorm.png"
alt="SCORM"
/>
<h3 data-i18n="formats.scorm12.title">SCORM 1.2</h3>
<p data-i18n="formats.scorm12.subtitle">Legacy Standard</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="scorm2004"
data-i18n-description="formats.scorm2004.description"
data-description="Modern version of the SCORM standard with advanced features for learning paths and assessments. Recommended for current LMS systems. <a href='https://en.wikipedia.org/wiki/Sharable_Content_Object_Reference_Model' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/scorm.png"
alt="SCORM"
/>
<h3 data-i18n="formats.scorm2004.title">SCORM 2004</h3>
<p data-i18n="formats.scorm2004.subtitle">
Modern Standard
</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="ims"
data-i18n-description="formats.ims.description"
data-description="IMS Content Packaging for exchanging learning content between different platforms. Standard for cross-platform compatibility. <a href='https://en.wikipedia.org/wiki/IMS_Content_Packaging' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/cmi.svg"
alt="IMS"
/>
<h3 data-i18n="formats.ims.title">IMS</h3>
<p data-i18n="formats.ims.subtitle">Content Package</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="web"
data-i18n-description="formats.web.description"
data-description="Standalone HTML website for hosting on any web server. Works offline and online. Perfect for self-hosting."
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/web.png"
alt="Web"
/>
<h3 data-i18n="formats.web.title">Web</h3>
<p data-i18n="formats.web.subtitle">Standalone</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="pdf"
data-i18n-description="formats.pdf.description"
data-description="Portable Document Format for printing and archiving. Ideal for static content and offline reading. <a href='https://en.wikipedia.org/wiki/PDF' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/pdf.svg"
alt="PDF"
/>
<h3 data-i18n="formats.pdf.title">PDF</h3>
<p data-i18n="formats.pdf.subtitle">Document</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="android"
data-i18n-description="formats.android.description"
data-description="Android app package (APK) for installation on Android devices. Enables offline access and native app experience."
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/android.svg"
alt="Android"
/>
<h3 data-i18n="formats.android.title">Android</h3>
<p data-i18n="formats.android.subtitle">App Package</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="json"
data-i18n-description="formats.json.description"
data-description="Structured data format for programmatic processing and API integration. Perfect for developers and automated workflows. <a href='https://en.wikipedia.org/wiki/JSON' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/json.svg"
alt="JSON"
/>
<h3 data-i18n="formats.json.title">JSON</h3>
<p data-i18n="formats.json.subtitle">Data Export</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="epub"
data-i18n-description="formats.epub.description"
data-description="Open e-book format for e-readers and mobile devices. Supports reflowable layouts and is compatible with most e-readers. <a href='https://en.wikipedia.org/wiki/EPUB' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/epub.svg"
alt="EPUB"
/>
<h3 data-i18n="formats.epub.title">EPUB</h3>
<p data-i18n="formats.epub.subtitle">E-Book</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="docx"
data-i18n-description="formats.docx.description"
data-description="Microsoft Word document format for professional documents. Compatible with Word 2007+, LibreOffice Writer, and Google Docs. <a href='https://en.wikipedia.org/wiki/Office_Open_XML' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/docx.svg"
alt="DOCX"
/>
<h3 data-i18n="formats.docx.title">DOCX</h3>
<p data-i18n="formats.docx.subtitle">Word Document</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="rdf"
data-i18n-description="formats.rdf.description"
data-description="Resource Description Framework for structured metadata and Linked Data. For semantic web applications and metadata export. <a href='https://en.wikipedia.org/wiki/Resource_Description_Framework' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/rdf.svg"
alt="RDF"
/>
<h3 data-i18n="formats.rdf.title">RDF</h3>
<p data-i18n="formats.rdf.subtitle">Metadata</p>
</div>
</label>
<label class="preset-tile">
<input
type="radio"
name="format"
value="xapi"
data-i18n-description="formats.xapi.description"
data-description="Experience API (xAPI) for Learning Analytics and detailed tracking of learning activities. Enables advanced analytics through a Learning Record Store (LRS). <a href='https://en.wikipedia.org/wiki/Experience_API' target='_blank'>Learn more</a>"
/>
<div class="preset-content">
<img
style="height: 48px"
src="../assets/xapi.png"
alt="xAPI"
/>
<h3 data-i18n="formats.xapi.title">xAPI</h3>
<p data-i18n="formats.xapi.subtitle">Learning Analytics</p>
</div>
</label>
</div>
<hr
style="
margin: 2rem 0 1rem 0;
border: none;
border-top: 1px solid #e0e0e0;
"
/>
<div
id="format-description"
style="
padding: 1rem;
background-color: #f8f9fa;
border-radius: 8px;
display: none;
"
>
<p style="margin: 0; color: #555; line-height: 1.6"></p>
</div>
</div>
</section>
<!-- Section 3: Advanced Settings -->
<section class="card">
<h2>
<button
type="button"
id="toggleAdvanced"
class="collapsible-toggle"
>
<span class="toggle-icon">▶</span>
<span data-i18n="sections.advancedSettings"
>3. Advanced Settings (optional)</span
>
</button>
</h2>
<div id="advancedSettings" class="collapsible-content hidden">
<!-- SCORM Settings -->
<div
class="settings-group"
data-formats="scorm1.2,scorm2004,moodle,ilias,opal,generic,openolat,openedx"
>
<h3 class="settings-heading" data-i18n="settings.scorm.title">
SCORM Settings
</h3>
<div class="form-group">
<label
for="masteryScore"
data-i18n="settings.scorm.masteryScore"
>Mastery Score</label
>
<input
type="text"
inputmode="numeric"
id="masteryScore"
name="option_masteryScore"
placeholder="70"
/>
<span class="hint" data-i18n="settings.scorm.masteryScoreHint"
>Minimum score to pass (0-100)</span
>
</div>
<div class="form-group">
<label
for="scormOrganization"
data-i18n="settings.scorm.organization"
>Organization</label
>
<input
type="text"
id="scormOrganization"
name="option_scormOrganization"
data-i18n-placeholder="settings.scorm.organizationHint"
placeholder="My Organization"
/>
<span class="hint" data-i18n="settings.scorm.organizationHint"
>Organization title in SCORM package</span
>
</div>
<div class="form-group">
<label
for="typicalDuration"
data-i18n="settings.scorm.typicalDuration"
>Typical Duration</label
>
<input
type="text"
id="typicalDuration"
name="option_typicalDuration"
placeholder="PT0H5M0S"
value="PT0H5M0S"
/>
<span
class="hint"
data-i18n="settings.scorm.typicalDurationHint"
>Format: PT0H5M0S (5 minutes)</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="scormIframe"
name="option_scormIframe"
/>
<span data-i18n="settings.scorm.useIframe">Use iFrame</span>
</label>
<span class="hint" data-i18n="settings.scorm.useIframeHint"
>For better compatibility in some LMS</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="scormEmbed"
name="option_scormEmbed"
/>
<span data-i18n="settings.scorm.embedMarkdown"
>Embed Markdown</span
>
</label>
<span
class="hint"
data-i18n="settings.scorm.embedMarkdownHint"
>Recommended for Moodle 4</span
>
</div>
</div>
<!-- xAPI Settings -->
<div class="settings-group" data-formats="xapi">
<h3 class="settings-heading" data-i18n="settings.xapi.title">
xAPI Settings
</h3>
<div class="form-group">
<label
for="xapiEndpoint"
data-i18n="settings.xapi.lrsEndpoint"
>LRS Endpoint</label
>
<input
type="text"
id="xapiEndpoint"
name="option_xapi-endpoint"
placeholder="https://lrs.example.com/xAPI/statements"
/>
<span class="hint" data-i18n="settings.xapi.lrsEndpointHint"
>URL of the Learning Record Store (LRS) endpoint</span
>
</div>
<div class="form-group">
<label for="xapiAuth" data-i18n="settings.xapi.authentication"
>Authentication</label
>
<input
type="text"
id="xapiAuth"
name="option_xapi-auth"
placeholder="Basic dXNlcm5hbWU6cGFzc3dvcmQ="
/>
<span
class="hint"
data-i18n="settings.xapi.authenticationHint"
>Basic Auth String for LRS (e.g. "Basic
base64encodedcredentials")</span
>
</div>
<div class="form-group">
<label for="xapiActor" data-i18n="settings.xapi.actor"
>Actor (JSON)</label
>
<textarea
id="xapiActor"
name="option_xapi-actor"
rows="4"
data-i18n-placeholder="settings.xapi.actorPlaceholder"
placeholder='{"objectType":"Agent","name":"Anonymous","mbox":"mailto:anonymous@example.com"}'
></textarea>
<span class="hint" data-i18n="settings.xapi.actorHint"
>xAPI Actor in JSON format (default: anonymous)</span
>
</div>
<div class="form-group">
<label for="xapiCourseId" data-i18n="settings.xapi.courseId"
>Course ID</label
>
<input
type="text"
id="xapiCourseId"
name="option_xapi-course-id"
placeholder="https://example.com/course/123"
/>
<span class="hint" data-i18n="settings.xapi.courseIdHint"
>Unique identifier for the course (default: course
URL)</span
>
</div>
<div class="form-group">
<label
for="xapiCourseTitle"
data-i18n="settings.xapi.courseTitle"
>Course Title</label
>
<input
type="text"
id="xapiCourseTitle"
name="option_xapi-course-title"
data-i18n-placeholder="settings.xapi.courseTitleHint"
placeholder="My LiaScript Course"
/>
<span class="hint" data-i18n="settings.xapi.courseTitleHint"
>Displayed course title (default: from document)</span
>
</div>
<div class="form-group">
<label
for="xapiMasteryScore"
data-i18n="settings.xapi.masteryScore"
>Mastery Score</label
>
<input
type="text"
inputmode="decimal"
id="xapiMasteryScore"
name="option_xapi-mastery-threshold"
placeholder="0.8"
/>
<span class="hint" data-i18n="settings.xapi.masteryScoreHint"
>Required score to pass (0.0-1.0, default: 0.8)</span
>
</div>
<div class="form-group">
<label
for="xapiProgressThreshold"
data-i18n="settings.xapi.progressThreshold"
>Progress Threshold</label
>
<input
type="text"
inputmode="decimal"
id="xapiProgressThreshold"
name="option_xapi-progress-threshold"
placeholder="0.9"
/>
<span
class="hint"
data-i18n="settings.xapi.progressThresholdHint"
>Required slide progress for completion (0.0-1.0, default:
0.9)</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="xapiDebug"
name="option_xapi-debug"
/>
<span data-i18n="settings.xapi.debugMode">Debug Mode</span>
</label>
<span class="hint" data-i18n="settings.xapi.debugModeHint"
>Output xAPI statements to console</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="xapiZip"
name="option_xapi-zip"
checked
/>
<span data-i18n="settings.xapi.zipPackage"
>Package as ZIP</span
>
</label>
<span class="hint" data-i18n="settings.xapi.zipPackageHint"
>Output as ZIP file</span
>
</div>
</div>
<!-- IMS Settings -->
<div class="settings-group" data-formats="ims">
<h3 class="settings-heading" data-i18n="settings.ims.title">
IMS Settings
</h3>
<div class="form-group">
<label>
<input
type="checkbox"
id="imsIndexeddb"
name="option_imsIndexeddb"
/>
<span data-i18n="settings.ims.useIndexedDB"
>Use IndexedDB</span
>
</label>
<span class="hint" data-i18n="settings.ims.useIndexedDBHint"
>Persistent storage in browser</span
>
</div>
</div>
<!-- Web Settings -->
<div class="settings-group" data-formats="web">
<h3 class="settings-heading" data-i18n="settings.web.title">
Web Settings
</h3>
<div class="form-group">
<label>
<input
type="checkbox"
id="webIframe"
name="option_webIframe"
/>
<span data-i18n="settings.web.iframeVersion"
>iFrame Version</span
>
</label>
<span class="hint" data-i18n="settings.web.iframeVersionHint"
>Hides the course URL</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="webIndexeddb"
name="option_webIndexeddb"
/>
<span data-i18n="settings.web.useIndexedDB"
>Use IndexedDB</span
>
</label>
<span class="hint" data-i18n="settings.web.useIndexedDBHint"
>Store data in browser</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="webZip"
name="option_webZip"
checked
/>
<span data-i18n="settings.web.zipPackage"
>Package as ZIP</span
>
</label>
<span class="hint" data-i18n="settings.web.zipPackageHint"
>Creates a ZIP file</span
>
</div>
</div>
<!-- PDF Settings -->
<div class="settings-group" data-formats="pdf">
<h3 class="settings-heading" data-i18n="settings.pdf.title">
PDF Settings
</h3>
<!-- Layout & Format -->
<div class="form-group">
<label for="pdfFormat" data-i18n="settings.pdf.pageFormat"
>Page Format</label
>
<select id="pdfFormat" name="option_pdf-format">
<option value="A4" selected>A4</option>
<option value="A3">A3</option>
<option value="A5">A5</option>
<option value="Letter">Letter</option>
<option value="Legal">Legal</option>
<option value="Tabloid">Tabloid</option>
<option value="Ledger">Ledger</option>
</select>
<span class="hint" data-i18n="settings.pdf.pageFormatHint"
>Standard paper size</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="pdfLandscape"
name="option_pdf-landscape"
/>
<span data-i18n="settings.pdf.landscape">Landscape</span>
</label>
<span class="hint" data-i18n="settings.pdf.landscapeHint"
>Print page in landscape orientation</span
>
</div>
<!-- Scale & Background -->
<div class="form-group">
<label for="pdfScale" data-i18n="settings.pdf.scale"
>Scale</label
>
<input
type="text"
inputmode="decimal"
id="pdfScale"
name="option_pdf-scale"
placeholder="1.0"
/>
<span class="hint" data-i18n="settings.pdf.scaleHint"
>Page scale (0.1 - 2.0)</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="pdfPrintBackground"
name="option_pdf-printBackground"
checked
/>
<span data-i18n="settings.pdf.printBackground"
>Print Background Graphics</span
>
</label>
<span
class="hint"
data-i18n="settings.pdf.printBackgroundHint"
>Prints background colors and images</span
>
</div>
<!-- Margins -->
<div class="form-group">
<label for="pdfMarginTop" data-i18n="settings.pdf.marginTop"
>Top Margin</label
>
<input
type="text"
id="pdfMarginTop"
name="option_pdf-margin-top"
placeholder="80"
value="80"
/>
<span class="hint" data-i18n="settings.pdf.marginTopHint"
>Top margin in pixels or with unit (e.g. "2cm")</span
>
</div>
<div class="form-group">
<label
for="pdfMarginBottom"
data-i18n="settings.pdf.marginBottom"
>Bottom Margin</label
>
<input
type="text"
id="pdfMarginBottom"
name="option_pdf-margin-bottom"
placeholder="80"
value="80"
/>
<span class="hint" data-i18n="settings.pdf.marginBottomHint"
>Bottom margin in pixels or with unit</span
>
</div>
<div class="form-group">
<label for="pdfMarginLeft" data-i18n="settings.pdf.marginLeft"
>Left Margin</label
>
<input
type="text"
id="pdfMarginLeft"
name="option_pdf-margin-left"
placeholder="30"
value="30"
/>
<span class="hint" data-i18n="settings.pdf.marginLeftHint"
>Left margin in pixels or with unit</span
>
</div>
<div class="form-group">
<label
for="pdfMarginRight"
data-i18n="settings.pdf.marginRight"
>Right Margin</label
>
<input
type="text"
id="pdfMarginRight"
name="option_pdf-margin-right"
placeholder="30"
value="30"
/>
<span class="hint" data-i18n="settings.pdf.marginRightHint"
>Right margin in pixels or with unit</span
>
</div>
<!-- Header & Footer -->
<div class="form-group">
<label>
<input
type="checkbox"
id="pdfDisplayHeaderFooter"
name="option_pdf-displayHeaderFooter"
/>
<span data-i18n="settings.pdf.displayHeaderFooter"
>Display Header & Footer</span
>
</label>
<span
class="hint"
data-i18n="settings.pdf.displayHeaderFooterHint"
>Shows header and footer on each page</span
>
</div>
<div
class="form-group"
id="pdfHeaderGroup"
style="display: none"
>
<label
for="pdfHeaderTemplate"
data-i18n="settings.pdf.headerTemplate"
>Header Template (HTML)</label
>
<textarea
id="pdfHeaderTemplate"
name="option_pdf-headerTemplate"
rows="3"
data-i18n-placeholder="settings.pdf.headerTemplatePlaceholder"
placeholder="<div style='font-size: 10px; text-align: center; width: 100%;'><span class='title'></span></div>"
></textarea>
<span class="hint" data-i18n="settings.pdf.headerTemplateHint"
>HTML template with classes: date, title, url, pageNumber,
totalPages</span
>
</div>
<div
class="form-group"
id="pdfFooterGroup"
style="display: none"
>
<label
for="pdfFooterTemplate"
data-i18n="settings.pdf.footerTemplate"
>Footer Template (HTML)</label
>
<textarea
id="pdfFooterTemplate"
name="option_pdf-footerTemplate"
rows="3"
data-i18n-placeholder="settings.pdf.footerTemplatePlaceholder"
placeholder="<div style='font-size: 10px; text-align: center; width: 100%;'><span class='pageNumber'></span> / <span class='totalPages'></span></div>"
></textarea>
<span class="hint" data-i18n="settings.pdf.footerTemplateHint"
>HTML template for footer</span
>
</div>
<!-- Page Ranges -->
<div class="form-group">
<label for="pdfPageRanges" data-i18n="settings.pdf.pageRanges"
>Page Ranges</label
>
<input
type="text"
id="pdfPageRanges"
name="option_pdf-pageRanges"
data-i18n-placeholder="settings.pdf.pageRangesPlaceholder"
placeholder="e.g. 1-5, 8, 11-13"
/>
<span class="hint" data-i18n="settings.pdf.pageRangesHint"
>Print only specific pages (optional)</span
>
</div>
<!-- LiaScript Specific -->
<div class="form-group">
<label for="pdfTheme" data-i18n="settings.pdf.theme"
>LiaScript Theme</label
>
<select id="pdfTheme" name="option_pdf-theme">
<option value="">Standard</option>
<option
value="default"
data-i18n="settings.pdf.themeDefault"
>
Default
</option>
<option
value="turquoise"
data-i18n="settings.pdf.themeTurquoise"
>
Turquoise
</option>
<option value="blue" data-i18n="settings.pdf.themeBlue">
Blue
</option>
<option value="red" data-i18n="settings.pdf.themeRed">
Red
</option>
<option value="yellow" data-i18n="settings.pdf.themeYellow">
Yellow
</option>
</select>
<span class="hint" data-i18n="settings.pdf.themeHint"
>Color scheme for PDF</span
>
</div>
<div class="form-group">
<label for="pdfTimeout" data-i18n="settings.pdf.timeout"
>Timeout (ms)</label
>
<input
type="text"
inputmode="numeric"
id="pdfTimeout"
name="option_pdf-timeout"
placeholder="15000"
/>
<span class="hint" data-i18n="settings.pdf.timeoutHint"
>Wait time for complete loading (15000 = 15 seconds)</span
>
</div>
<!-- Advanced Options -->
<div class="form-group">
<label>
<input
type="checkbox"
id="pdfPreferCSSPageSize"
name="option_pdf-preferCSSPageSize"
/>
<span data-i18n="settings.pdf.preferCSSPageSize"
>Prefer CSS @page Size</span
>
</label>
<span
class="hint"
data-i18n="settings.pdf.preferCSSPageSizeHint"
>CSS page size takes precedence</span
>
</div>
<div class="form-group">
<label>
<input
type="checkbox"
id="pdfOmitBackground"
name="option_pdf-omitBackground"
/>
<span data-i18n="settings.pdf.omitBackground"
>Transparent Background</span
>
</label>
<span class="hint" data-i18n="settings.pdf.omitBackgroundHint"
>White background is omitted</span
>
</div>
</div>
<!-- Android Settings -->
<div class="settings-group" data-formats="android">
<h3 class="settings-heading" data-i18n="settings.android.title">
Android Settings
</h3>
<div class="form-group">
<label
for="androidAppName"
data-i18n="settings.android.appName"
>App Name</label
>
<input
type="text"
id="androidAppName"
name="option_android-appName"
data-i18n-placeholder="settings.android.appNameHint"
placeholder="My App"
/>
<span class="hint" data-i18n="settings.android.appNameHint"
>Name of the Android app</span
>
</div>
<div class="form-group">
<label for="androidAppId" data-i18n="settings.android.appId"
>App ID *</label
>
<input
type="text"
id="androidAppId"
name="option_android-appId"
data-i18n-placeholder="settings.android.appIdPlaceholder"
placeholder="io.github.liascript"
data-required="true"
/>
<span class="hint" data-i18n="settings.android.appIdHint"
>Unique app identifier (e.g. io.github.liascript)</span
>
</div>
</div>
<!-- EPUB Settings -->
<div class="settings-group" data-formats="epub">
<h3 class="settings-heading" data-i18n="settings.epub.title">
EPUB Settings
</h3>
<div class="form-group">
<label for="epubAuthor" data-i18n="settings.epub.author"
>Author</label
>
<input
type="text"
id="epubAuthor"
name="option_epubAuthor"
data-i18n-placeholder="settings.epub.authorPlaceholder"
placeholder="John Doe"
/>
<span class="hint" data-i18n="settings.epub.authorHint"
>Author of the e-book</span
>
</div>
<div class="form-group">
<label for="epubPublisher" data-i18n="settings.epub.publisher"
>Publisher</label
>
<input
type="text"
id="epubPublisher"
name="option_epubPublisher"
data-i18n-placeholder="settings.epub.publisherHint"
placeholder="My Publisher"
/>
<span class="hint" data-i18n="settings.epub.publisherHint"
>Publisher/Publisher house</span
>
</div>
</div>
<!-- DOCX Settings -->
<div class="settings-group" data-formats="docx">
<h3 class="settings-heading" data-i18n="settings.docx.title">
DOCX Settings
</h3>
<div class="form-group">
<label for="docxTitle" data-i18n="settings.docx.docTitle"
>Document Title</label
>
<input
type="text"
id="docxTitle"
name="option_docx-title"
data-i18n-placeholder="settings.docx.docTitlePlaceholder"
placeholder="My Course"
/>
<span class="hint" data-i18n="settings.docx.docTitleHint"
>Title of the Word document</span
>
</div>
<div class="form-group">
<label for="docxAuthor" data-i18n="settings.docx.author"
>Author</label
>
<input
type="text"
id="docxAuthor"
name="option_docx-author"
data-i18n-placeholder="settings.docx.authorPlaceholder"
placeholder="John Doe"
/>
<span class="hint" data-i18n="settings.docx.authorHint"
>Author of the document</span
>
</div>
<div class="form-group">
<label
for="docxOrientation"
data-i18n="settings.docx.orientation"
>Orientation</label
>
<select id="docxOrientation" name="option_docx-orientation">
<option
value="portrait"
selected
data-i18n="settings.docx.orientationPortrait"
>
Portrait
</option>
<option
value="landscape"
data-i18n="settings.docx.orientationLandscape"
>
Landscape
</option>
</select>
<span class="hint" data-i18n="settings.docx.orientationHint"
>Page orientation</span
>
</div>
<div class="form-group">
<label for="docxFont" data-i18n="settings.docx.font"
>Font</label
>
<input
type="text"
id="docxFont"
name="option_docx-font"
placeholder="Arial"
data-i18n-placeholder="settings.docx.fontPlaceholder"
/>
<span class="hint" data-i18n="settings.docx.fontHint"
>Font name (default: Arial)</span
>
</div>
<div class="form-group">
<label for="docxFontSize" data-i18n="settings.docx.fontSize"
>Font Size</label
>
<input
type="number"
id="docxFontSize"
name="option_docx-font-size"
placeholder="22"
min="10"
max="100"
/>
<span class="hint" data-i18n="settings.docx.fontSizeHint"
>Font size in half-points (22 = 11pt)</span
>
</div>
<div class="form-group">
<label for="docxTheme" data-i18n="settings.docx.theme"
>LiaScript Theme</label
>
<select id="docxTheme" name="option_docx-theme">
<option
value=""
selected
data-i18n="settings.docx.themeDefault"
>
Default
</option>
<option
value="turquoise"
data-i18n="settings.docx.themeTurquoise"
>
Turquoise
</option>
<option value="blue" data-i18n="settings.docx.themeBlue">
Blue
</option>
<option value="red" data-i18n="settings.docx.themeRed">
Red