Modèle HTML de connexion pour le personnel de restaurant

857 Gemini123

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de connexion pour le personnel de restaurant

Recommandé

10 December 2025

Code source JavaScript du jeu Snake sur Canvas HTML

25 November 2025

Route de l'évasion

7 August 2025

CSS Loader Spinner : HTML simple

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Staff Login</title>
    <style>
        :root {
            --primary-color: #e67e22;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
        }

body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                        url('https://images.unsplash.com/photo-1514933651103-005eec06c04b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

.login-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            width: 100%;
            max-width: 400px;
            text-align: center;
        }

.login-card h1 {
            color: var(--dark-color);
            margin-bottom: 5px;
            font-size: 28px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.login-card p {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }

.form-group {
            margin-bottom: 20px;
            text-align: left;
        }

.form-group label {
            display: block;
            margin-bottom: 5px;
            color: var(--dark-color);
            font-weight: 600;
        }

.form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

.form-group input:focus {
            outline: none;
            border-color: var(--primary-color);
        }

.login-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px;
            width: 100%;
            border-radius: 5px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: background 0.3s;
            margin-top: 10px;
        }

.login-btn:hover {
            background-color: #d35400;
        }

.options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            font-size: 13px;
        }

.options a {
            color: var(--primary-color);
            text-decoration: none;
        }

.footer-text {
            margin-top: 30px;
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>

<div class="login-card">
        <h1>Bistro Royale</h1>
        <p>Staff Management Portal</p>
        
        <form action="#">
            <div class="form-group">
                <label for="username">Username or Email</label>
                <input type="text" id="username" name="username" placeholder="Enter your ID" required>
            </div>
            
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password" placeholder="••••••••" required>
            </div>

<div class="options">
                <label>
                    <input type="checkbox"> Remember me
                </label>
                <a href="#">Forgot Password?</a>
            </div>

</body>
</html>

CSS