Webleb - HTML UI Elements - Página inicial da Matriz Vermelha

HTML

<!DOCTYPE html>

<head>

<title>Modern Giriş Sayfası</title>

<style>

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}

body {

min-height: 100vh;

background: linear-gradient(135deg, #1a0001, #440000);

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

position: relative;

}

/* 3D Shapes Animation */

.shapes {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

z-index: 1;

}

.shape {

position: absolute;

filter: blur(1px);

opacity: 0.5;

animation: float 10s infinite;

}

.shape:nth-child(1) {

width: 100px;

height: 100px;

background: #ff0000;

top: 20%;

left: 10%;

animation-delay: 0s;

transform: rotate(45deg);

}

.shape:nth-child(2) {

width: 150px;

height: 150px;

background: #ff2222;

top: 60%;

right: 10%;

animation-delay: 2s;

border-radius: 50%;

}

.shape:nth-child(3) {

width: 80px;

height: 80px;

background: #ff4444;

bottom: 20%;

left: 20%;

animation-delay: 4s;

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

@keyframes float {

0%, 100% {

transform: translateY(0) rotate(0deg);

}

50% {

transform: translateY(-20px) rotate(180deg);

}

.container {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

padding: 2rem;

border-radius: 16px;

width: 90%;

max-width: 400px;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

position: relative;

z-index: 2;

border: 1px solid rgba(255, 255, 255, 0.2);

}

.logo {

text-align: center;

margin-bottom: 1rem;

}

.logo svg {

width: 48px;

height: 48px;

fill: #fff;

}

h1 {

color: #fff;

text-align: center;

margin-bottom: 1.5rem;

font-size: 1.75rem;

text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}

.fingerprint-container {

text-align: center;

margin: 1rem 0 2rem 0;

}

.fingerprint {

width: 80px;

height: 80px;

cursor: pointer;

transition: all 0.3s ease;

filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));

}

.fingerprint:hover {

transform: scale(1.1);

filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));

}

.form-group {

margin-bottom: 1.5rem;

position: relative;

}

.form-group input {

width: 100%;

padding: 1rem;

background: rgba(255, 255, 255, 0.1);

border: 2px solid rgba(255, 255, 255, 0.1);

border-radius: 8px;

color: #fff;

font-size: 1rem;

transition: all 0.3s ease;

}

.form-group input:focus {

outline: none;

border-color: #ff0000;

background: rgba(255, 255, 255, 0.15);

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

}

.form-group label {

position: absolute;

left: 1rem;

top: 50%;

transform: translateY(-50%);

color: rgba(255, 255, 255, 0.6);

pointer-events: none;

transition: all 0.3s ease;

}

.form-group input:focus + label,

.form-group input:not(:placeholder-shown) + label {

top: 0;

left: 0.5rem;

font-size: 0.75rem;

padding: 0 0.5rem;

background: #ff0000;

border-radius: 4px;

color: #fff;

}

.btn {

width: 100%;

padding: 1rem;

background: #ff0000;

color: #fff;

border: none;

border-radius: 8px;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

text-transform: uppercase;

letter-spacing: 1px;

}

.btn:hover {

background: #cc0000;

transform: translateY(-2px);

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

}

.links {

margin-top: 1.5rem;

text-align: center;

}

.links a {

color: rgba(255, 255, 255, 0.8);

text-decoration: none;

font-size: 0.875rem;

transition: all 0.3s ease;

margin: 0 0.5rem;

}

.links a:hover {

color: #ff0000;

text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);

}

</style>

</head>

<body>

</div>

<h1>Hoş Geldiniz</h1>

<label for="username">Kullanıcı Adı</label>

</div>

<label for="password">Şifre</label>

</div>

<button type="submit" class="btn">Giriş Yap</button>

</form>

</svg>

</div>

<a href="#">Şifremi Unuttum</a> •

<a href="#">Yeni Hesap Oluştur</a>

</div>

document.getElementById('loginForm').addEventListener('submit', function(e) {

e.preventDefault();

const username = document.getElementById('username').value;

const password = document.getElementById('password').value;

// Animasyon efekti

const btn = document.querySelector('.btn');

btn.style.transform = 'scale(0.95)';

setTimeout(() => {

btn.style.transform = 'translateY(-2px)';

}, 200);

console.log('Giriş denemesi:', { username, password });

});

// Parmak izi animasyonu

const fingerprint = document.querySelector('.fingerprint');

let isScanning = false;

fingerprint.addEventListener('click', function() {

if (isScanning) return;

isScanning = true;

this.style.filter = 'drop-shadow(0 0 20px rgba(255, 0, 0, 0.8))';

// Tarama animasyonu

let degree = 0;

const scanAnimation = setInterval(() => {

degree += 10;

this.style.transform = `rotate(${degree}deg) scale(1.1)`;

if (degree >= 360) {

clearInterval(scanAnimation);

this.style.transform = 'rotate(0deg) scale(1)';

this.style.filter = 'drop-shadow(0 0 10px rgba(255, 0, 0, 0.5))';

isScanning = false;

}

}, 30);

});

// Float label efekti

document.querySelectorAll('.form-group input').forEach(input => {

input.addEventListener('focus', function() {

this.parentElement.classList.add('focused');

});

input.addEventListener('blur', function() {

if (!this.value) {

this.parentElement.classList.remove('focused');

}

});

// 3D şekiller için rastgele hareket

const shapes = document.querySelectorAll('.shape');

shapes.forEach(shape => {

setInterval(() => {

const randomX = Math.random() * 20 - 10;

const randomY = Math.random() * 20 - 10;

shape.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 360}deg)`;

}, 3000);

});

</script>

</body>

</html>

CSS

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}

body {

min-height: 100vh;

background: linear-gradient(135deg, #1a0001, #440000);

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

position: relative;

}

/* 3D Shapes Animation */

.shapes {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

overflow: hidden;

z-index: 1;

}

.shape {

position: absolute;

filter: blur(1px);

opacity: 0.5;

animation: float 10s infinite;

}

.shape:nth-child(1) {

width: 100px;

height: 100px;

background: #ff0000;

top: 20%;

left: 10%;

animation-delay: 0s;

transform: rotate(45deg);

}

.shape:nth-child(2) {

width: 150px;

height: 150px;

background: #ff2222;

top: 60%;

right: 10%;

animation-delay: 2s;

border-radius: 50%;

}

.shape:nth-child(3) {

width: 80px;

height: 80px;

background: #ff4444;

bottom: 20%;

left: 20%;

animation-delay: 4s;

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

}

@keyframes float {

0%, 100% {

transform: translateY(0) rotate(0deg);

}

50% {

transform: translateY(-20px) rotate(180deg);

}

.container {

background: rgba(255, 255, 255, 0.1);

backdrop-filter: blur(10px);

padding: 2rem;

border-radius: 16px;

width: 90%;

max-width: 400px;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

position: relative;

z-index: 2;

border: 1px solid rgba(255, 255, 255, 0.2);

}

h1 {

color: #fff;

text-align: center;

margin-bottom: 1.5rem;

font-size: 1.75rem;

text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

}

.fingerprint-container {

text-align: center;

margin: 1rem 0 2rem 0;

}

.fingerprint {

width: 80px;

height: 80px;

cursor: pointer;

transition: all 0.3s ease;

filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.5));

}

.fingerprint:hover {

transform: scale(1.1);

filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));

}

.form-group {

margin-bottom: 1.5rem;

position: relative;

}

.form-group input {

width: 100%;

padding: 1rem;

background: rgba(255, 255, 255, 0.1);

border: 2px solid rgba(255, 255, 255, 0.1);

border-radius: 8px;

color: #fff;

font-size: 1rem;

transition: all 0.3s ease;

}

.form-group input:focus {

outline: none;

border-color: #ff0000;

background: rgba(255, 255, 255, 0.15);

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

}

.form-group label {

position: absolute;

left: 1rem;

top: 50%;

transform: translateY(-50%);

color: rgba(255, 255, 255, 0.6);

pointer-events: none;

transition: all 0.3s ease;

}

.form-group input:focus + label,

.form-group input:not(:placeholder-shown) + label {

top: 0;

left: 0.5rem;

font-size: 0.75rem;

padding: 0 0.5rem;

background: #ff0000;

border-radius: 4px;

color: #fff;

}

.btn {

width: 100%;

padding: 1rem;

background: #ff0000;

color: #fff;

border: none;

border-radius: 8px;

font-size: 1rem;

font-weight: 600;

cursor: pointer;

transition: all 0.3s ease;

text-transform: uppercase;

letter-spacing: 1px;

}

.btn:hover {

background: #cc0000;

transform: translateY(-2px);

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

}

.links {

margin-top: 1.5rem;

text-align: center;

}

.links a {

color: rgba(255, 255, 255, 0.8);

text-decoration: none;

font-size: 0.875rem;

transition: all 0.3s ease;

margin: 0 0.5rem;

}

.links a:hover {

color: #ff0000;

text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);

}

JS

document.getElementById('loginForm').addEventListener('submit', function(e) {

e.preventDefault();

const username = document.getElementById('username').value;

const password = document.getElementById('password').value;

// Button animation effect

const btn = document.querySelector('.btn');

btn.style.transform = 'scale(0.95)';

setTimeout(() => {

btn.style.transform = 'translateY(-2px)';

}, 200);

console.log('Login attempt:', { username, password });

});

// Fingerprint scanning animation

const fingerprint = document.querySelector('.fingerprint');

let isScanning = false;

fingerprint.addEventListener('click', function() {

if (isScanning) return;

isScanning = true;

this.style.filter = 'drop-shadow(0 0 20px rgba(255, 0, 0, 0.8))';

let degree = 0;

const scanAnimation = setInterval(() => {

degree += 10;

this.style.transform = `rotate(${degree}deg) scale(1.1)`;

if (degree >= 360) {

clearInterval(scanAnimation);

this.style.transform = 'rotate(0deg) scale(1)';

this.style.filter = 'drop-shadow(0 0 10px rgba(255, 0, 0, 0.5))';

isScanning = false;

}

}, 30);

});

// Float label effect

document.querySelectorAll('.form-group input').forEach(input => {

input.addEventListener('focus', function() {

this.parentElement.classList.add('focused');

});

input.addEventListener('blur', function() {

if (!this.value) {

this.parentElement.classList.remove('focused');

}

});

// Random movement for shapes

const shapes = document.querySelectorAll('.shape');

shapes.forEach(shape => {

setInterval(() => {

const randomX = Math.random() * 20 - 10;

const randomY = Math.random() * 20 - 10;

shape.style.transform = `translate(${randomX}px, ${randomY}px) rotate(${Math.random() * 360}deg)`;

}, 3000);

});

Página inicial da Matriz Vermelha

Recomendado

Mensagem de motivação

Um código por lebdev

Efeitos do menu suspenso

HTML

CSS

JS

Recomendado

Mensagem de motivação

Um código por lebdev

Efeitos do menu suspenso

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS