<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Evervault - Interactive Web3 Terminal</title> <script src="https://unpkg.com/@phosphor-icons/web"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <style> :root { --bg: #010103; --card-bg: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.1); --text-main: #ffffff; --text-dim: #94a3b8; --accent: #8b5cf6; --terminal-green: #4ade80; } body, html { margin: 0; padding: 0; background-color: var(--bg); color: var(--text-main); font-family: 'Inter', sans-serif; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 80px 24px; } .layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 32px; position: relative; overflow: hidden; min-height: 660px; display: flex; flex-direction: column; justify-content: space-between; padding: 48px 48px 0 48px; } #cage-webgl { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .card-content { position: relative; z-index: 10; pointer-events: none; padding-bottom: 48px; } .card-content a, .card-content button, .card-content .tab, .card-content .terminal-input { pointer-events: auto; } h2 { font-size: 32px; margin: 0 0 16px; font-weight: 500; } .beta { font-size: 11px; background: rgba(139, 92, 246, 0.2); padding: 3px 10px; border-radius: 12px; margin-left: 12px; color: #a78bfa; text-transform: uppercase; border: 1px solid rgba(139, 92, 246, 0.3); } p { color: var(--text-dim); line-height: 1.6; font-size: 15px; max-width: 420px; margin-bottom: 32px; } .btn-row { display: flex; gap: 20px; align-items: center; } .btn-white { background: #fff; color: #000; padding: 12px 28px; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 14px; transition: 0.2s; } /* --- TERMINAL & EDITOR --- */ .playground-header { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--text-dim); font-size: 13px; } .editor { background: #000; border: 1px solid var(--border); border-radius: 12px; margin-top: 12px; overflow: hidden; } .tabs { display: flex; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--border); } .tab { padding: 12px 18px; font-size: 12px; color: var(--text-dim); border-right: 1px solid var(--border); cursor: pointer; } .tab.active { background: #000; color: #fff; border-bottom: 2px solid var(--accent); } .code-block { padding: 20px; font-family: 'Fira Code', monospace; font-size: 13px; line-height: 1.6; min-height: 80px; white-space: pre; } .kw { color: #f472b6; } .fn { color: #38bdf8; } .str { color: #a5b4fc; } /* --- INTERACTIVE TERMINAL --- */ .terminal { background: #080808; border-top: 1px solid var(--border); padding: 16px 20px; font-family: 'Fira Code', monospace; font-size: 12px; color: var(--terminal-green); min-height: 100px; max-height: 150px; overflow-y: auto; } .terminal-line { margin-bottom: 4px; display: flex; gap: 8px; } .prompt { color: var(--accent); font-weight: bold; } .terminal-input { background: transparent; border: none; color: var(--terminal-green); font-family: inherit; font-size: inherit; outline: none; width: 100%; } .footer { border-top: 1px solid var(--border); margin-top: 60px; padding-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-bottom: 100px; } .feature-item { font-size: 14px; color: var(--text-dim); display: flex; gap: 12px; } .feature-item i { font-size: 18px; color: var(--accent); } </style> </head> <body> <div class="container"> <div class="layout-grid"> <div class="card" id="card-nodes"> <canvas id="cage-webgl"></canvas> <div class="card-content"> <h2>Enclaves <span class="beta">Mainnet</span></h2> <p>Hardware-isolated environments for private blockchain operations. Secure your ZK-provers and validator keys with TEE technology.</p> <div class="btn-row"> <a href="#" class="btn-white">Deploy Node</a> </div> </div> </div> <div class="card"> <div class="card-content"> <h2>Privacy Layers</h2> <p>Off-chain privacy computation. Process encrypted state transitions and generate proofs securely.</p> <div class="playground-header"> <span style="display: flex; align-items: center; gap: 6px;"><i class="ph ph-terminal-window"></i> Interactive Shell</span> <span style="font-size: 11px; opacity: 0.5;">Type 'help' for commands</span> </div> <div class="editor"> <div class="tabs"> <div class="tab active" onclick="updateEditor(this, 'js')">zkProof.js</div> <div class="tab" onclick="updateEditor(this, 'rs')">main.rs</div> </div> <div id="code-main" class="code-block"></div> <div class="terminal" id="terminal-body" onclick="document.getElementById('cli').focus()"> <div id="terminal-history"> <div class="terminal-line">Welcome to Enclave Shell v1.0.4</div> </div> <div class="terminal-line"> <span class="prompt">></span> <input type="text" id="cli" class="terminal-input" spellcheck="false" autocomplete="off"> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="feature-item"><i class="ph ph-intersect"></i><span>TEE-based ZK generation.</span></div> <div class="feature-item"><i class="ph ph-cube"></i><span>Validator key security.</span></div> <div class="feature-item"><i class="ph ph-fingerprint"></i><span>Private KYC enclaves.</span></div> </div> </div> <script> /* --- TERMINAL INTERACTION --- */ const cli = document.getElementById('cli'); const history = document.getElementById('terminal-history'); cli.addEventListener('keydown', (e) => { if (e.key === 'Enter') { const cmd = cli.value.toLowerCase().trim(); const line = document.createElement('div'); line.className = 'terminal-line'; line.innerHTML = `<span class="prompt">></span> <span>${cli.value}</span>`; history.appendChild(line); processCommand(cmd); cli.value = ''; document.getElementById('terminal-body').scrollTop = history.scrollHeight; } }); function processCommand(cmd) { const response = document.createElement('div'); response.className = 'terminal-line'; response.style.opacity = '0.7'; if (cmd === 'help') { response.innerHTML = 'Available: deploy, status, verify, clear, proof'; } else if (cmd === 'status') { response.innerHTML = 'Enclave: Active | Node: Synchronized | Latency: 14ms'; } else if (cmd === 'deploy') { response.innerHTML = 'Initiating TEE deployment... [DONE] 0x44...ef21'; } else if (cmd === 'clear') { history.innerHTML = ''; return; } else if (cmd === '') { return; } else { response.innerHTML = `Command '${cmd}' not found. Try 'help'.`; } history.appendChild(response); } const codeData = { js: `const <span class="kw">proof</span> = await ev.<span class="fn">generateProof</span>('<span class="str">id</span>')\nconsole.<span class="fn">log</span>(proof.<span class="fn">isVerified</span>())`, rs: `<span class="kw">let</span> proof = enclave::<span class="fn">generate_snark</span>(<span class="str">"id"</span>).<span class="kw">await</span>?;\n<span class="fn">println!</span>(<span class="str">"Verified: {}"</span>, proof);` }; function updateEditor(el, lang) { document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); el.classList.add('active'); document.getElementById('code-main').innerHTML = codeData[lang]; } updateEditor(document.querySelector('.tab'), 'js'); /* --- WEBGL: FLUSH BOTTOM & ANIMATED NOISE --- */ const canvas = document.querySelector('#cage-webgl'); const parent = canvas.parentElement; const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true }); const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, parent.clientWidth / parent.clientHeight, 0.1, 1000); camera.position.set(0, 15, 45); const grid = new THREE.GridHelper(160, 60, 0x8b5cf6, 0x14142a); grid.position.y = -14; grid.material.transparent = true; grid.material.opacity = 0.4; scene.add(grid); const cage = new THREE.LineSegments( new THREE.EdgesGeometry(new THREE.BoxGeometry(16, 16, 16)), new THREE.LineBasicMaterial({ color: 0xd8b4fe, transparent: true, opacity: 0.6 }) ); cage.position.set(22, -12, -10); scene.add(cage); const fShader = ` varying vec2 vUv; uniform float uTime; float random(vec2 st) { return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123); } void main() { vec2 center = vec2(0.85, 0.05); float d = distance(vUv, center); vec3 whitePurple = vec3(0.98, 0.96, 1.0); vec3 purePurple = vec3(0.5, 0.2, 0.95); vec3 voidBg = vec3(0.01, 0.0, 0.02); float core = smoothstep(0.4, 0.0, d); float halo = smoothstep(1.1, 0.3, d); vec3 color = mix(voidBg, purePurple, halo); color = mix(color, whitePurple, core * 0.85); // ANIMATED FILM GRAIN float noise = (random(vUv + sin(uTime * 0.05)) - 0.5) * 0.12; color += noise; gl_FragColor = vec4(color, 1.0); } `; const uniforms = { uTime: { value: 0 } }; const bg = new THREE.Mesh( new THREE.PlaneGeometry(2, 2), new THREE.ShaderMaterial({ uniforms, vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }`, fragmentShader: fShader, depthWrite: false }) ); const bgScene = new THREE.Scene(); const bgCam = new THREE.Camera(); bgScene.add(bg); function resize() { renderer.setSize(parent.clientWidth, parent.clientHeight); camera.aspect = parent.clientWidth / parent.clientHeight; camera.updateProjectionMatrix(); } window.addEventListener('resize', resize); resize(); const clock = new THREE.Clock(); function animate() { requestAnimationFrame(animate); uniforms.uTime.value = clock.getElapsedTime(); renderer.autoClear = false; renderer.clear(); renderer.render(bgScene, bgCam); grid.position.z += 0.08; if(grid.position.z > 2.65) grid.position.z = 0; cage.rotation.y += 0.005; renderer.render(scene, camera); } animate(); </script> </body> </html>

Code & assets

Design System