feat: Archipelago demo stack (lightweight)

2026-03-17 02:14:04 +00:00
commit 6b15143b8a
534 changed files with 75115 additions and 0 deletions
--- a/neode-ui/ONBOARDING_FLOW.md
+++ b/neode-ui/ONBOARDING_FLOW.md
@@ -0,0 +1,310 @@
+# Neode Onboarding Flow
+
+## Complete User Journey (Vue 3)
+
+### 1. **Splash Screen** (First Visit Only)
+**Duration**: ~23 seconds (skippable)
+
+#### Sequence:
+1. **Alien Terminal Intro** (0-16s)
+   - Line 1: "Initializing Neode OS..." (typing animation)
+   - Line 2: "Connecting to distributed network..."
+   - Line 3: "Loading sovereignty protocols..."
+   - Line 4: "System ready."
+   - Green `$` prompts, white text
+   - Skip button in bottom right
+
+2. **Welcome Message** (16-19s)
+   - "Welcome to Neode" with typing animation
+   - Fades in after terminal lines complete
+
+3. **Neode Logo** (19-23s)
+   - Large "NEODE" SVG logo
+   - Background image fades in
+   - Smooth transition
+
+#### Local Storage:
+- Sets: `neode_intro_seen = '1'`
+- Next visit: Skip splash entirely
+
+---
+
+### 2. **Onboarding Intro** 
+**Route**: `/onboarding/intro`
+
+#### Content:
+- **Neode Logo** at top (large SVG)
+- **Heading**: "Welcome to Neode"
+- **Subheading**: "Your personal server for a sovereign digital life"
+- **Features**:
+  - 🔒 Self-Sovereign: Own your data and applications completely
+  - ⚡ Powerful: Run any service with one click
+  - 🛡️ Private: Tor-first architecture for maximum privacy
+- **Button**: "Get Started →"
+
+#### Action:
+- Navigates to `/onboarding/options`
+
+---
+
+### 3. **Onboarding Options**
+**Route**: `/onboarding/options`
+
+#### Content:
+- **Neode Logo** at top
+- **Heading**: "Choose Your Setup"
+- **Subheading**: "How would you like to get started?"
+
+#### Three Glass Cards:
+1. **Fresh Start**
+   - Icon: Plus symbol
+   - Description: Set up a new server from scratch
+   
+2. **Restore Backup**
+   - Icon: Upload symbol
+   - Description: Restore from a previous backup
+   
+3. **Connect Existing**
+   - Icon: Link symbol
+   - Description: Connect to an existing Neode server
+
+#### Selection:
+- Cards have hover effects
+- Selected card: Brighter, glowing border
+- **Button**: "Continue →" (enabled when option selected)
+
+#### Action:
+- Sets: `neode_onboarding_complete = '1'`
+- Navigates to `/login`
+
+---
+
+### 4. **Login Page**
+**Route**: `/login`
+
+#### Content:
+- **Neode Logo** floating above card
+- **Glass Card** with:
+  - Title: "Welcome to Neode"
+  - Password input field
+  - Login button
+  - "Forgot password?" link
+
+#### Auth Flow:
+- Submit → Pinia store `login()` action
+- Success → Navigate to `/dashboard`
+- Error → Show error message in red glass banner
+
+---
+
+### 5. **Dashboard**
+**Route**: `/dashboard`
+
+#### Layout:
+- **Sidebar** (glass):
+  - Neode logo at top
+  - Server name + version
+  - Navigation menu (Home, Apps, Marketplace, Server, Settings)
+  - Logout button at bottom
+
+- **Main Content**:
+  - Dynamic based on route (Home, Apps, etc.)
+  - Connection status banner (if offline)
+  - Glass cards throughout
+
+---
+
+## Flow Diagram
+
+```
+┌─────────────────┐
+│  First Visit?   │
+└────────┬────────┘
+         │
+    ┌────▼────┐
+    │   Yes   │──────┐
+    └─────────┘      │
+         │           │
+    ┌────▼────────────▼────┐
+    │  Splash Screen       │ (23s, skippable)
+    │  - Alien Intro       │
+    │  - Welcome Message   │
+    │  - Neode Logo        │
+    └──────────┬───────────┘
+               │
+         [Sets: neode_intro_seen]
+               │
+    ┌──────────▼───────────┐
+    │ Onboarding Intro     │
+    │ - Logo               │
+    │ - Features           │
+    │ - Get Started        │
+    └──────────┬───────────┘
+               │
+    ┌──────────▼───────────┐
+    │ Onboarding Options   │
+    │ - Fresh Start        │
+    │ - Restore            │
+    │ - Connect            │
+    └──────────┬───────────┘
+               │
+         [Sets: neode_onboarding_complete]
+               │
+    ┌──────────▼───────────┐
+    │    Login Page        │
+    │ - Password Input     │
+    └──────────┬───────────┘
+               │
+         [Authenticate]
+               │
+    ┌──────────▼───────────┐
+    │     Dashboard        │
+    │ - Sidebar + Content  │
+    └──────────────────────┘
+```
+
+---
+
+## Returning User Flow
+
+### Second Visit Onwards:
+
+```
+Open App
+   │
+   ├─ neode_intro_seen? YES
+   ├─ neode_onboarding_complete? YES
+   │
+   └──> Login Page (direct)
+```
+
+- **No splash screen**
+- **No onboarding**
+- Goes straight to `/login`
+
+---
+
+## Local Storage Keys
+
+| Key | Value | Set By | Effect |
+|-----|-------|--------|--------|
+| `neode_intro_seen` | `'1'` | SplashScreen.vue | Skip splash on return |
+| `neode_onboarding_complete` | `'1'` | OnboardingOptions.vue | Skip onboarding on return |
+
+---
+
+## Branding Consistency
+
+### Neode Logo Usage
+
+**SVG Logo** (`/assets/img/logo-large.svg`):
+- ✅ Splash screen (large, centered)
+- ✅ Onboarding intro (medium, top)
+- ✅ Onboarding options (medium, top)
+- ✅ Login page (floating above card)
+- ✅ Dashboard sidebar (small, top left)
+
+**Icon** (`/assets/img/icon.png`):
+- ✅ Browser favicon
+- ✅ Apple touch icon
+
+### No Start9 Branding
+All Start9 references removed. Pure Neode branding throughout.
+
+---
+
+## Design Consistency
+
+### Glassmorphism
+Every screen uses:
+- Glass cards with `backdrop-filter: blur(18px)`
+- Black background with transparency
+- White borders with 18% opacity
+- Drop shadows for depth
+
+### Colors
+- Background: `rgba(0, 0, 0, 0.35)`
+- Text: White with opacity (96%, 80%, 70%)
+- Accents: Green `#00ff41` (terminal prompts)
+- Borders: `rgba(255, 255, 255, 0.18)`
+
+### Typography
+- Primary: Avenir Next
+- Mono: Courier New (terminal/splash)
+- Size scale: 4px grid system
+
+---
+
+## Testing the Flow
+
+### Test as New User:
+```bash
+# Clear storage
+localStorage.clear()
+
+# Reload
+location.reload()
+```
+
+**Expected**:
+1. Splash → Alien intro → Welcome → Logo
+2. Onboarding intro → Features
+3. Onboarding options → Select option
+4. Login → Enter password
+5. Dashboard → Home screen
+
+### Test as Returning User:
+```bash
+# Storage should have:
+localStorage.getItem('neode_intro_seen') // '1'
+localStorage.getItem('neode_onboarding_complete') // '1'
+
+# Reload
+location.reload()
+```
+
+**Expected**:
+1. Login (direct, no splash/onboarding)
+2. Dashboard → Home screen
+
+---
+
+## Skip Behaviors
+
+### Skip Splash
+- Button: "Skip Intro" (bottom right)
+- Effect: Jumps to logo display
+- Still navigates to onboarding intro
+
+### Skip Onboarding
+User can navigate directly to `/login` if they know the URL.
+
+---
+
+## Future Enhancements
+
+- [ ] Different flows for each setup option (Fresh/Restore/Connect)
+- [ ] Progress indicators during setup
+- [ ] Animated transitions between onboarding steps
+- [ ] Video/GIF demos on feature cards
+- [ ] Personalization (server name input during onboarding)
+- [ ] Setup wizard for advanced users
+
+---
+
+## Key Files
+
+| File | Purpose |
+|------|---------|
+| `src/App.vue` | Manages splash display, handles completion |
+| `src/components/SplashScreen.vue` | Alien intro, animations, skip button |
+| `src/views/OnboardingIntro.vue` | Welcome screen, feature highlights |
+| `src/views/OnboardingOptions.vue` | Setup method selection |
+| `src/views/Login.vue` | Authentication |
+| `src/views/Dashboard.vue` | Main app layout |
+| `src/router/index.ts` | Route definitions, auth guards |
+
+---
+
+**Complete, cohesive, and beautiful!** 🎨⚡
+