Upload index (1).html

Browse files

Files changed (1) hide show

index (1).html +681 -0

index (1).html ADDED Viewed

	@@ -0,0 +1,681 @@

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🧠 Нейро-Змейка — Профессиональная версия</title>
+    <style>
+        :root {
+            --bg: #0f0f23;
+            --panel: #1a1a2e;
+            --text: #e6e6e6;
+            --primary: #4cc9f0;
+            --accent: #ff0;
+            --success: #0f0;
+            --danger: #f44;
+            --border: #2d2d44;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            background: var(--bg);
+            color: var(--text);
+            padding: 20px;
+            line-height: 1.6;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        header {
+            text-align: center;
+            margin-bottom: 30px;
+            padding: 20px;
+            background: rgba(26, 26, 46, 0.8);
+            border-radius: 15px;
+            border: 1px solid var(--primary);
+            box-shadow: 0 0 30px rgba(76, 201, 240, 0.2);
+        }
+        h1 {
+            color: var(--accent);
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 0 0 10px var(--accent);
+        }
+        .subtitle {
+            color: var(--primary);
+            font-size: 1.1rem;
+            opacity: 0.8;
+        }
+        .main-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 25px;
+            margin-bottom: 25px;
+        }
+        @media (max-width: 1200px) {
+            .main-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+        .panel {
+            background: var(--panel);
+            border-radius: 15px;
+            padding: 25px;
+            border: 1px solid var(--border);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        }
+        .panel-title {
+            color: var(--primary);
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid var(--border);
+            font-size: 1.4rem;
+        }
+        .input-group {
+            margin-bottom: 20px;
+        }
+        label {
+            display: block;
+            margin-bottom: 8px;
+            color: var(--primary);
+            font-weight: 600;
+        }
+        input, textarea {
+            width: 100%;
+            padding: 14px;
+            background: #0d0d1a;
+            border: 2px solid var(--primary);
+            color: var(--text);
+            border-radius: 8px;
+            font-size: 16px;
+            transition: border-color 0.3s;
+        }
+        input:focus, textarea:focus {
+            outline: none;
+            border-color: var(--accent);
+            box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
+        }
+        .controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin-top: 20px;
+        }
+        button {
+            background: var(--primary);
+            color: #000;
+            border: none;
+            padding: 14px 28px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-weight: bold;
+            font-size: 16px;
+            transition: all 0.3s;
+            border: 2px solid var(--primary);
+        }
+        button:hover {
+            background: var(--accent);
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(255, 255, 0, 0.4);
+        }
+        .btn-decrypt {
+            background: #4361ee;
+            border-color: #4361ee;
+        }
+        .btn-decrypt:hover {
+            background: #4cc9f0;
+            border-color: #4cc9f0;
+        }
+        .btn-reset {
+            background: #f44;
+            border-color: #f44;
+        }
+        .btn-reset:hover {
+            background: #ff0;
+            color: #000;
+            border-color: #ff0;
+        }
+        .result-area {
+            min-height: 120px;
+            background: #0d0d1a;
+            border: 2px solid var(--success);
+            border-radius: 8px;
+            padding: 20px;
+            font-family: 'Courier New', monospace;
+            font-size: 18px;
+            word-break: break-all;
+        }
+        .visualization {
+            margin-top: 25px;
+        }
+        .grid-container {
+            overflow-x: auto;
+            white-space: nowrap;
+            padding: 15px;
+            background: #0d0d1a;
+            border-radius: 10px;
+            margin-top: 15px;
+        }
+        .grid {
+            display: inline-block;
+            min-width: calc(26 * 36px);
+        }
+        .cell {
+            width: 36px;
+            height: 36px;
+            display: inline-block;
+            text-align: center;
+            line-height: 36px;
+            font-size: 14px;
+            border: 1px solid var(--border);
+            background: #16213e;
+            color: var(--text);
+            position: relative;
+            transition: all 0.2s;
+        }
+        .head {
+            background: var(--accent) !important;
+            color: #000 !important;
+            font-weight: bold;
+            box-shadow: 0 0 20px var(--accent);
+            transform: scale(1.15);
+            z-index: 10;
+        }
+        .body {
+            background: var(--primary) !important;
+            color: #000 !important;
+            box-shadow: 0 0 10px var(--primary);
+        }
+        .status-bar {
+            display: flex;
+            justify-content: space-around;
+            margin-top: 20px;
+            padding: 15px;
+            background: rgba(26, 26, 46, 0.6);
+            border-radius: 10px;
+            border: 1px solid var(--border);
+        }
+        .status-item {
+            text-align: center;
+        }
+        .status-value {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: var(--accent);
+        }
+        .status-label {
+            font-size: 0.9rem;
+            color: var(--primary);
+            opacity: 0.8;
+        }
+        .log {
+            background: #0d0d1a;
+            padding: 15px;
+            border-radius: 8px;
+            margin-top: 15px;
+            max-height: 150px;
+            overflow-y: auto;
+            font-family: monospace;
+            font-size: 14px;
+            border: 1px solid var(--border);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🧠 Нейро-Змейка — Профессиональная версия</h1>
+            <p class="subtitle">Шифрование с лавинным эффектом и полной обратимостью</p>
+        </header>
+        <div class="main-grid">
+            <div class="panel">
+                <h2 class="panel-title">🔐 Настройки шифрования</h2>
+                <div class="input-group">
+                    <label for="alphabet">🔤 Алфавит (26 букв):</label>
+                    <input type="text" id="alphabet" value="ABCDEFGHIJKLMNOPQRSTUVWXYZ" readonly>
+                </div>
+                <div class="input-group">
+                    <label for="password">🔑 Пароль:</label>
+                    <input type="text" id="password" value="NEURAL_SNAKE_2026">
+                </div>
+                <div class="input-group">
+                    <label for="inputText">📄 Исходный текст:</label>
+                    <textarea id="inputText" rows="4">HELLO WORLD</textarea>
+                </div>
+                <div class="controls">
+                    <button onclick="encrypt()">🔒 Зашифровать</button>
+                    <button class="btn-reset" onclick="reset()">🔄 Сброс</button>
+                </div>
+            </div>
+            <div class="panel">
+                <h2 class="panel-title">🔓 Расшифровка</h2>
+                <div class="input-group">
+                    <label for="encryptedText">📜 Зашифрованный текст:</label>
+                    <textarea id="encryptedText" rows="4"></textarea>
+                </div>
+                <div class="input-group">
+                    <label for="decryptedText">✅ Расшифрованный текст:</label>
+                    <div class="result-area" id="decryptedText"></div>
+                </div>
+                <div class="controls">
+                    <button class="btn-decrypt" onclick="decrypt()">🔓 Расшифровать</button>
+                    <button class="btn-reset" onclick="corrupt()">💥 Повредить шифротекст</button>
+                </div>
+            </div>
+        </div>
+        <div class="panel visualization">
+            <h2 class="panel-title">🎮 Визуализация змеи</h2>
+            <p>Змейка движется по квадрату 26×26. Цвета: <span style="color:#ff0">🟡 Голова</span>, <span style="color:#4cc9f0">🔵 Тело</span></p>
+            <div class="grid-container">
+                <div class="grid" id="grid"></div>
+            </div>
+            <div class="status-bar">
+                <div class="status-item">
+                    <div class="status-value" id="pathLength">0</div>
+                    <div class="status-label">Длина пути</div>
+                </div>
+                <div class="status-item">
+                    <div class="status-value" id="freeCells">676</div>
+                    <div class="status-label">Свободных клеток</div>
+                </div>
+                <div class="status-item">
+                    <div class="status-value" id="currentPos">0,0</div>
+                    <div class="status-label">Текущая позиция</div>
+                </div>
+            </div>
+            <div class="log" id="log"></div>
+        </div>
+    </div>
+    <script>
+        // ==============================
+        // ХЕШ-ФУНКЦИЯ (простая, но детерминированная)
+        // ==============================
+        function simpleHash(str) {
+            let hash = 0;
+            for (let i = 0; i < str.length; i++) {
+                const char = str.charCodeAt(i);
+                hash = ((hash << 5) - hash) + char;
+                hash = hash & hash; // Преобразуем в 32-битное целое
+            }
+            return Math.abs(hash);
+        }
+        // ==============================
+        // ГЕНЕРАЦИЯ КВАДРАТА (Fisher-Yates)
+        // ==============================
+        function generateSquareFromPassword(alphabet, password) {
+            const N = 26;
+            const totalCells = N * N;
+            let cells = [];
+            for (let i = 0; i < totalCells; i++) {
+                cells.push(alphabet[i % alphabet.length]);
+            }
+            let seed = 0;
+            for (let c of password) {
+                seed = (seed * 31 + c.charCodeAt(0)) & 0x7FFFFFFF;
+            }
+            for (let i = totalCells - 1; i > 0; i--) {
+                seed = (seed * 1664525 + 1013904223) & 0x7FFFFFFF;
+                const j = Math.floor((seed / 0x80000000) * (i + 1));
+                [cells[i], cells[j]] = [cells[j], cells[i]];
+            }
+            let square = [];
+            for (let i = 0; i < N; i++) {
+                let row = '';
+                for (let j = 0; j < N; j++) {
+                    row += cells[i * N + j];
+                }
+                square.push(row);
+            }
+            return square;
+        }
+        // ==============================
+        // ГЕНЕРАЦИЯ ВЕСОВ ИЗ ПАРОЛЯ
+        // ==============================
+        function generateWeightsFromPassword(password) {
+            let seed = 0;
+            for (let c of password) {
+                seed = (seed * 31 + c.charCodeAt(0)) & 0x7FFFFFFF;
+            }
+            const weights = [];
+            const totalWeights = 4*64 + 64*64 + 64*676;
+            for (let i = 0; i < totalWeights; i++) {
+                seed = (seed * 1664525 + 1013904223) & 0x7FFFFFFF;
+                weights.push((seed / 0x7FFFFFFF) * 2 - 1);
+            }
+            return weights;
+        }
+        // ==============================
+        // НЕЙРОСЕТЬ: ВЫБОР СЛЕДУЮЩЕЙ КЛЕТКИ
+        // ==============================
+        function neuralChooseNextCell(x, y, step, hashValue, weights, N) {
+            const inputs = [
+                x / N,
+                y / N,
+                (step % 1000) / 999,
+                (hashValue % 10000) / 9999
+            ];
+            // Layer 1: 4 → 64
+            const l1 = [];
+            for (let i = 0; i < 64; i++) {
+                let sum = 0;
+                for (let j = 0; j < 4; j++) {
+                    sum += inputs[j] * weights[i * 4 + j];
+                }
+                l1.push(Math.tanh(sum));
+            }
+            // Layer 2: 64 → 64
+            const l2 = [];
+            const offset1 = 4 * 64;
+            for (let i = 0; i < 64; i++) {
+                let sum = 0;
+                for (let j = 0; j < 64; j++) {
+                    sum += l1[j] * weights[offset1 + i * 64 + j];
+                }
+                l2.push(Math.tanh(sum));
+            }
+            // Output: 64 → 676 (рейтинги всех клеток)
+            const ratings = [];
+            const offset2 = offset1 + 64 * 64;
+            for (let i = 0; i < N * N; i++) {
+                let sum = 0;
+                for (let j = 0; j < 64; j++) {
+                    sum += l2[j] * weights[offset2 + i * 64 + j];
+                }
+                ratings.push(sum);
+            }
+            return ratings;
+        }
+        // ==============================
+        // ЗМЕЙКА-ШИФРАТОР
+        // ==============================
+        class ProfessionalNeuralSnake {
+            constructor(alphabet, password) {
+                if (alphabet.length !== 26) {
+                    throw new Error('Алфавит должен содержать ровно 26 символов');
+                }
+                this.alphabet = alphabet;
+                this.password = password;
+                this.N = 26;
+                this.square = generateSquareFromPassword(alphabet, password);
+                this.weights = generateWeightsFromPassword(password);
+            }
+            encrypt(text) {
+                let x = 0, y = 0;
+                let occupied = new Set(["0,0"]);
+                let result = '';
+                let path = [{x, y}];
+                for (let step = 0; step < text.length; step++) {
+                    const c = text[step].toUpperCase();
+                    const idx = this.alphabet.indexOf(c);
+                    if (idx !== -1) {
+                        const keyChar = this.square[y][x];
+                        const keyIdx = this.alphabet.indexOf(keyChar);
+                        // Простое шифрование (можно усилить)
+                        const cipherIdx = (idx + keyIdx) % this.N;
+                        const cipherChar = this.alphabet[cipherIdx];
+                        result += cipherChar;
+                        // Хеш всего предыдущего шифротекста
+                        const prevCipher = result.slice(0, -1);
+                        const hashValue = simpleHash(prevCipher);
+                        // Выбираем следующую клетку
+                        const ratings = neuralChooseNextCell(x, y, step, hashValue, this.weights, this.N);
+                        let bestCell = null;
+                        let bestRating = -Infinity;
+                        for (let ny = 0; ny < this.N; ny++) {
+                            for (let nx = 0; nx < this.N; nx++) {
+                                if (!occupied.has(`${nx},${ny}`)) {
+                                    const cellIndex = ny * this.N + nx;
+                                    if (ratings[cellIndex] > bestRating) {
+                                        bestRating = ratings[cellIndex];
+                                        bestCell = {x: nx, y: ny};
+                                    }
+                                }
+                            }
+                        }
+                        if (bestCell === null) {
+                            throw new Error(`Нет свободных клеток на шаге ${step}`);
+                        }
+                        x = bestCell.x;
+                        y = bestCell.y;
+                        occupied.add(`${x},${y}`);
+                        path.push({x, y});
+                    } else {
+                        result += c;
+                        path.push({x, y});
+                    }
+                }
+                return { ciphertext: result, path };
+            }
+            decrypt(ciphertext) {
+                let x = 0, y = 0;
+                let occupied = new Set(["0,0"]);
+                let result = '';
+                for (let step = 0; step < ciphertext.length; step++) {
+                    const c = ciphertext[step];
+                    const idx = this.alphabet.indexOf(c);
+                    if (idx !== -1) {
+                        const keyChar = this.square[y][x];
+                        const keyIdx = this.alphabet.indexOf(keyChar);
+                        const plainIdx = (idx - keyIdx + this.N) % this.N;
+                        const plainChar = this.alphabet[plainIdx];
+                        result += plainChar;
+                        // Хеш всего предыдущего ШИФРОТЕКСТА (не расшифрованного!)
+                        const prevCipher = ciphertext.slice(0, step);
+                        const hashValue = simpleHash(prevCipher);
+                        const ratings = neuralChooseNextCell(x, y, step, hashValue, this.weights, this.N);
+                        let bestCell = null;
+                        let bestRating = -Infinity;
+                        for (let ny = 0; ny < this.N; ny++) {
+                            for (let nx = 0; nx < this.N; nx++) {
+                                if (!occupied.has(`${nx},${ny}`)) {
+                                    const cellIndex = ny * this.N + nx;
+                                    if (ratings[cellIndex] > bestRating) {
+                                        bestRating = ratings[cellIndex];
+                                        bestCell = {x: nx, y: ny};
+                                    }
+                                }
+                            }
+                        }
+                        if (bestCell === null) break;
+                        x = bestCell.x;
+                        y = bestCell.y;
+                        occupied.add(`${x},${y}`);
+                    } else {
+                        result += c;
+                    }
+                }
+                return result;
+            }
+            render(path) {
+                let occupied = new Set();
+                for (let p of path) {
+                    occupied.add(`${p.x},${p.y}`);
+                }
+                let html = '';
+                for (let y = 0; y < this.N; y++) {
+                    for (let x = 0; x < this.N; x++) {
+                        let cls = 'cell';
+                        if (occupied.has(`${x},${y}`)) cls += ' body';
+                        html += `<div class="${cls}">${this.square[y][x]}</div>`;
+                    }
+                    html += '<br>';
+                }
+                return html;
+            }
+        }
+        // ==============================
+        // ГЛОБАЛЬНЫЕ ФУНКЦИИ
+        // ==============================
+        let currentPath = [];
+        function encrypt() {
+            try {
+                const alphabet = document.getElementById('alphabet').value;
+                const password = document.getElementById('password').value;
+                const text = document.getElementById('inputText').value;
+                const cipher = new ProfessionalNeuralSnake(alphabet, password);
+                const { ciphertext, path } = cipher.encrypt(text);
+                currentPath = path;
+                document.getElementById('encryptedText').value = ciphertext;
+                document.getElementById('decryptedText').textContent = '';
+                document.getElementById('log').textContent = `✅ Зашифровано: "${text}" → "${ciphertext}"`;
+                updateVisualization(cipher, path);
+            } catch (e) {
+                document.getElementById('log').textContent = `❌ Ошибка шифрования: ${e.message}`;
+            }
+        }
+        function decrypt() {
+            try {
+                const alphabet = document.getElementById('alphabet').value;
+                const password = document.getElementById('password').value;
+                const ciphertext = document.getElementById('encryptedText').value;
+                if (!ciphertext) {
+                    throw new Error('Введите зашифрованный текст');
+                }
+                const cipher = new ProfessionalNeuralSnake(alphabet, password);
+                const plaintext = cipher.decrypt(ciphertext);
+                document.getElementById('decryptedText').textContent = plaintext;
+                document.getElementById('log').textContent = `✅ Расшифровано: "${ciphertext}" → "${plaintext}"`;
+                updateVisualization(cipher, currentPath);
+            } catch (e) {
+                document.getElementById('log').textContent = `❌ Ошибка расшифровки: ${e.message}`;
+            }
+        }
+        function corrupt() {
+            const encrypted = document.getElementById('encryptedText').value;
+            if (!encrypted) return;
+            // Изменяем случайный символ
+            const chars = encrypted.split('');
+            const pos = Math.floor(Math.random() * chars.length);
+            const original = chars[pos];
+            let replacement;
+            do {
+                replacement = String.fromCharCode(Math.floor(Math.random() * 26) + 65);
+            } while (replacement === original);
+            chars[pos] = replacement;
+            document.getElementById('encryptedText').value = chars.join('');
+            document.getElementById('log').textContent = `💥 Шифротекст повреждён в позиции ${pos}: ${original} → ${replacement}`;
+        }
+        function reset() {
+            document.getElementById('inputText').value = 'HELLO WORLD';
+            document.getElementById('encryptedText').value = '';
+            document.getElementById('decryptedText').textContent = '';
+            document.getElementById('log').textContent = 'Система сброшена';
+            document.getElementById('grid').innerHTML = '';
+            currentPath = [];
+            updateStatus(0, 676, '0,0');
+        }
+        function updateVisualization(cipher, path) {
+            document.getElementById('grid').innerHTML = cipher.render(path);
+            updateStatus(
+                path.length,
+                676 - path.length,
+                path.length > 0 ? `${path[path.length-1].x},${path[path.length-1].y}` : '0,0'
+            );
+        }
+        function updateStatus(pathLength, freeCells, currentPos) {
+            document.getElementById('pathLength').textContent = pathLength;
+            document.getElementById('freeCells').textContent = freeCells;
+            document.getElementById('currentPos').textContent = currentPos;
+        }
+        window.onload = () => {
+            reset();
+        };
+    </script>
+</body>
+</html>