Webleb - Extraits de Code - Formulaire de connexion avec affichage de la carte et interface de paiement

HTML

<!DOCTYPE html>

<head>

<title>Secure Login with Saved Card</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600&family=Poppins:wght@300;400;500;600&display=swap');

:root {

--primary-color: #4361ee;

--secondary-color: #3a0ca3;

--dark-color: #1a1a2e;

--light-color: #f8f9fa;

--success-color: #4cc9f0;

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

body {

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

background-color: #f5f7fa;

color: #333;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

padding: 20px;

}

.login-container {

display: flex;

max-width: 1000px;

width: 100%;

background: white;

border-radius: 20px;

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

overflow: hidden;

}

.login-form {

flex: 1;

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

}

.card-display {

flex: 1;

background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

padding: 40px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

color: white;

}

.logo {

text-align: center;

margin-bottom: 30px;

}

.logo img {

height: 50px;

}

h1 {

font-size: 24px;

margin-bottom: 10px;

font-weight: 600;

}

.subtitle {

color: #666;

margin-bottom: 30px;

font-size: 14px;

}

.form-group {

margin-bottom: 20px;

}

label {

display: block;

margin-bottom: 8px;

font-size: 14px;

font-weight: 500;

}

input {

width: 100%;

padding: 12px 15px;

border: 1px solid #ddd;

border-radius: 8px;

font-size: 14px;

transition: all 0.3s;

}

input:focus {

outline: none;

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

box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);

}

.remember-me {

display: flex;

align-items: center;

margin-bottom: 20px;

}

.remember-me input {

width: auto;

margin-right: 10px;

}

.remember-me label {

margin-bottom: 0;

}

button {

width: 100%;

padding: 12px;

background: var(--primary-color);

color: white;

border: none;

border-radius: 8px;

font-size: 16px;

font-weight: 500;

cursor: pointer;

transition: all 0.3s;

}

button:hover {

background: var(--secondary-color);

transform: translateY(-2px);

}

.forgot-password {

text-align: center;

margin-top: 20px;

}

.forgot-password a {

color: var(--primary-color);

text-decoration: none;

font-size: 14px;

}

/* Card styles */

.card-container {

perspective: 1000px;

width: 100%;

max-width: 400px;

margin-bottom: 30px;

}

.card {

width: 100%;

height: 240px;

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: 15px;

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, var(--dark-color), #16213e);

transform: rotateY(0deg);

}

.card-back {

background: linear-gradient(135deg, #16213e, var(--dark-color));

transform: rotateY(180deg);

}

.flipped {

transform: rotateY(180deg);

}

.card-logo {

display: flex;

justify-content: flex-end;

margin-bottom: 20px;

}

.card-logo img {

height: 40px;

}

.card-number {

font-family: 'Source Code Pro', monospace;

font-size: 22px;

letter-spacing: 3px;

margin-bottom: 30px;

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

word-spacing: 8px;

}

.card-details {

display: flex;

justify-content: space-between;

}

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

}

.card-magnetic-strip {

height: 40px;

background: #000;

margin-top: 20px;

margin-bottom: 15px;

}

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

}

.cvv-strip {

background: #fff;

color: #333;

padding: 5px 10px;

border-radius: 3px;

font-size: 14px;

width: 60px;

text-align: center;

}

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

}

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

}

.saved-card-label {

margin-bottom: 15px;

font-size: 14px;

opacity: 0.9;

}

.card-actions {

display: flex;

justify-content: space-between;

margin-top: 20px;

width: 100%;

max-width: 400px;

}

.card-btn {

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

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

color: white;

padding: 8px 15px;

border-radius: 6px;

font-size: 13px;

cursor: pointer;

transition: all 0.3s;

}

.card-btn:hover {

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

}

@media (max-width: 768px) {

.login-container {

flex-direction: column;

}

.card-display {

order: -1;

padding: 30px;

}

.login-form {

padding: 30px;

}

</style>

</head>

<body>

</div>

<h1>A3 MANAJEMEN PAY</h1>

<p class="subtitle">Masukkan email aktif agar pembayaran tidak terkendala</p>

<label for="username">Email atau pengguna</label>

</div>

<label for="password">Password</label>

</div>

<label for="remember">Remember me</label>

</div>

<a href="#">Situs ini Legal. apabila terkendala coba masukkan email dengan benar</a>

</div>

</form>

</div>

<h2>PEMBAYARAN LEBIH CEPAT DAN MUDAH</h2>

<p class="saved-card-label">TAMBAHKAN DEBITMU DISINI</p>

</div>

<span class="card-label">Card Holder priority</span>

<span class="card-value">MUHAMMAD HAZRADY WIJAYA</span>

</div>

<span class="card-label">VALID THRU MONTH/YEAR</span>

</div>

</div>

</div>

<div class="card-issuer">This card is issued by MyBank under license from Mastercard International</div>

</div>

<button class="card-btn">Bayar Disini</button>

<button class="card-btn">Tambahkan Kartu Debit</button>

</div>

// Add tilt effect to card

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

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

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

const cardRect = cardContainer.getBoundingClientRect();

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

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

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

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

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

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

}

});

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

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

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

}

});

// Form submission

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

e.preventDefault();

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

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

// Here you would typically send this to your server

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

// Simulate successful login

alert('Login successful! Redirecting to your account...');

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

});

</script>

</body>

</html>

Formulaire de connexion avec affichage de la carte et interface de paiement

Recommandé

Un code de Metr

Animation d'orbite infinie avec trigonométrie CSS

Produits de cartes

HTML

CSS

JS

Recommandé

Un code de Metr

Animation d'orbite infinie avec trigonométrie CSS

Produits de cartes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS