201 lines
8.5 KiB
HTML
201 lines
8.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>LIFE Metrics — North Star Dashboard</title>
|
||
|
|
<style>
|
||
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif; background: #000; color: #fff; line-height: 1.6; }
|
||
|
|
.header { background: #0a0a0a; border-bottom: 1px solid #333; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; }
|
||
|
|
.header h1 { font-size: 1.5rem; background: linear-gradient(90deg, #00d4ff, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
|
|
.header .subtitle { color: #666; font-size: 0.85rem; }
|
||
|
|
.nav { background: #0a0a0a; border-bottom: 1px solid #333; padding: 0 40px; display: flex; gap: 4px; }
|
||
|
|
.nav a { color: #666; text-decoration: none; padding: 12px 20px; font-size: 0.85rem; transition: all 0.2s; border-bottom: 2px solid transparent; }
|
||
|
|
.nav a:hover, .nav a.active { color: #00d4ff; border-bottom-color: #00d4ff; }
|
||
|
|
.main { padding: 40px; max-width: 1400px; margin: 0 auto; }
|
||
|
|
.hero { text-align: center; padding: 60px 20px; background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%); border-radius: var(--radius-lg); margin-bottom: 40px; }
|
||
|
|
.hero h2 { font-size: 2rem; margin-bottom: 16px; background: linear-gradient(90deg, #00d4ff, #7c3aed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||
|
|
.hero p { font-size: 1rem; color: #aaa; max-width: 800px; margin: 0 auto; }
|
||
|
|
.north-star { background: #111; border: 2px solid #00d4ff; border-radius: var(--radius-md); padding: 32px; margin-bottom: 40px; text-align: center; }
|
||
|
|
.north-star h2 { font-size: 1.5rem; margin-bottom: 16px; color: #00d4ff; }
|
||
|
|
.north-star .metric-value { font-size: 3rem; font-weight: 700; color: #00d4ff; }
|
||
|
|
.north-star .metric-label { font-size: 0.9rem; color: #888; margin-bottom: 16px; }
|
||
|
|
.north-star .targets { display: flex; justify-content: center; gap: 32px; margin-top: 16px; }
|
||
|
|
.target { text-align: center; }
|
||
|
|
.target-year { font-size: 0.8rem; color: #666; }
|
||
|
|
.target-value { font-size: 1.2rem; font-weight: 600; }
|
||
|
|
.dimensions { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px; }
|
||
|
|
.dimension { background: #111; border: 1px solid #333; border-radius: var(--radius-md); padding: 24px; }
|
||
|
|
.dimension h3 { font-size: 1rem; margin-bottom: 8px; color: #00d4ff; }
|
||
|
|
.dimension .current { font-size: 2rem; font-weight: 700; color: #fff; }
|
||
|
|
.dimension .target { font-size: 0.85rem; color: #888; margin-top: 4px; }
|
||
|
|
.framework { background: #111; border: 1px solid #333; border-radius: var(--radius-md); padding: 32px; margin-bottom: 40px; }
|
||
|
|
.framework h2 { font-size: 1.5rem; margin-bottom: 16px; color: #7c3aed; }
|
||
|
|
.framework p { color: #888; margin-bottom: 16px; }
|
||
|
|
.categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
|
||
|
|
.category { background: #1a1a1a; border-radius: var(--radius-md); padding: 16px; }
|
||
|
|
.category-name { color: #00d4ff; font-weight: 600; }
|
||
|
|
.category-desc { color: #888; font-size: 0.8rem; margin-top: 4px; }
|
||
|
|
.category-example { color: #aaa; font-size: 0.75rem; margin-top: 8px; font-style: italic; }
|
||
|
|
.roadmap { background: #111; border: 1px solid #333; border-radius: var(--radius-md); padding: 32px; margin-bottom: 40px; }
|
||
|
|
.roadmap h2 { font-size: 1.5rem; margin-bottom: 16px; color: #00d4ff; }
|
||
|
|
.phase { margin-bottom: 20px; padding: 16px; background: #1a1a1a; border-radius: var(--radius-md); }
|
||
|
|
.phase-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||
|
|
.phase-name { font-weight: 600; color: #fff; }
|
||
|
|
.phase-priority { font-size: 0.75rem; padding: 2px 8px; border-radius: var(--radius-sm); }
|
||
|
|
.priority-critical { background: #7c3aed; }
|
||
|
|
.priority-high { background: #00d4ff; color: #000; }
|
||
|
|
.priority-medium { background: #333; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="header">
|
||
|
|
<div>
|
||
|
|
<h1>LIFE Metrics</h1>
|
||
|
|
<div class="subtitle">North Star Dashboard</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="nav">
|
||
|
|
<a href="/admin/" style="color: #666;">← Admin</a>
|
||
|
|
<a href="#" class="active">Metrics</a>
|
||
|
|
<a href="#north-star">VRC</a>
|
||
|
|
<a href="#framework">Framework</a>
|
||
|
|
<a href="#roadmap">Roadmap</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="main">
|
||
|
|
|
||
|
|
<div class="hero">
|
||
|
|
<h2>North Star Metric</h2>
|
||
|
|
<p>A single metric the entire organization can optimize towards: Verified Reality Coverage (VRC)</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="north-star" id="north-star">
|
||
|
|
<h2>Verified Reality Coverage (VRC)</h2>
|
||
|
|
<div class="metric-value">12.5%</div>
|
||
|
|
<div class="metric-label">of observable reality represented with current, independently verified evidence</div>
|
||
|
|
<div class="targets">
|
||
|
|
<div class="target">
|
||
|
|
<div class="target-year">2026</div>
|
||
|
|
<div class="target-value">25%</div>
|
||
|
|
</div>
|
||
|
|
<div class="target">
|
||
|
|
<div class="target-year">2027</div>
|
||
|
|
<div class="target-value">50%</div>
|
||
|
|
</div>
|
||
|
|
<div class="target">
|
||
|
|
<div class="target-year">2028</div>
|
||
|
|
<div class="target-value">75%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2 style="margin-bottom: 20px; color: #00d4ff;">5 Breakdown Dimensions</h2>
|
||
|
|
|
||
|
|
<div class="dimensions">
|
||
|
|
<div class="dimension">
|
||
|
|
<h3> Object Coverage</h3>
|
||
|
|
<div class="current">78%</div>
|
||
|
|
<div class="target">Target: 95%</div>
|
||
|
|
</div>
|
||
|
|
<div class="dimension">
|
||
|
|
<h3><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="7" cy="7" r="5" stroke="#666" stroke-width="2"/><path d="M11 11L14 14" stroke="#666" stroke-width="2" stroke-linecap="round"/></svg> Multi-source Verification</h3>
|
||
|
|
<div class="current">34%</div>
|
||
|
|
<div class="target">Target: 60%</div>
|
||
|
|
</div>
|
||
|
|
<div class="dimension">
|
||
|
|
<h3>⏱ Evidence Freshness</h3>
|
||
|
|
<div class="current">14.2d</div>
|
||
|
|
<div class="target">Target: 7d</div>
|
||
|
|
</div>
|
||
|
|
<div class="dimension">
|
||
|
|
<h3> Average Confidence</h3>
|
||
|
|
<div class="current">68</div>
|
||
|
|
<div class="target">Target: 80</div>
|
||
|
|
</div>
|
||
|
|
<div class="dimension">
|
||
|
|
<h3> Traceability</h3>
|
||
|
|
<div class="current">92%</div>
|
||
|
|
<div class="target">Target: 98%</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="framework" id="framework">
|
||
|
|
<h2>Communication Framework</h2>
|
||
|
|
<p>Keep three types of claims separate in all external communication to avoid creating unrealistic expectations.</p>
|
||
|
|
|
||
|
|
<div class="categories">
|
||
|
|
<div class="category">
|
||
|
|
<div class="category-name"> Vision</div>
|
||
|
|
<div class="category-desc">What we aim to achieve long-term</div>
|
||
|
|
<div class="category-example">"LIFE aims to establish an open framework for Reality Intelligence."</div>
|
||
|
|
</div>
|
||
|
|
<div class="category">
|
||
|
|
<div class="category-name"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 14H14M4 14V8L8 4L12 8V14" stroke="#666" stroke-width="1.5" stroke-linejoin="round"/><path d="M6 14V10H10V14" stroke="#666" stroke-width="1.5"/></svg> Architecture</div>
|
||
|
|
<div class="category-desc">How the system is designed</div>
|
||
|
|
<div class="category-example">"RIS defines objects, evidence, confidence, and interoperability."</div>
|
||
|
|
</div>
|
||
|
|
<div class="category">
|
||
|
|
<div class="category-name"><svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="9" stroke="#22c55e" stroke-width="2"/><path d="M6 10L9 13L14 7" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> Validated Results</div>
|
||
|
|
<div class="category-desc">What we have actually demonstrated</div>
|
||
|
|
<div class="category-example">"In Pilot X, Y changes identified with Z% verification rate."</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="roadmap" id="roadmap">
|
||
|
|
<h2>Development Roadmap</h2>
|
||
|
|
|
||
|
|
<div class="phase">
|
||
|
|
<div class="phase-header">
|
||
|
|
<div class="phase-name">P0 — Critical</div>
|
||
|
|
<div class="phase-priority priority-critical">NOW</div>
|
||
|
|
</div>
|
||
|
|
<div style="color: #aaa; font-size: 0.85rem;">
|
||
|
|
• LIFE Technical Specification v1.0 (Q3 2026)<br>
|
||
|
|
• RIVP Pilot 1 — Infrastructure (Q3-Q4 2026)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="phase">
|
||
|
|
<div class="phase-header">
|
||
|
|
<div class="phase-name">P1 — High</div>
|
||
|
|
<div class="phase-priority priority-high">NEXT</div>
|
||
|
|
</div>
|
||
|
|
<div style="color: #aaa; font-size: 0.85rem;">
|
||
|
|
• Reference Implementation (Q4 2026)<br>
|
||
|
|
• RIS Public Specification (Q4 2026)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="phase">
|
||
|
|
<div class="phase-header">
|
||
|
|
<div class="phase-name">P2 — Medium</div>
|
||
|
|
<div class="phase-priority priority-medium">LATER</div>
|
||
|
|
</div>
|
||
|
|
<div style="color: #aaa; font-size: 0.85rem;">
|
||
|
|
• Conformance Suite (Q1 2027)<br>
|
||
|
|
• Partner SDK (Q1 2027)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="phase">
|
||
|
|
<div class="phase-header">
|
||
|
|
<div class="phase-name">P3 — Future</div>
|
||
|
|
<div class="phase-priority priority-medium">FUTURE</div>
|
||
|
|
</div>
|
||
|
|
<div style="color: #aaa; font-size: 0.85rem;">
|
||
|
|
• Marketplace & Certification (Q2 2027+)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|