Hugging Face's logo

Spaces:
pollen-robotics
/
Reachy_Mini_Assembly_Guide
Running

App Files Community
Anne-Charlotte commited on
Commit
1656cfa
·
verified ·
1 Parent(s): 70e7f07

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +50 -27
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Reachy Mini Robot - Assembly Guide</title>
7
  <meta name="description" content="Step-by-step assembly guide for Reachy Mini Robot. Follow 51 detailed steps to build your robot.">
8
  <link rel="stylesheet" href="style.css">
9
  </head>
@@ -15,16 +15,18 @@
15
  <div class="header-left">
16
  <img src="assets/reachy-mini-icon-happy.png" alt="Reachy Mini Robot" class="robot-icon">
17
  <div>
18
- <h1 class="title">Reachy Mini Robot</h1>
19
- <p class="subtitle">Assembly Guide</p>
20
  </div>
21
  </div>
 
22
  <div class="steps-badge">
23
  <svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
24
  <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"/>
25
  </svg>
26
  <span class="steps-text">51 Steps</span>
27
  </div>
 
28
  </div>
29
  </div>
30
  </header>
@@ -36,7 +38,7 @@
36
  <div class="intro-section">
37
  <h2 class="intro-title">Welcome to Your Assembly Journey</h2>
38
  <p class="intro-text">
39
- Follow this step-by-step guide to assemble your Reachy Mini Robot.
40
  Use the navigation buttons to move through each step at your own pace.
41
  </p>
42
  </div>
@@ -86,33 +88,54 @@
86
  </div>
87
  </div>
88
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
89
 
90
- <!-- Tips Section -->
91
- <div class="tips-grid">
92
- <div class="tip-card">
93
- <div class="tip-icon">⏱️</div>
94
- <h3 class="tip-title">Take Your Time</h3>
95
- <p class="tip-text">
96
- Carefully read the instructions and make sure you have all the components listed in each step before proceeding.
97
- </p>
98
- </div>
99
 
100
- <div class="tip-card">
101
- <div class="tip-icon">▶️</div>
102
- <h3 class="tip-title">Follow Along Step by Step</h3>
103
- <p class="tip-text">
104
- <a href="https://youtu.be/_r0cHySFbeY?si=6Mw4js8HSUs4cwoJ" target="_blank">Watch the video</a> to easily follow the assembly at your own pace!
105
- </p>
106
- </div>
 
 
 
 
 
 
 
 
 
107
 
108
- <div class="tip-card">
109
- <div class="tip-icon">✨</div>
110
- <h3 class="tip-title">Have Fun!</h3>
111
- <p class="tip-text">
112
- Enjoy the assembly process and watch your Reachy Mini come to life.
113
- </p>
 
 
 
114
  </div>
115
- </div>
116
  </div>
117
  </main>
118
 
 
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 - Beta</title>
7
  <meta name="description" content="Step-by-step assembly guide for Reachy Mini Robot. Follow 51 detailed steps to build your robot.">
8
  <link rel="stylesheet" href="style.css">
9
  </head>
 
15
  <div class="header-left">
16
  <img src="assets/reachy-mini-icon-happy.png" alt="Reachy Mini Robot" class="robot-icon">
17
  <div>
18
+ <h1 class="title">Reachy Mini</h1>
19
+ <p class="subtitle">Assembly Guide - Beta</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>
 
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 Beta.
42
  Use the navigation buttons to move through each step at your own pace.
43
  </p>
44
  </div>
 
88
  </div>
89
  </div>
90
  </div>
91
+ <!-- Video Tutorial Section -->
92
+ <div class="video-section">
93
+ <!-- Left - Video -->
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
+ <!-- Right - Text content -->
106
+ <div class="video-text">
107
+ <h2>Follow Steps by Steps</h2>
108
+ <p class="video-description">
109
+ Watch the video to easily follow the assembly at your own pace!
110
+ </p>
 
 
 
111
 
112
+ <div class="tips-list">
113
+ <div class="tip-item">
114
+ <span class="tip-icon">⏱️</span>
115
+ <div>
116
+ <h4>Take Your Time</h4>
117
+ <p>Each step is designed to be completed in approximately 2 minutes. Don't rush!</p>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="tip-item">
122
+ <span class="tip-icon">🔧</span>
123
+ <div>
124
+ <h4>Check Your Parts</h4>
125
+ <p>Make sure you have all the components listed in each step before proceeding.</p>
126
+ </div>
127
+ </div>
128
 
129
+ <div class="tip-item">
130
+ <span class="tip-icon">✨</span>
131
+ <div>
132
+ <h4>Have Fun!</h4>
133
+ <p>Enjoy the assembly process and watch your Reachy Mini come to life.</p>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
138
  </div>
 
139
  </div>
140
  </main>
141