diff --git a/assets/mini-games/backpack.png b/assets/icons/backpack.png
similarity index 100%
rename from assets/mini-games/backpack.png
rename to assets/icons/backpack.png
diff --git a/assets/icons/clipboard.png b/assets/icons/clipboard.png
new file mode 100644
index 0000000..d778b43
Binary files /dev/null and b/assets/icons/clipboard.png differ
diff --git a/assets/icons/copy-sm.png b/assets/icons/copy-sm.png
new file mode 100644
index 0000000..6ef2aa6
Binary files /dev/null and b/assets/icons/copy-sm.png differ
diff --git a/assets/icons/copy.png b/assets/icons/copy.png
new file mode 100644
index 0000000..297fe31
Binary files /dev/null and b/assets/icons/copy.png differ
diff --git a/assets/icons/disk.png b/assets/icons/disk.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/disk.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/assets/icons/document.png b/assets/icons/document.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/document.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/assets/icons/notebook.png b/assets/icons/notebook.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/notebook.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/assets/icons/notes-sm.png b/assets/icons/notes-sm.png
new file mode 100644
index 0000000..f80ba34
Binary files /dev/null and b/assets/icons/notes-sm.png differ
diff --git a/assets/icons/notes.aseprite b/assets/icons/notes.aseprite
new file mode 100644
index 0000000..f581ac2
Binary files /dev/null and b/assets/icons/notes.aseprite differ
diff --git a/assets/icons/notes.png b/assets/icons/notes.png
new file mode 100644
index 0000000..2922fc4
Binary files /dev/null and b/assets/icons/notes.png differ
diff --git a/assets/icons/play.png b/assets/icons/play.png
new file mode 100644
index 0000000..6e507d5
Binary files /dev/null and b/assets/icons/play.png differ
diff --git a/assets/icons/search.png b/assets/icons/search.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/search.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/assets/icons/signal.png b/assets/icons/signal.png
new file mode 100644
index 0000000..9f301ed
--- /dev/null
+++ b/assets/icons/signal.png
@@ -0,0 +1,2 @@
+create me
+
diff --git a/css/biometrics-minigame.css b/css/biometrics-minigame.css
index f05dd9e..9489aa9 100644
--- a/css/biometrics-minigame.css
+++ b/css/biometrics-minigame.css
@@ -9,10 +9,46 @@
height: auto !important;
max-height: 60vh !important;
background: linear-gradient(135deg, #2e1a1a 0%, #3e1616 50%, #600f0f 100%) !important;
- border: 2px solid #e74c3c !important;
box-shadow: 0 0 20px rgba(231, 76, 60, 0.3), inset 0 0 10px rgba(231, 76, 60, 0.1) !important;
- border-radius: 10px !important;
- font-family: 'VT323', monospace !important;
+ border: 4px solid #e74c3c !important;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ ) !important;
color: #e0e0e0 !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
@@ -47,7 +83,7 @@
padding: 10px;
background: rgba(231, 76, 60, 0.1);
border: 1px solid #e74c3c;
- border-radius: 6px;
+ /* border-radius: 6px; */
box-shadow: 0 0 10px rgba(231, 76, 60, 0.2);
}
@@ -55,7 +91,7 @@
display: flex;
align-items: center;
gap: 8px;
- font-size: 16px;
+ font-size: 18px;
font-weight: bold;
color: #e74c3c;
text-shadow: 0 0 5px rgba(231, 76, 60, 0.5);
@@ -66,7 +102,7 @@
color: #4caf50;
background: rgba(76, 175, 80, 0.2);
padding: 2px 6px;
- border-radius: 3px;
+ /* border-radius: 3px; */
border: 1px solid #4caf50;
margin-left: auto;
}
@@ -118,7 +154,7 @@
height: 24px;
background: rgba(231, 76, 60, 0.2);
border: 1px solid #e74c3c;
- border-radius: 4px;
+ /* border-radius: 4px; */
cursor: pointer;
display: flex;
align-items: center;
@@ -145,7 +181,7 @@
justify-content: center;
padding: 10px;
background: rgba(231, 76, 60, 0.1);
- border-radius: 6px;
+ /* border-radius: 6px; */
box-shadow: 0 0 10px rgba(231, 76, 60, 0.2);
}
@@ -172,9 +208,8 @@
padding: 8px 12px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid #e74c3c;
- border-radius: 6px;
+ /* border-radius: 6px; */
color: #e0e0e0;
- font-family: 'VT323', monospace;
font-size: 14px;
box-shadow: 0 0 8px rgba(231, 76, 60, 0.2);
transition: all 0.3s ease;
@@ -202,7 +237,7 @@
padding: 6px 12px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid #555;
- border-radius: 4px;
+ /* border-radius: 4px; */
cursor: pointer;
font-size: 12px;
color: #ccc;
@@ -237,9 +272,8 @@
padding: 8px 12px;
background: rgba(231, 76, 60, 0.2);
border: 1px solid #e74c3c;
- border-radius: 6px;
+ /* border-radius: 6px; */
color: #e74c3c;
- font-family: 'VT323', monospace;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
@@ -260,7 +294,7 @@
}
.biometrics-action-btn .btn-icon {
- font-size: 16px;
+ font-size: 18px;
}
.biometrics-action-btn .btn-text {
@@ -291,7 +325,7 @@
padding: 8px 12px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #444;
- border-radius: 6px;
+ /* border-radius: 6px; */
font-size: 14px;
font-weight: bold;
color: #e74c3c;
@@ -302,7 +336,7 @@
color: #4caf50;
background: rgba(76, 175, 80, 0.2);
padding: 2px 6px;
- border-radius: 3px;
+ /* border-radius: 3px; */
border: 1px solid #4caf50;
}
@@ -312,7 +346,7 @@
padding: 8px;
background: rgba(0, 0, 0, 0.1);
border: 1px solid #333;
- border-radius: 6px;
+ /* border-radius: 6px; */
max-height: 300px;
}
@@ -322,12 +356,12 @@
.biometrics-samples-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
- border-radius: 4px;
+ /* border-radius: 4px; */
}
.biometrics-samples-list::-webkit-scrollbar-thumb {
background: #e74c3c;
- border-radius: 4px;
+ /* border-radius: 4px; */
}
.biometrics-samples-list::-webkit-scrollbar-thumb:hover {
@@ -338,7 +372,7 @@
.sample-item {
background: rgba(0, 0, 0, 0.3);
border: 1px solid #444;
- border-radius: 6px;
+ /* border-radius: 6px; */
margin-bottom: 6px;
padding: 10px;
transition: all 0.3s ease;
@@ -371,7 +405,7 @@
color: #e74c3c;
background: rgba(231, 76, 60, 0.2);
padding: 2px 6px;
- border-radius: 3px;
+ /* border-radius: 3px; */
border: 1px solid #e74c3c;
}
@@ -385,7 +419,7 @@
.sample-quality {
font-weight: bold;
padding: 2px 6px;
- border-radius: 3px;
+ /* border-radius: 3px; */
border: 1px solid;
}
@@ -437,7 +471,7 @@
padding: 10px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #444;
- border-radius: 6px;
+ /* border-radius: 6px; */
font-size: 12px;
line-height: 1.4;
color: #ccc;
diff --git a/css/bluetooth-scanner.css b/css/bluetooth-scanner.css
index 804ab81..0dd9233 100644
--- a/css/bluetooth-scanner.css
+++ b/css/bluetooth-scanner.css
@@ -9,9 +9,46 @@
height: auto !important;
max-height: 60vh !important;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
- border: 2px solid #00bcd4 !important;
box-shadow: 0 0 20px rgba(0, 188, 212, 0.3), inset 0 0 10px rgba(0, 188, 212, 0.1) !important;
- border-radius: 10px !important;
+ border: 4px solid #00bcd4 !important;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ ) !important;
font-family: 'VT323', monospace !important;
color: #e0e0e0 !important;
overflow: hidden !important;
@@ -47,7 +84,7 @@
padding: 10px;
background: rgba(0, 188, 212, 0.1);
border: 1px solid #00bcd4;
- border-radius: 6px;
+ /* border-radius: 6px; */
box-shadow: 0 0 10px rgba(0, 188, 212, 0.2);
}
@@ -55,7 +92,7 @@
display: flex;
align-items: center;
gap: 8px;
- font-size: 16px;
+ font-size: 18px;
font-weight: bold;
color: #00bcd4;
text-shadow: 0 0 5px rgba(0, 188, 212, 0.5);
@@ -71,7 +108,7 @@
display: flex;
align-items: center;
gap: 6px;
- font-size: 14px;
+ font-size: 18px;
color: #4caf50;
}
@@ -108,12 +145,12 @@
height: 24px;
background: rgba(0, 188, 212, 0.2);
border: 1px solid #00bcd4;
- border-radius: 4px;
+ /* border-radius: 4px; */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- font-size: 12px;
+ font-size: 18px;
color: #00bcd4;
transition: all 0.3s ease;
z-index: 10;
@@ -151,10 +188,10 @@
padding: 8px 12px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid #00bcd4;
- border-radius: 6px;
+ /* border-radius: 6px; */
color: #e0e0e0;
font-family: 'VT323', monospace;
- font-size: 14px;
+ font-size: 18px;
box-shadow: 0 0 8px rgba(0, 188, 212, 0.2);
transition: all 0.3s ease;
}
@@ -180,9 +217,9 @@
padding: 6px 12px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid #555;
- border-radius: 4px;
+ /* border-radius: 4px; */
cursor: pointer;
- font-size: 12px;
+ font-size: 18px;
color: #ccc;
transition: all 0.3s ease;
user-select: none;
@@ -222,18 +259,18 @@
padding: 8px 12px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #444;
- border-radius: 6px;
- font-size: 14px;
+ /* border-radius: 6px; */
+ font-size: 18px;
font-weight: bold;
color: #00bcd4;
}
.device-count {
- font-size: 12px;
+ font-size: 18px;
color: #4caf50;
background: rgba(76, 175, 80, 0.2);
padding: 2px 6px;
- border-radius: 3px;
+ /* border-radius: 3px; */
border: 1px solid #4caf50;
}
@@ -243,7 +280,7 @@
padding: 8px;
background: rgba(0, 0, 0, 0.1);
border: 1px solid #333;
- border-radius: 6px;
+ /* border-radius: 6px; */
max-height: 300px;
}
@@ -253,12 +290,12 @@
.bluetooth-device-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
- border-radius: 4px;
+ /* border-radius: 4px; */
}
.bluetooth-device-list::-webkit-scrollbar-thumb {
background: #00bcd4;
- border-radius: 4px;
+ /* border-radius: 4px; */
}
.bluetooth-device-list::-webkit-scrollbar-thumb:hover {
@@ -269,7 +306,7 @@
.bluetooth-device {
background: rgba(0, 0, 0, 0.3);
border: 1px solid #444;
- border-radius: 6px;
+ /* border-radius: 6px; */
margin-bottom: 6px;
padding: 10px;
cursor: pointer;
@@ -296,7 +333,7 @@
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
- font-size: 14px;
+ font-size: 18px;
font-weight: bold;
color: #e0e0e0;
}
@@ -308,7 +345,7 @@
}
.bluetooth-device-icon {
- font-size: 12px;
+ font-size: 18px;
opacity: 0.8;
}
@@ -329,7 +366,7 @@
.bluetooth-signal-bar {
width: 3px;
background: #666;
- border-radius: 1px;
+ /* border-radius: 1px; */
transition: all 0.3s ease;
}
@@ -345,7 +382,7 @@
}
.bluetooth-device-details {
- font-size: 12px;
+ font-size: 18px;
color: #aaa;
white-space: pre-line;
margin-bottom: 6px;
@@ -360,7 +397,7 @@
}
.bluetooth-device-timestamp {
- font-size: 10px;
+ font-size: 18px;
color: #666;
font-style: italic;
}
@@ -371,8 +408,8 @@
padding: 10px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #444;
- border-radius: 6px;
- font-size: 12px;
+ /* border-radius: 6px; */
+ font-size: 18px;
line-height: 1.4;
color: #ccc;
transition: all 0.3s ease;
@@ -406,7 +443,7 @@
}
.bluetooth-scanner-title {
- font-size: 14px;
+ font-size: 18px;
}
.bluetooth-categories {
@@ -417,7 +454,7 @@
.bluetooth-category {
text-align: center;
padding: 4px 8px;
- font-size: 11px;
+ font-size: 18px;
}
.bluetooth-device-name {
@@ -433,7 +470,7 @@
.bluetooth-scanner-expand-toggle {
width: 20px;
height: 20px;
- font-size: 10px;
+ font-size: 18px;
}
}
diff --git a/css/container-minigame.css b/css/container-minigame.css
index 395452e..484fd0b 100644
--- a/css/container-minigame.css
+++ b/css/container-minigame.css
@@ -19,7 +19,44 @@
.container-monitor-bezel {
background: #666;
border: 8px solid #444;
- border-radius: 15px;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
padding: 20px;
box-shadow:
inset 0 0 20px rgba(0, 0, 0, 0.5),
@@ -51,7 +88,7 @@
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
- border-radius: 7px;
+ /* border-radius: 7px; */
z-index: 1;
}
@@ -65,11 +102,11 @@
transform: rotate(-3deg);
background: #ffff88;
border: 1px solid #ddd;
- border-radius: 3px;
+ /* border-radius: 3px; */
padding: 15px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
- font-family: 'Press Start 2P', monospace;
- font-size: 8px;
+ font-family: 'Pixelify Sans', 'Comic Sans MS', cursive;
+ font-size: 18px;
color: #333;
max-width: 200px;
word-wrap: break-word;
@@ -165,7 +202,7 @@
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
background: rgba(255, 255, 255, 0.1);
- border-radius: 8px;
+ /* border-radius: 8px; */
padding: 4px;
border: 2px solid transparent;
}
@@ -204,13 +241,12 @@
.desktop-title {
font-family: 'Press Start 2P', monospace;
- font-size: 10px;
+ font-size: 20px;
color: #00ff00;
}
.desktop-subtitle {
- font-family: 'VT323', monospace;
- font-size: 14px;
+ font-size: 20px;
color: #ccc;
}
@@ -225,7 +261,7 @@
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Press Start 2P', monospace;
- font-size: 12px;
+ font-size: 18px;
color: #666;
text-align: center;
}
@@ -248,20 +284,19 @@
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
border: 2px solid rgba(255, 255, 255, 0.3);
- border-radius: 5px;
+ /* border-radius: 5px; */
background: rgba(0, 0, 0, 0.3);
}
.container-info h4 {
font-family: 'Press Start 2P', monospace;
- font-size: 14px;
+ font-size: 20px;
margin: 0 0 10px 0;
color: #3498db;
}
.container-info p {
- font-family: 'VT323', monospace;
- font-size: 16px;
+ font-size: 20px;
margin: 0;
color: #ecf0f1;
line-height: 1.4;
@@ -276,7 +311,7 @@
.container-contents-section h4 {
font-family: 'Press Start 2P', monospace;
- font-size: 12px;
+ font-size: 18px;
margin: 0;
color: #e74c3c;
text-align: center;
@@ -301,12 +336,12 @@
.container-contents-grid::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
- border-radius: 4px;
+ /* border-radius: 4px; */
}
.container-contents-grid::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
- border-radius: 4px;
+ /* border-radius: 4px; */
}
.container-contents-grid::-webkit-scrollbar-thumb:hover {
@@ -322,7 +357,7 @@
justify-content: center;
align-items: center;
background: rgb(149 157 216 / 80%);
- border-radius: 5px;
+ /* border-radius: 5px; */
transition: all 0.2s ease;
}
@@ -352,15 +387,14 @@
transform: translateX(-50%);
color: white;
padding: 4px 8px;
- border-radius: 4px;
- font-size: 12px;
+ /* border-radius: 4px; */
+ font-size: 18px;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.3);
- font-family: 'VT323', monospace;
z-index: 1000;
}
@@ -372,8 +406,7 @@
grid-column: 1 / -1;
text-align: center;
color: #95a5a6;
- font-family: 'VT323', monospace;
- font-size: 16px;
+ font-size: 20px;
margin: 20px 0;
font-style: italic;
}
@@ -396,9 +429,8 @@
left: 50%;
transform: translateX(-50%);
padding: 10px 20px;
- border-radius: 5px;
- font-family: 'VT323', monospace;
- font-size: 14px;
+ /* border-radius: 5px; */
+ font-size: 20px;
z-index: 10001;
animation: slideDown 0.3s ease;
}
diff --git a/css/dusting.css b/css/dusting.css
index b4c1f32..ede01f3 100644
--- a/css/dusting.css
+++ b/css/dusting.css
@@ -11,7 +11,7 @@
height: 60%;
margin: 0 auto 20px auto;
background: #1a1a1a;
- border-radius: 5px;
+ border: 2px solid #333;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
position: relative;
overflow: hidden;
@@ -42,9 +42,9 @@
.dusting-tool-button {
padding: 8px 12px;
border: none;
- border-radius: 3px;
+ border: 2px solid #333;
cursor: pointer;
- font-size: 12px;
+ font-size: 20px;
font-weight: bold;
color: white;
transition: opacity 0.2s, transform 0.1s;
@@ -87,7 +87,7 @@
position: absolute;
width: 3px;
height: 3px;
- border-radius: 50%;
+ border: 2px solid #333;
pointer-events: none;
z-index: 2;
}
@@ -99,10 +99,10 @@
right: 10px;
background: rgba(0, 0, 0, 0.8);
padding: 10px;
- border-radius: 3px;
+ border: 2px solid #333;
color: white;
font-family: 'VT323', monospace;
- font-size: 14px;
+ font-size: 20px;
z-index: 3;
}
@@ -159,13 +159,13 @@
}
.dusting-success-quality {
- font-size: 18px;
+ font-size: 20px;
margin-bottom: 15px;
color: #fff;
}
.dusting-success-details {
- font-size: 14px;
+ font-size: 20px;
color: #aaa;
}
@@ -176,7 +176,7 @@
}
.dusting-failure-subtitle {
- font-size: 16px;
+ font-size: 20px;
margin-top: 5px;
color: #fff;
}
\ No newline at end of file
diff --git a/css/lockpick-set-minigame.css b/css/lockpick-set-minigame.css
index 8ff55f5..c5c9494 100644
--- a/css/lockpick-set-minigame.css
+++ b/css/lockpick-set-minigame.css
@@ -9,10 +9,46 @@
height: auto !important;
max-height: 60vh !important;
background: linear-gradient(135deg, #1a2e1a 0%, #163e16 50%, #0f600f 100%) !important;
- border: 2px solid #4caf50 !important;
box-shadow: 0 0 20px rgba(76, 175, 80, 0.3), inset 0 0 10px rgba(76, 175, 80, 0.1) !important;
- border-radius: 10px !important;
- font-family: 'VT323', monospace !important;
+ border: 4px solid #4caf50 !important;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ ) !important;
color: #e0e0e0 !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
@@ -47,7 +83,7 @@
padding: 10px;
background: rgba(76, 175, 80, 0.1);
border: 1px solid #4caf50;
- border-radius: 6px;
+ /* border-radius: 6px; */
box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
}
@@ -55,7 +91,7 @@
display: flex;
align-items: center;
gap: 8px;
- font-size: 16px;
+ font-size: 18px;
font-weight: bold;
color: #4caf50;
text-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
@@ -71,7 +107,7 @@
display: flex;
align-items: center;
gap: 6px;
- font-size: 14px;
+ font-size: 18px;
color: #4caf50;
}
@@ -108,12 +144,12 @@
height: 24px;
background: rgba(76, 175, 80, 0.2);
border: 1px solid #4caf50;
- border-radius: 4px;
+ /* border-radius: 4px; */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
- font-size: 12px;
+ font-size: 18px;
color: #4caf50;
transition: all 0.3s ease;
z-index: 10;
@@ -135,7 +171,7 @@
justify-content: center;
padding: 10px;
background: rgba(76, 175, 80, 0.1);
- border-radius: 6px;
+ /* border-radius: 6px; */
box-shadow: 0 0 10px rgba(76, 175, 80, 0.2);
}
@@ -147,10 +183,9 @@
padding: 8px 12px;
background: rgba(76, 175, 80, 0.2);
border: 1px solid #4caf50;
- border-radius: 6px;
+ /* border-radius: 6px; */
color: #4caf50;
- font-family: 'VT323', monospace;
- font-size: 14px;
+ font-size: 18px;
cursor: pointer;
transition: all 0.3s ease;
user-select: none;
@@ -170,7 +205,7 @@
}
.lockpick-action-btn .btn-icon {
- font-size: 16px;
+ font-size: 18px;
}
.lockpick-action-btn .btn-text {
@@ -183,8 +218,8 @@
padding: 10px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid #444;
- border-radius: 6px;
- font-size: 12px;
+ /* border-radius: 6px; */
+ font-size: 18px;
line-height: 1.4;
color: #ccc;
transition: all 0.3s ease;
@@ -218,13 +253,13 @@
}
.lockpick-set-title {
- font-size: 14px;
+ font-size: 18px;
}
.lockpick-action-btn {
justify-content: center;
padding: 6px 10px;
- font-size: 12px;
+ font-size: 18px;
}
.lockpick-expand-toggle {
diff --git a/css/lockpicking.css b/css/lockpicking.css
index 21823b8..f06f91c 100644
--- a/css/lockpicking.css
+++ b/css/lockpicking.css
@@ -5,10 +5,10 @@
background: rgba(0, 0, 0, 0.8);
color: #00ff00;
padding: 10px 15px;
- border-radius: 5px;
+ border: 2px solid #00ff00;
margin: 10px 0;
font-family: 'VT323', monospace;
- font-size: 16px;
+ font-size: 20px;
text-align: center;
border: 1px solid #00ff00;
min-height: 20px;
diff --git a/css/main.css b/css/main.css
index e439f67..1b90390 100644
--- a/css/main.css
+++ b/css/main.css
@@ -7,6 +7,7 @@ body {
align-items: center;
min-height: 100vh;
background: #333;
+ font-smooth: never;
}
#game-container {
@@ -32,7 +33,7 @@ body {
transform: translate(-50%, -50%);
color: white;
font-family: 'Press Start 2P', monospace;
- font-size: 16px;
+ font-size: 18px;
}
/* Laptop popup styles - matching minigame style */
@@ -46,14 +47,89 @@ body {
background: rgba(0, 0, 0, 0.95);
z-index: 2000;
pointer-events: auto;
- border-radius: 10px;
- border: 2px solid #444;
+ border: 4px solid #444;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
}
.laptop-frame {
background: transparent;
- border-radius: 8px;
+ border: 2px solid #444;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
padding: 20px;
width: 100%;
height: calc(100% - 40px);
@@ -64,7 +140,45 @@ body {
width: 100%;
height: 100%;
background: #1a1a1a;
- border-radius: 8px;
+ border: 2px solid #333;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
display: flex;
flex-direction: column;
overflow: hidden;
@@ -79,18 +193,18 @@ body {
align-items: center;
border-bottom: 1px solid #444;
font-family: 'VT323', monospace;
- font-size: 16px;
+ font-size: 18px;
}
.title-bar .close-btn {
background: #e74c3c;
color: white;
border: none;
- border-radius: 3px;
+ border: 2px solid #333;
width: 24px;
height: 24px;
cursor: pointer;
- font-size: 16px;
+ font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
@@ -112,7 +226,7 @@ body {
width: 100%;
height: 100%;
border: none;
- border-radius: 5px;
+ border: 2px solid #333;
}
.laptop-close-btn {
@@ -124,7 +238,7 @@ body {
background: #e74c3c;
color: white;
border: none;
- border-radius: 50%;
+ border: 2px solid #333;
cursor: pointer;
font-size: 18px;
font-weight: bold;
diff --git a/css/minigames-framework.css b/css/minigames-framework.css
index 3f70572..cd21dbb 100644
--- a/css/minigames-framework.css
+++ b/css/minigames-framework.css
@@ -12,24 +12,28 @@
flex-direction: column;
justify-content: center;
align-items: center;
- font-family: 'Press Start 2P', monospace;
+ font-family: 'VT323', monospace;
color: white;
- border-radius: 10px;
- border: 2px solid #444;
+ border: 4px solid #444;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
+ font-size: 18px;
+}
+
+.minigame-container input, .minigame-container select, .minigame-container textarea, .minigame-container button, .minigame-game-container pre {
+ font-family: 'VT323', monospace;
}
.minigame-header {
width: 100%;
text-align: center;
- font-size: 18px;
+ font-size: 20px;
margin-bottom: 20px;
color: #3498db;
}
.minigame-header h3 {
font-family: 'Press Start 2P', monospace;
- font-size: 16px;
+ font-size: 18px;
margin: 0 0 10px 0;
}
@@ -42,13 +46,10 @@
.minigame-game-container {
width: 80%;
max-width: 600px;
- height: 55%;
margin: 20px auto;
background: #1a1a1a;
- border-radius: 5px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
position: relative;
- overflow: visible;
}
.minigame-message-container {
@@ -69,11 +70,10 @@
background: rgba(46, 204, 113, 0.9);
color: white;
padding: 20px;
- border-radius: 10px;
+ border: 2px solid #27ae60;
text-align: center;
z-index: 10001;
- font-size: 14px;
- border: 2px solid #27ae60;
+ font-size: 18px;
box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
}
@@ -85,11 +85,10 @@
background: rgba(231, 76, 60, 0.9);
color: white;
padding: 20px;
- border-radius: 10px;
+ border: 2px solid #c0392b;
text-align: center;
z-index: 10001;
- font-size: 14px;
- border: 2px solid #c0392b;
+ font-size: 18px;
box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
}
@@ -111,7 +110,7 @@
padding: 10px 20px;
cursor: pointer;
font-family: 'VT323', monospace;
- font-size: 16px;
+ font-size: 18px;
transition: background 0.3s;
}
@@ -127,7 +126,7 @@
width: 100%;
height: 20px;
background: #333;
- border-radius: 10px;
+ border: 2px solid #333;
overflow: hidden;
margin: 10px 0;
}
@@ -139,6 +138,13 @@
transition: width 0.3s;
}
+.instructions {
+ text-align: center;
+ margin-bottom: 10px;
+ font-size: 12px;
+ color: #ccc;
+}
+
/* Minigame disabled state */
.minigame-disabled {
pointer-events: none !important;
@@ -160,9 +166,8 @@
color: white;
border: 4px solid #c0392b;
cursor: pointer;
- font-family: 'Press Start 2P', monospace;
+ font-family: 'Press Start 2P', monospace !important;
font-size: 18px;
- font-weight: bold;
z-index: 10000;
display: flex;
align-items: center;
@@ -183,7 +188,7 @@
width: 100%;
height: 10px;
background: #333;
- border-radius: 5px;
+ border: 2px solid #333;
overflow: hidden;
margin-top: 5px;
}
@@ -192,6 +197,5 @@
height: 100%;
background: linear-gradient(90deg, #2ecc71, #27ae60);
transition: width 0.3s ease;
- border-radius: 5px;
+ border: 2px solid #27ae60;
}
-
diff --git a/css/minigames.css b/css/minigames.css
deleted file mode 100644
index 99eb195..0000000
--- a/css/minigames.css
+++ /dev/null
@@ -1,193 +0,0 @@
-/* Minigames Styles */
-
-
-/* Minigame Framework Styles */
-.minigame-container {
- position: fixed;
- top: 2vh;
- left: 2vw;
- width: 96vw;
- height: 96vh;
- background: rgba(0, 0, 0, 0.95);
- z-index: 2000;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-family: 'Press Start 2P', monospace;
- color: white;
- border-radius: 10px;
- border: 2px solid #444;
- box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
-}
-
-.minigame-header {
- width: 100%;
- text-align: center;
- font-size: 18px;
- margin-bottom: 20px;
- color: #3498db;
-}
-
-.minigame-game-container {
- width: 80%;
- max-width: 600px;
- height: 60%;
- margin: 20px auto;
- background: #1a1a1a;
- border-radius: 5px;
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) inset;
- position: relative;
-}
-
-.minigame-message-container {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 1000;
-}
-
-.minigame-success-message {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: rgba(46, 204, 113, 0.9);
- color: white;
- padding: 20px;
- border-radius: 10px;
- text-align: center;
- z-index: 10001;
- font-size: 14px;
- border: 2px solid #27ae60;
- box-shadow: 0 0 20px rgba(46, 204, 113, 0.5);
-}
-
-.minigame-failure-message {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: rgba(231, 76, 60, 0.9);
- color: white;
- padding: 20px;
- border-radius: 10px;
- text-align: center;
- z-index: 10001;
- font-size: 14px;
- border: 2px solid #c0392b;
- box-shadow: 0 0 20px rgba(231, 76, 60, 0.5);
-}
-
-.minigame-controls {
- display: flex;
- justify-content: center;
- gap: 10px;
- margin-top: 20px;
-}
-
-.minigame-button {
- background: #3498db;
- color: white;
- border: none;
- padding: 10px 20px;
- border-radius: 5px;
- cursor: pointer;
- font-family: 'Press Start 2P', monospace;
- font-size: 10px;
- transition: background 0.3s;
-}
-
-.minigame-button:hover {
- background: #2980b9;
-}
-
-.minigame-button:active {
- background: #21618c;
-}
-
-.minigame-progress-container {
- width: 100%;
- height: 20px;
- background: #333;
- border-radius: 10px;
- overflow: hidden;
- margin: 10px 0;
-}
-
-.minigame-progress-bar {
- height: 100%;
- background: #2ecc71;
- width: 0%;
- transition: width 0.3s;
-}
-
-.instructions {
- text-align: center;
- margin-bottom: 10px;
- font-size: 12px;
- color: #ccc;
-}
-
-
-/* Minigame disabled state */
-.minigame-disabled {
- pointer-events: none !important;
-}
-
-/* Biometric scanner visual feedback */
-.biometric-scanner-success {
- border: 2px solid #00ff00 !important;
-}
-
-/* Close button for minigames */
-.minigame-close-button {
- position: absolute;
- top: 15px;
- right: 15px;
- width: 30px;
- height: 30px;
- background: #e74c3c;
- color: white;
- border: none;
- border-radius: 50%;
- cursor: pointer;
- font-family: 'Press Start 2P', monospace;
- font-size: 18px;
- font-weight: bold;
- z-index: 10000;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: background-color 0.3s ease;
-}
-
-.minigame-close-button:hover {
- background: #c0392b;
-}
-
-.minigame-close-button:active {
- background: #a93226;
-}
-
-/* Progress bar styling for dusting minigame */
-.minigame-progress-container {
- width: 100%;
- height: 10px;
- background: #333;
- border-radius: 5px;
- overflow: hidden;
- margin-top: 5px;
-}
-
-.minigame-progress-bar {
- height: 100%;
- background: linear-gradient(90deg, #2ecc71, #27ae60);
- transition: width 0.3s ease;
- border-radius: 5px;
-}
-
-
diff --git a/css/modals.css b/css/modals.css
index cc4eb23..f49d0b4 100644
--- a/css/modals.css
+++ b/css/modals.css
@@ -21,7 +21,7 @@
.password-modal-content {
background: #222;
color: #fff;
- border-radius: 8px;
+ /* border-radius: 8px; */
padding: 32px 24px 24px 24px;
min-width: 320px;
box-shadow: 0 0 20px #000;
@@ -41,7 +41,7 @@
font-size: 20px;
font-family: 'VT323', monospace;
padding: 8px 12px;
- border-radius: 4px;
+ /* border-radius: 4px; */
border: 1px solid #444;
background: #111;
color: #fff;
@@ -67,7 +67,7 @@
}
.password-modal-checkbox-label {
- font-size: 14px;
+ font-size: 18px;
font-family: 'VT323', monospace;
color: #aaa;
cursor: pointer;
@@ -79,10 +79,10 @@
}
.password-modal-button {
- font-size: 16px;
+ font-size: 18px;
font-family: 'Press Start 2P';
border: none;
- border-radius: 4px;
+ /* border-radius: 4px; */
padding: 8px 18px;
cursor: pointer;
}
@@ -118,7 +118,7 @@
.modal-content {
background: #222;
color: white;
- border-radius: 8px;
+ /* border-radius: 8px; */
padding: 24px;
max-width: 90%;
max-height: 90%;
@@ -137,7 +137,7 @@
.modal-body {
font-family: 'VT323', monospace;
- font-size: 16px;
+ font-size: 18px;
line-height: 1.4;
margin-bottom: 16px;
}
@@ -149,10 +149,10 @@
}
.modal-button {
- font-size: 14px;
+ font-size: 18px;
font-family: 'Press Start 2P';
border: none;
- border-radius: 4px;
+ /* border-radius: 4px; */
padding: 8px 16px;
cursor: pointer;
transition: background-color 0.2s;
diff --git a/css/notes.css b/css/notes.css
index bf3e8c0..b6962db 100644
--- a/css/notes.css
+++ b/css/notes.css
@@ -37,14 +37,19 @@
/* Game container */
.notes-minigame-game-container {
width: 100%;
- max-width: min(90vw, 90vh * (165/205)); /* Scale based on smaller dimension */
position: relative;
- margin: 0 auto; /* Centered with no top margin */
+ margin: 0 auto;
+ overflow: hidden; /* Crop sides on narrow screens */
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
}
/* Notepad background container */
.notes-minigame-notepad {
- width: 100%;
+ /* Allow shrinkage but set a reasonable minimum to prevent working area from being too small */
+ min-width: 450px;
+ width: min(90vw, 90vh * (165/205)); /* Scale based on smaller dimension */
aspect-ratio: 165 / 205; /* Match notepad image dimensions */
background-image: url('../assets/mini-games/notepad.png');
background-size: contain;
@@ -65,7 +70,6 @@
right: 0;
bottom: 0;
padding: 2% 12% 8% 18%;
- font-family: 'Courier New', monospace;
font-size: 18px;
line-height: 1.5;
color: #333;
@@ -169,7 +173,6 @@
white-space: pre-wrap;
word-wrap: break-word;
color: #333;
- font-family: 'VT323', monospace;
}
/* Observation container */
@@ -252,8 +255,7 @@
border: 4px solid #555;
background: rgba(0,0,0,0.7);
color: white;
- font-size: 14px;
- font-family: 'VT323', monospace;
+ font-size: 18px;
width: 200px;
margin-right: 10px;
}
@@ -265,8 +267,7 @@
border: 4px solid #7f8c8d;
padding: 8px 15px;
cursor: pointer;
- font-size: 14px;
- font-weight: bold;
+ font-size: 18px;
transition: background-color 0.3s ease;
}
@@ -277,7 +278,7 @@
/* Note counter */
.notes-minigame-counter {
color: white;
- font-size: 14px;
+ font-size: 18px;
display: flex;
align-items: center;
padding: 8px 15px;
@@ -326,8 +327,7 @@
border: 4px solid #27ae60;
padding: 8px 16px;
cursor: pointer;
- font-size: 14px;
- font-family: 'VT323', monospace;
+ font-size: 18px;
}
.notes-minigame-save-btn:hover {
@@ -340,8 +340,7 @@
border: 4px solid #7f8c8d;
padding: 8px 16px;
cursor: pointer;
- font-size: 14px;
- font-family: 'VT323', monospace;
+ font-size: 18px;
}
.notes-minigame-cancel-btn:hover {
diff --git a/css/notifications.css b/css/notifications.css
index 4f842e9..642d181 100644
--- a/css/notifications.css
+++ b/css/notifications.css
@@ -49,7 +49,7 @@
.notification-title {
font-weight: bold;
margin-bottom: 5px;
- font-size: 16px;
+ font-size: 18px;
}
.notification-message {
@@ -63,7 +63,7 @@
top: 10px;
right: 10px;
cursor: pointer;
- font-size: 16px;
+ font-size: 18px;
color: #aaa;
}
diff --git a/css/panels.css b/css/panels.css
index 986c0ee..d7c7b93 100644
--- a/css/panels.css
+++ b/css/panels.css
@@ -57,7 +57,7 @@
border: none;
background-color: #222;
color: white;
- font-size: 14px;
+ font-size: 18px;
}
#bluetooth-search:focus {
@@ -76,7 +76,7 @@
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
- font-size: 12px;
+ font-size: 18px;
transition: all 0.2s;
}
@@ -98,7 +98,7 @@
.bluetooth-device {
background-color: #333;
border: 1px solid #444;
- border-radius: 5px;
+ /* border-radius: 5px; */
padding: 10px;
margin-bottom: 8px;
cursor: pointer;
@@ -122,7 +122,7 @@
display: flex;
justify-content: space-between;
align-items: center;
- font-size: 14px;
+ font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
@@ -134,12 +134,12 @@
}
.bluetooth-device-icon {
- font-size: 12px;
+ font-size: 18px;
}
.bluetooth-device-details {
display: none;
- font-size: 12px;
+ font-size: 18px;
color: #ccc;
margin-top: 8px;
white-space: pre-line;
@@ -150,7 +150,7 @@
}
.bluetooth-device-timestamp {
- font-size: 10px;
+ font-size: 18px;
color: #888;
margin-top: 5px;
text-align: right;
@@ -172,7 +172,7 @@
.bluetooth-signal-bar {
width: 3px;
background-color: #666;
- border-radius: 1px;
+ /* border-radius: 1px; */
transition: all 0.2s;
}
@@ -187,7 +187,7 @@
.bluetooth-signal-bar:nth-child(5) { height: 16px; }
.bluetooth-signal-text {
- font-size: 10px;
+ font-size: 18px;
color: #aaa;
}
@@ -259,7 +259,7 @@
border: none;
background-color: #222;
color: white;
- font-size: 14px;
+ font-size: 18px;
}
#biometrics-search:focus {
@@ -278,7 +278,7 @@
padding: 5px 10px;
margin-right: 5px;
cursor: pointer;
- font-size: 12px;
+ font-size: 18px;
transition: all 0.2s;
}
@@ -299,7 +299,7 @@
background-color: #2c3e50;
color: white;
padding: 20px;
- border-radius: 8px;
+ /* border-radius: 8px; */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 320px;
max-height: 400px;
@@ -325,9 +325,9 @@
background-color: #3498db;
color: white;
border: none;
- border-radius: 4px;
+ /* border-radius: 4px; */
cursor: pointer;
- font-size: 14px;
+ font-size: 18px;
}
.bluetooth-scan-btn:hover {
@@ -348,7 +348,7 @@
background-color: #34495e;
margin-bottom: 8px;
padding: 10px;
- border-radius: 4px;
+ /* border-radius: 4px; */
display: flex;
justify-content: space-between;
align-items: center;
@@ -365,21 +365,21 @@
}
.device-address {
- font-size: 12px;
+ font-size: 18px;
color: #bdc3c7;
font-family: monospace;
}
.device-signal {
- font-size: 12px;
+ font-size: 18px;
color: #f39c12;
margin-left: 10px;
}
.device-status {
- font-size: 10px;
+ font-size: 18px;
padding: 2px 6px;
- border-radius: 3px;
+ /* border-radius: 3px; */
margin-left: 10px;
}
@@ -398,7 +398,7 @@
background-color: #2c3e50;
color: white;
padding: 20px;
- border-radius: 8px;
+ /* border-radius: 8px; */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 320px;
max-height: 400px;
@@ -419,7 +419,7 @@
.panel-section h4 {
color: #3498db;
margin-bottom: 10px;
- font-size: 14px;
+ font-size: 18px;
border-bottom: 1px solid #34495e;
padding-bottom: 5px;
}
@@ -428,7 +428,7 @@
background-color: #34495e;
margin-bottom: 10px;
padding: 12px;
- border-radius: 4px;
+ /* border-radius: 4px; */
border-left: 4px solid #27ae60;
}
@@ -446,17 +446,17 @@
}
.sample-type {
- font-size: 12px;
+ font-size: 18px;
color: #bdc3c7;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sample-quality {
- font-size: 12px;
+ font-size: 18px;
font-weight: bold;
padding: 2px 6px;
- border-radius: 3px;
+ /* border-radius: 3px; */
}
.sample-quality.quality-perfect {
@@ -485,12 +485,12 @@
}
.sample-date {
- font-size: 10px;
+ font-size: 18px;
color: #7f8c8d;
}
#scanner-status {
- font-size: 12px;
+ font-size: 18px;
color: #bdc3c7;
}
@@ -549,7 +549,7 @@
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
background: rgba(0, 0, 0, 0.7);
- border-radius: 8px;
+ /* border-radius: 8px; */
padding: 8px;
border: 2px solid #444;
}
@@ -573,7 +573,7 @@
display: flex;
align-items: center;
justify-content: center;
- font-size: 12px;
+ font-size: 18px;
font-weight: bold;
font-family: 'Press Start 2P', monospace;
border: 2px solid #fff;
@@ -590,14 +590,14 @@
.bluetooth-panel::-webkit-scrollbar-track,
.biometric-panel::-webkit-scrollbar-track {
background: #34495e;
- border-radius: 4px;
+ /* border-radius: 4px; */
}
.notes-panel::-webkit-scrollbar-thumb,
.bluetooth-panel::-webkit-scrollbar-thumb,
.biometric-panel::-webkit-scrollbar-thumb {
background: #555;
- border-radius: 4px;
+ /* border-radius: 4px; */
}
.notes-panel::-webkit-scrollbar-thumb:hover,
diff --git a/css/password-minigame.css b/css/password-minigame.css
index 160c2eb..8e9a2cc 100644
--- a/css/password-minigame.css
+++ b/css/password-minigame.css
@@ -19,7 +19,44 @@
.monitor-bezel {
background: #666;
border: 8px solid #444;
- border-radius: 15px;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
padding: 20px;
box-shadow:
inset 0 0 20px rgba(0, 0, 0, 0.5),
@@ -46,13 +83,13 @@
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
- border-radius: 7px;
+ /* border-radius: 7px; */
z-index: 1;
}
.monitor-screen {
border: 2px solid #333;
- border-radius: 8px;
+ /* border-radius: 8px; */
padding: 15px;
min-height: 180px;
position: relative;
@@ -79,7 +116,7 @@
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 255, 255, 0.1));
- border-radius: 6px;
+ /* border-radius: 6px; */
z-index: 1;
}
@@ -89,7 +126,7 @@
}
.password-input-container label {
- font-size: 12px;
+ /* font-size: 12px; */
color: #00ff00;
margin-bottom: 5px;
}
@@ -105,10 +142,9 @@
padding: 12px 45px 12px 12px;
background: #1a1a1a;
border: 2px solid #00ff00;
- border-radius: 5px;
+ /* border-radius: 5px; */
color: white;
- font-family: 'Press Start 2P', monospace;
- font-size: 10px;
+ font-size: 18px;
outline: none;
transition: border-color 0.3s ease;
}
@@ -133,7 +169,7 @@
cursor: pointer;
font-size: 16px;
padding: 5px;
- border-radius: 3px;
+ /* border-radius: 3px; */
transition: background-color 0.3s ease;
}
@@ -152,10 +188,9 @@
color: white;
border: none;
padding: 8px 16px;
- border-radius: 5px;
+ /* border-radius: 5px; */
cursor: pointer;
- font-family: 'Press Start 2P', monospace;
- font-size: 8px;
+ font-size: 18px;
transition: background 0.3s ease;
align-self: flex-start;
}
@@ -167,23 +202,23 @@
.password-hint {
background: rgba(243, 156, 18, 0.1);
border: 1px solid #f39c12;
- border-radius: 5px;
+ /* border-radius: 5px; */
padding: 10px;
- font-size: 10px;
+ font-size: 18px;
color: #f39c12;
}
.postit-note {
background: #ffff88;
border: 1px solid #ddd;
- border-radius: 3px;
+ /* border-radius: 3px; */
padding: 15px;
margin: 10px 0;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
position: relative;
transform: rotate(-2deg);
- font-family: 'Press Start 2P', monospace;
- font-size: 8px;
+ font-family: 'Pixelify Sans', 'Comic Sans MS', cursive;
+ font-size: 18px;
color: #333;
max-width: 200px;
word-wrap: break-word;
@@ -258,7 +293,7 @@
gap: 5px;
background: #2a2a2a;
border: 2px solid #444;
- border-radius: 8px;
+ /* border-radius: 8px; */
padding: 10px;
margin: 10px 0;
position: relative;
@@ -276,11 +311,10 @@
background: #444;
color: white;
border: 1px solid #666;
- border-radius: 4px;
+ /* border-radius: 4px; */
padding: 8px 12px;
cursor: pointer;
- font-family: 'Press Start 2P', monospace;
- font-size: 8px;
+ font-size: 18px;
min-width: 35px;
text-align: center;
transition: all 0.2s ease;
@@ -355,10 +389,9 @@
color: white;
border: none;
padding: 12px 24px;
- border-radius: 5px;
+ /* border-radius: 5px; */
cursor: pointer;
- font-family: 'Press Start 2P', monospace;
- font-size: 10px;
+ font-size: 18px;
transition: background 0.3s ease;
position: relative;
z-index: 11;
@@ -377,10 +410,9 @@
color: white;
border: none;
padding: 12px 24px;
- border-radius: 5px;
+ /* border-radius: 5px; */
cursor: pointer;
- font-family: 'Press Start 2P', monospace;
- font-size: 10px;
+ font-size: 18px;
transition: background 0.3s ease;
position: relative;
z-index: 11;
@@ -396,11 +428,11 @@
.attempts-counter {
text-align: center;
- font-size: 10px;
+ font-size: 18px;
color: #f39c12;
background: rgba(243, 156, 18, 0.1);
border: 1px solid #f39c12;
- border-radius: 5px;
+ /* border-radius: 5px; */
padding: 8px;
margin-top: 10px;
position: relative;
@@ -437,12 +469,12 @@
}
.password-field {
- font-size: 9px;
+ font-size: 18px;
padding: 10px 40px 10px 10px;
}
.submit-btn, .cancel-btn {
padding: 10px 20px;
- font-size: 9px;
+ font-size: 18px;
}
}
diff --git a/css/phone.css b/css/phone.css
index 06381dd..73a6815 100644
--- a/css/phone.css
+++ b/css/phone.css
@@ -7,11 +7,47 @@
max-width: 400px;
margin: 0 auto;
background: #a0a0ad;
- border-radius: 20px;
- border: 3px solid #333;
+ border: 4px solid #333;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);
- overflow: hidden;
- font-family: 'Courier New', monospace;
+ font-family: 'VT323', monospace;
}
.phone-screen {
@@ -22,8 +58,8 @@
position: relative;
color: #000;
margin: 10px;
- border-radius: 15px;
- border: 2px solid #333;
+ overflow: hidden;
+ clip-path: polygon(0px calc(100% - 10px), 2px calc(100% - 10px), 2px calc(100% - 6px), 4px calc(100% - 6px), 4px calc(100% - 4px), 6px calc(100% - 4px), 6px calc(100% - 2px), 10px calc(100% - 2px), 10px 100%, calc(100% - 10px) 100%, calc(100% - 10px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 10px), 100% calc(100% - 10px), 100% 10px, calc(100% - 2px) 10px, calc(100% - 2px) 6px, calc(100% - 4px) 6px, calc(100% - 4px) 4px, calc(100% - 6px) 4px, calc(100% - 6px) 2px, calc(100% - 10px) 2px, calc(100% - 10px) 0px, 10px 0px, 10px 2px, 6px 2px, 6px 4px, 4px 4px, 4px 6px, 2px 6px, 2px 10px, 0px 10px) !important;
}
.phone-header {
@@ -32,8 +68,9 @@
align-items: center;
padding: 10px 15px;
background: rgba(0, 0, 0, 0.1);
- border-bottom: 1px solid #333;
+ border-bottom: 2px solid #333;
color: #000;
+ flex-shrink: 0;
}
.signal-bars {
@@ -45,7 +82,7 @@
.signal-bars .bar {
width: 3px;
background: #000;
- border-radius: 1px;
+ /* border-radius: 1px; */
}
.signal-bars .bar:nth-child(1) { height: 4px; }
@@ -55,16 +92,23 @@
.battery {
color: #000;
- font-size: 10px;
- font-family: 'Courier New', monospace;
+ /* font-size: 10px; */
+ font-family: 'VT323', monospace;
font-weight: bold;
}
.messages-list {
flex: 1;
overflow-y: auto;
+ overflow-x: hidden;
padding: 10px;
color: #000;
+ scrollbar-width: none;
+ cursor: grab;
+}
+
+.messages-list::-webkit-scrollbar {
+ display: none;
}
.message-item {
@@ -73,8 +117,8 @@
padding: 12px;
margin-bottom: 8px;
background: rgba(0, 0, 0, 0.1);
- border: 1px solid rgba(0, 0, 0, 0.3);
- border-radius: 8px;
+ border: 2px solid rgba(0, 0, 0, 0.3);
+ /* border-radius: 8px; */
cursor: pointer;
transition: all 0.3s ease;
position: relative;
@@ -103,17 +147,17 @@
.message-sender {
font-weight: bold;
color: #000;
- font-size: 12px;
+ /* font-size: 18px; */
margin-bottom: 4px;
- font-family: 'Courier New', monospace;
+ font-family: 'VT323', monospace;
}
.message-text {
color: #333;
- font-size: 11px;
+ /* font-size: 11px; */
line-height: 1.3;
margin-bottom: 4px;
- font-family: 'Courier New', monospace;
+ font-family: 'VT323', monospace;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -121,8 +165,8 @@
.message-time {
color: #666;
- font-size: 10px;
- font-family: 'Courier New', monospace;
+ /* font-size: 10px; */
+ font-family: 'VT323', monospace;
}
.message-status {
@@ -147,8 +191,8 @@
justify-content: center;
height: 200px;
color: #666;
- font-size: 12px;
- font-family: 'Courier New', monospace;
+ font-size: 18px;
+ font-family: 'VT323', monospace;
}
.message-detail {
@@ -157,6 +201,12 @@
flex-direction: column;
padding: 15px;
color: #000;
+ overflow-y: scroll;
+ scrollbar-width: none;
+ cursor: grab;
+}
+.message-detail::-webkit-scrollbar {
+ display: none;
}
.message-header {
@@ -164,18 +214,18 @@
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
- border-bottom: 1px solid #333;
+ border-bottom: 2px solid #333;
}
.back-btn {
background: #333;
color: #5fcf69;
- border: 1px solid #555;
+ border: 2px solid #555;
padding: 8px 12px;
- border-radius: 5px;
+ /* border-radius: 5px; */
cursor: pointer;
- font-family: 'Courier New', monospace;
- font-size: 11px;
+ font-family: 'VT323', monospace;
+ /* font-size: 11px; */
margin-right: 15px;
transition: all 0.3s ease;
font-weight: bold;
@@ -195,30 +245,33 @@
display: block;
color: #000;
font-weight: bold;
- font-size: 14px;
+ /* font-size: 18px; */
margin-bottom: 4px;
- font-family: 'Courier New', monospace;
+ font-family: 'VT323', monospace;
}
.timestamp {
color: #666;
- font-size: 11px;
- font-family: 'Courier New', monospace;
+ /* font-size: 11px; */
+ font-family: 'VT323', monospace;
}
.message-content {
flex: 1;
background: rgba(0, 0, 0, 0.1);
padding: 15px;
- border-radius: 8px;
- border: 1px solid #333;
color: #000;
- font-size: 12px;
line-height: 1.5;
- font-family: 'Courier New', monospace;
+ font-family: 'VT323', monospace;
white-space: pre-wrap;
overflow-y: auto;
+ overflow-x: hidden;
margin-bottom: 15px;
+ scrollbar-width: none;
+}
+
+.message-content::-webkit-scrollbar {
+ display: none;
}
/* Voice message display styling */
@@ -236,48 +289,43 @@
cursor: pointer;
transition: transform 0.2s ease;
padding: 5px;
- border-radius: 8px;
+ /* border-radius: 8px; */
}
.audio-controls:hover {
- transform: scale(1.25);
+ transform: scale(1.5);
background: rgba(0, 0, 0, 0.1);
}
.audio-sprite {
height: 32px;
width: auto;
- image-rendering: pixelated;
+ image-rendering: pixelated !important;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: -webkit-optimize-contrast;
- filter: contrast(1.2) saturate(1.1);
}
.play-button {
- background: #5fcf69;
color: #000;
- border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
- font-size: 14px;
font-weight: bold;
- font-family: 'Courier New', monospace;
- border: 2px solid #333;
+ font-family: 'VT323', monospace;
}
.transcript {
text-align: center;
background: rgba(0, 0, 0, 0.1);
padding: 10px;
- border-radius: 5px;
- border: 1px solid #333;
+ /* border-radius: 5px; */
+ border: 2px solid #333;
width: 100%;
- font-family: 'Courier New', monospace;
- font-size: 11px;
+ font-family: 'VT323', monospace;
+ /* font-size: 11px; */
line-height: 1.4;
}
@@ -291,7 +339,7 @@
margin-top: 20px;
padding: 15px;
background: #f0f0f0;
- border-radius: 8px;
+ /* border-radius: 8px; */
border: 2px solid #333;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@@ -299,17 +347,17 @@
.observations-content h4 {
margin: 0 0 8px 0;
color: #000;
- font-size: 12px;
+ /* font-size: 18px; */
font-weight: bold;
- font-family: 'Courier New', monospace;
+ font-family: 'VT323', monospace;
}
.observations-content p {
margin: 0;
color: #000;
- font-size: 11px;
+ /* font-size: 11px; */
line-height: 1.4;
- font-family: 'Courier New', monospace;
+ font-family: 'VT323', monospace;
}
.message-actions {
@@ -324,18 +372,18 @@
gap: 15px;
padding: 15px;
background: rgba(0, 0, 0, 0.1);
- border-top: 1px solid #333;
+ border-top: 2px solid #333;
}
.control-btn {
background: #333;
color: #5fcf69;
- border: 1px solid #555;
+ border: 2px solid #555;
padding: 10px 15px;
- border-radius: 8px;
+ /* border-radius: 8px; */
cursor: pointer;
- font-family: 'Courier New', monospace;
- font-size: 11px;
+ font-family: 'VT323', monospace;
+ /* font-size: 11px; */
transition: all 0.3s ease;
min-width: 80px;
font-weight: bold;
@@ -363,14 +411,14 @@
/* Voice playback note styling */
.voice-note {
color: #666 !important;
- font-size: 10px !important;
+ /* font-size: 10px !important; */
text-align: center !important;
margin-top: 10px !important;
font-family: 'Courier New', monospace !important;
background: rgba(0, 0, 0, 0.1);
padding: 5px;
- border-radius: 3px;
- border: 1px solid #333;
+ /* border-radius: 3px; */
+ border: 2px solid #333;
}
/* Voice controls styling */
@@ -382,8 +430,8 @@
padding: 10px 15px;
background: rgba(0, 0, 0, 0.1);
border-top: 1px solid #333;
- font-family: 'Courier New', monospace;
- font-size: 11px;
+ font-family: 'VT323', monospace;
+ /* font-size: 11px; */
}
.voice-controls label {
@@ -394,11 +442,11 @@
.voice-select {
background: #333;
color: #5fcf69;
- border: 1px solid #555;
+ border: 2px solid #555;
padding: 5px 8px;
- border-radius: 4px;
- font-family: 'Courier New', monospace;
- font-size: 10px;
+ /* border-radius: 4px; */
+ font-family: 'VT323', monospace;
+ /* font-size: 10px; */
min-width: 200px;
cursor: pointer;
font-weight: bold;
@@ -421,27 +469,3 @@
padding: 5px;
font-weight: bold;
}
-
-
-/* Scrollbar styling for phone interface */
-.messages-list::-webkit-scrollbar,
-.message-content::-webkit-scrollbar {
- width: 6px;
-}
-
-.messages-list::-webkit-scrollbar-track,
-.message-content::-webkit-scrollbar-track {
- background: rgba(0, 0, 0, 0.1);
- border-radius: 3px;
-}
-
-.messages-list::-webkit-scrollbar-thumb,
-.message-content::-webkit-scrollbar-thumb {
- background: #333;
- border-radius: 3px;
-}
-
-.messages-list::-webkit-scrollbar-thumb:hover,
-.message-content::-webkit-scrollbar-thumb:hover {
- background: #555;
-}
diff --git a/css/pin.css b/css/pin.css
index a05e8f5..e252f94 100644
--- a/css/pin.css
+++ b/css/pin.css
@@ -7,11 +7,7 @@
}
.pin-minigame-game-container {
- background: linear-gradient(145deg, #0f0f23, #1a1a2e);
- border: 1px solid #0f3460;
- box-shadow:
- 0 0 20px rgba(0, 0, 0, 0.8) inset,
- 0 0 10px rgba(15, 52, 96, 0.2);
+ background: #55616e !important;
padding: 20px;
display: flex;
flex-direction: column;
@@ -38,13 +34,13 @@
}
.pin-minigame-display {
- font-family: 'Courier New', monospace;
+ font-family: 'Press Start 2P', monospace;
font-size: 48px;
font-weight: bold;
color: #00ff41;
background: #000;
border: 3px solid #00ff41;
- border-radius: 8px;
+ /* border-radius: 8px; */
padding: 15px 25px;
text-align: center;
letter-spacing: 8px;
@@ -99,9 +95,47 @@
width: 100%;
max-width: 300px;
padding: 20px;
- background: rgba(0, 0, 0, 0.3);
- border-radius: 15px;
- border: 1px solid #0f3460;
+
+ background: slategray;
+
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
}
/* Special positioning for zero button (centered in bottom row) */
@@ -126,10 +160,10 @@
background: linear-gradient(145deg, #2c3e50, #34495e);
color: #ecf0f1;
border: 2px solid #0f3460;
- border-radius: 8px;
+ /* border-radius: 8px; */
padding: 15px;
- font-family: 'Press Start 2P', monospace;
- font-size: 18px;
+ font-family: 'Press Start 2P', monospace !important;
+ font-size: 20px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
@@ -139,7 +173,7 @@
justify-content: center;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ inset 0 2px 0 rgba(255, 255, 255, 0.1);
}
.pin-minigame-key:hover {
@@ -148,7 +182,7 @@
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.4),
0 0 15px rgba(0, 255, 65, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.2);
+ inset 0 2px 0 rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
@@ -156,7 +190,7 @@
transform: translateY(0);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ inset 0 2px 0 rgba(255, 255, 255, 0.1);
}
.pin-minigame-key:disabled {
@@ -170,14 +204,14 @@
border-color: #0f3460;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.1);
+ inset 0 2px 0 rgba(255, 255, 255, 0.1);
}
/* Special key styles */
.pin-minigame-backspace {
background: linear-gradient(145deg, #e74c3c, #c0392b);
border-color: #c0392b;
- font-size: 16px;
+ font-size: 20px;
}
.pin-minigame-backspace:hover {
@@ -186,7 +220,7 @@
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.4),
0 0 15px rgba(255, 68, 68, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.2);
+ inset 0 2px 0 rgba(255, 255, 255, 0.2);
}
.pin-minigame-enter {
@@ -201,7 +235,7 @@
box-shadow:
0 6px 12px rgba(0, 0, 0, 0.4),
0 0 15px rgba(0, 255, 65, 0.3),
- inset 0 1px 0 rgba(255, 255, 255, 0.2);
+ inset 0 2px 0 rgba(255, 255, 255, 0.2);
}
/* Attempts Log */
@@ -209,9 +243,48 @@
width: 100%;
max-width: 350px;
background: rgba(0, 0, 0, 0.4);
- border: 1px solid #0f3460;
- border-radius: 10px;
padding: 15px;
+
+ background: slategray;
+
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
}
.pin-minigame-attempts-title {
@@ -235,21 +308,21 @@
align-items: center;
gap: 10px;
padding: 8px 12px;
- border-radius: 6px;
- font-family: 'Courier New', monospace;
- font-size: 14px;
+ /* border-radius: 6px; */
+ font-family: 'Press Start 2P', monospace;
+ font-size: 18px;
transition: all 0.3s ease;
}
.pin-minigame-attempt.correct {
- background: rgba(0, 255, 0, 0.1);
- border: 1px solid rgba(0, 255, 0, 0.3);
+ background: rgba(0, 255, 0, 0.3);
+ border: 2px solid rgba(0, 255, 0, 0.3);
color: #00ff00;
}
.pin-minigame-attempt.incorrect {
- background: rgba(255, 68, 68, 0.1);
- border: 1px solid rgba(255, 68, 68, 0.3);
+ background: rgba(255, 68, 68, 0.3);
+ border: 2px solid rgba(255, 68, 68, 0.3);
color: #ff4444;
}
@@ -284,8 +357,8 @@
gap: 10px;
padding: 10px;
background: rgba(0, 0, 0, 0.2);
- border-radius: 8px;
- border: 1px solid #0f3460;
+ /* border-radius: 8px; */
+ border: 2px solid #0f3460;
}
.pin-minigame-toggle-label {
@@ -333,7 +406,7 @@
width: 12px;
height: 12px;
border-radius: 50%;
- border: 1px solid rgba(255, 255, 255, 0.3);
+ border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
@@ -374,7 +447,7 @@
}
.pin-minigame-key {
- font-size: 16px;
+ font-size: 20px;
padding: 12px;
min-height: 45px;
}
@@ -408,7 +481,7 @@
}
.pin-minigame-key {
- font-size: 14px;
+ font-size: 18px;
padding: 10px;
min-height: 40px;
}
@@ -431,12 +504,12 @@
.pin-minigame-attempts-log::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
- border-radius: 3px;
+ /* border-radius: 3px; */
}
.pin-minigame-attempts-log::-webkit-scrollbar-thumb {
background: #0f3460;
- border-radius: 3px;
+ /* border-radius: 3px; */
}
.pin-minigame-attempts-log::-webkit-scrollbar-thumb:hover {
diff --git a/css/text-file-minigame.css b/css/text-file-minigame.css
index 9bfa450..f0c9d84 100644
--- a/css/text-file-minigame.css
+++ b/css/text-file-minigame.css
@@ -9,11 +9,47 @@
flex-direction: column;
height: 100%;
background: #ffffff;
- border-radius: 12px;
- border: 1px solid #d1d5db;
+ border: 4px solid #d1d5db;
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
overflow: hidden;
- font-family: 'VT323', monospace;
}
/* Mac-style Window Title Bar */
@@ -24,7 +60,6 @@
padding: 8px 12px;
background: linear-gradient(to bottom, #f6f6f6 0%, #e8e8e8 100%);
border-bottom: 1px solid #d1d5db;
- border-radius: 12px 12px 0 0;
min-height: 28px;
}
@@ -37,7 +72,6 @@
.window-control {
width: 12px;
height: 12px;
- border-radius: 50%;
border: none;
cursor: pointer;
transition: all 0.2s ease;
@@ -76,7 +110,7 @@
align-items: center;
padding: 16px 20px;
background: #f8f9fa;
- border-bottom: 1px solid #e9ecef;
+ border-bottom: 2px solid #e9ecef;
}
.file-icon {
@@ -94,22 +128,20 @@
font-weight: bold;
color: #212529;
margin-bottom: 4px;
- font-family: 'VT323', monospace;
}
.file-meta {
display: flex;
gap: 12px;
- font-size: 14px;
+ font-size: 18px;
color: #6c757d;
- font-family: 'VT323', monospace;
}
.file-type {
background: #e9ecef;
padding: 2px 8px;
- border-radius: 4px;
- border: 1px solid #dee2e6;
+ /* border-radius: 4px; */
+ border: 2px solid #dee2e6;
color: #495057;
}
@@ -132,15 +164,14 @@
align-items: center;
padding: 8px 16px;
background: #f8f9fa;
- border-bottom: 1px solid #e9ecef;
+ border-bottom: 2px solid #e9ecef;
min-height: 36px;
}
.content-label {
- font-size: 14px;
+ font-size: 18px;
color: #495057;
font-weight: 500;
- font-family: 'VT323', monospace;
}
.content-actions {
@@ -150,13 +181,12 @@
.action-btn {
background: #ffffff;
- border: 1px solid #d1d5db;
+ border: 2px solid #d1d5db;
color: #374151;
padding: 4px 12px;
- border-radius: 6px;
- font-size: 12px;
+ /* border-radius: 6px; */
+ font-size: 18px;
cursor: pointer;
- font-family: 'VT323', monospace;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
@@ -185,8 +215,7 @@
.file-text {
color: #000000;
- font-family: 'VT323', monospace;
- font-size: 16px;
+ font-size: 20px;
line-height: 1.5;
margin: 0;
white-space: pre-wrap;
@@ -195,6 +224,7 @@
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
+ min-height: 300px;
}
/* File Observations Section */
@@ -207,18 +237,16 @@
.file-observations h4 {
color: #856404;
- font-size: 14px;
+ font-size: 18px;
margin: 0 0 8px 0;
- font-family: 'VT323', monospace;
font-weight: bold;
}
.file-observations p {
color: #6c5700;
- font-size: 14px;
+ font-size: 18px;
line-height: 1.4;
margin: 0;
- font-family: 'VT323', monospace;
}
/* Text Selection Styling */
@@ -239,12 +267,12 @@
.file-content::-webkit-scrollbar-track {
background: #f1f5f9;
- border-radius: 6px;
+ /* border-radius: 6px; */
}
.file-content::-webkit-scrollbar-thumb {
background: #cbd5e1;
- border-radius: 6px;
+ /* border-radius: 6px; */
border: 2px solid #f1f5f9;
}
@@ -259,7 +287,7 @@
/* Responsive Design */
@media (max-width: 768px) {
.text-file-container {
- border-radius: 8px;
+ /* border-radius: 8px; */
}
.text-file-window-header {
@@ -274,7 +302,7 @@
}
.window-title {
- font-size: 12px;
+ font-size: 18px;
margin: 0 15px;
}
@@ -283,11 +311,11 @@
}
.file-name {
- font-size: 16px;
+ font-size: 20px;
}
.file-meta {
- font-size: 12px;
+ font-size: 18px;
gap: 8px;
}
@@ -297,7 +325,7 @@
}
.content-label {
- font-size: 12px;
+ font-size: 18px;
}
.action-btn {
@@ -310,7 +338,7 @@
}
.file-text {
- font-size: 14px;
+ font-size: 18px;
}
.file-observations {
@@ -318,11 +346,11 @@
}
.file-observations h4 {
- font-size: 12px;
+ font-size: 18px;
}
.file-observations p {
- font-size: 12px;
+ font-size: 18px;
}
}
diff --git a/css/utilities.css b/css/utilities.css
index 3fde6e5..79b9e7a 100644
--- a/css/utilities.css
+++ b/css/utilities.css
@@ -177,4 +177,79 @@
.shadow-error {
box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
-}
\ No newline at end of file
+}
+
+/* Pixel Art Corner Utilities */
+.pixel-corners {
+ clip-path: polygon(
+ 0px calc(100% - 10px),
+ 2px calc(100% - 10px),
+ 2px calc(100% - 6px),
+ 4px calc(100% - 6px),
+ 4px calc(100% - 4px),
+ 6px calc(100% - 4px),
+ 6px calc(100% - 2px),
+ 10px calc(100% - 2px),
+ 10px 100%,
+ calc(100% - 10px) 100%,
+ calc(100% - 10px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 2px),
+ calc(100% - 6px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 4px),
+ calc(100% - 4px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 6px),
+ calc(100% - 2px) calc(100% - 10px),
+ 100% calc(100% - 10px),
+ 100% 10px,
+ calc(100% - 2px) 10px,
+ calc(100% - 2px) 6px,
+ calc(100% - 4px) 6px,
+ calc(100% - 4px) 4px,
+ calc(100% - 6px) 4px,
+ calc(100% - 6px) 2px,
+ calc(100% - 10px) 2px,
+ calc(100% - 10px) 0px,
+ 10px 0px,
+ 10px 2px,
+ 6px 2px,
+ 6px 4px,
+ 4px 4px,
+ 4px 6px,
+ 2px 6px,
+ 2px 10px,
+ 0px 10px
+ );
+}
+
+/* For rendering icons that are 16px by 16px */
+.icon {
+ width: 32px;
+ height: 32px;
+ image-rendering: pixelated;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: crisp-edges;
+ vertical-align: middle;
+ /* margin-right: 4px; */
+}
+
+/* For rendering icons that are 8px by 8px */
+.icon-small {
+ width: 16px;
+ height: 16px;
+ image-rendering: pixelated;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: crisp-edges;
+ vertical-align: middle;
+ /* margin-right: 4px; */
+}
+
+/* For rendering icons that are 32px by 32px */
+.icon-large {
+ width: 64px;
+ height: 64px;
+ image-rendering: pixelated;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: crisp-edges;
+ vertical-align: middle;
+ /* margin-right: 4px; */
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 35bf7c5..b837468 100644
--- a/index.html
+++ b/index.html
@@ -5,18 +5,19 @@
Break Escape Game
-
+
+