| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Simon - A Memory Game for Reachy Mini</title> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| :root { |
| --background: hsl(220, 13%, 8%); |
| --foreground: hsl(210, 40%, 98%); |
| --card: hsl(220, 13%, 12%); |
| --card-foreground: hsl(210, 40%, 98%); |
| --primary: hsl(36, 100%, 50%); |
| --primary-foreground: hsl(0, 0%, 100%); |
| --muted: hsl(220, 13%, 18%); |
| --muted-foreground: hsl(215, 16%, 60%); |
| --border: hsl(220, 13%, 20%); |
| --radius: 0.5rem; |
| } |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; |
| background-color: var(--background); |
| color: var(--foreground); |
| line-height: 1.6; |
| min-height: 100vh; |
| } |
| |
| .container { |
| max-width: 72rem; |
| margin: 0 auto; |
| padding: 0 1.5rem; |
| } |
| |
| |
| .hero { |
| padding: 4rem 0; |
| } |
| |
| .hero-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 3rem; |
| align-items: center; |
| } |
| |
| @media (min-width: 768px) { |
| .hero-grid { |
| grid-template-columns: 1fr 1fr; |
| } |
| } |
| |
| .hero video { |
| width: 100%; |
| max-width: 700px; |
| border-radius: 0.5rem; |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
| } |
| |
| .hero-content { |
| text-align: left; |
| } |
| |
| .hero-title-wrapper { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 1rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .hero-emoji { |
| font-size: 3.75rem; |
| } |
| |
| .hero-title { |
| font-size: 3rem; |
| font-weight: 700; |
| color: var(--foreground); |
| } |
| |
| .tags { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: center; |
| gap: 0.5rem; |
| margin-bottom: 1.5rem; |
| } |
| |
| .tag { |
| display: inline-flex; |
| align-items: center; |
| padding: 0.25rem 0.75rem; |
| font-size: 0.75rem; |
| font-weight: 500; |
| border-radius: 9999px; |
| background-color: rgba(255, 153, 0, 0.15); |
| color: var(--primary); |
| } |
| |
| .hero-description { |
| font-size: 1.125rem; |
| color: var(--muted-foreground); |
| max-width: 600px; |
| margin: 0 auto; |
| } |
| |
| .hero-description strong { |
| color: var(--foreground); |
| } |
| |
| |
| .technical { |
| padding: 4rem 0; |
| background-color: var(--card); |
| } |
| |
| .technical-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 4rem; |
| align-items: flex-start; |
| } |
| |
| @media (min-width: 768px) { |
| .technical-grid { |
| grid-template-columns: 1fr 1fr; |
| } |
| } |
| |
| .technical h2 { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: var(--foreground); |
| margin-bottom: 1rem; |
| margin-top: 2rem; |
| } |
| |
| .steps { |
| list-style: none; |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| |
| .step { |
| display: flex; |
| align-items: flex-start; |
| gap: 1rem; |
| color: var(--muted-foreground); |
| } |
| |
| .step-number { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| min-width: 1.75rem; |
| height: 1.75rem; |
| border-radius: 9999px; |
| background-color: var(--primary); |
| color: white; |
| font-size: 0.875rem; |
| font-weight: 600; |
| } |
| |
| .step-content { |
| display: flex; |
| flex-direction: column; |
| gap: 0.25rem; |
| } |
| |
| .step-title { |
| font-size: 0.875rem; |
| font-weight: 600; |
| color: var(--foreground); |
| } |
| |
| .step-body { |
| font-size: 0.875rem; |
| color: var(--muted-foreground); |
| } |
| |
| .step-body a { |
| color: var(--muted-foreground); |
| text-decoration: underline; |
| transition: color 0.2s; |
| } |
| |
| .step-body a:hover { |
| color: var(--primary); |
| } |
| |
| .technical video { |
| width: 100%; |
| border-radius: 0.5rem; |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| |
| .features-section { |
| padding: 4rem 0; |
| background-color: var(--card); |
| } |
| |
| .features-section h2 { |
| font-size: 2.25rem; |
| font-weight: 700; |
| text-align: center; |
| margin-bottom: 1rem; |
| } |
| |
| .features-section .subtitle { |
| color: var(--muted-foreground); |
| text-align: center; |
| max-width: 42rem; |
| margin: 0 auto 3rem; |
| } |
| |
| .features-grid { |
| display: grid; |
| grid-template-columns: repeat(1, 1fr); |
| gap: 1.5rem; |
| } |
| |
| @media (min-width: 768px) { |
| .features-grid { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
| |
| @media (min-width: 1024px) { |
| .features-grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| |
| .feature-card { |
| background-color: var(--card); |
| border-radius: 0.75rem; |
| padding: 1.5rem; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| border: 1px solid var(--border); |
| transition: box-shadow 0.3s ease; |
| } |
| |
| .feature-card:hover { |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); |
| } |
| |
| .feature-icon { |
| width: 3rem; |
| height: 3rem; |
| border-radius: 0.5rem; |
| background-color: rgba(255, 153, 0, 0.15); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| margin-bottom: 1rem; |
| color: var(--primary); |
| } |
| |
| .feature-icon svg { |
| width: 1.5rem; |
| height: 1.5rem; |
| } |
| |
| .feature-card h3 { |
| font-size: 1.125rem; |
| font-weight: 600; |
| color: var(--card-foreground); |
| margin-bottom: 0.5rem; |
| } |
| |
| .feature-card p { |
| color: var(--muted-foreground); |
| font-size: 0.875rem; |
| line-height: 1.6; |
| } |
| |
| |
| footer { |
| border-top: 1px solid var(--border); |
| padding: 3rem 0; |
| } |
| .footer-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 2rem; |
| margin-bottom: 2rem; |
| } |
| @media (min-width: 768px) { |
| .footer-grid { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
| .footer-column { |
| display: flex; |
| flex-direction: column; |
| gap: 1rem; |
| } |
| .author-section { |
| display: flex; |
| align-items: center; |
| gap: 1.25rem; |
| } |
| .author-link { |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| text-decoration: none; |
| color: inherit; |
| } |
| .author-link:hover .author-name { |
| color: var(--primary); |
| } |
| .author-link:hover .author-avatar { |
| border-color: var(--primary); |
| } |
| .author-avatar { |
| width: 3.5rem; |
| height: 3.5rem; |
| border-radius: 9999px; |
| border: 2px solid white; |
| transition: border-color 0.2s; |
| } |
| .author-intro { |
| font-size: 0.875rem; |
| color: var(--muted-foreground); |
| } |
| .author-name { |
| font-size: 1.125rem; |
| font-weight: 600; |
| transition: color 0.2s; |
| } |
| .follow-btn { |
| display: inline-flex; |
| align-items: center; |
| padding: 0.375rem 0.75rem; |
| font-size: 0.75rem; |
| font-weight: 500; |
| border-radius: 9999px; |
| border: 1px solid var(--border); |
| background-color: var(--card); |
| color: var(--foreground); |
| text-decoration: none; |
| transition: background-color 0.2s; |
| } |
| .follow-btn:hover { |
| background-color: var(--muted); |
| } |
| .social-links { |
| display: flex; |
| gap: 0.75rem; |
| } |
| .social-link { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 2.25rem; |
| height: 2.25rem; |
| border-radius: 9999px; |
| background-color: var(--muted); |
| color: var(--muted-foreground); |
| text-decoration: none; |
| transition: all 0.2s; |
| } |
| .social-link:hover { |
| background-color: var(--primary); |
| color: var(--primary-foreground); |
| } |
| .social-link svg { |
| width: 1.25rem; |
| height: 1.25rem; |
| } |
| .footer-title { |
| font-size: 0.875rem; |
| font-weight: 600; |
| } |
| .footer-links { |
| list-style: none; |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
| .footer-link { |
| font-size: 0.875rem; |
| color: var(--muted-foreground); |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| .footer-link:hover { |
| color: var(--primary); |
| } |
| .credits-text { |
| font-size: 0.875rem; |
| color: var(--muted-foreground); |
| } |
| .credits-text a { |
| color: var(--muted-foreground); |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| .credits-text a:hover { |
| color: var(--primary); |
| } |
| </style> |
| </head> |
| <body> |
|
|
| |
| <section class="hero"> |
| <div class="container"> |
| <div class="hero-grid"> |
| <div> |
| <video autoplay loop muted playsinline> |
| <source src="assets/reachy-mini-demo-simon.mp4" type="video/mp4" /> |
| </video> |
| </div> |
|
|
| <div class="hero-content"> |
| <div class="hero-title-wrapper"> |
| <span class="hero-emoji">🎮</span> |
| <h1 class="hero-title">Simon</h1> |
| </div> |
|
|
| <div class="tags"> |
| <span class="tag">Motion</span> |
| <span class="tag">Game</span> |
| <span class="tag">Kids</span> |
| </div> |
|
|
| <p class="hero-description"> |
| <strong>Watch, Remember, Repeat - Three Difficulty Modes!</strong><br /> |
| A Simon-style memory game with three difficulty levels, progressing from simple head movements to full robot control with body rotation and antennas.<br> |
| Players choose the difficulty with the left antenna, start with the right, watch Reachy play an increasing sequence, and repeat it to win, with sounds, instant feedback, scoring, and celebrations making the challenge fun and engaging. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="technical"> |
| <div class="container"> |
| <div class="technical-grid"> |
| <div> |
| <h2>How it works</h2> |
| <ol class="steps"> |
| <li class="step"> |
| <span class="step-number">1</span> |
| <div class="step-content"> |
| <div class="step-title">Connect Reachy Mini & launch the app</div> |
| <div class="step-body"> |
| Connect to your Reachy Mini, navigate to the "Applications" tab, find "Simon" and click "Launch" (make sure you already have the <a href="https://hf.co/reachy-mini/#download" target="_blank" rel="noreferrer">dashboard</a> installed). |
| </div> |
| </div> |
| </li> |
| <li class="step"> |
| <span class="step-number">2</span> |
| <div class="step-content"> |
| <div class="step-title">Select Difficulty</div> |
| <div class="step-body">Move the LEFT antenna to choose difficulty (1, 2, or 3)</div> |
| </div> |
| </li> |
| <li class="step"> |
| <span class="step-number">3</span> |
| <div class="step-content"> |
| <div class="step-title">Start the Game</div> |
| <div class="step-body">Pull the RIGHT antenna to start (it twitches when ready!)</div> |
| </div> |
| </li> |
| <li class="step"> |
| <span class="step-number">4</span> |
| <div class="step-content"> |
| <div class="step-title">Watch the Sequence</div> |
| <div class="step-body">Reachy demonstrates with head, body, and/or antennas</div> |
| </div> |
| </li> |
| <li class="step"> |
| <span class="step-number">5</span> |
| <div class="step-content"> |
| <div class="step-title">Repeat & Win!</div> |
| <div class="step-body">Repeat the sequence - each round adds one more move!</div> |
| </div> |
| </li> |
| </ol> |
| </div> |
|
|
| <div> |
| <video autoplay loop muted playsinline> |
| <source src="assets/reachy-mini-demo-simon-dashboard.mp4" type="video/mp4" /> |
| </video> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="features-section"> |
| <div class="container"> |
| <h2>Features</h2> |
| <p class="subtitle">Discover all the exciting features that make Simon a unique memory game experience</p> |
| <div class="features-grid"> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 6H3M21 12H3M21 18H3M6 6v12M18 6v12"/></svg> |
| </div> |
| <h3>3 Difficulty Modes</h3> |
| <p>From 4 to 10 directions - choose your challenge!</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9 18V5l12-2v13M9 9l12-2"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> |
| </div> |
| <h3>Unique Sounds</h3> |
| <p>Each of the 10 directions has its own musical tone</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg> |
| </div> |
| <h3>Score Tracking</h3> |
| <p>Beat your personal best at each difficulty level</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M5.8 11.3 2 22l10.7-3.79M4 3h.01M22 8h.01M15 2h.01M22 20h.01M22 2l-2.24.75a2.9 2.9 0 0 0-1.96 3.12c.1.86-.57 1.63-1.45 1.63h-.38c-.86 0-1.6.6-1.76 1.44L14 10m8 3-.82-.33c-.86-.34-1.82.2-1.98 1.11c-.11.7-.72 1.22-1.43 1.22H17M11 2l.33.82c.34.86-.2 1.82-1.11 1.98-.7.11-1.22.72-1.22 1.43V8m-6 9-.82-.33c-.86-.34-1.82.2-1.98 1.11-.11.7-.72 1.22-1.43 1.22H0"/></svg> |
| </div> |
| <h3>Celebrations</h3> |
| <p>Reachy performs a happy dance when you set new records</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg> |
| </div> |
| <h3>Instant Feedback</h3> |
| <p>Hear sounds immediately - lose on first wrong move!</p> |
| </div> |
| <div class="feature-card"> |
| <div class="feature-icon"> |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2M20 14h2M15 13v2M9 13v2"/></svg> |
| </div> |
| <h3>Full Body Control</h3> |
| <p>Use head, body rotation, and more to play the game</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer> |
| <div class="container"> |
| <div class="footer-grid"> |
| |
| <div class="footer-column"> |
| <div class="author-section"> |
| <a href="https://huggingface.co/apirrone" target="_blank" rel="noopener noreferrer" class="author-link"> |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/6303eb57fc783bfc74434dd9/3nKuT_PP_gugI4Hpuu8hG.jpeg" alt="apirrone" class="author-avatar"> |
| <div> |
| <p class="author-intro">Hey, I'm</p> |
| <p class="author-name">Apirrone</p> |
| </div> |
| </a> |
| <a href="https://huggingface.co/apirrone" target="_blank" rel="noopener noreferrer" class="follow-btn">Follow</a> |
| </div> |
| <div class="social-links"> |
| <a href="https://twitter.com/antoinepirrone" target="_blank" rel="noopener noreferrer" aria-label="Twitter" class="social-link"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg> |
| </a> |
| <a href="https://github.com/apirrone" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="social-link"> |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg> |
| </a> |
| |
| |
| |
| |
| </div> |
| </div> |
|
|
| |
| <div class="footer-column"> |
| <h4 class="footer-title">Resources</h4> |
| <ul class="footer-links"> |
| <li><a href="https://huggingface.co/docs/reachy_mini/index" target="_blank" rel="noopener noreferrer" class="footer-link">Read the documentation & FAQ</a></li> |
| <li><a href="https://hf.co/reachy-mini/#apps" target="_blank" rel="noopener noreferrer" class="footer-link">Browse other apps</a></li> |
| <li><a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener noreferrer" class="footer-link">Make your own app</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div class="footer-column"> |
| <h4 class="footer-title">Credits</h4> |
| <p class="credits-text">This app was created with <a href="https://huggingface.co/apirrone" target="_blank" rel="noopener noreferrer">love</a>.</p> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| </body> |
| </html> |
