new-templates
This commit is contained in:
260
index.html
Normal file
260
index.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>NSA Secure Terminal</title>
|
||||
|
||||
<style>
|
||||
|
||||
body{
|
||||
margin:0;
|
||||
background:#000;
|
||||
font-family:monospace;
|
||||
color:#00ff88;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
/* GRID */
|
||||
|
||||
.grid{
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:
|
||||
linear-gradient(#00ff8822 1px, transparent 1px),
|
||||
linear-gradient(90deg,#00ff8822 1px, transparent 1px);
|
||||
background-size:40px 40px;
|
||||
}
|
||||
|
||||
/* SCAN LINE */
|
||||
|
||||
.scanline{
|
||||
position:absolute;
|
||||
width:100%;
|
||||
height:4px;
|
||||
background:#00ff88;
|
||||
opacity:.2;
|
||||
animation:scan 4s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scan{
|
||||
0%{top:-10%}
|
||||
100%{top:110%}
|
||||
}
|
||||
|
||||
/* MATRIX */
|
||||
|
||||
canvas{
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
}
|
||||
|
||||
/* RADAR */
|
||||
|
||||
.radar{
|
||||
position:absolute;
|
||||
right:50px;
|
||||
top:50px;
|
||||
width:150px;
|
||||
height:150px;
|
||||
border:1px solid #00ff88;
|
||||
border-radius:50%;
|
||||
}
|
||||
|
||||
.radar::after{
|
||||
content:"";
|
||||
position:absolute;
|
||||
width:50%;
|
||||
height:2px;
|
||||
background:#00ff88;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform-origin:left;
|
||||
animation:radar 3s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes radar{
|
||||
0%{transform:rotate(0deg)}
|
||||
100%{transform:rotate(360deg)}
|
||||
}
|
||||
|
||||
/* LOGIN BOX */
|
||||
|
||||
.login{
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translate(-50%,-50%);
|
||||
border:1px solid #00ff88;
|
||||
padding:40px;
|
||||
width:350px;
|
||||
background:rgba(0,20,0,.85);
|
||||
box-shadow:0 0 30px #00ff88;
|
||||
}
|
||||
|
||||
/* SAM FISHER LIGHTS */
|
||||
|
||||
.goggles{
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
gap:10px;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.light{
|
||||
width:14px;
|
||||
height:14px;
|
||||
border-radius:50%;
|
||||
background:#00ff88;
|
||||
box-shadow:0 0 15px #00ff88,0 0 30px #00ff88;
|
||||
}
|
||||
|
||||
/* INPUT */
|
||||
|
||||
input{
|
||||
width:100%;
|
||||
margin:10px 0;
|
||||
padding:10px;
|
||||
background:#001a00;
|
||||
border:1px solid #00ff88;
|
||||
color:#00ff88;
|
||||
}
|
||||
|
||||
/* BUTTON */
|
||||
|
||||
button{
|
||||
width:100%;
|
||||
padding:12px;
|
||||
background:#002200;
|
||||
border:1px solid #00ff88;
|
||||
color:#00ff88;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
background:#00ff88;
|
||||
color:#000;
|
||||
}
|
||||
|
||||
/* TERMINAL TEXT */
|
||||
|
||||
.terminal{
|
||||
position:absolute;
|
||||
bottom:30px;
|
||||
left:30px;
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
.cursor{
|
||||
animation:blink 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink{
|
||||
0%,50%,100%{opacity:1}
|
||||
25%,75%{opacity:0}
|
||||
}
|
||||
|
||||
/* GLITCH */
|
||||
|
||||
.glitch{
|
||||
animation:glitch 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes glitch{
|
||||
0%{text-shadow:2px 0 red}
|
||||
20%{text-shadow:-2px 0 blue}
|
||||
40%{text-shadow:2px 0 green}
|
||||
60%{text-shadow:-2px 0 red}
|
||||
80%{text-shadow:2px 0 blue}
|
||||
100%{text-shadow:0 0 5px #00ff88}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="grid"></div>
|
||||
<div class="scanline"></div>
|
||||
|
||||
<canvas id="matrix"></canvas>
|
||||
|
||||
<div class="radar"></div>
|
||||
|
||||
<div class="login">
|
||||
|
||||
<div class="goggles">
|
||||
<div class="light"></div>
|
||||
<div class="light"></div>
|
||||
<div class="light"></div>
|
||||
</div>
|
||||
|
||||
<h2 class="glitch">NSA SECURE TERMINAL</h2>
|
||||
|
||||
<form action="/user/login" method="post">
|
||||
|
||||
<input type="text" name="user_name" placeholder="username">
|
||||
<input type="password" name="password" placeholder="password">
|
||||
|
||||
<button>ACCESS SYSTEM</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="terminal">
|
||||
Initializing secure channel...<br>
|
||||
Scanning user credentials...<br>
|
||||
Access protocol ready<span class="cursor">_</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
/* MATRIX RAIN */
|
||||
|
||||
const canvas=document.getElementById("matrix")
|
||||
const ctx=canvas.getContext("2d")
|
||||
|
||||
canvas.height=window.innerHeight
|
||||
canvas.width=window.innerWidth
|
||||
|
||||
const letters="01GITEA_SECURE_ACCESS"
|
||||
letters.split("")
|
||||
|
||||
const font=14
|
||||
const columns=canvas.width/font
|
||||
const drops=[]
|
||||
|
||||
for(let x=0;x<columns;x++)
|
||||
drops[x]=1
|
||||
|
||||
function draw(){
|
||||
|
||||
ctx.fillStyle="rgba(0,0,0,.05)"
|
||||
ctx.fillRect(0,0,canvas.width,canvas.height)
|
||||
|
||||
ctx.fillStyle="#00ff88"
|
||||
ctx.font=font+"px monospace"
|
||||
|
||||
for(let i=0;i<drops.length;i++){
|
||||
|
||||
const text=letters.charAt(Math.floor(Math.random()*letters.length))
|
||||
|
||||
ctx.fillText(text,i*font,drops[i]*font)
|
||||
|
||||
if(drops[i]*font>canvas.height && Math.random()>0.975)
|
||||
drops[i]=0
|
||||
|
||||
drops[i]++
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setInterval(draw,33)
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user