Webleb - UI Elements - Culinary Management Login & Signup Form

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>

CSS

JS

Culinary Management Login & Signup Form

Recommended