File size: 6,889 Bytes
1f65238 b44cc91 1f65238 1656cfa decb267 1f65238 b44cc91 decb267 1f65238 decb267 8ddfc34 decb267 1656cfa decb267 1656cfa decb267 1656cfa 1f65238 decb267 1f65238 decb267 1656cfa decb267 1f65238 decb267 1f65238 decb267 eb80563 decb267 1f65238 decb267 1f65238 decb267 1f65238 decb267 1f65238 decb267 1f65238 1656cfa 1f65238 1656cfa 1f65238 1656cfa 1f65238 1656cfa 1f65238 decb267 1f65238 decb267 8282dd5 decb267 1f65238 decb267 b44cc91 1f65238 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
<!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 -->
<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 - Beta</p>
</div>
</div>
<!-- STEPS
<div class="steps-badge">
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
</svg>
<span class="steps-text">51 Steps</span>
</div>
-->
</div>
</div>
</header>
<!-- Main Content -->
<main class="main-content">
<div class="container">
<!-- Introduction -->
<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 Beta.
Use the navigation buttons to move through each step at your own pace.
</p>
</div>
<!-- Carousel -->
<div class="carousel">
<!-- Step Counter -->
<div class="step-counter">
<span id="stepDisplay" class="step-counter-text">Step 1/51</span>
</div>
<!-- Image Display -->
<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>
<!-- Navigation Controls -->
<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>
<!-- Step Indicators -->
<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>
<!-- Progress Bar -->
<div class="progress-bar">
<div id="progressFill" class="progress-fill"></div>
</div>
</div>
</div>
<!-- Video Tutorial Section -->
<div class="video-section">
<!-- Left - Video -->
<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>
<!-- Right - Text content -->
<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 -->
<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>
|