Webleb - HTML UI Elements - Home page di Matrice Rossa

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

});

Home page di Matrice Rossa

Consigliato

Ben Lucas Alves

Pulsante Home di CodePen

HTML

CSS

JS

Consigliato

Ben Lucas Alves

Pulsante Home di CodePen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS