-Hi! Thanks for poking around. -
-` in a new tab β the badge's own
+upload page picks up the prefill and continues the gated handshake
+from there. End-to-end bytes never leave the local network.
diff --git a/oreo.elixpo/next-env.d.ts b/oreo.elixpo/next-env.d.ts
new file mode 100644
index 0000000..830fb59
--- /dev/null
+++ b/oreo.elixpo/next-env.d.ts
@@ -0,0 +1,6 @@
+/// (null);
+ const mouseRef = useRef({ x: 0, y: 0 });
+ const targetMouseRef = useRef({ x: 0, y: 0 });
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return undefined;
+
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return undefined;
+
+ let animationId: number;
+ let time = 0;
+
+ const computeThemeColors = () => {
+ const rootStyles = getComputedStyle(document.documentElement);
+
+ // Helper to convert any CSS color to a Canvas-compatible format
+ const resolveColor = (variables: string[], alpha = 1) => {
+ // Create a temporary element to get computed color
+ const tempEl = document.createElement("div");
+ tempEl.style.position = "absolute";
+ tempEl.style.visibility = "hidden";
+ tempEl.style.width = "1px";
+ tempEl.style.height = "1px";
+ document.body.appendChild(tempEl);
+
+ let color = `rgba(255, 255, 255, ${alpha})`;
+
+ for (const variable of variables) {
+ const value = rootStyles.getPropertyValue(variable).trim();
+ if (value) {
+ // Try to set the background color using the CSS variable
+ tempEl.style.backgroundColor = `var(${variable})`;
+ const computedColor = getComputedStyle(tempEl).backgroundColor;
+
+ if (computedColor && computedColor !== "rgba(0, 0, 0, 0)") {
+ // Convert RGB to RGBA with alpha if needed
+ if (alpha < 1) {
+ const rgbMatch = computedColor.match(
+ /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/
+ );
+ if (rgbMatch) {
+ color = `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${alpha})`;
+ } else {
+ color = computedColor;
+ }
+ } else {
+ color = computedColor;
+ }
+ break;
+ }
+ }
+ }
+
+ document.body.removeChild(tempEl);
+ return color;
+ };
+
+ return {
+ backgroundTop: resolveColor(["--background"], 1),
+ backgroundBottom: resolveColor(["--muted", "--background"], 0.95),
+ wavePalette: [
+ {
+ offset: 0,
+ amplitude: 70,
+ frequency: 0.003,
+ color: resolveColor(["--primary"], 0.8),
+ opacity: 0.45,
+ },
+ {
+ offset: Math.PI / 2,
+ amplitude: 90,
+ frequency: 0.0026,
+ color: resolveColor(["--accent", "--primary"], 0.7),
+ opacity: 0.35,
+ },
+ {
+ offset: Math.PI,
+ amplitude: 60,
+ frequency: 0.0034,
+ color: resolveColor(["--secondary", "--foreground"], 0.65),
+ opacity: 0.3,
+ },
+ {
+ offset: Math.PI * 1.5,
+ amplitude: 80,
+ frequency: 0.0022,
+ color: resolveColor(["--primary-foreground", "--foreground"], 0.25),
+ opacity: 0.25,
+ },
+ {
+ offset: Math.PI * 2,
+ amplitude: 55,
+ frequency: 0.004,
+ color: resolveColor(["--foreground"], 0.2),
+ opacity: 0.2,
+ },
+ ] satisfies WaveConfig[],
+ };
+ };
+
+ let themeColors = computeThemeColors();
+
+ const handleThemeMutation = () => {
+ themeColors = computeThemeColors();
+ };
+
+ const observer = new MutationObserver(handleThemeMutation);
+ observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["class", "data-theme"],
+ });
+
+ const prefersReducedMotion = window.matchMedia(
+ "(prefers-reduced-motion: reduce)"
+ ).matches;
+
+ const mouseInfluence = prefersReducedMotion ? 10 : 70;
+ const influenceRadius = prefersReducedMotion ? 160 : 320;
+ const smoothing = prefersReducedMotion ? 0.04 : 0.1;
+
+ const resizeCanvas = () => {
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+ };
+
+ const recenterMouse = () => {
+ const centerPoint = { x: canvas.width / 2, y: canvas.height / 2 };
+ mouseRef.current = centerPoint;
+ targetMouseRef.current = centerPoint;
+ };
+
+ const handleResize = () => {
+ resizeCanvas();
+ recenterMouse();
+ };
+
+ const handleMouseMove = (event: MouseEvent) => {
+ targetMouseRef.current = { x: event.clientX, y: event.clientY };
+ };
+
+ const handleMouseLeave = () => {
+ recenterMouse();
+ };
+
+ resizeCanvas();
+ recenterMouse();
+
+ window.addEventListener("resize", handleResize);
+ window.addEventListener("mousemove", handleMouseMove);
+ window.addEventListener("mouseleave", handleMouseLeave);
+
+ const drawWave = (wave: WaveConfig) => {
+ ctx.save();
+ ctx.beginPath();
+
+ for (let x = 0; x <= canvas.width; x += 4) {
+ const dx = x - mouseRef.current.x;
+ const dy = canvas.height / 2 - mouseRef.current.y;
+ const distance = Math.sqrt(dx * dx + dy * dy);
+ const influence = Math.max(0, 1 - distance / influenceRadius);
+ const mouseEffect =
+ influence *
+ mouseInfluence *
+ Math.sin(time * 0.001 + x * 0.01 + wave.offset);
+
+ const y =
+ canvas.height / 2 +
+ Math.sin(x * wave.frequency + time * 0.002 + wave.offset) *
+ wave.amplitude +
+ Math.sin(x * wave.frequency * 0.4 + time * 0.003) *
+ (wave.amplitude * 0.45) +
+ mouseEffect;
+
+ if (x === 0) {
+ ctx.moveTo(x, y);
+ } else {
+ ctx.lineTo(x, y);
+ }
+ }
+
+ ctx.lineWidth = 2.5;
+ ctx.strokeStyle = wave.color;
+ ctx.globalAlpha = wave.opacity;
+ ctx.shadowBlur = 35;
+ ctx.shadowColor = wave.color;
+ ctx.stroke();
+
+ ctx.restore();
+ };
+
+ const animate = () => {
+ time += 1;
+
+ mouseRef.current.x +=
+ (targetMouseRef.current.x - mouseRef.current.x) * smoothing;
+ mouseRef.current.y +=
+ (targetMouseRef.current.y - mouseRef.current.y) * smoothing;
+
+ const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
+ gradient.addColorStop(0, themeColors.backgroundTop);
+ gradient.addColorStop(1, themeColors.backgroundBottom);
+
+ ctx.fillStyle = gradient;
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ ctx.globalAlpha = 1;
+ ctx.shadowBlur = 0;
+
+ themeColors.wavePalette.forEach(drawWave);
+
+ animationId = window.requestAnimationFrame(animate);
+ };
+
+ animationId = window.requestAnimationFrame(animate);
+
+ return () => {
+ window.removeEventListener("resize", handleResize);
+ window.removeEventListener("mousemove", handleMouseMove);
+ window.removeEventListener("mouseleave", handleMouseLeave);
+ cancelAnimationFrame(animationId);
+ observer.disconnect();
+ };
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Reactive canvas hero
+
+
+
+ Welcome to immersive{" "}
+
+ realtime playgrounds
+
+
+
+
+ Build living surfaces that respond to every interaction. Craft
+ cinematic hero moments, responsive canvases, and luminous gradients
+ without leaving your design system.
+
+
+
+
+
+
+
+
+ {highlightPills.map((pill) => (
+
+ {pill}
+
+ ))}
+
+
+
+ {heroStats.map((stat) => (
+
+
+ {stat.label}
+
+
+ {stat.value}
+
+
+ ))}
+
+
+
+
+ );
+}
+
+
+demo.tsx
+import { GlowyWavesHero } from "@/components/ui/glowy-waves-hero-shadcnui"
+
+export default function Demo() {
+ return (
+
+ /` | **Default-installed.** Tile appears in the drawer on every fresh deploy. Use for core OS tools + apps every badge owner should have |
+| `apps_market//` | **Opt-in.** Ships in the catalogue but isn't in the drawer until the user installs from the on-device **App Market** tile. Use for games, sketches, hackathon entries, themed extras |
+
+The two trees have **identical shape** β `main.py + manifest.json +
+__init__.py + assets/`. `tools/deploy.py` walks both and ships them to
+the matching path on the device. The Market app calls into
+[`oreoOS.store`](oreoOS/store.py) which `cp -r`s a folder between the
+two trees on install / uninstall.
+
+When in doubt, ship to `apps_market/` β flash and drawer real estate
+are precious, and the install flow is one tap away.
+
+**The contract.** Your app subclasses `oreoOS.App` and implements three
+lifecycle methods:
+
+```python
+class App(oreoOS.App):
+ name = "My App"
+
+ def on_enter(self, os):
+ # one-shot setup. load sprites, restore state, calibrate sensors.
+
+ def update(self, dt):
+ # per-frame logic. dt is seconds since last frame.
+
+ def draw(self, d):
+ # per-frame render. d is the framebuffer. don't call d.present().
+```
+
+Optional hooks: `on_exit`, `on_button_press(btn)`,
+`on_button_release(btn)`, `on_home_press()` (returns True to suppress
+the default HOME-to-drawer behaviour).
+
+**Class attributes you can set:**
+
+- `name` β what appears on the launcher tile + loading screen
+- `SHOW_LOADING` β `True` if `on_enter` takes > 200 ms
+- `BLOCK_IDLE` β `True` for apps that should keep the screen on
+ even without button presses (games, IR scanner)
+
+**Where things live:**
+
+```
+apps/my_app/
+βββ __init__.py empty marker
+βββ main.py your App class
+βββ manifest.json name + version + icon + author
+βββ assets/
+ βββ raw/ source images you commit
+ βββ optimized/ baked RGB565 .py modules
+```
+
+To bake assets: drop a PNG/JPG into `assets/raw/`, run
+`python tools/optimize_assets.py --app my_app`, commit the result.
+
+The `theme` module is the source of truth for colours. If you find
+yourself reaching for `api.rgb(...)` directly, ask whether there's a
+themed constant that fits.
+
+---
+
+## Hacking on the OS
+
+The OS lives in two packages:
+
+- `oreoOS/` β pure Python: launcher, splash, theme, widgets, app base
+ class, OTA client, cache, power manager, etc.
+- `oreoWare/` β hardware drivers: display, buttons, WiFi, BT, IMU, IR,
+ battery, touch. **Everything is funnelled through `oreoWare/pins.py`**
+ so a PCB pin swap only touches that file.
+
+**Conventions worth knowing:**
+
+- One source of truth for pins, one for colours, one for VERSION.
+- Apps that read network data should cache to disk with a TTL via
+ `oreoOS.cache`. See `apps/badge/main.py` for the pattern.
+- The framebuf is RGB565 big-endian. Use `api.rgb(r, g, b)` to pack β
+ don't construct the integer by hand.
+- Anything that might block (network, heavy compute) should either be
+ short-timeout-bounded OR set `SHOW_LOADING = True` so the user sees a
+ panel during `on_enter`.
+
+---
+
+## Pull requests
+
+1. **Branch off main.** Name it something descriptive
+ (`feature/ir-quest-leaderboard`, not `patch-1`).
+2. **Run the deploy** locally to make sure the OS still boots. If your
+ change touches drivers, test wake-from-sleep, OTA, and at least two
+ apps you didn't write.
+3. **One PR, one purpose.** Don't bundle a bug-fix with a rename, and
+ don't fold a 4-file refactor into a typo PR.
+4. **Title format:** `[scope] short description`, e.g.
+ `[ota] fix peek() to handle malformed manifest`.
+5. **Tag a maintainer** in the PR description so we see it. Right now
+ that's [@Circuit-Overtime](https://github.com/Circuit-Overtime).
+
+We try to respond within a week. If we haven't, please nudge β the
+notification probably got lost in conference-season chaos.
+
+---
+
+## Releasing
+
+Maintainers only β feel free to skip this section.
+
+Releases are **manual on purpose**. We want a human to look at a badge
+running the release candidate before the wider fleet pulls it in.
+
+**Before tagging:** add the new version's section to the top of
+[`CHANGELOG.md`](CHANGELOG.md). The CI release workflow takes the
+**top section** of that file verbatim and posts it as the GitHub
+release's `body` β which is what the badge's **Updates** screen shows
+as the in-device changelog when an upgrade is found. Keep entries
+short, bullet-style, present tense.
+
+The one-liner:
+
+```bash
+# Dry-run first so you can read every command the script will execute.
+python tools/release.py v1.4.0 --channel stable --dry-run
+
+# Looks good? Drop --dry-run and ship.
+python tools/release.py v1.4.0 --channel stable --notes "Fly mode + new pet sprites"
+```
+
+Under the hood the script:
+
+1. Verifies `git` + `gh` are installed and you're authenticated.
+2. Refuses to release if the working tree is dirty (override with `--force`).
+3. Bumps `oreoOS/config.py:VERSION` to `v1.4.0` if it isn't already.
+4. Commits the bump and pushes `main` + the new tag (`stable/v1.4.0`).
+5. Runs `tools/build_release.py` to produce
+ `dist/v1.4.0/{manifest.json, bundle.tar, files/...}`.
+6. Calls `gh release create` to publish, uploading every file as a
+ per-asset attachment so the manifest's per-file URLs resolve.
+
+A few minutes later every badge in the field with WiFi will see the
+SHA-based check find the new version within 6 h, and **Settings β
+Check Update** will pull it down on demand.
+
+For a **beta** channel: `python tools/release.py v1.4.0-rc1 --channel beta`.
+Badges only pick up the channel they're configured for (`stable` by
+default).
+
+If you don't have a dev machine handy: the GitHub Actions
+[`release` workflow](.github/workflows/release.yml) does the same thing
+when you click **Run workflow** in the Actions tab β same script under
+the hood, no auto-trigger on tag push.
+
+---
+
+## Project values
+
+- **Friendly is feature.** A confusing-but-correct UI is a bug.
+- **Readable comments beat clever code.** This project is meant to be
+ hackable; if something would surprise a first-time reader, comment it.
+- **Hardware is a teammate, not a constraint.** Lean on the chip's
+ strengths. Don't fight the LDO.
+- **Ship small, ship often.** The OTA pipeline is there so we can.
+
+---
+
+## Contact
+
+- **Email:** hello@elixpo.com
+- **GitHub:** https://github.com/elixpo/oreo
+- **Maintainer:** [@Circuit-Overtime](https://github.com/Circuit-Overtime)
+
+Thanks for being here. πΌ
diff --git a/oreo.elixpo/public/favicon.png b/oreo.elixpo/public/favicon.png
new file mode 100644
index 0000000..2fc6344
Binary files /dev/null and b/oreo.elixpo/public/favicon.png differ
diff --git a/oreo.elixpo/public/icons/IR_Quest_icon.png b/oreo.elixpo/public/icons/IR_Quest_icon.png
new file mode 100644
index 0000000..41516b8
Binary files /dev/null and b/oreo.elixpo/public/icons/IR_Quest_icon.png differ
diff --git a/oreo.elixpo/public/icons/about_icon.png b/oreo.elixpo/public/icons/about_icon.png
new file mode 100644
index 0000000..bef6c80
Binary files /dev/null and b/oreo.elixpo/public/icons/about_icon.png differ
diff --git a/oreo.elixpo/public/icons/apps_icon.png b/oreo.elixpo/public/icons/apps_icon.png
new file mode 100644
index 0000000..85aa4b9
Binary files /dev/null and b/oreo.elixpo/public/icons/apps_icon.png differ
diff --git a/oreo.elixpo/public/icons/badge_icon.png b/oreo.elixpo/public/icons/badge_icon.png
new file mode 100644
index 0000000..6937866
Binary files /dev/null and b/oreo.elixpo/public/icons/badge_icon.png differ
diff --git a/oreo.elixpo/public/icons/bluetooth_icon.png b/oreo.elixpo/public/icons/bluetooth_icon.png
new file mode 100644
index 0000000..f3e66de
Binary files /dev/null and b/oreo.elixpo/public/icons/bluetooth_icon.png differ
diff --git a/oreo.elixpo/public/icons/cat_games.png b/oreo.elixpo/public/icons/cat_games.png
new file mode 100644
index 0000000..bc6aaa5
Binary files /dev/null and b/oreo.elixpo/public/icons/cat_games.png differ
diff --git a/oreo.elixpo/public/icons/cat_github.png b/oreo.elixpo/public/icons/cat_github.png
new file mode 100644
index 0000000..4c0f1df
Binary files /dev/null and b/oreo.elixpo/public/icons/cat_github.png differ
diff --git a/oreo.elixpo/public/icons/cat_system.png b/oreo.elixpo/public/icons/cat_system.png
new file mode 100644
index 0000000..a863a72
Binary files /dev/null and b/oreo.elixpo/public/icons/cat_system.png differ
diff --git a/oreo.elixpo/public/icons/cat_tools.png b/oreo.elixpo/public/icons/cat_tools.png
new file mode 100644
index 0000000..99e05e3
Binary files /dev/null and b/oreo.elixpo/public/icons/cat_tools.png differ
diff --git a/oreo.elixpo/public/icons/cat_utils.png b/oreo.elixpo/public/icons/cat_utils.png
new file mode 100644
index 0000000..d9343f2
Binary files /dev/null and b/oreo.elixpo/public/icons/cat_utils.png differ
diff --git a/oreo.elixpo/public/icons/color_icon.png b/oreo.elixpo/public/icons/color_icon.png
new file mode 100644
index 0000000..f356b8d
Binary files /dev/null and b/oreo.elixpo/public/icons/color_icon.png differ
diff --git a/oreo.elixpo/public/icons/commits_breaker_icon.png b/oreo.elixpo/public/icons/commits_breaker_icon.png
new file mode 100644
index 0000000..41007b4
Binary files /dev/null and b/oreo.elixpo/public/icons/commits_breaker_icon.png differ
diff --git a/oreo.elixpo/public/icons/commits_icon.png b/oreo.elixpo/public/icons/commits_icon.png
new file mode 100644
index 0000000..36a5e3d
Binary files /dev/null and b/oreo.elixpo/public/icons/commits_icon.png differ
diff --git a/oreo.elixpo/public/icons/elixpo_pet_icon.png b/oreo.elixpo/public/icons/elixpo_pet_icon.png
new file mode 100644
index 0000000..e461260
Binary files /dev/null and b/oreo.elixpo/public/icons/elixpo_pet_icon.png differ
diff --git a/oreo.elixpo/public/icons/elixpo_sketch_icon.png b/oreo.elixpo/public/icons/elixpo_sketch_icon.png
new file mode 100644
index 0000000..fee4870
Binary files /dev/null and b/oreo.elixpo/public/icons/elixpo_sketch_icon.png differ
diff --git a/oreo.elixpo/public/icons/flappy_icon.png b/oreo.elixpo/public/icons/flappy_icon.png
new file mode 100644
index 0000000..1e6721c
Binary files /dev/null and b/oreo.elixpo/public/icons/flappy_icon.png differ
diff --git a/oreo.elixpo/public/icons/gallery_icon.png b/oreo.elixpo/public/icons/gallery_icon.png
new file mode 100644
index 0000000..e5aa48a
Binary files /dev/null and b/oreo.elixpo/public/icons/gallery_icon.png differ
diff --git a/oreo.elixpo/public/icons/gamepad_icon.png b/oreo.elixpo/public/icons/gamepad_icon.png
new file mode 100644
index 0000000..131306e
Binary files /dev/null and b/oreo.elixpo/public/icons/gamepad_icon.png differ
diff --git a/oreo.elixpo/public/icons/home_bg.png b/oreo.elixpo/public/icons/home_bg.png
new file mode 100644
index 0000000..1d0edad
Binary files /dev/null and b/oreo.elixpo/public/icons/home_bg.png differ
diff --git a/oreo.elixpo/public/icons/identity_icon.png b/oreo.elixpo/public/icons/identity_icon.png
new file mode 100644
index 0000000..c98c601
Binary files /dev/null and b/oreo.elixpo/public/icons/identity_icon.png differ
diff --git a/oreo.elixpo/public/icons/notifications_icon.png b/oreo.elixpo/public/icons/notifications_icon.png
new file mode 100644
index 0000000..135d78f
Binary files /dev/null and b/oreo.elixpo/public/icons/notifications_icon.png differ
diff --git a/oreo.elixpo/public/icons/racer_icon.png b/oreo.elixpo/public/icons/racer_icon.png
new file mode 100644
index 0000000..b3c396b
Binary files /dev/null and b/oreo.elixpo/public/icons/racer_icon.png differ
diff --git a/oreo.elixpo/public/icons/reader_icon.png b/oreo.elixpo/public/icons/reader_icon.png
new file mode 100644
index 0000000..f5c8de9
Binary files /dev/null and b/oreo.elixpo/public/icons/reader_icon.png differ
diff --git a/oreo.elixpo/public/icons/settings_icon.png b/oreo.elixpo/public/icons/settings_icon.png
new file mode 100644
index 0000000..b9054b4
Binary files /dev/null and b/oreo.elixpo/public/icons/settings_icon.png differ
diff --git a/oreo.elixpo/public/icons/snake_icon.png b/oreo.elixpo/public/icons/snake_icon.png
new file mode 100644
index 0000000..652cf77
Binary files /dev/null and b/oreo.elixpo/public/icons/snake_icon.png differ
diff --git a/oreo.elixpo/public/icons/storage_icon.png b/oreo.elixpo/public/icons/storage_icon.png
new file mode 100644
index 0000000..2bab4f3
Binary files /dev/null and b/oreo.elixpo/public/icons/storage_icon.png differ
diff --git a/oreo.elixpo/public/icons/store_icon.png b/oreo.elixpo/public/icons/store_icon.png
new file mode 100644
index 0000000..2e0f6ca
Binary files /dev/null and b/oreo.elixpo/public/icons/store_icon.png differ
diff --git a/oreo.elixpo/public/icons/wallpaper_icon.png b/oreo.elixpo/public/icons/wallpaper_icon.png
new file mode 100644
index 0000000..0e3078d
Binary files /dev/null and b/oreo.elixpo/public/icons/wallpaper_icon.png differ
diff --git a/oreo.elixpo/public/icons/wifi_icon.png b/oreo.elixpo/public/icons/wifi_icon.png
new file mode 100644
index 0000000..fd617e6
Binary files /dev/null and b/oreo.elixpo/public/icons/wifi_icon.png differ
diff --git a/oreo.elixpo/public/mascot.png b/oreo.elixpo/public/mascot.png
new file mode 100644
index 0000000..c5a64cc
Binary files /dev/null and b/oreo.elixpo/public/mascot.png differ
diff --git a/oreo.elixpo/src/app/apps/[slug]/_components/DetailIcon.tsx b/oreo.elixpo/src/app/apps/[slug]/_components/DetailIcon.tsx
new file mode 100644
index 0000000..b532334
--- /dev/null
+++ b/oreo.elixpo/src/app/apps/[slug]/_components/DetailIcon.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import type { AppEntry } from "@/data/apps";
+
+/* Big hero icon for the detail route. Renders the real PNG with a
+ * subtle scale-in + pixelated rendering so the badge artwork stays
+ * crisp at 128 px. Wrapped in a client boundary because we want the
+ * graceful fallback (Lucide isn't loaded here intentionally β if the
+ * PNG fails we just show the first letter, keeping the bundle thin). */
+
+export default function DetailIcon({
+ app, tintRing,
+}: {
+ app: AppEntry;
+ tintRing: string;
+}) {
+ const [pngOk, setPngOk] = useState(true);
+ return (
+
+ {app.pngIcon && pngOk ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ 
setPngOk(false)}
+ className="h-full w-full object-contain"
+ style={{ imageRendering: "pixelated" }}
+ />
+ ) : (
+
+ {app.name[0]?.toUpperCase()}
+
+ )}
+
+ );
+}
diff --git a/oreo.elixpo/src/app/apps/[slug]/page.tsx b/oreo.elixpo/src/app/apps/[slug]/page.tsx
new file mode 100644
index 0000000..d09fa5d
--- /dev/null
+++ b/oreo.elixpo/src/app/apps/[slug]/page.tsx
@@ -0,0 +1,281 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import Link from "next/link";
+import {
+ ArrowLeft, Github, Tag, User, FileJson, Hash, Layers, ArrowRight,
+} from "lucide-react";
+import { ALL_CATALOG, findApp, type AppEntry } from "@/data/apps";
+import DetailIcon from "./_components/DetailIcon";
+
+/* /apps/[slug]/ β per-app detail route.
+ *
+ * Static export means we need every reachable URL pre-generated at
+ * build time. `generateStaticParams` returns one entry per app in
+ * `ALL_CATALOG`; the build emits an HTML file for each, so Cloudflare
+ * Pages can serve them as plain static assets β no runtime params.
+ *
+ * The page itself is a server component (no `use client`) because all
+ * its data is build-time-known. The hero "blurred logo" backdrop is
+ * pure CSS, no canvas, so the route loads instantly with zero JS
+ * cost. The header / footer animations still come along via the root
+ * layout.
+ */
+
+// `dynamicParams = false` locks the route to the slugs we declare β
+// any other URL 404s instead of trying to render at request time.
+// Required for `output: "export"` to know what to pre-render.
+export const dynamicParams = false;
+
+export async function generateStaticParams() {
+ return ALL_CATALOG.map((a) => ({ slug: a.urlSlug }));
+}
+
+// Next 15 made `params` async β it's now a Promise that must be
+// awaited before its fields can be read. The shape is otherwise
+// unchanged. This was the single most common Next 14 β 15 migration
+// gotcha; flagged here so future edits don't drop the await.
+type RouteParams = Promise<{ slug: string }>;
+
+export async function generateMetadata({
+ params,
+}: {
+ params: RouteParams;
+}): Promise {
+ const { slug } = await params;
+ const app = findApp(slug);
+ if (!app) return { title: "Not found" };
+ return {
+ title: `${app.name} Β· Oreo`,
+ description: app.blurb,
+ openGraph: {
+ title: `${app.name} Β· Oreo`,
+ description: app.blurb,
+ images: app.pngIcon ? [{ url: app.pngIcon }] : undefined,
+ },
+ };
+}
+
+const TINT_BG: Record = {
+ primary: "rgba(255, 93, 104, 0.22)",
+ teal: "rgba( 61, 220, 151, 0.20)",
+ gold: "rgba(255, 209, 102, 0.20)",
+ lilac: "rgba(162, 155, 254, 0.22)",
+};
+const TINT_TEXT: Record = {
+ primary: "text-primary",
+ teal: "text-teal",
+ gold: "text-gold",
+ lilac: "text-lilac",
+};
+const TINT_RING: Record = {
+ primary: "ring-primary/50",
+ teal: "ring-teal/50",
+ gold: "ring-gold/50",
+ lilac: "ring-lilac/50",
+};
+
+export default async function AppDetail({
+ params,
+}: {
+ params: RouteParams;
+}) {
+ const { slug } = await params;
+ const app = findApp(slug);
+ if (!app) notFound();
+
+ // Pick a few "related" apps in the same category for the bottom
+ // strip. Keep the original ordering so it's deterministic across
+ // builds (no Math.random).
+ const related = ALL_CATALOG
+ .filter((a) => a.urlSlug !== app.urlSlug && a.category === app.category)
+ .slice(0, 3);
+
+ const bgUrl = app.pngIcon ?? "";
+
+ return (
+
+ {/* ββ BLURRED LOGO BACKDROP βββββββββββββββββββββββββββββββββββββ
+ Two stacked layers:
+ 1. The PNG icon itself, scaled up and heavily blurred β the
+ "out-of-focus poster" feel.
+ 2. A tinted gradient overlay using the app's brand colour
+ to keep the page readable and on-theme.
+ Both layers are pointer-events-none so they never intercept
+ taps on the content above. */}
+ {bgUrl && (
+
+ )}
+
+
+ {/* Back link */}
+
+
+ {app.name}
+
+
+
+ {app.category}
+ Β·
+
+
+
+ {app.blurb}
+
+
+
+ {/* ββ META GRID ββββββββββββββββββββββββββββββββββββββββββββββββ */}
+
+ } label="Author" value={app.author!} />
+ } label="Version" value={"v" + app.version} />
+ } label="Category" value={app.category} />
+ } label="Path" value={`apps/${app.slug}/`} mono />
+
+
+ {/* ββ ABOUT ββββββββββββββββββββββββββββββββββββββββββββββββββββ */}
+
+
+ About
+
+ {(app.details ?? app.blurb).split("\n\n").map((p, i) => (
+ {p}
+ ))}
+
+
+
+
+ {/* ββ ACTION BAR βββββββββββββββββββββββββββββββββββββββββββββββ */}
+
+
+ {/* ββ RELATED ββββββββββββββββββββββββββββββββββββββββββββββββββ */}
+ {related.length > 0 && (
+
+
+ More in {app.category}
+
+
+ {related.map((r) => (
+
+
+ {r.name}
+
+ {r.blurb}
+
+
+ {icon} {label}
+
+
+ {value}
+
+
+ );
+}
+
+function RelatedIcon({ app }: { app: AppEntry }) {
+ return (
+
+ {app.pngIcon ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : (
+ {app.name[0]}
+ )}
+
+ );
+}
diff --git a/oreo.elixpo/src/app/apps/page.tsx b/oreo.elixpo/src/app/apps/page.tsx
new file mode 100644
index 0000000..3721ee7
--- /dev/null
+++ b/oreo.elixpo/src/app/apps/page.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Reveal, staggerContainer, fadeUp } from "@/components/MotionWrap";
+import AppCard from "@/components/AppCard";
+import { PRELOADED, ALL_APPS, STORE } from "@/data/apps";
+
+export default function AppsPage() {
+ return (
+
+ {/* Ambient glows so the page feels like part of the brand. */}
+
+
+
+
+
+
+ {/* Centred header */}
+
+
+ {ALL_APPS.length + STORE.length} apps and counting
+
+
+ Everything that ships,
+
+
+ and everything that streams in.
+
+
+
+ The preloaded set lands on the badge at flash time. The store
+ pulls fresh apps from GitHub at runtime β no laptop, no
+ recompile, no developer mode toggle.
+
+
+
+ {/* Preloaded β centred */}
+
+
+ Preloaded
+
+ Shipped with v1. Edit or remove any of them locally.
+
+
+
+
+ {PRELOADED.map((a, i) =>
+
+ More on the badge
+
+ Settings, tools, and games sit one drawer-tap away.
+
+
+
+
+ {ALL_APPS.filter(a => !PRELOADED.find(p => p.slug === a.slug))
+ .map((a, i) =>
+
+ From the store
+
+ Community apps installable at runtime from{" "}
+ apps_market/ on the repo.
+
+
+
+
+ {STORE.map((a, i) =>
+
+
+
+
+ );
+}
diff --git a/oreo.elixpo/src/app/badge/page.tsx b/oreo.elixpo/src/app/badge/page.tsx
new file mode 100644
index 0000000..7b6318b
--- /dev/null
+++ b/oreo.elixpo/src/app/badge/page.tsx
@@ -0,0 +1,176 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Reveal, fadeUp, staggerContainer } from "@/components/MotionWrap";
+import BadgeMockup from "@/components/BadgeMockup";
+import {
+ Cpu, MemoryStick, Battery, Radio, Usb, Layers,
+ Layout, Ruler, Github,
+} from "lucide-react";
+
+const SPECS = [
+ { Icon: Cpu, k: "MCU", v: "ESP32-S3 dual core @ 240 MHz" },
+ { Icon: MemoryStick, k: "Memory", v: "16 MB flash Β· 8 MB PSRAM" },
+ { Icon: Radio, k: "Radio", v: "WiFi 2.4 GHz Β· BLE 5 Β· IR transceiver" },
+ { Icon: Layout, k: "Display", v: "ST7789 240Γ320 IPS Β· portrait" },
+ { Icon: Battery, k: "Power", v: "USB-C + LiPo deep-sleep Β· ~5 Β΅A standby" },
+ { Icon: Usb, k: "I/O", v: "8-button matrix Β· IMU Β· 1-wire IR Β· IΒ²C bus" },
+ { Icon: Ruler, k: "Dimensions", v: "55 Γ 90 mm portrait PCB" },
+ { Icon: Layers, k: "Layers", v: "4-layer FR-4 Β· 1.6 mm Β· ENIG finish" },
+];
+
+const STACK = [
+ { lvl: "apps/", body: "Userland β manifest.json + main.py per app.",
+ tint: "from-primary/30 to-primary/5" },
+ { lvl: "oreoOS/", body: "The OS: launcher, store, OTA, notifications, file transfer.",
+ tint: "from-lilac/30 to-lilac/5" },
+ { lvl: "oreoWare/", body: "HAL / Board Support: drivers for screen, buttons, IMU, BLE, WiFi, IR, battery.",
+ tint: "from-teal/30 to-teal/5" },
+ { lvl: "MicroPython", body: "Runtime β we credit it loudly; we did not write it.",
+ tint: "from-gold/30 to-gold/5" },
+];
+
+export default function BadgePage() {
+ return (
+
+ {/* Soft brand glows */}
+
+
+
+
+
+
+
+ {/* ββ HERO: copy left, mockup right βββββββββββββββββββββββββββββ */}
+
+
+
+ ESP32-S3-DevKitC Β· breadboard phase
+
+
+ The hardware,{" "}
+
+ all open.
+
+
+
+ Tufty-classic portrait layout. Eight buttons, IR for line-of-sight
+ quests, an MPU6050 for shake and tilt, four LEDs around the frame.
+ Schematics and BOM live on the repo β fork them and roll your own.
+
+
+
+
+
+
+
+
+
+
+ {/* ββ SCHEMATICS CALLOUT ββββββββββββββββββββββββββββββββββββββββ */}
+
+
+
+
+ Full schematics
+
+ KiCad project (4-layer FR-4, ENIG finish), Gerbers, and a
+ full BOM with substitutions live in docs/hardware/.
+ PCB v1 fab files coming soon.
+
+
+ Coming soon
+
+
+
+
+
+
+ {/* ββ SPEC GRID ββββββββββββββββββββββββββββββββββββββββββββββ */}
+
+ {SPECS.map((s, i) => (
+
+
+ {s.k}
+ {s.v}
+
+
+ ))}
+
+
+ {/* ββ LAYERED ARCHITECTURE ββββββββββββββββββββββββββββββββββ */}
+
+
+
+ Layered architecture
+
+
+ Four layers, each can be rewritten without the others noticing.
+
+
+
+
+
+ {STACK.map((row, i) => (
+
+
+ {row.lvl}
+
+ L{STACK.length - i}
+
+
+ {row.body}
+
+ ))}
+
+
+
+ );
+}
diff --git a/oreo.elixpo/src/app/contribute/page.tsx b/oreo.elixpo/src/app/contribute/page.tsx
new file mode 100644
index 0000000..bb38223
--- /dev/null
+++ b/oreo.elixpo/src/app/contribute/page.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Reveal, fadeUp, staggerContainer } from "@/components/MotionWrap";
+import MarkdownView from "@/components/MarkdownView";
+import {
+ GitPullRequest, Bug, BookOpen, Code2, Heart, ExternalLink,
+} from "lucide-react";
+
+const TRACKS = [
+ { Icon: Code2, title: "Write an app",
+ body: "manifest.json + main.py and you're in the drawer. Look at apps/snake/ or apps/badge/ for ~50-line templates.",
+ href: "https://github.com/elixpo/oreo/blob/main/CONTRIBUTING.md#building-an-app",
+ tint: "text-primary" as const },
+ { Icon: Bug, title: "Fix a bug",
+ body: "Open issues are labelled by area (os / store / ota / wifi / bt). 'good first issue' tags exist; pair them with a serial log.",
+ href: "https://github.com/elixpo/oreo/issues",
+ tint: "text-teal" as const },
+ { Icon: BookOpen, title: "Write a hack",
+ body: "Drop Markdown into docs/hacks/ β we feature it on /hacks the next deploy.",
+ href: "https://github.com/elixpo/oreo/tree/main/docs/hacks",
+ tint: "text-gold" as const },
+ { Icon: GitPullRequest, title: "Improve the OS",
+ body: "Performance, polish, new services. Big changes β open a draft PR early so we can review the shape.",
+ href: "https://github.com/elixpo/oreo/tree/main/oreoOS",
+ tint: "text-lilac" as const },
+];
+
+export default function ContributePage() {
+ return (
+
+ {/* Soft glows so the page reads as part of the brand even
+ without the canvas hero. */}
+
+
+
+
+
+
+
+
+
+
+ Contribute to Oreo.{" "}
+
+ Bring snacks.
+
+
+
+ OreoOS is open: code, hardware, prompts, assets, the lot.
+ Pick a lane β or invent one. We merge fast and credit loudly.
+
+
+
+ {/* Contribution tracks */}
+
+ {TRACKS.map((t, i) => (
+
+
+ {t.title}
+ {t.body}
+
+ Open
+ ))}
+
+
+ {/* CONTRIBUTING.md β fetched from /public at runtime and rendered
+ through a tiny inline markdown formatter. The file is also a
+ real on-disk asset at /CONTRIBUTING.md if a contributor wants
+ the source. */}
+
+
+
+
+ The full contributing guide
+
+
+ view raw β
+
+
+
+ Mirrored verbatim from the repo's CONTRIBUTING.md. Edits to
+ the source on GitHub re-deploy here automatically.
+
+
+
+
+ );
+}
diff --git a/oreo.elixpo/src/app/get-started/page.tsx b/oreo.elixpo/src/app/get-started/page.tsx
new file mode 100644
index 0000000..a513a9b
--- /dev/null
+++ b/oreo.elixpo/src/app/get-started/page.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Reveal, fadeUp, staggerContainer } from "@/components/MotionWrap";
+import { Download, Terminal, Usb, Github } from "lucide-react";
+
+const STEPS = [
+ { n: "01", t: "Flash MicroPython", b: "Download the ESP32-S3 build, hold the BOOT button, flash via esptool. Two-minute job." },
+ { n: "02", t: "Clone the OS", b: "`git clone https://github.com/elixpo/oreo` and copy `.env.example` β `.env` with your WiFi credentials." },
+ { n: "03", t: "Deploy", b: "`python tools/deploy.py` β pushes everything over USB, skips unchanged files, bumps the version." },
+ { n: "04", t: "Open the badge", b: "Drawer β Settings β WiFi β Send files. Cloudflare-served `/upload` works from any phone on the same WiFi." },
+];
+
+export default function GetStartedPage() {
+ return (
+
+
+
+
+
+
+
+ ~15 minutes Β· USB-C + a computer
+
+ From box to badge,{" "}
+
+ in four steps.
+
+
+
+ The deploy script handles version bumps, hash-cache pruning,
+ free-space guards, and secrets generation. You hold the BOOT
+ button, you wait, you tap A.
+
+
+
+
+
+ {STEPS.map((s, i) => (
+
+
+ {s.n}
+
+ {s.t}
+ {s.b}
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+ Need help?
+
+ Open an issue with your serial-console log
+ (mpremote connect /dev/ttyACM0 repl) β
+ the project's print breadcrumbs make most boot failures
+ diagnosable in one round trip.
+
+
+
+
+
+ );
+}
+
+function CTA({ icon, title, body, href }: { icon: React.ReactNode; title: string; body: string; href: string }) {
+ return (
+
+
+ {icon}
+
+
+ {title}
+ {body}
+
+
+ );
+}
diff --git a/oreo.elixpo/src/app/globals.css b/oreo.elixpo/src/app/globals.css
new file mode 100644
index 0000000..488651d
--- /dev/null
+++ b/oreo.elixpo/src/app/globals.css
@@ -0,0 +1,133 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ββ Design tokens βββββββββββββββββββββββββββββββββββββββββββββββββββ
+ *
+ * Two parallel naming schemes coexist on the site:
+ *
+ * β’ Brand tokens (`bg`, `card`, `primary` β¦) β declared in
+ * theme.js, re-exported via tailwind.config.ts, used by everything
+ * we wrote by hand.
+ *
+ * β’ shadcn-style semantic tokens (`--background`, `--foreground`,
+ * `--primary`, `--border` β¦) β needed by the canvas-wave hero
+ * and any drop-in shadcn component we add later. They're populated
+ * from the same brand palette so visually they always agree.
+ *
+ * Adding a new colour: update theme.js first, then mirror into the
+ * shadcn variable here if a third-party component needs it.
+ */
+:root {
+ color-scheme: dark;
+ --font-display: "Pixelify Sans", "JetBrains Mono", ui-sans-serif, system-ui,
+ sans-serif;
+
+ /* shadcn-compatible semantic tokens (kept in oklch-adjacent hex
+ so we can paste in shadcn components without rewriting them) */
+ --background: #0F0C1C;
+ --foreground: #F5E6DC;
+ --card: #1C1A2E;
+ --card-foreground: #F5E6DC;
+ --popover: #1F1B33;
+ --popover-foreground: #F5E6DC;
+ --primary: #FF5D68;
+ --primary-foreground: #0F0C1C;
+ --secondary: #A29BFE;
+ --secondary-foreground: #0F0C1C;
+ --muted: #1F1B33;
+ --muted-foreground: #8A8294;
+ --accent: #3DDC97;
+ --accent-foreground: #0F0C1C;
+ --destructive: #FF5D68;
+ --destructive-foreground:#0F0C1C;
+ --border: #2A2640;
+ --input: #2A2640;
+ --ring: #FF5D68;
+ --radius: 0.65rem;
+}
+
+html, body {
+ background: var(--background);
+ color: var(--foreground);
+ font-family: theme("fontFamily.sans");
+ font-feature-settings: "ss01" 1, "ss02" 1, "cv11" 1;
+ -webkit-font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+/* Subtle ambient gradient layer β sits behind everything so the page
+ feels alive even before any component animates. Kept very faint so
+ it never fights real content. */
+body::before {
+ content: "";
+ position: fixed;
+ inset: 0;
+ background:
+ radial-gradient(60% 50% at 25% 15%, rgba(255, 93, 104, 0.10), transparent 60%),
+ radial-gradient(50% 45% at 80% 90%, rgba(162, 155, 254, 0.08), transparent 60%),
+ radial-gradient(40% 35% at 90% 10%, rgba(61, 220, 151, 0.06), transparent 60%);
+ pointer-events: none;
+ z-index: -1;
+}
+
+::selection {
+ background: theme("colors.primary");
+ color: theme("colors.bg");
+}
+
+/* ββ Reusable components βββββββββββββββββββββββββββββββββββββββββββ */
+@layer components {
+ .container-page {
+ @apply mx-auto w-full max-w-6xl px-6 sm:px-8;
+ }
+ .btn-primary {
+ @apply inline-flex items-center gap-2 rounded-md bg-primary px-5 py-2.5
+ font-semibold text-bg transition-colors hover:bg-primary-dim;
+ }
+ .btn-ghost {
+ @apply inline-flex items-center gap-2 rounded-md border border-border
+ px-5 py-2.5 text-text transition-colors hover:bg-card;
+ }
+ .chip {
+ @apply inline-flex items-center gap-1.5 rounded-pill bg-card-sub px-2.5 py-1
+ text-xs uppercase tracking-wider text-text-dim;
+ }
+ .card-surface {
+ @apply rounded-lg border border-border bg-card transition-colors;
+ }
+ /* Conic-gradient border treatment used on hero CTAs and accent
+ cards β produces a thin animated luminous edge. Pairs with the
+ wave hero for visual continuity. */
+ .ring-glow {
+ position: relative;
+ isolation: isolate;
+ }
+ .ring-glow::before {
+ content: "";
+ position: absolute;
+ inset: -1px;
+ border-radius: inherit;
+ padding: 1px;
+ background: conic-gradient(
+ from var(--ring-angle, 0deg),
+ theme("colors.primary"),
+ theme("colors.lilac"),
+ theme("colors.teal"),
+ theme("colors.primary")
+ );
+ -webkit-mask:
+ linear-gradient(#000 0 0) content-box,
+ linear-gradient(#000 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ pointer-events: none;
+ opacity: 0.7;
+ animation: spin 8s linear infinite;
+ }
+ @keyframes spin {
+ to { --ring-angle: 360deg; transform: rotate(360deg); }
+ }
+}
+
+html { overscroll-behavior: none; }
diff --git a/oreo.elixpo/src/app/hacks/page.tsx b/oreo.elixpo/src/app/hacks/page.tsx
new file mode 100644
index 0000000..9e36a8a
--- /dev/null
+++ b/oreo.elixpo/src/app/hacks/page.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Reveal, fadeUp, staggerContainer } from "@/components/MotionWrap";
+import { Clock, Wrench, ExternalLink } from "lucide-react";
+
+type Hack = {
+ slug: string;
+ title: string;
+ body: string;
+ difficulty: "beginner" | "intermediate" | "advanced";
+ mins: number;
+ href: string;
+};
+
+const HACKS: Hack[] = [
+ { slug: "github-handle", title: "Set Your GitHub Handle",
+ body: "Edit secrets.py so the badge app pulls your live GitHub profile stats.",
+ difficulty: "beginner", mins: 5,
+ href: "https://github.com/elixpo/oreo/blob/main/docs/hacks/github-handle.md" },
+ { slug: "gallery-photo", title: "Add Your Photo to Gallery",
+ body: "Drop a PNG into apps/gallery/assets/raw/, deploy, watch it land in the carousel.",
+ difficulty: "beginner", mins: 8,
+ href: "https://github.com/elixpo/oreo/blob/main/docs/hacks/gallery-photo.md" },
+ { slug: "commits-brick", title: "Add the Commits Brick-Breaker",
+ body: "Install the Commits arcade so you can bat merge balls through a wall of green squares.",
+ difficulty: "beginner", mins: 15,
+ href: "https://github.com/elixpo/oreo/blob/main/docs/hacks/commits-brick.md" },
+ { slug: "custom-theme", title: "Theme the OS in your colours",
+ body: "Edit oreoOS/theme.py to retint the whole UI in a single commit.",
+ difficulty: "beginner", mins: 10,
+ href: "https://github.com/elixpo/oreo/blob/main/docs/hacks/custom-theme.md" },
+ { slug: "ir-quest", title: "Build an IR-Quest beacon",
+ body: "Wire a TSOP38 to a spare ESP and beam tokens to nearby badges.",
+ difficulty: "intermediate", mins: 30,
+ href: "https://github.com/elixpo/oreo/blob/main/docs/hacks/ir-quest.md" },
+ { slug: "imu-tilt", title: "Tilt-to-scroll any app",
+ body: "Pull the MPU6050 accel readings into your update() and remap UP/DOWN.",
+ difficulty: "intermediate", mins: 25,
+ href: "https://github.com/elixpo/oreo/blob/main/docs/hacks/imu-tilt.md" },
+ { slug: "custom-app", title: "Ship your first app",
+ body: "manifest.json + main.py β 30 lines, lands in the drawer.",
+ difficulty: "intermediate", mins: 45,
+ href: "https://github.com/elixpo/oreo/blob/main/CONTRIBUTING.md#building-an-app" },
+ { slug: "ota-self-host", title: "Self-host OTA updates",
+ body: "Point the OTA module at your own GitHub fork β ship private builds to your badge.",
+ difficulty: "advanced", mins: 60,
+ href: "https://github.com/elixpo/oreo/blob/main/docs/hacks/ota-fork.md" },
+ { slug: "pcb-design", title: "Spin a PCB",
+ body: "Use the KiCad project in /docs/hardware/ as a starting point for a v2 board.",
+ difficulty: "advanced", mins: 240,
+ href: "https://github.com/elixpo/oreo/tree/main/docs/hardware" },
+];
+
+const DIFF_TINT = {
+ beginner: { bg: "bg-teal/10", text: "text-teal", border: "border-teal/30" },
+ intermediate: { bg: "bg-gold/10", text: "text-gold", border: "border-gold/30" },
+ advanced: { bg: "bg-lilac/10", text: "text-lilac", border: "border-lilac/30" },
+};
+
+export default function HacksPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Customize Your Badge.{" "}
+
+ Make it weird.
+
+
+
+ Step-by-step recipes for retinting the OS, writing your first
+ app, or wiring extra sensors. Each hack is one Markdown file
+ on the repo β copy, paste, deploy.
+
+
+
+
+ {HACKS.map((h, i) => {
+ const t = DIFF_TINT[h.difficulty];
+ return (
+
+
+ {h.title}
+
+ {h.difficulty}
+
+
+ {h.body}
+
+
+
+ );
+ })}
+
+
+
+
+ Got an idea for a hack?
+
+ Write it up as Markdown, drop it in docs/hacks/,
+ send a PR. We'll surface it here.
+
+
+ Open hacks folder on GitHub
+
+
+
+
+
+ );
+}
diff --git a/oreo.elixpo/src/app/layout.tsx b/oreo.elixpo/src/app/layout.tsx
new file mode 100644
index 0000000..69bf92a
--- /dev/null
+++ b/oreo.elixpo/src/app/layout.tsx
@@ -0,0 +1,98 @@
+import type { Metadata, Viewport } from "next";
+import "./globals.css";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import PageTransition from "@/components/PageTransition";
+
+// SEO + social-card metadata. The og-banner.png referenced here is the
+// same artwork used as the README banner on the main repo β generated
+// from `prompts/site_assets.md` and dropped into /public/og-banner.png.
+// Keeping a single image for both surfaces means a contributor only
+// has to refresh one file when the brand shifts.
+
+const SITE_TITLE = "OreoOS β a Python OS in a pocket-sized badge";
+const SITE_DESCRIPTION =
+ "Open hardware. Open firmware. 20+ apps, on-device store, OTA over " +
+ "WiFi, AirDrop-style file transfer. MicroPython on ESP32-S3.";
+const SITE_URL = "https://oreo.elixpo.com";
+const OG_IMAGE = "/og-banner.png";
+
+export const metadata: Metadata = {
+ metadataBase: new URL(SITE_URL),
+ title: {
+ default: SITE_TITLE,
+ template: "%s Β· Oreo",
+ },
+ description: SITE_DESCRIPTION,
+ applicationName: "OreoOS",
+ authors: [{ name: "Elixpo", url: "https://github.com/elixpo" }],
+ generator: "Next.js",
+ keywords: [
+ "OreoOS", "Elixpo Badge", "conference badge", "MicroPython",
+ "ESP32-S3", "open hardware", "open source OS", "app store",
+ "file transfer", "BLE", "WiFi", "IR quest",
+ ],
+ // Per-route titles override `default` via Next's metadata API;
+ // robots gets allow-everywhere here because the site is fully public.
+ robots: {
+ index: true, follow: true,
+ googleBot: { index: true, follow: true, "max-image-preview": "large" },
+ },
+ openGraph: {
+ title: SITE_TITLE,
+ description: SITE_DESCRIPTION,
+ url: SITE_URL,
+ siteName: "Oreo",
+ type: "website",
+ locale: "en_US",
+ images: [{
+ url: OG_IMAGE,
+ width: 1200,
+ height: 630,
+ alt: "Oreo Badge β a Python OS in a pocket-sized conference badge",
+ }],
+ },
+ twitter: {
+ card: "summary_large_image",
+ title: SITE_TITLE,
+ description: SITE_DESCRIPTION,
+ images: [OG_IMAGE],
+ },
+ // Icons β pulled from the same mascot.png the header + footer use,
+ // so the favicon/apple-touch-icon look identical to the in-page
+ // wordmark. Pixel-art works at every favicon size; Cloudflare Pages
+ // serves the file verbatim from /public.
+ icons: {
+ icon: [{ url: "/favicon.png", type: "image/png" }],
+ shortcut: "/favicon.png",
+ apple: "/favicon.png",
+ },
+ formatDetection: { telephone: false, email: false, address: false },
+};
+
+// Next 14 moved themeColor / colorScheme out of `metadata` into a
+// separate `viewport` export β they're per-render rather than static.
+export const viewport: Viewport = {
+ themeColor: "#0F0C1C",
+ colorScheme: "dark",
+ width: "device-width",
+ initialScale: 1,
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+
+ {children}
+
+
+
+
+ );
+}
diff --git a/oreo.elixpo/src/app/not-found.tsx b/oreo.elixpo/src/app/not-found.tsx
new file mode 100644
index 0000000..fce5789
--- /dev/null
+++ b/oreo.elixpo/src/app/not-found.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import Link from "next/link";
+import { motion } from "framer-motion";
+import { Home, Github, Compass } from "lucide-react";
+
+/* 404 β uses the same wave gradient palette as the hero so a misroute
+ * still feels like part of the product. No canvas here because we want
+ * the page to be as cheap to render as possible (some misrouted bots
+ * will hammer it). */
+
+export default function NotFound() {
+ return (
+
+ {/* Soft gradient glows behind the content */}
+
+
+
+
+
+
+
+ 404 / not found
+
+
+
+ Off the map.
+
+
+
+ The route you tapped doesn't exist on this build of the site.
+ Maybe it's an IR-Quest beacon hidden in a different timeline β
+ or maybe a typo. Head back home and we'll forget this ever
+ happened.
+
+
+
+
+
+ );
+}
diff --git a/oreo.elixpo/src/app/page.tsx b/oreo.elixpo/src/app/page.tsx
new file mode 100644
index 0000000..bdabc6c
--- /dev/null
+++ b/oreo.elixpo/src/app/page.tsx
@@ -0,0 +1,132 @@
+import Link from "next/link";
+import { Cpu, Wifi, Bluetooth, Code2 } from "lucide-react";
+import { Reveal } from "@/components/MotionWrap";
+import AppCard from "@/components/AppCard";
+import WavesHero from "@/components/WavesHero";
+import { PRELOADED } from "@/data/apps";
+
+const FEATURES = [
+ {
+ Icon: Cpu,
+ title: "Python all the way down",
+ body:
+ "MicroPython on ESP32-S3. Apps are a manifest.json + main.py β write one in ~30 lines and it shows up in the drawer.",
+ },
+ {
+ Icon: Wifi,
+ title: "AirDrop, the open-hardware way",
+ body:
+ "WiFi-based file transfer with on-badge approval. 6-digit code, beacon handshake, RGB565 conversion in the browser.",
+ },
+ {
+ Icon: Bluetooth,
+ title: "Peer presence (soon)",
+ body:
+ "BT will return for proximity-based features β IR-quest assists, sync gestures, badge-to-badge nudges.",
+ },
+];
+
+export default function Home() {
+ return (
+ <>
+ {/* ββ Reactive canvas hero βββββββββββββββββββββββββββββββββββββββ */}
+
+
+
+ Three things make the badge feel alive
+
+
+
+ {FEATURES.map((f, i) => (
+
+
+
+ {f.title}
+
+ {f.body}
+
+
+
+
+ ))}
+
+
+
+ {/* ββ APPS CAROUSEL ββββββββββββββββββββββββββββββββββββββββββββββ */}
+
+
+
+
+
+ Preloaded apps
+
+
+ Ship with the badge. Customise or replace any of them.
+
+
+
+ All apps β
+
+
+
+
+
+ {PRELOADED.map((app, i) => (
+
+
+ {/* ββ CTA ββββββββββββββββββββββββββββββββββββββββββββββββββββββββ */}
+
+
+
+
+
+ Build your own apps.
+ It's a manifest and a main.py.
+
+
+ The badge ships with 20 first-party apps and an on-device store
+ that pulls from GitHub at runtime. Fork the repo, drop your app
+ in apps_market/
+ {" "}and submit a PR β the next person to refresh the store will see it.
+
+
+
+ Read the contributing guide
+
+
+ Setup the hardware
+
+
+
+
+
+
+ );
+}
diff --git a/oreo.elixpo/src/app/upload/page.tsx b/oreo.elixpo/src/app/upload/page.tsx
new file mode 100644
index 0000000..11058bc
--- /dev/null
+++ b/oreo.elixpo/src/app/upload/page.tsx
@@ -0,0 +1,438 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import {
+ ArrowRight, ShieldCheck, Wifi, RefreshCw, Lock, Loader2,
+} from "lucide-react";
+import { Reveal } from "@/components/MotionWrap";
+
+/* The /upload route is the public on-ramp to the badge's local file
+ * transfer flow. Browsers block HTTPS β HTTP fetches (mixed content),
+ * and the badge speaks HTTP only β so this page collects the 6-char
+ * code shown on the badge, then hands the user off to
+ * http://oreo.local/?prefill= in a new tab where the badge's
+ * own gated upload page picks up from there.
+ *
+ * The UI mirrors the badge's local page: six independent code cells
+ * with auto-advance, paste-friendly behaviour, and ambiguous-character
+ * filtering. The Open button sits below the cells (not beside them)
+ * so the card stays balanced at every viewport width.
+ */
+
+const CODE_LEN = 6;
+const CODE_CELL_OK = /^[A-HJ-NP-Z2-9]$/i; // single char accepted into a cell
+
+// mDNS on ESP32 MicroPython is unreliable in the wild (depends on IDF
+// build flags, router multicast forwarding, and the client OS's
+// happiness with multicast DNS). We default the badge address to
+// `oreo.local` for the lucky case but let the user type the raw IP
+// the badge prints on its own Send Files screen as a fallback.
+const DEFAULT_HOST = "oreo.local";
+
+// Accept hostnames OR bare IPv4 addresses with an optional port.
+// Examples that match: `oreo.local`, `192.168.1.42`, `192.168.1.42:80`.
+const ADDR_OK = /^[A-Za-z0-9.-]+(:\d{1,5})?$/;
+
+// The badge derives a short hash from its current rotating code and
+// expects `?prefill=` (NOT the raw code) on the local page.
+// Keeping the raw code out of the URL means it never lands in browser
+// history, referer headers, or shared screenshots. The hash is the
+// first 4 bytes of SHA-256(code.toUpperCase()), hex-encoded β matches
+// `code_hash()` in oreoOS/http_server.py exactly.
+async function codeHash(code: string): Promise {
+ const buf = new TextEncoder().encode(code.toUpperCase());
+ const hash = await crypto.subtle.digest("SHA-256", buf);
+ return Array.from(new Uint8Array(hash).slice(0, 4))
+ .map((b) => b.toString(16).padStart(2, "0"))
+ .join("");
+}
+
+export default function UploadPage() {
+ const [cells, setCells] = useState(() => Array(CODE_LEN).fill(""));
+ const [error, setError] = useState("");
+ const [phase, setPhase] = useState<"enter" | "loading" | "handoff">("enter");
+ const [host, setHost] = useState(DEFAULT_HOST);
+ const [hash, setHash] = useState("");
+ const refs = useRef>([]);
+ refs.current = refs.current.slice(0, CODE_LEN);
+
+ // Pull a last-used host from localStorage on first render so a
+ // returning user doesn't have to re-type their badge's IP every
+ // session. Only restored on the client; SSR sees DEFAULT_HOST.
+ useEffect(() => {
+ try {
+ const saved = localStorage.getItem("oreo-badge-host");
+ if (saved) setHost(saved);
+ } catch { /* private mode β fine */ }
+ }, []);
+
+ const code = cells.join("").toUpperCase();
+ const complete = code.length === CODE_LEN;
+ const hostValid = ADDR_OK.test(host.trim());
+
+ // Focus the first cell on mount.
+ useEffect(() => { refs.current[0]?.focus(); }, []);
+
+ // Pre-compute the hash whenever the code is complete so the click
+ // handler can use it synchronously β crypto.subtle.digest is async,
+ // and awaiting it inside handoff() would break the user-gesture
+ // flag that popup blockers rely on.
+ useEffect(() => {
+ if (!complete) { setHash(""); return; }
+ let cancelled = false;
+ codeHash(code).then((h) => { if (!cancelled) setHash(h); });
+ return () => { cancelled = true; };
+ }, [code, complete]);
+
+ function setCell(i: number, raw: string) {
+ const v = (raw || "").toUpperCase();
+
+ // Paste of multiple chars β distribute across cells starting at i.
+ if (v.length > 1) {
+ const parts = v.replace(/[^A-HJ-NP-Z2-9]/g, "").split("").slice(0, CODE_LEN - i);
+ const next = [...cells];
+ parts.forEach((c, k) => { next[i + k] = c; });
+ setCells(next);
+ const last = Math.min(CODE_LEN - 1, i + parts.length);
+ refs.current[last]?.focus();
+ setError("");
+ return;
+ }
+
+ // Single char β filter then auto-advance.
+ if (v && !CODE_CELL_OK.test(v)) return;
+ const next = [...cells];
+ next[i] = v;
+ setCells(next);
+ if (v && i < CODE_LEN - 1) refs.current[i + 1]?.focus();
+ setError("");
+ }
+
+ function onKeyDown(i: number, e: React.KeyboardEvent) {
+ if (e.key === "Backspace" && !cells[i] && i > 0) refs.current[i - 1]?.focus();
+ if (e.key === "ArrowLeft" && i > 0) refs.current[i - 1]?.focus();
+ if (e.key === "ArrowRight" && i < CODE_LEN - 1) refs.current[i + 1]?.focus();
+ if (e.key === "Enter" && complete) handoff();
+ }
+
+ // Computed once per render so the visible "Open transfer" link
+ // ALSO points at the live URL β that way if window.open is
+ // blocked, the user can right-click β "open in new tab" on the
+ // anchor we render.
+ const rawHost = host.trim();
+ const safeHost = ADDR_OK.test(rawHost) ? rawHost : DEFAULT_HOST;
+ const targetUrl = `http://${safeHost}/?prefill=${encodeURIComponent(hash)}`;
+
+ function handoff(e?: React.SyntheticEvent) {
+ // Prevent the default form submit so the page doesn't reload
+ // (which would otherwise wipe our state mid-handoff).
+ e?.preventDefault();
+ if (!complete) {
+ setError(`Code must be ${CODE_LEN} characters.`);
+ return;
+ }
+ if (!hash) {
+ // Hash hasn't finished computing yet β extremely unlikely since
+ // SHA-256 of 6 bytes is sub-millisecond, but guard anyway so we
+ // never open a URL with an empty prefill.
+ setError("Hashing code⦠try again.");
+ return;
+ }
+ const h = host.trim() || DEFAULT_HOST;
+ if (!ADDR_OK.test(h)) {
+ setError(`"${h}" isn't a valid hostname or IP.`);
+ return;
+ }
+ try { localStorage.setItem("oreo-badge-host", h); } catch {}
+
+ // Canonicalize the destination URL from a strictly validated host.
+ const normalizedHost = host.trim().toLowerCase();
+ if (!ADDR_OK.test(normalizedHost)) {
+ setError("Enter a valid badge address (hostname or IPv4, optional :port).");
+ return;
+ }
+ const url = new URL(`http://${normalizedHost}/`);
+ url.searchParams.set("prefill", hashHex);
+ const safeTargetUrl = url.toString();
+
+ // ββ Fire window.open SYNCHRONOUSLY inside the user gesture ββ
+ // Wrapping it in setTimeout (even with a tiny delay) makes
+ // browsers treat the call as scripted and block the popup. We
+ // open the new tab first; the "loading" UI is rendered after.
+ const opened = window.open(safeTargetUrl, "_blank", "noopener,noreferrer");
+ if (!opened) {
+ // Popup blocked anyway. Fall back to a top-level navigation β
+ // this loses the website tab but at least gets the user to
+ // the badge. They can use the browser's back button to return.
+ window.location.href = safeTargetUrl;
+ return;
+ }
+ // Show the loading state while the new tab is spinning up the
+ // FTP-style transfer on the badge. After a brief delay we clear
+ // the code cells and return to the empty entry form so the user
+ // can start a fresh transfer without manually wiping the input.
+ setPhase("loading");
+ window.setTimeout(() => {
+ setCells(Array(CODE_LEN).fill(""));
+ setHash("");
+ setError("");
+ setPhase("enter");
+ // Re-focus the first cell so the user can immediately type the
+ // next code if they're sending a second file.
+ refs.current[0]?.focus();
+ }, 1400);
+ }
+
+ return (
+
+
+
+
+
+ Send to your badge.
+
No accounts. No cloud.
+
+
+ Open Settings β WiFi β Send files on
+ the badge. Enter the 6-character code shown there to start a
+ gated, same-network transfer. Files never leave your LAN.
+
+
+
+
+
+
+ {phase === "enter" ? (
+
+
+
+ {/* Six code cells β independent inputs so the user can't
+ fat-finger more than one char per slot. Auto-advance
+ + paste-distribute logic lives in setCell(). */}
+
+ {cells.map((v, i) => (
+ { refs.current[i] = el; }}
+ value={v}
+ onChange={(e) => setCell(i, e.target.value)}
+ onKeyDown={(e) => onKeyDown(i, e)}
+ onFocus={(e) => e.target.select()}
+ maxLength={2}
+ inputMode="text"
+ autoComplete="off"
+ spellCheck={false}
+ aria-label={`Code character ${i + 1}`}
+ className="h-16 w-12 rounded-md border border-border bg-bg
+ text-center font-mono text-3xl font-semibold uppercase
+ text-primary outline-none transition-colors
+ placeholder:text-muted-deep
+ focus:border-primary focus:ring-2 focus:ring-primary/30
+ sm:h-20 sm:w-14 sm:text-4xl"
+ />
+ ))}
+
+
+ {/* Helper / error line β fixed-height so the layout
+ doesn't jump as the message changes. */}
+
+ {error ? (
+
+ {error}
+
+ ) : (
+
+ Six characters Β· skips ambiguous shapes (no 0/O/1/I/L)
+
+ )}
+
+
+ {/* Badge address. Default `oreo.local` works on networks
+ where multicast DNS resolves; otherwise the user
+ types the IP printed on the badge's Send Files page. */}
+
+
+ { setHost(e.target.value); setError(""); }}
+ spellCheck={false}
+ autoComplete="off"
+ autoCapitalize="off"
+ inputMode="url"
+ placeholder="oreo.local"
+ className={`mx-auto mt-2 block w-full max-w-xs rounded-md
+ border bg-bg px-3 py-2.5 text-center
+ font-mono text-base text-text outline-none
+ transition-colors placeholder:text-muted-deep
+ ${hostValid
+ ? "border-border focus:border-primary/70"
+ : "border-primary/50 focus:border-primary"}`}
+ />
+
+ Default oreo.local works
+ on networks where mDNS resolves. Otherwise type the IP
+ shown on the badge's Send Files page (e.g.{" "}
+ 192.168.1.42).
+
+
+
+
+
+ {/* Backup link β visible only after the form is valid.
+ Lets the user right-click β "open in new tab" if the
+ Submit button's window.open got blocked by their
+ browser (most common on iOS Safari + Firefox
+ strict-popup-blocking modes). */}
+ {complete && hostValid && hash && (
+
+ Button blocked?{" "}
+
+ Open this link manually
+ .
+
+ )}
+
+ {/* Three info tiles below β explain the model without
+ making the user read paragraphs. */}
+
+
+ ) : phase === "loading" ? (
+
+
+
+ Opening local page for FTP transferβ¦
+
+
+ A new tab is loading{" "}
+ http://{host || DEFAULT_HOST}.
+ Approve the session on the badge to start sending files.
+
+
+
+ ) : (
+
+
+
+ Transfer tab opened.
+
+
+ Make sure your device is on the same WiFi as the badge,
+ approve the session, and pick a file.
+
+
+
+ )}
+
+
+
+
+ Why two pages?
+
+ Browsers block HTTPS pages from talking to plain-HTTP
+ endpoints. Cloudflare serves this page over HTTPS; the
+ badge speaks HTTP on your LAN. The handoff puts you on
+ the badge's own page so the upload itself stays on the
+ local network β no cloud, no proxy, no metadata leakage.
+
+
+
+
+
+ );
+}
+
+function Tile({
+ Icon, title, body,
+}: {
+ Icon: React.ComponentType<{ className?: string }>;
+ title: string;
+ body: string;
+}) {
+ return (
+
+ {title}
+ {body}
+
+ );
+}
diff --git a/oreo.elixpo/src/components/AppCard.tsx b/oreo.elixpo/src/components/AppCard.tsx
new file mode 100644
index 0000000..22a26c3
--- /dev/null
+++ b/oreo.elixpo/src/components/AppCard.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { motion } from "framer-motion";
+import {
+ Contact, Bird, Image as ImageIcon, Worm, Compass, BookOpen, Car,
+ Cloud, GitCommit, User, Gamepad2, HardDrive, Palette, PawPrint,
+ Cpu, Wifi, Bluetooth, RefreshCw, Settings, ArrowUpRight,
+ type LucideIcon,
+} from "lucide-react";
+import type { AppEntry, AppIconId } from "@/data/apps";
+
+const ICONS: Record = {
+ Contact, Bird, Image: ImageIcon, Worm, Compass, BookOpen, Car, Cloud,
+ GitCommit, User, Gamepad2, HardDrive, Palette, PawPrint, Cpu, Wifi,
+ Bluetooth, RefreshCw, Settings,
+};
+
+type Tint = { ring: string; glow: string; text: string };
+
+const TINT: Record = {
+ primary: { ring: "ring-primary/40", glow: "shadow-[0_0_36px_rgba(255,93,104,0.22)]", text: "text-primary" },
+ teal: { ring: "ring-teal/40", glow: "shadow-[0_0_36px_rgba(61,220,151,0.20)]", text: "text-teal" },
+ gold: { ring: "ring-gold/40", glow: "shadow-[0_0_36px_rgba(255,209,102,0.18)]",text: "text-gold" },
+ lilac: { ring: "ring-lilac/40", glow: "shadow-[0_0_36px_rgba(162,155,254,0.20)]",text: "text-lilac" },
+};
+
+/* Icon tile reused by AppCard + the detail-page related strip β keeps
+ * the "real PNG with letter fallback" logic in one place. */
+function IconTile({
+ app, tint, Icon,
+}: {
+ app: AppEntry;
+ tint: Tint;
+ Icon: LucideIcon;
+}) {
+ const [pngOk, setPngOk] = useState(true);
+ return (
+
+ {app.pngIcon && pngOk ? (
+ // eslint-disable-next-line @next/next/no-img-element
+ setPngOk(false)}
+ className="h-full w-full object-contain"
+ style={{ imageRendering: "pixelated" }}
+ loading="lazy"
+ decoding="async"
+ />
+ ) : (
+
+
+
+
+ {app.name}
+
+ {app.category}
+
+
+ {app.blurb}
+
+
+
+ );
+}
diff --git a/oreo.elixpo/src/components/BadgeMockup.tsx b/oreo.elixpo/src/components/BadgeMockup.tsx
new file mode 100644
index 0000000..31060be
--- /dev/null
+++ b/oreo.elixpo/src/components/BadgeMockup.tsx
@@ -0,0 +1,147 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+/* SVG mockup of the actual hardware β portrait PCB with a screen
+ * top-60%, two rows of four tactile buttons below, IR transceiver at
+ * the top edge, four corner LEDs, and a USB-C cutout on the bottom.
+ *
+ * Pure SVG so the whole thing scales sharply at any resolution, and
+ * the animation is just ``/`framer-motion` over the on-screen
+ * app-tile grid β costs ~0% CPU after the initial paint.
+ *
+ * Drawing units are tuned so 1 SVG unit β 1 mm on the PCB; final
+ * artwork lives at viewBox="0 0 100 160".
+ */
+
+const APP_TILES: { x: number; y: number; tint: string; glyph: string }[] = [
+ { x: 6, y: 4, tint: "#FF5D68", glyph: "B" },
+ { x: 28, y: 4, tint: "#3DDC97", glyph: "S" },
+ { x: 50, y: 4, tint: "#FFD166", glyph: "G" },
+ { x: 72, y: 4, tint: "#A29BFE", glyph: "F" },
+ { x: 6, y: 26, tint: "#A29BFE", glyph: "R" },
+ { x: 28, y: 26, tint: "#FF5D68", glyph: "Q" },
+ { x: 50, y: 26, tint: "#3DDC97", glyph: "W" },
+ { x: 72, y: 26, tint: "#FFD166", glyph: "C" },
+];
+
+const BUTTON_LABELS = ["HOME", "A", "B", "C", "UP", "DOWN", "LEFT", "RIGHT"];
+
+export default function BadgeMockup({ className = "" }: { className?: string }) {
+ return (
+
+ );
+}
diff --git a/oreo.elixpo/src/components/Footer.tsx b/oreo.elixpo/src/components/Footer.tsx
new file mode 100644
index 0000000..6bf3c8d
--- /dev/null
+++ b/oreo.elixpo/src/components/Footer.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import Link from "next/link";
+import { Github, Heart, Star, GitFork } from "lucide-react";
+import { useGithubStats } from "@/lib/useGithubStats";
+
+function fmtCount(n: number | null): string {
+ if (n === null) return "β";
+ if (n >= 10_000) return (n / 1000).toFixed(1) + "k";
+ if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, "") + "k";
+ return String(n);
+}
+
+// One column row. `external` is optional; absent β internal Link.
+type FooterLink = { label: string; href: string; external?: boolean };
+type FooterColumn = { title: string; links: FooterLink[] };
+
+const COLUMNS: FooterColumn[] = [
+ {
+ title: "Project",
+ links: [
+ { label: "Get Started", href: "/get-started/" },
+ { label: "Badge", href: "/badge/" },
+ { label: "Apps", href: "/apps/" },
+ { label: "Hacks", href: "/hacks/" },
+ { label: "Contribute", href: "/contribute/" },
+ { label: "Upload", href: "/upload/" },
+ ],
+ },
+ {
+ title: "Source",
+ links: [
+ { label: "OreoOS", href: "https://github.com/elixpo/oreo", external: true },
+ { label: "Hardware", href: "https://github.com/elixpo/oreo/tree/main/docs", external: true },
+ { label: "Contributing", href: "https://github.com/elixpo/oreo/blob/main/CONTRIBUTING.md", external: true },
+ { label: "License", href: "https://github.com/elixpo/oreo/blob/main/LICENSE", external: true },
+ ],
+ },
+ {
+ title: "Community",
+ links: [
+ { label: "Contributors", href: "https://github.com/elixpo/oreo/graphs/contributors", external: true },
+ { label: "Issues", href: "https://github.com/elixpo/oreo/issues", external: true },
+ { label: "Changelog", href: "https://github.com/elixpo/oreo/blob/main/CHANGELOG.md", external: true },
+ { label: "Code of Conduct", href: "https://github.com/elixpo/oreo/blob/main/CODE_OF_CONDUCT.md", external: true },
+ ],
+ },
+];
+
+export default function Footer() {
+ const { stars, forks } = useGithubStats();
+ return (
+
+ );
+}
diff --git a/oreo.elixpo/src/components/Header.tsx b/oreo.elixpo/src/components/Header.tsx
new file mode 100644
index 0000000..98414bb
--- /dev/null
+++ b/oreo.elixpo/src/components/Header.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion } from "framer-motion";
+import {
+ Github, Star, GitFork, Home, Rocket, Cpu, LayoutGrid,
+ Wrench, GitPullRequest,
+} from "lucide-react";
+import { useGithubStats } from "@/lib/useGithubStats";
+
+const NAV = [
+ { href: "/", label: "Home", Icon: Home },
+ { href: "/get-started/",label: "Get Started", Icon: Rocket },
+ { href: "/badge/", label: "Badge", Icon: Cpu },
+ { href: "/apps/", label: "Apps", Icon: LayoutGrid },
+ { href: "/hacks/", label: "Hacks", Icon: Wrench },
+ { href: "/contribute/", label: "Contribute", Icon: GitPullRequest },
+];
+
+function fmtCount(n: number | null): string {
+ if (n === null) return "β";
+ if (n >= 10_000) return (n / 1000).toFixed(1) + "k";
+ if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, "") + "k";
+ return String(n);
+}
+
+export default function Header() {
+ const pathname = usePathname();
+ const { stars, forks } = useGithubStats();
+
+ return (
+
+
+ {/* Logo + wordmark β uses the real OreoOS mascot asset, the
+ same pixel-art panda baked into assets/sprites/optimized/
+ on the badge. Pixelated rendering keeps the chunky LCD
+ artwork crisp at 36 px. */}
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+ Oreo
+
+
+ {/* Centre nav with per-item icons */}
+
+
+ {/* Live GitHub stats chip */}
+
+
+ );
+}
diff --git a/oreo.elixpo/src/components/MarkdownView.tsx b/oreo.elixpo/src/components/MarkdownView.tsx
new file mode 100644
index 0000000..8eb6110
--- /dev/null
+++ b/oreo.elixpo/src/components/MarkdownView.tsx
@@ -0,0 +1,223 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
+/* Hand-rolled minimal Markdown β HTML renderer.
+ *
+ * Why not react-markdown / marked / micromark?
+ * β’ ~30-80 KB gzipped β too much for what's effectively a
+ * CONTRIBUTING.md panel that renders once on one route.
+ * β’ Most of the bundle is feature-completeness we don't need
+ * (math, mermaid, smart quotes, footnotes).
+ *
+ * Supported subset (what CONTRIBUTING.md actually uses):
+ * β’ # / ## / ### / #### headings
+ * β’ bullet lists (`- ` and `* `)
+ * β’ numbered lists (`1. `)
+ * β’ bold `**`, italic `*`, inline code `` ` ``
+ * β’ fenced code blocks ``` lang
+ * β’ blockquotes (`> `)
+ * β’ links `[text](url)`
+ * β’ horizontal rules `---`
+ * β’ paragraphs
+ *
+ * Everything else falls through as a plain paragraph β safe because
+ * we sanitise raw HTML in the source on the way in.
+ */
+
+function escapeHtml(s: string): string {
+ return s
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+}
+
+function renderInline(s: string): string {
+ let out = escapeHtml(s);
+ // inline code first so its content isn't re-interpreted
+ out = out.replace(/`([^`]+)`/g,
+ '$1');
+ // bold (avoid clobbering italics underneath)
+ out = out.replace(/\*\*([^*]+)\*\*/g, "$1");
+ // italic
+ out = out.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1$2");
+ // links β only inline form, [text](url)
+ out = out.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g,
+ '$1');
+ return out;
+}
+
+function renderMarkdown(src: string): string {
+ const lines = src.replace(/\r\n/g, "\n").split("\n");
+ const out: string[] = [];
+ let inCode = false;
+ let codeLang = "";
+ let codeBuf: string[] = [];
+ let listType: "ul" | "ol" | null = null;
+ let para: string[] = [];
+
+ const closeList = () => {
+ if (listType) { out.push(``); listType = null; }
+ };
+ const flushPara = () => {
+ if (para.length) {
+ out.push(`${renderInline(para.join(" "))}
`);
+ para = [];
+ }
+ };
+
+ for (let raw of lines) {
+ // ββ fenced code blocks ββ
+ const fence = raw.match(/^```(\w*)\s*$/);
+ if (fence) {
+ if (inCode) {
+ out.push(
+ `` +
+ escapeHtml(codeBuf.join("\n")) +
+ `
`,
+ );
+ inCode = false;
+ codeBuf = [];
+ codeLang = "";
+ } else {
+ flushPara(); closeList();
+ inCode = true;
+ codeLang = fence[1] || "";
+ }
+ continue;
+ }
+ if (inCode) {
+ codeBuf.push(raw);
+ continue;
+ }
+
+ // ββ horizontal rule ββ
+ if (/^---+\s*$/.test(raw)) {
+ flushPara(); closeList();
+ out.push(`
`);
+ continue;
+ }
+
+ // ββ headings ββ
+ const h = raw.match(/^(#{1,4})\s+(.*)$/);
+ if (h) {
+ flushPara(); closeList();
+ const lvl = h[1].length;
+ const text = renderInline(h[2]);
+ const klass = {
+ 1: "mt-10 mb-4 font-display text-4xl tracking-tight text-text",
+ 2: "mt-10 mb-3 font-display text-2xl tracking-tight text-text",
+ 3: "mt-7 mb-2 font-display text-xl tracking-tight text-text",
+ 4: "mt-5 mb-2 font-display text-lg tracking-tight text-text-dim",
+ }[lvl as 1 | 2 | 3 | 4];
+ out.push(`${text} `);
+ continue;
+ }
+
+ // ββ blockquote ββ
+ const bq = raw.match(/^>\s?(.*)$/);
+ if (bq) {
+ flushPara(); closeList();
+ out.push(
+ `${renderInline(bq[1])}
`,
+ );
+ continue;
+ }
+
+ // ββ list items ββ
+ const ul = raw.match(/^[-*]\s+(.*)$/);
+ const ol = raw.match(/^\d+\.\s+(.*)$/);
+ if (ul || ol) {
+ flushPara();
+ const want: "ul" | "ol" = ul ? "ul" : "ol";
+ if (listType !== want) {
+ closeList();
+ const klass = want === "ul"
+ ? "my-3 list-disc space-y-1 pl-6 text-text-dim marker:text-primary/70"
+ : "my-3 list-decimal space-y-1 pl-6 text-text-dim marker:text-primary/70";
+ out.push(`<${want} class="${klass}">`);
+ listType = want;
+ }
+ out.push(`${renderInline((ul ?? ol)![1])} `);
+ continue;
+ }
+
+ // ββ blank line β paragraph break ββ
+ if (!raw.trim()) {
+ flushPara(); closeList();
+ continue;
+ }
+
+ // ββ plain paragraph text (join consecutive lines) ββ
+ para.push(raw);
+ }
+ flushPara(); closeList();
+ if (inCode) {
+ // Unclosed fence β best-effort flush so we don't drop content.
+ out.push(
+ `` +
+ escapeHtml(codeBuf.join("\n")) +
+ `
`,
+ );
+ }
+ return out.join("\n");
+}
+
+export default function MarkdownView({
+ url, fallback,
+}: {
+ url: string;
+ fallback?: string;
+}) {
+ const [html, setHtml] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ let aborted = false;
+ (async () => {
+ try {
+ const r = await fetch(url);
+ if (!r.ok) throw new Error("HTTP " + r.status);
+ const md = await r.text();
+ if (!aborted) setHtml(renderMarkdown(md));
+ } catch (e) {
+ if (!aborted) setError((e as Error).message);
+ }
+ })();
+ return () => { aborted = true; };
+ }, [url]);
+
+ if (error) {
+ return (
+
+ Couldn't load {url}: {error}.
+ {fallback && {fallback}
}
+
+ );
+ }
+ if (html === null) {
+ return (
+
+ {[...Array(8)].map((_, i) => (
+
+ ))}
+
+ );
+ }
+ return (
+
+ {children}
+
+ );
+}
diff --git a/oreo.elixpo/src/components/PageTransition.tsx b/oreo.elixpo/src/components/PageTransition.tsx
new file mode 100644
index 0000000..cf693e5
--- /dev/null
+++ b/oreo.elixpo/src/components/PageTransition.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+
+/* Lightweight route-change reveal. Just an opacity + y-slide on the
+ * contents, keyed on pathname so Next remounts the wrapper
+ * each navigation. Deliberately minimal β Framer's `AnimatePresence`
+ * with `mode="wait"` adds a perceptible delay before the new page
+ * paints, which is the opposite of the "no-lag" feel the user wants.
+ *
+ * This is the simplest pattern that still gives the site some
+ * "transition feel" without ever blocking the new page from showing.
+ */
+
+export default function PageTransition({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ const pathname = usePathname();
+ return (
+
+ {children}
+
+ );
+}
diff --git a/oreo.elixpo/src/components/WavesHero.tsx b/oreo.elixpo/src/components/WavesHero.tsx
new file mode 100644
index 0000000..1c642ae
--- /dev/null
+++ b/oreo.elixpo/src/components/WavesHero.tsx
@@ -0,0 +1,390 @@
+"use client";
+
+/*
+ * Reactive canvas hero β adapted from the shadcn `glowy-waves-hero`
+ * reference dropped in plan.md.
+ *
+ * Differences from the original:
+ * β’ Uses our brand palette + copy instead of shadcn's `--primary` etc.
+ * (theme tokens are still read from CSS vars so future theme tweaks
+ * reflow automatically).
+ * β’ Replaces the shadcn