<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<title>MU-TH-UR 6000 INTERFACE</title>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=VT323&display=swap’);
:root {
–term-green: #4af626;
–term-dim-green: #1f6b11;
–term-bg: #020a02;
–term-alert: #ffb000;
–term-danger: #ff3333;
–term-cyan: #00ffff;
–font-main: ‘VT323’, monospace;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: #000;
color: var(–term-green);
font-family: var(–font-main);
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Scanline & CRT Effects */
.crt-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
background-size: 100% 4px;
pointer-events: none;
z-index: 100;
opacity: 0.8;
}
.crt-vignette {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
box-shadow: inset 0 0 50px rgba(0,0,0,0.95);
pointer-events: none;
z-index: 90;
}
/* Split Screen Layout */
.interface-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
padding: 4px;
gap: 4px;
}
@media (orientation: landscape) {
.interface-container {
flex-direction: row;
}
}
.monitor {
flex: 1;
position: relative;
background-color: var(–term-bg);
border: 2px solid var(–term-dim-green);
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 10px;
box-shadow: 0 0 10px rgba(74, 246, 38, 0.15);
}
.monitor-header {
font-size: 1.2rem;
border-bottom: 1px solid var(–term-dim-green);
padding-bottom: 5px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: 0 0 5px var(–term-green);
flex-shrink: 0;
}
.screen-content {
flex: 1;
overflow-y: auto;
font-size: 1.2rem;
line-height: 1.2;
text-shadow: 0 0 4px rgba(74, 246, 38, 0.6);
display: flex;
flex-direction: column;
padding-right: 5px;
}
/* Custom Scrollbar */
.screen-content::-webkit-scrollbar {
width: 6px;
}
.screen-content::-webkit-scrollbar-track {
background: rgba(2, 10, 2, 0.8);
}
.screen-content::-webkit-scrollbar-thumb {
background: var(–term-dim-green);
border-radius: 3px;
}
.terminal-line {
margin-bottom: 4px;
word-wrap: break-word;
}
.cursor {
display: inline-block;
width: 10px;
height: 1.2em;
background-color: var(–term-green);
vertical-align: bottom;
animation: blink 1s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* Controls Area */
#monitor-2 .screen-content {
justify-content: flex-start;
}
.status-panel {
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px dashed var(–term-dim-green);
flex-shrink: 0;
}
.controls-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding-bottom: 10px;
}
@media (max-width: 400px) {
.controls-grid {
grid-template-columns: 1fr; /* Single column on very narrow phones */
}
}
.btn {
background-color: transparent;
color: var(–term-green);
border: 1px solid var(–term-green);
font-family: var(–font-main);
font-size: 1.1rem;
padding: 10px 5px;
text-transform: uppercase;
cursor: pointer;
text-shadow: 0 0 5px var(–term-green);
box-shadow: inset 0 0 5px rgba(74, 246, 38, 0.1);
transition: all 0.1s;
text-align: center;
}
.btn:active {
background-color: var(–term-green);
color: var(–term-bg);
box-shadow: 0 0 10px var(–term-green);
}
.btn:disabled {
opacity: 0.4;
cursor: not-allowed;
border-color: var(–term-dim-green);
color: var(–term-dim-green);
text-shadow: none;
box-shadow: none;
}
/* Special Button Colors */
.btn.alert {
color: var(–term-alert);
border-color: var(–term-alert);
text-shadow: 0 0 5px var(–term-alert);
}
.btn.alert:active { background-color: var(–term-alert); color: var(–term-bg); }
.btn.danger {
color: var(–term-danger);
border-color: var(–term-danger);
text-shadow: 0 0 5px var(–term-danger);
}
.btn.danger:active { background-color: var(–term-danger); color: var(–term-bg); }
.btn.cyan {
color: var(–term-cyan);
border-color: var(–term-cyan);
text-shadow: 0 0 5px var(–term-cyan);
}
.btn.cyan:active { background-color: var(–term-cyan); color: var(–term-bg); }
/* Text Colors */
.text-alert { color: var(–term-alert); text-shadow: 0 0 5px var(–term-alert); }
.text-danger { color: var(–term-danger); text-shadow: 0 0 5px var(–term-danger); }
.text-cyan { color: var(–term-cyan); text-shadow: 0 0 5px var(–term-cyan); }
.text-muted { color: var(–term-dim-green); }
/* Flicker Animation overlay */
.flicker {
animation: crt-flicker 0.15s infinite;
opacity: 0.95;
}
@keyframes crt-flicker {
0% { opacity: 0.95; }
50% { opacity: 0.90; }
100% { opacity: 0.95; }
}
</style>
</head>
<body>
<div class=”interface-container flicker”>
<!– Monitor 1: Mainframe Output –>
<div class=”monitor” id=”monitor-1″>
<div class=”crt-overlay”></div>
<div class=”crt-vignette”></div>
<div class=”monitor-header”>
<span>W-Y CORP</span>
<span>MU-TH-UR 6000</span>
</div>
<div class=”screen-content” id=”output-screen”>
<!– Terminal lines will be injected here –>
</div>
</div>
<!– Monitor 2: Interaction / Override –>
<div class=”monitor” id=”monitor-2″>
<div class=”crt-overlay”></div>
<div class=”crt-vignette”></div>
<div class=”monitor-header”>
<span>INTERFACE</span>
<span>DATACOM</span>
</div>
<div class=”screen-content” id=”control-screen”>
<div class=”status-panel”>
<div id=”status-readout” class=”terminal-line”>
<span class=”text-muted”>AWAITING INPUT…</span>
</div>
</div>
<!– Scrollable Grid of Commands –>
<div class=”controls-grid” id=”controls-grid”>
<button class=”btn” onclick=”executeCommand(‘status’)”>Ship Status</button>
<button class=”btn” onclick=”executeCommand(‘manifest’)”>Crew Manifest</button>
<button class=”btn” onclick=”executeCommand(‘sensors’)”>Sensor Array</button>
<button class=”btn” onclick=”executeCommand(‘comms’)”>Network Uplink</button>
<button class=”btn cyan” onclick=”executeCommand(‘medical’)”>Medical Log</button>
<button class=”btn cyan” onclick=”executeCommand(‘engines’)”>Engine Diag</button>
<button class=”btn alert” onclick=”executeCommand(‘directive’)”>Spec. Order 937</button>
<button class=”btn danger” onclick=”executeCommand(‘destruct’)”>Scuttle Ship</button>
</div>
</div>
</div>
</div>
<script>
const outputScreen = document.getElementById(‘output-screen’);
const statusReadout = document.getElementById(‘status-readout’);
const buttons = document.querySelectorAll(‘.btn’);
let isTyping = false;
const bootSequence = [
“WEYLAND-YUTANI CORPORATION”,
“BUILDING BETTER WORLDS”,
“————————–“,
“INITIATING MU-TH-UR 6000 SYSTEM…”,
“MEMORY CHECK: OK”,
“LIFE SUPPORT: NOMINAL”,
“HYPERSLEEP CHAMBERS: ACTIVE”,
“ESTABLISHING SECURE CONNECTION…”,
“READY.”
];
// Database of responses
const dataBanks = {
status: {
statusText: “QUERYING NOSTROMO SENSORS…”,
endStatus: “<span class=’text-muted’>STANDBY</span>”,
color: “”,
lines: [
“VESSEL: USCSS NOSTROMO”,
“REGISTRATION: 1809246(09)”,
“CARGO: 20,000,000 TONS MINERAL ORE”,
“COURSE: SOL SYSTEM / EARTH”,
“CREW: 7 SOULS”,
“STATUS: EN ROUTE”,
“WARNING: UNKNOWN TRANSMISSION DETECTED SECTOR 426”
]
},
manifest: {
statusText: “RETRIEVING PERSONNEL FILES…”,
endStatus: “<span class=’text-muted’>MANIFEST LOADED</span>”,
color: “”,
lines: [
“DALLAS, A. (CAPTAIN) – STATUS: UNKNOWN”,
“RIPLEY, E. (WARRANT OFFICER) – STATUS: ACTIVE”,
“KANE, G. (EXECUTIVE OFFICER) – STATUS: DECEASED”,
“ASH (SCIENCE OFFICER) – STATUS: ACTIVE”,
“LAMBERT, J. (NAVIGATOR) – STATUS: ACTIVE”,
“PARKER, J. (CHIEF ENGINEER) – STATUS: ACTIVE”,
“BRETT, S. (ENG. TECH) – STATUS: DECEASED”,
“JONES (MASCOT) – STATUS: ACTIVE”
]
},
sensors: {
statusText: “SWEEPING LOCAL SPACE…”,
endStatus: “<span class=’text-alert’>ANOMALY DETECTED</span>”,
color: “text-alert”,
lines: [
“SCANNING SECTOR ZETA II RETICULI…”,
“PLANETOID LV-426 DETECTED.”,
“ATMOSPHERE: PRIMORDIAL / TOXIC”,
“ACOUSTIC BEACON DETECTED: UNKNOWN ORIGIN”,
“TRANSLATING SIGNAL… ERROR: NON-HUMAN SYNTAX”,
“WARNING: RECOMMEND INVESTIGATION PER W-Y PROTOCOL”
]
},
comms: {
statusText: “ATTEMPTING UPLINK…”,
endStatus: “<span class=’text-danger’>UPLINK FAILED</span>”,
color: “text-muted”,
lines: [
“ESTABLISHING WEYLAND-YUTANI NETWORK UPLINK…”,
“TRANSMITTING ENCRYPTION KEYS…”,
“DISTANCE TO NETWORK TETHER: 39 LIGHT YEARS”,
“SIGNAL LATENCY: UNACCEPTABLE”,
“CONNECTION TIMEOUT.”,
“OPERATING IN AUTONOMOUS MODE.”
]
},
medical: {
statusText: “DECRYPTING AUTO-DOC LOGS…”,
endStatus: “<span class=’text-cyan’>LOGS COMPILED</span>”,
color: “text-cyan”,
lines: [
“PATIENT: KANE, G.”,
“FOREIGN ORGANISM DETECTED ATTACHED TO CRANIUM.”,
“COMPOSITION: PROTEIN POLYSACCHARIDES, SILICONE MATRIX.”,
“BLOOD: HIGHLY CORROSIVE MOLECULAR ACID.”,
“REMOVAL PROCEDURE: FATAL TO HOST.”,
“UPDATE: ORGANISM DETACHED DECEASED.”,
“UPDATE: PATIENT EXPERIENCED MASSIVE CHEST TRAUMA.”,
“HOST TERMINATED.”
]
},
engines: {
statusText: “DIAGNOSTIC IN PROGRESS…”,
endStatus: “<span class=’text-muted’>SYSTEMS NOMINAL</span>”,
color: “”,
lines: [
“FUSION REACTOR: STABLE”,
“PLASMA INJECTORS: 94% EFFICIENCY”,
“COOLANT LEVELS: NOMINAL”,
“HYPERDRIVE: CHARGING FOR JUMP”,
“ND-YAG LASER TARGETING: OFFLINE”,
“AIR SCRUBBERS: WARNING – BIOMATTER DETECTED IN DUCT 4”
]
},
directive: {
statusText: “ACCESSING CLASSIFIED FILES…”,
endStatus: “<span class=’text-alert’>PRIORITY OVERRIDE ENGAGED</span>”,
color: “text-alert”,
lines: [
“SPECIAL ORDER 937”,
“SCIENCE OFFICER EYES ONLY”,
“————————-“,
“PRIORITY ONE”,
“INSURE RETURN OF ORGANISM FOR ANALYSIS.”,
“ALL OTHER CONSIDERATIONS SECONDARY.”,
“CREW EXPENDABLE.”
]
},
destruct: {
statusText: “<span class=’text-danger’>CRITICAL OVERRIDE INITIATED</span>”,
endStatus: “<span class=’text-danger’>EVACUATE IMMEDIATELY</span>”,
color: “text-danger”,
lines: [
“UNAUTHORIZED ACCESS DETECTED”,
“INITIATING SCUTTLE PROCEDURE”,
“WARNING: COOLANT PURGE IN PROGRESS”,
“T-MINUS 10 MINUTES TO CORE DETONATION”,
“OPTION TO OVERRIDE: DENIED”,
“HAVE A NICE DAY.”
]
}
};
// Utility: Wait for ms
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
// Disable/Enable buttons to prevent overlapping typing sequences
function toggleButtons(state) {
buttons.forEach(btn => {
btn.disabled = !state;
});
}
// Create a new terminal line
function createLine(colorClass = “”) {
const line = document.createElement(‘div’);
line.className = `terminal-line ${colorClass}`;
outputScreen.appendChild(line);
outputScreen.scrollTop = outputScreen.scrollHeight;
return line;
}
// Typewriter effect for a single string
async function typeString(text, element, speed = 20) {
let currentHTML = element.innerHTML.replace(‘<span class=”cursor”></span>’, ”);
for (let i = 0; i < text.length; i++) {
currentHTML += text.charAt(i);
element.innerHTML = currentHTML + ‘<span class=”cursor”></span>’;
outputScreen.scrollTop = outputScreen.scrollHeight;
await sleep(speed + (Math.random() * 15));
}
element.innerHTML = currentHTML;
}
// Run a sequence of strings
async function runSequence(sequence, speed = 20, delayBetween = 150, colorClass = “”) {
for (let str of sequence) {
const line = createLine(colorClass);
line.innerHTML = ‘<span class=”cursor”></span>’;
await typeString(“> ” + str, line, speed);
await sleep(delayBetween);
}
// Add lingering cursor
const finalLine = createLine();
finalLine.innerHTML = ‘> <span class=”cursor”></span>’;
outputScreen.scrollTop = outputScreen.scrollHeight;
}
function clearTerminal() {
outputScreen.innerHTML = ”;
}
// Main command execution router
async function executeCommand(commandKey) {
if (isTyping) return;
isTyping = true;
toggleButtons(false);
const data = dataBanks[commandKey];
statusReadout.innerHTML = data.statusText;
clearTerminal();
// Randomize typing speed slightly based on alert level
let speed = data.color.includes(‘danger’) || data.color.includes(‘alert’) ? 30 : 15;
let delay = data.color.includes(‘danger’) ? 300 : 150;
await runSequence(data.lines, speed, delay, data.color);
statusReadout.innerHTML = data.endStatus;
isTyping = false;
toggleButtons(true);
}
// Initialize boot on load
window.onload = async () => {
isTyping = true;
toggleButtons(false);
await sleep(500);
await runSequence(bootSequence, 15, 100);
isTyping = false;
toggleButtons(true);
};
</script>
</body>
</html>
