gift_card.liquid
1.7 kB · text · 45 lines
1{% layout none %}2<!doctype html>3<html lang="en">4<head>5<meta charset="utf-8">6<meta name="viewport" content="width=device-width, initial-scale=1">7<meta name="robots" content="noindex">8<title>{{ shop.name }} gift card</title>9{{ content_for_header }}10<style>11:root { --accent: #008cff; --bg: #f8f8f9; --fg: #000000; }12@media (prefers-color-scheme: dark) { :root { --bg: #070707; --fg: #ffffff; } }13html { background: var(--bg); color: var(--fg); font: 16px/1.5 system-ui, sans-serif; }14body { margin: 0; min-height: 100vh; display: grid; place-items: center; }15main { text-align: center; padding: 2rem; }16a { color: var(--accent); }17h1 { font-weight: 600; font-size: 1.25rem; margin: 0 0 1rem; }18.value { font-size: 2rem; font-weight: 600; margin: 0; }19code { display: block; margin: 1rem 0; font: 1.5rem/1 ui-monospace, monospace; letter-spacing: .1em; user-select: all; }20.fine { opacity: .6; font-size: .875rem; }21button { font: inherit; padding: .5rem 1rem; margin-top: 1rem; }22@media print { button { display: none; } }23</style>24</head>25<body>26<main>27<h1>{{ shop.name }}</h1>28<p class="value">{{ gift_card.initial_value | money }}</p>29{% if gift_card.balance != gift_card.initial_value %}30<p>Balance {{ gift_card.balance | money }}</p>31{% endif %}32<code>{{ gift_card.code | format_code }}</code>33{% if gift_card.expired %}34<p class="fine">Expired</p>35{% elsif gift_card.expires_on %}36<p class="fine">Expires {{ gift_card.expires_on | date: "%B %-d, %Y" }}</p>37{% endif %}38{% unless gift_card.enabled %}39<p class="fine">Disabled</p>40{% endunless %}41<p><a href="https://carlomitchener.com/">Shop now</a></p>42<button type="button" onclick="print()">Print</button>43</main>44</body>45</html>