Webleb - Extraits de Code - Formulaire de connexion et d'inscription à la gestion culinaire

HTML

<!DOCTYPE html>

<head>

<title>Culinary Management Systems | Login</title>

<style>

:root {

/* Palette: Deep Charcoal, Gold, White, Slate */

--bg-overlay: rgba(18, 18, 18, 0.75);

--glass-bg: rgba(255, 255, 255, 0.1);

--glass-border: rgba(255, 255, 255, 0.2);

--gold: #C5A059;

--gold-hover: #b08d4b;

--white: #ffffff;

--gray: #ccc;

--dark-gray: #1a1a1a;

--max-width: 900px;

--max-height: 550px;

--radius: 12px;

}

* {

box-sizing: border-box;

}

body {

font-family: 'Lato', sans-serif;

margin: 0;

padding: 0;

display: grid;

place-items: center;

height: 100vh;

/* Culinary Background Image */

background: url("https://images.unsplash.com/photo-1559339352-11d035aa65de?q=80&w=1974&auto=format&fit=crop");

background-size: cover;

background-position: center;

background-repeat: no-repeat;

color: var(--white);

overflow: hidden;

}

/* Dark overlay to make text pop and add mood */

body::before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);

z-index: -1;

}

/* Titles */

h1, h2, h3 {

font-family: 'Playfair Display', serif;

font-weight: 600;

margin: 0;

}

.form__title {

margin-bottom: 1.5rem;

font-size: 2rem;

color: var(--dark-gray);

}

.container {

background-color: var(--white);

border-radius: var(--radius);

box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);

position: relative;

overflow: hidden;

width: 90%;

max-width: var(--max-width);

min-height: var(--max-height);

}

.container__form {

position: absolute;

top: 0;

height: 100%;

transition: all 0.6s ease-in-out;

}

.container--signin {

left: 0;

width: 50%;

z-index: 2;

}

.container.right-panel-active .container--signin {

transform: translateX(100%);

}

.container--signup {

left: 0;

width: 50%;

opacity: 0;

z-index: 1;

}

.container.right-panel-active .container--signup {

transform: translateX(100%);

opacity: 1;

z-index: 5;

animation: show 0.6s;

}

@keyframes show {

0%, 49.99% { opacity: 0; z-index: 1; }

50%, 100% { opacity: 1; z-index: 5; }

}

.container__overlay {

position: absolute;

top: 0;

left: 50%;

width: 50%;

height: 100%;

overflow: hidden;

transition: transform 0.6s ease-in-out;

z-index: 100;

}

.container.right-panel-active .container__overlay {

transform: translateX(-100%);

}

.overlay {

background: #1a1a1a;

/* Secondary elegant background for the slider panel */

background: linear-gradient(rgba(26, 26, 26, 0.85), rgba(26, 26, 26, 0.95)),

url("https://images.unsplash.com/photo-1414235077428-338989a2e8c0?q=80&w=2070&auto=format&fit=crop");

background-repeat: no-repeat;

background-size: cover;

background-position: center;

color: var(--white);

position: relative;

left: -100%;

height: 100%;

width: 200%;

transform: translateX(0);

transition: transform 0.6s ease-in-out;

}

.container.right-panel-active .overlay {

transform: translateX(50%);

}

.overlay__panel {

position: absolute;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 0 40px;

text-align: center;

top: 0;

height: 100%;

width: 50%;

transform: translateX(0);

transition: transform 0.6s ease-in-out;

}

.overlay--left {

transform: translateX(-20%);

}

.container.right-panel-active .overlay--left {

transform: translateX(0);

}

.overlay--right {

right: 0;

transform: translateX(0);

}

.container.right-panel-active .overlay--right {

transform: translateX(20%);

}

.form {

background-color: var(--white);

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

padding: 0 50px;

height: 100%;

text-align: center;

}

.input {

background-color: #f3f3f3;

border: 1px solid #ddd;

padding: 12px 15px;

margin: 8px 0;

width: 100%;

border-radius: 4px;

font-family: 'Lato', sans-serif;

transition: border-color 0.3s;

}

.input:focus {

outline: none;

border-color: var(--gold);

}

.btn {

border-radius: 25px;

border: 1px solid var(--gold);

background-color: var(--gold);

color: var(--white);

font-size: 12px;

font-weight: bold;

padding: 12px 45px;

letter-spacing: 1px;

text-transform: uppercase;

transition: transform 80ms ease-in, background-color 0.3s;

cursor: pointer;

margin-top: 1rem;

font-family: 'Lato', sans-serif;

}

.btn:hover {

background-color: var(--gold-hover);

border-color: var(--gold-hover);

}

.btn:active {

transform: scale(0.95);

}

.btn--ghost {

background-color: transparent;

border-color: var(--white);

}

.btn--ghost:hover {

background-color: rgba(255,255,255,0.1);

}

.link {

color: #333;

font-size: 14px;

text-decoration: none;

margin: 15px 0;

border-bottom: 1px dashed transparent;

transition: all 0.3s;

}

.link:hover {

color: var(--gold);

border-bottom: 1px dashed var(--gold);

}

.overlay-title {

font-size: 2.5rem;

margin-bottom: 1rem;

}

.overlay-text {

font-size: 1rem;

line-height: 1.5;

margin-bottom: 2rem;

font-weight: 300;

}

/* Dashboard (Hidden by default) */

#dashboard {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #f4f7f6;

z-index: 1000;

overflow-y: auto;

color: #333;

}

.dash-nav {

background: var(--dark-gray);

color: white;

padding: 1rem 2rem;

display: flex;

justify-content: space-between;

align-items: center;

}

.dash-logo {

font-family: 'Playfair Display', serif;

font-size: 1.5rem;

color: var(--gold);

}

.dash-content {

padding: 2rem;

max-width: 1200px;

margin: 0 auto;

}

.welcome-banner {

background: linear-gradient(90deg, var(--dark-gray) 0%, #2c3e50 100%);

color: white;

padding: 3rem;

border-radius: 12px;

margin-bottom: 2rem;

position: relative;

overflow: hidden;

}

.stats-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 1.5rem;

}

.stat-card {

background: white;

padding: 1.5rem;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0,0,0,0.05);

border-left: 4px solid var(--gold);

}

.stat-value {

font-size: 2rem;

font-weight: bold;

color: var(--dark-gray);

margin: 0.5rem 0;

}

/* Mobile Responsive */

@media (max-width: 768px) {

.container {

min-height: 400px;

width: 95%;

}

.form {

padding: 0 20px;

}

.overlay-title {

font-size: 1.8rem;

}

</style>

</head>

<body>

<h2 class="form__title">Join the Kitchen</h2>

<button class="btn">Create Account</button>

</form>

</div>

<h2 class="form__title">Chef Login</h2>

<a href="#" class="link">Forgot your password?</a>

<button class="btn">Access Dashboard</button>

</form>

</div>

<h2 class="overlay-title">Welcome Back</h2>

<p class="overlay-text">To stay connected with the back-of-house operations, please login with your personnel ID.</p>

</div>

<h2 class="overlay-title">Culinary Mgmt</h2>

<p class="overlay-text">Enter your details and start your journey towards gastronomic efficiency and masterclass management.</p>

</div>

<div class="dash-logo">Mise en Place Systems</div>

</nav>

<h1>Executive Chef Dashboard</h1>

<p>Service begins in 2 hours. Inventory is at 94%.</p>

</div>

<small>Reservations (Tonight)</small>

</div>

<span style="color: green;">Within target range</span>

</div>

<small>Active Tickets</small>

<span>Prep phase active</span>

</div>

<small>Staff On Clock</small>

<span>Full brigade present</span>

</div>

// DOM Elements

const signInBtn = document.querySelector("#signIn");

const signUpBtn = document.querySelector("#signUp");

const form1 = document.querySelector("#form1");

const form2 = document.querySelector("#form2");

const container = document.querySelector(".container");

const dashboard = document.querySelector("#dashboard");

const loginContainer = document.querySelector("#loginContainer");

const logoutBtn = document.querySelector("#logoutBtn");

// Auth State Check

function checkAuth() {

const token = localStorage.getItem("token");

if (token && token !== "") {

showDashboard();

} else {

showLogin();

}

// Toggle Views

function showDashboard() {

loginContainer.style.display = "none";

dashboard.style.display = "block";

}

function showLogin() {

loginContainer.style.display = "block"; // Note: This might need flex if using flexbox, but container has no specific display rule that breaks block

dashboard.style.display = "none";

}

// Event Listeners for Slider

signInBtn.addEventListener("click", () => {

container.classList.remove("right-panel-active");

});

signUpBtn.addEventListener("click", () => {

container.classList.add("right-panel-active");

});

// Form Handling

form1.addEventListener("submit", (e) => {

e.preventDefault();

// Simulate Sign Up

alert("This is a concept demo. Please use the Sign In panel with the pre-filled credentials.");

});

form2.addEventListener("submit", (e) => handleLogin(e));

logoutBtn.addEventListener("click", () => {

localStorage.removeItem("token");

location.reload(); // Clean refresh

});

// Login Logic

async function handleLogin(e) {

e.preventDefault();

const submitBtn = e.target.querySelector("button");

const originalText = submitBtn.innerText;

submitBtn.innerText = "Authenticating...";

submitBtn.disabled = true;

const emailInput = e.target.querySelector("input[type='text']");

const passwordInput = e.target.querySelector("input[type='password']");

const email = emailInput.value;

const password = passwordInput.value;

if (!email || !password) {

alert("Please enter both username and password.");

submitBtn.innerText = originalText;

submitBtn.disabled = false;

return;

}

try {

// Using the same endpoint as your original code

const response = await fetch("https://fakestoreapi.com/auth/login", {

method: "POST",

headers: {

"Content-Type": "application/json",

},

body: JSON.stringify({

username: email,

password: password,

}),

});

if (!response.ok) {

throw new Error("Login failed! Please check your credentials.");

}

const data = await response.json();

localStorage.setItem("token", data.token);

// Show success UI instead of generic alert

submitBtn.innerText = "Success!";

setTimeout(() => {

showDashboard();

submitBtn.innerText = originalText;

submitBtn.disabled = false;

}, 800);

} catch (error) {

console.error(error);

alert(error.message);

submitBtn.innerText = originalText;

submitBtn.disabled = false;

}

// Initialize

checkAuth();

</script>

</body>

</html>

Formulaire de connexion et d'inscription à la gestion culinaire

Recommandé

Modèle HTML de portfolio personnel

Carte 3D

Extrait d'animation de mémoire CSS

HTML

CSS

JS

Recommandé

Modèle HTML de portfolio personnel

Carte 3D

Extrait d'animation de mémoire CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS