-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
240 lines (235 loc) · 14.9 KB
/
index.html
File metadata and controls
240 lines (235 loc) · 14.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZGM Firmware — Zephyr Gaming Mouse</title>
<meta name="description" content="ZGM is an open-source, wireless gaming mouse firmware built on Zephyr RTOS. Developed by Keychron for ultra-low power, high-performance gaming.">
<link rel="icon" type="image/svg+xml" href="doc/image assets/favicon.svg">
<script async src="https://f.convertkit.com/ckjs/ck.5.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container nav-container">
<a href="/" class="nav-logo">
<svg class="logo-icon" viewBox="0 0 32 32" width="32" height="32" fill="none">
<rect width="32" height="32" rx="8" fill="currentColor" class="logo-bg"/>
<path d="M8 12L16 8L24 12V20L16 24L8 20V12Z" stroke="var(--bg)" stroke-width="2" fill="none"/>
<circle cx="16" cy="16" r="3" fill="var(--bg)"/>
</svg>
<span class="logo-text">ZGM</span>
</a>
<div class="nav-links">
<div class="nav-divider"></div>
<a href="https://github.com/Keychron/zgm" class="nav-icon-link" aria-label="GitHub" target="_blank" rel="noopener">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
</svg>
</a>
<button class="theme-toggle" aria-label="Toggle theme">
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/>
</svg>
</button>
</div>
<button class="mobile-menu-btn" aria-label="Menu">
<span></span><span></span><span></span>
</button>
</div>
</nav>
<!-- Hero Section -->
<header class="hero">
<div class="container hero-container">
<div class="hero-content">
<div class="hero-badge">Open Source · Built by Keychron</div>
<h1>Open source<br><span class="gradient-text">gaming mouse firmware</span></h1>
<p class="hero-subtitle">
Built on Zephyr RTOS, ZGM brings low-latency input processing, modular
hardware support, and customizable behavior to gaming mice — wired
and wireless. Extending the open-source input device culture from keyboards to mice.
</p>
<div class="hero-actions">
<a href="https://github.com/Keychron/zgm" class="btn btn-secondary" target="_blank" rel="noopener">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" style="margin-right:8px">
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
</svg>
View on GitHub
</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-glow"></div>
<svg class="hero-mouse-icon" viewBox="0 0 200 280" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Mouse body -->
<rect x="30" y="40" width="140" height="200" rx="70" stroke="currentColor" stroke-width="3" fill="none" opacity="0.3"/>
<rect x="40" y="50" width="120" height="180" rx="60" stroke="currentColor" stroke-width="2" fill="none" opacity="0.15"/>
<!-- Center line -->
<line x1="100" y1="40" x2="100" y2="140" stroke="currentColor" stroke-width="2" opacity="0.4"/>
<!-- Scroll wheel -->
<rect x="92" y="80" width="16" height="30" rx="8" stroke="currentColor" stroke-width="2" fill="none" opacity="0.5"/>
<!-- Signal waves -->
<path d="M155 60 C165 55, 170 50, 175 40" stroke="var(--accent)" stroke-width="2" opacity="0.6" fill="none"/>
<path d="M160 70 C175 62, 182 52, 190 38" stroke="var(--accent)" stroke-width="2" opacity="0.4" fill="none"/>
<path d="M163 82 C182 72, 192 58, 202 40" stroke="var(--accent)" stroke-width="2" opacity="0.2" fill="none"/>
<!-- DPI indicator dots -->
<circle cx="100" cy="200" r="3" fill="var(--accent)" opacity="0.8"/>
<circle cx="88" cy="200" r="2" fill="currentColor" opacity="0.3"/>
<circle cx="112" cy="200" r="2" fill="currentColor" opacity="0.3"/>
</svg>
</div>
</div>
</header>
<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
</svg>
</div>
<h3>Zephyr-Powered</h3>
<p>Built on Zephyr RTOS for broad MCU and peripheral support, scalable build tooling, and a maintainable embedded project ecosystem suited to layered hardware abstraction.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
</div>
<h3>Modular Architecture</h3>
<p>A modular driver architecture supports multiple hardware variants. Sensor, button, scroll wheel, and lighting drivers are decoupled layers — swap or extend without rewriting.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="12" cy="12" r="3"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</div>
<h3>Low-Latency Input</h3>
<p>Performance-first input handling with optimized sensor polling, precise button and click processing, and tuned scroll wheel integration for competitive-grade responsiveness.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M5 12.55a11 11 0 0114.08 0M1.42 9a16 16 0 0121.16 0M8.53 16.11a6 6 0 016.95 0M12 20h.01"/>
</svg>
</div>
<h3>Wired & Wireless</h3>
<p>First-class support for both wired USB and wireless architectures, with battery and power management built in. Choose the connection that fits your setup.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
</div>
<h3>Open Source</h3>
<p>GPL-3.0 licensed and fully transparent. Inspect the code, contribute improvements, or fork it for your own builds. Building on the open-source culture of QMK and ZMK.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/>
<circle cx="9" cy="7" r="4"/>
<path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
</svg>
</div>
<h3>Built by Keychron</h3>
<p>Backed by Keychron's hardware expertise, with community visibility from day one. Transparent project direction and a practical validation workflow for real hardware.</p>
</div>
</div>
</div>
</section>
<!-- Subscribe -->
<section class="cta">
<div class="container cta-container">
<div class="hero-subscribe hero-subscribe-centered">
<div class="hero-subscribe-copy">
<p class="hero-subscribe-eyebrow">Stay In The Loop</p>
<h2>Get ZGM updates</h2>
<p class="hero-subscribe-text">Product news and release updates.</p>
</div>
<form
action="https://app.kit.com/forms/9315299/subscriptions"
class="subscribe-form subscribe-form-centered seva-form formkit-form"
method="post"
data-sv-form="9315299"
data-uid="ba32ad0d24"
data-format="inline"
data-version="5"
data-options="{"settings":{"after_subscribe":{"action":"message","success_message":"Success! Now check your email to confirm your subscription.","redirect_url":""},"analytics":{"google":null,"fathom":null,"facebook":null,"segment":null,"pinterest":null,"sparkloop":null,"googletagmanager":null},"modal":{"trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"powered_by":{"show":false,"url":"https://kit.com/features/forms?utm_campaign=poweredby&utm_content=form&utm_medium=referral&utm_source=dynamic"},"recaptcha":{"enabled":false},"return_visitor":{"action":"show","custom_content":""},"slide_in":{"display_in":"bottom_right","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"sticky_bar":{"display_in":"top","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15}},"version":"5"}"
min-width="400 500 600 700 800"
>
<ul class="formkit-alert formkit-alert-error" data-element="errors" data-group="alert"></ul>
<input
id="email"
name="email_address"
class="formkit-input"
type="email"
placeholder="Enter your email"
autocomplete="email"
aria-label="Email Address"
required
>
<button type="submit" class="btn btn-primary formkit-submit" data-element="submit">
<span>Subscribe</span>
</button>
</form>
<p class="hero-subscribe-note">No spam. Unsubscribe anytime.</p>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container footer-container">
<div class="footer-grid">
<div class="footer-brand">
<a href="/" class="nav-logo">
<svg class="logo-icon" viewBox="0 0 32 32" width="28" height="28" fill="none">
<rect width="32" height="32" rx="8" fill="currentColor" class="logo-bg"/>
<path d="M8 12L16 8L24 12V20L16 24L8 20V12Z" stroke="var(--bg)" stroke-width="2" fill="none"/>
<circle cx="16" cy="16" r="3" fill="var(--bg)"/>
</svg>
<span class="logo-text">ZGM</span>
</a>
<p class="footer-tagline">Open-source gaming mouse firmware built on Zephyr RTOS.</p>
</div>
<div class="footer-links">
<h4>Project</h4>
<a href="https://github.com/Keychron/zgm#readme" target="_blank" rel="noopener">README</a>
<a href="https://github.com/Keychron/zgm#roadmap" target="_blank" rel="noopener">Roadmap</a>
<a href="https://github.com/Keychron/zgm/blob/main/CONTRIBUTING.md" target="_blank" rel="noopener">Contributing</a>
</div>
<div class="footer-links">
<h4>Community</h4>
<a href="https://discord.com/invite/HAYbRrTsjN" target="_blank" rel="noopener">Discord</a>
<a href="https://github.com/Keychron/zgm" target="_blank" rel="noopener">GitHub</a>
</div>
<div class="footer-links">
<h4>More</h4>
<a href="https://keychron.com" target="_blank" rel="noopener">Keychron</a>
<a href="https://github.com/Keychron/qmk_firmware" target="_blank" rel="noopener">Keychron QMK Firmware</a>
<a href="https://github.com/Keychron/zmk" target="_blank" rel="noopener">Keychron ZMK Firmware</a>
<a href="https://github.com/Keychron/Keychron-Keyboards-Hardware-Design" target="_blank" rel="noopener">Keychron Hardware Design Open Source</a>
<a href="https://github.com/Keychron/zgm/blob/main/LICENSE" target="_blank" rel="noopener">License (GPL-3.0)</a>
</div>
</div>
<div class="footer-bottom">
<p>Copyright © 2024-2026 ZGM Contributors. Released under the GPL-3.0 License.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>