MeowcaTheoRange/abtmtr-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

crt

Browse source
This commit is contained in:
MeowcaTheoRange 2024-01-24 22:49:29 -06:00
parent c7883652b0
commit e813ec4b39
3 changed files with 98 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
views/crt/index.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>abtmtr.link - CRT</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/styles/crt.css" />
</head>
<body>
<main>
<div class="screen">
<iframe src="/"></iframe>
<div class="crt"></div>
</div>
</main>
</body>
</html>

29
views/index.html
View file

@ -43,6 +43,33 @@
grid-auto-flow: column; grid-auto-flow: column;
gap: 1em; gap: 1em;
} }
@keyframes wave {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-15deg);
}
40% {
transform: rotate(15deg);
}
60% {
transform: rotate(-15deg);
}
80% {
transform: rotate(15deg);
}
100% {
transform: rotate(0deg);
}
}
.waving {
transform-origin: 60% 60%;
cursor: none;
}
.waving:hover {
animation: infinite wave 0.5s;
}
</style> </style>
</head> </head>
<body> <body>
@ -61,7 +88,7 @@
<section> <section>
<h1> <h1>
Hey! Hey!
<span class="rs">👋</span> <span class="rs waving">👋</span>
</h1> </h1>
<section id="data_whoami"> <section id="data_whoami">
<p> <p>

53
views/styles/crt.css Normal file
View file

@ -0,0 +1,53 @@
body {
background-color: black;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
width: 100vw;
height: 100vh;
}
div.screen {
width: 800px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
box-shadow: 0 0 64px 4px #fff4;
border-radius: 8px;
overflow: hidden;
}
div.screen iframe {
display: inline-block;
width: 100%;
height: 100%;
border: none;
margin: 0;
padding: 0;
font-size: 16px;
}
div.screen div.crt {
display: inline-block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
#0006 0px,
#0006 1px,
#0000 1px,
#0000 2px
);
background-repeat: repeat;
background-position: 0 0;
background-size: 2px;
user-select: none;
pointer-events: none;
z-index: 9000;
}