mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
79c80e2cec
- Added white text color to `.stat-value` in console.css for better visibility. - Updated Bitcoin Mining Terminal version to `21.0000` in console.html. - Changed copyright notice to "BTC OS - Mining Operations". - Removed current time display elements from the console.
439 lines
9.4 KiB
CSS
439 lines
9.4 KiB
CSS
/* console.css - Enhanced with retro CRT styling */
|
|
:root {
|
|
--console-bg: #121212;
|
|
--console-bg-gradient: linear-gradient(135deg, #121212, #000000);
|
|
--console-text: #f7931a;
|
|
--console-header: #0a0a0a;
|
|
--console-warning: #ffd700;
|
|
--console-error: #ff2d2d;
|
|
--console-success: #39ff14;
|
|
--console-info: #00dfff;
|
|
--terminal-glow: 0 0 10px rgba(247, 147, 26, 0.4);
|
|
}
|
|
|
|
/* Adjust the height of the body to allow space for other elements */
|
|
body {
|
|
background: var(--console-bg-gradient);
|
|
color: var(--console-text);
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'VT323', 'Share Tech Mono', monospace;
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
overflow-x: hidden;
|
|
text-shadow: var(--terminal-glow);
|
|
height: auto; /* Changed from 100vh to auto */
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* CRT Screen Effect */
|
|
body::before {
|
|
content: " ";
|
|
display: block;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
|
|
background-size: 100% 2px, 3px 100%;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
/* Flicker Animation */
|
|
@keyframes flicker {
|
|
0% {
|
|
opacity: 0.97;
|
|
}
|
|
|
|
5% {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
10% {
|
|
opacity: 0.97;
|
|
}
|
|
|
|
15% {
|
|
opacity: 0.94;
|
|
}
|
|
|
|
20% {
|
|
opacity: 0.98;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.95;
|
|
}
|
|
|
|
80% {
|
|
opacity: 0.96;
|
|
}
|
|
|
|
90% {
|
|
opacity: 0.94;
|
|
}
|
|
|
|
100% {
|
|
opacity: 0.98;
|
|
}
|
|
}
|
|
|
|
/* Fix the console container to use a controlled height */
|
|
.console-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 50vh; /* Change from 100vh to 50vh to make it half height */
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background: transparent;
|
|
animation: flicker 4s infinite;
|
|
margin: 20px auto; /* Add some margin top and bottom */
|
|
max-height: 500px; /* Add a maximum height */
|
|
}
|
|
|
|
.console-header {
|
|
background-color: var(--console-header);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 20px;
|
|
border-bottom: 1px solid var(--console-text);
|
|
box-shadow: 0 0 15px rgba(247, 147, 26, 0.5);
|
|
}
|
|
|
|
.console-title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 10px rgba(247, 147, 26, 0.8);
|
|
}
|
|
|
|
.console-info {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Fix the console wrapper to be a controlled height */
|
|
.console-wrapper {
|
|
flex: 0 1 auto;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--console-text) var(--console-bg);
|
|
padding: 10px;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
background-color: var(--console-bg);
|
|
/* Control the height precisely */
|
|
height: calc(100% - 130px); /* Account for header and footer height */
|
|
min-height: 150px; /* Set a minimum height */
|
|
}
|
|
|
|
.console-wrapper::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.console-wrapper::-webkit-scrollbar-track {
|
|
background: var(--console-bg);
|
|
}
|
|
|
|
.console-wrapper::-webkit-scrollbar-thumb {
|
|
background-color: var(--console-text);
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
|
}
|
|
|
|
/* Update the console output */
|
|
.console-output {
|
|
font-size: 20px;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
position: relative; /* Change to relative positioning */
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.console-line {
|
|
margin-bottom: 4px;
|
|
position: relative;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.console-line::before {
|
|
content: ">";
|
|
position: absolute;
|
|
left: 0;
|
|
color: var(--console-text);
|
|
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
|
}
|
|
|
|
/* Make the stats bar stay at the bottom */
|
|
.console-stats {
|
|
border-top: 1px solid var(--console-text);
|
|
padding: 15px;
|
|
box-shadow: 0 0 15px rgba(247, 147, 26, 0.5);
|
|
background-color: var(--console-header);
|
|
position: relative;
|
|
bottom: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin-top: auto; /* Push to the bottom of flexbox */
|
|
}
|
|
|
|
.stats-container {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stat-box {
|
|
margin: 0 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 10px rgba(247, 147, 26, 0.8);
|
|
color: white;
|
|
}
|
|
|
|
/* Neon-inspired color classes */
|
|
.green, .success {
|
|
color: var(--console-success) !important;
|
|
text-shadow: 0 0 10px var(--console-success), 0 0 20px var(--console-success);
|
|
}
|
|
|
|
.blue, .info {
|
|
color: var(--console-info) !important;
|
|
text-shadow: 0 0 10px var(--console-info), 0 0 20px var(--console-info);
|
|
}
|
|
|
|
.yellow, .warning {
|
|
color: var(--console-warning) !important;
|
|
text-shadow: 0 0 8px var(--console-warning), 0 0 16px var(--console-warning);
|
|
}
|
|
|
|
.white {
|
|
color: #ffffff !important;
|
|
text-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff;
|
|
}
|
|
|
|
.red, .error {
|
|
color: var(--console-error) !important;
|
|
text-shadow: 0 0 10px var(--console-error), 0 0 20px var(--console-error);
|
|
}
|
|
|
|
.magenta {
|
|
color: #ff2d95 !important;
|
|
text-shadow: 0 0 10px #ff2d95, 0 0 20px #ff2d95;
|
|
}
|
|
|
|
.cursor {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 16px;
|
|
background-color: var(--console-text);
|
|
animation: blink-animation 1s step-end infinite;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
|
}
|
|
|
|
@keyframes blink-animation {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Bitcoin Logo styling */
|
|
#bitcoin-logo {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 10px auto;
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
color: var(--console-text);
|
|
text-shadow: 0 0 10px rgba(247, 147, 26, 0.8);
|
|
white-space: pre;
|
|
width: 260px;
|
|
padding: 10px;
|
|
border: 2px solid var(--console-text);
|
|
background-color: var(--console-header);
|
|
box-shadow: 0 0 15px rgba(247, 147, 26, 0.5);
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* Skip Button */
|
|
#skip-button {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background-color: var(--console-text);
|
|
color: #000;
|
|
border: none;
|
|
padding: 10px 15px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-family: 'VT323', monospace;
|
|
font-size: 16px;
|
|
box-shadow: 0 0 8px rgba(247, 147, 26, 0.5);
|
|
transition: all 0.2s ease;
|
|
z-index: 1000;
|
|
}
|
|
|
|
#skip-button:hover {
|
|
background-color: #ffa32e;
|
|
box-shadow: 0 0 12px rgba(247, 147, 26, 0.7);
|
|
}
|
|
|
|
/* Prompt Styling */
|
|
#prompt-container {
|
|
white-space: nowrap;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#prompt-text {
|
|
color: var(--console-text);
|
|
margin-right: 5px;
|
|
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
|
display: inline;
|
|
}
|
|
|
|
#user-input {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--console-text);
|
|
font-family: 'VT323', monospace;
|
|
font-size: 20px;
|
|
caret-color: transparent;
|
|
outline: none;
|
|
width: 35px;
|
|
height: 33px;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.prompt-cursor {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 16px;
|
|
background-color: var(--console-text);
|
|
animation: blink-animation 1s step-end infinite;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
|
position: relative;
|
|
top: 1px;
|
|
margin-left: -2px;
|
|
}
|
|
|
|
/* Loading and Debug Info */
|
|
#loading-message {
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
|
}
|
|
|
|
#debug-info {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
left: 10px;
|
|
color: #666;
|
|
font-size: 12px;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Mobile Responsiveness */
|
|
@media (max-width: 600px) {
|
|
body {
|
|
font-size: 16px;
|
|
padding: 10px;
|
|
}
|
|
|
|
.console-wrapper {
|
|
margin: 0;
|
|
}
|
|
|
|
.console-title {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
/* CRT screen effect - Retain existing effects with new styling */
|
|
.glitch {
|
|
position: relative;
|
|
animation: glitch-skew 1s infinite linear alternate-reverse;
|
|
}
|
|
|
|
.glitch::before,
|
|
.glitch::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.glitch::before {
|
|
color: #ff00ff;
|
|
animation: glitch-anim 5s infinite linear alternate-reverse;
|
|
}
|
|
|
|
.glitch::after {
|
|
color: #00ffff;
|
|
animation: glitch-anim2 1s infinite linear alternate-reverse;
|
|
}
|
|
|
|
@keyframes glitch-anim {
|
|
0% {
|
|
clip: rect(42px, 9999px, 44px, 0);
|
|
transform: skew(0.65deg);
|
|
}
|
|
/* Rest of the keyframes remain unchanged */
|
|
100% {
|
|
clip: rect(7px, 9999px, 12px, 0);
|
|
transform: skew(0.5deg);
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-anim2 {
|
|
0% {
|
|
clip: rect(65px, 9999px, 100px, 0);
|
|
transform: skew(0.4deg);
|
|
}
|
|
/* Rest of the keyframes remain unchanged */
|
|
100% {
|
|
clip: rect(31px, 9999px, 93px, 0);
|
|
transform: skew(0.6deg);
|
|
}
|
|
}
|
|
|
|
@keyframes glitch-skew {
|
|
0% {
|
|
transform: skew(1deg);
|
|
}
|
|
/* Rest of the keyframes remain unchanged */
|
|
100% {
|
|
transform: skew(0deg);
|
|
}
|
|
} |