amitwh/markdown-converter
1
0
Fork 0
mirror of https://github.com/amitwh/markdown-converter.git synced 2026-08-02 18:10:18 +05:30
Code Issues Packages Projects Releases Wiki Activity
Files
7b15b2808e76859b225ecb7c719eb72de7b79087
markdown-converter/src/index.html
T
amitwh 7b15b2808e chore: bump version to 4.0.0
2026-03-04 15:20:25 +05:30

1414 lines
84 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>MarkdownConverter</title>
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles-modern.css">
<link rel="stylesheet" href="styles-concreteinfo.css">
<!-- Load external resources asynchronously -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" media="print" onload="this.media='all'">
<script defer src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
</head>
<body>
<div class="container">
<!-- App Header with ConcreteInfo Logo -->
<div class="app-header" id="app-header">
<div class="app-header-left">
<img src="../assets/logo.png" alt="MarkdownConverter" class="app-logo" id="app-logo">
<span class="app-title">MarkdownConverter</span>
</div>
<div class="app-header-right">
<span class="app-version">v4.0.0</span>
</div>
</div>
<div class="tab-bar" id="tab-bar">
<div class="tab active" data-tab-id="1">
<span class="tab-title">Untitled</span>
<button class="tab-close" title="Close tab">×</button>
</div>
<button class="new-tab-button" id="new-tab-btn" title="New tab">+</button>
</div>
<div class="toolbar">
<button id="btn-bold" title="Bold">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
<path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path>
</svg>
</button>
<button id="btn-italic" title="Italic">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="19" y1="4" x2="10" y2="4"></line>
<line x1="14" y1="20" x2="5" y2="20"></line>
<line x1="15" y1="4" x2="9" y2="20"></line>
</svg>
</button>
<button id="btn-heading" title="Heading">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="4 7 4 4 20 4 20 7"></polyline>
<line x1="9" y1="20" x2="15" y2="20"></line>
<line x1="12" y1="4" x2="12" y2="20"></line>
</svg>
</button>
<button id="btn-link" title="Link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
</button>
<button id="btn-code" title="Code">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
</button>
<button id="btn-list" title="List">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="8" y1="6" x2="21" y2="6"></line>
<line x1="8" y1="12" x2="21" y2="12"></line>
<line x1="8" y1="18" x2="21" y2="18"></line>
<line x1="3" y1="6" x2="3.01" y2="6"></line>
<line x1="3" y1="12" x2="3.01" y2="12"></line>
<line x1="3" y1="18" x2="3.01" y2="18"></line>
</svg>
</button>
<button id="btn-quote" title="Quote">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"></path>
<path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"></path>
</svg>
</button>
<button id="btn-table" title="Insert Table">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<line x1="3" y1="9" x2="21" y2="9"></line>
<line x1="3" y1="15" x2="21" y2="15"></line>
<line x1="9" y1="3" x2="9" y2="21"></line>
<line x1="15" y1="3" x2="15" y2="21"></line>
</svg>
</button>
<button id="btn-strikethrough" title="Strikethrough">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 4H9a3 3 0 0 0-2.83 4"></path>
<path d="M14 12a4 4 0 0 1 0 8H6"></path>
<line x1="4" y1="12" x2="20" y2="12"></line>
</svg>
</button>
<button id="btn-code-block" title="Code Block">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="6" width="20" height="12" rx="2"></rect>
<path d="m10 10-2 2 2 2"></path>
<path d="m14 10 2 2-2 2"></path>
</svg>
</button>
<button id="btn-horizontal-rule" title="Horizontal Rule">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
</svg>
</button>
<div class="toolbar-separator"></div>
<button id="btn-find" title="Find & Replace (Ctrl+F)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
</button>
<button id="btn-line-numbers" title="Toggle Line Numbers">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 6h18"></path>
<path d="M3 12h18"></path>
<path d="M3 18h18"></path>
</svg>
</button>
<div class="toolbar-separator"></div>
<button id="btn-preview-toggle" title="Toggle Preview">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
</div>
<!-- Find & Replace Dialog -->
<div id="find-dialog" class="find-dialog hidden">
<div class="find-controls">
<input type="text" id="find-input" placeholder="Find...">
<input type="text" id="replace-input" placeholder="Replace...">
<button id="btn-find-prev" title="Previous">↑</button>
<button id="btn-find-next" title="Next">↓</button>
<button id="btn-replace" title="Replace">Replace</button>
<button id="btn-replace-all" title="Replace All">All</button>
<button id="btn-find-close" title="Close">×</button>
</div>
<div class="find-info">
<span id="find-count">0 matches</span>
</div>
</div>
<!-- Export Options Dialog -->
<div id="export-dialog" class="export-dialog hidden">
<div class="export-dialog-content">
<div class="export-dialog-header">
<h3 id="export-dialog-title">Export Options</h3>
<button id="export-dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<!-- Simple/Advanced Export Toggle -->
<!-- Export Profiles -->
<div class="export-section export-profiles">
<label>Export Profile:</label>
<div class="profile-controls">
<select id="export-profile-select">
<option value="">Custom Settings</option>
</select>
<button id="save-profile-btn" type="button" title="Save current settings as profile">💾 Save</button>
<button id="delete-profile-btn" type="button" title="Delete selected profile">🗑️ Delete</button>
</div>
<small class="export-help">Save and reuse your favorite export configurations</small>
</div>
<div class="export-section export-mode-toggle">
<label class="checkbox-label">
<input type="checkbox" id="advanced-export-toggle">
<span class="checkmark"></span>
Show Advanced Options
</label>
<small class="export-help">Enable for templates, metadata, bibliography, and advanced PDF settings</small>
</div>
<!-- Advanced Export Options (hidden by default) -->
<div id="advanced-export-options" class="advanced-options hidden">
<div class="export-section">
<label for="export-template">Template:</label>
<select id="export-template">
<option value="default">Default</option>
<option value="custom">Custom (Browse...)</option>
</select>
<input type="file" id="template-file-input" accept=".tex,.html,.docx,.odt" style="display: none;">
<input type="text" id="custom-template-path" placeholder="Template file path..." style="display: none;">
</div>
<div class="export-section">
<label>Metadata:</label>
<div class="metadata-container">
<div class="metadata-field">
<input type="text" placeholder="title" class="metadata-key">
<input type="text" placeholder="Document title" class="metadata-value">
</div>
<div class="metadata-field">
<input type="text" placeholder="author" class="metadata-key">
<input type="text" placeholder="Author name" class="metadata-value">
</div>
<div class="metadata-field">
<input type="text" placeholder="date" class="metadata-key">
<input type="text" placeholder="Date" class="metadata-value">
</div>
<div class="metadata-field">
<input type="text" placeholder="subject" class="metadata-key">
<input type="text" placeholder="Subject" class="metadata-value">
</div>
</div>
<button id="add-metadata-field" type="button">+ Add Field</button>
</div>
<div class="export-section">
<label>Document Options:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="export-toc"> Table of Contents</label>
<label><input type="checkbox" id="export-number-sections"> Number Sections</label>
<label><input type="checkbox" id="export-citeproc"> Process Citations</label>
</div>
<div class="form-row">
<label for="export-toc-depth">TOC Depth:</label>
<input type="number" id="export-toc-depth" min="1" max="6" value="3">
</div>
</div>
<div class="export-section pdf-only">
<label>PDF Options:</label>
<div class="form-row">
<label for="pdf-engine">PDF Engine:</label>
<select id="pdf-engine">
<option value="xelatex">XeLaTeX (Recommended)</option>
<option value="pdflatex">PDFLaTeX</option>
<option value="lualatex">LuaLaTeX</option>
</select>
</div>
<div class="form-row">
<label for="pdf-geometry">Page Margins:</label>
<select id="pdf-geometry">
<option value="margin=1in">1 inch (Default)</option>
<option value="margin=0.75in">0.75 inch</option>
<option value="margin=1.25in">1.25 inch</option>
<option value="margin=2cm">2 cm</option>
<option value="margin=2.5cm">2.5 cm</option>
<option value="custom">Custom...</option>
</select>
<input type="text" id="custom-geometry" placeholder="e.g., margin=1.5in" style="display: none;">
</div>
</div>
<div class="export-section">
<label>Bibliography:</label>
<div class="form-row">
<input type="text" id="bibliography-file" placeholder="Bibliography file (.bib, .yaml, .json)">
<button id="browse-bibliography">Browse</button>
</div>
<div class="form-row">
<input type="text" id="csl-file" placeholder="Citation style file (.csl)">
<button id="browse-csl">Browse</button>
</div>
</div>
</div> <!-- End advanced-export-options -->
<!-- Basic Export Options (always visible) -->
<div class="export-section basic-options">
<label>Page Size & Orientation:</label>
<div class="form-row">
<label for="page-size">Size:</label>
<select id="page-size">
<option value="a4">A4 (210×297mm)</option>
<option value="a3">A3 (297×420mm)</option>
<option value="a5">A5 (148×210mm)</option>
<option value="b4">B4 (250×353mm)</option>
<option value="b5">B5 (176×250mm)</option>
<option value="letter">Letter (8.5×11in)</option>
<option value="legal">Legal (8.5×14in)</option>
<option value="tabloid">Tabloid (11×17in)</option>
<option value="custom">Custom...</option>
</select>
</div>
<div class="form-row">
<label for="page-orientation">Orientation:</label>
<select id="page-orientation">
<option value="portrait">Portrait</option>
<option value="landscape">Landscape</option>
</select>
</div>
<div id="custom-page-size" class="form-row" style="display: none;">
<label>Custom Size:</label>
<input type="text" id="custom-width" placeholder="Width (e.g., 210mm)" style="width: 45%; display: inline-block;">
<span style="display: inline-block; width: 5%; text-align: center;">×</span>
<input type="text" id="custom-height" placeholder="Height (e.g., 297mm)" style="width: 45%; display: inline-block;">
</div>
</div>
<div class="export-section basic-options">
<label>Quick Export Settings:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="basic-toc"> Include Table of Contents</label>
<label><input type="checkbox" id="basic-number-sections"> Number Sections</label>
</div>
</div>
</div>
<div class="export-dialog-footer">
<button id="export-cancel">Cancel</button>
<button id="export-confirm" class="primary">Export</button>
</div>
</div>
</div>
<!-- Command Palette -->
<div id="command-palette" class="command-palette hidden">
<div class="command-palette-content">
<input type="text" id="command-search" placeholder="Type a command..." autofocus>
<div id="command-list" class="command-list"></div>
<div class="command-palette-footer">
<span>↑↓ Navigate</span>
<span>Enter Execute</span>
<span>Esc Close</span>
</div>
</div>
</div>
<!-- Table Generator Dialog -->
<div id="table-generator-dialog" class="export-dialog hidden">
<div class="export-dialog-content" style="max-width: 500px;">
<div class="export-dialog-header">
<h3>📊 Table Generator</h3>
<button id="table-dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<div class="export-section">
<label for="table-rows">Number of Rows:</label>
<input type="number" id="table-rows" min="1" max="50" value="3" style="width: 100px;">
<small>Total rows including header (if enabled)</small>
</div>
<div class="export-section">
<label for="table-cols">Number of Columns:</label>
<input type="number" id="table-cols" min="1" max="20" value="3" style="width: 100px;">
</div>
<div class="export-section">
<label class="checkbox-label">
<input type="checkbox" id="table-has-header" checked>
Include Header Row
</label>
<small>First row will be formatted as table headers</small>
</div>
<div class="export-section">
<label for="table-alignment">Column Alignment:</label>
<select id="table-alignment">
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
<small>Applies to all columns</small>
</div>
<div class="export-section">
<label for="table-preview">Preview:</label>
<pre id="table-preview" style="background: #f5f5f5; padding: 10px; border-radius: 4px; font-size: 12px; max-height: 300px; overflow: auto;"></pre>
</div>
</div>
<div class="export-dialog-footer">
<button id="table-generate-preview" class="btn-secondary">Update Preview</button>
<button id="table-insert" class="btn-primary">Insert Table</button>
<button id="table-cancel" class="btn-secondary">Cancel</button>
</div>
</div>
</div>
<!-- ASCII Art Generator Dialog -->
<div id="ascii-art-dialog" class="export-dialog hidden">
<div class="export-dialog-content" style="max-width: 700px;">
<div class="export-dialog-header">
<h3>🎨 ASCII Art Generator</h3>
<button id="ascii-dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<div class="export-section">
<label>Mode:</label>
<div style="display: flex; gap: 10px; margin-bottom: 10px;">
<button id="ascii-mode-text" class="btn-secondary ascii-mode-btn active">Text Banner</button>
<button id="ascii-mode-box" class="btn-secondary ascii-mode-btn">Box/Frame</button>
<button id="ascii-mode-templates" class="btn-secondary ascii-mode-btn">Templates</button>
</div>
</div>
<!-- Text Banner Mode -->
<div id="ascii-text-mode" class="ascii-mode-section">
<div class="export-section">
<label for="ascii-text-input">Text to Convert:</label>
<input type="text" id="ascii-text-input" placeholder="Enter your text..." maxlength="50">
</div>
<div class="export-section">
<label for="ascii-font-style">Style:</label>
<select id="ascii-font-style">
<option value="standard">Standard</option>
<option value="banner">Banner</option>
<option value="block">Block</option>
<option value="bubble">Bubble</option>
<option value="digital">Digital</option>
</select>
</div>
</div>
<!-- Box/Frame Mode -->
<div id="ascii-box-mode" class="ascii-mode-section hidden">
<div class="export-section">
<label for="ascii-box-text">Text Content:</label>
<textarea id="ascii-box-text" rows="3" placeholder="Enter text for the box..."></textarea>
</div>
<div class="export-section">
<label for="ascii-box-style">Box Style:</label>
<select id="ascii-box-style">
<option value="single">Single Line (─│┌┐└┘)</option>
<option value="double">Double Line (═║╔╗╚╝)</option>
<option value="rounded">Rounded (─│╭╮╰╯)</option>
<option value="bold">Bold (━┃┏┓┗┛)</option>
<option value="ascii">ASCII (+|-)</option>
</select>
</div>
<div class="export-section">
<label for="ascii-box-padding">Padding:</label>
<input type="number" id="ascii-box-padding" min="1" max="10" value="2" style="width: 80px;">
</div>
</div>
<!-- Templates Mode -->
<div id="ascii-templates-mode" class="ascii-mode-section hidden">
<div class="export-section">
<label>Arrows & Flow:</label>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px;">
<button class="btn-secondary ascii-template-btn" data-template="arrow-right">Arrow →</button>
<button class="btn-secondary ascii-template-btn" data-template="arrow-down">Arrow ↓</button>
<button class="btn-secondary ascii-template-btn" data-template="decision">Decision</button>
<button class="btn-secondary ascii-template-btn" data-template="process-flow">Process Flow</button>
</div>
<label>Diagrams & Charts:</label>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px;">
<button class="btn-secondary ascii-template-btn" data-template="flowchart">Flowchart</button>
<button class="btn-secondary ascii-template-btn" data-template="sequence">Sequence</button>
<button class="btn-secondary ascii-template-btn" data-template="network">Network</button>
<button class="btn-secondary ascii-template-btn" data-template="hierarchy">Hierarchy</button>
<button class="btn-secondary ascii-template-btn" data-template="timeline">Timeline</button>
<button class="btn-secondary ascii-template-btn" data-template="table-simple">Table</button>
</div>
<label>Boxes & Containers:</label>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px;">
<button class="btn-secondary ascii-template-btn" data-template="header">Header</button>
<button class="btn-secondary ascii-template-btn" data-template="note-box">Note Box</button>
<button class="btn-secondary ascii-template-btn" data-template="warning-box">Warning</button>
<button class="btn-secondary ascii-template-btn" data-template="info-box">Info Box</button>
</div>
<label>Decorative Elements:</label>
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 15px;">
<button class="btn-secondary ascii-template-btn" data-template="divider">Divider</button>
<button class="btn-secondary ascii-template-btn" data-template="separator-fancy">Separator</button>
<button class="btn-secondary ascii-template-btn" data-template="brackets">Brackets</button>
<button class="btn-secondary ascii-template-btn" data-template="banner-stars">Banner</button>
<button class="btn-secondary ascii-template-btn" data-template="check">Checklist ✓</button>
<button class="btn-secondary ascii-template-btn" data-template="progress-bar">Progress Bar</button>
</div>
</div>
</div>
<div class="export-section">
<label for="ascii-preview">Preview:</label>
<pre id="ascii-preview" style="background: #f5f5f5; padding: 15px; border-radius: 4px; font-size: 12px; max-height: 400px; overflow: auto; font-family: 'Courier New', monospace; line-height: 1.2;"></pre>
</div>
</div>
<div class="export-dialog-footer">
<button id="ascii-generate" class="btn-secondary">Generate Preview</button>
<button id="ascii-insert" class="btn-primary">Insert ASCII Art</button>
<button id="ascii-cancel" class="btn-secondary">Cancel</button>
</div>
</div>
</div>
<!-- Universal File Converter Dialog -->
<div id="universal-converter-dialog" class="export-dialog hidden">
<div class="export-dialog-content">
<div class="export-dialog-header">
<h3>Universal File Converter</h3>
<button id="converter-dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<div class="export-section">
<label>Select File to Convert:</label>
<div class="folder-input-group">
<input type="text" id="converter-file-path" placeholder="Browse for a file..." readonly>
<button id="browse-converter-file">Browse</button>
</div>
<small>Supported formats: Documents, Images, Media files</small>
</div>
<div class="export-section">
<label for="converter-tool">Conversion Tool:</label>
<select id="converter-tool">
<option value="libreoffice">LibreOffice (Documents)</option>
<option value="imagemagick">ImageMagick (Images)</option>
<option value="ffmpeg">FFmpeg (Media)</option>
<option value="pandoc">Pandoc (Markup)</option>
</select>
<small id="converter-tool-help">Documents: DOCX, PDF, ODT, RTF, TXT, HTML, XLSX, PPTX</small>
</div>
<div class="export-section">
<label for="converter-from">Input Format:</label>
<select id="converter-from">
<!-- Dynamically populated based on selected converter tool -->
</select>
</div>
<div class="export-section">
<label for="converter-to">Output Format:</label>
<select id="converter-to">
<!-- Dynamically populated based on selected converter tool -->
</select>
</div>
<!-- Batch Mode Toggle -->
<div class="export-section">
<label class="checkbox-label">
<input type="checkbox" id="converter-batch-mode">
<span class="checkmark"></span>
Batch Mode (Convert entire folder)
</label>
<small class="export-help">Enable to convert multiple files at once from a folder</small>
</div>
<!-- Batch Mode Options (hidden by default) -->
<div id="converter-batch-options" class="advanced-options hidden">
<div class="export-section">
<label>Input Folder:</label>
<div class="folder-input-group">
<input type="text" id="converter-batch-input-folder" placeholder="Select folder..." readonly>
<button id="browse-converter-batch-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Output Folder:</label>
<div class="folder-input-group">
<input type="text" id="converter-batch-output-folder" placeholder="Select output folder..." readonly>
<button id="browse-converter-batch-output">Browse</button>
</div>
</div>
<div class="export-section">
<label>
<input type="checkbox" id="converter-batch-subfolders" checked>
Include subfolders (recursive)
</label>
</div>
</div>
<!-- Advanced Options Toggle -->
<div class="export-section export-mode-toggle">
<label class="checkbox-label">
<input type="checkbox" id="converter-advanced-toggle">
<span class="checkmark"></span>
Show Advanced Options
</label>
<small class="export-help">Tool-specific quality, compression, and conversion settings</small>
</div>
<!-- Advanced Converter Options (hidden by default) -->
<div id="converter-advanced-options" class="advanced-options hidden">
<!-- ImageMagick Advanced Options -->
<div class="converter-options imagemagick-options hidden">
<div class="export-section">
<label for="imagemagick-quality">Quality (1-100):</label>
<input type="range" id="imagemagick-quality" min="1" max="100" value="85">
<span id="imagemagick-quality-value">85</span>
</div>
<div class="export-section">
<label for="imagemagick-dpi">Resolution (DPI):</label>
<input type="number" id="imagemagick-dpi" min="72" max="600" value="300" placeholder="300">
<small>Higher DPI = better quality, larger file size</small>
</div>
<div class="export-section">
<label for="imagemagick-resize">Resize (WxH):</label>
<input type="text" id="imagemagick-resize" placeholder="e.g., 1920x1080 or 50%">
<small>Examples: 1920x1080, 800x600, 50% (leave empty for no resize)</small>
</div>
<div class="export-section">
<label for="imagemagick-compression">Compression Type:</label>
<select id="imagemagick-compression">
<option value="">None (Default)</option>
<option value="JPEG">JPEG</option>
<option value="LZW">LZW</option>
<option value="Zip">Zip</option>
<option value="RLE">RLE</option>
</select>
</div>
</div>
<!-- FFmpeg Advanced Options -->
<div class="converter-options ffmpeg-options hidden">
<div class="export-section">
<label for="ffmpeg-video-codec">Video Codec:</label>
<select id="ffmpeg-video-codec">
<option value="">Default</option>
<option value="libx264">H.264 (libx264)</option>
<option value="libx265">H.265/HEVC (libx265)</option>
<option value="libvpx-vp9">VP9 (libvpx-vp9)</option>
<option value="copy">Copy (no re-encode)</option>
</select>
</div>
<div class="export-section">
<label for="ffmpeg-audio-codec">Audio Codec:</label>
<select id="ffmpeg-audio-codec">
<option value="">Default</option>
<option value="aac">AAC</option>
<option value="libmp3lame">MP3 (libmp3lame)</option>
<option value="libopus">Opus (libopus)</option>
<option value="libvorbis">Vorbis (libvorbis)</option>
<option value="copy">Copy (no re-encode)</option>
</select>
</div>
<div class="export-section">
<label for="ffmpeg-bitrate">Video Bitrate (kbps):</label>
<input type="number" id="ffmpeg-bitrate" min="100" max="50000" placeholder="e.g., 2000">
<small>Higher bitrate = better quality, larger file size</small>
</div>
<div class="export-section">
<label for="ffmpeg-preset">Encoding Preset:</label>
<select id="ffmpeg-preset">
<option value="">Default</option>
<option value="ultrafast">Ultra Fast</option>
<option value="fast">Fast</option>
<option value="medium" selected>Medium</option>
<option value="slow">Slow (Better Quality)</option>
<option value="veryslow">Very Slow (Best Quality)</option>
</select>
</div>
<div class="export-section">
<label for="ffmpeg-framerate">Frame Rate (fps):</label>
<input type="number" id="ffmpeg-framerate" min="1" max="120" placeholder="e.g., 30">
<small>Common: 24, 30, 60</small>
</div>
</div>
<!-- LibreOffice Advanced Options -->
<div class="converter-options libreoffice-options hidden">
<div class="export-section">
<label for="libreoffice-quality">Export Quality:</label>
<select id="libreoffice-quality">
<option value="">Default</option>
<option value="high">High</option>
<option value="medium" selected>Medium</option>
<option value="low">Low (Smaller file size)</option>
</select>
</div>
<div class="export-section">
<label for="libreoffice-page-range">Page Range:</label>
<input type="text" id="libreoffice-page-range" placeholder="e.g., 1-5, 7, 9-12">
<small>Leave empty to convert all pages</small>
</div>
<div class="export-section">
<label>
<input type="checkbox" id="libreoffice-export-bookmarks">
Export Bookmarks (PDF only)
</label>
</div>
</div>
<!-- Pandoc Advanced Options -->
<div class="converter-options pandoc-options hidden">
<div class="export-section">
<small>Pandoc conversions can use advanced export options from the Export menu.</small>
<button id="pandoc-show-export-options" type="button">Open Export Options Dialog...</button>
</div>
</div>
</div>
<div id="converter-progress" class="batch-progress hidden">
<div class="progress-text">
<span id="converter-status">Converting...</span>
</div>
</div>
<div class="export-section">
<small><strong>Installation Notes:</strong></small>
<small>• LibreOffice: Download from <a href="https://www.libreoffice.org/download" target="_blank">libreoffice.org</a></small>
<small>• ImageMagick: Download from <a href="https://imagemagick.org/script/download.php" target="_blank">imagemagick.org</a></small>
<small>• FFmpeg: Download from <a href="https://ffmpeg.org/download.html" target="_blank">ffmpeg.org</a></small>
<small>• Pandoc: Download from <a href="https://pandoc.org/installing.html" target="_blank">pandoc.org</a></small>
</div>
</div>
<div class="export-dialog-footer">
<button id="converter-cancel">Cancel</button>
<button id="converter-convert" class="primary">Convert</button>
</div>
</div>
</div>
<!-- Batch Conversion Dialog -->
<div id="batch-dialog" class="batch-dialog hidden">
<div class="batch-dialog-content">
<div class="batch-dialog-header">
<h3>Batch File Conversion</h3>
<button id="batch-dialog-close" title="Close">×</button>
</div>
<div class="batch-dialog-body">
<div class="batch-section">
<label>Input Folder:</label>
<div class="folder-input-group">
<input type="text" id="batch-input-folder" placeholder="Select folder containing markdown files..." readonly>
<button id="browse-input-folder">Browse</button>
</div>
</div>
<div class="batch-section">
<label>Output Folder:</label>
<div class="folder-input-group">
<input type="text" id="batch-output-folder" placeholder="Select output folder..." readonly>
<button id="browse-output-folder">Browse</button>
</div>
</div>
<div class="batch-section">
<label for="batch-format">Output Format:</label>
<select id="batch-format">
<option value="html">HTML</option>
<option value="pdf">PDF</option>
<option value="pdf-enhanced">PDF (Enhanced)</option>
<option value="docx">DOCX</option>
<option value="docx-enhanced">DOCX (Enhanced)</option>
<option value="latex">LaTeX</option>
<option value="rtf">RTF</option>
<option value="odt">ODT</option>
<option value="epub">EPUB</option>
<option value="pptx">PowerPoint (PPTX)</option>
<option value="odp">OpenDocument Presentation (ODP)</option>
</select>
</div>
<div class="batch-section">
<label>
<input type="checkbox" id="batch-include-subfolders" checked>
Include subfolders (recursive)
</label>
</div>
<div class="batch-section">
<button id="batch-show-options" type="button">Advanced Export Options...</button>
</div>
<div id="batch-progress" class="batch-progress hidden">
<div class="progress-bar">
<div class="progress-fill" id="batch-progress-fill"></div>
</div>
<div class="progress-text">
<span id="batch-progress-text">Processing...</span>
<span id="batch-progress-count">0 / 0</span>
</div>
</div>
</div>
<div class="batch-dialog-footer">
<button id="batch-cancel">Cancel</button>
<button id="batch-start" class="primary" disabled>Start Conversion</button>
</div>
</div>
</div>
<!-- PDF Editor Dialog -->
<div id="pdf-editor-dialog" class="export-dialog hidden">
<div class="export-dialog-content pdf-editor-content">
<div class="export-dialog-header">
<h3 id="pdf-editor-title">PDF Editor</h3>
<button id="pdf-editor-dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body pdf-editor-body">
<!-- Merge PDFs Section -->
<div id="pdf-merge-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF Files to Merge:</label>
<div id="merge-files-list" class="file-list">
<!-- Dynamically added file entries -->
</div>
<button id="add-merge-file" type="button">+ Add PDF File</button>
<small>Files will be merged in the order shown. Drag to reorder.</small>
</div>
<div class="export-section">
<label>Output File:</label>
<div class="folder-input-group">
<input type="text" id="merge-output-path" placeholder="Choose output location..." readonly>
<button id="browse-merge-output">Browse</button>
</div>
</div>
</div>
<!-- Split PDF Section -->
<div id="pdf-split-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File to Split:</label>
<div class="folder-input-group">
<input type="text" id="split-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-split-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Split Mode:</label>
<select id="split-mode">
<option value="pages">By Page Range</option>
<option value="interval">Every N Pages</option>
<option value="size">By File Size</option>
</select>
</div>
<div id="split-pages-options" class="export-section">
<label>Page Ranges:</label>
<input type="text" id="split-page-ranges" placeholder="e.g., 1-5, 6-10, 11-15">
<small>Separate ranges with commas. Each range will create a new PDF.</small>
</div>
<div id="split-interval-options" class="export-section hidden">
<label>Split Every:</label>
<input type="number" id="split-interval" min="1" value="5" placeholder="5">
<small>pages (e.g., 5 = split every 5 pages)</small>
</div>
<div id="split-size-options" class="export-section hidden">
<label>Max File Size (MB):</label>
<input type="number" id="split-size" min="1" value="5" placeholder="5">
<small>Split when file size exceeds this limit</small>
</div>
<div class="export-section">
<label>Output Folder:</label>
<div class="folder-input-group">
<input type="text" id="split-output-folder" placeholder="Select output folder..." readonly>
<button id="browse-split-output">Browse</button>
</div>
</div>
</div>
<!-- Compress PDF Section -->
<div id="pdf-compress-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File to Compress:</label>
<div class="folder-input-group">
<input type="text" id="compress-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-compress-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Compression Level:</label>
<select id="compress-level">
<option value="low">Low (Best Quality)</option>
<option value="medium" selected>Medium (Balanced)</option>
<option value="high">High (Smallest Size)</option>
</select>
<small>Higher compression = smaller file size, lower quality</small>
</div>
<div class="export-section">
<label>Compression Options:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="compress-images" checked> Compress Images</label>
<label><input type="checkbox" id="compress-remove-duplicates" checked> Remove Duplicates</label>
<label><input type="checkbox" id="compress-optimize-fonts"> Optimize Fonts</label>
</div>
</div>
<div class="export-section">
<label class="checkbox-inline"><input type="checkbox" id="compress-overwrite"> Overwrite original file</label>
</div>
<div class="export-section" id="compress-saveas-section">
<label>Save As:</label>
<div class="folder-input-group">
<input type="text" id="compress-output-path" placeholder="Select save location..." readonly>
<button id="browse-compress-output">Save As</button>
</div>
</div>
</div>
<!-- Rotate Pages Section -->
<div id="pdf-rotate-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="rotate-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-rotate-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Pages to Rotate:</label>
<input type="text" id="rotate-pages" placeholder="e.g., 1-5, 7, 9-12 (leave empty for all pages)">
<small>Separate page numbers/ranges with commas, or leave empty to rotate all pages</small>
</div>
<div class="export-section">
<label>Rotation Angle:</label>
<select id="rotate-angle">
<option value="90">90° Clockwise</option>
<option value="180">180°</option>
<option value="270">270° Clockwise (90° Counter-clockwise)</option>
</select>
</div>
<div class="export-section">
<label class="checkbox-inline"><input type="checkbox" id="rotate-overwrite"> Overwrite original file</label>
</div>
<div class="export-section" id="rotate-saveas-section">
<label>Save As:</label>
<div class="folder-input-group">
<input type="text" id="rotate-output-path" placeholder="Select save location..." readonly>
<button id="browse-rotate-output">Save As</button>
</div>
</div>
</div>
<!-- Delete Pages Section -->
<div id="pdf-delete-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="delete-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-delete-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Pages to Delete:</label>
<input type="text" id="delete-pages" placeholder="e.g., 1-5, 7, 9-12">
<small>Separate page numbers/ranges with commas</small>
</div>
<div class="export-section">
<label class="checkbox-inline"><input type="checkbox" id="delete-overwrite"> Overwrite original file</label>
</div>
<div class="export-section" id="delete-saveas-section">
<label>Save As:</label>
<div class="folder-input-group">
<input type="text" id="delete-output-path" placeholder="Select save location..." readonly>
<button id="browse-delete-output">Save As</button>
</div>
</div>
</div>
<!-- Reorder Pages Section -->
<div id="pdf-reorder-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="reorder-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-reorder-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>New Page Order:</label>
<input type="text" id="reorder-pages" placeholder="e.g., 3, 1, 2, 5, 4">
<small>Enter page numbers in desired order, separated by commas</small>
</div>
<div class="export-section">
<button id="load-current-order" type="button">Load Current Page Order</button>
<div id="current-page-order" class="info-display hidden">
Current order: <span id="current-order-display"></span>
</div>
</div>
<div class="export-section">
<label class="checkbox-inline"><input type="checkbox" id="reorder-overwrite"> Overwrite original file</label>
</div>
<div class="export-section" id="reorder-saveas-section">
<label>Save As:</label>
<div class="folder-input-group">
<input type="text" id="reorder-output-path" placeholder="Select save location..." readonly>
<button id="browse-reorder-output">Save As</button>
</div>
</div>
</div>
<!-- Watermark Section -->
<div id="pdf-watermark-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="watermark-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-watermark-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Watermark Text:</label>
<input type="text" id="watermark-text" placeholder="Enter watermark text...">
</div>
<div class="export-section">
<label>Font Size:</label>
<input type="number" id="watermark-font-size" min="8" max="144" value="48" placeholder="48">
</div>
<div class="export-section">
<label>Opacity (0-100):</label>
<input type="range" id="watermark-opacity" min="0" max="100" value="30">
<span id="watermark-opacity-value">30</span>
</div>
<div class="export-section">
<label>Position:</label>
<select id="watermark-position">
<option value="center">Center</option>
<option value="diagonal">Diagonal</option>
<option value="top-left">Top Left</option>
<option value="top-center">Top Center</option>
<option value="top-right">Top Right</option>
<option value="bottom-left">Bottom Left</option>
<option value="bottom-center">Bottom Center</option>
<option value="bottom-right">Bottom Right</option>
</select>
</div>
<div class="export-section">
<label>Color:</label>
<input type="color" id="watermark-color" value="#000000">
</div>
<div class="export-section">
<label>Apply to:</label>
<select id="watermark-pages">
<option value="all">All Pages</option>
<option value="custom">Custom Pages</option>
</select>
<input type="text" id="watermark-custom-pages" placeholder="e.g., 1-5, 7, 9-12" class="hidden">
</div>
<div class="export-section">
<label class="checkbox-inline"><input type="checkbox" id="watermark-overwrite"> Overwrite original file</label>
</div>
<div class="export-section" id="watermark-saveas-section">
<label>Save As:</label>
<div class="folder-input-group">
<input type="text" id="watermark-output-path" placeholder="Select save location..." readonly>
<button id="browse-watermark-output">Save As</button>
</div>
</div>
</div>
<!-- Encrypt PDF Section (Password Protection) -->
<div id="pdf-encrypt-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File to Protect:</label>
<div class="folder-input-group">
<input type="text" id="encrypt-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-encrypt-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>User Password:</label>
<input type="password" id="encrypt-user-password" placeholder="Password to open the PDF">
<small>Required to open and view the PDF</small>
</div>
<div class="export-section">
<label>Owner Password:</label>
<input type="password" id="encrypt-owner-password" placeholder="Password to modify permissions">
<small>Optional: Required to change document permissions</small>
</div>
<div class="export-section">
<label>Encryption Level:</label>
<select id="encrypt-level">
<option value="128">128-bit (Standard)</option>
<option value="256" selected>256-bit (High Security)</option>
</select>
</div>
<div class="export-section">
<label>Document Permissions:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="encrypt-allow-printing" checked> Allow Printing</label>
<label><input type="checkbox" id="encrypt-allow-modify" checked> Allow Content Modification</label>
<label><input type="checkbox" id="encrypt-allow-copy" checked> Allow Content Copying</label>
<label><input type="checkbox" id="encrypt-allow-annotate" checked> Allow Annotations</label>
<label><input type="checkbox" id="encrypt-allow-forms" checked> Allow Form Filling</label>
<label><input type="checkbox" id="encrypt-allow-extract" checked> Allow Accessibility (Screen Readers)</label>
<label><input type="checkbox" id="encrypt-allow-assemble" checked> Allow Document Assembly</label>
<label><input type="checkbox" id="encrypt-allow-print-high" checked> Allow High-Quality Printing</label>
</div>
<small>These permissions apply when owner password is set</small>
</div>
<div class="export-section">
<label class="checkbox-inline"><input type="checkbox" id="encrypt-overwrite"> Overwrite original file</label>
</div>
<div class="export-section" id="encrypt-saveas-section">
<label>Save As:</label>
<div class="folder-input-group">
<input type="text" id="encrypt-output-path" placeholder="Select save location..." readonly>
<button id="browse-encrypt-output">Save As</button>
</div>
</div>
</div>
<!-- Decrypt PDF Section (Remove Password) -->
<div id="pdf-decrypt-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>Protected PDF File:</label>
<div class="folder-input-group">
<input type="text" id="decrypt-input-path" placeholder="Select protected PDF file..." readonly>
<button id="browse-decrypt-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Current Password:</label>
<input type="password" id="decrypt-password" placeholder="Enter PDF password">
<small>Enter the password to unlock and remove protection</small>
</div>
<div class="export-section">
<label class="checkbox-inline"><input type="checkbox" id="decrypt-overwrite"> Overwrite original file</label>
</div>
<div class="export-section" id="decrypt-saveas-section">
<label>Save As:</label>
<div class="folder-input-group">
<input type="text" id="decrypt-output-path" placeholder="Select save location..." readonly>
<button id="browse-decrypt-output">Save As</button>
</div>
</div>
</div>
<!-- Permissions Section -->
<div id="pdf-permissions-section" class="pdf-operation-section hidden">
<div class="export-section">
<label>PDF File:</label>
<div class="folder-input-group">
<input type="text" id="permissions-input-path" placeholder="Select PDF file..." readonly>
<button id="browse-permissions-input">Browse</button>
</div>
</div>
<div class="export-section">
<label>Current Password (if protected):</label>
<input type="password" id="permissions-current-password" placeholder="Leave empty if not protected">
</div>
<div class="export-section">
<label>New Owner Password:</label>
<input type="password" id="permissions-owner-password" placeholder="Password to modify permissions">
<small>Set a password required to change document permissions</small>
</div>
<div class="export-section">
<label>Document Permissions:</label>
<div class="checkbox-group">
<label><input type="checkbox" id="permissions-allow-printing" checked> Allow Printing</label>
<label><input type="checkbox" id="permissions-allow-modify" checked> Allow Content Modification</label>
<label><input type="checkbox" id="permissions-allow-copy" checked> Allow Content Copying</label>
<label><input type="checkbox" id="permissions-allow-annotate" checked> Allow Annotations</label>
<label><input type="checkbox" id="permissions-allow-forms" checked> Allow Form Filling</label>
<label><input type="checkbox" id="permissions-allow-extract" checked> Allow Accessibility (Screen Readers)</label>
<label><input type="checkbox" id="permissions-allow-assemble" checked> Allow Document Assembly</label>
<label><input type="checkbox" id="permissions-allow-print-high" checked> Allow High-Quality Printing</label>
</div>
</div>
<div class="export-section">
<label class="checkbox-inline"><input type="checkbox" id="permissions-overwrite"> Overwrite original file</label>
</div>
<div class="export-section" id="permissions-saveas-section">
<label>Save As:</label>
<div class="folder-input-group">
<input type="text" id="permissions-output-path" placeholder="Select save location..." readonly>
<button id="browse-permissions-output">Save As</button>
</div>
</div>
</div>
<!-- Progress indicator -->
<div id="pdf-progress" class="batch-progress hidden">
<div class="progress-bar">
<div class="progress-fill" id="pdf-progress-fill"></div>
</div>
<div class="progress-text">
<span id="pdf-progress-text">Processing...</span>
</div>
</div>
</div>
<div class="export-dialog-footer">
<button id="pdf-editor-cancel">Cancel</button>
<button id="pdf-editor-process" class="primary">Process</button>
</div>
</div>
</div>
<!-- Header & Footer Configuration Dialog -->
<div id="header-footer-dialog" class="export-dialog hidden">
<div class="export-dialog-content" style="max-width: 700px;">
<div class="export-dialog-header">
<h3>Header & Footer Settings</h3>
<button id="header-footer-close" class="dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<div class="hf-enable-section">
<label>
<input type="checkbox" id="hf-enabled" checked>
Enable Headers and Footers
</label>
</div>
<div id="hf-config-content">
<!-- Header Configuration -->
<div class="hf-section">
<h4>Header</h4>
<div class="hf-row">
<div class="hf-column">
<label>Left</label>
<input type="text" id="header-left" placeholder="e.g., Document Title">
<button class="field-insert-btn" data-target="header-left" title="Insert dynamic field">+</button>
</div>
<div class="hf-column">
<label>Center</label>
<input type="text" id="header-center" placeholder="e.g., $TITLE$">
<button class="field-insert-btn" data-target="header-center" title="Insert dynamic field">+</button>
</div>
<div class="hf-column">
<label>Right</label>
<input type="text" id="header-right" placeholder="e.g., $DATE$">
<button class="field-insert-btn" data-target="header-right" title="Insert dynamic field">+</button>
</div>
</div>
<div class="hf-logo-row">
<label>Header Logo/Image:</label>
<button id="header-logo-browse" class="browse-btn">Browse...</button>
<button id="header-logo-clear" class="clear-btn">Clear</button>
<span id="header-logo-preview" class="logo-preview"></span>
</div>
</div>
<!-- Footer Configuration -->
<div class="hf-section">
<h4>Footer</h4>
<div class="hf-row">
<div class="hf-column">
<label>Left</label>
<input type="text" id="footer-left" placeholder="e.g., Company Name">
<button class="field-insert-btn" data-target="footer-left" title="Insert dynamic field">+</button>
</div>
<div class="hf-column">
<label>Center</label>
<input type="text" id="footer-center" placeholder="e.g., $PAGE$ of $TOTAL$">
<button class="field-insert-btn" data-target="footer-center" title="Insert dynamic field">+</button>
</div>
<div class="hf-column">
<label>Right</label>
<input type="text" id="footer-right" placeholder="e.g., $AUTHOR$">
<button class="field-insert-btn" data-target="footer-right" title="Insert dynamic field">+</button>
</div>
</div>
<div class="hf-logo-row">
<label>Footer Logo/Image:</label>
<button id="footer-logo-browse" class="browse-btn">Browse...</button>
<button id="footer-logo-clear" class="clear-btn">Clear</button>
<span id="footer-logo-preview" class="logo-preview"></span>
</div>
</div>
<!-- Dynamic Fields Help -->
<div class="hf-help">
<p><strong>Available Dynamic Fields:</strong></p>
<ul>
<li><code>$PAGE$</code> - Current page number</li>
<li><code>$TOTAL$</code> - Total page count</li>
<li><code>$DATE$</code> - Current date</li>
<li><code>$TIME$</code> - Current time</li>
<li><code>$TITLE$</code> - Document title</li>
<li><code>$AUTHOR$</code> - Document author</li>
<li><code>$FILENAME$</code> - File name</li>
</ul>
</div>
</div>
</div>
<div class="export-dialog-footer">
<button id="header-footer-cancel">Cancel</button>
<button id="header-footer-save" class="primary">Save Settings</button>
</div>
</div>
</div>
<!-- Dynamic Field Picker Dialog -->
<div id="field-picker-dialog" class="export-dialog hidden">
<div class="export-dialog-content" style="max-width: 400px;">
<div class="export-dialog-header">
<h3>Insert Dynamic Field</h3>
<button id="field-picker-close" class="dialog-close" title="Close">×</button>
</div>
<div class="export-dialog-body">
<div class="field-picker-list">
<button class="field-option" data-field="$PAGE$">Page Number</button>
<button class="field-option" data-field="$TOTAL$">Total Pages</button>
<button class="field-option" data-field="$DATE$">Current Date</button>
<button class="field-option" data-field="$TIME$">Current Time</button>
<button class="field-option" data-field="$TITLE$">Document Title</button>
<button class="field-option" data-field="$AUTHOR$">Document Author</button>
<button class="field-option" data-field="$FILENAME$">File Name</button>
</div>
</div>
</div>
</div>
<div class="editor-container">
<div class="tab-content active" id="tab-content-1" data-tab-id="1">
<div id="editor-pane-1" class="pane">
<div class="editor-wrapper">
<div id="line-numbers-1" class="line-numbers hidden"></div>
<textarea id="editor-1" class="editor-textarea"></textarea>
</div>
</div>
<div class="pane-resizer" id="pane-resizer-1" title="Drag to resize"></div>
<div id="preview-pane-1" class="pane">
<div id="preview-1" class="preview-content"></div>
</div>
</div>
<!-- PDF Viewer Container (hidden by default) -->
<div id="pdf-viewer-container" class="pdf-viewer-container hidden">
<div class="pdf-viewer-toolbar pdf-toolbar-main">
<!-- Navigation -->
<button id="pdf-prev-page" title="Previous Page">◀</button>
<span id="pdf-page-info">Page <input type="number" id="pdf-page-input" min="1" value="1"> of <span id="pdf-total-pages">0</span></span>
<button id="pdf-next-page" title="Next Page">▶</button>
<div class="pdf-toolbar-separator"></div>
<!-- Zoom -->
<button id="pdf-zoom-out" title="Zoom Out">−</button>
<span id="pdf-zoom-level">100%</span>
<button id="pdf-zoom-in" title="Zoom In">+</button>
<button id="pdf-fit-width" title="Fit Width">↔</button>
<button id="pdf-fit-page" title="Fit Page">⬜</button>
<div class="pdf-toolbar-separator"></div>
<!-- Rotation -->
<button id="pdf-rotate-left" title="Rotate Left">↺</button>
<button id="pdf-rotate-right" title="Rotate Right">↻</button>
<div class="pdf-toolbar-separator"></div>
<!-- PDF Editor Functions -->
<button id="pdf-tb-merge" class="pdf-editor-btn" title="Merge PDFs">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="9" rx="1"></rect>
<rect x="14" y="3" width="7" height="9" rx="1"></rect>
<path d="M12 15v6m-3-3h6"></path>
</svg>
<span>Merge</span>
</button>
<button id="pdf-tb-split" class="pdf-editor-btn" title="Split PDF">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="9" rx="1"></rect>
<path d="M12 12v9M9 18l3 3 3-3"></path>
</svg>
<span>Split</span>
</button>
<button id="pdf-tb-compress" class="pdf-editor-btn" title="Compress PDF">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M4 14h16M4 10h16M7 6l5 4 5-4M7 18l5-4 5 4"></path>
</svg>
<span>Compress</span>
</button>
<button id="pdf-tb-rotate" class="pdf-editor-btn" title="Rotate Pages">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12a9 9 0 11-6.219-8.56"></path>
<polyline points="21 3 21 9 15 9"></polyline>
</svg>
<span>Rotate</span>
</button>
<button id="pdf-tb-delete" class="pdf-editor-btn" title="Delete Pages">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14z"></path>
</svg>
<span>Delete</span>
</button>
<button id="pdf-tb-reorder" class="pdf-editor-btn" title="Reorder Pages">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6"></line>
<line x1="3" y1="12" x2="21" y2="12"></line>
<line x1="3" y1="18" x2="21" y2="18"></line>
<polyline points="7 9 4 12 7 15"></polyline>
<polyline points="17 9 20 12 17 15"></polyline>
</svg>
<span>Reorder</span>
</button>
<button id="pdf-tb-watermark" class="pdf-editor-btn" title="Add Watermark">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
<path d="M2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span>Watermark</span>
</button>
<button id="pdf-tb-encrypt" class="pdf-editor-btn" title="Encrypt PDF">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0110 0v4"></path>
</svg>
<span>Encrypt</span>
</button>
<button id="pdf-tb-decrypt" class="pdf-editor-btn" title="Decrypt PDF">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 019.9-1"></path>
</svg>
<span>Decrypt</span>
</button>
<div class="pdf-toolbar-separator"></div>
<!-- File Info and Close -->
<span id="pdf-filename" class="pdf-filename"></span>
<button id="pdf-close" title="Close PDF">✕</button>
</div>
<div id="pdf-viewer" class="pdf-viewer">
<canvas id="pdf-canvas"></canvas>
</div>
</div>
</div>
<div class="status-bar">
<span id="status-text">Ready</span>
<span id="word-count">Words: 0 | Characters: 0</span>
</div>
</div>
<script src="renderer.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink