Webleb - कोड स्निपेट्स - रेड मैट्रिक्स होम पेज

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

});

रेड मैट्रिक्स होम पेज

अनुशंसित

सिम्पल टेट्रिस गेम

एचटीएमएल सीएसएस पेमेंट फॉर्म

पाठ छाया एनीमेशन

HTML

CSS

JS

अनुशंसित

सिम्पल टेट्रिस गेम

एचटीएमएल सीएसएस पेमेंट फॉर्म

पाठ छाया एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS