|
|
<!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 - Lite</title> |
|
|
<meta name="description" content="Step-by-step assembly guide for Reachy Mini Lite 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 Lite 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="styles.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 - Lite</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>Lite</strong>. |
|
|
Use the navigation buttons to move through each step at your own pace. |
|
|
</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/46</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? 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/46 - 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> |
|
|
|
