988 lines
29 KiB
HTML
988 lines
29 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>provctl Logo - Specifications & Preview</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family:
|
||
"Segoe UI",
|
||
-apple-system,
|
||
BlinkMacSystemFont,
|
||
sans-serif;
|
||
background: linear-gradient(
|
||
135deg,
|
||
#0f0f1e 0%,
|
||
#1a1a2e 50%,
|
||
#16213e 100%
|
||
);
|
||
color: #fff;
|
||
padding: 2rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Header */
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
padding-bottom: 2rem;
|
||
border-bottom: 2px solid rgba(76, 194, 241, 0.3);
|
||
}
|
||
|
||
h1 {
|
||
font-size: 3.5rem;
|
||
margin-bottom: 0.5rem;
|
||
background: linear-gradient(135deg, #4cc2f1, #f2b03f, #05ab9e);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.version-badge {
|
||
display: inline-block;
|
||
background: linear-gradient(135deg, #05ab9e, #4cc2f1);
|
||
color: white;
|
||
padding: 0.5rem 1.5rem;
|
||
border-radius: 25px;
|
||
font-size: 1rem;
|
||
font-weight: bold;
|
||
margin-top: 1rem;
|
||
box-shadow: 0 4px 15px rgba(5, 171, 158, 0.4);
|
||
}
|
||
|
||
.subtitle {
|
||
color: #8d9ccf;
|
||
font-size: 1.3rem;
|
||
margin-top: 1.5rem;
|
||
font-weight: 300;
|
||
}
|
||
|
||
/* Section Headers */
|
||
.section {
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 2rem;
|
||
color: #4cc2f1;
|
||
margin-bottom: 1.5rem;
|
||
padding-bottom: 0.5rem;
|
||
border-bottom: 2px solid rgba(76, 194, 241, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.section-title::before {
|
||
content: "";
|
||
width: 8px;
|
||
height: 8px;
|
||
background: #05ab9e;
|
||
border-radius: 50%;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Logo Display Grid */
|
||
.logo-display-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||
gap: 2rem;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.logo-box-wrapper {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 2px solid rgba(76, 194, 241, 0.2);
|
||
border-radius: 16px;
|
||
padding: 1.5rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.logo-box-wrapper:hover {
|
||
border-color: rgba(76, 194, 241, 0.5);
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 30px rgba(76, 194, 241, 0.2);
|
||
}
|
||
|
||
.logo-box {
|
||
background: rgba(0, 0, 0, 0.4);
|
||
border-radius: 12px;
|
||
padding: 3rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 320px;
|
||
}
|
||
|
||
.logo-box.dark {
|
||
background: #16213e;
|
||
}
|
||
|
||
.logo-box.light {
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.logo-box.gradient {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.logo-box img {
|
||
width: 100%;
|
||
max-width: 600px;
|
||
height: auto;
|
||
}
|
||
|
||
.logo-box-label {
|
||
text-align: center;
|
||
margin-top: 1rem;
|
||
color: #f2b03f;
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
}
|
||
|
||
/* Technical Specs Grid */
|
||
.specs-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.spec-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 1px solid rgba(76, 194, 241, 0.2);
|
||
border-left: 4px solid #4cc2f1;
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.spec-card h3 {
|
||
color: #f2b03f;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.spec-card h3::before {
|
||
content: "⚙️";
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.spec-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0.75rem 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.spec-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.spec-label {
|
||
color: #8d9ccf;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.spec-value {
|
||
color: #fff;
|
||
font-family: "Courier New", monospace;
|
||
font-size: 0.85rem;
|
||
background: rgba(76, 194, 241, 0.1);
|
||
padding: 0.3rem 0.6rem;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* Color Palette */
|
||
.color-palette {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.color-swatch {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 2px solid rgba(76, 194, 241, 0.2);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.color-swatch:hover {
|
||
transform: scale(1.05);
|
||
border-color: rgba(76, 194, 241, 0.5);
|
||
}
|
||
|
||
.color-preview {
|
||
width: 100%;
|
||
height: 100px;
|
||
border-radius: 8px;
|
||
margin-bottom: 1rem;
|
||
border: 2px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.color-name {
|
||
font-weight: 600;
|
||
color: #f2b03f;
|
||
margin-bottom: 0.5rem;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.color-code {
|
||
font-family: "Courier New", monospace;
|
||
color: #4cc2f1;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
|
||
.color-rgb {
|
||
font-family: "Courier New", monospace;
|
||
color: #8d9ccf;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.color-usage {
|
||
margin-top: 0.75rem;
|
||
padding-top: 0.75rem;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||
color: #8d9ccf;
|
||
font-size: 0.85rem;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Animation Table */
|
||
.animation-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
margin-top: 2rem;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.animation-table th,
|
||
.animation-table td {
|
||
padding: 1rem 1.5rem;
|
||
text-align: left;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
.animation-table th {
|
||
background: rgba(76, 194, 241, 0.15);
|
||
color: #4cc2f1;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
font-size: 0.9rem;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.animation-table td:first-child {
|
||
color: #f2b03f;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.animation-table td {
|
||
color: #8d9ccf;
|
||
font-family: "Courier New", monospace;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
/* Component Breakdown */
|
||
.component-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.component-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border: 2px solid rgba(5, 171, 158, 0.3);
|
||
border-radius: 12px;
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.component-card h3 {
|
||
color: #05ab9e;
|
||
font-size: 1.2rem;
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.component-card ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.component-card li {
|
||
padding: 0.5rem 0;
|
||
color: #8d9ccf;
|
||
display: flex;
|
||
align-items: start;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.component-card li::before {
|
||
content: "▹";
|
||
color: #4cc2f1;
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
/* Highlight Box */
|
||
.highlight-box {
|
||
background: rgba(242, 176, 63, 0.08);
|
||
border: 2px solid rgba(242, 176, 63, 0.3);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.highlight-box h3 {
|
||
color: #f2b03f;
|
||
font-size: 1.4rem;
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.highlight-box h3::before {
|
||
content: "💡";
|
||
}
|
||
|
||
.highlight-box p {
|
||
color: #8d9ccf;
|
||
line-height: 1.8;
|
||
font-size: 1.05rem;
|
||
}
|
||
|
||
/* Usage Guidelines */
|
||
.usage-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.usage-section {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
border: 2px solid rgba(76, 194, 241, 0.2);
|
||
}
|
||
|
||
.usage-section h3 {
|
||
color: #4cc2f1;
|
||
font-size: 1.3rem;
|
||
margin-bottom: 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.usage-section.do h3::before {
|
||
content: "✅";
|
||
}
|
||
|
||
.usage-section.dont h3::before {
|
||
content: "❌";
|
||
}
|
||
|
||
.usage-section ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.usage-section li {
|
||
padding: 0.75rem 0;
|
||
color: #8d9ccf;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
margin-top: 4rem;
|
||
padding-top: 2rem;
|
||
border-top: 2px solid rgba(76, 194, 241, 0.3);
|
||
text-align: center;
|
||
color: #8d9ccf;
|
||
}
|
||
|
||
/* Responsive */
|
||
@media (max-width: 768px) {
|
||
h1 {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.logo-display-grid,
|
||
.usage-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<!-- Header -->
|
||
<div class="header">
|
||
<h1>⚙️ provctl</h1>
|
||
<div class="version-badge">Logos</div>
|
||
<p class="subtitle">Machine Orchestration & Service Control Platform</p>
|
||
</div>
|
||
|
||
<!-- Logo Preview Section -->
|
||
<section class="section">
|
||
<h2 class="section-title">Logo Preview</h2>
|
||
|
||
<div class="logo-display-grid">
|
||
<div class="logo-box-wrapper">
|
||
<div class="logo-box dark">
|
||
<img
|
||
src="provctl_logo.svg"
|
||
alt="provctl logo on dark background"
|
||
/>
|
||
</div>
|
||
<div class="logo-box-label">Dark Background</div>
|
||
</div>
|
||
|
||
<div class="logo-box-wrapper">
|
||
<div class="logo-box light">
|
||
<img
|
||
src="provctl_logo.svg"
|
||
alt="provctl logo on light background"
|
||
/>
|
||
</div>
|
||
<div class="logo-box-label">Light Background</div>
|
||
</div>
|
||
|
||
<div class="logo-box-wrapper">
|
||
<div class="logo-box gradient">
|
||
<img
|
||
src="provctl_logo.svg"
|
||
alt="provctl logo on gradient background"
|
||
/>
|
||
</div>
|
||
<div class="logo-box-label">Gradient Background</div>
|
||
</div>
|
||
|
||
<div class="logo-box-wrapper">
|
||
<div class="logo-box" style="background: rgba(0, 0, 0, 0.8)">
|
||
<img
|
||
src="provctl_logo.svg"
|
||
alt="provctl logo on black background"
|
||
/>
|
||
</div>
|
||
<div class="logo-box-label">Pure Black</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Design Concept -->
|
||
<section class="section">
|
||
<h2 class="section-title">Design Concept</h2>
|
||
|
||
<div class="highlight-box">
|
||
<h3>Orbital CI/CD System with Infinity Loop</h3>
|
||
<p>
|
||
The v6 logo represents a
|
||
<strong>distributed orchestration system</strong> where multiple
|
||
remote nodes orbit around a central control hub. The
|
||
<strong>infinity loop</strong> symbolizes continuous integration and
|
||
continuous deployment (CI/CD) — a process with no beginning or end.
|
||
Unlike traditional two-gear designs, this orbital approach
|
||
emphasizes
|
||
<strong>scalable, multi-node orchestration</strong> rather than
|
||
simple 1:1 connections.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="component-grid">
|
||
<div class="component-card">
|
||
<h3>🔄 Infinity Loop</h3>
|
||
<ul>
|
||
<li>Continuous CI/CD flow visualization</li>
|
||
<li>Animated gradient flowing eternally</li>
|
||
<li>8px stroke width with glow effect</li>
|
||
<li>Three particles traveling the path</li>
|
||
<li>Represents endless integration cycle</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="component-card">
|
||
<h3>🟢 Central Control Node</h3>
|
||
<ul>
|
||
<li>20px radius blue sphere (#455aa5)</li>
|
||
<li>Green LED indicator (6px, pulsing)</li>
|
||
<li>Concentric rings for depth</li>
|
||
<li>Represents local control center</li>
|
||
<li>Breathing animation (2s cycle)</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="component-card">
|
||
<h3>🔵 Remote Nodes (5x)</h3>
|
||
<ul>
|
||
<li>18px radius with radial gradient</li>
|
||
<li>Terminal prompt ">_" centered</li>
|
||
<li>Individual pulsing glow effects</li>
|
||
<li>Distributed orbital positions</li>
|
||
<li>Connected via dashed lines</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="component-card">
|
||
<h3>🌊 Flow Particles</h3>
|
||
<ul>
|
||
<li>Three colored particles (4px radius)</li>
|
||
<li>Travel along infinity path</li>
|
||
<li>Staggered timing (0s, 2s, 4s)</li>
|
||
<li>Smooth spline animation</li>
|
||
<li>Represents data/command flow</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="component-card">
|
||
<h3>📡 Connection Lines</h3>
|
||
<ul>
|
||
<li>Dashed lines (4,4 pattern)</li>
|
||
<li>2px stroke width, cyan color</li>
|
||
<li>Animated dash offset</li>
|
||
<li>From each node to center</li>
|
||
<li>Shows active SSH connections</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="component-card">
|
||
<h3>✍️ Typography</h3>
|
||
<ul>
|
||
<li>Font: Merienda One (rounded)</li>
|
||
<li>Size: 48px, weight: 700</li>
|
||
<li>Color: #455aa5 (primary blue)</li>
|
||
<li>Letter-by-letter pulse animation</li>
|
||
<li>Staggered 0.2s offset</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Technical Specifications -->
|
||
<section class="section">
|
||
<h2 class="section-title">Technical Specifications</h2>
|
||
|
||
<div class="specs-grid">
|
||
<div class="spec-card">
|
||
<h3>Canvas & Layout</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Dimensions</span>
|
||
<span class="spec-value">600 × 280 px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Format</span>
|
||
<span class="spec-value">SVG (Vector)</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">File Size</span>
|
||
<span class="spec-value">~18 KB</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Scalability</span>
|
||
<span class="spec-value">Infinite</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<h3>Central Node</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Radius</span>
|
||
<span class="spec-value">20px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Fill Color</span>
|
||
<span class="spec-value">#455aa5</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">LED Color</span>
|
||
<span class="spec-value">#05ab9e</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">LED Pulse</span>
|
||
<span class="spec-value">5-8px @ 2s</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<h3>Remote Nodes</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Radius</span>
|
||
<span class="spec-value">18px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Fill Color</span>
|
||
<span class="spec-value">#5e74b7</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Count</span>
|
||
<span class="spec-value">5 nodes</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Terminal Icon</span>
|
||
<span class="spec-value">>_</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<h3>Infinity Loop</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Stroke Width</span>
|
||
<span class="spec-value">8px (main)</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Path Length</span>
|
||
<span class="spec-value">~440px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Particles</span>
|
||
<span class="spec-value">3 flowing</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Animation</span>
|
||
<span class="spec-value">6s loop</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<h3>Typography</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Font Family</span>
|
||
<span class="spec-value">Merienda One</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Font Size</span>
|
||
<span class="spec-value">48px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Font Weight</span>
|
||
<span class="spec-value">700 (Bold)</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Letter Spacing</span>
|
||
<span class="spec-value">0.5px</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<h3>Performance</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Target FPS</span>
|
||
<span class="spec-value">60 fps</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">CPU Usage</span>
|
||
<span class="spec-value">< 1%</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Browser Support</span>
|
||
<span class="spec-value">Modern</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Compatibility</span>
|
||
<span class="spec-value">Chrome 90+</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Color Palette -->
|
||
<section class="section">
|
||
<h2 class="section-title">Color Palette</h2>
|
||
|
||
<div class="color-palette">
|
||
<div class="color-swatch">
|
||
<div class="color-preview" style="background-color: #455aa5"></div>
|
||
<div class="color-name">Primary Blue</div>
|
||
<div class="color-code">#455aa5</div>
|
||
<div class="color-rgb">RGB(69, 90, 165)</div>
|
||
<div class="color-usage">
|
||
Central control node, typography, primary brand color
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-preview" style="background-color: #5e74b7"></div>
|
||
<div class="color-name">Secondary Blue</div>
|
||
<div class="color-code">#5e74b7</div>
|
||
<div class="color-rgb">RGB(94, 116, 183)</div>
|
||
<div class="color-usage">
|
||
Remote nodes, distributed systems, gradient fills
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-preview" style="background-color: #f2b03f"></div>
|
||
<div class="color-name">Orange/Gold</div>
|
||
<div class="color-code">#f2b03f</div>
|
||
<div class="color-rgb">RGB(242, 176, 63)</div>
|
||
<div class="color-usage">
|
||
Terminal symbols, flow particles, accent highlights
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-preview" style="background-color: #05ab9e"></div>
|
||
<div class="color-name">Green Status</div>
|
||
<div class="color-code">#05ab9e</div>
|
||
<div class="color-rgb">RGB(5, 171, 158)</div>
|
||
<div class="color-usage">
|
||
LED indicator, active status, health monitoring
|
||
</div>
|
||
</div>
|
||
|
||
<div class="color-swatch">
|
||
<div class="color-preview" style="background-color: #4cc2f1"></div>
|
||
<div class="color-name">Cyan</div>
|
||
<div class="color-code">#4cc2f1</div>
|
||
<div class="color-rgb">RGB(76, 194, 241)</div>
|
||
<div class="color-usage">
|
||
SSH connections, orbital rings, network links
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Animation Specifications -->
|
||
<section class="section">
|
||
<h2 class="section-title">Animation Specifications</h2>
|
||
|
||
<table class="animation-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Element</th>
|
||
<th>Type</th>
|
||
<th>Duration</th>
|
||
<th>Easing</th>
|
||
<th>Details</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Infinity Loop Gradient</td>
|
||
<td>Offset Animation</td>
|
||
<td>4s</td>
|
||
<td>Linear</td>
|
||
<td>Continuous color flow along path</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Central LED</td>
|
||
<td>Scale + Opacity</td>
|
||
<td>2s</td>
|
||
<td>ease-in-out</td>
|
||
<td>Breathing: 5-8px radius, 0.7-1.0 opacity</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Flow Particles (3x)</td>
|
||
<td>Path Motion</td>
|
||
<td>6s</td>
|
||
<td>spline (0.42, 0, 0.58, 1)</td>
|
||
<td>Staggered: 0s, 2s, 4s begin times</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Remote Node Glow</td>
|
||
<td>Scale + Opacity</td>
|
||
<td>2.1-2.5s</td>
|
||
<td>ease-in-out</td>
|
||
<td>Each node independent timing</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Connection Lines</td>
|
||
<td>Dash Offset</td>
|
||
<td>1.5-2s</td>
|
||
<td>Linear</td>
|
||
<td>Animated flow towards center</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Typography</td>
|
||
<td>Opacity</td>
|
||
<td>3.5s</td>
|
||
<td>ease-in-out</td>
|
||
<td>Letter-by-letter: 0.2s offset</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Orbital Rings</td>
|
||
<td>Opacity</td>
|
||
<td>2.5-3s</td>
|
||
<td>ease-in-out</td>
|
||
<td>Subtle pulse 0.08-0.2 opacity</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="highlight-box" style="margin-top: 2rem">
|
||
<h3>Performance Optimization</h3>
|
||
<p>
|
||
All animations use <strong>CSS-based SVG animations</strong> with
|
||
hardware acceleration. The <code>calcMode="spline"</code> with
|
||
Bézier curves <code>(0.42, 0, 0.58, 1)</code> ensures smooth,
|
||
natural motion. Linear easing is used for mechanical elements (gear
|
||
rotation, dash offset) to maintain technical precision. Target:
|
||
<strong>60fps @ <1% CPU usage</strong> on modern browsers.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Usage Guidelines -->
|
||
<section class="section">
|
||
<h2 class="section-title">Usage Guidelines</h2>
|
||
|
||
<div class="usage-grid">
|
||
<div class="usage-section do">
|
||
<h3>Best Practices</h3>
|
||
<ul>
|
||
<li>Use on contrasting backgrounds (dark or light)</li>
|
||
<li>Maintain aspect ratio (600:280)</li>
|
||
<li>Provide clear space: minimum 20px around logo</li>
|
||
<li>Scale proportionally: 32px to 600px+ width</li>
|
||
<li>Link to project repository when displayed</li>
|
||
<li>Include alt text: "provctl - machine orchestration"</li>
|
||
<li>Use animated version for web/digital contexts</li>
|
||
<li>Export static version for print/email</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="usage-section dont">
|
||
<h3>Avoid These</h3>
|
||
<ul>
|
||
<li>Don't distort or skew the logo</li>
|
||
<li>Don't modify colors without approval</li>
|
||
<li>Don't add effects (shadows, glows, outlines)</li>
|
||
<li>Don't rotate or flip the logo</li>
|
||
<li>Don't place on busy/patterned backgrounds</li>
|
||
<li>Don't separate elements (infinity + nodes + text)</li>
|
||
<li>Don't use low-res raster versions</li>
|
||
<li>Don't alter animation timing</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="highlight-box" style="margin-top: 2rem">
|
||
<h3>Recommended Use Cases</h3>
|
||
<p>
|
||
<strong>Web:</strong> GitHub README (400-600px), documentation
|
||
headers, project websites<br />
|
||
<strong>Digital:</strong> Presentations, social media, blog posts,
|
||
tutorials<br />
|
||
<strong>Print:</strong> Business cards, stickers, conference
|
||
materials (use static version)<br />
|
||
<strong>Development:</strong> CLI splash screens, terminal ASCII art
|
||
derivatives, IDE themes
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- File Information -->
|
||
<section class="section">
|
||
<h2 class="section-title">File Information</h2>
|
||
|
||
<div class="specs-grid">
|
||
<div class="spec-card">
|
||
<h3>File Details</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Filename</span>
|
||
<span class="spec-value">provctl_logo_v6.svg</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Version</span>
|
||
<span class="spec-value">6.0</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Created</span>
|
||
<span class="spec-value">November 2025</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">License</span>
|
||
<span class="spec-value">MIT / Apache 2.0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<h3>Browser Support</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Chrome</span>
|
||
<span class="spec-value">90+</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Firefox</span>
|
||
<span class="spec-value">88+</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Safari</span>
|
||
<span class="spec-value">14+</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Edge</span>
|
||
<span class="spec-value">90+</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spec-card">
|
||
<h3>Export Options</h3>
|
||
<div class="spec-item">
|
||
<span class="spec-label">PNG (High-res)</span>
|
||
<span class="spec-value">600px, 1200px</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Favicon</span>
|
||
<span class="spec-value">16×16, 32×32, 64×64</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Social Media</span>
|
||
<span class="spec-value">400×400 square crop</span>
|
||
</div>
|
||
<div class="spec-item">
|
||
<span class="spec-label">Print (PDF)</span>
|
||
<span class="spec-value">Static version</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<div class="footer">
|
||
<p>
|
||
<strong>provctl</strong> — Machine Orchestration & Service Control
|
||
Platform
|
||
</p>
|
||
<p style="margin-top: 0.5rem; font-size: 0.9rem">
|
||
Built with Rust • Designed for DevOps/SRE Teams • Part of the
|
||
provisioning ecosystem
|
||
</p>
|
||
<p style="margin-top: 1rem; font-size: 0.85rem; opacity: 0.7">
|
||
© 2025 provctl project • Documentation and Logo v6 Specifications
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|