| | <!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 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 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="style.css"> |
| | </head> |
| | <body> |
| | <div id="app" class="min-h-screen bg-background"> |
| | |
| | <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</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </header> |
| |
|
| | |
| | <main class="main-content"> |
| | <div class="container-full"> |
| | |
| | <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>Wireless</strong>. |
| | Use the navigation buttons to move through each step at your own pace.<br> |
| | If you have the Lite version, please refer to this <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_LITE_Assembly_Guide" target="_blank" class="footer-link">guide</a>. |
| | </p> |
| | </div> |
| |
|
| | |
| | <div id="step-viewer" class="step-viewer animate-fade-in"> |
| | |
| | <div class="image-container"> |
| | |
| | <div class="step-counter"> |
| | <span id="step-counter-text">Step 1/51</span> |
| | </div> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <div class="progress-bar-container"> |
| | <div id="progress-bar" class="progress-bar"></div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| |
|
| | |
| | <footer class="footer"> |
| | <div class="container"> |
| | <p class="footer-text"> |
| | Need help? Check out our <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" rel="noopener noreferrer" class="footer-link">Troubleshooting & FAQ</a> or 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> |
| |
|
| | |
| | <div id="fullscreen-modal" class="fullscreen-modal hidden"> |
| | <div class="fullscreen-header"> |
| | <div class="fullscreen-title"> |
| | <span id="fullscreen-step-title">Step 1/51 - 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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
| | |
| | <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> |
| |
|
