Webleb - Code-Snippets - ein System, das mit Verzeichnissen erstellt wurde

HTML

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

overflow: hidden;

background: #000;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

font-family: 'Courier New', monospace;

color: #FFD700;

}

#matrix-canvas {

position: fixed;

top: 0;

left: 0;

z-index: 1;

}

.version-info {

position: fixed;

bottom: 10px;

right: 10px;

color: #00ff00;

font-size: 12px;

z-index: 2;

}

.login-container {

position: relative;

z-index: 2;

background: rgba(0, 0, 0, 0.85);

padding: 40px;

border: 2px solid #DAA520;

border-radius: 15px;

box-shadow: 0 0 30px rgba(218, 165, 32, 0.3);

text-align: center;

width: 400px;

backdrop-filter: blur(5px);

}

.system-header {

text-align: center;

margin-bottom: 30px;

border-bottom: 2px solid #DAA520;

padding-bottom: 20px;

}

.system-logo {

font-size: 24px;

color: #FFD700;

text-shadow: 0 0 10px #FFD700;

margin-bottom: 10px;

}

.system-status {

font-size: 14px;

color: #00ff00;

margin-top: 10px;

}

.login-title {

color: #FFD700;

font-size: 28px;

margin-bottom: 30px;

text-shadow: 0 0 10px #FFD700;

}

.input-group {

position: relative;

margin-bottom: 25px;

}

.login-input {

width: 100%;

padding: 12px 15px;

background: rgba(0, 0, 0, 0.7);

border: 1px solid #8B4513;

border-radius: 5px;

color: #FFD700;

font-size: 16px;

margin-bottom: 5px;

box-sizing: border-box;

transition: all 0.3s ease;

}

.login-input:focus {

outline: none;

border-color: #FFD700;

box-shadow: 0 0 15px rgba(218, 165, 32, 0.3);

}

.input-icon {

position: absolute;

right: 10px;

top: 12px;

color: #DAA520;

}

.login-button {

width: 100%;

padding: 12px;

background: linear-gradient(45deg, #8B4513, #DAA520);

color: #FFD700;

border: none;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

transition: all 0.3s ease;

margin-top: 20px;

text-transform: uppercase;

letter-spacing: 2px;

}

.login-button:hover {

background: linear-gradient(45deg, #DAA520, #8B4513);

box-shadow: 0 0 20px rgba(255, 51, 0, 0.4);

}

.status-container {

margin-top: 20px;

padding: 10px;

border-radius: 5px;

background: rgba(0, 0, 0, 0.5);

display: none;

}

.status-text {

color: #00ff00;

font-size: 14px;

margin: 5px 0;

}

.loading-bar {

width: 100%;

height: 4px;

background: #333;

border-radius: 2px;

margin-top: 10px;

overflow: hidden;

}

.loading-progress {

width: 0%;

height: 100%;

background: #00ff00;

border-radius: 2px;

transition: width 0.3s ease;

}

.system-info {

display: flex;

justify-content: space-between;

margin-top: 30px;

padding-top: 20px;

border-top: 1px solid #DAA520;

font-size: 12px;

color: #888;

}

.fingerprint {

width: 100px;

height: 100px;

margin: 20px auto;

border: 2px solid #DAA520;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

font-size: 40px;

color: #DAA520;

cursor: pointer;

transition: all 0.3s ease;

}

.fingerprint:hover {

border-color: #00ff00;

color: #00ff00;

box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);

}

@keyframes scanLine {

0% { transform: translateY(-100%); }

100% { transform: translateY(100%); }

}

.scan-line {

position: absolute;

width: 100%;

height: 2px;

background: rgba(0, 255, 0, 0.5);

animation: scanLine 2s linear infinite;

}

</style>

</head>

<body>

<div class="system-logo">MATRIX KONTROL SİSTEMİ</div>

<span>⬤</span> Sistem Aktif | <span id="dateTime"></span>

</div>

⌖

</div>

</div>

</div>

<button class="login-button" onclick="simulateLogin()">GİRİŞ</button>

<div class="status-text" id="statusText">Giriş yapılıyor...</div>

</div>

</div>

<div class="version-info">v3.5.2 | Build 20241228</div>

const canvas = document.getElementById('matrix-canvas');

const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const nums = '0123456789';

const symbols = '[]{}()<>/*-+=';

const alphabet = nums + symbols;

const fontSize = 16;

const columns = canvas.width/fontSize;

const raindrops = Array(Math.floor(columns)).fill(canvas.height);

const colors = ['#FFD700', '#8B4513', '#ff0000', '#ff3300', '#ff6600'];

function updateDateTime() {

const now = new Date();

document.getElementById('dateTime').textContent =

now.toLocaleString('tr-TR', {

hour: '2-digit',

minute: '2-digit',

second: '2-digit'

});

}

function simulateLogin() {

const statusContainer = document.getElementById('statusContainer');

const statusText = document.getElementById('statusText');

const loadingProgress = document.getElementById('loadingProgress');

const messages = [

'Kimlik doğrulanıyor...',

'Güvenlik protokolleri kontrol ediliyor...',

'Sistem erişimi sağlanıyor...',

'Veritabanı bağlantısı kuruluyor...',

'Giriş başarılı! Yönlendiriliyorsunuz...'

];

statusContainer.style.display = 'block';

let progress = 0;

let messageIndex = 0;

const interval = setInterval(() => {

progress += 5;

loadingProgress.style.width = `${progress}%`;

if (progress % 20 === 0 && messageIndex < messages.length) {

statusText.textContent = messages[messageIndex];

messageIndex++;

}

if (progress >= 100) {

clearInterval(interval);

setTimeout(() => {

// Burada yeni sayfaya yönlendirme yapılabilir

alert('Giriş başarılı! Yeni sayfa buraya gelecek.');

}, 500);

}

}, 100);

}

function draw() {

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

for(let i = 0; i < raindrops.length; i++) {

const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));

const x = i * fontSize;

const y = raindrops[i] * fontSize;

ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];

ctx.font = `bold ${fontSize}px monospace`;

ctx.fillText(text, x, y);

if(y > canvas.height && Math.random() > 0.975) {

raindrops[i] = 0;

}

raindrops[i]++;

}

window.addEventListener('resize', () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

setInterval(draw, 30);

setInterval(updateDateTime, 1000);

updateDateTime();

</script>

</body>

</html>

ein System, das mit Verzeichnissen erstellt wurde

Empfohlen

Ein Code von efficientlogic648

Reise zu 100 Followern

HTML

CSS

JS

Empfohlen

Ein Code von efficientlogic648

Reise zu 100 Followern

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS