function ob1_Wan_satoshi_overlay() {
const [id, font, edition_number, total_editions, _is_iframe, theme] = document
.querySelector("script")
.dataset.p.split(",");
const content = `/content/${id}`;
const is_unlimited = total_editions == 0;
const type = _is_iframe == "1" ? "iframe" : "image";
const bg_color =
theme == "d" ? "rgba(255, 255, 255, 0.75)" : "rgba(12, 12, 13, 0.5)";
const color = theme == "d" ? "black" : "white";
const font_family = font == "m" ? mono : font == "s" ? serif : sans;
let edition_text = `<div style="display:flex; gap:0.5vw; justify-content:center;"><span>${edition_number}</span><span style="padding-left:0.5vw; padding-right:0.5vw;">/</span><span>${total_editions}</span></div>`;
if (is_unlimited) {
edition_text = `<div style="display:flex; gap:0.15vw; justify-content: center;"><span>#</span>${edition_number}</div>`;
}
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<style>
html,body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
${type === "iframe" ? "" : "body {opacity: 0; }"}
.container {
display: flex;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
justify-content: center;
}
.print-wrapper {
max-width: 100%;
max-height: 100%;
position: relative;
display: flex;
}
.print-image {
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
.print-number {
animation: fade-out 2.5s ease-in-out;
opacity: 0;
transition: opacity 0.15s ease-in-out;
position: absolute;
bottom: 2vw;
right: 2vw;
padding: 1.5vw 3vw 1.5vw 3vw;
font-size: 4vw;
font-family: ${font_family};
border-radius: 40vw;
text-align: center;
color: ${color};
background-color: ${bg_color};
}
.signature {
position: absolute;
bottom: 2vw;
left: 2vw;
font-size: 2vw;
font-family: ${font_family};
color: ${color};
}
body:hover .print-number {
animation-duration: 0s;
opacity: 1;
}
@keyframes fade-out {
0% {
opacity: 1;
}
94% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
${
type == "image"
? `<div class="container"><div class="print-wrapper"><img src="${content}" alt="ordinal" class="print-image"
onload="document.body.style.opacity = 1;if (this.naturalWidth > this.naturalHeight) {document.querySelector('.container').style.alignItems = 'center';}" /><div class="print-number">${edition_text}</div><div class="signature">Art by: Ob1 Wan Satoshi</div></div></div>`
: ""
}
${
type == "iframe"
? `<iframe sandbox="allow-scripts" src="${content}" width="100%" height="100%" frameborder="0" style="border:0"></iframe><div class="print-number">${edition_text}</div><div class="signature">Art by: Ob1 Wan Satoshi</div>`
: ""
}
</body>
</html>`;
document.documentElement.innerHTML = html;
}
const sans =
"-apple-system, BlinkMacSystemFont, roboto, helvetica neue, helvetica, avenir next, avenir, noto, segoe ui, Cantarell, Ubuntu, arial, sans-serif;";
const serif =
"Iowan Old Style, Baskerville, Times New Roman, Apple Garamond, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;";
const mono =
"Menlo, Liberation Mono, Consolas, Monaco, Lucida Console, monospace;";
window.onload = ob1_Wan_satoshi_overlay;