Webdesign

Prompt

Agis comme un UI/UX designer et développeur front-end senior expert en dashboards d'hébergement cloud, réseaux et télécoms. Je souhaite prototyper l'interface complète d'un panel de gestion et d'administration pour **Fictive-Host** (hébergement d'infrastructure : VPS, serveurs de jeux, hébergement web, transit IP/AS). --- ### Identité Visuelle & Branding - **Marque :** Fictive-Host - Palette de couleurs: | Rôle | Couleur | Hex | | ------------------- | ----------------- | --------- | | 🖤 Background | Noir doux | `#0D0D0F` | | ◼️ Surface | Gris très sombre | `#151518` | | ◼️ Surface 2 | Gris sombre | `#1C1C21` | | ▫️ Border | Gris violet | `#2A2930` | | 🟣 Violet sombre | Accent secondaire | `#4C3A72` | | 🟣 Violet | Accent principal | `#6D4AFF` | | 🟣 Violet clair | Hover / focus | `#8B6CFF` | | ⚪ Texte principal | Blanc cassé | `#E8E7EC` | | 🔘 Texte secondaire | Gris | `#A6A4AE` | | 🔘 Texte discret | Gris sombre | `#6F6D78` | - Font: Moderne (type Space Grotesk) - **Ambiance générale :** Écosystème sombre moderne, sobre, orienté infrastructure réseau et haute disponibilité. --- ### Objectif Génère **une propositions de template visuel** pour comparer l'ergonomie, la hiérarchie de l'information et la direction artistique. - **Important :** Ne développe aucune logique métier ni backend (aucun appel API, aucun JS complexe). L'objectif est 100 % visuel et structurel (layouts, composants réutilisables, mockups complets). Reste loins des gradiants et autres effets CSS donnant l'impression d'AI Slop --- ### Périmètre à couvrir pour chaque proposition Chaque proposition doit structurer deux vues complètes : #### 1. Vue Espace Client - **En-tête & Synthèse :** Salutation, statut global du compte, crédits/solde, alertes réseau en cours. - **Grille de services actifs peuplée avec du contenu réaliste :** - **VPS Cloud :** `vps-fr-01.fictive-host.net` — 4 vCPU, 8 Go RAM, 80 Go NVMe, IPv4 `185.x.x.x` + IPv6 `2a0b:...`, OS : Debian 12, statut : *En ligne*. - **Serveur de Jeu :** `Minecraft Paper 1.21` — 6 Go RAM, 2 vCPU, 24/50 slots, port `25565`, statut : *Actif*. - **Hébergement Web :** `mondomaine.fr` — Quota disque 14.2 / 50 Go, 3 bases MariaDB, certificat Let's Encrypt valide, statut : *Actif*. - **Actions rapides :** Boutons d'action clairs (Console VNC/Web, Reboot, Factures, Ouvrir un ticket). #### 2. Vue Administration / Gestion - **Métriques d'infrastructure globale :** Charge CPU/RAM du cluster, transit réseau agrégé (Gbps entrant/sortant), état des hyperviseurs. - **Tableau de bord des nœuds/hyperviseurs :** Nom du nœud (ex: `node01.rbx`), charge, mémoire allouée vs utilisée, ping. - **Gestionnaire des utilisateurs & services :** Liste filtrable avec badges de statut (`running`, `maintenance`, `suspended`, `provisioning`), actions rapides de modération/gestion. --- ### La direction artistique "Modern Minimalist" (Style Cloud / Vercel / Linear) :** - Palette : Thème sombre profond (`zinc-950` / `neutral-900`), bordures ultra fines (`border-neutral-800`), typographie moderne et sans-serif. - Layout : Barre latérale compacte (icônes + tooltips), cartes aérées avec micro-accents lumineux discrets, badges arrondis minimaux. --- ### Format de sortie attendu Fournis pour chaque proposition : 1. Le découpage structurel des composants (Header, Sidebar, Main Grid, Service Card, Status Badge). 2. La maquette complète (soit en code HTML / Tailwind CSS prêt à coller, soit en wireframe structurel précis).

A system prompt was added to support web rendering