Webleb - UI Elements - Kırmızı Matrix giriş sayfası

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);

});

Kırmızı Matrix giriş sayfası

Recommended

Swiper Blog Slider Example

Card effect

SEAT Leon Login Page HTML CSS Template

HTML

CSS

JS

Recommended

Swiper Blog Slider Example

Card effect

SEAT Leon Login Page HTML CSS Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS