From 70549554ad7f4abdd8e68fe1bcc0a5b5964e79a3 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Mon, 22 Jun 2026 17:41:45 -0300
Subject: [PATCH] affiliate area

---
 app.js     |  13 +++
 index.html | 298 +++++++++++++++++++++++++++++++----------------------
 styles.css |  34 ++++++
 3 files changed, 219 insertions(+), 126 deletions(-)

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 @@
                 <div class="account-modal-body">
                     <!-- ── Left: settings ───────────────────────── -->
                     <div class="account-col account-col--settings">
-                        <div class="acct-section">
-                            <div class="acct-field-label">Email</div>
-                            <div class="acct-field-val" id="acct-email-display">
-                                —
-                            </div>
-                        </div>
-                        <div class="acct-divider"></div>
-                        <div class="acct-section">
-                            <div class="form-group">
-                                <label>Change Password</label>
-                                <div class="pw-input-wrap">
-                                    <input
-                                        type="password"
-                                        id="acct-pw-input"
-                                        placeholder="New password"
-                                        autocomplete="new-password"
-                                        oninput="
-                                            toggleAccountPwSave(this.value)
-                                        "
-                                        onkeydown="
-                                            if (event.key === 'Enter')
-                                                saveAccountPassword();
-                                        "
-                                    />
-                                    <button
-                                        type="button"
-                                        id="acct-pw-save-btn"
-                                        class="pw-save-btn"
-                                        onclick="saveAccountPassword()"
-                                        title="Save password"
-                                        style="display: none"
-                                    >
-                                        <svg
-                                            width="14"
-                                            height="14"
-                                            viewBox="0 0 24 24"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            stroke-width="2.5"
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                        >
-                                            <polyline points="20 6 9 17 4 12" />
-                                        </svg>
-                                    </button>
-                                </div>
-                                <p class="ssh-hint" style="margin-bottom: 0">
-                                    Min. 8 characters.
-                                </p>
-                            </div>
-                        </div>
-                        <div class="acct-divider"></div>
-                        <div class="acct-section">
-                            <div class="form-group">
-                                <label>Invoice Email</label>
-                                <div class="pw-input-wrap">
-                                    <input
-                                        type="email"
-                                        id="invoice-email-input"
-                                        placeholder="invoices@example.com"
-                                        autocomplete="email"
-                                        oninput="
-                                            toggleInvoiceEmailSave(this.value)
-                                        "
-                                        onkeydown="
-                                            if (event.key === 'Enter')
-                                                saveInvoiceEmail();
-                                        "
-                                    />
-                                    <button
-                                        type="button"
-                                        id="invoice-email-save-btn"
-                                        class="pw-save-btn"
-                                        onclick="saveInvoiceEmail()"
-                                        title="Save invoice email"
-                                        style="display: none"
-                                    >
-                                        <svg
-                                            width="14"
-                                            height="14"
-                                            viewBox="0 0 24 24"
-                                            fill="none"
-                                            stroke="currentColor"
-                                            stroke-width="2.5"
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                        >
-                                            <polyline points="20 6 9 17 4 12" />
-                                        </svg>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="acct-divider"></div>
-                        <div class="acct-section">
-                            <div class="acct-field-label">
-                                Manage Subscriptions
-                            </div>
-                            <div
-                                class="acct-affiliate-row"
-                                style="justify-content: flex-end"
+                        <div class="acct-settings-tabs">
+                            <button
+                                type="button"
+                                class="acct-settings-tab active"
+                                id="acct-tab-content"
+                                onclick="switchAccountTab('content')"
                             >
-                                <button
-                                    type="button"
-                                    id="portal-btn"
-                                    class="btn btn-ghost btn-sm"
-                                    onclick="openBillingPortal()"
+                                Content
+                            </button>
+                            <button
+                                type="button"
+                                class="acct-settings-tab"
+                                id="acct-tab-affiliate"
+                                onclick="switchAccountTab('affiliate')"
+                            >
+                                Affiliate Settings
+                            </button>
+                        </div>
+
+                        <!-- ── Content tab ─────────────────────── -->
+                        <div
+                            id="acct-tabpanel-content"
+                            class="acct-tab-content"
+                        >
+                            <div class="acct-section">
+                                <div class="acct-field-label">Email</div>
+                                <div
+                                    class="acct-field-val"
+                                    id="acct-email-display"
                                 >
-                                    Portal &rarr;
-                                </button>
+                                    —
+                                </div>
+                            </div>
+                            <div class="acct-divider"></div>
+                            <div class="acct-section">
+                                <div class="form-group">
+                                    <label>Change Password</label>
+                                    <div class="pw-input-wrap">
+                                        <input
+                                            type="password"
+                                            id="acct-pw-input"
+                                            placeholder="New password"
+                                            autocomplete="new-password"
+                                            oninput="
+                                                toggleAccountPwSave(this.value)
+                                            "
+                                            onkeydown="
+                                                if (event.key === 'Enter')
+                                                    saveAccountPassword();
+                                            "
+                                        />
+                                        <button
+                                            type="button"
+                                            id="acct-pw-save-btn"
+                                            class="pw-save-btn"
+                                            onclick="saveAccountPassword()"
+                                            title="Save password"
+                                            style="display: none"
+                                        >
+                                            <svg
+                                                width="14"
+                                                height="14"
+                                                viewBox="0 0 24 24"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                stroke-width="2.5"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            >
+                                                <polyline
+                                                    points="20 6 9 17 4 12"
+                                                />
+                                            </svg>
+                                        </button>
+                                    </div>
+                                    <p
+                                        class="ssh-hint"
+                                        style="margin-bottom: 0"
+                                    >
+                                        Min. 8 characters.
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="acct-divider"></div>
+                            <div class="acct-section">
+                                <div class="form-group">
+                                    <label>Invoice Email</label>
+                                    <div class="pw-input-wrap">
+                                        <input
+                                            type="email"
+                                            id="invoice-email-input"
+                                            placeholder="invoices@example.com"
+                                            autocomplete="email"
+                                            oninput="
+                                                toggleInvoiceEmailSave(
+                                                    this.value,
+                                                )
+                                            "
+                                            onkeydown="
+                                                if (event.key === 'Enter')
+                                                    saveInvoiceEmail();
+                                            "
+                                        />
+                                        <button
+                                            type="button"
+                                            id="invoice-email-save-btn"
+                                            class="pw-save-btn"
+                                            onclick="saveInvoiceEmail()"
+                                            title="Save invoice email"
+                                            style="display: none"
+                                        >
+                                            <svg
+                                                width="14"
+                                                height="14"
+                                                viewBox="0 0 24 24"
+                                                fill="none"
+                                                stroke="currentColor"
+                                                stroke-width="2.5"
+                                                stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                            >
+                                                <polyline
+                                                    points="20 6 9 17 4 12"
+                                                />
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="acct-divider"></div>
+                            <div class="acct-section">
+                                <div class="acct-field-label">
+                                    Manage Subscriptions
+                                </div>
+                                <div
+                                    class="acct-affiliate-row"
+                                    style="justify-content: flex-end"
+                                >
+                                    <button
+                                        type="button"
+                                        id="portal-btn"
+                                        class="btn btn-ghost btn-sm"
+                                        onclick="openBillingPortal()"
+                                    >
+                                        Portal &rarr;
+                                    </button>
+                                </div>
                             </div>
                         </div>
-                        <div class="acct-divider"></div>
-                        <div class="acct-section">
-                            <div class="acct-field-label">Affiliate Code</div>
-                            <div class="acct-affiliate-row">
-                                <span
-                                    class="acct-affiliate-code"
-                                    id="acct-affiliate-code"
-                                    >—</span
-                                >
-                                <button
-                                    type="button"
-                                    id="acct-affiliate-copy-btn"
-                                    class="btn btn-ghost btn-sm"
-                                    onclick="copyAffiliateCode()"
-                                    style="display: none"
-                                >
-                                    Copy Affiliate Link
-                                </button>
+
+                        <!-- ── Affiliate Settings tab ──────────── -->
+                        <div
+                            id="acct-tabpanel-affiliate"
+                            class="acct-tab-content"
+                            style="display: none"
+                        >
+                            <div class="acct-section">
+                                <div class="acct-field-label">
+                                    Affiliate Code
+                                </div>
+                                <div class="acct-affiliate-row">
+                                    <span
+                                        class="acct-affiliate-code"
+                                        id="acct-affiliate-code"
+                                        >—</span
+                                    >
+                                    <button
+                                        type="button"
+                                        id="acct-affiliate-copy-btn"
+                                        class="btn btn-ghost btn-sm"
+                                        onclick="copyAffiliateCode()"
+                                        style="display: none"
+                                    >
+                                        Copy Affiliate Link
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </div>
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);