arcade / index.html
drenayaz
Add arcade launch video to landing page
0d5ab9c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arcade - Reachy Mini</title>
<meta name="description" content="Play retro arcade games with Reachy Mini - 6 games controlled with head movements and antenna pulls.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div>
<img class="hero-image" src="assets/reachy-mini-skin-arcade.png" alt="Reachy Mini Arcade">
</div>
<div class="hero-content">
<div class="hero-header">
<img class="hero-sticker" src="assets/reachy-mini-arcade_sticker.png" alt="Arcade">
<h1 class="hero-title">Arcade</h1>
</div>
<div class="tags">
<span class="tag">games</span>
<span class="tag">head control</span>
<span class="tag">physical arcade</span>
</div>
<p class="hero-description">
Turn your <b>Reachy Mini</b> into a retro arcade machine! Control 6 games using head movements and antenna pulls. Play on a physical ESP32 screen or directly in the browser.
<br><br>
Games: <b>Spaceship</b>, <b>Pong</b>, <b>Duck Run</b>, <b>Flappy</b>, <b>Boss Fight</b>, and <b>Rhythm</b>.
<br><br>
This app comes with an optional <a href="https://github.com/pollen-robotics/reachy-mini-skins/tree/main/arcade" target="_blank" class="link-skin">physical arcade skin</a> you can build yourself — but it's <b>not required</b> to play!
</p>
</div>
</div>
</div>
</section>
<!-- How to install -->
<section class="technical">
<div class="container">
<div class="technical-grid">
<div>
<h2 class="section-title">How to install</h2>
<ol class="install-steps">
<li>
<span>
Make sure you already have the
<a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest"
class="link-tertiary">dashboard</a>
installed.
</span>
</li>
<li>
<span>Connect to your Reachy Mini using the dashboard.</span>
</li>
<li>
<span>Navigate to the "Applications" tab in the dashboard.</span>
</li>
<li>
<span>Find "Arcade" in the list of available applications.</span>
</li>
<li>
<span>Click "Install" and the app will be ready to use!</span>
</li>
</ol>
</div>
<div>
<video class="demo-video" autoplay loop muted playsinline>
<source src="assets/arcade_launch.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<!-- How to play -->
<section class="how-to-play">
<div class="container">
<div class="technical-grid">
<div>
<video class="demo-video" autoplay loop muted playsinline>
<source src="assets/reachy-mini-arcade-demo.mp4" type="video/mp4">
</video>
</div>
<div>
<h2 class="section-title">How to play</h2>
<div class="controls-list">
<div class="control-item">
<div class="control-icon"></div>
<div>
<h4>Tilt Reachy's head</h4>
<p>Roll left/right to move your character. Pitch forward/back for vertical movement.</p>
</div>
</div>
<div class="control-item">
<div class="control-icon"></div>
<div>
<h4>Pull the antennas</h4>
<p>Pull left or right antenna to shoot, jump, flap, or hit notes depending on the game.</p>
</div>
</div>
<div class="control-item">
<div class="control-icon"></div>
<div>
<h4>Two play modes</h4>
<p>Play on the physical arcade with an ESP32 screen, or directly in the browser without any extra hardware.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-links">
<a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener">> Documentation</a>
<a href="https://huggingface.co/spaces/pollen-robotics/Reachy-Mini_Best_Spaces" target="_blank" rel="noopener">> Browse other apps</a>
<a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener">> Create your own app</a>
</div>
<p class="footer-help">
Need help? Contact us on <a href="https://discord.gg/u3QtUBhy" target="_blank" rel="noopener">Discord</a> and join the community.
Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank">Pollen Robotics</a> x &#129303; <a href="https://huggingface.co" target="_blank">Hugging Face</a>
</p>
</div>
</div>
</footer>
</body>
</html>