cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-20 13:50:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Minigame Framework: Replace references to 'minigames.css' with 'minigames-framework.css' across multiple HTML files for improved organization. Add new Google Font 'Pixelify Sans' to enhance typography in the game. Introduce new icon assets for better visual representation in various minigames, including search, disk, backpack, and clipboard icons. Update CSS styles for various minigames to enhance visual consistency and user experience.

Browse Source
This commit is contained in:
Z. Cliffe Schreuders
2025-10-21 10:58:56 +01:00
parent 9c718e6239
commit 441aeae8d3
48 changed files with 999 additions and 639 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
assets/mini-games/backpack.png → assets/icons/backpack.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 453 B

After

Width:  |  Height:  |  Size: 453 B

BIN
assets/icons/clipboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 146 B

BIN
assets/icons/copy-sm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 B

BIN
assets/icons/copy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 B

2
assets/icons/disk.png Normal file
View File

@@ -0,0 +1,2 @@
create me

2
assets/icons/document.png Normal file
View File

@@ -0,0 +1,2 @@
create me

2
assets/icons/notebook.png Normal file
View File

@@ -0,0 +1,2 @@
create me

BIN
assets/icons/notes-sm.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 200 B

BIN
assets/icons/notes.aseprite Normal file
View File

Binary file not shown.

BIN
assets/icons/notes.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 B

BIN
assets/icons/play.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 B

2
assets/icons/search.png Normal file
View File

@@ -0,0 +1,2 @@
create me

2
assets/icons/signal.png Normal file
View File

@@ -0,0 +1,2 @@
create me

80
css/biometrics-minigame.css
View File

@@ -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;

95
css/bluetooth-scanner.css
View File

@@ -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;
}
}

84
css/container-minigame.css
View File

@@ -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;
}

18
css/dusting.css
View File

@@ -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;
}

69
css/lockpick-set-minigame.css
View File

@@ -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 {

4
css/lockpicking.css
View File

@@ -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;

134
css/main.css
View File

@@ -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;

46
css/minigames-framework.css
View File

@@ -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;
}

193
css/minigames.css
View File

@@ -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;
}

18
css/modals.css
View File

@@ -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;

27
css/notes.css
View File

@@ -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 {

4
css/notifications.css
View File

@@ -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;
}

62
css/panels.css
View File

@@ -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,

94
css/password-minigame.css
View File

@@ -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;
}
}

202
css/phone.css
View File

@@ -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;
}

145
css/pin.css
View File

@@ -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 {

96
css/text-file-minigame.css
View File

@@ -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;
}
}

77
css/utilities.css
View File

@@ -177,4 +177,79 @@
.shadow-error {
box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}
}
/* 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; */
}

7
index.html
View File

@@ -5,18 +5,19 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<title>Break Escape Game</title>
<!-- Google Fonts - Press Start 2P, VT323 -->
<!-- Google Fonts - Press Start 2P, VT323, Pixelify Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&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=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Web Font Loader script to ensure fonts load properly -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Press Start 2P', 'VT323']
families: ['Press Start 2P', 'VT323', 'Pixelify Sans']
},
active: function() {
console.log('Fonts loaded successfully');
@@ -41,7 +42,7 @@
<link rel="stylesheet" href="css/container-minigame.css">
<link rel="stylesheet" href="css/phone.css">
<link rel="stylesheet" href="css/pin.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/password-minigame.css">
<link rel="stylesheet" href="css/text-file-minigame.css">

2
js/minigames/biometrics/biometrics-minigame.js
View File

@@ -81,7 +81,7 @@ export class BiometricsMinigame extends MinigameScene {
searchRoomContainer.className = 'biometrics-search-room-container';
searchRoomContainer.innerHTML = `
<button id="search-room-btn" class="biometrics-action-btn">
<span class="btn-icon">🔍</span>
<span class="btn-icon"><img src="assets/icons/search.png" alt="Search" class="icon"></span>
<span class="btn-text">Search Room for Fingerprints</span>
</button>
`;

6
js/minigames/bluetooth/bluetooth-scanner-minigame.js
View File

@@ -490,15 +490,15 @@ export class BluetoothScannerMinigame extends MinigameScene {
deviceContent += `</div></div>`;
} else if (device.nearby) {
// Fallback if signal strength not available
deviceContent += `<span class="bluetooth-device-icon">📶</span>`;
deviceContent += `<span class="bluetooth-device-icon"><img src="assets/icons/signal.png" alt="Signal" class="icon"></span>`;
}
if (device.saved) {
deviceContent += `<span class="bluetooth-device-icon">💾</span>`;
deviceContent += `<span class="bluetooth-device-icon"><img src="assets/icons/disk.png" alt="Disk" class="icon"></span>`;
}
if (device.inInventory) {
deviceContent += `<span class="bluetooth-device-icon">🎒</span>`;
deviceContent += `<span class="bluetooth-device-icon"><img src="assets/icons/backpack.png" alt="Backpack" class="icon"></span>`;
}
deviceContent += `</div></div>`;

5
js/minigames/framework/base-minigame.js
View File

@@ -53,6 +53,11 @@ export class MinigameScene {
} else {
console.log('Cancel button not found');
}
// hide the header if the params.headerElement is empty
if (!this.params.headerElement) {
this.headerElement.style.display = 'none';
}
}
start() {

2
js/minigames/lockpick/lockpick-set-minigame.js
View File

@@ -51,7 +51,7 @@ export class LockpickSetMinigame extends MinigameScene {
searchRoomContainer.className = 'lockpick-search-room-container';
searchRoomContainer.innerHTML = `
<button id="search-locks-btn" class="lockpick-action-btn">
<span class="btn-icon">🔍</span>
<span class="btn-icon"><img src="assets/icons/search.png" alt="Search" class="icon"></span>
<span class="btn-text">Search for Pickable Locks</span>
</button>
`;

67
js/minigames/notes/notes-minigame.js
View File

@@ -52,29 +52,30 @@ export class NotesMinigame extends MinigameScene {
// Refresh collected notes to ensure we have the latest data
this.collectedNotes = this.getCollectedNotes();
console.log("Collected notes:", this.collectedNotes);
// Set container dimensions to take up most of the screen
this.container.className += ' notes-minigame-container';
// Clear header content
this.headerElement.innerHTML = '';
// Configure game container with notepad background - scaled to fill most of the screen
// Clear header content
this.headerElement.innerHTML = '';
// Configure game container - it's just a sizing wrapper
this.gameContainer.className += ' notes-minigame-game-container';
// Create notepad container with background
const notepadContainer = document.createElement('div');
notepadContainer.className = 'notes-minigame-notepad';
// Create content area
const contentArea = document.createElement('div');
contentArea.className = 'notes-minigame-content-area';
// Create text box container to look like it's stuck in a binder
const textBox = document.createElement('div');
textBox.className = 'notes-minigame-text-box';
// Add celotape effect
const celotape = document.createElement('div');
celotape.className = 'notes-minigame-celotape';
textBox.appendChild(celotape);
// Add binder holes effect
const binderHoles = document.createElement('div');
binderHoles.className = 'notes-minigame-binder-holes';
@@ -114,32 +115,32 @@ export class NotesMinigame extends MinigameScene {
textBox.appendChild(noteText);
contentArea.appendChild(textBox);
// Add observation text if available - handwritten directly on the page
if (this.observationText) {
const observationContainer = document.createElement('div');
observationContainer.className = 'notes-minigame-observation-container';
const observationDiv = document.createElement('div');
observationDiv.className = 'notes-minigame-observation';
observationDiv.innerHTML = this.observationText;
observationDiv.style.cursor = 'pointer'; // Make it clear it's clickable
observationDiv.title = 'Click to edit observations';
observationDiv.addEventListener('click', () => this.editObservations(observationDiv));
// Add edit button
const editBtn = document.createElement('button');
editBtn.className = 'notes-minigame-edit-btn';
editBtn.title = 'Edit observations';
// Add pencil icon
const pencilIcon = document.createElement('img');
pencilIcon.src = 'assets/icons/pencil.png';
pencilIcon.alt = 'Edit';
editBtn.appendChild(pencilIcon);
editBtn.addEventListener('click', () => this.editObservations(observationDiv));
observationContainer.appendChild(observationDiv);
observationContainer.appendChild(editBtn);
contentArea.appendChild(observationContainer);
@@ -147,40 +148,34 @@ export class NotesMinigame extends MinigameScene {
// Add empty observation area with edit button
const observationContainer = document.createElement('div');
observationContainer.className = 'notes-minigame-observation-container';
const observationDiv = document.createElement('div');
observationDiv.className = 'notes-minigame-observation empty';
observationDiv.innerHTML = '<em>Click edit to add your observations...</em>';
observationDiv.style.cursor = 'pointer'; // Make it clear it's clickable
observationDiv.title = 'Click to add observations';
observationDiv.addEventListener('click', () => this.editObservations(observationDiv));
// Add edit button
const editBtn = document.createElement('button');
editBtn.className = 'notes-minigame-edit-btn';
editBtn.title = 'Add observations';
// Add pencil icon
const pencilIcon = document.createElement('img');
pencilIcon.src = 'assets/icons/pencil.png';
pencilIcon.alt = 'Edit';
editBtn.appendChild(pencilIcon);
editBtn.addEventListener('click', () => this.editObservations(observationDiv));
observationContainer.appendChild(observationDiv);
observationContainer.appendChild(editBtn);
contentArea.appendChild(observationContainer);
}
// Create notepad container
const notepadContainer = document.createElement('div');
notepadContainer.className = 'notes-minigame-notepad';
// Add content area to notepad container
// Add content area to notepad container, then notepad container to game container
notepadContainer.appendChild(contentArea);
// Add notepad container to game container
this.gameContainer.appendChild(notepadContainer);
// Create navigation buttons container (only if navigation is not hidden)
@@ -199,20 +194,20 @@ export class NotesMinigame extends MinigameScene {
const prevBtn = document.createElement('button');
prevBtn.className = 'minigame-button notes-minigame-nav-button';
prevBtn.textContent = '← Previous';
prevBtn.textContent = '< Previous';
prevBtn.addEventListener('click', () => this.navigateToNote(-1));
navContainer.appendChild(prevBtn);
const nextBtn = document.createElement('button');
nextBtn.className = 'minigame-button notes-minigame-nav-button';
nextBtn.textContent = 'Next →';
nextBtn.textContent = 'Next >';
nextBtn.addEventListener('click', () => this.navigateToNote(1));
navContainer.appendChild(nextBtn);
// Add note counter
const noteCounter = document.createElement('div');
noteCounter.className = 'notes-minigame-counter';
noteCounter.textContent = `${this.currentNoteIndex + 1} / ${this.collectedNotes.length}`;
noteCounter.textContent = `${this.currentNoteIndex + 1}/${this.collectedNotes.length}`;
navContainer.appendChild(noteCounter);
this.container.appendChild(navContainer);
@@ -439,13 +434,13 @@ export class NotesMinigame extends MinigameScene {
const prevBtn = document.createElement('button');
prevBtn.className = 'minigame-button notes-minigame-nav-button';
prevBtn.textContent = '← Previous';
prevBtn.textContent = '< Previous';
prevBtn.addEventListener('click', () => this.navigateToNote(-1));
navContainer.appendChild(prevBtn);
const nextBtn = document.createElement('button');
nextBtn.className = 'minigame-button notes-minigame-nav-button';
nextBtn.textContent = 'Next →';
nextBtn.textContent = 'Next >';
nextBtn.addEventListener('click', () => this.navigateToNote(1));
navContainer.appendChild(nextBtn);

62
js/minigames/phone/phone-messages-minigame.js
View File

@@ -328,7 +328,7 @@ export class PhoneMessagesMinigame extends MinigameScene {
const notebookBtn = document.createElement('button');
notebookBtn.className = 'minigame-button';
notebookBtn.id = 'minigame-notebook';
notebookBtn.innerHTML = '📝 Add to Notebook';
notebookBtn.innerHTML = '<img src="assets/icons/notebook.png" alt="Notebook" class="icon"> Add to Notebook';
this.controlsElement.appendChild(notebookBtn);
// Change cancel button text to "Close"
@@ -532,6 +532,62 @@ export class PhoneMessagesMinigame extends MinigameScene {
this.addEventListener(document, 'keydown', (event) => {
this.handleKeyPress(event);
});
// Set up drag-to-scroll for scrollable elements
this.setupDragToScroll(this.messagesList);
this.setupDragToScroll(this.messageDetail);
}
setupDragToScroll(scrollableElement) {
if (!scrollableElement) return;
let isPressed = false;
let startY = 0;
let scrollTop = 0;
const onMouseDown = (e) => {
// Don't start drag if clicking on interactive elements
if (e.target.closest('button, a, input, select, [role="button"]')) {
return;
}
isPressed = true;
startY = e.pageY - scrollableElement.offsetTop;
scrollTop = scrollableElement.scrollTop;
scrollableElement.style.cursor = 'grabbing';
e.preventDefault();
};
const onMouseMove = (e) => {
if (!isPressed) return;
const y = e.pageY - scrollableElement.offsetTop;
const deltaY = startY - y;
scrollableElement.scrollTop = scrollTop + deltaY;
};
const onMouseUp = () => {
isPressed = false;
scrollableElement.style.cursor = 'grab';
};
const onMouseLeave = () => {
isPressed = false;
scrollableElement.style.cursor = 'grab';
};
// Add hover effect to show the grab cursor
scrollableElement.addEventListener('mouseenter', () => {
if (!isPressed) {
scrollableElement.style.cursor = 'grab';
}
});
scrollableElement.addEventListener('mouseleave', onMouseLeave);
this.addEventListener(scrollableElement, 'mousedown', onMouseDown);
this.addEventListener(document, 'mousemove', onMouseMove);
this.addEventListener(document, 'mouseup', onMouseUp);
}
handleKeyPress(event) {
@@ -576,7 +632,7 @@ export class PhoneMessagesMinigame extends MinigameScene {
this.messageContent.innerHTML = `
<div class="voice-message-display">
<div class="audio-controls">
<div class="play-button">▶</div>
<div class="play-button"><img src="assets/icons/play.png" alt="Audio" class="icon"></div>
<img src="assets/mini-games/audio.png" alt="Audio" class="audio-sprite">
</div>
<div class="transcript"><strong>Transcript:</strong><br>${message.voice || message.text || 'No transcript available'}
@@ -781,7 +837,7 @@ export class PhoneMessagesMinigame extends MinigameScene {
// Check if speech synthesis is available
if (!this.speechAvailable || !this.phoneData.speechSynthesis) {
this.showFailure("Voice playback not available on this system. Text is displayed above.", false, 3000);
this.showFailure("Voice playback not available on this system. Transcript is displayed.", false, 3000);
return;
}

11
js/minigames/text-file/text-file-minigame.js
View File

@@ -23,7 +23,7 @@ export class TextFileMinigame extends MinigameScene {
// Customize the header
this.headerElement.innerHTML = `
<h3>📄 ${this.textFileData.fileName}</h3>
<h3><img src="assets/icons/text-file.png" alt="Document" class="icon"> ${this.textFileData.fileName}</h3>
<p>Viewing text file contents</p>
`;
@@ -32,7 +32,7 @@ export class TextFileMinigame extends MinigameScene {
const notebookBtn = document.createElement('button');
notebookBtn.className = 'minigame-button';
notebookBtn.id = 'minigame-notebook';
notebookBtn.innerHTML = '📝 Add to Notebook';
notebookBtn.innerHTML = '<img src="assets/icons/notes-sm.png" alt="Notebook" class="icon-small"> Add to Notebook';
this.controlsElement.appendChild(notebookBtn);
// Change cancel button text to "Close"
@@ -64,7 +64,7 @@ export class TextFileMinigame extends MinigameScene {
</div>
<div class="file-header">
<div class="file-icon">📄</div>
<div class="file-icon"><img src="assets/objects/text_file.png" alt="Document" class="icon-large"></div>
<div class="file-info">
<div class="file-name">${this.textFileData.fileName}</div>
<div class="file-meta">
@@ -76,9 +76,8 @@ export class TextFileMinigame extends MinigameScene {
<div class="file-content-area">
<div class="content-header">
<span class="content-label">File Contents:</span>
<div class="content-actions">
<button class="action-btn" id="copy-btn" title="Copy to clipboard">📋 Copy</button>
<button class="action-btn" id="copy-btn" title="Copy to clipboard"><img src="assets/icons/copy-sm.png" alt="Clipboard" class="icon-small"> Copy</button>
<button class="action-btn" id="select-all-btn" title="Select all text">Select All</button>
</div>
</div>
@@ -89,7 +88,7 @@ export class TextFileMinigame extends MinigameScene {
${this.textFileData.observations ? `
<div class="file-observations">
<h4>📋 Observations:</h4>
<h4><img src="assets/icons/copy-sm.png" alt="Clipboard" class="icon-small"> Observations:</h4>
<p>${this.textFileData.observations}</p>
</div>
` : ''}

2
test-auto-desktop.html
View File

@@ -7,7 +7,7 @@
<!-- Include the game's CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/container-minigame.css">
<link rel="stylesheet" href="css/notifications.css">

2
test-container-desktop.html
View File

@@ -7,7 +7,7 @@
<!-- Include the game's CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/container-minigame.css">
<link rel="stylesheet" href="css/notifications.css">

2
test-container-interactive-items.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Interactive Items Test</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/text-file-minigame.css">
<style>
body {

2
test-container-simple.html
View File

@@ -7,7 +7,7 @@
<!-- Include the game's CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/container-minigame.css">
<link rel="stylesheet" href="css/notifications.css">

2
test-password-minigame.html
View File

@@ -7,7 +7,7 @@
<!-- Include the game's CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/password-minigame.css">
<link rel="stylesheet" href="css/notifications.css">

2
test-phone-minigame.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phone Messages Minigame Test</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/phone.css">
<style>
body {

2
test-pin-minigame.html
View File

@@ -10,7 +10,7 @@
<link href="https://fonts.googleapis.com/css2?family=Courier+New&display=swap" rel="stylesheet">
<!-- Load CSS -->
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/pin.css">
<style>

2
test-text-file-minigame.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text File Minigame Test</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/text-file-minigame.css">
<style>
body {

2
verify-css.html
View File

@@ -7,7 +7,7 @@
<!-- Include the game's CSS -->
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/minigames.css">
<link rel="stylesheet" href="css/minigames-framework.css">
<link rel="stylesheet" href="css/password-minigame.css">
<link rel="stylesheet" href="css/notifications.css">