| 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>Buy {{ item.title }} — Makenot.work</title> |
| 7 |
<link rel="stylesheet" href="/static/style.css"> |
| 8 |
</head> |
| 9 |
<body class="buy-page"> |
| 10 |
<div class="buy-card"> |
| 11 |
{% if let Some(url) = item.cover_image_url %} |
| 12 |
<img class="cover" src="{{ url }}" alt="{{ item.title }}"> |
| 13 |
{% else %} |
| 14 |
<div class="no-cover"></div> |
| 15 |
{% endif %} |
| 16 |
|
| 17 |
<h1 class="page-title">{{ item.title }}</h1> |
| 18 |
<div class="creator"> |
| 19 |
by <a href="{{ host_url }}/u/{{ creator_username }}" target="_blank" rel="noopener">{{ creator_display_name.as_deref().unwrap_or(&creator_username) }}</a> |
| 20 |
</div> |
| 21 |
|
| 22 |
{% if item.is_free %} |
| 23 |
<div class="price">Free</div> |
| 24 |
{% else %} |
| 25 |
<div class="price">{{ item.price }}</div> |
| 26 |
{% endif %} |
| 27 |
|
| 28 |
{% if !item.description.is_empty() %} |
| 29 |
<div class="description">{{ item.description }}</div> |
| 30 |
{% endif %} |
| 31 |
|
| 32 |
{% if item.is_free %} |
| 33 |
<a class="buy-btn" href="{{ host_url }}/i/{{ item.id }}" target="_blank" rel="noopener">Get — Free</a> |
| 34 |
{% else %} |
| 35 |
{% if pwyw_enabled %} |
| 36 |
<div class="pwyw-input"> |
| 37 |
<span>$</span> |
| 38 |
<input type="number" id="pwyw_amount" value="{{ suggested_price }}" min="{{ pwyw_min_dollars }}" step="0.01"> |
| 39 |
</div> |
| 40 |
{% endif %} |
| 41 |
<button class="buy-btn" id="buy-btn" onclick="buy()">Buy Now — {{ item.price }}</button> |
| 42 |
{% endif %} |
| 43 |
|
| 44 |
<div class="note"> |
| 45 |
No account required. Download link sent via email. |
| 46 |
<br><a href="{{ host_url }}/i/{{ item.id }}">View full details</a> |
| 47 |
</div> |
| 48 |
|
| 49 |
<div class="footer"> |
| 50 |
<a href="{{ host_url }}">makenot.work</a> |
| 51 |
</div> |
| 52 |
</div> |
| 53 |
|
| 54 |
{% if !item.is_free %} |
| 55 |
<script> |
| 56 |
function buy() { |
| 57 |
const btn = document.getElementById('buy-btn'); |
| 58 |
btn.disabled = true; |
| 59 |
btn.textContent = 'Redirecting...'; |
| 60 |
|
| 61 |
const body = {}; |
| 62 |
{% if pwyw_enabled %} |
| 63 |
const amount = parseFloat(document.getElementById('pwyw_amount').value); |
| 64 |
body.amount_cents = Math.round(amount * 100); |
| 65 |
{% endif %} |
| 66 |
|
| 67 |
fetch('{{ host_url }}/api/checkout/guest/{{ item.id }}', { |
| 68 |
method: 'POST', |
| 69 |
headers: { 'Content-Type': 'application/json' }, |
| 70 |
body: JSON.stringify(body), |
| 71 |
}) |
| 72 |
.then(r => r.json()) |
| 73 |
.then(data => { |
| 74 |
if (data.checkout_url) { |
| 75 |
window.location.href = data.checkout_url; |
| 76 |
} else { |
| 77 |
btn.disabled = false; |
| 78 |
btn.textContent = 'Buy Now'; |
| 79 |
alert(data.error || 'Something went wrong'); |
| 80 |
} |
| 81 |
}) |
| 82 |
.catch(() => { |
| 83 |
btn.disabled = false; |
| 84 |
btn.textContent = 'Buy Now'; |
| 85 |
alert('Something went wrong. Please try again.'); |
| 86 |
}); |
| 87 |
} |
| 88 |
</script> |
| 89 |
{% endif %} |
| 90 |
</body> |
| 91 |
</html> |
| 92 |
|