|
|
<!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 - Beta</title> |
|
|
<meta name="description" content="Step-by-step assembly guide for Reachy Mini Robot. Follow 51 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-icon-happy.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> |
|
|
|
