Vapora/assets/web/README.md

# Vapora Web Assets

Web-based landing page and static content for Vapora.

## Directory Structure

```text
assets/web/
├── src/
│   └── index.html        # Source HTML (readable, 26KB)
├── index.html            # Minified/Production HTML (18KB)
└── README.md             # This file
```

## Files

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

- **Purpose**: Development and maintenance
- **Size**: 26KB (uncompressed)
- **Content**:
  - Full formatting and indentation
  - Inline CSS and JavaScript
  - Bilingual (English/Spanish) content
  - Language-aware dynamic switching
  - Interactive agent showcase
  - Technology stack display

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

### `index.html` - Production Version

- **Purpose**: Served to browsers (fast loading)
- **Size**: 18KB (32% 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

## How to Use

### Development

Edit `src/index.html`:

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

# Regenerate minified version (script below)
```

### Update Minified Version

When you update `src/index.html`, regenerate `index.html`:

```bash
# Using the minification script (Perl)
perl -e '
use strict;
use warnings;

open(my $fh, "<", "assets/web/src/index.html") or die $!;
my $content = do { local $/; <$fh> };
close($fh);

# Remove comments
$content =~ s/<!--.*?-->//gs;

# Compress whitespace in style tags
$content =~ s/(<style[^>]*>)(.*?)(<\/style>)/
  my $before = $1;
  my $style = $2;
  my $after = $3;
  $style =~ s{\/\*.*?\*\/}{}gs;
  $style =~ s{\s+}{ }gs;
  $style =~ s{\s*([{}:;,>+~])\s*}{$1}gs;
  $before . $style . $after;
/gies;

# Compress whitespace in script tags
$content =~ s/(<script[^>]*>)(.*?)(<\/script>)/
  my $before = $1;
  my $script = $2;
  my $after = $3;
  $script =~ s{\/\/.*$}{}gm;
  $script =~ s{\s+}{ }gs;
  $script =~ s{\s*([{}();,])\s*}{$1}gs;
  $before . $script . $after;
/gies;

# Remove whitespace between tags
$content =~ s/>\s+</></gs;
$content =~ s/\s+/ /gs;
$content =~ s/^\s+|\s+$//g;

open(my $out, ">", "assets/web/index.html") or die $!;
print $out $content;
close($out);

print "✅ Minified version created\n";
'
```

### Deployment

Serve `index.html` from your web server:

```bash

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

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

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

# Using nginx
# Point root to 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)
- 18KB 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**
- Vapora color scheme
- Gradient backgrounds
- Monospace font (JetBrains Mono)
- Smooth transitions

## Content Sections

1. **Hero** - Title, tagline, logo
2. **Problems** - 4 problems Vapora solves
3. **How It Works** - Feature overview
4. **Technology Stack** - Tech badges
5. **Available Agents** - Agent showcase (12 agents)
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 assets/web/src/index.html
git add assets/web/index.html
git commit -m "Update landing page content"
git push
```

## Compression Statistics

|File|Size|Type|
|---|---|---|
|`src/index.html`|26KB|Source (readable)|
|`index.html`|18KB|Production (minified)|
|**Compression**|**32%**|**Saved 8.8KB**|

---

**Last Updated**: 2026-01-11
**Version**: 1.2.0 (matches Vapora release)