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>

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

अनुशंसित

डेस्कटॉप पंखा

स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

मौत का संग्राम

HTML

CSS

JS

अनुशंसित

डेस्कटॉप पंखा

स्लाइडिंग मेनू के साथ शुद्ध क्षैतिज स्लाइडर

मौत का संग्राम

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS