Webleb - Snippet di Codice - un sistema creato con directory

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>

un sistema creato con directory

Consigliato

Negozio di scarpe

Profilo dei link social

Animazione del passaggio del mouse

HTML

CSS

JS

Consigliato

Negozio di scarpe

Profilo dei link social

Animazione del passaggio del mouse

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS