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

JS

अनुशंसित

निऑन ग्रेडिएंट टेक्स्ट

स्पेशल राउंड्स वाला जावास्क्रिप्ट पिंग पोंग गेम

पंजा मशीन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS