590 lines
40 KiB
HTML
590 lines
40 KiB
HTML
<!doctype html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Présentation CCDS - Portail des associations</title>
|
||
<style>
|
||
:root {
|
||
--ink: #101828;
|
||
--muted: #667085;
|
||
--paper: #fbfcfe;
|
||
--surface: #ffffff;
|
||
--line: #d9e2ef;
|
||
--blue: #123c69;
|
||
--blue-2: #0b2d52;
|
||
--red: #d71920;
|
||
--gold: #c7943f;
|
||
--green: #12805c;
|
||
--soft-blue: #eef5ff;
|
||
--soft-red: #fff1f1;
|
||
--soft-gold: #fff8ed;
|
||
--shadow: 0 24px 70px rgba(16, 24, 40, .12);
|
||
--radius: 28px;
|
||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
html, body { margin: 0; min-height: 100%; background: #e9eef6; color: var(--ink); }
|
||
body { overflow: hidden; }
|
||
.deck-shell { width: 100vw; height: 100vh; display: grid; place-items: center; padding: 24px; }
|
||
.stage { width: min(100%, calc(100vh * 16 / 9)); aspect-ratio: 16 / 9; background: var(--paper); border-radius: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
|
||
.slide { position: absolute; inset: 0; padding: 68px 82px; display: none; background: linear-gradient(135deg, #fff 0%, #f7faff 100%); }
|
||
.slide.active { display: flex; flex-direction: column; }
|
||
.slide::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% 10%, rgba(18,60,105,.15), transparent 28%), radial-gradient(circle at 8% 92%, rgba(215,25,32,.08), transparent 24%); pointer-events: none; }
|
||
.slide > * { position: relative; z-index: 1; }
|
||
.brandbar { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 46px; }
|
||
.brand { display:flex; align-items:center; gap:18px; }
|
||
.logo { width: 72px; height: 72px; border-radius: 18px; background:#fff; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; overflow:hidden; box-shadow: 0 10px 24px rgba(0,0,0,.12); }
|
||
.logo img { width:100%; height:100%; object-fit:contain; padding:8px; }
|
||
.brand-copy { display:grid; gap:4px; }
|
||
.rf { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
|
||
.service { font-size: 23px; font-weight: 800; color: var(--blue); line-height: 1.05; }
|
||
.kicker { display:inline-flex; width:max-content; align-items:center; gap:10px; padding: 9px 14px; border:1px solid rgba(18,60,105,.18); border-radius:999px; color:var(--blue); background:rgba(255,255,255,.72); font-size:15px; font-weight:700; }
|
||
.kicker::before { content:""; width:9px; height:9px; background:var(--red); border-radius:999px; }
|
||
h1, h2, h3 { margin:0; text-wrap: balance; }
|
||
h1 { font-size: 68px; line-height: .98; letter-spacing: -.045em; max-width: 1120px; }
|
||
h2 { font-size: 50px; line-height: 1.02; letter-spacing: -.035em; max-width: 1040px; }
|
||
h3 { font-size: 26px; line-height: 1.15; }
|
||
p { color: var(--muted); font-size: 22px; line-height:1.45; margin: 0; text-wrap: pretty; }
|
||
.lead { font-size: 29px; max-width: 1060px; margin-top: 28px; color:#344054; }
|
||
.accent { color: var(--blue); }
|
||
.red { color: var(--red); }
|
||
.gold { color: var(--gold); }
|
||
.grid { display:grid; gap:22px; }
|
||
.cols-2 { grid-template-columns: repeat(2, 1fr); }
|
||
.cols-3 { grid-template-columns: repeat(3, 1fr); }
|
||
.cols-4 { grid-template-columns: repeat(4, 1fr); }
|
||
.card { background: rgba(255,255,255,.88); border:1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: 0 10px 28px rgba(16,24,40,.06); }
|
||
.card.blue { background: linear-gradient(180deg, #123c69, #0b2d52); color:#fff; border-color:transparent; }
|
||
.card.blue p, .card.blue .small, .card.blue .metric-label { color: rgba(255,255,255,.78); }
|
||
.card.soft { background: var(--soft-blue); }
|
||
.card.warn { background: var(--soft-red); border-color:#ffd1d1; }
|
||
.card.gold { background: var(--soft-gold); border-color:#f0dfbb; }
|
||
.small { font-size: 17px; line-height:1.45; color: var(--muted); }
|
||
.eyebrow { font-size: 14px; letter-spacing: .14em; text-transform:uppercase; font-weight:800; color:var(--red); margin-bottom:12px; }
|
||
.metric { font-size: 46px; font-weight: 850; letter-spacing:-.04em; color:var(--blue); margin-bottom:6px; }
|
||
.metric-label { font-size:16px; color:var(--muted); font-weight:700; }
|
||
.stack-row { display:flex; flex-wrap:wrap; gap:12px; margin-top: 24px; }
|
||
.pill { padding: 10px 14px; border-radius:999px; background:#fff; border:1px solid var(--line); color:#344054; font-size:16px; font-weight:700; }
|
||
.timeline { display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 34px; }
|
||
.step { position:relative; padding:26px; border-radius:24px; background:#fff; border:1px solid var(--line); }
|
||
.num { width:42px; height:42px; border-radius:14px; background:var(--blue); color:#fff; display:grid; place-items:center; font-weight:850; margin-bottom:22px; }
|
||
.list { display:grid; gap:14px; margin-top:22px; }
|
||
.item { display:flex; gap:14px; align-items:flex-start; font-size:21px; line-height:1.35; color:#344054; }
|
||
.check { flex:0 0 auto; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#eafaf2; color:var(--green); font-weight:900; }
|
||
.danger { background:#fff1f1; color:var(--red); }
|
||
.architecture { display:grid; grid-template-columns: 1fr .7fr 1fr; align-items:center; gap:22px; margin-top:36px; }
|
||
.node { padding:24px; border-radius:26px; background:#fff; border:1px solid var(--line); min-height:128px; }
|
||
.arrow { height:3px; background:linear-gradient(90deg,var(--red),var(--blue)); position:relative; }
|
||
.arrow::after { content:""; position:absolute; right:-2px; top:50%; transform:translateY(-50%) rotate(45deg); width:12px; height:12px; border-top:3px solid var(--blue); border-right:3px solid var(--blue); }
|
||
.hero-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; margin-top:34px; align-items:stretch; }
|
||
.hero-art { min-height: 320px; border-radius: 30px; overflow: hidden; border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); display:grid; place-items:center; }
|
||
.hero-art img { width:100%; height:100%; object-fit:cover; }
|
||
.hero-stats { display:grid; gap:18px; }
|
||
.browser-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:30px; }
|
||
.browser-grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:20px; margin-top:30px; }
|
||
.browser-card { border-radius: 24px; overflow:hidden; background:#fff; border:1px solid var(--line); box-shadow: 0 12px 30px rgba(16,24,40,.08); }
|
||
.browser-bar { height: 44px; background: #f5f7fb; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; padding:0 16px; }
|
||
.browser-dot { width:10px; height:10px; border-radius:999px; background:#d0d5dd; }
|
||
.browser-url { margin-left:6px; font-size:12px; color:#667085; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
||
.browser-frame { display:block; width:100%; height:250px; border:0; background:#fff; }
|
||
.browser-meta { padding:16px 18px 18px; }
|
||
.browser-meta h3 { font-size: 21px; margin-bottom: 8px; }
|
||
.admin-showcase { display:grid; grid-template-columns: .88fr 1.12fr; gap:24px; margin-top:30px; align-items:start; }
|
||
.admin-panel { background:#fff; border:1px solid var(--line); border-radius:26px; padding:24px; box-shadow: 0 10px 28px rgba(16,24,40,.06); }
|
||
.admin-badges { display:grid; gap:12px; }
|
||
.admin-badge { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:16px 18px; border-radius:20px; border:1px solid var(--line); background:#fff; }
|
||
.admin-badge strong { font-size: 28px; color: var(--blue); }
|
||
.admin-badge.warn { background:#fff4f4; border-color:#ffd7d7; }
|
||
.admin-badge.soft { background:#eff6ff; border-color:#dbe8fb; }
|
||
.admin-badge.gold { background:#fff8ed; border-color:#f4dfb5; }
|
||
.admin-stream { display:grid; gap:14px; }
|
||
.admin-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px; border-radius:18px; background:#f8fafc; border:1px solid var(--line); }
|
||
.tag { padding:8px 10px; border-radius:999px; font-size:12px; font-weight:800; border:1px solid transparent; white-space:nowrap; }
|
||
.tag.red { background:#fff1f1; color:#c92a2a; border-color:#ffd1d1; }
|
||
.tag.green { background:#eefbf5; color:#0f7a58; border-color:#c9eddc; }
|
||
.tag.blue { background:#eef5ff; color:#123c69; border-color:#d8e6fb; }
|
||
.footnote { position:absolute; left:82px; right:82px; bottom:36px; display:flex; justify-content:space-between; align-items:center; color:#98a2b3; font-size:14px; }
|
||
.controls { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display:flex; gap:10px; align-items:center; background:rgba(16,24,40,.78); color:#fff; padding:9px 12px; border-radius:999px; backdrop-filter: blur(12px); z-index: 10; }
|
||
.controls button { border:0; background:rgba(255,255,255,.14); color:#fff; border-radius:999px; min-width:38px; height:34px; cursor:pointer; font-weight:800; }
|
||
.counter { min-width:72px; text-align:center; font-variant-numeric: tabular-nums; font-size:14px; }
|
||
.cover { background: linear-gradient(135deg, #082747 0%, #123c69 55%, #0b2d52 100%); color:#fff; }
|
||
.cover::before { background: radial-gradient(circle at 88% 18%, rgba(255,255,255,.18), transparent 22%), radial-gradient(circle at 5% 86%, rgba(215,25,32,.26), transparent 28%); }
|
||
.cover p { color:rgba(255,255,255,.78); }
|
||
.cover .accent { color:#fff; }
|
||
.cover .kicker { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08); }
|
||
.two-zone { display:grid; grid-template-columns: .95fr 1.05fr; gap:42px; align-items:start; flex:1; }
|
||
@media (max-width: 900px) {
|
||
body { overflow:auto; }
|
||
.deck-shell { height:auto; padding:0; display:block; }
|
||
.stage { width:100%; height:auto; aspect-ratio:auto; border-radius:0; box-shadow:none; }
|
||
.slide { position:relative; min-height:100vh; display:none; padding:34px 22px 84px; }
|
||
h1 { font-size:46px; }
|
||
h2 { font-size:36px; }
|
||
p,.lead { font-size:19px; }
|
||
.cols-2,.cols-3,.cols-4,.two-zone,.timeline,.architecture,.hero-grid,.browser-grid,.browser-grid-2,.admin-showcase { grid-template-columns:1fr; }
|
||
.browser-frame { height:220px; }
|
||
.footnote { left:22px; right:22px; }
|
||
}
|
||
@media print {
|
||
body { overflow:visible; background:#fff; }
|
||
.deck-shell { display:block; padding:0; height:auto; }
|
||
.stage { width:100%; height:auto; box-shadow:none; }
|
||
.slide { display:flex !important; position:relative; page-break-after:always; height:100vh; border-radius:0; }
|
||
.controls { display:none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="deck-shell" aria-label="Présentation du portail CCDS">
|
||
<section class="stage">
|
||
<article class="slide cover active" data-title="Couverture">
|
||
<div class="brandbar">
|
||
<div class="brand">
|
||
<div class="logo"><img src="./client/src/assets/ccds.png" alt="Logo CCDS" /></div>
|
||
<div class="brand-copy">
|
||
<span class="rf">Communauté de Communes des Savanes</span>
|
||
<span class="service">Portail des associations</span>
|
||
</div>
|
||
</div>
|
||
<div class="kicker">Plateforme numérique logistique CCDS</div>
|
||
</div>
|
||
<h1>Un <span class="accent">écosystème logistique connecté et prédictif</span> pour piloter les demandes, le stock et le terrain.</h1>
|
||
<p class="lead">
|
||
La plateforme CCDS ne se limite plus à la gestion administrative. Elle digitalise le flux complet du matériel événementiel, de la réservation à la restitution signée sur smartphone, avec traçabilité, pilotage et sécurisation du stock.
|
||
</p>
|
||
<div class="hero-grid">
|
||
<div class="hero-art">
|
||
<img src="./client/src/assets/hero-ccds-illustration.svg" alt="Illustration CCDS" />
|
||
</div>
|
||
<div class="hero-stats">
|
||
<div class="card"><div class="metric">1</div><div class="metric-label">Espace association complet</div></div>
|
||
<div class="card"><div class="metric">2</div><div class="metric-label">Pilotage administratif centralisé</div></div>
|
||
<div class="card"><div class="metric">3</div><div class="metric-label">Logistique et restitution terrain intégrées</div></div>
|
||
</div>
|
||
</div>
|
||
<div class="footnote"><span>Vision stratégique</span><span>CCDS - Plateforme logistique et associative</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Vision">
|
||
<div class="brandbar"><div class="kicker">Vision du projet</div></div>
|
||
<h2>La CCDS passe d’un portail de gestion à une <span class="accent">chaîne numérique de bout en bout</span>.</h2>
|
||
<div class="two-zone" style="margin-top:34px;">
|
||
<div class="card blue">
|
||
<div class="eyebrow" style="color:#ffd8d8;">Ambition</div>
|
||
<h3>Automatiser, orchestrer et sécuriser tout le cycle matériel</h3>
|
||
<div class="list">
|
||
<div class="item"><span class="check">✓</span><span>Assignation transversale sans blocage entre dossier, calendrier et logistique.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>Déclenchement automatique des missions terrain avant restitution.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>Administration capable de voir immédiatement ce qui bloque, ce qui roule et ce qui dérive.</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="grid" style="gap:18px;">
|
||
<div class="card soft"><h3>Pour les associations</h3><p class="small">Réserver, suivre et recevoir un retour clair, documenté et juridiquement propre sur chaque demande.</p></div>
|
||
<div class="card soft"><h3>Pour l’administration</h3><p class="small">Piloter les stocks, les missions, les retards, les litiges et les arbitrages depuis un centre de contrôle unique.</p></div>
|
||
<div class="card soft"><h3>Pour le terrain</h3><p class="small">Ouvrir un lien sécurisé sur smartphone, signer, constater et clôturer sans application à installer ni blocage GPS.</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="footnote"><span>Positionnement</span><span>Service public numérique utile, robuste et prédictif</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Fonctionnalités principales">
|
||
<div class="brandbar"><div class="kicker">Fonctionnalités principales</div></div>
|
||
<h2>Le site couvre déjà les besoins essentiels du parcours association, instruction et logistique.</h2>
|
||
<div class="timeline">
|
||
<div class="step"><div class="num">1</div><h3>Espace association</h3><p class="small">Profil, documents, liens sociaux, thematiques multiples, gouvernance, suivi des demandes.</p></div>
|
||
<div class="step"><div class="num">2</div><h3>Annuaire public</h3><p class="small">Recherche, filtres, fiche publique, SIRET, RNA, coordonnées, réseaux sociaux.</p></div>
|
||
<div class="step"><div class="num">3</div><h3>Demandes en ligne</h3><p class="small">Salle, matériel événementiel, édition, duplication, PDF, statuts et commentaires admin.</p></div>
|
||
<div class="step"><div class="num">4</div><h3>Administration</h3><p class="small">Dashboard, audit, calendrier, logistique, utilisateurs, diffusion interne, apparence.</p></div>
|
||
</div>
|
||
<div class="stack-row">
|
||
<span class="pill">Profil association</span>
|
||
<span class="pill">Mes documents</span>
|
||
<span class="pill">Fiche publique</span>
|
||
<span class="pill">Demande salle</span>
|
||
<span class="pill">Matériel événementiel</span>
|
||
<span class="pill">Journal d’audit</span>
|
||
</div>
|
||
<div class="footnote"><span>Périmètre déjà réalisé</span><span>Base exploitable et évolutive</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Annuaire et carte">
|
||
<div class="brandbar"><div class="kicker">Annuaire territorial</div></div>
|
||
<h2>L’annuaire et la carte ne sont plus des vitrines : ce sont des outils de lecture du territoire.</h2>
|
||
<div class="grid cols-3" style="margin-top:38px;">
|
||
<div class="card">
|
||
<div class="eyebrow">Niveau 1</div>
|
||
<h3>Annuaire géographique</h3>
|
||
<p class="small">Consultation publique des associations avec recherche, filtres, thématiques, commune, SIRET, RNA et fiche détaillée.</p>
|
||
</div>
|
||
<div class="card gold">
|
||
<div class="eyebrow">Niveau 2</div>
|
||
<h3>Densité d’implantation</h3>
|
||
<p class="small">Lecture des concentrations d’associations par zone afin d’aider à la compréhension de la répartition territoriale.</p>
|
||
</div>
|
||
<div class="card blue">
|
||
<div class="eyebrow" style="color:#ffd8d8;">Niveau 3</div>
|
||
<h3>Flux logistique événementiel</h3>
|
||
<p class="small">Visualisation administrative des missions matériel, des retours attendus et des zones de déploiement.</p>
|
||
</div>
|
||
</div>
|
||
<div class="list" style="margin-top:26px;">
|
||
<div class="item"><span class="check">✓</span><span>Carte publique accessible sans connexion.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>Clustering et filtres croisés pour éviter les cartes illisibles.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>Lecture enrichie pour l’administration connectée.</span></div>
|
||
</div>
|
||
<div class="browser-grid">
|
||
<div class="browser-card">
|
||
<div class="browser-bar">
|
||
<span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
|
||
<span class="browser-url">www.portail-association973.com</span>
|
||
</div>
|
||
<iframe class="browser-frame" src="https://www.portail-association973.com/" title="Accueil public"></iframe>
|
||
<div class="browser-meta">
|
||
<h3>Accueil public</h3>
|
||
<p class="small">Point d’entrée visible et lisible pour découvrir le portail et accéder aux ressources publiques.</p>
|
||
</div>
|
||
</div>
|
||
<div class="browser-card">
|
||
<div class="browser-bar">
|
||
<span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
|
||
<span class="browser-url">/associations</span>
|
||
</div>
|
||
<iframe class="browser-frame" src="https://www.portail-association973.com/associations" title="Annuaire public"></iframe>
|
||
<div class="browser-meta">
|
||
<h3>Annuaire enrichi</h3>
|
||
<p class="small">Recherche, filtres, thématiques, identifiants publics et accès à la fiche détaillée.</p>
|
||
</div>
|
||
</div>
|
||
<div class="browser-card">
|
||
<div class="browser-bar">
|
||
<span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
|
||
<span class="browser-url">/associations/carte</span>
|
||
</div>
|
||
<iframe class="browser-frame" src="https://www.portail-association973.com/associations/carte" title="Carte publique"></iframe>
|
||
<div class="browser-meta">
|
||
<h3>Carte interactive</h3>
|
||
<p class="small">Visualisation géographique, densité d’implantation et lecture territoriale des associations.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footnote"><span>Valeur ajoutée</span><span>Lecture du tissu associatif et de son implantation</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Logistique">
|
||
<div class="brandbar"><div class="kicker">Logistique et workflow terrain</div></div>
|
||
<h2>Le cycle matériel devient un <span class="accent">workflow automatisé</span>, du bureau jusqu’au terrain.</h2>
|
||
<div class="grid cols-2" style="margin-top:36px;">
|
||
<div class="card">
|
||
<div class="eyebrow">Côté administration</div>
|
||
<div class="list">
|
||
<div class="item"><span class="check">✓</span><span>Assignation directe d’un service technique depuis le dossier ou depuis la vue logistique.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>Envoi automatique du lien terrain à J-4 avant la restitution.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>Statuts dynamiques : à attribuer, planifié, terrain, retard, conforme, litige.</span></div>
|
||
<div class="item"><span class="check danger">!</span><span>Alertes immédiates si le délai de 3 jours est dépassé ou si une dégradation est constatée.</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="card soft">
|
||
<div class="eyebrow">Côté terrain</div>
|
||
<div class="list">
|
||
<div class="item"><span class="check">✓</span><span>Lien web unique compatible Outlook, Gmail, Apple Mail et smartphone iOS/Android.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>Interface zéro installation pour constat, observations et double signature tactile.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>Horodatage infalsifiable par le serveur au moment de la validation finale.</span></div>
|
||
<div class="item"><span class="check">✓</span><span>GPS non bloquant : si le signal échoue, l’adresse de la manifestation reste la référence de secours.</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footnote"><span>Résultat</span><span>Le matériel devient pilotable, juridiquement traçable et résilient au terrain</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Dashboard admin">
|
||
<div class="brandbar"><div class="kicker">Administration intelligente</div></div>
|
||
<h2>Le tableau de bord admin agit comme un <span class="accent">centre de décision</span>, pas comme un menu de liens.</h2>
|
||
<div class="admin-showcase">
|
||
<div class="admin-badges">
|
||
<div class="admin-badge warn"><span>Restitutions en retard</span><strong>3</strong></div>
|
||
<div class="admin-badge gold"><span>Litiges / dégradations</span><strong>2</strong></div>
|
||
<div class="admin-badge soft"><span>Demandes en attente</span><strong>7</strong></div>
|
||
<div class="admin-badge"><span>Sorties et retours du jour</span><strong>6</strong></div>
|
||
</div>
|
||
<div class="admin-panel">
|
||
<div class="eyebrow">Lecture immédiate</div>
|
||
<div class="admin-stream">
|
||
<div class="admin-row">
|
||
<div>
|
||
<h3>Association Culture Kourou</h3>
|
||
<p class="small">Départ prévu ce matin · matériel événementiel</p>
|
||
</div>
|
||
<span class="tag blue">Assigné</span>
|
||
</div>
|
||
<div class="admin-row">
|
||
<div>
|
||
<h3>Association Sport Sinnamary</h3>
|
||
<p class="small">Retour attendu aujourd’hui · fiche terrain non clôturée</p>
|
||
</div>
|
||
<span class="tag red">Retard</span>
|
||
</div>
|
||
<div class="admin-row">
|
||
<div>
|
||
<h3>Mission logistique Iracoubo</h3>
|
||
<p class="small">Mini-calendrier sous tension · conflit de stock détecté</p>
|
||
</div>
|
||
<span class="tag red">Alerte</span>
|
||
</div>
|
||
<div class="admin-row">
|
||
<div>
|
||
<h3>Journal d’audit</h3>
|
||
<p class="small">Dernière action visible : clôture d’une restitution terrain et horodatage serveur.</p>
|
||
</div>
|
||
<span class="tag green">Traçable</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="browser-grid-2">
|
||
<div class="browser-card">
|
||
<div class="browser-bar">
|
||
<span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
|
||
<span class="browser-url">/admin</span>
|
||
</div>
|
||
<iframe class="browser-frame" src="https://www.portail-association973.com/admin" title="Dashboard administration"></iframe>
|
||
<div class="browser-meta">
|
||
<h3>Dashboard d’administration</h3>
|
||
<p class="small">Lecture immédiate des urgences, des flux du jour, des tensions logistiques et des actions récentes.</p>
|
||
</div>
|
||
</div>
|
||
<div class="browser-card">
|
||
<div class="browser-bar">
|
||
<span class="browser-dot"></span><span class="browser-dot"></span><span class="browser-dot"></span>
|
||
<span class="browser-url">/admin?tab=logistique</span>
|
||
</div>
|
||
<iframe class="browser-frame" src="https://www.portail-association973.com/admin?tab=logistique" title="Pilotage logistique"></iframe>
|
||
<div class="browser-meta">
|
||
<h3>Pilotage logistique</h3>
|
||
<p class="small">Assignation, suivi des retours, contrôle des délais et gestion des litiges au même endroit.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stack-row">
|
||
<span class="pill">KPI logistiques</span>
|
||
<span class="pill">Pilotage des demandes</span>
|
||
<span class="pill">Affectation rapide</span>
|
||
<span class="pill">Usage du stock par commune</span>
|
||
<span class="pill">Boîte noire d’audit</span>
|
||
</div>
|
||
<div class="footnote"><span>Logique</span><span>Voir vite, décider vite, agir vite</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Bénéfices direction">
|
||
<div class="brandbar"><div class="kicker">Bénéfices pour la direction</div></div>
|
||
<h2>Le portail donne à la CCDS une lecture plus claire, plus rapide et plus pilotable de son activité associative.</h2>
|
||
<div class="grid cols-3" style="margin-top:40px;">
|
||
<div class="card blue">
|
||
<div class="eyebrow" style="color:#ffd8d8;">Décision</div>
|
||
<h3>Mieux prioriser</h3>
|
||
<p class="small">Les urgences ne sont plus noyées dans les menus. Les retards, litiges et demandes en attente remontent immédiatement.</p>
|
||
</div>
|
||
<div class="card soft">
|
||
<div class="eyebrow">Territoire</div>
|
||
<h3>Mieux comprendre</h3>
|
||
<p class="small">La carte, l’annuaire et les indicateurs par commune permettent de mieux lire le tissu associatif et les flux matériels.</p>
|
||
</div>
|
||
<div class="card gold">
|
||
<div class="eyebrow">Organisation</div>
|
||
<h3>Mieux coordonner</h3>
|
||
<p class="small">Les services internes travaillent sur la même base, avec des statuts, un historique et des circuits plus homogènes.</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid cols-3" style="margin-top:22px;">
|
||
<div class="card">
|
||
<div class="metric">Temps</div>
|
||
<p class="small">Réduction des manipulations manuelles, des relances informelles et des allers-retours dispersés.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="metric">Traçabilité</div>
|
||
<p class="small">Chaque décision importante peut être suivie, auditée et comprise dans son contexte administratif.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="metric">Image</div>
|
||
<p class="small">Le portail projette une image de collectivité moderne, organisée et attentive à ses associations.</p>
|
||
</div>
|
||
</div>
|
||
<div class="footnote"><span>Lecture décideurs</span><span>Un portail qui soutient la décision et pas seulement l’exécution</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Sécurité et audit">
|
||
<div class="brandbar"><div class="kicker">Sécurité et audit</div></div>
|
||
<h2>La plateforme repose sur une <span class="accent">gouvernance stricte des accès</span> et une traçabilité de haut niveau.</h2>
|
||
<div class="grid cols-3" style="margin-top:38px;">
|
||
<div class="card blue">
|
||
<div class="eyebrow" style="color:#ffd8d8;">Rôle 1</div>
|
||
<h3>Super-administrateur</h3>
|
||
<p class="small">Pilote les règles globales, le stock de référence, les paramètres système et la gestion des comptes sensibles.</p>
|
||
</div>
|
||
<div class="card soft">
|
||
<div class="eyebrow">Rôle 2</div>
|
||
<h3>Administrateur</h3>
|
||
<p class="small">Instruit les demandes, gère le calendrier, assigne les missions et suit les restitutions ainsi que les litiges.</p>
|
||
</div>
|
||
<div class="card gold">
|
||
<div class="eyebrow">Rôle 3</div>
|
||
<h3>Agent de terrain</h3>
|
||
<p class="small">Dispose d’une interface épurée centrée sur ses missions assignées et sur l’état des lieux mobile.</p>
|
||
</div>
|
||
</div>
|
||
<div class="grid cols-2" style="margin-top:22px;">
|
||
<div class="card">
|
||
<div class="eyebrow">Boîte noire</div>
|
||
<h3>Journal d’audit inviolable</h3>
|
||
<p class="small">Chaque action importante est enregistrée : validation, assignation, modification de réglage, clôture terrain, date, heure serveur et IP quand elle est disponible.</p>
|
||
</div>
|
||
<div class="card warn">
|
||
<div class="eyebrow">Garantie</div>
|
||
<h3>Traçabilité append-only</h3>
|
||
<p class="small">La logique visée est celle d’un registre de contrôle et de preuve, pas seulement d’un historique visuel consultable.</p>
|
||
</div>
|
||
</div>
|
||
<div class="footnote"><span>Sécurité</span><span>Des droits cloisonnés et une mémoire fiable des actions</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Messagerie et gouvernance">
|
||
<div class="brandbar"><div class="kicker">Structuration métier</div></div>
|
||
<h2>Le portail ne gère pas seulement des écrans : il structure aussi les informations et la communication.</h2>
|
||
<div class="grid cols-2" style="margin-top:38px;">
|
||
<div class="card">
|
||
<div class="eyebrow">Association</div>
|
||
<h3>Gouvernance et identité</h3>
|
||
<p class="small">Le profil gère le représentant légal, les membres complémentaires, les thématiques multiples, les identifiants RNA/SIRET et les canaux numériques de l’association.</p>
|
||
<div class="stack-row">
|
||
<span class="pill">Représentant légal</span>
|
||
<span class="pill">Membres complémentaires</span>
|
||
<span class="pill">Thématiques</span>
|
||
<span class="pill">Facebook / Instagram</span>
|
||
</div>
|
||
</div>
|
||
<div class="card blue">
|
||
<div class="eyebrow" style="color:#ffd8d8;">Administration</div>
|
||
<h3>Messagerie et diffusion</h3>
|
||
<p class="small">Configuration SMTP depuis l’admin, services de diffusion interne, tests d’envoi, emails structurés et PDF joints selon les workflows métiers.</p>
|
||
<div class="stack-row">
|
||
<span class="pill">OVH / Zimbra</span>
|
||
<span class="pill">Gmail</span>
|
||
<span class="pill">Outlook</span>
|
||
<span class="pill">SMTP personnalisé</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footnote"><span>Professionnalisation</span><span>Des données propres et une communication plus fiable</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Litige et arbitrage">
|
||
<div class="brandbar"><div class="kicker">Protection du stock et arbitrage</div></div>
|
||
<h2>En cas de dégradation, le portail peut devenir un <span class="accent">protocole expéditif de litige</span>, pas seulement une alerte rouge.</h2>
|
||
<div class="timeline">
|
||
<div class="step"><div class="num">1</div><h3>Gel immédiat</h3><p class="small">Si l’agent coche non conforme, le dossier passe en litige et le matériel peut être retiré des disponibilités pour éviter une relocation erronée.</p></div>
|
||
<div class="step"><div class="num">2</div><h3>Évaluation</h3><p class="small">L’administrateur ouvre un panneau de chiffrage pour estimer le préjudice via devis ou valeur de remplacement préenregistrée.</p></div>
|
||
<div class="step"><div class="num">3</div><h3>Notification</h3><p class="small">Le courrier de litige ou le message d’information à l’association peut être généré et transmis avec les bonnes pièces.</p></div>
|
||
<div class="step"><div class="num">4</div><h3>Arbitrage</h3><p class="small">Retenue partielle, encaissement, réparation ou classement sans suite : la décision clôture enfin le dossier proprement.</p></div>
|
||
</div>
|
||
<div class="grid cols-3" style="margin-top:24px;">
|
||
<div class="card warn"><h3>Objectif financier</h3><p class="small">Protéger le stock et éviter qu’un matériel dégradé reparte dans une nouvelle réservation sans contrôle.</p></div>
|
||
<div class="card soft"><h3>Objectif juridique</h3><p class="small">Conserver une preuve horodatée, signée et contextualisée de l’état du matériel au moment du retour.</p></div>
|
||
<div class="card blue"><h3>Objectif métier</h3><p class="small">Permettre à la CCDS de traiter vite le litige sans sortir du portail ni recréer un dossier parallèle.</p></div>
|
||
</div>
|
||
<div class="footnote"><span>Ambition</span><span>Passer de l’alerte au protocole complet de protection</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Socle technique">
|
||
<div class="brandbar"><div class="kicker">Socle technique</div></div>
|
||
<h2>Une architecture moderne, cohérente et pensée pour un <span class="accent">écosystème logistique connecté</span>.</h2>
|
||
<div class="architecture">
|
||
<div class="node"><div class="eyebrow">Frontend</div><h3>React + Vite</h3><p class="small">Interface rapide, expérience fluide sur desktop et interface terrain exploitable sur smartphone.</p></div>
|
||
<div class="arrow" aria-hidden="true"></div>
|
||
<div class="node"><div class="eyebrow">Backend</div><h3>Express + tRPC</h3><p class="small">Procédures typées, règles métier, workflow automatisé, horodatage serveur et contrôle des droits.</p></div>
|
||
<div class="node"><div class="eyebrow">Données</div><h3>MySQL + Drizzle ORM</h3><p class="small">Base structurée pour l’annuaire, les demandes, la logistique, l’audit, les paramètres et les états des lieux.</p></div>
|
||
<div class="arrow" aria-hidden="true"></div>
|
||
<div class="node"><div class="eyebrow">Déploiement</div><h3>Docker + VPS OVH</h3><p class="small">Déploiement reproductible, rebuild contrôlé, sauvegardes, mises à jour et exploitation continue.</p></div>
|
||
</div>
|
||
<div class="stack-row">
|
||
<span class="pill">TypeScript</span>
|
||
<span class="pill">tRPC</span>
|
||
<span class="pill">Zod</span>
|
||
<span class="pill">Recharts</span>
|
||
<span class="pill">Leaflet</span>
|
||
<span class="pill">Docker</span>
|
||
</div>
|
||
<div class="footnote"><span>Atout</span><span>Un socle qui relie interface, règles métier, terrain et exploitation</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Feuille de route">
|
||
<div class="brandbar"><div class="kicker">Feuille de route</div></div>
|
||
<h2>Le portail est déjà exploitable, mais sa trajectoire naturelle est celle d’une <span class="accent">plateforme logistique prédictive</span>.</h2>
|
||
<div class="timeline">
|
||
<div class="step"><div class="num">01</div><h3>Consolider</h3><p class="small">Ancrer l’usage courant du portail sur l’annuaire, les demandes, la logistique et les circuits administratifs.</p></div>
|
||
<div class="step"><div class="num">02</div><h3>Sécuriser</h3><p class="small">Durcir encore les droits, la journalisation, les arbitrages litige et les règles de stock sensibles.</p></div>
|
||
<div class="step"><div class="num">03</div><h3>Prédire</h3><p class="small">Renforcer les alertes, la lecture par commune, la tension calendrier et l’aide à la décision pour la direction.</p></div>
|
||
<div class="step"><div class="num">04</div><h3>Étendre</h3><p class="small">Préparer une V2 avec davantage d’automatisation, de reporting, de connecteurs et de services terrain.</p></div>
|
||
</div>
|
||
<div class="grid cols-3" style="margin-top:26px;">
|
||
<div class="card soft"><h3>Priorité immédiate</h3><p class="small">Stabiliser l’usage et installer le portail comme réflexe commun des services et des associations.</p></div>
|
||
<div class="card soft"><h3>Prochaine marche</h3><p class="small">Transformer les données accumulées en lecture anticipative et en alertes vraiment décisionnelles.</p></div>
|
||
<div class="card blue"><h3>Cap global</h3><p class="small">Faire du portail le cerveau opérationnel de la logistique associative et matérielle de la CCDS.</p></div>
|
||
</div>
|
||
<div class="footnote"><span>Trajectoire projet</span><span>Une base solide aujourd’hui, un centre de contrôle demain</span></div>
|
||
</article>
|
||
|
||
<article class="slide" data-title="Conclusion">
|
||
<div class="brandbar"><div class="kicker">Conclusion</div></div>
|
||
<h2>Le portail CCDS est désormais une <span class="accent">plateforme de service et de pilotage</span>, pas seulement un site vitrine.</h2>
|
||
<div class="grid cols-3" style="margin-top:42px;">
|
||
<div class="card">
|
||
<div class="metric">Associations</div>
|
||
<p class="small">Un accès simplifié aux démarches, à l’annuaire, aux documents et au suivi.</p>
|
||
</div>
|
||
<div class="card">
|
||
<div class="metric">Administration</div>
|
||
<p class="small">Un centre de pilotage unifié pour les dossiers, le calendrier, le stock et les alertes.</p>
|
||
</div>
|
||
<div class="card blue">
|
||
<div class="metric" style="color:#fff;">Territoire</div>
|
||
<p class="small">Une meilleure lecture de l’implantation associative et des flux logistiques dans les Savanes.</p>
|
||
</div>
|
||
</div>
|
||
<p class="lead">Ce portail peut être présenté comme un outil numérique structurant au service de la CCDS, de ses associations, de ses agents et de son organisation interne.</p>
|
||
<div class="footnote"><span>Présentation du site réalisé</span><span>CCDS - Portail des associations</span></div>
|
||
</article>
|
||
</section>
|
||
</main>
|
||
|
||
<nav class="controls" aria-label="Navigation des slides">
|
||
<button id="prev" aria-label="Slide précédente">‹</button>
|
||
<span class="counter" id="counter">1 / 13</span>
|
||
<button id="next" aria-label="Slide suivante">›</button>
|
||
</nav>
|
||
|
||
<script>
|
||
const slides = Array.from(document.querySelectorAll('.slide'));
|
||
const counter = document.getElementById('counter');
|
||
let current = Number(localStorage.getItem('ccdsSiteDeckSlide') || 0);
|
||
|
||
function show(i) {
|
||
current = Math.max(0, Math.min(slides.length - 1, i));
|
||
slides.forEach((s, idx) => s.classList.toggle('active', idx === current));
|
||
counter.textContent = `${current + 1} / ${slides.length}`;
|
||
localStorage.setItem('ccdsSiteDeckSlide', String(current));
|
||
}
|
||
|
||
document.getElementById('prev').addEventListener('click', () => show(current - 1));
|
||
document.getElementById('next').addEventListener('click', () => show(current + 1));
|
||
|
||
window.addEventListener('keydown', (e) => {
|
||
if (['ArrowRight', 'PageDown', ' '].includes(e.key)) { e.preventDefault(); show(current + 1); }
|
||
if (['ArrowLeft', 'PageUp'].includes(e.key)) { e.preventDefault(); show(current - 1); }
|
||
if (e.key === 'Home') show(0);
|
||
if (e.key === 'End') show(slides.length - 1);
|
||
});
|
||
|
||
show(current);
|
||
</script>
|
||
</body>
|
||
</html>
|