index.html - master - developer228/geniusstrategy

index.html
75 строк4 KB
developer228
update: index.html
01 май 2026, 17:40
01 май 2026, 17:409700183
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>GeniusStrategy | Chess & Chat</title>
    <style>
        /* Весь дизайн здесь */
        body { font-family: 'Segoe UI', sans-serif; background: #121212; color: #e0e0e0; margin: 0; display: flex; height: 100vh; overflow: hidden; }
        
        /* Боковая панель с чатом */
        #sidebar { width: 300px; background: #181818; border-right: 1px solid #333; display: flex; flex-direction: column; }
        #chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; font-size: 14px; background: #141414; }
        #chat-input { padding: 10px; background: #1f1f1f; border-top: 1px solid #333; display: flex; }
        
        /* Стили ников */
        .nick-admin { color: #bb86fc; font-weight: bold; text-shadow: 0 0 8px #bb86fc; } /* Твой фиолетовый */
        .nick-player { color: #03dac6; font-weight: bold; } /* Цвет игроков */
        .system-msg { color: #777; font-style: italic; font-size: 12px; }

        /* Центр: Шахматы и Эло */
        #main-content { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #1a1a1a; }
        .elo-badge { background: #333; padding: 5px 15px; border-radius: 20px; color: #03dac6; border: 1px solid #03dac6; margin-top: 10px; }
        
        input { flex-grow: 1; border: none; background: #2c2c2c; color: #fff; padding: 8px; border-radius: 4px; outline: none; }
        button { margin-left: 5px; background: #bb86fc; border: none; color: #000; font-weight: bold; cursor: pointer; border-radius: 4px; padding: 0 15px; }
    </style>
</head>
<body>

    <div id="sidebar">
        <div style="padding: 15px; background: #1f1f1f; font-weight: bold; border-bottom: 1px solid #333; text-align: center;">GeniusStrategy CHAT</div>
        <div id="chat-messages" id="chatBox">
            <div class="system-msg">Система: Добро пожаловать, создатель.</div>
        </div>
        <div id="chat-input">
            <input type="text" id="user-msg" placeholder="Сообщение...">
            <button onclick="sendMessage()">></button>
        </div>
    </div>

    <div id="main-content">
        <h2 style="margin-bottom: 15px; letter-spacing: 2px;">ШАХМАТНАЯ АРЕНА</h2>
        
        <!-- Шахматы через Lichess (самый легкий вариант) -->
        <iframe src="https://lichess.org" 
                width="600" height="600" frameborder="0" style="border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.5);"></iframe>
        
        <div class="elo-badge">Ваш рейтинг ELO: <span id="elo-val">1200</span></div>
    </div>

    <script>
        // Логика чата
        const chatBox = document.getElementById('chat-messages');
        const input = document.getElementById('user-msg');

        function sendMessage() {
            const text = input.value.trim();
            if (!text) return;

            const msgDiv = document.createElement('div');
            msgDiv.style.marginBottom = "8px";
            
            // Здесь магия цветного ника
            msgDiv.innerHTML = `<span class="nick-admin">Genius:</span> ${text}`;
            
            chatBox.appendChild(msgDiv);
            input.value = ''; 
            chatBox.scrollTop = chatBox.scrollHeight; 
        }

        input.addEventListener("keypress", (e) => { if (e.key === "Enter") sendMessage(); });
    </script>

</body>
</html>