Skip to content

Instantly share code, notes, and snippets.

@mode-mercury

mode-mercury/index.html

Created October 18, 2025 05:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mode-mercury/855e83adcd9ae348141bd22ec5b63ec0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mode-mercury/855e83adcd9ae348141bd22ec5b63ec0 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Veridian Terminal</title>
<style>
/* Windows 95 style background - simple repeating pattern */
body {
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'MS Sans Serif', 'Arial', sans-serif;
color: white;
height: 100vh;
width: 100vw;
background: #000080 url('https://i.imgur.com/4G9xXQZ.png') repeat; /* Windows 95 blue background pattern */
background-size: 64px 64px;
position: relative;
}
/* Full screen containers */
#dos-screen, #loading-screen, #startup-screen, #terminal {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
background-color: #000080;
color: #ffffff;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
font-size: 16px;
line-height: 1.3;
z-index: 9999;
font-weight: bold;
white-space: pre-wrap;
font-family: 'Lucida Console', Monaco, monospace, 'MS Sans Serif';
user-select: none;
}
#dos-screen {
background-color: black;
color: #00ff00;
font-size: 18px;
display: none;
}
#loading-screen {
display: none;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}
#startup-screen {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* TV animation container */
#tv-animation {
width: 300px;
height: 200px;
background-color: black;
position: relative;
overflow: hidden;
image-rendering: pixelated;
margin-bottom: 20px;
}
#tv-screen {
width: 100%;
height: 100%;
background-color: black;
position: relative;
}
.tv-eye {
position: absolute;
width: 40px;
height: 30px;
background-color: white;
border-radius: 50%;
}
#eye-left {
top: 30%;
left: 30%;
}
#eye-right {
top: 30%;
right: 30%;
}
.tv-pupil {
position: absolute;
width: 15px;
height: 15px;
background-color: black;
border-radius: 50%;
top: 7px;
left: 12px;
}
#moving-bar {
width: 100%;
height: 5px;
background-color: white;
position: absolute;
bottom: 0;
animation: moveBar 2s linear infinite;
}
@keyframes moveBar {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* Glitch effect text */
.glitch-text {
position: absolute;
color: red;
font-size: 24px;
animation: glitch 1s infinite alternate;
opacity: 0;
pointer-events: none;
user-select: none;
font-weight: bold;
}
@keyframes glitch {
0% { opacity: 0; transform: rotate(0deg); }
50% { opacity: 1; transform: rotate(5deg); }
100% { opacity: 0; transform: rotate(-5deg); }
}
/* Pixel artifacts */
.pixel {
position: absolute;
width: 4px;
height: 4px;
background-color: #f00;
pointer-events: none;
user-select: none;
}
/* Terminal styling */
#terminal {
background-color: black;
color: #00ff00;
font-family: 'Lucida Console', Monaco, monospace, 'MS Sans Serif';
display: none;
padding-bottom: 50px; /* space for input */
}
#output {
height: calc(100vh - 50px);
overflow-y: auto;
white-space: pre-wrap;
padding-right: 10px;
}
#input {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 80%;
max-width: 900px;
background-color: black;
color: #00ff00;
border: none;
outline: none;
font-family: 'Lucida Console', Monaco, monospace, 'MS Sans Serif';
font-size: 18px;
padding: 10px;
box-sizing: border-box;
border: 2px solid #00ff00;
}
/* Taskbar */
#taskbar {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: 30px;
background-color: #000080;
color: #fff;
display: flex;
align-items: center;
padding: 0 10px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
z-index: 10000;
user-select: none;
font-family: 'MS Sans Serif', Arial, sans-serif;
font-size: 14px;
}
#start-button {
cursor: pointer;
padding: 0 15px;
background-color: #0000a0;
border: 1px solid #fff;
height: 24px;
line-height: 24px;
user-select: none;
}
#taskbar-items {
margin-left: 10px;
display: flex;
gap: 10px;
flex-wrap: nowrap;
overflow-x: auto;
flex-grow: 1;
}
.task-item {
background-color: #0000a0;
border: 1px solid #fff;
padding: 0 8px;
height: 24px;
line-height: 24px;
cursor: pointer;
white-space: nowrap;
}
/* Start menu */
#start-menu {
display: none;
position: fixed;
bottom: 30px;
left: 10px;
width: 220px;
background-color: #c0c0c0;
border: 2px solid #000;
box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
font-family: 'MS Sans Serif', Arial, sans-serif;
font-size: 14px;
color: black;
z-index: 10001;
user-select: none;
}
#start-menu h3 {
margin: 0;
padding: 5px 10px;
background-color: #000080;
color: white;
font-weight: bold;
border-bottom: 2px solid #000;
}
#start-menu ul {
list-style: none;
padding: 5px 10px;
margin: 0;
}
#start-menu li {
padding: 5px 0;
cursor: pointer;
border-bottom: 1px solid #808080;
transition: background-color 0.3s;
}
#start-menu li:hover {
background-color: #000080;
color: white;
}
</style>
</head>
<body>
<!-- DOS screen with glitches and errors -->
<div id="dos-screen"></div>
<!-- Loading screen -->
<div id="loading-screen">Loading... Please Wait...</div>
<!-- Startup screen with TV animation -->
<div id="startup-screen" style="display:flex; flex-direction: column; align-items: center; justify-content: center; color:white;">
<div id="tv-animation">
<div id="tv-screen">
<div class="tv-eye" id="eye-left"><div class="tv-pupil"></div></div>
<div class="tv-eye" id="eye-right"><div class="tv-pupil"></div></div>
</div>
<div id="moving-bar"></div>
</div>
<div>Starting Veridian...</div>
</div>
<!-- Terminal -->
<div id="terminal">
<div id="output"></div>
<input type="text" id="input" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
</div>
<!-- Taskbar -->
<div id="taskbar">
<div id="start-button">Start</div>
<div id="taskbar-items"></div>
</div>
<!-- Start Menu -->
<div id="start-menu">
<h3>Start Menu</h3>
<ul>
<li id="notepad-launch">Notepad</li>
<li id="audio-recorder-launch">Audio Recorder</li>
<li id="netscape-launch">Netscape Navigator</li>
<li id="telnet-launch">Telnet</li>
<li id="file-browser-launch">File Browser</li>
<li id="bbs-launch">BBS Terminal</li>
<li id="program-files">Program Files</li>
<li id="terminal-launch">Open Terminal</li>
<li id="mirc-launch">Open mIRC</li>
<li id="exit">Exit</li>
</ul>
</div>
<!-- Apps and other windows omitted for brevity -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
const dosScreen = $('#dos-screen');
const loadingScreen = $('#loading-screen');
const startupScreen = $('#startup-screen');
const terminal = $('#terminal');
const output = $('#output');
const input = $('#input');
const startMenu = $('#start-menu');
const taskbarItems = $('#taskbar-items');
// DOS screen lines
const dosLines = [
"C:\\> Initializing Veridian Terminal...",
"C:\\> Loading modules...",
"C:\\> Establishing connections...",
"C:\\> Boot sequence complete.",
"C:\\> System check: All systems nominal.",
"C:\\> Welcome to Veridian."
];
// Show DOS screen first
dosScreen.show();
// Function to add glitch errors on DOS screen
function addGlitches() {
// Add glitch text randomly
for(let i=0; i<10; i++) {
const glitch = $('<div class="glitch-text">ERROR</div>');
glitch.css({
top: Math.random() * 90 + 'vh',
left: Math.random() * 90 + 'vw',
transform: `rotate(${Math.random()*30-15}deg)`
});
dosScreen.append(glitch);
}
// Add pixel artifacts
for(let i=0; i<50; i++) {
const pixel = $('<div class="pixel"></div>');
pixel.css({
top: Math.random() * 90 + 'vh',
left: Math.random() * 90 + 'vw',
backgroundColor: `rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)})`
});
dosScreen.append(pixel);
}
}
// Show DOS lines with glitches, then transition to loading screen
let index = 0;
function showDosLine() {
if(index < dosLines.length) {
dosScreen.append(dosLines[index] + "\n");
dosScreen.scrollTop(dosScreen[0].scrollHeight);
index++;
// Add glitches intermittently
if(index === 2) addGlitches();
setTimeout(showDosLine, 1000);
} else {
// After DOS lines, wait a moment, then show loading screen
setTimeout(() => {
// Fade out DOS screen with CRT off effect
dosScreen.css({opacity: 1});
dosScreen.animate({opacity: 0}, 1000, () => {
dosScreen.hide().empty().css({opacity: 1});
showLoadingScreen();
});
}, 1500);
}
}
function showLoadingScreen() {
loadingScreen.show();
setTimeout(() => {
loadingScreen.hide();
showStartupScreen();
}, 3000);
}
function showStartupScreen() {
startupScreen.show();
setTimeout(() => {
startupScreen.hide();
showTerminal();
}, 4000);
}
function showTerminal() {
terminal.show();
input.focus();
}
// Start the boot sequence
showDosLine();
// Start Menu toggle
$('#start-button').on('click', () => {
startMenu.toggle();
});
// Hide start menu if clicking outside
$(document).on('click', (e) => {
if(!$(e.target).closest('#start-menu, #start-button').length) {
startMenu.hide();
}
});
// Terminal command handling example
$('#input').on('keypress', (e) => {
if(e.which === 13) {
const cmd = input.val().trim();
output.append("> " + cmd + "\n");
input.val('');
output.scrollTop(output[0].scrollHeight);
// Add simple command responses here
if(cmd.toLowerCase() === 'help') {
output.append("Available commands: help, exit\n");
} else if(cmd.toLowerCase() === 'exit') {
output.append("Exiting terminal...\n");
terminal.hide();
} else {
output.append("Unknown command\n");
}
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment