1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Email CLI - Your Terminal Email Client</title>
7 <link rel="stylesheet" href="style.css" />
8 <link rel="preconnect" href="https://fonts.googleapis.com" />
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10 <link
11 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
12 rel="stylesheet"
13 />
14 </head>
15 <body>
16 <div class="gradient-bg"></div>
17
18 <header>
19 <nav>
20 <a href="/" class="logo">
21 <span class="logo-icon">📧</span>
22 <span class="logo-text">Email CLI</span>
23 </a>
24 <div class="nav-links">
25 <a href="#features">Features</a>
26 <a href="#installation">Install</a>
27 <a href="#usage">Usage</a>
28 <a
29 href="https://github.com/andrinoff/email-cli"
30 target="_blank"
31 class="github-link"
32 >
33 <svg
34 height="20"
35 width="20"
36 viewBox="0 0 16 16"
37 fill="currentColor"
38 >
39 <path
40 d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
41 />
42 </svg>
43 GitHub
44 </a>
45 </div>
46 </nav>
47 </header>
48
49 <main>
50 <!-- Hero Section -->
51 <section class="hero">
52 <div class="hero-badges">
53 <span class="badge">MIT License</span>
54 <span class="badge">macOS & Linux</span>
55 <span class="badge">Written in Go</span>
56 </div>
57
58 <h1 class="hero-title">
59 The Ultimate<br />
60 <span class="gradient-text">Terminal Email Client.</span>
61 </h1>
62
63 <p class="hero-subtitle">
64 Never leave your command line to check your inbox or send an
65 email again. A beautiful TUI for power users who live in the
66 terminal.
67 </p>
68
69 <div class="hero-cta">
70 <a href="#installation" class="btn btn-primary">
71 <span class="btn-icon">⬇</span>
72 Download Now
73 </a>
74 <a
75 href="https://github.com/andrinoff/email-cli"
76 target="_blank"
77 class="btn btn-secondary"
78 >
79 View on GitHub
80 </a>
81 </div>
82 </section>
83
84 <!-- Terminal Preview Section -->
85 <section class="preview" id="preview">
86 <h2 class="section-title">Live Preview</h2>
87
88 <div class="terminal-window">
89 <div class="terminal-header">
90 <div class="terminal-buttons">
91 <span class="terminal-btn red"></span>
92 <span class="terminal-btn yellow"></span>
93 <span class="terminal-btn green"></span>
94 </div>
95 <span class="terminal-title">email-cli — zsh</span>
96 </div>
97 <div class="terminal-body">
98 <div class="tui-badge">Email CLI</div>
99 <div class="tui-prompt">What would you like to do?</div>
100 <div class="tui-menu">
101 <div class="tui-menu-item active">
102 <span class="tui-cursor">></span>
103 <span class="tui-option selected"
104 >View Inbox</span
105 >
106 </div>
107 <div class="tui-menu-item">
108 <span class="tui-cursor-space"></span>
109 <span class="tui-option">Compose Email</span>
110 </div>
111 <div class="tui-menu-item">
112 <span class="tui-cursor-space"></span>
113 <span class="tui-option">Settings</span>
114 </div>
115 </div>
116 <div class="tui-hint">
117 Use <span class="tui-key">↑/↓</span> to navigate,
118 enter to select, and
119 <span class="tui-key">ctrl+c</span> to quit.
120 </div>
121 </div>
122 </div>
123
124 <div class="preview-image-container">
125 <img
126 src="assets/preview.png"
127 alt="Email CLI Preview"
128 class="preview-image"
129 />
130 </div>
131 </section>
132
133 <!-- Features Section -->
134 <section class="features" id="features">
135 <h2 class="section-title">Features</h2>
136
137 <div class="features-grid">
138 <div class="feature-card">
139 <div class="feature-icon">📬</div>
140 <h3>View Your Inbox</h3>
141 <p>
142 Fetches and displays a list of your most recent
143 emails with beautiful formatting and quick
144 navigation.
145 </p>
146 </div>
147
148 <div class="feature-card">
149 <div class="feature-icon">📖</div>
150 <h3>Read Emails</h3>
151 <p>
152 Select an email from your inbox to view its full
153 content with proper text rendering and attachments.
154 </p>
155 </div>
156
157 <div class="feature-card">
158 <div class="feature-icon">✍️</div>
159 <h3>Compose & Send</h3>
160 <p>
161 A simple and intuitive interface for writing and
162 sending new emails without leaving your terminal.
163 </p>
164 </div>
165
166 <div class="feature-card">
167 <div class="feature-icon">🎨</div>
168 <h3>Beautiful TUI</h3>
169 <p>
170 A clean and modern terminal user interface built
171 with Bubble Tea that's a pleasure to use.
172 </p>
173 </div>
174
175 <div class="feature-card">
176 <div class="feature-icon">🔐</div>
177 <h3>Secure</h3>
178 <p>
179 Uses a local configuration file to store your
180 credentials securely. Your data never leaves your
181 machine.
182 </p>
183 </div>
184
185 <div class="feature-card">
186 <div class="feature-icon">⌨️</div>
187 <h3>Keyboard Driven</h3>
188 <p>
189 Navigate, select, and manage your emails entirely
190 with keyboard shortcuts. No mouse required.
191 </p>
192 </div>
193 </div>
194 </section>
195
196 <!-- Installation Section -->
197 <section class="installation" id="installation">
198 <h2 class="section-title">Installation</h2>
199
200 <div class="install-methods">
201 <div class="install-method">
202 <div class="install-header">
203 <span class="install-badge recommended"
204 >Recommended</span
205 >
206 <h3>Install with Homebrew</h3>
207 </div>
208
209 <div class="code-block">
210 <div class="code-header">
211 <span>Terminal</span>
212 <button
213 class="copy-btn"
214 onclick="copyCode(this)"
215 >
216 Copy All
217 </button>
218 </div>
219 <div class="code-body">
220 <div class="code-line">
221 <span class="prompt">~</span>
222 <span class="command">$</span>
223 <span class="code-text"
224 >brew tap andrinoff/email-cli</span
225 >
226 </div>
227 <div class="code-line">
228 <span class="prompt">~</span>
229 <span class="command">$</span>
230 <span class="code-text"
231 >brew install email-cli</span
232 >
233 </div>
234 <div class="code-line">
235 <span class="prompt">~</span>
236 <span class="command">$</span>
237 <span class="code-text">email-cli</span>
238 </div>
239 </div>
240 </div>
241 </div>
242
243 <div class="install-method">
244 <h3>Or, Build from Source</h3>
245
246 <div class="install-steps">
247 <div class="install-step">
248 <div class="step-number">1</div>
249 <div class="step-content">
250 <h4>Clone the Repository</h4>
251 <p>
252 Grab the source code from GitHub. Make
253 sure you have Go installed.
254 </p>
255 <div class="code-block small">
256 <div class="code-body">
257 <div class="code-line">
258 <span class="code-text"
259 >git clone
260 https://github.com/andrinoff/email-cli.git</span
261 >
262 </div>
263 </div>
264 </div>
265 </div>
266 </div>
267
268 <div class="install-step">
269 <div class="step-number">2</div>
270 <div class="step-content">
271 <h4>Build the Binary</h4>
272 <p>
273 Navigate to the project folder and
274 compile.
275 </p>
276 <div class="code-block small">
277 <div class="code-body">
278 <div class="code-line">
279 <span class="code-text"
280 >cd email-cli && go build -o
281 email-cli</span
282 >
283 </div>
284 </div>
285 </div>
286 </div>
287 </div>
288
289 <div class="install-step">
290 <div class="step-number">3</div>
291 <div class="step-content">
292 <h4>Run It</h4>
293 <p>
294 Execute the binary or move it to your
295 PATH for global access.
296 </p>
297 <div class="code-block small">
298 <div class="code-body">
299 <div class="code-line">
300 <span class="code-text"
301 >./email-cli</span
302 >
303 </div>
304 </div>
305 </div>
306 </div>
307 </div>
308 </div>
309 </div>
310 </div>
311 </section>
312
313 <!-- Usage Section -->
314 <section class="usage" id="usage">
315 <h2 class="section-title">Usage</h2>
316
317 <div class="usage-grid">
318 <div class="usage-card">
319 <div class="usage-keys">
320 <kbd>↑</kbd><kbd>↓</kbd>
321 <span class="or">or</span>
322 <kbd>k</kbd><kbd>j</kbd>
323 </div>
324 <h4>Navigate</h4>
325 <p>Move through menus and email lists</p>
326 </div>
327
328 <div class="usage-card">
329 <div class="usage-keys">
330 <kbd>Enter</kbd>
331 </div>
332 <h4>Select</h4>
333 <p>Open emails or confirm actions</p>
334 </div>
335
336 <div class="usage-card">
337 <div class="usage-keys">
338 <kbd>c</kbd>
339 </div>
340 <h4>Compose</h4>
341 <p>Start writing a new email</p>
342 </div>
343
344 <div class="usage-card">
345 <div class="usage-keys">
346 <kbd>Tab</kbd>
347 </div>
348 <h4>Switch Fields</h4>
349 <p>Move between To, Subject, and Body</p>
350 </div>
351
352 <div class="usage-card">
353 <div class="usage-keys">
354 <kbd>Esc</kbd>
355 </div>
356 <h4>Go Back</h4>
357 <p>Return to the previous view</p>
358 </div>
359
360 <div class="usage-card">
361 <div class="usage-keys">
362 <kbd>Ctrl</kbd><span class="plus">+</span
363 ><kbd>C</kbd>
364 </div>
365 <h4>Quit</h4>
366 <p>Exit the application</p>
367 </div>
368 </div>
369
370 <div class="providers">
371 <h3>Supported Providers</h3>
372 <div class="provider-list">
373 <div class="provider">
374 <span class="provider-icon">📧</span>
375 <span>Gmail</span>
376 </div>
377 <div class="provider">
378 <span class="provider-icon">☁️</span>
379 <span>iCloud</span>
380 </div>
381 <div class="provider coming-soon">
382 <span class="provider-icon">📬</span>
383 <span>More coming soon...</span>
384 </div>
385 </div>
386 </div>
387 </section>
388
389 <!-- Contact Section -->
390 <section class="contact" id="contact">
391 <div class="contact-content">
392 <h2>Get in Touch</h2>
393 <p>
394 Made with ❤️ by
395 <a href="https://andrinoff.com" target="_blank"
396 >@andrinoff</a
397 >
398 </p>
399 <p>
400 For support, please open an issue on the
401 <a
402 href="https://github.com/andrinoff/email-cli/issues"
403 target="_blank"
404 >GitHub repository</a
405 >.
406 </p>
407
408 <div class="support-links">
409 <a
410 href="https://patreon.com/andrinoff"
411 target="_blank"
412 class="support-link"
413 >
414 <span>❤️</span> Support on Patreon
415 </a>
416 <a
417 href="https://ko-fi.com/andrinoff"
418 target="_blank"
419 class="support-link"
420 >
421 <span>☕</span> Buy me a coffee
422 </a>
423 </div>
424 </div>
425 </section>
426 </main>
427
428 <footer>
429 <div class="footer-content">
430 <div class="footer-brand">
431 <span class="logo-icon">📧</span>
432 <span>Email CLI</span>
433 </div>
434 <div class="footer-links">
435 <a
436 href="https://github.com/andrinoff/email-cli/blob/main/LICENSE"
437 target="_blank"
438 >MIT License</a
439 >
440 <a
441 href="https://github.com/andrinoff/email-cli/blob/main/CODE_OF_CONDUCT.md"
442 target="_blank"
443 >Code of Conduct</a
444 >
445 <a
446 href="https://github.com/andrinoff/email-cli"
447 target="_blank"
448 >GitHub</a
449 >
450 </div>
451 <p class="copyright">© 2025 Drew Smirnoff. MIT Licensed.</p>
452 </div>
453 </footer>
454
455 <script>
456 function copyCode(btn) {
457 const codeBlock = btn.closest(".code-block");
458 const codeLines = codeBlock.querySelectorAll(".code-text");
459 const text = Array.from(codeLines)
460 .map((line) => line.textContent)
461 .join("\n");
462
463 navigator.clipboard.writeText(text).then(() => {
464 const originalText = btn.textContent;
465 btn.textContent = "Copied!";
466 btn.classList.add("copied");
467 setTimeout(() => {
468 btn.textContent = originalText;
469 btn.classList.remove("copied");
470 }, 2000);
471 });
472 }
473
474 // Smooth scroll for anchor links
475 document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
476 anchor.addEventListener("click", function (e) {
477 e.preventDefault();
478 const target = document.querySelector(
479 this.getAttribute("href"),
480 );
481 if (target) {
482 target.scrollIntoView({
483 behavior: "smooth",
484 block: "start",
485 });
486 }
487 });
488 });
489 </script>
490 </body>
491</html>