-
-
-
-
-
-
-
-
-
-
-
-
-
-
HUD
+
+
+ [H]
+
+
TOGGLE HUD
+
Hide/Show UI
-
Press H for hiding HUD.
-
-
-
-
View
+
+
+ [R]
+
+
RESET VIEW
+
Center Cam
-
Press R for reset view.
-
-
-
-
MECHANICS
-
-
-
Upgrades
-
- Click existing Compute/DB/Cache instances to upgrade capacity
- (Tier 1-3).
-
-
-
-
Load Balancing
-
- Load Balancers use Round Robin to distribute traffic evenly.
-
-
-
-
Failure Conditions
-
- Reputation reaches 0% or Money reaches -$1000.
-
-
-
-
+
+
+
+ 04 SYSTEM MECHANICS
+
+
+
+
⬆️
+
Upgrades
+
Click existing services to upgrade their Tier (1-3). Increases throughput
+ and capacity.
+
-
-
-
- ADVANCED SERVICES
-
-
-
-
Message Queue
-
- Massive buffer holding 200 requests. Place after Firewall to
- smooth DDoS spikes, or before Compute to prevent overload. Cheap
- insurance against traffic bursts.
-
-
- Flow: Firewall → Queue → Load Balancer or Load Balancer → Queue
- → Compute
-
-
-
-
Memory Cache
-
- Caching layer with 35-65% hit rate. Cache hits complete
- instantly without hitting DB/Storage. Upgrade tiers for higher
- hit rates. Great for reducing DB costs.
-
-
- Flow: Compute → Cache → DB/Storage
-
+
+
⚖️
+
Load Balancing
+
Load Balancers automatically distribute traffic using Round Robin to all
+ connected healthy nodes.
+
+
+
+
💀
+
Failure States
+
Game Over if Reputation hits 0% or
+ Debt exceeds $1000.
+
+
-
-
-
-
+
hit rates. Great for reducing DB costs.
+
+
+ Flow: Compute → Cache → DB/Storage
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
index f770be2..701b844 100644
--- a/style.css
+++ b/style.css
@@ -199,6 +199,7 @@ body {
opacity: 0;
transform: translate(-50%, -50%) scale(0.9);
}
+
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
@@ -214,10 +215,12 @@ body {
opacity: 1;
transform: scale(1);
}
+
50% {
opacity: 0.7;
transform: scale(0.97);
}
+
100% {
opacity: 1;
transform: scale(1);
@@ -229,10 +232,12 @@ body {
}
@keyframes tutorialHighlightPulse {
+
0%,
100% {
box-shadow: 0 0 15px rgba(6, 182, 212, 0.5), 0 0 30px rgba(6, 182, 212, 0.3);
}
+
50% {
box-shadow: 0 0 30px rgba(6, 182, 212, 0.8), 0 0 60px rgba(6, 182, 212, 0.5);
}
@@ -245,6 +250,7 @@ body {
}
@keyframes toolHighlightPulse {
+
0%,
100% {
box-shadow: 0 0 10px rgba(6, 182, 212, 0.6),
@@ -252,6 +258,7 @@ body {
border-color: rgba(6, 182, 212, 0.8) !important;
transform: scale(1);
}
+
50% {
box-shadow: 0 0 25px rgba(6, 182, 212, 1), 0 0 40px rgba(6, 182, 212, 0.5),
inset 0 0 12px rgba(6, 182, 212, 0.3);
@@ -270,6 +277,7 @@ body {
opacity: 0;
transform: translateY(-20px);
}
+
to {
opacity: 1;
transform: translateY(0);
@@ -277,11 +285,13 @@ body {
}
@keyframes warningPulse {
+
0%,
100% {
transform: scale(1);
box-shadow: 0 0 10px currentColor;
}
+
50% {
transform: scale(1.02);
box-shadow: 0 0 20px currentColor;
@@ -315,7 +325,124 @@ body {
from {
opacity: 0.8;
}
+
to {
opacity: 1;
}
}
+
+/* ==================== NEW UI STYLES ==================== */
+
+.font-share-tech {
+ font-family: 'Share Tech Mono', monospace;
+}
+
+/* Glitch Effect */
+.glitch-text {
+ position: relative;
+}
+
+.glitch-text::before,
+.glitch-text::after {
+ content: attr(data-text);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #111827;
+ /* Matches bg-gray-900 */
+}
+
+.glitch-text::before {
+ left: 2px;
+ text-shadow: -1px 0 #00ffff;
+ background: transparent;
+ clip-path: inset(0 0 0 0);
+ animation: glitch-anim-1 2s infinite linear alternate-reverse;
+}
+
+.glitch-text::after {
+ left: -2px;
+ text-shadow: 1px 0 #ff00ff;
+ background: transparent;
+ clip-path: inset(0 0 0 0);
+ animation: glitch-anim-2 3s infinite linear alternate-reverse;
+}
+
+@keyframes glitch-anim-1 {
+ 0% {
+ clip-path: inset(20% 0 80% 0);
+ }
+
+ 20% {
+ clip-path: inset(60% 0 10% 0);
+ }
+
+ 40% {
+ clip-path: inset(40% 0 50% 0);
+ }
+
+ 60% {
+ clip-path: inset(80% 0 5% 0);
+ }
+
+ 80% {
+ clip-path: inset(10% 0 70% 0);
+ }
+
+ 100% {
+ clip-path: inset(30% 0 20% 0);
+ }
+}
+
+@keyframes glitch-anim-2 {
+ 0% {
+ clip-path: inset(10% 0 60% 0);
+ }
+
+ 20% {
+ clip-path: inset(30% 0 20% 0);
+ }
+
+ 40% {
+ clip-path: inset(70% 0 10% 0);
+ }
+
+ 60% {
+ clip-path: inset(20% 0 50% 0);
+ }
+
+ 80% {
+ clip-path: inset(50% 0 30% 0);
+ }
+
+ 100% {
+ clip-path: inset(0% 0 80% 0);
+ }
+}
+
+/* Terminal Panel Glow Override */
+.terminal-panel {
+ box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+
+/* Custom Scrollbar for FAQ */
+.custom-scrollbar::-webkit-scrollbar {
+ width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+ background: rgba(17, 24, 39, 0.5);
+ border-radius: 4px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+ background: rgba(59, 130, 246, 0.5);
+ border-radius: 4px;
+ border: 1px solid rgba(17, 24, 39, 0.8);
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+ background: rgba(59, 130, 246, 0.8);
+}
\ No newline at end of file