| <!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</title> |
| <meta name="description" content="Step-by-step assembly guide for Reachy Mini Robot. Follow detailed steps to build your robot."> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| |
| <header class="header"> |
| <div class="container"> |
| <div class="header-content"> |
| <div class="header-left"> |
| <img src="assets/reachy-mini-builder.png" alt="Reachy Mini Robot" class="robot-icon"> |
| <div> |
| <h1 class="title">Reachy Mini</h1> |
| <p class="subtitle">Assembly Guide</p> |
| </div> |
| </div> |
| |
| |
| |
| |
| |
| |
| |
| |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="main-content"> |
| <div class="container"> |
| |
| <div class="intro-section"> |
| <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>Wireless</strong>. |
| Use the navigation buttons to move through each step at your own pace. |
| </p> |
| </div> |
|
|
| |
| <div class="carousel"> |
| |
| <div class="step-counter"> |
| <span id="stepDisplay" class="step-counter-text">Step 1/51</span> |
| </div> |
|
|
| |
| <div class="image-container"> |
| <img id="stepImage" src="assets/p9.jpg" alt="Assembly step 1" class="step-image"> |
| <div id="placeholderText" class="placeholder" style="display: none;"> |
| <div class="placeholder-icon"> |
| <span id="placeholderNumber">1</span> |
| </div> |
| <p class="placeholder-text">Step <span id="placeholderStep">1</span> image will be added here</p> |
| </div> |
| </div> |
|
|
| |
| <div class="controls"> |
| <div class="controls-top"> |
| <button id="prevBtn" class="btn btn-secondary"> |
| <svg class="icon-left" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <polyline points="15 18 9 12 15 6"></polyline> |
| </svg> |
| Previous |
| </button> |
|
|
| |
| <div class="indicators" id="indicators"></div> |
|
|
| <button id="nextBtn" class="btn btn-primary"> |
| Next |
| <svg class="icon-right" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> |
| <polyline points="9 18 15 12 9 6"></polyline> |
| </svg> |
| </button> |
| </div> |
|
|
| |
| <div class="progress-bar"> |
| <div id="progressFill" class="progress-fill"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="video-section"> |
| |
| <div class="video-wrapper"> |
| <iframe |
| src="https://www.youtube.com/embed/_r0cHySFbeY" |
| title="Reachy Mini Assembly Tutorial" |
| frameborder="0" |
| allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" |
| referrerpolicy="strict-origin-when-cross-origin" |
| allowfullscreen |
| ></iframe> |
| </div> |
|
|
| |
| <div class="video-text"> |
| <h2>Follow Steps by Steps</h2> |
| <p class="video-description"> |
| Watch the video to easily follow the assembly at your own pace! |
| </p> |
|
|
| <div class="tips-list"> |
| <div class="tip-item"> |
| <span class="tip-icon">⏱️</span> |
| <div> |
| <h4>Take Your Time</h4> |
| <p>Each step is designed to be completed in approximately 2 minutes. Don't rush!</p> |
| </div> |
| </div> |
|
|
| <div class="tip-item"> |
| <span class="tip-icon">🔧</span> |
| <div> |
| <h4>Check Your Parts</h4> |
| <p>Make sure you have all the components listed in each step before proceeding.</p> |
| </div> |
| </div> |
|
|
| <div class="tip-item"> |
| <span class="tip-icon">✨</span> |
| <div> |
| <h4>Have Fun!</h4> |
| <p>Enjoy the assembly process and watch your Reachy Mini come to life.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="footer"> |
| <div class="container"> |
| <p class="footer-text"> |
| Need help? Contact us on <a href="https://discord.gg/HDrGY9eJHt" target="_blank">Discord</a> and join the community. |
| </p> |
| </div> |
| </footer> |
|
|
| <script src="script.js"></script> |
| </body> |
| </html> |
|
|
