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