mirror of
https://github.com/Gowtham-Darkseid/MailComposer.git
synced 2026-04-15 16:08:27 +02:00
gowtham-darkseid
44ea4d2e64
- Rich email composer with formatting tools (bold, italic, underline, links) - Multi-recipient support (To, CC, BCC fields) - File attachments with drag & drop support - Priority levels and email validation - Draft management with auto-save and cloud sync - Real email sending via EmailJS integration - Responsive design for mobile and desktop - Comprehensive error handling and fallback modes - Complete documentation and setup guides - Firebase integration ready for advanced features Features: ✅ Real email sending (EmailJS) ✅ Rich text editor ✅ File attachments ✅ Draft management ✅ Form validation ✅ Responsive UI ✅ Error handling ✅ Documentation
153 lines
4.9 KiB
HTML
153 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Mail Composer</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header class="header">
|
|
<h1>📧 Mail Composer</h1>
|
|
<p>Compose and send emails easily</p>
|
|
<div id="emailServiceStatus" class="service-status">
|
|
<span class="status-indicator demo">🔄 Demo Mode</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="main-container">
|
|
<form id="mailForm" class="mail-form">
|
|
<div class="form-group">
|
|
<label for="to">To:</label>
|
|
<input
|
|
type="email"
|
|
id="to"
|
|
name="to"
|
|
placeholder="recipient@example.com"
|
|
required
|
|
multiple
|
|
/>
|
|
<small class="help-text">Separate multiple emails with commas</small>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="cc">CC:</label>
|
|
<input
|
|
type="email"
|
|
id="cc"
|
|
name="cc"
|
|
placeholder="cc@example.com (optional)"
|
|
multiple
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="bcc">BCC:</label>
|
|
<input
|
|
type="email"
|
|
id="bcc"
|
|
name="bcc"
|
|
placeholder="bcc@example.com (optional)"
|
|
multiple
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subject">Subject:</label>
|
|
<input
|
|
type="text"
|
|
id="subject"
|
|
name="subject"
|
|
placeholder="Enter email subject"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="priority">Priority:</label>
|
|
<select id="priority" name="priority">
|
|
<option value="normal">Normal</option>
|
|
<option value="high">High</option>
|
|
<option value="low">Low</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="message">Message:</label>
|
|
<div class="editor-toolbar">
|
|
<button type="button" id="boldBtn" class="toolbar-btn" title="Bold">
|
|
<strong>B</strong>
|
|
</button>
|
|
<button type="button" id="italicBtn" class="toolbar-btn" title="Italic">
|
|
<em>I</em>
|
|
</button>
|
|
<button type="button" id="underlineBtn" class="toolbar-btn" title="Underline">
|
|
<u>U</u>
|
|
</button>
|
|
<button type="button" id="linkBtn" class="toolbar-btn" title="Insert Link">
|
|
🔗
|
|
</button>
|
|
</div>
|
|
<div
|
|
id="message"
|
|
class="message-editor"
|
|
contenteditable="true"
|
|
data-placeholder="Type your message here..."
|
|
></div>
|
|
<div class="char-counter">
|
|
<span id="charCount">0</span> characters
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="attachments">Attachments:</label>
|
|
<div class="file-input-wrapper">
|
|
<input
|
|
type="file"
|
|
id="attachments"
|
|
name="attachments"
|
|
multiple
|
|
accept=".pdf,.doc,.docx,.txt,.jpg,.png,.gif"
|
|
/>
|
|
<label for="attachments" class="file-input-label">
|
|
📎 Choose Files
|
|
</label>
|
|
</div>
|
|
<div id="attachmentList" class="attachment-list"></div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary" id="sendBtn">
|
|
<span class="btn-text">📤 Send Email</span>
|
|
<span class="btn-loading" style="display: none;">⏳ Sending...</span>
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="saveDraftBtn">
|
|
💾 Save Draft
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="clearBtn">
|
|
🗑️ Clear All
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" id="testEmailJSBtn" style="display: none;">
|
|
🧪 Test EmailJS
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div id="messageStatus" class="message-status"></div>
|
|
|
|
<!-- Drafts Section -->
|
|
<section class="drafts-section">
|
|
<h2>📝 Saved Drafts</h2>
|
|
<div id="draftsList" class="drafts-list">
|
|
<p class="no-drafts">No drafts saved yet</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script type="module" src="/main.js"></script>
|
|
</body>
|
|
</html>
|