Owl login: sad droop, peek glow, tap jump; title in card; docs refreshed
- Wrong password: owl droops its head with a slow blink (replaces the head-shake) - Show password: the owl's eye rims and lenses glow amber - Tap the owl and it jumps - Title "G2Team Potential Updater" and "Sign in" centered inside the card; subtitle hides after sign-in - Password field autofocuses - DESIGN.md, design.json, PRODUCT.md and the design brief updated to match the page Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
VasanthandClaude Opus 5.5 committed
1 parent
3b6e35fa62
commit
1e44758398
5 files changed
+443
-106
No files matched your search
+371
-48
@@ -1,53 +1,364 @@
|
|||||||
{
|
{
|
||||||
"schemaVersion": 2,
|
"schemaVersion": 2,
|
||||||
"generatedAt": "2026-10-22T12:00:00Z",
|
"generatedAt": "2026-10-22T18:00:00Z",
|
||||||
"title": "Design System: Charge Billed Automation",
|
"title": "Design System: G2Team Potential Updater",
|
||||||
"extensions": {
|
"extensions": {
|
||||||
"colorMeta": {
|
"colorMeta": {
|
||||||
"night": { "role": "neutral", "displayName": "Night Navy", "canonical": "#040b26", "tonalRamp": ["oklch(15% 0.057 267)", "oklch(25% 0.057 267)", "oklch(35% 0.057 267)", "oklch(45% 0.057 267)", "oklch(55% 0.057 267)", "oklch(68% 0.057 267)", "oklch(80% 0.057 267)", "oklch(95% 0.057 267)"] },
|
"night": {
|
||||||
"panel": { "role": "neutral", "displayName": "Card Navy", "canonical": "#0c1638", "tonalRamp": ["oklch(15% 0.068 268)", "oklch(25% 0.068 268)", "oklch(35% 0.068 268)", "oklch(45% 0.068 268)", "oklch(55% 0.068 268)", "oklch(68% 0.068 268)", "oklch(80% 0.068 268)", "oklch(95% 0.068 268)"] },
|
"role": "neutral",
|
||||||
"panel-line": { "role": "neutral", "displayName": "Card Edge", "canonical": "#26335e", "tonalRamp": ["oklch(15% 0.078 269)", "oklch(25% 0.078 269)", "oklch(35% 0.078 269)", "oklch(45% 0.078 269)", "oklch(55% 0.078 269)", "oklch(68% 0.078 269)", "oklch(80% 0.078 269)", "oklch(95% 0.078 269)"] },
|
"displayName": "Night Navy",
|
||||||
"field": { "role": "neutral", "displayName": "Well Navy", "canonical": "#050c28", "tonalRamp": ["oklch(15% 0.059 268)", "oklch(25% 0.059 268)", "oklch(35% 0.059 268)", "oklch(45% 0.059 268)", "oklch(55% 0.059 268)", "oklch(68% 0.059 268)", "oklch(80% 0.059 268)", "oklch(95% 0.059 268)"] },
|
"canonical": "#040b26",
|
||||||
"field-line": { "role": "neutral", "displayName": "Field Edge", "canonical": "#56689c", "tonalRamp": ["oklch(15% 0.085 269)", "oklch(25% 0.085 269)", "oklch(35% 0.085 269)", "oklch(45% 0.085 269)", "oklch(55% 0.085 269)", "oklch(68% 0.085 269)", "oklch(80% 0.085 269)", "oklch(95% 0.085 269)"] },
|
"tonalRamp": [
|
||||||
"pill-fill": { "role": "neutral", "displayName": "Button Navy", "canonical": "#0a1435", "tonalRamp": ["oklch(15% 0.066 268)", "oklch(25% 0.066 268)", "oklch(35% 0.066 268)", "oklch(45% 0.066 268)", "oklch(55% 0.066 268)", "oklch(68% 0.066 268)", "oklch(80% 0.066 268)", "oklch(95% 0.066 268)"] },
|
"oklch(15% 0.057 267)",
|
||||||
"pill-fill-hover": { "role": "neutral", "displayName": "Button Navy Lifted", "canonical": "#101d45", "tonalRamp": ["oklch(15% 0.077 267)", "oklch(25% 0.077 267)", "oklch(35% 0.077 267)", "oklch(45% 0.077 267)", "oklch(55% 0.077 267)", "oklch(68% 0.077 267)", "oklch(80% 0.077 267)", "oklch(95% 0.077 267)"] },
|
"oklch(25% 0.057 267)",
|
||||||
"pill-line": { "role": "neutral", "displayName": "Moonlight Edge", "canonical": "#c9d5f2", "tonalRamp": ["oklch(15% 0.042 268)", "oklch(25% 0.042 268)", "oklch(35% 0.042 268)", "oklch(45% 0.042 268)", "oklch(55% 0.042 268)", "oklch(68% 0.042 268)", "oklch(80% 0.042 268)", "oklch(95% 0.042 268)"] },
|
"oklch(35% 0.057 267)",
|
||||||
"pill-text": { "role": "neutral", "displayName": "Pure White", "canonical": "#ffffff", "tonalRamp": ["oklch(15% 0 0)", "oklch(25% 0 0)", "oklch(35% 0 0)", "oklch(45% 0 0)", "oklch(55% 0 0)", "oklch(68% 0 0)", "oklch(80% 0 0)", "oklch(95% 0 0)"] },
|
"oklch(45% 0.057 267)",
|
||||||
"ink": { "role": "neutral", "displayName": "Starlight Ink", "canonical": "#eef2ff", "tonalRamp": ["oklch(15% 0.018 272)", "oklch(25% 0.018 272)", "oklch(35% 0.018 272)", "oklch(45% 0.018 272)", "oklch(55% 0.018 272)", "oklch(68% 0.018 272)", "oklch(80% 0.018 272)", "oklch(95% 0.018 272)"] },
|
"oklch(55% 0.057 267)",
|
||||||
"ink-2": { "role": "neutral", "displayName": "Mist Ink", "canonical": "#a9b6d8", "tonalRamp": ["oklch(15% 0.051 269)", "oklch(25% 0.051 269)", "oklch(35% 0.051 269)", "oklch(45% 0.051 269)", "oklch(55% 0.051 269)", "oklch(68% 0.051 269)", "oklch(80% 0.051 269)", "oklch(95% 0.051 269)"] },
|
"oklch(68% 0.057 267)",
|
||||||
"owl": { "role": "primary", "displayName": "Owl Orange", "canonical": "#ec7d33", "tonalRamp": ["oklch(15% 0.16 50)", "oklch(25% 0.16 50)", "oklch(35% 0.16 50)", "oklch(45% 0.16 50)", "oklch(55% 0.16 50)", "oklch(68% 0.16 50)", "oklch(80% 0.16 50)", "oklch(95% 0.16 50)"] },
|
"oklch(80% 0.057 267)",
|
||||||
"owl-soft": { "role": "primary", "displayName": "Lamplight Orange", "canonical": "#f5a25a", "tonalRamp": ["oklch(15% 0.132 60)", "oklch(25% 0.132 60)", "oklch(35% 0.132 60)", "oklch(45% 0.132 60)", "oklch(55% 0.132 60)", "oklch(68% 0.132 60)", "oklch(80% 0.132 60)", "oklch(95% 0.132 60)"] },
|
"oklch(95% 0.057 267)"
|
||||||
"error": { "role": "semantic", "displayName": "Soft Alarm", "canonical": "#ff9a9a", "tonalRamp": ["oklch(15% 0.121 20)", "oklch(25% 0.121 20)", "oklch(35% 0.121 20)", "oklch(45% 0.121 20)", "oklch(55% 0.121 20)", "oklch(68% 0.121 20)", "oklch(80% 0.121 20)", "oklch(95% 0.121 20)"] }
|
]
|
||||||
|
},
|
||||||
|
"panel": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Card Navy",
|
||||||
|
"canonical": "#0c1638",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.068 268)",
|
||||||
|
"oklch(25% 0.068 268)",
|
||||||
|
"oklch(35% 0.068 268)",
|
||||||
|
"oklch(45% 0.068 268)",
|
||||||
|
"oklch(55% 0.068 268)",
|
||||||
|
"oklch(68% 0.068 268)",
|
||||||
|
"oklch(80% 0.068 268)",
|
||||||
|
"oklch(95% 0.068 268)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"panel-line": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Card Edge",
|
||||||
|
"canonical": "#26335e",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.078 269)",
|
||||||
|
"oklch(25% 0.078 269)",
|
||||||
|
"oklch(35% 0.078 269)",
|
||||||
|
"oklch(45% 0.078 269)",
|
||||||
|
"oklch(55% 0.078 269)",
|
||||||
|
"oklch(68% 0.078 269)",
|
||||||
|
"oklch(80% 0.078 269)",
|
||||||
|
"oklch(95% 0.078 269)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"field": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Well Navy",
|
||||||
|
"canonical": "#050c28",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.059 268)",
|
||||||
|
"oklch(25% 0.059 268)",
|
||||||
|
"oklch(35% 0.059 268)",
|
||||||
|
"oklch(45% 0.059 268)",
|
||||||
|
"oklch(55% 0.059 268)",
|
||||||
|
"oklch(68% 0.059 268)",
|
||||||
|
"oklch(80% 0.059 268)",
|
||||||
|
"oklch(95% 0.059 268)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"field-line": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Field Edge",
|
||||||
|
"canonical": "#56689c",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.085 269)",
|
||||||
|
"oklch(25% 0.085 269)",
|
||||||
|
"oklch(35% 0.085 269)",
|
||||||
|
"oklch(45% 0.085 269)",
|
||||||
|
"oklch(55% 0.085 269)",
|
||||||
|
"oklch(68% 0.085 269)",
|
||||||
|
"oklch(80% 0.085 269)",
|
||||||
|
"oklch(95% 0.085 269)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pill-fill": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Button Navy",
|
||||||
|
"canonical": "#0a1435",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.066 268)",
|
||||||
|
"oklch(25% 0.066 268)",
|
||||||
|
"oklch(35% 0.066 268)",
|
||||||
|
"oklch(45% 0.066 268)",
|
||||||
|
"oklch(55% 0.066 268)",
|
||||||
|
"oklch(68% 0.066 268)",
|
||||||
|
"oklch(80% 0.066 268)",
|
||||||
|
"oklch(95% 0.066 268)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pill-fill-hover": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Button Navy Lifted",
|
||||||
|
"canonical": "#101d45",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.077 267)",
|
||||||
|
"oklch(25% 0.077 267)",
|
||||||
|
"oklch(35% 0.077 267)",
|
||||||
|
"oklch(45% 0.077 267)",
|
||||||
|
"oklch(55% 0.077 267)",
|
||||||
|
"oklch(68% 0.077 267)",
|
||||||
|
"oklch(80% 0.077 267)",
|
||||||
|
"oklch(95% 0.077 267)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pill-line": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Moonlight Edge",
|
||||||
|
"canonical": "#c9d5f2",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.042 268)",
|
||||||
|
"oklch(25% 0.042 268)",
|
||||||
|
"oklch(35% 0.042 268)",
|
||||||
|
"oklch(45% 0.042 268)",
|
||||||
|
"oklch(55% 0.042 268)",
|
||||||
|
"oklch(68% 0.042 268)",
|
||||||
|
"oklch(80% 0.042 268)",
|
||||||
|
"oklch(95% 0.042 268)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"pill-text": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Pure White",
|
||||||
|
"canonical": "#ffffff",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0 0)",
|
||||||
|
"oklch(25% 0 0)",
|
||||||
|
"oklch(35% 0 0)",
|
||||||
|
"oklch(45% 0 0)",
|
||||||
|
"oklch(55% 0 0)",
|
||||||
|
"oklch(68% 0 0)",
|
||||||
|
"oklch(80% 0 0)",
|
||||||
|
"oklch(95% 0 0)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ink": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Starlight Ink",
|
||||||
|
"canonical": "#eef2ff",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.018 272)",
|
||||||
|
"oklch(25% 0.018 272)",
|
||||||
|
"oklch(35% 0.018 272)",
|
||||||
|
"oklch(45% 0.018 272)",
|
||||||
|
"oklch(55% 0.018 272)",
|
||||||
|
"oklch(68% 0.018 272)",
|
||||||
|
"oklch(80% 0.018 272)",
|
||||||
|
"oklch(95% 0.018 272)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"ink-2": {
|
||||||
|
"role": "neutral",
|
||||||
|
"displayName": "Mist Ink",
|
||||||
|
"canonical": "#a9b6d8",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.051 269)",
|
||||||
|
"oklch(25% 0.051 269)",
|
||||||
|
"oklch(35% 0.051 269)",
|
||||||
|
"oklch(45% 0.051 269)",
|
||||||
|
"oklch(55% 0.051 269)",
|
||||||
|
"oklch(68% 0.051 269)",
|
||||||
|
"oklch(80% 0.051 269)",
|
||||||
|
"oklch(95% 0.051 269)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"owl": {
|
||||||
|
"role": "primary",
|
||||||
|
"displayName": "Owl Orange",
|
||||||
|
"canonical": "#ec7d33",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.16 50)",
|
||||||
|
"oklch(25% 0.16 50)",
|
||||||
|
"oklch(35% 0.16 50)",
|
||||||
|
"oklch(45% 0.16 50)",
|
||||||
|
"oklch(55% 0.16 50)",
|
||||||
|
"oklch(68% 0.16 50)",
|
||||||
|
"oklch(80% 0.16 50)",
|
||||||
|
"oklch(95% 0.16 50)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"owl-soft": {
|
||||||
|
"role": "primary",
|
||||||
|
"displayName": "Lamplight Orange",
|
||||||
|
"canonical": "#f5a25a",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.132 60)",
|
||||||
|
"oklch(25% 0.132 60)",
|
||||||
|
"oklch(35% 0.132 60)",
|
||||||
|
"oklch(45% 0.132 60)",
|
||||||
|
"oklch(55% 0.132 60)",
|
||||||
|
"oklch(68% 0.132 60)",
|
||||||
|
"oklch(80% 0.132 60)",
|
||||||
|
"oklch(95% 0.132 60)"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"error": {
|
||||||
|
"role": "semantic",
|
||||||
|
"displayName": "Soft Alarm",
|
||||||
|
"canonical": "#ff9a9a",
|
||||||
|
"tonalRamp": [
|
||||||
|
"oklch(15% 0.121 20)",
|
||||||
|
"oklch(25% 0.121 20)",
|
||||||
|
"oklch(35% 0.121 20)",
|
||||||
|
"oklch(45% 0.121 20)",
|
||||||
|
"oklch(55% 0.121 20)",
|
||||||
|
"oklch(68% 0.121 20)",
|
||||||
|
"oklch(80% 0.121 20)",
|
||||||
|
"oklch(95% 0.121 20)"
|
||||||
|
]
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"typographyMeta": {
|
"typographyMeta": {
|
||||||
"display": { "displayName": "Display", "purpose": "Product name above the card. Single instance." },
|
"display": {
|
||||||
"title": { "displayName": "Title", "purpose": "Signed-in confirmation heading. Single instance." },
|
"displayName": "Display",
|
||||||
"body": { "displayName": "Body", "purpose": "Subtitle and running copy, usually in Mist Ink." },
|
"purpose": "Product name, centered at the top of the card. Single instance."
|
||||||
"label": { "displayName": "Label", "purpose": "Field labels, 8px above the field." },
|
},
|
||||||
"button": { "displayName": "Button", "purpose": "Pill button label." },
|
"title": {
|
||||||
"input": { "displayName": "Input", "purpose": "Typed text; 16px avoids mobile zoom." },
|
"displayName": "Title",
|
||||||
"message": { "displayName": "Message", "purpose": "Error and caps-lock lines under the field." }
|
"purpose": "Signed-in confirmation heading. Single instance."
|
||||||
|
},
|
||||||
|
"body": {
|
||||||
|
"displayName": "Body",
|
||||||
|
"purpose": "The \"Sign in\" subtitle and running copy, usually in Mist Ink."
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
|
"displayName": "Label",
|
||||||
|
"purpose": "Field labels, 8px above the field."
|
||||||
|
},
|
||||||
|
"button": {
|
||||||
|
"displayName": "Button",
|
||||||
|
"purpose": "Pill button label."
|
||||||
|
},
|
||||||
|
"input": {
|
||||||
|
"displayName": "Input",
|
||||||
|
"purpose": "Typed text; 16px avoids mobile zoom."
|
||||||
|
},
|
||||||
|
"message": {
|
||||||
|
"displayName": "Message",
|
||||||
|
"purpose": "Error and caps-lock lines under the field."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"shadows": [
|
"shadows": [
|
||||||
{ "name": "night-lift", "value": "0 18px 40px rgba(0, 3, 15, .5)", "purpose": "The sign-in card only; the single raised surface. Single instance." }
|
{
|
||||||
|
"name": "night-lift",
|
||||||
|
"value": "0 18px 40px rgba(0, 3, 15, .5)",
|
||||||
|
"purpose": "The sign-in card only; the single raised surface. Single instance."
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"focusRings": [
|
"focusRings": [
|
||||||
{ "name": "control-focus", "value": "outline: 2px solid #ec7d33; outline-offset: 2px (input, plus border-color #ec7d33), 3px (pill button), 0 (reveal icon button)", "purpose": "Keyboard focus on every interactive element; turns #ff9a9a on an invalid field." }
|
{
|
||||||
|
"name": "control-focus",
|
||||||
|
"value": "outline: 2px solid #ec7d33; outline-offset: 2px (input, plus border-color #ec7d33), 3px (pill button), 0 (reveal icon button)",
|
||||||
|
"purpose": "Keyboard focus on every interactive element; turns #ff9a9a on an invalid field."
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"motion": [
|
"motion": [
|
||||||
{ "name": "control-transition", "value": ".15s ease-out", "purpose": "Pill button border and fill on hover." },
|
{
|
||||||
{ "name": "gaze", "value": "transform .14s ease-out", "purpose": "Owl irises following the caret." },
|
"name": "control-transition",
|
||||||
{ "name": "blink", "value": "transform .08s ease-out, 160ms, every 2.5-6s", "purpose": "Owl eyelids." },
|
"value": ".15s ease-out",
|
||||||
{ "name": "breathe", "value": "3.2s ease-in-out infinite, translateY(1.5px)", "purpose": "Owl idle bob." },
|
"purpose": "Pill button border and fill on hover."
|
||||||
{ "name": "shake-no", "value": ".65s ease-in-out; glasses wobble .65s with .07s delay", "purpose": "Wrong password." },
|
},
|
||||||
{ "name": "tilt", "value": ".8s ease-in-out, rotate(-10deg)", "purpose": "Empty submit." },
|
{
|
||||||
{ "name": "hop", "value": ".75s cubic-bezier(.3, .6, .35, 1), translateY(-14px) then -3px rebound; wings flap .75s; smile-eyes .12s ease-out", "purpose": "Successful sign-in." },
|
"name": "gaze",
|
||||||
{ "name": "twinkle", "value": "4s ease-in-out infinite, opacity to .15", "purpose": "About a third of the stars." },
|
"value": "transform .14s ease-out",
|
||||||
{ "name": "reduced-motion", "value": "prefers-reduced-motion: reduce", "purpose": "All owl and star animation and transitions off, no blink, success goes straight to the signed-in panel." }
|
"purpose": "Owl irises following the caret."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "blink",
|
||||||
|
"value": "transform .08s ease-out, 160ms, every 2.5-6s; skipped during happy and sad",
|
||||||
|
"purpose": "Owl eyelids."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "breathe",
|
||||||
|
"value": "3.2s ease-in-out infinite, translateY(.4 SVG units, about 1.6px)",
|
||||||
|
"purpose": "Owl idle bob."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "droop",
|
||||||
|
"value": "1.4s ease-in-out, head translateY(1.2 units) rotate(-6deg); slow-blink lids 1.4s",
|
||||||
|
"purpose": "Wrong password (sad)."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "peek",
|
||||||
|
"value": ".15s ease-out on stroke, fill, fill-opacity, filter",
|
||||||
|
"purpose": "Owl eye rims and lenses glow amber while the password is shown."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "tilt",
|
||||||
|
"value": ".8s ease-in-out, rotate(-10deg)",
|
||||||
|
"purpose": "Empty submit."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "hop",
|
||||||
|
"value": ".75s cubic-bezier(.3, .6, .35, 1), translateY(-14 units) then -3 rebound; wings flap .75s; smile-eyes .12s ease-out",
|
||||||
|
"purpose": "Successful sign-in (with smile) and tap-the-owl jump (without)."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "twinkle",
|
||||||
|
"value": "4s ease-in-out infinite, opacity to .15",
|
||||||
|
"purpose": "About a third of the stars."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "reduced-motion",
|
||||||
|
"value": "prefers-reduced-motion: reduce",
|
||||||
|
"purpose": "All owl and star animation and transitions off, no blink or tap jump, success goes straight to the signed-in panel; gaze and peek glow still apply without easing."
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"breakpoints": [
|
"breakpoints": [
|
||||||
{ "name": "narrow", "value": "420px", "purpose": "Owl shrinks from 212px to 172px wide." }
|
{
|
||||||
]
|
"name": "narrow",
|
||||||
|
"value": "420px",
|
||||||
|
"purpose": "Owl shrinks from 190px to 160px wide."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"illustration": {
|
||||||
|
"stars": [
|
||||||
|
"#6ea8ff",
|
||||||
|
"#4fd1c5",
|
||||||
|
"#f29c4b",
|
||||||
|
"#dfe7ff"
|
||||||
|
],
|
||||||
|
"owl": {
|
||||||
|
"viewBox": "0 0 48 50",
|
||||||
|
"outline": "#38200b at 1.2 stroke",
|
||||||
|
"coat": [
|
||||||
|
"#ff990e",
|
||||||
|
"#f58200",
|
||||||
|
"#bd4b00"
|
||||||
|
],
|
||||||
|
"wing": [
|
||||||
|
"#ed7b00",
|
||||||
|
"#a73e00"
|
||||||
|
],
|
||||||
|
"crownFeathers": "#ac4904",
|
||||||
|
"chevrons": "#ffbe42",
|
||||||
|
"faceDisc": "#ffe8b3",
|
||||||
|
"eyeWhite": "#fffdf4",
|
||||||
|
"iris": "#6b3518",
|
||||||
|
"pupil": "#170e08",
|
||||||
|
"glasses": "#2a180c, rounded rectangles 10x6 rx 1.5, sitting low on the face",
|
||||||
|
"beak": "#eb870a",
|
||||||
|
"feet": "#ed900f",
|
||||||
|
"groundGlow": "#ffaa5a at .35 to 0",
|
||||||
|
"peekGlow": {
|
||||||
|
"rimStroke": "#ffc400",
|
||||||
|
"rimGlow": [
|
||||||
|
"#ffd84d",
|
||||||
|
"#ffb300"
|
||||||
|
],
|
||||||
|
"lensFill": "#ffe066 at .45",
|
||||||
|
"lensGlow": "#ffc400"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"note": "Mascot illustration values only; never applied to UI chrome."
|
||||||
|
}
|
||||||
},
|
},
|
||||||
"components": [
|
"components": [
|
||||||
{
|
{
|
||||||
@@ -77,32 +388,44 @@
|
|||||||
"name": "Night Card",
|
"name": "Night Card",
|
||||||
"kind": "card",
|
"kind": "card",
|
||||||
"refersTo": "card",
|
"refersTo": "card",
|
||||||
"description": "The single raised surface: Card Navy, 1px Card Edge, 18px corners, night-lift shadow. Single instance.",
|
"description": "The single raised surface: Card Navy, 1px Card Edge, 18px corners, night-lift shadow, with the product name and subtitle centered at its top. Single instance.",
|
||||||
"html": "<section class=\"ds-card\"><h2 class=\"ds-title\">Run screen coming soon</h2><p class=\"ds-body\">You're signed in. This is where you'll start and watch the bot.</p></section>",
|
"html": "<section class=\"ds-card\"><h1 class=\"ds-h1\">G2Team Potential Updater</h1><p class=\"ds-sub\">Sign in</p><h2 class=\"ds-title\">Run screen coming soon</h2><p class=\"ds-body\">You're signed in. This is where you'll start and watch the bot.</p></section>",
|
||||||
"css": ".ds-card { width: min(360px, 100%); box-sizing: border-box; padding: 28px 24px 24px; background: var(--panel, #0c1638); border: 1px solid var(--panel-line, #26335e); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 3, 15, .5); color: var(--ink, #eef2ff); font: 15px/1.5 \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, sans-serif; } .ds-title { margin: 0; font-size: 20px; } .ds-body { margin: 6px 0 0; color: var(--ink-2, #a9b6d8); }"
|
"css": ".ds-card { width: min(360px, 100%); box-sizing: border-box; padding: 28px 24px 24px; background: var(--panel, #0c1638); border: 1px solid var(--panel-line, #26335e); border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 3, 15, .5); color: var(--ink, #eef2ff); font: 15px/1.5 \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, sans-serif; } .ds-h1 { margin: 0; font-size: clamp(20px, 5vw, 23px); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; text-align: center; } .ds-sub { margin: 4px 0 22px; color: var(--ink-2, #a9b6d8); text-align: center; } .ds-title { margin: 0; font-size: 20px; } .ds-body { margin: 6px 0 0; color: var(--ink-2, #a9b6d8); }"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Night Sky Header",
|
"name": "Night Sky",
|
||||||
"kind": "custom",
|
"kind": "custom",
|
||||||
"description": "Night Navy ground with small round stars, display product name and Mist Ink subtitle.",
|
"description": "Night Navy ground with small, sparse round stars, about a third twinkling; kept clear of text and the card.",
|
||||||
"html": "<div class=\"ds-sky\"><span style=\"left:12%;top:20%;--c:#6ea8ff\"></span><span style=\"left:80%;top:30%;--c:#4fd1c5\"></span><span style=\"left:30%;top:78%;--c:#f29c4b\"></span><span style=\"left:66%;top:84%;--c:#dfe7ff\"></span><h1 class=\"ds-h1\">Charge Billed Automation</h1><p class=\"ds-sub\">Sign in to run the bot</p></div>",
|
"html": "<div class=\"ds-sky\"><span style=\"left:12%;top:20%;--c:#6ea8ff\"></span><span style=\"left:80%;top:30%;--c:#4fd1c5\"></span><span style=\"left:30%;top:78%;--c:#f29c4b\"></span><span style=\"left:66%;top:84%;--c:#dfe7ff\"></span></div>",
|
||||||
"css": ".ds-sky { position: relative; padding: 48px 16px; background: var(--night, #040b26); color: var(--ink, #eef2ff); text-align: center; font: 15px/1.5 \"Segoe UI Variable Text\", \"Segoe UI\", system-ui, sans-serif; } .ds-sky span { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--c); opacity: .7; animation: ds-twinkle 4s ease-in-out infinite; } @keyframes ds-twinkle { 50% { opacity: .15; } } .ds-h1 { margin: 0; font-size: clamp(24px, 6vw, 30px); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; } .ds-sub { margin: 8px 0 0; color: var(--ink-2, #a9b6d8); } @media (prefers-reduced-motion: reduce) { .ds-sky span { animation: none; } }"
|
"css": ".ds-sky { position: relative; height: 140px; background: var(--night, #040b26); } .ds-sky span { position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--c); opacity: .7; animation: ds-twinkle 4s ease-in-out infinite; } @keyframes ds-twinkle { 50% { opacity: .15; } } @media (prefers-reduced-motion: reduce) { .ds-sky span { animation: none; } }"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"narrative": {
|
"narrative": {
|
||||||
"northStar": "The Owl's Night Watch",
|
"northStar": "The Owl's Night Watch",
|
||||||
"overview": "A calm night sky, one lit card, and a smooth, softly shaded orange owl perched on its top edge who watches you type. Everything around the owl is quiet and dark: deep navy ground, a few small round stars, dark outlined pill controls, and the platform's own UI face. The owl is the only warm thing on the screen and the only thing that moves with purpose; its reactions (eyes following the caret, a head-shake on a wrong password, a hop on success) carry the feedback alongside plain text, never instead of it.\n\nThe world is rendered natural, not game-like. The user explicitly rejected a pixel-art or game look (\"it must not look like a game, be natural\"): shapes are smooth vector curves with radial-gradient shading, stars are soft round dots, motion is short and eased. This is an Operate tool for an ops team, so density stays low and copy stays plain.\n\nThe system has been built on one surface so far (the sign-in page). Anything below described as a single instance has only that one use in the build and should be treated as provisional, not a pattern.",
|
"overview": "A calm night sky, one lit card, and a smooth, softly shaded orange owl perched on its top edge who watches you type. Everything around the owl is quiet and dark: deep navy ground, a few small round stars, dark outlined pill controls, and the platform's own UI face. The owl is the only warm thing on the screen and the only thing that moves with purpose; its reactions (eyes following the caret, a sad droop on a wrong password, an amber glow when the password is shown, a hop on success) carry the feedback alongside plain text, never instead of it.\n\nThe world is rendered natural, not game-like. The user explicitly rejected a pixel-art or game look (\"it must not look like a game, be natural\"): shapes are smooth vector curves with radial-gradient shading, stars are soft round dots, motion is short and eased. This is an Operate tool for an ops team, so density stays low and copy stays plain.\n\nThe system has been built on one surface so far (the sign-in page). Anything below described as a single instance has only that one use in the build and should be treated as provisional, not a pattern.",
|
||||||
"keyCharacteristics": [
|
"keyCharacteristics": [
|
||||||
"Deep navy night ground with a sparse, seeded field of small round stars, kept clear of text and controls.",
|
"Deep navy night ground with a sparse, seeded field of small round stars, kept clear of text and controls.",
|
||||||
"One warm accent, owl orange, reserved for the owl, focus rings, caret, selection and the hover border.",
|
"One warm accent, owl orange, reserved for the owl, focus rings, caret, selection and the hover border.",
|
||||||
"Dark outlined pill controls for both the field and the button, after the user's HOOT button.",
|
"Dark outlined pill controls for both the field and the button, after the user's HOOT button.",
|
||||||
"Platform UI face for every text role, including the product name.",
|
"Platform UI face for every text role, including the product name.",
|
||||||
"A smooth shaded owl mascot whose states are the page's expressive feedback; reduced motion turns them all off."
|
"A smooth shaded owl mascot whose states are the page's expressive feedback; reduced motion turns its movement off."
|
||||||
],
|
],
|
||||||
"rules": [
|
"rules": [
|
||||||
{ "name": "The One Warm Thing Rule", "body": "Orange belongs to the owl. In the UI it appears only as a signal (focus, caret, selection, hover border, the caps-lock note); controls and surfaces stay navy.", "section": "colors" },
|
{
|
||||||
{ "name": "The Clear Sky Rule", "body": "Stars never sit behind text, the owl or the card; they are placed with a 10px keep-out around each and redrawn on resize from a fixed seed so they do not jump.", "section": "colors" },
|
"name": "The One Warm Thing Rule",
|
||||||
{ "name": "The Single Lift Rule", "body": "One raised surface per screen; controls are outlined, not shadowed.", "section": "elevation" }
|
"body": "Orange belongs to the owl. In the UI it appears only as a signal (focus, caret, selection, hover border, the caps-lock note); controls and surfaces stay navy. The owl's ambers and golds stay inside the owl.",
|
||||||
|
"section": "colors"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "The Clear Sky Rule",
|
||||||
|
"body": "Stars never sit behind text, the owl or the card; they are placed with a 10px keep-out around each and redrawn on resize from a fixed seed so they do not jump.",
|
||||||
|
"section": "colors"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "The Single Lift Rule",
|
||||||
|
"body": "One raised surface per screen; controls are outlined, not shadowed.",
|
||||||
|
"section": "elevation"
|
||||||
|
}
|
||||||
],
|
],
|
||||||
"dos": [
|
"dos": [
|
||||||
"Do keep the ground Night Navy and let the owl be the only warm, shaded object on screen.",
|
"Do keep the ground Night Navy and let the owl be the only warm, shaded object on screen.",
|
||||||
|
|||||||
@@ -15,9 +15,9 @@ THESIS: A sign-in the owl watches. Refuses the faceless centered form with a log
|
|||||||
|
|
||||||
OWN-WORLD: The user's pinned world, rendered natural, not game-like (user, 22 Oct: no pixel look). Deep navy night ground (#040b26) with small soft round stars (blue, teal, orange, white). A smooth, softly shaded orange owl like the user's reference: dome head with ear tufts, egg body, wide cream face disc, big brown eyes behind round black glasses, peach belly, darker wings, small feet. Dark outlined pill controls, like the user's HOOT button, for both the field and the button. Product name and all text in the platform UI face; standard stroke eye icon.
|
OWN-WORLD: The user's pinned world, rendered natural, not game-like (user, 22 Oct: no pixel look). Deep navy night ground (#040b26) with small soft round stars (blue, teal, orange, white). A smooth, softly shaded orange owl like the user's reference: dome head with ear tufts, egg body, wide cream face disc, big brown eyes behind round black glasses, peach belly, darker wings, small feet. Dark outlined pill controls, like the user's HOOT button, for both the field and the button. Product name and all text in the platform UI face; standard stroke eye icon.
|
||||||
|
|
||||||
STORY: The ops user sees the owl, types the G2 password, and the owl's eyes follow the typing. A wrong password makes the owl shake its head no and the text says what to do. The right one makes it hop and lets them in.
|
STORY: The ops user sees the owl, types the G2 password, and the owl's eyes follow the typing. A wrong password makes the owl droop sadly and blink slowly and the text says what to do. The right one makes it hop and lets them in.
|
||||||
|
|
||||||
FIRST VIEWPORT: Centered column. Product name "Charge Billed Automation", then the card with the owl perched on its top edge (feet on the border), password field with show/hide, full-width pill Sign in. The night sky fills the viewport.
|
FIRST VIEWPORT: Centered column. The card with the owl perched on its top edge (feet on the border); inside the card, centered, the product name "G2Team Potential Updater" and "Sign in", then the password field with show/hide and a full-width pill Sign in. The night sky fills the viewport.
|
||||||
|
|
||||||
FORM: The user's pinned owl world (their screenshot, then "be natural", not game-like) governs; the roll was run for the record and does not override it. seed:60012e4e290e73f6
|
FORM: The user's pinned owl world (their screenshot, then "be natural", not game-like) governs; the roll was run for the record and does not override it. seed:60012e4e290e73f6
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
name: Charge Billed Automation
|
name: G2Team Potential Updater
|
||||||
description: A local ops tool for running the Charge Billed bot, set in a quiet night sky watched by an orange owl.
|
description: A local ops tool for running the Charge Billed bot, set in a quiet night sky watched by an orange owl.
|
||||||
colors:
|
colors:
|
||||||
night: "#040b26"
|
night: "#040b26"
|
||||||
@@ -19,7 +19,7 @@ colors:
|
|||||||
typography:
|
typography:
|
||||||
display:
|
display:
|
||||||
fontFamily: "Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif"
|
fontFamily: "Segoe UI Variable Text, Segoe UI, system-ui, -apple-system, sans-serif"
|
||||||
fontSize: "clamp(24px, 6vw, 30px)"
|
fontSize: "clamp(20px, 5vw, 23px)"
|
||||||
fontWeight: 650
|
fontWeight: 650
|
||||||
lineHeight: 1.2
|
lineHeight: 1.2
|
||||||
letterSpacing: "-0.01em"
|
letterSpacing: "-0.01em"
|
||||||
@@ -89,13 +89,13 @@ components:
|
|||||||
width: "min(360px, 100%)"
|
width: "min(360px, 100%)"
|
||||||
---
|
---
|
||||||
|
|
||||||
# Design System: Charge Billed Automation
|
# Design System: G2Team Potential Updater
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|
||||||
**Creative North Star: "The Owl's Night Watch"**
|
**Creative North Star: "The Owl's Night Watch"**
|
||||||
|
|
||||||
A calm night sky, one lit card, and a smooth, softly shaded orange owl perched on its top edge who watches you type. Everything around the owl is quiet and dark: deep navy ground, a few small round stars, dark outlined pill controls, and the platform's own UI face. The owl is the only warm thing on the screen and the only thing that moves with purpose; its reactions (eyes following the caret, a head-shake on a wrong password, a hop on success) carry the feedback alongside plain text, never instead of it.
|
A calm night sky, one lit card, and a smooth, softly shaded orange owl perched on its top edge who watches you type. Everything around the owl is quiet and dark: deep navy ground, a few small round stars, dark outlined pill controls, and the platform's own UI face. The owl is the only warm thing on the screen and the only thing that moves with purpose; its reactions (eyes following the caret, a sad droop on a wrong password, an amber glow when the password is shown, a hop on success) carry the feedback alongside plain text, never instead of it.
|
||||||
|
|
||||||
The world is rendered natural, not game-like. The user explicitly rejected a pixel-art or game look ("it must not look like a game, be natural"): shapes are smooth vector curves with radial-gradient shading, stars are soft round dots, motion is short and eased. This is an Operate tool for an ops team, so density stays low and copy stays plain.
|
The world is rendered natural, not game-like. The user explicitly rejected a pixel-art or game look ("it must not look like a game, be natural"): shapes are smooth vector curves with radial-gradient shading, stars are soft round dots, motion is short and eased. This is an Operate tool for an ops team, so density stays low and copy stays plain.
|
||||||
|
|
||||||
@@ -106,14 +106,14 @@ The system has been built on one surface so far (the sign-in page). Anything bel
|
|||||||
- One warm accent, owl orange, reserved for the owl, focus rings, caret, selection and the hover border.
|
- One warm accent, owl orange, reserved for the owl, focus rings, caret, selection and the hover border.
|
||||||
- Dark outlined pill controls for both the field and the button, after the user's HOOT button.
|
- Dark outlined pill controls for both the field and the button, after the user's HOOT button.
|
||||||
- Platform UI face for every text role, including the product name.
|
- Platform UI face for every text role, including the product name.
|
||||||
- A smooth shaded owl mascot whose states are the page's expressive feedback; reduced motion turns them all off.
|
- A smooth shaded owl mascot whose states are the page's expressive feedback; reduced motion turns its movement off.
|
||||||
|
|
||||||
## Colors
|
## Colors
|
||||||
|
|
||||||
A cold, near-monochrome navy ramp lit by a single warm orange; the warmth belongs to the owl.
|
A cold, near-monochrome navy ramp lit by a single warm orange; the warmth belongs to the owl.
|
||||||
|
|
||||||
### Primary
|
### Primary
|
||||||
- **Owl Orange** (`owl`): the owl's mid-tone and the system's only accent. Used for focus outlines on every control, the hover border on the pill button, the text caret, and the text-selection background (with Night as the selected text). It is never a fill for controls.
|
- **Owl Orange** (`owl`): the system's only UI accent. Used for focus outlines on every control, the hover border on the pill button, the text caret, and the text-selection background (with Night as the selected text). It is never a fill for controls.
|
||||||
- **Lamplight Orange** (`owl-soft`): the gentler orange for advisory text, currently only the "Caps Lock is on" note (single instance).
|
- **Lamplight Orange** (`owl-soft`): the gentler orange for advisory text, currently only the "Caps Lock is on" note (single instance).
|
||||||
|
|
||||||
### Neutral
|
### Neutral
|
||||||
@@ -124,18 +124,19 @@ A cold, near-monochrome navy ramp lit by a single warm orange; the warmth belong
|
|||||||
- **Field Edge** (`field-line`): the input's resting 1px border (about 3.4:1 against the field).
|
- **Field Edge** (`field-line`): the input's resting 1px border (about 3.4:1 against the field).
|
||||||
- **Button Navy** (`pill-fill`) and **Button Navy Lifted** (`pill-fill-hover`): the pill button's fill at rest and on hover. These live as literal values in the button rule, not as custom properties.
|
- **Button Navy** (`pill-fill`) and **Button Navy Lifted** (`pill-fill-hover`): the pill button's fill at rest and on hover. These live as literal values in the button rule, not as custom properties.
|
||||||
- **Moonlight Edge** (`pill-line`): the button's 1.5px outline. At 10% alpha it is also the reveal icon's hover wash.
|
- **Moonlight Edge** (`pill-line`): the button's 1.5px outline. At 10% alpha it is also the reveal icon's hover wash.
|
||||||
- **Starlight Ink** (`ink`): primary text and input text.
|
- **Starlight Ink** (`ink`): primary text, the product name and input text.
|
||||||
- **Mist Ink** (`ink-2`): secondary text (the subtitle, body copy under the signed-in title) and the resting reveal icon.
|
- **Mist Ink** (`ink-2`): secondary text (the "Sign in" subtitle, body copy under the signed-in title) and the resting reveal icon.
|
||||||
- **Pure White** (`pill-text`): the pill button label only.
|
- **Pure White** (`pill-text`): the pill button label only.
|
||||||
|
|
||||||
### Semantic
|
### Semantic
|
||||||
- **Soft Alarm** (`error`): error message text and the invalid field's border and focus outline. A light coral chosen to read on navy, not a saturated red.
|
- **Soft Alarm** (`error`): error message text and the invalid field's border and focus outline. A light coral chosen to read on navy, not a saturated red.
|
||||||
|
|
||||||
### Star field
|
### Illustration values (not UI tokens)
|
||||||
Stars are drawn by script from four colors (Sky Blue `#6ea8ff`, Teal `#4fd1c5`, Ember `#f29c4b`, Frost `#dfe7ff`), 1.5 to 3px, 0.45 to 0.9 opacity, about a third twinkling. These are illustration values, not UI tokens.
|
- **Star field:** stars are drawn by script from four colors (Sky Blue `#6ea8ff`, Teal `#4fd1c5`, Ember `#f29c4b`, Frost `#dfe7ff`), 1.5 to 3px, 0.45 to 0.9 opacity, about a third twinkling.
|
||||||
|
- **Owl palette:** the mascot's own gradients and fills, listed under The Owl in Components, including its peek glow (`#ffc400`, `#ffd84d`, `#ffb300`, `#ffe066`). These live only inside the owl SVG and its state rules; they are never applied to UI chrome.
|
||||||
|
|
||||||
### Named Rules
|
### Named Rules
|
||||||
**The One Warm Thing Rule.** Orange belongs to the owl. In the UI it appears only as a signal (focus, caret, selection, hover border, the caps-lock note); controls and surfaces stay navy.
|
**The One Warm Thing Rule.** Orange belongs to the owl. In the UI it appears only as a signal (focus, caret, selection, hover border, the caps-lock note); controls and surfaces stay navy. The owl's ambers and golds stay inside the owl.
|
||||||
|
|
||||||
**The Clear Sky Rule.** Stars never sit behind text, the owl or the card; they are placed with a 10px keep-out around each and redrawn on resize from a fixed seed so they do not jump.
|
**The Clear Sky Rule.** Stars never sit behind text, the owl or the card; they are placed with a 10px keep-out around each and redrawn on resize from a fixed seed so they do not jump.
|
||||||
|
|
||||||
@@ -148,9 +149,9 @@ Stars are drawn by script from four colors (Sky Blue `#6ea8ff`, Teal `#4fd1c5`,
|
|||||||
**Character:** One platform face for everything, as the direction contract specifies for this Windows-hosted ops tool. Hierarchy comes from weight and size, not from a second family.
|
**Character:** One platform face for everything, as the direction contract specifies for this Windows-hosted ops tool. Hierarchy comes from weight and size, not from a second family.
|
||||||
|
|
||||||
### Hierarchy
|
### Hierarchy
|
||||||
- **Display** (650, clamp(24px, 6vw, 30px), 1.2, -0.01em, balanced wrapping): the product name above the card. Single instance.
|
- **Display** (650, clamp(20px, 5vw, 23px), 1.2, -0.01em, balanced wrapping): the product name, centered at the top of the card. Single instance.
|
||||||
- **Title** (700, 20px): the signed-in confirmation heading. Single instance.
|
- **Title** (700, 20px): the signed-in confirmation heading. Single instance.
|
||||||
- **Body** (400, 15px, 1.5): subtitle and running copy, usually in Mist Ink.
|
- **Body** (400, 15px, 1.5): the "Sign in" subtitle and running copy, usually in Mist Ink.
|
||||||
- **Label** (600, 15px): field labels, 8px above the field.
|
- **Label** (600, 15px): field labels, 8px above the field.
|
||||||
- **Button** (600, 15px, 0.02em): the pill button label.
|
- **Button** (600, 15px, 0.02em): the pill button label.
|
||||||
- **Input** (400, 16px, 0.04em): typed text; 16px keeps mobile browsers from zooming.
|
- **Input** (400, 16px, 0.04em): typed text; 16px keeps mobile browsers from zooming.
|
||||||
@@ -158,15 +159,17 @@ Stars are drawn by script from four colors (Sky Blue `#6ea8ff`, Teal `#4fd1c5`,
|
|||||||
|
|
||||||
## Layout
|
## Layout
|
||||||
|
|
||||||
A single centered column on a full-viewport sky. The column is anchored a fixed distance above mid-screen (top padding `max(32px, 50vh - 250px)`, 16px sides, 48px bottom) rather than vertically centered, so a message appearing in the card grows the card downward instead of moving the owl. The card is `min(360px, 100%)` wide, with its top margin reserving the owl's height (owl width × 150/160 + 12px) so the owl perches on the card's top edge with its feet 7px over the border.
|
A single centered column on a full-viewport sky. The column is anchored a fixed distance above mid-screen (top padding `max(32px, 50vh - 230px)`, 16px sides, 48px bottom) rather than vertically centered, so a message appearing in the card grows the card downward instead of moving the owl. The card is `min(360px, 100%)` wide, with its top margin reserving the owl's height (owl width × 50/48 + 12px) so the owl perches on the card's top edge with its feet 7px over the border.
|
||||||
|
|
||||||
Spacing is small and repeated: 8px between label and field, title and subtitle, and field and message lines; 20px between the field block and the button; 24px card padding (28px at top). Card content is left-aligned inside a centered page.
|
Everything sits inside the card. The product name and the "Sign in" subtitle are centered at its top (subtitle 4px below the name, 22px above the field label); the form below them is left-aligned. After sign-in the subtitle and form hide and the signed-in panel takes their place under the product name.
|
||||||
|
|
||||||
One breakpoint: at 420px and below the owl shrinks from 212px to 172px wide; nothing else reflows.
|
Spacing is small and repeated: 8px between label and field and between field and message lines; 20px between the field block and the button; 6px between the signed-in title and its copy; 24px card padding (28px at top).
|
||||||
|
|
||||||
|
One breakpoint: at 420px and below the owl shrinks from 190px to 160px wide; nothing else reflows.
|
||||||
|
|
||||||
## Elevation & Depth
|
## Elevation & Depth
|
||||||
|
|
||||||
Mostly tonal: the night ground, the slightly lighter card, and the slightly darker recessed field carry the layering. The card is the one lifted object, with a single deep, soft ambient shadow that sinks it into the night rather than floating it. Under the owl a faint orange radial glow grounds it on the card. No other element casts a shadow.
|
Mostly tonal: the night ground, the slightly lighter card, and the slightly darker recessed field carry the layering. The card is the one lifted object, with a single deep, soft ambient shadow that sinks it into the night rather than floating it. Under the owl a faint orange radial glow (`#ffaa5a` at 35% fading to 0) grounds it on the card. No other element casts a shadow.
|
||||||
|
|
||||||
### Shadow Vocabulary
|
### Shadow Vocabulary
|
||||||
- **Night lift** (`box-shadow: 0 18px 40px rgba(0, 3, 15, .5)`): the sign-in card only. Single instance.
|
- **Night lift** (`box-shadow: 0 18px 40px rgba(0, 3, 15, .5)`): the sign-in card only. Single instance.
|
||||||
@@ -176,7 +179,7 @@ Mostly tonal: the night ground, the slightly lighter card, and the slightly dark
|
|||||||
|
|
||||||
## Shapes
|
## Shapes
|
||||||
|
|
||||||
Full round pills (999px) for both the field and the primary button; the reveal icon button is a 38px circle inset 4px into the field's right end. The card uses a gently rounded 18px corner with a 1px border. The owl is all smooth curves: dome head with ear tufts, egg body, round eyes and round glasses. Stars are circles. Nothing in the system is square-cornered or stepped.
|
Full round pills (999px) for both the field and the primary button; the reveal icon button is a 38px circle inset 4px into the field's right end. The card uses a gently rounded 18px corner with a 1px border. The owl is one smooth rounded silhouette with a heart-shaped face disc, oval eyes and softly rounded rectangular glasses (1.5 corner radius in SVG units). Stars are circles. Nothing in the system is sharp-cornered or stepped.
|
||||||
|
|
||||||
## Components
|
## Components
|
||||||
|
|
||||||
@@ -190,7 +193,7 @@ Dark, outlined and calm, after the user's HOOT button.
|
|||||||
- The only button variant in the build; there is no secondary or ghost button yet.
|
- The only button variant in the build; there is no secondary or ghost button yet.
|
||||||
|
|
||||||
### Inputs / Fields
|
### Inputs / Fields
|
||||||
- **Style:** Well Navy fill, 1px Field Edge border, full pill (999px), 46px tall, 20px left padding and 52px right padding to clear the reveal button; Starlight Ink text at 16px with 0.04em tracking. Label sits above in Label weight.
|
- **Style:** Well Navy fill, 1px Field Edge border, full pill (999px), 46px tall, 20px left padding and 52px right padding to clear the reveal button; Starlight Ink text at 16px with 0.04em tracking. Label sits above in Label weight. The password field takes focus on load.
|
||||||
- **Focus:** 2px Owl Orange outline at 2px offset and the border also turns Owl Orange.
|
- **Focus:** 2px Owl Orange outline at 2px offset and the border also turns Owl Orange.
|
||||||
- **Error:** when invalid, the border and focus outline turn Soft Alarm, and a Soft Alarm message (14px) appears 8px below; the message is announced and clears as soon as the user types.
|
- **Error:** when invalid, the border and focus outline turn Soft Alarm, and a Soft Alarm message (14px) appears 8px below; the message is announced and clears as soon as the user types.
|
||||||
- **Caps Lock:** a Lamplight Orange note, "Caps Lock is on", appears below while the key is on and hides on blur.
|
- **Caps Lock:** a Lamplight Orange note, "Caps Lock is on", appears below while the key is on and hides on blur.
|
||||||
@@ -201,19 +204,21 @@ Dark, outlined and calm, after the user's HOOT button.
|
|||||||
- **Background:** Card Navy, 1px Card Edge border.
|
- **Background:** Card Navy, 1px Card Edge border.
|
||||||
- **Shadow Strategy:** Night lift (see Elevation & Depth).
|
- **Shadow Strategy:** Night lift (see Elevation & Depth).
|
||||||
- **Internal Padding:** 28px top, 24px sides and bottom.
|
- **Internal Padding:** 28px top, 24px sides and bottom.
|
||||||
- Single instance: the sign-in card, which hosts the owl on its top edge.
|
- Single instance: the sign-in card, which hosts the owl on its top edge and the centered product name and subtitle inside.
|
||||||
|
|
||||||
### The Owl (signature component)
|
### The Owl (signature component)
|
||||||
An inline SVG (viewBox 160×150, 212px wide, 172px at 420px and below), smooth and shaded with named gradients: fur (`#f8ad66` → `#ee7f36` → `#c55a1f`), darker wings (`#df6f2c` → `#b14e1a`), cream face disc (`#fff1df` → `#f2cba1`), peach belly (`#fbd6a9` → `#efb072`) with faint chevron feather marks, brown irises (`#b8692c` → `#6a3211`) with near-black pupils and white catchlights, a gradient beak, small orange feet, and round near-black glasses (`#1d1b20`) with a soft white glint. It is decorative (`aria-hidden`); every state it shows is also stated in text.
|
An inline SVG (viewBox 48×50, 190px wide, 160px at 420px and below), smooth and shaded, every shape outlined in dark brown (`#38200b`, 1.2 stroke, round joins). The coat is a radial gradient (`#ff990e` → `#f58200` → `#bd4b00`), the wings a darker linear gradient (`#ed7b00` → `#a73e00`), with crown feather strokes (`#ac4904`) and rows of small golden chevron feather marks on the breast (`#ffbe42`). A flat cream face disc (`#ffe8b3`) holds oval eyes (whites `#fffdf4`, brown irises `#6b3518`, near-black pupils `#170e08`, white catchlights), a beak (`#eb870a`) and small feet (`#ed900f`). Square, rounded-rectangle glasses in dark brown (`#2a180c`, 1 stroke) sit low on the face across the lower half of the eyes, with a curved bridge and short temple arms; this is the user's preferred look and supersedes the round glasses in the direction contract. It is decorative (`aria-hidden`); every state it shows is also stated in text.
|
||||||
|
|
||||||
States:
|
States:
|
||||||
- **Idle:** a breathing bob of 1.5px over 3.2s, continuous.
|
- **Idle:** a breathing bob of 0.4 SVG units (about 1.6px at 190px) over 3.2s, continuous.
|
||||||
- **Blink:** eyelids close for 160ms at random 2.5 to 6s intervals; skipped during the success hop.
|
- **Blink:** eyelids close for 160ms at random 2.5 to 6s intervals; skipped during the success and sad states.
|
||||||
- **Gaze:** while the password field has focus, the irises look down and slide from left to right as the typed text (or masked dots) fills the field, tracking the caret; they recenter on blur.
|
- **Gaze:** while the password field has focus, the irises look down and slide from left to right as the typed text (or masked dots) fills the field, tracking the caret; they recenter on blur.
|
||||||
- **Empty submit (tilt):** the head tilts -10deg and back over 0.8s.
|
- **Empty submit (tilt):** the head tilts -10deg and back over 0.8s.
|
||||||
- **Wrong password (no):** a 0.65s damped head-shake, with the glasses wobbling on a 70ms delay so they lag the head.
|
- **Wrong password (sad):** over 1.4s the head droops (down 1.2 units, rotated -6deg) and the eyes close in one slow blink, then the gaze returns to the caret.
|
||||||
- **Success (hop):** a 0.75s hop (14px, then a 3px rebound), both wings flap, and the eyes close into upward smile arcs; then the signed-in panel replaces the form and receives focus.
|
- **Show password (peek):** while the password is visible, the eye rims glow amber (stroke `#ffc400` at 1.5, drop-shadow glow `#ffd84d` and `#ffb300`) and the glasses lenses fill with a translucent gold (`#ffe066` at 45%, glow `#ffc400`), easing in and out over 0.15s. These four are illustration values of the owl, not UI tokens.
|
||||||
- **Reduced motion:** all owl and star animation and transitions are off, blinking stops, and success goes straight to the signed-in panel. The gaze still repositions, without easing.
|
- **Tap the owl (jump):** clicking the owl plays the success hop and wing flap without the smile. Pointer-only and purely decorative.
|
||||||
|
- **Success (hop):** a 0.75s hop (14 units, then a 3-unit rebound), both wings flap, and the eyes close into upward smile arcs; then the subtitle and form hide, the signed-in panel replaces them and receives focus.
|
||||||
|
- **Reduced motion:** all owl and star animation and transitions are off, blinking and the tap jump stop, and success goes straight to the signed-in panel. The gaze still repositions and the peek glow still shows, both without easing.
|
||||||
|
|
||||||
## Do's and Don'ts
|
## Do's and Don'ts
|
||||||
|
|
||||||
|
|||||||
+5
-1
@@ -18,7 +18,7 @@ Other people involved but not the primary users: the OTS RPA team (builds and ma
|
|||||||
|
|
||||||
## Product Purpose
|
## Product Purpose
|
||||||
|
|
||||||
Charge Billed Automation produces the **Charge Billed Report**: charges by procedure, pulled from Waystar CMS-1500 claim PDFs into Excel, one workbook per account. It exists because the client keeps asking for charge and payment reports by procedure, and capturing them by hand takes three people a long time.
|
The Charge Billed bot, run from the G2Team Potential Updater screen, produces the **Charge Billed Report**: charges by procedure, pulled from Waystar CMS-1500 claim PDFs into Excel, one workbook per account. It exists because the client keeps asking for charge and payment reports by procedure, and capturing them by hand takes three people a long time.
|
||||||
|
|
||||||
Success means the ops team can start a run, see where it is, and know at the end which claims are saved, which need a person to check, and which failed, without asking the developer.
|
Success means the ops team can start a run, see where it is, and know at the end which claims are saved, which need a person to check, and which failed, without asking the developer.
|
||||||
|
|
||||||
@@ -51,6 +51,10 @@ The bot reads the PDF's text layer directly (`src/cms1500_text.py`) instead of O
|
|||||||
- A screen for reviewing and fixing flagged fields: not chosen for now.
|
- A screen for reviewing and fixing flagged fields: not chosen for now.
|
||||||
- Whether a run can be stopped or paused from the UI.
|
- Whether a run can be stopped or paused from the UI.
|
||||||
|
|
||||||
|
## Brand Commitments
|
||||||
|
|
||||||
|
The UI is named **G2Team Potential Updater** (user's choice, 22 Oct 2026); the bot and its report keep the name Charge Billed. Mascot: the orange owl with glasses on a navy night sky.
|
||||||
|
|
||||||
## Evidence on Hand
|
## Evidence on Hand
|
||||||
|
|
||||||
- Real run output from April 2026 in `Output/` (several accounts). It is PHI: never copy it into designs, mockups, demos or screenshots. Use clearly fake sample data instead.
|
- Real run output from April 2026 in `Output/` (several accounts). It is PHI: never copy it into designs, mockups, demos or screenshots. Use clearly fake sample data instead.
|
||||||
|
|||||||
+34
-29
@@ -52,18 +52,19 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* Anchored near the middle rather than centered, so an error line grows the card downward instead of moving the owl. */
|
/* Anchored near the middle rather than centered, so an error line grows the card downward instead of moving the owl. */
|
||||||
padding: max(32px, calc(50vh - 250px)) 16px 48px;
|
padding: max(32px, calc(50vh - 230px)) 16px 48px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: clamp(24px, 6vw, 30px);
|
font-size: clamp(20px, 5vw, 23px);
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
letter-spacing: -.01em;
|
letter-spacing: -.01em;
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.sub { margin: 8px 0 0; color: var(--ink-2); }
|
.sub { margin: 4px 0 22px; color: var(--ink-2); text-align: center; }
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -155,7 +156,8 @@
|
|||||||
.done p { margin: 6px 0 0; color: var(--ink-2); }
|
.done p { margin: 6px 0 0; color: var(--ink-2); }
|
||||||
|
|
||||||
/* Owl. Origins are in the SVG's own units (viewBox 0 0 48 50). */
|
/* Owl. Origins are in the SVG's own units (viewBox 0 0 48 50). */
|
||||||
#head, #glasses, #wing-l, #wing-r { transform-box: view-box; }
|
#bob, #head, #glasses, #wing-l, #wing-r { transform-box: view-box; }
|
||||||
|
#bob { transform-origin: 24px 30px; }
|
||||||
#head { transform-origin: 24px 30px; }
|
#head { transform-origin: 24px 30px; }
|
||||||
#glasses { transform-origin: 24px 24px; }
|
#glasses { transform-origin: 24px 24px; }
|
||||||
#wing-l { transform-origin: 11px 25px; }
|
#wing-l { transform-origin: 11px 25px; }
|
||||||
@@ -169,27 +171,25 @@
|
|||||||
.owl.idle #bob { animation: breathe 3.2s ease-in-out infinite; }
|
.owl.idle #bob { animation: breathe 3.2s ease-in-out infinite; }
|
||||||
@keyframes breathe { 50% { transform: translateY(.4px); } }
|
@keyframes breathe { 50% { transform: translateY(.4px); } }
|
||||||
|
|
||||||
.owl.shake #head { animation: no .65s ease-in-out; }
|
.owl.sad #head { animation: droop 1.4s ease-in-out; }
|
||||||
@keyframes no {
|
@keyframes droop { 20%, 75% { transform: translateY(1.2px) rotate(-6deg); } }
|
||||||
15% { transform: translateX(-1.5px) rotate(-5deg); }
|
.owl.sad .lid { animation: slow-blink 1.4s ease-in-out; }
|
||||||
32% { transform: translateX(1.5px) rotate(5deg); }
|
@keyframes slow-blink { 30%, 55% { transform: scaleY(1); } }
|
||||||
50% { transform: translateX(-1.2px) rotate(-4deg); }
|
|
||||||
68% { transform: translateX(.9px) rotate(3deg); }
|
.eye-rim { transition: stroke .15s ease-out, filter .15s ease-out; }
|
||||||
85% { transform: translateX(-.3px) rotate(-1deg); }
|
.owl.peek .eye-rim { stroke: #ffc400; stroke-width: 1.5; filter: drop-shadow(0 0 2px #ffd84d) drop-shadow(0 0 5px #ffb300); }
|
||||||
}
|
#glasses rect { transition: fill .15s ease-out, fill-opacity .15s ease-out, filter .15s ease-out; }
|
||||||
.owl.shake #glasses { animation: wobble .65s ease-in-out .07s; }
|
.owl.peek #glasses rect { fill: #ffe066; fill-opacity: .45; filter: drop-shadow(0 0 3px #ffc400); }
|
||||||
@keyframes wobble {
|
|
||||||
20% { transform: rotate(4deg); } 40% { transform: rotate(-4deg); }
|
|
||||||
60% { transform: rotate(3deg); } 80% { transform: rotate(-1.5deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.owl.tilt #head { animation: tilt .8s ease-in-out; }
|
.owl.tilt #head { animation: tilt .8s ease-in-out; }
|
||||||
@keyframes tilt { 25%, 70% { transform: rotate(-10deg); } }
|
@keyframes tilt { 25%, 70% { transform: rotate(-10deg); } }
|
||||||
|
|
||||||
.owl.happy { animation: hop .75s cubic-bezier(.3, .6, .35, 1); }
|
.owl { cursor: pointer; }
|
||||||
|
.owl.happy, .owl.jump { animation: hop .75s cubic-bezier(.3, .6, .35, 1); }
|
||||||
@keyframes hop { 40% { transform: translateY(-14px); } 70% { transform: none; } 82% { transform: translateY(-3px); } }
|
@keyframes hop { 40% { transform: translateY(-14px); } 70% { transform: none; } 82% { transform: translateY(-3px); } }
|
||||||
.owl.happy #wing-l { animation: flap-l .75s ease-in-out; }
|
.owl.happy #wing-l, .owl.jump #wing-l { animation: flap-l .75s ease-in-out; }
|
||||||
.owl.happy #wing-r { animation: flap-r .75s ease-in-out; }
|
.owl.happy #wing-r, .owl.jump #wing-r { animation: flap-r .75s ease-in-out; }
|
||||||
@keyframes flap-l { 20%, 60% { transform: rotate(32deg); } 40%, 80% { transform: rotate(8deg); } }
|
@keyframes flap-l { 20%, 60% { transform: rotate(32deg); } 40%, 80% { transform: rotate(8deg); } }
|
||||||
@keyframes flap-r { 20%, 60% { transform: rotate(-32deg); } 40%, 80% { transform: rotate(-8deg); } }
|
@keyframes flap-r { 20%, 60% { transform: rotate(-32deg); } 40%, 80% { transform: rotate(-8deg); } }
|
||||||
|
|
||||||
@@ -206,9 +206,6 @@
|
|||||||
<div class="sky" id="sky" aria-hidden="true"></div>
|
<div class="sky" id="sky" aria-hidden="true"></div>
|
||||||
|
|
||||||
<main class="stage">
|
<main class="stage">
|
||||||
<h1>G2Team Potential Updater</h1>
|
|
||||||
<p class="sub">Sign in to run the bot</p>
|
|
||||||
|
|
||||||
<section class="card">
|
<section class="card">
|
||||||
<svg class="owl idle" id="owl" viewBox="0 0 48 50" aria-hidden="true">
|
<svg class="owl idle" id="owl" viewBox="0 0 48 50" aria-hidden="true">
|
||||||
<defs>
|
<defs>
|
||||||
@@ -240,14 +237,14 @@
|
|||||||
<rect class="lid" x="13" y="15" width="8" height="10" fill="#ffe8b3" stroke="none"/>
|
<rect class="lid" x="13" y="15" width="8" height="10" fill="#ffe8b3" stroke="none"/>
|
||||||
<g class="smile"><path fill="#ffe8b3" stroke="none" d="M13 21Q17 16.5 21 21L21 25L13 25Z"/><path fill="none" stroke="#6b3518" stroke-width=".7" stroke-linecap="round" d="M13.6 20.6Q17 17 20.4 20.6"/></g>
|
<g class="smile"><path fill="#ffe8b3" stroke="none" d="M13 21Q17 16.5 21 21L21 25L13 25Z"/><path fill="none" stroke="#6b3518" stroke-width=".7" stroke-linecap="round" d="M13.6 20.6Q17 17 20.4 20.6"/></g>
|
||||||
</g>
|
</g>
|
||||||
<ellipse cx="17" cy="20" rx="4" ry="5" fill="none" stroke-width="1"/>
|
<ellipse class="eye-rim" cx="17" cy="20" rx="4" ry="5" fill="none" stroke-width="1"/>
|
||||||
<g clip-path="url(#eye-r)">
|
<g clip-path="url(#eye-r)">
|
||||||
<ellipse cx="31" cy="20" rx="4" ry="5" fill="#fffdf4" stroke="none"/>
|
<ellipse cx="31" cy="20" rx="4" ry="5" fill="#fffdf4" stroke="none"/>
|
||||||
<g class="iris"><ellipse cx="31" cy="21" rx="2.7" ry="3.3" fill="#6b3518" stroke="none"/><ellipse cx="31" cy="21.5" rx="1.8" ry="2.5" fill="#170e08" stroke="none"/><circle cx="30.3" cy="19.5" r="1" fill="#fff" stroke="none"/></g>
|
<g class="iris"><ellipse cx="31" cy="21" rx="2.7" ry="3.3" fill="#6b3518" stroke="none"/><ellipse cx="31" cy="21.5" rx="1.8" ry="2.5" fill="#170e08" stroke="none"/><circle cx="30.3" cy="19.5" r="1" fill="#fff" stroke="none"/></g>
|
||||||
<rect class="lid" x="27" y="15" width="8" height="10" fill="#ffe8b3" stroke="none"/>
|
<rect class="lid" x="27" y="15" width="8" height="10" fill="#ffe8b3" stroke="none"/>
|
||||||
<g class="smile"><path fill="#ffe8b3" stroke="none" d="M27 21Q31 16.5 35 21L35 25L27 25Z"/><path fill="none" stroke="#6b3518" stroke-width=".7" stroke-linecap="round" d="M27.6 20.6Q31 17 34.4 20.6"/></g>
|
<g class="smile"><path fill="#ffe8b3" stroke="none" d="M27 21Q31 16.5 35 21L35 25L27 25Z"/><path fill="none" stroke="#6b3518" stroke-width=".7" stroke-linecap="round" d="M27.6 20.6Q31 17 34.4 20.6"/></g>
|
||||||
</g>
|
</g>
|
||||||
<ellipse cx="31" cy="20" rx="4" ry="5" fill="none" stroke-width="1"/>
|
<ellipse class="eye-rim" cx="31" cy="20" rx="4" ry="5" fill="none" stroke-width="1"/>
|
||||||
<g id="glasses" fill="none" stroke="#2a180c" stroke-width="1">
|
<g id="glasses" fill="none" stroke="#2a180c" stroke-width="1">
|
||||||
<rect x="12" y="22" width="10" height="6" rx="1.5"/>
|
<rect x="12" y="22" width="10" height="6" rx="1.5"/>
|
||||||
<rect x="26" y="22" width="10" height="6" rx="1.5"/>
|
<rect x="26" y="22" width="10" height="6" rx="1.5"/>
|
||||||
@@ -259,10 +256,13 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
<h1>G2Team Potential Updater</h1>
|
||||||
|
<p class="sub" id="sub">Sign in</p>
|
||||||
|
|
||||||
<form id="login" novalidate>
|
<form id="login" novalidate>
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<input id="password" name="password" type="password" autocomplete="current-password"
|
<input id="password" name="password" type="password" autocomplete="current-password" autofocus
|
||||||
aria-describedby="password-msg caps" required>
|
aria-describedby="password-msg caps" required>
|
||||||
<button type="button" class="reveal" id="reveal" aria-label="Show password" aria-pressed="false"></button>
|
<button type="button" class="reveal" id="reveal" aria-label="Show password" aria-pressed="false"></button>
|
||||||
</div>
|
</div>
|
||||||
@@ -300,7 +300,7 @@ function drawSky() {
|
|||||||
let seed = 7;
|
let seed = 7;
|
||||||
const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
|
const rand = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
|
||||||
const colors = ["#6ea8ff", "#4fd1c5", "#f29c4b", "#dfe7ff"];
|
const colors = ["#6ea8ff", "#4fd1c5", "#f29c4b", "#dfe7ff"];
|
||||||
const keepOut = [...document.querySelectorAll("h1, .sub, .card, .owl")].map(e => e.getBoundingClientRect());
|
const keepOut = [...document.querySelectorAll(".card, .owl")].map(e => e.getBoundingClientRect());
|
||||||
let html = "";
|
let html = "";
|
||||||
for (let i = 0; i < 60; i++) {
|
for (let i = 0; i < 60; i++) {
|
||||||
const tw = rand() < .35, x = rand() * innerWidth, y = rand() * innerHeight;
|
const tw = rand() < .35, x = rand() * innerWidth, y = rand() * innerHeight;
|
||||||
@@ -353,6 +353,7 @@ function setReveal(show) {
|
|||||||
pw.type = show ? "text" : "password";
|
pw.type = show ? "text" : "password";
|
||||||
reveal.setAttribute("aria-pressed", String(show));
|
reveal.setAttribute("aria-pressed", String(show));
|
||||||
reveal.setAttribute("aria-label", show ? "Hide password" : "Show password");
|
reveal.setAttribute("aria-label", show ? "Hide password" : "Show password");
|
||||||
|
owl.classList.toggle("peek", show);
|
||||||
reveal.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${show ? EYE_OFF : EYE}</svg>`;
|
reveal.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${show ? EYE_OFF : EYE}</svg>`;
|
||||||
}
|
}
|
||||||
setReveal(false);
|
setReveal(false);
|
||||||
@@ -380,7 +381,7 @@ form.addEventListener("submit", e => {
|
|||||||
showError("That password isn't right. Try again.");
|
showError("That password isn't right. Try again.");
|
||||||
pw.focus();
|
pw.focus();
|
||||||
pw.select();
|
pw.select();
|
||||||
play("shake", 720, followCaret);
|
play("sad", 1400, followCaret);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
showError("");
|
showError("");
|
||||||
@@ -388,6 +389,7 @@ form.addEventListener("submit", e => {
|
|||||||
setReveal(false);
|
setReveal(false);
|
||||||
const enter = () => {
|
const enter = () => {
|
||||||
form.hidden = true;
|
form.hidden = true;
|
||||||
|
document.getElementById("sub").hidden = true;
|
||||||
done.hidden = false;
|
done.hidden = false;
|
||||||
document.getElementById("done-title").focus();
|
document.getElementById("done-title").focus();
|
||||||
};
|
};
|
||||||
@@ -395,9 +397,12 @@ form.addEventListener("submit", e => {
|
|||||||
else play("happy", 750, enter);
|
else play("happy", 750, enter);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Tap the owl and it jumps.
|
||||||
|
owl.addEventListener("click", () => { if (!reducedMotion.matches) play("jump", 750); });
|
||||||
|
|
||||||
(function blink() {
|
(function blink() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (!reducedMotion.matches && !owl.classList.contains("happy")) play("blink", 160);
|
if (!reducedMotion.matches && !owl.classList.contains("happy") && !owl.classList.contains("sad")) play("blink", 160);
|
||||||
blink();
|
blink();
|
||||||
}, 2500 + Math.random() * 3500);
|
}, 2500 + Math.random() * 3500);
|
||||||
})();
|
})();
|
||||||
|
|||||||
Reference in new issue
Block a user