Webleb - fragmentos de código - Formulario de inicio de sesión y registro de gestión culinaria

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>

Formulario de inicio de sesión y registro de gestión culinaria

Recomendado

Animación de texto con efecto Glitch

Plantilla de sitio web de aplicaciones

Animación de ojos CSS con fragmento de código

HTML

CSS

JS

Recomendado

Animación de texto con efecto Glitch

Plantilla de sitio web de aplicaciones

Animación de ojos CSS con fragmento de código

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS