Spaces:
Sleeping
Sleeping
| {% extends "base.html" %} | |
| {% block style %} | |
| .body { padding: 6px 24px; } | |
| .row { display: flex; justify-content: space-between; align-items: center; | |
| padding: 12px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px; gap: 16px; } | |
| .row .name { font-weight: 600; } | |
| .row .desc { color: #7a808a; font-size: 12px; margin-top: 2px; } | |
| .dropdown { position: relative; width: 220px; } | |
| .dropdown-toggle { width: 100%; text-align: left; background: #fff; } | |
| .dropdown-menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; | |
| border: 1px solid #c4c9d1; border-radius: 6px; margin-top: 4px; | |
| box-shadow: 0 4px 10px rgba(0,0,0,.08); z-index: 10; overflow: hidden; } | |
| .dropdown-item { padding: 9px 12px; cursor: pointer; font-size: 14px; } | |
| .dropdown-item:hover { background: #eef2fd; } | |
| .code-row { padding: 12px 0; border-bottom: 1px solid #f0f2f5; } | |
| .code-row .name { font-weight: 600; margin-bottom: 8px; } | |
| .code-row .inline { display: flex; gap: 8px; } | |
| .code-row input[type=text] { width: 220px; } | |
| .foot { padding: 14px 24px; border-top: 1px solid #e8eaee; text-align: right; } | |
| {% endblock %} | |
| {% block content %} | |
| <div class="card"> | |
| <div class="card-head">Account Settings</div> | |
| <div class="body"> | |
| <div class="row"> | |
| <div><div class="name">How did you hear about us?</div><div class="desc">Helps us understand referral sources</div></div> | |
| <div class="dropdown" id="source-dropdown"> | |
| <button type="button" class="dropdown-toggle" id="source-toggle">{{ source }}</button> | |
| <div class="dropdown-menu hidden" id="source-menu"> | |
| {% for s in sources %} | |
| <div class="dropdown-item" data-value="{{ s }}">{{ s }}</div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| <div class="code-row {{ 'hidden' if source != 'Friend referral' else '' }}" id="referral-row"> | |
| <div class="name">Referral code</div> | |
| <input type="text" data-field="referral_code" placeholder="Enter referral code"> | |
| </div> | |
| <div class="code-row"> | |
| <div class="name">Gift card code (optional)</div> | |
| <input type="text" data-field="gift_card" placeholder="Enter gift card code"> | |
| </div> | |
| </div> | |
| <div class="foot"><button class="primary" id="save">Save changes</button></div> | |
| </div> | |
| {% endblock %} | |
| {% block script %} | |
| <script> | |
| const sourceToggle = document.getElementById('source-toggle'); | |
| const sourceMenu = document.getElementById('source-menu'); | |
| const referralRow = document.getElementById('referral-row'); | |
| sourceToggle.addEventListener('click', () => sourceMenu.classList.toggle('hidden')); | |
| sourceMenu.querySelectorAll('.dropdown-item').forEach((item) => { | |
| item.addEventListener('click', async () => { | |
| const value = item.dataset.value; | |
| sourceToggle.textContent = value; | |
| sourceMenu.classList.add('hidden'); | |
| referralRow.classList.toggle('hidden', value !== 'Friend referral'); | |
| await act({ op: 'set_source', value }); | |
| }); | |
| }); | |
| document.getElementById('save').addEventListener('click', async () => { | |
| const draft = {}; | |
| document.querySelectorAll('[data-field]').forEach((el) => { draft[el.dataset.field] = el.value; }); | |
| await act({ op: 'save', draft }); | |
| toast('Settings saved'); | |
| }); | |
| </script> | |
| {% endblock %} | |