224 lines
8.5 KiB
HTML
224 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>▮ ТРЕТИЙ ЭШЕЛОН ▮ ДОСТУП ОПЕРАТИВНИКА</title>
|
||
<style>
|
||
body { margin: 0; overflow: hidden; font-family: 'Courier New', monospace; }
|
||
#info {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 30px;
|
||
color: #0f0;
|
||
background: rgba(0,0,0,0.7);
|
||
padding: 15px 25px;
|
||
border-left: 4px solid #0f0;
|
||
z-index: 10;
|
||
text-shadow: 0 0 5px #0f0;
|
||
pointer-events: none;
|
||
border-radius: 0 8px 8px 0;
|
||
backdrop-filter: blur(3px);
|
||
}
|
||
#info a {
|
||
color: #0f0;
|
||
text-decoration: none;
|
||
border-bottom: 1px dashed #0f0;
|
||
}
|
||
#status {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 30px;
|
||
color: #0f0;
|
||
background: rgba(0,0,0,0.5);
|
||
padding: 8px 15px;
|
||
border: 1px solid #0f0;
|
||
z-index: 10;
|
||
font-size: 14px;
|
||
letter-spacing: 2px;
|
||
backdrop-filter: blur(3px);
|
||
}
|
||
.corner-triangle {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-top: 60px solid #0f0;
|
||
border-right: 60px solid transparent;
|
||
z-index: 20;
|
||
opacity: 0.6;
|
||
}
|
||
/* Стили для кнопки входа */
|
||
#login-button {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
right: 30px;
|
||
z-index: 30;
|
||
background: transparent;
|
||
border: 2px solid #0f0;
|
||
color: #0f0;
|
||
padding: 12px 30px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
font-family: 'Courier New', monospace;
|
||
text-transform: uppercase;
|
||
letter-spacing: 4px;
|
||
cursor: pointer;
|
||
backdrop-filter: blur(3px);
|
||
background-color: rgba(0, 20, 0, 0.4);
|
||
box-shadow: 0 0 15px #0f0;
|
||
transition: 0.3s;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
#login-button:hover {
|
||
background-color: #0f0;
|
||
color: #000;
|
||
box-shadow: 0 0 30px #0f0;
|
||
border-color: #fff;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="corner-triangle"></div>
|
||
<div id="status">🔒 СЕКРЕТНО // ТОЛЬКО ДЛЯ ОПЕРАТИВНИКОВ</div>
|
||
<div id="info">
|
||
⚡ ОПЕРАТИВНИК: <strong>Spirin Evgeniy</strong><br>
|
||
📡 СВЯЗЬ: <a href="https://t.me/Y0zhyck" target="_blank">Telegram</a><br>
|
||
<span style="font-size:12px; opacity:0.7;">▸ ДОСТУП РАЗРЕШЁН ТОЛЬКО СОТРУДНИКАМ 3-ГО ЭШЕЛОНА ◂</span>
|
||
</div>
|
||
|
||
<!-- Кнопка входа (ведёт на страницу логина Gitea, замени ссылку при необходимости) -->
|
||
<a href="/user/login" id="login-button">⎈ ВОЙТИ ⎈</a>
|
||
|
||
<!-- Подключаем Three.js с CDN -->
|
||
<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';
|
||
import { OrbitControls } from 'https://unpkg.com/three@0.128.0/examples/jsm/controls/OrbitControls.js';
|
||
|
||
// Инициализация сцены, камеры, рендерера
|
||
const scene = new THREE.Scene();
|
||
scene.background = new THREE.Color(0x050510); // тёмно-синий почти чёрный
|
||
|
||
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
|
||
camera.position.set(0, 2, 8);
|
||
|
||
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
|
||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
renderer.shadowMap.enabled = false; // для лёгкости
|
||
renderer.setPixelRatio(window.devicePixelRatio);
|
||
document.body.appendChild(renderer.domElement);
|
||
|
||
// Освещение
|
||
const ambientLight = new THREE.AmbientLight(0x404060);
|
||
scene.add(ambientLight);
|
||
|
||
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
|
||
dirLight.position.set(1, 2, 1);
|
||
scene.add(dirLight);
|
||
|
||
const pointLight = new THREE.PointLight(0x00ff00, 0.5, 10);
|
||
pointLight.position.set(0, 1, 3);
|
||
scene.add(pointLight);
|
||
|
||
// Создаём логотип "3-й эшелон" из геометрий
|
||
const group = new THREE.Group();
|
||
|
||
// Центральный элемент: буква "III" из цилиндров
|
||
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00, emissive: 0x003300 });
|
||
|
||
const createPillar = (x, y, z, height = 2) => {
|
||
const geometry = new THREE.CylinderGeometry(0.3, 0.3, height, 16);
|
||
const pillar = new THREE.Mesh(geometry, material);
|
||
pillar.position.set(x, y + height/2, z);
|
||
return pillar;
|
||
};
|
||
|
||
group.add(createPillar(-1.5, 0, 0, 2.2)); // левая
|
||
group.add(createPillar(0, 0, 0, 2.5)); // центральная
|
||
group.add(createPillar(1.5, 0, 0, 2.2)); // правая
|
||
|
||
// Нижняя перекладина
|
||
const baseGeo = new THREE.BoxGeometry(4.2, 0.2, 0.6);
|
||
const baseMat = new THREE.MeshStandardMaterial({ color: 0x00aa00, emissive: 0x002200 });
|
||
const base = new THREE.Mesh(baseGeo, baseMat);
|
||
base.position.set(0, 0.1, 0);
|
||
group.add(base);
|
||
|
||
// Верхняя перекладина
|
||
const topBar = new THREE.Mesh(baseGeo, baseMat);
|
||
topBar.position.set(0, 2.4, 0);
|
||
group.add(topBar);
|
||
|
||
// Добавляем вращающиеся кольца вокруг
|
||
const ringMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, emissive: 0x002200, wireframe: true });
|
||
const ringGeo = new THREE.TorusGeometry(2.0, 0.05, 16, 64);
|
||
const ring = new THREE.Mesh(ringGeo, ringMaterial);
|
||
ring.rotation.x = Math.PI / 2;
|
||
ring.rotation.z = Date.now() * 0.001;
|
||
group.add(ring);
|
||
|
||
const ring2 = new THREE.Mesh(new THREE.TorusGeometry(2.3, 0.03, 16, 64), ringMaterial);
|
||
ring2.rotation.x = Math.PI / 2;
|
||
ring2.rotation.y = 0.3;
|
||
group.add(ring2);
|
||
|
||
scene.add(group);
|
||
|
||
// Добавляем звёзды/частицы для атмосферы
|
||
const starsGeo = new THREE.BufferGeometry();
|
||
const starsCount = 800;
|
||
const positions = new Float32Array(starsCount * 3);
|
||
for (let i = 0; i < starsCount * 3; i += 3) {
|
||
positions[i] = (Math.random() - 0.5) * 40;
|
||
positions[i+1] = (Math.random() - 0.5) * 20;
|
||
positions[i+2] = (Math.random() - 0.5) * 40 - 10; // распределение вглубь
|
||
}
|
||
starsGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
||
const starsMat = new THREE.PointsMaterial({ color: 0x226622, size: 0.08 });
|
||
const stars = new THREE.Points(starsGeo, starsMat);
|
||
scene.add(stars);
|
||
|
||
// Анимация
|
||
let clock = new THREE.Clock();
|
||
|
||
function animate() {
|
||
requestAnimationFrame(animate);
|
||
const delta = clock.getDelta();
|
||
const time = performance.now() * 0.001;
|
||
|
||
// Вращаем группу медленно
|
||
group.rotation.y += 0.002;
|
||
group.rotation.x = Math.sin(time * 0.2) * 0.1;
|
||
|
||
// Вращаем кольца независимо
|
||
ring.rotation.z += 0.005;
|
||
ring2.rotation.y += 0.003;
|
||
|
||
// Мерцание звёзд (меняем размер)
|
||
stars.material.size = 0.08 + Math.sin(time * 5) * 0.02;
|
||
|
||
renderer.render(scene, camera);
|
||
}
|
||
|
||
animate();
|
||
|
||
// Адаптация под ресайз окна
|
||
window.addEventListener('resize', onWindowResize, false);
|
||
function onWindowResize() {
|
||
camera.aspect = window.innerWidth / window.innerHeight;
|
||
camera.updateProjectionMatrix();
|
||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html> |