Modèle HTML de tableau de bord Couture Atelier

472 houessoueros3

Ouvrir dans l'éditeur Publiez votre code

Modèle HTML de tableau de bord Couture Atelier

Recommandé

15 September 2024

Formulaire de connexion animé

21 September 2024

Ajouter un bouton pour ouvrir l'ajout de données de profil avec validation

17 March 2025

CodePen Home Cipher Quest : Décrypteur de code

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>

Modèle HTML de tableau de bord Couture Atelier

Recommandé

Formulaire de connexion animé

Ajouter un bouton pour ouvrir l'ajout de données de profil avec validation

CodePen Home Cipher Quest : Décrypteur de code

HTML

CSS

JS

Recommandé

Formulaire de connexion animé

Ajouter un bouton pour ouvrir l'ajout de données de profil avec validation

CodePen Home Cipher Quest : Décrypteur de code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS