assets/web/
├── src/
│   ├── index.html        # Source HTML (readable)
│   └── stratumiops.svg   # Logo for landing page
├── index.html            # Minified/Production HTML
├── stratumiops.svg       # Logo for landing page
└── README.md             # This file

Files

`src/index.html` - Source Version

Purpose: Development and maintenance
Content:
- Full formatting and indentation
- Inline CSS and JavaScript
- Bilingual (English/Spanish) content
- Language-aware dynamic switching
- Infrastructure operations showcase
- Technology stack display
- Core components grid

Use for:

Editing content
Understanding structure
Version control
Making translation updates

`index.html` - Production Version

Purpose: Served to browsers (fast loading)
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

`stratumiops.svg` - Logo

Purpose: Landing page branding
Source: Copy of ../logos/stratumiops-h.svg (horizontal logo)
Dimensions: 1200×300px
Features: Animated particles, flows, and processor

How to Use

Development

Edit src/index.html:

# 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:

# Using Perl minification script
cd /path/to/stratumiops
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:

# 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 and Grid layouts
Media queries for mobile

✅ Performance

Inline CSS (no separate requests)
Inline JavaScript (no blocking external scripts)
Minimal dependencies (no frameworks)
Optimized minified size

✅ Bilingual

English and Spanish
LocalStorage persistence
Data attributes for translations
Dynamic language switching

✅ Modern CSS

CSS Gradients
Animations (fadeInUp)
Hover effects
Grid and Flexbox layouts

✅ Styling

StratumIOps color scheme (Indigo/Cyan)
Gradient backgrounds
Inter font family
Smooth transitions

Content Sections

Hero - Title, tagline, logo, version badge
Problems - 4 infrastructure problems StratumIOps solves
How It Works - Feature overview (Configuration as Code, GitOps, Multi-Cloud)
Technology Stack - Tech badges (Rust, Nickel, KCL, Terraform, K8s, etc.)
Core Components - Component showcase (12 components)
CTA - Call-to-action button
Footer - Credits and tagline

Translations

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

<!-- English/Spanish example -->
<span data-en="Infrastructure" data-es="Infraestructura">Infrastructure</span>

The JavaScript automatically updates based on selected language.

Color Scheme

StratumIOps branding colors:

Primary Indigo: #6366F1 - Main brand color
Secondary Indigo: #4F46E5 - Gradients and depth
Cyan Accent: #22D3EE - Highlights and active states
Cyan Dark: #06B6D4 - Processor elements
Slate: #94a3b8 - Secondary text
Dark Background: #0F172A - Main background

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

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

File Sizes

Source and production versions:

File	Type
`src/index.html`	Source (readable, formatted)
`index.html`	Production (minified, optimized)
`stratumiops.svg`	4-6KB (animated horizontal logo)

Version Information

Last Updated: 2026-01-22
Version: 0.1.0
Format: HTML5 + CSS3 + ES6
Compatibility: All modern browsers
Languages: English, Spanish

Technology Focus

StratumIOps landing page emphasizes:

🏗️ Infrastructure as Code
🔄 GitOps workflows
☁️ Multi-cloud orchestration
📋 Configuration management
🔒 Policy enforcement
📊 Observability and monitoring

Last Updated: 2026-01-22 Version: 0.1.0 (matches StratumIOps release)

README.md Unescape Escape

StratumIOps Web Assets

Directory Structure