Hugging Face's logo

Spaces:
pollen-robotics
/
Reachy_Mini_Assembly_Guide
Running

App Files Community
Anne-Charlotte commited on
Commit
2f1c30b
·
verified ·
1 Parent(s): 43a4f9a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +168 -118
index.html CHANGED
@@ -4,149 +4,199 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Reachy Mini - Assembly Guide</title>
7
- <meta name="description" content="Step-by-step assembly guide for Reachy Mini Robot. Follow detailed steps to build your robot.">
8
- <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
- <!-- Header -->
12
- <header class="header">
13
- <div class="container">
14
- <div class="header-content">
15
- <div class="header-left">
16
- <img src="assets/reachy-mini-builder.png" alt="Reachy Mini Robot" class="robot-icon">
17
- <div>
18
- <h1 class="title">Reachy Mini</h1>
19
- <p class="subtitle">Assembly Guide</p>
 
 
20
  </div>
21
  </div>
22
- <!-- STEPS
23
- <div class="steps-badge">
24
- <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
25
- <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
26
- </svg>
27
- <span class="steps-text">51 Steps</span>
28
- </div>
29
- -->
30
- </div>
31
- </div>
32
- </header>
33
-
34
- <!-- Main Content -->
35
- <main class="main-content">
36
- <div class="container">
37
- <!-- Introduction -->
38
- <div class="intro-section">
39
- <h2 class="intro-title">Welcome to Your Assembly Journey</h2>
40
- <p class="intro-text">
41
- Follow this step-by-step guide to assemble your Reachy Mini <strong>Wireless</strong>.
42
- Use the navigation buttons to move through each step at your own pace.
43
- </p>
44
  </div>
 
45
 
46
- <!-- Carousel -->
47
- <div class="carousel">
48
- <!-- Step Counter -->
49
- <div class="step-counter">
50
- <span id="stepDisplay" class="step-counter-text">Step 1/51</span>
 
 
 
 
 
51
  </div>
52
 
53
- <!-- Image Display -->
54
- <div class="image-container">
55
- <img id="stepImage" src="assets/p9.jpg" alt="Assembly step 1" class="step-image">
56
- <div id="placeholderText" class="placeholder" style="display: none;">
57
- <div class="placeholder-icon">
58
- <span id="placeholderNumber">1</span>
 
59
  </div>
60
- <p class="placeholder-text">Step <span id="placeholderStep">1</span> image will be added here</p>
61
- </div>
62
- </div>
63
 
64
- <!-- Navigation Controls -->
65
- <div class="controls">
66
- <div class="controls-top">
67
- <button id="prevBtn" class="btn btn-secondary">
68
- <svg class="icon-left" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
69
- <polyline points="15 18 9 12 15 6"></polyline>
70
  </svg>
71
- Previous
72
  </button>
73
 
74
- <!-- Step Indicators -->
75
- <div class="indicators" id="indicators"></div>
 
 
 
 
 
 
 
 
76
 
77
- <button id="nextBtn" class="btn btn-primary">
78
- Next
79
- <svg class="icon-right" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
80
- <polyline points="9 18 15 12 9 6"></polyline>
81
- </svg>
82
- </button>
83
  </div>
84
 
85
- <!-- Progress Bar -->
86
- <div class="progress-bar">
87
- <div id="progressFill" class="progress-fill"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  </div>
89
  </div>
90
  </div>
91
- <!-- Video section
92
- <!-- Video Tutorial Section
93
- <div class="video-section">
94
- <div class="video-wrapper">
95
- <iframe
96
- src="https://www.youtube.com/embed/_r0cHySFbeY"
97
- title="Reachy Mini Assembly Tutorial"
98
- frameborder="0"
99
- allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
100
- referrerpolicy="strict-origin-when-cross-origin"
101
- allowfullscreen
102
- ></iframe>
103
- </div>
104
 
105
- <div class="video-text">
106
- <h2>Follow Steps by Steps</h2>
107
- <p class="video-description">
108
- Watch the video to easily follow the assembly at your own pace!
109
- </p>
110
-
111
- <div class="tips-list">
112
- <div class="tip-item">
113
- <span class="tip-icon">⏱️</span>
114
- <div>
115
- <h4>Take Your Time</h4>
116
- <p>Each step is designed to be completed in approximately 2 minutes. Don't rush!</p>
117
- </div>
118
- </div>
119
 
120
- <div class="tip-item">
121
- <span class="tip-icon">🔧</span>
122
- <div>
123
- <h4>Check Your Parts</h4>
124
- <p>Make sure you have all the components listed in each step before proceeding.</p>
125
- </div>
126
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
127
 
128
- <div class="tip-item">
129
- <span class="tip-icon">✨</span>
130
- <div>
131
- <h4>Have Fun!</h4>
132
- <p>Enjoy the assembly process and watch your Reachy Mini come to life.</p>
133
- </div>
134
- </div>
135
- </div>
136
  </div>
137
- </div>
138
- -->
 
 
 
 
 
 
 
 
 
 
 
139
  </div>
140
- </main>
141
-
142
- <!-- Footer -->
143
- <footer class="footer">
144
- <div class="container">
145
- <p class="footer-text">
146
- Need help? Contact us on <a href="https://discord.gg/HDrGY9eJHt" target="_blank">Discord</a> and join the community.
147
- </p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
148
  </div>
149
- </footer>
150
 
151
  <script src="script.js"></script>
152
  </body>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Reachy Mini - Assembly Guide</title>
7
+ <meta name="description" content="Step-by-step assembly guide for Reachy Mini 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 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</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>Wireless</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/51</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/51 - 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>