generated from coulomb/repo-seed
150 lines
7.9 KiB
HTML
150 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HelixForge Design System Playground</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
forge: {
|
|
bg: '#0B0F13',
|
|
'bg-muted': '#141A22',
|
|
border: '#222C3A',
|
|
cyan: '#4DEEEA',
|
|
blue: '#247BA0',
|
|
coral: '#FF6B6B',
|
|
amber: '#FFA06A',
|
|
text: '#F8FAFC',
|
|
'text-muted': '#94A3B8',
|
|
}
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'sans-serif'],
|
|
mono: ['Fira Code', 'monospace'],
|
|
},
|
|
backgroundImage: {
|
|
'helix-gradient': 'linear-gradient(135deg, #4DEEEA 0%, #247BA0 40%, #FF6B6B 80%, #FFA06A 100%)',
|
|
'helix-glow': 'radial-gradient(circle, rgba(77,238,234,0.12) 0%, rgba(255,107,107,0.04) 50%, transparent 100%)',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.bg-forge-matrix {
|
|
background-image: radial-gradient(#222c3a 1px, transparent 1px);
|
|
background-size: 24px 24px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-forge-bg text-forge-text font-sans p-8 bg-forge-matrix min-h-screen">
|
|
|
|
<div class="max-w-6xl mx-auto space-y-12">
|
|
|
|
<!-- HEADER BRANDING -->
|
|
<header class="border-b border-forge-border pb-6 relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 w-64 h-64 bg-helix-glow pointer-events-none"></div>
|
|
<span class="text-xs font-mono uppercase tracking-widest text-forge-cyan">Design Token System v1.0</span>
|
|
<h1 class="text-4xl font-bold tracking-tight mt-1">HelixForge Components</h1>
|
|
<p class="text-forge-text-muted mt-2 max-w-2xl">Uniting the natural-language art of discovery with the precise science of delivery.</p>
|
|
</header>
|
|
|
|
<!-- SECTION: BUTTON INTERACTION -->
|
|
<section class="space-y-4">
|
|
<h2 class="text-xs font-mono uppercase tracking-widest text-forge-text-muted">// Action Interactive Modules (Buttons)</h2>
|
|
<div class="flex flex-wrap gap-4 items-center bg-forge-bg-muted p-6 rounded-lg border border-forge-border">
|
|
|
|
<!-- Primary Action -->
|
|
<button class="relative group px-6 py-2.5 rounded font-medium text-neutral-950 overflow-hidden transition-transform active:scale-95">
|
|
<span class="absolute inset-0 bg-helix-gradient transition-opacity group-hover:opacity-90"></span>
|
|
<span class="relative z-10 font-bold tracking-wide">Forge Capability</span>
|
|
</button>
|
|
|
|
<!-- Secondary Action -->
|
|
<button class="px-6 py-2.5 rounded font-mono text-sm border border-forge-border text-forge-text-muted hover:text-forge-cyan hover:border-forge-cyan bg-forge-bg transition-colors">
|
|
[explore_intent]
|
|
</button>
|
|
|
|
<!-- Inline Link -->
|
|
<a href="#" class="text-sm font-medium text-forge-coral hover:text-forge-amber transition-colors flex items-center gap-1">
|
|
Evolve system asset →
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION: CONTAINER CARDS -->
|
|
<section class="space-y-4">
|
|
<h2 class="text-xs font-mono uppercase tracking-widest text-forge-text-muted">// Structural Components (Milled Blocks)</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
<!-- Discovery Block -->
|
|
<div class="bg-forge-bg-muted border border-forge-border hover:border-forge-cyan/50 transition-all duration-300 p-6 rounded relative overflow-hidden group">
|
|
<div class="absolute -top-12 -right-12 w-24 h-24 bg-forge-cyan/5 blur-xl rounded-full group-hover:bg-forge-cyan/10 transition-all duration-500"></div>
|
|
<span class="text-xs font-mono uppercase tracking-widest text-forge-cyan">Strand 01 // Discovery</span>
|
|
<h3 class="text-xl font-bold mt-2 mb-2">Human Meaning Sandbox</h3>
|
|
<p class="text-forge-text-muted text-sm leading-relaxed">Where software capabilities are thoroughly explored through descriptive dialogue before they are built.</p>
|
|
</div>
|
|
|
|
<!-- Delivery Block -->
|
|
<div class="bg-forge-bg-muted border border-forge-border hover:border-forge-coral/50 transition-all duration-300 p-6 rounded relative overflow-hidden group">
|
|
<div class="absolute -top-12 -right-12 w-24 h-24 bg-forge-coral/5 blur-xl rounded-full group-hover:bg-forge-coral/10 transition-all duration-500"></div>
|
|
<span class="text-xs font-mono uppercase tracking-widest text-forge-coral">Strand 02 // Delivery</span>
|
|
<h3 class="text-xl font-bold mt-2 mb-2">Machine Precision Engine</h3>
|
|
<p class="text-forge-text-muted text-sm leading-relaxed">Continuous code compilation, executable verification frameworks, and deterministic truth metrics.</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION: THE SPLIT SCREEN SYSTEM -->
|
|
<section class="space-y-4">
|
|
<h2 class="text-xs font-mono uppercase tracking-widest text-forge-text-muted">// Layout Paradigms (The Double Helix Split Dashboard)</h2>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 border border-forge-border rounded overflow-hidden">
|
|
|
|
<!-- Left Side: Discovery -->
|
|
<div class="bg-forge-bg p-8 border-b lg:border-b-0 lg:border-r border-forge-border relative">
|
|
<div class="absolute top-2 right-2 font-mono text-[10px] text-forge-cyan/40">HF-DISCOVER_NODE</div>
|
|
<h4 class="text-sm font-mono uppercase text-forge-cyan mb-4"><intent_playground></h4>
|
|
<textarea class="w-full h-48 bg-forge-bg-muted border border-forge-border rounded p-4 text-sm text-forge-text placeholder-forge-text-muted/50 focus:outline-none focus:border-forge-cyan" placeholder="Describe the software capability you wish to forge in natural language..."></textarea>
|
|
<div class="mt-4 flex justify-between items-center">
|
|
<span class="text-xs text-forge-text-muted">Status: Ready to analyze</span>
|
|
<button class="text-xs font-mono bg-forge-border hover:bg-forge-border/80 px-3 py-1.5 rounded text-forge-text">Parse Intent</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side: Delivery -->
|
|
<div class="bg-forge-bg-muted p-8 relative">
|
|
<div class="absolute top-2 right-2 font-mono text-[10px] text-forge-coral/40">HF-DELIVERY_NODE</div>
|
|
<h4 class="text-sm font-mono uppercase text-forge-coral mb-4">// EXECUTABLE_TRUTH_OUTPUT</h4>
|
|
<div class="bg-forge-bg font-mono text-xs p-4 rounded border border-forge-border text-forge-cyan overflow-x-auto space-y-1">
|
|
<p class="text-forge-text-muted"><span class="text-forge-amber">▶ Compiling</span> capability structure...</p>
|
|
<p><span class="text-forge-text">struct</span> <span class="text-forge-amber">CapabilityMesh</span> {</p>
|
|
<p class="pl-4">id: <span class="text-forge-text">uuid::Uuid</span>,</p>
|
|
<p class="pl-4">intent: <span class="text-forge-text">String</span>,</p>
|
|
<p class="pl-4">rigor_score: <span class="text-forge-text">f64</span>,</p>
|
|
<p>}</p>
|
|
<p class="text-forge-coral">✔ Verification passed: 100% test integrity achieved.</p>
|
|
</div>
|
|
<div class="mt-4 flex justify-between items-center">
|
|
<span class="text-xs text-forge-text-muted">Metrics: 0.04ms propagation delay</span>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-forge-coral/10 text-forge-coral border border-forge-coral/20">Production Ready</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FOOTER DIVIDER -->
|
|
<footer class="pt-6 border-t border-forge-border text-center">
|
|
<p class="text-xs font-mono text-forge-text-muted">HelixForge Design Framework Matrix. Intent → Structure → Composable Progress.</p>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|