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

Apple Watch Ultre

Motivation message

Matrix bir giriş sayfası dizini

HTML

CSS

JS

Recommended

Apple Watch Ultre

Motivation message

Matrix bir giriş sayfası dizini

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS