diff --git a/wwwroot/app.js b/wwwroot/app.js index 94e62ed..60491bd 100644 --- a/wwwroot/app.js +++ b/wwwroot/app.js @@ -170,6 +170,11 @@ function setupHandlers() { adminClose.addEventListener("click", () => togglePanel(false)); } + const helpChip = $("help-chip"); + if (helpChip) { + helpChip.addEventListener("click", () => openFaqModal()); + } + const resultsToggle = $("results-open"); if (resultsToggle) { resultsToggle.addEventListener("change", async (e) => { @@ -378,3 +383,97 @@ function bindNavButtons() { }); } } + +function faqTree() { + return [ + { + title: t("help.cat.gettingStarted"), + items: [ + { q: t("help.q.join"), a: t("help.a.join") }, + { q: t("help.q.adminKey"), a: t("help.a.adminKey") }, + ], + }, + { + title: t("help.cat.suggest"), + items: [ + { q: t("help.q.limit"), a: t("help.a.limit") }, + { q: t("help.q.editNames"), a: t("help.a.editNames") }, + { q: t("help.q.mediaRules"), a: t("help.a.mediaRules") }, + ], + }, + { + title: t("help.cat.vote"), + items: [ + { q: t("help.q.howVote"), a: t("help.a.howVote") }, + { q: t("help.q.finalize"), a: t("help.a.finalize") }, + { q: t("help.q.linkedVotes"), a: t("help.a.linkedVotes") }, + ], + }, + { + title: t("help.cat.results"), + items: [ + { q: t("help.q.resultsLocked"), a: t("help.a.resultsLocked") }, + { q: t("help.q.resultsContent"), a: t("help.a.resultsContent") }, + ], + }, + { + title: t("help.cat.admin"), + items: [ + { q: t("help.q.openResults"), a: t("help.a.openResults") }, + { q: t("help.q.linkDuplicates"), a: t("help.a.linkDuplicates") }, + { q: t("help.q.grantJoker"), a: t("help.a.grantJoker") }, + { q: t("help.q.reset"), a: t("help.a.reset") }, + ], + }, + ]; +} + +function openFaqModal() { + const overlay = document.createElement("div"); + overlay.className = "edit-modal"; + const panel = document.createElement("div"); + panel.className = "edit-panel faq-panel"; + panel.innerHTML = ` +
+

${t("help.title")}

+ +
+
+

${t("help.intro")}

+
+
+ `; + + const list = panel.querySelector(".faq-list"); + faqTree().forEach((section) => { + const sec = document.createElement("details"); + sec.className = "faq-section"; + const summary = document.createElement("summary"); + summary.textContent = section.title; + sec.appendChild(summary); + + const itemsWrap = document.createElement("div"); + itemsWrap.className = "faq-items"; + section.items.forEach((item) => { + const qd = document.createElement("details"); + qd.className = "faq-item"; + const qs = document.createElement("summary"); + qs.textContent = item.q; + const ans = document.createElement("p"); + ans.textContent = item.a; + qd.append(qs, ans); + itemsWrap.appendChild(qd); + }); + + sec.appendChild(itemsWrap); + list.appendChild(sec); + }); + + const close = () => overlay.remove(); + overlay.addEventListener("click", (e) => { + if (e.target.classList.contains("edit-modal") || e.target.classList.contains("lightbox-close")) close(); + }); + + overlay.appendChild(panel); + document.body.appendChild(overlay); +} diff --git a/wwwroot/css/components.css b/wwwroot/css/components.css index 56513d1..d69b1bc 100644 --- a/wwwroot/css/components.css +++ b/wwwroot/css/components.css @@ -114,6 +114,16 @@ button .chip { border-color: #a83a35; } +.help-chip { + background: #dff3ff; + border-color: #b6ddff; + color: #0f3a6f; + font-weight: 700; +} +.help-chip:hover { + background: #cde8ff; +} + .nav-btn { min-width: 64px; font-weight: 700; diff --git a/wwwroot/css/modals.css b/wwwroot/css/modals.css index da049d8..264dfc1 100644 --- a/wwwroot/css/modals.css +++ b/wwwroot/css/modals.css @@ -76,3 +76,41 @@ .preview-card { pointer-events: none; } + +.faq-panel .faq-list { + display: flex; + flex-direction: column; + gap: 8px; +} +.faq-intro { + margin-top: 0; + margin-bottom: 12px; + color: #5b4a32; +} +.faq-section { + border: 1px solid #e3d4bd; + border-radius: 10px; + padding: 8px 10px; + background: #fff7ec; +} +.faq-section > summary { + font-weight: 700; + cursor: pointer; +} +.faq-items { + display: flex; + flex-direction: column; + gap: 6px; + padding-top: 6px; + margin-left: 6px; +} +.faq-item { + border: 1px solid #eedec3; + border-radius: 8px; + padding: 6px 8px; + background: #ffffff; +} +.faq-item > summary { + font-weight: 600; + cursor: pointer; +} diff --git a/wwwroot/index.html b/wwwroot/index.html index fb9f118..15927df 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -76,6 +76,7 @@ —
+