mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
a60d21521d
Updated `console.css` to enhance the layout and responsiveness of the console interface. Adjusted the console container to utilize the full viewport height while maintaining a controlled height for the console wrapper. Changed console output positioning to relative for better spacing and positioned the stats bar at the bottom for consistency. Added a new JavaScript function `adjustConsoleLayout` to dynamically calculate and set the height of the console wrapper based on viewport size, improving user experience across different screen sizes.
431 lines
9.0 KiB
CSS
431 lines
9.0 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);
|
|
}
|
|
|
|
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: 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 the full viewport */
|
|
.console-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background: transparent;
|
|
animation: flicker 4s infinite;
|
|
}
|
|
|
|
.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; /* Don't allow this to grow arbitrarily */
|
|
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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
} |