Redesign service-mode controls and add per-profile wrong-lyric-line reports
This commit is contained in:
Claude
106
frontend/app.js
106
frontend/app.js
@@ -3306,7 +3306,8 @@ const Notes = (() => {
|
||||
// The sung line sits in the middle of the screen at the largest size that
|
||||
// still fits on ONE row (measured per line with a canvas), highlighted; its
|
||||
// neighbours shrink and fade with distance. Auto-scroll keeps it centred.
|
||||
const sv = { key: '', idx: -2, timer: null };
|
||||
const sv = { key: '', idx: -2, timer: null, flags: new Map(), flagsKey: '', flagMode: false, pressed: 0 };
|
||||
const flagsEnabled = () => data.settings.lyricFlags !== false && !!window.FlagUI;
|
||||
const serviceOn = () => isServiceModeOpen() && !!data.settings.serviceLyrics;
|
||||
const serviceAuto = () => data.settings.serviceLyricsAutoscroll !== false;
|
||||
const sungLines = () => lines().map((l, i) => ({ ...l, i })).filter((l) => l.kind === 'line');
|
||||
@@ -3324,13 +3325,18 @@ const Notes = (() => {
|
||||
function renderServiceButtons() {
|
||||
const on = !!data.settings.serviceLyrics;
|
||||
const lb = $('serviceLyricsBtn');
|
||||
lb.textContent = on ? '🎵 Lyrics on' : '🎵 Lyrics off';
|
||||
lb.classList.toggle('on', on);
|
||||
lb.setAttribute('aria-pressed', String(on));
|
||||
const fb = $('serviceFlagBtn');
|
||||
if (fb) {
|
||||
const show = on && flagsEnabled();
|
||||
fb.classList.toggle('hidden', !show);
|
||||
if (!show) sv.flagMode = false;
|
||||
fb.setAttribute('aria-pressed', String(sv.flagMode));
|
||||
$('serviceFlagHint').classList.toggle('hidden', !(show && sv.flagMode));
|
||||
$('serviceLyrics').classList.toggle('flagging', show && sv.flagMode);
|
||||
}
|
||||
const ab = $('serviceAutoscrollBtn');
|
||||
ab.classList.toggle('hidden', !on);
|
||||
ab.textContent = serviceAuto() ? '⇅ Auto-scroll on' : '⇅ Auto-scroll off';
|
||||
ab.classList.toggle('on', serviceAuto());
|
||||
ab.setAttribute('aria-pressed', String(serviceAuto()));
|
||||
}
|
||||
|
||||
@@ -3357,6 +3363,8 @@ const Notes = (() => {
|
||||
}
|
||||
list.innerHTML = items.map((l) =>
|
||||
`<div class="sl-line${l.t === null || l.t === undefined ? ' untimed' : ''}" data-i="${l.i}">${escapeHtml(l.text)}</div>`).join('');
|
||||
paintFlags();
|
||||
loadFlags();
|
||||
applyFits();
|
||||
tickService(now(), true);
|
||||
// One more fit once the view has settled (fonts, first layout).
|
||||
@@ -3364,6 +3372,42 @@ const Notes = (() => {
|
||||
sv.refit = setTimeout(() => { if (serviceOn()) applyFits(); }, 900);
|
||||
}
|
||||
|
||||
// ---- reporting wrong lines (per-profile setting: settings.lyricFlags) ----
|
||||
function paintFlags() {
|
||||
const list = $('serviceLyricsList');
|
||||
if (!list) return;
|
||||
list.querySelectorAll('.sl-line').forEach((el) => {
|
||||
const l = lines()[Number(el.dataset.i)];
|
||||
const f = flagsEnabled() && l ? sv.flags.get(l.text) : null;
|
||||
el.classList.toggle('flagged', !!f);
|
||||
el.classList.toggle('mine', !!(f && f.mine));
|
||||
if (f) el.dataset.n = f.count > 1 ? String(f.count) : ''; else delete el.dataset.n;
|
||||
});
|
||||
}
|
||||
async function loadFlags() {
|
||||
if (!flagsEnabled() || !st.videoId || !st.lyrics) return;
|
||||
const key = `${st.videoId}|${st.lyrics.rev}|${profileName()}`;
|
||||
if (key === sv.flagsKey) return;
|
||||
sv.flagsKey = key;
|
||||
const vid = st.videoId;
|
||||
const got = await FlagUI.list(vid, profileName());
|
||||
if (vid !== st.videoId) return; // moved on while the request was out
|
||||
sv.flags = new Map(got.map((f) => [f.text, f]));
|
||||
paintFlags();
|
||||
}
|
||||
async function openFlag(row) {
|
||||
const l = row && lines()[Number(row.dataset.i)];
|
||||
if (!l || !st.videoId) return;
|
||||
if (!requireProfile()) return;
|
||||
const vid = st.videoId;
|
||||
const res = await FlagUI.open({ videoId: vid, text: l.text, existing: sv.flags.get(l.text), profile: profileName() });
|
||||
if (!res) return;
|
||||
sv.flagsKey = ''; // force a refresh from the server (counts, ids)
|
||||
if (vid === st.videoId) await loadFlags();
|
||||
toast(res.action === 'withdrawn' ? 'Report withdrawn' : 'Thanks — reported ✓');
|
||||
if (res.action === 'saved') { sv.flagMode = false; renderServiceButtons(); }
|
||||
}
|
||||
|
||||
function centreOn(list, el) {
|
||||
const go = () => list.scrollTo({ top: Math.max(0, el.offsetTop - list.clientHeight / 2 + el.offsetHeight / 2), behavior: 'smooth' });
|
||||
go();
|
||||
@@ -3502,11 +3546,35 @@ const Notes = (() => {
|
||||
renderServiceButtons();
|
||||
if (serviceAuto()) tickService(now(), true);
|
||||
});
|
||||
$('serviceLyricsList').addEventListener('click', (e) => {
|
||||
const row = e.target.closest('.sl-line');
|
||||
const l = row && lines()[Number(row.dataset.i)];
|
||||
if (l && l.t !== null && l.t !== undefined) Player.seek(Math.max(0, l.t + offset()));
|
||||
$('serviceFlagBtn').addEventListener('click', () => {
|
||||
sv.flagMode = !sv.flagMode;
|
||||
renderServiceButtons();
|
||||
});
|
||||
{
|
||||
// Tap = seek (or report, in report mode). Holding a line reports it too, so
|
||||
// it works without switching modes.
|
||||
const list = $('serviceLyricsList');
|
||||
let timer = null, sx = 0, sy = 0;
|
||||
const cancel = () => { clearTimeout(timer); timer = null; };
|
||||
list.addEventListener('pointerdown', (e) => {
|
||||
if (!flagsEnabled() || !e.target.closest('.sl-line')) return;
|
||||
sx = e.clientX; sy = e.clientY;
|
||||
const row = e.target.closest('.sl-line');
|
||||
cancel();
|
||||
timer = setTimeout(() => { timer = null; sv.pressed = Date.now(); if (navigator.vibrate) navigator.vibrate(12); openFlag(row); }, 550);
|
||||
});
|
||||
list.addEventListener('pointermove', (e) => { if (timer && Math.hypot(e.clientX - sx, e.clientY - sy) > 8) cancel(); });
|
||||
['pointerup', 'pointercancel', 'pointerleave', 'scroll'].forEach((t) => list.addEventListener(t, cancel, { passive: true }));
|
||||
list.addEventListener('contextmenu', (e) => { if (flagsEnabled()) e.preventDefault(); });
|
||||
list.addEventListener('click', (e) => {
|
||||
if (Date.now() - sv.pressed < 700) return; // that was the long-press
|
||||
const row = e.target.closest('.sl-line');
|
||||
if (!row) return;
|
||||
if (sv.flagMode) { openFlag(row); return; }
|
||||
const l = lines()[Number(row.dataset.i)];
|
||||
if (l && l.t !== null && l.t !== undefined) Player.seek(Math.max(0, l.t + offset()));
|
||||
});
|
||||
}
|
||||
window.addEventListener('resize', () => { if (serviceOn()) renderService(); });
|
||||
// Sizes are measured with the web font; a measurement taken while it was
|
||||
// still loading used the narrower fallback, so re-fit once fonts land.
|
||||
@@ -3658,7 +3726,7 @@ const Notes = (() => {
|
||||
});
|
||||
|
||||
return {
|
||||
load, tick, addBookmark, addNote, handleSyncKey, serviceRefresh,
|
||||
load, tick, addBookmark, addNote, handleSyncKey, serviceRefresh, refreshFlags: () => { sv.flagsKey = ''; renderServiceButtons(); paintFlags(); loadFlags(); },
|
||||
stageLyrics: { render: renderStage, set: setStageLyrics, on: stageOn },
|
||||
};
|
||||
})();
|
||||
@@ -6732,7 +6800,7 @@ function updateWakeStateUI() {
|
||||
const el = $('serviceWakeState');
|
||||
if (!el) return;
|
||||
const isAwake = !!(serviceWakeLock && !serviceWakeLock.released);
|
||||
el.textContent = isAwake ? 'Screen will stay awake' : 'Screen may sleep';
|
||||
el.textContent = isAwake ? 'Screen stays awake' : 'Screen may sleep';
|
||||
el.classList.toggle('awake', isAwake);
|
||||
}
|
||||
|
||||
@@ -6752,6 +6820,8 @@ function updateServiceProgress(cur, dur) {
|
||||
const durEl = $('serviceDurTime');
|
||||
if (curEl) curEl.textContent = fmtTime(cur || 0);
|
||||
if (durEl) durEl.textContent = fmtTime(dur || 0);
|
||||
const fill = $('serviceProgressFill');
|
||||
if (fill) fill.style.width = (dur > 0 ? Math.min(100, Math.max(0, (cur || 0) / dur * 100)) : 0).toFixed(1) + '%';
|
||||
}
|
||||
|
||||
function updateServiceMode() {
|
||||
@@ -6830,9 +6900,7 @@ function updateServiceVideoUI() {
|
||||
applyServiceVideoLayout();
|
||||
const btn = $('serviceVideoBtn');
|
||||
if (btn) {
|
||||
btn.textContent = serviceVideoOn() ? '📺 Video on' : '📺 Video off';
|
||||
btn.setAttribute('aria-pressed', serviceVideoOn() ? 'true' : 'false');
|
||||
btn.classList.toggle('on', serviceVideoOn());
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7543,6 +7611,13 @@ async function renderSettings() {
|
||||
</span>
|
||||
<input id="setSaveBeforePlay" type="checkbox" ${data.settings.saveBeforePlay ? 'checked' : ''} />
|
||||
</label>
|
||||
<label class="set-row">
|
||||
<span>
|
||||
Report wrong lyric lines
|
||||
<small>Service mode → Lyrics shows a Report button, and holding a line reports it. Saved with your online profile, so it follows you between devices.</small>
|
||||
</span>
|
||||
<input id="setLyricFlags" type="checkbox" ${data.settings.lyricFlags !== false ? 'checked' : ''} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="set-group">
|
||||
@@ -7737,6 +7812,11 @@ async function renderSettings() {
|
||||
data.settings.saveBeforePlay = e.target.checked;
|
||||
persist();
|
||||
});
|
||||
$('setLyricFlags').addEventListener('change', (e) => {
|
||||
data.settings.lyricFlags = e.target.checked;
|
||||
persist();
|
||||
Notes.refreshFlags();
|
||||
});
|
||||
$('setAutoPreload').addEventListener('change', (e) => {
|
||||
data.settings.autoPreload = e.target.checked;
|
||||
persist();
|
||||
|
||||
120
frontend/flag-ui.js
Normal file
120
frontend/flag-ui.js
Normal file
@@ -0,0 +1,120 @@
|
||||
/* Report-a-wrong-lyric-line: API client + bottom sheet. No dependencies.
|
||||
* window.FlagUI.open({videoId, text, existing, profile}) -> Promise<result|null>
|
||||
* result = {action:'saved'|'withdrawn', id?, reason, note}
|
||||
* Descriptions are optional; a bare report is valid. */
|
||||
(function () {
|
||||
'use strict';
|
||||
const REASONS = [
|
||||
['words', 'Wrong words'], ['timing', 'Wrong timing'],
|
||||
['typo', 'Typo'], ['other', 'Other'],
|
||||
];
|
||||
const NOTE_MAX = 500;
|
||||
const esc = (s) => String(s).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
|
||||
const base = (id) => `/api/notes/${encodeURIComponent(id)}/flags`;
|
||||
const jpost = (url, body) => fetch(url, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
async function list(videoId, profile) {
|
||||
try {
|
||||
const r = await fetch(base(videoId), { headers: profile ? { 'X-Profile': profile } : {} });
|
||||
if (!r.ok) return [];
|
||||
const j = await r.json();
|
||||
return Array.isArray(j.flags) ? j.flags : [];
|
||||
} catch { return []; }
|
||||
}
|
||||
async function submit(videoId, profile, text, reason, note) {
|
||||
const r = await jpost(base(videoId), { profile, text, reason, note });
|
||||
const j = await r.json().catch(() => ({}));
|
||||
return { status: r.status, ...j };
|
||||
}
|
||||
async function withdraw(videoId, profile, id) {
|
||||
const r = await jpost(`${base(videoId)}/${id}/withdraw`, { profile });
|
||||
return r.ok;
|
||||
}
|
||||
|
||||
const ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>';
|
||||
|
||||
function open({ videoId, text, existing, profile }) {
|
||||
return new Promise((resolve) => {
|
||||
const mine = existing && existing.mine ? existing : null;
|
||||
const others = existing ? Math.max(0, (existing.count || 0) - (mine ? 1 : 0)) : 0;
|
||||
let reason = mine ? mine.reason || '' : '';
|
||||
const back = document.createElement('div');
|
||||
back.className = 'fs-backdrop';
|
||||
back.innerHTML = `
|
||||
<div class="fs-sheet" role="dialog" aria-modal="true" aria-label="Report a wrong line">
|
||||
<div class="fs-grab"></div>
|
||||
<div class="fs-title">
|
||||
<span class="fs-badge">${ICON}</span>
|
||||
<div><h2>${mine ? 'Your report' : 'Report this line'}</h2>
|
||||
<small>Helps whoever maintains the lyrics find mistakes</small></div>
|
||||
<button class="fs-x" type="button" aria-label="Close">✕</button>
|
||||
</div>
|
||||
<blockquote class="fs-quote">${esc(text)}</blockquote>
|
||||
${others ? `<div class="fs-notice info">${others} other ${others === 1 ? 'person has' : 'people have'} reported this line too.</div>` : ''}
|
||||
<div class="fs-label">What’s wrong? <em>optional</em></div>
|
||||
<div class="fs-chips">${REASONS.map(([k, l]) => `<button type="button" class="fs-chip" data-r="${k}" aria-pressed="${reason === k}">${l}</button>`).join('')}</div>
|
||||
<div class="fs-label">Describe it <em>optional</em></div>
|
||||
<textarea class="fs-note" maxlength="${NOTE_MAX}" placeholder="e.g. it should say “sound”, not “sownd”"></textarea>
|
||||
<div class="fs-count"><span class="fs-n">0</span>/${NOTE_MAX}</div>
|
||||
<div class="fs-err fs-notice err" hidden></div>
|
||||
<div class="fs-actions ${mine ? 'three' : ''}">
|
||||
<button type="button" class="fs-btn fs-cancel">Cancel</button>
|
||||
${mine ? '<button type="button" class="fs-btn danger fs-withdraw">Withdraw</button>' : ''}
|
||||
<button type="button" class="fs-btn primary fs-send">${mine ? 'Update report' : 'Send report'}</button>
|
||||
</div>
|
||||
</div>`;
|
||||
const $ = (s) => back.querySelector(s);
|
||||
const ta = $('.fs-note');
|
||||
ta.value = mine ? mine.note || '' : '';
|
||||
const count = () => { $('.fs-n').textContent = ta.value.length; };
|
||||
count();
|
||||
ta.addEventListener('input', count);
|
||||
const prevFocus = document.activeElement;
|
||||
let done = false;
|
||||
const close = (val) => {
|
||||
if (done) return;
|
||||
done = true;
|
||||
document.removeEventListener('keydown', onKey, true);
|
||||
back.classList.add('closing');
|
||||
setTimeout(() => { back.remove(); if (prevFocus && prevFocus.focus) try { prevFocus.focus(); } catch {} }, 190);
|
||||
resolve(val);
|
||||
};
|
||||
const onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); close(null); } };
|
||||
document.addEventListener('keydown', onKey, true);
|
||||
back.addEventListener('click', (e) => { if (e.target === back) close(null); });
|
||||
$('.fs-x').onclick = $('.fs-cancel').onclick = () => close(null);
|
||||
back.querySelectorAll('.fs-chip').forEach((b) => b.addEventListener('click', () => {
|
||||
reason = reason === b.dataset.r ? '' : b.dataset.r; // tap again to clear
|
||||
back.querySelectorAll('.fs-chip').forEach((c) => c.setAttribute('aria-pressed', String(c.dataset.r === reason)));
|
||||
}));
|
||||
const fail = (msg) => { const e = $('.fs-err'); e.textContent = msg; e.hidden = false; };
|
||||
const busy = (on) => back.querySelectorAll('.fs-btn').forEach((b) => { b.disabled = on; });
|
||||
$('.fs-send').onclick = async () => {
|
||||
busy(true);
|
||||
try {
|
||||
const r = await submit(videoId, profile, text, reason, ta.value.trim());
|
||||
if (r.ok) return close({ action: 'saved', id: r.id, reason, note: ta.value.trim() });
|
||||
busy(false);
|
||||
fail(r.stale ? 'This line was just changed — it may already be fixed.'
|
||||
: r.status === 401 ? 'Link an online profile to report lines.'
|
||||
: r.status === 429 ? 'Slow down a little — too many reports.' : (r.error || 'Could not send the report.'));
|
||||
} catch { busy(false); fail('You appear to be offline.'); }
|
||||
};
|
||||
const w = $('.fs-withdraw');
|
||||
if (w) w.onclick = async () => {
|
||||
busy(true);
|
||||
try {
|
||||
if (await withdraw(videoId, profile, mine.id)) return close({ action: 'withdrawn' });
|
||||
} catch {}
|
||||
busy(false); fail('Could not withdraw — try again.');
|
||||
};
|
||||
document.body.appendChild(back);
|
||||
setTimeout(() => ta.blur(), 0);
|
||||
$('.fs-send').focus();
|
||||
});
|
||||
}
|
||||
|
||||
window.FlagUI = { open, list, submit, withdraw, REASONS };
|
||||
})();
|
||||
@@ -21,6 +21,7 @@
|
||||
<link rel="preload" href="fonts/HankenGrotesk-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="fonts/fonts.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
<link rel="stylesheet" href="service-ui.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
@@ -358,16 +359,34 @@
|
||||
<nav id="sectionRail" class="sec-rail hidden" aria-label="Jump to a section"></nav>
|
||||
|
||||
<section id="serviceMode" class="service-mode hidden" aria-label="Service Mode">
|
||||
<div class="service-topbar">
|
||||
<div id="serviceWakeState" class="service-wake-state">Screen may sleep</div>
|
||||
<div class="service-topbar-actions">
|
||||
<button id="serviceAutoscrollBtn" class="service-exit-btn service-video-btn hidden" type="button"
|
||||
aria-pressed="true" aria-label="Keep the sung line centred">⇅ Auto-scroll on</button>
|
||||
<button id="serviceLyricsBtn" class="service-exit-btn service-video-btn" type="button"
|
||||
aria-pressed="false" aria-label="Show only the lyrics">🎵 Lyrics off</button>
|
||||
<button id="serviceVideoBtn" class="service-exit-btn service-video-btn" type="button"
|
||||
aria-pressed="false" aria-label="Show or hide the video">📺 Video off</button>
|
||||
<button id="serviceExitBtn" class="service-exit-btn" type="button" aria-label="Exit Service Mode">Exit</button>
|
||||
<div class="svc-top">
|
||||
<div class="svc-head">
|
||||
<div id="serviceWakeState" class="svc-wake" role="status">Screen may sleep</div>
|
||||
<button id="serviceExitBtn" class="svc-exit" type="button" aria-label="Exit Service Mode">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>Exit
|
||||
</button>
|
||||
</div>
|
||||
<div class="svc-dock" role="toolbar" aria-label="Service view">
|
||||
<button id="serviceLyricsBtn" class="svc-tile" type="button" aria-pressed="false" aria-label="Show only the lyrics">
|
||||
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/></svg>
|
||||
<span class="svc-label">Lyrics</span><i class="svc-led"></i>
|
||||
</button>
|
||||
<button id="serviceAutoscrollBtn" class="svc-tile hidden" type="button" aria-pressed="true" aria-label="Keep the sung line centred">
|
||||
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4v16M7 9l5-5 5 5M7 15l5 5 5-5"/></svg>
|
||||
<span class="svc-label">Auto-scroll</span><i class="svc-led"></i>
|
||||
</button>
|
||||
<button id="serviceFlagBtn" class="svc-tile svc-flag hidden" type="button" aria-pressed="false" aria-label="Report a wrong lyric line">
|
||||
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>
|
||||
<span class="svc-label">Report</span><i class="svc-led"></i>
|
||||
</button>
|
||||
<button id="serviceVideoBtn" class="svc-tile" type="button" aria-pressed="false" aria-label="Show or hide the video">
|
||||
<svg class="svc-ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="6" width="13" height="12" rx="2.5"/><path d="M16 10.5l5-3v9l-5-3"/></svg>
|
||||
<span class="svc-label">Video</span><i class="svc-led"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="serviceFlagHint" class="svc-hint hidden" role="status">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></svg>
|
||||
<span>Tap the line that’s wrong</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-center">
|
||||
@@ -383,6 +402,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-bottom">
|
||||
<div class="svc-progress" aria-hidden="true"><i id="serviceProgressFill"></i></div>
|
||||
<div id="serviceTime" class="service-time">
|
||||
<span id="serviceCurTime">0:00</span> / <span id="serviceDurTime">0:00</span>
|
||||
</div>
|
||||
@@ -561,6 +581,7 @@
|
||||
<script src="opfs.js"></script>
|
||||
<script src="video-edit.js"></script>
|
||||
<script src="lyrics-core.js"></script>
|
||||
<script src="flag-ui.js"></script>
|
||||
<script src="stats-core.js"></script>
|
||||
<script src="sha256.js"></script>
|
||||
<script src="device-db.js"></script>
|
||||
|
||||
407
frontend/service-ui.css
Normal file
407
frontend/service-ui.css
Normal file
@@ -0,0 +1,407 @@
|
||||
/* ============================================================================
|
||||
* Service mode — controls, report sheet, flagged lines
|
||||
*
|
||||
* Kept in its own file so the same rules drive the app and the design preview.
|
||||
* Everything here is scoped under .service-mode / .svc-* / .fs-* so it cannot
|
||||
* leak into the rest of the app. Tokens (--accent, --ui, --display, --mono, …)
|
||||
* come from styles.css; each has a fallback so this file also stands alone.
|
||||
* ========================================================================== */
|
||||
|
||||
.service-mode, .fs-backdrop {
|
||||
--svc-ink: var(--text, #f5f3f0);
|
||||
--svc-ink-2: var(--text-2, #b6b5bf);
|
||||
--svc-ink-3: var(--text-dim, #76757f);
|
||||
--svc-accent: var(--accent, #ff4b32);
|
||||
--svc-accent-hi: var(--accent-bright, #ff6a52);
|
||||
--svc-accent-lo: var(--accent-deep, #d4321d);
|
||||
--svc-glow: var(--accent-glow, rgba(255, 75, 50, 0.45));
|
||||
--svc-amber: #ffb454;
|
||||
--svc-amber-glow: rgba(255, 180, 84, 0.42);
|
||||
--svc-ok: #34d399;
|
||||
}
|
||||
|
||||
/* ---- top stack: status + exit, then the dock ---------------------------- */
|
||||
.svc-top {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.svc-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.svc-wake {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 34px;
|
||||
padding: 0 14px 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--svc-ink-3);
|
||||
font: 600 12.5px/1 var(--ui, system-ui, sans-serif);
|
||||
letter-spacing: 0.02em;
|
||||
transition: color 0.25s, background 0.25s, border-color 0.25s;
|
||||
}
|
||||
.svc-wake::before {
|
||||
content: "";
|
||||
width: 8px; height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
transition: background 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
.svc-wake.awake {
|
||||
color: #8ff0c4;
|
||||
border-color: rgba(52, 211, 153, 0.28);
|
||||
background: rgba(52, 211, 153, 0.08);
|
||||
}
|
||||
.svc-wake.awake::before {
|
||||
background: var(--svc-ok);
|
||||
box-shadow: 0 0 10px rgba(52, 211, 153, 0.75);
|
||||
}
|
||||
|
||||
.svc-exit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
height: 34px;
|
||||
padding: 0 15px 0 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--svc-ink);
|
||||
font: 700 13px/1 var(--ui, system-ui, sans-serif);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
transition: background 0.16s, border-color 0.16s, transform 0.16s;
|
||||
}
|
||||
.svc-exit svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; }
|
||||
.svc-exit:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.22); }
|
||||
.svc-exit:active { transform: scale(0.95); }
|
||||
|
||||
/* ---- the dock: equal-width tiles, whatever number are showing ------------ */
|
||||
.svc-dock {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: minmax(0, 1fr);
|
||||
gap: 6px;
|
||||
padding: 6px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
|
||||
rgba(14, 14, 18, 0.72);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(140%);
|
||||
backdrop-filter: blur(16px) saturate(140%);
|
||||
box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.svc-tile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 7px;
|
||||
min-height: 72px;
|
||||
padding: 12px 4px 11px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid transparent;
|
||||
background: transparent;
|
||||
color: var(--svc-ink-2);
|
||||
font: 650 11.5px/1.1 var(--ui, system-ui, sans-serif);
|
||||
letter-spacing: 0.015em;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: color 0.2s, background 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.14s;
|
||||
animation: svc-pop 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
|
||||
}
|
||||
.svc-tile .svc-ico {
|
||||
width: 23px; height: 23px;
|
||||
fill: none; stroke: currentColor;
|
||||
stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
|
||||
transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3);
|
||||
}
|
||||
.svc-led {
|
||||
position: absolute;
|
||||
top: 9px; right: 10px;
|
||||
width: 6px; height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
transition: background 0.25s, box-shadow 0.25s;
|
||||
}
|
||||
.svc-tile:hover { color: var(--svc-ink); background: rgba(255, 255, 255, 0.05); }
|
||||
.svc-tile:active { transform: scale(0.95); }
|
||||
|
||||
.svc-tile[aria-pressed="true"] {
|
||||
color: #fff;
|
||||
border-color: color-mix(in srgb, var(--svc-accent) 55%, transparent);
|
||||
background: linear-gradient(165deg,
|
||||
color-mix(in srgb, var(--svc-accent) 38%, transparent),
|
||||
color-mix(in srgb, var(--svc-accent) 12%, transparent));
|
||||
box-shadow: 0 10px 24px -12px var(--svc-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
.svc-tile[aria-pressed="true"] .svc-ico { transform: translateY(-1px) scale(1.06); }
|
||||
.svc-tile[aria-pressed="true"] .svc-led {
|
||||
background: var(--svc-accent-hi);
|
||||
box-shadow: 0 0 9px var(--svc-glow);
|
||||
}
|
||||
|
||||
/* Report mode reads differently from the other toggles: amber, not red. */
|
||||
.svc-tile.svc-flag[aria-pressed="true"] {
|
||||
border-color: rgba(255, 180, 84, 0.6);
|
||||
background: linear-gradient(165deg, rgba(255, 180, 84, 0.34), rgba(255, 180, 84, 0.1));
|
||||
box-shadow: 0 10px 24px -12px var(--svc-amber-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
|
||||
}
|
||||
.svc-tile.svc-flag[aria-pressed="true"] .svc-led { background: var(--svc-amber); box-shadow: 0 0 9px var(--svc-amber-glow); }
|
||||
|
||||
@keyframes svc-pop {
|
||||
from { opacity: 0; transform: scale(0.86); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
.svc-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 9px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px dashed rgba(255, 180, 84, 0.5);
|
||||
background: rgba(255, 180, 84, 0.08);
|
||||
color: #ffd493;
|
||||
font: 600 13px/1.3 var(--ui, system-ui, sans-serif);
|
||||
text-align: center;
|
||||
animation: svc-pop 0.25s ease both;
|
||||
}
|
||||
.svc-hint svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||||
|
||||
/* ---- progress + time --------------------------------------------------- */
|
||||
.svc-progress {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.svc-progress > i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-radius: inherit;
|
||||
background: linear-gradient(90deg, var(--svc-accent-lo), var(--svc-accent-hi));
|
||||
box-shadow: 0 0 14px var(--svc-glow);
|
||||
transition: width 0.4s linear;
|
||||
}
|
||||
|
||||
/* ---- lyric lines: report mode, badges ---------------------------------- */
|
||||
.service-lyrics .sl-line { position: relative; -webkit-touch-callout: none; }
|
||||
.service-lyrics .sl-list { touch-action: pan-y; }
|
||||
|
||||
.service-lyrics.flagging .sl-line {
|
||||
cursor: crosshair;
|
||||
outline: 1.5px dashed rgba(255, 180, 84, 0.42);
|
||||
outline-offset: -3px;
|
||||
}
|
||||
.service-lyrics.flagging .sl-line:active {
|
||||
background: rgba(255, 180, 84, 0.18);
|
||||
}
|
||||
.service-lyrics.flagging .sl-line.untimed { cursor: crosshair; }
|
||||
|
||||
/* A line somebody has reported. Solid = you reported it; hollow = others did. */
|
||||
.sl-line.flagged::after {
|
||||
content: "⚑" attr(data-n);
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font: 700 12px/1 var(--ui, system-ui, sans-serif);
|
||||
letter-spacing: 0;
|
||||
color: var(--svc-amber);
|
||||
padding: 5px 7px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 180, 84, 0.5);
|
||||
background: rgba(20, 16, 8, 0.55);
|
||||
opacity: 0.85;
|
||||
pointer-events: none;
|
||||
}
|
||||
.sl-line.flagged.mine::after {
|
||||
color: #1a1206;
|
||||
background: var(--svc-amber);
|
||||
border-color: var(--svc-amber);
|
||||
box-shadow: 0 0 12px var(--svc-amber-glow);
|
||||
}
|
||||
|
||||
/* ---- the report sheet ------------------------------------------------------ */
|
||||
.fs-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 450;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
background: rgba(3, 3, 6, 0.62);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(6px);
|
||||
animation: fs-fade 0.2s ease both;
|
||||
}
|
||||
.fs-backdrop.closing { animation: fs-fade 0.18s ease reverse both; }
|
||||
.fs-backdrop.closing .fs-sheet { animation: fs-down 0.2s ease both; }
|
||||
|
||||
.fs-sheet {
|
||||
width: 100%;
|
||||
max-width: 560px;
|
||||
max-height: 92dvh;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 18px calc(env(safe-area-inset-bottom, 0px) + 18px);
|
||||
border-radius: 28px 28px 0 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 0;
|
||||
background:
|
||||
radial-gradient(120% 60% at 50% -10%, rgba(255, 180, 84, 0.13), transparent 60%),
|
||||
#131318;
|
||||
color: var(--svc-ink);
|
||||
font-family: var(--ui, system-ui, sans-serif);
|
||||
box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.9);
|
||||
animation: fs-up 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
|
||||
}
|
||||
@media (min-width: 700px) {
|
||||
.fs-backdrop { align-items: center; }
|
||||
.fs-sheet { border-radius: 26px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 22px; }
|
||||
}
|
||||
.fs-grab { width: 42px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.2); margin: 0 auto 14px; }
|
||||
|
||||
.fs-title { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
|
||||
.fs-title .fs-badge {
|
||||
width: 38px; height: 38px; flex: none;
|
||||
display: grid; place-items: center;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 180, 84, 0.16);
|
||||
color: var(--svc-amber);
|
||||
}
|
||||
.fs-badge svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.fs-title h2 { margin: 0; font: 800 19px/1.15 var(--display, var(--ui, system-ui)); letter-spacing: -0.01em; }
|
||||
.fs-title small { display: block; margin-top: 2px; font: 500 12.5px/1.3 var(--ui, system-ui); color: var(--svc-ink-3); }
|
||||
.fs-x {
|
||||
margin-left: auto; width: 36px; height: 36px; flex: none;
|
||||
border-radius: 50%; border: 0;
|
||||
background: rgba(255, 255, 255, 0.07); color: var(--svc-ink-2);
|
||||
font-size: 18px; line-height: 1; cursor: pointer;
|
||||
}
|
||||
.fs-x:hover { background: rgba(255, 255, 255, 0.13); }
|
||||
|
||||
.fs-quote {
|
||||
margin: 0 0 16px;
|
||||
padding: 14px 16px 14px 18px;
|
||||
border-radius: 16px;
|
||||
border-left: 4px solid var(--svc-amber);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
font: 800 clamp(20px, 5.2vw, 26px)/1.25 var(--display, var(--ui, system-ui));
|
||||
letter-spacing: -0.01em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.fs-notice {
|
||||
margin: 0 0 14px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 12px;
|
||||
font: 500 13px/1.4 var(--ui, system-ui);
|
||||
color: #ffd493;
|
||||
background: rgba(255, 180, 84, 0.1);
|
||||
border: 1px solid rgba(255, 180, 84, 0.28);
|
||||
}
|
||||
.fs-notice.info { color: var(--svc-ink-2); background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
|
||||
.fs-notice.err { color: #ffb3a8; background: rgba(255, 75, 50, 0.1); border-color: rgba(255, 75, 50, 0.35); }
|
||||
|
||||
.fs-label { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 8px; font: 700 12px/1 var(--ui, system-ui); letter-spacing: 0.08em; text-transform: uppercase; color: var(--svc-ink-3); }
|
||||
.fs-label em { font-style: normal; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
|
||||
|
||||
.fs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
|
||||
.fs-chip {
|
||||
height: 38px; padding: 0 15px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
color: var(--svc-ink-2);
|
||||
font: 600 13.5px/1 var(--ui, system-ui);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
|
||||
}
|
||||
.fs-chip:active { transform: scale(0.95); }
|
||||
.fs-chip[aria-pressed="true"] {
|
||||
color: #1a1206;
|
||||
background: var(--svc-amber);
|
||||
border-color: var(--svc-amber);
|
||||
}
|
||||
|
||||
.fs-note {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 92px;
|
||||
box-sizing: border-box;
|
||||
resize: vertical;
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: var(--svc-ink);
|
||||
font: 500 16px/1.4 var(--ui, system-ui); /* 16px: iOS zooms inputs below it */
|
||||
}
|
||||
.fs-note::placeholder { color: var(--svc-ink-3); }
|
||||
.fs-note:focus { outline: 2px solid rgba(255, 180, 84, 0.55); outline-offset: 1px; border-color: transparent; }
|
||||
.fs-count { margin: 6px 4px 0; text-align: right; font: 500 11.5px/1 var(--mono, ui-monospace, monospace); color: var(--svc-ink-3); }
|
||||
|
||||
.fs-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; margin-top: 16px; }
|
||||
.fs-actions.three { grid-template-columns: 1fr 1fr 1.6fr; }
|
||||
.fs-btn {
|
||||
height: 52px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--svc-ink);
|
||||
font: 700 15px/1 var(--ui, system-ui);
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
transition: transform 0.12s, filter 0.15s, opacity 0.15s;
|
||||
}
|
||||
.fs-btn:active { transform: scale(0.97); }
|
||||
.fs-btn.danger { color: #ff9a8b; border-color: rgba(255, 75, 50, 0.35); background: rgba(255, 75, 50, 0.08); }
|
||||
.fs-btn.primary {
|
||||
border: 0;
|
||||
color: #1a1206;
|
||||
background: linear-gradient(160deg, #ffc978, #ffa62e);
|
||||
box-shadow: 0 12px 26px -10px var(--svc-amber-glow), inset 0 1px 0 rgba(255, 255, 255, 0.45);
|
||||
}
|
||||
.fs-btn[disabled] { opacity: 0.45; pointer-events: none; }
|
||||
|
||||
@keyframes fs-fade { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes fs-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
|
||||
@keyframes fs-down { from { transform: none; opacity: 1; } to { transform: translateY(40px); opacity: 0; } }
|
||||
|
||||
/* ---- narrow phones ------------------------------------------------------ */
|
||||
@media (max-width: 380px) {
|
||||
.svc-tile { min-height: 66px; font-size: 11px; }
|
||||
.svc-tile .svc-ico { width: 21px; height: 21px; }
|
||||
}
|
||||
@media (max-height: 520px) {
|
||||
/* Landscape phone: keep the dock but flatten the tiles into icon + label rows. */
|
||||
.svc-tile { flex-direction: row; min-height: 44px; gap: 8px; padding: 8px 10px; }
|
||||
.svc-led { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.svc-tile, .svc-hint, .fs-backdrop, .fs-sheet { animation: none !important; }
|
||||
.svc-tile, .svc-tile .svc-ico, .svc-progress > i { transition: none !important; }
|
||||
}
|
||||
@@ -2719,57 +2719,7 @@ input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.service-topbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.service-wake-state {
|
||||
font-family: var(--ui);
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
letter-spacing: 0.01em;
|
||||
transition: color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.service-wake-state::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--line);
|
||||
transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.service-wake-state.awake {
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
.service-wake-state.awake::before {
|
||||
background: #34d399;
|
||||
box-shadow: 0 0 10px rgba(52, 211, 153, 0.6);
|
||||
}
|
||||
|
||||
.service-topbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Toggle reads as pressed when the video panel is on. */
|
||||
.service-video-btn.on {
|
||||
border-color: var(--accent);
|
||||
color: var(--text);
|
||||
}
|
||||
/* Top bar, view toggles and the exit button live in service-ui.css. */
|
||||
|
||||
/* Video panel on: the overlay is moved into the player pane (see
|
||||
applyServiceVideoLayout) and rendered inline beneath the stage, so the video
|
||||
@@ -2817,34 +2767,6 @@ body.service-video .service-bottom {
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
|
||||
.service-exit-btn {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text);
|
||||
padding: 9px 18px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--ui);
|
||||
font-size: 13.5px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 40px;
|
||||
touch-action: manipulation;
|
||||
transition: all 0.16s var(--ease);
|
||||
}
|
||||
|
||||
.service-exit-btn:hover {
|
||||
background: var(--bg-2);
|
||||
border-color: var(--accent);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.service-exit-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.service-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -56,6 +56,8 @@ const SHELL = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/styles.css',
|
||||
'/service-ui.css',
|
||||
'/flag-ui.js',
|
||||
'/async-guard.js',
|
||||
'/sw-update.js',
|
||||
'/fingerprint.js',
|
||||
|
||||
Reference in New Issue
Block a user