116 lines
5.8 KiB
HTML
116 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Letter Editor - OmegaTech Solution</title>
|
|
|
|
<!-- Quill.js CSS -->
|
|
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
|
|
|
|
<!-- Prism.js for Markdown Syntax Highlighting -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
|
|
|
|
<!-- Main Styles -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Toolbar -->
|
|
<div class="toolbar">
|
|
<div class="toolbar-left">
|
|
<button class="btn btn-primary" id="richTextMode">Rich Text</button>
|
|
<button class="btn" id="markdownMode">Markdown</button>
|
|
<button class="btn" id="previewMode">Preview Only</button>
|
|
</div>
|
|
<div class="toolbar-right">
|
|
<div class="dropdown">
|
|
<button class="btn btn-success dropdown-toggle" id="exportPdfBtn">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20M10,17L8,15H10V12H14V15H16L12,19L10,17Z"/>
|
|
</svg>
|
|
Export PDF
|
|
</button>
|
|
<div class="dropdown-menu" id="pdfQualityMenu">
|
|
<button class="dropdown-item" data-quality="low">Low Quality (Smallest)</button>
|
|
<button class="dropdown-item" data-quality="medium">Medium Quality</button>
|
|
<button class="dropdown-item" data-quality="high">High Quality</button>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-info" id="exportHtml">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z"/>
|
|
</svg>
|
|
Export HTML
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<!-- Editor Section -->
|
|
<div class="editor-section">
|
|
<!-- Rich Text Editor -->
|
|
<div id="richTextEditor" class="editor-mode active">
|
|
<div id="quillToolbar">
|
|
<select class="ql-header">
|
|
<option selected>Normal</option>
|
|
<option value="1">Heading 1</option>
|
|
<option value="2">Heading 2</option>
|
|
<option value="3">Heading 3</option>
|
|
</select>
|
|
<button class="ql-bold"></button>
|
|
<button class="ql-italic"></button>
|
|
<button class="ql-underline"></button>
|
|
<button class="ql-list" value="ordered"></button>
|
|
<button class="ql-list" value="bullet"></button>
|
|
<button class="ql-align" value=""></button>
|
|
<button class="ql-align" value="center"></button>
|
|
<button class="ql-align" value="right"></button>
|
|
<button class="ql-align" value="justify"></button>
|
|
<button class="ql-link"></button>
|
|
<button class="ql-image"></button>
|
|
<button class="ql-clean"></button>
|
|
</div>
|
|
<div id="quillEditor"></div>
|
|
</div>
|
|
|
|
<!-- Markdown Editor -->
|
|
<div id="markdownEditor" class="editor-mode">
|
|
<div class="markdown-toolbar">
|
|
<button onclick="insertMarkdown('**', '**')" title="Bold">B</button>
|
|
<button onclick="insertMarkdown('*', '*')" title="Italic">I</button>
|
|
<button onclick="insertMarkdown('# ', '')" title="Heading">H</button>
|
|
<button onclick="insertMarkdown('- ', '')" title="List">≡</button>
|
|
<button onclick="insertMarkdown('[', '](url)')" title="Link">🔗</button>
|
|
<button onclick="insertMarkdown('')" title="Image">🖼</button>
|
|
<button onclick="insertTable()" title="Table">⊞</button>
|
|
</div>
|
|
<textarea id="markdownTextarea" placeholder="Write your markdown here..."></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Section -->
|
|
<div class="preview-section">
|
|
<div class="preview-header">
|
|
<h3>Live Preview</h3>
|
|
<div class="page-info">
|
|
Page <span id="currentPage">1</span> of <span id="totalPages">1</span>
|
|
</div>
|
|
</div>
|
|
<div class="preview-container" id="previewContainer">
|
|
<!-- Preview pages will be generated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.1/purify.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |