# 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!** 🎨⚡