Modello HTML del dashboard dell'atelier di alta moda

128 houessoueros3

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Modello HTML del dashboard dell'atelier di alta moda

Consigliato

28 February 2025

modulo di registrazione/accesso all'animazione

6 June 2025

Un codice di yuhhxn

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>

Modello HTML del dashboard dell'atelier di alta moda

Consigliato

modulo di registrazione/accesso all'animazione

SCHEDA DI CONNESSIONE

Un codice di yuhhxn

HTML

CSS

JS

Consigliato

modulo di registrazione/accesso all'animazione

SCHEDA DI CONNESSIONE

Un codice di yuhhxn

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS