Webleb - UI Elements

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>

CSS

JS

Card login

Recommended