Webleb - UI Elements

HTML

CSS

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

Validating your code, please wait...

HTML

CSS

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