WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Terminal de hack
755
Metehan
Abrir no Editor
Publique Seu Código
31 July 2025
Teclado interativo
8 February 2025
animação carregando
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hacker Login Terminal</title> <link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet"> <style> @import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wont@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Courier Prime', monospace; background: linear-gradient( 45deg, #FFD700, #F2B705, #FFC300 ); background-size: 400% 400%; animation: GradientBackground 15s ease infinite; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } @keyframes GradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .code-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.2; z-index: 1; overflow: hidden; } .code-line { position: absolute; color: rgba(73, 88, 103, 0.4); font-size: 12px; white-space: nowrap; text-shadow: 0 0 5px rgba(242, 183, 5, 0.3); animation: code-flow 10s linear infinite; user-select: none; } @keyframes code-flow { 0% { transform: translateY(-100%) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } } .login-container { position: relative; width: 450px; background-color: rgba(255, 255, 255, 0.95); padding: 40px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.2), 0 0 30px rgba(242, 183, 5, 0.3); z-index: 10; border: 4px solid #FFD700; } .login-header { text-align: center; margin-bottom: 30px; position: relative; } .login-header h2 { color: #495867; font-family: 'Courier Prime', monospace; font-size: 26px; text-transform: uppercase; letter-spacing: 2px; } .terminal-cursor { display: inline-block; width: 12px; height: 22px; background-color: #FFD700; animation: blink 0.7s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .input-group { margin-bottom: 25px; position: relative; } .input-group::before { content: '>'; position: absolute; left: -20px; top: 12px; color: #495867; font-weight: bold; } .input-group input { width: 100%; padding: 15px; border: 2px solid #FFD700; background-color: #f9f9f9; font-family: 'Courier Prime', monospace; border-radius: 8px; transition: all 0.3s ease; } .input-group input:focus { outline: none; border-color: #495867; box-shadow: 0 0 15px rgba(242, 183, 5, 0.3); } .login-btn { width: 100%; padding: 15px; background-color: #495867; color: #FFD700; border: none; border-radius: 8px; font-family: 'Courier Prime', monospace; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(73, 88, 103, 0.2); } .login-btn:hover { background-color: #3a4857; transform: translateY(-3px); box-shadow: 0 7px 20px rgba(73, 88, 103, 0.3); } .terminal-text { color: #495867; margin-bottom: 20px; font-weight: bold; } </style> </head> <body> <div class="code-background" id="codeBackground"></div> <div class="login-container"> <div class="login-header"> <h2>Hack Terminal <span class="terminal-cursor"></span></h2> </div> <div class="terminal-text"> > Secure Access Point </div> <div class="input-group"> <input type="text" placeholder="USERNAME" required> </div> <div class="input-group"> <input type="password" placeholder="PASSWORD" required> </div> <button class="login-btn">Authenticate</button> </div> <script> function generateCodeLines() { const background = document.getElementById('codeBackground'); const codeSnippets = [ 'if (access.granted) {', 'function secureLogin() {', 'const encryption = new Cipher();', 'while(system.active) {', 'break decrypt(mainframe);', 'return user.permissions;', 'export const hackMode = true;', 'class SecurityProtocol {' ]; for (let i = 0; i < 70; i++) { const codeLine = document.createElement('div'); codeLine.classList.add('code-line'); codeLine.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)]; codeLine.style.left = `${Math.random() * 100}%`; codeLine.style.animationDuration = `${8 + Math.random() * 12}s`; codeLine.style.color = Math.random() > 0.5 ? 'rgba(73, 88, 103, 0.4)' : 'rgba(242, 183, 5, 0.5)'; background.appendChild(codeLine); } } generateCodeLines(); </script> </body> </html>
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wont@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Courier Prime', monospace; background: linear-gradient( 45deg, #FFD700, #F2B705, #FFC300 ); background-size: 400% 400%; animation: GradientBackground 15s ease infinite; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; } @keyframes GradientBackground { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .code-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.2; z-index: 1; overflow: hidden; } .code-line { position: absolute; color: rgba(73, 88, 103, 0.4); font-size: 12px; white-space: nowrap; text-shadow: 0 0 5px rgba(242, 183, 5, 0.3); animation: code-flow 10s linear infinite; user-select: none; } @keyframes code-flow { 0% { transform: translateY(-100%) rotate(0deg); } 100% { transform: translateY(100vh) rotate(360deg); } } .login-container { position: relative; width: 450px; background-color: rgba(255, 255, 255, 0.95); padding: 40px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.2), 0 0 30px rgba(242, 183, 5, 0.3); z-index: 10; border: 4px solid #FFD700; } .login-header { text-align: center; margin-bottom: 30px; position: relative; } .login-header h2 { color: #495867; font-family: 'Courier Prime', monospace; font-size: 26px; text-transform: uppercase; letter-spacing: 2px; } .terminal-cursor { display: inline-block; width: 12px; height: 22px; background-color: #FFD700; animation: blink 0.7s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .input-group { margin-bottom: 25px; position: relative; } .input-group::before { content: '>'; position: absolute; left: -20px; top: 12px; color: #495867; font-weight: bold; } .input-group input { width: 100%; padding: 15px; border: 2px solid #FFD700; background-color: #f9f9f9; font-family: 'Courier Prime', monospace; border-radius: 8px; transition: all 0.3s ease; } .input-group input:focus { outline: none; border-color: #495867; box-shadow: 0 0 15px rgba(242, 183, 5, 0.3); } .login-btn { width: 100%; padding: 15px; background-color: #495867; color: #FFD700; border: none; border-radius: 8px; font-family: 'Courier Prime', monospace; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(73, 88, 103, 0.2); } .login-btn:hover { background-color: #3a4857; transform: translateY(-3px); box-shadow: 0 7px 20px rgba(73, 88, 103, 0.3); } .terminal-text { color: #495867; margin-bottom: 20px; font-weight: bold; } /* Responsive Tasarım */ @media screen and (max-width: 500px) { .login-container { width: 95%; margin: 0 10px; padding: 30px 20px; } .input-group::before { left: -15px; } .login-header h2 { font-size: 22px; } }
JS
Copy
// Kod Arka Plan Oluşturma Fonksiyonu function generateCodeLines() { const background = document.getElementById('codeBackground'); const codeSnippets = [ 'if (access.granted) {', 'function secureLogin() {', 'const encryption = new Cipher();', 'while(system.active) {', 'break decrypt(mainframe);', 'return user.permissions;', 'export const hackMode = true;', 'class SecurityProtocol {', 'async function validateUser() {', 'const token = generateToken();', 'const network = new NetworkScanner();', 'let systemIntegrity = checkSystem();' ]; // Arka plan için kod satırları oluşturma for (let i = 0; i < 70; i++) { const codeLine = document.createElement('div'); codeLine.classList.add('code-line'); // Rastgele kod parçası seçme codeLine.textContent = codeSnippets[Math.floor(Math.random() * codeSnippets.length)]; // Kod satırı konumlandırma ve animasyon codeLine.style.left = `${Math.random() * 100}%`; codeLine.style.animationDuration = `${8 + Math.random() * 12}s`; // Renk çeşitliliği codeLine.style.color = Math.random() > 0.5 ? 'rgba(73, 88, 103, 0.4)' : 'rgba(242, 183, 5, 0.5)'; background.appendChild(codeLine); } } // Login Doğrulama Fonksiyonu function authenticateUser(event) { event.preventDefault(); // Kullanıcı adı ve şifre inputları const username = document.getElementById('username').value; const password = document.getElementById('password').value; // Basit doğrulama kontrolleri if (!username || !password) { showAlert('❌ Tüm alanları doldurun!', 'error'); return; } // Sahte güvenlik kontrolleri if (username.length < 4) { showAlert('❌ Kullanıcı adı çok kısa!', 'warning'); return; } if (password.length < 6) { showAlert('❌ Şifre çok zayıf!', 'warning'); return; } // Simüle edilmiş login işlemi simulateHackingSequence(); } // Hack Simülasyon Efekti function simulateHackingSequence() { const loginBtn = document.querySelector('.login-btn'); const originalText = loginBtn.textContent; const hackSequences = [ 'Connecting...', 'Bypassing Firewall', 'Decrypting Credentials', 'Validating Access', 'Authenticated!' ]; let currentStep = 0; const hackAnimation = setInterval(() => { if (currentStep < hackSequences.length) { loginBtn.textContent = hackSequences[currentStep]; currentStep++; } else { clearInterval(hackAnimation); loginBtn.textContent = originalText; showAlert('✅ Giriş Başarılı!', 'success'); } }, 800); } // Bildirim Gösterme Fonksiyonu function showAlert(message, type) { // Mevcut alert varsa kaldır const existingAlert = document.querySelector('.alert'); if (existingAlert) { existingAlert.remove(); } const alertDiv = document.createElement('div'); alertDiv.classList.add('alert', `alert-${type}`); alertDiv.textContent = message; // Konteynıra alert ekleme const container = document.querySelector('.login-container'); container.insertBefore(alertDiv, container.firstChild); // Belirli süre sonra alerta kaldırma setTimeout(() => { alertDiv.remove(); }, 3000); } // Sayfa Yüklendiğinde Çalışacak Fonksiyonlar document.addEventListener('DOMContentLoaded', () => { // Kod arka planını oluşturma generateCodeLines(); // Login butonuna event listener ekleme const loginForm = document.querySelector('.login-container form'); if (loginForm) { loginForm.addEventListener('submit', authenticateUser); } // Animasyonlu cursor efekti const cursor = document.querySelector('.terminal-cursor'); setInterval(() => { cursor.style.backgroundColor = cursor.style.backgroundColor === 'rgb(255, 215, 0)' ? '#495867' : '#FFD700'; }, 500); }); // Sayfa Boyutu Değişiminde Responsive Düzenleme window.addEventListener('resize', () => { const loginContainer = document.querySelector('.login-container'); const screenWidth = window.innerWidth; if (screenWidth <= 500) { loginContainer.style.width = '95%'; loginContainer.style.margin = '0 10px'; } else { loginContainer.style.width = '450px'; loginContainer.style.margin = '0'; } });
