3डी लॉगिन

811 kevekıbhack

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

अनुशंसित

17 September 2024

सरल लॉग इन

1 January 2025

कोडेक्स द्वारा एक कोड

29 May 2025

सामान्य ज्ञान (टेम्पलेट)

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;

overflow: hidden;

}

.container {

perspective: 1200px;

}

.card {

width: 340px;

height: 460px;

transform-style: preserve-3d;

transition: transform 0.8s ease;

position: relative;

}

.face {

position: absolute;

width: 100%;

height: 100%;

background: #fff;

border-radius: 12px;

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

padding: 2rem;

backface-visibility: hidden;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

transform: rotateY(0deg);

}

.back {

transform: rotateY(180deg);

}

.card.flipped {

transform: rotateY(180deg);

}

h2 {

margin-bottom: 1.5rem;

color: #333;

}

.input-group {

margin-bottom: 1rem;

width: 100%;

}

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;

transition: background 0.3s;

}

button:hover {

background: #0056b3;

}

.toggle {

margin-top: 1rem;

color: #007bff;

cursor: pointer;

text-decoration: underline;

}

.toggle:hover {

color: #0056b3;

}

.error {

color: red;

font-size: 0.9rem;

margin-top: 1rem;

}

</style>

</head>

<body>

<h2>Login</h2>

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

</div>

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

</div>

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

</form>

<p class="toggle" onclick="flipCard()">Switch to Register</p>

</div>

<h2>Register</h2>

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

</form>

<p class="toggle" onclick="flipCard()">Switch to Login</p>

</div>

const card = document.getElementById('card3D');

function flipCard() {

card.classList.toggle('flipped');

document.getElementById('errorLogin').textContent = '';

document.getElementById('errorRegister').textContent = '';

}

function handleSubmit(event, isLogin) {

event.preventDefault();

if (isLogin) {

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

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

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

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!');

} else {

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

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

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

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

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 = 'Invalid Gmail or phone number';

return;

}

if (regPassword.length < 6) {

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

return;

}

error.textContent = '';

alert('Registration successful!');

}

</script>

</body>

</html>

3डी लॉगिन

अनुशंसित

सरल लॉग इन

कोडेक्स द्वारा एक कोड

सामान्य ज्ञान (टेम्पलेट)

HTML

CSS

JS

अनुशंसित

सरल लॉग इन

कोडेक्स द्वारा एक कोड

सामान्य ज्ञान (टेम्पलेट)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS