Arka plan tasarımı 01 binary code,Login ekranı ise Glich effectli bir tasarım.Kodu Html olarak test ettiğiniz zaman gözüküyor.
Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>⚠ RESTRICTED ACCESS ⚠</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0; padding:0;
box-sizing:border-box;
font-family: Consolas, monospace;
}
body{
background:#000;
color:#00ff99;
overflow:hidden;
}
/* MATRIX ARKA PLAN */
#matrix{
position:fixed;
top:0; left:0;
width:100%; height:100%;
z-index:0;
opacity:0.20;
}
/* GİRİŞ KUTUSU */
.login-box{
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
width:420px;
padding:40px;
background:rgba(0,0,0,0.5);
border:2px solid #00ff99;
border-radius:12px;
box-shadow:
0 0 25px #00ff99,
inset 0 0 30px #001f12;
z-index:3;
/* GLITCH ANIMASYON */
animation: glitchBox 3s infinite steps(2);
}
@keyframes glitchBox{
0%{ transform:translate(-50%,-50%); }
12%{ transform:translate(-49%, -51%) skew(1deg); }
16%{ transform:translate(-51%, -48%) skew(-1deg); }
20%{ transform:translate(-50%, -50%); }
70%{ transform:translate(-50%, -50%); }
72%{ transform:translate(-49%, -49%) skew(1deg); }
74%{ transform:translate(-51%, -52%) skew(-2deg); }
76%{ transform:translate(-50%, -50%); }
100%{ transform:translate(-50%, -50%); }
}
/* GLITCH YAZI */
h1{
font-size:1.4rem;
margin-bottom:15px;
color:#ff0033;
text-shadow:0 0 8px #ff0033;
position:relative;
}
h1::before,
h1::after{
content:"⚠ RESTRICTED ACCESS ⚠";
position:absolute;
left:0; top:0;
width:100%;
opacity:0.4;
}
h1::before{
color:#00ff99;
animation: glitch1 2s infinite linear;
}
h1::after{
color:#ff0033;
animation: glitch2 1.8s infinite linear;
}
@keyframes glitch1{
0%{ transform:translate(0,0); }
20%{ transform:translate(-2px,2px); opacity:0.7; }
40%{ transform:translate(2px,-2px); opacity:0.3; }
60%{ transform:translate(-1px,1px); opacity:0.6; }
100%{ transform:translate(0,0); }
}
@keyframes glitch2{
0%{ transform:translate(0,0); }
20%{ transform:translate(2px,-2px); opacity:0.6; }
40%{ transform:translate(-2px,2px); opacity:0.4; }
60%{ transform:translate(1px,-1px); opacity:0.5; }
100%{ transform:translate(0,0); }
}
.login-desc{
font-size:0.78rem;
margin-bottom:25px;
color:#00ffaa;
opacity:0.65;
animation: textFlicker 3s infinite;
}
@keyframes textFlicker{
0%{ opacity:0.3; }
5%{ opacity:1; }
10%{ opacity:0.2; }
12%{ opacity:0.8; }
13%{ opacity:0.1; }
20%{ opacity:1; }
100%{ opacity:0.7; }
}
/* INPUT */
input{
width:100%;
padding:12px;
margin-bottom:16px;
border:none;
background:#020;
color:#00ff99;
border-left:3px solid #ff0033;
outline:none;
box-shadow:0 0 12px #001b0f;
transition:0.2s;
}
input:focus{
box-shadow:0 0 20px #00ff99;
background:#031;
}
/* BTN */
button{
width:100%;
padding:12px;
border:none;
background:linear-gradient(90deg,#ff0033,#00ff66);
color:#fff;
cursor:pointer;
box-shadow:0 0 18px #ff0033;
font-weight:bold;
transition:0.2s;
}
button:hover{
transform:scale(1.05);
box-shadow:0 0 30px #00ff99;
}
/* UYARI */
.warn{
margin-top:15px;
text-align:center;
font-size:0.75rem;
color:#ff0033;
opacity:0.6;
animation: warnBlink 2s infinite;
}
@keyframes warnBlink{
0%{ opacity:0.3; }
50%{ opacity:1; color:#ff0000; }
100%{ opacity:0.3; }
}
/* EKRAN GÜRÜLTÜSÜ – HORROR STATIC LINES */
.glitch-line{
position:fixed;
left:0;
height:2px;
width:100%;
background:rgba(255,0,0,0.25);
z-index:999;
animation: glitchLineMove 0.5s infinite linear;
}
@keyframes glitchLineMove{
from{ top:0; opacity:0.2; }
to{ top:100%; opacity:0.8; }
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<!-- RASTGELE SÜREKLİ GLITCH ÇİZGİLERİ -->
<div class="glitch-line"></div>
<div class="login-box">
<h1>⚠ RESTRICTED ACCESS ⚠</h1>
<p class="login-desc">
Unauthorized access will be logged…
Monitoring system active…
</p>
<input type="text" placeholder="User ID">
<input type="password" placeholder="Access Key">
<button>ENTER</button>
<p class="warn">Intrusion attempt detected...</p>
</div>
<script>
/* MATRIX EFEKTİ */
const canvas=document.getElementById("matrix");
const ctx=canvas.getContext("2d");
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;
const chars="01";
const fontSize=16;
const cols=canvas.width/fontSize;
let drops=[];
for(let x=0;x<cols;x++) drops[x]=1;
function drawMatrix(){
ctx.fillStyle="rgba(0,0,0,0.05)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle="#00ff99";
ctx.font=fontSize+"px monospace";
for(let i=0;i<drops.length;i++){
const text=chars.charAt(Math.floor(Math.random()*chars.length));
ctx.fillText(text,i*fontSize,drops[i]*fontSize);
if(drops[i]*fontSize>canvas.height && Math.random()>0.97){
drops[i]=0;
}
drops[i]++;
}
}
setInterval(drawMatrix,40);
</script>
</body>
</html>
