109 lines
3.0 KiB
HTML
109 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Initializing... Please Wait</title>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
background: #0a0a0a;
|
|
color: #00ff41;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
padding: 2rem 3rem;
|
|
overflow: hidden;
|
|
}
|
|
.scanline {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
|
|
pointer-events: none;
|
|
z-index: 10;
|
|
}
|
|
.terminal {
|
|
max-width: 680px;
|
|
width: 100%;
|
|
}
|
|
.line {
|
|
font-size: 0.85rem;
|
|
line-height: 1.9;
|
|
color: #00c030;
|
|
}
|
|
.line.dim { color: #006010; }
|
|
.line.bright { color: #00ff41; }
|
|
.line.warn { color: #ffaa00; }
|
|
.prompt::before { content: '$ '; color: #00ff41; }
|
|
.header-ascii {
|
|
color: #00ff41;
|
|
font-size: 0.65rem;
|
|
line-height: 1.3;
|
|
margin-bottom: 1.5rem;
|
|
white-space: pre;
|
|
}
|
|
.cursor {
|
|
display: inline-block;
|
|
width: 9px; height: 1.1em;
|
|
background: #00ff41;
|
|
vertical-align: bottom;
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
|
|
.progress-line {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.85rem;
|
|
color: #00c030;
|
|
}
|
|
.bar {
|
|
display: inline-block;
|
|
width: 200px;
|
|
background: #001a00;
|
|
border: 1px solid #00c030;
|
|
height: 12px;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.bar-fill {
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
height: 100%;
|
|
background: #00ff41;
|
|
animation: fill 8s linear infinite;
|
|
}
|
|
@keyframes fill { 0%{width:0%} 85%{width:85%} 100%{width:85%} }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="scanline"></div>
|
|
<div class="terminal">
|
|
<div class="header-ascii">
|
|
____ ____ ____ ____
|
|
/ ___|| _ \| _ \/ ___|
|
|
\___ \| |_) | | | \___ \
|
|
___) | _ <| |_| |___) |
|
|
|____/|_| \_\____/|____/
|
|
</div>
|
|
<div class="line dim">[BOOT] BIOS v2.4.1 loaded</div>
|
|
<div class="line dim">[BOOT] Mounting root filesystem... OK</div>
|
|
<div class="line">[INIT] Loading kernel modules... OK</div>
|
|
<div class="line">[INIT] Starting network services... OK</div>
|
|
<div class="line">[INIT] Checking integrity... OK</div>
|
|
<div class="line warn">[WARN] Web interface offline — maintenance in progress</div>
|
|
<div class="line dim">[SYS ] Rebuilding index...</div>
|
|
<div class="line dim">[SYS ] Migrating database...</div>
|
|
<div class="line bright">[SYS ] Deploying new build...</div>
|
|
<div class="progress-line">
|
|
Progress: <span class="bar"><span class="bar-fill"></span></span> 85%
|
|
</div>
|
|
<div class="line" style="margin-top:1.2rem">
|
|
<span class="prompt"></span>Initializing... Please Wait<span class="cursor"></span>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|