Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Memristor Cycle Visualizer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'tech-dark': '#0a0a0f', | |
| 'tech-panel': '#111118', | |
| 'neon-blue': '#00d4ff', | |
| 'neon-green': '#00ff9d', | |
| 'neon-yellow': '#ffe600', | |
| 'neon-red': '#ff4444', | |
| 'neon-purple': '#b084ff', | |
| 'neon-orange': '#ff9500', | |
| 'border-subtle': '#1e1e2e', | |
| }, | |
| fontFamily: { | |
| 'mono': ['JetBrains Mono', 'Fira Code', 'Consolas', 'monospace'], | |
| 'sans': ['Inter', 'system-ui', 'sans-serif'], | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #05050a; | |
| color: #e0e0e8; | |
| font-family: 'Inter', system-ui, sans-serif; | |
| overflow-x: hidden; | |
| } | |
| /* ===== SCROLLBAR ===== */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| height: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #0a0a0f; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #1e1e2e; | |
| border-radius: 3px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #333344; | |
| } | |
| /* ===== GLOW EFFECTS ===== */ | |
| .glow-blue { | |
| box-shadow: 0 0 20px rgba(0, 212, 255, 0.15), 0 0 40px rgba(0, 212, 255, 0.05); | |
| } | |
| .glow-green { | |
| box-shadow: 0 0 20px rgba(0, 255, 157, 0.15); | |
| } | |
| .glow-red { | |
| box-shadow: 0 0 20px rgba(255, 68, 68, 0.15); | |
| } | |
| .glow-yellow { | |
| box-shadow: 0 0 20px rgba(255, 230, 0, 0.15); | |
| } | |
| /* ===== PULSE ANIMATION ===== */ | |
| @keyframes pulseGlow { | |
| 0%, 100% { box-shadow: 0 0 15px rgba(0, 212, 255, 0.2); } | |
| 50% { box-shadow: 0 0 30px rgba(0, 212, 255, 0.4); } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px); } | |
| 50% { transform: translateY(-6px); } | |
| } | |
| @keyframes scan { | |
| 0% { transform: translateY(-100%); opacity: 0; } | |
| 50% { opacity: 1; } | |
| 100% { transform: translateY(100%); opacity: 0; } | |
| } | |
| @keyframes drift { | |
| 0% { transform: translate(0, 0) rotate(0deg); } | |
| 33% { transform: translate(20px, -30px) rotate(2deg); } | |
| 66% { transform: translate(-15px, 15px) rotate(-1deg); } | |
| 100% { transform: translate(0, 0) rotate(0deg); } | |
| } | |
| @keyframes dataPulse { | |
| 0% { opacity: 0.3; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.3; } | |
| } | |
| .scan-line { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #00d4ff, transparent); | |
| animation: scan 3s ease-in-out infinite; | |
| pointer-events: none; | |
| } | |
| /* ===== MEMRISTOR CELL ===== */ | |
| .memristor-cell { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| cursor: pointer; | |
| overflow: hidden; | |
| } | |
| .memristor-cell:hover { | |
| transform: scale(1.08); | |
| z-index: 10; | |
| } | |
| .memristor-cell::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; bottom: 0; | |
| border-radius: inherit; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .memristor-cell.active::after { | |
| opacity: 1; | |
| box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1); | |
| } | |
| /* ===== ELECTRODE STRIPES ===== */ | |
| .electrode-top { | |
| background: repeating-linear-gradient( | |
| 90deg, | |
| transparent 0px, | |
| transparent 2px, | |
| rgba(255,255,255,0.06) 2px, | |
| rgba(255,255,255,0.06) 3px | |
| ); | |
| } | |
| .electrode-bottom { | |
| background: repeating-linear-gradient( | |
| 90deg, | |
| transparent 0px, | |
| transparent 2px, | |
| rgba(255,255,255,0.06) 2px, | |
| rgba(255,255,255,0.06) 3px | |
| ); | |
| } | |
| /* ===== NETWORK NODE ===== */ | |
| .net-node { | |
| position: absolute; | |
| border-radius: 50%; | |
| transition: all 0.4s ease; | |
| } | |
| .net-line { | |
| position: absolute; | |
| height: 1px; | |
| transform-origin: left center; | |
| transition: all 0.5s ease; | |
| } | |
| /* ===== CODE SECTION ===== */ | |
| .code-block { | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 12px; | |
| line-height: 1.7; | |
| } | |
| .code-line { | |
| display: flex; | |
| gap: 0; | |
| } | |
| .code-line-num { | |
| color: #3a3a55; | |
| min-width: 28px; | |
| text-align: right; | |
| padding-right: 12px; | |
| user-select: none; | |
| font-weight: 500; | |
| } | |
| .code-line.highlight { | |
| background: rgba(0, 212, 255, 0.08); | |
| border-left: 2px solid #00d4ff; | |
| } | |
| .code-line.highlight-red { | |
| background: rgba(255, 68, 68, 0.08); | |
| border-left: 2px solid #ff4444; | |
| } | |
| .code-line.highlight-green { | |
| background: rgba(0, 255, 157, 0.08); | |
| border-left: 2px solid #00ff9d; | |
| } | |
| .code-line.highlight-yellow { | |
| background: rgba(255, 230, 0, 0.08); | |
| border-left: 2px solid #ffe600; | |
| } | |
| /* ===== AMBIENT BACKGROUND ORBS ===== */ | |
| .orb { | |
| position: fixed; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .orb-1 { | |
| width: 500px; | |
| height: 500px; | |
| background: rgba(0, 212, 255, 0.04); | |
| top: -150px; | |
| right: -100px; | |
| animation: drift 20s ease-in-out infinite; | |
| } | |
| .orb-2 { | |
| width: 400px; | |
| height: 400px; | |
| background: rgba(0, 255, 157, 0.03); | |
| bottom: -100px; | |
| left: -100px; | |
| animation: drift 25s ease-in-out infinite reverse; | |
| } | |
| .orb-3 { | |
| width: 300px; | |
| height: 300px; | |
| background: rgba(176, 132, 255, 0.03); | |
| top: 50%; | |
| left: 50%; | |
| animation: drift 18s ease-in-out infinite; | |
| } | |
| /* ===== PHASE INDICATOR ===== */ | |
| .phase-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| } | |
| .phase-dot.active { | |
| box-shadow: 0 0 10px currentColor; | |
| } | |
| /* ===== BUTTON STATES ===== */ | |
| .btn-state { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .btn-state::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: -100%; | |
| width: 100%; height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); | |
| transition: left 0.5s ease; | |
| } | |
| .btn-state:hover::before { | |
| left: 100%; | |
| } | |
| .btn-state:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| /* ===== RESISTANCE BAR ===== */ | |
| .resist-bar { | |
| height: 4px; | |
| border-radius: 2px; | |
| transition: all 0.4s ease; | |
| position: relative; | |
| } | |
| .resist-bar::after { | |
| content: ''; | |
| position: absolute; | |
| right: 0; top: 0; bottom: 0; | |
| width: 2px; | |
| border-radius: 1px; | |
| background: currentColor; | |
| box-shadow: 0 0 8px currentColor; | |
| } | |
| /* ===== CHART CONTAINER ===== */ | |
| .chart-container canvas { | |
| max-height: 180px ; | |
| } | |
| /* ===== FILAMENT VISUAL ===== */ | |
| .filament { | |
| position: absolute; | |
| bottom: 0; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60%; | |
| border-radius: 4px 4px 0 0; | |
| transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| /* ===== TOOLTIP ===== */ | |
| .memristor-cell .tooltip { | |
| position: absolute; | |
| bottom: calc(100% + 8px); | |
| left: 50%; | |
| transform: translateX(-50%) scale(0.9); | |
| background: #1a1a2e; | |
| border: 1px solid #2a2a3e; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| font-size: 11px; | |
| white-space: nowrap; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: all 0.2s ease; | |
| z-index: 100; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.5); | |
| } | |
| .memristor-cell:hover .tooltip { | |
| opacity: 1; | |
| transform: translateX(-50%) scale(1); | |
| } | |
| /* ===== NETWORK FLOW PARTICLES ===== */ | |
| .flow-particle { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| border-radius: 50%; | |
| pointer-events: none; | |
| } | |
| /* ===== SECTION CARDS ===== */ | |
| .section-card { | |
| background: #0f0f16; | |
| border: 1px solid #1a1a2a; | |
| border-radius: 16px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .section-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, rgba(0,212,255,0.2), transparent); | |
| } | |
| /* ===== STATUS LED ===== */ | |
| .status-led { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| } | |
| /* ===== RESPONSIVE ===== */ | |
| @media (max-width: 1024px) { | |
| .grid-main { grid-template-columns: 1fr ; } | |
| } | |
| /* ===== ANIMATED GRID BG ===== */ | |
| .bg-grid { | |
| background-image: | |
| linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| } | |
| /* ===== GLASS PANEL ===== */ | |
| .glass-panel { | |
| background: rgba(15, 15, 22, 0.7); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| } | |
| /* ===== DECORATIVE CORNERS ===== */ | |
| .corner-accent { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| } | |
| .corner-accent.tl { | |
| top: 0; left: 0; | |
| border-top: 2px solid rgba(0,212,255,0.3); | |
| border-left: 2px solid rgba(0,212,255,0.3); | |
| border-radius: 4px 0 0 0; | |
| } | |
| .corner-accent.tr { | |
| top: 0; right: 0; | |
| border-top: 2px solid rgba(0,212,255,0.3); | |
| border-right: 2px solid rgba(0,212,255,0.3); | |
| border-radius: 0 4px 0 0; | |
| } | |
| .corner-accent.bl { | |
| bottom: 0; left: 0; | |
| border-bottom: 2px solid rgba(0,212,255,0.3); | |
| border-left: 2px solid rgba(0,212,255,0.3); | |
| border-radius: 0 0 0 4px; | |
| } | |
| .corner-accent.br { | |
| bottom: 0; right: 0; | |
| border-bottom: 2px solid rgba(0,212,255,0.3); | |
| border-right: 2px solid rgba(0,212,255,0.3); | |
| border-radius: 0 0 4px 0; | |
| } | |
| /* ===== SINE WAVE BG ===== */ | |
| .wave-bg { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 60px; | |
| opacity: 0.06; | |
| pointer-events: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Ambient Background Orbs --> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| <!-- Background Grid --> | |
| <div class="fixed inset-0 bg-grid pointer-events-none z-0"></div> | |
| <!-- HEADER --> | |
| <header class="relative z-10 border-b border-border-subtle glass-panel sticky top-0"> | |
| <div class="max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-3 flex items-center justify-between"> | |
| <div class="flex items-center gap-4"> | |
| <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-neon-blue/20 to-neon-purple/20 border border-neon-blue/30 flex items-center justify-center"> | |
| <svg class="w-5 h-5 text-neon-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <h1 class="text-lg font-bold tracking-tight text-white leading-tight">Memristor<span class="text-neon-blue">Cycle</span> <span class="text-neon-purple font-light">Visualizer</span></h1> | |
| <p class="text-xs text-gray-500">Real-time RRAM simulation with Python code generation</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-6"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-[11px] text-gray-500 hover:text-neon-blue transition-colors">Built with anycoder</a> | |
| <div class="flex items-center gap-3"> | |
| <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-tech-dark border border-border-subtle"> | |
| <div class="status-led bg-neon-green animate-pulse" id="statusLed"></div> | |
| <span class="text-xs text-gray-400 font-mono" id="statusText">IDLE</span> | |
| </div> | |
| <div class="hidden sm:flex items-center gap-2 px-3 py-1.5 rounded-lg bg-tech-dark border border-border-subtle"> | |
| <span class="text-xs text-gray-500">Cycle:</span> | |
| <span class="text-xs font-mono font-bold text-neon-blue" id="cycleCount">0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- MAIN --> | |
| <main class="relative z-10 max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6"> | |
| <!-- PHASE STRIP --> | |
| <div class="mb-6 section-card p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-wider">Operation Cycle</h2> | |
| <span class="text-xs text-gray-500 font-mono" id="phaseDescription">Ready to begin operation cycle</span> | |
| </div> | |
| <div class="flex items-center gap-0 sm:gap-2"> | |
| <div class="flex-1 flex flex-col items-center gap-2" id="phase0"> | |
| <div class="phase-dot bg-gray-600" data-phase="0"></div> | |
| <span class="text-[10px] text-gray-500 font-mono uppercase tracking-wider">Init</span> | |
| </div> | |
| <div class="w-8 sm:w-16 h-px bg-gray-700" id="conn0"></div> | |
| <div class="flex-1 flex flex-col items-center gap-2" id="phase1"> | |
| <div class="phase-dot bg-gray-600" data-phase="1"></div> | |
| <span class="text-[10px] text-gray-500 font-mono uppercase tracking-wider">Read</span> | |
| </div> | |
| <div class="w-8 sm:w-16 h-px bg-gray-700" id="conn1"></div> | |
| <div class="flex-1 flex flex-col items-center gap-2" id="phase2"> | |
| <div class="phase-dot bg-gray-600" data-phase="2"></div> | |
| <span class="text-[10px] text-gray-500 font-mono uppercase tracking-wider">SET</span> | |
| </div> | |
| <div class="w-8 sm:w-16 h-px bg-gray-700" id="conn2"></div> | |
| <div class="flex-1 flex flex-col items-center gap-2" id="phase3"> | |
| <div class="phase-dot bg-gray-600" data-phase="3"></div> | |
| <span class="text-[10px] text-gray-500 font-mono uppercase tracking-wider">Verify</span> | |
| </div> | |
| <div class="w-8 sm:w-16 h-px bg-gray-700" id="conn3"></div> | |
| <div class="flex-1 flex flex-col items-center gap-2" id="phase4"> | |
| <div class="phase-dot bg-gray-600" data-phase="4"></div> | |
| <span class="text-[10px] text-gray-500 font-mono uppercase tracking-wider">RESET</span> | |
| </div> | |
| <div class="w-8 sm:w-16 h-px bg-gray-700" id="conn4"></div> | |
| <div class="flex-1 flex flex-col items-center gap-2" id="phase5"> | |
| <div class="phase-dot bg-gray-600" data-phase="5"></div> | |
| <span class="text-[10px] text-gray-500 font-mono uppercase tracking-wider">Read</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- MAIN GRID --> | |
| <div class="grid grid-main gap-6" style="grid-template-columns: 1fr 420px;"> | |
| <!-- LEFT COLUMN --> | |
| <div class="flex flex-col gap-6"> | |
| <!-- MEMRISTOR MATRIX --> | |
| <div class="section-card p-5"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-8 h-8 rounded-lg bg-neon-blue/10 border border-neon-blue/20 flex items-center justify-center"> | |
| <svg class="w-4 h-4 text-neon-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/> | |
| </svg> | |
| </div> | |
| <div> | |
| <h2 class="text-sm font-semibold text-white">Memristor Matrix</h2> | |
| <p class="text-[11px] text-gray-500">8x6 crossbar array — each cell resistance: 1k-100kOhm</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-3"> | |
| <div class="flex items-center gap-1.5 text-[11px] text-gray-400"> | |
| <span class="w-3 h-3 rounded bg-[#1a3a5c] border border-[#00d4ff]/30"></span> | |
| <span>HRS</span> | |
| </div> | |
| <div class="flex items-center gap-1.5 text-[11px] text-gray-400"> | |
| <span class="w-3 h-3 rounded bg-[#4a3000] border border-[#ffe600]/30"></span> | |
| <span>LRS</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="memristorGrid" class="flex flex-col items-center gap-1 py-3 select-none"></div> | |
| <div class="scan-line"></div> | |
| </div> | |
| <!-- NETWORK FLOW + IO --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Input --> | |
| <div class="section-card p-4"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <svg class="w-4 h-4 text-neon-green" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/> | |
| </svg> | |
| <span class="text-xs font-semibold text-neon-green uppercase tracking-wider">Input Vector</span> | |
| </div> | |
| <div id="inputVector" class="flex flex-col gap-1.5"></div> | |
| </div> | |
| <!-- Network Flow --> | |
| <div class="section-card p-4 relative overflow-hidden"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <svg class="w-4 h-4 text-neon-purple" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/> | |
| </svg> | |
| <span class="text-xs font-semibold text-neon-purple uppercase tracking-wider">Vector-Matrix Multiply</span> | |
| </div> | |
| <canvas id="networkCanvas" class="w-full h-[140px] rounded-lg"></canvas> | |
| <div class="absolute bottom-3 left-4 right-4"> | |
| <div class="flex items-center justify-between text-[10px] text-gray-500 font-mono"> | |
| <span>Input Layer</span> | |
| <span>Memristor Array</span> | |
| <span>Output</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Output --> | |
| <div class="section-card p-4"> | |
| <div class="flex items-center gap-2 mb-3"> | |
| <svg class="w-4 h-4 text-neon-yellow" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 10l7-7m0 0l7 7m-7-7v18"/> | |
| </svg> | |
| <span class="text-xs font-semibold text-neon-yellow uppercase tracking-wider">Output Vector</span> | |
| </div> | |
| <div id="outputVector" class="flex flex-col gap-1.5"></div> | |
| </div> | |
| </div> | |
| <!-- RESISTANCE HISTORY CHART --> | |
| <div class="section-card p-5"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center gap-2"> | |
| <svg class="w-4 h-4 text-neon-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z"/> | |
| </svg> | |
| <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Resistance Timeline</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-[10px] text-gray-500">Tracking cell</span> | |
| <span class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-tech-dark border border-border-subtle text-neon-blue" id="trackedCell">R3,C2</span> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="resistanceChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- LIVE PYTHON CODE --> | |
| <div class="section-card p-5 relative"> | |
| <div class="corner-accent tl"></div> | |
| <div class="corner-accent tr"></div> | |
| <div class="corner-accent bl"></div> | |
| <div class="corner-accent br"></div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center gap-3"> | |
| <div class="flex items-center gap-2"> | |
| <svg class="w-4 h-4 text-neon-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/> | |
| </svg> | |
| <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Live Python Code</span> | |
| </div> | |
| <span class="text-[10px] px-2 py-0.5 rounded-full bg-neon-blue/10 text-neon-blue border border-neon-blue/20 font-mono" id="codeBadge">memristor_model.py</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <span class="text-[10px] text-gray-500" id="pythonVersion">Python 3.10</span> | |
| <button onclick="copyCode()" class="p-1.5 rounded-lg hover:bg-white/5 transition-colors group" title="Copy code"> | |
| <svg class="w-4 h-4 text-gray-500 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="rounded-xl overflow-hidden border border-border-subtle bg-[#0c0c14]"> | |
| <div class="code-block p-4 overflow-x-auto" id="codeDisplay"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT COLUMN: CONTROLS + INFO --> | |
| <div class="flex flex-col gap-6"> | |
| <!-- CONTROL PANEL --> | |
| <div class="section-card p-5"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <svg class="w-4 h-4 text-neon-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/> | |
| </svg> | |
| <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Control Panel</span> | |
| </div> | |
| <div class="flex flex-col gap-3"> | |
| <button id="btnRead" class="btn-state px-4 py-3 rounded-xl border border-neon-blue/30 bg-neon-blue/5 text-neon-blue text-sm font-medium hover:bg-neon-blue/10 transition-all flex items-center justify-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/> | |
| </svg> | |
| Read Resistance (Vread = 0.1V) | |
| </button> | |
| <button id="btnSet" class="btn-state px-4 py-3 rounded-xl border border-neon-green/30 bg-neon-green/5 text-neon-green text-sm font-medium hover:bg-neon-green/10 transition-all flex items-center justify-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/> | |
| </svg> | |
| SET Cycle (Vset = 2.0V) | |
| </button> | |
| <button id="btnReset" class="btn-state px-4 py-3 rounded-xl border border-neon-red/30 bg-neon-red/5 text-neon-red text-sm font-medium hover:bg-neon-red/10 transition-all flex items-center justify-center gap-2"> | |
| <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 14l-7 7m0 0l-7-7m7 7V3"/> | |
| </svg> | |
| RESET Cycle (Vreset = -2.0V) | |
| </button> | |
| <div class="h-px bg-border-subtle my-1"></div> | |
| <button id="btnFull" class="btn-state px-4 py-3 rounded-xl border border-neon-purple/30 bg-neon-purple/5 text-neon-purple text-sm font-medium hover:bg-neon-purple/10 transition-all flex items-center justify-center gap-2"> | |
| <svg class="w-4 h-4 animate-spin-slow" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/> | |
| </svg> | |
| Run Full Cycle | |
| </button> | |
| <button id="btnResetSim" class="btn-state px-4 py-2.5 rounded-xl border border-border-subtle bg-tech-dark text-gray-400 text-xs font-medium hover:text-white hover:border-gray-600 transition-all flex items-center justify-center gap-2"> | |
| <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/> | |
| </svg> | |
| Reset Simulation | |
| </button> | |
| </div> | |
| </div> | |
| <!-- PHYSICS INFO --> | |
| <div class="section-card p-5"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <svg class="w-4 h-4 text-neon-orange" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/> | |
| </svg> | |
| <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">Device Physics</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="p-3 rounded-xl bg-tech-dark border border-border-subtle"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-[11px] text-gray-400">Oxygen Vacancy Filament</span> | |
| <span class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-neon-blue/10 text-neon-blue" id="filamentState">INTACT</span> | |
| </div> | |
| <div class="h-2 bg-[#0a0a12] rounded-full overflow-hidden"> | |
| <div id="filamentBar" class="h-full rounded-full transition-all duration-1000 ease-out" style="width: 0%; background: #00d4ff;"></div> | |
| </div> | |
| <div class="flex justify-between mt-1"> | |
| <span class="text-[10px] text-gray-600 font-mono">Broken</span> | |
| <span class="text-[10px] text-gray-600 font-mono">Formed</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="p-3 rounded-xl bg-tech-dark border border-border-subtle"> | |
| <span class="text-[11px] text-gray-400 block mb-1">Current Resistance</span> | |
| <span class="text-lg font-bold font-mono text-neon-blue" id="currentRes">--</span> | |
| <span class="text-[10px] text-gray-500 font-mono ml-1">kOhm</span> | |
| </div> | |
| <div class="p-3 rounded-xl bg-tech-dark border border-border-subtle"> | |
| <span class="text-[11px] text-gray-400 block mb-1">Applied Voltage</span> | |
| <span class="text-lg font-bold font-mono" id="currentVolt">--</span> | |
| <span class="text-[10px] text-gray-500 font-mono ml-1">V</span> | |
| </div> | |
| </div> | |
| <div class="p-3 rounded-xl bg-tech-dark border border-border-subtle"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-[11px] text-gray-400">Memristance State</span> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <div id="stateBar" class="flex-1 h-2 bg-[#0a0a12] rounded-full overflow-hidden"> | |
| <div id="stateFill" class="h-full rounded-full transition-all duration-700" style="width: 0%; background: #00d4ff;"></div> | |
| </div> | |
| <span class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-tech-dark border border-border-subtle text-gray-400" id="stateLabel">OFF</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- PHASE DETAIL --> | |
| <div class="section-card p-5"> | |
| <div class="flex items-center gap-2 mb-4"> | |
| <svg class="w-4 h-4 text-neon-yellow" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 011 |