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