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 | <title>My Subscriptions · $store_name</title> | |
| 6 | <link rel="stylesheet" href="/assets/css/site.css"> | |
| 7 | <style>:root { $theme_css_vars }</style> | |
| 8 | <style> | |
| 9 | body { background:var(--col-bg); color:var(--col-text); font-family:var(--font-ui,sans-serif); margin:0; } | |
| 10 | .ms-wrap { max-width:760px; margin:0 auto; padding:60px 24px 80px; } | |
| 11 | h1 { font-family:var(--font-display,inherit); margin:0 0 24px; color:var(--col-text); } | |
| 12 | .ms-card { background:var(--col-surface-1); border:1px solid var(--col-border); border-radius:14px; padding:22px 26px; margin-bottom:14px; } | |
| 13 | .ms-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; } | |
| 14 | .ms-title { font-size:20px; font-weight:700; color:var(--col-text); } | |
| 15 | .ms-pill { font-size:10px; padding:3px 9px; border-radius:5px; letter-spacing:1px; font-weight:700; text-transform:uppercase; } | |
| 16 | .ms-pill.active { background:rgba(34,197,94,0.18); color:#86efac; } | |
| 17 | .ms-pill.canceled { background:rgba(239,68,68,0.18); color:#fca5a5; } | |
| 18 | .ms-meter { background:var(--col-surface-2); height:10px; border-radius:5px; overflow:hidden; margin:10px 0 6px; } | |
| 19 | .ms-meter .fill { background:linear-gradient(90deg, var(--col-accent), var(--col-accent-bright)); height:100%; } | |
| 20 | .ms-meta { font-size:13px; color:var(--col-text-2); } | |
| 21 | .ms-empty { padding:60px 24px; text-align:center; border:1px dashed var(--col-border-2); border-radius:14px; color:var(--col-text-2); } | |
| 22 | .ms-cancel { background:none; border:1px solid rgba(239,68,68,0.35); color:#fca5a5; padding:8px 16px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; } | |
| 23 | .ms-cancel:hover { background:rgba(239,68,68,0.10); } | |
| 24 | </style> | |
| 25 | </head> | |
| 26 | <body> | |
| 27 | <main class="ms-wrap"> | |
| 28 | <h1>My subscriptions at $store_name</h1> | |
| 29 | ||
| 30 | [if:$canceled_flash] | |
| 31 | <div style="padding:10px 14px;margin-bottom:18px;background:rgba(34,197,94,0.10);border:1px solid rgba(34,197,94,0.30);border-radius:8px;color:#86efac;font-size:13px">Subscription canceled. You keep benefits until the end of the current period.</div> | |
| 32 | [/if] | |
| 33 | ||
| 34 | [if:!$has_subs] | |
| 35 | <div class="ms-empty"> | |
| 36 | <h2 style="color:#fff;margin-bottom:8px;font-family:var(--font-display,inherit)">No subscriptions yet</h2> | |
| 37 | <p>$store_name's subscription plans appear on the storefront when published. Subscribe to download files monthly or get a printed item shipped on a cadence.</p> | |
| 38 | <a href="/store.cgi?id=$store_id" style="display:inline-block;margin-top:12px;padding:10px 18px;background:linear-gradient(135deg, var(--col-accent), var(--col-accent-bright));color:#fff;text-decoration:none;border-radius:8px;font-weight:600">Browse plans</a> | |
| 39 | </div> | |
| 40 | [/if] | |
| 41 | ||
| 42 | [if:$has_subs] | |
| 43 | [loop:@subs] | |
| 44 | <div class="ms-card"> | |
| 45 | <div class="ms-head"> | |
| 46 | <div> | |
| 47 | <div class="ms-title">$loop1.plan_name</div> | |
| 48 | <div class="ms-meta">$loop1.kind_label · $loop1.price_label every $loop1.cadence days</div> | |
| 49 | </div> | |
| 50 | [if:$loop1.is_active]<span class="ms-pill active">Active</span>[/if] | |
| 51 | [if:$loop1.is_canceled]<span class="ms-pill canceled">Canceled</span>[/if] | |
| 52 | </div> | |
| 53 | ||
| 54 | <div class="ms-meta">This period: <strong>$loop1.used</strong> of $loop1.quota used · $loop1.remaining remaining</div> | |
| 55 | <div class="ms-meter"><div class="fill" style="width:0%" data-used="$loop1.used" data-quota="$loop1.quota"></div></div> | |
| 56 | <div class="ms-meta" style="font-size:11px;color:var(--col-text-3)">Period ends $loop1.period_end</div> | |
| 57 | ||
| 58 | [if:$loop1.is_active] | |
| 59 | <form method="POST" action="/my_subscription.cgi" style="margin-top:14px" | |
| 60 | data-confirm-title="Cancel this subscription?" | |
| 61 | data-confirm-message="You keep all benefits through the end of the current period. We won't charge you again." | |
| 62 | data-confirm-label="Cancel subscription"> | |
| 63 | <input type="hidden" name="_act" value="cancel"> | |
| 64 | <input type="hidden" name="id" value="$store_id"> | |
| 65 | <input type="hidden" name="sub_id" value="$loop1.id"> | |
| 66 | <button type="submit" class="ms-cancel">Cancel subscription</button> | |
| 67 | </form> | |
| 68 | [/if] | |
| 69 | </div> | |
| 70 | [/loop] | |
| 71 | [/if] | |
| 72 | </main> | |
| 73 | <script> | |
| 74 | document.querySelectorAll('.ms-meter .fill').forEach(function(el){ | |
| 75 | var used = parseInt(el.dataset.used,10)||0; | |
| 76 | var quota= parseInt(el.dataset.quota,10)||1; | |
| 77 | var pct = Math.min(100, Math.round(used/quota*100)); | |
| 78 | el.style.width = pct + '%'; | |
| 79 | }); | |
| 80 | </script> | |
| 81 | </body> | |
| 82 | </html> |