Plantilla HTML del panel de control de Couture Atelier

1027 houessoueros3

Abrir en el editor Video Publica tu código

Plantilla HTML del panel de control de Couture Atelier

Recomendado

7 August 2025

Emoji SVG de ojos saltones con seguimiento de ratón

19 March 2025

Animación de sombra de texto

27 January 2025

Un sitio de periódico responsivo

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>

Plantilla HTML del panel de control de Couture Atelier

Recomendado

Emoji SVG de ojos saltones con seguimiento de ratón

Animación de sombra de texto

Un sitio de periódico responsivo

HTML

CSS

JS

Recomendado

Emoji SVG de ojos saltones con seguimiento de ratón

Animación de sombra de texto

Un sitio de periódico responsivo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS