commit 707cf427651b7c27444c7b857419f46876f73fac
Author: Shihaam Abdul Rahman <shihaam@shihaam.me>
Date:   Sun Jul 13 14:54:21 2025 +0500

    init

diff --git a/app.js b/app.js
new file mode 100644
index 0000000..0097ba0
--- /dev/null
+++ b/app.js
@@ -0,0 +1,712 @@
+// Global variables
+let quill;
+let currentMode = 'richtext';
+let currentContent = '';
+let pages = [];
+
+// Initialize Quill editor
+function initQuill() {
+    quill = new Quill('#quillEditor', {
+        theme: 'snow',
+        modules: {
+            toolbar: '#quillToolbar'
+        },
+        placeholder: 'Start writing your letter content here...'
+    });
+
+    // Update preview on content change
+    quill.on('text-change', () => {
+        updatePreview();
+    });
+}
+
+// Mode switching
+document.getElementById('richTextMode').addEventListener('click', () => {
+    switchMode('richtext');
+});
+
+document.getElementById('markdownMode').addEventListener('click', () => {
+    switchMode('markdown');
+});
+
+document.getElementById('previewMode').addEventListener('click', () => {
+    switchMode('preview');
+});
+
+function switchMode(mode) {
+    // Update button states
+    document.querySelectorAll('.toolbar-left .btn').forEach(btn => {
+        btn.classList.remove('active', 'btn-primary');
+    });
+
+    // Hide all editors
+    document.querySelectorAll('.editor-mode').forEach(editor => {
+        editor.classList.remove('active');
+    });
+
+    currentMode = mode;
+
+    switch(mode) {
+        case 'richtext':
+            document.getElementById('richTextMode').classList.add('active', 'btn-primary');
+            document.getElementById('richTextEditor').classList.add('active');
+            // Convert markdown to rich text if switching from markdown
+            if (currentMode === 'markdown') {
+                const markdownContent = document.getElementById('markdownTextarea').value;
+                const html = marked.parse(markdownContent);
+                quill.root.innerHTML = DOMPurify.sanitize(html);
+            }
+            break;
+        case 'markdown':
+            document.getElementById('markdownMode').classList.add('active', 'btn-primary');
+            document.getElementById('markdownEditor').classList.add('active');
+            // Convert rich text to markdown if switching from rich text
+            if (currentMode === 'richtext') {
+                const html = quill.root.innerHTML;
+                document.getElementById('markdownTextarea').value = htmlToMarkdown(html);
+            }
+            break;
+        case 'preview':
+            document.getElementById('previewMode').classList.add('active', 'btn-primary');
+            // Hide editor section
+            document.querySelector('.editor-section').style.display = 'none';
+            document.querySelector('.preview-section').style.flex = '1';
+            break;
+    }
+
+    if (mode !== 'preview') {
+        document.querySelector('.editor-section').style.display = 'flex';
+        document.querySelector('.preview-section').style.flex = '1';
+    }
+
+    updatePreview();
+}
+
+// Markdown editor functions
+function insertMarkdown(before, after) {
+    const textarea = document.getElementById('markdownTextarea');
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selectedText = textarea.value.substring(start, end);
+    const replacement = before + selectedText + after;
+    
+    textarea.value = textarea.value.substring(0, start) + replacement + textarea.value.substring(end);
+    textarea.focus();
+    textarea.setSelectionRange(start + before.length, start + before.length + selectedText.length);
+    
+    updatePreview();
+}
+
+function insertTable() {
+    const table = '\n| Header 1 | Header 2 | Header 3 |\n|----------|----------|----------|\n| Cell 1   | Cell 2   | Cell 3   |\n| Cell 4   | Cell 5   | Cell 6   |\n';
+    const textarea = document.getElementById('markdownTextarea');
+    const start = textarea.selectionStart;
+    
+    textarea.value = textarea.value.substring(0, start) + table + textarea.value.substring(start);
+    textarea.focus();
+    textarea.setSelectionRange(start + table.length, start + table.length);
+    
+    updatePreview();
+}
+
+// Update preview on markdown change
+document.getElementById('markdownTextarea').addEventListener('input', updatePreview);
+
+// Convert HTML to Markdown (basic conversion)
+function htmlToMarkdown(html) {
+    let markdown = html;
+    
+    // Headers
+    markdown = markdown.replace(/<h1[^>]*>(.*?)<\/h1>/gi, '# $1\n');
+    markdown = markdown.replace(/<h2[^>]*>(.*?)<\/h2>/gi, '## $1\n');
+    markdown = markdown.replace(/<h3[^>]*>(.*?)<\/h3>/gi, '### $1\n');
+    
+    // Bold and italic
+    markdown = markdown.replace(/<strong[^>]*>(.*?)<\/strong>/gi, '**$1**');
+    markdown = markdown.replace(/<b[^>]*>(.*?)<\/b>/gi, '**$1**');
+    markdown = markdown.replace(/<em[^>]*>(.*?)<\/em>/gi, '*$1*');
+    markdown = markdown.replace(/<i[^>]*>(.*?)<\/i>/gi, '*$1*');
+    
+    // Links
+    markdown = markdown.replace(/<a[^>]+href="([^"]*)"[^>]*>(.*?)<\/a>/gi, '[$2]($1)');
+    
+    // Images
+    markdown = markdown.replace(/<img[^>]+src="([^"]*)"[^>]*alt="([^"]*)"[^>]*>/gi, '![$2]($1)');
+    
+    // Lists
+    markdown = markdown.replace(/<ul[^>]*>(.*?)<\/ul>/gis, (match, content) => {
+        return content.replace(/<li[^>]*>(.*?)<\/li>/gi, '- $1\n');
+    });
+    
+    markdown = markdown.replace(/<ol[^>]*>(.*?)<\/ol>/gis, (match, content) => {
+        let index = 1;
+        return content.replace(/<li[^>]*>(.*?)<\/li>/gi, () => {
+            return `${index++}. $1\n`;
+        });
+    });
+    
+    // Paragraphs
+    markdown = markdown.replace(/<p[^>]*>(.*?)<\/p>/gi, '$1\n\n');
+    
+    // Line breaks
+    markdown = markdown.replace(/<br[^>]*>/gi, '\n');
+    
+    // Remove remaining HTML tags
+    markdown = markdown.replace(/<[^>]*>/g, '');
+    
+    // Clean up extra whitespace
+    markdown = markdown.replace(/\n\n+/g, '\n\n').trim();
+    
+    return markdown;
+}
+
+// Update preview function
+function updatePreview() {
+    let content = '';
+    
+    if (currentMode === 'richtext') {
+        content = quill.root.innerHTML;
+    } else if (currentMode === 'markdown') {
+        const markdownContent = document.getElementById('markdownTextarea').value;
+        content = marked.parse(markdownContent);
+    }
+    
+    currentContent = DOMPurify.sanitize(content);
+    paginateContent();
+}
+
+// Paginate content
+function paginateContent() {
+    const container = document.getElementById('previewContainer');
+    container.innerHTML = '';
+    
+    // Create a temporary element to measure content
+    const tempDiv = document.createElement('div');
+    tempDiv.style.cssText = 'position: absolute; visibility: hidden; width: 130mm; font-size: 16px; line-height: 1.6;';
+    tempDiv.innerHTML = currentContent;
+    document.body.appendChild(tempDiv);
+    
+    // Split content into pages
+    const maxHeight = 200; // mm - approximate content area height
+    const elements = Array.from(tempDiv.children);
+    pages = [];
+    let currentPage = [];
+    let currentHeight = 0;
+    
+    elements.forEach(element => {
+        const elementHeight = element.offsetHeight / 3.78; // Convert px to mm (approximate)
+        
+        if (currentHeight + elementHeight > maxHeight && currentPage.length > 0) {
+            pages.push(currentPage);
+            currentPage = [];
+            currentHeight = 0;
+        }
+        
+        currentPage.push(element.outerHTML);
+        currentHeight += elementHeight;
+    });
+    
+    if (currentPage.length > 0) {
+        pages.push(currentPage);
+    }
+    
+    // If no pages created, create one with all content
+    if (pages.length === 0) {
+        pages.push([currentContent]);
+    }
+    
+    document.body.removeChild(tempDiv);
+    
+    // Create preview pages
+    pages.forEach((pageContent, index) => {
+        const pageDiv = createPreviewPage(pageContent.join(''), index + 1);
+        container.appendChild(pageDiv);
+    });
+    
+    // Update page info
+    document.getElementById('currentPage').textContent = '1';
+    document.getElementById('totalPages').textContent = pages.length;
+}
+
+// Create preview page
+function createPreviewPage(content, pageNumber) {
+    const pageDiv = document.createElement('div');
+    pageDiv.className = 'preview-page';
+    pageDiv.innerHTML = `
+        <!-- Background Logo -->
+        <img src="logo.png" alt="OmegaTech Solution Logo" class="preview-watermark">
+        
+        <!-- Header Section -->
+        <div class="preview-header-section">
+            <img src="logo.png" alt="OmegaTech Solution" class="preview-logo">
+            <div class="preview-company-info">
+                <h1 class="preview-company-name">OMEGATECH SOLUTION</h1>
+            </div>
+        </div>
+        
+        <!-- Content Area -->
+        <div class="preview-content-area">
+            ${content}
+        </div>
+        
+        <!-- Footer -->
+        <div class="preview-footer">
+            <div class="preview-footer-content">
+                <div class="footer-left">
+                    <div class="footer-item">
+                        <svg class="footer-icon" viewBox="0 0 24 24">
+                            <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                        </svg>
+                        hello@omegatechsolution.org
+                    </div>
+                    <div class="footer-item">
+                        <svg class="footer-icon" viewBox="0 0 24 24">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+                        </svg>
+                        https://omegatechsolution.org
+                    </div>
+                </div>
+                <div class="footer-right">
+                    <div class="footer-item">
+                        <svg class="footer-icon" viewBox="0 0 24 24">
+                            <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
+                        </svg>
+                        +960 9198026
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+    
+    return pageDiv;
+}
+
+// PDF Quality Settings
+const pdfQualitySettings = {
+    low: { scale: 0.8, quality: 0.7, compression: 'FAST' },
+    medium: { scale: 1.2, quality: 0.85, compression: 'FAST' },
+    high: { scale: 1.5, quality: 0.95, compression: 'SLOW' }
+};
+
+// Dropdown menu functionality
+document.getElementById('exportPdfBtn').addEventListener('click', (e) => {
+    e.stopPropagation();
+    const menu = document.getElementById('pdfQualityMenu');
+    menu.classList.toggle('show');
+});
+
+// Close dropdown when clicking outside
+document.addEventListener('click', () => {
+    document.getElementById('pdfQualityMenu').classList.remove('show');
+});
+
+// Handle PDF export with quality selection
+document.querySelectorAll('.dropdown-item').forEach(item => {
+    item.addEventListener('click', async (e) => {
+        const quality = e.target.getAttribute('data-quality');
+        document.getElementById('pdfQualityMenu').classList.remove('show');
+        await exportPDF(quality);
+    });
+});
+
+// Export to PDF function
+async function exportPDF(quality = 'medium') {
+    const { jsPDF } = window.jspdf;
+    const settings = pdfQualitySettings[quality];
+    
+    // Show export modal
+    const modal = createExportModal(`Generating ${quality} quality PDF...`);
+    document.body.appendChild(modal);
+    
+    try {
+        const pdf = new jsPDF('p', 'mm', 'a4', true); // Enable compression
+        const pageWidth = pdf.internal.pageSize.getWidth();
+        const pageHeight = pdf.internal.pageSize.getHeight();
+        
+        for (let i = 0; i < pages.length; i++) {
+            // Update progress
+            updateExportProgress(modal, (i / pages.length) * 100);
+            
+            // Create a temporary page for rendering
+            const tempPage = createPreviewPage(pages[i].join(''), i + 1);
+            tempPage.style.cssText = 'position: absolute; left: -9999px; width: 210mm; height: 297mm; background: white;';
+            document.body.appendChild(tempPage);
+            
+            // Wait for images to load
+            await waitForImages(tempPage);
+            
+            // Render to canvas with quality-based settings
+            const canvas = await html2canvas(tempPage, {
+                scale: settings.scale,
+                useCORS: true,
+                backgroundColor: '#ffffff',
+                logging: false,
+                imageTimeout: 15000,
+                removeContainer: true,
+                allowTaint: false,
+                foreignObjectRendering: false
+            });
+            
+            // Convert to JPEG with quality-based compression
+            const imgData = canvas.toDataURL('image/jpeg', settings.quality);
+            if (i > 0) {
+                pdf.addPage();
+            }
+            
+            // Add image with compression
+            pdf.addImage(imgData, 'JPEG', 0, 0, pageWidth, pageHeight, undefined, settings.compression);
+            
+            // Clean up
+            document.body.removeChild(tempPage);
+            
+            // Clear canvas to free memory
+            canvas.width = 0;
+            canvas.height = 0;
+        }
+        
+        // Update progress to 100%
+        updateExportProgress(modal, 100);
+        
+        // Save PDF with compression
+        const pdfOutput = pdf.output('blob');
+        const url = URL.createObjectURL(pdfOutput);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `letter-omegatech-${quality}.pdf`;
+        a.click();
+        URL.revokeObjectURL(url);
+        
+        // Close modal after a short delay
+        setTimeout(() => {
+            document.body.removeChild(modal);
+        }, 500);
+        
+    } catch (error) {
+        console.error('Error generating PDF:', error);
+        alert('Error generating PDF. Please try again.');
+        document.body.removeChild(modal);
+    }
+}
+
+// Export to HTML
+document.getElementById('exportHtml').addEventListener('click', () => {
+    // Create HTML document
+    let htmlContent = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OmegaTech Solution - Letter</title>
+    <style>
+        ${getExportStyles()}
+    </style>
+</head>
+<body>
+    <div class="letterhead-container">`;
+    
+    // Add each page
+    pages.forEach((pageContent, index) => {
+        htmlContent += `
+        <div class="page">
+            <!-- Background Logo -->
+            <img src="logo.png" alt="OmegaTech Solution Logo" class="company-logo-bg">
+            
+            <!-- Header Section -->
+            <div class="header">
+                <img src="logo.png" alt="OmegaTech Solution" class="header-logo">
+                <div class="company-info">
+                    <h1 class="company-name">OMEGATECH SOLUTION</h1>
+                </div>
+            </div>
+            
+            <!-- Content Area -->
+            <div class="content-area">
+                ${pageContent.join('')}
+            </div>
+            
+            <!-- Footer -->
+            <div class="footer">
+                <div class="footer-content">
+                    <div class="footer-left">
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                            </svg>
+                            hello@omegatechsolution.org
+                        </div>
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+                            </svg>
+                            https://omegatechsolution.org
+                        </div>
+                    </div>
+                    <div class="footer-right">
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
+                            </svg>
+                            +960 9198026
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>`;
+    });
+    
+    htmlContent += `
+    </div>
+</body>
+</html>`;
+    
+    // Download HTML file
+    const blob = new Blob([htmlContent], { type: 'text/html' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'letter-omegatech.html';
+    a.click();
+    URL.revokeObjectURL(url);
+});
+
+// Helper functions
+function createExportModal(message) {
+    const modal = document.createElement('div');
+    modal.className = 'export-modal';
+    modal.innerHTML = `
+        <div class="export-modal-content">
+            <h3>${message}</h3>
+            <div class="export-progress">
+                <div class="export-progress-bar" style="width: 0%"></div>
+            </div>
+        </div>
+    `;
+    return modal;
+}
+
+function updateExportProgress(modal, percent) {
+    const progressBar = modal.querySelector('.export-progress-bar');
+    progressBar.style.width = percent + '%';
+}
+
+function waitForImages(element) {
+    const images = element.querySelectorAll('img');
+    const promises = Array.from(images).map(img => {
+        return new Promise((resolve) => {
+            if (img.complete) {
+                resolve();
+            } else {
+                img.onload = resolve;
+                img.onerror = resolve;
+            }
+        });
+    });
+    return Promise.all(promises);
+}
+
+function getExportStyles() {
+    return `
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: #f8f9fa;
+            color: #333;
+            line-height: 1.6;
+        }
+        
+        .letterhead-container {
+            width: 210mm;
+            margin: 0 auto;
+            padding: 0;
+            box-sizing: border-box;
+            background: white;
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            position: relative;
+        }
+        
+        .page {
+            width: 210mm;
+            height: 297mm;
+            padding: 40px;
+            box-sizing: border-box;
+            page-break-after: always;
+            position: relative;
+            background: white;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .page:last-child {
+            page-break-after: auto;
+        }
+        
+        .company-logo-bg {
+            max-width: 600px;
+            opacity: 0.08;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
+            pointer-events: none;
+        }
+        
+        .header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 40px;
+            position: relative;
+            z-index: 10;
+            flex-shrink: 0;
+        }
+        
+        .header-logo {
+            width: 60px;
+            height: 60px;
+            margin-right: 20px;
+            flex-shrink: 0;
+        }
+        
+        .company-info {
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .company-name {
+            font-size: 24px;
+            font-weight: bold;
+            color: #2c3e50;
+            margin: 0;
+            letter-spacing: 0.5px;
+        }
+        
+        .content-area {
+            flex: 1;
+            position: relative;
+            z-index: 10;
+            overflow: hidden;
+        }
+        
+        .content-area h1 {
+            font-size: 28px;
+            margin: 20px 0 15px 0;
+            color: #2c3e50;
+        }
+        
+        .content-area h2 {
+            font-size: 22px;
+            margin: 18px 0 12px 0;
+            color: #34495e;
+        }
+        
+        .content-area h3 {
+            font-size: 18px;
+            margin: 15px 0 10px 0;
+            color: #34495e;
+        }
+        
+        .content-area p {
+            margin: 10px 0;
+            line-height: 1.6;
+        }
+        
+        .content-area ul, .content-area ol {
+            margin: 10px 0;
+            padding-left: 25px;
+        }
+        
+        .content-area img {
+            max-width: 100%;
+            height: auto;
+            margin: 10px 0;
+        }
+        
+        .content-area table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 15px 0;
+        }
+        
+        .content-area th, .content-area td {
+            border: 1px solid #ddd;
+            padding: 8px;
+            text-align: left;
+        }
+        
+        .content-area th {
+            background-color: #f8f8f8;
+            font-weight: bold;
+        }
+        
+        .footer {
+            margin-top: auto;
+            padding-top: 25px;
+            border-top: 1px solid #ecf0f1;
+            position: relative;
+            z-index: 10;
+            flex-shrink: 0;
+        }
+        
+        .footer-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            max-width: 100%;
+        }
+        
+        .footer-left, .footer-right {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        
+        .footer-item {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #666;
+        }
+        
+        .footer-icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+            fill: #666;
+            flex-shrink: 0;
+        }
+        
+        @media print {
+            body {
+                background: white;
+            }
+            
+            .letterhead-container {
+                width: 100%;
+                margin: 0;
+                box-shadow: none;
+            }
+            
+            .page {
+                page-break-after: always;
+                margin: 0;
+                padding: 20mm;
+            }
+            
+            .page:last-child {
+                page-break-after: avoid;
+            }
+            
+            .company-logo-bg {
+                max-width: 500px;
+                opacity: 0.05;
+            }
+        }
+    `;
+}
+
+// Initialize on page load
+document.addEventListener('DOMContentLoaded', () => {
+    initQuill();
+    updatePreview();
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..28b5d74
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file
diff --git a/logo.png b/logo.png
new file mode 100644
index 0000000..830dcdc
Binary files /dev/null and b/logo.png differ
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..a934aa1
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,443 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #f5f5f5;
+    overflow: hidden;
+}
+
+/* App Container */
+.app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+/* Toolbar */
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    background-color: #2c3e50;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.toolbar-left, .toolbar-right {
+    display: flex;
+    gap: 10px;
+}
+
+/* Buttons */
+.btn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    transition: all 0.3s ease;
+    background-color: #34495e;
+    color: white;
+}
+
+.btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+}
+
+.btn-primary {
+    background-color: #3498db;
+}
+
+.btn-primary.active {
+    background-color: #2980b9;
+}
+
+.btn-success {
+    background-color: #27ae60;
+}
+
+.btn-info {
+    background-color: #16a085;
+}
+
+/* Main Content */
+.main-content {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* Editor Section */
+.editor-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: white;
+    border-right: 1px solid #ddd;
+}
+
+.editor-mode {
+    display: none;
+    flex-direction: column;
+    height: 100%;
+}
+
+.editor-mode.active {
+    display: flex;
+}
+
+/* Quill Editor */
+#quillToolbar {
+    border: 1px solid #ccc;
+    border-bottom: none;
+}
+
+#quillEditor {
+    flex: 1;
+    overflow-y: auto;
+    font-size: 16px;
+}
+
+.ql-container {
+    font-size: 16px;
+}
+
+/* Markdown Editor */
+.markdown-toolbar {
+    display: flex;
+    gap: 5px;
+    padding: 10px;
+    background-color: #f8f8f8;
+    border-bottom: 1px solid #ddd;
+}
+
+.markdown-toolbar button {
+    width: 35px;
+    height: 35px;
+    border: 1px solid #ddd;
+    background-color: white;
+    cursor: pointer;
+    font-weight: bold;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.markdown-toolbar button:hover {
+    background-color: #e8e8e8;
+}
+
+#markdownTextarea {
+    flex: 1;
+    padding: 20px;
+    border: none;
+    font-family: 'Consolas', 'Monaco', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    resize: none;
+    outline: none;
+}
+
+/* Preview Section */
+.preview-section {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background-color: #e8e8e8;
+    overflow: hidden;
+}
+
+.preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    background-color: white;
+    border-bottom: 1px solid #ddd;
+}
+
+.preview-header h3 {
+    color: #2c3e50;
+}
+
+.page-info {
+    color: #7f8c8d;
+    font-size: 14px;
+}
+
+.preview-container {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+/* Preview Page Styles */
+.preview-page {
+    width: 210mm;
+    min-height: 297mm;
+    background: white;
+    box-shadow: 0 0 20px rgba(0,0,0,0.1);
+    padding: 40px;
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+.preview-watermark {
+    max-width: 600px;
+    opacity: 0.08;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    pointer-events: none;
+}
+
+.preview-header-section {
+    display: flex;
+    align-items: center;
+    margin-bottom: 40px;
+    position: relative;
+    z-index: 10;
+}
+
+.preview-logo {
+    width: 60px;
+    height: 60px;
+    margin-right: 20px;
+}
+
+.preview-company-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.preview-company-name {
+    font-size: 24px;
+    font-weight: bold;
+    color: #2c3e50;
+    margin: 0;
+    letter-spacing: 0.5px;
+}
+
+.preview-content-area {
+    flex: 1;
+    position: relative;
+    z-index: 10;
+    overflow: hidden;
+}
+
+.preview-content-area h1 {
+    font-size: 28px;
+    margin: 20px 0 15px 0;
+    color: #2c3e50;
+}
+
+.preview-content-area h2 {
+    font-size: 22px;
+    margin: 18px 0 12px 0;
+    color: #34495e;
+}
+
+.preview-content-area h3 {
+    font-size: 18px;
+    margin: 15px 0 10px 0;
+    color: #34495e;
+}
+
+.preview-content-area p {
+    margin: 10px 0;
+    line-height: 1.6;
+}
+
+.preview-content-area ul, .preview-content-area ol {
+    margin: 10px 0;
+    padding-left: 25px;
+}
+
+.preview-content-area img {
+    max-width: 100%;
+    height: auto;
+    margin: 10px 0;
+}
+
+.preview-content-area table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 15px 0;
+}
+
+.preview-content-area th, .preview-content-area td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: left;
+}
+
+.preview-content-area th {
+    background-color: #f8f8f8;
+    font-weight: bold;
+}
+
+.preview-footer {
+    margin-top: auto;
+    padding-top: 25px;
+    border-top: 1px solid #ecf0f1;
+    position: relative;
+    z-index: 10;
+}
+
+.preview-footer-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.footer-left, .footer-right {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.footer-item {
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    color: #666;
+}
+
+.footer-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+    fill: #666;
+}
+
+/* Responsive */
+@media (max-width: 1400px) {
+    .preview-page {
+        transform: scale(0.8);
+        transform-origin: top center;
+    }
+}
+
+@media (max-width: 1200px) {
+    .preview-page {
+        transform: scale(0.7);
+    }
+}
+
+/* Loading State */
+.loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    color: #666;
+}
+
+.loading::after {
+    content: '.';
+    animation: dots 1.5s infinite;
+}
+
+@keyframes dots {
+    0%, 20% { content: '.'; }
+    40% { content: '..'; }
+    60%, 100% { content: '...'; }
+}
+
+/* Dropdown */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-toggle::after {
+    content: '▼';
+    font-size: 10px;
+    margin-left: 5px;
+}
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    display: none;
+    z-index: 100;
+    min-width: 180px;
+}
+
+.dropdown-menu.show {
+    display: block;
+}
+
+.dropdown-item {
+    display: block;
+    width: 100%;
+    padding: 10px 15px;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+}
+
+.dropdown-item:hover {
+    background-color: #f0f0f0;
+}
+
+/* Export Modal */
+.export-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0,0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.export-modal-content {
+    background-color: white;
+    padding: 30px;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
+}
+
+.export-progress {
+    margin-top: 20px;
+    width: 300px;
+    height: 4px;
+    background-color: #ecf0f1;
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.export-progress-bar {
+    height: 100%;
+    background-color: #3498db;
+    transition: width 0.3s ease;
+}
\ No newline at end of file
diff --git a/template.html b/template.html
new file mode 100644
index 0000000..5e0c7ce
--- /dev/null
+++ b/template.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OmegaTech Solution - Letterhead</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: #f8f9fa;
+            color: #333;
+            line-height: 1.6;
+        }
+        
+        .letterhead-container {
+            width: 210mm;
+            margin: 0 auto;
+            padding: 0;
+            box-sizing: border-box;
+            background: white;
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            position: relative;
+        }
+        
+        .page {
+            width: 210mm;
+            height: 297mm;
+            padding: 40px;
+            box-sizing: border-box;
+            page-break-after: auto;
+            position: relative;
+            background: white;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .company-logo-bg {
+            max-width: 600px;
+            opacity: 0.08;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
+            pointer-events: none;
+        }
+        
+        .header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 40px;
+            position: relative;
+            z-index: 10;
+            flex-shrink: 0;
+        }
+        
+        .header-logo {
+            width: 60px;
+            height: 60px;
+            margin-right: 20px;
+            flex-shrink: 0;
+        }
+        
+        .company-info {
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .company-name {
+            font-size: 24px;
+            font-weight: bold;
+            color: #2c3e50;
+            margin: 0;
+            letter-spacing: 0.5px;
+        }
+        
+        .company-tagline {
+            font-size: 14px;
+            color: #7f8c8d;
+            margin: 2px 0 0 0;
+        }
+        
+        .content-area {
+            flex: 1;
+            position: relative;
+            z-index: 10;
+            overflow: hidden;
+            max-height: 200mm; /* Increased max height to use more available space */
+        }
+        
+        .footer {
+            margin-top: auto;
+            padding-top: 25px;
+            border-top: 1px solid #ecf0f1;
+            position: relative;
+            z-index: 10;
+            flex-shrink: 0;
+        }
+        
+        .footer-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            max-width: 100%;
+        }
+        
+        .footer-left, .footer-right {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        
+        .footer-item {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #666;
+        }
+        
+        .footer-icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+            fill: #666;
+            flex-shrink: 0;
+        }
+        
+        /* Print styles */
+        @media print {
+            body {
+                background: white;
+            }
+            
+            .letterhead-container {
+                width: 100%;
+                margin: 0;
+                box-shadow: none;
+            }
+            
+            .page {
+                page-break-after: always;
+                margin: 0;
+                padding: 20mm;
+            }
+            
+            .page:last-child {
+                page-break-after: avoid;
+            }
+            
+            .company-logo-bg {
+                max-width: 500px;
+                opacity: 0.05;
+            }
+        }
+        
+        /* PDF generation styles */
+        .pdf-mode {
+            background: white;
+        }
+        
+        .pdf-mode .letterhead-container {
+            box-shadow: none;
+        }
+        
+        .pdf-mode .company-logo-bg {
+            position: absolute;
+            top: 200px;
+            left: 50px;
+            transform: none;
+            max-width: 500px;
+            opacity: 0.05;
+        }
+    </style>
+</head>
+<body>
+    <div class="letterhead-container">
+        <!-- Background Logo -->
+        <img src="logo.png" alt="OmegaTech Solution Logo" class="company-logo-bg">
+        
+        <div class="page">
+            <!-- Header Section -->
+            <div class="header">
+                <img src="logo.png" alt="OmegaTech Solution" class="header-logo">
+                <div class="company-info">
+                    <h1 class="company-name">OMEGATECH SOLUTION</h1>
+<!--`                    <p class="company-tagline">Technology Solutions</p>-->
+                </div>
+            </div>
+            
+            <!-- Content Area -->
+            <div class="content-area">
+                <!-- Content will be injected here -->
+            </div>
+            
+            <!-- Footer -->
+            <div class="footer">
+                <div class="footer-content">
+                    <div class="footer-left">
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                            </svg>
+                            hello@omegatechsolution.org
+                        </div>
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+                            </svg>
+                            https://omegatechsolution.org
+                        </div>
+                    </div>
+                    <div class="footer-right">
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
+                            </svg>
+                            +960 9198026
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/template_backup.html b/template_backup.html
new file mode 100644
index 0000000..53f1062
--- /dev/null
+++ b/template_backup.html
@@ -0,0 +1,227 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OmegaTech Solution - Letterhead</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            margin: 0;
+            padding: 0;
+            background: #f8f9fa;
+            color: #333;
+            line-height: 1.6;
+        }
+        
+        .letterhead-container {
+            width: 210mm;
+            margin: 0 auto;
+            padding: 0;
+            box-sizing: border-box;
+            background: white;
+            box-shadow: 0 0 20px rgba(0,0,0,0.1);
+            position: relative;
+        }
+        
+        .page {
+            width: 210mm;
+            height: 297mm;
+            padding: 40px;
+            box-sizing: border-box;
+            page-break-after: auto;
+            position: relative;
+            background: white;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .company-logo-bg {
+            max-width: 600px;
+            opacity: 0.08;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1;
+            pointer-events: none;
+        }
+        
+        .header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 40px;
+            position: relative;
+            z-index: 10;
+            flex-shrink: 0;
+        }
+        
+        .header-logo {
+            width: 60px;
+            height: 60px;
+            margin-right: 20px;
+            flex-shrink: 0;
+        }
+        
+        .company-info {
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .company-name {
+            font-size: 24px;
+            font-weight: bold;
+            color: #2c3e50;
+            margin: 0;
+            letter-spacing: 0.5px;
+        }
+        
+        .company-tagline {
+            font-size: 14px;
+            color: #7f8c8d;
+            margin: 2px 0 0 0;
+        }
+        
+        .content-area {
+            flex: 1;
+            position: relative;
+            z-index: 10;
+            overflow: hidden;
+            max-height: 200mm; /* Increased max height to use more available space */
+        }
+        
+        .footer {
+            margin-top: auto;
+            padding-top: 25px;
+            border-top: 1px solid #ecf0f1;
+            position: relative;
+            z-index: 10;
+            flex-shrink: 0;
+        }
+        
+        .footer-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            max-width: 100%;
+        }
+        
+        .footer-left, .footer-right {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        
+        .footer-item {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #666;
+        }
+        
+        .footer-icon {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+            fill: #666;
+            flex-shrink: 0;
+        }
+        
+        /* Print styles */
+        @media print {
+            body {
+                background: white;
+            }
+            
+            .letterhead-container {
+                width: 100%;
+                margin: 0;
+                box-shadow: none;
+            }
+            
+            .page {
+                page-break-after: always;
+                margin: 0;
+                padding: 20mm;
+            }
+            
+            .page:last-child {
+                page-break-after: avoid;
+            }
+            
+            .company-logo-bg {
+                max-width: 500px;
+                opacity: 0.05;
+            }
+        }
+        
+        /* PDF generation styles */
+        .pdf-mode {
+            background: white;
+        }
+        
+        .pdf-mode .letterhead-container {
+            box-shadow: none;
+        }
+        
+        .pdf-mode .company-logo-bg {
+            position: absolute;
+            top: 200px;
+            left: 50px;
+            transform: none;
+            max-width: 500px;
+            opacity: 0.05;
+        }
+    </style>
+</head>
+<body>
+    <div class="letterhead-container">
+        <!-- Background Logo -->
+        <img src="logo.png" alt="OmegaTech Solution Logo" class="company-logo-bg">
+        
+        <div class="page">
+            <!-- Header Section -->
+            <div class="header">
+                <img src="logo.png" alt="OmegaTech Solution" class="header-logo">
+                <div class="company-info">
+                    <h1 class="company-name">OMEGATECH SOLUTION</h1>
+<!--`                    <p class="company-tagline">Technology Solutions</p>-->
+                </div>
+            </div>
+            
+            <!-- Content Area -->
+            <div class="content-area">
+                <!-- Content will be injected here -->
+            </div>
+            
+            <!-- Footer -->
+            <div class="footer">
+                <div class="footer-content">
+                    <div class="footer-left">
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
+                            </svg>
+                            hello@omegatechsolution.org
+                        </div>
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
+                            </svg>
+                            https://omegatechsolution.org
+                        </div>
+                    </div>
+                    <div class="footer-right">
+                        <div class="footer-item">
+                            <svg class="footer-icon" viewBox="0 0 24 24">
+                                <path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
+                            </svg>
+                            +960 9198026
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>