0xbeb3cac7…c65dsent to0x55969715…1928·#25,435,377·view on Etherscan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>BANKR-PURR</title>
<style>
:root{--trait:#c3ff00}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#050704;display:grid;place-items:center;font-family:monospace;color:#c3ff00}
.card{width:400px;max-width:100vw;aspect-ratio:1;position:relative;overflow:hidden;background:#000;border:1px solid #2f501c;box-shadow:0 0 26px #c3ff0033;image-rendering:pixelated}
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.baseTint,.foil,.sparkles,.matrix,.rainbow,.scan,.vignette,.innerFrame{position:absolute;inset:0;pointer-events:none}
.baseTint{mix-blend-mode:screen;opacity:.45;background:linear-gradient(135deg,hsla(299,100%,55%,.12),#c3ff0033,hsla(79,100%,55%,.14))}
.foil{background:linear-gradient(120deg,transparent 0 18%,rgba(255,255,255,.18) 23%,transparent 31%),linear-gradient(45deg,rgba(255,211,77,.12),rgba(195,255,0,.08),rgba(255,56,212,.12));background-size:220% 220%;mix-blend-mode:screen;opacity:.75;animation:foilMove 5s linear infinite}
.sparkles{mix-blend-mode:screen}
.spark{position:absolute;background:currentColor;color:#ffd34d;box-shadow:0 0 8px currentColor;animation:twinkle 1.8s ease-in-out infinite}
.matrix{opacity:.42;mix-blend-mode:screen}
.drop{position:absolute;width:2px;background:linear-gradient(#c3ff00,transparent);animation:fall linear infinite}
.rainbow{opacity:0;mix-blend-mode:color-dodge;background:linear-gradient(90deg,#ff004c,#ffea00,#00ff7b,#00e5ff,#8b5cff,#ff38d4);animation:rainbowPulse 1.2s steps(2,end) infinite}
.scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 2px,rgba(195,255,0,.045) 2px 4px);opacity:.7}
.vignette{box-shadow:inset 0 0 60px #000,inset 0 0 20px #000}
.innerFrame{inset:8px;border:3px solid var(--trait);box-shadow:inset 0 0 0 1px #000,0 0 16px var(--trait)}
.nameTag{position:absolute;top:14px;left:14px;max-width:285px;padding:6px 8px;background:rgba(3,6,3,.78);border:1px solid var(--trait);color:var(--trait);font-size:11px;font-weight:700;text-shadow:0 0 8px currentColor}
.sig{position:absolute;right:14px;bottom:14px;z-index:4;padding:5px 7px;color:#c3ff00;background:rgba(3,6,3,.72);border:1px solid rgba(195,255,0,.65);font:bold 10px monospace;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 0 6px #c3ff00,0 0 14px #00ffe1;box-shadow:0 0 10px rgba(195,255,0,.22),inset 0 0 8px rgba(0,255,225,.12)}
.infoBtn{position:absolute;left:14px;bottom:14px;z-index:5;width:28px;height:28px;border:1px solid #c3ff00;background:rgba(3,6,3,.82);color:#c3ff00;border-radius:50%;font:bold 16px/1 monospace}
.infoBox{position:absolute;left:14px;bottom:50px;z-index:4;width:calc(100% - 28px);max-height:178px;overflow:auto;padding:10px;display:none;background:rgba(3,6,3,.91);border:1px solid #c3ff00;color:#bfff8c;font-size:10px;line-height:1.45}
.infoBox.open{display:block}
.clean .baseTint,.clean .foil,.clean .sparkles,.clean .matrix,.clean .rainbow,.clean .scan{display:none}
.clean .vignette{box-shadow:inset 0 0 18px #000}
.clean .innerFrame{border:1px solid var(--trait);box-shadow:none}
.desat .art{filter:saturate(.04) contrast(1.2) brightness(.86)}
.invert .art{filter:invert(1) saturate(1.8) contrast(1.15)}
.darkMatrix .art{filter:brightness(.48) contrast(1.35) saturate(.8)}
.flicker .art{animation:flicker 1s steps(2,end) infinite}
.flicker .rainbow{opacity:.32}
.gold .foil{opacity:.95}
@keyframes foilMove{from{background-position:0 0}to{background-position:220% 220%}}
@keyframes twinkle{0%,100%{transform:scale(.5);opacity:.25}50%{transform:scale(1.8);opacity:1}}
@keyframes fall{from{transform:translateY(-40px)}to{transform:translateY(450px)}}
@keyframes rainbowPulse{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(180deg)}}
@keyframes flicker{0%{filter:hue-rotate(0deg) saturate(1.8)}50%{filter:hue-rotate(150deg) saturate(2.5)}100%{filter:hue-rotate(300deg) saturate(1.8)}}
</style>
</head>
<body>
<div class="card darkMatrix" id="card">
<img class="art" id="art">
<div class="baseTint"></div>
<div class="foil"></div>
<div class="rainbow"></div>
<div class="matrix" id="matrix"></div>
<div class="sparkles" id="sparkles"></div>
<div class="scan"></div>
<div class="vignette"></div>
<div class="innerFrame"></div>
<div class="nameTag">BANKR-PURR // EthmojiPunks // 0xbeb3...1c65d</div>
<div class="sig">By META8.ETH</div>
<button class="infoBtn" id="infoBtn">i</button>
<div class="infoBox" id="infoBox">
<b>DNA RECIPE</b><br>
Source cat tx: 0x6441...e4b87<br>
Minter: 0xbeb3...1c65d<br>
Recipient: 0x5596...f1928<br>
Roll: BANKR-PURR-AAB13AD-A28A4889<br>
Seed: B4558EF3<br>
Rarity: MATRIX PURR<br>
Effect: MATRIX PURR
</div>
</div>
<script>
const D={tx:"0x64410da185b8ee487ae720ec6b7337f25290c0c7fa33a606d89cbb48abfe4b87",x:"EthmojiPunks",minter:"0xbeb3cac71ff7bbc8e773904ce08863adb401c65d",to:"0x559697154b4cecbd349949fbb2d3980d04df1928",roll:"BANKR-PURR-AAB13AD-A28A4889",seed:3026095859,seedHex:"B4558EF3",hue:299,rarity:"MATRIX PURR",effectName:"MATRIX PURR",effectClass:"darkMatrix",traitColor:"#c3ff00",power:2};
function rng(seed){let x=seed>>>0;return()=>((x^=x<<13,x^=x>>>17,x^=x<<5)>>>0)/4294967296}
function bits(){if(D.power<1)return;let s=document.getElementById("sparkles"),m=document.getElementById("matrix"),r=rng(D.seed+77);for(let i=0;i<35+D.power*28;i++){let e=document.createElement("i");e.className="spark";e.style.left=r()*98+"%";e.style.top=r()*98+"%";e.style.width=e.style.height=1+r()*3+D.power*.35+"px";e.style.animationDelay=-r()*2+"s";e.style.animationDuration=1.1+r()*2.4+"s";s.appendChild(e)}r=rng(D.seed+313);for(let i=0;i<22+D.power*8;i++){let e=document.createElement("i");e.className="drop";e.style.left=r()*100+"%";e.style.height=10+r()*34+"px";e.style.opacity=.18+r()*.52;e.style.animationDuration=2.2+r()*4.8+"s";e.style.animationDelay=-r()*6+"s";m.appendChild(e)}}
const img=document.getElementById("art");img.onerror=()=>{img.onerror=null;img.src="https://ethscriptions.com/ethscriptions/"+D.tx+"/data"};img.src="https://api.ethscriptions.com/v2/ethscriptions/"+D.tx+"/data";bits();document.getElementById("infoBtn").onclick=()=>document.getElementById("infoBox").classList.toggle("open");
</script>
</body>
</html>