nearle_daily/daily_console_web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profile page

Browse Source
This commit is contained in:
abhishek
2026-09-08 19:01:40 +05:30
parent 33c4542ddf
commit 035ceb44a7
2 changed files with 895 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
src/index.css
View File

@@ -1786,3 +1786,234 @@ main {
background: var(--color-success-tint, #eaf7ef);
color: var(--color-success, #1f9d55);
}
/* ══ Store profile ═════════════════════════════════════════════════════════
The merchant's own record, read first and edited second.
It was one long column of inputs — twenty fields, every one of them drawn as
a text box whether or not anybody was editing it — so the screen asked a
question it had already been answered and buried the four facts that were
actually missing. What is here now is a reading surface: cards of labelled
values, and an Edit on the card you want to change.
The palette is the console's, spent deliberately: purple for what is active
or actionable, green only for a live status, amber only where a legal field
is empty, navy for headings, slate for the labels beside them. The page sits
on the faintest lavender so the white cards have something to be white
against. */
.sp-page {
/* A tint, not a colour: brand purple at 3% is enough to lift a white card
off the page and not enough to read as a purple screen.
Tinted INSIDE the content column rather than bled out to the gutter with a
negative margin. The gutter is 16px under 1024px and 24px over it, and the
column's right edge is where the assistant panel's gap begins — a bleed
wide enough to reach the page edge on a desktop would tint that gap on a
laptop and sit under the panel. The brief is explicit that the panel is not
to be touched, and a background is not worth the risk of moving it. */
background: color-mix(in oklab, var(--color-brand) 3%, #ffffff);
border-radius: 16px;
padding: 18px;
}
@media (max-width: 720px) { .sp-page { padding: 12px; } }
/* ── Header ─────────────────────────────────────────────────────────────── */
.sp-head {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 18px 20px;
border: 1px solid var(--color-line);
border-radius: 16px;
background: var(--color-surface);
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}
/* The store, not the person. A shop mark rather than an avatar — this record
is a business and a face on it would say otherwise. */
.sp-mark {
width: 52px;
height: 52px;
border-radius: 14px;
flex: none;
display: grid;
place-items: center;
overflow: hidden;
background: var(--color-brand-tint);
color: var(--color-brand);
}
.sp-mark img { width: 100%; height: 100%; object-fit: cover; }
.sp-name {
margin: 0;
font: 600 20px/1.25 var(--font-sans);
letter-spacing: -0.01em;
color: var(--color-ink-1);
}
.sp-sub { font: 400 13px/1.45 var(--font-sans); color: var(--color-ink-3); }
.sp-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 999px;
font: 600 11.5px/1.6 var(--font-sans);
text-transform: capitalize;
white-space: nowrap;
color: var(--color-success, #1f9d55);
background: var(--color-success-tint, #eaf7ef);
}
.sp-pill[data-tone='warn'] {
color: var(--color-warning, #b7860b);
background: color-mix(in oklab, var(--color-warning, #b7860b) 12%, transparent);
}
.sp-pill[data-tone='muted'] { color: var(--color-ink-3); background: var(--color-surface-sunken); }
/* The four facts worth knowing before reading anything else. A row, not four
cards: they are one sentence about the shop, not four separate objects. */
.sp-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 14px;
border-top: 1px solid var(--color-line);
padding-top: 14px;
}
.sp-summary > * + * { border-left: 1px solid var(--color-line); padding-left: 16px; }
.sp-summary > * { padding-right: 16px; min-width: 0; }
@media (max-width: 720px) {
.sp-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
.sp-summary > *:nth-child(odd) { border-left: 0; padding-left: 0; }
}
.sp-summary-label {
display: block;
font: 500 11px/1.4 var(--font-sans);
letter-spacing: 0.045em;
text-transform: uppercase;
color: var(--color-ink-4);
}
.sp-summary-value {
display: block;
margin-top: 3px;
font: 500 13.5px/1.45 var(--font-sans);
color: var(--color-ink-1);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Tabs ───────────────────────────────────────────────────────────────── */
.sp-tabs {
display: flex;
gap: 24px;
border-bottom: 1px solid var(--color-line);
}
.sp-tab {
appearance: none;
border: 0;
background: none;
padding: 10px 2px 11px;
margin-bottom: -1px;
font: 500 13.5px/1.4 var(--font-sans);
color: var(--color-ink-3);
cursor: pointer;
border-bottom: 2px solid transparent;
}
.sp-tab:hover { color: var(--color-ink-1); }
.sp-tab[aria-selected='true'] {
color: var(--color-brand);
font-weight: 600;
border-bottom-color: var(--color-brand);
}
.sp-tab:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
/* ── Cards ──────────────────────────────────────────────────────────────── */
.sp-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
@media (max-width: 900px) { .sp-cards { grid-template-columns: minmax(0, 1fr); } }
.sp-card {
border: 1px solid var(--color-line);
border-radius: 14px;
background: var(--color-surface);
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
overflow: hidden;
}
.sp-card[data-span='full'] { grid-column: 1 / -1; }
.sp-card-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--color-line);
}
.sp-card-icon {
width: 28px;
height: 28px;
flex: none;
border-radius: 8px;
display: grid;
place-items: center;
background: var(--color-brand-tint);
color: var(--color-brand);
}
.sp-card-title {
margin: 0;
flex: 1 1 auto;
min-width: 0;
font: 600 14px/1.4 var(--font-sans);
color: var(--color-ink-1);
}
.sp-card-body { padding: 4px 16px 8px; }
/* Label left, value right, on one baseline — the alignment is the whole point
of reading a record rather than a form. Divided by a hairline rather than
boxed: twelve boxes in a card is what made the old screen feel like a form
even when nothing was editable. */
.sp-row {
display: grid;
grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
gap: 16px;
align-items: baseline;
padding: 11px 0;
border-bottom: 1px solid color-mix(in oklab, var(--color-line) 60%, transparent);
}
.sp-card-body > .sp-row:last-child { border-bottom: 0; }
.sp-label { font: 400 12.5px/1.5 var(--font-sans); color: var(--color-ink-3); }
.sp-value {
font: 500 13.5px/1.55 var(--font-sans);
color: var(--color-ink-1);
overflow-wrap: anywhere;
}
.sp-value[data-empty='yes'] { font-weight: 400; color: var(--color-ink-4); }
.sp-value[data-mono='yes'] { font-family: var(--font-mono); font-size: 13px; }
.sp-empty {
padding: 18px 0 22px;
font: 400 13px/1.6 var(--font-sans);
color: var(--color-ink-4);
text-align: center;
}
/* A field being edited. Only ever drawn when somebody asked to edit — the
default state of this page is text. */
.sp-field { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; }
.sp-field-label {
font: 500 12px/1.4 var(--font-sans);
color: var(--color-ink-2, var(--color-ink-1));
}