Webleb - Extraits de Code

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>

Connexion 3D

Recommandé

Un code de Mete Han

Un code par alejandrokundrah

Lien animé en survol

HTML

CSS

JS

Recommandé

Un code de Mete Han

Un code par alejandrokundrah

Lien animé en survol

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS