Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ASM+RUST Web Simulator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes blink { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.3; } | |
| } | |
| .blink { | |
| animation: blink 1s infinite; | |
| } | |
| .terminal-font { | |
| font-family: 'Courier New', monospace; | |
| } | |
| .glow { | |
| text-shadow: 0 0 5px rgba(66, 153, 225, 0.8); | |
| } | |
| .rust-orange { | |
| background-color: #dea584; | |
| } | |
| .asm-blue { | |
| background-color: #6b8cae; | |
| } | |
| .register-box { | |
| border: 1px dashed #4a5568; | |
| background-color: rgba(26, 32, 44, 0.7); | |
| } | |
| .memory-cell { | |
| width: 80px; | |
| height: 30px; | |
| border: 1px solid #4a5568; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.8rem; | |
| } | |
| .stack-frame { | |
| border-left: 2px solid #ecc94b; | |
| } | |
| .hex-value { | |
| color: #68d391; | |
| } | |
| .pointer { | |
| color: #f6ad55; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header with fake compilation status --> | |
| <header class="mb-8 border-b border-gray-700 pb-4"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-3xl font-bold terminal-font"> | |
| <span class="asm-blue px-2">ASM</span> | |
| <span class="rust-orange px-2">+RUST</span> | |
| <span class="text-gray-400">WEB_SIMULATOR.EXE</span> | |
| </h1> | |
| <div class="text-sm bg-gray-800 px-3 py-1 rounded"> | |
| <span class="text-green-400">●</span> | |
| <span class="ml-1">COMPILED: 0 WARNINGS</span> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-gray-400 terminal-font"> | |
| <span class="mr-4">VERSION: 0x1A4F2C</span> | |
| <span>BUILD: #[cfg(target_os = "web")]</span> | |
| </div> | |
| </header> | |
| <!-- Main terminal interface --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left panel - Assembly view --> | |
| <div class="lg:col-span-2 bg-gray-800 rounded-lg p-4 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-mono font-bold text-blue-300"> | |
| <i class="fas fa-microchip mr-2"></i>ASM DISASSEMBLY | |
| </h2> | |
| <div class="text-xs bg-gray-700 px-2 py-1 rounded"> | |
| ARCH: x86_64 | OPT: -O3 | |
| </div> | |
| </div> | |
| <div class="bg-black p-4 rounded font-mono text-sm h-96 overflow-y-auto"> | |
| <div class="mb-2"> | |
| <span class="text-gray-500">0x0000:</span> | |
| <span class="text-blue-300 ml-2">mov</span> | |
| <span class="text-yellow-300 ml-1">rax,</span> | |
| <span class="text-green-300">0x1</span> | |
| <span class="text-gray-500 ml-4">; Initialize counter</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-gray-500">0x0008:</span> | |
| <span class="text-blue-300 ml-2">lea</span> | |
| <span class="text-yellow-300 ml-1">rdi,</span> | |
| <span class="text-purple-300">[rel msg]</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-gray-500">0x000F:</span> | |
| <span class="text-blue-300 ml-2">mov</span> | |
| <span class="text-yellow-300 ml-1">rsi,</span> | |
| <span class="text-green-300">0x2</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-gray-500">0x0017:</span> | |
| <span class="text-blue-300 ml-2">syscall</span> | |
| <span class="text-gray-500 ml-4">; Write to stdout</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-gray-500">0x0019:</span> | |
| <span class="text-blue-300 ml-2">inc</span> | |
| <span class="text-yellow-300 ml-1">rax</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-gray-500">0x001C:</span> | |
| <span class="text-blue-300 ml-2">cmp</span> | |
| <span class="text-yellow-300 ml-1">rax,</span> | |
| <span class="text-green-300">0xA</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="text-gray-500">0x0024:</span> | |
| <span class="text-blue-300 ml-2">jl</span> | |
| <span class="text-purple-300 ml-1">0x0008</span> | |
| </div> | |
| <div class="mt-6 text-gray-500"> | |
| <span>msg:</span> | |
| <span class="ml-2 text-green-200">db</span> | |
| <span class="ml-2">'Simulating web with ASM+RUST',0xA,0</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-4 gap-2"> | |
| <div class="register-box p-2 rounded text-center"> | |
| <div class="text-xs text-gray-400">RAX</div> | |
| <div class="hex-value">0x0000001A</div> | |
| </div> | |
| <div class="register-box p-2 rounded text-center"> | |
| <div class="text-xs text-gray-400">RBX</div> | |
| <div class="hex-value">0x7FFF0000</div> | |
| </div> | |
| <div class="register-box p-2 rounded text-center"> | |
| <div class="text-xs text-gray-400">RCX</div> | |
| <div class="hex-value">0x00000000</div> | |
| </div> | |
| <div class="register-box p-2 rounded text-center"> | |
| <div class="text-xs text-gray-400">RDX</div> | |
| <div class="hex-value">0x0000001B</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right panel - Rust view --> | |
| <div class="bg-gray-800 rounded-lg p-4 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-mono font-bold text-orange-400"> | |
| <i class="fas fa-code mr-2"></i>RUST SOURCE | |
| </h2> | |
| <div class="text-xs bg-orange-900 px-2 py-1 rounded"> | |
| EDITION: 2021 | |
| </div> | |
| </div> | |
| <div class="bg-black p-4 rounded font-mono text-sm h-96 overflow-y-auto"> | |
| <div class="text-gray-400">// Web simulation crate</div> | |
| <div class="text-gray-400">#![no_std]</div> | |
| <div class="text-gray-400">#![feature(asm)]</div> | |
| <div class="mt-2"></div> | |
| <div><span class="text-purple-400">use</span> <span class="text-blue-300">web_sys</span><span class="text-gray-400">::{</span><span class="text-blue-300">Document</span><span class="text-gray-400">, </span><span class="text-blue-300">HtmlElement</span><span class="text-gray-400">};</span></div> | |
| <div class="mt-2"></div> | |
| <div><span class="text-purple-400">pub unsafe</span> <span class="text-purple-400">fn</span> <span class="text-yellow-300">simulate_web</span><span class="text-gray-400">() -> </span><span class="text-blue-300">Result</span><span class="text-gray-400"><(), </span><span class="text-blue-300">JsError</span><span class="text-gray-400">> {</span></div> | |
| <div class="ml-4"><span class="text-blue-300">let</span> <span class="text-gray-400">doc = </span><span class="text-blue-300">Document</span><span class="text-gray-400">::new()</span><span class="text-orange-400">?</span><span class="text-gray-400">;</span></div> | |
| <div class="ml-4"><span class="text-blue-300">let</span> <span class="text-gray-400">body = doc.body().</span><span class="text-yellow-300">unwrap</span><span class="text-gray-400">();</span></div> | |
| <div class="mt-2 ml-4"><span class="text-gray-400">// Inline ASM for performance</span></div> | |
| <div class="ml-4"><span class="text-purple-400">asm!</span><span class="text-gray-400">(</span></div> | |
| <div class="ml-8"><span class="text-gray-400">"mov rdi, {0}",</span></div> | |
| <div class="ml-8"><span class="text-gray-400">"call qword ptr [rdi + 0x18]",</span></div> | |
| <div class="ml-8"><span class="text-blue-300">in</span><span class="text-gray-400">(</span><span class="text-green-300">"rdi"</span><span class="text-gray-400">) </span><span class="text-yellow-300">&body</span><span class="text-gray-400">,</span></div> | |
| <div class="ml-4"><span class="text-gray-400">);</span></div> | |
| <div class="mt-2 ml-4"><span class="text-purple-400">Ok</span><span class="text-gray-400">(())</span></div> | |
| <div><span class="text-gray-400">}</span></div> | |
| <div class="mt-4"></div> | |
| <div><span class="text-purple-400">fn</span> <span class="text-yellow-300">main</span><span class="text-gray-400">() {</span></div> | |
| <div class="ml-4"><span class="text-blue-300">unsafe</span> <span class="text-gray-400">{</span></div> | |
| <div class="ml-8"><span class="text-yellow-300">simulate_web</span><span class="text-gray-400">().</span><span class="text-yellow-300">unwrap</span><span class="text-gray-400">();</span></div> | |
| <div class="ml-4"><span class="text-gray-400">}</span></div> | |
| <div><span class="text-gray-400">}</span></div> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div class="text-xs bg-gray-700 px-2 py-1 rounded"> | |
| <span class="text-green-400">$</span> cargo build --release | |
| </div> | |
| <div class="text-xs text-green-400 blink"> | |
| COMPILING... | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Memory visualization --> | |
| <div class="mt-8 bg-gray-800 rounded-lg p-4 shadow-lg"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-mono font-bold text-purple-300"> | |
| <i class="fas fa-memory mr-2"></i>MEMORY VISUALIZATION | |
| </h2> | |
| <div class="text-xs bg-gray-700 px-2 py-1 rounded"> | |
| HEAP: 0x7F450000 - 0x7F4A0000 | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-8 gap-1"> | |
| <div class="memory-cell bg-gray-900">0x7F45000</div> | |
| <div class="memory-cell bg-gray-900">0x7F45008</div> | |
| <div class="memory-cell bg-gray-900">0x7F45010</div> | |
| <div class="memory-cell bg-gray-900">0x7F45018</div> | |
| <div class="memory-cell bg-gray-900">0x7F45020</div> | |
| <div class="memory-cell bg-gray-900">0x7F45028</div> | |
| <div class="memory-cell bg-gray-900">0x7F45030</div> | |
| <div class="memory-cell bg-gray-900">0x7F45038</div> | |
| <div class="memory-cell bg-gray-700">0x00000001</div> | |
| <div class="memory-cell bg-gray-700">0x00000000</div> | |
| <div class="memory-cell bg-blue-900 text-white">0x7F45050</div> | |
| <div class="memory-cell bg-gray-700">0x00000002</div> | |
| <div class="memory-cell bg-gray-700">0x53494D20</div> | |
| <div class="memory-cell bg-gray-700">0x554C4157</div> | |
| <div class="memory-cell bg-gray-700">0x4954494E</div> | |
| <div class="memory-cell bg-gray-700">0x00000000</div> | |
| </div> | |
| <div class="mt-4 flex"> | |
| <div class="w-1/2 pr-2"> | |
| <div class="text-sm font-mono mb-2 text-yellow-300">STACK TRACE</div> | |
| <div class="bg-black p-3 rounded text-xs font-mono"> | |
| <div class="stack-frame pl-2 mb-1">0x7FFFEF34: main()</div> | |
| <div class="stack-frame pl-4 mb-1">0x7FFFEF2C: simulate_web()</div> | |
| <div class="stack-frame pl-6 mb-1">0x7FFFEF24: asm!("mov rdi...")</div> | |
| <div class="stack-frame pl-8">0x7FFFEF1C: syscall</div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-2"> | |
| <div class="text-sm font-mono mb-2 text-green-300">PERFORMANCE</div> | |
| <div class="bg-black p-3 rounded text-xs"> | |
| <div class="flex justify-between mb-1"> | |
| <span>ASM Cycles:</span> | |
| <span class="hex-value">0x0003E8 (1000)</span> | |
| </div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Rust Nanos:</span> | |
| <span class="hex-value">0x0000FA (250)</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Memory Used:</span> | |
| <span class="hex-value">0x000800 (2KB)</span> | |
| </div> | |
| <div class="mt-3 h-2 bg-gray-700 rounded-full"> | |
| <div class="h-2 bg-blue-500 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer with fake runtime stats --> | |
| <footer class="mt-8 border-t border-gray-700 pt-4 text-sm text-gray-400 font-mono"> | |
| <div class="flex justify-between"> | |
| <div> | |
| <span class="mr-4">RUNTIME: wasm32-unknown-unknown</span> | |
| <span>THREADS: 1</span> | |
| </div> | |
| <div> | |
| <span class="mr-4">ALLOC: jemalloc</span> | |
| <span>PANICS: abort</span> | |
| </div> | |
| <div class="text-green-400 blink"> | |
| <i class="fas fa-circle"></i> RUNNING | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Simulate some interactive elements | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Blinking cursor effect | |
| setInterval(() => { | |
| const cursor = document.createElement('span'); | |
| cursor.className = 'bg-green-400'; | |
| cursor.innerHTML = ' '; | |
| const terminals = document.querySelectorAll('.bg-black'); | |
| terminals.forEach(term => { | |
| if (term.querySelector('.bg-green-400')) { | |
| term.removeChild(term.querySelector('.bg-green-400')); | |
| } else { | |
| term.appendChild(cursor.cloneNode(true)); | |
| } | |
| }); | |
| }, 500); | |
| // Simulate register changes | |
| setInterval(() => { | |
| const registers = document.querySelectorAll('.register-box .hex-value'); | |
| registers.forEach(reg => { | |
| if (Math.random() > 0.7) { | |
| const current = parseInt(reg.textContent, 16); | |
| const newVal = (current + Math.floor(Math.random() * 0x10)).toString(16).toUpperCase(); | |
| reg.textContent = '0x' + newVal.padStart(8, '0'); | |
| } | |
| }); | |
| }, 1000); | |
| // Simulate memory changes | |
| setInterval(() => { | |
| const cells = document.querySelectorAll('.memory-cell:not(:first-child):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4))'); | |
| const randomCell = cells[Math.floor(Math.random() * cells.length)]; | |
| if (Math.random() > 0.8) { | |
| const current = randomCell.textContent; | |
| if (current.startsWith('0x')) { | |
| const val = parseInt(current, 16); | |
| const newVal = (val ^ Math.floor(Math.random() * 0xFFFFFFFF)).toString(16).toUpperCase(); | |
| randomCell.textContent = '0x' + newVal.padStart(8, '0'); | |
| randomCell.classList.add('glow'); | |
| setTimeout(() => randomCell.classList.remove('glow'), 300); | |
| } | |
| } | |
| }, 800); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=theharby/asm-rust-sim1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |