mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-24 07:20:16 +05:30
amitwh
d705cfc30b
- Normalize pandoc command parsing with path.basename() to support bundled binary paths - Use bundled pandoc binary in convertWithPandoc instead of relying on PATH - Forward includeSubfolders checkbox state from renderer to main process - Add pandoc availability check before batch conversion - Re-enable Start button when batch conversion completes - Clean up obsolete dist build artifact causing test snapshot warning - Bump version to 4.4.4
2455 lines
100 KiB
HTML
2455 lines
100 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<!-- CSP: unsafe-inline/unsafe-eval required for marked.js extensions and Mermaid -->
|
||
<!-- TODO: Migrate to nonce-based CSP for better security -->
|
||
<meta
|
||
http-equiv="Content-Security-Policy"
|
||
content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' https://www.plantuml.com;"
|
||
/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>MarkdownConverter</title>
|
||
<!-- Design tokens - loaded first for CSS variable availability -->
|
||
<link rel="stylesheet" href="styles/tokens.css" />
|
||
<link rel="stylesheet" href="styles/modal.css" />
|
||
<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" />
|
||
<link rel="stylesheet" href="styles-sidebar.css" />
|
||
<link rel="stylesheet" href="styles-zen.css" />
|
||
<link rel="stylesheet" href="styles-welcome.css" />
|
||
<link rel="stylesheet" href="styles-zen.css" />
|
||
<link rel="stylesheet" href="../node_modules/highlight.js/styles/default.css" />
|
||
</head>
|
||
<body>
|
||
<!-- Skip link for keyboard navigation -->
|
||
<a href="#editor-container" class="skip-link">Skip to editor</a>
|
||
<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" id="app-version-display"></span>
|
||
</div>
|
||
</div>
|
||
<div class="tab-bar" id="tab-bar" role="tablist" aria-label="Document tabs">
|
||
<div class="tab active" data-tab-id="1" role="tab" aria-selected="true">
|
||
<span class="tab-title">Untitled</span>
|
||
<button class="tab-close" title="Close tab" aria-label="Close tab">×</button>
|
||
</div>
|
||
<button class="new-tab-button" id="new-tab-btn" title="New tab" aria-label="Create new tab">
|
||
+
|
||
</button>
|
||
</div>
|
||
<div class="toolbar">
|
||
<div class="toolbar-group">
|
||
<!-- Format: Bold, Italic, Strikethrough -->
|
||
<button id="btn-bold" title="Bold (Ctrl+B)" aria-label="Bold">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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 (Ctrl+I)" aria-label="Italic">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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-strikethrough" title="Strikethrough" aria-label="Strikethrough">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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>
|
||
</div>
|
||
<div class="toolbar-separator"></div>
|
||
<div class="toolbar-group">
|
||
<!-- Structure: Heading, List, Quote -->
|
||
<button id="btn-heading" title="Heading" aria-label="Insert heading">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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-list" title="List" aria-label="Insert list">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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" aria-label="Insert quote">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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>
|
||
</div>
|
||
<div class="toolbar-separator"></div>
|
||
<div class="toolbar-group">
|
||
<!-- Insert: Link, Code, Code Block, Table, HR -->
|
||
<button id="btn-link" title="Link" aria-label="Insert link">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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="Inline Code (Ctrl+`)" aria-label="Insert inline code">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<polyline points="16 18 22 12 16 6"></polyline>
|
||
<polyline points="8 6 2 12 8 18"></polyline>
|
||
</svg>
|
||
</button>
|
||
<button id="btn-code-block" title="Code Block" aria-label="Insert code block">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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-table" title="Insert Table" aria-label="Insert table">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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-horizontal-rule"
|
||
title="Horizontal Rule"
|
||
aria-label="Insert horizontal rule"
|
||
>
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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>
|
||
<div class="toolbar-separator"></div>
|
||
<div class="toolbar-group">
|
||
<!-- View: Find, Line Numbers, Preview -->
|
||
<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"
|
||
aria-hidden="true"
|
||
>
|
||
<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"
|
||
aria-hidden="true"
|
||
>
|
||
<path d="M3 6h18"></path>
|
||
<path d="M3 12h18"></path>
|
||
<path d="M3 18h18"></path>
|
||
</svg>
|
||
</button>
|
||
<button id="btn-preview-toggle" title="Toggle Preview (Ctrl+Shift+P)">
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
aria-hidden="true"
|
||
>
|
||
<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>
|
||
</div>
|
||
|
||
<div class="breadcrumb-bar" id="breadcrumb-bar">
|
||
<span class="breadcrumb-path" id="breadcrumb-path">Untitled</span>
|
||
</div>
|
||
|
||
<!-- Find & Replace Dialog -->
|
||
<div
|
||
id="find-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="find-dialog-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content small">
|
||
<div class="modal-header">
|
||
<h3 id="find-dialog-title">Find & Replace</h3>
|
||
<button class="modal-close" id="btn-find-close" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<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>
|
||
</div>
|
||
<div class="find-info">
|
||
<span id="find-count">0 matches</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Export Options Dialog -->
|
||
<div
|
||
id="export-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="export-dialog-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content large">
|
||
<div class="modal-header">
|
||
<h3 id="export-dialog-title">Export Options</h3>
|
||
<button class="modal-close" id="export-dialog-close" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-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 revealjs-only" style="display: none">
|
||
<label>Reveal.js Options:</label>
|
||
<div class="form-row">
|
||
<label for="reveal-theme">Slide Theme:</label>
|
||
<select id="reveal-theme">
|
||
<option value="black">Black</option>
|
||
<option value="white">White</option>
|
||
<option value="league">League</option>
|
||
<option value="beige">Beige</option>
|
||
<option value="sky">Sky</option>
|
||
<option value="night">Night</option>
|
||
<option value="serif">Serif</option>
|
||
<option value="simple">Simple</option>
|
||
<option value="solarized">Solarized</option>
|
||
<option value="blood">Blood</option>
|
||
<option value="moon">Moon</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="reveal-transition">Transition:</label>
|
||
<select id="reveal-transition">
|
||
<option value="slide">Slide</option>
|
||
<option value="none">None</option>
|
||
<option value="fade">Fade</option>
|
||
<option value="convex">Convex</option>
|
||
<option value="concave">Concave</option>
|
||
<option value="zoom">Zoom</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="reveal-speed">Transition Speed:</label>
|
||
<select id="reveal-speed">
|
||
<option value="default">Default</option>
|
||
<option value="fast">Fast</option>
|
||
<option value="slow">Slow</option>
|
||
</select>
|
||
</div>
|
||
<div class="checkbox-group">
|
||
<label><input type="checkbox" id="reveal-slide-number" /> Slide Numbers</label>
|
||
<label><input type="checkbox" id="reveal-controls" checked /> Controls</label>
|
||
<label><input type="checkbox" id="reveal-progress" checked /> Progress Bar</label>
|
||
<label><input type="checkbox" id="reveal-history" checked /> Slide History</label>
|
||
<label><input type="checkbox" id="reveal-center" checked /> Center Content</label>
|
||
</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="modal-footer">
|
||
<button id="export-cancel" class="btn btn-secondary" data-close>Cancel</button>
|
||
<button id="export-confirm" class="btn btn-primary">Export</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Print Preview Dialog -->
|
||
<div
|
||
id="print-preview-overlay"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="print-preview-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content full">
|
||
<div class="modal-header">
|
||
<h3 id="print-preview-title">Print Preview</h3>
|
||
<button class="modal-close" id="print-preview-close" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="print-preview-body">
|
||
<div class="print-preview-sidebar">
|
||
<div class="print-option-group">
|
||
<label>Paper Size</label>
|
||
<select id="print-paper-size">
|
||
<option value="A3">A3</option>
|
||
<option value="A4" selected>A4</option>
|
||
<option value="A5">A5</option>
|
||
<option value="Letter">Letter</option>
|
||
<option value="Legal">Legal</option>
|
||
<option value="Tabloid">Tabloid</option>
|
||
</select>
|
||
</div>
|
||
<div class="print-option-group">
|
||
<label>Orientation</label>
|
||
<select id="print-orientation">
|
||
<option value="portrait" selected>Portrait</option>
|
||
<option value="landscape">Landscape</option>
|
||
</select>
|
||
</div>
|
||
<div class="print-option-group">
|
||
<label>Margins</label>
|
||
<select id="print-margins">
|
||
<option value="default" selected>Default</option>
|
||
<option value="narrow">Narrow</option>
|
||
<option value="wide">Wide</option>
|
||
<option value="none">None</option>
|
||
</select>
|
||
</div>
|
||
<div class="print-option-group">
|
||
<label>Scale</label>
|
||
<div class="scale-control">
|
||
<input type="range" id="print-scale" min="50" max="200" value="100" />
|
||
<span id="print-scale-value">100%</span>
|
||
</div>
|
||
</div>
|
||
<div class="print-option-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="print-headers" checked />
|
||
Headers & Footers
|
||
</label>
|
||
</div>
|
||
<div class="print-option-group">
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="print-background" checked />
|
||
Background Colors
|
||
</label>
|
||
</div>
|
||
<div class="print-option-group">
|
||
<label>Pages</label>
|
||
<select id="print-pages">
|
||
<option value="all" selected>All</option>
|
||
<option value="custom">Custom Range</option>
|
||
</select>
|
||
<input
|
||
type="text"
|
||
id="print-page-range"
|
||
placeholder="e.g., 1-3, 5"
|
||
class="hidden print-range-input"
|
||
/>
|
||
</div>
|
||
<div class="print-actions">
|
||
<button class="btn-primary" id="print-execute">Print</button>
|
||
<button class="btn-secondary" id="print-cancel">Cancel</button>
|
||
</div>
|
||
</div>
|
||
<div class="print-preview-content">
|
||
<iframe
|
||
id="print-preview-frame"
|
||
style="width: 100%; height: 100%; border: none; background: white"
|
||
></iframe>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Command Palette -->
|
||
<div class="command-palette-overlay hidden" id="command-palette-overlay">
|
||
<div class="command-palette">
|
||
<input
|
||
type="text"
|
||
class="command-palette-input"
|
||
id="command-palette-input"
|
||
placeholder="Type a command..."
|
||
autocomplete="off"
|
||
/>
|
||
<div class="command-palette-results" id="command-palette-results"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table Generator Dialog -->
|
||
<div
|
||
id="table-generator-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="table-generator-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="table-generator-title">📊 Table Generator</h3>
|
||
<button class="modal-close" id="table-dialog-close" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-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="modal-footer">
|
||
<button id="table-generate-preview" class="btn btn-secondary">Update Preview</button>
|
||
<button id="table-insert" class="btn btn-primary">Insert Table</button>
|
||
<button id="table-cancel" class="btn btn-secondary" data-close>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ASCII Art Generator Dialog -->
|
||
<div
|
||
id="ascii-art-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="ascii-art-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content large">
|
||
<div class="modal-header">
|
||
<h3 id="ascii-art-title">🎨 ASCII Art Generator</h3>
|
||
<button class="modal-close" id="ascii-dialog-close" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-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="modal-footer">
|
||
<button id="ascii-generate" class="btn btn-secondary">Generate Preview</button>
|
||
<button id="ascii-insert" class="btn btn-primary">Insert ASCII Art</button>
|
||
<button id="ascii-cancel" class="btn btn-secondary" data-close>Cancel</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Universal File Converter Dialog -->
|
||
<div
|
||
id="universal-converter-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="universal-converter-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content large">
|
||
<div class="modal-header">
|
||
<h3 id="universal-converter-title">Universal File Converter</h3>
|
||
<button class="modal-close" id="converter-dialog-close" aria-label="Close">
|
||
×
|
||
</button>
|
||
</div>
|
||
<div class="modal-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="modal-footer">
|
||
<button id="converter-cancel" class="btn btn-secondary" data-close>Cancel</button>
|
||
<button id="converter-convert" class="btn btn-primary">Convert</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Batch Conversion Dialog -->
|
||
<div
|
||
id="batch-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="batch-dialog-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content large">
|
||
<div class="modal-header">
|
||
<h3 id="batch-dialog-title">Batch File Conversion</h3>
|
||
<button class="modal-close" id="batch-dialog-close" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-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="modal-footer">
|
||
<button id="batch-cancel" class="btn btn-secondary" data-close>Cancel</button>
|
||
<button id="batch-start" class="btn btn-primary" disabled>Start Conversion</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PDF Editor Dialog -->
|
||
<div
|
||
id="pdf-editor-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="pdf-editor-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content full">
|
||
<div class="modal-header">
|
||
<h3 id="pdf-editor-title">PDF Editor</h3>
|
||
<button class="modal-close" id="pdf-editor-dialog-close" aria-label="Close">
|
||
×
|
||
</button>
|
||
</div>
|
||
<div class="modal-body pdf-editor-body">
|
||
<div class="pdf-editor-left-panel">
|
||
<!-- 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>
|
||
|
||
<div id="pdf-status-message" class="info-message hidden" aria-live="polite"></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>
|
||
|
||
<!-- Right Panel: Scrollable Visual Page Sidebar -->
|
||
<div id="pdf-thumbnail-sidebar" class="pdf-editor-right-panel hidden">
|
||
<h4>Page Preview & Editor</h4>
|
||
<p class="sidebar-help">
|
||
Select a PDF to view pages, check to delete, click ↻ to rotate, and use ◀ / ▶ to
|
||
reorder.
|
||
</p>
|
||
<div id="pdf-thumbnail-grid" class="pdf-thumbnail-grid">
|
||
<!-- Page thumbnail cards will be rendered here dynamically -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button id="pdf-editor-cancel" class="btn btn-secondary" data-close>Cancel</button>
|
||
<button id="pdf-editor-process" class="btn btn-primary">Process</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Header & Footer Configuration Dialog -->
|
||
<div
|
||
id="header-footer-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="header-footer-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h3 id="header-footer-title">Header & Footer Settings</h3>
|
||
<button class="modal-close" id="header-footer-close" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-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="modal-footer">
|
||
<button id="header-footer-cancel" class="btn btn-secondary" data-close>Cancel</button>
|
||
<button id="header-footer-save" class="btn btn-primary">Save Settings</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dynamic Field Picker Dialog -->
|
||
<div
|
||
id="field-picker-dialog"
|
||
class="modal hidden"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
aria-labelledby="field-picker-title"
|
||
>
|
||
<div class="modal-backdrop" data-close></div>
|
||
<div class="modal-content small">
|
||
<div class="modal-header">
|
||
<h3 id="field-picker-title">Insert Dynamic Field</h3>
|
||
<button class="modal-close" id="field-picker-close" aria-label="Close">×</button>
|
||
</div>
|
||
<div class="modal-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="main-content" id="main-content">
|
||
<!-- Sidebar -->
|
||
<div class="sidebar collapsed" id="sidebar">
|
||
<div class="sidebar-icons">
|
||
<button class="sidebar-icon" data-panel="explorer" title="File Explorer (Ctrl+Shift+E)">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
|
||
</svg>
|
||
</button>
|
||
<button class="sidebar-icon" data-panel="git" title="Git (Ctrl+Shift+G)">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<line x1="6" y1="3" x2="6" y2="15" />
|
||
<circle cx="18" cy="6" r="3" />
|
||
<circle cx="6" cy="6" r="3" />
|
||
<path d="M18 9a9 9 0 01-9 9" />
|
||
</svg>
|
||
</button>
|
||
<button class="sidebar-icon" data-panel="snippets" title="Snippets (Ctrl+Shift+S)">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<polyline points="16 18 22 12 16 6" />
|
||
<polyline points="8 6 2 12 8 18" />
|
||
</svg>
|
||
</button>
|
||
<button class="sidebar-icon" data-panel="templates" title="Templates">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
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" />
|
||
<line x1="3" y1="9" x2="21" y2="9" />
|
||
<line x1="9" y1="21" x2="9" y2="9" />
|
||
</svg>
|
||
</button>
|
||
<button class="sidebar-icon" data-panel="outline" title="Outline (Ctrl+Shift+O)">
|
||
<svg
|
||
width="20"
|
||
height="20"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
>
|
||
<line x1="8" y1="6" x2="21" y2="6" />
|
||
<line x1="8" y1="12" x2="21" y2="12" />
|
||
<line x1="8" y1="18" x2="21" y2="18" />
|
||
<line x1="3" y1="6" x2="3.01" y2="6" />
|
||
<line x1="3" y1="12" x2="3.01" y2="12" />
|
||
<line x1="3" y1="18" x2="3.01" y2="18" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div class="sidebar-panel" id="sidebar-panel">
|
||
<div class="sidebar-panel-header">
|
||
<span class="sidebar-panel-title"></span>
|
||
<button class="sidebar-panel-close" title="Close panel">×</button>
|
||
</div>
|
||
<div class="sidebar-panel-content" id="sidebar-panel-content"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Editor Container -->
|
||
<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="editor-cm-1" class="codemirror-container"></div>
|
||
</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>
|
||
|
||
<!-- Bottom Panel (REPL Output) -->
|
||
<div class="bottom-panel collapsed" id="bottom-panel">
|
||
<div class="bottom-panel-header">
|
||
<span class="bottom-panel-title">Output</span>
|
||
<div class="bottom-panel-actions">
|
||
<button class="bottom-panel-btn" id="repl-clear" title="Clear output">Clear</button>
|
||
<button class="bottom-panel-btn" id="bottom-panel-toggle" title="Toggle panel">
|
||
▼
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-panel-content" id="repl-output"></div>
|
||
</div>
|
||
|
||
<div class="status-bar" id="status-bar">
|
||
<div class="status-bar-left">
|
||
<span class="status-item" id="status-text">Ready</span>
|
||
<span class="status-separator">|</span>
|
||
<span class="status-item" id="status-file-path" title=""></span>
|
||
</div>
|
||
<div class="status-bar-right">
|
||
<span class="status-item" id="word-count">Words: 0</span>
|
||
<span class="status-separator">|</span>
|
||
<span class="status-item" id="char-count">Chars: 0</span>
|
||
<span class="status-separator">|</span>
|
||
<span class="status-item" id="line-col">Ln 1, Col 1</span>
|
||
<span class="status-separator">|</span>
|
||
<span class="status-item" id="encoding">UTF-8</span>
|
||
<span class="status-separator">|</span>
|
||
<span class="status-item" id="language-mode">Markdown</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="utils/ModalManager.js"></script>
|
||
<script src="renderer.js"></script>
|
||
</body>
|
||
</html>
|