Hugging Face's logo

Spaces:
pollen-robotics
/
Reachy_Mini_LITE_Assembly_Guide
Running

App Files Community
1
Anne-Charlotte commited on
Commit
4a24f49
·
verified ·
1 Parent(s): 3c06617

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +202 -18
index.html CHANGED
@@ -1,19 +1,203 @@
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 - Assembly Guide - Lite</title>
7
+ <meta name="description" content="Step-by-step assembly guide for Reachy Mini Lite Robot. Follow detailed steps to build your robot with embedded video tutorials.">
8
+ <meta name="author" content="Pollen Robotics">
9
+
10
+ <meta property="og:title" content="Reachy Mini - Assembly Guide">
11
+ <meta property="og:description" content="Step-by-step assembly guide for Reachy Mini Lite Robot. Follow detailed steps to build your robot.">
12
+ <meta property="og:type" content="website">
13
+
14
+ <meta name="twitter:card" content="summary_large_image">
15
+ <meta name="twitter:site" content="@paboris">
16
+
17
+ <link rel="stylesheet" href="styles.css">
18
+ </head>
19
+ <body>
20
+ <div id="app" class="min-h-screen bg-background">
21
+ <!-- Header -->
22
+ <header class="header">
23
+ <div class="container">
24
+ <div class="header-content">
25
+ <div class="header-left">
26
+ <img src="assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="header-icon">
27
+ <div>
28
+ <h1 class="header-title">Reachy Mini</h1>
29
+ <p class="header-subtitle">Assembly Guide - Lite</p>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </header>
35
+
36
+ <!-- Main Content -->
37
+ <main class="main-content">
38
+ <div class="container-full">
39
+ <!-- Intro Section -->
40
+ <div class="intro-section animate-fade-in">
41
+ <h2 class="intro-title">Welcome to Your Assembly Journey</h2>
42
+ <p class="intro-text">
43
+ Follow this step-by-step guide to assemble your Reachy Mini <strong>Lite</strong>.
44
+ Use the navigation buttons to move through each step at your own pace.
45
+ </p>
46
+ </div>
47
+
48
+ <!-- Step Viewer -->
49
+ <div id="step-viewer" class="step-viewer animate-fade-in">
50
+ <!-- Image Container -->
51
+ <div class="image-container">
52
+ <!-- Step Counter -->
53
+ <div class="step-counter">
54
+ <span id="step-counter-text">Step 1/46</span>
55
+ </div>
56
+
57
+ <!-- Fullscreen Button -->
58
+ <button id="fullscreen-btn" class="fullscreen-btn" aria-label="Toggle fullscreen">
59
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
60
+ <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
61
+ </svg>
62
+ </button>
63
+
64
+ <!-- Step Image -->
65
+ <div id="image-wrapper" class="image-wrapper">
66
+ <img id="step-image" src="" alt="Assembly step" class="step-image">
67
+ <div id="placeholder" class="placeholder">
68
+ <div class="placeholder-circle">
69
+ <span id="placeholder-number">1</span>
70
+ </div>
71
+ <p class="placeholder-text">Step 1 image</p>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- YouTube Embed - Desktop -->
76
+ <div id="youtube-desktop" class="youtube-desktop animate-slide-in">
77
+ <iframe id="youtube-iframe-desktop" src="" title="Reachy Mini Assembly Tutorial" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
78
+ </div>
79
+ </div>
80
+
81
+ <!-- YouTube Embed - Mobile -->
82
+ <div id="youtube-mobile" class="youtube-mobile">
83
+ <iframe id="youtube-iframe-mobile" src="" title="Reachy Mini Assembly Tutorial" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
84
+ </div>
85
+
86
+ <!-- Navigation Controls -->
87
+ <div class="nav-controls">
88
+ <div class="nav-buttons">
89
+ <button id="prev-btn" class="btn btn-outline" disabled>
90
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
91
+ <path d="M15 18l-6-6 6-6"/>
92
+ </svg>
93
+ Previous
94
+ </button>
95
+
96
+ <div id="step-indicators" class="step-indicators"></div>
97
+
98
+ <button id="next-btn" class="btn btn-primary">
99
+ Next
100
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
101
+ <path d="M9 18l6-6-6-6"/>
102
+ </svg>
103
+ </button>
104
+ </div>
105
+
106
+ <!-- Progress Bar -->
107
+ <div class="progress-bar-container">
108
+ <div id="progress-bar" class="progress-bar"></div>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </main>
114
+
115
+ <!-- Footer -->
116
+ <footer class="footer">
117
+ <div class="container">
118
+ <p class="footer-text">
119
+ Need help? Contact us on
120
+ <a href="https://discord.gg/HDrGY9eJHt" target="_blank" rel="noopener noreferrer" class="footer-link">Discord</a>
121
+ and join the community.
122
+ </p>
123
+ </div>
124
+ </footer>
125
+ </div>
126
+
127
+ <!-- Fullscreen Modal -->
128
+ <div id="fullscreen-modal" class="fullscreen-modal hidden">
129
+ <div class="fullscreen-header">
130
+ <div class="fullscreen-title">
131
+ <span id="fullscreen-step-title">Step 1/46 - Apply the foot pads.</span>
132
+ </div>
133
+ <div class="fullscreen-controls">
134
+ <button id="zoom-out-btn" class="btn-icon" aria-label="Zoom out">
135
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
136
+ <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><path d="M8 11h6"/>
137
+ </svg>
138
+ </button>
139
+ <span id="zoom-level" class="zoom-level">100%</span>
140
+ <button id="zoom-in-btn" class="btn-icon" aria-label="Zoom in">
141
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
142
+ <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><path d="M11 8v6"/><path d="M8 11h6"/>
143
+ </svg>
144
+ </button>
145
+ <button id="close-fullscreen-btn" class="btn-icon" aria-label="Close fullscreen">
146
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
147
+ <path d="M18 6L6 18"/><path d="M6 6l12 12"/>
148
+ </svg>
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <div class="fullscreen-content">
154
+ <div id="fullscreen-image-container" class="fullscreen-image-container">
155
+ <img id="fullscreen-image" src="" alt="Assembly step" class="fullscreen-image">
156
+ <div id="fullscreen-placeholder" class="placeholder fullscreen-placeholder">
157
+ <div class="placeholder-circle placeholder-circle-lg">
158
+ <span id="fullscreen-placeholder-number">1</span>
159
+ </div>
160
+ <p class="placeholder-text-lg">No image available for this step</p>
161
+ </div>
162
+ </div>
163
+
164
+ <!-- YouTube Embed - Fullscreen Desktop -->
165
+ <div id="fullscreen-youtube-desktop" class="youtube-desktop animate-slide-in">
166
+ <iframe id="fullscreen-youtube-iframe-desktop" src="" title="Reachy Mini Assembly Tutorial" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
167
+ </div>
168
+ </div>
169
+
170
+ <!-- YouTube Embed - Fullscreen Mobile -->
171
+ <div id="fullscreen-youtube-mobile" class="youtube-mobile fullscreen-youtube-mobile">
172
+ <iframe id="fullscreen-youtube-iframe-mobile" src="" title="Reachy Mini Assembly Tutorial" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
173
+ </div>
174
+
175
+ <!-- Fullscreen Navigation Controls -->
176
+ <div class="nav-controls fullscreen-nav">
177
+ <div class="nav-buttons">
178
+ <button id="fullscreen-prev-btn" class="btn btn-outline" disabled>
179
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
180
+ <path d="M15 18l-6-6 6-6"/>
181
+ </svg>
182
+ Previous
183
+ </button>
184
+
185
+ <div id="fullscreen-step-indicators" class="step-indicators"></div>
186
+
187
+ <button id="fullscreen-next-btn" class="btn btn-primary">
188
+ Next
189
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
190
+ <path d="M9 18l6-6-6-6"/>
191
+ </svg>
192
+ </button>
193
+ </div>
194
+
195
+ <div class="progress-bar-container">
196
+ <div id="fullscreen-progress-bar" class="progress-bar"></div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <script src="script.js"></script>
202
+ </body>
203
  </html>