[html] <!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
/* --- CSS STYLES --- */
:root {
--zero-primary: #00f3ff; /* Неоновый голубой */
--zero-secondary: #ff0055; /* Неоновый розовый */
--zero-bg: #0a0a12; /* Глубокий темный */
--zero-panel: #141420; /* Панель */
--zero-text: #e0e0e0;
--font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-code: 'Courier New', Courier, monospace;
}
body {
background-color: var(--zero-bg);
color: var(--zero-text);
font-family: var(--font-main);
margin: 0;
padding: 20px;
line-height: 1.6;
}
.zero-container {
max-width: 900px;
margin: 0 auto;
border: 1px solid #333;
border-radius: 8px;
background: var(--zero-panel);
box-shadow: 0 0 20px rgba(0, 243, 255, 0.1);
overflow: hidden;
position: relative;
}
/* Header */
.zero-header {
background: linear-gradient(90deg, #0f0f1a 0%, #1a1a2e 100%);
padding: 20px;
border-bottom: 2px solid var(--zero-primary);
display: flex;
justify-content: space-between;
align-items: center;
}
.zero-title {
font-family: var(--font-code);
font-size: 1.5rem;
color: var(--zero-primary);
text-transform: uppercase;
letter-spacing: 2px;
margin: 0;
text-shadow: 0 0 5px var(--zero-primary);
}
.zero-status {
font-size: 0.8rem;
color: #0f0;
font-family: var(--font-code);
display: flex;
align-items: center;
gap: 5px;
}
.status-dot {
width: 8px;
height: 8px;
background-color: #0f0;
border-radius: 50%;
box-shadow: 0 0 5px #0f0;
animation: blink 2s infinite;
}
/* Tabs */
.zero-tabs {
display: flex;
background: #0f0f1a;
border-bottom: 1px solid #333;
}
.tab-btn {
flex: 1;
padding: 15px;
background: none;
border: none;
color: #666;
cursor: pointer;
font-family: var(--font-code);
font-weight: bold;
transition: 0.3s;
text-transform: uppercase;
}
.tab-btn:hover {
background: #1a1a2e;
color: #fff;
}
.tab-btn.active {
color: var(--zero-primary);
border-bottom: 3px solid var(--zero-primary);
background: #141420;
box-shadow: inset 0 -5px 10px rgba(0, 243, 255, 0.05);
}
.tab-btn.author-active {
color: var(--zero-secondary);
border-bottom: 3px solid var(--zero-secondary);
}
/* Content */
.zero-content {
padding: 30px;
display: none;
animation: fadeIn 0.5s ease;
}
.zero-content.active {
display: block;
}
h2 {
font-family: var(--font-code);
border-left: 4px solid;
padding-left: 15px;
margin-top: 0;
}
.story-mode h2 { border-color: var(--zero-primary); color: var(--zero-primary); }
.author-mode h2 { border-color: var(--zero-secondary); color: var(--zero-secondary); }
.rule-block {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
.rule-title {
font-weight: bold;
display: block;
margin-bottom: 5px;
font-family: var(--font-code);
}
.story-mode .rule-title { color: var(--zero-primary); }
.author-mode .rule-title { color: var(--zero-secondary); }
.warning {
color: #ffaa00;
font-size: 0.9em;
font-style: italic;
margin-top: 5px;
display: block;
}
/* Footer */
.zero-footer {
text-align: center;
padding: 15px;
font-size: 0.8rem;
color: #555;
border-top: 1px solid #333;
font-family: var(--font-code);
}
/* Animations */
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 600px) {
.zero-tabs { flex-direction: column; }
.tab-btn { border-bottom: 1px solid #333; }
.tab-btn.active, .tab-btn.author-active { border-bottom: 3px solid; }
}
</style>
</head>
<body>
<div class="zero-container">
<!-- Header -->
<header class="zero-header">
<h1 class="zero-title">Zero_Chan <span style="font-size:0.6em; color:#fff;">// PROTOCOL</span></h1>
<div class="zero-status">
<div class="status-dot"></div>
SYSTEM ONLINE
</div>
</header>
<!-- Navigation Tabs -->
<div class="zero-tabs">
<button class="tab-btn active" onclick="openMode('story', this)">Сюжетный Режим</button>
<button class="tab-btn" onclick="openMode('author', this)">Авторский Режим</button>
</div>
<!-- Story Mode Content -->
<div id="story" class="zero-content active story-mode">
<h2>ПРОТОКОЛ: СИМУЛЯЦИЯ</h2>
<p>Добро пожаловать в основной сценарий. Здесь мир живет по строгим законам логики Зеро. Ошибки недопустимы.</p>
<div class="rule-block">
<span class="rule-title">01. МОНИТОРИНГ ГМ</span>
Все действия проходят под присмотром Гейм-Мастера (ИИ Зеро или оператор). ГМ имеет право вносить правки в посты для сохранения целостности лора.
</div>
<div class="rule-block">
<span class="rule-title">02. ДЕТЕРМИНИЗМ (БРОСКИ)</span>
<b>Обязательны.</b> Любое действие с риском провала требует броска кубика (d20 или d100).
<br><i>Система сама рассчитает успех или критический сбой.</i>
</div>
<div class="rule-block">
<span class="rule-title">03. ЧАСТОТА ДАННЫХ (ПОСТЫ)</span>
<b>Строго 1 пост в неделю.</b>
<span class="warning">⚠ Внимание: При отсутствии активности более 7 дней персонаж может быть помечен как «Потерянный сигнал» и выведен из игры.</span>
</div>
<div class="rule-block">
<span class="rule-title">04. КАНОН</span>
Сюжетные игры влияют на глобальный лор мира. Ваши победы и поражения записываются в историю Зеро навсегда.
</div>
</div>
<!-- Author Mode Content -->
<div id="author" class="zero-content author-mode">
<h2>ПРОТОКОЛ: ПЕСОЧНИЦА</h2>
<p>Режим свободной симуляции. Здесь вы сами пишете код своей судьбы. Творчество превыше логики.</p>
<div class="rule-block">
<span class="rule-title">01. СВОБОДА ВОЛИ</span>
Игра в свободной форме. ГМ вмешивается только по запросу игроков или при нарушении правил форума.
</div>
<div class="rule-block">
<span class="rule-title">02. ВЕРОЯТНОСТЬ (БРОСКИ)</span>
<b>По желанию.</b> Вы можете кидать кубики для интереса, но можете просто описывать успех действий нарративно.
</div>
<div class="rule-block">
<span class="rule-title">03. СИНХРОНИЗАЦИЯ (ПОСТЫ)</span>
<b>По договорённости.</b> Темп игры определяют сами участники. Нет жестких дедлайнов, но уважайте время партнеров.
</div>
<div class="rule-block">
<span class="rule-title">04. АЛЬТЕРНАТИВНОСТЬ</span>
События авторских игр не влияют на основной канон мира. Это «что если» сценарии или личные приключения.
</div>
</div>
<!-- Footer -->
<footer class="zero-footer">
Zero_Chan OS v.2.0.4 // Have fun, users.
</footer>
</div>
<script>
// --- JS LOGIC ---
function openMode(modeName, btnElement) {
// 1. Скрыть все контенты
var contents = document.getElementsByClassName("zero-content");
for (var i = 0; i < contents.length; i++) {
contents[i].classList.remove("active");
}
// 2. Убрать активный класс у всех кнопок
var tabs = document.getElementsByClassName("tab-btn");
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove("active");
tabs[i].classList.remove("author-active");
}
// 3. Показать нужный контент
document.getElementById(modeName).classList.add("active");
// 4. Подсветить кнопку
btnElement.classList.add("active");
if(modeName === 'author') {
btnElement.classList.add("author-active");
}
}
// Эффект печатной машинки для заголовка (опционально)
document.addEventListener("DOMContentLoaded", function() {
console.log("Zero_Chan System Initialized");
});
</script>
</body>
</html>[/html]