site/variant.html - master - taesonx/practica-decoder

site/variant.html
99 строк8 KB
taesonx
update: variant.html
22 май 2026, 13:26
22 май 2026, 13:263ea4849
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Вариативная часть 2.2 | Криптографический движок</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); color: #eee; line-height: 1.6; }
        header { background: rgba(0,0,0,0.7); padding: 1rem 0; position: sticky; top: 0; backdrop-filter: blur(10px); }
        nav { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
        nav a { color: #eee; text-decoration: none; padding: 0.5rem 1rem; border-radius: 5px; transition: all 0.3s; }
        nav a:hover { background: #e94560; }
        .container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
        h1 { color: #e94560; margin-bottom: 1rem; text-align: center; }
        .content { background: rgba(255,255,255,0.1); padding: 2rem; border-radius: 15px; margin-top: 1rem; }
        .btn-group { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; justify-content: center; }
        .btn { display: inline-block; background: #e94560; color: white; padding: 0.8rem 1.5rem; text-decoration: none; border-radius: 50px; transition: transform 0.3s; }
        .btn:hover { transform: scale(1.05); background: #ff6b8a; }
        .cipher-list { columns: 2; list-style: none; margin: 1rem 0; }
        .cipher-list li { margin: 0.5rem 0; padding-left: 1.5rem; position: relative; }
        .cipher-list li::before { content: "⚙️"; position: absolute; left: 0; }
        footer { text-align: center; padding: 2rem; background: rgba(0,0,0,0.5); margin-top: 3rem; }
        .engine-note { background: rgba(233,69,96,0.2); border-left: 4px solid #e94560; padding: 1rem; margin: 1.5rem 0; border-radius: 0 10px 10px 0; }
        @media (max-width: 768px) { nav { gap: 0.5rem; } .cipher-list { columns: 1; } }
    </style>
</head>
<body>
    <header>
        <nav>
            <a href="index.html">Главная</a>
            <a href="about.html">О проекте</a>
            <a href="members.html">Участники</a>
            <a href="journal.html">Журнал</a>
            <a href="resources.html">Ресурсы</a>
            <a href="variant.html">Вариативная часть</a>
        </nav>
    </header>
    <div class="container">
        <h1>🔧 Вариативная часть (вариант 2.2)</h1>
        <div class="content">
            <h2>⚙️ Криптографический движок (программный компонент)</h2>
            <p>В рамках вариативной части реализован <strong>программный компонент — криптографический движок</strong> с поддержкой 8 классических алгоритмов шифрования. Движок написан на чистом JavaScript, HTML и CSS без использования внешних библиотек и представляет собой <strong>единый унифицированный интерфейс</strong> для шифрования и дешифрования данных.</p>

            <div class="engine-note">
                💡 <strong>Почему это технология / программный компонент?</strong><br>
                Движок может использоваться независимо от веб-интерфейса — как встраиваемая библиотека шифрования. 8 алгоритмов объединены единым фасадом, что позволяет легко расширять функциональность и интегрировать компонент в другие проекты.
            </div>

            <h3>✅ Реализованные алгоритмы (8 шт.)</h3>
            <ul class="cipher-list">
                <li>Шифр Цезаря</li>
                <li>Шифр Атбаш</li>
                <li>Азбука Морзе</li>
                <li>Шифр Виженера</li>
                <li>Шифр Вернама (XOR)</li>
                <li>Шифр Полибия</li>
                <li>Rail Fence</li>
                <li>Пляшущие человечки</li>
            </ul>

            <h3>📖 Техническое руководство (туториал)</h3>
            <p>Подробная пошаговая инструкция по созданию шифра Цезаря с нуля: разметка, функции шифрования/расшифровки, блок-схема, модификации.</p>
            <div class="btn-group">
                <a href="https://taesonx.gitverse.site/practica-decoder/variant_guide.html" target="_blank" class="btn">📘 Открыть туториал</a>
                <a href="https://msfelzhel.github.io/decoder-app/" target="_blank" class="btn">🎮 Демо-версия движка</a>
                <a href="decoder-code.html" target="_blank" class="btn">💻 Исходный код</a>
            </div>

            <h3>✨ Модификации (творческая часть — сверх базовой реализации)</h3>
            <ul>
                <li>🔹 Поддержка русского алфавита — все шифры работают с кириллицей</li>
                <li>🔹 Автоматический перебор ключа — кнопка «Подобрать ключ» для шифра Цезаря</li>
                <li>🔹 Тёмная тема — адаптивный дизайн с высоким контрастом</li>
                <li>🔹 Адаптивная вёрстка — корректное отображение на мобильных устройствах</li>
                <li>🔹 8 шифров вместо минимальных 5</li>
            </ul>

            <h3>🏗️ Архитектура компонента</h3>
            <pre style="background: #0a0c0f; padding: 1rem; border-radius: 10px; overflow-x: auto; font-size: 0.8rem;">
┌─────────────────────────────────────────┐
│         Веб-интерфейс (демо-слой)       │
└─────────────────┬───────────────────────┘
                  │
┌─────────────────▼───────────────────────┐
│    Криптографический движок (ядро)      │
│  ┌─────────────────────────────────┐    │
│  │ 8 изолированных модулей шифров  │    │
│  │    (единый фасад processCipher) │    │
│  └─────────────────────────────────┘    │
└─────────────────────────────────────────┘</pre>
            <p style="font-size: 0.9rem; opacity: 0.8;">* Движок может использоваться независимо от веб-интерфейса — как библиотека для встраивания в другие проекты.</p>
        </div>
    </div>
    <footer>
        <p>Проектная практика • Московский Политех • 2026</p>
    </footer>
</body>
</html>