forked from Firepup650/firepup-site
FireOS Animation
This commit is contained in:
parent
0bf90740e4
commit
3d75fd2d78
8 changed files with 887 additions and 0 deletions
BIN
public/fonts/Orbitron-Bold.ttf
Normal file
BIN
public/fonts/Orbitron-Bold.ttf
Normal file
Binary file not shown.
BIN
public/fonts/Orbitron-Medium.ttf
Normal file
BIN
public/fonts/Orbitron-Medium.ttf
Normal file
Binary file not shown.
BIN
public/fonts/Orbitron-Regular.ttf
Normal file
BIN
public/fonts/Orbitron-Regular.ttf
Normal file
Binary file not shown.
162
public/pages/boot.html
Normal file
162
public/pages/boot.html
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<title>FireOS Boot Animation - FP650</title>
|
||||
<meta name="description" content="FireOS Boot Animation" />
|
||||
<meta property="og:title" content="FireOS Boot Animation - FP650" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="https://firepup650.com/favicon.ico" />
|
||||
<meta property="og:image:height" content="512" />
|
||||
<meta property="og:image:width" content="512" />
|
||||
<meta property="og:url" content="https://firepup650.com/boot" />
|
||||
<meta property="og:description" content="FireOS Boot Animation" />
|
||||
<meta property="og:site_name" content="Firepup650's Site" />
|
||||
<meta property="og:locale" content="en_US">
|
||||
<meta property="og:logo" content="https://firepup650.com/favicon.ico" />
|
||||
<link href="/styles/style.css" rel="stylesheet" type="text/css" />
|
||||
<link href="/styles/FireOSBootAnimation.css" rel="stylesheet" type="text/css" />
|
||||
<!-- Using local Orbitron fonts from /fonts directory -->
|
||||
<script>
|
||||
function getVersionNumber() {
|
||||
const startDate = new Date('2006-11-29');
|
||||
const today = new Date();
|
||||
|
||||
// Calculate difference in milliseconds
|
||||
const diffTime = today - startDate;
|
||||
|
||||
// Convert to years with 2 decimal places
|
||||
const diffYears = (diffTime / (1000 * 60 * 60 * 24 * 365.25)).toFixed(2);
|
||||
|
||||
return diffYears;
|
||||
}
|
||||
|
||||
// Update all version numbers when the DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const versionNumber = getVersionNumber();
|
||||
|
||||
// Update BIOS header
|
||||
const biosHeader = document.querySelector('.bios-header');
|
||||
if (biosHeader) {
|
||||
biosHeader.textContent = `FIRE_OS BIOS v${versionNumber}`;
|
||||
}
|
||||
|
||||
// Update boot complete message
|
||||
const bootCompleteMessage = document.querySelector('.boot-complete-message');
|
||||
if (bootCompleteMessage) {
|
||||
bootCompleteMessage.textContent = `FireOS v${versionNumber} is fully operational`;
|
||||
}
|
||||
|
||||
// Update logo subtitle if needed
|
||||
const logoSubtitle = document.querySelector('.logo-subtitle');
|
||||
if (logoSubtitle) {
|
||||
logoSubtitle.textContent = `ProtoKitty Operating System v${versionNumber}`;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h5 hidden id='Maintenance' class="center"></h5>
|
||||
|
||||
<!-- Fire OS Boot Animation container -->
|
||||
<div id="fire-os-boot-container" class="fire-os-boot-container">
|
||||
<div class="boot-scan-line"></div>
|
||||
|
||||
<div class="boot-visor-frame">
|
||||
<div class="visor-left-ear"></div>
|
||||
<div class="visor-right-ear"></div>
|
||||
|
||||
<div class="boot-visor">
|
||||
<div class="visor-line top"></div>
|
||||
<div class="visor-line bottom"></div>
|
||||
|
||||
<!-- Boot Sequence Content -->
|
||||
<div class="boot-content">
|
||||
<!-- BIOS Check -->
|
||||
<div class="boot-stage boot-stage-2">
|
||||
<div class="bios-header">FIRE_OS BIOS</div>
|
||||
<div class="boot-text-line">Initializing hardware...</div>
|
||||
<div class="boot-text-line">CPU: ProtoCore i9 @ 4.7GHz</div>
|
||||
<div class="boot-text-line">Memory: 16GB NeuralRAM</div>
|
||||
<div class="boot-text-line">Checking system integrity... OK</div>
|
||||
<div class="boot-text-line">Starting boot sequence...</div>
|
||||
</div>
|
||||
|
||||
<!-- System Scan -->
|
||||
<div class="boot-stage boot-stage-3">
|
||||
<div class="scan-header">SYSTEM SCAN</div>
|
||||
<div class="scan-progress-container">
|
||||
<div class="scan-progress-bar"></div>
|
||||
</div>
|
||||
<div class="scan-detail">Checking vital systems...</div>
|
||||
<div class="scan-detail">Initializing neural pathways...</div>
|
||||
<div class="scan-detail">Activating sensory modules...</div>
|
||||
<div class="scan-detail">All systems nominal</div>
|
||||
</div>
|
||||
|
||||
<!-- Module Loading -->
|
||||
<div class="boot-stage boot-stage-4">
|
||||
<div class="module-header">LOADING CORE MODULES</div>
|
||||
<div class="modules-grid">
|
||||
<div class="module-item">
|
||||
<div class="module-icon"></div>
|
||||
<div class="module-name">ProtoKittyCore</div>
|
||||
</div>
|
||||
<div class="module-item">
|
||||
<div class="module-icon"></div>
|
||||
<div class="module-name">NeuralNet</div>
|
||||
</div>
|
||||
<div class="module-item">
|
||||
<div class="module-icon"></div>
|
||||
<div class="module-name">VisorDisplay</div>
|
||||
</div>
|
||||
<div class="module-item">
|
||||
<div class="module-icon"></div>
|
||||
<div class="module-name">KittyTraits</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Protogen Protocol -->
|
||||
<div class="boot-stage boot-stage-5">
|
||||
<div class="protogen-header">ACTIVATING PROTOGEN PROTOCOLS</div>
|
||||
<div class="protogen-trait">Feline module: Online</div>
|
||||
<div class="protogen-trait">Kitty ears: Calibrated</div>
|
||||
<div class="protogen-trait">Cuteness factor: Maximum</div>
|
||||
<div class="protogen-trait">Mischief subroutines: Loaded</div>
|
||||
<div class="protogen-trait">ProtoKitty integration: Complete</div>
|
||||
</div>
|
||||
|
||||
<!-- Logo Display -->
|
||||
<div class="boot-stage boot-stage-6 logo-display">
|
||||
<div class="fire-os-logo">
|
||||
<span class="logo-fire">Fire</span>
|
||||
<span class="logo-os">OS</span>
|
||||
</div>
|
||||
<div class="logo-subtitle">ProtoKitty Operating System</div>
|
||||
</div>
|
||||
|
||||
<!-- System Ready -->
|
||||
<div class="boot-stage boot-stage-7 system-ready">
|
||||
<div class="ready-status">SYSTEM ACTIVATED</div>
|
||||
<div class="welcome-message">Welcome back, ProtoKitty</div>
|
||||
<div class="boot-complete-message">FireOS is fully operational</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Skip button -->
|
||||
<button id="skip-boot-button" class="skip-button">
|
||||
SKIP BOOT SEQUENCE
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- No visible content needed since we'll redirect automatically -->
|
||||
<div id="page-content" style="display: none;"></div>
|
||||
|
||||
<script src="/scripts/FireOSBootAnimation.js"></script>
|
||||
<script src="/scripts/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -23,6 +23,8 @@
|
|||
<h5 hidden id='Maintenance' class="center"></h5>
|
||||
<span class=center>
|
||||
<h5 class="force-color">Welcome to my site!</h5>
|
||||
<a href="/boot" class="cyan">View Boot Animation</a>
|
||||
<br/>
|
||||
<a href="/maintenance" class="cyan">Go to the Maintenance page</a>
|
||||
<br/>
|
||||
<a href="/dvd-screensaver" class="cyan">Go to the DVD Screensaver page</a>
|
||||
|
|
@ -55,6 +57,7 @@
|
|||
<br/>
|
||||
<a href="/neofetches" class="cyan">Go to the Neofetches page</a>
|
||||
</span>
|
||||
<!-- <script src="/scripts/first-visit.js"></script> -->
|
||||
<script src="/scripts/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
159
public/scripts/FireOSBootAnimation.js
Normal file
159
public/scripts/FireOSBootAnimation.js
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
function FireOSBootAnimation(options = {}) {
|
||||
const defaults = {
|
||||
containerId: 'fire-os-boot-container',
|
||||
skipButtonId: 'skip-boot-button',
|
||||
onComplete: null,
|
||||
skipAnimation: false,
|
||||
primaryColor: '#0F0',
|
||||
secondaryColor: '#F05',
|
||||
kittyColor: '#e49'
|
||||
};
|
||||
|
||||
const settings = Object.assign({}, defaults, options);
|
||||
let bootStage = 0;
|
||||
let bootComplete = false;
|
||||
let currentTimeout = null;
|
||||
|
||||
// Initialize boot sequence with proper timing (slightly faster)
|
||||
const bootSequence = [
|
||||
{ stage: 1, delay: 500 }, // Initial screen flicker
|
||||
{ stage: 2, delay: 2000 }, // BIOS check
|
||||
{ stage: 3, delay: 2500 }, // System scan
|
||||
{ stage: 4, delay: 2500 }, // Loading modules
|
||||
{ stage: 5, delay: 2500 }, // Protogen protocols
|
||||
{ stage: 6, delay: 2000 }, // Show logo
|
||||
{ stage: 7, delay: 2000 }, // Final activation
|
||||
{ stage: 8, delay: 1000 } // Fade out
|
||||
];
|
||||
|
||||
function init() {
|
||||
const container = document.getElementById(settings.containerId);
|
||||
if (!container) {
|
||||
console.error('FireOS Boot container not found');
|
||||
return;
|
||||
}
|
||||
|
||||
// Set up skip button event listener
|
||||
const skipButton = document.getElementById(settings.skipButtonId);
|
||||
if (skipButton) {
|
||||
skipButton.addEventListener('click', handleSkip);
|
||||
}
|
||||
|
||||
if (settings.skipAnimation) {
|
||||
handleAnimationComplete();
|
||||
} else {
|
||||
// Start boot sequence
|
||||
runNextStage(0);
|
||||
}
|
||||
}
|
||||
|
||||
function runNextStage(currentIndex) {
|
||||
if (currentIndex >= bootSequence.length) {
|
||||
handleAnimationComplete();
|
||||
return;
|
||||
}
|
||||
|
||||
const { stage, delay } = bootSequence[currentIndex];
|
||||
|
||||
// Clear all active stages
|
||||
document.querySelectorAll('.boot-stage').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
// Reset content visibility
|
||||
document.querySelectorAll('.boot-content').forEach(el => {
|
||||
el.classList.remove('active');
|
||||
});
|
||||
|
||||
// Short delay to allow for transition
|
||||
setTimeout(() => {
|
||||
// First ensure boot content is visible
|
||||
document.querySelectorAll('.boot-content').forEach(el => {
|
||||
el.classList.add('active');
|
||||
});
|
||||
|
||||
// Then activate the correct stage
|
||||
bootStage = stage;
|
||||
activateCurrentStage();
|
||||
|
||||
if (stage === 6) {
|
||||
showLogo();
|
||||
} else if (stage === 7) {
|
||||
setBootComplete();
|
||||
}
|
||||
}, 300);
|
||||
|
||||
// Schedule next stage
|
||||
currentTimeout = setTimeout(() => {
|
||||
runNextStage(currentIndex + 1);
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function activateCurrentStage() {
|
||||
const stageEl = document.querySelector(`.boot-stage-${bootStage}`);
|
||||
if (stageEl) {
|
||||
stageEl.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function showLogo() {
|
||||
const logoEl = document.querySelector('.logo-display');
|
||||
if (logoEl) {
|
||||
logoEl.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function setBootComplete() {
|
||||
bootComplete = true;
|
||||
const readyEl = document.querySelector('.system-ready');
|
||||
if (readyEl) {
|
||||
readyEl.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function handleAnimationComplete() {
|
||||
if (currentTimeout) {
|
||||
clearTimeout(currentTimeout);
|
||||
}
|
||||
|
||||
const container = document.getElementById(settings.containerId);
|
||||
if (container) {
|
||||
// Add fade-out class
|
||||
container.classList.add('fade-out');
|
||||
|
||||
// Always redirect back after animation completes
|
||||
setTimeout(() => {
|
||||
container.style.display = 'none';
|
||||
|
||||
// Execute onComplete callback if provided
|
||||
if (typeof settings.onComplete === 'function') {
|
||||
settings.onComplete();
|
||||
}
|
||||
|
||||
// Always redirect back to main page or the saved page
|
||||
const returnPage = localStorage.getItem('returnAfterBoot') || '/';
|
||||
localStorage.removeItem('returnAfterBoot');
|
||||
|
||||
// Redirect back to the original page
|
||||
window.location.href = returnPage;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSkip() {
|
||||
handleAnimationComplete();
|
||||
}
|
||||
|
||||
return {
|
||||
init,
|
||||
handleSkip
|
||||
};
|
||||
}
|
||||
|
||||
// On document load, initialize the boot animation
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize and start the boot animation immediately
|
||||
FireOSBootAnimation().init();
|
||||
});
|
||||
|
||||
|
||||
24
public/scripts/first-visit.js
Normal file
24
public/scripts/first-visit.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
(function() {
|
||||
// Skip boot animation if coming back from the boot page or if in development mode
|
||||
if (document.referrer.includes('/boot')) {
|
||||
console.log('Skipping boot animation (returning from boot page)');
|
||||
localStorage.setItem('hasVisitedBefore', 'true');
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if this is the first visit
|
||||
if (!localStorage.getItem('hasVisitedBefore')) {
|
||||
// First visit - save the current path and redirect to boot animation
|
||||
localStorage.setItem('hasVisitedBefore', 'true');
|
||||
|
||||
// Store the current page to return to after boot
|
||||
const currentPage = window.location.pathname;
|
||||
localStorage.setItem('returnAfterBoot', currentPage);
|
||||
|
||||
// Redirect to boot animation
|
||||
console.log('First visit detected, redirecting to boot animation');
|
||||
window.location.href = '/boot';
|
||||
} else {
|
||||
console.log('Returning visitor, skipping boot animation');
|
||||
}
|
||||
})();
|
||||
539
public/styles/FireOSBootAnimation.css
Normal file
539
public/styles/FireOSBootAnimation.css
Normal file
|
|
@ -0,0 +1,539 @@
|
|||
/* Orbitron font for futuristic boot animation */
|
||||
@font-face {
|
||||
font-family: 'Orbitron';
|
||||
src: url('/fonts/orbitron-regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Orbitron';
|
||||
src: url('/fonts/orbitron-medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Orbitron';
|
||||
src: url('/fonts/orbitron-bold.ttf') format('truetype');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
/* Full screen overlay */
|
||||
.fire-os-boot-container {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: #000;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Orbitron', monospace;
|
||||
color: #0F0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fire-os-boot-container.fade-out {
|
||||
animation: fadeOut 0.8s forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; visibility: hidden; }
|
||||
}
|
||||
|
||||
/* Scanning animation effect */
|
||||
.boot-scan-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(0, 229, 255, 0) 0%,
|
||||
rgba(0, 229, 255, 0.8) 50%,
|
||||
rgba(0, 229, 255, 0) 100%);
|
||||
box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
|
||||
animation: scanAnimation 3s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes scanAnimation {
|
||||
0% { top: -10px; }
|
||||
100% { top: 100vh; }
|
||||
}
|
||||
|
||||
/* Kitty ear decorations */
|
||||
.visor-left-ear,
|
||||
.visor-right-ear {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #e49;
|
||||
top: -20px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.visor-left-ear {
|
||||
left: calc(50% - 100px);
|
||||
transform: rotate(45deg);
|
||||
border-radius: 0 0 0 20px;
|
||||
transform-origin: bottom right;
|
||||
animation: earTwitch 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.visor-right-ear {
|
||||
right: calc(50% - 100px);
|
||||
transform: rotate(-45deg);
|
||||
border-radius: 0 0 20px 0;
|
||||
transform-origin: bottom left;
|
||||
animation: earTwitchRight 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes earTwitch {
|
||||
0%, 100% { transform: rotate(45deg); }
|
||||
50% { transform: rotate(30deg); }
|
||||
}
|
||||
|
||||
@keyframes earTwitchRight {
|
||||
0%, 100% { transform: rotate(-45deg); }
|
||||
50% { transform: rotate(-30deg); }
|
||||
}
|
||||
|
||||
/* Main visor frame - more angular for protogen look */
|
||||
.boot-visor-frame {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
max-width: 800px;
|
||||
height: 60vh;
|
||||
max-height: 600px;
|
||||
border: 2px solid #0F0;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
|
||||
overflow: hidden;
|
||||
background-color: rgba(0, 10, 15, 0.95);
|
||||
}
|
||||
|
||||
.boot-visor {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Visor top and bottom glowing lines */
|
||||
.visor-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #0F0;
|
||||
box-shadow: 0 0 10px #0F0;
|
||||
animation: glowPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.visor-line.top {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.visor-line.bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
@keyframes glowPulse {
|
||||
0%, 100% { opacity: 1; box-shadow: 0 0 10px #0F0, 0 0 20px rgba(0, 255, 0, 0.5); }
|
||||
50% { opacity: 0.7; box-shadow: 0 0 15px #0F0, 0 0 30px rgba(0, 255, 0, 0.7); }
|
||||
}
|
||||
|
||||
/* Boot content area */
|
||||
.boot-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.boot-content.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Common styles for all boot stages */
|
||||
.boot-stage {
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: 1px solid rgba(0, 255, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
max-height: 80%;
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.boot-stage.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Hide scrollbar but allow scrolling */
|
||||
.boot-stage::-webkit-scrollbar {
|
||||
width: 3px;
|
||||
}
|
||||
|
||||
.boot-stage::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.boot-stage::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
/* BIOS Stage */
|
||||
.bios-header {
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
color: #F05;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 10px rgba(255, 0, 92, 0.7);
|
||||
}
|
||||
|
||||
.boot-text-line {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
margin: 8px 0;
|
||||
color: #8be;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
animation: typeWriter 0.8s steps(50, end);
|
||||
}
|
||||
|
||||
@keyframes typeWriter {
|
||||
from { width: 0; }
|
||||
to { width: 100%; }
|
||||
}
|
||||
|
||||
/* System Scan Stage */
|
||||
.scan-header {
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
color: #F05;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 10px rgba(255, 0, 92, 0.7);
|
||||
}
|
||||
|
||||
.scan-progress-container {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(0, 255, 0, 0.5);
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scan-progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #0F0, #F05);
|
||||
width: 0;
|
||||
animation: progressFill 1.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes progressFill {
|
||||
0% { width: 0; }
|
||||
100% { width: 100%; }
|
||||
}
|
||||
|
||||
.scan-detail {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
margin: 8px 0;
|
||||
color: #8be;
|
||||
}
|
||||
|
||||
/* Module Loading Stage */
|
||||
.module-header {
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
color: #F05;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 10px rgba(255, 0, 92, 0.7);
|
||||
}
|
||||
|
||||
.modules-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.module-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(0, 255, 0, 0.2);
|
||||
border-radius: 5px;
|
||||
animation: moduleLoad 0.8s ease forwards;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.module-item:nth-child(1) { animation-delay: 0.15s; }
|
||||
.module-item:nth-child(2) { animation-delay: 0.3s; }
|
||||
.module-item:nth-child(3) { animation-delay: 0.45s; }
|
||||
.module-item:nth-child(4) { animation-delay: 0.6s; }
|
||||
|
||||
@keyframes moduleLoad {
|
||||
0% { opacity: 0; transform: translateX(-20px); }
|
||||
100% { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.module-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #0F0;
|
||||
margin-right: 10px;
|
||||
animation: iconPulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes iconPulse {
|
||||
0%, 100% { transform: scale(1); box-shadow: 0 0 5px #0F0; }
|
||||
50% { transform: scale(1.1); box-shadow: 0 0 10px #0F0; }
|
||||
}
|
||||
|
||||
.module-name {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Protogen Protocol Stage */
|
||||
.protogen-header {
|
||||
font-size: 20px;
|
||||
margin-bottom: 15px;
|
||||
color: #e49;
|
||||
text-align: center;
|
||||
text-shadow: 0 0 10px rgba(228, 148, 255, 0.7);
|
||||
}
|
||||
|
||||
.protogen-trait {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
margin: 10px 0;
|
||||
color: #e49;
|
||||
padding-left: 20px;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
animation: traitAppear 0.4s ease forwards;
|
||||
}
|
||||
|
||||
.protogen-trait:nth-child(2) { animation-delay: 0.15s; }
|
||||
.protogen-trait:nth-child(3) { animation-delay: 0.3s; }
|
||||
.protogen-trait:nth-child(4) { animation-delay: 0.45s; }
|
||||
.protogen-trait:nth-child(5) { animation-delay: 0.6s; }
|
||||
.protogen-trait:nth-child(6) { animation-delay: 0.75s; }
|
||||
|
||||
@keyframes traitAppear {
|
||||
0% { opacity: 0; transform: translateX(-10px); }
|
||||
100% { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.protogen-trait::before {
|
||||
content: '>';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #e49;
|
||||
}
|
||||
|
||||
/* Logo Display Stage */
|
||||
.logo-display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.fire-os-logo {
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
background: linear-gradient(90deg, #e49, #0F0);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
text-fill-color: transparent;
|
||||
text-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
|
||||
opacity: 0;
|
||||
animation: logoAppear 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.logo-fire {
|
||||
color: #e49;
|
||||
}
|
||||
|
||||
.logo-os {
|
||||
color: #0F0;
|
||||
}
|
||||
|
||||
.logo-subtitle {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
animation: logoAppear 0.8s ease forwards 0.4s;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@keyframes logoAppear {
|
||||
0% { opacity: 0; transform: scale(0.9); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* System Ready Stage */
|
||||
.system-ready {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ready-status {
|
||||
font-size: 28px;
|
||||
margin-bottom: 15px;
|
||||
color: #0F0;
|
||||
animation: textPulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes textPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
font-size: 18px;
|
||||
margin-bottom: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.boot-complete-message {
|
||||
font-size: 14px;
|
||||
color: #8be;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* Skip button */
|
||||
.skip-button {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(255, 0, 80, 0.3);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 0, 80, 0.5);
|
||||
border-radius: 5px;
|
||||
padding: 10px 20px;
|
||||
font-family: 'Orbitron', sans-serif;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
z-index: 100;
|
||||
animation: skipPulse 2s infinite;
|
||||
box-shadow: 0 0 10px rgba(255, 0, 80, 0.3);
|
||||
}
|
||||
|
||||
.skip-button:hover {
|
||||
background-color: rgba(255, 0, 80, 0.7);
|
||||
color: white;
|
||||
border-color: rgba(255, 0, 80, 0.8);
|
||||
box-shadow: 0 0 15px rgba(255, 0, 80, 0.5);
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
}
|
||||
|
||||
@keyframes skipPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.boot-visor-frame {
|
||||
width: 95%;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.visor-left-ear, .visor-right-ear {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: -15px;
|
||||
}
|
||||
|
||||
.visor-left-ear {
|
||||
left: calc(50% - 70px);
|
||||
}
|
||||
|
||||
.visor-right-ear {
|
||||
right: calc(50% - 70px);
|
||||
}
|
||||
|
||||
.boot-visor {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.boot-stage {
|
||||
width: 90%;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.modules-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.bios-header, .scan-header, .module-header, .protogen-header {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.fire-os-logo {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.logo-subtitle {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.ready-status {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.boot-stage {
|
||||
width: 95%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.bios-header, .scan-header, .module-header, .protogen-header {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.boot-text-line, .scan-detail, .protogen-trait {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.skip-button {
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue