Hugging Face's logo

Spaces:
pollen-robotics
/
Reachy-Mini-DRAFT
Running

App Files Community
2
Anne-Charlotte commited on
Commit
9b1fcdf
·
verified ·
1 Parent(s): 289b04b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +407 -19
index.html CHANGED
@@ -1,19 +1,407 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Reachy Mini Kickstart - Open-Source Companion Robot</title>
7
+ <meta name="description" content="Reachy Mini is an expressive, open-source robot designed for human-robot interaction, creative coding, and AI experimentation.">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="style.css">
12
+ </head>
13
+ <body>
14
+ <!-- Hero Section -->
15
+ <header class="hero">
16
+ <video class="hero-video" autoplay muted loop playsinline>
17
+ <source src="/Reachy-mini-wake-up-companion.mp4" type="video/mp4">
18
+ </video>
19
+ <div class="hero-overlay"></div>
20
+ <div class="hero-content">
21
+ <h1>Reachy Mini</h1>
22
+ <p class="hero-subtitle">The open-source companion robot for everyone.</p>
23
+ <p class="hero-description">
24
+ Reachy Mini is an expressive, open-source robot designed for human-robot interaction,
25
+ creative coding, and AI experimentation.
26
+ </p>
27
+ <div class="hero-buttons">
28
+ <a href="#kickstart" class="btn btn-primary">Kickstart your robot</a>
29
+ <a href="#buy" class="btn btn-outline">Buy Reachy Mini</a>
30
+ </div>
31
+ </div>
32
+ </header>
33
+
34
+ <!-- Kickstart Section -->
35
+ <section id="kickstart" class="section">
36
+ <div class="container">
37
+ <h2 class="section-title">Kickstart your Reachy Mini</h2>
38
+ <p class="section-description">
39
+ Follow these steps to assemble your robot, start it with the dashboard, explore
40
+ community Spaces, and build your own experiences.
41
+ </p>
42
+
43
+ <!-- Build Section -->
44
+ <div class="subsection">
45
+ <div class="image-title-wrapper">
46
+ <img src="Build.png" alt="Build your Reachy Mini" class="section-image">
47
+ </div>
48
+
49
+ <div class="carousel">
50
+ <div class="carousel-container">
51
+ <div class="carousel-track" id="buildCarousel">
52
+ <!-- Lite Version -->
53
+ <div class="carousel-item active">
54
+ <div class="card">
55
+ <div class="badge badge-primary">Lite</div>
56
+ <div class="video-wrapper">
57
+ <iframe
58
+ src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB"
59
+ title="YouTube video player"
60
+ frameborder="0"
61
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
62
+ referrerpolicy="strict-origin-when-cross-origin"
63
+ allowfullscreen>
64
+ </iframe>
65
+ </div>
66
+ <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide"
67
+ target="_blank"
68
+ class="btn btn-outline btn-full">
69
+ Open assembly guide
70
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
71
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
72
+ </svg>
73
+ </a>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Wireless Version -->
78
+ <div class="carousel-item">
79
+ <div class="card">
80
+ <div class="badge badge-success">Wireless</div>
81
+ <div class="video-wrapper">
82
+ <iframe
83
+ src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB"
84
+ title="YouTube video player"
85
+ frameborder="0"
86
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
87
+ referrerpolicy="strict-origin-when-cross-origin"
88
+ allowfullscreen>
89
+ </iframe>
90
+ </div>
91
+ <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide"
92
+ target="_blank"
93
+ class="btn btn-outline btn-full">
94
+ Open assembly guide
95
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
96
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
97
+ </svg>
98
+ </a>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- Beta Version -->
103
+ <div class="carousel-item">
104
+ <div class="card">
105
+ <div class="badge badge-muted">Beta</div>
106
+ <div class="video-wrapper">
107
+ <iframe
108
+ src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB"
109
+ title="YouTube video player"
110
+ frameborder="0"
111
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
112
+ referrerpolicy="strict-origin-when-cross-origin"
113
+ allowfullscreen>
114
+ </iframe>
115
+ </div>
116
+ <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide"
117
+ target="_blank"
118
+ class="btn btn-outline btn-full">
119
+ Open assembly guide
120
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
121
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
122
+ </svg>
123
+ </a>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ <button class="carousel-btn carousel-prev" onclick="moveCarousel(-1)">
129
+ <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
130
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
131
+ </svg>
132
+ </button>
133
+ <button class="carousel-btn carousel-next" onclick="moveCarousel(1)">
134
+ <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
135
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
136
+ </svg>
137
+ </button>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Play Section -->
142
+ <div class="subsection">
143
+ <div class="image-title-wrapper">
144
+ <img src="Play.png" alt="Play" class="section-image">
145
+ </div>
146
+
147
+ <div class="grid-2">
148
+ <!-- No Code -->
149
+ <div class="card">
150
+ <h4 class="card-title">2.1. No Code</h4>
151
+ <div class="placeholder">
152
+ Dashboard GIF preview<br>(coming soon)
153
+ </div>
154
+ <p class="card-text">
155
+ Start playing with Reachy Mini using our visual dashboard - no coding required.
156
+ </p>
157
+ <a href="#" target="_blank" class="btn btn-outline btn-full">
158
+ Download dashboard
159
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
160
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
161
+ </svg>
162
+ </a>
163
+ </div>
164
+
165
+ <!-- Code Your Own -->
166
+ <div class="card">
167
+ <h4 class="card-title">2.2. Code Your Own Applications</h4>
168
+ <div class="placeholder">
169
+ Documentation GIF preview<br>(coming soon)
170
+ </div>
171
+ <p class="card-text">
172
+ Explore the documentation and build custom applications for your Reachy Mini.
173
+ </p>
174
+ <a href="https://github.com/pollen-robotics/reachy_mini"
175
+ target="_blank"
176
+ class="btn btn-outline btn-full">
177
+ View documentation
178
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
179
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
180
+ </svg>
181
+ </a>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Share Section -->
187
+ <div class="subsection">
188
+ <div class="image-title-wrapper">
189
+ <img src="Share.png" alt="Share" class="section-image">
190
+ </div>
191
+
192
+ <div class="grid-2">
193
+ <!-- Browse Spaces -->
194
+ <div class="card">
195
+ <h4 class="card-title">3.1. Browse Existing Spaces</h4>
196
+ <p class="card-text">
197
+ Discover all Spaces already developed for Reachy Mini. You can also duplicate them to customize depending on your needs.
198
+ </p>
199
+ <a href="https://huggingface.co/spaces?q=reachy+mini"
200
+ target="_blank"
201
+ class="btn btn-outline btn-full">
202
+ Browse Spaces
203
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
204
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
205
+ </svg>
206
+ </a>
207
+ </div>
208
+
209
+ <!-- Create Spaces -->
210
+ <div class="card">
211
+ <h4 class="card-title">3.2. Build Your Own Spaces</h4>
212
+ <p class="card-text">
213
+ Build, customize existing apps, or create your own from scratch using our template.
214
+ </p>
215
+ <a href="https://huggingface.co/spaces/pollen-robotics/reachy_mini_app_example"
216
+ target="_blank"
217
+ class="btn btn-outline btn-full">
218
+ Duplicate template
219
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
220
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
221
+ </svg>
222
+ </a>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ <!-- Discord CTA -->
228
+ <div class="discord-cta">
229
+ <h3>Join the Community</h3>
230
+ <p>
231
+ Connect with other Reachy Mini owners, share your projects, get help, and stay updated on the latest developments.
232
+ </p>
233
+ <a href="https://discord.gg/2bAhWfXme9"
234
+ target="_blank"
235
+ class="btn btn-primary">
236
+ Join Pollen Discord
237
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
238
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
239
+ </svg>
240
+ </a>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- Buy Section -->
246
+ <section id="buy" class="section section-muted">
247
+ <div class="container">
248
+ <h2 class="section-title">Buy Reachy Mini</h2>
249
+ <p class="section-description">
250
+ Choose the version that best fits your needs. Both versions are fully compatible
251
+ with our open-source tooling and Hugging Face Spaces.
252
+ </p>
253
+
254
+ <div class="grid-2 pricing-grid">
255
+ <!-- Lite Version -->
256
+ <div class="card pricing-card">
257
+ <div class="pricing-header">
258
+ <div class="badge badge-primary">Lite</div>
259
+ <h3 class="pricing-title">Reachy Mini Lite</h3>
260
+ <p class="pricing-price">$299</p>
261
+ </div>
262
+ <ul class="feature-list">
263
+ <li>
264
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
265
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
266
+ </svg>
267
+ External compute (Mac & Linux, Windows soon)
268
+ </li>
269
+ <li>
270
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
271
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
272
+ </svg>
273
+ No Wi-Fi (wired power only)
274
+ </li>
275
+ <li>
276
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
277
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
278
+ </svg>
279
+ 4 microphones & 5W speaker
280
+ </li>
281
+ <li>
282
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
283
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
284
+ </svg>
285
+ Wide angle camera
286
+ </li>
287
+ <li>
288
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
289
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
290
+ </svg>
291
+ No accelerometer
292
+ </li>
293
+ <li>
294
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
295
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
296
+ </svg>
297
+ 6 degrees of freedom head movement
298
+ </li>
299
+ <li>
300
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
301
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
302
+ </svg>
303
+ Full body rotation
304
+ </li>
305
+ <li>
306
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
307
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
308
+ </svg>
309
+ 2 animated antennas
310
+ </li>
311
+ </ul>
312
+ <a href="https://buy.stripe.com/6oUfZj78P1a5e6b0FS73G02"
313
+ target="_blank"
314
+ class="btn btn-primary btn-full">
315
+ Buy Lite version
316
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
317
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
318
+ </svg>
319
+ </a>
320
+ </div>
321
+
322
+ <!-- Wireless Version -->
323
+ <div class="card pricing-card">
324
+ <div class="pricing-header">
325
+ <div class="badge badge-success">Wireless</div>
326
+ <h3 class="pricing-title">Reachy Mini Wireless</h3>
327
+ <p class="pricing-price">$449</p>
328
+ </div>
329
+ <ul class="feature-list">
330
+ <li>
331
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
332
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
333
+ </svg>
334
+ On-board compute (Raspberry Pi 4)
335
+ </li>
336
+ <li>
337
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
338
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
339
+ </svg>
340
+ Works both wired and wireless, for power and communication
341
+ </li>
342
+ <li>
343
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
344
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
345
+ </svg>
346
+ Wi-Fi enabled, or Ethernet via a USB-C adapter (not included)
347
+ </li>
348
+ <li>
349
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
350
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
351
+ </svg>
352
+ 4 microphones & 5W speaker
353
+ </li>
354
+ <li>
355
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
356
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
357
+ </svg>
358
+ Wide angle camera
359
+ </li>
360
+ <li>
361
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
362
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
363
+ </svg>
364
+ Integrated accelerometer
365
+ </li>
366
+ <li>
367
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
368
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
369
+ </svg>
370
+ 6 degrees of freedom head movement
371
+ </li>
372
+ <li>
373
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
374
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
375
+ </svg>
376
+ Full body rotation
377
+ </li>
378
+ <li>
379
+ <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
380
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
381
+ </svg>
382
+ 2 animated antennas
383
+ </li>
384
+ </ul>
385
+ <a href="https://buy.stripe.com/9B65kFfFlaKFbY34W873G03"
386
+ target="_blank"
387
+ class="btn btn-primary btn-full">
388
+ Buy Wireless version
389
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
390
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
391
+ </svg>
392
+ </a>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ </section>
397
+
398
+ <!-- Footer -->
399
+ <footer class="footer">
400
+ <div class="container">
401
+ <p>&copy; 2024 Pollen Robotics. All rights reserved.</p>
402
+ </div>
403
+ </footer>
404
+
405
+ <script src="script.js"></script>
406
+ </body>
407
+ </html>