Spaces:

pollen-robotics
/

reachy_mini_clock

Running

App Files Files Community

apirrone commited on 23 days ago

Commit

c3bcf7e

0 Parent(s):

first commit!

Browse files

Files changed (15) hide show

README.md +10 -0
index.html +235 -0
pyproject.toml +18 -0
reachy_mini_clock.egg-info/PKG-INFO +19 -0
reachy_mini_clock.egg-info/SOURCES.txt +10 -0
reachy_mini_clock.egg-info/dependency_links.txt +1 -0
reachy_mini_clock.egg-info/entry_points.txt +2 -0
reachy_mini_clock.egg-info/requires.txt +1 -0
reachy_mini_clock.egg-info/top_level.txt +1 -0
reachy_mini_clock/__init__.py +0 -0
reachy_mini_clock/__pycache__/__init__.cpython-312.pyc +0 -0
reachy_mini_clock/__pycache__/main.cpython-312.pyc +0 -0
reachy_mini_clock/index.html +553 -0
reachy_mini_clock/main.py +165 -0
style.css +411 -0

README.md ADDED Viewed

	@@ -0,0 +1,10 @@

+---
+title: Reachy Mini Clock
+emoji: 👋
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+tags:
+ - reachy_mini
+---

index.html ADDED Viewed

	@@ -0,0 +1,235 @@

+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<title> Reachy Mini Clock </title>
+	<link rel="stylesheet" href="style.css" />
+</head>
+<body>
+	<div class="hero">
+		<div class="hero-content">
+			<div class="app-icon">🤖⚡</div>
+			<h1> Reachy Mini Clock </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="download-section">
+		<div class="download-card">
+			<h2>Install This App</h2>
+			<div class="dashboard-config">
+				<label for="dashboardUrl">Your Reachy Dashboard URL:</label>
+				<input type="url" id="dashboardUrl" value="http://localhost:8000"
+					placeholder="http://your-reachy-ip:8000" />
+			</div>
+			<button id="installBtn" class="install-btn primary">
+				<span class="btn-icon">📥</span>
+				Install Reachy Mini Clock to Reachy Mini
+			</button>
+			<div id="installStatus" class="install-status"></div>
+		</div>
+	</div>
+	<div class="footer">
+		<p>
+			🤖 Reachy Mini Clock •
+			<a href="https://github.com/pollen-robotics" target="_blank">Pollen Robotics</a> •
+			<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Apps" target="_blank">Browse More
+				Apps</a>
+		</p>
+	</div>
+	</div>
+	<script>
+		// Get the current Hugging Face Space URL as the repository URL
+		function getCurrentSpaceUrl() {
+			// Get current page URL and convert to repository format
+			const currentUrl = window.location.href;
+			// Remove any trailing slashes and query parameters
+			const cleanUrl = currentUrl.split('?')[0].replace(/\/$/, '');
+			return cleanUrl;
+		}
+		// Parse TOML content to extract project name
+		function parseTomlProjectName(tomlContent) {
+			try {
+				const lines = tomlContent.split('\n');
+				let inProjectSection = false;
+				for (const line of lines) {
+					const trimmedLine = line.trim();
+					// Check if we're entering the [project] section
+					if (trimmedLine === '[project]') {
+						inProjectSection = true;
+						continue;
+					}
+					// Check if we're entering a different section
+					if (trimmedLine.startsWith('[') && trimmedLine !== '[project]') {
+						inProjectSection = false;
+						continue;
+					}
+					// If we're in the project section, look for the name field
+					if (inProjectSection && trimmedLine.startsWith('name')) {
+						const match = trimmedLine.match(/name\s*=\s*["']([^"']+)["']/);
+						if (match) {
+							// Convert to lowercase and replace invalid characters for app naming
+							return match[1].toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+						}
+					}
+				}
+				throw new Error('Project name not found in pyproject.toml');
+			} catch (error) {
+				console.error('Error parsing pyproject.toml:', error);
+				return 'unknown-app';
+			}
+		}
+		// Fetch and parse pyproject.toml from the current space
+		async function getAppNameFromCurrentSpace() {
+			try {
+				// Fetch pyproject.toml from the current space
+				const response = await fetch('./pyproject.toml');
+				if (!response.ok) {
+					throw new Error(`Failed to fetch pyproject.toml: ${response.status}`);
+				}
+				const tomlContent = await response.text();
+				return parseTomlProjectName(tomlContent);
+			} catch (error) {
+				console.error('Error fetching app name from current space:', error);
+				// Fallback to extracting from URL if pyproject.toml is not accessible
+				const url = getCurrentSpaceUrl();
+				const parts = url.split('/');
+				const spaceName = parts[parts.length - 1];
+				return spaceName.toLowerCase().replace(/[^a-z0-9-_]/g, '-');
+			}
+		}
+		async function installToReachy() {
+			const dashboardUrl = document.getElementById('dashboardUrl').value.trim();
+			const statusDiv = document.getElementById('installStatus');
+			const installBtn = document.getElementById('installBtn');
+			if (!dashboardUrl) {
+				showStatus('error', 'Please enter your Reachy dashboard URL');
+				return;
+			}
+			try {
+				installBtn.disabled = true;
+				installBtn.innerHTML = '<span class="btn-icon">⏳</span>Installing...';
+				showStatus('loading', 'Connecting to your Reachy dashboard...');
+				// Test connection
+				const testResponse = await fetch(`${dashboardUrl}/api/status`, {
+					method: 'GET',
+					mode: 'cors',
+				});
+				if (!testResponse.ok) {
+					throw new Error('Cannot connect to dashboard. Make sure the URL is correct and the dashboard is running.');
+				}
+				showStatus('loading', 'Reading app configuration...');
+				// Get app name from pyproject.toml in current space
+				const appName = await getAppNameFromCurrentSpace();
+				// Get current space URL as repository URL
+				const repoUrl = getCurrentSpaceUrl();
+				showStatus('loading', `Starting installation of "${appName}"...`);
+				// Start installation
+				const installResponse = await fetch(`${dashboardUrl}/api/install`, {
+					method: 'POST',
+					mode: 'cors',
+					headers: {
+						'Content-Type': 'application/json',
+					},
+					body: JSON.stringify({
+						url: repoUrl,
+						name: appName
+					})
+				});
+				const result = await installResponse.json();
+				if (installResponse.ok) {
+					showStatus('success', `✅ Installation started for "${appName}"! Check your dashboard for progress.`);
+					setTimeout(() => {
+						showStatus('info', `Open your dashboard at ${dashboardUrl} to see the installed app.`);
+					}, 3000);
+				} else {
+					throw new Error(result.detail || 'Installation failed');
+				}
+			} catch (error) {
+				console.error('Installation error:', error);
+				showStatus('error', `❌ ${error.message}`);
+			} finally {
+				installBtn.disabled = false;
+				installBtn.innerHTML = '<span class="btn-icon">📥</span>Install App to Reachy';
+			}
+		}
+		function showStatus(type, message) {
+			const statusDiv = document.getElementById('installStatus');
+			statusDiv.className = `install-status ${type}`;
+			statusDiv.textContent = message;
+			statusDiv.style.display = 'block';
+		}
+		function copyToClipboard() {
+			const repoUrl = document.getElementById('repoUrl').textContent;
+			navigator.clipboard.writeText(repoUrl).then(() => {
+				showStatus('success', '📋 Repository URL copied to clipboard!');
+			}).catch(() => {
+				showStatus('error', 'Failed to copy URL. Please copy manually.');
+			});
+		}
+		// Update the displayed repository URL on page load
+		document.addEventListener('DOMContentLoaded', () => {
+			// Auto-detect local dashboard
+			const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
+			if (isLocalhost) {
+				document.getElementById('dashboardUrl').value = 'http://localhost:8000';
+			}
+			// Update the repository URL display if element exists
+			const repoUrlElement = document.getElementById('repoUrl');
+			if (repoUrlElement) {
+				repoUrlElement.textContent = getCurrentSpaceUrl();
+			}
+		});
+		// Event listeners
+		document.getElementById('installBtn').addEventListener('click', installToReachy);
+	</script>
+</body>
+</html>

pyproject.toml ADDED Viewed

	@@ -0,0 +1,18 @@

+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+[project]
+name = "reachy_mini_clock"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini"
+]
+keywords = ["reachy-mini-app"]
+[project.entry-points."reachy_mini_apps"]
+reachy_mini_clock = "reachy_mini_clock.main:ReachyMiniClock"

reachy_mini_clock.egg-info/PKG-INFO ADDED Viewed

	@@ -0,0 +1,19 @@

+Metadata-Version: 2.4
+Name: reachy_mini_clock
+Version: 0.1.0
+Summary: Add your description here
+Keywords: reachy-mini-app
+Requires-Python: >=3.10
+Description-Content-Type: text/markdown
+Requires-Dist: reachy-mini
+---
+title: Reachy Mini Clock
+emoji: 👋
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+tags:
+ - reachy_mini
+---

reachy_mini_clock.egg-info/SOURCES.txt ADDED Viewed

	@@ -0,0 +1,10 @@

+README.md
+pyproject.toml
+reachy_mini_clock/__init__.py
+reachy_mini_clock/main.py
+reachy_mini_clock.egg-info/PKG-INFO
+reachy_mini_clock.egg-info/SOURCES.txt
+reachy_mini_clock.egg-info/dependency_links.txt
+reachy_mini_clock.egg-info/entry_points.txt
+reachy_mini_clock.egg-info/requires.txt
+reachy_mini_clock.egg-info/top_level.txt

reachy_mini_clock.egg-info/dependency_links.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+

reachy_mini_clock.egg-info/entry_points.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ [reachy_mini_apps]
2	+ reachy_mini_clock = reachy_mini_clock.main:ReachyMiniClock

reachy_mini_clock.egg-info/requires.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ reachy-mini

reachy_mini_clock.egg-info/top_level.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ reachy_mini_clock

reachy_mini_clock/__init__.py ADDED Viewed

File without changes

reachy_mini_clock/__pycache__/__init__.cpython-312.pyc ADDED Viewed

Binary file (165 Bytes). View file

reachy_mini_clock/__pycache__/main.cpython-312.pyc ADDED Viewed

Binary file (8.54 kB). View file

reachy_mini_clock/index.html ADDED Viewed

	@@ -0,0 +1,553 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Timezone Selector</title>
+  <style>
+    :root{
+      --bg: #0b1020;
+      --card: rgba(255,255,255,0.06);
+      --card-2: rgba(255,255,255,0.04);
+      --text: #e6e9f5;
+      --muted: #aab1c7;
+      --accent: #7aa2ff;
+      --accent-2: #9bffd1;
+      --ring: rgba(122,162,255,0.55);
+      --ok: #22c55e;
+      --warn: #fbbf24;
+      --radius-xl: 18px;
+      --radius-lg: 14px;
+      --shadow: 0 10px 30px rgba(0,0,0,0.35);
+      font-synthesis: style;
+    }
+    * { box-sizing: border-box; }
+    body{
+      margin:0;
+      min-height:100vh;
+      display:grid;
+      place-items:center;
+      background:
+        radial-gradient(1000px 600px at 10% -10%, #1a2357, transparent 60%),
+        radial-gradient(900px 500px at 110% 10%, #0f5f63, transparent 55%),
+        radial-gradient(1200px 800px at 50% 120%, #2a184f, transparent 60%),
+        var(--bg);
+      color:var(--text);
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
+      line-height:1.4;
+      padding:24px;
+    }
+    .app{
+      width:min(860px, 100%);
+      background: linear-gradient(180deg, var(--card), var(--card-2));
+      border: 1px solid rgba(255,255,255,0.08);
+      border-radius: var(--radius-xl);
+      box-shadow: var(--shadow);
+      overflow:hidden;
+      display:grid;
+      grid-template-columns: 1.1fr 0.9fr;
+    }
+    @media (max-width: 800px){
+      .app{ grid-template-columns: 1fr; }
+    }
+    header{
+      grid-column: 1 / -1;
+      padding:22px 22px 0 22px;
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      gap:12px;
+    }
+    .title{
+      display:flex; gap:12px; align-items:center;
+    }
+    .logo{
+      width:42px; height:42px; border-radius:12px;
+      background: conic-gradient(from 120deg, var(--accent), var(--accent-2), #c084fc, var(--accent));
+      filter:saturate(1.2);
+      box-shadow: 0 6px 18px rgba(122,162,255,0.35);
+    }
+    h1{
+      margin:0;
+      font-size: clamp(18px, 2.6vw, 24px);
+      letter-spacing:0.2px;
+    }
+    .subtitle{
+      margin-top:2px; color:var(--muted); font-size:13px;
+    }
+    .body{
+      padding:18px 22px 22px 22px;
+      display:grid;
+      gap:14px;
+    }
+    .panel{
+      padding:16px;
+      background: rgba(255,255,255,0.04);
+      border:1px solid rgba(255,255,255,0.08);
+      border-radius: var(--radius-lg);
+      display:grid;
+      gap:12px;
+    }
+    label{
+      font-size:13px;
+      color:var(--muted);
+      display:flex; align-items:center; justify-content:space-between;
+      gap:8px;
+    }
+    .pill{
+      font-size:12px; color:#0b1020; background:#c7d2fe;
+      padding:2px 8px; border-radius:999px; font-weight:600;
+    }
+    .search{
+      position:relative; display:flex; align-items:center;
+    }
+    .search input{
+      width:100%;
+      background: rgba(0,0,0,0.25);
+      border:1px solid rgba(255,255,255,0.12);
+      color:var(--text);
+      padding:10px 12px 10px 36px;
+      border-radius:12px;
+      outline:none;
+      transition: border .15s, box-shadow .15s;
+    }
+    .search input:focus{
+      border-color: var(--accent);
+      box-shadow: 0 0 0 4px var(--ring);
+    }
+    .search svg{
+      position:absolute; left:10px; width:16px; height:16px; opacity:.75;
+      fill: none; stroke: var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
+    }
+    select{
+      width:100%;
+      appearance:none;
+      background:
+        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
+        rgba(0,0,0,0.25);
+      border:1px solid rgba(255,255,255,0.12);
+      color:var(--text);
+      padding:11px 40px 11px 12px;
+      border-radius:12px;
+      outline:none;
+      font-size:14px;
+      transition: border .15s, box-shadow .15s, transform .05s;
+    }
+    select:focus{
+      border-color: var(--accent);
+      box-shadow: 0 0 0 4px var(--ring);
+    }
+    .select-wrap{
+      position:relative;
+    }
+    .select-wrap::after{
+      content:"";
+      position:absolute; right:12px; top:50%; transform:translateY(-50%);
+      width:10px; height:10px; pointer-events:none;
+      border-right:2px solid var(--muted);
+      border-bottom:2px solid var(--muted);
+      transform: translateY(-60%) rotate(45deg);
+      opacity:.9;
+    }
+    .row{
+      display:flex; gap:10px; flex-wrap:wrap;
+    }
+    button{
+      border:none; cursor:pointer; color:#0b1020;
+      background: linear-gradient(135deg, var(--accent), var(--accent-2));
+      padding:10px 12px; border-radius:12px; font-weight:700; font-size:14px;
+      box-shadow: 0 6px 14px rgba(0,0,0,0.25);
+      transition: transform .06s ease, filter .2s ease;
+      white-space:nowrap;
+    }
+    button.secondary{
+      color:var(--text);
+      background: rgba(255,255,255,0.06);
+      border:1px solid rgba(255,255,255,0.12);
+      box-shadow:none;
+      font-weight:600;
+    }
+    button:active{ transform: translateY(1px) scale(0.99); }
+    button:hover{ filter:saturate(1.1) brightness(1.05); }
+    .preview{
+      padding:18px 22px 22px 0;
+      display:grid; align-content:start; gap:14px;
+    }
+    @media (max-width: 800px){
+      .preview{ padding:0 22px 22px 22px; }
+    }
+    .big{
+      padding:18px;
+      background: rgba(0,0,0,0.25);
+      border:1px dashed rgba(255,255,255,0.14);
+      border-radius: var(--radius-lg);
+      display:grid; gap:8px;
+    }
+    .big .time{
+      font-size: clamp(22px, 4vw, 30px);
+      font-weight:800; letter-spacing:0.3px;
+    }
+    .big .date{
+      color:var(--muted); font-size:14px;
+    }
+    .meta{
+      display:grid; grid-template-columns:1fr 1fr; gap:10px;
+    }
+    .kv{
+      padding:12px; border-radius:12px;
+      background: rgba(255,255,255,0.04);
+      border:1px solid rgba(255,255,255,0.08);
+      display:grid; gap:4px;
+    }
+    .kv .k{ color:var(--muted); font-size:12px; }
+    .kv .v{ font-weight:700; font-size:14px; overflow:hidden; text-overflow:ellipsis; }
+    .toast{
+      position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
+      background:#0c1225; border:1px solid rgba(255,255,255,0.12); color:var(--text);
+      padding:10px 12px; border-radius:12px; box-shadow: var(--shadow);
+      opacity:0; pointer-events:none; transition: opacity .25s, transform .25s;
+      display:flex; align-items:center; gap:8px; font-size:14px;
+    }
+    .toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }
+    .dot{
+      width:8px; height:8px; border-radius:50%;
+      background: var(--ok); box-shadow:0 0 10px rgba(34,197,94,0.8);
+    }
+    .hint{
+      font-size:12px; color:var(--muted);
+    }
+    footer{
+      grid-column:1/-1;
+      padding:0 22px 18px 22px;
+      color:var(--muted); font-size:12px;
+      display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
+    }
+    a{ color:#c7d2fe; text-decoration:none; }
+    a:hover{ text-decoration:underline; }
+  </style>
+</head>
+<body>
+  <main class="app" role="application" aria-label="Timezone selector">
+    <header>
+      <div class="title">
+        <div class="logo" aria-hidden="true"></div>
+        <div>
+          <h1>Choose your timezone</h1>
+          <div class="subtitle">Search, preview current time, and save your preference.</div>
+        </div>
+      </div>
+      <div class="row">
+        <button id="detectBtn" class="secondary" type="button">Auto-detect</button>
+        <button id="saveBtn" type="button">Save</button>
+      </div>
+    </header>
+    <section class="body">
+      <div class="panel">
+        <label for="searchInput">
+          Search timezones
+          <span class="pill" id="countPill">0</span>
+        </label>
+        <div class="search">
+          <svg viewBox="0 0 24 24" aria-hidden="true">
+            <circle cx="11" cy="11" r="7"></circle>
+            <line x1="16.65" y1="16.65" x2="21" y2="21"></line>
+          </svg>
+          <input id="searchInput" type="text" placeholder="e.g., Paris, New York, Tokyo, UTC+1..." autocomplete="off" />
+        </div>
+        <div class="select-wrap">
+          <select id="tzSelect" size="10" aria-label="Timezones list"></select>
+        </div>
+        <div class="hint">Tip: type a city or region name. The list filters as you type.</div>
+      </div>
+      <div class="panel">
+        <label>Format</label>
+        <div class="row" role="radiogroup" aria-label="Time format">
+          <button type="button" class="secondary" id="fmt12">12-hour</button>
+          <button type="button" class="secondary" id="fmt24">24-hour</button>
+          <button type="button" class="secondary" id="showUtc">Show UTC offset</button>
+        </div>
+      </div>
+    </section>
+    <aside class="preview" aria-live="polite">
+      <div class="big">
+        <div class="time" id="previewTime">—</div>
+        <div class="date" id="previewDate">—</div>
+      </div>
+      <div class="meta">
+        <div class="kv">
+          <div class="k">Selected timezone</div>
+          <div class="v" id="previewTz">—</div>
+        </div>
+        <div class="kv">
+          <div class="k">UTC offset (now)</div>
+          <div class="v" id="previewOffset">—</div>
+        </div>
+        <div class="kv">
+          <div class="k">Your system timezone</div>
+          <div class="v" id="systemTz">—</div>
+        </div>
+        <div class="kv">
+          <div class="k">Saved preference</div>
+          <div class="v" id="savedTz">—</div>
+        </div>
+      </div>
+    </aside>
+    <footer>
+      <div>Uses the IANA timezone database from your browser.</div>
+      <div>Stored locally in this browser only.</div>
+    </footer>
+  </main>
+  <div class="toast" id="toast" role="status" aria-live="polite">
+    <div class="dot" aria-hidden="true"></div>
+    <div id="toastMsg">Saved.</div>
+  </div>
+  <script>
+    // ------- Data (fallback) -------
+    const FALLBACK_TIMEZONES = [
+      "UTC",
+      "Europe/Paris","Europe/London","Europe/Berlin","Europe/Madrid","Europe/Rome","Europe/Amsterdam",
+      "Africa/Cairo","Africa/Johannesburg",
+      "Asia/Dubai","Asia/Kolkata","Asia/Bangkok","Asia/Shanghai","Asia/Tokyo","Asia/Seoul","Asia/Singapore",
+      "Australia/Sydney","Australia/Perth",
+      "America/New_York","America/Chicago","America/Denver","America/Los_Angeles","America/Toronto",
+      "America/Sao_Paulo",
+      "Pacific/Auckland"
+    ];
+    // ------- Elements -------
+    const tzSelect = document.getElementById("tzSelect");
+    const searchInput = document.getElementById("searchInput");
+    const detectBtn = document.getElementById("detectBtn");
+    const saveBtn = document.getElementById("saveBtn");
+    const countPill = document.getElementById("countPill");
+    const previewTime = document.getElementById("previewTime");
+    const previewDate = document.getElementById("previewDate");
+    const previewTz = document.getElementById("previewTz");
+    const previewOffset = document.getElementById("previewOffset");
+    const systemTz = document.getElementById("systemTz");
+    const savedTz = document.getElementById("savedTz");
+    const fmt12Btn = document.getElementById("fmt12");
+    const fmt24Btn = document.getElementById("fmt24");
+    const showUtcBtn = document.getElementById("showUtc");
+    const toast = document.getElementById("toast");
+    const toastMsg = document.getElementById("toastMsg");
+    // ------- State -------
+    let allTimezones = [];
+    let use24h = true;
+    let showUtcOffset = true;
+    let tickTimer = null;
+    // ------- Helpers -------
+    function getTimezones() {
+      // Modern browsers expose supported timezones.
+      if (typeof Intl.supportedValuesOf === "function") {
+        try {
+          return Intl.supportedValuesOf("timeZone");
+        } catch {}
+      }
+      return FALLBACK_TIMEZONES;
+    }
+    function optionLabel(tz) {
+      if (!showUtcOffset) return tz;
+      const offset = currentUtcOffset(tz);
+      return `${tz} (UTC${offset})`;
+    }
+    function currentUtcOffset(tz) {
+      // Compute offset by comparing local time vs target time.
+      const now = new Date();
+      const fmt = new Intl.DateTimeFormat("en-US", {
+        timeZone: tz,
+        hour12: false,
+        year: "numeric", month: "2-digit", day: "2-digit",
+        hour: "2-digit", minute: "2-digit", second: "2-digit"
+      });
+      const parts = Object.fromEntries(fmt.formatToParts(now).map(p => [p.type, p.value]));
+      const asUTC = Date.UTC(
+        Number(parts.year),
+        Number(parts.month) - 1,
+        Number(parts.day),
+        Number(parts.hour),
+        Number(parts.minute),
+        Number(parts.second)
+      );
+      const diffMin = Math.round((asUTC - now.getTime()) / 60000);
+      const sign = diffMin <= 0 ? "+" : "-"; // note inverse because asUTC is target wall clock
+      const abs = Math.abs(diffMin);
+      const hh = String(Math.floor(abs / 60)).padStart(2, "0");
+      const mm = String(abs % 60).padStart(2, "0");
+      return `${sign}${hh}:${mm}`;
+    }
+    function renderList(filter = "") {
+      const q = filter.trim().toLowerCase();
+      tzSelect.innerHTML = "";
+      const filtered = q
+        ? allTimezones.filter(tz => tz.toLowerCase().includes(q) || optionLabel(tz).toLowerCase().includes(q))
+        : allTimezones;
+      filtered.forEach(tz => {
+        const opt = document.createElement("option");
+        opt.value = tz;
+        opt.textContent = optionLabel(tz);
+        tzSelect.appendChild(opt);
+      });
+      countPill.textContent = filtered.length;
+      if (filtered.length && !tzSelect.value) {
+        tzSelect.value = filtered[0].value;
+      }
+      updatePreview();
+    }
+    function formatPreview(now, tz) {
+      const timeFmt = new Intl.DateTimeFormat(undefined, {
+        timeZone: tz,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: !use24h
+      });
+      const dateFmt = new Intl.DateTimeFormat(undefined, {
+        timeZone: tz,
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric"
+      });
+      return { time: timeFmt.format(now), date: dateFmt.format(now) };
+    }
+    function updatePreview() {
+      const tz = tzSelect.value || allTimezones[0] || "UTC";
+      const now = new Date();
+      const { time, date } = formatPreview(now, tz);
+      previewTime.textContent = time;
+      previewDate.textContent = date;
+      previewTz.textContent = tz;
+      previewOffset.textContent = `UTC${currentUtcOffset(tz)}`;
+      const sys = Intl.DateTimeFormat().resolvedOptions().timeZone || "Unknown";
+      systemTz.textContent = sys;
+      const saved = localStorage.getItem("preferredTimeZone") || "Not set";
+      savedTz.textContent = saved;
+    }
+    function startTicker() {
+      if (tickTimer) clearInterval(tickTimer);
+      tickTimer = setInterval(updatePreview, 1000);
+    }
+    function showToast(message, ok = true) {
+      toastMsg.textContent = message;
+      toast.querySelector(".dot").style.background = ok ? "var(--ok)" : "var(--warn)";
+      toast.classList.add("show");
+      setTimeout(() => toast.classList.remove("show"), 1600);
+    }
+    // ------- Events -------
+    searchInput.addEventListener("input", e => renderList(e.target.value));
+    tzSelect.addEventListener("change", updatePreview);
+    detectBtn.addEventListener("click", () => {
+      const sys = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      if (sys && allTimezones.includes(sys)) {
+        tzSelect.value = sys;
+        updatePreview();
+        showToast("Auto-detected your timezone.");
+      } else {
+        showToast("Could not detect timezone.", false);
+      }
+    });
+    saveBtn.addEventListener("click", () => {
+      if (!tzSelect.value) return;
+      localStorage.setItem("preferredTimeZone", tzSelect.value);
+      updatePreview();
+      showToast("Saved as preferred timezone.");
+    });
+    fmt12Btn.addEventListener("click", () => {
+      use24h = false;
+      fmt12Btn.style.borderColor = "var(--accent)";
+      fmt24Btn.style.borderColor = "rgba(255,255,255,0.12)";
+      updatePreview();
+    });
+    fmt24Btn.addEventListener("click", () => {
+      use24h = true;
+      fmt24Btn.style.borderColor = "var(--accent)";
+      fmt12Btn.style.borderColor = "rgba(255,255,255,0.12)";
+      updatePreview();
+    });
+    saveBtn.addEventListener("click", async () => {
+    const tz = tzSelect.value;
+    if (!tz) return;
+    // Save locally (UI preview)
+    localStorage.setItem("preferredTimeZone", tz);
+    // --- Send timezone to Python server ---
+    try {
+        const res = await fetch("/api/timezone", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ timezone: tz })
+        });
+        const data = await res.json();
+        if (!data.ok) {
+        showToast("Failed to send to Python", false);
+        return;
+        }
+        showToast("Timezone saved");
+    } catch (err) {
+        console.error(err);
+        showToast("Error contacting Python server", false);
+    }
+    updatePreview();
+    });
+    // ------- Init -------
+    allTimezones = getTimezones().slice().sort();
+    renderList("");
+    startTicker();
+    // Restore saved preference if present
+    const saved = localStorage.getItem("preferredTimeZone");
+    if (saved && allTimezones.includes(saved)) {
+      tzSelect.value = saved;
+      updatePreview();
+    }
+    // Initial button states
+    fmt24Btn.style.borderColor = "var(--accent)";
+    showUtcBtn.style.borderColor = "var(--accent)";
+  </script>
+</body>
+</html>

reachy_mini_clock/main.py ADDED Viewed

	@@ -0,0 +1,165 @@

+import http.server
+import json
+import threading
+from pathlib import Path
+from typing import Optional
+import numpy as np
+from reachy_mini import ReachyMini, ReachyMiniApp
+_selected_timezone: Optional[str] = "Europe/Paris"
+_tz_lock = threading.Lock()
+def set_timezone(tz: str):
+    global _selected_timezone
+    with _tz_lock:
+        _selected_timezone = tz
+def get_timezone() -> Optional[str]:
+    with _tz_lock:
+        return _selected_timezone
+# --- HTTP Handler with a tiny JSON API ---
+class Handler(http.server.SimpleHTTPRequestHandler):
+    # Serve files from the folder containing this script (adjust if needed)
+    def __init__(self, *args, **kwargs):
+        self.directory = str(Path(__file__).parent)
+        super().__init__(*args, directory=self.directory, **kwargs)
+    def log_message(self, fmt, *args):
+        # quieter default logging; keep your own prints if you want
+        pass
+    def _send_json(self, obj, status=200):
+        data = json.dumps(obj).encode("utf-8")
+        self.send_response(status)
+        self.send_header("Content-Type", "application/json; charset=utf-8")
+        self.send_header("Content-Length", str(len(data)))
+        self.end_headers()
+        self.wfile.write(data)
+    def do_GET(self):
+        print("-----------------------")
+        print(f"GET {self.path} (from client {self.client_address})")
+        print(self.headers)
+        if self.path == "/api/timezone":
+            tz = get_timezone()
+            self._send_json({"timezone": tz})
+            return
+        # otherwise serve static files (index.html, style.css, etc.)
+        super().do_GET()
+    def do_POST(self):
+        if self.path != "/api/timezone":
+            self.send_error(404)
+            return
+        length = int(self.headers.get("Content-Length", "0"))
+        body = self.rfile.read(length).decode("utf-8")
+        payload = json.loads(body)
+        tz = payload.get("timezone")
+        set_timezone(tz)
+        self._send_json({"ok": True})
+def start_server(stop_event: threading.Event, host="localhost", port=8080):
+    httpd = http.server.HTTPServer((host, port), Handler)
+    httpd.timeout = 0.5  # so we can check stop_event regularly
+    print(f"Serving on http://{host}:{port}")
+    while not stop_event.is_set():
+        httpd.handle_request()
+    httpd.server_close()
+    print("HTTP server stopped.")
+def get_time_from_timezone(tz: str):
+    from datetime import datetime
+    import pytz
+    timezone = pytz.timezone(tz)
+    return datetime.now(timezone).strftime("%H:%M")
+def is_close(a: float, b: float, tol: float = 0.2) -> bool:
+    return abs(a - b) < tol
+def apply_time_to_antennas(reachy_mini: ReachyMini, hour: int, minute: int):
+    # Example: map hour/minute to antenna positions
+    hour_angle = (hour % 12) / 12.0  # 0.0 to 1.0
+    minute_angle = minute / 60.0  # 0.0 to 1.0
+    # convert to radians
+    target_minute_angle = minute_angle * 2 * np.pi
+    target_hour_angle = hour_angle * 2 * np.pi + (minute_angle * 2 * np.pi) / 12.0
+    _, (current_hour, current_minute) = reachy_mini.get_current_joint_positions()
+    if is_close(current_hour, target_hour_angle) and is_close(
+        current_minute, target_minute_angle
+    ):
+        reachy_mini.set_target_antenna_joint_positions(
+            [target_hour_angle, target_minute_angle]
+        )
+    else:
+        reachy_mini.goto_target(
+            np.eye(4),
+            antennas=[target_hour_angle, target_minute_angle],
+            duration=1.0,
+        )
+class ReachyMiniClock(ReachyMiniApp):
+    custom_app_url: str | None = "http://localhost:8080/index.html"
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        # Start server in background
+        server_thread = threading.Thread(
+            target=start_server, args=(stop_event,), daemon=True
+        )
+        server_thread.start()
+        reachy_mini.goto_target(np.eye(4), antennas=[0, 0], duration=2.0)
+        last_tz = None
+        while not stop_event.is_set():
+            tz = get_timezone()
+            if tz and tz != last_tz:
+                last_tz = tz
+                print(f"[ReachyMiniClock] New timezone selected: {tz}")
+            current_time = get_time_from_timezone(tz)
+            # print("time:", current_time)
+            hour = int(current_time.split(":")[0])
+            minute = int(current_time.split(":")[1])
+            apply_time_to_antennas(reachy_mini, hour, minute)
+            stop_event.wait(1.0)
+        stop_event.set()
+        server_thread.join(timeout=1)
+if __name__ == "__main__":
+    stop = threading.Event()
+    # Run Reachy app
+    with ReachyMini() as mini:
+        app = ReachyMiniClock()
+        try:
+            print("Running 'reachy_mini_clock' a ReachyMiniApp...")
+            print("Press Ctrl+C to stop the app.")
+            app.run(mini, stop)
+        except KeyboardInterrupt:
+            print("Stopping the app...")
+            stop.set()
+    stop.set()
+    print("App has stopped.")

style.css ADDED Viewed

	@@ -0,0 +1,411 @@

+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+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;
+}
+.hero {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	padding: 4rem 2rem;
+	text-align: center;
+}
+.hero-content {
+	max-width: 800px;
+	margin: 0 auto;
+}
+.app-icon {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	display: inline-block;
+}
+.hero h1 {
+	font-size: 3rem;
+	font-weight: 700;
+	margin-bottom: 1rem;
+	background: linear-gradient(45deg, #fff, #f0f9ff);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+.tagline {
+	font-size: 1.25rem;
+	opacity: 0.9;
+	max-width: 600px;
+	margin: 0 auto;
+}
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 2rem;
+	position: relative;
+	z-index: 2;
+}
+.main-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	margin-top: -2rem;
+	overflow: hidden;
+	margin-bottom: 3rem;
+}
+.app-preview {
+	background: linear-gradient(135deg, #1e3a8a, #3b82f6);
+	padding: 3rem;
+	color: white;
+	text-align: center;
+	position: relative;
+}
+.preview-image {
+	background: #000;
+	border-radius: 15px;
+	padding: 2rem;
+	max-width: 500px;
+	margin: 0 auto;
+	position: relative;
+	overflow: hidden;
+}
+.camera-feed {
+	font-size: 4rem;
+	margin-bottom: 1rem;
+	opacity: 0.7;
+}
+.detection-overlay {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 100%;
+}
+.bbox {
+	background: rgba(34, 197, 94, 0.9);
+	color: white;
+	padding: 0.5rem 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	font-weight: 600;
+	margin: 0.5rem;
+	display: inline-block;
+	border: 2px solid #22c55e;
+}
+.app-details {
+	padding: 3rem;
+}
+.app-details h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 2rem;
+	text-align: center;
+}
+.template-info {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	gap: 2rem;
+	margin-bottom: 3rem;
+}
+.info-box {
+	background: #f0f9ff;
+	border: 2px solid #e0f2fe;
+	border-radius: 12px;
+	padding: 2rem;
+}
+.info-box h3 {
+	color: #0c4a6e;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+.info-box p {
+	color: #0369a1;
+	line-height: 1.6;
+}
+.how-to-use {
+	background: #fefce8;
+	border: 2px solid #fde047;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 3rem;
+}
+.how-to-use h3 {
+	color: #a16207;
+	margin-bottom: 1.5rem;
+	font-size: 1.3rem;
+	text-align: center;
+}
+.steps {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}
+.step {
+	display: flex;
+	align-items: flex-start;
+	gap: 1rem;
+}
+.step-number {
+	background: #eab308;
+	color: white;
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: bold;
+	flex-shrink: 0;
+}
+.step h4 {
+	color: #a16207;
+	margin-bottom: 0.5rem;
+	font-size: 1.1rem;
+}
+.step p {
+	color: #ca8a04;
+}
+.download-card {
+	background: white;
+	border-radius: 20px;
+	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+	padding: 3rem;
+	text-align: center;
+}
+.download-card h2 {
+	font-size: 2rem;
+	color: #1e293b;
+	margin-bottom: 1rem;
+}
+.download-card>p {
+	color: #64748b;
+	font-size: 1.1rem;
+	margin-bottom: 2rem;
+}
+.dashboard-config {
+	margin-bottom: 2rem;
+	text-align: left;
+	max-width: 400px;
+	margin-left: auto;
+	margin-right: auto;
+}
+.dashboard-config label {
+	display: block;
+	color: #374151;
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+.dashboard-config input {
+	width: 100%;
+	padding: 0.75rem 1rem;
+	border: 2px solid #e5e7eb;
+	border-radius: 8px;
+	font-size: 0.95rem;
+	transition: border-color 0.2s;
+}
+.dashboard-config input:focus {
+	outline: none;
+	border-color: #667eea;
+}
+.install-btn {
+	background: linear-gradient(135deg, #667eea, #764ba2);
+	color: white;
+	border: none;
+	padding: 1.25rem 3rem;
+	border-radius: 16px;
+	font-size: 1.2rem;
+	font-weight: 700;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	display: inline-flex;
+	align-items: center;
+	gap: 0.75rem;
+	margin-bottom: 2rem;
+	box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+}
+.install-btn:hover:not(:disabled) {
+	transform: translateY(-3px);
+	box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
+}
+.install-btn:disabled {
+	opacity: 0.7;
+	cursor: not-allowed;
+	transform: none;
+}
+.manual-option {
+	background: #f8fafc;
+	border-radius: 12px;
+	padding: 2rem;
+	margin-top: 2rem;
+}
+.manual-option h3 {
+	color: #1e293b;
+	margin-bottom: 1rem;
+	font-size: 1.2rem;
+}
+.manual-option>p {
+	color: #64748b;
+	margin-bottom: 1rem;
+}
+.btn-icon {
+	font-size: 1.1rem;
+}
+.install-status {
+	padding: 1rem;
+	border-radius: 8px;
+	font-size: 0.9rem;
+	text-align: center;
+	display: none;
+	margin-top: 1rem;
+}
+.install-status.success {
+	background: #dcfce7;
+	color: #166534;
+	border: 1px solid #bbf7d0;
+}
+.install-status.error {
+	background: #fef2f2;
+	color: #dc2626;
+	border: 1px solid #fecaca;
+}
+.install-status.loading {
+	background: #dbeafe;
+	color: #1d4ed8;
+	border: 1px solid #bfdbfe;
+}
+.install-status.info {
+	background: #e0f2fe;
+	color: #0369a1;
+	border: 1px solid #7dd3fc;
+}
+.manual-install {
+	background: #1f2937;
+	border-radius: 8px;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+.manual-install code {
+	color: #10b981;
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+	font-size: 0.85rem;
+	flex: 1;
+	overflow-x: auto;
+}
+.copy-btn {
+	background: #374151;
+	color: white;
+	border: none;
+	padding: 0.5rem 1rem;
+	border-radius: 6px;
+	font-size: 0.8rem;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+.copy-btn:hover {
+	background: #4b5563;
+}
+.manual-steps {
+	color: #6b7280;
+	font-size: 0.9rem;
+	line-height: 1.8;
+}
+.footer {
+	text-align: center;
+	padding: 2rem;
+	color: white;
+	opacity: 0.8;
+}
+.footer a {
+	color: white;
+	text-decoration: none;
+	font-weight: 600;
+}
+.footer a:hover {
+	text-decoration: underline;
+}
+/* Responsive Design */
+@media (max-width: 768px) {
+	.hero {
+		padding: 2rem 1rem;
+	}
+	.hero h1 {
+		font-size: 2rem;
+	}
+	.container {
+		padding: 0 1rem;
+	}
+	.app-details,
+	.download-card {
+		padding: 2rem;
+	}
+	.features-grid {
+		grid-template-columns: 1fr;
+	}
+	.download-options {
+		grid-template-columns: 1fr;
+	}
+}