<!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>“Create a "Evervault - Interactive Web3 Terminal" component. Use Phosphor Icons, Three.js for 3D WebGL rendering, GSAP for advanced animations. Implement custom GLSL shaders for visual effects. Color palette: #010103, #ffffff, #94a3b8, #8b5cf6, #4ade80. Layout: CSS Grid, Flexbox. Interactivity: click interactions, scroll-based effects, continuous animation loop, responsive resize handling. Includes form input fields. Use procedural noise for organic visual effects.”