provisioning/assets/web/README.md

# Provisioning Web Assets

Web-based landing page and static content for Provisioning.

## Directory Structure

```text
assets/web/
├── src/
│   ├── index.html                  # Source HTML (readable, 38.3KB)
│   └── architecture-diagram.html   # Architecture diagram (readable, 28.1KB)
├── index.html                      # Minified landing page (19.8KB)
├── architecture-diagram.html       # Minified architecture (21.3KB)
├── provisioning.svg                # Logo (12KB)
├── logo-text.svg                   # Logo text (14KB)
├── minify.sh                        # Minification script
└── README.md                        # This file
```

## Files

### `src/index.html` - Source Version

- **Purpose**: Development and maintenance
- **Size**: 38.1KB (uncompressed)
- **Content**:
  - Full formatting and indentation
  - Inline CSS and JavaScript
  - Bilingual (English/Spanish) content
  - Language-aware dynamic switching
  - Core capabilities showcase
  - Technology stack display
  - 13 Platform services showcase

**Use for:**
- Editing content
- Understanding structure
- Version control
- Making translations updates

### `index.html` - Production Version

- **Purpose**: Served to browsers (fast loading)
- **Size**: 19.8KB (48% compression)
- **Optimizations**:
  - Removed all comments
  - Compressed CSS (removed spaces, combined rules)
  - Minified JavaScript (single line)
  - Removed whitespace between tags
  - Preserved all functionality

**Use for:**
- Production web server
- CDN distribution
- Browser caching
- Fast load times

### `architecture-diagram.html` - Architecture Visualization

- **Purpose**: Interactive system architecture diagram
- **Size**: 28.1KB source → 21.3KB minified (24% compression)
- **Content**:
  - Visual representation of Provisioning platform
  - Component relationships and data flows
  - Interactive SVG diagram
  - Dark theme with animations

**Use for:**
- Understanding system design
- Architecture documentation
- Technical presentations
- Linked from landing page via "🏗️ ARCH" button

## How to Use

### Development

Edit `src/index.html`:

```bash
# Edit source file
nano provisioning/assets/web/src/index.html

# Regenerate minified version (script below)
```

### Update Minified Versions

When you update any source file in `src/`, regenerate all minified versions:

```bash
# Minify both index.html and architecture-diagram.html
./provisioning/assets/web/minify.sh
```

This script automatically:
- Minifies `src/index.html` → `index.html`
- Minifies `src/architecture-diagram.html` → `architecture-diagram.html`
- Shows compression statistics for each file
- Validates that source files exist before processing
- Stops on any errors

### Deployment

Serve `index.html` from your web server:

```bash

# Using Rust
cargo install static-web-server
static-web-server -d provisioning/assets/web/

# Using Python
python3 -m http.server --directory provisioning/assets/web

# Using Node.js
npx http-server provisioning/assets/web

# Using nginx
# Point root to provisioning/assets/web/
# Serve index.html as default
```

## Features

✅ **Responsive Design**
- Mobile-first approach
- Flexbox layouts
- Media queries for mobile

✅ **Performance**
- Inline CSS (no separate requests)
- Inline JavaScript (no blocking external scripts)
- Minimal dependencies (no frameworks)
- 19.6KB minified size

✅ **Bilingual**
- English and Spanish
- LocalStorage persistence
- Data attributes for translations
- Dynamic language switching

✅ **Modern CSS**
- CSS Gradients
- Animations (fadeInUp)
- Hover effects
- Grid layouts

✅ **Styling**
- Provisioning color scheme
- Gradient backgrounds
- Monospace font (JetBrains Mono)
- Smooth transitions

## Content Sections

1. **Hero** - Title, tagline, logo (provisioning.svg + logo-text.svg)
2. **Core Capabilities** - 4 key capabilities
3. **How It Works** - Feature overview
4. **Technology Stack** - Tech badges
5. **Platform Services** - 13 core services:
   - Orchestrator (Workflow engine)
   - ControlCenter (CEDAR + AUTH)
   - ControlCenter-UI (Dashboard interface)
   - Installer (TUI + CLI + Unattended)
   - MCP-Server (RAG + AI services)
   - API-Gateway (REST routing)
   - OCI-Registry (Extension distribution)
   - Extension-Registry (Extension catalog)
   - SecretumVault (PQC vault)
   - TypeDialog (Type-safe config)
   - Daemon-CLI (Service management)
   - Monitoring (Prometheus + Grafana)
   - CoreDNS (Service discovery)
6. **CTA** - Call-to-action button
7. **Footer** - Credits and links

## Translations

All text content is bilingual. Edit data attributes in `src/index.html`:

```html
<!-- English/Spanish example -->
<span data-en="Hello" data-es="Hola">Hello</span>
```

The JavaScript automatically updates based on selected language.

## Maintenance

- Source edits go in `src/index.html`
- Regenerate `index.html` when source changes
- Both files are versioned in git
- Keep them in sync

## Git Workflow

```bash
# Edit source
git add provisioning/assets/web/src/index.html
git add provisioning/assets/web/index.html
git commit -m "Update landing page content"
git push
```

## Compression Statistics

|File|Source|Minified|Compression|Saved|
|---|---|---|---|---|
|`index.html`|38.3KB|19.8KB|48%|18.5KB|
|`architecture-diagram.html`|28.1KB|21.3KB|24%|6.8KB|
|**TOTAL**|**66.4KB**|**41.1KB**|**38%**|**25.3KB**|

---

**Last Updated**: 2026-02-10
**Version**: 1.0.0 (matches Provisioning v3.5.0)