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é

Modèle de barre de navigation HTML CSS

Animation de la ligne de fréquence cardiaque

Ben Lucas Alves

HTML

CSS

JS

Recommandé

Modèle de barre de navigation HTML CSS

Animation de la ligne de fréquence cardiaque

Ben Lucas Alves

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS