Webleb - UI Elements - Hack Terminal

HTML

<!DOCTYPE html>

<head>

<title>Hacker Login Terminal</title>

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

<h2>Hack Terminal <span class="terminal-cursor"></span></h2>

</div>

> Secure Access Point

</div>

</div>

</div>

<button class="login-btn">Authenticate</button>

</div>

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

@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

// 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';

}

});

Hack Terminal

Recommended