card cosmo ambient

2026-02-21 20:59:56 +04:00
parent 3f2fcdb5d7
commit c4dc5c4588
4 changed files with 398 additions and 165 deletions
--- a/src/components/EventCard.astro
+++ b/src/components/EventCard.astro
@@ -0,0 +1,134 @@
+---
+// src/components/EventCard.astro
+const { frontmatter } = Astro.props;
+const { title, date, location, target_date, participants, summary, status } =
+    frontmatter;
+---
+
+<article class="event-card">
+    <div class="card-inner">
+        <header class="event-header">
+            <span class="event-type">ÉVÉNEMENT IRL</span>
+            <span class="event-status">{status}</span>
+        </header>
+
+        <div class="event-art">
+            <div class="location-tag">{location}</div>
+            <h2 class="event-title">{title}</h2>
+        </div>
+
+        <div class="event-info-line">
+            Projet prévu pour : <strong>{target_date}</strong>
+        </div>
+
+        <div class="event-body">
+            <p class="summary">{summary}</p>
+
+            <div class="participants-box">
+                <span class="label">Membres impliqués :</span>
+                <div class="tags">
+                    {participants.map((p) => <span class="p-tag">{p}</span>)}
+                </div>
+            </div>
+        </div>
+
+        <footer class="event-footer">
+            <div class="date-recorded">
+                Détecté le : {new Date(date).toLocaleDateString("fr-FR")}
+            </div>
+            <div class="social-impact">+3 SOC</div>
+        </footer>
+    </div>
+</article>
+
+<style>
+    .event-card {
+        width: 320px;
+        height: 480px;
+        background: #a1be18;
+        border-radius: 18px;
+        padding: 12px;
+        font-family: "Philosopher", serif;
+        color: rgba(0, 0, 0, 0.7);
+    }
+    .card-inner {
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+        padding: 12px;
+    }
+    .event-header {
+        display: flex;
+        justify-content: space-between;
+        font-size: 0.7rem;
+        font-weight: bold;
+        letter-spacing: 1px;
+    }
+    .event-art {
+        flex: 1;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        margin: 10px 0;
+        border-radius: 6px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 10px;
+    }
+    .event-title {
+        font-size: 1.4rem;
+        margin: 5px 0;
+    }
+    .location-tag {
+        font-size: 0.7rem;
+        opacity: 0.9;
+    }
+    .event-info-line {
+        font-size: 0.8rem;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        padding-bottom: 5px;
+        margin-bottom: 10px;
+    }
+    .event-body {
+        flex: 1.2;
+        font-size: 0.85rem;
+    }
+    .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;
+    }
+    .event-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 0.7rem;
+        padding-top: 10px;
+    }
+    .social-impact {
+        background: #ffffff80;
+        padding: 2px 8px;
+        border-radius: 5px;
+        font-weight: bold;
+    }
+</style>