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