Spaces:
Running
Running
| <html lang="el"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Secure Keylogger Dashboard (Educational)</title> | |
| <style> | |
| :root { | |
| --primary: #00f2ff; | |
| --secondary: #7000ff; | |
| --bg: #0f0f13; | |
| --panel: #1a1a24; | |
| --text: #e0e0e0; | |
| --danger: #ff4757; | |
| --success: #2ed573; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| background-color: var(--bg); | |
| color: var(--text); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| /* Header & Footer */ | |
| header { | |
| width: 100%; | |
| max-width: 1000px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 30px; | |
| padding-bottom: 20px; | |
| border-bottom: 1px solid #333; | |
| } | |
| h1 { | |
| font-size: 1.5rem; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .warning-banner { | |
| background-color: rgba(255, 71, 87, 0.1); | |
| border: 1px solid var(--danger); | |
| color: var(--danger); | |
| padding: 10px; | |
| border-radius: 5px; | |
| font-size: 0.85rem; | |
| text-align: center; | |
| max-width: 800px; | |
| margin-bottom: 30px; | |
| } | |
| .footer-link { | |
| margin-top: auto; | |
| font-size: 0.8rem; | |
| color: #666; | |
| text-decoration: none; | |
| } | |
| .footer-link:hover { | |
| color: var(--primary); | |
| } | |
| /* Main Layout */ | |
| .container { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 20px; | |
| width: 100%; | |
| max-width: 1000px; | |
| } | |
| @media (max-width: 768px) { | |
| .container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Panels */ | |
| .panel { | |
| background-color: var(--panel); | |
| border-radius: 12px; | |
| padding: 25px; | |
| box-shadow: 0 8px 20px rgba(0,0,0,0.5); | |
| border: 1px solid #333; | |
| } | |
| h2 { | |
| margin-bottom: 20px; | |
| font-size: 1.2rem; | |
| border-bottom: 2px solid var(--secondary); | |
| padding-bottom: 10px; | |
| display: inline-block; | |
| } | |
| /* Input Section */ | |
| .input-group { | |
| margin-bottom: 20px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| color: #aaa; | |
| font-size: 0.9rem; | |
| } | |
| input[type="password"], input[type="text"] { | |
| width: 100%; | |
| padding: 12px; | |
| background-color: #0a0a0e; | |
| border: 1px solid #444; | |
| border-radius: 6px; | |
| color: var(--primary); | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 1rem; | |
| transition: 0.3s; | |
| } | |
| input:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| box-shadow: 0 0 10px rgba(0, 242, 255, 0.2); | |
| } | |
| button { | |
| width: 100%; | |
| padding: 12px; | |
| background: linear-gradient(45deg, var(--secondary), var(--primary)); | |
| border: none; | |
| border-radius: 6px; | |
| color: white; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| text-transform: uppercase; | |
| } | |
| button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(112, 0, 255, 0.4); | |
| } | |
| button:disabled { | |
| background: #555; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| padding: 10px; | |
| background: rgba(0,0,0,0.2); | |
| border-radius: 6px; | |
| } | |
| .dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: var(--danger); | |
| } | |
| .dot.active { | |
| background-color: var(--success); | |
| box-shadow: 0 0 10px var(--success); | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| /* Terminal / Log Section */ | |
| .terminal { | |
| background-color: #000; | |
| border-radius: 8px; | |
| height: 400px; | |
| overflow-y: auto; | |
| padding: 15px; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 0.9rem; | |
| border: 1px solid #333; | |
| position: relative; | |
| } | |
| .log-entry { | |
| margin-bottom: 5px; | |
| border-left: 2px solid var(--primary); | |
| padding-left: 10px; | |
| animation: fadeIn 0.3s ease-in; | |
| } | |
| .log-entry.special { | |
| color: #ffae00; | |
| border-left-color: #ffae00; | |
| } | |
| .log-entry.ctrl { | |
| color: #ff6b6b; | |
| border-left-color: #ff6b6b; | |
| } | |
| .timestamp { | |
| color: #666; | |
| margin-right: 10px; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateX(-10px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| /* Stats */ | |
| .stats { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 20px; | |
| color: #888; | |
| font-size: 0.9rem; | |
| } | |
| .btn-danger { | |
| background: linear-gradient(45deg, #ff4757, #ff6b81); | |
| margin-top: 10px; | |
| } | |
| .btn-danger:hover { | |
| box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>KeyMonitor <span style="font-size:0.6em; color:#aaa; vertical-align: middle;">// Educational Demo</span></h1> | |
| <div style="font-size: 0.8rem; color: #888;">v1.0.2 Local</div> | |
| </header> | |
| <div class="warning-banner"> | |
| ⚠️ <strong>Σημαντική Προειδοποίηση:</strong> Αυτή η εφαρμογή είναι <strong>για εκπαιδευτικούς σκοπούς μόνο</strong>. Η χρήση keyloggers σε συστήματα που δεν σας ανήκουν είναι ποινικό αδίκημα. Αυτό το script τρέχει μόνο στον browser και δεν εγγράφει σε αρχεία στο σύστημα σας ούτε στέλνει δεδομένα σε τοπικό δίκτυο. | |
| </div> | |
| <div class="container"> | |
| <!-- Sidebar Controls --> | |
| <aside class="panel"> | |
| <h2>Στατιστικά & Ελέγχος</h2> | |
| <div class="status-indicator"> | |
| <div id="connectionDot" class="dot active"></div> | |
| <span id="connectionText">Σύστημα Ενεργό (Localhost)</span> | |
| </div> | |
| <div class="input-group"> | |
| <label for="accessCode">Κωδικός Πρόσβασης (Set Password)</label> | |
| <input type="password" id="accessCode" placeholder="Αλλάξτε τον κωδικό..." value="admin123"> | |
| </div> | |
| <div class="input-group"> | |
| <label>Συνολικοί Χαρακτήρες</label> | |
| <div id="charCount" style="font-size: 2rem; color: var(--primary); font-weight: bold;">0</div> | |
| </div> | |
| <div class="input-group"> | |
| <label>Τελευταία Δραστηριότητα</label> | |
| <div id="lastAction" style="color: #888;">-</div> | |
| </div> | |
| <button id="clearBtn" class="btn-danger">Εκκαθάριση Καταγραφών</button> | |
| <div style="margin-top: 20px; font-size: 0.8rem; color: #666; line-height: 1.5;"> | |
| <strong>Προσομοίωση:</strong><br> | |
| Πατήστε οποιοδήποτε πλήκτρο στο παρακάτω πεδίο για να δοκιμάσετε την καταγραφή. | |
| </div> | |
| </aside> | |
| <!-- Main Terminal View --> | |
| <main class="panel" style="display: flex; flex-direction: column;"> | |
| <h2>Live Terminal Output</h2> | |
| <div class="terminal" id="terminalOutput"> | |
| <div class="log-entry"> | |
| <span class="timestamp">[SYSTEM]</span> Αρχικοποίηση ασφαλούς περιβάλλοντος καταγραφής... | |
| </div> | |
| <div class="log-entry"> | |
| <span class="timestamp">[INFO]</span> Η εφαρμογή τρέχει σε απομονωμένη μνήμη (LocalStorage). | |
| </div> | |
| <div class="log-entry"> | |
| <span class="timestamp">[INFO]</span> Προσοχή: Δεν γίνεται εγγραφή σε πραγματικό αρχείο .txt για λόγους ασφαλείας browser. | |
| </div> | |
| </div> | |
| <div class="stats"> | |
| <span>Format: Timestamp / Type</span> | |
| <span>Storage: Local</span> | |
| </div> | |
| <!-- Simulation Input Area --> | |
| <div style="margin-top: 20px; border-top: 1px solid #333; padding-top: 20px;"> | |
| <label style="margin-bottom: 10px; display: block;">Περιοχή Δοκιμής (Πληκτρολογήστε εδώ για να δείτε το Terminal):</label> | |
| <textarea id="simulationArea" style="width: 100%; height: 100px; background: #0a0a0e; color: white; padding: 10px; border: 1px solid #444; border-radius: 6px; resize: none;" placeholder="Πληκτρολογήστε για να προσομοιώσετε keypress..."></textarea> | |
| </div> | |
| </main> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link">Built with anycoder</a> | |
| <script> | |
| // --- CONFIGURATION & STATE --- | |
| const state = { | |
| keyCount: 0, | |
| logs: [], | |
| isPasswordSet: false, | |
| currentPassword: "admin123" // Προεπιλεγμένος κωδικός | |
| }; | |
| // DOM Elements | |
| const terminal = document.getElementById('terminalOutput'); | |
| const charCountEl = document.getElementById('charCount'); | |
| const lastActionEl = document.getElementById('lastAction'); | |
| const simulationArea = document.getElementById('simulationArea'); | |
| const clearBtn = document.getElementById('clearBtn'); | |
| const accessCodeInput = document.getElementById('accessCode'); | |
| const connectionDot = document.getElementById('connectionDot'); | |
| const connectionText = document.getElementById('connectionText'); | |
| // --- FUNCTIONS --- | |
| // Helper: Get current timestamp | |
| function getTime() { | |
| const now = new Date(); | |
| return now.toLocaleTimeString('el-GR', { hour12: false }) + "." + Math.floor(Math.random() * 999); | |
| } | |
| // Helper: Add log to terminal | |
| function addLog(message, type = 'normal') { | |
| const entry = document.createElement('div'); | |
| entry.className = `log-entry ${type}`; | |
| const timeSpan = document.createElement('span'); | |
| timeSpan.className = 'timestamp'; | |
| timeSpan.textContent = `[${getTime()}]`; | |
| entry.appendChild(timeSpan); | |
| entry.appendChild(document.createTextNode(message)); | |
| terminal.appendChild(entry); | |
| terminal.scrollTop = terminal.scrollHeight; | |
| } | |
| // Core: Process Key Press | |
| function handleKeyPress(key, code, type) { | |
| // Απλή προσομοίωση καταγραφής | |
| let displayKey = key; | |
| // Ειδικές περιπτώσεις για καλλίτερη εμφάνιση | |
| if (code === 'Space') displayKey = ' '; | |
| if (code === 'Enter') displayKey = '[ENTER]\n'; | |
| if (code === 'Backspace') displayKey = '[BACKSPACE]'; | |
| if (code === 'Tab') displayKey = '[TAB]'; | |
| if (code === 'Shift' || code === 'CapsLock' || code === 'Control' || code === 'Alt') { | |
| addLog(`Πλήκτρο ${code} ενεργοποιήθηκε`, 'ctrl'); | |
| return; // Μην αυξάνεις τον μετρητή για modifier keys στον γενικό αριθμό | |
| } | |
| // Ενημέρωση UI | |
| state.keyCount++; | |
| charCountEl.textContent = state.keyCount; | |
| lastActionEl.textContent = `Πλήκτρο: ${displayKey} | Ώρα: ${getTime()}`; | |
| // Εγγραφή στο Terminal | |
| if (displayKey.length === 1 || code === 'Enter' || code === 'Backspace') { | |
| addLog(`KEY: ${displayKey.replace('\n', '')}`, type); | |
| } | |
| } | |
| // --- EVENT LISTENERS --- | |
| // 1. Simulation Area (Text Area) - Standard Input | |
| simulationArea.addEventListener('input', (e) => { | |
| // Σε αυτό το event, παίρνουμε την τιμή του textarea | |
| // Αλλά για να δούμε τα πλήκτρα ξεχωριστά στο terminal, χρησιμοποιούμε keydown για το textarea | |
| }); | |
| // Χρησιμοποιούμε keydown για να πιάσουμε όλα τα πλήκτρα (συμπεριλαμβανομένων των special) | |
| simulationArea.addEventListener('keydown', (e) => { | |
| // Αν είναι character key | |
| if (e.key.length === 1) { | |
| handleKeyPress(e.key, e.code, 'normal'); | |
| } else { | |
| handleKeyPress(e.key, e.code, 'special'); | |
| } | |
| }); | |
| // 2. Global Listener (Capture all keys even outside textarea for demo purposes) | |
| // Προσοχή: Δεν το κάνουμε για πραγματική επιβάρυνση, αλλά για demo effect | |
| document.addEventListener('keydown', (e) => { | |
| // Αποφυγή αναδρομής αν πατηθεί σε κάποιο άλλο σημείο | |
| if (document.activeElement === simulationArea) return; | |
| // Εμφάνιση στο terminal αλλά όχι εγγραφή στο textarea αν δεν είμαστε εκεί | |
| if (e.key.length === 1) { | |
| handleKeyPress(e.key, e.code, 'normal'); | |
| } else if (e.key === 'Enter' || e.key === 'Backspace') { | |
| handleKeyPress(e.key, e.code, 'special'); | |
| } | |
| }); | |
| // 3. Password Management | |
| accessCodeInput.addEventListener('change', (e) => { | |
| if (e.target.value.length > 0) { | |
| state.currentPassword = e.target.value; | |
| addLog('Ο κωδικός πρόσβασης άλλαξε επιτυχώς.', 'special'); | |
| alert('Ο κωδικός πρόσβασης άλλαξε σε: ' + state.currentPassword); | |
| } | |
| }); | |
| // 4. Clear Logs | |
| clearBtn.addEventListener('click', () => { | |
| if (confirm('Είστε σίγουροι ότι θέλετε να διαγράψετε όλες τις καταγραφές;')) { | |
| state.keyCount = 0; | |
| state.logs = []; | |
| charCountEl.textContent = '0'; | |
| terminal.innerHTML = ''; | |
| addLog('Το σύστημα εκκαθαρίστηκε από τον χρήστη.', 'ctrl'); | |
| lastActionEl.textContent = 'Σύστημα Καθαρισμένο'; | |
| } | |
| }); | |
| // 5. Initial Welcome | |
| window.onload = () => { | |
| addLog('Σύστημα Ενέργειας Φορτώθηκε.', 'normal'); | |
| addLog('Παρακαλώ εισαγάγετε τον κωδικό πρόσβασης για να ρυθμίσετε τις παραμέτρους.', 'normal'); | |
| }; | |
| </script> | |
| </body> | |
| </html> |