added on local at 2026-07-01 13:48:06
| 1 | <!DOCTYPE html> | |
| 2 | <html lang="en"> | |
| 3 | <head> | |
| 4 | <meta charset="UTF-8"> | |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | <title>Store credit · $store_name</title> | |
| 7 | <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| 8 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| 9 | <link href="https://fonts.googleapis.com/css2?family=Inter:wght\@400;500;600;700&family=Space+Grotesk:wght\@500;600;700&family=JetBrains+Mono:wght\@400;600&display=swap" rel="stylesheet"> | |
| 10 | <style> | |
| 11 | :root { $theme_css_vars } | |
| 12 | body { background: var(--col-bg, #050a1c); color: var(--col-text, #e6ecf6); font-family: 'Inter', system-ui, sans-serif; margin: 0; padding: 40px 20px; min-height: 100vh; } | |
| 13 | .wrap { max-width: 880px; margin: 0 auto; } | |
| 14 | .head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; } | |
| 15 | .head h1 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; margin: 0; color: #fff; } | |
| 16 | .head .meta { font-size: 13px; color: var(--col-text-2); margin-top: 4px; } | |
| 17 | .head .actions a { color: var(--col-text-2); text-decoration: none; font-size: 13px; font-weight: 600; margin-left: 14px; } | |
| 18 | .head .actions a:hover { color: var(--col-accent-bright); } | |
| 19 | ||
| 20 | .balance { background: var(--col-surface-1); border: 1px solid var(--col-border); border-radius: 12px; padding: 24px 22px; margin-bottom: 22px; display: flex; align-items: baseline; gap: 16px; } | |
| 21 | .balance .amt { font-family: 'Space Grotesk', sans-serif; font-size: 40px; font-weight: 800; color: #fff; } | |
| 22 | .balance .amt.pos { color: #4ade80; } | |
| 23 | .balance .lbl { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-text-3); font-weight: 700; } | |
| 24 | ||
| 25 | .card { background: var(--col-surface-1); border: 1px solid var(--col-border); border-radius: 12px; padding: 18px 20px; } | |
| 26 | .card-title { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-text-3); font-weight: 700; margin-bottom: 12px; } | |
| 27 | .empty { text-align: center; padding: 32px 18px; color: var(--col-text-3); } | |
| 28 | .empty .big { font-size: 15px; color: var(--col-text); margin-bottom: 6px; } | |
| 29 | .empty .sm { font-size: 13px; } | |
| 30 | ||
| 31 | table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } | |
| 32 | th { text-align: left; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-text-3); padding: 9px 10px; font-weight: 700; border-bottom: 1px solid var(--col-border); } | |
| 33 | td { padding: 11px 10px; border-bottom: 1px solid var(--col-border); color: var(--col-text-2); } | |
| 34 | tr:last-child td { border-bottom: none; } | |
| 35 | .mono { font-family: 'JetBrains Mono', monospace; color: var(--col-text); font-size: 12px; } | |
| 36 | .num { text-align: right; font-family: 'JetBrains Mono', monospace; } | |
| 37 | .num.pos { color: #4ade80; } | |
| 38 | .num.neg { color: #f87171; } | |
| 39 | ||
| 40 | .info { background: var(--col-surface-1); border: 1px solid var(--col-border); border-radius: 10px; padding: 14px 16px; margin-top: 18px; color: var(--col-text-2); font-size: 12px; line-height: 1.55; } | |
| 41 | .info strong { color: var(--col-text); } | |
| 42 | </style> | |
| 43 | </head> | |
| 44 | <body> | |
| 45 | <div class="wrap"> | |
| 46 | <div class="head"> | |
| 47 | <div> | |
| 48 | <h1>Store credit</h1> | |
| 49 | <div class="meta">$buyer_name · $buyer_email · $store_name</div> | |
| 50 | </div> | |
| 51 | <div class="actions"> | |
| 52 | <a href="$my_orders_href">My orders</a> | |
| 53 | <a href="$back_href">← Back to store</a> | |
| 54 | <a href="$logout_href">Sign out</a> | |
| 55 | </div> | |
| 56 | </div> | |
| 57 | ||
| 58 | <div class="balance"> | |
| 59 | <span class="amt[if:$has_credit] pos[/if]">$balance_dollars</span> | |
| 60 | <span class="lbl">balance · applies on your next order</span> | |
| 61 | </div> | |
| 62 | ||
| 63 | <div class="card"> | |
| 64 | <div class="card-title">Activity</div> | |
| 65 | [if:$has_rows] | |
| 66 | <table> | |
| 67 | <thead><tr><th class="num">Amount</th><th>Reason</th><th>Order</th><th>Note</th><th>When</th></tr></thead> | |
| 68 | <tbody> | |
| 69 | [loop:@rows] | |
| 70 | <tr> | |
| 71 | <td class="num [if:$loop1.is_positive]pos[/if][if:$loop1.is_negative]neg[/if]">$loop1.amount_dollars</td> | |
| 72 | <td>$loop1.reason_label</td> | |
| 73 | <td class="mono">[if:$loop1.has_related]#$loop1.related_order_id[/if][if:!$loop1.has_related]—[/if]</td> | |
| 74 | <td>$loop1.note</td> | |
| 75 | <td class="mono">$loop1.created_at</td> | |
| 76 | </tr> | |
| 77 | [/loop] | |
| 78 | </tbody> | |
| 79 | </table> | |
| 80 | [/if] | |
| 81 | [if:$no_rows] | |
| 82 | <div class="empty"> | |
| 83 | <div class="big">No store credit activity yet.</div> | |
| 84 | <div class="sm">When $store_name issues you store credit it will show up here and apply automatically on your next order.</div> | |
| 85 | </div> | |
| 86 | [/if] | |
| 87 | </div> | |
| 88 | ||
| 89 | <div class="info"> | |
| 90 | <strong>How store credit works.</strong> Credit issued by $store_name is scoped to this store only and applies automatically at checkout when you are signed in. If an order that used credit is refunded, the credit returns to your balance. | |
| 91 | </div> | |
| 92 | </div> | |
| 93 | </body> | |
| 94 | </html> |