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>Matcha Client</title>
7 <link
8 rel="stylesheet"
9 href="https://www.nerdfonts.com/assets/css/webfont.css"
10 />
11 <link rel="stylesheet" href="style.css" />
12 <link rel="preconnect" href="https://fonts.googleapis.com" />
13 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
14 <link rel="icon" type="image/png" href="assets/favicon.ico" />
15 <link
16 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap"
17 rel="stylesheet"
18 />
19 </head>
20 <body>
21 <div class="gradient-bg"></div>
22
23 <header>
24 <nav>
25 <a href="/" class="logo">
26 <img
27 src="assets/logo-transparent.png"
28 alt="Matcha"
29 class="logo-icon"
30 width="24"
31 height="24"
32 />
33 <span class="logo-text">Matcha</span>
34 </a>
35 <div class="nav-links">
36 <a href="#features">Features</a>
37 <a href="#installation">Install</a>
38 <a href="#usage">Usage</a>
39 <a
40 href="https://github.com/floatpane/matcha"
41 target="_blank"
42 class="github-link"
43 >
44 <svg
45 height="20"
46 width="20"
47 viewBox="0 0 16 16"
48 fill="currentColor"
49 >
50 <path
51 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"
52 />
53 </svg>
54 GitHub
55 </a>
56 </div>
57 </nav>
58 </header>
59
60 <main>
61 <!-- Hero Section -->
62 <section class="hero">
63 <div class="hero-badges">
64 <span class="badge">MIT License</span>
65 <span class="badge">macOS & Linux</span>
66 <span class="badge">Written in Go</span>
67 </div>
68
69 <h1 class="hero-title">
70 The Ultimate<br />
71 <span class="gradient-text">Terminal Email Client.</span>
72 </h1>
73
74 <p class="hero-subtitle">
75 Never leave your command line to check your inbox or send an
76 email again. A beautiful TUI for power users who live in the
77 terminal.
78 </p>
79
80 <div class="hero-cta">
81 <a href="#installation" class="btn btn-primary">
82 <span class="btn-icon">⬇</span>
83 Download Now
84 </a>
85 <a
86 href="https://github.com/floatpane/matcha"
87 target="_blank"
88 class="btn btn-secondary"
89 >
90 View on GitHub
91 </a>
92 </div>
93 </section>
94
95 <!-- Terminal Preview Section -->
96 <section class="preview" id="preview">
97 <h2 class="section-title">Live Preview</h2>
98
99 <div class="terminal-window">
100 <div class="terminal-header">
101 <div class="terminal-buttons">
102 <span class="terminal-btn red"></span>
103 <span class="terminal-btn yellow"></span>
104 <span class="terminal-btn green"></span>
105 </div>
106 <span class="terminal-title">matcha — zsh</span>
107 </div>
108 <div class="terminal-body">
109 <pre class="tui-ascii-logo">
110 __ __
111 __ _ ___ _/ /_____/ / ___ _
112 / ' \/ _ `/ __/ __/ _ \/ _ `/
113/_/_/_/\_,_/\__/\__/_//_/\_,_/</pre
114 >
115 <div class="tui-prompt">What would you like to do?</div>
116 <div class="tui-menu">
117 <div class="tui-menu-item active">
118 <span class="tui-cursor">></span>
119 <span class="tui-option selected"
120 ><i class="nf nf-cod-mail"></i> Inbox</span
121 >
122 </div>
123 <div class="tui-menu-item">
124 <span class="tui-cursor-space"></span>
125 <span class="tui-option"
126 ><i class="nf nf-cod-mail_read"></i> Compose
127 Email</span
128 >
129 </div>
130 <div class="tui-menu-item">
131 <span class="tui-cursor-space"></span>
132 <span class="tui-option"
133 ><i class="nf nf-fa-send"></i> Sent</span
134 >
135 </div>
136 <div class="tui-menu-item">
137 <span class="tui-cursor-space"></span>
138 <span class="tui-option"
139 ><i class="nf nf-cod-comment_draft"></i>
140 Drafts</span
141 >
142 </div>
143 <div class="tui-menu-item">
144 <span class="tui-cursor-space"></span>
145 <span class="tui-option"
146 ><i class="nf nf-fa-gear"></i>
147 Settings</span
148 >
149 </div>
150 <div class="tui-menu-item">
151 <span class="tui-cursor-space"></span>
152 <span class="tui-option"
153 ><i class="nf nf-cod-trash"></i> Trash &
154 Archive</span
155 >
156 </div>
157 </div>
158 <div class="tui-hint">
159 Use <span class="tui-key">↑/↓</span> to navigate,
160 enter to select, and
161 <span class="tui-key">ctrl+c</span> to quit.
162 </div>
163 </div>
164 </div>
165 </section>
166
167 <!-- Features Section -->
168 <section class="features" id="features">
169 <h2 class="section-title">Features</h2>
170
171 <div class="features-grid">
172 <div class="feature-card">
173 <div class="feature-icon">📬</div>
174 <h3>View Your Inbox</h3>
175 <p>
176 Fetches and displays a list of your most recent
177 emails with beautiful formatting and quick
178 navigation.
179 </p>
180 </div>
181
182 <div class="feature-card">
183 <div class="feature-icon">📖</div>
184 <h3>Read Emails</h3>
185 <p>
186 Select an email from your inbox to view its full
187 content with proper text rendering and attachments.
188 </p>
189 </div>
190
191 <div class="feature-card">
192 <div class="feature-icon">✍️</div>
193 <h3>Compose & Send</h3>
194 <p>
195 A simple and intuitive interface for writing and
196 sending new emails without leaving your terminal.
197 </p>
198 </div>
199
200 <div class="feature-card">
201 <div class="feature-icon">🎨</div>
202 <h3>Beautiful TUI</h3>
203 <p>
204 A clean and modern terminal user interface built
205 with Bubble Tea that's a pleasure to use.
206 </p>
207 </div>
208
209 <div class="feature-card">
210 <div class="feature-icon">🔐</div>
211 <h3>Secure</h3>
212 <p>
213 Uses a local configuration file to store your
214 credentials securely. Your data never leaves your
215 machine.
216 </p>
217 </div>
218
219 <div class="feature-card">
220 <div class="feature-icon">⌨️</div>
221 <h3>Keyboard Driven</h3>
222 <p>
223 Navigate, select, and manage your emails entirely
224 with keyboard shortcuts. No mouse required.
225 </p>
226 </div>
227
228 <div class="feature-card">
229 <div class="feature-icon">👥</div>
230 <h3>Multiple Accounts</h3>
231 <p>
232 Manage multiple email accounts in one place. Switch
233 between accounts seamlessly without leaving your
234 terminal.
235 </p>
236 </div>
237
238 <div class="feature-card">
239 <div class="feature-icon">📇</div>
240 <h3>Contacts</h3>
241 <p>
242 Save and manage your contacts locally. Quickly
243 compose emails to your saved contacts with
244 auto-complete support.
245 </p>
246 </div>
247
248 <div class="feature-card">
249 <div class="feature-icon">⚡</div>
250 <h3>Email Caching</h3>
251 <p>
252 Emails are cached locally for faster access. Enjoy
253 instant load times.
254 </p>
255 </div>
256 </div>
257 </section>
258
259 <!-- Installation Section -->
260 <section class="installation" id="installation">
261 <h2 class="section-title">Installation</h2>
262
263 <div class="install-methods">
264 <div class="install-method">
265 <div class="install-header">
266 <h3>Install with Homebrew</h3>
267 <span class="install-badge recommended"
268 >Recommended</span
269 >
270 </div>
271
272 <div class="code-block">
273 <div class="code-header">
274 <span>Terminal</span>
275 <button
276 class="copy-btn"
277 onclick="copyCode(this)"
278 >
279 Copy All
280 </button>
281 </div>
282 <div class="code-body">
283 <div class="code-line">
284 <span class="prompt">~</span>
285 <span class="command">$</span>
286 <span class="code-text"
287 >brew tap floatpane/matcha</span
288 >
289 </div>
290 <div class="code-line">
291 <span class="prompt">~</span>
292 <span class="command">$</span>
293 <span class="code-text"
294 >brew install
295 floatpane/matcha/matcha</span
296 >
297 </div>
298 <div class="code-line">
299 <span class="prompt">~</span>
300 <span class="command">$</span>
301 <span class="code-text">matcha</span>
302 </div>
303 </div>
304 </div>
305 </div>
306
307 <div class="install-method">
308 <h3>Or, Build from Source</h3>
309
310 <div class="install-steps">
311 <div class="install-step">
312 <div class="step-number">1</div>
313 <div class="step-content">
314 <h4>Clone the Repository</h4>
315 <p>
316 Grab the source code from GitHub. Make
317 sure you have Go installed.
318 </p>
319 <div class="code-block small">
320 <div class="code-body">
321 <div class="code-line">
322 <span class="code-text"
323 >git clone
324 https://github.com/floatpane/matcha.git</span
325 >
326 </div>
327 </div>
328 </div>
329 </div>
330 </div>
331
332 <div class="install-step">
333 <div class="step-number">2</div>
334 <div class="step-content">
335 <h4>Build the Binary</h4>
336 <p>
337 Navigate to the project folder and
338 compile.
339 </p>
340 <div class="code-block small">
341 <div class="code-body">
342 <div class="code-line">
343 <span class="code-text"
344 >cd matcha && go build -o
345 matcha</span
346 >
347 </div>
348 </div>
349 </div>
350 </div>
351 </div>
352
353 <div class="install-step">
354 <div class="step-number">3</div>
355 <div class="step-content">
356 <h4>Run It</h4>
357 <p>
358 Execute the binary or move it to your
359 PATH for global access.
360 </p>
361 <div class="code-block small">
362 <div class="code-body">
363 <div class="code-line">
364 <span class="code-text"
365 >./matcha</span
366 >
367 </div>
368 </div>
369 </div>
370 </div>
371 </div>
372 </div>
373 </div>
374 </div>
375 </section>
376
377 <!-- Usage Section -->
378 <section class="usage" id="usage">
379 <h2 class="section-title">Usage</h2>
380
381 <div class="usage-grid">
382 <div class="usage-card">
383 <div class="usage-keys">
384 <kbd>↑</kbd><kbd>↓</kbd>
385 <span class="or">or</span>
386 <kbd>k</kbd><kbd>j</kbd>
387 </div>
388 <h4>Navigate</h4>
389 <p>Move through menus and email lists</p>
390 </div>
391
392 <div class="usage-card">
393 <div class="usage-keys">
394 <kbd>Enter</kbd>
395 </div>
396 <h4>Select</h4>
397 <p>Open emails or confirm actions</p>
398 </div>
399
400 <div class="usage-card">
401 <div class="usage-keys">
402 <kbd>c</kbd>
403 </div>
404 <h4>Compose</h4>
405 <p>Start writing a new email</p>
406 </div>
407
408 <div class="usage-card">
409 <div class="usage-keys">
410 <kbd>Tab</kbd>
411 </div>
412 <h4>Switch Fields</h4>
413 <p>Move between To, Subject, and Body</p>
414 </div>
415
416 <div class="usage-card">
417 <div class="usage-keys">
418 <kbd>Esc</kbd>
419 </div>
420 <h4>Go Back</h4>
421 <p>Return to the previous view</p>
422 </div>
423
424 <div class="usage-card">
425 <div class="usage-keys">
426 <kbd>Ctrl</kbd><span class="plus">+</span
427 ><kbd>C</kbd>
428 </div>
429 <h4>Quit</h4>
430 <p>Exit the application</p>
431 </div>
432 </div>
433
434 <div class="providers">
435 <h3>Supported Providers</h3>
436 <div class="provider-list">
437 <div class="provider">
438 <span class="provider-icon">
439 <svg
440 width="20"
441 height="20"
442 viewBox="0 0 24 24"
443 fill="none"
444 stroke="currentColor"
445 stroke-width="2"
446 stroke-linecap="round"
447 stroke-linejoin="round"
448 >
449 <path
450 d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
451 ></path>
452 <polyline
453 points="22,6 12,13 2,6"
454 ></polyline>
455 </svg>
456 </span>
457 <span>Gmail</span>
458 </div>
459 <div class="provider">
460 <span class="provider-icon">
461 <svg
462 width="20"
463 height="20"
464 viewBox="0 0 24 24"
465 fill="none"
466 stroke="currentColor"
467 stroke-width="2"
468 stroke-linecap="round"
469 stroke-linejoin="round"
470 >
471 <path
472 d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"
473 ></path>
474 </svg>
475 </span>
476 <span>iCloud</span>
477 </div>
478 <div class="provider">
479 <span class="provider-icon">
480 <svg
481 width="20"
482 height="20"
483 viewBox="0 0 24 24"
484 fill="none"
485 stroke="currentColor"
486 stroke-width="2"
487 stroke-linecap="round"
488 stroke-linejoin="round"
489 >
490 <circle cx="12" cy="12" r="3"></circle>
491 <path
492 d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
493 ></path>
494 </svg>
495 </span>
496 <span>Custom</span>
497 </div>
498 </div>
499 </div>
500 </section>
501
502 <!-- Contact Section -->
503 <section class="contact" id="contact">
504 <div class="contact-content">
505 <h2>Get in Touch</h2>
506 <p>
507 Made with ❤️ by
508 <a href="https://floatpane.com" target="_blank"
509 >floatpane</a
510 >
511 </p>
512 <p>
513 For support, please open an issue on the
514 <a
515 href="https://github.com/floatpane/matcha/issues"
516 target="_blank"
517 >GitHub repository</a
518 >.
519 </p>
520
521 <div class="support-links">
522 <a
523 href="https://patreon.com/andrinoff"
524 target="_blank"
525 class="support-link"
526 >
527 <span>❤️</span> Support on Patreon
528 </a>
529 <a
530 href="https://ko-fi.com/andrinoff"
531 target="_blank"
532 class="support-link"
533 >
534 <span>☕</span> Buy us a coffee
535 </a>
536 </div>
537 </div>
538 </section>
539 </main>
540
541 <footer>
542 <div class="footer-content">
543 <div class="footer-brand">
544 <img
545 src="assets/logo-transparent.png"
546 alt="Matcha"
547 class="logo-icon"
548 width="24"
549 height="24"
550 />
551 <span>Matcha</span>
552 </div>
553 <div class="footer-links">
554 <a
555 href="https://github.com/floatpane/matcha/blob/master/LICENSE"
556 target="_blank"
557 >MIT License</a
558 >
559 <a
560 href="https://github.com/floatpane/matcha/blob/master/CODE_OF_CONDUCT.md"
561 target="_blank"
562 >Code of Conduct</a
563 >
564 <a
565 href="https://github.com/floatpane/matcha"
566 target="_blank"
567 >GitHub</a
568 >
569 </div>
570 <p class="copyright">© 2026 floatpane. MIT Licensed.</p>
571 </div>
572 </footer>
573
574 <script>
575 function copyCode(btn) {
576 const codeBlock = btn.closest(".code-block");
577 const codeLines = codeBlock.querySelectorAll(".code-text");
578 const text = Array.from(codeLines)
579 .map((line) => line.textContent)
580 .join("\n");
581
582 navigator.clipboard.writeText(text).then(() => {
583 const originalText = btn.textContent;
584 btn.textContent = "Copied!";
585 btn.classList.add("copied");
586 setTimeout(() => {
587 btn.textContent = originalText;
588 btn.classList.remove("copied");
589 }, 2000);
590 });
591 }
592
593 // Smooth scroll for anchor links
594 document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
595 anchor.addEventListener("click", function (e) {
596 e.preventDefault();
597 const target = document.querySelector(
598 this.getAttribute("href"),
599 );
600 if (target) {
601 target.scrollIntoView({
602 behavior: "smooth",
603 block: "start",
604 });
605 }
606 });
607 });
608 </script>
609 </body>
610</html>