diff --git a/frontend/profile.html b/frontend/profile.html index 0ec236c..4985064 100644 --- a/frontend/profile.html +++ b/frontend/profile.html @@ -171,6 +171,55 @@ .p-pane.active { display: flex; } #tab-achievements { overflow-y: auto; padding-right: 4px; } #tab-bookmarks { overflow-y: auto; padding-right: 4px; } + #tab-prefs { overflow-y: auto; padding-right: 4px; } + + /* ── Prefs (settings) tab ── */ + .pref-row { + display: flex; align-items: center; justify-content: space-between; + padding: 10px 0; border-bottom: 1px solid rgba(15,23,42,0.06); + } + .pref-row:last-child { border-bottom: none; padding-bottom: 0; } + .pref-row-info { display: flex; flex-direction: column; gap: 2px; } + .pref-row-label { + font-size: 0.83rem; font-weight: 600; color: var(--text); + } + .pref-row-desc { font-size: 0.72rem; color: var(--text-3); } + .pref-toggle { + position: relative; width: 38px; height: 22px; flex-shrink: 0; + } + .pref-toggle input { opacity: 0; width: 0; height: 0; } + .pref-toggle-track { + position: absolute; inset: 0; border-radius: 999px; + background: rgba(15,23,42,0.12); cursor: pointer; transition: background .2s; + } + .pref-toggle-track::after { + content: ''; position: absolute; left: 3px; top: 50%; + transform: translateY(-50%); width: 16px; height: 16px; + border-radius: 50%; background: #fff; + box-shadow: 0 1px 3px rgba(15,23,42,0.2); transition: left .2s; + } + .pref-toggle input:checked + .pref-toggle-track { background: var(--violet); } + .pref-toggle input:checked + .pref-toggle-track::after { left: calc(100% - 19px); } + .pref-volume-wrap { + display: flex; align-items: center; gap: 10px; min-width: 160px; + } + .pref-volume-wrap input[type=range] { + flex: 1; accent-color: var(--violet); cursor: pointer; + } + .pref-volume-val { + font-size: 0.78rem; font-weight: 700; color: var(--violet); + min-width: 32px; text-align: right; + } + .pref-test-btn { + padding: 5px 14px; border-radius: 8px; border: 1.5px solid rgba(155,93,229,0.3); + background: rgba(155,93,229,0.06); font-size: 0.76rem; font-weight: 600; + color: var(--violet); cursor: pointer; transition: all .15s; white-space: nowrap; + } + .pref-test-btn:hover { background: rgba(155,93,229,0.12); border-color: var(--violet); } + .pref-section-label { + font-size: 0.65rem; font-weight: 800; text-transform: uppercase; + letter-spacing: 0.08em; color: var(--text-3); margin: 4px 0 8px; + } /* ── Cards ── */ .p-card { @@ -613,6 +662,7 @@ + @@ -760,6 +810,148 @@ + +