mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
amitwh
1d89a91de0
Added enhanced Word export with template support to the batch file converter, enabling batch conversion of markdown files to professionally-styled DOCX documents using custom templates. New Features: - Added "DOCX (Enhanced)" option to batch converter format selection - Integrated WordTemplateExporter with batch conversion workflow - Batch converter now supports template-based Word export with: * Custom template preservation * Professional table styling (orange headers, white data rows) * Perfect ASCII art and flowchart alignment * Red-colored arrows in flowcharts * Markdown numbering stripped from headings and lists Technical Changes: - Modified performBatchConversion() to handle 'docx-enhanced' format - Async/await pattern for WordTemplateExporter in batch processing - Proper error handling and progress tracking for enhanced exports - Updated version to v1.8.0 in package.json, main.js, and README.md 🤖 Generated with [Claude Code](https://claude.com/claude-code)
950 lines
55 KiB
HTML
950 lines
55 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>PanConverter - Markdown Editor</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="styles.css">
|
||
<link rel="stylesheet" href="styles-modern.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<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 -->
|
||
<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>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>
|
||
|
||
<!-- 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="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">
|
||
<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">
|
||
<!-- 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>Output File:</label>
|
||
<div class="folder-input-group">
|
||
<input type="text" id="compress-output-path" placeholder="Choose output location..." readonly>
|
||
<button id="browse-compress-output">Browse</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>Output File:</label>
|
||
<div class="folder-input-group">
|
||
<input type="text" id="rotate-output-path" placeholder="Choose output location..." readonly>
|
||
<button id="browse-rotate-output">Browse</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>Output File:</label>
|
||
<div class="folder-input-group">
|
||
<input type="text" id="delete-output-path" placeholder="Choose output location..." readonly>
|
||
<button id="browse-delete-output">Browse</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>Output File:</label>
|
||
<div class="folder-input-group">
|
||
<input type="text" id="reorder-output-path" placeholder="Choose output location..." readonly>
|
||
<button id="browse-reorder-output">Browse</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>Output File:</label>
|
||
<div class="folder-input-group">
|
||
<input type="text" id="watermark-output-path" placeholder="Choose output location..." readonly>
|
||
<button id="browse-watermark-output">Browse</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>Output File:</label>
|
||
<div class="folder-input-group">
|
||
<input type="text" id="encrypt-output-path" placeholder="Choose output location..." readonly>
|
||
<button id="browse-encrypt-output">Browse</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>Output File:</label>
|
||
<div class="folder-input-group">
|
||
<input type="text" id="decrypt-output-path" placeholder="Choose output location..." readonly>
|
||
<button id="browse-decrypt-output">Browse</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>Output File:</label>
|
||
<div class="folder-input-group">
|
||
<input type="text" id="permissions-output-path" placeholder="Choose output location..." readonly>
|
||
<button id="browse-permissions-output">Browse</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>
|
||
|
||
<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 id="preview-pane-1" class="pane">
|
||
<div id="preview-1" class="preview-content"></div>
|
||
</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> |