-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
133 lines (120 loc) · 7.29 KB
/
index.html
File metadata and controls
133 lines (120 loc) · 7.29 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aviant Skin | Core System Status</title>
<!-- Import the Aviant Core Entry Point -->
<script type="module" src="/src/aviant.core.scss"></script>
<script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
<!-- 1. THE SHELL (Layout Object) -->
<div class="av-shell">
<main>
<!-- 2. THE CONTAINER (Constraint) -->
<div class="av-container" style="padding-top: var(--av-space-12); padding-bottom: var(--av-space-24);">
<!-- Header -->
<header style="margin-bottom: var(--av-space-16); text-align: center;">
<div style="display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--av-space-4); color: var(--av-action-primary);">
<i data-lucide="layers" style="width: 24px; height: 24px;"></i>
<span style="font-weight: var(--av-font-bold); letter-spacing: var(--av-tracking-wide);">AVIANT SKIN</span>
</div>
<h1 style="font-size: var(--av-text-3xl); margin-bottom: var(--av-space-4);">Core System Operational</h1>
<p style="font-size: var(--av-text-lg); color: var(--av-text-muted); max-width: 60ch; margin-inline: auto;">
The foundational layer is active. Below are the base components inheriting the physics engine (Fluid Type, OKLCH Colors, and Smart Grids).
</p>
</header>
<!-- 3. THE GRID (Layout Object) -->
<div class="av-grid av-grid-auto-fit" style="--min-col-width: 300px; gap: var(--av-space-8);">
<!-- CARD 1: TYPOGRAPHY -->
<article class="av-card">
<div class="av-card-body">
<h3 class="av-card-title" style="display: flex; align-items: center; gap: 0.5rem;">
<i data-lucide="type" style="width: 18px; color: var(--av-text-muted);"></i> Typography
</h3>
<p style="color: var(--av-text-muted); font-size: var(--av-text-sm); margin-bottom: var(--av-space-4);">
Fluid scaling using <code>clamp()</code>.
</p>
<div style="display: flex; flex-direction: column; gap: var(--av-space-2); padding: var(--av-space-4); background: var(--av-surface-subtle); border-radius: var(--av-radius-md);">
<span style="font-size: var(--av-text-2xl); font-weight: bold; line-height: 1;">Aa</span>
<span style="font-size: var(--av-text-xl); font-weight: bold;">Heading XL</span>
<span style="font-size: var(--av-text-lg); font-weight: medium;">Heading LG</span>
<span style="font-size: var(--av-text-base);">Body Base Text</span>
<span style="font-size: var(--av-text-sm); color: var(--av-text-muted);">Utility Small Text</span>
</div>
</div>
</article>
<!-- CARD 2: INTERACTIVE -->
<article class="av-card">
<div class="av-card-body">
<h3 class="av-card-title" style="display: flex; align-items: center; gap: 0.5rem;">
<i data-lucide="mouse-pointer-2" style="width: 18px; color: var(--av-text-muted);"></i> Interactive
</h3>
<p style="color: var(--av-text-muted); font-size: var(--av-text-sm); margin-bottom: var(--av-space-4);">
Core button states and variants.
</p>
<div style="display: flex; flex-wrap: wrap; gap: var(--av-space-3);">
<button class="av-btn av-btn-primary">Primary Action</button>
<button class="av-btn av-btn-ghost">Ghost Button</button>
<button class="av-btn av-btn-primary av-btn-sm">Small</button>
<button class="av-btn av-btn-primary" disabled>Disabled</button>
</div>
</div>
</article>
<!-- CARD 3: INPUTS -->
<article class="av-card">
<div class="av-card-body">
<h3 class="av-card-title" style="display: flex; align-items: center; gap: 0.5rem;">
<i data-lucide="form-input" style="width: 18px; color: var(--av-text-muted);"></i> Forms
</h3>
<p style="color: var(--av-text-muted); font-size: var(--av-text-sm); margin-bottom: var(--av-space-4);">
Normalized inputs with focus rings.
</p>
<div style="display: flex; flex-direction: column; gap: var(--av-space-4);">
<div class="av-input-group">
<label class="av-label">Email Address</label>
<input type="email" class="av-input" placeholder="name@company.com">
</div>
<div class="av-input-group">
<label class="av-label">Role</label>
<select class="av-select">
<option>Administrator</option>
<option>Editor</option>
<option>Viewer</option>
</select>
</div>
<label style="display: flex; align-items: center; gap: 0.5rem; font-size: var(--av-text-sm);">
<input type="checkbox" class="av-checkbox" checked>
<span>Subscribe to newsletter</span>
</label>
</div>
</div>
</article>
<!-- CARD 4: COLORS -->
<article class="av-card av-col-span-full">
<div class="av-card-body">
<h3 class="av-card-title">Dynamic Palette (OKLCH)</h3>
<p style="color: var(--av-text-muted); font-size: var(--av-text-sm); margin-bottom: var(--av-space-4);">
Colors adapt automatically to light/dark mode preferences.
</p>
<div class="av-grid av-grid-auto-fit" style="--min-col-width: 120px; gap: var(--av-space-3);">
<div style="height: 60px; background: var(--av-action-primary); border-radius: var(--av-radius-md); display: grid; place-content: center; color: white; font-size: var(--av-text-xs);">Primary</div>
<div style="height: 60px; background: var(--av-action-primary-hover); border-radius: var(--av-radius-md); display: grid; place-content: center; color: white; font-size: var(--av-text-xs);">Hover</div>
<div style="height: 60px; background: oklch(var(--av-ink-success)); border-radius: var(--av-radius-md); display: grid; place-content: center; color: white; font-size: var(--av-text-xs);">Success</div>
<div style="height: 60px; background: oklch(var(--av-ink-warning)); border-radius: var(--av-radius-md); display: grid; place-content: center; color: white; font-size: var(--av-text-xs);">Warning</div>
<div style="height: 60px; background: oklch(var(--av-ink-danger)); border-radius: var(--av-radius-md); display: grid; place-content: center; color: white; font-size: var(--av-text-xs);">Danger</div>
<div style="height: 60px; background: var(--av-surface-studio); border: 1px solid var(--av-border-subtle); border-radius: var(--av-radius-md); display: grid; place-content: center; color: var(--av-text-muted); font-size: var(--av-text-xs);">Surface</div>
</div>
</div>
</article>
</div>
</div>
</main>
<footer style="text-align: center; padding: var(--av-space-8); border-top: 1px solid var(--av-border-subtle); color: var(--av-text-muted); font-size: var(--av-text-xs);">
Aviant Skin v0.1 · Proprietary System
</footer>
</div>
<script>lucide.createIcons();</script>
</body>
</html>