0x019b0ee2…4681sent to0x9c771720…3bd2·#24,812,247·view on Etherscan
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>TERMINAL256</title>
<style>
:root{
--bg:#3f3f3f;
--fg:#f2f2f2;
--muted:#c7c7c7;
--pulse:rgba(242,242,242,.32);
--chip-bg:rgba(242,242,242,.06);
--chip-border:rgba(242,242,242,.18);
--chip-hover:rgba(242,242,242,.14);
--link:#f2f2f2;
}
*{box-sizing:border-box}
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
background:var(--bg);
color:var(--fg);
overflow:hidden;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}
body{
background:var(--bg);
}
button,
input{
font:inherit;
}
#app{
position:relative;
width:100%;
height:100%;
background:var(--bg);
overflow:hidden;
}
/* COVER */
.t256-cover{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
background:var(--bg);
transition:opacity .22s ease;
}
.t256-cover.is-hidden{
opacity:0;
pointer-events:none;
}
.t256-cover-inner{
position:relative;
width:min(86vmin, 1080px);
height:min(86vmin, 1080px);
display:flex;
align-items:center;
justify-content:center;
}
.t256-cover-art{
position:relative;
z-index:2;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
transition:transform .22s ease, filter .22s ease;
}
.t256-cover-art img,
.t256-cover-art svg{
width:100%;
height:100%;
object-fit:contain;
image-rendering:pixelated;
image-rendering:crisp-edges;
display:block;
}
.t256-signal{
position:absolute;
inset:0;
z-index:3;
pointer-events:none;
}
.t256-signal::before,
.t256-signal::after{
content:"";
position:absolute;
left:50%;
top:50%;
width:72%;
height:72%;
transform:translate(-50%,-50%) scale(.82);
border:2px solid rgba(242,242,242,0);
box-shadow:0 0 0 rgba(242,242,242,0);
opacity:0;
animation:none;
}
.t256-cover:hover .t256-cover-art{
transform:scale(1.04);
filter:brightness(1.12);
}
.t256-cover:hover .t256-signal::before{
animation:t256pulse 1.1s ease-out infinite;
}
.t256-cover:hover .t256-signal::after{
animation:t256pulse 1.1s ease-out infinite .35s;
}
@keyframes t256pulse{
0%{
transform:translate(-50%,-50%) scale(.82);
border-color:rgba(242,242,242,0);
box-shadow:0 0 0 rgba(242,242,242,0);
opacity:0;
}
20%{
border-color:var(--pulse);
box-shadow:0 0 24px rgba(242,242,242,.18);
opacity:1;
}
100%{
transform:translate(-50%,-50%) scale(1.12);
border-color:rgba(242,242,242,0);
box-shadow:0 0 48px rgba(242,242,242,0);
opacity:0;
}
}
/* TERMINAL */
.t256-terminal{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
padding:20px;
opacity:0;
pointer-events:none;
transition:opacity .22s ease;
background:var(--bg);
}
.t256-terminal.is-open{
opacity:1;
pointer-events:auto;
}
.t256-terminal-top{
display:flex;
align-items:flex-start;
gap:14px;
margin-bottom:14px;
position:relative;
z-index:2;
}
.t256-miniart{
width:50px;
height:50px;
flex:0 0 50px;
display:flex;
align-items:center;
justify-content:center;
}
.t256-miniart img,
.t256-miniart svg{
width:100%;
height:100%;
object-fit:contain;
image-rendering:pixelated;
image-rendering:crisp-edges;
display:block;
}
.t256-headercopy{
display:flex;
flex-direction:column;
gap:2px;
}
.t256-history{
position:relative;
z-index:2;
width:100%;
max-width:100%;
padding-bottom:108px;
overflow:auto;
scrollbar-width:none;
}
.t256-history::-webkit-scrollbar{
display:none;
}
.t256-line{
margin:0 0 7px 0;
font-size:12px;
line-height:1.35;
color:var(--fg);
white-space:pre-wrap;
word-break:break-word;
}
.t256-line.muted{
color:var(--muted);
}
.t256-line.strong{
font-weight:700;
}
.t256-linkrow{
margin:0 0 7px 0;
font-size:12px;
line-height:1.35;
color:var(--fg);
white-space:pre-wrap;
word-break:break-word;
}
.t256-openlink{
color:var(--link);
text-decoration:underline;
cursor:pointer;
}
.t256-openlink:visited{
color:var(--link);
}
.t256-actions{
position:absolute;
left:20px;
right:20px;
bottom:44px;
display:flex;
flex-wrap:wrap;
gap:6px;
z-index:2;
}
.t256-chip{
appearance:none;
border:1px solid var(--chip-border);
background:var(--chip-bg);
color:var(--fg);
padding:6px 8px;
border-radius:0;
font-size:11px;
line-height:1;
cursor:pointer;
min-height:30px;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.t256-chip:hover,
.t256-chip:active{
background:var(--chip-hover);
}
.t256-inputrow{
position:absolute;
left:20px;
right:20px;
bottom:20px;
display:flex;
align-items:center;
gap:8px;
z-index:3;
}
.t256-prompt{
font-size:14px;
line-height:1;
color:var(--fg);
}
.t256-input{
flex:1;
min-width:0;
border:none;
background:transparent;
color:var(--fg);
font:inherit;
font-size:12px;
outline:none;
}
.t256-input::placeholder{
color:rgba(242,242,242,.42);
}
.t256-ascii{
font-size:clamp(5px, .62vw, 10px);
line-height:1;
letter-spacing:0;
white-space:pre;
overflow:visible;
max-width:none;
margin:0 0 8px 0;
}
.t256-map{
font-size:12px;
line-height:1.3;
white-space:pre;
overflow:visible;
max-width:none;
margin:0 0 8px 0;
}
@media (max-width: 640px){
.t256-terminal{
padding:14px;
}
.t256-terminal-top{
gap:10px;
margin-bottom:10px;
}
.t256-miniart{
width:42px;
height:42px;
flex-basis:42px;
}
.t256-history{
max-width:100%;
padding-bottom:118px;
}
.t256-line,
.t256-linkrow,
.t256-map{
font-size:11px;
}
.t256-ascii{
font-size:5px;
line-height:1;
}
.t256-actions{
left:14px;
right:14px;
bottom:40px;
gap:5px;
}
.t256-chip{
font-size:10px;
padding:6px 7px;
min-height:28px;
}
.t256-inputrow{
left:14px;
right:14px;
bottom:14px;
}
}
</style>
</head>