Spaces:

chelleboyer
/

reachy_mini_remix

Running

App Files Files Community

chelleboyer commited on Dec 14, 2025

Commit

71692e5

1 Parent(s): 8efb17d

Update app

Browse files

Files changed (3) hide show

index.html +68 -36
reachy_mini_remix/app.py +1 -1
style.css +214 -76

index.html CHANGED Viewed

@@ -3,66 +3,98 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Reachy Remix - Motion Builder for Reachy Mini</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="container">
         <header>
-            <h1>Reachy Mini Remix</h1>
-            <p class="tagline">Motion Builder for Reachy Mini</p>
         </header>
         <section class="hero">
             <p class="description">
-                Build dance sequences with tap-to-add blocks! A kid-friendly Gradio interface
-                for creating choreographies using 18 pre-recorded moves from the Reachy Mini SDK.
             </p>
         </section>
-        <section class="installation">
-            <h2>📦 Installation</h2>
-            <div class="steps">
-                <div class="step">
-                    <h3>1. Access Dashboard</h3>
-                    <p>On your Reachy Mini robot, open the dashboard:</p>
-                    <code>http://&lt;your-robot-ip&gt;:8000</code>
                 </div>
-                <div class="step">
-                    <h3>2. Install from Hugging Face</h3>
-                    <p>Click "[Install]"</p>
                 </div>
-                <div class="step">
-                    <h3>3. Launch & Create</h3>
-                    <p>Click "Run" on the app card, then click ⚙️ to open the interface</p>
                 </div>
             </div>
         </section>
         <section class="features">
-            <h2>✨ Features</h2>
-            <ul>
-                <li><strong>Easy Block Building:</strong> Tap move buttons to add them to your sequence</li>
-                <li><strong>20+ Dance Moves:</strong> Full access to the Reachy Mini SDK dance library</li>
-                <li><strong>Instant Playback:</strong> Watch Reachy perform with smooth transitions</li>
-                <li><strong>Beautiful Themes:</strong> 26 TTKBootstrap-inspired themes to choose from</li>
-                <li><strong>Save & Load:</strong> Store your favorite choreographies</li>
-            </ul>
         </section>
-        <section class="moves">
-            <h2>💃 Available Moves</h2>
-            <p>Including: yeah_nod, no_head, spin, happy_ears, sad_head, wave, bow, look_around, and many more!</p>
         </section>
         <footer>
-            <p>
-                <a href="https://github.com/chelleboyer/reachy-remix-deploy" target="_blank">View on GitHub</a> |
-                <a href="https://huggingface.co/spaces/chelleboyer/reachy_mini_remix" target="_blank">Hugging Face Space</a>
-            </p>
-            <p class="note">
-                <strong>Note:</strong> This is a Reachy Mini app. Install it through your robot's dashboard
-                at <code>http://&lt;robot-ip&gt;:8000</code>
             </p>
         </footer>
     </div>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reachy Remix - Build Dance Routines for Your Reachy Mini Robot</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="container">
         <header>
+            <div class="logo"><i class="fas fa-robot"></i></div>
+            <h1>Reachy Remix</h1>
+            <p class="tagline">Create Amazing Dance Routines for Your Robot</p>
         </header>
         <section class="hero">
             <p class="description">
+                Turn your Reachy Mini into a dancing star! Build custom choreographies by combining
+                fun moves like head nods, waves, spins, and ear wiggles. Perfect for kids and
+                beginners—no coding required!
             </p>
         </section>
+        <section class="how-it-works">
+            <h2>How It Works</h2>
+            <div class="steps-grid">
+                <div class="step-card">
+                    <div class="icon"><i class="fas fa-hand-pointer"></i></div>
+                    <h3>Tap & Add</h3>
+                    <p>Click colorful move buttons to build your sequence—it's as easy as stacking blocks!</p>
                 </div>
+                <div class="step-card">
+                    <div class="icon"><i class="fas fa-palette"></i></div>
+                    <h3>Mix & Match</h3>
+                    <p>Combine over 20 different moves to create unique dance routines your way.</p>
                 </div>
+                <div class="step-card">
+                    <div class="icon"><i class="fas fa-play-circle"></i></div>
+                    <h3>Watch & Share</h3>
+                    <p>Hit play and watch Reachy perform your choreography with smooth, lifelike movements!</p>
                 </div>
             </div>
         </section>
         <section class="features">
+            <h2>What You Can Do</h2>
+            <div class="features-grid">
+                <div class="feature">
+                    <div class="feature-icon"><i class="fas fa-puzzle-piece"></i></div>
+                    <h3>Easy Building</h3>
+                    <p>Drag-and-drop style interface anyone can use</p>
+                </div>
+                <div class="feature">
+                    <div class="feature-icon"><i class="fas fa-theater-masks"></i></div>
+                    <h3>Express Yourself</h3>
+                    <p>Create happy dances, silly moves, or dramatic performances</p>
+                </div>
+                <div class="feature">
+                    <div class="feature-icon"><i class="fas fa-swatchbook"></i></div>
+                    <h3>Choose Themes</h3>
+                    <p>Pick from colorful themes to match your style</p>
+                </div>
+            </div>
+        </section>
+        <section class="moves-showcase">
+            <h2>Popular Moves</h2>
+            <div class="moves-list">
+                <span class="move-tag"><i class="fas fa-hand-paper"></i> Wave</span>
+                <span class="move-tag"><i class="fas fa-person-praying"></i> Bow</span>
+                <span class="move-tag"><i class="fas fa-smile"></i> Happy Nod</span>
+                <span class="move-tag"><i class="fas fa-spinner"></i> Spin</span>
+                <span class="move-tag"><i class="fas fa-volume-high"></i> Wiggle Ears</span>
+                <span class="move-tag"><i class="fas fa-face-sad-tear"></i> Sad Head</span>
+                <span class="move-tag"><i class="fas fa-binoculars"></i> Look Around</span>
+                <span class="move-tag"><i class="fas fa-star"></i> And 13+ More!</span>
+            </div>
         </section>
+        <section class="get-started">
+            <h2>Get Started</h2>
+            <p class="install-note">
+                Install this app from your Reachy Mini dashboard and start creating right away!
+            </p>
+            <div class="cta-button">
+                <i class="fas fa-rocket"></i> Open Your Robot Dashboard
+            </div>
         </section>
         <footer>
+            <p class="made-with">Made with <i class="fas fa-heart"></i> for Reachy Mini robots</p>
+            <p class="links">
+                <a href="https://github.com/chelleboyer/reachy-remix-deploy" target="_blank">
+                    <i class="fab fa-github"></i> GitHub
+                </a>
             </p>
         </footer>
     </div>

reachy_mini_remix/app.py CHANGED Viewed

@@ -11,7 +11,7 @@ Architecture:
 - Engine Layer: Motion execution via Reachy SDK
 - Hardware Layer: ReachyWrapper + SafeMotionController
-Author: Reachy Dev Team
 Date: December 6, 2025
 Sprint: Story 1 - UI Shell + Theme
 """

 - Engine Layer: Motion execution via Reachy SDK
 - Hardware Layer: ReachyWrapper + SafeMotionController
+Author: Dev Team
 Date: December 6, 2025
 Sprint: Story 1 - UI Shell + Theme
 """

style.css CHANGED Viewed

@@ -7,18 +7,18 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.6;
-    color: #333;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
     padding: 2rem 1rem;
 }
 .container {
-    max-width: 900px;
     margin: 0 auto;
     background: white;
-    border-radius: 16px;
-    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
     overflow: hidden;
 }
@@ -29,151 +29,289 @@ header {
     text-align: center;
 }
 header h1 {
-    font-size: 2.5rem;
-    font-weight: 700;
     margin-bottom: 0.5rem;
 }
 .tagline {
-    font-size: 1.25rem;
     opacity: 0.95;
 }
 .hero {
-    padding: 2rem;
-    background: #f8f9fa;
-    border-bottom: 1px solid #e9ecef;
 }
 .hero .description {
-    font-size: 1.1rem;
-    color: #495057;
     line-height: 1.8;
 }
 section {
     padding: 2rem;
-    border-bottom: 1px solid #e9ecef;
 }
-section:last-of-type {
-    border-bottom: none;
 }
-section h2 {
     color: #667eea;
-    font-size: 1.75rem;
-    margin-bottom: 1.5rem;
-    font-weight: 600;
 }
-.steps {
     display: grid;
-    gap: 1.5rem;
-    margin-top: 1rem;
 }
-.step {
-    background: #f8f9fa;
     padding: 1.5rem;
-    border-radius: 8px;
-    border-left: 4px solid #667eea;
 }
-.step h3 {
-    color: #495057;
     font-size: 1.25rem;
     margin-bottom: 0.5rem;
 }
-.step p {
-    color: #6c757d;
-    margin-bottom: 0.5rem;
 }
-code {
-    background: #e9ecef;
-    padding: 0.25rem 0.5rem;
-    border-radius: 4px;
-    font-family: 'Monaco', 'Courier New', monospace;
-    font-size: 0.9rem;
-    color: #764ba2;
 }
-.features ul {
-    list-style: none;
-    display: grid;
     gap: 1rem;
 }
-.features li {
-    padding-left: 1.5rem;
-    position: relative;
-    color: #495057;
 }
-.features li:before {
-    content: "✓";
-    position: absolute;
-    left: 0;
-    color: #667eea;
-    font-weight: bold;
 }
-.features strong {
-    color: #333;
 }
-.moves p {
-    color: #495057;
-    font-size: 1.05rem;
 }
 footer {
-    background: #f8f9fa;
-    padding: 2rem;
     text-align: center;
-    color: #6c757d;
 }
-footer a {
-    color: #667eea;
-    text-decoration: none;
-    font-weight: 500;
 }
-footer a:hover {
-    text-decoration: underline;
 }
-.note {
     margin-top: 1rem;
-    padding: 1rem;
-    background: #fff3cd;
-    border-left: 4px solid #ffc107;
-    border-radius: 4px;
-    color: #856404;
 }
-.note strong {
-    color: #533f03;
 }
 @media (max-width: 768px) {
     body {
         padding: 1rem 0.5rem;
     }
     header h1 {
         font-size: 2rem;
     }
     .tagline {
-        font-size: 1rem;
     }
     section {
-        padding: 1.5rem;
     }
     section h2 {
-        font-size: 1.5rem;
     }
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.6;
+    color: #2d3748;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     min-height: 100vh;
     padding: 2rem 1rem;
 }
 .container {
+    max-width: 1000px;
     margin: 0 auto;
     background: white;
+    border-radius: 20px;
+    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.3);
     overflow: hidden;
 }
     text-align: center;
 }
+.logo {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    animation: bounce 2s infinite;
+}
+@keyframes bounce {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
 header h1 {
+    font-size: 3rem;
+    font-weight: 800;
     margin-bottom: 0.5rem;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
 }
 .tagline {
+    font-size: 1.3rem;
     opacity: 0.95;
+    font-weight: 300;
 }
 .hero {
+    padding: 3rem 2rem;
+    background: linear-gradient(to bottom, #f7fafc, #edf2f7);
+    text-align: center;
 }
 .hero .description {
+    font-size: 1.25rem;
+    color: #4a5568;
     line-height: 1.8;
+    max-width: 700px;
+    margin: 0 auto;
 }
 section {
+    padding: 3rem 2rem;
+}
+section h2 {
+    color: #2d3748;
+    font-size: 2.25rem;
+    margin-bottom: 2rem;
+    font-weight: 700;
+    text-align: center;
+}
+.steps-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    margin-top: 2rem;
+}
+.step-card {
+    background: linear-gradient(135deg, #667eea15, #764ba215);
     padding: 2rem;
+    border-radius: 15px;
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    border: 2px solid #e2e8f0;
 }
+.step-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
 }
+.step-card .icon {
+    font-size: 3.5rem;
+    margin-bottom: 1rem;
     color: #667eea;
 }
+.step-card .icon i {
+    display: inline-block;
+}
+.step-card h3 {
+    color: #667eea;
+    font-size: 1.5rem;
+    margin-bottom: 0.75rem;
+    font-weight: 700;
+}
+.step-card p {
+    color: #4a5568;
+    font-size: 1.05rem;
+    line-height: 1.6;
+}
+.features {
+    background: #f7fafc;
+}
+.features-grid {
     display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 2rem;
 }
+.feature {
+    text-align: center;
     padding: 1.5rem;
 }
+.feature-icon {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+    color: #764ba2;
+}
+.feature-icon i {
+    display: inline-block;
+}
+.feature h3 {
+    color: #2d3748;
     font-size: 1.25rem;
     margin-bottom: 0.5rem;
+    font-weight: 600;
 }
+.feature p {
+    color: #718096;
+    font-size: 1rem;
 }
+.moves-showcase {
+    background: white;
 }
+.moves-list {
+    display: flex;
+    flex-wrap: wrap;
     gap: 1rem;
+    justify-content: center;
+    margin-top: 2rem;
 }
+.move-tag {
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+    font-size: 1.1rem;
+    font-weight: 600;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+    transition: transform 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
 }
+.move-tag:hover {
+    transform: scale(1.05);
 }
+.move-tag i {
+    font-size: 1rem;
 }
+.get-started {
+    background: linear-gradient(135deg, #667eea15, #764ba215);
+    text-align: center;
+}
+.install-note {
+    font-size: 1.2rem;
+    color: #4a5568;
+    margin-bottom: 2rem;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.cta-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.75rem;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: white;
+    padding: 1.25rem 3rem;
+    border-radius: 50px;
+    font-size: 1.25rem;
+    font-weight: 700;
+    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    cursor: pointer;
+}
+.cta-button:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
+}
+.cta-button i {
+    font-size: 1.3rem;
 }
 footer {
+    background: #2d3748;
+    color: white;
+    padding: 2.5rem 2rem;
     text-align: center;
 }
+.made-with {
+    font-size: 1.1rem;
+    margin-bottom: 1rem;
+    opacity: 0.9;
 }
+.made-with i {
+    color: #fc8181;
 }
+.links {
     margin-top: 1rem;
 }
+.links a {
+    color: #90cdf4;
+    text-decoration: none;
+    font-weight: 600;
+    transition: color 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.links a:hover {
+    color: #63b3ed;
+    text-decoration: underline;
+}
+.links a i {
+    font-size: 1.2rem;
 }
 @media (max-width: 768px) {
     body {
         padding: 1rem 0.5rem;
     }
     header h1 {
         font-size: 2rem;
     }
     .tagline {
+        font-size: 1.1rem;
     }
     section {
+        padding: 2rem 1.5rem;
     }
     section h2 {
+        font-size: 1.75rem;
+    }
+    .logo {
+        font-size: 3rem;
+    }
+    .steps-grid,
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    .cta-button {
+        padding: 1rem 2rem;
+        font-size: 1.1rem;
+    }
+    .step-card .icon {
+        font-size: 3rem;
+    }
+    .feature-icon {
+        font-size: 2.5rem;
     }
 }