Webleb - Extraits de Code - un système créé avec des répertoires

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 système créé avec des répertoires

Recommandé

Animation de défilement parallaxe

Modèle HTML de blog de conception moderne

tombereau

HTML

CSS

JS

Recommandé

Animation de défilement parallaxe

Modèle HTML de blog de conception moderne

tombereau

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS