chim1chim2/ambient
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Workflow SI

Browse Source
This commit is contained in:
LATCHIMY Nicolas
2026-02-23 17:59:32 +04:00
parent 85a11c0d2c
commit 278da99c90
2 changed files with 161 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/Card.astro
View File

@@ -132,13 +132,28 @@ const currentBiome = biomes[autoBiome] || biomes.SAVANE;
const circleSummaries = Object.entries(counts) const circleSummaries = Object.entries(counts)
.filter(([_, count]) => count > 0) .filter(([_, count]) => count > 0)
.map(([type, count]) => ({ .map(([type, count]) => {
type, // Calcul du score de dominance pour ce cercle précis
count, const circleScore =
dominance: manifestations
manifestations?.find((m) => m.cercle === type && m.type)?.type || ?.filter((m) => m.cercle === type)
"neu", .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 // LAYER AUTO : Les constantes biologiques et calculées
const autoLayer = [ const autoLayer = [
@@ -167,11 +182,32 @@ const autoLayer = [
// LAYER MANUEL : Les leviers d'action et ressentis // LAYER MANUEL : Les leviers d'action et ressentis
const manualLayer = [ 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, 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 = [
<div class="stats-grid"> <div class="stats-grid">
{ {
manualLayer.map((stat) => ( manualLayer.map((stat) => (
<div class="stat-item"> <div class={`stat-item ${stat.status}`}>
<span class="stat-label">{stat.label}</span> <span class="stat-label">{stat.label}</span>
<span class="stat-value">{stat.value}</span> <span class="stat-value">{stat.value}</span>
</div> </div>

149
src/components/EventCard.astro
View File

@@ -14,7 +14,7 @@ const {
image, image,
} = frontmatter; } = frontmatter;
// Définition des couleurs par catégorie [cite: 93, 94, 95, 96] // Définition des couleurs par catégorie
const categoryColors = { const categoryColors = {
Festival: "#f59e0b", Festival: "#f59e0b",
IRL: "#a1be18", IRL: "#a1be18",
@@ -27,16 +27,47 @@ const categoryColors = {
}; };
const accentColor = categoryColors[type] || categoryColors["default"]; 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" };
}
--- ---
<article <article
class={`event-card ${image ? "has-bg" : ""}`} class={`event-card ${image ? "has-bg" : ""}`}
style={`--accent-color: ${accentColor}; --bg-image: url('${image}');`} style={`--accent-color: ${accentColor}; --bg-image: url('${image}'); --status-bg: ${dynamicStatus.color};`}
> >
<div class="card-inner"> <div class="card-inner">
<header class="event-header"> <header class="event-header">
<span class="event-type">{type.toUpperCase()}</span> <span class="event-type">{type.toUpperCase()}</span>
<span class="event-status">{status}</span> <span class="status-notification">
{
dynamicStatus.icon && (
<span class="status-icon">{dynamicStatus.icon}</span>
)
}
{dynamicStatus.label}
</span>
</header> </header>
<div class="event-art"> <div class="event-art">
@@ -45,7 +76,9 @@ const accentColor = categoryColors[type] || categoryColors["default"];
</div> </div>
<div class="event-info-line"> <div class="event-info-line">
Projet détecté le : <strong>{target_date}</strong> Prévu le : <strong
>{new Date(date).toLocaleDateString("fr-FR")}</strong
>
</div> </div>
<div class="event-body"> <div class="event-body">
@@ -67,9 +100,9 @@ const accentColor = categoryColors[type] || categoryColors["default"];
<footer class="event-footer"> <footer class="event-footer">
<div class="date-recorded"> <div class="date-recorded">
Prévu le : {new Date(date).toLocaleDateString("fr-FR")} Projet détecté le : <strong>{target_date}</strong>
</div> </div>
<div class="social-impact">+3 {circle}</div> <div class="social-impact">{circle}</div>
</footer> </footer>
</div> </div>
</article> </article>
@@ -78,45 +111,76 @@ const accentColor = categoryColors[type] || categoryColors["default"];
.event-card { .event-card {
width: 320px; width: 320px;
height: 480px; height: 480px;
/* Utilisation de la couleur dynamique [cite: 6, 61] */
background-color: var(--accent-color); background-color: var(--accent-color);
border-radius: 18px; border-radius: 18px;
padding: 12px; padding: 12px;
font-family: "Philosopher", serif; font-family: "Philosopher", serif;
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
transition: background 0.3s ease; transition: background 0.3s ease;
position: relative; /* Important pour le contexte d'affichage */ position: relative;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
/* Style spécifique quand il y a une image de fond */
.event-card.has-bg { .event-card.has-bg {
color: #fff; /* Texte blanc pour meilleure lisibilité sur image */ color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,1); /* Ombre portée pour contraste */ text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
background-image: linear-gradient( background-image:
linear-gradient(
to bottom, to bottom,
rgba(0, 0, 0, 0.0) 0%, /* Assombrir le haut de l'image */ rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.1) 100% /* Assombrir le bas de l'image */ rgba(0, 0, 0, 0.1) 100%
), var(--bg-image) !important; ),
} var(--bg-image) !important;
}
.card-inner { .card-inner {
height: 100%;/* Bordure plus claire sur fond foncé */ height: 100%;
border-radius: 10px; border-radius: 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 12px; padding: 12px;
background: linear-gradient( background: linear-gradient(
rgba(0, 0, 0, 0.1) 0%, /* Assombrir le haut de l'image */ rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.1) 70%, /* Assombrir le haut de l'image */ rgba(0, 0, 0, 0.1) 70%,
rgba(0, 0, 0, 0.3) 100%) rgba(0, 0, 0, 0.3) 100%
);
} }
.event-header { .event-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
font-size: 0.7rem; font-size: 0.7rem;
font-weight: bold; font-weight: bold;
letter-spacing: 1px; 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 { .event-art {
flex: 1; flex: 1;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
@@ -129,74 +193,86 @@ const accentColor = categoryColors[type] || categoryColors["default"];
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
.event-card.has-bg .event-art { .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 { .event-title {
font-size: 1.4rem; font-size: 1.4rem;
margin: 5px 0; 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 { .location-tag {
font-size: 0.7rem; font-size: 0.7rem;
opacity: 0.9; opacity: 0.9;
} }
.event-card.has-bg .location-tag { .event-card.has-bg .location-tag {
opacity: 1; /* Assurer pleine opacité sur fond foncé */ opacity: 1;
} }
.event-info-line { .event-info-line {
font-size: 0.8rem; font-size: 0.8rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
padding-bottom: 5px; padding-bottom: 5px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.event-card.has-bg .event-info-line { .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 { .event-body {
flex: 1.2; flex: 1.2;
font-size: 0.85rem; font-size: 0.85rem;
} }
.event-type { .event-type {
text-transform: uppercase; text-transform: uppercase;
background: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.3);
padding: 2px 8px; padding: 2px 8px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.event-card.has-bg .event-type { .event-card.has-bg .event-type {
background: rgba(0, 0, 0, 0.4); /* Fond plus foncé pour le badge sur image */ background: rgba(0, 0, 0, 0.4);
text-shadow: none; /* Pas d'ombre portée sur éléments avec fond */ text-shadow: none;
} }
.summary { .summary {
font-style: italic; font-style: italic;
line-height: 1.4; line-height: 1.4;
margin-bottom: 10px; margin-bottom: 10px;
} }
.participants-box .label { .participants-box .label {
font-size: 0.65rem; font-size: 0.65rem;
text-transform: uppercase; text-transform: uppercase;
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
} }
.tags { .tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px; gap: 4px;
} }
.p-tag { .p-tag {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
font-size: 0.65rem; font-size: 0.65rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.event-card.has-bg .p-tag { .event-card.has-bg .p-tag {
background: rgba(0, 0, 0, 0.4); /* Fond plus foncé pour les tags sur image */ background: rgba(0, 0, 0, 0.4);
text-shadow: none; /* Pas d'ombre portée sur éléments avec fond */ text-shadow: none;
} }
.event-footer { .event-footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -204,14 +280,17 @@ const accentColor = categoryColors[type] || categoryColors["default"];
font-size: 0.7rem; font-size: 0.7rem;
padding-top: 10px; padding-top: 10px;
} }
.social-impact { .social-impact {
background: #ffffff80; background: #ffffff80;
padding: 2px 8px; padding: 2px 8px;
border-radius: 5px; border-radius: 5px;
font-weight: bold; font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} }
.event-card.has-bg .social-impact { .event-card.has-bg .social-impact {
background: rgba(0, 0, 0, 0.4); /* Fond plus foncé sur image */ background: rgba(0, 0, 0, 0.4);
text-shadow: none; /* Pas d'ombre portée sur éléments avec fond */ text-shadow: none;
} }
</style> </style>