mirror of
https://github.com/blackboxprogramming/blackroad.io.git
synced 2026-03-18 06:34:01 -05:00
a28e41c1a0
Includes metric cards, agent cards, project cards, feature cards, notification cards, and pricing cards with responsive grid layouts.
1331 lines
46 KiB
HTML
1331 lines
46 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cards — BlackRoad OS</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--gray-0: #000000;
|
|
--gray-1: #09090b;
|
|
--gray-2: #0f0f12;
|
|
--gray-3: #18181d;
|
|
--gray-4: #222229;
|
|
--gray-5: #2d2d36;
|
|
--gray-6: #3c3c47;
|
|
--gray-7: #505062;
|
|
--gray-8: #6b6b7d;
|
|
--gray-9: #8b8b9e;
|
|
--gray-10: #ababba;
|
|
--gray-11: #d1d1db;
|
|
--gray-12: #ffffff;
|
|
|
|
--font-display: 'Space Grotesk', sans-serif;
|
|
--font-body: 'Inter', sans-serif;
|
|
--font-mono: 'JetBrains Mono', monospace;
|
|
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 14px;
|
|
--radius-xl: 18px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body);
|
|
background: var(--gray-1);
|
|
color: var(--gray-10);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
-webkit-font-smoothing: antialiased;
|
|
padding: 48px 24px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
margin-bottom: 64px;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.section-title {
|
|
font-family: var(--font-display);
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--gray-12);
|
|
letter-spacing: -0.3px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.section-desc {
|
|
font-size: 14px;
|
|
color: var(--gray-7);
|
|
}
|
|
|
|
/* Grid Layouts */
|
|
.grid-4 {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.grid-2 {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.grid-4 { grid-template-columns: repeat(2, 1fr); }
|
|
.grid-3 { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
/* ==================== */
|
|
/* METRIC CARDS */
|
|
/* ==================== */
|
|
.metric-card {
|
|
background: var(--gray-2);
|
|
border: 1px solid var(--gray-3);
|
|
border-radius: var(--radius-lg);
|
|
padding: 20px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.metric-card:hover {
|
|
border-color: var(--gray-4);
|
|
background: var(--gray-3);
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--gray-7);
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.metric-label svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.metric-value {
|
|
font-family: var(--font-mono);
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
color: var(--gray-12);
|
|
letter-spacing: -1px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.metric-change {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 12px;
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
background: var(--gray-4);
|
|
color: var(--gray-9);
|
|
}
|
|
|
|
.metric-change.up {
|
|
color: var(--gray-10);
|
|
}
|
|
|
|
.metric-change svg {
|
|
width: 12px;
|
|
height: 12px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.metric-sparkline {
|
|
height: 32px;
|
|
margin-top: 16px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: 3px;
|
|
}
|
|
|
|
.spark-bar {
|
|
flex: 1;
|
|
background: var(--gray-5);
|
|
border-radius: 2px;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.metric-card:hover .spark-bar {
|
|
background: var(--gray-6);
|
|
}
|
|
|
|
.spark-bar:last-child {
|
|
background: var(--gray-8);
|
|
}
|
|
|
|
/* ==================== */
|
|
/* AGENT CARDS */
|
|
/* ==================== */
|
|
.agent-card {
|
|
background: var(--gray-2);
|
|
border: 1px solid var(--gray-3);
|
|
border-radius: var(--radius-xl);
|
|
padding: 24px;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.agent-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, var(--gray-5) 0%, var(--gray-7) 50%, var(--gray-5) 100%);
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.agent-card:hover {
|
|
border-color: var(--gray-5);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.agent-card:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.agent-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.agent-avatar {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: linear-gradient(135deg, var(--gray-5) 0%, var(--gray-4) 100%);
|
|
border-radius: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: var(--font-mono);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--gray-8);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.agent-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.agent-name {
|
|
font-family: var(--font-display);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--gray-12);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.agent-id {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--gray-6);
|
|
}
|
|
|
|
.agent-status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: var(--gray-6);
|
|
flex-shrink: 0;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.agent-status-dot.online {
|
|
background: var(--gray-9);
|
|
box-shadow: 0 0 10px var(--gray-8);
|
|
}
|
|
|
|
.agent-status-dot.busy {
|
|
background: var(--gray-7);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
|
|
.agent-stats {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.agent-stat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.agent-stat-value {
|
|
font-family: var(--font-mono);
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: var(--gray-11);
|
|
}
|
|
|
|
.agent-stat-label {
|
|
font-size: 11px;
|
|
color: var(--gray-7);
|
|
}
|
|
|
|
.agent-capabilities {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.cap-badge {
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 500;
|
|
padding: 4px 10px;
|
|
background: var(--gray-4);
|
|
color: var(--gray-9);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.agent-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--gray-4);
|
|
}
|
|
|
|
.agent-btn {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
background: var(--gray-4);
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
font-family: var(--font-body);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--gray-9);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.agent-btn:hover {
|
|
background: var(--gray-5);
|
|
color: var(--gray-11);
|
|
}
|
|
|
|
.agent-btn svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* PROJECT CARDS */
|
|
/* ==================== */
|
|
.project-card {
|
|
background: var(--gray-2);
|
|
border: 1px solid var(--gray-3);
|
|
border-radius: var(--radius-xl);
|
|
overflow: hidden;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.project-card:hover {
|
|
border-color: var(--gray-5);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.project-cover {
|
|
height: 120px;
|
|
background: linear-gradient(135deg, var(--gray-4) 0%, var(--gray-3) 100%);
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.project-cover-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--gray-5);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.project-cover-icon svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
stroke: var(--gray-8);
|
|
}
|
|
|
|
.project-body {
|
|
padding: 20px;
|
|
}
|
|
|
|
.project-title {
|
|
font-family: var(--font-display);
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--gray-12);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.project-desc {
|
|
font-size: 13px;
|
|
color: var(--gray-8);
|
|
line-height: 1.5;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.project-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
font-size: 12px;
|
|
color: var(--gray-7);
|
|
}
|
|
|
|
.project-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.project-meta-item svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.project-progress {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.progress-label {
|
|
font-size: 11px;
|
|
color: var(--gray-7);
|
|
}
|
|
|
|
.progress-value {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--gray-9);
|
|
}
|
|
|
|
.progress-bar {
|
|
height: 4px;
|
|
background: var(--gray-4);
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, var(--gray-7) 0%, var(--gray-9) 100%);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* FEATURE CARDS */
|
|
/* ==================== */
|
|
.feature-card {
|
|
background: var(--gray-2);
|
|
border: 1px solid var(--gray-3);
|
|
border-radius: var(--radius-xl);
|
|
padding: 28px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
border-color: var(--gray-5);
|
|
background: var(--gray-3);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: var(--gray-4);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.feature-icon svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
stroke: var(--gray-9);
|
|
}
|
|
|
|
.feature-title {
|
|
font-family: var(--font-display);
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
color: var(--gray-12);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.feature-desc {
|
|
font-size: 14px;
|
|
color: var(--gray-8);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.feature-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 16px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--gray-9);
|
|
text-decoration: none;
|
|
transition: color 0.15s;
|
|
}
|
|
|
|
.feature-link:hover {
|
|
color: var(--gray-11);
|
|
}
|
|
|
|
.feature-link svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
/* ==================== */
|
|
/* NOTIFICATION CARDS */
|
|
/* ==================== */
|
|
.notif-card {
|
|
background: var(--gray-2);
|
|
border: 1px solid var(--gray-3);
|
|
border-radius: var(--radius-lg);
|
|
padding: 16px 20px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.notif-card:hover {
|
|
background: var(--gray-3);
|
|
border-color: var(--gray-4);
|
|
}
|
|
|
|
.notif-card.unread {
|
|
border-left: 3px solid var(--gray-8);
|
|
}
|
|
|
|
.notif-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: var(--gray-4);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notif-icon svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
stroke: var(--gray-8);
|
|
}
|
|
|
|
.notif-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.notif-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--gray-11);
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
.notif-card.unread .notif-title {
|
|
color: var(--gray-12);
|
|
}
|
|
|
|
.notif-message {
|
|
font-size: 13px;
|
|
color: var(--gray-8);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.notif-time {
|
|
font-family: var(--font-mono);
|
|
font-size: 11px;
|
|
color: var(--gray-6);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.notif-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notif-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--radius-sm);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.notif-btn svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke: var(--gray-7);
|
|
}
|
|
|
|
.notif-btn:hover {
|
|
background: var(--gray-4);
|
|
}
|
|
|
|
.notif-btn:hover svg {
|
|
stroke: var(--gray-10);
|
|
}
|
|
|
|
/* ==================== */
|
|
/* PRICING CARDS */
|
|
/* ==================== */
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
align-items: start;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.pricing-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
|
|
}
|
|
|
|
.pricing-card {
|
|
background: var(--gray-2);
|
|
border: 1px solid var(--gray-3);
|
|
border-radius: var(--radius-xl);
|
|
padding: 32px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.pricing-card:hover {
|
|
border-color: var(--gray-5);
|
|
}
|
|
|
|
.pricing-card.featured {
|
|
background: var(--gray-3);
|
|
border-color: var(--gray-5);
|
|
position: relative;
|
|
}
|
|
|
|
.pricing-card.featured::before {
|
|
content: 'Popular';
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-family: var(--font-mono);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
padding: 4px 12px;
|
|
background: var(--gray-12);
|
|
color: var(--gray-1);
|
|
border-radius: 20px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.pricing-name {
|
|
font-family: var(--font-display);
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--gray-11);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.pricing-desc {
|
|
font-size: 13px;
|
|
color: var(--gray-7);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.pricing-amount {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 4px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.pricing-currency {
|
|
font-size: 20px;
|
|
font-weight: 500;
|
|
color: var(--gray-8);
|
|
}
|
|
|
|
.pricing-value {
|
|
font-family: var(--font-display);
|
|
font-size: 48px;
|
|
font-weight: 700;
|
|
color: var(--gray-12);
|
|
letter-spacing: -2px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.pricing-period {
|
|
font-size: 14px;
|
|
color: var(--gray-7);
|
|
}
|
|
|
|
.pricing-features {
|
|
list-style: none;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
.pricing-features li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: 10px 0;
|
|
font-size: 14px;
|
|
color: var(--gray-9);
|
|
border-bottom: 1px solid var(--gray-4);
|
|
}
|
|
|
|
.pricing-features li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.pricing-features svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
stroke: var(--gray-8);
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.pricing-btn {
|
|
width: 100%;
|
|
padding: 14px 20px;
|
|
background: var(--gray-4);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
font-family: var(--font-body);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--gray-10);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.pricing-btn:hover {
|
|
background: var(--gray-5);
|
|
color: var(--gray-12);
|
|
}
|
|
|
|
.pricing-card.featured .pricing-btn {
|
|
background: var(--gray-12);
|
|
color: var(--gray-1);
|
|
}
|
|
|
|
.pricing-card.featured .pricing-btn:hover {
|
|
background: var(--gray-11);
|
|
}
|
|
|
|
/* Stack for notifications */
|
|
.notif-stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Metric Cards -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Metrics</h2>
|
|
<p class="section-desc">KPI cards with sparklines and change indicators</p>
|
|
</div>
|
|
<div class="grid-4">
|
|
<div class="metric-card">
|
|
<div class="metric-label">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
Active Agents
|
|
</div>
|
|
<div class="metric-value">1,247</div>
|
|
<span class="metric-change up">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
|
|
+12.5%
|
|
</span>
|
|
<div class="metric-sparkline">
|
|
<div class="spark-bar" style="height: 45%;"></div>
|
|
<div class="spark-bar" style="height: 60%;"></div>
|
|
<div class="spark-bar" style="height: 40%;"></div>
|
|
<div class="spark-bar" style="height: 70%;"></div>
|
|
<div class="spark-bar" style="height: 55%;"></div>
|
|
<div class="spark-bar" style="height: 80%;"></div>
|
|
<div class="spark-bar" style="height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-label">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
|
Tasks Today
|
|
</div>
|
|
<div class="metric-value">8,942</div>
|
|
<span class="metric-change up">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
|
|
+24.1%
|
|
</span>
|
|
<div class="metric-sparkline">
|
|
<div class="spark-bar" style="height: 30%;"></div>
|
|
<div class="spark-bar" style="height: 50%;"></div>
|
|
<div class="spark-bar" style="height: 45%;"></div>
|
|
<div class="spark-bar" style="height: 65%;"></div>
|
|
<div class="spark-bar" style="height: 85%;"></div>
|
|
<div class="spark-bar" style="height: 70%;"></div>
|
|
<div class="spark-bar" style="height: 95%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-label">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
|
|
Avg Latency
|
|
</div>
|
|
<div class="metric-value">2.3ms</div>
|
|
<span class="metric-change">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
|
|
-8.2%
|
|
</span>
|
|
<div class="metric-sparkline">
|
|
<div class="spark-bar" style="height: 80%;"></div>
|
|
<div class="spark-bar" style="height: 60%;"></div>
|
|
<div class="spark-bar" style="height: 70%;"></div>
|
|
<div class="spark-bar" style="height: 50%;"></div>
|
|
<div class="spark-bar" style="height: 45%;"></div>
|
|
<div class="spark-bar" style="height: 35%;"></div>
|
|
<div class="spark-bar" style="height: 30%;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-label">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Success Rate
|
|
</div>
|
|
<div class="metric-value">99.2%</div>
|
|
<span class="metric-change up">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg>
|
|
+0.3%
|
|
</span>
|
|
<div class="metric-sparkline">
|
|
<div class="spark-bar" style="height: 90%;"></div>
|
|
<div class="spark-bar" style="height: 92%;"></div>
|
|
<div class="spark-bar" style="height: 88%;"></div>
|
|
<div class="spark-bar" style="height: 95%;"></div>
|
|
<div class="spark-bar" style="height: 93%;"></div>
|
|
<div class="spark-bar" style="height: 97%;"></div>
|
|
<div class="spark-bar" style="height: 99%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Agent Cards -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Agents</h2>
|
|
<p class="section-desc">Agent profiles with status, stats, and capabilities</p>
|
|
</div>
|
|
<div class="grid-3">
|
|
<div class="agent-card">
|
|
<div class="agent-header">
|
|
<div class="agent-avatar">L7</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">Lucidia-7</div>
|
|
<div class="agent-id">agt_7x9k2m4n</div>
|
|
</div>
|
|
<div class="agent-status-dot online"></div>
|
|
</div>
|
|
<div class="agent-stats">
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">2,847</span>
|
|
<span class="agent-stat-label">Tasks</span>
|
|
</div>
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">99.2%</span>
|
|
<span class="agent-stat-label">Success</span>
|
|
</div>
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">4.2ms</span>
|
|
<span class="agent-stat-label">Avg Time</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-capabilities">
|
|
<span class="cap-badge">reasoning</span>
|
|
<span class="cap-badge">memory</span>
|
|
<span class="cap-badge">trinary</span>
|
|
</div>
|
|
<div class="agent-actions">
|
|
<button class="agent-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
View
|
|
</button>
|
|
<button class="agent-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
Configure
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="agent-card">
|
|
<div class="agent-header">
|
|
<div class="agent-avatar">L9</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">Lucidia-9</div>
|
|
<div class="agent-id">agt_l9m3n7px</div>
|
|
</div>
|
|
<div class="agent-status-dot busy"></div>
|
|
</div>
|
|
<div class="agent-stats">
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">1,423</span>
|
|
<span class="agent-stat-label">Tasks</span>
|
|
</div>
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">98.7%</span>
|
|
<span class="agent-stat-label">Success</span>
|
|
</div>
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">5.1ms</span>
|
|
<span class="agent-stat-label">Avg Time</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-capabilities">
|
|
<span class="cap-badge">reasoning</span>
|
|
<span class="cap-badge">trinary</span>
|
|
</div>
|
|
<div class="agent-actions">
|
|
<button class="agent-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
View
|
|
</button>
|
|
<button class="agent-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
Configure
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="agent-card">
|
|
<div class="agent-header">
|
|
<div class="agent-avatar">AL</div>
|
|
<div class="agent-info">
|
|
<div class="agent-name">Alice</div>
|
|
<div class="agent-id">node_alice_k3s</div>
|
|
</div>
|
|
<div class="agent-status-dot online"></div>
|
|
</div>
|
|
<div class="agent-stats">
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">∞</span>
|
|
<span class="agent-stat-label">Tasks</span>
|
|
</div>
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">100%</span>
|
|
<span class="agent-stat-label">Uptime</span>
|
|
</div>
|
|
<div class="agent-stat">
|
|
<span class="agent-stat-value">0.8ms</span>
|
|
<span class="agent-stat-label">Latency</span>
|
|
</div>
|
|
</div>
|
|
<div class="agent-capabilities">
|
|
<span class="cap-badge">k3s</span>
|
|
<span class="cap-badge">traefik</span>
|
|
<span class="cap-badge">redis</span>
|
|
</div>
|
|
<div class="agent-actions">
|
|
<button class="agent-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
|
|
View
|
|
</button>
|
|
<button class="agent-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
Configure
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Project Cards -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Projects</h2>
|
|
<p class="section-desc">Project cards with cover, description, and progress</p>
|
|
</div>
|
|
<div class="grid-3">
|
|
<div class="project-card">
|
|
<div class="project-cover">
|
|
<div class="project-cover-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
</div>
|
|
<div class="project-body">
|
|
<h3 class="project-title">Lucidia Core</h3>
|
|
<p class="project-desc">Recursive AI system with trinary logic and paraconsistent reasoning capabilities.</p>
|
|
<div class="project-meta">
|
|
<span class="project-meta-item">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Updated 2h ago
|
|
</span>
|
|
<span class="project-meta-item">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
12 agents
|
|
</span>
|
|
</div>
|
|
<div class="project-progress">
|
|
<div class="progress-header">
|
|
<span class="progress-label">Progress</span>
|
|
<span class="progress-value">78%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 78%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="project-card">
|
|
<div class="project-cover">
|
|
<div class="project-cover-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
|
|
</div>
|
|
</div>
|
|
<div class="project-body">
|
|
<h3 class="project-title">Prism Console</h3>
|
|
<p class="project-desc">Enterprise operations dashboard for agent orchestration and monitoring.</p>
|
|
<div class="project-meta">
|
|
<span class="project-meta-item">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Updated 5h ago
|
|
</span>
|
|
<span class="project-meta-item">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
8 agents
|
|
</span>
|
|
</div>
|
|
<div class="project-progress">
|
|
<div class="progress-header">
|
|
<span class="progress-label">Progress</span>
|
|
<span class="progress-value">45%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 45%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="project-card">
|
|
<div class="project-cover">
|
|
<div class="project-cover-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
|
|
</div>
|
|
</div>
|
|
<div class="project-body">
|
|
<h3 class="project-title">RoadChain</h3>
|
|
<p class="project-desc">Blockchain infrastructure for immutable agent memory and audit trails.</p>
|
|
<div class="project-meta">
|
|
<span class="project-meta-item">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
Updated 1d ago
|
|
</span>
|
|
<span class="project-meta-item">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
3 agents
|
|
</span>
|
|
</div>
|
|
<div class="project-progress">
|
|
<div class="progress-header">
|
|
<span class="progress-label">Progress</span>
|
|
<span class="progress-value">22%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" style="width: 22%;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Feature Cards -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Features</h2>
|
|
<p class="section-desc">Feature highlight cards with icons and descriptions</p>
|
|
</div>
|
|
<div class="grid-3">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">Trinary Logic</h3>
|
|
<p class="feature-desc">Move beyond binary with 1/0/-1 states for nuanced reasoning and uncertainty handling.</p>
|
|
<a href="#" class="feature-link">
|
|
Learn more
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">Persistent Memory</h3>
|
|
<p class="feature-desc">PS-SHA∞ hashing ensures immutable, verifiable memory across all agent interactions.</p>
|
|
<a href="#" class="feature-link">
|
|
Learn more
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</a>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
<h3 class="feature-title">Event Bus</h3>
|
|
<p class="feature-desc">NATS-powered pub/sub messaging for real-time agent coordination at scale.</p>
|
|
<a href="#" class="feature-link">
|
|
Learn more
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Notification Cards -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Notifications</h2>
|
|
<p class="section-desc">Alert and notification card variants</p>
|
|
</div>
|
|
<div class="notif-stack" style="max-width: 600px;">
|
|
<div class="notif-card unread">
|
|
<div class="notif-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
</div>
|
|
<div class="notif-content">
|
|
<div class="notif-title">Batch inference completed</div>
|
|
<div class="notif-message">Lucidia-7 finished processing 2,847 items with 99.2% success rate.</div>
|
|
<div class="notif-time">2 minutes ago</div>
|
|
</div>
|
|
<div class="notif-actions">
|
|
<button class="notif-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 13l4 4L19 7"/></svg>
|
|
</button>
|
|
<button class="notif-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="notif-card unread">
|
|
<div class="notif-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
|
|
</div>
|
|
<div class="notif-content">
|
|
<div class="notif-title">Contradiction detected</div>
|
|
<div class="notif-message">Conflicting location data quarantined for review. Human-in-loop required.</div>
|
|
<div class="notif-time">15 minutes ago</div>
|
|
</div>
|
|
<div class="notif-actions">
|
|
<button class="notif-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 13l4 4L19 7"/></svg>
|
|
</button>
|
|
<button class="notif-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="notif-card">
|
|
<div class="notif-icon">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
</div>
|
|
<div class="notif-content">
|
|
<div class="notif-title">New agent registered</div>
|
|
<div class="notif-message">Lucidia-9 has joined the fleet with reasoning and trinary capabilities.</div>
|
|
<div class="notif-time">1 hour ago</div>
|
|
</div>
|
|
<div class="notif-actions">
|
|
<button class="notif-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 13l4 4L19 7"/></svg>
|
|
</button>
|
|
<button class="notif-btn">
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 18L18 6M6 6l12 12"/></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Pricing Cards -->
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h2 class="section-title">Pricing</h2>
|
|
<p class="section-desc">Tiered pricing cards with feature lists</p>
|
|
</div>
|
|
<div class="pricing-grid">
|
|
<div class="pricing-card">
|
|
<div class="pricing-name">Starter</div>
|
|
<div class="pricing-desc">For individual developers</div>
|
|
<div class="pricing-amount">
|
|
<span class="pricing-currency">$</span>
|
|
<span class="pricing-value">0</span>
|
|
<span class="pricing-period">/month</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Up to 10 agents
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
1GB memory storage
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Community support
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Basic analytics
|
|
</li>
|
|
</ul>
|
|
<button class="pricing-btn">Get Started</button>
|
|
</div>
|
|
<div class="pricing-card featured">
|
|
<div class="pricing-name">Pro</div>
|
|
<div class="pricing-desc">For growing teams</div>
|
|
<div class="pricing-amount">
|
|
<span class="pricing-currency">$</span>
|
|
<span class="pricing-value">49</span>
|
|
<span class="pricing-period">/month</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Up to 100 agents
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
50GB memory storage
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Priority support
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Advanced analytics
|
|
</li>
|
|
</ul>
|
|
<button class="pricing-btn">Start Free Trial</button>
|
|
</div>
|
|
<div class="pricing-card">
|
|
<div class="pricing-name">Enterprise</div>
|
|
<div class="pricing-desc">For large organizations</div>
|
|
<div class="pricing-amount">
|
|
<span class="pricing-currency">$</span>
|
|
<span class="pricing-value">299</span>
|
|
<span class="pricing-period">/month</span>
|
|
</div>
|
|
<ul class="pricing-features">
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Unlimited agents
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Unlimited storage
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
24/7 dedicated support
|
|
</li>
|
|
<li>
|
|
<svg fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
|
|
Custom integrations
|
|
</li>
|
|
</ul>
|
|
<button class="pricing-btn">Contact Sales</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|