mirror of
https://github.com/Gowtham-Darkseid/MailComposer.git
synced 2026-06-06 16:43:53 +02:00
feat: Complete Mail Composer with EmailJS integration
- 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
This commit is contained in:
gowtham-darkseid
+152
@@ -0,0 +1,152 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user