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>My orders · $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 | <!-- site.css gives the StoreChrome header buttons their normal | |
| 11 | styling -- without it Sign in / Cart render as bare text links. --> | |
| 12 | <link rel="stylesheet" href="/assets/css/site.css"> | |
| 13 | <style> | |
| 14 | :root { $theme_css_vars } | |
| 15 | /* Padding moved to .wrap so the StoreChrome header can sit flush | |
| 16 | at the top of the viewport instead of being pushed down by body | |
| 17 | padding. */ | |
| 18 | body { background: var(--col-bg, #050a1c); color: var(--col-text, #e6ecf6); font-family: 'Inter', system-ui, sans-serif; margin: 0; min-height: 100vh; } | |
| 19 | .wrap { max-width: 880px; margin: 0 auto; padding: 40px 20px; } | |
| 20 | .head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; } | |
| 21 | .head h1 { font-family: 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 700; margin: 0; color: #fff; } | |
| 22 | .head .meta { font-size: 13px; color: var(--col-text-2); margin-top: 4px; } | |
| 23 | .head .actions a { color: var(--col-text-2); text-decoration: none; font-size: 13px; font-weight: 600; margin-left: 14px; } | |
| 24 | .head .actions a:hover { color: var(--col-accent-bright); } | |
| 25 | .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; } | |
| 26 | @media (max-width: 600px) { .stat-row { grid-template-columns: 1fr; } } | |
| 27 | .stat { background: var(--col-surface-1); border: 1px solid var(--col-border); border-radius: 12px; padding: 16px 18px; } | |
| 28 | .stat .lbl { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-text-3); font-weight: 700; margin-bottom: 6px; } | |
| 29 | .stat .val { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; color: #fff; } | |
| 30 | .empty { background: var(--col-surface-1); border: 1px solid var(--col-border); border-radius: 12px; padding: 48px 24px; text-align: center; } | |
| 31 | .empty .big { font-size: 16px; color: var(--col-text); margin-bottom: 8px; } | |
| 32 | .empty .sm { font-size: 13px; color: var(--col-text-2); } | |
| 33 | .empty .sm a { color: var(--col-accent-bright); text-decoration: none; font-weight: 600; } | |
| 34 | .order { background: var(--col-surface-1); border: 1px solid var(--col-border); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; } | |
| 35 | .order-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--col-border); } | |
| 36 | .order-head .id { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--col-text-3); } | |
| 37 | .order-head .placed { font-size: 12px; color: var(--col-text-3); margin-top: 2px; } | |
| 38 | .order-head .total { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: var(--col-accent-bright); } | |
| 39 | .pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px; letter-spacing: 1px; text-transform: uppercase; margin-left: 8px; } | |
| 40 | .pill.paid { background: rgba(34,197,94,0.18); color: #4ade80; } | |
| 41 | .pill.pending { background: rgba(245,158,11,0.18); color: #fbbf24; } | |
| 42 | .pill.refund { background: rgba(96,165,250,0.18); color: #60a5fa; } | |
| 43 | .pill.partial { background: rgba(96,165,250,0.10); color: #60a5fa; } | |
| 44 | .pill.failed { background: rgba(239,68,68,0.18); color: #f87171; } | |
| 45 | .pill.cancel { background: rgba(100,116,139,0.20); color: #94a3b8; } | |
| 46 | .item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 13px; } | |
| 47 | .item:not(:last-child) { border-bottom: 1px solid var(--col-border); } | |
| 48 | .item .name { color: var(--col-text); font-weight: 600; } | |
| 49 | .item .qty { font-size: 12px; color: var(--col-text-3); margin-left: 8px; } | |
| 50 | .item .price { font-family: 'JetBrains Mono', monospace; color: var(--col-text-2); } | |
| 51 | </style> | |
| 52 | </head> | |
| 53 | <body> | |
| 54 | $store_chrome_html | |
| 55 | <div class="wrap"> | |
| 56 | <div class="head"> | |
| 57 | <div> | |
| 58 | <h1>My orders</h1> | |
| 59 | <div class="meta">$buyer_name · $buyer_email · $store_name</div> | |
| 60 | </div> | |
| 61 | <div class="actions"> | |
| 62 | <a href="$credit_history_href">Credit history</a> | |
| 63 | <a href="$back_href">← Back to store</a> | |
| 64 | <a href="$logout_href">Sign out</a> | |
| 65 | </div> | |
| 66 | </div> | |
| 67 | ||
| 68 | <div class="stat-row"> | |
| 69 | <div class="stat"> | |
| 70 | <div class="lbl">Orders</div> | |
| 71 | <div class="val">$order_count</div> | |
| 72 | </div> | |
| 73 | <div class="stat"> | |
| 74 | <div class="lbl">Lifetime spent</div> | |
| 75 | <div class="val">$lifetime_total</div> | |
| 76 | </div> | |
| 77 | <div class="stat"> | |
| 78 | <div class="lbl">Store credit</div> | |
| 79 | <div class="val" style="color:[if:$has_credit]#4ade80[/if][if:!$has_credit]var(--col-text-2)[/if]">$credit_dollars</div> | |
| 80 | [if:$has_credit]<div style="font-size:11px;color:var(--col-text-3);margin-top:4px"><a href="$credit_history_href" style="color:var(--col-accent-bright);text-decoration:none">View history →</a></div>[/if] | |
| 81 | </div> | |
| 82 | </div> | |
| 83 | ||
| 84 | [if:!$has_orders] | |
| 85 | <div class="empty"> | |
| 86 | <div class="big">No orders yet.</div> | |
| 87 | <div class="sm">When you buy a model from $store_name, it will appear here with the download links. <a href="$back_href">Browse the catalog →</a></div> | |
| 88 | </div> | |
| 89 | [/if] | |
| 90 | ||
| 91 | [if:$has_orders] | |
| 92 | [loop:@orders] | |
| 93 | <div class="order"> | |
| 94 | <div class="order-head"> | |
| 95 | <div> | |
| 96 | <div> | |
| 97 | <span class="id">Order #$loop1.id</span> | |
| 98 | [if:$loop1.is_paid]<span class="pill paid">Paid</span>[/if] | |
| 99 | [if:$loop1.is_pending]<span class="pill pending">Pending</span>[/if] | |
| 100 | [if:$loop1.is_refund]<span class="pill refund">Refunded</span>[/if] | |
| 101 | [if:$loop1.is_partial]<span class="pill partial">Partially refunded</span>[/if] | |
| 102 | [if:$loop1.is_failed]<span class="pill failed">Failed</span>[/if] | |
| 103 | [if:$loop1.is_cancel]<span class="pill cancel">Canceled</span>[/if] | |
| 104 | </div> | |
| 105 | <div class="placed">Placed $loop1.created_at · $loop1.item_count item(s)</div> | |
| 106 | </div> | |
| 107 | <div class="total">$loop1.total</div> | |
| 108 | </div> | |
| 109 | [loop:@loop1.items] | |
| 110 | <div class="item"> | |
| 111 | <div> | |
| 112 | <span class="name">$loop2.title[if:$loop2.is_bundle] <span style="font-size:10px;letter-spacing:1px;padding:2px 6px;border-radius:4px;background:rgba(168,85,247,0.18);color:#c084fc">BUNDLE</span>[/if]</span> | |
| 113 | <span class="qty">× $loop2.quantity</span> | |
| 114 | [if:$loop2.is_physical]<div style="font-size:11px;color:var(--col-text-3,#999);margin-top:3px">$loop2.variant_pill</div>[/if] | |
| 115 | [if:$loop2.is_physical][if:$loop2.is_shipped] | |
| 116 | <div style="font-size:11px;margin-top:4px;color:#86efac">✓ Shipped · $loop2.tracking_carrier $loop2.tracking_number</div> | |
| 117 | [/if][if:!$loop2.is_shipped] | |
| 118 | <div style="font-size:11px;margin-top:4px;color:#fbbf24">$loop2.fulfillment_label</div> | |
| 119 | [/if][/if] | |
| 120 | [if:$loop2.has_bundle_components] | |
| 121 | <div style="margin-top:8px;padding:8px 10px;background:rgba(255,255,255,0.04);border-radius:6px"> | |
| 122 | <div style="font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--col-text-3);margin-bottom:6px">Included files</div> | |
| 123 | [loop:@bundle_components] | |
| 124 | <div style="display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:12px"> | |
| 125 | <span>$loop3.title</span> | |
| 126 | <a href="$loop3.href" style="font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;background:var(--col-accent);color:#fff;text-decoration:none">Download</a> | |
| 127 | </div> | |
| 128 | [/loop] | |
| 129 | </div> | |
| 130 | [/if] | |
| 131 | </div> | |
| 132 | <div style="display:flex;align-items:center;gap:12px"> | |
| 133 | <span class="price">$loop2.price_display</span> | |
| 134 | [if:$loop2.can_download]<a href="$loop2.download_url" style="font-size:12px;font-weight:700;padding:6px 10px;border-radius:7px;background:linear-gradient(130deg, var(--col-accent), var(--col-accent-bright));color:#fff;text-decoration:none">Download</a>[/if] | |
| 135 | </div> | |
| 136 | </div> | |
| 137 | [/loop] | |
| 138 | </div> | |
| 139 | [/loop] | |
| 140 | [/if] | |
| 141 | ||
| 142 | <div style="text-align:center;color:var(--col-text-3);font-size:11px;margin-top:30px">Need help with an order? Contact $store_name.</div> | |
| 143 | </div> | |
| 144 | </body> | |
| 145 | </html> |