Add Nebula Shell v0 prototype and redesign

Introduce a working v0 Nebula Shell prototype (Tauri frontend) and redesign docs. Adds a complete frontend under src/ (views: home, lock, library, settings, overlays), core adapters (input, nav, passkey, router, state), global styles and shell guidelines, and view-specific HTML/CSS/JS. Update README with prototype notes, install/run/build instructions and controller testing tips. Update package.json to add dev/build scripts and add @nebulaproject/core as a dependency. Also include a detailed REDESIGN_DOCUMENTATION.md describing the Xbox-inspired horizontal dashboard, component patterns, and developer notes.
This commit is contained in:
2026-02-15 22:52:35 +13:00
parent 0102d06bba
commit 89eedf5522
31 changed files with 9242 additions and 42 deletions
+33 -25
View File
@@ -2,38 +2,46 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="/styles/theme.css" />
<link rel="stylesheet" href="/styles/base.css" />
<link rel="stylesheet" href="/styles/components.css" />
<link rel="stylesheet" href="/views/lock/lock.css" />
<link rel="stylesheet" href="/views/home/home.css" />
<link rel="stylesheet" href="/views/settings/settings.css" />
<link rel="stylesheet" href="/views/library/library.css" />
<link rel="stylesheet" href="/views/overlays/powerMenu.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tauri App</title>
<title>Nebula Shell</title>
<script type="module" src="/main.js" defer></script>
</head>
<body>
<main class="container">
<h1>Welcome to Tauri</h1>
<div id="nebula-background" aria-hidden="true">
<div class="nebula-layer gradient"></div>
<div class="nebula-layer starfield"></div>
<div class="nebula-layer fog"></div>
<div class="nebula-layer vignette"></div>
</div>
<div class="shell-chrome" aria-hidden="true">
<div class="shell-depth-blur"></div>
</div>
<main id="app" class="app-shell"></main>
<div id="overlay-root"></div>
<footer class="app-footer" id="app-footer"></footer>
<div class="row">
<a href="https://tauri.app" target="_blank">
<img src="/assets/tauri.svg" class="logo tauri" alt="Tauri logo" />
</a>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"
target="_blank"
>
<img
src="/assets/javascript.svg"
class="logo vanilla"
alt="JavaScript logo"
/>
</a>
<template id="global-hints-template">
<div class="hint-row">
<span class="hint"><span data-glyph="accept"></span> Select</span>
<span class="hint"><span data-glyph="back"></span> Back</span>
<span class="hint"><span data-glyph="menu"></span> Menu</span>
</div>
<p>Click on the Tauri logo to learn more about the framework</p>
</template>
<form class="row" id="greet-form">
<input id="greet-input" placeholder="Enter a name..." />
<button type="submit">Greet</button>
</form>
<p id="greet-msg"></p>
</main>
<template id="minimal-hints-template">
<div class="hint-row">
<span class="hint"><span data-glyph="accept"></span> Open</span>
<span class="hint"><span data-glyph="menu"></span> Power Menu</span>
</div>
</template>
</body>
</html>