572 lines
18 KiB
HTML
572 lines
18 KiB
HTML
|
<script>
|
||
|
|
CSSLoader.loadMultiple(['about.css']);
|
||
|
|
|
||
|
|
(async function loadAboutData() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/product');
|
||
|
|
const config = await response.json();
|
||
|
|
|
||
|
|
// Update version info
|
||
|
|
const versionEl = document.getElementById('about-version');
|
||
|
|
if (versionEl) versionEl.textContent = config.version || '6.1.0';
|
||
|
|
|
||
|
|
// Update product name
|
||
|
|
const nameEl = document.getElementById('about-product-name');
|
||
|
|
if (nameEl) nameEl.textContent = config.name || 'General Bots';
|
||
|
|
|
||
|
|
// Populate compiled features
|
||
|
|
const compiledContainer = document.getElementById('compiled-features');
|
||
|
|
if (compiledContainer && config.compiled_features) {
|
||
|
|
compiledContainer.innerHTML = config.compiled_features
|
||
|
|
.sort()
|
||
|
|
.map(f => `<span class="feature-badge enabled">${f}</span>`)
|
||
|
|
.join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Populate enabled apps
|
||
|
|
const enabledContainer = document.getElementById('enabled-apps');
|
||
|
|
if (enabledContainer && config.apps) {
|
||
|
|
enabledContainer.innerHTML = config.apps
|
||
|
|
.sort()
|
||
|
|
.map(a => `<span class="feature-badge active">${a}</span>`)
|
||
|
|
.join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Calculate disabled features
|
||
|
|
const disabledContainer = document.getElementById('disabled-features');
|
||
|
|
if (disabledContainer && config.compiled_features && config.apps) {
|
||
|
|
const compiled = new Set(config.compiled_features);
|
||
|
|
const enabled = new Set(config.apps.map(a => a.toLowerCase()));
|
||
|
|
const disabled = [...compiled].filter(f => !enabled.has(f.toLowerCase()));
|
||
|
|
|
||
|
|
if (disabled.length > 0) {
|
||
|
|
disabledContainer.innerHTML = disabled
|
||
|
|
.sort()
|
||
|
|
.map(f => `<span class="feature-badge disabled">${f}</span>`)
|
||
|
|
.join('');
|
||
|
|
} else {
|
||
|
|
disabledContainer.innerHTML = '<span class="text-muted">All compiled features are enabled</span>';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Update copyright
|
||
|
|
const copyrightEl = document.getElementById('about-copyright');
|
||
|
|
if (copyrightEl) copyrightEl.textContent = config.copyright || '© 2026 General Bots. All rights reserved.';
|
||
|
|
|
||
|
|
} catch (e) {
|
||
|
|
console.warn('Failed to load product config:', e);
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<div class="about-container">
|
||
|
|
<!-- Header with Logo and Branding -->
|
||
|
|
<header class="about-header">
|
||
|
|
<div class="about-logo">
|
||
|
|
<svg class="logo-svg" width="80" height="50" viewBox="0 0 140 80" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<!-- Left antenna -->
|
||
|
|
<line x1="5" y1="40" x2="25" y2="40"/>
|
||
|
|
<line x1="25" y1="28" x2="25" y2="52"/>
|
||
|
|
<!-- Left gear -->
|
||
|
|
<circle cx="50" cy="40" r="16"/>
|
||
|
|
<circle cx="50" cy="40" r="6"/>
|
||
|
|
<line x1="50" y1="20" x2="50" y2="26"/>
|
||
|
|
<line x1="50" y1="54" x2="50" y2="60"/>
|
||
|
|
<line x1="30" y1="40" x2="36" y2="40"/>
|
||
|
|
<line x1="64" y1="40" x2="70" y2="40"/>
|
||
|
|
<!-- Right gear -->
|
||
|
|
<circle cx="90" cy="40" r="16"/>
|
||
|
|
<circle cx="90" cy="40" r="6"/>
|
||
|
|
<line x1="90" y1="20" x2="90" y2="26"/>
|
||
|
|
<line x1="90" y1="54" x2="90" y2="60"/>
|
||
|
|
<line x1="70" y1="40" x2="76" y2="40"/>
|
||
|
|
<line x1="104" y1="40" x2="110" y2="40"/>
|
||
|
|
<!-- Right antenna -->
|
||
|
|
<line x1="115" y1="40" x2="135" y2="40"/>
|
||
|
|
<line x1="115" y1="28" x2="115" y2="52"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h1 id="about-product-name">General Bots</h1>
|
||
|
|
<p class="tagline">AI-Powered Agentic Office Suite</p>
|
||
|
|
<div class="version-badge">
|
||
|
|
<span class="version-label">Version</span>
|
||
|
|
<span id="about-version" class="version-number">6.1.0</span>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Key Information Cards -->
|
||
|
|
<div class="about-cards">
|
||
|
|
<div class="about-card">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||
|
|
<path d="M2 17l10 5 10-5"/>
|
||
|
|
<path d="M2 12l10 5 10-5"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3>Architecture</h3>
|
||
|
|
<p>Rust-based high-performance server with HTMX-powered reactive UI</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="about-card">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="3"/>
|
||
|
|
<path d="M12 1v6"/>
|
||
|
|
<path d="M12 17v6"/>
|
||
|
|
<path d="M4.22 4.22l4.24 4.24"/>
|
||
|
|
<path d="M15.54 15.54l4.24 4.24"/>
|
||
|
|
<path d="M1 12h6"/>
|
||
|
|
<path d="M17 12h6"/>
|
||
|
|
<path d="M4.22 19.78l4.24-4.24"/>
|
||
|
|
<path d="M15.54 8.46l4.24-4.24"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3>Multi-Agent AI</h3>
|
||
|
|
<p>Collaborative AI agents with specialized roles for complex task automation</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="about-card">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
|
||
|
|
<line x1="3" y1="9" x2="21" y2="9"/>
|
||
|
|
<line x1="9" y1="21" x2="9" y2="9"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3>Modular Design</h3>
|
||
|
|
<p>Feature-gated compilation for minimal binary size and resource usage</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="about-card">
|
||
|
|
<div class="card-icon">
|
||
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
|
|
<polyline points="9,12 12,15 15,9"/>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<h3>Enterprise Security</h3>
|
||
|
|
<p>RBAC, SOC 2 compliance ready, multi-tenant architecture</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Feature Matrix Section -->
|
||
|
|
<section class="feature-matrix">
|
||
|
|
<h2>Feature Matrix</h2>
|
||
|
|
|
||
|
|
<div class="feature-section">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<polyline points="20 6 9 17 4 12"/>
|
||
|
|
</svg>
|
||
|
|
Compiled Features
|
||
|
|
</h3>
|
||
|
|
<p class="section-description">Features included in this build</p>
|
||
|
|
<div id="compiled-features" class="feature-badges">
|
||
|
|
<span class="feature-badge enabled">chat</span>
|
||
|
|
<span class="feature-badge enabled">drive</span>
|
||
|
|
<span class="feature-badge enabled">tasks</span>
|
||
|
|
<span class="feature-badge enabled">automation</span>
|
||
|
|
<span class="feature-badge enabled">cache</span>
|
||
|
|
<span class="feature-badge enabled">directory</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature-section">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="10"/>
|
||
|
|
<polyline points="12 6 12 12 16 14"/>
|
||
|
|
</svg>
|
||
|
|
Enabled Apps
|
||
|
|
</h3>
|
||
|
|
<p class="section-description">Applications active for this instance</p>
|
||
|
|
<div id="enabled-apps" class="feature-badges">
|
||
|
|
<span class="feature-badge active">chat</span>
|
||
|
|
<span class="feature-badge active">drive</span>
|
||
|
|
<span class="feature-badge active">tasks</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="feature-section">
|
||
|
|
<h3>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<circle cx="12" cy="12" r="10"/>
|
||
|
|
<line x1="15" y1="9" x2="9" y2="15"/>
|
||
|
|
<line x1="9" y1="9" x2="15" y2="15"/>
|
||
|
|
</svg>
|
||
|
|
Not Compiled / Disabled
|
||
|
|
</h3>
|
||
|
|
<p class="section-description">Features not included or disabled in configuration</p>
|
||
|
|
<div id="disabled-features" class="feature-badges">
|
||
|
|
<span class="text-muted">Loading...</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Feature Dependency Tree -->
|
||
|
|
<section class="dependency-tree-section">
|
||
|
|
<h2>Feature Dependency Tree</h2>
|
||
|
|
<p class="section-description">How features relate to each other</p>
|
||
|
|
<div class="tree-container">
|
||
|
|
<img src="/suite/about/feature-tree.svg" alt="Feature Dependency Tree" class="dependency-tree-svg" onerror="this.parentElement.innerHTML='<p class=\'text-muted\'>Dependency tree not available</p>'"/>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- System Information -->
|
||
|
|
<section class="system-info">
|
||
|
|
<h2>System Information</h2>
|
||
|
|
<div class="info-grid">
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="info-label">Platform</span>
|
||
|
|
<span class="info-value">Rust + Axum + HTMX</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="info-label">Database</span>
|
||
|
|
<span class="info-value">PostgreSQL + Diesel ORM</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="info-label">Cache</span>
|
||
|
|
<span class="info-value">Redis</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="info-label">Vector DB</span>
|
||
|
|
<span class="info-value">Qdrant (optional)</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="info-label">License</span>
|
||
|
|
<span class="info-value">AGPL-3.0</span>
|
||
|
|
</div>
|
||
|
|
<div class="info-item">
|
||
|
|
<span class="info-label">Documentation</span>
|
||
|
|
<a href="https://docs.pragmatismo.com.br" target="_blank" class="info-link">docs.pragmatismo.com.br</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Links and Resources -->
|
||
|
|
<section class="resources">
|
||
|
|
<h2>Resources</h2>
|
||
|
|
<div class="resource-links">
|
||
|
|
<a href="https://github.com/GeneralBots" target="_blank" class="resource-link">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||
|
|
</svg>
|
||
|
|
GitHub
|
||
|
|
</a>
|
||
|
|
<a href="https://docs.pragmatismo.com.br" target="_blank" class="resource-link">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/>
|
||
|
|
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>
|
||
|
|
</svg>
|
||
|
|
Documentation
|
||
|
|
</a>
|
||
|
|
<a href="mailto:support@pragmatismo.cloud" class="resource-link">
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||
|
|
<polyline points="22,6 12,13 2,6"/>
|
||
|
|
</svg>
|
||
|
|
Support
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<!-- Footer -->
|
||
|
|
<footer class="about-footer">
|
||
|
|
<p id="about-copyright">© 2026 General Bots. All rights reserved.</p>
|
||
|
|
<p class="built-with">Built with ❤️ by <a href="https://pragmatismo.com.br" target="_blank">Pragmatismo</a></p>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.about-container {
|
||
|
|
max-width: 900px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-header {
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
padding: 2rem;
|
||
|
|
background: linear-gradient(135deg, var(--surface) 0%, var(--surface-hover) 100%);
|
||
|
|
border-radius: 16px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-logo {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-svg {
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-header h1 {
|
||
|
|
font-size: 2.5rem;
|
||
|
|
font-weight: 700;
|
||
|
|
margin: 0;
|
||
|
|
background: linear-gradient(135deg, var(--primary), var(--text));
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
background-clip: text;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tagline {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 1.1rem;
|
||
|
|
margin: 0.5rem 0 1.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.version-badge {
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
background: var(--primary);
|
||
|
|
color: var(--primary-contrast, #000);
|
||
|
|
border-radius: 20px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
|
||
|
|
.version-label {
|
||
|
|
opacity: 0.8;
|
||
|
|
font-size: 0.9rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.version-number {
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Cards */
|
||
|
|
.about-cards {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 1.5rem;
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-card {
|
||
|
|
padding: 1.5rem;
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 12px;
|
||
|
|
text-align: center;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-card:hover {
|
||
|
|
border-color: var(--primary);
|
||
|
|
transform: translateY(-2px);
|
||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.card-icon {
|
||
|
|
width: 48px;
|
||
|
|
height: 48px;
|
||
|
|
margin: 0 auto 1rem;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: var(--primary-light, rgba(212, 245, 5, 0.1));
|
||
|
|
border-radius: 12px;
|
||
|
|
color: var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-card h3 {
|
||
|
|
margin: 0 0 0.5rem;
|
||
|
|
font-size: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-card p {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Feature Matrix */
|
||
|
|
.feature-matrix {
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-matrix h2,
|
||
|
|
.dependency-tree-section h2,
|
||
|
|
.system-info h2,
|
||
|
|
.resources h2 {
|
||
|
|
font-size: 1.5rem;
|
||
|
|
margin-bottom: 1.5rem;
|
||
|
|
padding-bottom: 0.5rem;
|
||
|
|
border-bottom: 2px solid var(--primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-section {
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
padding: 1.5rem;
|
||
|
|
background: var(--surface);
|
||
|
|
border-radius: 12px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-section h3 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
margin: 0 0 0.5rem;
|
||
|
|
font-size: 1.1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-description {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 0.9rem;
|
||
|
|
margin: 0 0 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-badges {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-badge {
|
||
|
|
padding: 0.4rem 0.8rem;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
font-weight: 500;
|
||
|
|
font-family: monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-badge.enabled {
|
||
|
|
background: rgba(34, 197, 94, 0.15);
|
||
|
|
color: #22c55e;
|
||
|
|
border: 1px solid rgba(34, 197, 94, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-badge.active {
|
||
|
|
background: rgba(59, 130, 246, 0.15);
|
||
|
|
color: #3b82f6;
|
||
|
|
border: 1px solid rgba(59, 130, 246, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.feature-badge.disabled {
|
||
|
|
background: rgba(239, 68, 68, 0.15);
|
||
|
|
color: #ef4444;
|
||
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-muted {
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-style: italic;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Dependency Tree */
|
||
|
|
.dependency-tree-section {
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tree-container {
|
||
|
|
padding: 1.5rem;
|
||
|
|
background: var(--surface);
|
||
|
|
border-radius: 12px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
text-align: center;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dependency-tree-svg {
|
||
|
|
max-width: 100%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* System Info */
|
||
|
|
.system-info {
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 1rem;
|
||
|
|
background: var(--surface);
|
||
|
|
border-radius: 8px;
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-label {
|
||
|
|
font-size: 0.8rem;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05em;
|
||
|
|
margin-bottom: 0.25rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-value {
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-link {
|
||
|
|
color: var(--primary);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.info-link:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Resources */
|
||
|
|
.resources {
|
||
|
|
margin-bottom: 3rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-links {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-link {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 0.5rem;
|
||
|
|
padding: 0.75rem 1.5rem;
|
||
|
|
background: var(--surface);
|
||
|
|
border: 1px solid var(--border);
|
||
|
|
border-radius: 8px;
|
||
|
|
color: var(--text);
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: all 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.resource-link:hover {
|
||
|
|
border-color: var(--primary);
|
||
|
|
background: var(--surface-hover);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Footer */
|
||
|
|
.about-footer {
|
||
|
|
text-align: center;
|
||
|
|
padding-top: 2rem;
|
||
|
|
border-top: 1px solid var(--border);
|
||
|
|
color: var(--text-secondary);
|
||
|
|
}
|
||
|
|
|
||
|
|
.about-footer p {
|
||
|
|
margin: 0.5rem 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.built-with a {
|
||
|
|
color: var(--primary);
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.built-with a:hover {
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|