<div class="col-lg-9 order-is-first">
<div class="with_code"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></div>
</div>
<title></title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet" />
<style type="text/css">:root {
--bg: #050608;
--panel: #0d1117;
--panel-brighter: #161b22;
--accent: #00ff88;
--accent-glow: rgba(0, 255, 136, 0.3);
--accent-soft: rgba(0, 255, 136, 0.05);
--text: #e6edf3;
--text-dim: #8b949e;
--border: rgba(0, 255, 136, 0.15);
--danger: #ff4b4b;
}
* { box-sizing: border-box; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
body {
}
.fs-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 20px; }
/* --- БАННЕР (НЕ ТРОГАЕМ) --- */
.banner {
width: 100%; height: 180px;
background-size: cover; background-position: center;
border-radius: 24px; margin-bottom: 25px;
border: 1px solid var(--border); position: relative;
overflow: hidden; display: flex; align-items: center; justify-content: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,7,9,0.8) 0%, rgba(6,7,9,0.2) 100%); }
.security-protocol {
font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 2.2rem;
letter-spacing: 12px; z-index: 3; color: var(--accent); text-shadow: 0 0 25px var(--accent-glow);
}
/* --- HUD BAR --- */
.fs-hud-bar {
background: rgba(13, 17, 23, 0.8);
backdrop-filter: blur(10px);
border: 1px solid var(--border);
padding: 15px 30px; border-radius: 20px;
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 30px;
}
.hud-item { display: flex; align-items: center; gap: 12px; }
.hud-icon { color: var(--accent); filter: drop-shadow(0 0 5px var(--accent-glow)); display: flex; }
.hud-content { display: flex; flex-direction: column; }
.hud-label { font-size: 9px; font-family: 'Orbitron'; color: var(--accent); opacity: 0.6; letter-spacing: 1px; }
.hud-value { font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; }
/* --- HEADER --- */
.fs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; gap: 20px; flex-wrap: wrap; }
.h-title { font-family: 'Orbitron', sans-serif; font-size: 32px; margin: 0; font-weight: 800; letter-spacing: -1px; }
.h-title span { color: var(--accent); text-shadow: 0 0 15px var(--accent-glow); }
.search-box { position: relative; flex: 1; max-width: 450px; }
.search-box input {
width: 100%; background: var(--panel); border: 1px solid var(--border);
padding: 16px 20px 16px 55px; border-radius: 16px; color: #fff; outline: none; font-size: 14px;
}
.search-box input:focus { border-color: var(--accent); box-shadow: 0 0 20px var(--accent-soft); background: var(--panel-brighter); }
.search-box svg { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--accent); width: 20px; }
/* --- GRID --- */
.fs-grid { display: grid; grid-template-columns: 320px 1fr; gap: 30px; }
.fs-sidebar { display: flex; flex-direction: column; gap: 12px; }
.nav-btn {
background: var(--panel); border: 1px solid var(--border);
padding: 18px; border-radius: 18px; cursor: pointer;
display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden;
}
.nav-btn:hover { border-color: var(--accent); transform: translateX(5px); background: var(--panel-brighter); }
.nav-btn.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 20px rgba(0,255,136,0.05); }
.nav-btn .icon-box {
width: 42px; height: 42px; border-radius: 12px; background: rgba(0,255,136,0.05);
display: flex; align-items: center; justify-content: center; color: var(--text-dim);
}
.nav-btn.active .icon-box { color: var(--accent); background: rgba(0,255,136,0.1); filter: drop-shadow(0 0 8px var(--accent-glow)); }
.nav-btn-info b { display: block; font-size: 14px; font-family: 'Orbitron'; color: #fff; letter-spacing: 1px; }
.nav-btn-info span { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }
/* --- CONTENT CARDS --- */
.fs-content { min-height: 600px; }
.rule-card {
background: var(--panel); border: 1px solid var(--border);
padding: 24px; border-radius: 20px; display: flex; gap: 20px;
margin-bottom: 16px; cursor: pointer; position: relative; overflow: hidden;
}
.rule-card:hover { border-color: var(--accent); transform: scale(1.01); background: var(--panel-brighter); }
.rule-icon-box {
width: 54px; height: 54px; background: var(--bg); color: var(--accent);
border: 1px solid var(--border); border-radius: 14px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rule-body b { display: block; font-size: 16px; font-family: 'Orbitron'; color: #fff; margin-bottom: 8px; }
.rule-body p { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.6; }
.punish {
display: inline-block; margin-top: 12px; padding: 4px 10px;background: rgba(255, 71, 87, 0.1); border: 1px solid rgba(255, 71, 87, 0.2);
color: var(--danger); font-size: 10px; font-weight: 800; border-radius: 6px;
text-transform: uppercase; letter-spacing: 1px;
}
/* --- NEW MODERN FOOTER --- */
.fs-footer {
margin-top: 60px; padding-top: 40px;
border-top: 1px solid var(--border);
display: grid; grid-template-columns: 1fr 2fr; gap: 40px;
}
.footer-brand b { font-family: 'Orbitron'; font-size: 20px; color: var(--accent); display: block; margin-bottom: 10px; }
.footer-brand p { font-size: 13px; color: var(--text-dim); max-width: 300px; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.f-card {
background: var(--panel); border: 1px solid var(--border);
padding: 20px; border-radius: 16px; text-decoration: none;
display: flex; flex-direction: column; gap: 12px;
}
.f-card:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-5px); }
.f-card svg { color: var(--accent); width: 24px; height: 24px; }
.f-card b { font-family: 'Orbitron'; font-size: 13px; color: #fff; }
.f-card span { font-size: 11px; color: var(--text-dim); }
/* --- NOTIFICATIONS --- */
#fs-notify-container { position: fixed; bottom: 30px; right: 30px; z-index: 10000; display: flex; flex-direction: column; gap: 10px; }
.toast {
background: #0d1117; border: 1px solid var(--accent);
color: #fff; padding: 15px 25px; border-radius: 12px;
display: flex; align-items: center; gap: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
animation: toastIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
min-width: 300px;
}
@keyframes toastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast.fadeOut { transform: translateX(120%); opacity: 0; transition: 0.4s; }
.ripple { position: absolute; background: var(--accent); transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%; animation: rippleAnim 0.6s linear; opacity: 0.3; }
@keyframes rippleAnim { from { width: 0; height: 0; } to { width: 500px; height: 500px; opacity: 0; } }
@media (max-width: 900px) {
.fs-grid { grid-template-columns: 1fr; }
.fs-sidebar { flex-direction: row; overflow-x: auto; padding-bottom: 10px; }
.nav-btn { min-width: 250px; }
.fs-footer { grid-template-columns: 1fr; text-align: center; }
.footer-brand p { margin: 0 auto 20px; }
.footer-links { grid-template-columns: 1fr; }
}
</style>
<div id="fs-notify-container"> </div>
<div class="fs-container"><!-- БАННЕР -->
<div class="banner" style="background-image: url('https://dev-meta.ru/uploads/custom/84f1b46f-819b-4544-9c73-7c2a16d4798f.jpg');">
<div class="security-protocol"> Dev-Meta.Ru ACCESS</div>
</div>
<!-- HUD BAR -->
<div class="fs-hud-bar">
<div class="hud-item">
<div class="hud-icon"><svg fill="currentColor" height="20" viewbox="0 0 24 24" width="20"><path d="M12 2L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 14l-4-4 1.41-1.41L10 13.17l5.59-5.59L17 9l-7 7z"></path></svg></div>
<div class="hud-content"><span class="hud-label">STATUS</span> <span class="hud-value">SECURED</span></div>
</div>
<div class="hud-item">
<div class="hud-icon"><svg fill="currentColor" height="20" viewbox="0 0 24 24" width="20"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 15l-5-5h10l-5 5z"></path></svg></div>
<div class="hud-content"><span class="hud-label">DATABASE</span> <span class="hud-value">v5.2.0</span></div>
</div>
<div class="hud-item">
<div class="hud-icon"><svg fill="currentColor" height="20" viewbox="0 0 24 24" width="20"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></svg></div>
<div class="hud-content"><span class="hud-label">UPTIME</span> <span class="hud-value" id="uptime">00:00:00</span></div>
</div>
</div>
<!-- HEADER -->
<header class="fs-header">
<h1 class="h-title">Dev-Meta.Ru <span>PROTOCOLS</span></h1>
<div class="search-box"><svg fill="currentColor" viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"></path></svg> <input id="ruleSearch" onkeyup="search()" placeholder="Поиск по регламенту сервера..." type="text" /></div>
</header>
<div class="fs-grid"><!-- SIDEBAR -->
<nav class="fs-sidebar">
<div class="nav-btn active" onclick="tab('main', this)">
<div class="icon-box"><svg fill="currentColor" height="22" viewbox="0 0 24 24" width="22"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg></div>
<div class="nav-btn-info"><b>ГЛАВНОЕ</b><span>Общий регламент</span></div>
</div>
<div class="nav-btn" onclick="tab('game', this)">
<div class="icon-box"><svg fill="currentColor" height="22" viewbox="0 0 24 24" width="22"><path d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-10 7H8v3H6v-3H3v-2h3V8h2v3h3v2z"></path></svg></div>
<div class="nav-btn-info"><b>ГЕЙМПЛЕЙ</b><span>Процесс игры</span></div>
</div>
<div class="nav-btn" onclick="tab('chat', this)">
<div class="icon-box"><svg fill="currentColor" height="22" viewbox="0 0 24 24" width="22"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2z"></path></svg></div>
<div class="nav-btn-info"><b>ОБЩЕНИЕ</b><span>Чат и Voice</span></div>
</div>
<div class="nav-btn" onclick="tab('soft', this)">
<div class="icon-box"><svg fill="currentColor" height="22" viewbox="0 0 24 24" width="22"><path d="M12 2L4 5v6.09c0 5.05 3.41 9.76 8 10.91 4.59-1.15 8-5.86 8-10.91V5l-8-3z"></path></svg></div>
<div class="nav-btn-info"><b>ЗАПРЕТЫ</b><span>Читы и софт</span></div>
</div>
<div class="nav-btn" onclick="tab('admin', this)">
<div class="icon-box"><svg fill="currentColor" height="22" viewbox="0 0 24 24" width="22"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg></div>
<div class="nav-btn-info"><b>ROOT ACCESS</b><span>Администрация</span></div>
</div>
</nav>
<main class="fs-content">
<div id="rules-box"> </div>
</main>
</div>
<!-- NEW FOOTER -->
<footer class="fs-footer">
<div class="footer-brand"><b>Dev-Meta.Ru PROJECT</b>
<p>Уникальное игровое пространство с жестким регламентом и качественным геймплеем. Присоединяйтесь к нашему сообществу.</p>
</div>
<div class="footer-links"><a class="f-card" href="https://dev-meta.ru/" target="_blank"><svg fill="currentColor" viewbox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 0 0-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.63-.2-1.12-.31-1.08-.66.02-.18.27-.36.74-.55 2.91-1.27 4.86-2.11 5.83-2.51 2.78-1.16 3.35-1.36 3.73-1.36.08 0 .27.02.39.12.1.08.13.19.14.27-.01.06.01.24 0 .38z"></path></svg> <b>TELEGRAM</b> <span>Свежие новости и обновления</span> </a> <a class="f-card" href="/support" target="_blank"> <svg fill="none" stroke="currentColor" stroke-width="2" viewbox="0 0 24 24"><path d="M18.36 5.64a9 9 0 11-12.72 0M12 2v10" stroke-linecap="round" stroke-linejoin="round"></path></svg> <b>SUPPORT</b> <span>Помощь по всем вопросам</span> </a> <a class="f-card" href="/custom_store" target="_blank"> <svg fill="currentColor" viewbox="0 0 24 24"><path d="M12 13a5 5 0 01-5-5 5 5 0 015-5 5 5 0 015 5 5 5 0 01-5 5m0-12a7 7 0 00-7 7 7 7 0 00 7 7 7 7 0 00 7-7 7 7 0 00-7-7m7 15H5a3 3 0 00-3 3v1h20v-1a3 3 0 00-3-3z"></path></svg> <b>STORE</b> <span>Привилегии и услуги</span> </a></div>
</footer>
</div>
<script>
const database = {
main: {
items: [
{ id: "1.1", t: "Согласие", d: "Играя на сервере, вы автоматически принимаете текущий устав проекта.", p: "Варн" },
{ id: "1.2", t: "Никнеймы", d: "Запрещены ники с оскорблениями, матом, рекламой или похожие на ники админов.", p: "Кик / Бан 1ч" },
{ id: "1.3", t: "Реклама", d: "Запрещено упоминание сторонних проектов, сайтов или IP в чате/голосе/нике.", p: "Бан навсегда" },
{ id: "1.5", t: "Провокация", d: "Запрещено провоцировать игроков или администрацию на конфликтные ситуации.", p: "Мут / Бан 1 день" }
]
},
game: {
items: [
{ id: "2.1", t: "Цель карты", d: "Обязательное выполнение задачи: постановка/дефьюз бомбы или спасение заложников.", p: "Слей / Кик" },
{ id: "2.2", t: "Мониторинг", d: "Запрещено передавать инфу о противнике через сторонние программы (Discord/TS).", p: "Бан 7 дней" },
{ id: "2.5", t: "Баги карты", d: "Запрещено использование текстурных дыр, выход за карту или прострел багом.", p: "Бан 1 день" }
]
},
chat: {
items: [
{ id: "3.1", t: "Voice 16+", d: "Микрофон строго 16+. Исключение — адекватное поведение и хорошая техника.", p: "Мут" },
{ id: "3.3", t: "Родители", d: "Любое упоминание (даже завуалированное) родных в негативном контексте.", p: "Бан навсегда" },
{ id: "3.6", t: "Национализм", d: "Оскорбления по расовому, национальному или религиозному признаку.", p: "Бан навсегда" }
]
},
soft: {
items: [
{ id: "4.1", t: "Читы", d: "Использование AIM, WH, ESP, TriggerBot и любого другого софта.", p: "Бан навсегда" },
{ id: "4.3", t: "Проверка", d: "Отказ от проверки на читы (Discord/AnyDesk) или выход во время неё.", p: "Бан навсегда" }
]
},
admin: {
items: [
{ id: "5.1", t: "Злоупотребление", d: "Запрещено использование прав для личных целей (баны без причины, кики).", p: "Снятие прав" },
{ id: "5.3", t: "Этика", d: "Администратор — лицо проекта. Обязан быть вежливым и рассудительным.", p: "Выговор" }
]
}
};
function notify(msg) {
const container = document.getElementById('fs-notify-container');
const toast = document.createElement('div');
toast.className = 'toast';
toast.innerHTML = `
<svg style="width:24px;height:24px;color:var(--accent)" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div>
<div style="font-weight:800; font-size:12px; font-family:Orbitron; color:var(--accent)">PROTOCOL COPIED</div>
<div style="font-size:11px; color:var(--text-dim)">${msg}</div>
</div>
`;
container.appendChild(toast);
setTimeout(() => {
toast.classList.add('fadeOut');
setTimeout(() => toast.remove(), 400);
}, 3000);
}
function createRipple(event, element) {
const ripple = document.createElement('span');
ripple.className = 'ripple';
const rect = element.getBoundingClientRect();
ripple.style.left = `${event.clientX - rect.left}px`;
ripple.style.top = `${event.clientY - rect.top}px`;
element.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);
}
function tab(key, el) {
const box = document.getElementById('rules-box');
document.querySelectorAll('.nav-btn').forEach(n => n.classList.remove('active'));
el.classList.add('active');
box.style.opacity = '0';
setTimeout(() => {
box.innerHTML = '';
database[key].items.forEach((item, index) => {
const card = document.createElement('div');
card.className = 'rule-card';
card.style.animation = `toastIn 0.3s ease forwards ${index * 0.05}s`;
card.onclick = (e) => {
createRipple(e, card);
navigator.clipboard.writeText(`Нарушение правила ${item.id} (${item.t})`);
notify(`Пункт ${item.id} успешно скопирован`);
};
card.innerHTML = `
<div class="rule-icon-box">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
</div>
<div class="rule-body">
<b>${item.id} // ${item.t}</b>
<p>${item.d}</p>
<div class="punish">САНКЦИЯ: ${item.p}</div>
</div>`;
box.appendChild(card);
});
box.style.opacity = '1';
}, 200);
}
function search() {
const q = document.getElementById('ruleSearch').value.toLowerCase();
document.querySelectorAll('.rule-card').forEach(c => {
const match = c.innerText.toLowerCase().includes(q);
c.style.display = match ? 'flex' : 'none';
});
}
// Uptime Timer
let s = 0;
setInterval(() => {
s++;
let h = Math.floor(s/3600).toString().padStart(2,'0');
let m = Math.floor((s%3600)/60).toString().padStart(2,'0');
let sec = (s%60).toString().padStart(2,'0');
const el = document.getElementById('uptime');
if(el) el.innerText = `${h}:${m}:${sec}`;
}, 1000);
document.addEventListener('DOMContentLoaded', () => {
tab('main', document.querySelector('.nav-btn'));
});
</script>