Update index.html

index.html

@@ -1,40 +1,177 @@
-<!doctype html>
-<html>
-
+<!DOCTYPE html>
+<html lang="en">
 <head>
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width" />
-	<title> Jericho </title>
-	<link rel="stylesheet" href="style.css" />
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Jericho | Reachy Mini Video Mimic App</title>
+  <meta
+    name="description"
+    content="Jericho is a community app that helps your Reachy Mini mimic the main person in a video using MediaPipe."
+  />
+  <link rel="stylesheet" href="style.css" />
 </head>
-
 <body>
-	<div class="hero">
-		<div class="hero-content">
-			<div class="app-icon">🤖⚡</div>
-			<h1> Jericho </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>
-			🤖 Jericho •
-			<a href="https://github.com/pollen-robotics" target="_blank" rel="noopener noreferrer">Pollen Robotics</a> •
-			<a href="https://huggingface.co/spaces/pollen-robotics/reachy-mini-landing-page#apps" target="_blank" rel="noopener noreferrer">Browse More
-				Apps</a>
-		</p>
-	</div>
-</body>
+  <header class="hero">
+    <nav class="nav" aria-label="Primary navigation">
+      <a class="logo" href="#top" aria-label="Jericho home">Jericho</a>
+      <div class="nav-links">
+        <a href="#about">What it does</a>
+        <a href="#requirements">Requirements</a>
+        <a href="#installation">Installation</a>
+        <a href="#run">Run</a>
+      </div>
+    </nav>
+
+    <section class="hero-content" id="top">
+      <p class="eyebrow">Reachy Mini Community App</p>
+      <h1>Give life to your Reachy Mini.</h1>
+      <p class="hero-text">
+        Jericho makes your Reachy Mini mimic the main person in a video using MediaPipe.
+        Import an MP4 file or paste a YouTube link, then let your robot follow along.
+      </p>
+      <div class="hero-actions">
+        <a class="button primary" href="#installation">Get started</a>
+        <a class="button secondary" href="https://huggingface.co/Jarilo-Project/Jericho" target="_blank" rel="noopener noreferrer">
+          View repository
+        </a>
+      </div>
+    </section>
+  </header>
+
+  <main>
+    <section class="section intro" id="about">
+      <div>
+        <p class="section-label">What it does</p>
+        <h2>Turn video motion into robot behaviour.</h2>
+      </div>
+      <p>
+        Jericho analyses a video with MediaPipe and helps Reachy Mini act like the main person in that video.
+        It works with a local video file or a YouTube URL.
+      </p>
+    </section>
+
+    <section class="section" id="requirements">
+      <p class="section-label">Requirements</p>
+      <h2>Before you begin</h2>
+      <div class="card-grid">
+        <article class="card">
+          <span class="card-number">01</span>
+          <h3>Reachy Mini</h3>
+          <p>
+            Set up an instance of Reachy Mini and follow the official installation requirements.
+          </p>
+          <a href="https://huggingface.co/docs/reachy_mini/index" target="_blank" rel="noopener noreferrer">Read the Reachy Mini docs</a>
+        </article>
+
+        <article class="card">
+          <span class="card-number">02</span>
+          <h3>PowerShell on Windows</h3>
+          <p>
+            Windows users should install PowerShell before running the commands.
+          </p>
+          <a href="https://learn.microsoft.com/fr-fr/powershell/scripting/install/install-powershell-on-windows?view=powershell-7.6" target="_blank" rel="noopener noreferrer">Install PowerShell</a>
+        </article>
+
+        <article class="card">
+          <span class="card-number">03</span>
+          <h3>A video source</h3>
+          <p>
+            Use either a YouTube URL or a local MP4 video file.
+          </p>
+          <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener noreferrer">Example video URL</a>
+        </article>
+      </div>
+    </section>
 
-</html>
+    <section class="section split" id="installation">
+      <div>
+        <p class="section-label">Setup</p>
+        <h2>Prepare Reachy Mini</h2>
+        <ol class="steps">
+          <li>
+            <span>Open a terminal.</span>
+          </li>
+          <li>
+            <span>Navigate to your Reachy Mini installation.</span>
+            <code>C:\reachy_mini</code>
+          </li>
+          <li>
+            <span>Activate the Reachy Mini environment.</span>
+            <code>reachy_mini_env\Scripts\activate</code>
+          </li>
+          <li>
+            <span>Open the simulation. Remove <code>--sim</code> if you are connected to Reachy Mini.</span>
+            <code>reachy-mini-daemon --sim</code>
+          </li>
+        </ol>
+      </div>
+
+      <aside class="notice">
+        <h3>Dashboard URL</h3>
+        <p>Open the Reachy Mini dashboard in your browser:</p>
+        <div class="code-stack">
+          <code>http://localhost:8000/</code>
+          <code>http://127.0.0.1:8000/</code>
+        </div>
+      </aside>
+    </section>
+
+    <section class="section install-options">
+      <p class="section-label">Installation</p>
+      <h2>Choose an installation method</h2>
+
+      <div class="option-grid">
+        <article class="option-card">
+          <h3>Install through the Reachy Mini dashboard</h3>
+          <ol class="steps compact">
+            <li>Open <code>http://localhost:8000/</code> or <code>http://127.0.0.1:8000/</code>.</li>
+            <li>Tick <strong>Show community apps</strong>.</li>
+            <li>Search for <strong>jericho</strong> and tick <strong>Install</strong>.</li>
+          </ol>
+        </article>
+
+        <article class="option-card">
+          <h3>Manual installation</h3>
+          <ol class="steps compact">
+            <li>
+              Clone or download the repository:
+              <a href="https://huggingface.co/Jarilo-Project/Jericho" target="_blank" rel="noopener noreferrer">Jarilo-Project/Jericho</a>
+            </li>
+            <li>
+              Open a new terminal in the first <code>jericho</code> folder, where <code>jericho.egg-info</code> is located.
+              <code>C:\reachy_mini\my_apps\jericho</code>
+            </li>
+            <li>
+              Activate the Reachy Mini environment.
+              <code>..\..\reachy_mini_env\Scripts\activate</code>
+            </li>
+            <li>
+              Install the app.
+              <code>pip install -e .</code>
+            </li>
+            <li>Open <code>http://localhost:8000/</code> or <code>http://127.0.0.1:8000/</code>.</li>
+          </ol>
+        </article>
+      </div>
+    </section>
+
+    <section class="section final-step" id="run">
+      <div>
+        <p class="section-label">Final step</p>
+        <h2>Run Jericho</h2>
+        <ol class="steps">
+          <li>Tick <strong>On</strong> on the <strong>Jericho</strong> app.</li>
+          <li>Click the gear icon to open the app in a new tab.</li>
+          <li>Import an MP4 video or paste a YouTube link.</li>
+          <li>Click <strong>Run</strong> and Reachy Mini will start mimicking the person in your video.</li>
+        </ol>
+      </div>
+    </section>
+  </main>
+
+  <footer class="footer">
+    <p>Jericho — an app for Reachy Mini powered by MediaPipe.</p>
+    <a href="#top">Back to top</a>
+  </footer>
+</body>
+</html>