Hugging Face's logo

Spaces:
pollen-robotics
/
Reachy_Mini_LITE_Assembly_Guide
Running

App Files Community
1
Reachy_Mini_LITE_Assembly_Guide
File size: 10,878 Bytes 
4a24f49
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c8a7146
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reachy Mini - Assembly Guide - Lite</title>
    <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.">
    <meta name="author" content="Pollen Robotics">
    
    <meta property="og:title" content="Reachy Mini - Assembly Guide">
    <meta property="og:description" content="Step-by-step assembly guide for Reachy Mini Lite Robot. Follow detailed steps to build your robot.">
    <meta property="og:type" content="website">
    
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@paboris">
    
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app" class="min-h-screen bg-background">
        <!-- Header -->
        <header class="header">
            <div class="container">
                <div class="header-content">
                    <div class="header-left">
                        <img src="assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="header-icon">
                        <div>
                            <h1 class="header-title">Reachy Mini</h1>
                            <p class="header-subtitle">Assembly Guide - Lite</p>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="main-content">
            <div class="container-full">
                <!-- Intro Section -->
                <div class="intro-section animate-fade-in">
                    <h2 class="intro-title">Welcome to Your Assembly Journey</h2>
                    <p class="intro-text">
                        Follow this step-by-step guide to assemble your Reachy Mini <strong>Lite</strong>. 
                        Use the navigation buttons to move through each step at your own pace.
                    </p>
                </div>

                <!-- Step Viewer -->
                <div id="step-viewer" class="step-viewer animate-fade-in">
                    <!-- Image Container -->
                    <div class="image-container">
                        <!-- Step Counter -->
                        <div class="step-counter">
                            <span id="step-counter-text">Step 1/46</span>
                        </div>

                        <!-- Fullscreen Button -->
                        <button id="fullscreen-btn" class="fullscreen-btn" aria-label="Toggle fullscreen">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <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"/>
                            </svg>
                        </button>

                        <!-- Step Image -->
                        <div id="image-wrapper" class="image-wrapper">
                            <img id="step-image" src="" alt="Assembly step" class="step-image">
                            <div id="placeholder" class="placeholder">
                                <div class="placeholder-circle">
                                    <span id="placeholder-number">1</span>
                                </div>
                                <p class="placeholder-text">Step 1 image</p>
                            </div>
                        </div>

                        <!-- YouTube Embed - Desktop -->
                        <div id="youtube-desktop" class="youtube-desktop animate-slide-in">
                            <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>
                        </div>
                    </div>

                    <!-- YouTube Embed - Mobile -->
                    <div id="youtube-mobile" class="youtube-mobile">
                        <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>
                    </div>

                    <!-- Navigation Controls -->
                    <div class="nav-controls">
                        <div class="nav-buttons">
                            <button id="prev-btn" class="btn btn-outline" disabled>
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M15 18l-6-6 6-6"/>
                                </svg>
                                Previous
                            </button>

                            <div id="step-indicators" class="step-indicators"></div>

                            <button id="next-btn" class="btn btn-primary">
                                Next
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M9 18l6-6-6-6"/>
                                </svg>
                            </button>
                        </div>

                        <!-- Progress Bar -->
                        <div class="progress-bar-container">
                            <div id="progress-bar" class="progress-bar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- Footer -->
        <footer class="footer">
            <div class="container">
                <p class="footer-text">
                    Need help? Contact us on 
                    <a href="https://discord.gg/HDrGY9eJHt" target="_blank" rel="noopener noreferrer" class="footer-link">Discord</a> 
                    and join the community.
                </p>
            </div>
        </footer>
    </div>

    <!-- Fullscreen Modal -->
    <div id="fullscreen-modal" class="fullscreen-modal hidden">
        <div class="fullscreen-header">
            <div class="fullscreen-title">
                <span id="fullscreen-step-title">Step 1/46 - Apply the foot pads.</span>
            </div>
            <div class="fullscreen-controls">
                <button id="zoom-out-btn" class="btn-icon" aria-label="Zoom out">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><path d="M8 11h6"/>
                    </svg>
                </button>
                <span id="zoom-level" class="zoom-level">100%</span>
                <button id="zoom-in-btn" class="btn-icon" aria-label="Zoom in">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><path d="M11 8v6"/><path d="M8 11h6"/>
                    </svg>
                </button>
                <button id="close-fullscreen-btn" class="btn-icon" aria-label="Close fullscreen">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6L6 18"/><path d="M6 6l12 12"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="fullscreen-content">
            <div id="fullscreen-image-container" class="fullscreen-image-container">
                <img id="fullscreen-image" src="" alt="Assembly step" class="fullscreen-image">
                <div id="fullscreen-placeholder" class="placeholder fullscreen-placeholder">
                    <div class="placeholder-circle placeholder-circle-lg">
                        <span id="fullscreen-placeholder-number">1</span>
                    </div>
                    <p class="placeholder-text-lg">No image available for this step</p>
                </div>
            </div>

            <!-- YouTube Embed - Fullscreen Desktop -->
            <div id="fullscreen-youtube-desktop" class="youtube-desktop animate-slide-in">
                <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>
            </div>
        </div>

        <!-- YouTube Embed - Fullscreen Mobile -->
        <div id="fullscreen-youtube-mobile" class="youtube-mobile fullscreen-youtube-mobile">
            <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>
        </div>

        <!-- Fullscreen Navigation Controls -->
        <div class="nav-controls fullscreen-nav">
            <div class="nav-buttons">
                <button id="fullscreen-prev-btn" class="btn btn-outline" disabled>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                    Previous
                </button>

                <div id="fullscreen-step-indicators" class="step-indicators"></div>

                <button id="fullscreen-next-btn" class="btn btn-primary">
                    Next
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 18l6-6-6-6"/>
                    </svg>
                </button>
            </div>

            <div class="progress-bar-container">
                <div id="fullscreen-progress-bar" class="progress-bar"></div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>