कार्ड लॉगिन

1030 kevekıbhack

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

25 January 2026

रफ़ल प्लेयर के साथ फ़्लैश गेम एम्बेड करें

25 September 2025

पोर्टफोलियो वेबसाइट HTML टेम्पलेट

9 August 2023

सीएसएस सोशल आइकन्स टॉग्लर

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>

</button>

</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 टेम्पलेट

सीएसएस सोशल आइकन्स टॉग्लर

HTML

CSS

JS

अनुशंसित

रफ़ल प्लेयर के साथ फ़्लैश गेम एम्बेड करें

पोर्टफोलियो वेबसाइट HTML टेम्पलेट

सीएसएस सोशल आइकन्स टॉग्लर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS