<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neo-Sentient</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
background: #0a0a0a;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', monospace;
}
.character {
position: relative;
width: 80vmin;
height: 80vmin;
max-width: 600px;
max-height: 600px;
}
.head {
position: absolute;
width: 40%;
height: 40%;
background: #111;
border: 2px solid #00ffff;
border-radius: 10% 10% 0 0;
top: 10%;
left: 30%;
overflow: hidden;
box-shadow: 0 0 10px #00ffff;
}
.eye {
position: absolute;
width: 25%;
height: 8%;
background: #00ffff;
top: 40%;
box-shadow: 0 0 10px #00ffff;
animation: scan 4s infinite;
}
.eye.left {
left: 20%;
}
.eye.right {
right: 20%;
}
.body {
position: absolute;
width: 50%;
height: 40%;
background: #111;
border: 2px solid #00ffff;
top: 50%;
left: 25%;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
box-shadow: 0 0 10px #00ffff;
}
.arm {
position: absolute;
width: 10%;
height: 40%;
background: #111;
border: 2px solid #00ffff;
top: 50%;
box-shadow: 0 0 10px #00ffff;
}
.arm.left {
left: 15%;
}
.arm.right {
right: 15%;
}
.circuit {
position: absolute;
display: none;
background: #00ffff;
opacity: 0.6;
box-shadow: 0 0 5px #00ffff;
}
.circuit1,
.circuit2,
.circuit3 {
height: 1px;
width: 20%;
animation: pulse 2s infinite alternate;
}
.circuit1 {
top: 90%;
left: 10%;
}
.circuit2 {
top: 80%;
right: 10%;
}
.circuit3 {
top: 70%;
left: 30%;
}
.data {
position: absolute;
color: #00ffff;
font-size: 10px;
opacity: 0.8;
animation: fadeInOut 4s infinite;
}
.data1 {
top: 15%;
left: 5%;
}
.data2 {
bottom: 10%;
right: 5%;
}
@keyframes scan {
0%,
100% {
width: 25%;
}
50% {
width: 35%;
}
}
@keyframes pulse {
0% {
opacity: 0.2;
}
100% {
opacity: 0.8;
}
}
@keyframes fadeInOut {
0%,
100% {
opacity: 0;
}
50% {
opacity: 0.8;
}
}
</style>
</head>
<body>
<div class="character">
<div class="head">
<div class="eye left"></div>
<div class="eye right"></div>
</div>
<div class="body"></div>
<div class="arm left"></div>
<div class="arm right"></div>
<div class="circuit circuit1"></div>
<div class="circuit circuit2"></div>
<div class="circuit circuit3"></div>
<div class="data data1">01001110 01000101 01001111</div>
<div class="data data2">53 45 4E 54 49 45 4E 54 - NEO SENTINENT</div>
</div>
</body>
</html>
268 days ago
270 days ago
270 days ago
264 days ago
266 days ago
267 days ago
267 days ago
267 days ago
267 days ago
268 days ago
268 days ago
268 days ago
268 days ago
269 days ago
269 days ago
269 days ago
269 days ago
270 days ago
270 days ago
270 days ago
270 days ago
270 days ago
270 days ago
270 days ago
270 days ago