DDD1542
750 lines
30 KiB
HTML
750 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>INVION Cosmic Design System</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
/* ===== Cosmic Design Tokens ===== */
|
|
:root {
|
|
--bg: #fafaff;
|
|
--bg-subtle: #f3f2fa;
|
|
--surface: #ffffff;
|
|
--surface-hover: #f7f6fd;
|
|
--text: #0f0e1a;
|
|
--text-secondary: #6b6a80;
|
|
--text-muted: #9998ad;
|
|
--primary: #6c5ce7;
|
|
--primary-light: #a29bfe;
|
|
--primary-dark: #5041c2;
|
|
--primary-glow: rgba(108, 92, 231, 0.25);
|
|
--accent-cyan: #00cec9;
|
|
--accent-cyan-glow: rgba(0, 206, 201, 0.2);
|
|
--accent-pink: #fd79a8;
|
|
--accent-pink-glow: rgba(253, 121, 168, 0.2);
|
|
--destructive: #ff4757;
|
|
--success: #00b894;
|
|
--warning: #fdcb6e;
|
|
--info: #0984e3;
|
|
--border: rgba(108, 92, 231, 0.1);
|
|
--border-subtle: rgba(0,0,0,0.06);
|
|
--card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(108,92,231,0.06);
|
|
--glow-sm: 0 0 15px rgba(108, 92, 231, 0.15);
|
|
--glow-md: 0 0 30px rgba(108, 92, 231, 0.2);
|
|
--glow-lg: 0 0 60px rgba(108, 92, 231, 0.25);
|
|
--radius: 12px;
|
|
--radius-lg: 20px;
|
|
--radius-full: 9999px;
|
|
}
|
|
|
|
.dark {
|
|
--bg: #08070f;
|
|
--bg-subtle: #0e0d1a;
|
|
--surface: #13122a;
|
|
--surface-hover: #1a1940;
|
|
--text: #e8e6f0;
|
|
--text-secondary: #8b89a6;
|
|
--text-muted: #5c5a75;
|
|
--primary: #a29bfe;
|
|
--primary-light: #c8c4ff;
|
|
--primary-dark: #6c5ce7;
|
|
--primary-glow: rgba(162, 155, 254, 0.3);
|
|
--accent-cyan: #55efc4;
|
|
--accent-cyan-glow: rgba(85, 239, 196, 0.15);
|
|
--accent-pink: #fd79a8;
|
|
--accent-pink-glow: rgba(253, 121, 168, 0.15);
|
|
--destructive: #ff6b6b;
|
|
--success: #55efc4;
|
|
--warning: #ffeaa7;
|
|
--info: #74b9ff;
|
|
--border: rgba(162, 155, 254, 0.12);
|
|
--border-subtle: rgba(255,255,255,0.05);
|
|
--card-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.4);
|
|
--glow-sm: 0 0 15px rgba(162, 155, 254, 0.15);
|
|
--glow-md: 0 0 30px rgba(162, 155, 254, 0.2);
|
|
--glow-lg: 0 0 60px rgba(162, 155, 254, 0.3);
|
|
}
|
|
|
|
/* ===== Reset & Base ===== */
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
transition: background 0.4s ease, color 0.3s ease;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* ===== Star Field Background (Dark Only) ===== */
|
|
.dark body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image:
|
|
radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.4) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.3) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.5) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.3) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
|
|
radial-gradient(1.5px 1.5px at 15% 85%, rgba(162,155,254,0.6) 0%, transparent 100%),
|
|
radial-gradient(1.5px 1.5px at 55% 45%, rgba(85,239,196,0.5) 0%, transparent 100%),
|
|
radial-gradient(1.5px 1.5px at 85% 15%, rgba(253,121,168,0.5) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.2) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 45% 75%, rgba(255,255,255,0.25) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 65% 25%, rgba(255,255,255,0.3) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 80% 55%, rgba(255,255,255,0.2) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 5% 50%, rgba(255,255,255,0.35) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 95% 70%, rgba(255,255,255,0.3) 0%, transparent 100%),
|
|
radial-gradient(1px 1px at 40% 95%, rgba(255,255,255,0.2) 0%, transparent 100%),
|
|
radial-gradient(0.8px 0.8px at 20% 45%, rgba(255,255,255,0.15) 0%, transparent 100%),
|
|
radial-gradient(0.8px 0.8px at 60% 5%, rgba(255,255,255,0.2) 0%, transparent 100%),
|
|
radial-gradient(0.8px 0.8px at 75% 65%, rgba(255,255,255,0.15) 0%, transparent 100%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Nebula glow (Dark) */
|
|
.dark body::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: -30%;
|
|
right: -20%;
|
|
width: 800px;
|
|
height: 800px;
|
|
background: radial-gradient(circle, rgba(108,92,231,0.08) 0%, rgba(253,121,168,0.04) 40%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Light mode subtle gradient */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: -200px;
|
|
right: -200px;
|
|
width: 600px;
|
|
height: 600px;
|
|
background: radial-gradient(circle, rgba(108,92,231,0.06) 0%, transparent 70%);
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
}
|
|
|
|
.preview-container {
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
padding: 2.5rem;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ===== Header ===== */
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 3.5rem;
|
|
padding-bottom: 2rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
.header h1 {
|
|
font-size: 2rem;
|
|
font-weight: 800;
|
|
letter-spacing: -0.03em;
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--accent-cyan) 50%, var(--accent-pink) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.header p {
|
|
color: var(--text-muted);
|
|
font-size: 0.85rem;
|
|
margin-top: 0.35rem;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.theme-toggle {
|
|
display: flex;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-full);
|
|
padding: 3px;
|
|
gap: 2px;
|
|
}
|
|
.theme-toggle button {
|
|
padding: 0.5rem 1.2rem;
|
|
border-radius: var(--radius-full);
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
transition: all 0.25s;
|
|
font-family: inherit;
|
|
}
|
|
.theme-toggle button.active {
|
|
background: var(--primary);
|
|
color: white;
|
|
box-shadow: var(--glow-sm);
|
|
}
|
|
|
|
/* ===== Section ===== */
|
|
.section { margin-bottom: 3.5rem; }
|
|
.section-title {
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
color: var(--primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
.section-subtitle {
|
|
font-size: 1.15rem;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
margin-bottom: 1.25rem;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
/* ===== Color Palette ===== */
|
|
.color-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
gap: 0.75rem;
|
|
}
|
|
.color-card {
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
background: var(--surface);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.color-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--glow-sm);
|
|
}
|
|
.color-swatch {
|
|
height: 64px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 0.5rem;
|
|
font-size: 0.6rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.color-info { padding: 0.6rem; }
|
|
.color-name { font-size: 0.75rem; font-weight: 600; color: var(--text); }
|
|
.color-value { font-size: 0.65rem; color: var(--text-muted); margin-top: 2px; }
|
|
|
|
/* ===== Buttons ===== */
|
|
.button-row {
|
|
display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
.btn {
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
padding: 0.55rem 1.2rem; border-radius: var(--radius); font-size: 0.8rem;
|
|
font-weight: 600; cursor: pointer; border: none; transition: all 0.2s;
|
|
font-family: inherit; letter-spacing: -0.01em;
|
|
}
|
|
.btn-primary {
|
|
background: var(--primary); color: white;
|
|
box-shadow: 0 2px 8px var(--primary-glow);
|
|
}
|
|
.btn-primary:hover { box-shadow: var(--glow-md); transform: translateY(-1px); }
|
|
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
|
|
.btn-destructive { background: var(--destructive); color: white; }
|
|
.btn-success { background: var(--success); color: #0a2e1f; }
|
|
.btn-warning { background: var(--warning); color: #3d2e00; }
|
|
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
|
|
.btn-outline:hover { background: var(--primary); color: white; }
|
|
.btn-ghost { background: transparent; color: var(--text-secondary); }
|
|
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
|
|
.btn-sm { height: 1.85rem; padding: 0 0.75rem; font-size: 0.7rem; }
|
|
.btn-lg { height: 2.75rem; padding: 0 2rem; font-size: 0.85rem; }
|
|
.btn-cosmic {
|
|
background: linear-gradient(135deg, var(--primary) 0%, #a29bfe 50%, var(--accent-cyan) 100%);
|
|
color: white; font-weight: 700;
|
|
box-shadow: 0 4px 20px var(--primary-glow), 0 0 40px rgba(0,206,201,0.1);
|
|
}
|
|
.btn-cosmic:hover { box-shadow: var(--glow-lg); transform: translateY(-2px); }
|
|
|
|
/* ===== Badges ===== */
|
|
.badge {
|
|
display: inline-flex; align-items: center; padding: 0.2rem 0.6rem;
|
|
border-radius: var(--radius-full); font-size: 0.65rem; font-weight: 600;
|
|
}
|
|
.badge-primary { background: rgba(108,92,231,0.12); color: var(--primary); }
|
|
.badge-success { background: rgba(0,184,148,0.12); color: var(--success); }
|
|
.badge-warning { background: rgba(253,203,110,0.2); color: #b8860b; }
|
|
.dark .badge-warning { color: var(--warning); background: rgba(253,203,110,0.1); }
|
|
.badge-destructive { background: rgba(255,71,87,0.12); color: var(--destructive); }
|
|
.badge-info { background: rgba(9,132,227,0.12); color: var(--info); }
|
|
.badge-cyan { background: var(--accent-cyan-glow); color: var(--accent-cyan); }
|
|
.badge-pink { background: var(--accent-pink-glow); color: var(--accent-pink); }
|
|
|
|
/* ===== Inputs ===== */
|
|
.input-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
|
|
.input-group { display: flex; flex-direction: column; gap: 0.4rem; min-width: 200px; flex: 1; }
|
|
.input-label { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); }
|
|
.input-field {
|
|
height: 2.5rem; padding: 0 0.85rem; border: 1px solid var(--border);
|
|
border-radius: var(--radius); background: var(--surface); color: var(--text);
|
|
font-size: 0.8rem; font-family: inherit; outline: none; transition: all 0.2s;
|
|
}
|
|
.input-field::placeholder { color: var(--text-muted); }
|
|
.input-field:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px var(--primary-glow);
|
|
}
|
|
|
|
/* ===== Cards ===== */
|
|
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
|
|
.card {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg); padding: 1.75rem;
|
|
transition: all 0.25s;
|
|
}
|
|
.card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow); }
|
|
.card-title { font-size: 0.95rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; }
|
|
.card-desc { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; }
|
|
.card-glass {
|
|
background: rgba(255,255,255,0.5); backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(108,92,231,0.1);
|
|
}
|
|
.dark .card-glass {
|
|
background: rgba(19,18,42,0.6);
|
|
border: 1px solid rgba(162,155,254,0.1);
|
|
}
|
|
.card-glow {
|
|
border: 1px solid rgba(108,92,231,0.2);
|
|
box-shadow: var(--glow-sm);
|
|
}
|
|
.card-glow:hover { box-shadow: var(--glow-md); }
|
|
.card-gradient {
|
|
background: linear-gradient(135deg, var(--surface) 0%, rgba(108,92,231,0.05) 100%);
|
|
border: 1px solid rgba(108,92,231,0.12);
|
|
}
|
|
.dark .card-gradient {
|
|
background: linear-gradient(135deg, var(--surface) 0%, rgba(162,155,254,0.08) 100%);
|
|
}
|
|
|
|
/* ===== Table ===== */
|
|
.table-wrapper {
|
|
border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
|
|
background: var(--surface);
|
|
}
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
|
|
th {
|
|
text-align: left; padding: 0.85rem 1.2rem;
|
|
background: var(--bg-subtle); color: var(--text-muted);
|
|
font-weight: 600; font-size: 0.7rem; text-transform: uppercase;
|
|
letter-spacing: 0.06em; border-bottom: 1px solid var(--border);
|
|
}
|
|
td {
|
|
padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--border-subtle);
|
|
color: var(--text);
|
|
}
|
|
tr:last-child td { border-bottom: none; }
|
|
tr:hover td { background: var(--surface-hover); }
|
|
|
|
/* ===== Layout Preview ===== */
|
|
.layout-preview {
|
|
display: grid; grid-template-columns: 240px 1fr;
|
|
height: 520px; border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg); overflow: hidden;
|
|
}
|
|
.sidebar-preview {
|
|
background: var(--bg-subtle); border-right: 1px solid var(--border);
|
|
padding: 1.5rem; display: flex; flex-direction: column; gap: 2px;
|
|
}
|
|
.sidebar-logo {
|
|
font-size: 1.1rem; font-weight: 800; letter-spacing: -0.03em;
|
|
margin-bottom: 2rem; padding-left: 0.5rem;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|
}
|
|
.sidebar-item {
|
|
padding: 0.55rem 0.75rem; border-radius: 8px; font-size: 0.8rem;
|
|
color: var(--text-secondary); cursor: pointer; transition: all 0.15s; font-weight: 450;
|
|
}
|
|
.sidebar-item:hover { background: var(--surface-hover); color: var(--text); }
|
|
.sidebar-item.active {
|
|
background: linear-gradient(135deg, rgba(108,92,231,0.1), rgba(108,92,231,0.05));
|
|
color: var(--primary); font-weight: 600;
|
|
border: 1px solid rgba(108,92,231,0.15);
|
|
}
|
|
.dark .sidebar-item.active {
|
|
background: linear-gradient(135deg, rgba(162,155,254,0.12), rgba(162,155,254,0.05));
|
|
color: var(--primary);
|
|
border-color: rgba(162,155,254,0.15);
|
|
}
|
|
.sidebar-section {
|
|
font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
|
|
letter-spacing: 0.1em; color: var(--text-muted);
|
|
padding: 1rem 0.75rem 0.4rem; margin-top: 0.25rem;
|
|
}
|
|
.main-content {
|
|
background: var(--bg); padding: 2rem; overflow-y: auto;
|
|
}
|
|
.main-header {
|
|
display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;
|
|
}
|
|
.main-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
|
|
.main-subtitle { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
|
|
|
|
/* ===== Login Preview ===== */
|
|
.login-preview {
|
|
display: flex; align-items: center; justify-content: center;
|
|
min-height: 560px; border-radius: var(--radius-lg);
|
|
position: relative; overflow: hidden;
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
}
|
|
.login-nebula {
|
|
position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none;
|
|
}
|
|
.login-nebula-1 {
|
|
width: 500px; height: 500px; top: -150px; right: -100px;
|
|
background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
|
|
}
|
|
.login-nebula-2 {
|
|
width: 400px; height: 400px; bottom: -200px; left: -100px;
|
|
background: radial-gradient(circle, var(--accent-cyan-glow) 0%, transparent 70%);
|
|
}
|
|
.login-nebula-3 {
|
|
width: 300px; height: 300px; top: 50%; left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: radial-gradient(circle, var(--accent-pink-glow) 0%, transparent 70%);
|
|
}
|
|
.login-card {
|
|
position: relative; width: 400px;
|
|
background: rgba(255,255,255,0.7); backdrop-filter: blur(24px);
|
|
border: 1px solid rgba(108,92,231,0.12);
|
|
border-radius: var(--radius-lg); padding: 2.5rem;
|
|
box-shadow: 0 8px 40px rgba(0,0,0,0.06);
|
|
}
|
|
.dark .login-card {
|
|
background: rgba(19,18,42,0.7);
|
|
border: 1px solid rgba(162,155,254,0.12);
|
|
box-shadow: 0 8px 40px rgba(0,0,0,0.5), var(--glow-sm);
|
|
}
|
|
.login-logo {
|
|
text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em;
|
|
margin-bottom: 0.5rem;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|
}
|
|
.login-subtitle {
|
|
text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 2rem;
|
|
}
|
|
.login-form { display: flex; flex-direction: column; gap: 1rem; }
|
|
.login-btn {
|
|
height: 2.75rem; margin-top: 0.5rem;
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
|
|
color: white; border: none; border-radius: var(--radius); font-size: 0.85rem;
|
|
font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.25s;
|
|
box-shadow: 0 4px 15px var(--primary-glow);
|
|
}
|
|
.login-btn:hover {
|
|
box-shadow: var(--glow-md); transform: translateY(-1px);
|
|
}
|
|
.login-footer {
|
|
text-align: center; margin-top: 1.25rem;
|
|
font-size: 0.75rem; color: var(--text-muted);
|
|
}
|
|
.login-footer a { color: var(--primary); text-decoration: none; font-weight: 500; }
|
|
|
|
/* ===== Chart ===== */
|
|
.chart-bars { display: flex; flex-direction: column; gap: 0.4rem; }
|
|
.chart-bar {
|
|
height: 36px; border-radius: 8px; display: flex; align-items: center;
|
|
padding: 0 1rem; font-size: 0.7rem; font-weight: 600; color: white;
|
|
transition: all 0.2s;
|
|
}
|
|
.chart-bar:hover { transform: scaleX(1.02); transform-origin: left; }
|
|
|
|
/* ===== Stats Row ===== */
|
|
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
|
|
.stat-card {
|
|
background: var(--surface); border: 1px solid var(--border);
|
|
border-radius: var(--radius); padding: 1.25rem; text-align: center;
|
|
}
|
|
.stat-value {
|
|
font-size: 1.75rem; font-weight: 800; letter-spacing: -0.03em;
|
|
background: linear-gradient(135deg, var(--primary), var(--accent-cyan));
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
|
|
}
|
|
.stat-label { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.3rem; font-weight: 500; }
|
|
|
|
/* ===== Divider ===== */
|
|
.divider { height: 1px; background: var(--border); margin: 2rem 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="preview-container">
|
|
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div>
|
|
<h1>INVION Cosmic Design System</h1>
|
|
<p>Deep Space / Stellar White</p>
|
|
</div>
|
|
<div class="theme-toggle">
|
|
<button class="active" onclick="setTheme('light')">Stellar White</button>
|
|
<button onclick="setTheme('dark')">Deep Space</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Color Palette -->
|
|
<div class="section">
|
|
<div class="section-title">Color System</div>
|
|
<div class="section-subtitle">Core Semantic Palette</div>
|
|
<div class="color-grid">
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--primary);color:white">PRIMARY</div>
|
|
<div class="color-info"><div class="color-name">Cosmic Violet</div><div class="color-value">#6c5ce7 / #a29bfe</div></div>
|
|
</div>
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--accent-cyan);color:#0a2e2d">ACCENT</div>
|
|
<div class="color-info"><div class="color-name">Nebula Cyan</div><div class="color-value">#00cec9 / #55efc4</div></div>
|
|
</div>
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--accent-pink);color:white">ACCENT</div>
|
|
<div class="color-info"><div class="color-name">Stellar Pink</div><div class="color-value">#fd79a8</div></div>
|
|
</div>
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--success);color:white">SUCCESS</div>
|
|
<div class="color-info"><div class="color-name">Aurora Green</div><div class="color-value">#00b894 / #55efc4</div></div>
|
|
</div>
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--destructive);color:white">ERROR</div>
|
|
<div class="color-info"><div class="color-name">Supernova Red</div><div class="color-value">#ff4757 / #ff6b6b</div></div>
|
|
</div>
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--warning);color:#3d2e00">WARNING</div>
|
|
<div class="color-info"><div class="color-name">Solar Amber</div><div class="color-value">#fdcb6e / #ffeaa7</div></div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top:0.75rem">
|
|
<div class="color-grid" style="grid-template-columns: repeat(4, 1fr)">
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--bg);color:var(--text);border-bottom:1px solid var(--border)">BG</div>
|
|
<div class="color-info"><div class="color-name">Background</div><div class="color-value">Space / White</div></div>
|
|
</div>
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--surface);color:var(--text);border-bottom:1px solid var(--border)">SURFACE</div>
|
|
<div class="color-info"><div class="color-name">Surface</div><div class="color-value">Card layer</div></div>
|
|
</div>
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--text);color:var(--bg)">TEXT</div>
|
|
<div class="color-info"><div class="color-name">Foreground</div><div class="color-value">Primary text</div></div>
|
|
</div>
|
|
<div class="color-card">
|
|
<div class="color-swatch" style="background:var(--border);height:32px"></div>
|
|
<div class="color-info"><div class="color-name">Border</div><div class="color-value">Stardust line</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="section">
|
|
<div class="section-title">Interactive</div>
|
|
<div class="section-subtitle">Buttons & Badges</div>
|
|
<div class="button-row">
|
|
<button class="btn btn-primary">Primary</button>
|
|
<button class="btn btn-secondary">Secondary</button>
|
|
<button class="btn btn-outline">Outline</button>
|
|
<button class="btn btn-ghost">Ghost</button>
|
|
<button class="btn btn-destructive">Delete</button>
|
|
<button class="btn btn-success">Confirm</button>
|
|
<button class="btn btn-cosmic btn-lg">Launch Mission</button>
|
|
</div>
|
|
<div class="button-row" style="margin-top:0.5rem">
|
|
<span class="badge badge-primary">Deployed</span>
|
|
<span class="badge badge-success">Online</span>
|
|
<span class="badge badge-warning">Standby</span>
|
|
<span class="badge badge-destructive">Offline</span>
|
|
<span class="badge badge-info">Syncing</span>
|
|
<span class="badge badge-cyan">Connected</span>
|
|
<span class="badge badge-pink">New</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<div class="section">
|
|
<div class="section-title">Form</div>
|
|
<div class="section-subtitle">Input Fields</div>
|
|
<div class="input-row">
|
|
<div class="input-group">
|
|
<label class="input-label">Username</label>
|
|
<input class="input-field" value="commander">
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">Email</label>
|
|
<input class="input-field" type="email" placeholder="pilot@invion.io">
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">Password</label>
|
|
<input class="input-field" type="password" value="cosmicpass">
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">Search</label>
|
|
<input class="input-field" placeholder="Search the galaxy...">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cards -->
|
|
<div class="section">
|
|
<div class="section-title">Surfaces</div>
|
|
<div class="section-subtitle">Card Variants</div>
|
|
<div class="card-grid">
|
|
<div class="card">
|
|
<div class="card-title">Standard</div>
|
|
<div class="card-desc">Default card surface. Clean border with subtle elevation on hover.</div>
|
|
</div>
|
|
<div class="card card-glass">
|
|
<div class="card-title">Glass</div>
|
|
<div class="card-desc">Glassmorphism with backdrop blur. Cosmic transparency for overlays.</div>
|
|
</div>
|
|
<div class="card card-glow">
|
|
<div class="card-title">Glow</div>
|
|
<div class="card-desc">Subtle cosmic glow. For featured or highlighted content.</div>
|
|
</div>
|
|
<div class="card card-gradient">
|
|
<div class="card-title">Gradient</div>
|
|
<div class="card-desc">Nebula gradient surface. For premium or interactive sections.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="section">
|
|
<div class="section-title">Data</div>
|
|
<div class="section-subtitle">Table & Statistics</div>
|
|
<div class="stats-row">
|
|
<div class="stat-card"><div class="stat-value">1,247</div><div class="stat-label">Total Devices</div></div>
|
|
<div class="stat-card"><div class="stat-value">98.5%</div><div class="stat-label">Uptime</div></div>
|
|
<div class="stat-card"><div class="stat-value">342</div><div class="stat-label">Active Sessions</div></div>
|
|
<div class="stat-card"><div class="stat-value">12ms</div><div class="stat-label">Avg Latency</div></div>
|
|
</div>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead><tr><th>Device</th><th>Serial</th><th>Manufacturer</th><th>Model</th><th>Region</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<tr><td style="font-weight:500">DTG-001</td><td>0004</td><td>LOOP</td><td>LDT400BS</td><td>Seoul</td><td><span class="badge badge-success">Active</span></td></tr>
|
|
<tr><td style="font-weight:500">DTG-002</td><td>0001</td><td>LOOP</td><td>LDT400BS</td><td>Busan</td><td><span class="badge badge-warning">Standby</span></td></tr>
|
|
<tr><td style="font-weight:500">DTG-003</td><td>0003</td><td>LOOP</td><td>LDT400BS</td><td>Incheon</td><td><span class="badge badge-primary">Installing</span></td></tr>
|
|
<tr><td style="font-weight:500">DTG-004</td><td>0005</td><td>LOOP</td><td>LDT400BS</td><td>Daegu</td><td><span class="badge badge-destructive">Offline</span></td></tr>
|
|
<tr><td style="font-weight:500">DTG-005</td><td>0007</td><td>LOOP</td><td>LDT500BS</td><td>Jeju</td><td><span class="badge badge-cyan">Syncing</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart -->
|
|
<div class="section">
|
|
<div class="section-title">Visualization</div>
|
|
<div class="section-subtitle">Chart Palette</div>
|
|
<div class="chart-bars">
|
|
<div class="chart-bar" style="background:linear-gradient(90deg, var(--primary), var(--primary-light));width:92%">Nebula Purple — 92%</div>
|
|
<div class="chart-bar" style="background:linear-gradient(90deg, #00b894, var(--accent-cyan));width:78%">Aurora Green — 78%</div>
|
|
<div class="chart-bar" style="background:linear-gradient(90deg, #0984e3, #74b9ff);width:85%">Stellar Blue — 85%</div>
|
|
<div class="chart-bar" style="background:linear-gradient(90deg, #e17055, var(--accent-pink));width:64%">Cosmic Pink — 64%</div>
|
|
<div class="chart-bar" style="background:linear-gradient(90deg, #d4a017, var(--warning));width:71%">Solar Gold — 71%</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Login -->
|
|
<div class="section">
|
|
<div class="section-title">Authentication</div>
|
|
<div class="section-subtitle">Login Page</div>
|
|
<div class="login-preview">
|
|
<div class="login-nebula login-nebula-1"></div>
|
|
<div class="login-nebula login-nebula-2"></div>
|
|
<div class="login-nebula login-nebula-3"></div>
|
|
<div class="login-card">
|
|
<div class="login-logo">INVION</div>
|
|
<div class="login-subtitle">Welcome to the cosmos</div>
|
|
<div class="login-form">
|
|
<div class="input-group">
|
|
<label class="input-label">User ID</label>
|
|
<input class="input-field" value="commander">
|
|
</div>
|
|
<div class="input-group">
|
|
<label class="input-label">Password</label>
|
|
<input class="input-field" type="password" value="cosmicpass">
|
|
</div>
|
|
<button class="login-btn">Sign In</button>
|
|
<div class="login-footer">Powered by <a href="#">INVION</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Layout -->
|
|
<div class="section">
|
|
<div class="section-title">Layout</div>
|
|
<div class="section-subtitle">Sidebar + Content</div>
|
|
<div class="layout-preview">
|
|
<div class="sidebar-preview">
|
|
<div class="sidebar-logo">INVION</div>
|
|
<div class="sidebar-section">Management</div>
|
|
<div class="sidebar-item active">DTG Management</div>
|
|
<div class="sidebar-item">Settlement</div>
|
|
<div class="sidebar-item">Logistics Control</div>
|
|
<div class="sidebar-section">Configuration</div>
|
|
<div class="sidebar-item">Menu Settings</div>
|
|
<div class="sidebar-item">User Management</div>
|
|
<div class="sidebar-item">Screen Builder</div>
|
|
<div class="sidebar-section">Analytics</div>
|
|
<div class="sidebar-item">Dashboard</div>
|
|
<div class="sidebar-item">Reports</div>
|
|
</div>
|
|
<div class="main-content">
|
|
<div class="main-header">
|
|
<div>
|
|
<div class="main-title">DTG Management</div>
|
|
<div class="main-subtitle">4 devices registered</div>
|
|
</div>
|
|
<button class="btn btn-primary">+ New Device</button>
|
|
</div>
|
|
<div class="stats-row">
|
|
<div class="stat-card"><div class="stat-value">4</div><div class="stat-label">Registered</div></div>
|
|
<div class="stat-card"><div class="stat-value">3</div><div class="stat-label">Installed</div></div>
|
|
<div class="stat-card"><div class="stat-value">0</div><div class="stat-label">Maintenance</div></div>
|
|
<div class="stat-card"><div class="stat-value">0</div><div class="stat-label">Decommissioned</div></div>
|
|
</div>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead><tr><th>Code</th><th>Serial</th><th>Model</th><th>Status</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>DTG-001</td><td>0004</td><td>LDT400BS</td><td><span class="badge badge-success">Active</span></td></tr>
|
|
<tr><td>DTG-002</td><td>0001</td><td>LDT400BS</td><td><span class="badge badge-warning">Standby</span></td></tr>
|
|
<tr><td>DTG-003</td><td>0003</td><td>LDT400BS</td><td><span class="badge badge-primary">Installing</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function setTheme(t) {
|
|
document.documentElement.classList.toggle('dark', t === 'dark');
|
|
document.body.classList.toggle('dark', t === 'dark');
|
|
document.querySelectorAll('.theme-toggle button').forEach(b => {
|
|
b.classList.toggle('active', b.textContent.includes(t === 'dark' ? 'Deep' : 'Stellar'));
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|