Task1_2/index.html - master - timshk/Shalaev_Stepik

Task1_2/index.html
467 строк18 KB
timshk
Stepik задания
01 июн 2026, 18:58
01 июн 2026, 18:582e75834
```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Квантовый симулятор | Схема Белла</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none; /* легкий эффект "интерфейса будущего" */
        }

        body {
            min-height: 100vh;
            background: radial-gradient(circle at 20% 30%, #0a0f1e, #03060c);
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Segoe UI', 'SF Mono', 'Fira Code', 'Courier New', monospace;
            padding: 20px;
        }

        /* главный контейнер — неоновый каркас */
        .quantum-simulator {
            background: rgba(2, 12, 22, 0.65);
            backdrop-filter: blur(2px);
            border-radius: 3rem;
            padding: 1.8rem 2rem 2.2rem 2rem;
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), 0 0 8px rgba(0, 180, 255, 0.5), inset 0 0 12px rgba(0, 255, 255, 0.05);
            border: 1px solid #0ff3;
            transition: all 0.2s;
        }

        /* заголовок с "осциллографическим" оттенком */
        .title {
            text-align: center;
            margin-bottom: 2rem;
            letter-spacing: 2px;
        }
        .title h1 {
            font-size: 1.8rem;
            font-weight: 400;
            background: linear-gradient(135deg, #aaffff, #2a9eff);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            text-shadow: 0 0 5px #0ff3;
        }
        .title p {
            color: #7bc5d9;
            font-size: 0.8rem;
            margin-top: 8px;
            opacity: 0.8;
            font-family: monospace;
        }

        /* схема: сетка 2 провода + гейты */
        .quantum-circuit {
            background: #030e1a;
            border-radius: 2rem;
            padding: 1.5rem 1rem;
            border: 1px solid #0cd2ff40;
            box-shadow: inset 0 0 20px #00a6ff08, 0 8px 20px rgba(0,0,0,0.4);
            margin-bottom: 2rem;
        }

        .qubit-line {
            display: flex;
            align-items: center;
            margin: 20px 0;
            position: relative;
            flex-wrap: wrap;
            justify-content: center;
        }

        .qubit-label {
            width: 70px;
            font-size: 1.3rem;
            font-weight: bold;
            font-family: monospace;
            color: #3ce0e8;
            text-shadow: 0 0 3px cyan;
            letter-spacing: 1px;
        }

        .wire {
            flex: 1;
            height: 3px;
            background: linear-gradient(90deg, #0ff1, #0ff, #0ff1);
            box-shadow: 0 0 4px cyan;
            position: relative;
            min-width: 40px;
        }

        .gate {
            background: #0b1b2f;
            border: 1.5px solid #0ff;
            border-radius: 16px;
            padding: 8px 14px;
            margin: 0 12px;
            font-weight: bold;
            font-size: 1.3rem;
            font-family: monospace;
            color: #b1f4ff;
            box-shadow: 0 0 6px #0ff5;
            backdrop-filter: blur(2px);
            transition: 0.1s linear;
            letter-spacing: 1px;
        }

        .cnot-group {
            display: flex;
            align-items: center;
            margin: 0 12px;
        }
        .ctrl-dot {
            width: 16px;
            height: 16px;
            background: #0ff;
            border-radius: 50%;
            box-shadow: 0 0 12px cyan;
            margin-right: 8px;
        }
        .cnot-vertical {
            width: 2px;
            height: 58px;
            background: #0ff;
            margin: 0 6px;
            box-shadow: 0 0 6px cyan;
        }
        .target-x {
            background: #04172a;
            border: 1.5px solid #0ff;
            border-radius: 14px;
            padding: 8px 12px;
            font-size: 1.4rem;
            font-weight: bold;
            color: #3ce0ff;
        }

        .qubit-state {
            width: 95px;
            text-align: right;
            font-family: monospace;
            font-size: 0.9rem;
            color: #6bcbdf;
            background: #071a2a60;
            padding: 5px 8px;
            border-radius: 20px;
            letter-spacing: 1px;
        }

        /* панель измерения */
        .measure-panel {
            text-align: center;
            margin: 1.8rem 0 1.5rem;
        }
        .measure-btn {
            background: none;
            border: 2px solid #0ff;
            color: #0ff;
            font-size: 1.4rem;
            font-weight: bold;
            padding: 12px 32px;
            border-radius: 60px;
            cursor: pointer;
            font-family: monospace;
            letter-spacing: 3px;
            transition: 0.2s;
            background: #0a142e70;
            backdrop-filter: blur(6px);
            box-shadow: 0 0 8px #0ff5;
        }
        .measure-btn:hover {
            background: #0ff2;
            box-shadow: 0 0 20px cyan;
            text-shadow: 0 0 5px cyan;
            transform: scale(1.01);
        }
        .measure-btn:active {
            transform: scale(0.98);
        }

        /* результат */
        .result-area {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            gap: 20px;
            flex-wrap: wrap;
            background: #05121fb3;
            border-radius: 40px;
            padding: 12px 24px;
            margin-top: 10px;
            border: 1px solid cyan;
        }
        .last-result {
            font-size: 2.5rem;
            font-weight: 800;
            font-family: monospace;
            background: #00000066;
            padding: 8px 24px;
            border-radius: 48px;
            letter-spacing: 5px;
            color: #b5ffff;
            text-shadow: 0 0 8px cyan;
        }
        .counters {
            display: flex;
            gap: 32px;
            font-family: monospace;
        }
        .counter {
            background: #03121f;
            padding: 6px 18px;
            border-radius: 40px;
            border-left: 3px solid #0ff;
        }
        .counter span:first-child {
            font-weight: bold;
            color: #73f7ff;
            margin-right: 12px;
        }
        .counter span:last-child {
            font-size: 1.8rem;
            font-weight: bold;
            color: white;
            text-shadow: 0 0 2px cyan;
        }

        .reset-btn {
            background: transparent;
            border: 1px solid #3e6d8c;
            color: #7bc3d9;
            padding: 6px 18px;
            border-radius: 30px;
            cursor: pointer;
            font-family: monospace;
            transition: 0.2s;
            margin-left: 12px;
        }
        .reset-btn:hover {
            border-color: cyan;
            color: cyan;
            box-shadow: 0 0 8px #0ff3;
        }

        footer {
            text-align: center;
            font-size: 0.7rem;
            margin-top: 1.6rem;
            color: #2c7f99;
        }

        @media (max-width: 650px) {
            .quantum-simulator { padding: 1rem; }
            .gate { padding: 4px 8px; font-size: 1rem; margin: 0 6px; }
            .qubit-label { width: 55px; font-size: 1rem; }
            .last-result { font-size: 1.6rem; letter-spacing: 2px; }
            .counter span:last-child { font-size: 1.3rem; }
        }
    </style>
</head>
<body>

<div class="quantum-simulator">
    <div class="title">
        <h1>⚛ BELL STATE • QUBIT CIRCUIT ⚛</h1>
        <p>|Φ⁺⟩ = (|00⟩ + |11⟩)/√2   ⟩   квантовая запутанность</p>
    </div>

    <!-- квантовая схема: H на q0, CNOT (q0 -> q1) -->
    <div class="quantum-circuit">
        <!-- кубит 0 (верхний) -->
        <div class="qubit-line">
            <div class="qubit-label">|q₀⟩ ──</div>
            <div class="wire"></div>
            <!-- гейт Адамара на первом кубите -->
            <div class="gate">H</div>
            <div class="wire"></div>
            <!-- контроль CNOT (точка) -->
            <div class="ctrl-dot"></div>
            <div class="wire" style="flex:0.5; min-width:12px;"></div>
            <div class="qubit-state" id="q0State">|0⟩</div>
        </div>

        <!-- соединительная вертикаль CNOT (мостик) + надпись классики, но визуально чисто -->
        <div style="display: flex; justify-content: center; margin: -12px 0 -8px 0; padding-left: 70px;">
            <div style="width: 2px; height: 28px; background: cyan; box-shadow: 0 0 5px cyan; margin-right: 42%;"></div>
        </div>

        <!-- кубит 1 (нижний) -->
        <div class="qubit-line">
            <div class="qubit-label">|q₁⟩ ──</div>
            <div class="wire"></div>
            <!-- пустое место (нет H) -->
            <div style="width: 66px; margin: 0 12px;"></div>
            <div class="wire"></div>
            <!-- CNOT целевой гейт (X с кружком) -->
            <div class="target-x">⊕</div>
            <div class="wire" style="flex:0.5; min-width:12px;"></div>
            <div class="qubit-state" id="q1State">|0⟩</div>
        </div>
        
        <!-- легенда: пояснение гейтов -->
        <div style="display: flex; gap: 28px; justify-content: center; margin-top: 18px; font-size: 12px; color: #4fafcf;">
            <span>💠 H: Адамар (суперпозиция)</span>
            <span>🔘 CNOT: контролируемое НЕ (запутывание)</span>
        </div>
    </div>

    <!-- кнопка измерения -->
    <div class="measure-panel">
        <button class="measure-btn" id="measureBtn">🔬 ИЗМЕРИТЬ 🔬</button>
    </div>

    <!-- счетчики и текущий исход -->
    <div class="result-area">
        <div style="display: flex; align-items: center; gap: 12px;">
            <span style="color:#4ed9ff;">последний исход</span>
            <div class="last-result" id="lastResult">—</div>
        </div>
        <div class="counters">
            <div class="counter"><span>|00⟩</span> <span id="count00">0</span></div>
            <div class="counter"><span>|11⟩</span> <span id="count11">0</span></div>
            <button class="reset-btn" id="resetBtn">⟳ сброс</button>
        </div>
    </div>
    <footer>
        квантовая схема Белла • измерение коллапсирует в |00⟩ или |11⟩ с равной вероятностью 50/50<br>
        запутанность гарантирует идеальную корреляцию — нет результатов |01⟩ или |10⟩
    </footer>
</div>

<script>
    (function() {
        // Абсолютно точная симуляция вероятностного измерения состояния Белла:
        // состояние после H⊗CNOT : (|00⟩ + |11⟩)/√2
        // измерение даёт |00⟩ с вероятностью 0.5 и |11⟩ с вероятностью 0.5.
        // Никаких других комбинаций по определению квантовой схемы.
        
        // счётчики
        let count00 = 0;
        let count11 = 0;
        let lastOutcome = null;   // '00' или '11'

        // DOM элементы
        const lastResultSpan = document.getElementById('lastResult');
        const count00Span = document.getElementById('count00');
        const count11Span = document.getElementById('count11');
        const measureBtn = document.getElementById('measureBtn');
        const resetBtn = document.getElementById('resetBtn');
        
        // элементы для визуализации (декоративные состояния кубитов до измерения)
        const q0StateSpan = document.getElementById('q0State');
        const q1StateSpan = document.getElementById('q1State');
        
        // вспомогательная функция обновления счётчиков на UI
        function updateUI() {
            count00Span.innerText = count00;
            count11Span.innerText = count11;
            if (lastOutcome) {
                lastResultSpan.innerText = lastOutcome;
            } else {
                lastResultSpan.innerText = '—';
            }
        }
        
        // симуляция коллапса согласно квантовому состоянию Bell
        // результат: '00' или '11'
        function performBellMeasurement() {
            // Генерируем случайную вероятность: ровно 0..1
            // С вероятностью 0.5 -> '00', иначе '11'
            const rand = Math.random();   // [0, 1)
            const outcome = (rand < 0.5) ? '00' : '11';
            
            // обновляем статистику
            if (outcome === '00') {
                count00++;
            } else {
                count11++;
            }
            lastOutcome = outcome;
            
            // декоративное отображение: показываем, что кубиты коллапсировали в измеренное состояние
            // для наглядности: визуализируем конкретное бинарное состояние кубитов
            if (outcome === '00') {
                q0StateSpan.innerHTML = '|0⟩ ✦';
                q1StateSpan.innerHTML = '|0⟩ ✦';
            } else {
                q0StateSpan.innerHTML = '|1⟩ ✦';
                q1StateSpan.innerHTML = '|1⟩ ✦';
            }
            
            // небольшой "флуоресцентный" эффект при измерении (мигание)
            const circuitDiv = document.querySelector('.quantum-circuit');
            circuitDiv.style.transition = '0.07s linear';
            circuitDiv.style.boxShadow = 'inset 0 0 18px cyan, 0 0 18px #0ff3';
            setTimeout(() => {
                circuitDiv.style.boxShadow = 'inset 0 0 20px #00a6ff08, 0 8px 20px rgba(0,0,0,0.4)';
            }, 150);
            
            updateUI();
            return outcome;
        }
        
        // сброс всей статистики и "возврат" к абстрактному суперпозиционному состоянию (визуально)
        function resetSimulator() {
            count00 = 0;
            count11 = 0;
            lastOutcome = null;
            // визуально возвращаем кубиты в неопределённое (суперпозиционное) представление
            // согласно нашей схеме после H и CNOT но перед измерением — система запутана, на схеме пока нет коллапса
            q0StateSpan.innerHTML = '|+⟩';   // суперпозиция + состояние (условно)
            q1StateSpan.innerHTML = '|+⟩';   // для красоты, т.к. запутанность нелокальна
            lastResultSpan.innerText = '—';
            updateUI();
            
            // лёгкая анимация сброса
            const container = document.querySelector('.quantum-simulator');
            container.style.transform = 'scale(0.99)';
            setTimeout(() => { container.style.transform = ''; }, 100);
        }
        
        // инициализация: при старте показываем, что схема готова (состояние до измерения)
        function initVisuals() {
            q0StateSpan.innerHTML = '|+⟩';
            q1StateSpan.innerHTML = '|+⟩';
            lastResultSpan.innerText = '—';
            count00 = 0;
            count11 = 0;
            updateUI();
        }
        
        // обработчик измерения с дополнительной "неоновой" обратной связью
        function onMeasure() {
            // симулируем измерение по правилам квантовой механики: только |00> или |11>
            performBellMeasurement();
            // дополнительный тактильный эффект на кнопке
            const btn = document.getElementById('measureBtn');
            btn.style.textShadow = '0 0 8px cyan';
            setTimeout(() => { btn.style.textShadow = ''; }, 150);
        }
        
        // вешаем слушатели
        measureBtn.addEventListener('click', onMeasure);
        resetBtn.addEventListener('click', () => {
            resetSimulator();
            // дополнительно акцентируем сброс статистической информации
        });
        
        // при загрузке страницы устанавливаем всё в исходное
        initVisuals();
        
        // доп. фича: проверка крайних состояний - код гарантирует отсутствие результатов "01" или "10".
        // поскольку логика performBellMeasurement выдает только 00/11 с вероятностью 50%,
        // это абсолютно соответствует квантовой схеме Белла.
        // Добавим также в консоль небольшое приветствие 
        console.log('Квантовая схема Белла активна | состояние (|00⟩+|11⟩)/√2 → измерение только 00 или 11');
    })();
</script>
</body>
</html>
```