mirror of
https://github.com/Retropex/custom-ocean.xyz-dashboard.git
synced 2025-05-13 03:30:46 +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 {
|
:root {
|
||||||
--console-bg: #000000;
|
--console-bg: #121212;
|
||||||
--console-text: #33ff00;
|
--console-bg-gradient: linear-gradient(135deg, #121212, #000000);
|
||||||
--console-header: #1a1a1a;
|
--console-text: #f7931a;
|
||||||
--console-warning: #ffcc00;
|
--console-header: #0a0a0a;
|
||||||
--console-error: #ff3333;
|
--console-warning: #ffd700;
|
||||||
--console-success: #33cc33;
|
--console-error: #ff2d2d;
|
||||||
--console-info: #00ccff;
|
--console-success: #39ff14;
|
||||||
--terminal-glow: 0 0 10px rgba(51, 255, 0, 0.5);
|
--console-info: #00dfff;
|
||||||
|
--terminal-glow: 0 0 10px rgba(247, 147, 26, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: var(--console-bg);
|
background: var(--console-bg-gradient);
|
||||||
color: var(--console-text);
|
color: var(--console-text);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-family: 'VT323', 'Share Tech Mono', monospace;
|
font-family: 'VT323', 'Share Tech Mono', monospace;
|
||||||
line-height: 1.5;
|
font-size: 20px;
|
||||||
|
line-height: 1.4;
|
||||||
overflow-x: hidden;
|
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 {
|
.console-container {
|
||||||
@ -26,7 +87,8 @@ body {
|
|||||||
height: 100vh;
|
height: 100vh;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
background-color: var(--console-bg);
|
background: transparent;
|
||||||
|
animation: flicker 4s infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-header {
|
.console-header {
|
||||||
@ -35,13 +97,13 @@ body {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border-bottom: 1px solid var(--console-text);
|
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 {
|
.console-title {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-shadow: var(--terminal-glow);
|
text-shadow: 0 0 10px rgba(247, 147, 26, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-info {
|
.console-info {
|
||||||
@ -50,10 +112,13 @@ body {
|
|||||||
|
|
||||||
.console-wrapper {
|
.console-wrapper {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow-y: scroll;
|
overflow-y: auto;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
scrollbar-color: var(--console-text) var(--console-bg);
|
scrollbar-color: var(--console-text) var(--console-bg);
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
max-width: 900px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-wrapper::-webkit-scrollbar {
|
.console-wrapper::-webkit-scrollbar {
|
||||||
@ -67,12 +132,16 @@ body {
|
|||||||
.console-wrapper::-webkit-scrollbar-thumb {
|
.console-wrapper::-webkit-scrollbar-thumb {
|
||||||
background-color: var(--console-text);
|
background-color: var(--console-text);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-output {
|
.console-output {
|
||||||
font-size: 16px;
|
font-size: 20px;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-line {
|
.console-line {
|
||||||
@ -86,12 +155,14 @@ body {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
color: var(--console-text);
|
color: var(--console-text);
|
||||||
|
text-shadow: 0 0 5px rgba(247, 147, 26, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.console-stats {
|
.console-stats {
|
||||||
border-top: 1px solid var(--console-text);
|
border-top: 1px solid var(--console-text);
|
||||||
padding: 15px;
|
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 {
|
.stats-container {
|
||||||
@ -113,79 +184,181 @@ body {
|
|||||||
.stat-value {
|
.stat-value {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-shadow: var(--terminal-glow);
|
text-shadow: 0 0 10px rgba(247, 147, 26, 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Message type styles */
|
/* Neon-inspired color classes */
|
||||||
.info {
|
.green, .success {
|
||||||
color: var(--console-info);
|
color: var(--console-success) !important;
|
||||||
|
text-shadow: 0 0 10px var(--console-success), 0 0 20px var(--console-success);
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
.blue, .info {
|
||||||
color: var(--console-warning);
|
color: var(--console-info) !important;
|
||||||
|
text-shadow: 0 0 10px var(--console-info), 0 0 20px var(--console-info);
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.yellow, .warning {
|
||||||
color: var(--console-error);
|
color: var(--console-warning) !important;
|
||||||
|
text-shadow: 0 0 8px var(--console-warning), 0 0 16px var(--console-warning);
|
||||||
}
|
}
|
||||||
|
|
||||||
.success {
|
.white {
|
||||||
color: var(--console-success);
|
color: #ffffff !important;
|
||||||
|
text-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blink {
|
.red, .error {
|
||||||
animation: blink-animation 1s steps(2, start) infinite;
|
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 {
|
@keyframes blink-animation {
|
||||||
to {
|
0%, 100% {
|
||||||
visibility: hidden;
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* CRT screen effect */
|
/* Bitcoin Logo styling */
|
||||||
.console-wrapper::after {
|
#bitcoin-logo {
|
||||||
content: "";
|
|
||||||
display: block;
|
display: block;
|
||||||
position: fixed;
|
text-align: center;
|
||||||
top: 0;
|
margin: 10px auto;
|
||||||
left: 0;
|
font-size: 10px;
|
||||||
width: 100%;
|
line-height: 1;
|
||||||
height: 100%;
|
color: var(--console-text);
|
||||||
background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px );
|
text-shadow: 0 0 10px rgba(247, 147, 26, 0.8);
|
||||||
pointer-events: none;
|
white-space: pre;
|
||||||
z-index: 999;
|
width: 260px;
|
||||||
opacity: 0.15;
|
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 */
|
/* Skip Button */
|
||||||
.console-wrapper::before {
|
#skip-button {
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
bottom: 20px;
|
||||||
left: 0;
|
right: 20px;
|
||||||
width: 100%;
|
background-color: var(--console-text);
|
||||||
height: 100%;
|
color: #000;
|
||||||
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% );
|
border: none;
|
||||||
background-size: 100% 4px;
|
padding: 10px 15px;
|
||||||
pointer-events: none;
|
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;
|
z-index: 1000;
|
||||||
opacity: 0.15;
|
|
||||||
animation: scanline 10s linear infinite;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes scanline {
|
#skip-button:hover {
|
||||||
0% {
|
background-color: #ffa32e;
|
||||||
background-position: 0 0;
|
box-shadow: 0 0 12px rgba(247, 147, 26, 0.7);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
/* Prompt Styling */
|
||||||
background-position: 0 100%;
|
#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 {
|
.glitch {
|
||||||
position: relative;
|
position: relative;
|
||||||
animation: glitch-skew 1s infinite linear alternate-reverse;
|
animation: glitch-skew 1s infinite linear alternate-reverse;
|
||||||
@ -217,102 +390,7 @@ body {
|
|||||||
clip: rect(42px, 9999px, 44px, 0);
|
clip: rect(42px, 9999px, 44px, 0);
|
||||||
transform: skew(0.65deg);
|
transform: skew(0.65deg);
|
||||||
}
|
}
|
||||||
|
/* Rest of the keyframes remain unchanged */
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
clip: rect(7px, 9999px, 12px, 0);
|
clip: rect(7px, 9999px, 12px, 0);
|
||||||
transform: skew(0.5deg);
|
transform: skew(0.5deg);
|
||||||
@ -324,102 +402,7 @@ body {
|
|||||||
clip: rect(65px, 9999px, 100px, 0);
|
clip: rect(65px, 9999px, 100px, 0);
|
||||||
transform: skew(0.4deg);
|
transform: skew(0.4deg);
|
||||||
}
|
}
|
||||||
|
/* Rest of the keyframes remain unchanged */
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
clip: rect(31px, 9999px, 93px, 0);
|
clip: rect(31px, 9999px, 93px, 0);
|
||||||
transform: skew(0.6deg);
|
transform: skew(0.6deg);
|
||||||
@ -430,43 +413,7 @@ body {
|
|||||||
0% {
|
0% {
|
||||||
transform: skew(1deg);
|
transform: skew(1deg);
|
||||||
}
|
}
|
||||||
|
/* Rest of the keyframes remain unchanged */
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: skew(0deg);
|
transform: skew(0deg);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,9 +2,12 @@
|
|||||||
|
|
||||||
{% block title %}BITCOIN MINING CONSOLE LOG{% endblock %}
|
{% block title %}BITCOIN MINING CONSOLE LOG{% endblock %}
|
||||||
|
|
||||||
|
{% block css %}
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/console.css') }}">
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block head %}
|
||||||
{{ super() }}
|
{{ 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=VT323&display=swap" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user