feat(aep): carte AEP — push Gitea 2026-04-28
This commit is contained in:
Jules Neny
587
components/BandeauBas.vue
Normal file
587
components/BandeauBas.vue
Normal file
@@ -0,0 +1,587 @@
|
||||
<template>
|
||||
<!-- ═══════════════════════════════════════ BANDEAU BAS ═══════════════════ -->
|
||||
<!-- DESKTOP uniquement (≥1024px) — mobile a le FAB séparé -->
|
||||
<footer
|
||||
v-if="!isMobile"
|
||||
ref="bandeauEl"
|
||||
class="bandeau-bas shrink-0"
|
||||
:class="{ 'bandeau-collapsed': isCollapsed }"
|
||||
aria-label="Informations projet AEP"
|
||||
@mouseenter="onMouseEnter"
|
||||
@mouseleave="onMouseLeave"
|
||||
>
|
||||
<!-- Contenu plein -->
|
||||
<div class="bandeau-inner" :class="{ 'bandeau-inner--hidden': isCollapsed }">
|
||||
|
||||
<!-- ── GAUCHE : Transparence IA ──────────────────────────────────────── -->
|
||||
<div class="bandeau-col">
|
||||
<p class="bandeau-label">Transparence IA</p>
|
||||
<template v-if="stats">
|
||||
<p class="bandeau-value">
|
||||
Coût IA ce mois : <strong>{{ stats.cout_mois_eur.toFixed(2) }} €</strong>
|
||||
·
|
||||
Tokens : <strong>{{ stats.tokens_mois.toLocaleString('fr-FR') }}</strong>
|
||||
</p>
|
||||
<!-- Jauge -->
|
||||
<div class="jauge-track" aria-label="Budget IA consommé" role="progressbar" :aria-valuenow="jaugePct" aria-valuemin="0" aria-valuemax="100">
|
||||
<div class="jauge-fill" :style="{ width: jaugePct + '%' }" />
|
||||
</div>
|
||||
<p class="bandeau-sub">
|
||||
{{ stats.requetes_mois }} requête{{ stats.requetes_mois !== 1 ? 's' : '' }} ce mois
|
||||
</p>
|
||||
</template>
|
||||
<template v-else-if="loading">
|
||||
<p class="bandeau-sub">Chargement…</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="bandeau-sub">Données indisponibles</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- ── MILIEU : CTA Soutien ──────────────────────────────────────────── -->
|
||||
<div class="bandeau-col bandeau-col--center">
|
||||
<div class="soutenir-wrap">
|
||||
<button
|
||||
class="btn-soutenir"
|
||||
type="button"
|
||||
@click="modalOpen = true"
|
||||
@mouseenter="tooltipVisible = true"
|
||||
@mouseleave="tooltipVisible = false"
|
||||
@focus="tooltipVisible = true"
|
||||
@blur="tooltipVisible = false"
|
||||
aria-label="Soutenir le projet AEP sur Liberapay"
|
||||
>
|
||||
Soutenir le projet
|
||||
</button>
|
||||
<!-- Tooltip au hover -->
|
||||
<div v-if="tooltipVisible" class="soutenir-tooltip" role="tooltip">
|
||||
1 € = 30 fiches mises en ligne
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── DROITE : Compteurs semaine ────────────────────────────────────── -->
|
||||
<div class="bandeau-col bandeau-col--right">
|
||||
<p class="bandeau-label">Cette semaine</p>
|
||||
<template v-if="stats">
|
||||
<p class="bandeau-value">
|
||||
{{ stats.fiches_semaine }} fiche{{ stats.fiches_semaine !== 1 ? 's' : '' }} ajoutée{{ stats.fiches_semaine !== 1 ? 's' : '' }}
|
||||
</p>
|
||||
<p class="bandeau-sub">
|
||||
{{ stats.requetes_chatbot_semaine }} requête{{ stats.requetes_chatbot_semaine !== 1 ? 's' : '' }} chatbot
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="bandeau-sub">—</p>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Barre fine (état collapsed) -->
|
||||
<div class="bandeau-thin" :class="{ 'bandeau-thin--visible': isCollapsed }">
|
||||
<span class="bandeau-thin-label">AEP · Transparence IA</span>
|
||||
</div>
|
||||
|
||||
<!-- ── MODAL Liberapay ───────────────────────────────────────────────── -->
|
||||
<Teleport to="body">
|
||||
<Transition name="backdrop">
|
||||
<div
|
||||
v-if="modalOpen"
|
||||
class="modal-backdrop"
|
||||
@click="modalOpen = false"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Transition>
|
||||
<Transition name="modal">
|
||||
<div
|
||||
v-if="modalOpen"
|
||||
class="modal-box"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Soutenir AEP sur Liberapay"
|
||||
>
|
||||
<button
|
||||
class="modal-close"
|
||||
type="button"
|
||||
@click="modalOpen = false"
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h2 class="modal-title">Soutenir AEP</h2>
|
||||
<p class="modal-desc">
|
||||
AEP est un outil libre, sans publicité, financé par les dons.
|
||||
1 € finance environ 30 fiches mises en ligne.
|
||||
</p>
|
||||
<div class="modal-widget">
|
||||
<iframe
|
||||
src="https://liberapay.com/trans-former.fr/widgets/button.html"
|
||||
width="95"
|
||||
height="22"
|
||||
style="border: 0;"
|
||||
title="Faire un don sur Liberapay"
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
href="https://liberapay.com/trans-former.fr/donate"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="modal-link"
|
||||
>
|
||||
Faire un don sur Liberapay →
|
||||
</a>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
</footer>
|
||||
|
||||
<!-- ═══════════════════════════════════════ FAB MOBILE (< 1024px) ════════ -->
|
||||
<div v-else>
|
||||
<!-- FAB soutenir (à gauche du chatbot) -->
|
||||
<button
|
||||
class="fab-soutenir"
|
||||
type="button"
|
||||
@click="fabSheetOpen = true"
|
||||
aria-label="Soutenir le projet AEP"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Bottom sheet FAB -->
|
||||
<Teleport to="body">
|
||||
<Transition name="backdrop">
|
||||
<div
|
||||
v-if="fabSheetOpen"
|
||||
class="fixed inset-0 z-[1020]"
|
||||
style="background: rgba(26,34,56,0.5);"
|
||||
@click="fabSheetOpen = false"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Transition>
|
||||
<Transition name="sheet">
|
||||
<div
|
||||
v-if="fabSheetOpen"
|
||||
class="fab-sheet"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Soutenir AEP"
|
||||
>
|
||||
<!-- Poignée -->
|
||||
<div class="flex justify-center pt-3 pb-1">
|
||||
<div class="rounded-full" style="width: 36px; height: 4px; background: var(--nav-bg-alt);" />
|
||||
</div>
|
||||
<div class="px-5 pb-6">
|
||||
<h2 class="text-base font-bold mb-2" style="color: var(--nav-text);">Soutenir AEP</h2>
|
||||
<template v-if="stats">
|
||||
<p class="text-sm mb-1" style="color: var(--nav-text-muted);">
|
||||
Coût IA ce mois : <strong>{{ stats.cout_mois_eur.toFixed(2) }} €</strong>
|
||||
· Tokens : {{ stats.tokens_mois.toLocaleString('fr-FR') }}
|
||||
</p>
|
||||
<p class="text-sm mb-3" style="color: var(--nav-text-muted);">
|
||||
{{ stats.fiches_semaine }} fiche{{ stats.fiches_semaine !== 1 ? 's' : '' }} ajoutée{{ stats.fiches_semaine !== 1 ? 's' : '' }} cette semaine
|
||||
</p>
|
||||
</template>
|
||||
<p class="text-sm mb-4" style="color: var(--nav-text-muted); line-height: 1.5;">
|
||||
1 € = 30 fiches mises en ligne. AEP est libre, sans pub, financé par les dons.
|
||||
</p>
|
||||
<a
|
||||
href="https://liberapay.com/trans-former.fr/donate"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="block w-full text-center py-3 rounded-xl font-semibold text-sm"
|
||||
style="background: var(--nav-primary); color: var(--nav-text-on-primary); text-decoration: none;"
|
||||
@click="fabSheetOpen = false"
|
||||
>
|
||||
Soutenir sur Liberapay →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Stats {
|
||||
cout_mois_eur: number
|
||||
budget_mois: number
|
||||
tokens_mois: number
|
||||
co2_kg: number
|
||||
requetes_mois: number
|
||||
fiches_semaine: number
|
||||
requetes_chatbot_semaine: number
|
||||
}
|
||||
|
||||
const stats = ref<Stats | null>(null)
|
||||
const loading = ref(true)
|
||||
const modalOpen = ref(false)
|
||||
const fabSheetOpen = ref(false)
|
||||
const tooltipVisible = ref(false)
|
||||
|
||||
// Desktop — replié par défaut, déploie au hover, replie immédiatement à la sortie
|
||||
const bandeauEl = ref<HTMLElement | null>(null)
|
||||
const isCollapsed = ref(true) // replié par défaut
|
||||
|
||||
const REFRESH_MS = 5 * 60 * 1000 // 5 minutes
|
||||
|
||||
// Détection mobile côté client
|
||||
const isMobile = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
isMobile.value = window.innerWidth < 1024
|
||||
|
||||
const handleResize = () => {
|
||||
isMobile.value = window.innerWidth < 1024
|
||||
}
|
||||
window.addEventListener('resize', handleResize)
|
||||
onUnmounted(() => window.removeEventListener('resize', handleResize))
|
||||
|
||||
fetchStats()
|
||||
const interval = setInterval(fetchStats, REFRESH_MS)
|
||||
onUnmounted(() => clearInterval(interval))
|
||||
})
|
||||
|
||||
function onMouseEnter() {
|
||||
isCollapsed.value = false
|
||||
}
|
||||
|
||||
function onMouseLeave() {
|
||||
// Repli immédiat — pas de timer
|
||||
isCollapsed.value = true
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const res = await $fetch<Stats>('/api/stats')
|
||||
stats.value = res
|
||||
} catch {
|
||||
stats.value = null
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const jaugePct = computed(() => {
|
||||
if (!stats.value) return 0
|
||||
return Math.min(100, Math.round((stats.value.cout_mois_eur / stats.value.budget_mois) * 100))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── Bandeau bas ─────────────────────────────────────────────────────────── */
|
||||
.bandeau-bas {
|
||||
background: rgba(26, 34, 56, 0.7); /* opacité 70% */
|
||||
color: var(--nav-text-on-primary);
|
||||
font-family: var(--nav-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
transition: min-height 0.25s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bandeau-collapsed {
|
||||
min-height: 32px !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bandeau-inner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 10px 20px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
min-height: 64px;
|
||||
transition: opacity 0.2s ease, max-height 0.3s ease;
|
||||
max-height: 200px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bandeau-inner--hidden {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Barre fine (collapsed) */
|
||||
.bandeau-thin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.bandeau-thin--visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bandeau-thin-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* ── Colonnes ────────────────────────────────────────────────────────────── */
|
||||
.bandeau-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bandeau-col--center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
padding-top: 8px; /* décaler légèrement vers le bas pour mieux centrer dans la hauteur */
|
||||
}
|
||||
|
||||
.bandeau-col--right {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* ── Typo ────────────────────────────────────────────────────────────────── */
|
||||
.bandeau-label {
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
opacity: 0.65;
|
||||
margin: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.bandeau-value {
|
||||
font-size: 0.775rem;
|
||||
font-weight: 500;
|
||||
color: var(--nav-text-on-primary);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.bandeau-value strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bandeau-sub {
|
||||
font-size: 0.68rem;
|
||||
opacity: 0.7;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* ── Jauge budget ────────────────────────────────────────────────────────── */
|
||||
.jauge-track {
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
overflow: hidden;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.jauge-fill {
|
||||
height: 100%;
|
||||
border-radius: 2px;
|
||||
background: var(--nav-accent);
|
||||
transition: width 0.6s ease;
|
||||
}
|
||||
|
||||
/* ── Bouton soutenir + tooltip ───────────────────────────────────────────── */
|
||||
.soutenir-wrap {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-soutenir {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 7px 16px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: var(--nav-accent);
|
||||
color: var(--nav-text);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.15s, transform 0.1s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-soutenir:hover { opacity: 0.88; transform: translateY(-1px); }
|
||||
.btn-soutenir:active { opacity: 1; transform: translateY(0); }
|
||||
|
||||
.soutenir-tooltip {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 8px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--nav-primary-solid, #1a2238);
|
||||
color: var(--nav-text-on-primary);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6px;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.soutenir-tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 5px solid transparent;
|
||||
border-top-color: var(--nav-primary-solid, #1a2238);
|
||||
}
|
||||
|
||||
/* ── FAB mobile soutenir ─────────────────────────────────────────────────── */
|
||||
.fab-soutenir {
|
||||
position: fixed;
|
||||
bottom: 68px; /* au-dessus du FAB chatbot à 24px du bas + 48px de hauteur */
|
||||
left: 16px;
|
||||
z-index: 1000;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--nav-accent);
|
||||
color: var(--nav-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 16px rgba(26,34,56,0.25);
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.fab-soutenir:hover { opacity: 0.88; transform: translateY(-1px); }
|
||||
|
||||
/* ── Bottom sheet FAB ────────────────────────────────────────────────────── */
|
||||
.fab-sheet {
|
||||
position: fixed;
|
||||
inset-x: 0;
|
||||
bottom: 0;
|
||||
z-index: 1021;
|
||||
background: var(--nav-surface);
|
||||
border-radius: 16px 16px 0 0;
|
||||
box-shadow: 0 -4px 32px rgba(26,34,56,0.18);
|
||||
}
|
||||
|
||||
/* ── Modal ───────────────────────────────────────────────────────────────── */
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2000;
|
||||
background: rgba(26, 34, 56, 0.55);
|
||||
}
|
||||
|
||||
.modal-box {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2001;
|
||||
background: var(--nav-surface, #ffffff);
|
||||
border-radius: 16px;
|
||||
padding: 28px 24px 24px;
|
||||
width: min(380px, 90vw);
|
||||
box-shadow: 0 8px 40px rgba(26, 34, 56, 0.22);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: var(--nav-bg-alt, #eee9df);
|
||||
color: var(--nav-text-muted, rgba(26,34,56,0.55));
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.modal-close:hover { background: var(--nav-bg, #f8f6f1); }
|
||||
|
||||
.modal-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--nav-text, #1a2238);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-desc {
|
||||
font-size: 0.85rem;
|
||||
color: var(--nav-text-muted, rgba(26,34,56,0.55));
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.modal-widget {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.modal-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
color: var(--nav-primary-solid, #1a2238);
|
||||
text-decoration: underline;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.modal-link:hover { opacity: 0.7; }
|
||||
|
||||
/* ── Transitions ─────────────────────────────────────────────────────────── */
|
||||
.backdrop-enter-active, .backdrop-leave-active { transition: opacity 0.2s ease; }
|
||||
.backdrop-enter-from, .backdrop-leave-to { opacity: 0; }
|
||||
|
||||
.modal-enter-active, .modal-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
|
||||
.modal-enter-from, .modal-leave-to { opacity: 0; transform: translate(-50%, -48%); }
|
||||
|
||||
.sheet-enter-active, .sheet-leave-active { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
|
||||
.sheet-enter-from, .sheet-leave-to { transform: translateY(100%); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.btn-soutenir { transition: none; }
|
||||
.jauge-fill { transition: none; }
|
||||
.modal-enter-active, .modal-leave-active { transition: none; }
|
||||
.backdrop-enter-active, .backdrop-leave-active { transition: none; }
|
||||
.sheet-enter-active, .sheet-leave-active { transition: none; }
|
||||
.bandeau-bas { transition: none; }
|
||||
.bandeau-inner { transition: none; }
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user