shihaam/letter-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Shihaam Abdul Rahman
2025-07-13 14:54:21 +05:00
commit 707cf42765
6 changed files with 1725 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
index.html Normal file
View File

@@ -0,0 +1,116 @@
<!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('![', '](url)')" 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>