Origem: D:/Documents/Github/transcript Arquivos omitidos (segredos, bancos de dados, logs, >50 MB): 2
2429 lines
75 KiB
HTML
2429 lines
75 KiB
HTML
<!doctype html>
|
||
<html lang="pt-BR">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Transcript — Exploração de Design</title>
|
||
<style>
|
||
:root {
|
||
color-scheme: dark;
|
||
--page-bg: #07070a;
|
||
--ink: #f7f3ee;
|
||
--muted: rgba(247, 243, 238, 0.62);
|
||
--faint: rgba(247, 243, 238, 0.34);
|
||
--hair: rgba(255, 255, 255, 0.1);
|
||
--hair-strong: rgba(255, 255, 255, 0.18);
|
||
--brand: #d3a784;
|
||
--brand-strong: #e9be95;
|
||
--green: #7fc99c;
|
||
--red: #e58a82;
|
||
--ease: cubic-bezier(0.32, 0.72, 0, 1);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
html,
|
||
body {
|
||
margin: 0;
|
||
min-height: 100%;
|
||
background: var(--page-bg);
|
||
color: var(--ink);
|
||
}
|
||
body {
|
||
font-family:
|
||
"Geist",
|
||
"Plus Jakarta Sans",
|
||
"Inter var",
|
||
-apple-system,
|
||
BlinkMacSystemFont,
|
||
"Segoe UI",
|
||
sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
overflow-x: hidden;
|
||
background:
|
||
radial-gradient(
|
||
circle at 18% 0%,
|
||
rgba(211, 167, 132, 0.17),
|
||
transparent 34rem
|
||
),
|
||
radial-gradient(
|
||
circle at 92% 16%,
|
||
rgba(127, 201, 156, 0.1),
|
||
transparent 28rem
|
||
),
|
||
linear-gradient(180deg, #0d0c10 0%, #050506 100%);
|
||
}
|
||
body::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
opacity: 0.055;
|
||
z-index: 30;
|
||
background-image:
|
||
linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
|
||
background-size: 36px 36px;
|
||
mask-image: radial-gradient(circle at 50% 20%, black, transparent 72%);
|
||
}
|
||
|
||
button,
|
||
input,
|
||
textarea {
|
||
font: inherit;
|
||
color: inherit;
|
||
}
|
||
button {
|
||
border: 0;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
}
|
||
.sr-only {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.page-shell {
|
||
width: min(1400px, calc(100vw - 40px));
|
||
margin: 0 auto;
|
||
padding: 34px 0 56px;
|
||
}
|
||
|
||
.hero {
|
||
display: grid;
|
||
grid-template-columns: 1.05fr 0.95fr;
|
||
gap: 28px;
|
||
align-items: end;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero-kicker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: max-content;
|
||
padding: 6px 10px;
|
||
border: 1px solid rgba(233, 190, 149, 0.24);
|
||
border-radius: 999px;
|
||
background: rgba(233, 190, 149, 0.08);
|
||
color: var(--brand-strong);
|
||
font-size: 11px;
|
||
font-weight: 720;
|
||
letter-spacing: 0.16em;
|
||
text-transform: uppercase;
|
||
}
|
||
.hero h1 {
|
||
max-width: 860px;
|
||
margin: 14px 0 10px;
|
||
font-size: clamp(36px, 5vw, 76px);
|
||
line-height: 0.89;
|
||
letter-spacing: -0.075em;
|
||
font-weight: 760;
|
||
}
|
||
.hero p {
|
||
margin: 0;
|
||
max-width: 680px;
|
||
color: var(--muted);
|
||
font-size: 15px;
|
||
line-height: 1.65;
|
||
}
|
||
.hero-note {
|
||
justify-self: end;
|
||
max-width: 420px;
|
||
padding: 16px 18px;
|
||
border-radius: 24px;
|
||
border: 1px solid var(--hair);
|
||
background: rgba(255, 255, 255, 0.045);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.06),
|
||
0 24px 80px rgba(0, 0, 0, 0.22);
|
||
color: rgba(247, 243, 238, 0.74);
|
||
font-size: 13px;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.toolbar {
|
||
position: sticky;
|
||
top: 12px;
|
||
z-index: 20;
|
||
display: grid;
|
||
grid-template-columns: 1fr auto;
|
||
gap: 14px;
|
||
align-items: center;
|
||
margin: 26px 0 24px;
|
||
padding: 10px;
|
||
border: 1px solid var(--hair);
|
||
border-radius: 28px;
|
||
background: rgba(10, 10, 12, 0.74);
|
||
backdrop-filter: blur(24px) saturate(170%);
|
||
box-shadow:
|
||
0 18px 70px rgba(0, 0, 0, 0.28),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||
}
|
||
.tabs {
|
||
display: flex;
|
||
gap: 6px;
|
||
overflow-x: auto;
|
||
scrollbar-width: none;
|
||
}
|
||
.tabs::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.tab {
|
||
min-height: 38px;
|
||
padding: 0 14px;
|
||
border-radius: 999px;
|
||
color: rgba(247, 243, 238, 0.62);
|
||
white-space: nowrap;
|
||
transition:
|
||
transform 160ms var(--ease),
|
||
background 180ms var(--ease),
|
||
color 180ms var(--ease);
|
||
}
|
||
.tab:hover {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
color: var(--ink);
|
||
}
|
||
.tab[aria-selected="true"] {
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.13),
|
||
rgba(255, 255, 255, 0.055)
|
||
);
|
||
color: var(--ink);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
}
|
||
.state-controls {
|
||
display: flex;
|
||
gap: 6px;
|
||
padding: 4px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.045);
|
||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||
}
|
||
.state-button {
|
||
min-height: 30px;
|
||
padding: 0 10px;
|
||
border-radius: 999px;
|
||
color: var(--muted);
|
||
font-size: 12px;
|
||
}
|
||
.state-button.is-active {
|
||
background: rgba(211, 167, 132, 0.18);
|
||
color: var(--brand-strong);
|
||
}
|
||
|
||
.stage {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 380px;
|
||
gap: 26px;
|
||
align-items: start;
|
||
}
|
||
.variant-copy {
|
||
min-height: 460px;
|
||
padding: 26px;
|
||
border-radius: 34px;
|
||
border: 1px solid var(--hair);
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.065),
|
||
rgba(255, 255, 255, 0.028)
|
||
);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.08),
|
||
0 32px 100px rgba(0, 0, 0, 0.28);
|
||
}
|
||
.variant-copy h2 {
|
||
margin: 0 0 10px;
|
||
font-size: clamp(30px, 4vw, 54px);
|
||
line-height: 0.94;
|
||
letter-spacing: -0.055em;
|
||
font-weight: 760;
|
||
}
|
||
.variant-copy .intent {
|
||
margin: 0 0 22px;
|
||
max-width: 760px;
|
||
color: var(--muted);
|
||
font-size: 15px;
|
||
line-height: 1.7;
|
||
}
|
||
.principles {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 10px;
|
||
margin-top: 18px;
|
||
}
|
||
.principle {
|
||
padding: 14px;
|
||
border-radius: 20px;
|
||
border: 1px solid rgba(255, 255, 255, 0.075);
|
||
background: rgba(0, 0, 0, 0.18);
|
||
}
|
||
.principle strong {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--brand-strong);
|
||
}
|
||
.principle span {
|
||
color: rgba(247, 243, 238, 0.68);
|
||
font-size: 13px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.mockup-rail {
|
||
display: grid;
|
||
place-items: center;
|
||
position: sticky;
|
||
top: 104px;
|
||
}
|
||
.window-frame {
|
||
width: 380px;
|
||
height: 460px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
border-radius: 28px;
|
||
border: 1px solid rgba(255, 255, 255, 0.13);
|
||
background: #08080a;
|
||
box-shadow:
|
||
0 36px 110px rgba(0, 0, 0, 0.55),
|
||
0 0 0 10px rgba(255, 255, 255, 0.026);
|
||
isolation: isolate;
|
||
}
|
||
.mockup-label {
|
||
margin-top: 12px;
|
||
color: var(--faint);
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.icon {
|
||
width: 15px;
|
||
height: 15px;
|
||
display: inline-block;
|
||
vertical-align: -3px;
|
||
stroke: currentColor;
|
||
fill: none;
|
||
stroke-width: 1.7;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
}
|
||
.icon-thin {
|
||
stroke-width: 1.35;
|
||
}
|
||
.mark {
|
||
display: block;
|
||
object-fit: contain;
|
||
}
|
||
|
||
/* ------------------------------------------------------------------
|
||
0. CLONE ATUAL — classes e valores copiados/adaptados do app atual.
|
||
------------------------------------------------------------------ */
|
||
.current-root {
|
||
--font-sans:
|
||
"Inter var", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||
Roboto, "Helvetica Neue", sans-serif;
|
||
--font-mono:
|
||
"JetBrains Mono", "SF Mono", ui-monospace, SFMono-Regular, Menlo,
|
||
Consolas, monospace;
|
||
--color-bg-base: #0a0a0c;
|
||
--color-bg-elevated: rgba(28, 26, 32, 0.72);
|
||
--color-bg-elevated-strong: rgba(34, 31, 38, 0.86);
|
||
--color-bg-input: rgba(14, 13, 16, 0.7);
|
||
--color-border-soft: rgba(255, 255, 255, 0.08);
|
||
--color-border-strong: rgba(255, 255, 255, 0.16);
|
||
--color-fg-primary: #f5f3f0;
|
||
--color-fg-secondary: rgba(245, 243, 240, 0.72);
|
||
--color-fg-muted: rgba(245, 243, 240, 0.5);
|
||
--color-fg-subtle: rgba(245, 243, 240, 0.32);
|
||
--color-accent: #d3a784;
|
||
--color-accent-strong: #e9be95;
|
||
--color-accent-soft: rgba(211, 167, 132, 0.18);
|
||
--color-success: #7fc99c;
|
||
--color-success-soft: rgba(127, 201, 156, 0.18);
|
||
--color-danger: #e58a82;
|
||
--color-danger-soft: rgba(229, 138, 130, 0.18);
|
||
--shadow-elevated:
|
||
0 24px 80px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
|
||
--radius-pill: 999px;
|
||
--space-2: 0.5rem;
|
||
--space-3: 0.75rem;
|
||
--space-4: 1rem;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
font-family: var(--font-sans);
|
||
font-size: 13px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 12% 0%,
|
||
rgba(211, 167, 132, 0.14),
|
||
transparent 24rem
|
||
),
|
||
radial-gradient(
|
||
circle at 88% 100%,
|
||
rgba(127, 201, 156, 0.06),
|
||
transparent 28rem
|
||
),
|
||
linear-gradient(180deg, #0e0d10 0%, #07070a 100%);
|
||
}
|
||
.current-topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: var(--space-2);
|
||
padding: 7px 8px 6px;
|
||
min-height: 48px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(34, 31, 38, 0.82) 0%,
|
||
rgba(12, 11, 15, 0.58) 100%
|
||
);
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||
backdrop-filter: blur(28px) saturate(160%);
|
||
}
|
||
.current-drag {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
padding-left: 6px;
|
||
}
|
||
.current-brand {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
padding: 4px 10px 4px 5px;
|
||
border-radius: var(--radius-pill);
|
||
background: rgba(255, 255, 255, 0.035);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
|
||
}
|
||
.current-mark-shell {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
display: grid;
|
||
place-items: center;
|
||
background:
|
||
radial-gradient(
|
||
circle at 36% 28%,
|
||
rgba(233, 190, 149, 0.22),
|
||
transparent 58%
|
||
),
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.08),
|
||
rgba(255, 255, 255, 0.025)
|
||
);
|
||
border: 1px solid rgba(233, 190, 149, 0.18);
|
||
box-shadow:
|
||
0 10px 30px rgba(0, 0, 0, 0.24),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||
flex: 0 0 auto;
|
||
}
|
||
.current-mark {
|
||
width: 23px;
|
||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.26));
|
||
}
|
||
.current-title {
|
||
margin: 0;
|
||
font-size: 0.9rem;
|
||
font-weight: 720;
|
||
letter-spacing: -0.025em;
|
||
color: var(--color-fg-primary);
|
||
white-space: nowrap;
|
||
}
|
||
.current-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
.current-control {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 8px;
|
||
color: var(--color-fg-secondary);
|
||
display: grid;
|
||
place-items: center;
|
||
transition:
|
||
background-color 120ms ease,
|
||
color 120ms ease,
|
||
transform 120ms ease;
|
||
}
|
||
.current-control:hover {
|
||
background: rgba(255, 255, 255, 0.06);
|
||
color: var(--color-fg-primary);
|
||
}
|
||
.current-control.close:hover {
|
||
background: var(--color-danger-soft);
|
||
color: var(--color-danger);
|
||
}
|
||
.current-main {
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
margin: 10px;
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
overflow-y: auto;
|
||
border-radius: 22px;
|
||
background: rgba(255, 255, 255, 0.035);
|
||
border: 1px solid rgba(255, 255, 255, 0.075);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.055),
|
||
0 18px 52px rgba(0, 0, 0, 0.18);
|
||
}
|
||
.current-status-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
min-height: 22px;
|
||
}
|
||
.current-status {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 3px 10px;
|
||
border-radius: 999px;
|
||
background: var(--color-success-soft);
|
||
color: var(--color-success);
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
line-height: 1;
|
||
}
|
||
.current-status::before {
|
||
content: "";
|
||
width: 5px;
|
||
height: 5px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
box-shadow: 0 0 8px currentColor;
|
||
}
|
||
.design-state-recording .current-status {
|
||
background: var(--color-danger-soft);
|
||
color: var(--color-danger);
|
||
animation: currentPulse 1.6s ease-in-out infinite;
|
||
}
|
||
.design-state-overlay .current-status,
|
||
.design-state-settings .current-status {
|
||
background: var(--color-accent-soft);
|
||
color: var(--color-accent-strong);
|
||
}
|
||
@keyframes currentPulse {
|
||
50% {
|
||
opacity: 0.55;
|
||
}
|
||
}
|
||
.current-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
padding: 8px;
|
||
border-radius: 18px;
|
||
background: rgba(5, 5, 7, 0.24);
|
||
border: 1px solid rgba(255, 255, 255, 0.045);
|
||
}
|
||
.current-actions {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 6px;
|
||
}
|
||
.current-record {
|
||
grid-column: span 2;
|
||
min-height: 48px;
|
||
padding: 0 var(--space-4);
|
||
border-radius: 14px;
|
||
font-weight: 720;
|
||
font-size: 0.9rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 9px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 223, 195, 0.98) 0%,
|
||
rgba(211, 167, 132, 0.98) 45%,
|
||
rgba(174, 118, 82, 0.98) 100%
|
||
);
|
||
color: #1a1108;
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.38),
|
||
0 12px 30px rgba(211, 167, 132, 0.22),
|
||
0 2px 0 rgba(0, 0, 0, 0.24);
|
||
}
|
||
.design-state-recording .current-record {
|
||
background: linear-gradient(180deg, #e58a82 0%, #c46a64 100%);
|
||
color: #1a0606;
|
||
box-shadow:
|
||
0 0 0 2px rgba(229, 138, 130, 0.4),
|
||
0 6px 20px rgba(229, 138, 130, 0.32);
|
||
}
|
||
.current-hotkey {
|
||
margin-left: 8px;
|
||
padding-left: 10px;
|
||
border-left: 1px solid rgba(26, 17, 8, 0.25);
|
||
font-size: 0.72rem;
|
||
font-weight: 500;
|
||
color: rgba(26, 17, 8, 0.55);
|
||
font-family: var(--font-mono);
|
||
}
|
||
.current-secondary,
|
||
.current-ghost {
|
||
min-height: 34px;
|
||
padding: 0 10px;
|
||
border-radius: 12px;
|
||
font-weight: 650;
|
||
font-size: 0.74rem;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
}
|
||
.current-secondary {
|
||
background: rgba(255, 255, 255, 0.07);
|
||
color: var(--color-fg-primary);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
|
||
}
|
||
.current-ghost {
|
||
background: rgba(255, 255, 255, 0.025);
|
||
color: var(--color-fg-secondary);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
}
|
||
.current-message {
|
||
margin: 0;
|
||
min-height: 1.1rem;
|
||
color: var(--color-fg-muted);
|
||
font-size: 0.74rem;
|
||
line-height: 1.4;
|
||
}
|
||
.current-more {
|
||
display: flex;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
opacity: 0;
|
||
max-height: 0;
|
||
overflow: hidden;
|
||
transition:
|
||
opacity 180ms ease,
|
||
max-height 220ms ease;
|
||
}
|
||
.design-state-text .current-more {
|
||
opacity: 1;
|
||
max-height: 80px;
|
||
}
|
||
.current-editor-wrap {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
max-height: 0;
|
||
opacity: 0;
|
||
overflow: hidden;
|
||
transition:
|
||
max-height 280ms cubic-bezier(0.4, 0, 0.2, 1),
|
||
opacity 220ms ease;
|
||
}
|
||
.design-state-text .current-editor-wrap {
|
||
max-height: 240px;
|
||
opacity: 1;
|
||
}
|
||
.current-editor-label {
|
||
color: var(--color-fg-secondary);
|
||
font-size: 0.7rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
text-transform: uppercase;
|
||
}
|
||
.current-editor {
|
||
width: 100%;
|
||
height: 146px;
|
||
resize: none;
|
||
padding: 10px 12px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--color-border-soft);
|
||
background: var(--color-bg-input);
|
||
color: var(--color-fg-primary);
|
||
font-size: 0.85rem;
|
||
line-height: 1.5;
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.current-diagnostics {
|
||
margin-top: 4px;
|
||
border-top: 1px solid var(--color-border-soft);
|
||
padding-top: 8px;
|
||
}
|
||
.current-details {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 4px 10px;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, 0.04);
|
||
border: 1px solid var(--color-border-soft);
|
||
color: var(--color-fg-muted);
|
||
font-size: 0.68rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
}
|
||
.current-overlay {
|
||
display: none;
|
||
}
|
||
.design-state-overlay .current-topbar,
|
||
.design-state-overlay .current-main,
|
||
.design-state-overlay .current-settings {
|
||
display: none;
|
||
}
|
||
.design-state-overlay .current-root {
|
||
background:
|
||
radial-gradient(
|
||
circle at 20% 0%,
|
||
rgba(211, 167, 132, 0.18),
|
||
transparent 16rem
|
||
),
|
||
linear-gradient(180deg, rgba(18, 16, 20, 0.92), rgba(8, 8, 10, 0.88));
|
||
}
|
||
.design-state-overlay .current-overlay {
|
||
display: grid;
|
||
grid-template-columns: 54px 1fr minmax(118px, auto);
|
||
align-items: center;
|
||
gap: 14px;
|
||
height: 100%;
|
||
padding: 13px 18px;
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
border-radius: 26px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 16% 18%,
|
||
rgba(233, 190, 149, 0.14),
|
||
transparent 22rem
|
||
),
|
||
linear-gradient(180deg, rgba(18, 16, 20, 0.88), rgba(7, 7, 10, 0.92));
|
||
box-shadow:
|
||
0 22px 70px rgba(0, 0, 0, 0.52),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.09);
|
||
}
|
||
.current-orb {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
display: grid;
|
||
place-items: center;
|
||
background:
|
||
radial-gradient(
|
||
circle at 36% 25%,
|
||
rgba(255, 224, 199, 0.2),
|
||
transparent 58%
|
||
),
|
||
linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.08),
|
||
rgba(255, 255, 255, 0.025)
|
||
);
|
||
border: 1px solid rgba(233, 190, 149, 0.18);
|
||
box-shadow:
|
||
0 0 0 8px rgba(211, 167, 132, 0.08),
|
||
0 14px 34px rgba(0, 0, 0, 0.28),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||
animation: dictationPulse 1150ms ease-in-out infinite;
|
||
}
|
||
.current-orb img {
|
||
width: 34px;
|
||
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.3));
|
||
}
|
||
.current-wave {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
height: 48px;
|
||
min-width: 0;
|
||
}
|
||
.current-wave span {
|
||
width: 4px;
|
||
height: 12px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
var(--color-accent-strong),
|
||
var(--color-accent)
|
||
);
|
||
opacity: 0.78;
|
||
transform-origin: center;
|
||
animation: waveformDance 840ms ease-in-out infinite;
|
||
animation-delay: calc(var(--i) * -54ms);
|
||
}
|
||
.current-dictation-text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
min-width: 0;
|
||
}
|
||
.current-dictation-text strong {
|
||
font-size: 0.82rem;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
.current-dictation-text span {
|
||
max-width: 145px;
|
||
font-size: 0.72rem;
|
||
line-height: 1.25;
|
||
color: var(--color-fg-muted);
|
||
}
|
||
@keyframes waveformDance {
|
||
0%,
|
||
100% {
|
||
transform: scaleY(0.42);
|
||
opacity: 0.42;
|
||
}
|
||
50% {
|
||
transform: scaleY(2.35);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes dictationPulse {
|
||
50% {
|
||
box-shadow:
|
||
0 0 0 14px rgba(211, 167, 132, 0.04),
|
||
0 18px 42px rgba(211, 167, 132, 0.38);
|
||
}
|
||
}
|
||
.current-settings {
|
||
display: none;
|
||
}
|
||
.design-state-settings .current-settings {
|
||
position: absolute;
|
||
inset: 0;
|
||
z-index: 5;
|
||
display: grid;
|
||
place-items: center;
|
||
background: rgba(0, 0, 0, 0.55);
|
||
backdrop-filter: blur(18px);
|
||
}
|
||
.current-panel {
|
||
width: min(340px, 92%);
|
||
max-height: 86%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-radius: 16px;
|
||
border: 1px solid var(--color-border-soft);
|
||
background: var(--color-bg-elevated-strong);
|
||
box-shadow: var(--shadow-elevated);
|
||
overflow: hidden;
|
||
}
|
||
.current-panel header,
|
||
.current-panel footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 16px;
|
||
border-bottom: 1px solid var(--color-border-soft);
|
||
}
|
||
.current-panel footer {
|
||
justify-content: flex-end;
|
||
gap: 6px;
|
||
border-top: 1px solid var(--color-border-soft);
|
||
border-bottom: 0;
|
||
}
|
||
.current-panel h2 {
|
||
margin: 0;
|
||
font-size: 0.95rem;
|
||
font-weight: 600;
|
||
}
|
||
.current-panel-body {
|
||
padding: 12px 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
overflow: auto;
|
||
}
|
||
.current-panel h3 {
|
||
margin: 0;
|
||
font-size: 0.7rem;
|
||
color: var(--color-fg-muted);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
.current-panel p {
|
||
margin: 0;
|
||
font-size: 0.74rem;
|
||
line-height: 1.5;
|
||
color: var(--color-fg-muted);
|
||
}
|
||
.current-input {
|
||
width: 100%;
|
||
padding: 8px 10px;
|
||
border-radius: 8px;
|
||
border: 1px solid var(--color-border-soft);
|
||
background: var(--color-bg-input);
|
||
color: var(--color-fg-primary);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
/* Shared variant helpers */
|
||
.app-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.brand-lockup {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
min-width: 0;
|
||
}
|
||
.brand-orb {
|
||
display: grid;
|
||
place-items: center;
|
||
border-radius: 50%;
|
||
flex: 0 0 auto;
|
||
}
|
||
.brand-orb img {
|
||
object-fit: contain;
|
||
}
|
||
.app-title {
|
||
margin: 0;
|
||
white-space: nowrap;
|
||
}
|
||
.top-actions {
|
||
display: flex;
|
||
gap: 4px;
|
||
}
|
||
.tiny-icon {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 10px;
|
||
display: grid;
|
||
place-items: center;
|
||
}
|
||
.pill {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
border-radius: 999px;
|
||
white-space: nowrap;
|
||
}
|
||
.pill::before {
|
||
content: "";
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: currentColor;
|
||
box-shadow: 0 0 10px currentColor;
|
||
}
|
||
.primary {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
border-radius: 16px;
|
||
font-weight: 760;
|
||
}
|
||
.mini-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 8px;
|
||
}
|
||
.muted-line {
|
||
color: rgba(247, 243, 238, 0.52);
|
||
font-size: 12px;
|
||
line-height: 1.45;
|
||
}
|
||
|
||
/* 1. Satin Refinement */
|
||
.satin {
|
||
padding: 10px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 15% -10%,
|
||
rgba(233, 190, 149, 0.19),
|
||
transparent 170px
|
||
),
|
||
linear-gradient(180deg, #101014, #07070a);
|
||
font-family: "Geist", "Plus Jakarta Sans", sans-serif;
|
||
}
|
||
.satin .app-top {
|
||
height: 48px;
|
||
padding: 0 2px 8px;
|
||
}
|
||
.satin .brand-orb {
|
||
width: 34px;
|
||
height: 34px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.1),
|
||
rgba(255, 255, 255, 0.025)
|
||
);
|
||
border: 1px solid rgba(233, 190, 149, 0.22);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
}
|
||
.satin .brand-orb img {
|
||
width: 24px;
|
||
}
|
||
.satin .app-title {
|
||
font-size: 15px;
|
||
letter-spacing: -0.04em;
|
||
font-weight: 760;
|
||
}
|
||
.satin .tiny-icon {
|
||
color: rgba(247, 243, 238, 0.62);
|
||
background: rgba(255, 255, 255, 0.035);
|
||
}
|
||
.satin .panel {
|
||
height: 392px;
|
||
padding: 12px;
|
||
border-radius: 24px;
|
||
background: rgba(255, 255, 255, 0.045);
|
||
border: 1px solid rgba(255, 255, 255, 0.085);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.satin .pill {
|
||
width: max-content;
|
||
padding: 5px 11px;
|
||
background: rgba(127, 201, 156, 0.14);
|
||
color: #8fd8ad;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.satin .hero-card {
|
||
padding: 14px;
|
||
border-radius: 20px;
|
||
background: rgba(0, 0, 0, 0.23);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
}
|
||
.satin .hero-card strong {
|
||
display: block;
|
||
font-size: 20px;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.05em;
|
||
margin-bottom: 7px;
|
||
}
|
||
.satin .primary {
|
||
min-height: 54px;
|
||
background: linear-gradient(180deg, #ffe1c8, #d3a784 55%, #ae7652);
|
||
color: #1a1108;
|
||
box-shadow:
|
||
0 16px 34px rgba(211, 167, 132, 0.25),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.38);
|
||
}
|
||
.satin .mini {
|
||
min-height: 38px;
|
||
border-radius: 14px;
|
||
background: rgba(255, 255, 255, 0.065);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
.satin textarea {
|
||
flex: 1;
|
||
min-height: 0;
|
||
resize: none;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 14px;
|
||
background: rgba(14, 13, 16, 0.62);
|
||
padding: 12px;
|
||
color: #f5f3f0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 2. Command Deck */
|
||
.deck {
|
||
padding: 12px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 82% 8%,
|
||
rgba(127, 201, 156, 0.16),
|
||
transparent 130px
|
||
),
|
||
#060708;
|
||
font-family: "JetBrains Mono", "SF Mono", monospace;
|
||
}
|
||
.deck .app-top {
|
||
height: 44px;
|
||
}
|
||
.deck .brand-orb {
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 10px;
|
||
background: #101414;
|
||
border: 1px solid rgba(127, 201, 156, 0.22);
|
||
}
|
||
.deck .brand-orb img {
|
||
width: 22px;
|
||
}
|
||
.deck .app-title {
|
||
font-size: 12px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #dff7e8;
|
||
}
|
||
.deck .tiny-icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
border: 1px solid rgba(127, 201, 156, 0.12);
|
||
color: #9ad8b2;
|
||
}
|
||
.deck .terminal {
|
||
height: 392px;
|
||
border-radius: 18px;
|
||
border: 1px solid rgba(127, 201, 156, 0.2);
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(7, 14, 12, 0.94),
|
||
rgba(3, 6, 6, 0.96)
|
||
);
|
||
box-shadow:
|
||
0 0 0 1px rgba(0, 0, 0, 0.8),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
}
|
||
.deck .pill {
|
||
padding: 4px 9px;
|
||
background: rgba(127, 201, 156, 0.11);
|
||
color: #8ee4ae;
|
||
border: 1px solid rgba(127, 201, 156, 0.18);
|
||
font-size: 10px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.deck .readout {
|
||
padding: 14px;
|
||
border-radius: 14px;
|
||
border: 1px solid rgba(127, 201, 156, 0.13);
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
rgba(127, 201, 156, 0.035),
|
||
rgba(127, 201, 156, 0.035) 1px,
|
||
transparent 1px,
|
||
transparent 6px
|
||
);
|
||
}
|
||
.deck .readout h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 18px;
|
||
line-height: 1.15;
|
||
letter-spacing: -0.03em;
|
||
font-family: "Geist", sans-serif;
|
||
color: #effff5;
|
||
}
|
||
.deck .wave {
|
||
display: flex;
|
||
align-items: end;
|
||
gap: 5px;
|
||
height: 64px;
|
||
padding: 10px;
|
||
border-radius: 14px;
|
||
background: rgba(127, 201, 156, 0.055);
|
||
}
|
||
.deck .wave span {
|
||
flex: 1;
|
||
border-radius: 999px;
|
||
background: linear-gradient(180deg, #b4ffd0, #48a96f);
|
||
height: calc(16px + var(--h) * 1px);
|
||
opacity: 0.78;
|
||
}
|
||
.deck .primary {
|
||
min-height: 48px;
|
||
border: 1px solid rgba(127, 201, 156, 0.28);
|
||
background: #baf7cf;
|
||
color: #04100a;
|
||
font-family: "Geist", sans-serif;
|
||
}
|
||
.deck .mini {
|
||
min-height: 34px;
|
||
border: 1px solid rgba(127, 201, 156, 0.14);
|
||
border-radius: 12px;
|
||
display: grid;
|
||
place-items: center;
|
||
color: #a7d7b8;
|
||
font-size: 11px;
|
||
}
|
||
|
||
/* 3. Aurora */
|
||
.aurora {
|
||
padding: 12px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 20% 5%,
|
||
rgba(130, 103, 255, 0.24),
|
||
transparent 145px
|
||
),
|
||
radial-gradient(
|
||
circle at 90% 90%,
|
||
rgba(211, 167, 132, 0.2),
|
||
transparent 170px
|
||
),
|
||
#070711;
|
||
font-family: "Plus Jakarta Sans", "Geist", sans-serif;
|
||
}
|
||
.aurora .glass {
|
||
height: 436px;
|
||
padding: 12px;
|
||
border-radius: 28px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.095),
|
||
rgba(255, 255, 255, 0.032)
|
||
);
|
||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.11),
|
||
0 22px 60px rgba(0, 0, 0, 0.32);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
}
|
||
.aurora .brand-orb {
|
||
width: 36px;
|
||
height: 36px;
|
||
background: conic-gradient(
|
||
from 210deg,
|
||
#e9be95,
|
||
#8a78ff,
|
||
#7fc99c,
|
||
#e9be95
|
||
);
|
||
padding: 1px;
|
||
}
|
||
.aurora .brand-orb img {
|
||
width: 31px;
|
||
height: 31px;
|
||
border-radius: 50%;
|
||
padding: 4px;
|
||
background: #080812;
|
||
}
|
||
.aurora .app-title {
|
||
font-size: 15px;
|
||
font-weight: 800;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
.aurora .tiny-icon {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
background: rgba(255, 255, 255, 0.055);
|
||
}
|
||
.aurora .pill {
|
||
padding: 5px 10px;
|
||
color: #e9be95;
|
||
background: rgba(233, 190, 149, 0.12);
|
||
font-size: 11px;
|
||
font-weight: 800;
|
||
}
|
||
.aurora .focus {
|
||
flex: 1;
|
||
display: grid;
|
||
place-items: center;
|
||
text-align: center;
|
||
padding: 18px;
|
||
border-radius: 24px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 50% 40%,
|
||
rgba(233, 190, 149, 0.17),
|
||
transparent 130px
|
||
),
|
||
rgba(0, 0, 0, 0.18);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
.aurora .focus h3 {
|
||
margin: 0 0 8px;
|
||
font-size: 30px;
|
||
line-height: 0.92;
|
||
letter-spacing: -0.075em;
|
||
}
|
||
.aurora .ring {
|
||
width: 128px;
|
||
height: 128px;
|
||
margin: 0 auto 18px;
|
||
border-radius: 50%;
|
||
display: grid;
|
||
place-items: center;
|
||
background: radial-gradient(
|
||
circle,
|
||
rgba(255, 255, 255, 0.14),
|
||
rgba(255, 255, 255, 0.035)
|
||
);
|
||
border: 1px solid rgba(255, 255, 255, 0.13);
|
||
box-shadow:
|
||
0 0 0 10px rgba(233, 190, 149, 0.04),
|
||
0 0 80px rgba(138, 120, 255, 0.22);
|
||
}
|
||
.aurora .ring img {
|
||
width: 74px;
|
||
filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.35));
|
||
}
|
||
.aurora .primary {
|
||
min-height: 50px;
|
||
background: #f7d3b3;
|
||
color: #1a1108;
|
||
}
|
||
|
||
/* 4. Studio */
|
||
.studio {
|
||
padding: 12px;
|
||
background: #ebe3d7;
|
||
color: #17130f;
|
||
font-family: "Fraunces", "Georgia", serif;
|
||
}
|
||
.studio .paper {
|
||
height: 436px;
|
||
border-radius: 24px;
|
||
background: #f7f0e7;
|
||
border: 1px solid rgba(23, 19, 15, 0.12);
|
||
box-shadow: 0 24px 70px rgba(23, 19, 15, 0.24);
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.studio .app-top {
|
||
height: 56px;
|
||
padding: 0 12px;
|
||
border-bottom: 1px solid rgba(23, 19, 15, 0.09);
|
||
}
|
||
.studio .brand-orb {
|
||
width: 34px;
|
||
height: 34px;
|
||
background: #17130f;
|
||
}
|
||
.studio .brand-orb img {
|
||
width: 25px;
|
||
}
|
||
.studio .app-title {
|
||
font-size: 18px;
|
||
letter-spacing: -0.04em;
|
||
}
|
||
.studio .tiny-icon {
|
||
color: rgba(23, 19, 15, 0.58);
|
||
}
|
||
.studio .body {
|
||
padding: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12px;
|
||
flex: 1;
|
||
}
|
||
.studio .pill {
|
||
width: max-content;
|
||
padding: 5px 10px;
|
||
background: #17130f;
|
||
color: #f7f0e7;
|
||
font-family: "Geist", sans-serif;
|
||
font-size: 11px;
|
||
font-weight: 750;
|
||
}
|
||
.studio h3 {
|
||
margin: 0;
|
||
font-size: 28px;
|
||
line-height: 0.96;
|
||
letter-spacing: -0.065em;
|
||
}
|
||
.studio textarea {
|
||
flex: 1;
|
||
border: 1px solid rgba(23, 19, 15, 0.12);
|
||
border-radius: 18px;
|
||
resize: none;
|
||
padding: 14px;
|
||
color: #17130f;
|
||
background: #fffaf4;
|
||
font:
|
||
15px/1.55 "Geist",
|
||
sans-serif;
|
||
}
|
||
.studio .primary {
|
||
min-height: 48px;
|
||
background: #17130f;
|
||
color: #f7f0e7;
|
||
font-family: "Geist", sans-serif;
|
||
}
|
||
.studio .mini {
|
||
min-height: 34px;
|
||
border: 1px solid rgba(23, 19, 15, 0.12);
|
||
border-radius: 14px;
|
||
display: grid;
|
||
place-items: center;
|
||
font:
|
||
700 12px "Geist",
|
||
sans-serif;
|
||
}
|
||
|
||
/* 5. Local Core */
|
||
.core {
|
||
padding: 11px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 8% 0%,
|
||
rgba(233, 190, 149, 0.14),
|
||
transparent 160px
|
||
),
|
||
#09090d;
|
||
font-family: "Geist", sans-serif;
|
||
}
|
||
.core .surface {
|
||
height: 438px;
|
||
border-radius: 26px;
|
||
padding: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.07),
|
||
rgba(255, 255, 255, 0.025)
|
||
);
|
||
border: 1px solid rgba(255, 255, 255, 0.11);
|
||
}
|
||
.core .brand-orb {
|
||
width: 34px;
|
||
height: 34px;
|
||
background: #101014;
|
||
border: 1px solid rgba(233, 190, 149, 0.18);
|
||
}
|
||
.core .brand-orb img {
|
||
width: 25px;
|
||
}
|
||
.core .app-title {
|
||
font-size: 15px;
|
||
font-weight: 780;
|
||
letter-spacing: -0.045em;
|
||
}
|
||
.core .tiny-icon {
|
||
background: rgba(255, 255, 255, 0.04);
|
||
color: rgba(247, 243, 238, 0.68);
|
||
}
|
||
.core .model-card {
|
||
padding: 14px;
|
||
border-radius: 22px;
|
||
background: linear-gradient(
|
||
135deg,
|
||
rgba(127, 201, 156, 0.12),
|
||
rgba(233, 190, 149, 0.08)
|
||
);
|
||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||
}
|
||
.core .model-card small {
|
||
color: #9fe3ba;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
font-size: 10px;
|
||
font-weight: 800;
|
||
}
|
||
.core .model-card h3 {
|
||
margin: 8px 0 6px;
|
||
font-size: 25px;
|
||
line-height: 0.96;
|
||
letter-spacing: -0.065em;
|
||
}
|
||
.core .metrics {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 7px;
|
||
}
|
||
.core .metric {
|
||
padding: 10px 8px;
|
||
border-radius: 16px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||
}
|
||
.core .metric strong {
|
||
display: block;
|
||
font-size: 16px;
|
||
}
|
||
.core .metric span {
|
||
color: rgba(247, 243, 238, 0.5);
|
||
font-size: 10px;
|
||
}
|
||
.core .primary {
|
||
min-height: 52px;
|
||
background: #9fe3ba;
|
||
color: #07110b;
|
||
}
|
||
.core .mini {
|
||
min-height: 36px;
|
||
border-radius: 14px;
|
||
background: rgba(255, 255, 255, 0.055);
|
||
display: grid;
|
||
place-items: center;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
/* 6. Floating Overlay */
|
||
.floaty {
|
||
padding: 0;
|
||
background: transparent;
|
||
display: grid;
|
||
place-items: end center;
|
||
}
|
||
.floaty .bar {
|
||
width: 360px;
|
||
height: 112px;
|
||
margin-bottom: 22px;
|
||
border-radius: 30px;
|
||
padding: 14px 18px;
|
||
display: grid;
|
||
grid-template-columns: 52px 1fr 118px;
|
||
align-items: center;
|
||
gap: 14px;
|
||
background:
|
||
radial-gradient(
|
||
circle at 15% 10%,
|
||
rgba(233, 190, 149, 0.18),
|
||
transparent 190px
|
||
),
|
||
linear-gradient(180deg, rgba(18, 16, 20, 0.92), rgba(7, 7, 10, 0.94));
|
||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||
box-shadow:
|
||
0 28px 90px rgba(0, 0, 0, 0.62),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||
}
|
||
.floaty .brand-orb {
|
||
width: 52px;
|
||
height: 52px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0.1),
|
||
rgba(255, 255, 255, 0.025)
|
||
);
|
||
border: 1px solid rgba(233, 190, 149, 0.22);
|
||
box-shadow: 0 0 0 9px rgba(211, 167, 132, 0.08);
|
||
}
|
||
.floaty .brand-orb img {
|
||
width: 36px;
|
||
}
|
||
.floaty .wave {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
height: 54px;
|
||
}
|
||
.floaty .wave span {
|
||
width: 4px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(180deg, #f2c9a7, #d3a784);
|
||
height: calc(10px + var(--h) * 1px);
|
||
animation: waveformDance 850ms var(--ease) infinite;
|
||
animation-delay: calc(var(--i) * -48ms);
|
||
}
|
||
.floaty strong {
|
||
display: block;
|
||
font-size: 12px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
.floaty em {
|
||
display: block;
|
||
margin-top: 4px;
|
||
color: rgba(247, 243, 238, 0.54);
|
||
font-style: normal;
|
||
font-size: 11px;
|
||
line-height: 1.25;
|
||
}
|
||
.floaty .hintbox {
|
||
padding: 9px 10px;
|
||
border-radius: 16px;
|
||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||
background: rgba(255, 255, 255, 0.045);
|
||
font-size: 11px;
|
||
color: rgba(247, 243, 238, 0.68);
|
||
line-height: 1.25;
|
||
}
|
||
|
||
.variant-panel {
|
||
display: none;
|
||
}
|
||
.variant-panel.is-active {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 380px;
|
||
gap: 26px;
|
||
align-items: start;
|
||
}
|
||
|
||
@media (max-width: 960px) {
|
||
.hero,
|
||
.variant-panel.is-active {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.hero-note {
|
||
justify-self: stretch;
|
||
}
|
||
.mockup-rail {
|
||
position: static;
|
||
}
|
||
.toolbar {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.state-controls {
|
||
overflow-x: auto;
|
||
}
|
||
.principles {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*,
|
||
*::before,
|
||
*::after {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<svg
|
||
aria-hidden="true"
|
||
style="position: absolute; width: 0; height: 0; overflow: hidden"
|
||
>
|
||
<symbol id="i-settings" viewBox="0 0 24 24">
|
||
<path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" />
|
||
<path
|
||
d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .92V20.5a2 2 0 0 1-4 0v-.18a1.7 1.7 0 0 0-1-.92 1.7 1.7 0 0 0-1.88.34l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.92-1H3.5a2 2 0 0 1 0-4h.18a1.7 1.7 0 0 0 .92-1 1.7 1.7 0 0 0-.34-1.88l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.92V3.5a2 2 0 0 1 4 0v.18a1.7 1.7 0 0 0 1 .92 1.7 1.7 0 0 0 1.88-.34l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.7 1.7 0 0 0 19.4 9c.12.38.45.7.92 1h.18a2 2 0 0 1 0 4h-.18a1.7 1.7 0 0 0-.92 1Z"
|
||
/>
|
||
</symbol>
|
||
<symbol id="i-minus" viewBox="0 0 24 24"><path d="M5 12h14" /></symbol>
|
||
<symbol id="i-x" viewBox="0 0 24 24">
|
||
<path d="M18 6 6 18M6 6l12 12" />
|
||
</symbol>
|
||
<symbol id="i-mic" viewBox="0 0 24 24">
|
||
<path d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3Z" />
|
||
<path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3" />
|
||
</symbol>
|
||
<symbol id="i-copy" viewBox="0 0 24 24">
|
||
<rect x="9" y="9" width="11" height="11" rx="2" />
|
||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
|
||
</symbol>
|
||
<symbol id="i-arrow" viewBox="0 0 24 24">
|
||
<path d="M5 12h14M13 5l7 7-7 7" />
|
||
</symbol>
|
||
<symbol id="i-save" viewBox="0 0 24 24">
|
||
<path
|
||
d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2Z"
|
||
/>
|
||
<path d="M17 21v-8H7v8M7 3v5h8" />
|
||
</symbol>
|
||
<symbol id="i-trash" viewBox="0 0 24 24">
|
||
<path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
|
||
</symbol>
|
||
</svg>
|
||
|
||
<main class="page-shell" id="studio" data-state="text">
|
||
<section class="hero" aria-labelledby="page-title">
|
||
<div>
|
||
<div class="hero-kicker"><span>Transcript UI lab</span></div>
|
||
<h1 id="page-title">
|
||
Clone atual + 6 direções para decidir sem retrabalho.
|
||
</h1>
|
||
<p>
|
||
O primeiro painel é uma reprodução fiel do design atual do
|
||
aplicativo. Os outros seis são propostas de evolução, mantendo o
|
||
produto compacto, escuro, rápido e coerente com o logo/mark atual.
|
||
</p>
|
||
</div>
|
||
<aside class="hero-note">
|
||
<strong>Como usar:</strong> escolha uma aba, alterne os estados e
|
||
compare a clareza de gravação, texto transcrito, configurações e
|
||
overlay. Todos os exemplos usam HTML/CSS/JS puro e o asset real
|
||
<code>assets/brand/mark.png</code>.
|
||
</aside>
|
||
</section>
|
||
|
||
<nav class="toolbar" aria-label="Variações de design">
|
||
<div class="tabs" role="tablist">
|
||
<button
|
||
class="tab"
|
||
role="tab"
|
||
aria-selected="true"
|
||
data-target="current"
|
||
>
|
||
00 · Clone atual
|
||
</button>
|
||
<button
|
||
class="tab"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-target="satin"
|
||
>
|
||
01 · Satin refinement
|
||
</button>
|
||
<button
|
||
class="tab"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-target="deck"
|
||
>
|
||
02 · Command deck
|
||
</button>
|
||
<button
|
||
class="tab"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-target="aurora"
|
||
>
|
||
03 · Aurora dictation
|
||
</button>
|
||
<button
|
||
class="tab"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-target="studio-paper"
|
||
>
|
||
04 · Studio paper
|
||
</button>
|
||
<button
|
||
class="tab"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-target="core"
|
||
>
|
||
05 · Local core
|
||
</button>
|
||
<button
|
||
class="tab"
|
||
role="tab"
|
||
aria-selected="false"
|
||
data-target="floaty"
|
||
>
|
||
06 · Overlay first
|
||
</button>
|
||
</div>
|
||
<div class="state-controls" aria-label="Estados do app">
|
||
<button class="state-button" data-state="idle">Pronto</button>
|
||
<button class="state-button" data-state="recording">Gravando</button>
|
||
<button class="state-button is-active" data-state="text">
|
||
Com texto
|
||
</button>
|
||
<button class="state-button" data-state="overlay">Overlay</button>
|
||
<button class="state-button" data-state="settings">Config</button>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="variant-panel is-active" data-panel="current">
|
||
<article class="variant-copy">
|
||
<h2>00 · Clone atual, sem reinterpretar.</h2>
|
||
<p class="intent">
|
||
Reprodução do app atual: janela 380×460, topbar frameless, marca
|
||
circular, painel principal translúcido, botão de gravação âmbar,
|
||
ações em grid, editor expansível e overlay de ditado. Esta versão
|
||
serve como baseline visual para comparação.
|
||
</p>
|
||
<div class="principles">
|
||
<div class="principle">
|
||
<strong>Fidelidade</strong
|
||
><span
|
||
>Cores, raios, pesos, espaçamentos e hierarquia copiados do CSS
|
||
atual.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Estados</strong
|
||
><span
|
||
>Use os botões de estado para conferir texto, overlay e
|
||
configurações.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Marca</strong
|
||
><span>Usa o mesmo mark transparente que está na UI atual.</span>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Decisão</strong
|
||
><span
|
||
>Escolha esta opção se quisermos apenas ajustes cirúrgicos sem
|
||
redesign.</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<aside class="mockup-rail">
|
||
<div class="window-frame">
|
||
<div class="current-root design-state-text" data-mockup>
|
||
<header class="current-topbar">
|
||
<div class="current-drag">
|
||
<button class="current-control" aria-label="Configurações">
|
||
<svg class="icon"><use href="#i-settings" /></svg>
|
||
</button>
|
||
<div class="current-brand">
|
||
<span class="current-mark-shell"
|
||
><img
|
||
class="mark current-mark"
|
||
src="../assets/brand/mark.png"
|
||
alt="Logo do Transcript"
|
||
/></span>
|
||
<h1 class="current-title">Transcript</h1>
|
||
</div>
|
||
</div>
|
||
<div class="current-controls">
|
||
<button class="current-control">
|
||
<svg class="icon"><use href="#i-minus" /></svg></button
|
||
><button class="current-control close">
|
||
<svg class="icon"><use href="#i-x" /></svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<section class="current-main">
|
||
<div class="current-status-row">
|
||
<span class="current-status">Pronto</span>
|
||
</div>
|
||
<div class="current-content">
|
||
<div class="current-actions">
|
||
<button class="current-record">
|
||
<svg class="icon"><use href="#i-mic" /></svg
|
||
><span>Gravar</span
|
||
><span class="current-hotkey"
|
||
>Ctrl+Shift+Space</span
|
||
></button
|
||
><button class="current-secondary">
|
||
<svg class="icon"><use href="#i-copy" /></svg
|
||
>Copiar</button
|
||
><button class="current-secondary">
|
||
<svg class="icon"><use href="#i-arrow" /></svg
|
||
>Inserir</button
|
||
><button class="current-ghost">
|
||
<svg class="icon"><use href="#i-save" /></svg
|
||
>Salvar</button
|
||
><button class="current-ghost">
|
||
<svg class="icon"><use href="#i-trash" /></svg>Limpar
|
||
</button>
|
||
</div>
|
||
<p class="current-message">Transcrição local concluída.</p>
|
||
<div class="current-more">
|
||
<button class="current-secondary">Continuar</button
|
||
><button class="current-ghost">Regravar</button
|
||
><button class="current-ghost">Expandir</button>
|
||
</div>
|
||
</div>
|
||
<div class="current-editor-wrap">
|
||
<label class="current-editor-label">Texto transcrito</label
|
||
><textarea class="current-editor">
|
||
Esta é uma prévia do texto transcrito. O campo expande somente quando há conteúdo, mantendo o app compacto no estado inicial.</textarea
|
||
>
|
||
</div>
|
||
<div class="current-diagnostics">
|
||
<span class="current-details">› Detalhes</span>
|
||
</div>
|
||
</section>
|
||
<section class="current-overlay">
|
||
<span class="current-orb"
|
||
><img src="../assets/brand/mark.png" alt=""
|
||
/></span>
|
||
<div class="current-wave">
|
||
<span style="--i: 0"></span><span style="--i: 1"></span
|
||
><span style="--i: 2"></span><span style="--i: 3"></span
|
||
><span style="--i: 4"></span><span style="--i: 5"></span
|
||
><span style="--i: 6"></span><span style="--i: 7"></span
|
||
><span style="--i: 8"></span><span style="--i: 9"></span
|
||
><span style="--i: 10"></span><span style="--i: 11"></span>
|
||
</div>
|
||
<div class="current-dictation-text">
|
||
<strong>Ouvindo</strong
|
||
><span>Pressione o atalho de novo para inserir</span>
|
||
</div>
|
||
</section>
|
||
<section class="current-settings">
|
||
<div class="current-panel">
|
||
<header>
|
||
<h2>Configurações</h2>
|
||
<button class="current-control">
|
||
<svg class="icon"><use href="#i-x" /></svg>
|
||
</button>
|
||
</header>
|
||
<div class="current-panel-body">
|
||
<h3>API compatível com OpenAI</h3>
|
||
<p>Configure endpoint, modelo e api_key opcional.</p>
|
||
<input
|
||
class="current-input"
|
||
value="http://localhost:8022/v1/audio/transcriptions"
|
||
/><input
|
||
class="current-input"
|
||
value="alefiury/parakeet-tdt"
|
||
/><input class="current-input" value="pt" />
|
||
<h3>Atalho de teclado</h3>
|
||
<input class="current-input" value="Ctrl+Shift+Space" />
|
||
</div>
|
||
<footer>
|
||
<button class="current-ghost">Cancelar</button
|
||
><button class="current-secondary">Salvar</button>
|
||
</footer>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<div class="mockup-label">Baseline visual atual · 380×460</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="variant-panel" data-panel="satin">
|
||
<article class="variant-copy">
|
||
<h2>01 · Satin refinement.</h2>
|
||
<p class="intent">
|
||
Mesma estrutura do app atual, mas com refinamento de densidade,
|
||
melhor contraste de cards e uma área de texto mais “produto
|
||
premium”. É a evolução mais segura: quase sem risco de quebrar fluxo
|
||
mental do usuário.
|
||
</p>
|
||
<div class="principles">
|
||
<div class="principle">
|
||
<strong>Melhor escolha</strong
|
||
><span
|
||
>Recomendado se queremos subir qualidade sem mudar o
|
||
comportamento.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>UX</strong
|
||
><span
|
||
>Menos ruído, hierarquia de status mais clara e botões mais
|
||
previsíveis.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Implementação</strong
|
||
><span
|
||
>Baixo esforço: reaproveita a estrutura atual com tokens
|
||
melhores.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Risco</strong
|
||
><span>Muito baixo; mantém o app compacto e familiar.</span>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<aside class="mockup-rail">
|
||
<div class="window-frame satin" data-mockup>
|
||
<div class="app-top">
|
||
<div class="brand-lockup">
|
||
<span class="brand-orb"
|
||
><img src="../assets/brand/mark.png" alt=""
|
||
/></span>
|
||
<h1 class="app-title">Transcript</h1>
|
||
</div>
|
||
<div class="top-actions">
|
||
<button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-settings" /></svg></button
|
||
><button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-minus" /></svg></button
|
||
><button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-x" /></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<section class="panel">
|
||
<span class="pill">Pronto</span>
|
||
<div class="hero-card">
|
||
<strong>Ditado local pronto para inserir.</strong
|
||
><span class="muted-line"
|
||
>Whisper Base está disponível offline. Pressione o atalho e
|
||
fale naturalmente.</span
|
||
>
|
||
</div>
|
||
<button class="primary">
|
||
<svg class="icon"><use href="#i-mic" /></svg>Gravar
|
||
<span style="opacity: 0.55; font-family: monospace"
|
||
>Ctrl+Shift+Space</span
|
||
>
|
||
</button>
|
||
<div class="mini-grid">
|
||
<button class="mini">Copiar</button
|
||
><button class="mini">Inserir</button
|
||
><button class="mini">Salvar</button
|
||
><button class="mini">Limpar</button>
|
||
</div>
|
||
<textarea>
|
||
Esta versão mantém o mesmo fluxo, mas deixa o editor mais confortável e fácil de ler.</textarea
|
||
>
|
||
</section>
|
||
</div>
|
||
<div class="mockup-label">Evolução direta do design atual</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="variant-panel" data-panel="deck">
|
||
<article class="variant-copy">
|
||
<h2>02 · Command deck.</h2>
|
||
<p class="intent">
|
||
Direção mais “power user”: parece uma ferramenta nativa para quem
|
||
usa atalho o tempo todo. Traz status técnico local/API de forma
|
||
discreta e deixa o botão de ditado como comando principal.
|
||
</p>
|
||
<div class="principles">
|
||
<div class="principle">
|
||
<strong>Tom</strong
|
||
><span
|
||
>Terminal premium, técnico, rápido, ideal para app de
|
||
produtividade.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Clareza</strong
|
||
><span
|
||
>Ótimo para mostrar local/offline, latência e modelo ativo sem
|
||
poluir.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>UX</strong
|
||
><span>Favorece usuários avançados e atalhos globais.</span>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Risco</strong
|
||
><span
|
||
>Visual menos “macio”; pode parecer mais developer tool.</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<aside class="mockup-rail">
|
||
<div class="window-frame deck" data-mockup>
|
||
<div class="app-top">
|
||
<div class="brand-lockup">
|
||
<span class="brand-orb"
|
||
><img src="../assets/brand/mark.png" alt=""
|
||
/></span>
|
||
<h1 class="app-title">TRANSCRIPT</h1>
|
||
</div>
|
||
<div class="top-actions">
|
||
<button class="tiny-icon">
|
||
<svg class="icon icon-thin">
|
||
<use href="#i-settings" />
|
||
</svg></button
|
||
><button class="tiny-icon">
|
||
<svg class="icon icon-thin"><use href="#i-x" /></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<section class="terminal">
|
||
<span class="pill">LOCAL / WHISPER BASE</span>
|
||
<div class="readout">
|
||
<h3>Ready for global dictation</h3>
|
||
<p class="muted-line">
|
||
Audio path armed · insert via clipboard paste · no API
|
||
required.
|
||
</p>
|
||
</div>
|
||
<div class="wave">
|
||
<span style="--h: 10"></span><span style="--h: 32"></span
|
||
><span style="--h: 18"></span><span style="--h: 45"></span
|
||
><span style="--h: 26"></span><span style="--h: 38"></span
|
||
><span style="--h: 14"></span><span style="--h: 31"></span>
|
||
</div>
|
||
<button class="primary">START_CAPTURE</button>
|
||
<div class="mini-grid">
|
||
<button class="mini">COPY</button
|
||
><button class="mini">PASTE</button
|
||
><button class="mini">LOGS</button
|
||
><button class="mini">RESET</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="mockup-label">Mais técnico e orientado a atalho</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="variant-panel" data-panel="aurora">
|
||
<article class="variant-copy">
|
||
<h2>03 · Aurora dictation.</h2>
|
||
<p class="intent">
|
||
Mais emocional e memorável: transforma o ato de gravar em foco
|
||
central, com orb grande, marca forte e sensação de áudio vivo. Bom
|
||
se quisermos que o app pareça mais “AI assistant” e menos
|
||
utilitário.
|
||
</p>
|
||
<div class="principles">
|
||
<div class="principle">
|
||
<strong>Impacto</strong
|
||
><span
|
||
>Visual mais marcante para screenshots, README e
|
||
marketing.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Interação</strong
|
||
><span
|
||
>O estado de gravação fica impossível de não perceber.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Marca</strong
|
||
><span
|
||
>A marca vira elemento central sem virar “cartão branco”.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Risco</strong
|
||
><span
|
||
>Mais mudança de layout, exige cuidado para não parecer
|
||
decorativo demais.</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<aside class="mockup-rail">
|
||
<div class="window-frame aurora" data-mockup>
|
||
<section class="glass">
|
||
<div class="app-top">
|
||
<div class="brand-lockup">
|
||
<span class="brand-orb"
|
||
><img src="../assets/brand/mark.png" alt=""
|
||
/></span>
|
||
<h1 class="app-title">Transcript</h1>
|
||
</div>
|
||
<div class="top-actions">
|
||
<button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-settings" /></svg></button
|
||
><button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-x" /></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<span class="pill">Ouvindo</span>
|
||
<div class="focus">
|
||
<div>
|
||
<div class="ring">
|
||
<img src="../assets/brand/mark.png" alt="" />
|
||
</div>
|
||
<h3>Fale agora.</h3>
|
||
<p class="muted-line">
|
||
Pressione Ctrl+Shift+Space novamente para transcrever e
|
||
inserir.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button class="primary">Parar e inserir</button>
|
||
</section>
|
||
</div>
|
||
<div class="mockup-label">Mais expressivo e “AI assistant”</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="variant-panel" data-panel="studio-paper">
|
||
<article class="variant-copy">
|
||
<h2>04 · Studio paper.</h2>
|
||
<p class="intent">
|
||
Uma direção clara e editorial: menos glass, mais leitura, mais
|
||
“documento”. É a melhor se o foco principal for revisar e editar o
|
||
texto transcrito com conforto, mantendo um contraste elegante.
|
||
</p>
|
||
<div class="principles">
|
||
<div class="principle">
|
||
<strong>Leitura</strong
|
||
><span
|
||
>Excelente para textos longos e revisão pós-transcrição.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Contraste</strong
|
||
><span
|
||
>Modo claro controlado, útil para acessibilidade e uso
|
||
diurno.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Personalidade</strong
|
||
><span
|
||
>Menos comum no ecossistema de apps de AI, mais editorial.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Risco</strong
|
||
><span
|
||
>Afasta do dark glass atual; pode parecer outro produto.</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<aside class="mockup-rail">
|
||
<div class="window-frame studio" data-mockup>
|
||
<section class="paper">
|
||
<header class="app-top">
|
||
<div class="brand-lockup">
|
||
<span class="brand-orb"
|
||
><img src="../assets/brand/mark.png" alt=""
|
||
/></span>
|
||
<h1 class="app-title">Transcript</h1>
|
||
</div>
|
||
<div class="top-actions">
|
||
<button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-settings" /></svg></button
|
||
><button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-x" /></svg>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
<div class="body">
|
||
<span class="pill">Texto pronto</span>
|
||
<h3>Ditado virou rascunho editável.</h3>
|
||
<textarea>
|
||
Esta direção prioriza conforto de leitura, revisão e cópia. Ideal se o app passar a ser usado para notas maiores.</textarea
|
||
><button class="primary">Gravar continuação</button>
|
||
<div class="mini-grid">
|
||
<button class="mini">Copiar</button
|
||
><button class="mini">Inserir</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="mockup-label">Editorial, claro e focado em leitura</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="variant-panel" data-panel="core">
|
||
<article class="variant-copy">
|
||
<h2>05 · Local core.</h2>
|
||
<p class="intent">
|
||
Design orientado ao novo diferencial do app: transcrição local
|
||
embutida. Mostra claramente que há um modelo offline, latência
|
||
esperada e fallback de API, sem transformar isso em painel técnico
|
||
demais.
|
||
</p>
|
||
<div class="principles">
|
||
<div class="principle">
|
||
<strong>Produto</strong
|
||
><span
|
||
>Comunica “sem Docker/API” como valor principal do app.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Confiança</strong
|
||
><span
|
||
>Ajuda o usuário a saber se está usando local, API ou
|
||
fallback.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>UX</strong
|
||
><span>Bom para onboarding e redução de suporte.</span>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Risco</strong
|
||
><span
|
||
>Mais informação na tela; precisa manter modo compacto.</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<aside class="mockup-rail">
|
||
<div class="window-frame core" data-mockup>
|
||
<section class="surface">
|
||
<div class="app-top">
|
||
<div class="brand-lockup">
|
||
<span class="brand-orb"
|
||
><img src="../assets/brand/mark.png" alt=""
|
||
/></span>
|
||
<h1 class="app-title">Transcript</h1>
|
||
</div>
|
||
<div class="top-actions">
|
||
<button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-settings" /></svg></button
|
||
><button class="tiny-icon">
|
||
<svg class="icon"><use href="#i-x" /></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<article class="model-card">
|
||
<small>Offline ativo</small>
|
||
<h3>Whisper Base local está pronto.</h3>
|
||
<p class="muted-line">
|
||
Transcreve no próprio computador. API continua como fallback
|
||
opcional.
|
||
</p>
|
||
</article>
|
||
<div class="metrics">
|
||
<div class="metric">
|
||
<strong>PT-BR</strong><span>idioma</span>
|
||
</div>
|
||
<div class="metric">
|
||
<strong>0 API</strong><span>chave</span>
|
||
</div>
|
||
<div class="metric">
|
||
<strong>base</strong><span>modelo</span>
|
||
</div>
|
||
</div>
|
||
<button class="primary">
|
||
<svg class="icon"><use href="#i-mic" /></svg>Gravar localmente
|
||
</button>
|
||
<div class="mini-grid">
|
||
<button class="mini">Copiar</button
|
||
><button class="mini">Inserir</button
|
||
><button class="mini">Modelo</button
|
||
><button class="mini">Detalhes</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<div class="mockup-label">Valor do offline fica explícito</div>
|
||
</aside>
|
||
</section>
|
||
|
||
<section class="variant-panel" data-panel="floaty">
|
||
<article class="variant-copy">
|
||
<h2>06 · Overlay first.</h2>
|
||
<p class="intent">
|
||
Direção baseada no caso de uso principal: apertar atalho em qualquer
|
||
app, ditar e inserir. Em vez de pensar primeiro na janela principal,
|
||
esta versão prioriza a barra flutuante como “produto principal”.
|
||
</p>
|
||
<div class="principles">
|
||
<div class="principle">
|
||
<strong>Hotkey</strong
|
||
><span
|
||
>O fluxo global fica mais claro, elegante e menos
|
||
intrusivo.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Foco</strong
|
||
><span
|
||
>Ideal para usuários que quase nunca abrem a janela
|
||
completa.</span
|
||
>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Polimento</strong
|
||
><span>Overlay vira assinatura visual do app.</span>
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Risco</strong
|
||
><span
|
||
>Não resolve sozinho a tela de configurações/editor; precisa
|
||
combinar com outra direção.</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
<aside class="mockup-rail">
|
||
<div class="window-frame floaty" data-mockup>
|
||
<section class="bar">
|
||
<span class="brand-orb"
|
||
><img src="../assets/brand/mark.png" alt=""
|
||
/></span>
|
||
<div class="wave">
|
||
<span style="--i: 0; --h: 8"></span
|
||
><span style="--i: 1; --h: 24"></span
|
||
><span style="--i: 2; --h: 34"></span
|
||
><span style="--i: 3; --h: 16"></span
|
||
><span style="--i: 4; --h: 40"></span
|
||
><span style="--i: 5; --h: 22"></span
|
||
><span style="--i: 6; --h: 30"></span
|
||
><span style="--i: 7; --h: 14"></span>
|
||
</div>
|
||
<div>
|
||
<strong>Ouvindo</strong
|
||
><em>Solte a fala. Atalho de novo insere.</em>
|
||
</div>
|
||
</section>
|
||
<div class="hintbox">
|
||
Overlay compacto, sempre no rodapé, sem roubar atenção do app
|
||
ativo.
|
||
</div>
|
||
</div>
|
||
<div class="mockup-label">
|
||
Barra global como experiência principal
|
||
</div>
|
||
</aside>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
const studio = document.querySelector("#studio");
|
||
const tabs = Array.from(document.querySelectorAll(".tab"));
|
||
const panels = Array.from(document.querySelectorAll(".variant-panel"));
|
||
const stateButtons = Array.from(
|
||
document.querySelectorAll(".state-button"),
|
||
);
|
||
const stateMap = {
|
||
idle: {
|
||
label: "Pronto",
|
||
record: "Gravar",
|
||
message: "Pronto para gravar.",
|
||
},
|
||
recording: {
|
||
label: "Gravando",
|
||
record: "Parar",
|
||
message: "Gravando… pressione o atalho novamente para finalizar.",
|
||
},
|
||
text: {
|
||
label: "Pronto",
|
||
record: "Gravar",
|
||
message: "Transcrição local concluída.",
|
||
},
|
||
overlay: {
|
||
label: "Transcrevendo",
|
||
record: "Transcrevendo…",
|
||
message: "Overlay ativo.",
|
||
},
|
||
settings: {
|
||
label: "Pronto",
|
||
record: "Gravar",
|
||
message: "Configurações abertas.",
|
||
},
|
||
};
|
||
|
||
function syncState(state) {
|
||
studio.dataset.state = state;
|
||
document.querySelectorAll("[data-mockup]").forEach((mockup) => {
|
||
mockup.classList.remove(
|
||
"design-state-idle",
|
||
"design-state-recording",
|
||
"design-state-text",
|
||
"design-state-overlay",
|
||
"design-state-settings",
|
||
);
|
||
mockup.classList.add("design-state-" + state);
|
||
});
|
||
const current = stateMap[state] || stateMap.text;
|
||
const status = document.querySelector(".current-status");
|
||
const record = document.querySelector(".current-record span");
|
||
const message = document.querySelector(".current-message");
|
||
if (status) status.textContent = current.label;
|
||
if (record) record.textContent = current.record;
|
||
if (message) message.textContent = current.message;
|
||
stateButtons.forEach((button) =>
|
||
button.classList.toggle("is-active", button.dataset.state === state),
|
||
);
|
||
}
|
||
|
||
tabs.forEach((tab) => {
|
||
tab.addEventListener("click", () => {
|
||
const target = tab.dataset.target;
|
||
tabs.forEach((item) =>
|
||
item.setAttribute("aria-selected", String(item === tab)),
|
||
);
|
||
panels.forEach((panel) =>
|
||
panel.classList.toggle("is-active", panel.dataset.panel === target),
|
||
);
|
||
});
|
||
});
|
||
|
||
stateButtons.forEach((button) =>
|
||
button.addEventListener("click", () => syncState(button.dataset.state)),
|
||
);
|
||
syncState("text");
|
||
</script>
|
||
</body>
|
||
</html>
|