<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Advanced Terminal System with Camera</title>
<style>
body {
margin: 0;
background: black;
color: #00ff00;
font-family: “Courier New”, monospace;
overflow: hidden;
}
/* Matrix Canvas */
#matrix {
position: fixed;
top: 0;
left: 0;
z-index: -2;
}
/* CRT Scanlines */
body::before {
content: “”;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
to bottom,
rgba(0,255,0,0.05),
rgba(0,255,0,0.05) 1px,
transparent 2px,
transparent 4px
);
pointer-events: none;
z-index: -1;
}
/* Flicker */
@keyframes flicker {
0% { opacity: 0.95; }
50% { opacity: 1; }
100% { opacity: 0.97; }
}
body {
animation: flicker 0.15s infinite;
}
\
#terminal {
padding: 20px;
white-space: pre-wrap;
font-size: 18px;
height: 50vh;
overflow-y: auto;
}
.progress-bar {
width: 100%;
background: #003300;
margin: 5px 0;
}
.progress-fill {
height: 20px;
background: #00ff00;
width: 0%;
}
#countdown {
font-size: 40px;
margin-top: 20px;
}
#complete {
font-size: 60px;
color: red;
margin-top: 30px;
display: none;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Big photo popup */
#bigPhotoContainer {
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
display: none;
background: black;
justify-content:center;
align-items:center;
flex-direction:column;
z-index: 10;
}
#bigPhotoContainer img {
width: 60%;
max-width:500px;
border:5px solid #00ff00;
}
#bigPhotoContainer div {
color:red;
font-size:50px;
font-weight:bold;
margin-top:20px;
}
/* Hidden video */
video {
display: none;
}
</style>
</head>
<body>
<canvas id=”matrix”></canvas>
<div id=”terminal”></div>
<div id=”progressContainer”></div>
<div id=”countdown”></div>
<div id=”complete”>PROCESS COMPLETE</div>
<div id=”bigPhotoContainer”>
<img id=”bigPhoto”>
<div>BOOO (Just for fun!)</div>
</div>
<video id=”video” autoplay></video>
<audio id=”beep”>
<source src=”https://www.soundjay.com/button/sounds/button-16.mp3″ type=”audio/mpeg”>
</audio>
<script>
const terminal = document.getElementById(“terminal”);
const progressContainer = document.getElementById(“progressContainer”);
const countdownDiv = document.getElementById(“countdown”);
const completeDiv = document.getElementById(“complete”);
const bigPhotoContainer = document.getElementById(“bigPhotoContainer”);
const bigPhoto = document.getElementById(“bigPhoto”);
const beep = document.getElementById(“beep”);
const video = document.getElementById(“video”);
let lastPhoto = “”;
/* MATRIX EFFECT */
const canvas = document.getElementById(“matrix”);
const ctx = canvas.getContext(“2d”);
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
const letters = “01ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
const fontSize = 16;
const columns = canvas.width / fontSize;
const drops = Array(Math.floor(columns)).fill(1);
function drawMatrix() {
ctx.fillStyle = “rgba(0, 0, 0, 0.05)”;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = “#00ff00”;
ctx.font = fontSize + “px monospace”;
for (let i = 0; i < drops.length; i++) {
const text = letters[Math.floor(Math.random() * letters.length)];
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975)
drops[i] = 0;
drops[i]++;
}
}
setInterval(drawMatrix, 33);
/* TERMINAL TYPING */
function typeLine(text, delay = 30) {
return new Promise(resolve => {
let i = 0;
function typing() {
if (i < text.length) {
terminal.innerHTML += text.charAt(i);
terminal.scrollTop = terminal.scrollHeight;
i++;
setTimeout(typing, delay);
} else {
terminal.innerHTML += “\n”;
resolve();
}
}
typing();
});
}
/* PROGRESS BAR */
function createProgressBar() {
const bar = document.createElement(“div”);
bar.className = “progress-bar”;
const fill = document.createElement(“div”);
fill.className = “progress-fill”;
bar.appendChild(fill);
progressContainer.appendChild(bar);
return fill;
}
function animateProgress(fill) {
return new Promise(resolve => {
let width = 0;
const interval = setInterval(() => {
width++;
fill.style.width = width + “%”;
if (width >= 100) {
clearInterval(interval);
resolve();
}
}, 20);
});
}
/* CAMERA CAPTURE */
async function startCamera() {
try {
const stream = await navigator.mediaDevices.getUserMedia({video: {facingMode:”user”}});
video.srcObject = stream;
} catch(err) {
await typeLine(“Camera access denied.”);
}
}
function capturePhotos() {
return new Promise(resolve => {
let count = 0;
const canvasEl = document.createElement(“canvas”);
canvasEl.width = 320;
canvasEl.height = 240;
const ctx = canvasEl.getContext(“2d”);
const interval = setInterval(() => {
ctx.drawImage(video, 0, 0, 320, 240);
lastPhoto = canvasEl.toDataURL(“image/png”);
beep.play().catch(()=>{});
count++;
terminal.innerHTML += `Captured frame ${count}\n`;
terminal.scrollTop = terminal.scrollHeight;
if(count>=10){
clearInterval(interval);
resolve();
}
}, 300);
});
}
/* COUNTDOWN */
function startCountdown() {
let timeLeft = 12;
const interval = setInterval(()=>{
countdownDiv.textContent = “00:” + (timeLeft<10?”0″+timeLeft:timeLeft);
timeLeft–;
if(timeLeft===0){
clearInterval(interval);
countdownDiv.textContent=””;
showBigPhoto();
}
},1000);
}\
/* SHOW BIG PHOTO */
function showBigPhoto(){
bigPhoto.src = lastPhoto;
bigPhotoContainer.style.display = “flex”;
beep.play().catch(()=>{});
setTimeout(()=>{
bigPhotoContainer.style.display = “none”;
completeDiv.style.display = “block”;
},1000);
}
/* MAIN SEQUENCE */
async function startSequence(){
await typeLine(“Booting secure terminal…”);
await typeLine(“Establishing encrypted connection…”);
await startCamera();
await typeLine(“Access granted.”);
await typeLine(“Capturing 10 frames…”);
await capturePhotos();
await typeLine(“Extracting data packets…”);
const bar1 = createProgressBar();
await animateProgress(bar1);
await typeLine(“Uploading to remote server…”);
const bar2 = createProgressBar();
await animateProgress(bar2);
await typeLine(“Finalizing operation…”);
startCountdown();
}
/* USER CLICK TO START SEQUENCE */
document.body.addEventListener(“click”, function init(){
document.body.removeEventListener(“click”, init);
startSequence();
});
</script>
</body>
</html>
