Basic code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JARVIS MARK-85 INTERFACE</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&display=swap');
:root {
--cyan: #00f3ff;
--deep-cyan: #0066cc;
--gold: #ffcc00;
--warning: #ff3300;
--bg-black: #020205;
--glass: rgba(0, 243, 255, 0.05);
--border: rgba(0, 243, 255, 0.3);
}
* { margin: 0; padding: 0; box-sizing: border-box; cursor: crosshair; }
body {
background-color: var(--bg-black);
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Rajdhani', sans-serif;
overflow: hidden;
perspective: 2000px; /* Strong 3D perspective */
}
/* --- STARK HUD BACKGROUND --- */
#canvas-bg {
position: fixed;
top: 0; left: 0;
z-index: -1;
filter: blur(1px);
}
/* --- THE HOLOGRAPHIC CONTAINER --- */
.hologram-wrapper {
position: relative;
transform-style: preserve-3d;
transition: transform 0.1s ease-out;
}
.calculator {
position: relative;
width: 420px;
background: var(--glass);
backdrop-filter: blur(15px);
border: 2px solid var(--border);
border-radius: 40px;
padding: 40px;
box-shadow:
0 0 50px rgba(0, 243, 255, 0.1),
inset 0 0 30px rgba(0, 243, 255, 0.1);
transform: translateZ(50px);
overflow: visible;
}
/* Floating HUD Elements */
.hud-ring {
position: absolute;
border: 1px solid var(--cyan);
border-radius: 50%;
opacity: 0.2;
pointer-events: none;
animation: rotate 20s linear infinite;
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* --- DIGITAL DISPLAY --- */
.screen-unit {
position: relative;
background: rgba(0, 0, 0, 0.6);
margin-bottom: 30px;
padding: 20px;
border-left: 4px solid var(--cyan);
clip-path: polygon(0 0, 95% 0, 100% 25%, 100% 100%, 5% 100%, 0 75%);
}
#display {
width: 100%;
background: transparent;
border: none;
color: var(--cyan);
font-family: 'Orbitron', sans-serif;
font-size: 2.5rem;
text-align: right;
outline: none;
text-shadow: 0 0 15px var(--cyan);
letter-spacing: 2px;
}
.system-status {
font-size: 0.7rem;
color: var(--cyan);
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
/* --- ARC REACTOR BUTTONS --- */
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
button {
height: 70px;
background: rgba(0, 50, 80, 0.3);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--cyan);
font-family: 'Orbitron', sans-serif;
font-size: 1.1rem;
font-weight: bold;
transition: 0.3s all;
position: relative;
overflow: hidden;
clip-path: polygon(15% 0, 100% 0, 100% 85%, 85% 100%, 0 100%, 0 15%);
}
button::before {
content: '';
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: 0.5s;
}
button:hover {
background: rgba(0, 243, 255, 0.2);
box-shadow: 0 0 20px var(--cyan);
transform: translateZ(20px);
color: #fff;
}
button:hover::before { left: 100%; }
button:active { transform: scale(0.9); }
.btn-op { color: var(--gold); border-color: var(--gold); }
.btn-ac { color: var(--warning); border-color: var(--warning); }
.btn-eq {
grid-column: span 2;
background: linear-gradient(45deg, var(--deep-cyan), var(--cyan));
color: #000;
}
/* --- VOICE VISUALIZER --- */
.voice-bars {
display: flex;
gap: 3px;
height: 20px;
align-items: flex-end;
}
.bar { width: 3px; height: 5px; background: var(--cyan); }
.listening .bar { animation: barGrow 0.5s infinite alternate; }
@keyframes barGrow { to { height: 20px; background: var(--warning); } }
</style>
</head>
<body>
<canvas id="canvas-bg"></canvas>
<div class="hologram-wrapper" id="wrapper">
<div class="hud-ring" style="width: 600px; height: 600px; top: -100px; left: -100px;"></div>
<div class="hud-ring" style="width: 500px; height: 500px; top: -50px; left: -50px; animation-direction: reverse;"></div>
<div class="calculator">
<div class="system-status">
<span><i class="fas fa-microchip"></i> Jarvis MK-85</span>
<div class="voice-bars" id="vBars">
<div class="bar"></div><div class="bar"></div><div class="bar"></div>
</div>
<span id="volt">240.4V</span>
</div>
<div class="screen-unit">
<input type="text" id="display" readonly placeholder="0.00">
</div>
<div class="grid">
<button class="btn-ac" onclick="press('AC')">AC</button>
<button class="btn-op" onclick="press('DEL')"><i class="fas fa-backspace"></i></button>
<button class="btn-op" onclick="press('%')">%</button>
<button class="btn-op" onclick="press('/')">÷</button>
<button onclick="press('7')">7</button>
<button onclick="press('8')">8</button>
<button onclick="press('9')">9</button>
<button class="btn-op" onclick="press('*')">×</button>
<button onclick="press('4')">4</button>
<button onclick="press('5')">5</button>
<button onclick="press('6')">6</button>
<button class="btn-op" onclick="press('-')">−</button>
<button onclick="press('1')">1</button>
<button onclick="press('2')">2</button>
<button onclick="press('3')">3</button>
<button class="btn-op" onclick="press('+')">+</button>
<button onclick="press('0')">0</button>
<button onclick="voiceCmd()" id="mic"><i class="fas fa-microphone"></i></button>
<button class="btn-eq" onclick="calculate()">ENGAGE</button>
</div>
</div>
</div>
<script>
const display = document.getElementById('display');
const wrapper = document.getElementById('wrapper');
const vBars = document.getElementById('vBars');
// --- 1. PRO-LEVEL 3D TILT ---
document.addEventListener('mousemove', (e) => {
let x = (window.innerWidth / 2 - e.pageX) / 20;
let y = (window.innerHeight / 2 - e.pageY) / 20;
wrapper.style.transform = rotateX(${y}deg) rotateY(${-x}deg);
});
// --- 2. MATRIX STARK BACKGROUND ---
const canvas = document.getElementById('canvas-bg');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function drawBg() {
ctx.fillStyle = 'rgba(2, 2, 5, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = '#00f3ff11';
for(let i=0; i<20; i++) {
ctx.beginPath();
ctx.moveTo(Math.random()*canvas.width, 0);
ctx.lineTo(Math.random()*canvas.width, canvas.height);
ctx.stroke();
}
}
setInterval(drawBg, 50);
// --- 3. CORE LOGIC & SOUND ---
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function beep(freq = 440, type = 'sine', duration = 0.1) {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = type;
osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
osc.connect(gain);
gain.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + duration);
}
function press(val) {
beep(800, 'square', 0.05);
if (val === 'AC') display.value = '';
else if (val === 'DEL') display.value = display.value.slice(0, -1);
else display.value += val;
}
function calculate() {
try {
beep(1200, 'sine', 0.2);
let res = eval(display.value);
display.value = res;
speak(Analysis complete. Result is ${res});
} catch {
display.value = "SYS_ERROR";
beep(200, 'sawtooth', 0.4);
}
}
// --- 4. VOICE AI (JARVIS) ---
function speak(text) {
const msg = new SpeechSynthesisUtterance(text);
msg.rate = 1.2;
msg.pitch = 0.8;
window.speechSynthesis.speak(msg);
}
function voiceCmd() {
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'en-US';
vBars.classList.add('listening');
beep(600);
recognition.start();
recognition.onresult = (e) => {
let text = e.results[0][0].transcript.toLowerCase();
text = text.replace(/plus/g, '+').replace(/minus/g, '-').replace(/times|multiplied by/g, '*').replace(/divided by/g, '/');
display.value = text.replace(/[^0-9+\-*/.]/g, '');
calculate();
};
recognition.onend = () => vBars.classList.remove('listening');
}
// Random Voltage Flicker
setInterval(() => {
document.getElementById('volt').innerText = (238 + Math.random()*5).toFixed(1) + "V";
}, 1000);
</script>
</body>
</html>
