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é

Jardin des glitchs

Effet de survol de bouton animé CSS

Carte météo animée

HTML

CSS

JS

Recommandé

Jardin des glitchs

Effet de survol de bouton animé CSS

Carte météo animée

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS