Modelo HTML de painel do Atelier de Alta Costura

323 houessoueros3

Abrir no Editor Publique Seu Código

Modelo HTML de painel do Atelier de Alta Costura

Recomendado

11 July 2025

Menu de alternância CSS com ícones de fonte impressionantes

29 May 2025

Página de Equipes - Design Futurista

17 November 2024

Barra de menu horizontal

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau de Bord - Gestion Atelier Couture</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f7f6;
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
            flex-shrink: 0;
        }
        .sidebar h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #ecf0f1;
        }
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
        .sidebar ul li {
            margin-bottom: 15px;
        }
        .sidebar ul li a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }
        .sidebar ul li a:hover, .sidebar ul li a.active {
            background-color: #34495e;
        }
        .main-content {
            flex-grow: 1;
            padding: 20px;
            overflow-y: auto;
        }
        .header {
            background-color: #ffffff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header h1 {
            margin: 0;
            color: #333;
        }
        .section-card {
            background-color: #ffffff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        .section-card h2 {
            color: #333;
            margin-top: 0;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 15px;
        }
        .section-card p {
            color: #666;
            line-height: 1.6;
        }
        .footer {
            text-align: center;
            padding: 20px;
            color: #888;
            margin-top: auto; /* Pushes footer to the bottom */
            width: 100%;
            box-sizing: border-box; /* Include padding in width calculation */
        }
        .button {
            background-color: #3498db;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .button:hover {
            background-color: #2980b9;
        }
    </style>
</head>
<body>
    <aside class="sidebar">
        <h2>Gestion Atelier</h2>
        <nav>
            <ul>
                <li><a href="#clients" class="active">2.1 Clients Internes</a></li>
                <li><a href="#commandes">2.2 Commandes</a></li>
                <li><a href="#modeles">2.3 Modèles de Couture</a></li>
                <li><a href="#stock">2.4 Tissus et Fournitures</a></li>
                <li><a href="#employes">2.5 Employés / Apprentis</a></li>
                <li><a href="#financier">2.6 Suivi Financier</a></li>
                <li><a href="#notifications">2.7 Notifications Internes</a></li>
                <li><a href="#securite">2.8 Sécurité & Sauvegarde</a></li>
            </ul>
        </nav>
    </aside>

<div class="main-content">
        <header class="header">
            <h1>Tableau de Bord</h1>
            <button class="button">Ajouter une commande</button>
        </header>

<section id="clients" class="section-card">
            <h2>2.1 Clients Internes</h2>
            <p><strong>Gestion des clients:</strong> Ajout, modification, suppression. Fiche détaillée (nom, prénom, téléphone, e-mail, mensurations, préférences). Recherche par nom ou téléphone. Historique des commandes passées.</p>
            <p><a href="#" class="button">Voir tous les clients</a></p>
        </section>

<section id="commandes" class="section-card">
            <h2>2.2 Commandes</h2>
            <p><strong>Création de commande:</strong> Client associé, type de vêtement, mensurations, tissu, dates, prix, statut. Vue par filtre (statut, date, client). Statistiques (mensuelles, par statut, par client).</p>
            <p><a href="#" class="button">Gérer les commandes</a></p>
        </section>

<section id="modeles" class="section-card">
            <h2>2.3 Modèles de Couture</h2>
            <p><strong>Galerie de modèles:</strong> Image, nom, description, difficulté, prix indicatif. Ajout/modification/suppression. Association à une commande. Classement par catégorie, saison, popularité. Modèles spécifiques par atelier.</p>
            <p><a href="#" class="button">Explorer les modèles</a></p>
        </section>

<section id="stock" class="section-card">
            <h2>2.4 Tissus et Fournitures</h2>
            <p><strong>Gestion de stock:</strong> Tissus (nom, couleur, métrage), accessoires (boutons, zips). Entrée/sortie de stock. Alertes de seuil critique. Historique de mouvement.</p>
            <p><a href="#" class="button">Gérer le stock</a></p>
        </section>

<section id="employes" class="section-card">
            <h2>2.5 Employés / Apprentis</h2>
            <p><strong>Gestion des profils:</strong> Nom, poste, spécialité. Attribution de commandes. Suivi des productions. Historique de travail par employé.</p>
            <p><a href="#" class="button">Voir les employés</a></p>
        </section>

<section id="financier" class="section-card">
            <h2>2.6 Suivi Financier</h2>
            <p><strong>Paiements:</strong> Acomptes, soldes. Vue mensuelle (revenu, dépenses, bénéfices). Export (PDF, Excel, CSV). Récapitulatif par client, par commande.</p>
            <p><a href="#" class="button">Accéder au suivi financier</a></p>
        </section>

<section id="notifications" class="section-card">
            <h2>2.7 Notifications Internes</h2>
            <p><strong>Alertes:</strong> Livraison dans 48h, stock faible, commandes en retard. Notifications par mail ou via interface.</p>
            <p><a href="#" class="button">Voir les notifications</a></p>
        </section>

<section id="securite" class="section-card">
            <h2>2.8 Sécurité & Sauvegarde</h2>
            <p><strong>Authentification:</strong> Mot de passe ou OTP. Rôles (Admin, Responsable d’atelier, Couturier/Apprenti). Permissions selon rôle. Sauvegarde automatique (Supabase ou stockage externe).</p>
            <p><a href="#" class="button">Gérer les paramètres de sécurité</a></p>
        </section>

Recomendado

Menu de alternância CSS com ícones de fonte impressionantes

Página de Equipes - Design Futurista

Barra de menu horizontal

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS