Webleb - कोड स्निपेट्स - निर्देशिकाओं के साथ बनाया गया एक सिस्टम

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>

निर्देशिकाओं के साथ बनाया गया एक सिस्टम

अनुशंसित

रिस्पॉन्सिव सीएसएस कार्ड

पेंगुइन

securecode394 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

रिस्पॉन्सिव सीएसएस कार्ड

पेंगुइन

securecode394 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS