{{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" .}}