На сайте

<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&amp;family=Inter:wght@300;400;600;700&amp;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">&nbsp;</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">&nbsp;</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>