Webleb - कोड स्निपेट्स - कार्ड लॉगिन

HTML

<!DOCTYPE html>

<head>

<title>3D Card Login & Register</title>

<style>

body {

margin: 0;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: linear-gradient(135deg, #74ebd5, #acb6e5);

font-family: Arial, sans-serif;

}

.container {

perspective: 1000px;

}

.card {

background: #fff;

padding: 2rem;

border-radius: 10px;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

width: 300px;

text-align: center;

transition: transform 0.3s ease;

}

.card:hover {

transform: translateZ(20px);

}

h2 {

margin-bottom: 1.5rem;

color: #333;

}

.input-group {

margin-bottom: 1rem;

text-align: left;

}

label {

display: block;

margin-bottom: 0.5rem;

color: #555;

}

input {

width: 100%;

padding: 0.5rem;

border: 1px solid #ccc;

border-radius: 5px;

font-size: 1rem;

}

button {

width: 100%;

padding: 0.75rem;

background: #007bff;

color: #fff;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 1rem;

margin-top: 0.5rem;

}

button:hover {

background: #0056b3;

}

.social-btn {

background: #fff;

color: #333;

border: 1px solid #ccc;

display: flex;

align-items: center;

justify-content: center;

gap: 0.5rem;

}

.social-btn:hover {

background: #f0f0f0;

}

.error {

color: red;

font-size: 0.9rem;

margin-top: 1rem;

}

.toggle {

margin-top: 1rem;

color: #007bff;

cursor: pointer;

text-decoration: underline;

}

.toggle:hover {

color: #0056b3;

}

</style>

</head>

<body>

<h2 id="formTitle">Login</h2>

<label for="username">Username</label>

</div>

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

</div>

<button type="submit">Login</button>

</div>

<label for="regUsername">Username</label>

</div>

<label for="regEmail">Email or Phone</label>

</div>

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

</div>

<button type="submit">Register</button>

Register with Gmail

</button>

Register with Phone

</button>

</div>

</form>

<p class="toggle" onclick="toggleForm()">Switch to <span id="toggleText">Register</span></p>

</div>

// 3D Tilt Effect

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

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

const rect = card.getBoundingClientRect();

const x = e.clientX - rect.left;

const y = e.clientY - rect.top;

const centerX = rect.width / 2;

const centerY = rect.height / 2;

const tiltX = (y - centerY) / 10;

const tiltY = -(x - centerX) / 10;

card.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg) translateZ(20px)`;

});

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

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

});

// Toggle between Login and Register

let isLogin = true;

function toggleForm() {

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

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

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

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

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

isLogin = !isLogin;

formTitle.textContent = isLogin ? 'Login' : 'Register';

loginFields.style.display = isLogin ? 'block' : 'none';

registerFields.style.display = isLogin ? 'none' : 'block';

toggleText.textContent = isLogin ? 'Register' : 'Login';

error.textContent = '';

}

// Form Submission

function handleSubmit(event) {

event.preventDefault();

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

if (isLogin) {

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

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

if (!username || !password) {

error.textContent = 'Please fill in all fields';

return;

}

if (password.length < 6) {

error.textContent = 'Password must be at least 6 characters';

return;

}

error.textContent = '';

alert('Login successful!');

// Add login API call here

} else {

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

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

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

const emailRegex = /^[^\s@]+@gmail\.com$/;

const phoneRegex = /^\+?\d{10,12}$/;

if (!regUsername || !regEmail || !regPassword) {

error.textContent = 'Please fill in all fields';

return;

}

if (!emailRegex.test(regEmail) && !phoneRegex.test(regEmail)) {

error.textContent = 'Please enter a valid Gmail or phone number';

return;

}

if (regPassword.length < 6) {

error.textContent = 'Password must be at least 6 characters';

return;

}

error.textContent = '';

alert('Registration successful!');

// Add registration API call here

}

// Social Registration Handlers

function registerWithGmail() {

alert('Redirecting to Gmail authentication...');

// Implement Gmail OAuth redirect here (e.g., using Google API)

}

function registerWithPhone() {

alert('Redirecting to phone verification...');

// Implement phone verification (e.g., SMS OTP service)

}

</script>

</body>

</html>

कार्ड लॉगिन

अनुशंसित

कोडपेन होम प्रीमियम रिस्पॉन्सिव नेवबार

HTML CSS आधुनिक नेवबार

डार्क लाइट स्विच बटन.

HTML

CSS

JS

अनुशंसित

कोडपेन होम प्रीमियम रिस्पॉन्सिव नेवबार

HTML CSS आधुनिक नेवबार

डार्क लाइट स्विच बटन.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS