<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>✦ Anomilia Stella ‡†P§inetika†‡ ✦ - Панель управления</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #000;
color: #0ff;
font-family: 'Courier New', monospace;
overflow-x: hidden;
background-image:
radial-gradient(circle at 20% 30%, rgba(120, 0, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 0, 200, 0.1) 0%, transparent 50%);
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.star {
position: absolute;
background: #fff;
border-radius: 50%;
}
.header {
text-align: center;
padding: 20px;
border-bottom: 1px solid #0ff;
margin-bottom: 20px;
text-shadow: 0 0 10px #0ff;
}
.main-title {
font-size: 24px;
margin-bottom: 10px;
color: #b300ff;
}
.subtitle {
font-size: 14px;
opacity: 0.8;
}
.container {
display: grid;
grid-template-columns: 1fr 300px;
gap: 20px;
padding: 20px;
max-width: 1400px;
margin: 0 auto;
}
.main-panel {
display: flex;
flex-direction: column;
gap: 20px;
}
.visualization-section {
border: 1px solid #0ff;
border-radius: 8px;
padding: 15px;
background: rgba(0, 255, 255, 0.05);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}
.section-title {
font-size: 16px;
margin-bottom: 15px;
color: #ff00ff;
border-bottom: 1px solid #0ff;
padding-bottom: 5px;
}
#trajectoryCanvas {
width: 100%;
height: 400px;
background: #000;
border: 1px solid #0ff;
}
.status-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 20px;
}
.status-item {
background: rgba(0, 255, 255, 0.1);
padding: 10px;
border-radius: 5px;
border-left: 3px solid #0ff;
}
.status-label {
font-size: 12px;
opacity: 0.7;
margin-bottom: 5px;
}
.status-value {
font-size: 18px;
font-weight: bold;
color: #ffff00;
}
.energy-bar-container {
width: 100%;
height: 20px;
background: rgba(0, 255, 255, 0.1);
border-radius: 10px;
overflow: hidden;
margin: 10px 0;
}
.energy-bar {
height: 100%;
background: linear-gradient(90deg, #ff0000, #ffff00, #0ff);
border-radius: 10px;
transition: width 0.5s ease;
position: relative;
}
.energy-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.sidebar {
display: flex;
flex-direction: column;
gap: 20px;
}
.log-section {
border: 1px solid #0ff;
border-radius: 8px;
padding: 15px;
background: rgba(0, 255, 255, 0.05);
height: 300px;
overflow-y: auto;
}
#systemLog {
font-size: 12px;
line-height: 1.4;
color: #00ff88;
}
.log-entry {
margin-bottom: 8px;
padding: 5px;
border-left: 2px solid #0ff;
background: rgba(0, 255, 255, 0.05);
}
.artifact-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 10px;
}
.artifact {
text-align: center;
padding: 10px;
background: rgba(0, 255, 255, 0.1);
border-radius: 5px;
border: 1px solid #0ff;
}
.artifact-icon {
font-size: 24px;
margin-bottom: 5px;
}
.crew-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.crew-member {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px;
background: rgba(0, 255, 255, 0.1);
border-radius: 5px;
border-left: 3px solid #00ff88;
}
.crew-status {
width: 8px;
height: 8px;
border-radius: 50%;
background: #00ff00;
}
.crew-status.inactive {
background: #ff0000;
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.glyph {
font-family: 'Segoe UI Symbol', sans-serif;
}
.warning {
color: #ff0000;
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
.sidebar {
order: -1;
}
}
</style>
</head>
<body>
<div class="stars" id="stars"></div>
<div class="header">
<div class="main-title">✦ Anomilia Stella ‡†P§inetika†‡ ✦</div>
<div class="subtitle">Класс: ‡†P§inetik†‡ | Статус: Хранитель | Режим: Автопилот</div>
</div>
<div class="container">
<div class="main-panel">
<div class="visualization-section">
<div class="section-title">𓂀𓅓𓌝𓇼 Тактический дисплей космической траектории</div>
<canvas id="trajectoryCanvas"></canvas>
<div class="status-grid">
<div class="status-item">
<div class="status-label">ЭНЕРГИЯ ЯДРА</div>
<div class="status-value"><span id="energyPercent">1.1</span>%</div>
<div class="energy-bar-container">
<div class="energy-bar" id="energyBar" style="width: 1.1%;"></div>
</div>
</div>
<div class="status-item">
<div class="status-label">КООРДИНАТЫ RA/DEC</div>
<div class="status-value"><span id="raValue">1.965</span> / <span id="decValue">37.78</span></div>
</div>
<div class="status-item">
<div class="status-label">ME ЭНЕРГИЯ</div>
<div class="status-value"><span id="MEValue">5859.19</span></div>
</div>
<div class="status-item">
<div class="status-label">WAVES ЭНЕРГИЯ</div>
<div class="status-value"><span id="wavesValue">11.0494</span></div>
</div>
</div>
</div>
<div class="visualization-section">
<div class="section-title">🛸 Приборная панель управления</div>
<div class="status-grid">
<div class="status-item">
<div class="status-label">РЕЖИМ ДВИЖЕНИЯ</div>
<div class="status-value pulse">Автопилот</div>
</div>
<div class="status-item">
<div class="status-label">КУРС</div>
<div class="status-value">Urbs Purpurea Vetita</div>
</div>
<div class="status-item">
<div class="status-label">СИМБИОЗ</div>
<div class="status-value">Стабилен ~ XV равновесие</div>
</div>
<div class="status-item">
<div class="status-label">WARP МОДУЛЬ</div>
<div class="status-value warning">Спящий режим</div>
</div>
</div>
</div>
</div>
<div class="sidebar">
<div class="log-section">
<div class="section-title">📡 СИСТЕМНЫЙ ЛОГ</div>
<div id="systemLog">
<div class="log-entry">[23:57:26] 🚩 Прибытие: Urbs Purpurea Vetita</div>
<div class="log-entry">[23:57:26] Орбита установлена</div>
<div class="log-entry">[23:57:31] Статус: Стабилен</div>
</div>
</div>
<div class="visualization-section">
<div class="section-title">🗝️ АРТЕФАКТЫ НА БОРТУ</div>
<div class="artifact-grid">
<div class="artifact">
<div class="artifact-icon">🧊</div>
<div>Terque Astronomikum</div>
</div>
<div class="artifact">
<div class="artifact-icon">👁️</div>
<div>Око Arx</div>
</div>
<div class="artifact">
<div class="artifact-icon">💎</div>
<div>Кристалл Симбиоза</div>
</div>
<div class="artifact">
<div class="artifact-icon">🐉</div>
<div>Дракон Хаоса</div>
</div>
</div>
</div>
<div class="visualization-section">
<div class="section-title">✦ ЭКИПАЖ ФРЕГАТА Ƀeta</div>
<div class="crew-list">
<div class="crew-member">
<span>‡†P§inetik†‡ - Капитан</span>
<div class="crew-status"></div>
</div>
<div class="crew-member">
<span>Astro✦ - Исследователь</span>
<div class="crew-status"></div>
</div>
<div class="crew-member">
<span>Air - Оператор энергопотоков</span>
<div class="crew-status"></div>
</div>
<div class="crew-member">
<span>XIII ~ XV Стражи</span>
<div class="crew-status pulse"></div>
</div>
</div>
</div>
</div>
</div>
<script>
// Создание звездного фона
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 200;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.className = 'star';
const size = Math.random() * 2;
const x = Math.random() * 100;
const y = Math.random() * 100;
const opacity = Math.random() * 0.8 + 0.2;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.left = `${x}%`;
star.style.top = `${y}%`;
star.style.opacity = opacity;
star.style.animation = `twinkle ${Math.random() * 5 + 3}s infinite`;
starsContainer.appendChild(star);
}
}
// Инициализация canvas
const canvas = document.getElementById('trajectoryCanvas');
const ctx = canvas.getContext('2d');
let RA = 1.965, Dec = 37.78;
let trajectory = [];
let energyME = 5859.19;
let energyWAVES = 11.0494;
let percent = 1.1;
const objects = [
{ name: "Sol Vetitum", type: 'star', x: 0, y: 0, radius: 30, color: '#ffff00' },
{ name: "Urbs Purpurea Vetita", type: 'planet', orbitRadius: 100, orbitSpeed: 0.002, phase: 0, color: '#b300ff', radius: 15 },
{ name: "Aurea", type: 'planet', orbitRadius: 180, orbitSpeed: 0.0015, phase: Math.PI / 2, color: '#ffd700', radius: 12 },
{ name: "Viridion", type: 'planet', orbitRadius: 240, orbitSpeed: 0.001, phase: Math.PI, color: '#00ff88', radius: 14 },
{ name: "Cristallis Minor", type: 'moon', orbitRadius: 40, orbitSpeed: 0.003, phase: Math.PI / 4, color: '#80e0ff', parent: "Urbs Purpurea Vetita", radius: 6 }
];
function resizeCanvas() {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
function updateEnergy() {
// Имитация флуктуаций энергии
energyME += (Math.random() - 0.5) * 0.5;
energyWAVES += (Math.random() - 0.5) * 0.002;
// Ограничение значений
energyME = Math.max(5850, Math.min(5865, energyME));
energyWAVES = Math.max(11.04, Math.min(11.06, energyWAVES));
// Медленное увеличение процента (имитация подзарядки)
percent = Math.min(percent + (Math.random() * 0.01), 5.0);
// Обновление интерфейса
document.getElementById('MEValue').textContent = energyME.toFixed(2);
document.getElementById('wavesValue').textContent = energyWAVES.toFixed(4);
document.getElementById('energyPercent').textContent = percent.toFixed(1);
document.getElementById('energyBar').style.width = percent + '%';
document.getElementById('raValue').textContent = RA.toFixed(3);
document.getElementById('decValue').textContent = Dec.toFixed(2);
}
function updateLog() {
const log = document.getElementById('systemLog');
const timestamp = new Date().toLocaleTimeString();
// Обновление координат
RA += (Math.random() - 0.5) * 0.0001;
Dec += (Math.random() - 0.5) * 0.0001;
// Добавление случайных событий
if (Math.random() < 0.3) {
const events = [
`[${timestamp}] ⚡ Стабильный поток энергии`,
`[${timestamp}] 🌌 Сканирование аномалий...`,
`[${timestamp}] 🔮 Симбиоз: устойчивое состояние`,
`[${timestamp}] 🛡️ Защита: активна (Белый филин)`,
`[${timestamp}] 📡 Прием данных с Urbs Purpurea`
];
const newEntry = document.createElement('div');
newEntry.className = 'log-entry';
newEntry.textContent = events[Math.floor(Math.random() * events.length)];
log.appendChild(newEntry);
// Ограничение количества записей
if (log.children.length > 8) {
log.removeChild(log.firstChild);
}
// Прокрутка к новым сообщениям
log.scrollTop = log.scrollHeight;
}
}
function drawUniverse(time) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const scale = Math.min(canvas.width, canvas.height) / 600;
// Рисование звездного фона на canvas
for (let i = 0; i < 50; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const size = Math.random() * 1.5;
const opacity = Math.random() * 0.8 + 0.2;
ctx.fillStyle = `rgba(255, 255, 255, ${opacity})`;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fill();
}
// Рисование объектов
objects.forEach(obj => {
let x, y;
if (obj.type === 'star') {
x = centerX;
y = centerY;
} else if (obj.type === 'planet') {
const angle = obj.phase + time * obj.orbitSpeed;
x = centerX + Math.cos(angle) * obj.orbitRadius * scale;
y = centerY + Math.sin(angle) * obj.orbitRadius * scale;
} else if (obj.type === 'moon') {
const parent = objects.find(p => p.name === obj.parent);
const parentAngle = parent.phase + time * parent.orbitSpeed;
const parentX = centerX + Math.cos(parentAngle) * parent.orbitRadius * scale;
const parentY = centerY + Math.sin(parentAngle) * parent.orbitRadius * scale;
const moonAngle = obj.phase + time * obj.orbitSpeed;
x = parentX + Math.cos(moonAngle) * obj.orbitRadius * scale;
y = parentY + Math.sin(moonAngle) * obj.orbitRadius * scale;
}
// Рисование орбит
if (obj.type === 'planet') {
ctx.strokeStyle = 'rgba(0, 255, 255, 0.2)';
ctx.beginPath();
ctx.arc(centerX, centerY, obj.orbitRadius * scale, 0, Math.PI * 2);
ctx.stroke();
}
// Рисование объекта
const gradient = ctx.createRadialGradient(x, y, 0, x, y, obj.radius * scale);
gradient.addColorStop(0, obj.color);
gradient.addColorStop(1, 'transparent');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, obj.radius * scale, 0, Math.PI * 2);
ctx.fill();
// Подпись объекта
ctx.fillStyle = '#fff';
ctx.font = `${10 * scale}px monospace`;
ctx.fillText(obj.name, x + obj.radius * scale + 5, y + 4);
});
// Рисование корабля (центральная точка)
ctx.fillStyle = '#ffff00';
ctx.beginPath();
ctx.arc(centerX, centerY, 8 * scale, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#0ff';
ctx.font = `${12 * scale}px monospace`;
ctx.fillText('‡†P§inetik†‡', centerX + 15, centerY + 5);
}
function animate() {
const time = Date.now() / 1000;
drawUniverse(time);
requestAnimationFrame(animate);
}
// Инициализация
window.addEventListener('load', () => {
createStars();
resizeCanvas();
animate();
setInterval(updateEnergy, 2000);
setInterval(updateLog, 3000);
// Добавление эффекта мерцания для низкой энергии
const energyBar = document.getElementById('energyBar');
if (parseFloat(percent) < 5) {
energyBar.classList.add('pulse');
}
});
window.addEventListener('resize', resizeCanvas);
</script>
</body>
</html>
