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