mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-21 11:18:08 +00:00
7ecda9d39d
Implement comprehensive multi-protocol RFID system with deterministic
card_id-based generation, MIFARE key attacks, and protocol-specific UI.
## New Protocol System (4 protocols):
- EM4100 (low security) - Instant clone, already implemented
- MIFARE_Classic_Weak_Defaults (low) - Dictionary attack succeeds (95%)
- MIFARE_Classic_Custom_Keys (medium) - Requires Darkside attack (30s)
- MIFARE_DESFire (high) - UID only, forces physical theft
## Key Features:
### 1. Protocol Foundation
- Created rfid-protocols.js with protocol definitions
- Added protocol detection, capabilities, security levels
- Defined attack durations and common MIFARE keys
### 2. Deterministic Card Generation
- Updated rfid-data.js with card_id-based generation
- Same card_id always produces same hex/UID (deterministic)
- Simplified scenario format - no manual hex/UID needed
- getCardDisplayData() supports all protocols
### 3. MIFARE Attack System
- Created rfid-attacks.js with MIFAREAttackManager
- Dictionary Attack: Instant, 95% success on weak defaults
- Darkside Attack: 30 sec (10s on weak), cracks all keys
- Nested Attack: 10 sec, uses known key to crack rest
- Protocol-aware attack behavior
### 4. UI Enhancements
- Updated rfid-ui.js with protocol-specific displays
- showProtocolInfo() with color-coded security badges
- showAttackProgress() and updateAttackProgress()
- Protocol headers with icons and frequency info
- Updated showCardDataScreen() and showEmulationScreen()
### 5. Unlock System Integration
- Updated unlock-system.js for card_id matching
- Support multiple valid cards per door (array)
- Added acceptsUIDOnly flag for DESFire UID emulation
- Backward compatible with legacy key_id format
### 6. Minigame Integration
- Updated rfid-minigame.js with attack methods
- startKeyAttack() triggers dictionary/darkside/nested
- handleCardTap() and handleEmulate() use card_id arrays
- UID-only emulation validation for DESFire
- Attack manager cleanup on minigame exit
### 7. Styling
- Added CSS for protocol headers and security badges
- Color-coded security levels (red=low, teal=medium, green=high)
- Attack progress styling with smooth transitions
- Dimmed menu items for unlikely attack options
## Scenario Format Changes:
Before (manual technical data):
```json
{
"type": "keycard",
"rfid_hex": "01AB34CD56",
"rfid_facility": 1,
"key_id": "employee_badge"
}
```
After (simplified with card_id):
```json
{
"type": "keycard",
"card_id": "employee_badge",
"rfid_protocol": "MIFARE_Classic_Weak_Defaults",
"name": "Employee Badge"
}
```
Technical data (hex/UID) generated automatically from card_id.
## Door Configuration:
Multiple valid cards per door:
```json
{
"lockType": "rfid",
"requires": ["employee_badge", "contractor_badge", "master_card"],
"acceptsUIDOnly": false
}
```
## Files Modified:
- js/minigames/rfid/rfid-protocols.js (NEW)
- js/minigames/rfid/rfid-attacks.js (NEW)
- js/minigames/rfid/rfid-data.js
- js/minigames/rfid/rfid-ui.js
- js/minigames/rfid/rfid-minigame.js
- js/systems/unlock-system.js
- css/rfid-minigame.css
- planning_notes/rfid_keycard/protocols_and_interactions/03_UPDATES_SUMMARY.md (NEW)
## Next Steps:
- Phase 5: Ink integration (syncCardProtocolsToInk)
- Test with scenarios for each protocol
- Add Ink variable documentation
Estimated implementation time: ~12 hours (Phases 1-4 complete)
458 lines
7.6 KiB
CSS
458 lines
7.6 KiB
CSS
/**
|
|
* RFID Minigame CSS
|
|
* Flipper Zero-inspired RFID reader/cloner interface
|
|
*/
|
|
|
|
/* Container */
|
|
.rfid-minigame-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: rgba(0, 0, 0, 0.9);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.rfid-minigame-game-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Flipper Zero Device */
|
|
.flipper-zero-frame {
|
|
width: 400px;
|
|
height: 550px;
|
|
background: #FF8200;
|
|
border-radius: 20px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
/* Header */
|
|
.flipper-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.flipper-logo {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: white;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.flipper-battery {
|
|
font-size: 12px;
|
|
color: white;
|
|
}
|
|
|
|
/* Screen */
|
|
.flipper-screen {
|
|
flex: 1;
|
|
background: #333;
|
|
border-radius: 10px;
|
|
padding: 15px;
|
|
color: white;
|
|
font-size: 14px;
|
|
overflow-y: auto;
|
|
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.flipper-breadcrumb {
|
|
font-size: 12px;
|
|
color: #FFA500;
|
|
margin-bottom: 15px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Menu */
|
|
.flipper-menu {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.flipper-menu-item {
|
|
padding: 8px 10px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.flipper-menu-item:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* Info Text */
|
|
.flipper-info {
|
|
color: white;
|
|
margin: 10px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.flipper-info-dim {
|
|
color: #888;
|
|
margin: 10px 0;
|
|
text-align: center;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Card List */
|
|
.flipper-card-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-top: 15px;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Card Name */
|
|
.flipper-card-name {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: #FFA500;
|
|
margin: 10px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Card Data */
|
|
.flipper-card-data {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin: 15px 0;
|
|
font-size: 13px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.flipper-card-data div {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
/* Buttons */
|
|
.flipper-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: auto;
|
|
padding-top: 15px;
|
|
}
|
|
|
|
.flipper-button {
|
|
flex: 1;
|
|
padding: 12px;
|
|
background: #FF8200;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.flipper-button:hover {
|
|
background: #FFA500;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.flipper-button-secondary {
|
|
background: #555;
|
|
}
|
|
|
|
.flipper-button-secondary:hover {
|
|
background: #777;
|
|
}
|
|
|
|
.flipper-button-back {
|
|
margin-top: auto;
|
|
padding: 10px;
|
|
color: #FFA500;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.flipper-button-back:hover {
|
|
color: white;
|
|
}
|
|
|
|
/* NFC Waves */
|
|
.rfid-nfc-waves-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.rfid-nfc-icon {
|
|
font-size: 48px;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.rfid-nfc-waves {
|
|
position: relative;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.rfid-nfc-wave {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #FF8200;
|
|
border-radius: 50%;
|
|
animation: wave 1.5s infinite;
|
|
}
|
|
|
|
@keyframes wave {
|
|
0% {
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
width: 100px;
|
|
height: 100px;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* Progress Bar */
|
|
.rfid-progress-container {
|
|
width: 100%;
|
|
height: 20px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.rfid-progress-bar {
|
|
height: 100%;
|
|
background: #FF8200;
|
|
transition: width 0.1s linear, background-color 0.3s;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
/* Emulation */
|
|
.rfid-emulate-icon {
|
|
font-size: 64px;
|
|
text-align: center;
|
|
margin: 20px 0;
|
|
animation: pulse 1.5s infinite;
|
|
}
|
|
|
|
.flipper-emulating {
|
|
color: #00FF00;
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
font-weight: bold;
|
|
animation: blink 1s infinite;
|
|
}
|
|
|
|
@keyframes blink {
|
|
0%, 50%, 100% {
|
|
opacity: 1;
|
|
}
|
|
25%, 75% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* Success/Error Messages */
|
|
.flipper-success,
|
|
.flipper-error {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.flipper-success-icon,
|
|
.flipper-error-icon {
|
|
font-size: 72px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.flipper-success-icon {
|
|
color: #00FF00;
|
|
}
|
|
|
|
.flipper-error-icon {
|
|
color: #FF0000;
|
|
}
|
|
|
|
.flipper-success-message,
|
|
.flipper-error-message {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.flipper-success-message {
|
|
color: #00FF00;
|
|
}
|
|
|
|
.flipper-error-message {
|
|
color: #FF0000;
|
|
}
|
|
|
|
/* Scrollbar */
|
|
.flipper-screen::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.flipper-screen::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.flipper-screen::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.flipper-screen::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.flipper-card-list::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.flipper-card-list::-webkit-scrollbar-track {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.flipper-card-list::-webkit-scrollbar-thumb {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Protocol-Specific Displays */
|
|
.flipper-protocol-header {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.protocol-header-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.protocol-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.protocol-name {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.protocol-meta {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
color: #AAA;
|
|
}
|
|
|
|
.security-badge {
|
|
padding: 3px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.security-badge.security-low {
|
|
background: #FF6B6B;
|
|
color: white;
|
|
}
|
|
|
|
.security-badge.security-medium {
|
|
background: #4ECDC4;
|
|
color: white;
|
|
}
|
|
|
|
.security-badge.security-high {
|
|
background: #95E1D3;
|
|
color: #333;
|
|
}
|
|
|
|
.flipper-menu-item-dim {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.flipper-menu-item-dim:hover {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Attack Progress */
|
|
#attack-status {
|
|
font-size: 12px;
|
|
margin-top: 10px;
|
|
color: #FFA500;
|
|
}
|
|
|
|
#attack-percentage {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
#attack-progress-bar {
|
|
transition: width 0.5s ease, background-color 0.3s;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 500px) {
|
|
.flipper-zero-frame {
|
|
width: 90%;
|
|
height: 80vh;
|
|
min-height: 500px;
|
|
}
|
|
}
|