Mise en ligne de la version 0.2.0

2026-04-21 14:25:17 +02:00
parent ebee8e106b
commit ba8a503b3e
300 changed files with 35329 additions and 1 deletions
--- a/web/src/app/campaigns/campaign-detail/campaign-detail.component.scss
+++ b/web/src/app/campaigns/campaign-detail/campaign-detail.component.scss
@@ -0,0 +1,203 @@
+.campaign-detail {
+  padding: 2.5rem 2rem;
+}
+
+.detail-header {
+  margin-bottom: 2.5rem;
+
+  h1 {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: white;
+    margin-bottom: 0.5rem;
+  }
+
+  .description {
+    color: #6b7280;
+    font-size: 0.95rem;
+    line-height: 1.6;
+    margin-bottom: 1rem;
+  }
+
+  .meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    background: #1e3a5f;
+    color: #60a5fa;
+    font-size: 0.75rem;
+    font-weight: 600;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    text-decoration: none;
+  }
+
+  // Lien cliquable vers le Lore associé (weak cross-context link).
+  .badge-lore {
+    background: #2d2450;
+    color: #a78bfa;
+    transition: background 0.15s ease;
+
+    &:hover {
+      background: #3d3168;
+      cursor: pointer;
+    }
+  }
+
+  // Cas dégradé : loreId renseigné mais Lore introuvable (supprimé).
+  .badge-lore-missing {
+    background: #3a1e1e;
+    color: #f87171;
+    font-style: italic;
+  }
+}
+
+.detail-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1.5rem;
+
+  .header-texts { flex: 1; min-width: 0; }
+
+  .header-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+
+  // Variante mode édition : champs empilés verticalement.
+  &.edit-mode {
+    flex-direction: column;
+    align-items: stretch;
+
+    .field {
+      display: flex;
+      flex-direction: column;
+      gap: 0.35rem;
+      margin-bottom: 1rem;
+
+      label { color: #9ca3af; font-size: 0.8rem; font-weight: 500; }
+      input, textarea, select {
+        background: #0f172a;
+        border: 1px solid #1f2937;
+        border-radius: 8px;
+        color: white;
+        padding: 0.6rem 0.85rem;
+        font-size: 0.9rem;
+        font-family: inherit;
+
+        &:focus { outline: none; border-color: #6c63ff; }
+      }
+      textarea { resize: vertical; }
+    }
+
+    .header-actions { justify-content: flex-end; }
+  }
+}
+
+// Boutons partagés.
+.btn-primary, .btn-secondary, .btn-danger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s;
+
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+
+.btn-primary   { background: #6c63ff; color: white;  &:hover:not(:disabled) { background: #5b52e0; } }
+.btn-secondary { background: #1f2937; color: #d1d5db; &:hover:not(:disabled) { background: #374151; } }
+.btn-danger    { background: #3a1e1e; color: #f87171; &:hover:not(:disabled) { background: #5a2e2e; } }
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+
+  h2 { color: #d1d5db; font-size: 1rem; font-weight: 600; }
+}
+
+.btn-add {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  background: #6c63ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover { background: #5b52e0; }
+}
+
+.arcs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 1rem;
+}
+
+.arc-card {
+  background: #111827;
+  border: 1px solid #1f2937;
+  border-radius: 10px;
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.2s;
+
+  &:hover { border-color: #6c63ff; transform: translateY(-2px); }
+
+  .arc-icon { color: #6c63ff; }
+  .arc-name  { color: white; font-size: 0.9rem; font-weight: 600; }
+  .arc-meta  { color: #6b7280; font-size: 0.75rem; }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 4rem 2rem;
+  color: #6b7280;
+
+  .empty-icon { color: #374151; }
+  p { font-size: 0.95rem; }
+}
+
+.btn-add-first {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 1.25rem;
+  background: #6c63ff;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.2s;
+
+  &:hover { background: #5b52e0; }
+}