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