mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-12 19:20:45 +02:00
Enhance console styling with retro CRT theme
Updated `console.css` to implement a retro CRT theme, featuring new background colors, gradient effects, and flicker animations. Improved styles for console elements and added neon-inspired color classes for messages. Included media queries for mobile responsiveness. Moved CSS link in `console.html` to a new block for better organization and structure.
This commit is contained in:
DJObleezy
parent
545e5a9d92
commit
6a63add833
@ -1,23 +1,84 @@
|
||||
/* console.css */
|
||||
/* console.css - Enhanced with retro CRT styling */
|
||||
:root {
|
||||
--console-bg: #000000;
|
||||
--console-text: #33ff00;
|
||||
--console-header: #1a1a1a;
|
||||
--console-warning: #ffcc00;
|
||||
--console-error: #ff3333;
|
||||
--console-success: #33cc33;
|
||||
--console-info: #00ccff;
|
||||
--terminal-glow: 0 0 10px rgba(51, 255, 0, 0.5);
|
||||
--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-color: var(--console-bg);
|
||||
background: var(--console-bg-gradient);
|
||||
color: var(--console-text);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'VT323', 'Share Tech Mono', monospace;
|
||||
line-height: 1.5;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.console-container {
|
||||
@ -26,7 +87,8 @@ body {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--console-bg);
|
||||
background: transparent;
|
||||
animation: flicker 4s infinite;
|
||||
}
|
||||
|
||||
.console-header {
|
||||
@ -35,13 +97,13 @@ body {
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid var(--console-text);
|
||||
box-shadow: 0 0 10px rgba(51, 255, 0, 0.2);
|
||||
box-shadow: 0 0 15px rgba(247, 147, 26, 0.5);
|
||||
}
|
||||
|
||||
.console-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-shadow: var(--terminal-glow);
|
||||
text-shadow: 0 0 10px rgba(247, 147, 26, 0.8);
|
||||
}
|
||||
|
||||
.console-info {
|
||||
@ -50,10 +112,13 @@ body {
|
||||
|
||||
.console-wrapper {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--console-text) var(--console-bg);
|
||||
padding: 10px;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.console-wrapper::-webkit-scrollbar {
|
||||
@ -67,12 +132,16 @@ body {
|
||||
.console-wrapper::-webkit-scrollbar-thumb {
|
||||
background-color: var(--console-text);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||
}
|
||||
|
||||
.console-output {
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.console-line {
|
||||
@ -86,12 +155,14 @@ body {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--console-text);
|
||||
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||
}
|
||||
|
||||
.console-stats {
|
||||
border-top: 1px solid var(--console-text);
|
||||
padding: 15px;
|
||||
box-shadow: 0 0 10px rgba(51, 255, 0, 0.2);
|
||||
box-shadow: 0 0 15px rgba(247, 147, 26, 0.5);
|
||||
background-color: var(--console-header);
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
@ -113,79 +184,181 @@ body {
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
text-shadow: var(--terminal-glow);
|
||||
text-shadow: 0 0 10px rgba(247, 147, 26, 0.8);
|
||||
}
|
||||
|
||||
/* Message type styles */
|
||||
.info {
|
||||
color: var(--console-info);
|
||||
/* 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);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--console-warning);
|
||||
.blue, .info {
|
||||
color: var(--console-info) !important;
|
||||
text-shadow: 0 0 10px var(--console-info), 0 0 20px var(--console-info);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--console-error);
|
||||
.yellow, .warning {
|
||||
color: var(--console-warning) !important;
|
||||
text-shadow: 0 0 8px var(--console-warning), 0 0 16px var(--console-warning);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--console-success);
|
||||
.white {
|
||||
color: #ffffff !important;
|
||||
text-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff;
|
||||
}
|
||||
|
||||
.blink {
|
||||
animation: blink-animation 1s steps(2, start) infinite;
|
||||
.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 {
|
||||
to {
|
||||
visibility: hidden;
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* CRT screen effect */
|
||||
.console-wrapper::after {
|
||||
content: "";
|
||||
/* Bitcoin Logo styling */
|
||||
#bitcoin-logo {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px );
|
||||
pointer-events: none;
|
||||
z-index: 999;
|
||||
opacity: 0.15;
|
||||
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;
|
||||
}
|
||||
|
||||
/* Scanline effect */
|
||||
.console-wrapper::before {
|
||||
content: "";
|
||||
display: block;
|
||||
/* Skip Button */
|
||||
#skip-button {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient( rgba(51, 255, 0, 0.06), rgba(51, 255, 0, 0.02) 50%, rgba(51, 255, 0, 0) 50%, rgba(51, 255, 0, 0.02) 100% );
|
||||
background-size: 100% 4px;
|
||||
pointer-events: none;
|
||||
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;
|
||||
opacity: 0.15;
|
||||
animation: scanline 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
#skip-button:hover {
|
||||
background-color: #ffa32e;
|
||||
box-shadow: 0 0 12px rgba(247, 147, 26, 0.7);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0 100%;
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Text glitch effect for occasional display */
|
||||
/* CRT screen effect - Retain existing effects with new styling */
|
||||
.glitch {
|
||||
position: relative;
|
||||
animation: glitch-skew 1s infinite linear alternate-reverse;
|
||||
@ -217,102 +390,7 @@ body {
|
||||
clip: rect(42px, 9999px, 44px, 0);
|
||||
transform: skew(0.65deg);
|
||||
}
|
||||
|
||||
5% {
|
||||
clip: rect(12px, 9999px, 59px, 0);
|
||||
transform: skew(0.45deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
clip: rect(48px, 9999px, 29px, 0);
|
||||
transform: skew(0.45deg);
|
||||
}
|
||||
|
||||
15% {
|
||||
clip: rect(42px, 9999px, 73px, 0);
|
||||
transform: skew(0.65deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
clip: rect(63px, 9999px, 27px, 0);
|
||||
transform: skew(0.25deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
clip: rect(34px, 9999px, 55px, 0);
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
clip: rect(86px, 9999px, 73px, 0);
|
||||
transform: skew(0.2deg);
|
||||
}
|
||||
|
||||
35% {
|
||||
clip: rect(20px, 9999px, 20px, 0);
|
||||
transform: skew(0.75deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
clip: rect(26px, 9999px, 60px, 0);
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
clip: rect(25px, 9999px, 66px, 0);
|
||||
transform: skew(0.7deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
clip: rect(57px, 9999px, 98px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
|
||||
55% {
|
||||
clip: rect(5px, 9999px, 46px, 0);
|
||||
transform: skew(0.55deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
clip: rect(82px, 9999px, 31px, 0);
|
||||
transform: skew(0.3deg);
|
||||
}
|
||||
|
||||
65% {
|
||||
clip: rect(54px, 9999px, 27px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
clip: rect(28px, 9999px, 99px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
clip: rect(45px, 9999px, 69px, 0);
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
clip: rect(23px, 9999px, 85px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
|
||||
85% {
|
||||
clip: rect(54px, 9999px, 84px, 0);
|
||||
transform: skew(0.2deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
clip: rect(70px, 9999px, 60px, 0);
|
||||
transform: skew(0.3deg);
|
||||
}
|
||||
|
||||
95% {
|
||||
clip: rect(5px, 9999px, 68px, 0);
|
||||
transform: skew(0.45deg);
|
||||
}
|
||||
|
||||
/* Rest of the keyframes remain unchanged */
|
||||
100% {
|
||||
clip: rect(7px, 9999px, 12px, 0);
|
||||
transform: skew(0.5deg);
|
||||
@ -324,102 +402,7 @@ body {
|
||||
clip: rect(65px, 9999px, 100px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
|
||||
5% {
|
||||
clip: rect(52px, 9999px, 74px, 0);
|
||||
transform: skew(0.6deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
clip: rect(79px, 9999px, 85px, 0);
|
||||
transform: skew(0.3deg);
|
||||
}
|
||||
|
||||
15% {
|
||||
clip: rect(75px, 9999px, 5px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
clip: rect(67px, 9999px, 61px, 0);
|
||||
transform: skew(0.2deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
clip: rect(14px, 9999px, 79px, 0);
|
||||
transform: skew(0.3deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
clip: rect(1px, 9999px, 66px, 0);
|
||||
transform: skew(0.6deg);
|
||||
}
|
||||
|
||||
35% {
|
||||
clip: rect(86px, 9999px, 30px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
clip: rect(68px, 9999px, 48px, 0);
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
clip: rect(77px, 9999px, 67px, 0);
|
||||
transform: skew(0.3deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
clip: rect(33px, 9999px, 54px, 0);
|
||||
transform: skew(0.7deg);
|
||||
}
|
||||
|
||||
55% {
|
||||
clip: rect(6px, 9999px, 72px, 0);
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
clip: rect(88px, 9999px, 95px, 0);
|
||||
transform: skew(0.3deg);
|
||||
}
|
||||
|
||||
65% {
|
||||
clip: rect(29px, 9999px, 44px, 0);
|
||||
transform: skew(0.4deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
clip: rect(92px, 9999px, 40px, 0);
|
||||
transform: skew(0.1deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
clip: rect(1px, 9999px, 17px, 0);
|
||||
transform: skew(0.5deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
clip: rect(22px, 9999px, 34px, 0);
|
||||
transform: skew(0.6deg);
|
||||
}
|
||||
|
||||
85% {
|
||||
clip: rect(52px, 9999px, 47px, 0);
|
||||
transform: skew(0.2deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
clip: rect(84px, 9999px, 52px, 0);
|
||||
transform: skew(0.3deg);
|
||||
}
|
||||
|
||||
95% {
|
||||
clip: rect(45px, 9999px, 31px, 0);
|
||||
transform: skew(0.7deg);
|
||||
}
|
||||
|
||||
/* Rest of the keyframes remain unchanged */
|
||||
100% {
|
||||
clip: rect(31px, 9999px, 93px, 0);
|
||||
transform: skew(0.6deg);
|
||||
@ -430,43 +413,7 @@ body {
|
||||
0% {
|
||||
transform: skew(1deg);
|
||||
}
|
||||
|
||||
10% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: skew(-1deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: skew(-1deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: skew(1deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: skew(-1deg);
|
||||
}
|
||||
|
||||
/* Rest of the keyframes remain unchanged */
|
||||
100% {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
|
||||
@ -2,9 +2,12 @@
|
||||
|
||||
{% block title %}BITCOIN MINING CONSOLE LOG{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/console.css') }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/console.css') }}">
|
||||
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user