| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Quantum Entropy Minimizer</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> |
| <style> |
| body { |
| background: linear-gradient(135deg, #0f172a, #1e293b); |
| color: #f1f5f9; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| } |
| .hilbert-space { |
| background: rgba(15, 23, 42, 0.7); |
| border: 1px solid #334155; |
| box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); |
| } |
| .prime-state { |
| transition: all 0.5s ease; |
| } |
| .active-state { |
| box-shadow: 0 0 15px #818cf8; |
| transform: scale(1.1); |
| } |
| .resonance-path { |
| stroke-dasharray: 1000; |
| stroke-dashoffset: 1000; |
| } |
| .entropy-graph { |
| background: rgba(30, 41, 59, 0.8); |
| } |
| .control-panel { |
| background: rgba(15, 23, 42, 0.9); |
| backdrop-filter: blur(10px); |
| } |
| .algorithm-step { |
| transition: all 0.3s ease; |
| } |
| .current-step { |
| background: rgba(99, 102, 241, 0.2); |
| border-left: 3px solid #818cf8; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <header class="py-6 px-4 sm:px-6 lg:px-8 border-b border-slate-700"> |
| <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center"> |
| <div> |
| <h1 class="text-3xl font-bold text-indigo-300">Quantum Entropy Minimizer</h1> |
| <p class="text-slate-400 mt-1">NP-Complete Problem Solver</p> |
| </div> |
| <div class="mt-4 md:mt-0 flex items-center space-x-4"> |
| <div class="bg-indigo-900/30 px-4 py-2 rounded-lg"> |
| <span class="text-indigo-300 font-mono">P = NP</span> |
| </div> |
| <div class="text-sm text-slate-400"> |
| Sebastian Schepis, 2025 |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2"> |
| <div class="hilbert-space rounded-xl p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h2 class="text-xl font-semibold text-indigo-200">Quantum State Space</h2> |
| <div class="flex space-x-2"> |
| <button id="resetBtn" class="px-3 py-1 bg-slate-700 hover:bg-slate-600 rounded-lg text-sm transition-colors"> |
| Reset |
| </button> |
| <button id="startBtn" class="px-3 py-1 bg-indigo-600 hover:bg-indigo-500 rounded-lg text-sm transition-colors"> |
| Start Simulation |
| </button> |
| <button id="stepBtn" class="px-3 py-1 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-sm transition-colors"> |
| Step Forward |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="relative h-96 rounded-lg border border-slate-600 bg-slate-900/50 overflow-hidden"> |
| <div id="quantumCanvas" class="w-full h-full relative"> |
| |
| </div> |
| |
| |
| <div class="absolute inset-0 opacity-20 pointer-events-none"> |
| <div class="quantum-field"></div> |
| </div> |
| |
| |
| <svg class="absolute top-0 left-0 w-full h-full pointer-events-none"> |
| <defs> |
| <linearGradient id="quantumGradient" x1="0%" y1="0%" x2="100%" y2="100%"> |
| <stop offset="0%" stop-color="#818cf8" /> |
| <stop offset="100%" stop-color="#4ade80" /> |
| </linearGradient> |
| </defs> |
| </svg> |
| </div> |
| |
| |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4"> |
| <div class="bg-slate-800/50 p-4 rounded-lg"> |
| <div class="text-sm text-slate-400">Quantum State</div> |
| <div id="currentState" class="text-lg font-mono text-indigo-300">|Ψ₀⟩</div> |
| </div> |
| <div class="bg-slate-800/50 p-4 rounded-lg"> |
| <div class="text-sm text-slate-400">Entropy</div> |
| <div id="entropyValue" class="text-lg font-mono text-green-300">S₀</div> |
| </div> |
| <div class="bg-slate-800/50 p-4 rounded-lg"> |
| <div class="text-sm text-slate-400">Energy Level</div> |
| <div id="energyValue" class="text-lg font-mono text-yellow-300">E₀</div> |
| </div> |
| <div class="bg-slate-800/50 p-4 rounded-lg"> |
| <div class="text-sm text-slate-400">Iteration</div> |
| <div id="timeStep" class="text-lg font-mono text-cyan-300">t = 0</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hilbert-space rounded-xl p-6 mt-8"> |
| <h2 class="text-xl font-semibold text-indigo-200 mb-4">Convergence Metrics</h2> |
| <div class="entropy-graph rounded-lg p-4 h-64"> |
| <canvas id="metricsChart" width="800" height="200"></canvas> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="control-panel rounded-xl p-6 h-fit"> |
| <h2 class="text-xl font-semibold text-indigo-200 mb-4">Algorithm Steps</h2> |
| |
| <div class="space-y-4"> |
| <div class="algorithm-step p-4 rounded-lg current-step" data-step="0"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-indigo-500 flex items-center justify-center text-xs font-bold">1</div> |
| <div class="ml-3"> |
| <h3 class="font-medium text-white">Quantum State Initialization</h3> |
| <p class="mt-1 text-sm text-slate-400">Initialize quantum system with superposition of all possible solutions</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="algorithm-step p-4 rounded-lg" data-step="1"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">2</div> |
| <div class="ml-3"> |
| <h3 class="font-medium text-white">Problem Encoding</h3> |
| <p class="mt-1 text-sm text-slate-400">Map NP-complete problem constraints to quantum operators</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="algorithm-step p-4 rounded-lg" data-step="2"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">3</div> |
| <div class="ml-3"> |
| <h3 class="font-medium text-white">Energy Landscape</h3> |
| <p class="mt-1 text-sm text-slate-400">Define energy function that minimizes for valid solutions</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="algorithm-step p-4 rounded-lg" data-step="3"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">4</div> |
| <div class="ml-3"> |
| <h3 class="font-medium text-white">Quantum Evolution</h3> |
| <p class="mt-1 text-sm text-slate-400">Apply quantum gates and entanglement operations</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="algorithm-step p-4 rounded-lg" data-step="4"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">5</div> |
| <div class="ml-3"> |
| <h3 class="font-medium text-white">Entropy Collapse</h3> |
| <p class="mt-1 text-sm text-slate-400">System entropy decreases as solution emerges</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="algorithm-step p-4 rounded-lg" data-step="5"> |
| <div class="flex items-start"> |
| <div class="flex-shrink-0 h-6 w-6 rounded-full bg-slate-700 flex items-center justify-center text-xs font-bold">6</div> |
| <div class="ml-3"> |
| <h3 class="font-medium text-white">Solution Extraction</h3> |
| <p class="mt-1 text-sm text-slate-400">Measure collapsed state to obtain optimal solution</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8"> |
| <h3 class="font-medium text-white mb-3">Quantum Parameters</h3> |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm text-slate-400 mb-1">Qubits (n)</label> |
| <input type="range" min="3" max="12" value="6" id="qubitCount" class="w-full"> |
| <div class="text-right text-sm text-slate-400" id="qubitCountValue">6</div> |
| </div> |
| <div> |
| <label class="block text-sm text-slate-400 mb-1">Problem Complexity</label> |
| <input type="range" min="1" max="10" value="5" id="complexity" class="w-full"> |
| <div class="text-right text-sm text-slate-400" id="complexityValue">5</div> |
| </div> |
| <div> |
| <label class="block text-sm text-slate-400 mb-1">Entropy Decay (γ)</label> |
| <input type="range" min="0.1" max="2" step="0.1" value="0.8" id="entropyDecay" class="w-full"> |
| <div class="text-right text-sm text-slate-400" id="entropyDecayValue">0.8</div> |
| </div> |
| <div> |
| <label class="block text-sm text-slate-400 mb-1">Quantum Coherence</label> |
| <input type="range" min="0.1" max="1" step="0.1" value="0.7" id="coherence" class="w-full"> |
| <div class="text-right text-sm text-slate-400" id="coherenceValue">0.7</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-12 hilbert-space rounded-xl p-8"> |
| <h2 class="text-2xl font-bold text-indigo-200 mb-6">Quantum Entropy Minimization</h2> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| <div> |
| <h3 class="text-lg font-semibold text-white mb-3">Quantum Computing Approach</h3> |
| <p class="text-slate-300 mb-4"> |
| Our quantum entropy minimization algorithm leverages superposition and entanglement to explore |
| solution spaces exponentially faster than classical approaches. By encoding NP-complete problems |
| as quantum states, we can efficiently navigate the solution landscape. |
| </p> |
| <p class="text-slate-300"> |
| The system evolves through quantum gates that progressively reduce entropy while preserving |
| valid solution amplitudes, ultimately collapsing to the optimal configuration. |
| </p> |
| </div> |
| |
| <div> |
| <h3 class="text-lg font-semibold text-white mb-3">Algorithm Advantages</h3> |
| <ul class="space-y-2 text-slate-300"> |
| <li class="flex items-start"> |
| <i data-feather="zap" class="text-yellow-400 mt-1 mr-2 flex-shrink-0"></i> |
| <span>Exponential speedup over classical computation</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="activity" class="text-green-400 mt-1 mr-2 flex-shrink-0"></i> |
| <span>Natural avoidance of local minima through quantum tunneling</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="trending-down" class="text-blue-400 mt-1 mr-2 flex-shrink-0"></i> |
| <span>Guaranteed entropy reduction in polynomial time</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="cpu" class="text-purple-400 mt-1 mr-2 flex-shrink-0"></i> |
| <span>Scalable to large-scale optimization problems</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <script> |
| |
| feather.replace(); |
| |
| |
| const quantumCanvas = document.getElementById('quantumCanvas'); |
| const metricsChart = document.getElementById('metricsChart').getContext('2d'); |
| const currentStateEl = document.getElementById('currentState'); |
| const entropyValueEl = document.getElementById('entropyValue'); |
| const energyValueEl = document.getElementById('energyValue'); |
| const timeStepEl = document.getElementById('timeStep'); |
| const startBtn = document.getElementById('startBtn'); |
| const resetBtn = document.getElementById('resetBtn'); |
| const stepBtn = document.getElementById('stepBtn'); |
| const qubitCount = document.getElementById('qubitCount'); |
| const complexity = document.getElementById('complexity'); |
| const entropyDecay = document.getElementById('entropyDecay'); |
| const coherence = document.getElementById('coherence'); |
| const qubitCountValue = document.getElementById('qubitCountValue'); |
| const complexityValue = document.getElementById('complexityValue'); |
| const entropyDecayValue = document.getElementById('entropyDecayValue'); |
| const coherenceValue = document.getElementById('coherenceValue'); |
| const algorithmSteps = document.querySelectorAll('.algorithm-step'); |
| |
| |
| let simulationRunning = false; |
| let currentTime = 0; |
| let entropyData = []; |
| let energyData = []; |
| let currentState = '|Ψ₀⟩'; |
| let quantumStates = []; |
| let animationTimeline = null; |
| let stepMode = false; |
| |
| |
| qubitCount.addEventListener('input', () => { |
| qubitCountValue.textContent = qubitCount.value; |
| initVisualization(); |
| }); |
| |
| complexity.addEventListener('input', () => { |
| complexityValue.textContent = complexity.value; |
| }); |
| |
| entropyDecay.addEventListener('input', () => { |
| entropyDecayValue.textContent = entropyDecay.value; |
| }); |
| |
| coherence.addEventListener('input', () => { |
| coherenceValue.textContent = coherence.value; |
| }); |
| |
| |
| function initVisualization() { |
| quantumCanvas.innerHTML = ''; |
| quantumStates = []; |
| |
| const n = parseInt(qubitCount.value); |
| const positions = generateQuantumPositions(n); |
| |
| for (let i = 0; i < n; i++) { |
| const state = document.createElement('div'); |
| state.className = 'quantum-state absolute w-20 h-20 rounded-lg flex items-center justify-center text-white font-bold border-2 border-indigo-400 bg-gradient-to-br from-indigo-500 to-purple-600'; |
| state.style.left = `${positions[i].x}%`; |
| state.style.top = `${positions[i].y}%`; |
| state.style.transform = 'rotate(45deg)'; |
| state.innerHTML = `<div class="transform -rotate-45">|q<sub>${i}</sub>⟩</div>`; |
| state.dataset.index = i; |
| |
| quantumCanvas.appendChild(state); |
| quantumStates.push(state); |
| } |
| |
| |
| currentStateEl.textContent = '|Ψ₀⟩'; |
| entropyValueEl.textContent = 'S₀'; |
| energyValueEl.textContent = 'E₀'; |
| timeStepEl.textContent = 't = 0'; |
| entropyData = [{time: 0, entropy: 100}]; |
| energyData = [{time: 0, energy: 85}]; |
| drawMetricsChart(); |
| } |
| |
| |
| function generateQuantumPositions(n) { |
| const positions = []; |
| const centerX = 50; |
| const centerY = 50; |
| const radius = 35; |
| |
| for (let i = 0; i < n; i++) { |
| const angle = (i / n) * 2 * Math.PI; |
| positions.push({ |
| x: centerX + radius * Math.cos(angle), |
| y: centerY + radius * Math.sin(angle) |
| }); |
| } |
| return positions; |
| } |
| |
| |
| function drawMetricsChart() { |
| metricsChart.clearRect(0, 0, metricsChart.canvas.width, metricsChart.canvas.height); |
| |
| if (entropyData.length === 0) return; |
| |
| |
| metricsChart.strokeStyle = '#334155'; |
| metricsChart.lineWidth = 1; |
| |
| |
| for (let i = 0; i <= 10; i++) { |
| const x = (i / 10) * metricsChart.canvas.width; |
| metricsChart.beginPath(); |
| metricsChart.moveTo(x, 0); |
| metricsChart.lineTo(x, metricsChart.canvas.height); |
| metricsChart.stroke(); |
| } |
| |
| |
| for (let i = 0; i <= 5; i++) { |
| const y = (i / 5) * metricsChart.canvas.height; |
| metricsChart.beginPath(); |
| metricsChart.moveTo(0, y); |
| metricsChart.lineTo(metricsChart.canvas.width, y); |
| metricsChart.stroke(); |
| } |
| |
| |
| metricsChart.strokeStyle = '#4ade80'; |
| metricsChart.lineWidth = 3; |
| metricsChart.beginPath(); |
| |
| for (let i = 0; i < entropyData.length; i++) { |
| const x = (entropyData[i].time / 100) * metricsChart.canvas.width; |
| const y = metricsChart.canvas.height - (entropyData[i].entropy / 100) * metricsChart.canvas.height; |
| |
| if (i === 0) { |
| metricsChart.moveTo(x, y); |
| } else { |
| metricsChart.lineTo(x, y); |
| } |
| } |
| metricsChart.stroke(); |
| |
| |
| metricsChart.strokeStyle = '#f59e0b'; |
| metricsChart.lineWidth = 3; |
| metricsChart.beginPath(); |
| |
| for (let i = 0; i < energyData.length; i++) { |
| const x = (energyData[i].time / 100) * metricsChart.canvas.width; |
| const y = metricsChart.canvas.height - (energyData[i].energy / 100) * metricsChart.canvas.height; |
| |
| if (i === 0) { |
| metricsChart.moveTo(x, y); |
| } else { |
| metricsChart.lineTo(x, y); |
| } |
| } |
| metricsChart.stroke(); |
| } |
| |
| |
| function animateSimulation() { |
| if (!simulationRunning && !stepMode) return; |
| |
| currentTime++; |
| timeStepEl.textContent = `t = ${currentTime}`; |
| |
| |
| const newEntropy = Math.max(0, 100 - currentTime * 4); |
| const newEnergy = Math.max(5, 85 - currentTime * 3.2); |
| entropyValueEl.textContent = `S = ${newEntropy.toFixed(1)}`; |
| energyValueEl.textContent = `E = ${newEnergy.toFixed(1)}`; |
| entropyData.push({time: currentTime, entropy: newEntropy}); |
| energyData.push({time: currentTime, energy: newEnergy}); |
| drawMetricsChart(); |
| |
| |
| quantumStates.forEach((state, index) => { |
| const phase = (currentTime + index) % 6; |
| |
| |
| anime({ |
| targets: state, |
| scale: [1, 1.15, 1], |
| rotate: [45, 50, 45], |
| backgroundColor: [ |
| state.style.backgroundColor, |
| `rgba(139, 92, 246, 0.9)`, |
| state.style.backgroundColor |
| ], |
| duration: 1200, |
| easing: 'easeInOutQuad' |
| }); |
| |
| |
| state.classList.add('active-state'); |
| setTimeout(() => { |
| state.classList.remove('active-state'); |
| }, 800); |
| }); |
| |
| |
| updateEntanglementLines(); |
| |
| |
| if (currentTime < 8) { |
| currentStateEl.textContent = '|Ψ(t)⟩'; |
| } else if (currentTime < 18) { |
| currentStateEl.textContent = '|Ψ*⟩'; |
| algorithmSteps.forEach(step => step.classList.remove('current-step')); |
| algorithmSteps[5].classList.add('current-step'); |
| } |
| |
| |
| if (currentTime >= 3 && currentTime < 8) { |
| algorithmSteps.forEach(step => step.classList.remove('current-step')); |
| algorithmSteps[3].classList.add('current-step'); |
| } else if (currentTime >= 8 && currentTime < 15) { |
| algorithmSteps.forEach(step => step.classList.remove('current-step')); |
| algorithmSteps[4].classList.add('current-step'); |
| } |
| |
| |
| if (currentTime < 25 && !stepMode) { |
| setTimeout(animateSimulation, 700); |
| } else { |
| if (!stepMode) { |
| simulationRunning = false; |
| startBtn.textContent = 'Restart Simulation'; |
| } else { |
| stepMode = false; |
| } |
| } |
| } |
| |
| |
| function updateEntanglementLines() { |
| |
| const existingLines = quantumCanvas.querySelectorAll('.entanglement-line'); |
| existingLines.forEach(line => line.remove()); |
| |
| |
| for (let i = 0; i < quantumStates.length - 1; i++) { |
| const line = document.createElement('div'); |
| line.className = 'entanglement-line absolute h-0.5 bg-gradient-to-r from-indigo-400 to-purple-400 opacity-60'; |
| |
| const rect1 = quantumStates[i].getBoundingClientRect(); |
| const rect2 = quantumStates[i + 1].getBoundingClientRect(); |
| const containerRect = quantumCanvas.getBoundingClientRect(); |
| |
| const x1 = rect1.left + rect1.width/2 - containerRect.left; |
| const y1 = rect1.top + rect1.height/2 - containerRect.top; |
| const x2 = rect2.left + rect2.width/2 - containerRect.left; |
| const y2 = rect2.top + rect2.height/2 - containerRect.top; |
| |
| const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); |
| const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI; |
| |
| line.style.width = `${length}px`; |
| line.style.left = `${x1}px`; |
| line.style.top = `${y1}px`; |
| line.style.transform = `rotate(${angle}deg)`; |
| line.style.transformOrigin = '0 0'; |
| |
| quantumCanvas.appendChild(line); |
| } |
| } |
| |
| |
| startBtn.addEventListener('click', () => { |
| if (!simulationRunning) { |
| simulationRunning = true; |
| stepMode = false; |
| startBtn.textContent = 'Running...'; |
| animateSimulation(); |
| } |
| }); |
| |
| stepBtn.addEventListener('click', () => { |
| stepMode = true; |
| animateSimulation(); |
| }); |
| |
| resetBtn.addEventListener('click', () => { |
| simulationRunning = false; |
| stepMode = false; |
| currentTime = 0; |
| startBtn.textContent = 'Start Simulation'; |
| initVisualization(); |
| |
| |
| algorithmSteps.forEach(step => step.classList.remove('current-step')); |
| algorithmSteps[0].classList.add('current-step'); |
| }); |
| |
| |
| window.addEventListener('load', () => { |
| initVisualization(); |
| |
| |
| anime({ |
| targets: '.quantum-state', |
| scale: [0, 1], |
| opacity: [0, 1], |
| rotate: [0, 45], |
| delay: anime.stagger(150), |
| duration: 1200, |
| easing: 'easeOutElastic' |
| }); |
| }); |
| </script> |
| <style> |
| .quantum-field { |
| background: radial-gradient(circle at 50% 50%, rgba(129, 140, 248, 0.1) 0%, transparent 50%), |
| radial-gradient(circle at 20% 80%, rgba(74, 222, 128, 0.05) 0%, transparent 50%), |
| radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.05) 0%, transparent 50%); |
| width: 100%; |
| height: 100%; |
| animation: fieldPulse 8s ease-in-out infinite; |
| } |
| |
| @keyframes fieldPulse { |
| 0%, 100% { opacity: 0.3; } |
| 50% { opacity: 0.6; } |
| } |
| |
| .entanglement-line { |
| animation: entanglementPulse 2s ease-in-out infinite; |
| } |
| |
| @keyframes entanglementPulse { |
| 0%, 100% { opacity: 0.3; } |
| 50% { opacity: 0.8; } |
| } |
| |
| .quantum-state { |
| transition: all 0.5s ease; |
| box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); |
| } |
| |
| .quantum-state.active-state { |
| box-shadow: 0 0 30px rgba(139, 92, 246, 0.8); |
| animation: quantumGlow 1s ease-in-out; |
| } |
| |
| @keyframes quantumGlow { |
| 0%, 100% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.3); } |
| 50% { box-shadow: 0 0 40px rgba(139, 92, 246, 0.8); } |
| } |
| </style> |
| </body> |
| </html> |
|
|
