diff --git a/src/components/Card.astro b/src/components/Card.astro index 92e2720..385be49 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -132,13 +132,28 @@ const currentBiome = biomes[autoBiome] || biomes.SAVANE; const circleSummaries = Object.entries(counts) .filter(([_, count]) => count > 0) - .map(([type, count]) => ({ - type, - count, - dominance: - manifestations?.find((m) => m.cercle === type && m.type)?.type || - "neu", - })); + .map(([type, count]) => { + // Calcul du score de dominance pour ce cercle précis + const circleScore = + manifestations + ?.filter((m) => m.cercle === type) + .reduce((acc, m) => { + if (m.type === "pos") return acc + 1; + if (m.type === "neg") return acc - 1; + return acc; + }, 0) || 0; + + // Détermination de la dominance finale + let dominance = "neu"; + if (circleScore > 0) dominance = "pos"; + if (circleScore < 0) dominance = "neg"; + + return { + type, + count, + dominance, + }; + }); // LAYER AUTO : Les constantes biologiques et calculées const autoLayer = [ @@ -167,11 +182,32 @@ const autoLayer = [ // LAYER MANUEL : Les leviers d'action et ressentis const manualLayer = [ - { label: "Stress ressenti", value: `${stress}/10` }, - { label: "Hygiène foyer", value: `${hygieneScore}/10` }, { - label: "Harmonie globale", + label: "Stress", + value: `${stress}/10`, + // Un stress à 6+ (ton cas aujourd'hui) passe en alerte + status: stress >= 8 ? "critique" : stress >= 6 ? "alerte" : "stable", + }, + { + label: "Hygiène", + value: `${hygieneScore}/10`, + status: + hygieneScore <= 3 + ? "critique" + : hygieneScore < 6 + ? "bas" + : "normal", + }, + { + label: "Harmonie", value: harmonyScore > 0 ? `+${harmonyScore}` : harmonyScore, + // Une harmonie négative est une alerte sur l'équilibre des cercles + status: + harmonyScore < 0 + ? "alerte" + : harmonyScore >= 4 + ? "stable" + : "normal", }, ]; --- @@ -244,7 +280,7 @@ const manualLayer = [
{ manualLayer.map((stat) => ( -
+
{stat.label} {stat.value}
diff --git a/src/components/EventCard.astro b/src/components/EventCard.astro index 2e01899..90e0287 100644 --- a/src/components/EventCard.astro +++ b/src/components/EventCard.astro @@ -14,7 +14,7 @@ const { image, } = frontmatter; -// Définition des couleurs par catégorie [cite: 93, 94, 95, 96] +// Définition des couleurs par catégorie const categoryColors = { Festival: "#f59e0b", IRL: "#a1be18", @@ -27,16 +27,47 @@ const categoryColors = { }; const accentColor = categoryColors[type] || categoryColors["default"]; + +// --- LOGIQUE DE NOTIFICATION DE STATUT --- +const today = new Date(); +const eventDate = new Date(date); + +// Mise à zéro des heures pour comparer uniquement les jours +today.setHours(0, 0, 0, 0); +const compareDate = new Date(eventDate); +compareDate.setHours(0, 0, 0, 0); + +const diffTime = compareDate - today; +const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + +let dynamicStatus = { label: status, color: "rgba(255,255,255,0.3)", icon: "" }; + +if (status === "Terminé") { + dynamicStatus = { label: "Terminé", color: "#10b981" }; +} else if (diffDays < 0) { + dynamicStatus = { label: "En retard", color: "#ef4444" }; +} else if (diffDays === 0) { + dynamicStatus = { label: "Aujourd'hui", color: "#3b82f6" }; +} else if (diffDays > 0 && diffDays <= 7) { + dynamicStatus = { label: "Imminent", color: "#f59e0b" }; +} ---
{type.toUpperCase()} - {status} + + { + dynamicStatus.icon && ( + {dynamicStatus.icon} + ) + } + {dynamicStatus.label} +
@@ -45,7 +76,9 @@ const accentColor = categoryColors[type] || categoryColors["default"];
- Projet détecté le : {target_date} + Prévu le : {new Date(date).toLocaleDateString("fr-FR")}
@@ -67,9 +100,9 @@ const accentColor = categoryColors[type] || categoryColors["default"];
@@ -78,45 +111,76 @@ const accentColor = categoryColors[type] || categoryColors["default"]; .event-card { width: 320px; height: 480px; - /* Utilisation de la couleur dynamique [cite: 6, 61] */ background-color: var(--accent-color); border-radius: 18px; padding: 12px; font-family: "Philosopher", serif; color: rgba(0, 0, 0, 0.7); transition: background 0.3s ease; - position: relative; /* Important pour le contexte d'affichage */ + position: relative; background-size: cover; background-position: center; } - /* Style spécifique quand il y a une image de fond */ - .event-card.has-bg { - color: #fff; /* Texte blanc pour meilleure lisibilité sur image */ - text-shadow: 1px 1px 1px rgba(0,0,0,1); /* Ombre portée pour contraste */ - background-image: linear-gradient( + + .event-card.has-bg { + color: #fff; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); + background-image: + linear-gradient( to bottom, - rgba(0, 0, 0, 0.0) 0%, /* Assombrir le haut de l'image */ - rgba(0, 0, 0, 0.1) 100% /* Assombrir le bas de l'image */ - ), var(--bg-image) !important; - } + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 0.1) 100% + ), + var(--bg-image) !important; + } + .card-inner { - height: 100%;/* Bordure plus claire sur fond foncé */ + height: 100%; border-radius: 10px; display: flex; flex-direction: column; padding: 12px; background: linear-gradient( - rgba(0, 0, 0, 0.1) 0%, /* Assombrir le haut de l'image */ - rgba(0, 0, 0, 0.1) 70%, /* Assombrir le haut de l'image */ - rgba(0, 0, 0, 0.3) 100%) + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0.1) 70%, + rgba(0, 0, 0, 0.3) 100% + ); } + .event-header { display: flex; justify-content: space-between; + align-items: center; font-size: 0.7rem; font-weight: bold; letter-spacing: 1px; } + + /* Style du nouveau badge de notification */ + .status-notification { + background: var(--status-bg); + color: white; + padding: 2px 10px; + border-radius: 5px; + font-size: 0.6rem; + text-transform: uppercase; + display: flex; + align-items: center; + gap: 5px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + text-shadow: none; + } + + @keyframes blink { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } + } + .event-art { flex: 1; border: 1px solid rgba(0, 0, 0, 0.1); @@ -129,74 +193,86 @@ const accentColor = categoryColors[type] || categoryColors["default"]; text-align: center; padding: 10px; } + .event-card.has-bg .event-art { - border: 1px solid rgba(0,0,0, 0.1); /* Bordure plus claire sur fond foncé */ + border: 1px solid rgba(0, 0, 0, 0.1); } + .event-title { font-size: 1.4rem; margin: 5px 0; } - .event-title-overlay { - font-size: 1.4rem; [cite: 16] - margin-bottom: 10px; - text-shadow: 1px 1px 4px rgba(0,0,0,0.8); /* Ombre portée foncée pour le contraste */ - } + .location-tag { font-size: 0.7rem; opacity: 0.9; } + .event-card.has-bg .location-tag { - opacity: 1; /* Assurer pleine opacité sur fond foncé */ + opacity: 1; } + .event-info-line { font-size: 0.8rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 5px; margin-bottom: 10px; } + .event-card.has-bg .event-info-line { - border-bottom: 1px solid rgba(0,0,0, 0.1); /* Bordure plus claire sur fond foncé */ + border-bottom: 1px solid rgba(0, 0, 0, 0.1); } + .event-body { flex: 1.2; font-size: 0.85rem; } + .event-type { text-transform: uppercase; background: rgba(255, 255, 255, 0.3); padding: 2px 8px; border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + .event-card.has-bg .event-type { - background: rgba(0, 0, 0, 0.4); /* Fond plus foncé pour le badge sur image */ - text-shadow: none; /* Pas d'ombre portée sur éléments avec fond */ + background: rgba(0, 0, 0, 0.4); + text-shadow: none; } + .summary { font-style: italic; line-height: 1.4; margin-bottom: 10px; } + .participants-box .label { font-size: 0.65rem; text-transform: uppercase; display: block; margin-bottom: 5px; } + .tags { display: flex; flex-wrap: wrap; gap: 4px; } + .p-tag { background: rgba(255, 255, 255, 0.2); padding: 2px 6px; border-radius: 4px; font-size: 0.65rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + .event-card.has-bg .p-tag { - background: rgba(0, 0, 0, 0.4); /* Fond plus foncé pour les tags sur image */ - text-shadow: none; /* Pas d'ombre portée sur éléments avec fond */ + background: rgba(0, 0, 0, 0.4); + text-shadow: none; } + .event-footer { display: flex; justify-content: space-between; @@ -204,14 +280,17 @@ const accentColor = categoryColors[type] || categoryColors["default"]; font-size: 0.7rem; padding-top: 10px; } + .social-impact { background: #ffffff80; padding: 2px 8px; border-radius: 5px; font-weight: bold; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + .event-card.has-bg .social-impact { - background: rgba(0, 0, 0, 0.4); /* Fond plus foncé sur image */ - text-shadow: none; /* Pas d'ombre portée sur éléments avec fond */ + background: rgba(0, 0, 0, 0.4); + text-shadow: none; }