Webleb - Snippets de Código

HTML

<!DOCTYPE html>

<head>

<title>Secure Banking Login</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {

--primary-color: #2E5BFF;

--primary-dark: #1E3DB3;

--secondary-color: #00C6FF;

--dark-color: #1A1D29;

--light-color: #F8F9FC;

--success-color: #00D4A3;

--warning-color: #FFAB2D;

--danger-color: #FF4757;

--gray-100: #F5F7FA;

--gray-200: #E4E7EB;

--gray-500: #8F95B2;

--gray-700: #4A4A68;

--shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.15);

--radius: 12px;

--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

font-family: 'Inter', sans-serif;

background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);

color: var(--dark-color);

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

padding: 20px;

line-height: 1.6;

}

.login-container {

display: flex;

max-width: 1200px;

width: 100%;

background: white;

border-radius: 20px;

box-shadow: var(--shadow-lg);

overflow: hidden;

position: relative;

}

.login-container::before {

content: '';

position: absolute;

top: 0;

left: 0;

right: 0;

height: 5px;

background: linear-gradient(to right, var(--primary-color), var(--secondary-color));

}

.login-form {

flex: 1;

padding: 50px 40px;

display: flex;

flex-direction: column;

justify-content: center;

background: white;

position: relative;

z-index: 1;

}

.card-display {

flex: 1;

background: linear-gradient(135deg, var(--dark-color) 0%, #2D3047 100%);

padding: 50px 40px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: white;

position: relative;

overflow: hidden;

}

.card-display::before {

content: '';

position: absolute;

top: -50%;

right: -50%;

width: 100%;

height: 200%;

background: radial-gradient(circle, rgba(46, 91, 255, 0.1) 0%, transparent 70%);

}

.logo {

text-align: center;

margin-bottom: 40px;

}

.logo img {

height: 40px;

}

.logo-text {

font-size: 24px;

font-weight: 700;

color: var(--primary-color);

margin-top: 10px;

}

h1 {

font-size: 28px;

margin-bottom: 10px;

font-weight: 700;

color: var(--dark-color);

}

.subtitle {

color: var(--gray-500);

margin-bottom: 40px;

font-size: 16px;

line-height: 1.6;

}

.form-group {

margin-bottom: 24px;

position: relative;

}

label {

display: block;

margin-bottom: 8px;

font-size: 14px;

font-weight: 500;

color: var(--gray-700);

}

.input-container {

position: relative;

}

input {

width: 100%;

padding: 16px 20px 16px 45px;

border: 1px solid var(--gray-200);

border-radius: var(--radius);

font-size: 16px;

transition: var(--transition);

background-color: var(--gray-100);

}

input:focus {

outline: none;

border-color: var(--primary-color);

box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.2);

background-color: white;

}

.input-icon {

position: absolute;

left: 16px;

top: 50%;

transform: translateY(-50%);

color: var(--gray-500);

font-size: 18px;

}

.password-toggle {

position: absolute;

right: 16px;

top: 50%;

transform: translateY(-50%);

color: var(--gray-500);

cursor: pointer;

font-size: 18px;

}

.remember-forgot {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 30px;

}

.remember-me {

display: flex;

align-items: center;

}

.remember-me input {

width: auto;

margin-right: 10px;

}

.remember-me label {

margin-bottom: 0;

font-size: 14px;

}

.forgot-password a {

color: var(--primary-color);

text-decoration: none;

font-size: 14px;

font-weight: 500;

transition: var(--transition);

}

.forgot-password a:hover {

color: var(--primary-dark);

}

button {

width: 100%;

padding: 16px;

background: var(--primary-color);

color: white;

border: none;

border-radius: var(--radius);

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: var(--transition);

box-shadow: 0 4px 12px rgba(46, 91, 255, 0.3);

}

button:hover {

background: var(--primary-dark);

transform: translateY(-2px);

box-shadow: 0 6px 15px rgba(46, 91, 255, 0.4);

}

.security-notice {

text-align: center;

margin-top: 30px;

padding: 15px;

background-color: var(--gray-100);

border-radius: var(--radius);

font-size: 14px;

color: var(--gray-700);

}

.security-notice i {

color: var(--success-color);

margin-right: 8px;

}

/* Card styles */

.card-container {

perspective: 1200px;

width: 100%;

max-width: 420px;

margin-bottom: 40px;

}

.card {

width: 100%;

height: 260px;

position: relative;

transform-style: preserve-3d;

transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);

cursor: pointer;

}

.card-front, .card-back {

width: 100%;

height: 100%;

position: absolute;

backface-visibility: hidden;

border-radius: 16px;

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

padding: 25px;

box-sizing: border-box;

display: flex;

flex-direction: column;

justify-content: space-between;

color: white;

overflow: hidden;

}

.card-front {

background: linear-gradient(135deg, #1A1D29 0%, #2D3047 100%);

transform: rotateY(0deg);

}

.card-back {

background: linear-gradient(135deg, #2D3047 0%, #1A1D29 100%);

transform: rotateY(180deg);

}

.flipped {

transform: rotateY(180deg);

}

.card-header {

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 20px;

}

.card-chip {

width: 50px;

height: 40px;

background: linear-gradient(135deg, #FFD700 0%, #D4AF37 100%);

border-radius: 8px;

position: relative;

overflow: hidden;

}

.card-chip::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);

}

.card-logo img {

height: 40px;

}

.card-number {

font-family: 'Courier New', monospace;

font-size: 24px;

letter-spacing: 3px;

margin-bottom: 30px;

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

word-spacing: 8px;

display: flex;

justify-content: space-between;

}

.card-details {

display: flex;

justify-content: space-between;

align-items: flex-end;

}

.card-holder, .expiry-date {

display: flex;

flex-direction: column;

}

.card-label {

font-size: 10px;

opacity: 0.7;

margin-bottom: 5px;

text-transform: uppercase;

letter-spacing: 1px;

}

.card-value {

font-size: 16px;

letter-spacing: 1px;

font-weight: 500;

}

.contactless {

position: absolute;

right: 25px;

bottom: 25px;

width: 30px;

height: 30px;

background: radial-gradient(circle at center,

rgba(255,255,255,0.8) 0%,

rgba(255,255,255,0.4) 50%,

transparent 70%);

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

}

.contactless::before {

content: "⌃";

font-size: 18px;

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

transform: rotate(90deg);

}

.card-magnetic-strip {

height: 50px;

background: #000;

margin-top: 20px;

margin-bottom: 20px;

}

.card-signature {

height: 40px;

background: #fff;

border-radius: 4px;

display: flex;

align-items: center;

padding: 0 10px;

color: #333;

font-size: 12px;

position: relative;

margin-bottom: 20px;

}

.card-signature::after {

content: "Authorized Signature - Not Valid Unless Signed";

position: absolute;

right: 10px;

font-size: 6px;

color: #999;

}

.card-cvv {

display: flex;

justify-content: flex-end;

align-items: center;

}

.cvv-label {

font-size: 10px;

margin-right: 10px;

opacity: 0.7;

}

.cvv-strip {

background: #fff;

color: #333;

padding: 5px 10px;

border-radius: 3px;

font-size: 14px;

width: 60px;

text-align: center;

font-family: 'Courier New', monospace;

}

.card-issuer {

font-size: 10px;

text-align: center;

opacity: 0.7;

margin-top: 10px;

}

.holographic {

position: absolute;

width: 60px;

height: 40px;

background: linear-gradient(45deg,

rgba(255,255,255,0.1) 0%,

rgba(255,255,255,0.5) 50%,

rgba(255,255,255,0.1) 100%);

border-radius: 5px;

top: 20px;

left: 20px;

opacity: 0.8;

}

.card-display-title {

font-size: 24px;

font-weight: 700;

margin-bottom: 10px;

text-align: center;

}

.card-display-subtitle {

font-size: 16px;

opacity: 0.8;

margin-bottom: 30px;

text-align: center;

}

.card-actions {

display: flex;

justify-content: space-between;

margin-top: 30px;

width: 100%;

max-width: 420px;

}

.card-btn {

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

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

color: white;

padding: 12px 20px;

border-radius: var(--radius);

font-size: 14px;

cursor: pointer;

transition: var(--transition);

flex: 1;

margin: 0 8px;

font-weight: 500;

}

.card-btn:hover {

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

transform: translateY(-2px);

}

.card-btn.primary {

background: var(--primary-color);

border-color: var(--primary-color);

}

.card-btn.primary:hover {

background: var(--primary-dark);

}

@media (max-width: 968px) {

.login-container {

flex-direction: column;

}

.card-display {

order: -1;

padding: 40px 30px;

}

.login-form {

padding: 40px 30px;

}

.card-actions {

flex-direction: column;

gap: 12px;

}

.card-btn {

margin: 0;

}

/* Animations */

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.fade-in {

animation: fadeIn 0.6s ease-out forwards;

}

.delay-1 { animation-delay: 0.1s; }

.delay-2 { animation-delay: 0.2s; }

.delay-3 { animation-delay: 0.3s; }

/* Loading animation for button */

.btn-loading {

position: relative;

color: transparent;

}

.btn-loading::after {

content: '';

position: absolute;

width: 20px;

height: 20px;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

border: 2px solid transparent;

border-top-color: white;

border-radius: 50%;

animation: button-loading-spinner 1s ease infinite;

}

@keyframes button-loading-spinner {

from { transform: rotate(0turn); }

to { transform: rotate(1turn); }

}

</style>

</head>

<body>

<div class="logo-text">SecureBank</div>

</div>

<h1 class="fade-in delay-1">Güvenli Bankacılık Girişi</h1>

<p class="subtitle fade-in delay-1">Hesabınıza erişmek için giriş yapın. Güvenliğiniz bizim için önemlidir.</p>

<label for="username">E-posta veya Kullanıcı Adı</label>

</div>

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

</div>

<label for="remember">Beni Hatırla</label>

</div>

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

</div>

<button type="submit" class="fade-in delay-3" id="loginButton">Giriş Yap</button>

<span>Güvenli bağlantı: Verileriniz şifrelenmiştir</span>

</div>

</form>

</div>

<h2 class="card-display-title">Hızlı ve Güvenli Ödeme</h2>

<p class="card-display-subtitle">Kartınızı kaydedin, ödemeleriniz daha hızlı olsun</p>

</div>

</div>

<span class="card-label">Kart Sahibi</span>

<span class="card-value">MEHMET YILMAZ</span>

</div>

<span class="card-label">SON KULLANMA</span>

</div>

</div>

<span class="cvv-label">Güvenlik Kodu</span>

</div>

<div class="card-issuer">Bu kart SecureBank tarafından Mastercard International lisansıyla verilmiştir</div>

</div>

<button class="card-btn primary">Ödeme Yap</button>

</div>

// DOM Elements

const creditCard = document.getElementById('creditCard');

const togglePassword = document.getElementById('togglePassword');

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

const loginForm = document.getElementById('loginForm');

const loginButton = document.getElementById('loginButton');

// Card flip functionality

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

this.classList.toggle('flipped');

});

// Password visibility toggle

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

const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';

passwordInput.setAttribute('type', type);

this.classList.toggle('fa-eye');

this.classList.toggle('fa-eye-slash');

});

// Add tilt effect to card

const cardContainer = document.querySelector('.card-container');

cardContainer.addEventListener('mousemove', (e) => {

if (creditCard.classList.contains('flipped')) return;

const cardRect = cardContainer.getBoundingClientRect();

const cardCenterX = cardRect.left + cardRect.width / 2;

const cardCenterY = cardRect.top + cardRect.height / 2;

const angleX = (e.clientY - cardCenterY) / 25;

const angleY = (cardCenterX - e.clientX) / 25;

creditCard.style.transform = `rotateY(${angleY}deg) rotateX(${angleX}deg)`;

});

cardContainer.addEventListener('mouseleave', () => {

if (!creditCard.classList.contains('flipped')) {

creditCard.style.transform = 'rotateY(0deg) rotateX(0deg)';

}

});

// Form submission

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

e.preventDefault();

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

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

// Show loading state

loginButton.classList.add('btn-loading');

// Simulate API call

setTimeout(() => {

loginButton.classList.remove('btn-loading');

// Basic validation

if (username && password) {

// Simulate successful login

alert('Giriş başarılı! Yönlendiriliyorsunuz...');

// In a real application, you would redirect to the dashboard

// window.location.href = '/dashboard';

} else {

alert('Lütfen tüm alanları doldurun.');

}

}, 1500);

});

// Add some dynamic elements to the card

function updateCardTime() {

const now = new Date();

const timeString = now.toLocaleTimeString('tr-TR', { hour: '2-digit', minute: '2-digit' });

document.querySelector('.expiry-date .card-value').textContent = timeString;

}

// Update card time every minute

setInterval(updateCardTime, 60000);

updateCardTime(); // Initial call

</script>

</body>

</html>

Metehan

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTML

CSS

JS

Recomendado

Um Código de Metehan

Um Código de Metehan

Um Código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS