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

149
src/components/EventCard.astro
View File

@@ -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" };
}
---
<article
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">
<header class="event-header">
<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>
<div class="event-art">
@@ -45,7 +76,9 @@ const accentColor = categoryColors[type] || categoryColors["default"];
</div>
<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 class="event-body">
@@ -67,9 +100,9 @@ const accentColor = categoryColors[type] || categoryColors["default"];
<footer class="event-footer">
<div class="date-recorded">
Prévu le : {new Date(date).toLocaleDateString("fr-FR")}
Projet détecté le : <strong>{target_date}</strong>
</div>
<div class="social-impact">+3 {circle}</div>
<div class="social-impact">{circle}</div>
</footer>
</div>
</article>
@@ -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;
}
</style>