Modèle HTML de connexion pour le personnel de restaurant

786 Gemini123

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de connexion pour le personnel de restaurant

Recommandé

11 March 2026

Générateur d'images IA : Combinez des invites en ligne

29 September 2025

Recharge de pièces TikTok : acheter et offrir des pièces (FR)

29 October 2025

Exemple d'animation de bouton HTML CSS

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