cybersecurity/BreakEscape
1
0
Fork 0
mirror of https://github.com/cliffe/BreakEscape.git synced 2026-02-23 04:08:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance Password Minigame: Implement on-screen keyboard toggle functionality and update password visibility button to use icons. Add new CSS styles for keyboard and control buttons to improve user interaction. Adjust display logic for the on-screen keyboard based on user preferences.

Browse Source
This commit is contained in:
Z. Cliffe Schreuders
2025-10-21 11:12:23 +01:00
parent 441aeae8d3
commit f787bd7683
6 changed files with 1085 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
css/password-minigame.css
View File

@@ -171,12 +171,61 @@
padding: 5px;
/* border-radius: 3px; */
transition: background-color 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-password-btn:hover {
background: rgba(0, 255, 0, 0.1);
}
.icon-small {
width: 20px;
height: 20px;
object-fit: contain;
}
.icon-keyboard {
width: 40px;
height: 40px;
object-fit: contain;
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
.password-controls {
display: flex;
justify-content: center;
gap: 15px;
align-items: center;
margin-top: 10px;
position: relative;
z-index: 10;
}
.keyboard-toggle-btn {
background: #444;
border: 2px solid #666;
padding: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.keyboard-toggle-btn:hover {
background: #555;
border-color: #00ff00;
}
.keyboard-toggle-btn:active {
background: #00ff00;
transform: scale(0.95);
}
.password-hint-container {
display: flex;
flex-direction: column;
@@ -288,7 +337,7 @@
}
.onscreen-keyboard {
display: flex;
display: none;
flex-direction: column;
gap: 5px;
background: #2a2a2a;