diff --git a/static/app.js b/static/app.js index 5f505b5..58731e3 100644 --- a/static/app.js +++ b/static/app.js @@ -230,8 +230,14 @@ function showPlayOverlay(v) { lo.style.display = ""; lo.onclick = async () => { await fetch(BASE + "logout", {method: "POST"}); location.href = BASE + "login"; }; + const mb = document.getElementById("menubox"); + mb.style.display = ""; + document.getElementById("menu").onclick = e => { + e.stopPropagation(); mb.classList.toggle("open"); + }; + document.addEventListener("click", () => mb.classList.remove("open")); const da = document.getElementById("delacct"); - da.style.display = ""; da.onclick = async () => { + da.onclick = async () => { if (!confirm("Delete your account and watch history?")) return; await fetch(BASE + "account/delete", {method: "POST"}); location.href = BASE + "login"; }; diff --git a/static/index.html b/static/index.html index c50a2bb..b017b3b 100644 --- a/static/index.html +++ b/static/index.html @@ -14,7 +14,12 @@ - +

Search for an anime to get started.

diff --git a/static/style.css b/static/style.css index 34f9282..ee57931 100644 --- a/static/style.css +++ b/static/style.css @@ -9,6 +9,12 @@ header form { flex: 1; max-width: 420px; } button.tiny { padding: .2rem .55rem; font-size: .8rem; border-radius: 6px; border: 1px solid var(--bd); background: var(--card); color: var(--fg); cursor: pointer; } button.tiny.danger { border-color: #7f1d1d; color: #f87171; } +#menubox { position: relative; } +#menu-items { display: none; position: absolute; right: 0; top: calc(100% + 4px); + background: var(--card); border: 1px solid var(--bd); border-radius: 8px; + padding: .35rem; min-width: 160px; z-index: 2; } +#menubox.open #menu-items { display: block; } +#menu-items button { display: block; width: 100%; text-align: left; margin-top: .15rem; } header #me { margin-left: auto; } #q { width: 100%; padding: 0.5rem 0.8rem; border-radius: 8px; border: 1px solid var(--bd); background: var(--card); color: var(--fg); }