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