pollen-robotics/Reachy_Mini_Assembly_Guide
47
1<!DOCTYPE html>2<html lang="en">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</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="style.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.<br>45 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>.46 </p>47 </div>48 49 <!-- Step Viewer -->50 <div id="step-viewer" class="step-viewer animate-fade-in">51 <!-- Image Container -->52 <div class="image-container">53 <!-- Step Counter -->54 <div class="step-counter">55 <span id="step-counter-text">Step 1/51</span>56 </div>57 58 <!-- Fullscreen Button -->59 <button id="fullscreen-btn" class="fullscreen-btn" aria-label="Toggle fullscreen">60 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">61 <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"/>62 </svg>63 </button>64 65 <!-- Step Image -->66 <div id="image-wrapper" class="image-wrapper">67 <img id="step-image" src="" alt="Assembly step" class="step-image">68 <div id="placeholder" class="placeholder">69 <div class="placeholder-circle">70 <span id="placeholder-number">1</span>71 </div>72 <p class="placeholder-text">Step 1 image</p>73 </div>74 </div>75 76 <!-- YouTube Embed - Desktop -->77 <div id="youtube-desktop" class="youtube-desktop animate-slide-in">78 <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>79 </div>80 </div>81 82 <!-- YouTube Embed - Mobile -->83 <div id="youtube-mobile" class="youtube-mobile">84 <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>85 </div>86 87 <!-- Navigation Controls -->88 <div class="nav-controls">89 <div class="nav-buttons">90 <button id="prev-btn" class="btn btn-outline" disabled>91 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">92 <path d="M15 18l-6-6 6-6"/>93 </svg>94 Previous95 </button>96 97 <div id="step-indicators" class="step-indicators"></div>98 99 <button id="next-btn" class="btn btn-primary">100 Next101 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">102 <path d="M9 18l6-6-6-6"/>103 </svg>104 </button>105 </div>106 107 <!-- Progress Bar -->108 <div class="progress-bar-container">109 <div id="progress-bar" class="progress-bar"></div>110 </div>111 </div>112 </div>113 </div>114 </main>115 116 <!-- Footer -->117 <footer class="footer">118 <div class="container">119 <p class="footer-text">120 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 121 <a href="https://discord.gg/HDrGY9eJHt" target="_blank" rel="noopener noreferrer" class="footer-link">Discord</a> 122 and join the community.123 </p>124 </div>125 </footer>126 </div>127 128 <!-- Fullscreen Modal -->129 <div id="fullscreen-modal" class="fullscreen-modal hidden">130 <div class="fullscreen-header">131 <div class="fullscreen-title">132 <span id="fullscreen-step-title">Step 1/51 - Apply the foot pads.</span>133 </div>134 <div class="fullscreen-controls">135 <button id="zoom-out-btn" class="btn-icon" aria-label="Zoom out">136 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">137 <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><path d="M8 11h6"/>138 </svg>139 </button>140 <span id="zoom-level" class="zoom-level">100%</span>141 <button id="zoom-in-btn" class="btn-icon" aria-label="Zoom in">142 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">143 <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/><path d="M11 8v6"/><path d="M8 11h6"/>144 </svg>145 </button>146 <button id="close-fullscreen-btn" class="btn-icon" aria-label="Close fullscreen">147 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">148 <path d="M18 6L6 18"/><path d="M6 6l12 12"/>149 </svg>150 </button>151 </div>152 </div>153 154 <div class="fullscreen-content">155 <div id="fullscreen-image-container" class="fullscreen-image-container">156 <img id="fullscreen-image" src="" alt="Assembly step" class="fullscreen-image">157 <div id="fullscreen-placeholder" class="placeholder fullscreen-placeholder">158 <div class="placeholder-circle placeholder-circle-lg">159 <span id="fullscreen-placeholder-number">1</span>160 </div>161 <p class="placeholder-text-lg">No image available for this step</p>162 </div>163 </div>164 165 <!-- YouTube Embed - Fullscreen Desktop -->166 <div id="fullscreen-youtube-desktop" class="youtube-desktop animate-slide-in">167 <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>168 </div>169 </div>170 171 <!-- YouTube Embed - Fullscreen Mobile -->172 <div id="fullscreen-youtube-mobile" class="youtube-mobile fullscreen-youtube-mobile">173 <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>174 </div>175 176 <!-- Fullscreen Navigation Controls -->177 <div class="nav-controls fullscreen-nav">178 <div class="nav-buttons">179 <button id="fullscreen-prev-btn" class="btn btn-outline" disabled>180 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">181 <path d="M15 18l-6-6 6-6"/>182 </svg>183 Previous184 </button>185 186 <div id="fullscreen-step-indicators" class="step-indicators"></div>187 188 <button id="fullscreen-next-btn" class="btn btn-primary">189 Next190 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">191 <path d="M9 18l6-6-6-6"/>192 </svg>193 </button>194 </div>195 196 <div class="progress-bar-container">197 <div id="fullscreen-progress-bar" class="progress-bar"></div>198 </div>199 </div>200 </div>201 202 <script src="script.js"></script>203</body>204</html>205