chess_emotions_app

Running

App Files Files Community

RemiFabre commited on Feb 2

Commit

7c3d0d5

1 Parent(s): 61f606d

Add beautiful landing page with demo video

Browse files

Files changed (3) hide show

.gitattributes +1 -0
chess_emotions_app/assets/chess_cut.mp4 +3 -0
index.html +522 -36

.gitattributes ADDED Viewed

	@@ -0,0 +1 @@


1	+ *.mp4 filter=lfs diff=lfs merge=lfs -text

chess_emotions_app/assets/chess_cut.mp4 ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:34b5584dc4a97e2b579ea190efb774baf9565cfdfafd86d015a30aab32f713ff
+size 13479093

index.html CHANGED Viewed

@@ -1,40 +1,526 @@
-<!doctype html>
-<html>
 <head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	<title> Chess Emotions App </title>
-	<link rel="stylesheet" href="style.css" />
-</head>
 <body>
-	<div class="hero">
-		<div class="hero-content">
-			<div class="app-icon">🤖⚡</div>
-			<h1> Chess Emotions App </h1>
-			<p class="tagline">Enter your tagline here</p>
-		</div>
-	</div>
-	<div class="container">
-		<div class="main-card">
-			<div class="app-preview">
-				<div class="preview-image">
-					<div class="camera-feed">🛠️</div>
-				</div>
-			</div>
-		</div>
-	</div>
-	<div class="footer">
-		<p>
-			🤖 Chess Emotions App •
-			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
-			<a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank">Browse More
-				Apps</a>
-		</p>
-	</div>
-</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Chess Emotions - Play chess while Reachy Mini reacts!</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: #F6F6F8;
+      --foreground: #333333;
+      --card: hsl(0 0% 100%);
+      --card-foreground: hsl(240 10% 3.9%);
+      --primary: #FF9900;
+      --primary-foreground: hsl(0 0% 100%);
+      --muted: #E8E8EB;
+      --muted-foreground: #878789;
+      --border: #E0E0E0;
+    }
+    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: 90rem;
+      margin: 0 auto;
+      padding: 0 1.5rem;
+    }
+    /* Hero Section */
+    .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: 3fr 1fr;
+      }
+    }
+    .hero video {
+      width: 100%;
+      max-width: 1400px;
+      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 Section */
+    .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);
+    }
+    /* Emotion Table */
+    .emotion-section {
+      margin-top: 2rem;
+    }
+    .emotion-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.875rem;
+      margin-top: 1rem;
+    }
+    .emotion-table th,
+    .emotion-table td {
+      padding: 0.75rem;
+      text-align: left;
+      border-bottom: 1px solid var(--border);
+    }
+    .emotion-table th {
+      font-weight: 600;
+      color: var(--foreground);
+      background-color: var(--muted);
+    }
+    .emotion-table td {
+      color: var(--muted-foreground);
+    }
+    .emotion-table tr:hover td {
+      background-color: rgba(255, 153, 0, 0.05);
+    }
+    /* Footer */
+    footer {
+      background-color: var(--background);
+      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-section h4 {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--foreground);
+      margin-bottom: 0.75rem;
+    }
+    .footer-section ul {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+    .footer-section a {
+      font-size: 0.875rem;
+      color: var(--muted-foreground);
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+    .footer-section a:hover {
+      color: var(--primary);
+    }
+    .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);
+      transition: all 0.2s;
+    }
+    .social-link:hover {
+      background-color: var(--primary);
+      color: white;
+    }
+    .social-link svg {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+    .footer-credit {
+      font-size: 0.875rem;
+      color: var(--muted-foreground);
+      text-align: center;
+      padding-top: 1.5rem;
+      border-top: 1px solid var(--border);
+    }
+    .footer-credit a {
+      color: var(--foreground);
+      font-weight: 600;
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+    .footer-credit a:hover {
+      color: var(--primary);
+    }
+  </style>
+</head>
 <body>
+  <!-- Hero Section -->
+  <section class="hero">
+    <div class="container">
+      <div class="hero-grid">
+        <div>
+          <video autoplay loop muted playsinline>
+            <source src="chess_emotions_app/assets/chess_cut.mp4" type="video/mp4" />
+          </video>
+        </div>
+        <div class="hero-content">
+          <div class="hero-title-wrapper">
+            <span class="hero-emoji">♟️</span>
+            <h1 class="hero-title">Chess Emotions</h1>
+          </div>
+          <div class="tags">
+            <span class="tag">chess</span>
+            <span class="tag">emotions</span>
+            <span class="tag">games</span>
+            <span class="tag">Stockfish</span>
+          </div>
+          <p class="hero-description">
+            <strong>Play chess against Stockfish while Reachy Mini reacts!</strong><br />
+            Here's the twist: Reachy is rooting for Stockfish. Make a brilliant move and watch Reachy get nervous. Blunder your queen? Reachy celebrates!
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Technical 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 "Chess Emotions" 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">Set the difficulty</div>
+                <div class="step-body">Use the ELO slider (800-2800) to adjust Stockfish's strength. Lower ELO means easier games, but Reachy might get bored winning too easily!</div>
+              </div>
+            </li>
+            <li class="step">
+              <span class="step-number">3</span>
+              <div class="step-content">
+                <div class="step-title">Play chess</div>
+                <div class="step-body">Drag and drop pieces on the board to make your moves. The evaluation bar shows who's winning. Stockfish responds automatically after each of your moves.</div>
+              </div>
+            </li>
+            <li class="step">
+              <span class="step-number">4</span>
+              <div class="step-content">
+                <div class="step-title">Watch Reachy react</div>
+                <div class="step-body">After every move, Reachy evaluates the position and reacts with emotions. Good moves make Reachy worried, blunders make Reachy dance with joy!</div>
+              </div>
+            </li>
+          </ol>
+          <div class="emotion-section">
+            <h2>Emotion mapping</h2>
+            <table class="emotion-table">
+              <thead>
+                <tr>
+                  <th>Your move</th>
+                  <th>Reachy's reaction</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Brilliant! (+200cp)</td>
+                  <td>Scared, anxious</td>
+                </tr>
+                <tr>
+                  <td>Good move (+50-200cp)</td>
+                  <td>Uncomfortable, worried</td>
+                </tr>
+                <tr>
+                  <td>Neutral move</td>
+                  <td>Attentive, watching</td>
+                </tr>
+                <tr>
+                  <td>Mistake (-50-200cp)</td>
+                  <td>Cheerful, hopeful</td>
+                </tr>
+                <tr>
+                  <td>Blunder! (-200cp)</td>
+                  <td>Laughing, dancing!</td>
+                </tr>
+                <tr>
+                  <td>You win</td>
+                  <td>Rage, fury</td>
+                </tr>
+                <tr>
+                  <td>Stockfish wins</td>
+                  <td>Proud celebration!</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div>
+          <h2>Features</h2>
+          <ol class="steps">
+            <li class="step">
+              <span class="step-number">1</span>
+              <div class="step-content">
+                <div class="step-title">Stockfish 16 in your browser</div>
+                <div class="step-body">Full chess engine running as WebAssembly - no server needed. Adjustable ELO from beginner to grandmaster level.</div>
+              </div>
+            </li>
+            <li class="step">
+              <span class="step-number">2</span>
+              <div class="step-content">
+                <div class="step-title">Real-time evaluation</div>
+                <div class="step-body">Visual evaluation bar shows the position advantage in centipawns. Watch it swing as the game progresses!</div>
+              </div>
+            </li>
+            <li class="step">
+              <span class="step-number">3</span>
+              <div class="step-content">
+                <div class="step-title">Expressive reactions</div>
+                <div class="step-body">Reachy uses the emotions library to react with over 20 different expressions, complete with sounds and movements.</div>
+              </div>
+            </li>
+            <li class="step">
+              <span class="step-number">4</span>
+              <div class="step-content">
+                <div class="step-title">Pure browser experience</div>
+                <div class="step-body">Chess logic runs entirely in your browser. Reachy's emotions are triggered via REST API calls to the daemon.</div>
+              </div>
+            </li>
+          </ol>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer>
+    <div class="container">
+      <div class="footer-grid">
+        <div class="footer-section">
+          <h4>Resources</h4>
+          <ul>
+            <li><a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener noreferrer">Read the Documentation</a></li>
+            <li><a href="https://github.com/pollen-robotics/reachy_mini/blob/develop/docs/troubleshooting.md" target="_blank" rel="noopener noreferrer">Troubleshooting & FAQ</a></li>
+          </ul>
+        </div>
+        <div class="footer-section">
+          <h4>Reachy Mini Apps</h4>
+          <ul>
+            <li><a href="https://hf.co/reachy-mini/#apps" target="_blank" rel="noopener noreferrer">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">Make and publish your own app</a></li>
+          </ul>
+        </div>
+        <div class="footer-section">
+          <h4>Follow us</h4>
+          <div class="social-links">
+            <a href="https://discord.gg/2bAhWfXme9" target="_blank" rel="noopener noreferrer" aria-label="Discord" class="social-link">
+              <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
+            </a>
+            <a href="https://www.linkedin.com/company/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn" class="social-link">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect width="4" height="12" x="2" y="9"/><circle cx="4" cy="4" r="2"/></svg>
+            </a>
+            <a href="https://www.youtube.com/c/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="YouTube" class="social-link">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg>
+            </a>
+            <a href="https://github.com/pollen-robotics" target="_blank" rel="noopener noreferrer" aria-label="GitHub" class="social-link">
+              <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 d="M9 18c-4.51 2-5-2-7-2"/></svg>
+            </a>
+            <a href="https://x.com/pollenrobotics" target="_blank" rel="noopener noreferrer" aria-label="X" class="social-link">
+              <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"/></svg>
+            </a>
+          </div>
+        </div>
+      </div>
+      <div class="footer-credit">
+        Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank" rel="noopener noreferrer">Pollen Robotics</a> x <a href="https://huggingface.co" target="_blank" rel="noopener noreferrer">Hugging Face</a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>