-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfeatures.html
More file actions
executable file
·247 lines (218 loc) · 11.4 KB
/
features.html
File metadata and controls
executable file
·247 lines (218 loc) · 11.4 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
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Features | BlueKeys</title>
<link rel="icon" type="image/x-icon" href="assets/logo/logo%20.ico" />
<!-- [D] Preconnect: resolves DNS + TLS for Google Fonts early -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!-- Tailwind CSS (for layout utilities and forms) -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<!-- [A] Bug fix: primary was #6dcdf9 (bright blue) — should match index.html (#000000) -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: "#000000",
secondary: "#8ecae6",
accent: "#8ecae6",
surface: "#FAF9F6",
"on-surface": "#1a1a1a",
"surface-container-low": "hsla(197, 60%, 93%, 0.4)",
},
borderRadius: {
DEFAULT: "0.125rem",
lg: "0.25rem",
xl: "0.5rem",
full: "9999px",
},
fontFamily: {
headline: ["Manrope", "sans-serif"],
body: ["Inter", "sans-serif"],
},
},
},
};
</script>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&family=Inter:wght@300;400;500;700&display=swap"
rel="stylesheet" />
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet" />
<!-- App Styles & Scripts -->
<link rel="stylesheet" href="css/features.css" />
<script defer src="js/features.js"></script>
<script defer src="js/bg-shader.js"></script>
</head>
<body class="antialiased selection:bg-[#dae5e1] selection:text-[#2a3432]">
<canvas id="shader-canvas" class="fixed inset-0 w-full h-full z-[-1] pointer-events-none"></canvas>
<!-- Glass Effect Overlay (above shaders, below content) -->
<div class="glass-effect-overlay"></div>
<!-- Dynamic Ambient Glow Base for Visual Depth -->
<div class="ambient-orb ambient-orb--top"></div>
<div class="ambient-orb ambient-orb--center"></div>
<div class="ambient-orb ambient-orb--bottom"></div>
<!-- [A] Bug fix: added aria-label for screen readers -->
<a href="index.html" class="back-nav" aria-label="Back to BlueKeys home">
<span class="material-symbols-outlined" aria-hidden="true">arrow_back</span>
<span class="back-nav__label">BlueKeys</span>
</a>
<!-- Hero Section with Tesla-Style Scroll Text Reveal -->
<header class="features-hero">
<span class="hero-eyebrow" data-reveal="fade-up">Explore the Ecosystem</span>
<p class="hero-subtitle" data-reveal="fade-in">
<!-- [A] Bug fix: was "Control computers from smartphone" -->
<b>Control your computer from your smartphone.</b>
</p>
<!-- [A] Bug fix: was "simeless, precise, and reliably" -->
<p class="hero-subtitle" data-reveal="fade-in">Seamless, precise, and reliable.</p>
</header>
<!-- Core Feature Section: Advanced Bento Grid -->
<main class="features-section">
<div class="bento-grid">
<!-- 1. Responsive Touchpad -->
<div class="feature-card card--wide" data-reveal="fade-up" data-delay="1">
<div class="z-10 w-full md:w-1/2 relative">
<span class="material-symbols-outlined card-icon">touchpad_mouse</span>
<h3 class="card-title pb-[13rem]">Responsive Touchpad</h3>
<p class="card-description">
<b>Turn your phone into a smooth, responsive trackpad for precise, seamless control.</b>
</p>
</div>
<div class="card-visual">
<img src="light/trackpad.jpg" alt="Minimalist Trackpad UI" loading="lazy" decoding="async">
</div>
</div>
<!-- 2. TrackPoint -->
<div class="feature-card" data-reveal="fade-up" data-delay="2">
<div class="relative z-10">
<span
class="material-symbols-outlined card-icon text-red-500 icon-trackpoint">radio_button_checked</span>
<h3 class="card-title">TrackPoint</h3>
<p class="card-description">
A precise, minimalist pointer inspired by classic keyboard design. Engineered for absolute
pixel-perfect accuracy.
</p>
</div>
</div>
<!-- 3. Transcendent Shortcuts -->
<div class="feature-card" data-reveal="fade-up" data-delay="5">
<span class="material-symbols-outlined card-icon icon-lift-fill">bolt</span>
<h3 class="card-title">Smart Shortcuts</h3>
<p class="card-description">
Create custom macros and shortcuts, stringing complex commands into single taps to rapidly boost
your productivity.
</p>
</div>
<!-- 4. Smart Keyboard Modes -->
<div class="feature-card card--wide" data-reveal="fade-up" data-delay="4">
<div class="z-10 w-full md:w-3/5 relative">
<span class="material-symbols-outlined card-icon">keyboard</span>
<h3 class="card-title">Keyboard Modes</h3>
<p class="card-description">
Type comfortably with layouts that adapt instantly to any orientation—portrait or landscape—without interrupting your workflow.
</p>
</div>
<div class="card-visual" style="bottom: -5%; rotate: -8deg; opacity: 0.25;">
<img src="light/landscape keybaord.png" alt="Landscape Keyboard Interface" loading="lazy" decoding="async">
</div>
</div>
<!-- 5. Media Widget -->
<div class="feature-card" data-reveal="fade-up" data-delay="3">
<div class="relative z-10">
<span class="material-symbols-outlined card-icon icon-widget-glide">widgets</span>
<h3 class="card-title">Media Widget</h3>
<p class="card-description">
Essential controls, always within reach. Access playback commands directly from your home
screen.
</p>
</div>
<!-- Aesthetic overlay for visual interest without distraction -->
<div class="card-visual" style="bottom: 15%; right: -10%; width: 65%; opacity: 0.7;">
<img src="light/widget.png" alt="Media Widget Component"
style="border-radius: 0px; transform: rotate(-5deg);" loading="lazy" decoding="async">
</div>
</div>
<!-- 6. Media & Presentation Control -->
<div class="feature-card flex flex-col justify-between" data-reveal="fade-up" data-delay="6">
<div>
<h3 class="card-title">Media control</h3>
<p class="card-description">
Navigate presentations and playback precisely without breaking your flow or leaving your
audience's gaze.
</p>
</div>
<div class="media-controls mt-6">
<span class="material-symbols-outlined">skip_previous</span>
<span class="material-symbols-outlined play-btn">play_circle</span>
<span class="material-symbols-outlined">skip_next</span>
</div>
</div>
<!-- 7. Personalized Settings -->
<div class="feature-card" data-reveal="fade-up" data-delay="7">
<span class="material-symbols-outlined card-icon icon-lift-fill">tune</span>
<h3 class="card-title">Personalized Setup</h3>
<p class="card-description">
Fine-tune pointer speed, scroll acceleration, and click sensitivity to perfectly match your unique
tactile style.
</p>
</div>
<!-- 8. Bluetooth File Sharing -->
<div class="feature-card" data-reveal="fade-up" data-delay="8">
<div class="relative z-10">
<span class="material-symbols-outlined card-icon icon-lift-fill">folder_shared</span>
<h3 class="card-title">File Sharing</h3>
<div class="mb-6 flex justify-center">
<div class="sync-ring">
<div class="sync-ring__pulse"></div>
<span class="material-symbols-outlined sync-icon">sync_alt</span>
</div>
</div>
<p class="card-description">
Quickly beam files seamlessly between your devices without internet reliance or cloud hassle.
</p>
</div>
</div>
<!-- 9. Clipboard Sync -->
<!-- [A] Bug fix: was outside the bento-grid div, bad indentation -->
<div class="feature-card" data-reveal="fade-up" data-delay="9">
<div class="relative z-10 flex flex-col items-start gap-4">
<span class="material-symbols-outlined card-icon icon-clipboard-tap">content_copy</span>
<h3 class="card-title">Clipboard Sync</h3>
<p class="card-description">Copy text on phone and paste it on PC across the workspace.</p>
</div>
</div>
<!-- 10. Seamless Connection -->
<div class="feature-card" data-reveal="fade-up" data-delay="10">
<span
class="material-symbols-outlined card-icon text-blue-500 icon-lift-fill">bluetooth_connected</span>
<h3 class="card-title">Seamless Connect</h3>
<p class="card-description">
Fast, low latency Bluetooth pairing every single time. Your setup reconnects instantly
directly upon proximity.
</p>
</div>
</div>
</main>
<!-- [B] Download CTA Section -->
<section class="features-cta" aria-label="Download BlueKeys">
<p class="features-cta__label">Available on Android</p>
<h2 class="features-cta__title">Ready to connect?</h2>
<p class="features-cta__sub">Turn your phone into a Bluetooth keyboard, mouse, and remote — for free.</p>
<a
href="https://play.google.com/store/apps/details?id=com.blukeys.hidremote"
target="_blank"
rel="noopener noreferrer"
class="features-cta__btn"
aria-label="Download BlueKeys on Google Play">
<img src="icon/playstore.svg" width="22" height="22" alt="" aria-hidden="true" />
Download on Google Play
</a>
</section>
</body>
</html>