Hugging Face's logo

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

App Files Community
2
Anne-Charlotte commited on
Commit
86c8e8c
·
verified ·
1 Parent(s): 5f9a493

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +131 -102
index.html CHANGED
@@ -40,117 +40,99 @@
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="assets/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/XGMdd38vHd0?si=YhtalTusAfeBT4oO"
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_LITE_Assembly_Guide"
67
- target="_blank"
68
- class="btn btn-outline btn-full">
69
- Open assembly guide Lite
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
 
103
- <!-- Beta Version -->
104
- <div class="carousel-item">
105
- <div class="card">
106
- <div class="badge badge-muted">Beta</div>
107
- <div class="video-wrapper">
108
- <iframe
109
- src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB"
110
- title="YouTube video player"
111
- frameborder="0"
112
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
113
- referrerpolicy="strict-origin-when-cross-origin"
114
- allowfullscreen>
115
- </iframe>
116
- </div>
117
- <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_BETA_Assembly_Guide"
118
- target="_blank"
119
- class="btn btn-outline btn-full">
120
- Open assembly guide Beta
121
- <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
122
- <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>
123
- </svg>
124
- </a>
125
- </div>
126
- </div>
127
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
  </div>
129
- <button class="carousel-btn carousel-prev" onclick="moveCarousel(-1)">
130
- <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
131
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
132
- </svg>
133
- </button>
134
- <button class="carousel-btn carousel-next" onclick="moveCarousel(1)">
135
- <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
136
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
137
- </svg>
138
- </button>
139
  </div>
 
 
 
 
140
  </div>
141
 
142
- <!-- Play Section -->
143
  <div class="subsection">
144
  <div class="image-title-wrapper">
145
- <img src="assets/Play.png" alt="Play" class="section-image">
146
  </div>
147
 
148
  <div class="grid-2">
149
  <!-- No Code -->
150
  <div class="card">
151
  <h4 class="card-title">2.1. No Code</h4>
152
- <div class="placeholder">
153
- Documentation GIF preview<br>(coming soon)
154
  </div>
155
  <p class="card-text">
156
  Start playing with Reachy Mini using our visual dashboard - no coding required.
@@ -184,22 +166,61 @@
184
  </div>
185
  </div>
186
 
187
- <!-- Share Section -->
188
  <div class="subsection">
189
  <div class="image-title-wrapper">
190
- <img src="assets/Share.png" alt="Share" class="section-image">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
191
  </div>
192
 
193
  <div class="grid-2">
194
  <!-- Browse Spaces -->
195
- <div class="card">
196
- <h4 class="card-title">3.1. Browse Existing Spaces</h4>
 
 
 
197
  <p class="card-text">
198
  Discover all Spaces already developed for Reachy Mini. You can also duplicate them to customize depending on your needs.
199
  </p>
200
  <a href="https://huggingface.co/spaces?q=reachy+mini"
201
  target="_blank"
202
- class="btn btn-outline btn-full">
203
  Browse Spaces
204
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
205
  <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>
@@ -208,14 +229,14 @@
208
  </div>
209
 
210
  <!-- Create Spaces -->
211
- <div class="card">
212
- <h4 class="card-title">3.2. Build Your Own Spaces</h4>
213
  <p class="card-text">
214
  Build, customize existing apps, or create your own from scratch using our template.
215
  </p>
216
  <a href="https://huggingface.co/spaces/pollen-robotics/reachy_mini_app_example"
217
  target="_blank"
218
- class="btn btn-outline btn-full">
219
  Duplicate template
220
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
221
  <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>
@@ -403,6 +424,14 @@
403
  </div>
404
  </footer>
405
 
 
 
 
 
 
 
 
 
406
  <script src="script.js"></script>
407
  </body>
408
- </html>
 
40
  community Spaces, and build your own experiences.
41
  </p>
42
 
43
+ <!-- 1. 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="grid-2 build-grid">
50
+ <!-- Beta Version -->
51
+ <div class="card">
52
+ <div class="badge badge-muted">Beta</div>
53
+ <div class="video-wrapper">
54
+ <iframe
55
+ src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB"
56
+ title="YouTube video player"
57
+ frameborder="0"
58
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
59
+ referrerpolicy="strict-origin-when-cross-origin"
60
+ allowfullscreen>
61
+ </iframe>
62
+ </div>
63
+ <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide"
64
+ target="_blank"
65
+ class="btn btn-outline btn-full mb-4">
66
+ Open assembly guide
67
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
68
+ <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>
69
+ </svg>
70
+ </a>
71
+ <p class="card-text-small">
72
+ After you build your Reachy Mini, you can download the dashboard to control your Reachy Mini here:
73
+ </p>
74
+ <a href="https://pollen-robotics.github.io/reachy-mini-desktop-app/latest.json"
75
+ target="_blank"
76
+ class="btn btn-outline btn-full">
77
+ Download dashboard
78
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
79
+ <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>
80
+ </svg>
81
+ </a>
82
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
 
84
+ <!-- Lite Version -->
85
+ <div class="card">
86
+ <div class="badge badge-primary">Lite</div>
87
+ <div class="video-wrapper">
88
+ <iframe
89
+ src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB"
90
+ title="YouTube video player"
91
+ frameborder="0"
92
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
93
+ referrerpolicy="strict-origin-when-cross-origin"
94
+ allowfullscreen>
95
+ </iframe>
 
 
 
 
 
 
 
 
 
 
 
 
96
  </div>
97
+ <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide"
98
+ target="_blank"
99
+ class="btn btn-outline btn-full mb-4">
100
+ Open assembly guide
101
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
102
+ <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>
103
+ </svg>
104
+ </a>
105
+ <p class="card-text-small">
106
+ After you build your Reachy Mini, you can download the dashboard to control your Reachy Mini here:
107
+ </p>
108
+ <a href="https://pollen-robotics.github.io/reachy-mini-desktop-app/latest.json"
109
+ target="_blank"
110
+ class="btn btn-outline btn-full">
111
+ Download dashboard
112
+ <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
113
+ <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>
114
+ </svg>
115
+ </a>
116
  </div>
 
 
 
 
 
 
 
 
 
 
117
  </div>
118
+
119
+ <p class="beta-link-text">
120
+ If you own a beta, your assembly guide is <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_BETA_Assembly_Guide" target="_blank">here</a>
121
+ </p>
122
  </div>
123
 
124
+ <!-- 2. PLAY Section -->
125
  <div class="subsection">
126
  <div class="image-title-wrapper">
127
+ <img src="Play.png" alt="Play" class="section-image section-image-lg">
128
  </div>
129
 
130
  <div class="grid-2">
131
  <!-- No Code -->
132
  <div class="card">
133
  <h4 class="card-title">2.1. No Code</h4>
134
+ <div class="gif-wrapper">
135
+ <img src="reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
136
  </div>
137
  <p class="card-text">
138
  Start playing with Reachy Mini using our visual dashboard - no coding required.
 
166
  </div>
167
  </div>
168
 
169
+ <!-- 3. CREATE Section -->
170
  <div class="subsection">
171
  <div class="image-title-wrapper">
172
+ <img src="Create.png" alt="Create" class="section-image section-image-lg">
173
+ </div>
174
+
175
+ <div class="grid-3">
176
+ <!-- No Code -->
177
+ <div class="card">
178
+ <h4 class="card-title">No Code</h4>
179
+ <div class="dashboard-image-wrapper">
180
+ <img src="dashboard-discover-apps.png" alt="Reachy Mini Dashboard">
181
+ </div>
182
+ <p class="card-text">
183
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
184
+ </p>
185
+ </div>
186
+
187
+ <!-- SDK -->
188
+ <div class="card">
189
+ <h4 class="card-title">SDK</h4>
190
+ <p class="card-text">
191
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
192
+ </p>
193
+ </div>
194
+
195
+ <!-- Web API -->
196
+ <div class="card">
197
+ <h4 class="card-title">Web API</h4>
198
+ <p class="card-text">
199
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
200
+ </p>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- 4. SHARE Section -->
206
+ <div class="subsection">
207
+ <div class="image-title-wrapper">
208
+ <img src="Share.png" alt="Share" class="section-image section-image-lg">
209
  </div>
210
 
211
  <div class="grid-2">
212
  <!-- Browse Spaces -->
213
+ <div class="card card-flex">
214
+ <h4 class="card-title">4.1. Browse Existing Spaces</h4>
215
+ <div class="gif-wrapper">
216
+ <img src="reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
217
+ </div>
218
  <p class="card-text">
219
  Discover all Spaces already developed for Reachy Mini. You can also duplicate them to customize depending on your needs.
220
  </p>
221
  <a href="https://huggingface.co/spaces?q=reachy+mini"
222
  target="_blank"
223
+ class="btn btn-outline btn-full mt-auto">
224
  Browse Spaces
225
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
226
  <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>
 
229
  </div>
230
 
231
  <!-- Create Spaces -->
232
+ <div class="card card-flex">
233
+ <h4 class="card-title">4.2. Build Your Own Spaces</h4>
234
  <p class="card-text">
235
  Build, customize existing apps, or create your own from scratch using our template.
236
  </p>
237
  <a href="https://huggingface.co/spaces/pollen-robotics/reachy_mini_app_example"
238
  target="_blank"
239
+ class="btn btn-outline btn-full mt-auto">
240
  Duplicate template
241
  <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
242
  <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>
 
424
  </div>
425
  </footer>
426
 
427
+ <!-- Documentation Button -->
428
+ <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" class="doc-button" id="docButton">
429
+ <svg class="doc-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
430
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
431
+ </svg>
432
+ <span class="doc-text">Documentation</span>
433
+ </a>
434
+
435
  <script src="script.js"></script>
436
  </body>
437
+ </html>