diff --git a/app.js b/app.js index 29c2552..30c7378 100644 --- a/app.js +++ b/app.js @@ -1104,6 +1104,19 @@ function copyAffiliateCode() { .then(() => toast("Affiliate link copied!", "success")); } +function switchAccountTab(tab) { + // update tab buttons + document + .querySelectorAll(".acct-settings-tab") + .forEach((btn) => btn.classList.remove("active")); + document.getElementById(`acct-tab-${tab}`).classList.add("active"); + // show/hide panels + document + .querySelectorAll(".acct-tab-content") + .forEach((p) => (p.style.display = "none")); + document.getElementById(`acct-tabpanel-${tab}`).style.display = ""; +} + function closeUserPanel() { document.getElementById("account-backdrop").classList.remove("open"); const inp = document.getElementById("acct-pw-input"); diff --git a/index.html b/index.html index 6c39c85..5745639 100644 --- a/index.html +++ b/index.html @@ -824,136 +824,182 @@
-
-
Email
-
- — -
-
-
-
-
- -
- - -
-

- Min. 8 characters. -

-
-
-
-
-
- -
- - -
-
-
-
-
-
- Manage Subscriptions -
-
+ +
+ + +
+
+
Email
+
- Portal → - + — +
+
+
+
+
+ +
+ + +
+

+ Min. 8 characters. +

+
+
+
+
+
+ +
+ + +
+
+
+
+
+
+ Manage Subscriptions +
+
+ +
-
-
-
Affiliate Code
-
- - + + +
diff --git a/styles.css b/styles.css index fcc45ff..ec8acc1 100644 --- a/styles.css +++ b/styles.css @@ -1486,6 +1486,40 @@ body::after { padding: 18px 20px; } +.acct-settings-tabs { + display: flex; + gap: 0; + margin-bottom: 16px; + border-bottom: 1px solid var(--border); + padding-bottom: 8px; +} + +.acct-settings-tab { + flex: 1; + background: none; + border: none; + color: var(--text-muted); + font-family: inherit; + font-size: 12px; + padding: 6px 8px; + cursor: pointer; + transition: color 0.15s; + text-align: center; +} + +.acct-settings-tab:hover { + color: var(--text); +} + +.acct-settings-tab.active { + color: var(--accent); +} + +.acct-tab-content { + display: flex; + flex-direction: column; +} + .account-col-divider { width: 1px; background: var(--border);