correction config.ts et evolution
This commit is contained in:
@@ -3,7 +3,7 @@ import { getCollection } from "astro:content";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import EventCard from "../components/EventCard.astro";
|
||||
import BankCard from "../components/BankCard.astro"; // <-- AJOUT
|
||||
import BankCard from "../components/BankCard.astro";
|
||||
|
||||
// 1. Récupération des données
|
||||
const allHumans = await getCollection("humans", ({ id }) => {
|
||||
@@ -26,7 +26,7 @@ const latestEvent = allEvents.sort(
|
||||
(a, b) => new Date(a.data.date).getTime() - new Date(b.data.date).getTime(),
|
||||
)[0];
|
||||
|
||||
// 3. Logique de Streak (Série) - TON CODE ORIGINAL
|
||||
// 3. Logique de Streak (Série)
|
||||
const getStreak = (name: any, entries: any) => {
|
||||
const userDates = entries
|
||||
.filter((e: any) => e.data.name === name)
|
||||
@@ -84,7 +84,7 @@ const getStreak = (name: any, entries: any) => {
|
||||
// 4. Sélection de la carte principale
|
||||
const latestPerUser = Array.from(
|
||||
sortedAll
|
||||
.reduce((map, obj) => {
|
||||
.reduce((map: any, obj: any) => {
|
||||
if (!map.has(obj.data.name)) map.set(obj.data.name, obj);
|
||||
return map;
|
||||
}, new Map())
|
||||
@@ -104,15 +104,21 @@ const latestPerUser = Array.from(
|
||||
<main>
|
||||
<h1 class="main-title">Ambient</h1>
|
||||
|
||||
<section class="hero-flex">
|
||||
{
|
||||
latestPerUser.map((entry) => {
|
||||
const currentStreak = getStreak(entry.data.name, allHumans);
|
||||
return (
|
||||
<div class="carousel-container">
|
||||
<button class="nav-btn prev" id="prevBtn" aria-label="Précédent"
|
||||
>‹</button
|
||||
>
|
||||
|
||||
<section class="hero-flex">
|
||||
{
|
||||
latestPerUser.map((entry) => (
|
||||
<div class="card-focus">
|
||||
<Card
|
||||
frontmatter={entry.data}
|
||||
streakCount={currentStreak}
|
||||
streakCount={getStreak(
|
||||
entry.data.name,
|
||||
allHumans,
|
||||
)}
|
||||
/>
|
||||
<div class="entry-meta">
|
||||
<p>
|
||||
@@ -123,111 +129,138 @@ const latestPerUser = Array.from(
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
))
|
||||
}
|
||||
|
||||
{
|
||||
latestEvent && (
|
||||
<div class="card-focus">
|
||||
<EventCard frontmatter={latestEvent.data} />
|
||||
<div class="entry-meta">
|
||||
<p>Projet Actif : {latestEvent.data.type}</p>
|
||||
{
|
||||
latestEvent && (
|
||||
<div class="card-focus">
|
||||
<EventCard frontmatter={latestEvent.data} />
|
||||
<div class="entry-meta">
|
||||
<p>Projet Actif : {latestEvent.data.type}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
upCard && (
|
||||
<div class="card-focus">
|
||||
<BankCard
|
||||
frontmatter={upCard.data}
|
||||
allHumans={allHumans}
|
||||
/>
|
||||
<div class="entry-meta">
|
||||
<p>État du cercle FLX</p>
|
||||
{
|
||||
upCard && (
|
||||
<div class="card-focus">
|
||||
<BankCard
|
||||
frontmatter={upCard.data}
|
||||
allHumans={allHumans}
|
||||
/>
|
||||
<div class="entry-meta">
|
||||
<p>État du cercle FLX</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
|
||||
<button class="nav-btn next" id="nextBtn" aria-label="Suivant"
|
||||
>›</button
|
||||
>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
/* 1. Reset et Base */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 2. Le Flex Horizontal (Le "Souffle") */
|
||||
.hero-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap; /* EMPÊCHE le chevauchement par empilement */
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x mandatory;
|
||||
scroll-behavior: smooth;
|
||||
gap: 20px;
|
||||
padding: 60px 20px;
|
||||
scroll-snap-type: x mandatory; /* Optionnel pour le swipe Samsung */
|
||||
width: 100%;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.hero-flex::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 3. La Carte */
|
||||
.card-focus {
|
||||
flex: 0 0 auto; /* Empêche la compression de la carte */
|
||||
width: 320px;
|
||||
scroll-snap-align: center;
|
||||
}
|
||||
/* ... le reste de ton CSS ... */
|
||||
|
||||
.intent-quote {
|
||||
max-width: 800px;
|
||||
margin: 20px auto;
|
||||
font-size: 1.1rem;
|
||||
color: #475569;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.work-todo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.todo-column {
|
||||
background: white;
|
||||
padding: 25px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.todo-column h3 {
|
||||
font-family: "Philosopher", serif;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 20px;
|
||||
color: #1e293b;
|
||||
border-bottom: 2px solid #e2e8f0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.todo-column ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-column li {
|
||||
margin-bottom: 15px;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
color: #64748b;
|
||||
position: relative;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.todo-column li::before {
|
||||
content: "→";
|
||||
/* 4. Navigation */
|
||||
.nav-btn {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: #3b82f6;
|
||||
font-weight: bold;
|
||||
z-index: 10;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: none;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.work-todo-grid {
|
||||
grid-template-columns: 1fr;
|
||||
.prev {
|
||||
left: 10px;
|
||||
}
|
||||
.next {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
/* 5. Responsive Mobile (Samsung) */
|
||||
@media (max-width: 768px) {
|
||||
.nav-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-flex {
|
||||
gap: 60px;
|
||||
padding: 40px 10vw; /* Centre la carte active et montre un peu les voisines */
|
||||
}
|
||||
|
||||
.card-focus {
|
||||
width: 80vw;
|
||||
min-width: 80vw; /* FORCE la largeur pour éviter que les cartes se rentrent dedans */
|
||||
}
|
||||
}
|
||||
|
||||
/* 6. Centrage Desktop (Lenovo) */
|
||||
@media (min-width: 1025px) {
|
||||
.hero-flex {
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 7. Typography & UI */
|
||||
.main-title {
|
||||
text-align: center;
|
||||
font-family: "Philosopher", serif;
|
||||
@@ -236,6 +269,13 @@ const latestPerUser = Array.from(
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
font-family: "Philosopher", serif;
|
||||
font-size: 0.9rem;
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.minimal-header {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
@@ -257,106 +297,25 @@ const latestPerUser = Array.from(
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.hero-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
padding: 60px 20px;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
.card-focus {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
font-family: "Philosopher", serif;
|
||||
font-size: 0.9rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.separator {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
rgba(0, 0, 0, 0.1),
|
||||
transparent
|
||||
);
|
||||
margin: 40px 0;
|
||||
}
|
||||
|
||||
/* Codex Style */
|
||||
.codex {
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
padding: 40px;
|
||||
background: #f8fafc;
|
||||
border-radius: 24px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
.codex-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.codex-box {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.synergy-active {
|
||||
border: 2px solid #8b5cf6;
|
||||
}
|
||||
.status-ok {
|
||||
color: #10b981;
|
||||
font-weight: bold;
|
||||
}
|
||||
.status-ko {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
/* System Rules Style */
|
||||
.system-rules {
|
||||
max-width: 1100px;
|
||||
margin: 40px auto 100px auto;
|
||||
padding: 20px;
|
||||
font-family: "Philosopher", serif;
|
||||
}
|
||||
|
||||
.rules-layout {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.rule-category h3 {
|
||||
border-bottom: 1px solid #cbd5e1;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 15px;
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
.rule-category ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rule-category li {
|
||||
margin-bottom: 12px;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const initCarousel = () => {
|
||||
const container = document.querySelector(".hero-flex");
|
||||
const prevBtn = document.getElementById("prevBtn");
|
||||
const nextBtn = document.getElementById("nextBtn");
|
||||
|
||||
if (container && prevBtn && nextBtn) {
|
||||
nextBtn.onclick = () => {
|
||||
container.scrollBy({ left: 350, behavior: "smooth" });
|
||||
};
|
||||
|
||||
prevBtn.onclick = () => {
|
||||
container.scrollBy({ left: -350, behavior: "smooth" });
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
initCarousel();
|
||||
document.addEventListener("astro:after-swap", initCarousel);
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user