344 lines
11 KiB
HTML
344 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Provisioning Poster - Documentation Hub</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||
|
|
line-height: 1.6;
|
||
|
|
color: #333;
|
||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 20px;
|
||
|
|
padding: 2rem;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header h1 {
|
||
|
|
font-size: 3rem;
|
||
|
|
font-weight: 700;
|
||
|
|
color: white;
|
||
|
|
margin-bottom: 0.5rem;
|
||
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.header p {
|
||
|
|
font-size: 1.2rem;
|
||
|
|
color: rgba(255, 255, 255, 0.9);
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stats {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 2rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat {
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-number {
|
||
|
|
font-size: 2rem;
|
||
|
|
font-weight: 700;
|
||
|
|
display: block;
|
||
|
|
color: #00d4ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stat-label {
|
||
|
|
font-size: 0.9rem;
|
||
|
|
opacity: 0.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.docs-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
|
|
gap: 2rem;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-card {
|
||
|
|
background: rgba(255, 255, 255, 0.95);
|
||
|
|
border-radius: 15px;
|
||
|
|
padding: 2rem;
|
||
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-card:hover {
|
||
|
|
transform: translateY(-5px);
|
||
|
|
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-card .icon {
|
||
|
|
font-size: 3rem;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-card h3 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
color: #2c3e50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-card p {
|
||
|
|
color: #5a6c7d;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
font-size: 0.95rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-meta {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: #7f8c8d;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-type {
|
||
|
|
background: #ecf0f1;
|
||
|
|
padding: 0.2rem 0.5rem;
|
||
|
|
border-radius: 5px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-links {
|
||
|
|
display: flex;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 0.7rem 1.2rem;
|
||
|
|
text-decoration: none;
|
||
|
|
border-radius: 8px;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary {
|
||
|
|
background: linear-gradient(135deg, #00d4ff, #0099cc);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-primary:hover {
|
||
|
|
background: linear-gradient(135deg, #0099cc, #0066aa);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary {
|
||
|
|
background: #ecf0f1;
|
||
|
|
color: #2c3e50;
|
||
|
|
border: 2px solid #bdc3c7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-secondary:hover {
|
||
|
|
background: #d5dbdb;
|
||
|
|
border-color: #95a5a6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
text-align: center;
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
backdrop-filter: blur(10px);
|
||
|
|
border-radius: 15px;
|
||
|
|
padding: 2rem;
|
||
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer h3 {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
color: #00d4ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tech-stack {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 1rem;
|
||
|
|
margin-top: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tech-badge {
|
||
|
|
background: rgba(0, 212, 255, 0.2);
|
||
|
|
color: white;
|
||
|
|
padding: 0.3rem 0.8rem;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
border: 1px solid rgba(0, 212, 255, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.container {
|
||
|
|
padding: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.header h1 {
|
||
|
|
font-size: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stats {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.docs-grid {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
.doc-links {
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="header">
|
||
|
|
<h1>📚 Page Build System</h1>
|
||
|
|
<p>Complete Documentation Hub for Web Page Optimization</p>
|
||
|
|
<div class="stats">
|
||
|
|
<div class="stat">
|
||
|
|
<span class="stat-number">42%</span>
|
||
|
|
<span class="stat-label">Size Reduction</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat">
|
||
|
|
<span class="stat-number">70KB</span>
|
||
|
|
<span class="stat-label">Total Optimized</span>
|
||
|
|
</div>
|
||
|
|
<div class="stat">
|
||
|
|
<span class="stat-number">A+</span>
|
||
|
|
<span class="stat-label">Performance Score</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="docs-grid">
|
||
|
|
<!-- Quick Start Guide -->
|
||
|
|
<div class="doc-card">
|
||
|
|
<span class="icon">🚀</span>
|
||
|
|
<div class="doc-meta">
|
||
|
|
<span class="doc-type">Quick Start</span>
|
||
|
|
<span>~15 min read</span>
|
||
|
|
</div>
|
||
|
|
<h3>HOWTO Guide</h3>
|
||
|
|
<p>Step-by-step practical guide to get started with the page build system. Covers development setup, build commands, and basic optimization workflows for any web page.</p>
|
||
|
|
<div class="doc-links">
|
||
|
|
<a href="HOWTO.md" class="btn btn-primary">Read Guide</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Interactive Guide -->
|
||
|
|
<div class="doc-card">
|
||
|
|
<span class="icon">🎮</span>
|
||
|
|
<div class="doc-meta">
|
||
|
|
<span class="doc-type">Interactive</span>
|
||
|
|
<span>Browser-based</span>
|
||
|
|
</div>
|
||
|
|
<h3>Interactive HOWTO</h3>
|
||
|
|
<p>Browser-based interactive guide with live examples, collapsible sections, and integrated terminal commands. Perfect for hands-on learning and quick reference.</p>
|
||
|
|
<div class="doc-links">
|
||
|
|
<a href="howto/interactive-guide.html" class="btn btn-primary">Open Interactive</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Optimization Tutorial -->
|
||
|
|
<div class="doc-card">
|
||
|
|
<span class="icon">⚡</span>
|
||
|
|
<div class="doc-meta">
|
||
|
|
<span class="doc-type">Deep Dive</span>
|
||
|
|
<span>~45 min tutorial</span>
|
||
|
|
</div>
|
||
|
|
<h3>Page Optimization Tutorial</h3>
|
||
|
|
<p>Complete walkthrough of the optimization process from 120KB to 70KB. Covers CSS modularization, SVG strategies, critical CSS inlining, and performance analysis for any web page.</p>
|
||
|
|
<div class="doc-links">
|
||
|
|
<a href="tutorials/poster-optimization-tutorial.md" class="btn btn-primary">Start Tutorial</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Troubleshooting -->
|
||
|
|
<div class="doc-card">
|
||
|
|
<span class="icon">🔧</span>
|
||
|
|
<div class="doc-meta">
|
||
|
|
<span class="doc-type">Reference</span>
|
||
|
|
<span>Problem Solving</span>
|
||
|
|
</div>
|
||
|
|
<h3>Troubleshooting Guide</h3>
|
||
|
|
<p>Comprehensive troubleshooting guide for common build system issues. Includes diagnostic tools, error resolution, and system recovery procedures.</p>
|
||
|
|
<div class="doc-links">
|
||
|
|
<a href="troubleshooting.md" class="btn btn-primary">Get Help</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Deployment Guide -->
|
||
|
|
<div class="doc-card">
|
||
|
|
<span class="icon">🚢</span>
|
||
|
|
<div class="doc-meta">
|
||
|
|
<span class="doc-type">Production</span>
|
||
|
|
<span>~30 min setup</span>
|
||
|
|
</div>
|
||
|
|
<h3>Deployment Walkthrough</h3>
|
||
|
|
<p>Production deployment guide covering server setup, SSL configuration, automated deployment scripts, and monitoring setup for optimized web pages in live environments.</p>
|
||
|
|
<div class="doc-links">
|
||
|
|
<a href="deployment-walkthrough.md" class="btn btn-primary">Deploy Now</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Build System Overview -->
|
||
|
|
<div class="doc-card">
|
||
|
|
<span class="icon">🏗️</span>
|
||
|
|
<div class="doc-meta">
|
||
|
|
<span class="doc-type">Technical</span>
|
||
|
|
<span>Architecture</span>
|
||
|
|
</div>
|
||
|
|
<h3>Build System Architecture</h3>
|
||
|
|
<p>Technical overview of the Nushell-based build system architecture, modular CSS approach, SVG optimization strategies, and performance optimization techniques.</p>
|
||
|
|
<div class="doc-links">
|
||
|
|
<a href="../scripts/dev.nu" class="btn btn-secondary">View Scripts</a>
|
||
|
|
<a href="../config/build.config.nu" class="btn btn-secondary">View Config</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<h3>🛠️ Built With Modern Tools</h3>
|
||
|
|
<p>High-performance page build system powered by Nushell scripting and optimized for web performance</p>
|
||
|
|
<div class="tech-stack">
|
||
|
|
<span class="tech-badge">Nushell 0.105.2</span>
|
||
|
|
<span class="tech-badge">CSS Modules</span>
|
||
|
|
<span class="tech-badge">SVG Optimization</span>
|
||
|
|
<span class="tech-badge">Critical CSS</span>
|
||
|
|
<span class="tech-badge">Auto Deployment</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|