index.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Antena Receptora 11D - Interfaz de Autovectores de Onda</title>
    <style>
        :root {
            --bg-primary: #080b11;
            --bg-secondary: #101622;
            --bg-card: #182030;
            --accent-green: #00ffcc;
            --accent-blue: #00bfff;
            --accent-red: #ff4757;
            --accent-purple: #a55eea;
            --text-main: #e1e6f0;
            --text-muted: #7f8c8d;
            --border: #232d42;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Courier New', Courier, monospace;
        }

        body {
            background-color: var(--bg-primary);
            color: var(--text-main);
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            padding: 20px;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 15px;
            border-bottom: 2px solid var(--border);
            margin-bottom: 20px;
        }

        h1 {
            font-size: 1.3rem;
            color: var(--accent-green);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .badge-status {
            background: rgba(0, 255, 204, 0.1);
            border: 1px solid var(--accent-green);
            color: var(--accent-green);
            font-size: 0.75rem;
            padding: 3px 8px;
            border-radius: 4px;
        }

        .grid-main {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 20px;
            flex: 1;
        }

        @media (max-width: 1024px) {
            .grid-main { grid-template-columns: 1fr; }
        }

        .panel {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 15px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        }

        .panel-header {
            font-size: 0.95rem;
            color: var(--accent-blue);
            border-bottom: 1px solid var(--border);
            padding-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* Canvas de la Antena de Autovectores */
        canvas {
            background: #030508;
            border: 1px solid var(--border);
            border-radius: 6px;
            width: 100%;
            height: 220px;
        }

        .eigen-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .eigen-box {
            background: var(--bg-card);
            border: 1px solid var(--border);
            padding: 10px;
            border-radius: 6px;
            font-size: 0.75rem;
        }

        .eigen-box.pos { border-left: 3px solid var(--accent-green); }
        .eigen-box.neg { border-left: 3px solid var(--accent-red); }

        .eigen-title {
            color: var(--text-muted);
            margin-bottom: 4px;
            display: block;
        }

        .eigen-val {
            color: #fff;
            font-weight: bold;
            word-break: break-all;
        }

        /* Consola de Bus HTTP */
        .console-box {
            background: #000;
            color: #00ff66;
            font-size: 0.72rem;
            padding: 12px;
            border-radius: 6px;
            height: 140px;
            overflow-y: auto;
            border: 1px solid var(--border);
        }

        .log-line { margin-bottom: 4px; }
        .log-line.post { color: var(--accent-green); }
        .log-line.delete { color: var(--accent-red); }

        /* Componentes UI del Full Stack */
        .app-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 8px;
        }

        .card-prod {
            background: var(--bg-card);
            border: 1px solid var(--border);
            padding: 8px;
            border-radius: 5px;
            text-align: center;
            font-size: 0.75rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .card-prod h5 { margin-bottom: 4px; color: #fff; }
        .card-prod p { color: var(--accent-green); font-weight: bold; margin-bottom: 6px; }

        button {
            background: var(--accent-blue);
            color: #000;
            border: none;
            padding: 5px 8px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            font-size: 0.7rem;
            transition: opacity 0.2s;
        }

        button:hover { opacity: 0.85; }
        button.danger { background: var(--accent-red); color: #fff; }

        .cart-box, .db-box {
            background: var(--bg-card);
            border: 1px solid var(--border);
            padding: 10px;
            border-radius: 6px;
            font-size: 0.75rem;
        }

        .cart-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 4px;
            padding-bottom: 4px;
            border-bottom: 1px dashed var(--border);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.75rem;
            text-align: left;
        }

        th { color: var(--text-muted); border-bottom: 1px solid var(--border); padding-bottom: 4px; }
        td { padding: 4px 0; }
    </style>
</head>
<body>

    <header>
        <h1>
            <span>⟁ RECEPTOR DE AUTOVECTORES 11D</span>
            <span class="badge-status">ESPACIO FOCK NULL :: RANGO 2</span>
        </h1>
        <div style="font-size: 0.8rem;">
            <span>Matriz Canal: </span>
            <strong style="color: var(--accent-green);">U_canal Unitario Active</strong>
        </div>
    </header>

    <div class="grid-main">

        <!-- PANEL IZQUIERDO: RECEPTOR DE ONDAS Y RECEPTOR MATRICIAL -->
        <div class="panel">
            <div class="panel-header">
                <span>Antena Receptora de Ondas (Espejo Matrix 11D)</span>
                <span style="font-size: 0.7rem; color: var(--accent-purple);">Biyectividad 1:1</span>
            </div>

            <canvas id="antennaCanvas"></canvas>

            <div class="eigen-container">
                <div class="eigen-box pos">
                    <span class="eigen-title">Autovector +E (Materia / Creation \hat{a}^\dagger)</span>
                    <span class="eigen-val" id="posEigen">Φ_+ = [1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0]</span>
                </div>
                <div class="eigen-box neg">
                    <span class="eigen-title">Autovector -E (Antimateria / Anihilation \hat{a})</span>
                    <span class="eigen-val" id="negEigen">Φ_- = [0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1]</span>
                </div>
            </div>

            <div class="panel-header" style="margin-top: 5px;">
                <span>Consola de Fase HTTP Express (Sincronización $v_0$)</span>
            </div>
            <div class="console-box" id="consoleBox">
                <div class="log-line">[SYS 0.00s] Inicializado receptor de autovectores de onda.</div>
                <div class="log-line">[SYS 0.01s] Conectado a la base de datos origen v_0.</div>
                <div class="log-line post">[SYS 0.02s] Matriz 11D colapsada en rango 2 sin pérdidas.</div>
            </div>
        </div>

        <!-- PANEL DERECHO: INTERFAZ SUPERFICIE REACT UI + PERSISTENCIA v_0 -->
        <div class="panel">
            <div class="panel-header">
                <span>Superficie de Interfaz Full Stack</span>
                <span style="font-size: 0.7rem; color: var(--accent-green);">React / Node / BD v_0</span>
            </div>

            <div class="app-section">
                <!-- Catálogo de Productos -->
                <div>
                    <span style="color: var(--text-muted); font-size: 0.75rem; display: block; margin-bottom: 6px;">Catálogo ($v_0$ Persistencia)</span>
                    <div class="product-grid" id="productGrid"></div>
                </div>

                <!-- Carrito de Compras -->
                <div class="cart-box">
                    <span style="color: var(--accent-blue); display: block; margin-bottom: 6px; font-weight: bold;">Carrito React</span>
                    <div id="cartItems"><p style="color: var(--text-muted);">Vacío</p></div>
                    <hr style="border-color: var(--border); margin: 6px 0;">
                    <div style="display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 6px;">
                        <span>Total:</span>
                        <span id="cartTotal" style="color: var(--accent-green);">$0.00</span>
                    </div>
                    <button id="btnCheckout" style="width: 100%;">Confirmar ($+E$ Commit)</button>
                </div>
            </div>

            <div class="panel-header" style="margin-top: 5px;">
                <span>Persistencia $v_0$ (Base de Datos)</span>
            </div>
            <div class="db-box">
                <table>
                    <thead>
                        <tr><th>ID</th><th>Entidad</th><th>Stock</th><th>Precio</th></tr>
                    </thead>
                    <tbody id="dbBody"></tbody>
                </table>
            </div>

            <!-- Formulario de Inserción -->
            <div style="display: flex; gap: 6px; margin-top: 5px;">
                <input type="text" id="inputName" placeholder="Nueva Entidad" style="flex: 2; background: var(--bg-card); border: 1px solid var(--border); color: #fff; padding: 5px; border-radius: 4px; font-size: 0.75rem;">
                <input type="number" id="inputPrice" placeholder="Precio" style="flex: 1; background: var(--bg-card); border: 1px solid var(--border); color: #fff; padding: 5px; border-radius: 4px; font-size: 0.75rem;">
                <button id="btnAdd">Insertar ($v_0$)</button>
            </div>
        </div>

    </div>

    <script>
        // --- 1. ESTADO PERSISTENTE ORIGEN v_0 ---
        let db_v0 = [
            { id: 101, name: "Modulo React", price: 150.00, stock: 10 },
            { id: 102, name: "Servidor Express", price: 280.00, stock: 6 },
            { id: 103, name: "Base Datos v_0", price: 400.00, stock: 4 }
        ];
        let cart = [];
        let phase = 0;
        let waveNodes = new Array(11).fill(0);

        // --- 2. DIBUJO DE ONDAS EN CANVAS (AUTOVECTORES) ---
        const canvas = document.getElementById('antennaCanvas');
        const ctx = canvas.getContext('2d');

        function resizeCanvas() {
            canvas.width = canvas.parentElement.clientWidth - 36;
            canvas.height = 200;
        }
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        function renderWaves() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const w = canvas.width;
            const h = canvas.height;
            const cols = 11;
            const step = w / cols;

            // Rejilla de Autovectores
            for (let i = 0; i < cols; i++) {
                const x = i * step + step / 2;
                const amp = waveNodes[i];
                const y = h / 2 + Math.sin(phase * 0.06 + i) * (12 + amp * 20);

                ctx.strokeStyle = i < 6 ? 'rgba(0, 255, 204, 0.25)' : 'rgba(255, 71, 87, 0.25)';
                ctx.beginPath();
                ctx.moveTo(x, 0); ctx.lineTo(x, h);
                ctx.stroke();

                ctx.fillStyle = i < 6 ? '#00ffcc' : '#ff4757';
                ctx.beginPath();
                ctx.arc(x, y, 4 + amp * 2, 0, Math.PI * 2);
                ctx.fill();

                if (waveNodes[i] > 0) waveNodes[i] *= 0.94;
            }

            // Onda de Transmisión Principal
            ctx.strokeStyle = '#00bfff';
            ctx.lineWidth = 2;
            ctx.beginPath();
            for (let x = 0; x < w; x += 4) {
                const idx = Math.floor((x / w) * 11);
                const y = h / 2 + Math.sin(x * 0.025 + phase * 0.08) * 10 + (waveNodes[idx] * 8);
                if (x === 0) ctx.moveTo(x, y);
                else ctx.lineTo(x, y);
            }
            ctx.stroke();

            phase += 1;
            requestAnimationFrame(renderWaves);
        }
        renderWaves();

        // --- 3. DISPARADOR DE ONDAS Y CONSOLA ---
        function emitWave(nodeIndex, method) {
            waveNodes[nodeIndex] = 3.0;
            const consoleBox = document.getElementById('consoleBox');
            const entry = document.createElement('div');
            entry.className = `log-line ${method === 'POST' ? 'post' : method === 'DELETE' ? 'delete' : ''}`;
            const time = (performance.now() / 1000).toFixed(2);
            entry.innerText = `[HTTP ${time}s] ${method} /api/matrix/v0 -> Node[${nodeIndex}] Autovector ${nodeIndex < 6 ? 'Φ_+' : 'Φ_-'} (200 OK)`;
            consoleBox.appendChild(entry);
            consoleBox.scrollTop = consoleBox.scrollHeight;
        }

        // --- 4. RENDER UI FULL STACK ---
        function updateUI() {
            // Productos
            const pGrid = document.getElementById('productGrid');
            pGrid.innerHTML = '';
            db_v0.forEach(p => {
                const card = document.createElement('div');
                card.className = 'card-prod';
                card.innerHTML = `<h5>${p.name}</h5><p>$${p.price.toFixed(2)}</p><button onclick="addCart(${p.id})">Agregar</button>`;
                pGrid.appendChild(card);
            });

            // Carrito
            const cItems = document.getElementById('cartItems');
            cItems.innerHTML = '';
            let total = 0;
            if (cart.length === 0) {
                cItems.innerHTML = '<p style="color: var(--text-muted);">Vacío</p>';
            } else {
                cart.forEach((item, idx) => {
                    total += item.price;
                    const row = document.createElement('div');
                    row.className = 'cart-row';
                    row.innerHTML = `<span>${item.name}</span><div><span>$${item.price.toFixed(2)}</span> <button class="danger" onclick="removeCart(${idx})">X</button></div>`;
                    cItems.appendChild(row);
                });
            }
            document.getElementById('cartTotal').innerText = `$${total.toFixed(2)}`;

            // Tabla Base de Datos
            const dbT = document.getElementById('dbBody');
            dbT.innerHTML = '';
            db_v0.forEach(item => {
                const tr = document.createElement('tr');
                tr.innerHTML = `<td>#${item.id}</td><td>${item.name}</td><td>${item.stock} u</td><td style="color: var(--accent-green);">$${item.price.toFixed(2)}</td>`;
                dbT.appendChild(tr);
            });
        }

        function addCart(id) {
            const item = db_v0.find(p => p.id === id);
            if (item && item.stock > 0) {
                item.stock -= 1;
                cart.push(item);
                emitWave(4, 'POST'); // Transmisión a nodo de React
                updateUI();
            }
        }

        function removeCart(idx) {
            const item = cart[idx];
            const dbItem = db_v0.find(p => p.id === item.id);
            if (dbItem) dbItem.stock += 1;
            cart.splice(idx, 1);
            emitWave(7, 'DELETE'); // Transmisión a nodo de Rollback
            updateUI();
        }

        document.getElementById('btnAdd').addEventListener('click', () => {
            const nameEl = document.getElementById('inputName');
            const priceEl = document.getElementById('inputPrice');
            if (nameEl.value && priceEl.value) {
                db_v0.push({ id: 100 + db_v0.length + 1, name: nameEl.value, price: parseFloat(priceEl.value), stock: 8 });
                nameEl.value = ''; priceEl.value = '';
                emitWave(0, 'POST'); // Inserción en v_0
                updateUI();
            }
        });

        document.getElementById('btnCheckout').addEventListener('click', () => {
            if (cart.length > 0) {
                cart = [];
                emitWave(5, 'POST'); // Commit final
                alert('Transacción colapsada y registrada en el objeto v_0.');
                updateUI();
            }
        });

        updateUI();
    </script>
</body>
</html>