Receipt Note
A little paper receipt you can write on
Running live from https://fun.whitneys.co,
cross-origin and sandboxed.
Put it on your site
<iframe
src="https://fun.whitneys.co/g/receipt-note"
width="300"
height="380"
title="Receipt Note"
sandbox="allow-scripts allow-popups-to-escape-sandbox"
loading="lazy"
style="border:0"></iframe>An iframe, not a script tag -- so this gadget cannot touch the page you paste it into, and neither can we. Your settings above are baked into the URL.
The whole thing
Raw fileEvery gadget is one file, and this is it -- all 3.5 kB. Take it, change it, ship it. Just keep the credit.
Show source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="application/json" id="gadget-manifest">
{
"name": "Receipt Note",
"tagline": "A little paper receipt you can write on",
"category": "fun",
"tags": ["paper", "print", "css"],
"author": "rwhitney",
"background": "light",
"size": { "w": 300, "h": 380, "resizable": false },
"config": {
"heading": { "type": "text", "label": "Heading", "max": 20, "default": "FUN WEB FEATURES" },
"line1": { "type": "text", "label": "Line 1", "max": 28, "default": "one self-contained file" },
"line2": { "type": "text", "label": "Line 2", "max": 28, "default": "no trackers" },
"total": { "type": "text", "label": "Total", "max": 12, "default": "FREE" },
"tear": { "type": "select", "label": "Edge", "options": ["torn", "clean"], "default": "torn" }
},
"permissions": []
}
</script>
<style>
html, body {
margin: 0; height: 100%;
display: grid; place-items: center;
background: transparent;
font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
overflow: hidden; user-select: none;
}
#paper {
width: 220px; padding: 20px 20px 26px;
background: #FFFDF6;
color: #2b2b2b;
box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
position: relative;
transform: rotate(-1.2deg);
}
#paper::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
background: #FFFDF6;
clip-path: polygon(0 0, 4% 100%, 8% 0, 12% 100%, 16% 0, 20% 100%, 24% 0,
28% 100%, 32% 0, 36% 100%, 40% 0, 44% 100%, 48% 0, 52% 100%, 56% 0,
60% 100%, 64% 0, 68% 100%, 72% 0, 76% 100%, 80% 0, 84% 100%, 88% 0,
92% 100%, 96% 0, 100% 100%, 100% 0);
}
#paper.clean::after { display: none; }
h1 {
margin: 0 0 4px; font-size: 13px; letter-spacing: 0.14em;
text-align: center; font-weight: 700;
}
.rule { border-top: 1px dashed #b3ad9c; margin: 10px 0; }
.row { display: flex; justify-content: space-between; gap: 10px; }
.row span:last-child { white-space: nowrap; }
.total { font-weight: 700; font-size: 15px; letter-spacing: 0.04em; }
.stamp {
margin-top: 14px; text-align: center; font-size: 10px;
letter-spacing: 0.2em; color: #8a8474;
}
.barcode {
margin-top: 12px; height: 34px;
background: repeating-linear-gradient(90deg,
#2b2b2b 0 2px, transparent 2px 4px, #2b2b2b 4px 5px, transparent 5px 9px,
#2b2b2b 9px 12px, transparent 12px 14px);
}
</style>
</head>
<body>
<div id="paper">
<h1 id="heading"></h1>
<div class="rule"></div>
<div class="row"><span id="line1"></span><span>0.00</span></div>
<div class="row"><span id="line2"></span><span>0.00</span></div>
<div class="rule"></div>
<div class="row total"><span>TOTAL</span><span id="total"></span></div>
<div class="barcode"></div>
<div class="stamp">THANK YOU</div>
</div>
<script>
(function () {
var cfg = window.gadget ? window.gadget.config : {};
var set = function (id, value, fallback) {
// textContent only. A config value is whatever the person who built the
// embed URL typed, so it is never allowed to become markup.
document.getElementById(id).textContent = value || fallback;
};
set('heading', cfg.heading, 'FUN WEB FEATURES');
set('line1', cfg.line1, 'one self-contained file');
set('line2', cfg.line2, 'no trackers');
set('total', cfg.total, 'FREE');
if (cfg.tear === 'clean') document.getElementById('paper').classList.add('clean');
})();
</script>
</body>
</html>