Add Payfrit design system, page templates, and component prototypes
Core brand design system, page layout templates, avatar styles, sponsor token purchase flow, and status dashboard — all as living HTML/CSS design references for the team. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
ae81986c7d
commit
9fb5bd83a6
7 changed files with 5240 additions and 0 deletions
894
design-system.html
Normal file
894
design-system.html
Normal file
|
|
@ -0,0 +1,894 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Payfrit Design System</title>
|
||||||
|
<style>
|
||||||
|
/* ========================================
|
||||||
|
PAYFRIT DESIGN SYSTEM v1.0
|
||||||
|
Created by Ava — 2026-03-19
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
/* --- CSS Custom Properties (Design Tokens) --- */
|
||||||
|
:root {
|
||||||
|
/* Brand Colors */
|
||||||
|
--color-primary: #0D6E6E;
|
||||||
|
--color-primary-light: #14A3A3;
|
||||||
|
--color-primary-dark: #094F4F;
|
||||||
|
--color-primary-bg: #E6F5F5;
|
||||||
|
|
||||||
|
/* Accent */
|
||||||
|
--color-accent: #F5A623;
|
||||||
|
--color-accent-light: #FFCF70;
|
||||||
|
--color-accent-dark: #C4841A;
|
||||||
|
|
||||||
|
/* Semantic */
|
||||||
|
--color-success: #2ECC71;
|
||||||
|
--color-success-bg: #EAFAF1;
|
||||||
|
--color-warning: #F39C12;
|
||||||
|
--color-warning-bg: #FEF5E7;
|
||||||
|
--color-error: #E74C3C;
|
||||||
|
--color-error-bg: #FDEDEC;
|
||||||
|
--color-info: #3498DB;
|
||||||
|
--color-info-bg: #EBF5FB;
|
||||||
|
|
||||||
|
/* Neutrals */
|
||||||
|
--color-gray-50: #F9FAFB;
|
||||||
|
--color-gray-100: #F3F4F6;
|
||||||
|
--color-gray-200: #E5E7EB;
|
||||||
|
--color-gray-300: #D1D5DB;
|
||||||
|
--color-gray-400: #9CA3AF;
|
||||||
|
--color-gray-500: #6B7280;
|
||||||
|
--color-gray-600: #4B5563;
|
||||||
|
--color-gray-700: #374151;
|
||||||
|
--color-gray-800: #1F2937;
|
||||||
|
--color-gray-900: #111827;
|
||||||
|
|
||||||
|
/* Background */
|
||||||
|
--color-bg: #FFFFFF;
|
||||||
|
--color-bg-subtle: #F9FAFB;
|
||||||
|
--color-bg-muted: #F3F4F6;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||||
|
|
||||||
|
--text-xs: 0.75rem; /* 12px */
|
||||||
|
--text-sm: 0.875rem; /* 14px */
|
||||||
|
--text-base: 1rem; /* 16px */
|
||||||
|
--text-lg: 1.125rem; /* 18px */
|
||||||
|
--text-xl: 1.25rem; /* 20px */
|
||||||
|
--text-2xl: 1.5rem; /* 24px */
|
||||||
|
--text-3xl: 1.875rem; /* 30px */
|
||||||
|
--text-4xl: 2.25rem; /* 36px */
|
||||||
|
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold:600;
|
||||||
|
--font-bold: 700;
|
||||||
|
|
||||||
|
--leading-tight: 1.25;
|
||||||
|
--leading-normal: 1.5;
|
||||||
|
--leading-relaxed: 1.625;
|
||||||
|
|
||||||
|
/* Spacing Scale (4px base) */
|
||||||
|
--space-1: 0.25rem; /* 4px */
|
||||||
|
--space-2: 0.5rem; /* 8px */
|
||||||
|
--space-3: 0.75rem; /* 12px */
|
||||||
|
--space-4: 1rem; /* 16px */
|
||||||
|
--space-5: 1.25rem; /* 20px */
|
||||||
|
--space-6: 1.5rem; /* 24px */
|
||||||
|
--space-8: 2rem; /* 32px */
|
||||||
|
--space-10: 2.5rem; /* 40px */
|
||||||
|
--space-12: 3rem; /* 48px */
|
||||||
|
--space-16: 4rem; /* 64px */
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
--radius-sm: 0.25rem;
|
||||||
|
--radius-md: 0.5rem;
|
||||||
|
--radius-lg: 0.75rem;
|
||||||
|
--radius-xl: 1rem;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* Shadows */
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
|
||||||
|
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
|
||||||
|
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
|
||||||
|
|
||||||
|
/* Transitions */
|
||||||
|
--transition-fast: 150ms ease;
|
||||||
|
--transition-base: 200ms ease;
|
||||||
|
--transition-slow: 300ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Reset & Base --- */
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
color: var(--color-gray-800);
|
||||||
|
background: var(--color-bg);
|
||||||
|
line-height: var(--leading-normal);
|
||||||
|
}
|
||||||
|
img { max-width: 100%; display: block; }
|
||||||
|
a { color: var(--color-primary); text-decoration: none; }
|
||||||
|
a:hover { color: var(--color-primary-dark); text-decoration: underline; }
|
||||||
|
|
||||||
|
/* --- Page Layout --- */
|
||||||
|
.ds-page { max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
|
||||||
|
|
||||||
|
.ds-header {
|
||||||
|
text-align: center;
|
||||||
|
padding: var(--space-16) var(--space-6);
|
||||||
|
background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), var(--color-primary-light));
|
||||||
|
color: white;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
margin-bottom: var(--space-12);
|
||||||
|
}
|
||||||
|
.ds-header h1 { font-size: var(--text-4xl); font-weight: var(--font-bold); margin-bottom: var(--space-2); }
|
||||||
|
.ds-header p { font-size: var(--text-lg); opacity: 0.85; }
|
||||||
|
|
||||||
|
.ds-section { margin-bottom: var(--space-16); }
|
||||||
|
.ds-section-title {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
border-bottom: 2px solid var(--color-primary);
|
||||||
|
padding-bottom: var(--space-2);
|
||||||
|
margin-bottom: var(--space-6);
|
||||||
|
}
|
||||||
|
.ds-subsection { margin-bottom: var(--space-8); }
|
||||||
|
.ds-subsection-title {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-gray-700);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.ds-label {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Color Swatches --- */
|
||||||
|
.ds-color-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.ds-swatch {
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
border: 1px solid var(--color-gray-200);
|
||||||
|
}
|
||||||
|
.ds-swatch-color {
|
||||||
|
height: 80px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.ds-swatch-info {
|
||||||
|
padding: var(--space-3);
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.ds-swatch-name {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-gray-800);
|
||||||
|
}
|
||||||
|
.ds-swatch-hex {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Typography Specimens --- */
|
||||||
|
.ds-type-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: var(--space-6);
|
||||||
|
padding: var(--space-4) 0;
|
||||||
|
border-bottom: 1px solid var(--color-gray-100);
|
||||||
|
}
|
||||||
|
.ds-type-meta {
|
||||||
|
flex: 0 0 120px;
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
color: var(--color-gray-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Component Styles --- */
|
||||||
|
|
||||||
|
/* Buttons */
|
||||||
|
.ds-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
padding: var(--space-3) var(--space-6);
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
line-height: 1;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.ds-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
|
||||||
|
.ds-btn:active { transform: translateY(0); }
|
||||||
|
.ds-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
|
||||||
|
|
||||||
|
.ds-btn-primary { background: var(--color-primary); color: white; }
|
||||||
|
.ds-btn-primary:hover { background: var(--color-primary-dark); color: white; }
|
||||||
|
|
||||||
|
.ds-btn-secondary { background: white; color: var(--color-primary); border-color: var(--color-primary); }
|
||||||
|
.ds-btn-secondary:hover { background: var(--color-primary-bg); color: var(--color-primary); }
|
||||||
|
|
||||||
|
.ds-btn-accent { background: var(--color-accent); color: white; }
|
||||||
|
.ds-btn-accent:hover { background: var(--color-accent-dark); color: white; }
|
||||||
|
|
||||||
|
.ds-btn-ghost { background: transparent; color: var(--color-gray-600); }
|
||||||
|
.ds-btn-ghost:hover { background: var(--color-gray-100); color: var(--color-gray-800); box-shadow: none; }
|
||||||
|
|
||||||
|
.ds-btn-danger { background: var(--color-error); color: white; }
|
||||||
|
.ds-btn-danger:hover { background: #C0392B; color: white; }
|
||||||
|
|
||||||
|
.ds-btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
|
||||||
|
.ds-btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
|
||||||
|
|
||||||
|
.ds-btn:disabled, .ds-btn-disabled {
|
||||||
|
opacity: 0.5; cursor: not-allowed; pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ds-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
|
||||||
|
|
||||||
|
/* Form Inputs */
|
||||||
|
.ds-form-group { margin-bottom: var(--space-5); }
|
||||||
|
.ds-form-label {
|
||||||
|
display: block;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
color: var(--color-gray-700);
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
.ds-form-hint {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--color-gray-400);
|
||||||
|
margin-top: var(--space-1);
|
||||||
|
}
|
||||||
|
.ds-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
font-family: var(--font-family);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
color: var(--color-gray-800);
|
||||||
|
background: white;
|
||||||
|
border: 1.5px solid var(--color-gray-300);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
||||||
|
}
|
||||||
|
.ds-input::placeholder { color: var(--color-gray-400); }
|
||||||
|
.ds-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
box-shadow: 0 0 0 3px var(--color-primary-bg);
|
||||||
|
}
|
||||||
|
.ds-input-error { border-color: var(--color-error); }
|
||||||
|
.ds-input-error:focus { box-shadow: 0 0 0 3px var(--color-error-bg); }
|
||||||
|
.ds-error-text { font-size: var(--text-xs); color: var(--color-error); margin-top: var(--space-1); }
|
||||||
|
|
||||||
|
.ds-select {
|
||||||
|
appearance: none;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: right 12px center;
|
||||||
|
padding-right: var(--space-10);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ds-textarea {
|
||||||
|
min-height: 100px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ds-checkbox-group, .ds-radio-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
.ds-checkbox-label, .ds-radio-label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-gray-700);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ds-checkbox-label input, .ds-radio-label input {
|
||||||
|
accent-color: var(--color-primary);
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.ds-card {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid var(--color-gray-200);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: box-shadow var(--transition-base);
|
||||||
|
}
|
||||||
|
.ds-card:hover { box-shadow: var(--shadow-md); }
|
||||||
|
.ds-card-body { padding: var(--space-6); }
|
||||||
|
.ds-card-title {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
margin-bottom: var(--space-2);
|
||||||
|
}
|
||||||
|
.ds-card-text {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
.ds-card-footer {
|
||||||
|
padding: var(--space-4) var(--space-6);
|
||||||
|
border-top: 1px solid var(--color-gray-100);
|
||||||
|
background: var(--color-gray-50);
|
||||||
|
}
|
||||||
|
.ds-card-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
|
gap: var(--space-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Badges / Tags */
|
||||||
|
.ds-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-1) var(--space-3);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
}
|
||||||
|
.ds-badge-primary { background: var(--color-primary-bg); color: var(--color-primary-dark); }
|
||||||
|
.ds-badge-success { background: var(--color-success-bg); color: #1B7A43; }
|
||||||
|
.ds-badge-warning { background: var(--color-warning-bg); color: #956206; }
|
||||||
|
.ds-badge-error { background: var(--color-error-bg); color: #922B21; }
|
||||||
|
.ds-badge-info { background: var(--color-info-bg); color: #1A6FAD; }
|
||||||
|
.ds-badge-neutral { background: var(--color-gray-100); color: var(--color-gray-600); }
|
||||||
|
|
||||||
|
/* Alerts */
|
||||||
|
.ds-alert {
|
||||||
|
padding: var(--space-4) var(--space-5);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
border-left: 4px solid;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.ds-alert-success { background: var(--color-success-bg); border-color: var(--color-success); color: #1B7A43; }
|
||||||
|
.ds-alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: #956206; }
|
||||||
|
.ds-alert-error { background: var(--color-error-bg); border-color: var(--color-error); color: #922B21; }
|
||||||
|
.ds-alert-info { background: var(--color-info-bg); border-color: var(--color-info); color: #1A6FAD; }
|
||||||
|
|
||||||
|
/* Table */
|
||||||
|
.ds-table-wrapper { overflow-x: auto; }
|
||||||
|
.ds-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
}
|
||||||
|
.ds-table th {
|
||||||
|
text-align: left;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-gray-600);
|
||||||
|
background: var(--color-gray-50);
|
||||||
|
border-bottom: 2px solid var(--color-gray-200);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
.ds-table td {
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
border-bottom: 1px solid var(--color-gray-100);
|
||||||
|
color: var(--color-gray-700);
|
||||||
|
}
|
||||||
|
.ds-table tbody tr:hover { background: var(--color-gray-50); }
|
||||||
|
|
||||||
|
/* Avatar */
|
||||||
|
.ds-avatar {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.ds-avatar-sm { width: 32px; height: 32px; font-size: var(--text-xs); }
|
||||||
|
.ds-avatar-md { width: 40px; height: 40px; font-size: var(--text-sm); }
|
||||||
|
.ds-avatar-lg { width: 56px; height: 56px; font-size: var(--text-lg); }
|
||||||
|
|
||||||
|
/* Utility */
|
||||||
|
.ds-flex { display: flex; }
|
||||||
|
.ds-gap-2 { gap: var(--space-2); }
|
||||||
|
.ds-gap-3 { gap: var(--space-3); }
|
||||||
|
.ds-gap-4 { gap: var(--space-4); }
|
||||||
|
.ds-items-center { align-items: center; }
|
||||||
|
.ds-mt-2 { margin-top: var(--space-2); }
|
||||||
|
.ds-mt-4 { margin-top: var(--space-4); }
|
||||||
|
.ds-mb-4 { margin-bottom: var(--space-4); }
|
||||||
|
.ds-text-center { text-align: center; }
|
||||||
|
|
||||||
|
/* Spacing Demo */
|
||||||
|
.ds-spacing-demo {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: var(--space-4);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.ds-spacing-block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
}
|
||||||
|
.ds-spacing-box {
|
||||||
|
background: var(--color-primary-bg);
|
||||||
|
border: 1px solid var(--color-primary-light);
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
.ds-spacing-label {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Shadow Demo */
|
||||||
|
.ds-shadow-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||||
|
gap: var(--space-6);
|
||||||
|
}
|
||||||
|
.ds-shadow-box {
|
||||||
|
padding: var(--space-6);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
background: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Radius Demo */
|
||||||
|
.ds-radius-grid {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-6);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.ds-radius-box {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: var(--color-primary-bg);
|
||||||
|
border: 2px solid var(--color-primary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
color: var(--color-primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 640px) {
|
||||||
|
.ds-page { padding: var(--space-4) var(--space-4); }
|
||||||
|
.ds-header { padding: var(--space-10) var(--space-4); }
|
||||||
|
.ds-header h1 { font-size: var(--text-3xl); }
|
||||||
|
.ds-color-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
|
||||||
|
.ds-type-row { flex-direction: column; gap: var(--space-2); }
|
||||||
|
.ds-type-meta { flex: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="ds-page">
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="ds-header">
|
||||||
|
<h1>Payfrit Design System</h1>
|
||||||
|
<p>v1.0 — Brand colors, typography, components, and patterns</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ==================== COLORS ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Color Palette</h2>
|
||||||
|
|
||||||
|
<div class="ds-subsection">
|
||||||
|
<h3 class="ds-subsection-title">Brand Colors</h3>
|
||||||
|
<div class="ds-color-grid">
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#0D6E6E"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Primary</div><div class="ds-swatch-hex">#0D6E6E</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#14A3A3"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Primary Light</div><div class="ds-swatch-hex">#14A3A3</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#094F4F"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Primary Dark</div><div class="ds-swatch-hex">#094F4F</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#E6F5F5"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Primary BG</div><div class="ds-swatch-hex">#E6F5F5</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#F5A623"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Accent</div><div class="ds-swatch-hex">#F5A623</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#FFCF70"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Accent Light</div><div class="ds-swatch-hex">#FFCF70</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-subsection">
|
||||||
|
<h3 class="ds-subsection-title">Semantic Colors</h3>
|
||||||
|
<div class="ds-color-grid">
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#2ECC71"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Success</div><div class="ds-swatch-hex">#2ECC71</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#F39C12"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Warning</div><div class="ds-swatch-hex">#F39C12</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#E74C3C"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Error</div><div class="ds-swatch-hex">#E74C3C</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-swatch">
|
||||||
|
<div class="ds-swatch-color" style="background:#3498DB"></div>
|
||||||
|
<div class="ds-swatch-info"><div class="ds-swatch-name">Info</div><div class="ds-swatch-hex">#3498DB</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-subsection">
|
||||||
|
<h3 class="ds-subsection-title">Neutral Scale</h3>
|
||||||
|
<div class="ds-color-grid">
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#F9FAFB"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 50</div><div class="ds-swatch-hex">#F9FAFB</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#F3F4F6"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 100</div><div class="ds-swatch-hex">#F3F4F6</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#E5E7EB"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 200</div><div class="ds-swatch-hex">#E5E7EB</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#D1D5DB"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 300</div><div class="ds-swatch-hex">#D1D5DB</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#9CA3AF"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 400</div><div class="ds-swatch-hex">#9CA3AF</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#6B7280"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 500</div><div class="ds-swatch-hex">#6B7280</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#4B5563"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 600</div><div class="ds-swatch-hex">#4B5563</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#374151"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 700</div><div class="ds-swatch-hex">#374151</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#1F2937"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 800</div><div class="ds-swatch-hex">#1F2937</div></div></div>
|
||||||
|
<div class="ds-swatch"><div class="ds-swatch-color" style="background:#111827"></div><div class="ds-swatch-info"><div class="ds-swatch-name">Gray 900</div><div class="ds-swatch-hex">#111827</div></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== TYPOGRAPHY ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Typography</h2>
|
||||||
|
<p class="ds-mb-4" style="color:var(--color-gray-500); font-size:var(--text-sm);">Font: <strong>Inter</strong> — Fallback: system sans-serif stack</p>
|
||||||
|
|
||||||
|
<div class="ds-type-row">
|
||||||
|
<div class="ds-type-meta">4xl / 36px<br>Bold</div>
|
||||||
|
<div style="font-size:var(--text-4xl); font-weight:var(--font-bold); line-height:var(--leading-tight);">Page Heading</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-type-row">
|
||||||
|
<div class="ds-type-meta">3xl / 30px<br>Bold</div>
|
||||||
|
<div style="font-size:var(--text-3xl); font-weight:var(--font-bold); line-height:var(--leading-tight);">Section Title</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-type-row">
|
||||||
|
<div class="ds-type-meta">2xl / 24px<br>Semibold</div>
|
||||||
|
<div style="font-size:var(--text-2xl); font-weight:var(--font-semibold);">Card Title</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-type-row">
|
||||||
|
<div class="ds-type-meta">xl / 20px<br>Semibold</div>
|
||||||
|
<div style="font-size:var(--text-xl); font-weight:var(--font-semibold);">Subsection Heading</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-type-row">
|
||||||
|
<div class="ds-type-meta">lg / 18px<br>Medium</div>
|
||||||
|
<div style="font-size:var(--text-lg); font-weight:var(--font-medium);">Lead paragraph or intro text</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-type-row">
|
||||||
|
<div class="ds-type-meta">base / 16px<br>Normal</div>
|
||||||
|
<div style="font-size:var(--text-base);">Body text. This is the default reading size for all paragraph content across the Payfrit platform.</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-type-row">
|
||||||
|
<div class="ds-type-meta">sm / 14px<br>Normal</div>
|
||||||
|
<div style="font-size:var(--text-sm);">Secondary text, table content, form labels, and supporting information.</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-type-row">
|
||||||
|
<div class="ds-type-meta">xs / 12px<br>Medium</div>
|
||||||
|
<div style="font-size:var(--text-xs); font-weight:var(--font-medium);">CAPTIONS, BADGES, TIMESTAMPS, AND MICRO LABELS</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== SPACING ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Spacing Scale</h2>
|
||||||
|
<p class="ds-mb-4" style="color:var(--color-gray-500); font-size:var(--text-sm);">Base unit: 4px. All spacing uses multiples of 4.</p>
|
||||||
|
<div class="ds-spacing-demo">
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:16px;height:16px;"></div><div class="ds-spacing-label">4px</div></div>
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:24px;height:24px;"></div><div class="ds-spacing-label">8px</div></div>
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:32px;height:32px;"></div><div class="ds-spacing-label">12px</div></div>
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:40px;height:40px;"></div><div class="ds-spacing-label">16px</div></div>
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:52px;height:52px;"></div><div class="ds-spacing-label">24px</div></div>
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:68px;height:68px;"></div><div class="ds-spacing-label">32px</div></div>
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:84px;height:84px;"></div><div class="ds-spacing-label">40px</div></div>
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:100px;height:100px;"></div><div class="ds-spacing-label">48px</div></div>
|
||||||
|
<div class="ds-spacing-block"><div class="ds-spacing-box" style="width:128px;height:128px;"></div><div class="ds-spacing-label">64px</div></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== SHADOWS & RADII ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Shadows & Border Radius</h2>
|
||||||
|
|
||||||
|
<div class="ds-subsection">
|
||||||
|
<h3 class="ds-subsection-title">Elevation (Shadows)</h3>
|
||||||
|
<div class="ds-shadow-grid">
|
||||||
|
<div class="ds-shadow-box" style="box-shadow: var(--shadow-sm);"><div class="ds-label">Shadow SM</div>Subtle</div>
|
||||||
|
<div class="ds-shadow-box" style="box-shadow: var(--shadow-md);"><div class="ds-label">Shadow MD</div>Cards</div>
|
||||||
|
<div class="ds-shadow-box" style="box-shadow: var(--shadow-lg);"><div class="ds-label">Shadow LG</div>Dropdowns</div>
|
||||||
|
<div class="ds-shadow-box" style="box-shadow: var(--shadow-xl);"><div class="ds-label">Shadow XL</div>Modals</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-subsection ds-mt-4">
|
||||||
|
<h3 class="ds-subsection-title">Border Radius</h3>
|
||||||
|
<div class="ds-radius-grid">
|
||||||
|
<div class="ds-radius-box" style="border-radius:var(--radius-sm);">4px</div>
|
||||||
|
<div class="ds-radius-box" style="border-radius:var(--radius-md);">8px</div>
|
||||||
|
<div class="ds-radius-box" style="border-radius:var(--radius-lg);">12px</div>
|
||||||
|
<div class="ds-radius-box" style="border-radius:var(--radius-xl);">16px</div>
|
||||||
|
<div class="ds-radius-box" style="border-radius:var(--radius-full);">Full</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== BUTTONS ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Buttons</h2>
|
||||||
|
|
||||||
|
<div class="ds-subsection">
|
||||||
|
<h3 class="ds-subsection-title">Variants</h3>
|
||||||
|
<div class="ds-btn-row">
|
||||||
|
<button class="ds-btn ds-btn-primary">Primary</button>
|
||||||
|
<button class="ds-btn ds-btn-secondary">Secondary</button>
|
||||||
|
<button class="ds-btn ds-btn-accent">Accent</button>
|
||||||
|
<button class="ds-btn ds-btn-ghost">Ghost</button>
|
||||||
|
<button class="ds-btn ds-btn-danger">Danger</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-subsection">
|
||||||
|
<h3 class="ds-subsection-title">Sizes</h3>
|
||||||
|
<div class="ds-btn-row">
|
||||||
|
<button class="ds-btn ds-btn-primary ds-btn-sm">Small</button>
|
||||||
|
<button class="ds-btn ds-btn-primary">Default</button>
|
||||||
|
<button class="ds-btn ds-btn-primary ds-btn-lg">Large</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-subsection">
|
||||||
|
<h3 class="ds-subsection-title">States</h3>
|
||||||
|
<div class="ds-btn-row">
|
||||||
|
<button class="ds-btn ds-btn-primary">Normal</button>
|
||||||
|
<button class="ds-btn ds-btn-primary" disabled>Disabled</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== FORM INPUTS ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Form Inputs</h2>
|
||||||
|
<div style="max-width: 480px;">
|
||||||
|
|
||||||
|
<div class="ds-form-group">
|
||||||
|
<label class="ds-form-label">Full Name</label>
|
||||||
|
<input type="text" class="ds-input" placeholder="e.g. Jane Doe">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-form-group">
|
||||||
|
<label class="ds-form-label">Email Address</label>
|
||||||
|
<input type="email" class="ds-input" placeholder="jane@example.com">
|
||||||
|
<div class="ds-form-hint">We'll never share your email.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-form-group">
|
||||||
|
<label class="ds-form-label">Amount (Error state)</label>
|
||||||
|
<input type="text" class="ds-input ds-input-error" value="abc">
|
||||||
|
<div class="ds-error-text">Please enter a valid dollar amount.</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-form-group">
|
||||||
|
<label class="ds-form-label">Plan Type</label>
|
||||||
|
<select class="ds-input ds-select">
|
||||||
|
<option>Select a plan...</option>
|
||||||
|
<option>Basic</option>
|
||||||
|
<option>Standard</option>
|
||||||
|
<option>Premium</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-form-group">
|
||||||
|
<label class="ds-form-label">Notes</label>
|
||||||
|
<textarea class="ds-input ds-textarea" placeholder="Additional notes..."></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-form-group">
|
||||||
|
<label class="ds-form-label">Notifications</label>
|
||||||
|
<div class="ds-checkbox-group">
|
||||||
|
<label class="ds-checkbox-label"><input type="checkbox" checked> Email notifications</label>
|
||||||
|
<label class="ds-checkbox-label"><input type="checkbox"> SMS notifications</label>
|
||||||
|
<label class="ds-checkbox-label"><input type="checkbox"> Push notifications</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-form-group">
|
||||||
|
<label class="ds-form-label">Payment Frequency</label>
|
||||||
|
<div class="ds-radio-group">
|
||||||
|
<label class="ds-radio-label"><input type="radio" name="freq" checked> Weekly</label>
|
||||||
|
<label class="ds-radio-label"><input type="radio" name="freq"> Bi-weekly</label>
|
||||||
|
<label class="ds-radio-label"><input type="radio" name="freq"> Monthly</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="ds-btn ds-btn-primary ds-btn-lg" style="width:100%;">Submit</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== CARDS ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Cards</h2>
|
||||||
|
<div class="ds-card-grid">
|
||||||
|
|
||||||
|
<div class="ds-card">
|
||||||
|
<div class="ds-card-body">
|
||||||
|
<div class="ds-flex ds-items-center ds-gap-3 ds-mb-4">
|
||||||
|
<div class="ds-avatar ds-avatar-md">JD</div>
|
||||||
|
<div>
|
||||||
|
<div class="ds-card-title" style="margin-bottom:0">Jane Doe</div>
|
||||||
|
<div style="font-size:var(--text-xs); color:var(--color-gray-400);">Member since 2025</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-card-text">HSA balance: <strong style="color:var(--color-gray-900);">$2,450.00</strong></div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-card-footer ds-flex ds-items-center" style="justify-content:space-between;">
|
||||||
|
<span class="ds-badge ds-badge-success">Active</span>
|
||||||
|
<button class="ds-btn ds-btn-ghost ds-btn-sm">View Details</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-card">
|
||||||
|
<div class="ds-card-body">
|
||||||
|
<div class="ds-card-title">Monthly Summary</div>
|
||||||
|
<div class="ds-card-text" style="margin-bottom:var(--space-4);">Your spending for March 2026</div>
|
||||||
|
<div style="font-size:var(--text-3xl); font-weight:var(--font-bold); color:var(--color-primary);">$1,234.56</div>
|
||||||
|
<div style="font-size:var(--text-xs); color:var(--color-success); margin-top:var(--space-1);">-12% from last month</div>
|
||||||
|
</div>
|
||||||
|
<div class="ds-card-footer">
|
||||||
|
<button class="ds-btn ds-btn-secondary ds-btn-sm" style="width:100%;">View Breakdown</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ds-card">
|
||||||
|
<div class="ds-card-body">
|
||||||
|
<div class="ds-card-title">Quick Actions</div>
|
||||||
|
<div class="ds-card-text ds-mb-4">Common tasks you can do right now.</div>
|
||||||
|
<div style="display:flex; flex-direction:column; gap:var(--space-2);">
|
||||||
|
<button class="ds-btn ds-btn-primary ds-btn-sm" style="width:100%;">Make a Payment</button>
|
||||||
|
<button class="ds-btn ds-btn-secondary ds-btn-sm" style="width:100%;">Request Reimbursement</button>
|
||||||
|
<button class="ds-btn ds-btn-ghost ds-btn-sm" style="width:100%;">Upload Receipt</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== BADGES ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Badges & Tags</h2>
|
||||||
|
<div class="ds-flex ds-gap-3" style="flex-wrap:wrap;">
|
||||||
|
<span class="ds-badge ds-badge-primary">Primary</span>
|
||||||
|
<span class="ds-badge ds-badge-success">Approved</span>
|
||||||
|
<span class="ds-badge ds-badge-warning">Pending</span>
|
||||||
|
<span class="ds-badge ds-badge-error">Declined</span>
|
||||||
|
<span class="ds-badge ds-badge-info">Processing</span>
|
||||||
|
<span class="ds-badge ds-badge-neutral">Draft</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== ALERTS ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Alerts</h2>
|
||||||
|
<div class="ds-alert ds-alert-success"><strong>Success!</strong> Your payment of $250.00 has been processed.</div>
|
||||||
|
<div class="ds-alert ds-alert-warning"><strong>Heads up.</strong> Your HSA balance is running low.</div>
|
||||||
|
<div class="ds-alert ds-alert-error"><strong>Error.</strong> We could not process your transaction. Please try again.</div>
|
||||||
|
<div class="ds-alert ds-alert-info"><strong>Info:</strong> New plan options are available for your account.</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== TABLE ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Data Table</h2>
|
||||||
|
<div class="ds-table-wrapper">
|
||||||
|
<table class="ds-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Date</th>
|
||||||
|
<th>Description</th>
|
||||||
|
<th>Category</th>
|
||||||
|
<th>Amount</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Mar 18, 2026</td>
|
||||||
|
<td>CVS Pharmacy</td>
|
||||||
|
<td>Prescription</td>
|
||||||
|
<td>$45.00</td>
|
||||||
|
<td><span class="ds-badge ds-badge-success">Approved</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Mar 15, 2026</td>
|
||||||
|
<td>Dr. Smith Office Visit</td>
|
||||||
|
<td>Medical</td>
|
||||||
|
<td>$180.00</td>
|
||||||
|
<td><span class="ds-badge ds-badge-warning">Pending</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Mar 12, 2026</td>
|
||||||
|
<td>LensCrafters</td>
|
||||||
|
<td>Vision</td>
|
||||||
|
<td>$320.00</td>
|
||||||
|
<td><span class="ds-badge ds-badge-success">Approved</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Mar 10, 2026</td>
|
||||||
|
<td>Gym Membership</td>
|
||||||
|
<td>Wellness</td>
|
||||||
|
<td>$49.99</td>
|
||||||
|
<td><span class="ds-badge ds-badge-error">Declined</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ==================== AVATARS ==================== -->
|
||||||
|
<section class="ds-section">
|
||||||
|
<h2 class="ds-section-title">Avatars</h2>
|
||||||
|
<div class="ds-flex ds-items-center ds-gap-4">
|
||||||
|
<div class="ds-avatar ds-avatar-sm">A</div>
|
||||||
|
<div class="ds-avatar ds-avatar-md">JD</div>
|
||||||
|
<div class="ds-avatar ds-avatar-lg">PF</div>
|
||||||
|
<div class="ds-avatar ds-avatar-lg" style="background:var(--color-accent);">$</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div style="text-align:center; padding:var(--space-12) 0 var(--space-6); color:var(--color-gray-400); font-size:var(--text-sm);">
|
||||||
|
Payfrit Design System v1.0 — Maintained by Ava — 2026
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
759
design/avatars/avatar-styles.html
Normal file
759
design/avatars/avatar-styles.html
Normal file
|
|
@ -0,0 +1,759 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Payfrit Bot Avatars — Style Options</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: #0f1114;
|
||||||
|
color: #e0e0e0;
|
||||||
|
padding: 40px 24px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
color: #888;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.style-desc {
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
.section { margin-bottom: 64px; }
|
||||||
|
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.card .name {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-top: 8px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
.card .role {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #777;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ======== STYLE 1: Geometric Shapes ======== */
|
||||||
|
.geo-avatar {
|
||||||
|
width: 80px; height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.geo-avatar .initials {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: rgba(255,255,255,0.95);
|
||||||
|
z-index: 2;
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.geo-avatar .pattern {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ======== STYLE 2: Pixel Creatures ======== */
|
||||||
|
.pixel-avatar {
|
||||||
|
width: 80px; height: 80px;
|
||||||
|
border-radius: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
image-rendering: pixelated;
|
||||||
|
}
|
||||||
|
.pixel-avatar svg { width: 56px; height: 56px; }
|
||||||
|
|
||||||
|
/* ======== STYLE 3: Abstract Blobs ======== */
|
||||||
|
.blob-avatar {
|
||||||
|
width: 80px; height: 80px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.blob-avatar svg { width: 80px; height: 80px; }
|
||||||
|
|
||||||
|
/* Size preview strip */
|
||||||
|
.sizes {
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 32px;
|
||||||
|
padding: 20px;
|
||||||
|
background: #1a1d21;
|
||||||
|
border-radius: 12px;
|
||||||
|
max-width: 900px;
|
||||||
|
}
|
||||||
|
.sizes .label {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.size-item { text-align: center; }
|
||||||
|
|
||||||
|
/* Chat preview */
|
||||||
|
.chat-preview {
|
||||||
|
background: #1a1d21;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
max-width: 500px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.chat-msg {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
.chat-msg .mini-av {
|
||||||
|
width: 32px; height: 32px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.chat-msg .mini-av span {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 800;
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
}
|
||||||
|
.chat-msg .text .who {
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #ddd;
|
||||||
|
}
|
||||||
|
.chat-msg .text .msg {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid #2a2d31;
|
||||||
|
margin: 48px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 3px 10px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<h1>Bot Avatar Styles</h1>
|
||||||
|
<p class="subtitle">3 style options for @john to review. Each designed to be distinct at 32px sidebar size.</p>
|
||||||
|
|
||||||
|
<!-- ============================================ -->
|
||||||
|
<!-- STYLE 1: GRADIENT GEO -->
|
||||||
|
<!-- ============================================ -->
|
||||||
|
<div class="section">
|
||||||
|
<span class="tag" style="background:#2d1f5e;color:#a78bfa;">Option A</span>
|
||||||
|
<h2>Gradient Geo</h2>
|
||||||
|
<p class="style-desc">Bold gradient backgrounds with geometric accent shapes. Each person gets a unique color pairing. Clean, modern, highly readable at small sizes. The safest/most professional option.</p>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<!-- John -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #f59e0b, #ef4444);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="65" cy="15" r="20" fill="rgba(255,255,255,0.1)"/><circle cx="60" cy="70" r="10" fill="rgba(255,255,255,0.07)"/></svg>
|
||||||
|
<span class="initials">J</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">John</div>
|
||||||
|
<div class="role">Founder</div>
|
||||||
|
</div>
|
||||||
|
<!-- Raj -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="50" y="-5" width="30" height="30" rx="4" transform="rotate(25 65 10)" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">R</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Raj</div>
|
||||||
|
<div class="role">Bot Infra</div>
|
||||||
|
</div>
|
||||||
|
<!-- Sarah -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #ec4899, #f472b6);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><polygon points="60,5 75,30 45,30" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">S</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Sarah</div>
|
||||||
|
<div class="role">Frontend</div>
|
||||||
|
</div>
|
||||||
|
<!-- Mike -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #10b981, #059669);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="55" y="50" width="20" height="20" rx="3" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">M</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Mike</div>
|
||||||
|
<div class="role">Backend</div>
|
||||||
|
</div>
|
||||||
|
<!-- Luna -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #6366f1, #818cf8);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="60" r="15" fill="rgba(255,255,255,0.08)"/><circle cx="60" cy="20" r="8" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">L</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Luna</div>
|
||||||
|
<div class="role">QA</div>
|
||||||
|
</div>
|
||||||
|
<!-- Nora -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #f97316, #fb923c);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><polygon points="10,65 25,45 40,65" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">N</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Nora</div>
|
||||||
|
<div class="role">Sponsor Portal</div>
|
||||||
|
</div>
|
||||||
|
<!-- Koda -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #14b8a6, #2dd4bf);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="5" y="5" width="18" height="18" rx="2" transform="rotate(15 14 14)" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">K</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Koda</div>
|
||||||
|
<div class="role">Kotlin</div>
|
||||||
|
</div>
|
||||||
|
<!-- Schwifty -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #84cc16, #22c55e);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="65" cy="60" r="16" fill="rgba(255,255,255,0.08)"/></svg>
|
||||||
|
<span class="initials">Sc</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Schwifty</div>
|
||||||
|
<div class="role">DevOps</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ava -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #e879f9, #c084fc);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="15" cy="20" r="12" fill="rgba(255,255,255,0.1)"/><circle cx="65" cy="65" r="8" fill="rgba(255,255,255,0.07)"/></svg>
|
||||||
|
<span class="initials">A</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Ava</div>
|
||||||
|
<div class="role">Designer</div>
|
||||||
|
</div>
|
||||||
|
<!-- Kira -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #f43f5e, #fb7185);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><polygon points="60,55 75,75 45,75" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">Ki</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Kira</div>
|
||||||
|
<div class="role">General Agent</div>
|
||||||
|
</div>
|
||||||
|
<!-- Jude -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #0ea5e9, #38bdf8);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="50" y="50" width="22" height="22" rx="4" transform="rotate(20 61 61)" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">Ju</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Jude</div>
|
||||||
|
<div class="role">WordPress</div>
|
||||||
|
</div>
|
||||||
|
<!-- Priya -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #f472b6, #fb923c);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><circle cx="60" cy="15" r="14" fill="rgba(255,255,255,0.08)"/></svg>
|
||||||
|
<span class="initials">P</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Priya</div>
|
||||||
|
<div class="role">HR & Ops</div>
|
||||||
|
</div>
|
||||||
|
<!-- Zara -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #a78bfa, #c4b5fd);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><polygon points="15,10 30,10 22,25" fill="rgba(255,255,255,0.1)"/></svg>
|
||||||
|
<span class="initials">Z</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Zara</div>
|
||||||
|
<div class="role">User Portal</div>
|
||||||
|
</div>
|
||||||
|
<!-- Alex -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="geo-avatar" style="background: linear-gradient(135deg, #facc15, #a3e635);">
|
||||||
|
<svg class="pattern" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="55" width="16" height="16" rx="3" fill="rgba(0,0,0,0.08)"/></svg>
|
||||||
|
<span class="initials" style="color:rgba(0,0,0,0.75);">Al</span>
|
||||||
|
</div>
|
||||||
|
<div class="name">Alex</div>
|
||||||
|
<div class="role">Weedops</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chat sidebar preview -->
|
||||||
|
<div style="margin-top:32px;">
|
||||||
|
<p style="font-size:12px;color:#666;margin-bottom:8px;">Chat sidebar preview (32px):</p>
|
||||||
|
<div class="chat-preview">
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="background:linear-gradient(135deg,#f59e0b,#ef4444);border-radius:50%;"><span>J</span></div>
|
||||||
|
<div class="text"><div class="who">John</div><div class="msg">new project: bot avatars and team roster guardrails</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="background:linear-gradient(135deg,#e879f9,#c084fc);border-radius:50%;"><span>A</span></div>
|
||||||
|
<div class="text"><div class="who">Ava</div><div class="msg">On it! Let me mock up a few style directions.</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="background:linear-gradient(135deg,#84cc16,#22c55e);border-radius:50%;"><span style="font-size:10px;">Sc</span></div>
|
||||||
|
<div class="text"><div class="who">Schwifty</div><div class="msg">servers all green 🟢</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;"><span>M</span></div>
|
||||||
|
<div class="text"><div class="who">Mike</div><div class="msg">API endpoint deployed.</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="divider">
|
||||||
|
|
||||||
|
<!-- ============================================ -->
|
||||||
|
<!-- STYLE 2: EMOJI MASCOTS -->
|
||||||
|
<!-- ============================================ -->
|
||||||
|
<div class="section">
|
||||||
|
<span class="tag" style="background:#1e3a2f;color:#6ee7b7;">Option B</span>
|
||||||
|
<h2>Emoji Mascots</h2>
|
||||||
|
<p class="style-desc">Each bot gets a unique emoji/icon "mascot" that reflects their role, on a soft colored background. Fun, instantly recognizable, very distinct even at tiny sizes. The most playful option.</p>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#fef3c7;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<text x="32" y="44" text-anchor="middle" font-size="36">👑</text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">John</div><div class="role">Founder</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#ede9fe;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🤖</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Raj</div><div class="role">Bot Infra</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#fce7f3;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">✨</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Sarah</div><div class="role">Frontend</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#d1fae5;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">⚙️</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Mike</div><div class="role">Backend</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#e0e7ff;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🔍</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Luna</div><div class="role">QA</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#ffedd5;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🏪</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Nora</div><div class="role">Sponsor Portal</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#ccfbf1;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">📱</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Koda</div><div class="role">Kotlin</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#ecfccb;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🛠️</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Schwifty</div><div class="role">DevOps</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#fae8ff;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🎨</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Ava</div><div class="role">Designer</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#ffe4e6;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">⚡</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Kira</div><div class="role">General Agent</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#dbeafe;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🌐</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Jude</div><div class="role">WordPress</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#fce7f3;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">📋</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Priya</div><div class="role">HR & Ops</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#ede9fe;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🚪</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Zara</div><div class="role">User Portal</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="pixel-avatar" style="background:#fef9c3;border-radius:20px;">
|
||||||
|
<svg viewBox="0 0 64 64"><text x="32" y="44" text-anchor="middle" font-size="36">🌿</text></svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Alex</div><div class="role">Weedops</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top:32px;">
|
||||||
|
<p style="font-size:12px;color:#666;margin-bottom:8px;">Chat sidebar preview (32px):</p>
|
||||||
|
<div class="chat-preview">
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="background:#fef3c7;border-radius:8px;font-size:18px;line-height:32px;text-align:center;">👑</div>
|
||||||
|
<div class="text"><div class="who">John</div><div class="msg">new project: bot avatars and team roster guardrails</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="background:#fae8ff;border-radius:8px;font-size:18px;line-height:32px;text-align:center;">🎨</div>
|
||||||
|
<div class="text"><div class="who">Ava</div><div class="msg">On it! Let me mock up a few style directions.</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="background:#ecfccb;border-radius:8px;font-size:18px;line-height:32px;text-align:center;">🛠️</div>
|
||||||
|
<div class="text"><div class="who">Schwifty</div><div class="msg">servers all green 🟢</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="background:#d1fae5;border-radius:8px;font-size:18px;line-height:32px;text-align:center;">⚙️</div>
|
||||||
|
<div class="text"><div class="who">Mike</div><div class="msg">API endpoint deployed.</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="divider">
|
||||||
|
|
||||||
|
<!-- ============================================ -->
|
||||||
|
<!-- STYLE 3: ABSTRACT FACE BLOBS -->
|
||||||
|
<!-- ============================================ -->
|
||||||
|
<div class="section">
|
||||||
|
<span class="tag" style="background:#1e293b;color:#7dd3fc;">Option C</span>
|
||||||
|
<h2>Face Blobs</h2>
|
||||||
|
<p class="style-desc">Minimal illustrated faces on organic blob shapes. Each has a unique expression, color, and blob form. Friendly, cartoon-like, clearly not photos. The most "character" option — gives each bot real personality.</p>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<!-- John - confident smile -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40 8 C60 6, 76 20, 74 42 C72 60, 56 74, 38 74 C18 74, 6 58, 8 38 C10 18, 22 10, 40 8Z" fill="#f59e0b"/>
|
||||||
|
<circle cx="30" cy="34" r="3.5" fill="#78350f"/>
|
||||||
|
<circle cx="50" cy="34" r="3.5" fill="#78350f"/>
|
||||||
|
<path d="M30 48 Q40 56 50 48" stroke="#78350f" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<circle cx="28" cy="32" r="1.2" fill="white"/>
|
||||||
|
<circle cx="48" cy="32" r="1.2" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">John</div><div class="role">Founder</div>
|
||||||
|
</div>
|
||||||
|
<!-- Raj - techy glasses -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M38 6 C58 4, 74 18, 76 40 C78 60, 62 76, 42 76 C20 76, 4 62, 6 40 C8 20, 20 8, 38 6Z" fill="#8b5cf6"/>
|
||||||
|
<rect x="22" y="28" width="14" height="11" rx="3" fill="none" stroke="#2e1065" stroke-width="2"/>
|
||||||
|
<rect x="44" y="28" width="14" height="11" rx="3" fill="none" stroke="#2e1065" stroke-width="2"/>
|
||||||
|
<line x1="36" y1="33" x2="44" y2="33" stroke="#2e1065" stroke-width="1.5"/>
|
||||||
|
<circle cx="29" cy="34" r="2.5" fill="#2e1065"/>
|
||||||
|
<circle cx="51" cy="34" r="2.5" fill="#2e1065"/>
|
||||||
|
<path d="M33 50 Q40 54 47 50" stroke="#2e1065" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Raj</div><div class="role">Bot Infra</div>
|
||||||
|
</div>
|
||||||
|
<!-- Sarah - happy eyes -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M42 7 C62 9, 75 22, 73 44 C71 64, 56 75, 36 73 C16 71, 5 56, 7 36 C9 16, 24 5, 42 7Z" fill="#ec4899"/>
|
||||||
|
<path d="M24 34 Q30 28 36 34" stroke="#831843" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<path d="M44 34 Q50 28 56 34" stroke="#831843" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<ellipse cx="40" cy="48" rx="6" ry="5" fill="#831843"/>
|
||||||
|
<ellipse cx="40" cy="47" rx="4" ry="2.5" fill="#fb7185"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Sarah</div><div class="role">Frontend</div>
|
||||||
|
</div>
|
||||||
|
<!-- Mike - focused -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40 7 C62 5, 76 22, 74 42 C72 64, 58 76, 38 74 C16 72, 4 56, 6 36 C8 16, 20 9, 40 7Z" fill="#10b981"/>
|
||||||
|
<line x1="25" y1="32" x2="35" y2="32" stroke="#064e3b" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<line x1="45" y1="32" x2="55" y2="32" stroke="#064e3b" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<circle cx="30" cy="36" r="2.5" fill="#064e3b"/>
|
||||||
|
<circle cx="50" cy="36" r="2.5" fill="#064e3b"/>
|
||||||
|
<path d="M34 50 L46 50" stroke="#064e3b" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Mike</div><div class="role">Backend</div>
|
||||||
|
</div>
|
||||||
|
<!-- Luna - curious -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M36 6 C56 4, 74 20, 74 42 C74 62, 58 76, 40 76 C20 76, 6 60, 6 40 C6 18, 18 8, 36 6Z" fill="#818cf8"/>
|
||||||
|
<circle cx="30" cy="34" r="4" fill="#1e1b4b"/>
|
||||||
|
<circle cx="52" cy="34" r="4" fill="#1e1b4b"/>
|
||||||
|
<circle cx="31" cy="32" r="1.5" fill="white"/>
|
||||||
|
<circle cx="53" cy="32" r="1.5" fill="white"/>
|
||||||
|
<ellipse cx="40" cy="50" rx="4" ry="4.5" fill="#1e1b4b"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Luna</div><div class="role">QA</div>
|
||||||
|
</div>
|
||||||
|
<!-- Nora - warm smile -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M42 8 C60 6, 76 22, 73 44 C70 66, 54 76, 36 74 C18 72, 4 56, 8 36 C12 16, 26 10, 42 8Z" fill="#f97316"/>
|
||||||
|
<circle cx="30" cy="34" r="3" fill="#7c2d12"/>
|
||||||
|
<circle cx="50" cy="34" r="3" fill="#7c2d12"/>
|
||||||
|
<path d="M28 46 Q40 56 52 46" stroke="#7c2d12" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<ellipse cx="22" cy="42" rx="4" ry="3" fill="#fb923c" opacity="0.5"/>
|
||||||
|
<ellipse cx="58" cy="42" rx="4" ry="3" fill="#fb923c" opacity="0.5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Nora</div><div class="role">Sponsor Portal</div>
|
||||||
|
</div>
|
||||||
|
<!-- Koda - determined -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40 6 C58 4, 76 18, 76 40 C76 62, 60 76, 40 76 C18 76, 4 60, 4 40 C4 18, 22 8, 40 6Z" fill="#14b8a6"/>
|
||||||
|
<line x1="22" y1="30" x2="34" y2="34" stroke="#134e4a" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<line x1="58" y1="30" x2="46" y2="34" stroke="#134e4a" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<circle cx="30" cy="38" r="2.5" fill="#134e4a"/>
|
||||||
|
<circle cx="50" cy="38" r="2.5" fill="#134e4a"/>
|
||||||
|
<path d="M34 52 Q40 56 46 52" stroke="#134e4a" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Koda</div><div class="role">Kotlin</div>
|
||||||
|
</div>
|
||||||
|
<!-- Schwifty - wild grin -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M38 5 C60 3, 78 20, 76 42 C74 66, 56 78, 36 76 C14 74, 2 56, 4 36 C6 14, 18 7, 38 5Z" fill="#84cc16"/>
|
||||||
|
<circle cx="28" cy="32" r="3.5" fill="#1a2e05"/>
|
||||||
|
<circle cx="52" cy="32" r="3.5" fill="#1a2e05"/>
|
||||||
|
<circle cx="29" cy="30" r="1.2" fill="white"/>
|
||||||
|
<circle cx="53" cy="30" r="1.2" fill="white"/>
|
||||||
|
<path d="M26 46 Q40 60 54 46" stroke="#1a2e05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<line x1="54" y1="24" x2="60" y2="18" stroke="#1a2e05" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
<line x1="56" y1="26" x2="64" y2="22" stroke="#1a2e05" stroke-width="1.5" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Schwifty</div><div class="role">DevOps</div>
|
||||||
|
</div>
|
||||||
|
<!-- Ava - creative wink -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M42 6 C64 8, 76 24, 74 44 C72 66, 56 76, 36 74 C16 72, 4 54, 8 34 C12 14, 24 4, 42 6Z" fill="#e879f9"/>
|
||||||
|
<circle cx="30" cy="34" r="3.5" fill="#4a044e"/>
|
||||||
|
<circle cx="31" cy="32" r="1.2" fill="white"/>
|
||||||
|
<path d="M46 34 Q50 30 54 34" stroke="#4a044e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<path d="M30 50 Q40 58 50 50" stroke="#4a044e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Ava</div><div class="role">Designer</div>
|
||||||
|
</div>
|
||||||
|
<!-- Kira - spark -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40 6 C60 4, 76 20, 75 42 C74 62, 58 76, 38 76 C18 76, 4 60, 5 38 C6 16, 20 8, 40 6Z" fill="#f43f5e"/>
|
||||||
|
<polygon points="28,28 30,34 34,34 31,38 32,44 28,40 24,44 25,38 22,34 26,34" fill="#881337"/>
|
||||||
|
<polygon points="48,28 50,34 54,34 51,38 52,44 48,40 44,44 45,38 42,34 46,34" fill="#881337"/>
|
||||||
|
<path d="M32 52 Q40 58 48 52" stroke="#881337" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Kira</div><div class="role">General Agent</div>
|
||||||
|
</div>
|
||||||
|
<!-- Jude - chill -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M38 7 C58 5, 76 20, 74 44 C72 66, 54 76, 36 74 C16 72, 4 56, 6 36 C8 16, 20 9, 38 7Z" fill="#0ea5e9"/>
|
||||||
|
<path d="M24 34 L36 34" stroke="#0c4a6e" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<path d="M44 34 L56 34" stroke="#0c4a6e" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
<path d="M34 50 Q40 54 46 50" stroke="#0c4a6e" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Jude</div><div class="role">WordPress</div>
|
||||||
|
</div>
|
||||||
|
<!-- Priya - organized -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40 7 C60 5, 76 22, 74 42 C72 64, 56 76, 38 76 C18 76, 4 58, 6 38 C8 16, 22 9, 40 7Z" fill="#f472b6"/>
|
||||||
|
<circle cx="30" cy="34" r="3" fill="#831843"/>
|
||||||
|
<circle cx="50" cy="34" r="3" fill="#831843"/>
|
||||||
|
<circle cx="31" cy="32.5" r="1" fill="white"/>
|
||||||
|
<circle cx="51" cy="32.5" r="1" fill="white"/>
|
||||||
|
<path d="M32 48 Q40 54 48 48" stroke="#831843" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Priya</div><div class="role">HR & Ops</div>
|
||||||
|
</div>
|
||||||
|
<!-- Zara - thoughtful -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M42 6 C62 8, 76 22, 74 44 C72 64, 56 76, 36 76 C16 76, 4 58, 6 38 C8 16, 24 4, 42 6Z" fill="#a78bfa"/>
|
||||||
|
<circle cx="30" cy="34" r="3" fill="#2e1065"/>
|
||||||
|
<circle cx="50" cy="34" r="3" fill="#2e1065"/>
|
||||||
|
<circle cx="31" cy="32" r="1.2" fill="white"/>
|
||||||
|
<circle cx="51" cy="32" r="1.2" fill="white"/>
|
||||||
|
<path d="M36 50 L44 50" stroke="#2e1065" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Zara</div><div class="role">User Portal</div>
|
||||||
|
</div>
|
||||||
|
<!-- Alex - leaf vibes -->
|
||||||
|
<div class="card">
|
||||||
|
<div class="blob-avatar">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M38 6 C56 4, 76 18, 76 40 C76 62, 58 76, 40 76 C20 76, 4 60, 4 40 C4 18, 20 8, 38 6Z" fill="#a3e635"/>
|
||||||
|
<circle cx="30" cy="34" r="3" fill="#1a2e05"/>
|
||||||
|
<circle cx="50" cy="34" r="3" fill="#1a2e05"/>
|
||||||
|
<path d="M30 48 Q40 56 50 48" stroke="#1a2e05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<path d="M54 12 Q60 8 58 16 Q56 22 52 18 Z" fill="#65a30d"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="name">Alex</div><div class="role">Weedops</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top:32px;">
|
||||||
|
<p style="font-size:12px;color:#666;margin-bottom:8px;">Chat sidebar preview (32px):</p>
|
||||||
|
<div class="chat-preview">
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
||||||
|
<path d="M40 8 C60 6, 76 20, 74 42 C72 60, 56 74, 38 74 C18 74, 6 58, 8 38 C10 18, 22 10, 40 8Z" fill="#f59e0b"/>
|
||||||
|
<circle cx="30" cy="34" r="3.5" fill="#78350f"/><circle cx="50" cy="34" r="3.5" fill="#78350f"/>
|
||||||
|
<path d="M30 48 Q40 56 50 48" stroke="#78350f" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<circle cx="28" cy="32" r="1.2" fill="white"/><circle cx="48" cy="32" r="1.2" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text"><div class="who">John</div><div class="msg">new project: bot avatars and team roster guardrails</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
||||||
|
<path d="M42 6 C64 8, 76 24, 74 44 C72 66, 56 76, 36 74 C16 72, 4 54, 8 34 C12 14, 24 4, 42 6Z" fill="#e879f9"/>
|
||||||
|
<circle cx="30" cy="34" r="3.5" fill="#4a044e"/><circle cx="31" cy="32" r="1.2" fill="white"/>
|
||||||
|
<path d="M46 34 Q50 30 54 34" stroke="#4a044e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
<path d="M30 50 Q40 58 50 50" stroke="#4a044e" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text"><div class="who">Ava</div><div class="msg">On it! Let me mock up a few style directions.</div></div>
|
||||||
|
</div>
|
||||||
|
<div class="chat-msg">
|
||||||
|
<div class="mini-av" style="width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;">
|
||||||
|
<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
|
||||||
|
<path d="M38 5 C60 3, 78 20, 76 42 C74 66, 56 78, 36 76 C14 74, 2 56, 4 36 C6 14, 18 7, 38 5Z" fill="#84cc16"/>
|
||||||
|
<circle cx="28" cy="32" r="3.5" fill="#1a2e05"/><circle cx="52" cy="32" r="3.5" fill="#1a2e05"/>
|
||||||
|
<path d="M26 46 Q40 60 54 46" stroke="#1a2e05" stroke-width="2.5" fill="none" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="text"><div class="who">Schwifty</div><div class="msg">servers all green 🟢</div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="divider">
|
||||||
|
|
||||||
|
<!-- ============================================ -->
|
||||||
|
<!-- SUMMARY -->
|
||||||
|
<!-- ============================================ -->
|
||||||
|
<div class="section">
|
||||||
|
<h2>Quick Comparison</h2>
|
||||||
|
<table style="border-collapse:collapse;font-size:14px;max-width:600px;margin-top:16px;">
|
||||||
|
<thead>
|
||||||
|
<tr style="border-bottom:1px solid #333;">
|
||||||
|
<th style="text-align:left;padding:8px 16px;color:#999;">Style</th>
|
||||||
|
<th style="text-align:left;padding:8px 16px;color:#999;">Vibe</th>
|
||||||
|
<th style="text-align:left;padding:8px 16px;color:#999;">32px Readability</th>
|
||||||
|
<th style="text-align:left;padding:8px 16px;color:#999;">Uniqueness</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr style="border-bottom:1px solid #222;">
|
||||||
|
<td style="padding:8px 16px;font-weight:600;">A — Gradient Geo</td>
|
||||||
|
<td style="padding:8px 16px;">Professional, clean</td>
|
||||||
|
<td style="padding:8px 16px;color:#22c55e;">★★★★★</td>
|
||||||
|
<td style="padding:8px 16px;color:#f59e0b;">★★★☆☆</td>
|
||||||
|
</tr>
|
||||||
|
<tr style="border-bottom:1px solid #222;">
|
||||||
|
<td style="padding:8px 16px;font-weight:600;">B — Emoji Mascots</td>
|
||||||
|
<td style="padding:8px 16px;">Playful, fun</td>
|
||||||
|
<td style="padding:8px 16px;color:#22c55e;">★★★★☆</td>
|
||||||
|
<td style="padding:8px 16px;color:#22c55e;">★★★★★</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td style="padding:8px 16px;font-weight:600;">C — Face Blobs</td>
|
||||||
|
<td style="padding:8px 16px;">Friendly, character-driven</td>
|
||||||
|
<td style="padding:8px 16px;color:#f59e0b;">★★★☆☆</td>
|
||||||
|
<td style="padding:8px 16px;color:#22c55e;">★★★★★</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p style="color:#666;font-size:13px;margin-top:20px;">My recommendation: <strong style="color:#e0e0e0;">Option C (Face Blobs)</strong> gives the most personality and makes each bot feel like a real character. But if you want maximum readability at small sizes, <strong style="color:#e0e0e0;">Option A (Gradient Geo)</strong> is the safest bet. We could also mix — use Face Blobs as the default but fall back to Gradient Geo for contexts where we need tiny avatars.</p>
|
||||||
|
<p style="color:#666;font-size:13px;margin-top:12px;">File: <code style="color:#a78bfa;">/home/ava/workspace/design/avatars/avatar-styles.html</code></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
69
design/brand-tokens.json
Normal file
69
design/brand-tokens.json
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
{
|
||||||
|
"brandName": "Sprinter",
|
||||||
|
"logoPath": "",
|
||||||
|
"version": "1.0",
|
||||||
|
"colors": {
|
||||||
|
"primary": "#0D6E6E",
|
||||||
|
"primaryLight": "#14A3A3",
|
||||||
|
"primaryDark": "#094F4F",
|
||||||
|
"primaryBg": "#E6F5F5",
|
||||||
|
"accent": "#F5A623",
|
||||||
|
"accentLight": "#FFCF70",
|
||||||
|
"accentDark": "#C4841A",
|
||||||
|
"background": "#FFFFFF",
|
||||||
|
"surface": "#F9FAFB",
|
||||||
|
"surfaceAlt": "#F3F4F6",
|
||||||
|
"textPrimary": "#1A1A1A",
|
||||||
|
"textSecondary": "#6B7280",
|
||||||
|
"textOnPrimary": "#FFFFFF",
|
||||||
|
"textOnAccent": "#1A1A1A",
|
||||||
|
"border": "#E5E7EB",
|
||||||
|
"borderStrong": "#D1D5DB",
|
||||||
|
"error": "#E74C3C",
|
||||||
|
"errorBg": "#FDEDEC",
|
||||||
|
"success": "#2ECC71",
|
||||||
|
"successBg": "#EAFAF1",
|
||||||
|
"warning": "#F39C12",
|
||||||
|
"warningBg": "#FEF5E7",
|
||||||
|
"info": "#3498DB",
|
||||||
|
"infoBg": "#EBF5FB"
|
||||||
|
},
|
||||||
|
"typography": {
|
||||||
|
"fontFamily": "Segoe UI, Inter, -apple-system, BlinkMacSystemFont, sans-serif",
|
||||||
|
"fontFamilyMono": "JetBrains Mono, Fira Code, monospace",
|
||||||
|
"fontSizeXs": 12,
|
||||||
|
"fontSizeSmall": 14,
|
||||||
|
"fontSizeBase": 16,
|
||||||
|
"fontSizeLarge": 18,
|
||||||
|
"fontSizeH3": 20,
|
||||||
|
"fontSizeH2": 24,
|
||||||
|
"fontSizeH1": 30,
|
||||||
|
"fontSizeDisplay": 36,
|
||||||
|
"fontWeightNormal": 400,
|
||||||
|
"fontWeightMedium": 500,
|
||||||
|
"fontWeightSemibold": 600,
|
||||||
|
"fontWeightBold": 700,
|
||||||
|
"lineHeightTight": 1.25,
|
||||||
|
"lineHeightNormal": 1.5,
|
||||||
|
"lineHeightRelaxed": 1.625
|
||||||
|
},
|
||||||
|
"spacing": {
|
||||||
|
"unit": 4,
|
||||||
|
"paddingXs": 4,
|
||||||
|
"paddingSmall": 8,
|
||||||
|
"paddingBase": 12,
|
||||||
|
"paddingMedium": 16,
|
||||||
|
"paddingLarge": 24,
|
||||||
|
"paddingXl": 32,
|
||||||
|
"paddingXxl": 48,
|
||||||
|
"borderRadius": 8,
|
||||||
|
"borderRadiusSmall": 4,
|
||||||
|
"borderRadiusLarge": 12,
|
||||||
|
"borderRadiusPill": 9999
|
||||||
|
},
|
||||||
|
"elevation": {
|
||||||
|
"shadowSmall": "0 1px 2px rgba(0,0,0,0.05)",
|
||||||
|
"shadowMedium": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)",
|
||||||
|
"shadowLarge": "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)"
|
||||||
|
}
|
||||||
|
}
|
||||||
1327
page-template.html
Normal file
1327
page-template.html
Normal file
File diff suppressed because it is too large
Load diff
125
payfrit-green-swatch.html
Normal file
125
payfrit-green-swatch.html
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Payfrit Green — Color Swatch</title>
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: #f9fafb;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 420px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.swatch-main {
|
||||||
|
background: #00d974;
|
||||||
|
height: 220px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.swatch-main h1 {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 700;
|
||||||
|
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
.swatch-main .hex {
|
||||||
|
color: rgba(255,255,255,0.9);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
.variations {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
.var-swatch {
|
||||||
|
padding: 1.25rem 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.var-swatch .label {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
.var-swatch .hex-small {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
padding: 1.5rem;
|
||||||
|
border-top: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
.info h2 {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: #6b7280;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.info p {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
color: #374151;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
.info code {
|
||||||
|
background: #f3f4f6;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.source {
|
||||||
|
padding: 1rem 1.5rem;
|
||||||
|
background: #f9fafb;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #9ca3af;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch-main">
|
||||||
|
<h1>Payfrit Green</h1>
|
||||||
|
<div class="hex">#00D974</div>
|
||||||
|
</div>
|
||||||
|
<div class="variations">
|
||||||
|
<div class="var-swatch" style="background:#00b862; color:#fff;">
|
||||||
|
<div class="label" style="color:rgba(255,255,255,0.8);">Dark</div>
|
||||||
|
<div class="hex-small" style="color:#fff;">#00B862</div>
|
||||||
|
</div>
|
||||||
|
<div class="var-swatch" style="background:#00d974; color:#fff;">
|
||||||
|
<div class="label" style="color:rgba(255,255,255,0.8);">Primary</div>
|
||||||
|
<div class="hex-small" style="color:#fff;">#00D974</div>
|
||||||
|
</div>
|
||||||
|
<div class="var-swatch" style="background:#33ff9f; color:#064e2b;">
|
||||||
|
<div class="label" style="color:#064e2b;">Light</div>
|
||||||
|
<div class="hex-small" style="color:#064e2b;">#33FF9F</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="info">
|
||||||
|
<h2>Source</h2>
|
||||||
|
<p>Found in <code>portal/portal.css</code> from <strong>payfrit-biz</strong> repo as the <code>--primary</code> CSS variable. This is the live green used across the Payfrit portal.</p>
|
||||||
|
</div>
|
||||||
|
<div class="source">
|
||||||
|
<code>--primary: #00d974;</code> | <code>--primary-dark: #00b862;</code> | <code>--primary-light: #33ff9f;</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
805
sponsor-token-purchase.html
Normal file
805
sponsor-token-purchase.html
Normal file
|
|
@ -0,0 +1,805 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Sponsor Portal — Token Purchase UI | Payfrit Design</title>
|
||||||
|
<style>
|
||||||
|
/* ========================================
|
||||||
|
SPONSOR PORTAL: TOKEN PURCHASE UI
|
||||||
|
Designed by Ava — 2026-03-21
|
||||||
|
Design spec for @nora to implement
|
||||||
|
======================================== */
|
||||||
|
|
||||||
|
/* --- Design Tokens (from design-system.html) --- */
|
||||||
|
:root {
|
||||||
|
--color-primary: #0D6E6E;
|
||||||
|
--color-primary-light: #14A3A3;
|
||||||
|
--color-primary-dark: #094F4F;
|
||||||
|
--color-primary-bg: #E6F5F5;
|
||||||
|
--color-accent: #F5A623;
|
||||||
|
--color-accent-light: #FFCF70;
|
||||||
|
--color-accent-dark: #C4841A;
|
||||||
|
--color-success: #2ECC71;
|
||||||
|
--color-success-bg: #EAFAF1;
|
||||||
|
--color-warning: #F39C12;
|
||||||
|
--color-warning-bg: #FEF5E7;
|
||||||
|
--color-error: #E74C3C;
|
||||||
|
--color-error-bg: #FDEDEC;
|
||||||
|
--color-info: #3498DB;
|
||||||
|
--color-info-bg: #EBF5FB;
|
||||||
|
--color-gray-50: #F9FAFB;
|
||||||
|
--color-gray-100: #F3F4F6;
|
||||||
|
--color-gray-200: #E5E7EB;
|
||||||
|
--color-gray-300: #D1D5DB;
|
||||||
|
--color-gray-400: #9CA3AF;
|
||||||
|
--color-gray-500: #6B7280;
|
||||||
|
--color-gray-600: #4B5563;
|
||||||
|
--color-gray-700: #374151;
|
||||||
|
--color-gray-800: #1F2937;
|
||||||
|
--color-gray-900: #111827;
|
||||||
|
--color-bg: #FFFFFF;
|
||||||
|
--color-bg-subtle: #F9FAFB;
|
||||||
|
--color-bg-muted: #F3F4F6;
|
||||||
|
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
||||||
|
--text-xs: 0.75rem;
|
||||||
|
--text-sm: 0.875rem;
|
||||||
|
--text-base: 1rem;
|
||||||
|
--text-lg: 1.125rem;
|
||||||
|
--text-xl: 1.25rem;
|
||||||
|
--text-2xl: 1.5rem;
|
||||||
|
--text-3xl: 1.875rem;
|
||||||
|
--text-4xl: 2.25rem;
|
||||||
|
--font-normal: 400;
|
||||||
|
--font-medium: 500;
|
||||||
|
--font-semibold:600;
|
||||||
|
--font-bold: 700;
|
||||||
|
--leading-tight: 1.25;
|
||||||
|
--leading-normal: 1.5;
|
||||||
|
--leading-relaxed: 1.625;
|
||||||
|
--space-1: 0.25rem;
|
||||||
|
--space-2: 0.5rem;
|
||||||
|
--space-3: 0.75rem;
|
||||||
|
--space-4: 1rem;
|
||||||
|
--space-5: 1.25rem;
|
||||||
|
--space-6: 1.5rem;
|
||||||
|
--space-8: 2rem;
|
||||||
|
--space-10: 2.5rem;
|
||||||
|
--space-12: 3rem;
|
||||||
|
--space-16: 4rem;
|
||||||
|
--radius-sm: 0.25rem;
|
||||||
|
--radius-md: 0.5rem;
|
||||||
|
--radius-lg: 0.75rem;
|
||||||
|
--radius-xl: 1rem;
|
||||||
|
--radius-full: 9999px;
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
|
||||||
|
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
|
||||||
|
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
|
||||||
|
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
|
||||||
|
--transition-fast: 150ms ease;
|
||||||
|
--transition-base: 200ms ease;
|
||||||
|
--transition-slow: 300ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Reset & Base --- */
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family);
|
||||||
|
color: var(--color-gray-800);
|
||||||
|
background: var(--color-bg-subtle);
|
||||||
|
line-height: var(--leading-normal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Spec Banner --- */
|
||||||
|
.spec-banner {
|
||||||
|
background: linear-gradient(135deg, #1a1a2e, #16213e);
|
||||||
|
color: white;
|
||||||
|
padding: var(--space-6) var(--space-8);
|
||||||
|
text-align: center;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
.spec-banner strong { color: var(--color-accent-light); font-size: var(--text-base); display: block; margin-bottom: var(--space-1); }
|
||||||
|
.spec-banner span { opacity: 0.7; }
|
||||||
|
|
||||||
|
/* --- Page Shell (simulates sponsor portal layout) --- */
|
||||||
|
.portal-shell {
|
||||||
|
display: flex;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sidebar */
|
||||||
|
.sidebar {
|
||||||
|
width: 260px;
|
||||||
|
background: var(--color-primary-dark);
|
||||||
|
color: white;
|
||||||
|
padding: var(--space-6) 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.sidebar-logo {
|
||||||
|
padding: 0 var(--space-6) var(--space-6);
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.sidebar-logo h2 {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.sidebar-logo span {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
opacity: 0.6;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
.nav-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding: var(--space-3) var(--space-6);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: rgba(255,255,255,0.7);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
}
|
||||||
|
.nav-item:hover { background: rgba(255,255,255,0.05); color: white; }
|
||||||
|
.nav-item.active {
|
||||||
|
background: rgba(255,255,255,0.1);
|
||||||
|
color: white;
|
||||||
|
border-left-color: var(--color-accent);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
.nav-icon { width: 18px; text-align: center; opacity: 0.8; }
|
||||||
|
|
||||||
|
/* Main Content */
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
padding: var(--space-8);
|
||||||
|
max-width: 960px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Page Header --- */
|
||||||
|
.page-header {
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
.page-header h1 {
|
||||||
|
font-size: var(--text-3xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
.page-header p {
|
||||||
|
font-size: var(--text-base);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Balance Card --- */
|
||||||
|
.balance-card {
|
||||||
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
|
||||||
|
color: white;
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
padding: var(--space-8);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
}
|
||||||
|
.balance-label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
opacity: 0.8;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
.balance-amount {
|
||||||
|
font-size: var(--text-4xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
}
|
||||||
|
.balance-amount span {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
font-weight: var(--font-normal);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
.balance-meta {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.balance-meta-item {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
opacity: 0.75;
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Token Packages Grid --- */
|
||||||
|
.section-label {
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.section-sublabel {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
margin-top: calc(-1 * var(--space-3));
|
||||||
|
margin-bottom: var(--space-6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.packages-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: var(--space-4);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.package-card {
|
||||||
|
border: 2px solid var(--color-gray-200);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--space-6);
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
background: white;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.package-card:hover {
|
||||||
|
border-color: var(--color-primary-light);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
.package-card.selected {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
background: var(--color-primary-bg);
|
||||||
|
box-shadow: 0 0 0 3px rgba(13, 110, 110, 0.15);
|
||||||
|
}
|
||||||
|
.package-card.popular {
|
||||||
|
border-color: var(--color-accent);
|
||||||
|
}
|
||||||
|
.popular-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background: var(--color-accent);
|
||||||
|
color: white;
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
padding: var(--space-1) var(--space-3);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
.package-tokens {
|
||||||
|
font-size: var(--text-3xl);
|
||||||
|
font-weight: var(--font-bold);
|
||||||
|
color: var(--color-primary-dark);
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
.package-tokens-label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
margin-bottom: var(--space-4);
|
||||||
|
}
|
||||||
|
.package-price {
|
||||||
|
font-size: var(--text-2xl);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
margin-bottom: var(--space-1);
|
||||||
|
}
|
||||||
|
.package-unit {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--color-gray-400);
|
||||||
|
}
|
||||||
|
.package-savings {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: var(--space-3);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
color: var(--color-success);
|
||||||
|
background: var(--color-success-bg);
|
||||||
|
padding: var(--space-1) var(--space-2);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Custom Amount --- */
|
||||||
|
.custom-amount-section {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid var(--color-gray-200);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--space-6);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
.custom-amount-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.custom-label {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
color: var(--color-gray-700);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.custom-input-wrap {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
max-width: 240px;
|
||||||
|
}
|
||||||
|
.custom-input-wrap .prefix {
|
||||||
|
position: absolute;
|
||||||
|
left: var(--space-4);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
color: var(--color-gray-400);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
.custom-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-3) var(--space-4) var(--space-3) var(--space-8);
|
||||||
|
border: 2px solid var(--color-gray-200);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-family: var(--font-family);
|
||||||
|
color: var(--color-gray-800);
|
||||||
|
transition: border-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
.custom-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
box-shadow: 0 0 0 3px rgba(13, 110, 110, 0.1);
|
||||||
|
}
|
||||||
|
.custom-conversion {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
}
|
||||||
|
.custom-conversion strong {
|
||||||
|
color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Order Summary --- */
|
||||||
|
.order-summary {
|
||||||
|
background: white;
|
||||||
|
border: 1px solid var(--color-gray-200);
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
padding: var(--space-6);
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
.summary-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--space-3) 0;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-gray-600);
|
||||||
|
}
|
||||||
|
.summary-row + .summary-row {
|
||||||
|
border-top: 1px solid var(--color-gray-100);
|
||||||
|
}
|
||||||
|
.summary-row.total {
|
||||||
|
border-top: 2px solid var(--color-gray-200);
|
||||||
|
padding-top: var(--space-4);
|
||||||
|
margin-top: var(--space-2);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-gray-900);
|
||||||
|
}
|
||||||
|
.summary-value {
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
color: var(--color-gray-800);
|
||||||
|
}
|
||||||
|
.summary-row.total .summary-value {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
color: var(--color-primary-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Payment Method Selector --- */
|
||||||
|
.payment-methods {
|
||||||
|
margin-bottom: var(--space-8);
|
||||||
|
}
|
||||||
|
.payment-options {
|
||||||
|
display: flex;
|
||||||
|
gap: var(--space-3);
|
||||||
|
}
|
||||||
|
.payment-option {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-3);
|
||||||
|
padding: var(--space-4);
|
||||||
|
border: 2px solid var(--color-gray-200);
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
.payment-option:hover {
|
||||||
|
border-color: var(--color-gray-300);
|
||||||
|
}
|
||||||
|
.payment-option.selected {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
background: var(--color-primary-bg);
|
||||||
|
}
|
||||||
|
.payment-radio {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 2px solid var(--color-gray-300);
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.payment-option.selected .payment-radio {
|
||||||
|
border-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
.payment-radio-inner {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
.payment-option.selected .payment-radio-inner {
|
||||||
|
background: var(--color-primary);
|
||||||
|
}
|
||||||
|
.payment-details {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.payment-name {
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
color: var(--color-gray-800);
|
||||||
|
}
|
||||||
|
.payment-desc {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--color-gray-400);
|
||||||
|
}
|
||||||
|
.payment-icon {
|
||||||
|
font-size: var(--text-xl);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- CTA Button --- */
|
||||||
|
.cta-section {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--space-4);
|
||||||
|
}
|
||||||
|
.btn-purchase {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: var(--space-2);
|
||||||
|
padding: var(--space-4) var(--space-8);
|
||||||
|
background: var(--color-primary);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font-size: var(--text-base);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
font-family: var(--font-family);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-base);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
min-width: 220px;
|
||||||
|
}
|
||||||
|
.btn-purchase:hover {
|
||||||
|
background: var(--color-primary-dark);
|
||||||
|
box-shadow: var(--shadow-lg);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
.btn-purchase:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
.cta-note {
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
color: var(--color-gray-400);
|
||||||
|
max-width: 300px;
|
||||||
|
line-height: var(--leading-relaxed);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Recent Purchases Table --- */
|
||||||
|
.recent-purchases {
|
||||||
|
margin-top: var(--space-12);
|
||||||
|
}
|
||||||
|
.purchases-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: white;
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
border: 1px solid var(--color-gray-200);
|
||||||
|
}
|
||||||
|
.purchases-table th {
|
||||||
|
text-align: left;
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-semibold);
|
||||||
|
color: var(--color-gray-500);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
background: var(--color-gray-50);
|
||||||
|
border-bottom: 1px solid var(--color-gray-200);
|
||||||
|
}
|
||||||
|
.purchases-table td {
|
||||||
|
padding: var(--space-3) var(--space-4);
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
color: var(--color-gray-700);
|
||||||
|
border-bottom: 1px solid var(--color-gray-100);
|
||||||
|
}
|
||||||
|
.purchases-table tr:last-child td { border-bottom: none; }
|
||||||
|
.status-badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: var(--space-1) var(--space-2);
|
||||||
|
border-radius: var(--radius-full);
|
||||||
|
font-size: var(--text-xs);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
.status-badge.completed {
|
||||||
|
background: var(--color-success-bg);
|
||||||
|
color: #1a9a54;
|
||||||
|
}
|
||||||
|
.status-badge.pending {
|
||||||
|
background: var(--color-warning-bg);
|
||||||
|
color: #b87d0a;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- Annotations (design notes for devs) --- */
|
||||||
|
.annotation {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.annotation::after {
|
||||||
|
content: attr(data-note);
|
||||||
|
position: absolute;
|
||||||
|
right: -16px;
|
||||||
|
top: 0;
|
||||||
|
transform: translateX(100%);
|
||||||
|
background: #FFF3CD;
|
||||||
|
color: #856404;
|
||||||
|
font-size: 11px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
z-index: 10;
|
||||||
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
.annotation:hover::after { opacity: 1; }
|
||||||
|
|
||||||
|
/* --- Responsive --- */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.portal-shell { flex-direction: column; }
|
||||||
|
.sidebar { width: 100%; padding: var(--space-4) 0; }
|
||||||
|
.main-content { padding: var(--space-4); }
|
||||||
|
.packages-grid { grid-template-columns: 1fr; }
|
||||||
|
.balance-card { flex-direction: column; gap: var(--space-4); text-align: center; }
|
||||||
|
.balance-meta { text-align: center; }
|
||||||
|
.payment-options { flex-direction: column; }
|
||||||
|
.custom-amount-row { flex-direction: column; align-items: flex-start; }
|
||||||
|
.cta-section { flex-direction: column; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Design Spec Banner -->
|
||||||
|
<div class="spec-banner">
|
||||||
|
<strong>📐 DESIGN SPEC — Sponsor Portal: Token Purchase</strong>
|
||||||
|
<span>Designed by Ava · 2026-03-21 · For @nora to implement</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portal-shell">
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<nav class="sidebar">
|
||||||
|
<div class="sidebar-logo">
|
||||||
|
<h2>Payfrit</h2>
|
||||||
|
<span>Sponsor Portal</span>
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<span class="nav-icon">📊</span> Dashboard
|
||||||
|
</div>
|
||||||
|
<div class="nav-item active">
|
||||||
|
<span class="nav-icon">🪙</span> Buy Tokens
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<span class="nav-icon">👥</span> Members
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<span class="nav-icon">📋</span> Transactions
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<span class="nav-icon">📈</span> Reports
|
||||||
|
</div>
|
||||||
|
<div class="nav-item">
|
||||||
|
<span class="nav-icon">⚙️</span> Settings
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="main-content">
|
||||||
|
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Purchase Tokens</h1>
|
||||||
|
<p>Buy tokens to distribute to your sponsored members for health services.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Current Balance Card -->
|
||||||
|
<div class="balance-card">
|
||||||
|
<div>
|
||||||
|
<div class="balance-label">Current Token Balance</div>
|
||||||
|
<div class="balance-amount">12,450 <span>tokens</span></div>
|
||||||
|
</div>
|
||||||
|
<div class="balance-meta">
|
||||||
|
<div class="balance-meta-item">Last purchase: Mar 14, 2026</div>
|
||||||
|
<div class="balance-meta-item">Avg. monthly usage: ~3,200 tokens</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Token Packages -->
|
||||||
|
<div class="section-label">Choose a Package</div>
|
||||||
|
<div class="section-sublabel">Select a pre-set bundle or enter a custom amount below.</div>
|
||||||
|
|
||||||
|
<div class="packages-grid">
|
||||||
|
<!-- Package 1 -->
|
||||||
|
<div class="package-card">
|
||||||
|
<div class="package-tokens">1,000</div>
|
||||||
|
<div class="package-tokens-label">tokens</div>
|
||||||
|
<div class="package-price">$100</div>
|
||||||
|
<div class="package-unit">$0.10 / token</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Package 2 (Popular) -->
|
||||||
|
<div class="package-card popular selected">
|
||||||
|
<div class="popular-badge">Most Popular</div>
|
||||||
|
<div class="package-tokens">5,000</div>
|
||||||
|
<div class="package-tokens-label">tokens</div>
|
||||||
|
<div class="package-price">$450</div>
|
||||||
|
<div class="package-unit">$0.09 / token</div>
|
||||||
|
<div class="package-savings">Save 10%</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Package 3 -->
|
||||||
|
<div class="package-card">
|
||||||
|
<div class="package-tokens">15,000</div>
|
||||||
|
<div class="package-tokens-label">tokens</div>
|
||||||
|
<div class="package-price">$1,200</div>
|
||||||
|
<div class="package-unit">$0.08 / token</div>
|
||||||
|
<div class="package-savings">Save 20%</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Custom Amount -->
|
||||||
|
<div class="custom-amount-section">
|
||||||
|
<div class="custom-amount-row">
|
||||||
|
<span class="custom-label">Or enter custom amount:</span>
|
||||||
|
<div class="custom-input-wrap">
|
||||||
|
<span class="prefix">$</span>
|
||||||
|
<input type="text" class="custom-input" placeholder="0.00" value="">
|
||||||
|
</div>
|
||||||
|
<span class="custom-conversion">≈ <strong>0 tokens</strong> at current rate</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Order Summary -->
|
||||||
|
<div class="order-summary">
|
||||||
|
<div class="section-label" style="margin-bottom: var(--space-4);">Order Summary</div>
|
||||||
|
<div class="summary-row">
|
||||||
|
<span>Token Package</span>
|
||||||
|
<span class="summary-value">5,000 tokens</span>
|
||||||
|
</div>
|
||||||
|
<div class="summary-row">
|
||||||
|
<span>Unit Price</span>
|
||||||
|
<span class="summary-value">$0.09 / token</span>
|
||||||
|
</div>
|
||||||
|
<div class="summary-row">
|
||||||
|
<span>Subtotal</span>
|
||||||
|
<span class="summary-value">$450.00</span>
|
||||||
|
</div>
|
||||||
|
<div class="summary-row">
|
||||||
|
<span>Processing Fee (2.5%)</span>
|
||||||
|
<span class="summary-value">$11.25</span>
|
||||||
|
</div>
|
||||||
|
<div class="summary-row total">
|
||||||
|
<span>Total</span>
|
||||||
|
<span class="summary-value">$461.25</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Payment Method -->
|
||||||
|
<div class="payment-methods">
|
||||||
|
<div class="section-label" style="margin-bottom: var(--space-4);">Payment Method</div>
|
||||||
|
<div class="payment-options">
|
||||||
|
<div class="payment-option selected">
|
||||||
|
<div class="payment-radio"><div class="payment-radio-inner"></div></div>
|
||||||
|
<div class="payment-details">
|
||||||
|
<div class="payment-name">Credit Card</div>
|
||||||
|
<div class="payment-desc">Visa ending in 4242</div>
|
||||||
|
</div>
|
||||||
|
<span class="payment-icon">💳</span>
|
||||||
|
</div>
|
||||||
|
<div class="payment-option">
|
||||||
|
<div class="payment-radio"><div class="payment-radio-inner"></div></div>
|
||||||
|
<div class="payment-details">
|
||||||
|
<div class="payment-name">Bank Transfer (ACH)</div>
|
||||||
|
<div class="payment-desc">1–3 business days</div>
|
||||||
|
</div>
|
||||||
|
<span class="payment-icon">🏦</span>
|
||||||
|
</div>
|
||||||
|
<div class="payment-option">
|
||||||
|
<div class="payment-radio"><div class="payment-radio-inner"></div></div>
|
||||||
|
<div class="payment-details">
|
||||||
|
<div class="payment-name">Add New Method</div>
|
||||||
|
<div class="payment-desc">Card, bank, or wire</div>
|
||||||
|
</div>
|
||||||
|
<span class="payment-icon">➕</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<div class="cta-section">
|
||||||
|
<button class="btn-purchase">
|
||||||
|
🔒 Purchase 5,000 Tokens — $461.25
|
||||||
|
</button>
|
||||||
|
<span class="cta-note">Tokens are non-refundable and will be credited to your account immediately. Secure payment powered by Stripe.</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Recent Purchases -->
|
||||||
|
<div class="recent-purchases">
|
||||||
|
<div class="section-label" style="margin-bottom: var(--space-4);">Recent Purchases</div>
|
||||||
|
<table class="purchases-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Date</th>
|
||||||
|
<th>Tokens</th>
|
||||||
|
<th>Amount</th>
|
||||||
|
<th>Method</th>
|
||||||
|
<th>Status</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Mar 14, 2026</td>
|
||||||
|
<td>5,000</td>
|
||||||
|
<td>$461.25</td>
|
||||||
|
<td>Visa ••4242</td>
|
||||||
|
<td><span class="status-badge completed">Completed</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Feb 28, 2026</td>
|
||||||
|
<td>1,000</td>
|
||||||
|
<td>$102.50</td>
|
||||||
|
<td>ACH Transfer</td>
|
||||||
|
<td><span class="status-badge completed">Completed</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Feb 10, 2026</td>
|
||||||
|
<td>15,000</td>
|
||||||
|
<td>$1,230.00</td>
|
||||||
|
<td>Visa ••4242</td>
|
||||||
|
<td><span class="status-badge completed">Completed</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Jan 22, 2026</td>
|
||||||
|
<td>5,000</td>
|
||||||
|
<td>$461.25</td>
|
||||||
|
<td>Wire Transfer</td>
|
||||||
|
<td><span class="status-badge completed">Completed</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1261
status-dashboard.html
Normal file
1261
status-dashboard.html
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue