ivanch/recommender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new design
All checks were successful
Recommender Build and Deploy (internal) / Build Recommender Image (push) Successful in 3m22s
Details
Recommender Build and Deploy (internal) / Deploy Recommender (internal) (push) Successful in 48s
Details

Browse Source
This commit is contained in:
Jose Henrique
2026-04-18 21:19:24 -03:00
parent 6e9cfc5d30
commit c319dea2bf
9 changed files with 504 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/index.html
View File

@@ -5,6 +5,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<title>Recommender</title> <title>Recommender</title>
</head> </head>

52
packages/frontend/src/components/Cards.css
View File

@@ -3,20 +3,30 @@
.cards-grid { .cards-grid {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: var(--sp-3);
margin-bottom: 32px; margin-bottom: var(--sp-8);
} }
.card { .card {
background: var(--bg-surface); background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
rgba(28, 25, 42, 0.7);
backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius-md);
padding: 16px; padding: var(--sp-4);
transition: border-color 0.15s; box-shadow:
0 8px 28px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
} }
.card:hover { .card:hover {
border-color: var(--bg-surface-3); border-color: rgba(232, 168, 124, 0.28);
transform: translateY(-1px);
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
} }
.card-header { .card-header {
@@ -31,35 +41,41 @@
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
padding: 2px 8px; padding: 2px 8px;
border-radius: 100px; border-radius: var(--radius-pill);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.08em;
flex-shrink: 0; flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
} }
.badge-green { .badge-green {
background: rgba(34, 197, 94, 0.15); background: rgba(34, 197, 94, 0.14);
color: #4ade80; color: #4ade80;
box-shadow: 0 0 18px rgba(34, 197, 94, 0.14);
} }
.badge-blue { .badge-blue {
background: rgba(59, 130, 246, 0.15); background: rgba(59, 130, 246, 0.15);
color: #60a5fa; color: #60a5fa;
box-shadow: 0 0 18px rgba(59, 130, 246, 0.14);
} }
.badge-yellow { .badge-yellow {
background: rgba(234, 179, 8, 0.15); background: rgba(234, 179, 8, 0.15);
color: #facc15; color: #facc15;
box-shadow: 0 0 18px rgba(234, 179, 8, 0.12);
} }
.badge-red { .badge-red {
background: rgba(239, 68, 68, 0.15); background: rgba(239, 68, 68, 0.15);
color: #f87171; color: #f87171;
box-shadow: 0 0 18px rgba(239, 68, 68, 0.12);
} }
.badge-magenta { .badge-magenta {
background: rgba(217, 70, 239, 0.15); background: rgba(217, 70, 239, 0.15);
color: #e879f9; color: #e879f9;
box-shadow: 0 0 18px rgba(217, 70, 239, 0.14);
} }
.badge-verified { .badge-verified {
@@ -81,16 +97,16 @@
} }
.card-explanation { .card-explanation {
font-size: 13px; font-size: 14px;
color: var(--text-muted); color: var(--text-muted);
line-height: 1.5; line-height: 1.6;
margin-bottom: 8px; margin-bottom: 10px;
} }
.genre-badge { .genre-badge {
font-size: 10px; font-size: 10px;
font-weight: 500; font-weight: 500;
background: rgba(148, 163, 184, 0.12); background: rgba(245, 240, 232, 0.08);
color: var(--text-dim); color: var(--text-dim);
display: inline-block; display: inline-block;
text-transform: none; text-transform: none;
@@ -182,7 +198,7 @@
.btn-rerank { .btn-rerank {
padding: 12px 28px; padding: 12px 28px;
background: var(--bg-surface-2); background: rgba(255, 255, 255, 0.05);
color: var(--text); color: var(--text);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
@@ -193,9 +209,9 @@
} }
.btn-rerank:hover:not(:disabled) { .btn-rerank:hover:not(:disabled) {
background: var(--bg-surface-3); background: rgba(255, 255, 255, 0.09);
border-color: var(--accent); border-color: rgba(232, 168, 124, 0.24);
color: var(--accent); color: var(--text);
} }
.btn-rerank:disabled { .btn-rerank:disabled {

109
packages/frontend/src/components/Modal.css
View File

@@ -7,9 +7,9 @@
justify-content: center; justify-content: center;
padding: 24px; padding: 24px;
background: background:
radial-gradient(circle at top, rgba(56, 189, 248, 0.12), transparent 32%), radial-gradient(circle at top, rgba(232, 168, 124, 0.12), transparent 32%),
radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.12), transparent 28%), radial-gradient(circle at bottom right, rgba(245, 240, 232, 0.08), transparent 28%),
rgba(6, 8, 12, 0.76); rgba(10, 8, 15, 0.78);
backdrop-filter: blur(12px); backdrop-filter: blur(12px);
} }
@@ -21,7 +21,7 @@
border-radius: 28px; border-radius: 28px;
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(17, 24, 39, 0.96)); linear-gradient(145deg, rgba(28, 25, 42, 0.96), rgba(22, 19, 34, 0.97));
box-shadow: box-shadow:
0 32px 90px rgba(0, 0, 0, 0.45), 0 32px 90px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.05); inset 0 1px 0 rgba(255, 255, 255, 0.05);
@@ -41,13 +41,13 @@
font-size: clamp(1.8rem, 3vw, 2.35rem); font-size: clamp(1.8rem, 3vw, 2.35rem);
line-height: 1.05; line-height: 1.05;
letter-spacing: -0.03em; letter-spacing: -0.03em;
color: #f8fafc; color: var(--text);
} }
.modal-hero-copy { .modal-hero-copy {
max-width: 560px; max-width: 560px;
margin-top: 12px; margin-top: 12px;
color: rgba(226, 232, 240, 0.72); color: rgba(245, 240, 232, 0.7);
font-size: 1rem; font-size: 1rem;
line-height: 1.6; line-height: 1.6;
} }
@@ -58,8 +58,8 @@
margin-bottom: 14px; margin-bottom: 14px;
padding: 6px 10px; padding: 6px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(56, 189, 248, 0.14); background: rgba(232, 168, 124, 0.14);
color: #7dd3fc; color: var(--accent);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.12em; letter-spacing: 0.12em;
@@ -84,9 +84,9 @@
.modal-close:hover:not(:disabled), .modal-close:hover:not(:disabled),
.modal-back:hover:not(:disabled) { .modal-back:hover:not(:disabled) {
transform: translateY(-1px); transform: translateY(-1px);
color: #f8fafc; color: var(--text);
border-color: rgba(125, 211, 252, 0.34); border-color: rgba(232, 168, 124, 0.34);
background: rgba(56, 189, 248, 0.08); background: rgba(232, 168, 124, 0.08);
} }
.modal-close:disabled, .modal-close:disabled,
@@ -118,7 +118,8 @@
border-radius: 24px; border-radius: 24px;
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 100%),
rgba(15, 23, 42, 0.58); rgba(28, 25, 42, 0.58);
backdrop-filter: blur(16px) saturate(160%);
} }
.modal-section-header { .modal-section-header {
@@ -131,7 +132,7 @@
.modal-section-header h3, .modal-section-header h3,
.settings-card-header h3 { .settings-card-header h3 {
font-size: 1.08rem; font-size: 1.08rem;
color: #f8fafc; color: var(--text);
} }
.modal-section-header p, .modal-section-header p,
@@ -148,8 +149,8 @@
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(251, 191, 36, 0.16)); background: linear-gradient(135deg, rgba(232, 168, 124, 0.22), rgba(245, 240, 232, 0.14));
color: #f8fafc; color: var(--text);
font-weight: 700; font-weight: 700;
} }
@@ -177,7 +178,7 @@
border-radius: 22px; border-radius: 22px;
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
rgba(30, 41, 59, 0.68); rgba(36, 33, 56, 0.68);
color: inherit; color: inherit;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@@ -187,17 +188,17 @@
.type-card:hover, .type-card:hover,
.mode-card:hover { .mode-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
border-color: rgba(125, 211, 252, 0.4); border-color: rgba(232, 168, 124, 0.36);
box-shadow: 0 18px 32px rgba(2, 8, 23, 0.25); box-shadow: 0 18px 32px rgba(2, 8, 23, 0.25);
} }
.type-card--selected, .type-card--selected,
.mode-card--active { .mode-card--active {
border-color: rgba(125, 211, 252, 0.55); border-color: rgba(232, 168, 124, 0.55);
background: background:
linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(251, 191, 36, 0.06)), linear-gradient(180deg, rgba(232, 168, 124, 0.12), rgba(245, 240, 232, 0.04)),
rgba(17, 24, 39, 0.92); rgba(28, 25, 42, 0.92);
box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.14); box-shadow: inset 0 0 0 1px rgba(232, 168, 124, 0.16);
} }
.type-card-icon { .type-card-icon {
@@ -211,7 +212,7 @@
.type-card-label, .type-card-label,
.mode-card-label { .mode-card-label {
color: #f8fafc; color: var(--text);
font-size: 1.04rem; font-size: 1.04rem;
font-weight: 700; font-weight: 700;
} }
@@ -224,7 +225,7 @@
.type-card-desc, .type-card-desc,
.mode-card-desc { .mode-card-desc {
color: rgba(226, 232, 240, 0.72); color: rgba(245, 240, 232, 0.66);
line-height: 1.55; line-height: 1.55;
font-size: 0.92rem; font-size: 0.92rem;
} }
@@ -234,8 +235,8 @@
align-items: center; align-items: center;
padding: 4px 10px; padding: 4px 10px;
border-radius: 999px; border-radius: 999px;
background: rgba(251, 191, 36, 0.14); background: rgba(232, 168, 124, 0.14);
color: #fcd34d; color: var(--accent);
font-size: 0.72rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -263,15 +264,15 @@
border-radius: 999px; border-radius: 999px;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
color: #e2e8f0; color: var(--text);
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
} }
.summary-pill--accent { .summary-pill--accent {
background: rgba(56, 189, 248, 0.12); background: rgba(232, 168, 124, 0.12);
border-color: rgba(125, 211, 252, 0.22); border-color: rgba(232, 168, 124, 0.22);
color: #7dd3fc; color: var(--accent);
} }
.summary-caption { .summary-caption {
@@ -304,7 +305,7 @@
} }
.form-group label { .form-group label {
color: #e2e8f0; color: var(--text);
font-size: 0.92rem; font-size: 0.92rem;
font-weight: 600; font-weight: 600;
} }
@@ -321,8 +322,8 @@
padding: 13px 14px; padding: 13px 14px;
border: 1px solid rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 16px; border-radius: 16px;
background: rgba(15, 23, 42, 0.66); background: rgba(18, 16, 26, 0.85);
color: #f8fafc; color: var(--text);
font: inherit; font: inherit;
outline: none; outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
@@ -330,14 +331,14 @@
.form-input::placeholder, .form-input::placeholder,
.form-textarea::placeholder { .form-textarea::placeholder {
color: #64748b; color: var(--text-dim);
} }
.form-input:focus, .form-input:focus,
.form-textarea:focus { .form-textarea:focus {
border-color: rgba(125, 211, 252, 0.52); border-color: rgba(232, 168, 124, 0.52);
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12); box-shadow: 0 0 0 4px rgba(232, 168, 124, 0.12);
background: rgba(15, 23, 42, 0.86); background: rgba(18, 16, 26, 0.94);
} }
.form-input[type='range'] { .form-input[type='range'] {
@@ -365,15 +366,15 @@
border: 1px solid rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 24px; border-radius: 24px;
background: background:
radial-gradient(circle at top right, rgba(56, 189, 248, 0.07), transparent 28%), radial-gradient(circle at top right, rgba(232, 168, 124, 0.08), transparent 28%),
rgba(15, 23, 42, 0.58); rgba(28, 25, 42, 0.58);
} }
.slider-card { .slider-card {
padding: 16px 18px; padding: 16px 18px;
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(15, 23, 42, 0.72); background: rgba(18, 16, 26, 0.72);
} }
.slider-card--compact { .slider-card--compact {
@@ -390,7 +391,7 @@
.slider-label { .slider-label {
display: block; display: block;
color: #f8fafc; color: var(--text);
font-weight: 600; font-weight: 600;
} }
@@ -406,8 +407,8 @@
min-width: 48px; min-width: 48px;
padding: 8px 10px; padding: 8px 10px;
border-radius: 12px; border-radius: 12px;
background: rgba(56, 189, 248, 0.12); background: rgba(232, 168, 124, 0.12);
color: #7dd3fc; color: var(--accent);
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
} }
@@ -422,7 +423,7 @@
padding: 15px 16px; padding: 15px 16px;
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.07);
background: rgba(15, 23, 42, 0.6); background: rgba(28, 25, 42, 0.6);
} }
.toggle-card--disabled { .toggle-card--disabled {
@@ -443,7 +444,7 @@
} }
.toggle-title { .toggle-title {
color: #f8fafc; color: var(--text);
font-weight: 600; font-weight: 600;
} }
@@ -466,8 +467,8 @@
} }
.toggle-switch.on { .toggle-switch.on {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.85)); background: rgba(232, 168, 124, 0.3);
border-color: rgba(125, 211, 252, 0.4); border-color: rgba(232, 168, 124, 0.4);
} }
.toggle-switch-disabled { .toggle-switch-disabled {
@@ -481,12 +482,14 @@
width: 22px; width: 22px;
height: 22px; height: 22px;
border-radius: 50%; border-radius: 50%;
background: #fff; background: var(--text-muted);
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
.toggle-switch.on .toggle-knob { .toggle-switch.on .toggle-knob {
transform: translateX(22px); transform: translateX(22px);
background: var(--accent);
box-shadow: 0 0 8px rgba(232, 168, 124, 0.4);
} }
.expansive-options { .expansive-options {
@@ -495,8 +498,8 @@
gap: 14px; gap: 14px;
padding: 16px; padding: 16px;
border-radius: 18px; border-radius: 18px;
border: 1px solid rgba(125, 211, 252, 0.14); border: 1px solid rgba(232, 168, 124, 0.14);
background: rgba(8, 47, 73, 0.15); background: rgba(232, 168, 124, 0.08);
} }
.segmented-control { .segmented-control {
@@ -509,7 +512,7 @@
padding: 12px 14px; padding: 12px 14px;
border-radius: 14px; border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(15, 23, 42, 0.66); background: rgba(18, 16, 26, 0.66);
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
font: inherit; font: inherit;
@@ -518,9 +521,9 @@
} }
.segmented-control-btn--active { .segmented-control-btn--active {
background: rgba(56, 189, 248, 0.12); background: rgba(232, 168, 124, 0.12);
border-color: rgba(125, 211, 252, 0.34); border-color: rgba(232, 168, 124, 0.34);
color: #7dd3fc; color: var(--accent);
} }
.modal-actions { .modal-actions {

18
packages/frontend/src/components/PipelineProgress.css
View File

@@ -1,14 +1,14 @@
/* ── Pipeline Progress ──────────────────────────────────── */ /* ── Pipeline Progress ──────────────────────────────────── */
.pipeline-progress { .pipeline-progress {
padding: 40px 0; padding: var(--sp-8) 0;
} }
.pipeline-title { .pipeline-title {
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: var(--text); color: var(--text);
margin-bottom: 24px; margin-bottom: var(--sp-6);
} }
.pipeline-steps { .pipeline-steps {
@@ -23,15 +23,21 @@
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 12px 16px; padding: 12px 16px;
background: var(--bg-surface); background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
var(--bg-surface);
backdrop-filter: blur(14px) saturate(150%);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius-md);
font-size: 14px; font-size: 14px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
} }
.pipeline-step--running { .pipeline-step--running {
border-color: var(--accent); border-color: rgba(232, 168, 124, 0.3);
background: var(--accent-dim); background:
linear-gradient(180deg, rgba(232, 168, 124, 0.08), transparent 100%),
rgba(28, 25, 42, 0.82);
} }
.pipeline-step--done { .pipeline-step--done {

48
packages/frontend/src/components/Sidebar.css
View File

@@ -2,16 +2,20 @@
.sidebar { .sidebar {
width: var(--sidebar-width); width: var(--sidebar-width);
background: var(--bg-surface); background:
border-right: 1px solid var(--border); linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
rgba(28, 25, 42, 0.82);
backdrop-filter: blur(20px) saturate(160%);
border-right: 1px solid rgba(255, 255, 255, 0.07);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
} }
.sidebar-header { .sidebar-header {
padding: 20px 16px 12px; padding: var(--sp-5) var(--sp-4) var(--sp-3);
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
text-align: center; text-align: center;
} }
@@ -20,7 +24,7 @@
font-size: 24px; font-size: 24px;
font-weight: 700; font-weight: 700;
color: var(--text); color: var(--text);
letter-spacing: -0.3px; letter-spacing: -0.03em;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
transition: color 0.15s ease; transition: color 0.15s ease;
@@ -32,28 +36,31 @@
} }
.btn-new { .btn-new {
margin: 12px; margin: var(--sp-3);
padding: 10px 14px; padding: 10px 14px;
background: var(--accent); background: var(--accent);
color: #fff; color: #1a141f;
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
text-align: left; text-align: left;
box-shadow: 0 8px 24px rgba(232, 168, 124, 0.18);
} }
.btn-new:hover { .btn-new:hover {
background: var(--accent-hover); background: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 12px 30px rgba(232, 168, 124, 0.22);
} }
.sidebar-section-label { .sidebar-section-label {
padding: 8px 16px 4px; padding: 8px 16px 4px;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
letter-spacing: 0.06em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-dim); color: var(--text-dim);
} }
@@ -76,21 +83,27 @@
align-items: center; align-items: center;
gap: 8px; gap: 8px;
padding: 8px 10px; padding: 8px 10px;
border-radius: var(--radius-sm); border-radius: 10px;
cursor: pointer; cursor: pointer;
color: var(--text-muted); color: var(--text-muted);
font-size: 13px; font-size: 13px;
transition: background 0.1s, color 0.1s; border: 1px solid transparent;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
user-select: none; user-select: none;
} }
.sidebar-item:hover { .sidebar-item:hover {
background: var(--bg-surface-2); background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.06);
color: var(--text); color: var(--text);
transform: translateX(1px);
} }
.sidebar-item.selected { .sidebar-item.selected {
background: var(--accent-dim); background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
rgba(232, 168, 124, 0.12);
border-color: rgba(232, 168, 124, 0.22);
color: var(--text); color: var(--text);
} }
@@ -129,7 +142,7 @@
font-size: 10px; font-size: 10px;
font-weight: 600; font-weight: 600;
padding: 2px 5px; padding: 2px 5px;
border-radius: 4px; border-radius: var(--radius-xs);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} }
@@ -164,3 +177,12 @@
.sidebar-item-delete:hover { .sidebar-item-delete:hover {
color: var(--red); color: var(--red);
} }
@media (max-width: 720px) {
.sidebar {
width: 100%;
max-height: 42vh;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
}

22
packages/frontend/src/components/Sidebar.tsx
View File

@@ -1,4 +1,5 @@
import './Sidebar.css'; import './Sidebar.css';
import { route } from 'preact-router';
import type { RecommendationSummary } from '../types/index.js'; import type { RecommendationSummary } from '../types/index.js';
interface SidebarProps { interface SidebarProps {
@@ -30,10 +31,27 @@ export function Sidebar({ list, selectedId, onSelect, onNewClick }: SidebarProps
return ( return (
<aside class="sidebar"> <aside class="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
<a href="/" class="sidebar-title">Recommender</a> <a
href="/"
class="sidebar-title"
onClick={(event) => {
event.preventDefault();
route('/');
}}
>
Recommender
</a>
</div> </div>
<button class="btn-new" onClick={onNewClick}> <button
type="button"
class="btn-new"
onClick={(event) => {
event.preventDefault();
event.stopPropagation();
onNewClick();
}}
>
+ New Recommendation + New Recommendation
</button> </button>

267
packages/frontend/src/index.css
View File

@@ -7,29 +7,47 @@
} }
:root { :root {
--bg: #0f1117; --bg: #13111a;
--bg-surface: #1a1d27; --bg-surface: rgba(28, 25, 42, 0.72);
--bg-surface-2: #222535; --bg-surface-2: rgba(36, 33, 56, 0.65);
--bg-surface-3: #2a2e42; --bg-surface-3: rgba(48, 45, 72, 0.6);
--border: #2e3248; --border: rgba(245, 240, 232, 0.08);
--text: #e2e4ed; --border-strong: rgba(245, 240, 232, 0.16);
--text-muted: #8a8fa8; --text: #f5f0e8;
--text-dim: #5a5f77; --text-muted: #a09890;
--accent: #6366f1; --text-dim: #686070;
--accent-hover: #4f52d9; --accent: #e8a87c;
--accent-dim: rgba(99, 102, 241, 0.15); --accent-hover: #d4956a;
--accent-dim: rgba(232, 168, 124, 0.12);
--green: #22c55e; --green: #22c55e;
--blue: #3b82f6; --blue: #3b82f6;
--yellow: #eab308; --yellow: #eab308;
--red: #ef4444; --red: #ef4444;
--radius: 8px; --magenta: #d946ef;
--radius-sm: 4px; --radius-xs: 4px;
--radius: 12px;
--radius-md: 16px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-8: 32px;
--sp-10: 40px;
--sp-12: 48px;
--sidebar-width: 260px; --sidebar-width: 260px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-size: 14px; font-size: 14px;
color: var(--text); color: var(--text);
background: var(--bg); background: var(--bg);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 400;
letter-spacing: -0.01em;
} }
html, html,
@@ -40,6 +58,43 @@ body,
overflow: hidden; overflow: hidden;
} }
body {
position: relative;
color: var(--text);
background:
radial-gradient(ellipse 80% 60% at 15% 10%, rgba(232, 168, 124, 0.07), transparent 55%),
radial-gradient(ellipse 70% 50% at 85% 90%, rgba(245, 240, 232, 0.05), transparent 50%),
var(--bg);
}
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%),
radial-gradient(circle at top left, rgba(255, 214, 170, 0.05), transparent 28%);
}
a {
color: inherit;
}
button,
input,
textarea {
font: inherit;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.12);
}
/* ── Layout ────────────────────────────────────────────── */ /* ── Layout ────────────────────────────────────────────── */
.layout { .layout {
@@ -51,7 +106,7 @@ body,
.main-content { .main-content {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 32px; padding: var(--sp-8);
} }
/* ── Shared content areas ───────────────────────────────── */ /* ── Shared content areas ───────────────────────────────── */
@@ -62,7 +117,7 @@ body,
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
gap: 12px; gap: var(--sp-3);
color: var(--text-muted); color: var(--text-muted);
text-align: center; text-align: center;
} }
@@ -73,26 +128,56 @@ body,
color: var(--text); color: var(--text);
} }
.surface-glass {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
var(--bg-surface);
backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow:
0 8px 40px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.label-eyebrow {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
}
/* ── Buttons ────────────────────────────────────────────── */ /* ── Buttons ────────────────────────────────────────────── */
.btn-primary { .btn-primary {
padding: 10px 20px; padding: 10px 20px;
background: var(--accent); background: var(--accent);
color: #fff; color: #1a141f;
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition:
background 0.15s ease,
transform 0.15s ease,
box-shadow 0.15s ease;
} }
.btn-primary:hover:not(:disabled) { .btn-primary:hover:not(:disabled) {
background: var(--accent-hover); background: var(--accent-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(232, 168, 124, 0.28);
}
.btn-primary:active:not(:disabled) {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(232, 168, 124, 0.15);
} }
.btn-primary:disabled { .btn-primary:disabled {
opacity: 0.5; opacity: 0.45;
cursor: not-allowed; cursor: not-allowed;
} }
@@ -103,16 +188,154 @@ body,
.btn-secondary { .btn-secondary {
padding: 10px 20px; padding: 10px 20px;
background: var(--bg-surface-2); background: rgba(255, 255, 255, 0.05);
color: var(--text-muted); color: var(--text-muted);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius);
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease;
} }
.btn-secondary:hover:not(:disabled) { .btn-secondary:hover:not(:disabled) {
background: var(--bg-surface-3); background: rgba(255, 255, 255, 0.09);
border-color: var(--border-strong);
color: var(--text);
}
.btn-ghost {
padding: 8px 16px;
background: transparent;
color: var(--text-dim);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
font-size: 13px;
font-weight: 400;
cursor: pointer;
transition: color 0.15s ease, border-color 0.15s ease;
}
.btn-ghost:hover:not(:disabled) {
color: var(--text-muted);
border-color: rgba(255, 255, 255, 0.12);
}
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
color: var(--text-muted);
cursor: pointer;
font-size: 16px;
transition:
background 0.15s ease,
border-color 0.15s ease,
color 0.15s ease,
transform 0.15s ease;
}
.btn-icon:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.14);
color: var(--text);
transform: translateY(-1px);
}
.btn-danger {
padding: 8px 16px;
background: transparent;
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: var(--radius);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-danger:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.5);
}
input[type='text'],
input[type='search'],
textarea {
background: rgba(18, 16, 26, 0.85);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
color: var(--text);
padding: 10px 14px;
font-size: 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
outline: none;
}
input[type='text']:focus,
input[type='search']:focus,
textarea:focus {
border-color: rgba(232, 168, 124, 0.5);
box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.12);
}
input::placeholder,
textarea::placeholder {
color: var(--text-dim);
}
input[type='range'] {
-webkit-appearance: none;
appearance: none;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 100px;
outline: none;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 0 3px rgba(232, 168, 124, 0.2);
transition: box-shadow 0.15s ease;
}
input[type='range']::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 5px rgba(232, 168, 124, 0.3), 0 0 12px rgba(232, 168, 124, 0.3);
}
@media (max-width: 860px) {
.main-content {
padding: var(--sp-6);
}
}
@media (max-width: 720px) {
html,
body,
#app {
overflow: auto;
}
.layout {
flex-direction: column;
height: auto;
min-height: 100vh;
}
.main-content {
padding: var(--sp-5);
}
} }

86
packages/frontend/src/pages/Home.css
View File

@@ -5,22 +5,30 @@
height: 100vh; height: 100vh;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
isolation: isolate;
} }
.landing-bg { .landing-bg {
position: absolute; position: absolute;
inset: -6px; inset: -10px;
/* overflow slightly to hide blur edges */
background: url('/wallpaper.png') center / cover no-repeat; background: url('/wallpaper.png') center / cover no-repeat;
filter: blur(3px) brightness(0.35); filter: blur(5px) brightness(0.28) saturate(0.85);
z-index: 0; z-index: 0;
} }
.landing-layout::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(10, 8, 15, 0.34) 0%, rgba(10, 8, 15, 0.08) 32%, rgba(10, 8, 15, 0.28) 100%);
z-index: 0;
pointer-events: none;
}
.landing-layout .sidebar { .landing-layout .sidebar {
position: relative; position: relative;
z-index: 1; z-index: 1;
background: rgba(26, 29, 39, 0.85);
backdrop-filter: blur(8px);
} }
.landing-main { .landing-main {
@@ -33,41 +41,67 @@
text-align: center; text-align: center;
position: relative; position: relative;
z-index: 1; z-index: 1;
padding: 40px; padding: var(--sp-10);
} }
.landing-title { .landing-title {
font-size: 5rem; font-size: clamp(3.8rem, 9vw, 5.6rem);
font-weight: 800; font-weight: 300;
color: #fff; color: var(--text);
letter-spacing: -2px; letter-spacing: -0.03em;
line-height: 1; line-height: 1;
text-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
} }
.landing-tagline { .landing-tagline {
font-size: 1.4rem; max-width: 620px;
color: rgba(255, 255, 255, 0.6); font-size: clamp(1rem, 2vw, 1.3rem);
color: rgba(245, 240, 232, 0.7);
font-weight: 400; font-weight: 400;
line-height: 1.7;
} }
.btn-gradient { .btn-gradient {
padding: 16px 42px; padding: 14px 30px;
font-size: 1.20rem; font-size: 1rem;
font-weight: 700; font-weight: 600;
color: rgba(255, 255, 255, 0.9); color: #1a141f;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 244, 232, 0.14);
border-radius: 12px; border-radius: var(--radius);
cursor: pointer; cursor: pointer;
background: linear-gradient(135deg, rgba(113, 88, 226, 0.8), rgba(61, 59, 243, 0.8)); background:
backdrop-filter: blur(6px); linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 100%),
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.1); linear-gradient(135deg, rgba(232, 168, 124, 0.96), rgba(214, 149, 106, 0.94));
transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); backdrop-filter: blur(10px);
letter-spacing: 0.02em; box-shadow:
0 10px 30px rgba(232, 168, 124, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
letter-spacing: -0.01em;
} }
.btn-gradient:hover { .btn-gradient:hover {
transform: translateY(-2px); transform: translateY(-2px);
color: #fff; box-shadow:
background: linear-gradient(135deg, rgba(113, 88, 226, 0.95), rgba(41, 121, 255, 0.95)); 0 16px 38px rgba(232, 168, 124, 0.28),
box-shadow: 0 8px 24px rgba(113, 88, 226, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.2); inset 0 1px 0 rgba(255, 255, 255, 0.24);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.14), transparent 100%),
linear-gradient(135deg, rgba(232, 168, 124, 1), rgba(214, 149, 106, 0.98));
}
@media (max-width: 720px) {
.landing-layout {
flex-direction: column;
min-height: 100vh;
height: auto;
}
.landing-main {
min-height: 55vh;
padding: var(--sp-8) var(--sp-5);
}
} }

46
packages/frontend/src/pages/Recom.css
View File

@@ -19,11 +19,17 @@
/* ── Request Info Panel ─────────────────────────────────── */ /* ── Request Info Panel ─────────────────────────────────── */
.rec-info-panel { .rec-info-panel {
background: var(--bg-surface); background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 100%),
var(--bg-surface);
backdrop-filter: blur(18px) saturate(160%);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: var(--radius); border-radius: var(--radius-lg);
margin-bottom: 24px; margin-bottom: var(--sp-6);
overflow: hidden; overflow: hidden;
box-shadow:
0 12px 34px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
} }
.rec-info-toggle { .rec-info-toggle {
@@ -40,7 +46,7 @@
} }
.rec-info-toggle:hover { .rec-info-toggle:hover {
background: var(--bg-surface-2); background: rgba(255, 255, 255, 0.04);
} }
.rec-info-title { .rec-info-title {
@@ -74,16 +80,16 @@
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.08em;
color: var(--text-dim); color: var(--text-dim);
flex-shrink: 0; flex-shrink: 0;
width: 72px; width: 72px;
} }
.rec-info-value { .rec-info-value {
font-size: 13px; font-size: 14px;
color: var(--text-muted); color: var(--text-muted);
line-height: 1.5; line-height: 1.6;
} }
.rec-info-badge { .rec-info-badge {
@@ -91,7 +97,7 @@
font-weight: 600; font-weight: 600;
padding: 2px 8px; padding: 2px 8px;
border-radius: 100px; border-radius: 100px;
background: rgba(99, 102, 241, 0.15); background: rgba(232, 168, 124, 0.12);
color: var(--accent); color: var(--accent);
} }
@@ -130,8 +136,8 @@
} }
.rec-info-delete-row .btn-rerun:hover { .rec-info-delete-row .btn-rerun:hover {
background: var(--bg-surface-2); background: rgba(255, 255, 255, 0.08);
border-color: var(--text-dim); border-color: var(--border-strong);
color: var(--text); color: var(--text);
} }
@@ -147,3 +153,23 @@
.error-state p { .error-state p {
margin-bottom: 16px; margin-bottom: 16px;
} }
@media (max-width: 720px) {
.content-area {
max-width: 100%;
}
.rec-info-row {
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.rec-info-label {
width: auto;
}
.rec-info-delete-row {
gap: 10px;
}
}