85 lines
2.1 KiB
HTML
85 lines
2.1 KiB
HTML
<!--
|
|
Morphit storefront QR badge — copy-paste, dependency-free.
|
|
|
|
A framed QR with the Morphit mark and a caption. No external fonts, scripts,
|
|
or trackers; just inline HTML + CSS. Drop it straight into a page.
|
|
|
|
To use:
|
|
1. Generate your QR (see README) and host it next to this file, OR change
|
|
the QR <img src> below to wherever you host it.
|
|
2. Replace alice / @alice with your own Blurt account name.
|
|
3. Paste the <a class="morphit-qr-badge"> … </a> block into your page.
|
|
|
|
The kit's morphit-mark.svg and your QR SVG should sit alongside this file
|
|
(or update the two src="" paths).
|
|
-->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Morphit storefront QR</title>
|
|
</head>
|
|
<body style="margin: 2rem; background: #f7f8fa">
|
|
<!-- ===== copy from here ===== -->
|
|
<a
|
|
class="morphit-qr-badge"
|
|
href="https://morphit.io/@alice"
|
|
style="
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.85rem;
|
|
width: 15rem;
|
|
padding: 1.25rem;
|
|
border: 2px solid #00da69;
|
|
border-radius: 1.25rem;
|
|
background: #ffffff;
|
|
box-shadow: 0 8px 24px rgba(11, 18, 32, 0.08);
|
|
text-decoration: none;
|
|
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica,
|
|
Arial, sans-serif;
|
|
color: #0b1220;
|
|
"
|
|
>
|
|
<!-- Morphit mark -->
|
|
<img
|
|
src="morphit-mark.svg"
|
|
alt="Morphit"
|
|
width="40"
|
|
height="40"
|
|
style="display: block"
|
|
/>
|
|
|
|
<!-- Your QR (replace the src with your generated file) -->
|
|
<img
|
|
src="morphit-qr-alice.svg"
|
|
alt="Scan to trade on Morphit with @alice"
|
|
width="176"
|
|
height="176"
|
|
style="
|
|
display: block;
|
|
width: 176px;
|
|
height: 176px;
|
|
background: #ffffff;
|
|
border-radius: 0.5rem;
|
|
"
|
|
/>
|
|
|
|
<span
|
|
style="
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.01em;
|
|
text-align: center;
|
|
"
|
|
>
|
|
Scan to trade on Morphit
|
|
</span>
|
|
<span style="font-size: 0.8rem; font-weight: 600; color: #027c86">
|
|
@alice
|
|
</span>
|
|
</a>
|
|
<!-- ===== to here ===== -->
|
|
</body>
|
|
</html>
|