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>

Card login

Recommended

Gradient Color on Hover

peek into the function

Animated

HTML

CSS

JS

Recommended

Gradient Color on Hover

peek into the function

Animated

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS