390 lines
3.3 KiB
HTML
390 lines
3.3 KiB
HTML
{{template "base/head" .}}
|
|
|
|
<style>
|
|
|
|
:root{
|
|
|
|
--bg:#020304;
|
|
--green:#4af030;
|
|
--dark:#0a0f0a;
|
|
|
|
}
|
|
|
|
|
|
body{
|
|
|
|
background:black!important;
|
|
color:var(--green);
|
|
font-family:Courier New,monospace;
|
|
overflow:hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* GRID */
|
|
|
|
body::before{
|
|
|
|
content:"";
|
|
position:fixed;
|
|
width:100%;
|
|
height:100%;
|
|
|
|
background-image:
|
|
|
|
linear-gradient(rgba(0,255,0,0.06) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0,255,0,0.06) 1px, transparent 1px);
|
|
|
|
background-size:40px 40px;
|
|
|
|
pointer-events:none;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* CRT */
|
|
|
|
body::after{
|
|
|
|
content:"";
|
|
position:fixed;
|
|
width:100%;
|
|
height:100%;
|
|
|
|
background:
|
|
|
|
linear-gradient(
|
|
rgba(0,255,0,0.03),
|
|
rgba(0,255,0,0.03)
|
|
);
|
|
|
|
animation:flicker 0.15s infinite;
|
|
|
|
pointer-events:none;
|
|
|
|
}
|
|
|
|
|
|
@keyframes flicker{
|
|
|
|
0%{opacity:0.9}
|
|
50%{opacity:1}
|
|
100%{opacity:0.9}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* CENTER */
|
|
|
|
.center{
|
|
|
|
position:absolute;
|
|
|
|
top:50%;
|
|
left:50%;
|
|
|
|
transform:translate(-50%,-50%);
|
|
|
|
text-align:center;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* LOGO */
|
|
|
|
#logo3d{
|
|
|
|
width:260px;
|
|
height:260px;
|
|
margin:auto;
|
|
|
|
filter:
|
|
|
|
drop-shadow(0 0 20px #4af030)
|
|
drop-shadow(0 0 60px #4af030);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* TEXT */
|
|
|
|
.title{
|
|
|
|
font-size:38px;
|
|
|
|
margin-top:20px;
|
|
|
|
text-shadow:0 0 20px #4af030;
|
|
|
|
animation:flickerText 3s infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes flickerText{
|
|
|
|
0%,18%,22%,25%,53%,57%,100%{opacity:1}
|
|
|
|
20%,24%,55%{opacity:0.4}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* STATUS */
|
|
|
|
.status{
|
|
|
|
margin-top:20px;
|
|
|
|
font-size:18px;
|
|
|
|
opacity:0.8;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* SCANNER */
|
|
|
|
.scan{
|
|
|
|
position:fixed;
|
|
|
|
width:100%;
|
|
height:3px;
|
|
|
|
background:#4af030;
|
|
|
|
box-shadow:0 0 20px #4af030;
|
|
|
|
animation:scan 4s linear infinite;
|
|
|
|
}
|
|
|
|
|
|
@keyframes scan{
|
|
|
|
0%{top:0}
|
|
|
|
100%{top:100%}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<div class="scan"></div>
|
|
|
|
|
|
|
|
<div class="center">
|
|
|
|
|
|
<div id="logo3d"></div>
|
|
|
|
|
|
<div class="title">
|
|
|
|
THIRD ECHELON
|
|
|
|
</div>
|
|
|
|
|
|
<div class="status" id="status">
|
|
|
|
INITIALIZING SYSTEM...
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports":{
|
|
"three":
|
|
"https://unpkg.com/three@0.128.0/build/three.module.js"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
import * as THREE from "three";
|
|
|
|
|
|
|
|
const container =
|
|
document.getElementById("logo3d");
|
|
|
|
|
|
|
|
const scene =
|
|
new THREE.Scene();
|
|
|
|
|
|
|
|
const camera =
|
|
new THREE.PerspectiveCamera(
|
|
45,
|
|
1,
|
|
0.1,
|
|
1000
|
|
);
|
|
|
|
|
|
camera.position.z=3;
|
|
|
|
|
|
|
|
const renderer =
|
|
new THREE.WebGLRenderer({
|
|
alpha:true,
|
|
antialias:true
|
|
});
|
|
|
|
|
|
renderer.setSize(260,260);
|
|
|
|
renderer.setClearColor(0x000000,0);
|
|
|
|
|
|
container.appendChild(
|
|
renderer.domElement
|
|
);
|
|
|
|
|
|
|
|
|
|
/* LOGO TEXTURE */
|
|
|
|
const texture =
|
|
new THREE.TextureLoader().load(
|
|
|
|
"https://git.grenu4.ru/y0zhyck/templates-for-gitea/media/branch/main/assets/third-echelon-logo.png"
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
/* LOGO */
|
|
|
|
const mesh =
|
|
new THREE.Mesh(
|
|
|
|
new THREE.CircleGeometry(1,64),
|
|
|
|
new THREE.MeshBasicMaterial({
|
|
|
|
map:texture,
|
|
transparent:true
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
scene.add(mesh);
|
|
|
|
|
|
|
|
|
|
/* GLOW */
|
|
|
|
const glow =
|
|
new THREE.Mesh(
|
|
|
|
new THREE.CircleGeometry(1.2,64),
|
|
|
|
new THREE.MeshBasicMaterial({
|
|
|
|
color:0x4af030,
|
|
transparent:true,
|
|
opacity:0.15
|
|
|
|
})
|
|
|
|
);
|
|
|
|
|
|
scene.add(glow);
|
|
|
|
|
|
|
|
|
|
|
|
function animate(){
|
|
|
|
requestAnimationFrame(animate);
|
|
|
|
mesh.rotation.y+=0.01;
|
|
|
|
glow.rotation.y-=0.005;
|
|
|
|
renderer.render(scene,camera);
|
|
|
|
}
|
|
|
|
|
|
animate();
|
|
|
|
|
|
|
|
|
|
/* STATUS TEXT */
|
|
|
|
const status =
|
|
document.getElementById("status");
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
status.innerHTML="CONNECTING TO NSA...";
|
|
|
|
},2000);
|
|
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
status.innerHTML="AUTHENTICATING OPERATIVE...";
|
|
|
|
},4000);
|
|
|
|
|
|
|
|
setTimeout(()=>{
|
|
|
|
status.innerHTML="ACCESS GRANTED";
|
|
|
|
status.style.color="#7CFF00";
|
|
|
|
},6000);
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
{{template "base/footer" .}} |