added on local at 2026-07-01 13:47:47
| 1 | <div class="page-head"> | |
| 2 | <div> | |
| 3 | <span class="page-eyebrow"><span class="dot"></span> Messages</span> | |
| 4 | <h1 class="page-title">Inbox</h1> | |
| 5 | <p class="page-subtitle">Direct messages with the merchants and affiliates you work with, plus announcements.</p> | |
| 6 | </div> | |
| 7 | </div> | |
| 8 | ||
| 9 | <div class="inbox-tabs" style="display:flex;gap:0;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:18px"> | |
| 10 | <a class="inbox-tab$tab_dms_class" href="/inbox.cgi?tab=dms" style="padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;color:#aab;border-bottom:2px solid transparent">DMs</a> | |
| 11 | <a class="inbox-tab$tab_plt_class" href="/inbox.cgi?tab=platform" style="padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;color:#aab;border-bottom:2px solid transparent">Platform announcements</a> | |
| 12 | <a class="inbox-tab$tab_mer_class" href="/inbox.cgi?tab=merchant" style="padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;color:#aab;border-bottom:2px solid transparent">From merchants</a> | |
| 13 | </div> | |
| 14 | ||
| 15 | <style> | |
| 16 | .inbox-tab.active { color:#fff !important; border-bottom-color:#5aa9ff !important; } | |
| 17 | .inbox-grid { display:grid; grid-template-columns: 320px 1fr; gap:16px; min-height:60vh; } | |
| 18 | @media (max-width: 720px) { .inbox-grid { grid-template-columns: 1fr; } } | |
| 19 | .thread-list { background:#1a1f2a; border:1px solid rgba(255,255,255,.08); border-radius:12px; overflow:hidden; max-height:70vh; overflow-y:auto; } | |
| 20 | .thread-row { display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.06); text-decoration:none; color:#cdd; align-items:flex-start; } | |
| 21 | .thread-row.active { background:rgba(90,169,255,.10); } | |
| 22 | .thread-row:hover { background:rgba(255,255,255,.04); } | |
| 23 | .thread-avatar { width:36px; height:36px; border-radius:50%; background:#2a313d; color:#dde; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; } | |
| 24 | .thread-meta { flex:1; min-width:0; } | |
| 25 | .thread-top { display:flex; justify-content:space-between; gap:8px; } | |
| 26 | .thread-name { font-weight:600; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } | |
| 27 | .thread-when { font-size:11px; color:#889; flex-shrink:0; } | |
| 28 | .thread-bottom { display:flex; justify-content:space-between; gap:8px; align-items:center; } | |
| 29 | .thread-preview { font-size:12px; color:#aab; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } | |
| 30 | .thread-unread-badge { background:#5aa9ff; color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:99px; } | |
| 31 | .thread-pane, .compose-pane, .thread-empty { background:#1a1f2a; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:0; display:flex; flex-direction:column; min-height:60vh; } | |
| 32 | .thread-empty { padding:40px; text-align:center; color:#889; justify-content:center; align-items:center; } | |
| 33 | .thread-head { padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.08); } | |
| 34 | .thread-head-title { font-weight:700; color:#fff; font-size:16px; } | |
| 35 | .thread-head-sub { font-size:12px; color:#889; margin-top:2px; } | |
| 36 | .thread-messages { flex:1; overflow-y:auto; padding:14px 18px; display:flex; flex-direction:column; gap:12px; max-height:55vh; } | |
| 37 | .msg { background:#2a313d; border-radius:10px; padding:10px 12px; max-width:75%; } | |
| 38 | .msg.me { background:rgba(90,169,255,.18); align-self:flex-end; } | |
| 39 | .msg-head { display:flex; justify-content:space-between; gap:10px; font-size:11px; color:#889; margin-bottom:4px; } | |
| 40 | .msg-name { font-weight:600; color:#cdd; } | |
| 41 | .msg-body { color:#fff; font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; } | |
| 42 | .msg-empty { color:#889; text-align:center; padding:40px; } | |
| 43 | .msg-seen { display:block; font-size:10px; color:#5aa9ff; margin-top:4px; cursor:help; } | |
| 44 | .att-img img { max-width:240px; max-height:180px; border-radius:8px; margin-top:6px; display:block; } | |
| 45 | .att-file { display:inline-block; margin-top:6px; padding:6px 10px; background:rgba(255,255,255,.08); border-radius:6px; color:#5aa9ff; text-decoration:none; font-size:12px; } | |
| 46 | .att-size { color:#889; font-size:10px; margin-left:4px; } | |
| 47 | .thread-compose { border-top:1px solid rgba(255,255,255,.08); padding:12px 18px; display:flex; flex-direction:column; gap:8px; } | |
| 48 | .thread-compose textarea { width:100%; background:#0e131c; color:#fff; border:1px solid rgba(255,255,255,.10); border-radius:8px; padding:10px; font-family:inherit; font-size:14px; resize:vertical; } | |
| 49 | .thread-compose-row { display:flex; gap:8px; justify-content:flex-end; align-items:center; } | |
| 50 | .thread-attach-btn { cursor:pointer; color:#aab; padding:6px 10px; border-radius:6px; background:rgba(255,255,255,.06); margin-right:auto; } | |
| 51 | .thread-attach-btn input { display:none; } | |
| 52 | .btn-primary { background:#5aa9ff; color:#fff; border:none; padding:8px 16px; border-radius:6px; font-weight:600; cursor:pointer; text-decoration:none; font-size:13px; } | |
| 53 | .btn-secondary { background:#2a313d; color:#cdd; border:none; padding:8px 16px; border-radius:6px; font-weight:600; cursor:pointer; text-decoration:none; font-size:13px; } | |
| 54 | .btn-danger-sm { background:#7f1d1d; color:#fff; border:none; padding:4px 10px; border-radius:4px; font-size:11px; cursor:pointer; } | |
| 55 | .compose-pane { padding:20px; } | |
| 56 | .compose-pane label { display:block; font-size:12px; color:#889; margin-top:12px; margin-bottom:4px; } | |
| 57 | .compose-pane select, .compose-pane input[type=text], .compose-pane textarea { width:100%; background:#0e131c; color:#fff; border:1px solid rgba(255,255,255,.10); border-radius:8px; padding:10px; font-family:inherit; font-size:14px; } | |
| 58 | .ann-card { background:#1a1f2a; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:16px 18px; margin-bottom:12px; } | |
| 59 | .ann-card.unread { border-left:3px solid #5aa9ff; } | |
| 60 | .ann-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:8px; color:#fff; font-size:15px; } | |
| 61 | .ann-meta { font-size:11px; color:#889; } | |
| 62 | .ann-body { color:#cdd; font-size:14px; line-height:1.5; white-space:pre-wrap; } | |
| 63 | .ann-empty { padding:40px; text-align:center; color:#889; background:#1a1f2a; border:1px solid rgba(255,255,255,.08); border-radius:12px; } | |
| 64 | .inbox-empty { padding:30px; text-align:center; color:#889; } | |
| 65 | </style> | |
| 66 | ||
| 67 | <div class="inbox-tab-panel" style="display:$show_dms"> | |
| 68 | <div class="inbox-grid"> | |
| 69 | <div class="thread-list"> | |
| 70 | <div style="padding:10px 14px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(255,255,255,.08)"> | |
| 71 | <span style="font-size:12px;font-weight:600;color:#aab;letter-spacing:.04em;text-transform:uppercase">Conversations</span> | |
| 72 | <a href="/inbox.cgi?compose=1" class="btn-primary" style="padding:4px 10px;font-size:11px">+ New</a> | |
| 73 | </div> | |
| 74 | $thread_list_html | |
| 75 | </div> | |
| 76 | <div>$right_html</div> | |
| 77 | </div> | |
| 78 | </div> | |
| 79 | ||
| 80 | <div class="inbox-tab-panel" style="display:$show_plt"> | |
| 81 | $ann_platform_html | |
| 82 | </div> | |
| 83 | ||
| 84 | <div class="inbox-tab-panel" style="display:$show_mer"> | |
| 85 | $ann_merchant_html | |
| 86 | </div> | |
| 87 | ||
| 88 | <script> | |
| 89 | // Auto-scroll to bottom of message list on open | |
| 90 | (function(){ var m=document.getElementById('thread-messages'); if(m) m.scrollTop = m.scrollHeight; })(); | |
| 91 | </script> |