Initial local backup snapshot
This commit is contained in:
commit
acd9e14ba5
367 changed files with 118038 additions and 0 deletions
570
organigramme-conseil-communautaire.html
Normal file
570
organigramme-conseil-communautaire.html
Normal file
|
|
@ -0,0 +1,570 @@
|
|||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Organigramme - Conseil Communautaire des Savanes</title>
|
||||
<style>
|
||||
:root {
|
||||
--blue: #000091;
|
||||
--blue-soft: #f3f6ff;
|
||||
--ink: #161927;
|
||||
--muted: #667085;
|
||||
--line: #d7dce8;
|
||||
--gold: #d8a31f;
|
||||
--green: #1f9d75;
|
||||
--cyan: #168aad;
|
||||
--paper: #ffffff;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: #dfe4ee;
|
||||
color: var(--ink);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 24px 32px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 14px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-bottom: 1px solid var(--line);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.toolbar button {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: var(--blue);
|
||||
color: white;
|
||||
padding: 10px 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toolbar button.secondary {
|
||||
background: white;
|
||||
color: var(--blue);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.sheet {
|
||||
width: 1600px;
|
||||
min-height: 1130px;
|
||||
margin: 28px auto;
|
||||
padding: 48px;
|
||||
background:
|
||||
radial-gradient(circle at 88% 8%, rgba(216, 163, 31, 0.22), transparent 24%),
|
||||
linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
|
||||
box-shadow: 0 26px 70px rgba(22, 25, 39, 0.18);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sheet::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border: 14px solid var(--blue);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 32px;
|
||||
align-items: end;
|
||||
margin-bottom: 34px;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 4px solid var(--blue);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
margin-bottom: 12px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid rgba(0, 0, 145, 0.2);
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
color: var(--blue);
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: var(--blue);
|
||||
font-size: 54px;
|
||||
line-height: 1.02;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 14px 0 0;
|
||||
max-width: 900px;
|
||||
color: var(--muted);
|
||||
font-size: 22px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 120px);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
min-height: 92px;
|
||||
padding: 14px;
|
||||
border: 1px solid rgba(0, 0, 145, 0.16);
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.stat strong {
|
||||
display: block;
|
||||
color: var(--blue);
|
||||
font-size: 34px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.president-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 42px;
|
||||
}
|
||||
|
||||
.person-card {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 118px 1fr;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
min-height: 156px;
|
||||
padding: 18px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--paper);
|
||||
box-shadow: 0 12px 28px rgba(22, 25, 39, 0.08);
|
||||
}
|
||||
|
||||
.president-card {
|
||||
width: 700px;
|
||||
border: 2px solid var(--blue);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 145, 0.16);
|
||||
}
|
||||
|
||||
.president-row::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -42px;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 42px;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.photo {
|
||||
position: relative;
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
border: 3px solid white;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(135deg, var(--blue-soft), white);
|
||||
box-shadow: inset 0 0 0 1px var(--line), 0 6px 16px rgba(22, 25, 39, 0.12);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.photo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.photo.has-image img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.photo span {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 18px;
|
||||
color: var(--blue);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.photo.has-image span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.role {
|
||||
color: var(--blue);
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.name {
|
||||
margin-top: 5px;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.delegation {
|
||||
margin-top: 9px;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.vice-grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 18px;
|
||||
margin-bottom: 38px;
|
||||
padding-top: 34px;
|
||||
}
|
||||
|
||||
.vice-grid::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 16.666%;
|
||||
right: 16.666%;
|
||||
height: 2px;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.vice-grid .person-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -34px;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
height: 34px;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.communes {
|
||||
display: grid;
|
||||
grid-template-columns: 0.9fr 1fr 1.55fr;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.commune {
|
||||
padding: 18px;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: 0 10px 24px rgba(22, 25, 39, 0.06);
|
||||
}
|
||||
|
||||
.commune.iracoubo {
|
||||
border-top: 8px solid var(--green);
|
||||
}
|
||||
|
||||
.commune.sinnamary {
|
||||
border-top: 8px solid var(--cyan);
|
||||
}
|
||||
|
||||
.commune.kourou {
|
||||
border-top: 8px solid var(--gold);
|
||||
}
|
||||
|
||||
.commune h2 {
|
||||
margin: 0 0 12px;
|
||||
color: var(--blue);
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.names {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.kourou .names {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.names div {
|
||||
min-height: 36px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 4px;
|
||||
background: #fbfcff;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.note {
|
||||
margin-top: 22px;
|
||||
padding: 14px 18px;
|
||||
border-left: 6px solid var(--blue);
|
||||
background: white;
|
||||
color: var(--muted);
|
||||
font-size: 15px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media print {
|
||||
@page {
|
||||
size: A3 landscape;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.preview {
|
||||
display: block;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sheet {
|
||||
width: 420mm;
|
||||
min-height: 297mm;
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
zoom: 1 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="toolbar">
|
||||
<button onclick="window.print()">Imprimer / Exporter en PDF</button>
|
||||
<button class="secondary" onclick="clearPhotos()">Effacer les photos</button>
|
||||
</div>
|
||||
|
||||
<div class="preview">
|
||||
<main class="sheet" id="sheet">
|
||||
<section class="header">
|
||||
<div>
|
||||
<span class="eyebrow">Mandature 2026-2032</span>
|
||||
<h1>Composition du Conseil Communautaire</h1>
|
||||
<p class="subtitle">
|
||||
Communauté de Communes des Savanes - délégations attribuées le 9 avril 2026
|
||||
par Monsieur Michael RIMANE, Président.
|
||||
</p>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="stat"><strong>31</strong><span>Élu.e.s communautaires</span></div>
|
||||
<div class="stat"><strong>9</strong><span>Vice-présidents</span></div>
|
||||
<div class="stat"><strong>21</strong><span>Conseillers communautaires</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="president-row">
|
||||
<article class="person-card president-card">
|
||||
<button class="photo" data-photo="michael-rimane" aria-label="Ajouter la photo de Michael RIMANE">
|
||||
<img alt="">
|
||||
<span>Ajouter<br>photo</span>
|
||||
</button>
|
||||
<div>
|
||||
<div class="role">Président</div>
|
||||
<div class="name">Michael RIMANE</div>
|
||||
<div class="delegation">Ressources humaines, gestion administrative et gestion des déchets</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="vice-grid">
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="enrico-william" aria-label="Ajouter la photo de Enrico WILLIAM"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">1er Vice-président</div><div class="name">Enrico WILLIAM</div><div class="delegation">Action sociale « CIASS »</div></div>
|
||||
</article>
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="veronique-jacaria" aria-label="Ajouter la photo de Véronique JACARIA"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">2e Vice-présidente</div><div class="name">Véronique JACARIA</div><div class="delegation">Fonds Européens - LEADER</div></div>
|
||||
</article>
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="michel-ange-jeremie" aria-label="Ajouter la photo de Michel-Ange JEREMIE"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">3e Vice-président</div><div class="name">Michel-Ange JEREMIE</div><div class="delegation">Affaires financières</div></div>
|
||||
</article>
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="ruanny-cantao-dias" aria-label="Ajouter la photo de Ruanny CANTAO DIAS"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">4e Vice-présidente</div><div class="name">Ruanny CANTAO DIAS</div><div class="delegation">Tourisme</div></div>
|
||||
</article>
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="patrick-cosset" aria-label="Ajouter la photo de Patrick COSSET"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">5e Vice-président</div><div class="name">Patrick COSSET</div><div class="delegation">Habitat</div></div>
|
||||
</article>
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="nicsonne-jeanty" aria-label="Ajouter la photo de Nicsonne JEANTY"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">6e Vice-président</div><div class="name">Nicsonne JEANTY</div><div class="delegation">Sport et culture</div></div>
|
||||
</article>
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="gilles-dufail" aria-label="Ajouter la photo de Gilles DUFAIL"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">7e Vice-président</div><div class="name">Gilles DUFAIL</div><div class="delegation">Aménagement du territoire et développement durable</div></div>
|
||||
</article>
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="naell-torvic" aria-label="Ajouter la photo de Naell TORVIC"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">8e Vice-président</div><div class="name">Naell TORVIC</div><div class="delegation">Cohésion sociale et services de proximité</div></div>
|
||||
</article>
|
||||
<article class="person-card">
|
||||
<button class="photo" data-photo="johanna-horth" aria-label="Ajouter la photo de Johanna HORTH"><img alt=""><span>Ajouter<br>photo</span></button>
|
||||
<div><div class="role">9e Vice-présidente</div><div class="name">Johanna HORTH</div><div class="delegation">Développement économique</div></div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="communes">
|
||||
<article class="commune iracoubo">
|
||||
<h2>Élus d'Iracoubo</h2>
|
||||
<div class="names">
|
||||
<div>Constantin-Richard AMARANTHE</div>
|
||||
<div>Albert GOLITIN</div>
|
||||
<div>Vanessa BOIS-BLANC</div>
|
||||
<div>Axelle BOIS-BLANC</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="commune sinnamary">
|
||||
<h2>Élus de Sinnamary</h2>
|
||||
<div class="names">
|
||||
<div>Jocelyn NIAMA</div>
|
||||
<div>Fidélia BOCAGE</div>
|
||||
<div>Corrine CHATEAU</div>
|
||||
<div>Aglaé LETARD</div>
|
||||
<div>Lauric SOPHIE</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="commune kourou">
|
||||
<h2>Élus de Kourou</h2>
|
||||
<div class="names">
|
||||
<div>Frédéric LLADERES</div>
|
||||
<div>Jean-Etienne ANTOINETTE</div>
|
||||
<div>Marie-France BANGO</div>
|
||||
<div>Enrico BERTHIER</div>
|
||||
<div>Françoise FREDOC</div>
|
||||
<div>Claudine RINGUET</div>
|
||||
<div>Micheline ANTOINETTE</div>
|
||||
<div>François RINGUET</div>
|
||||
<div>Stelly FERNAND LAURENCIN</div>
|
||||
<div>Keila DE PAIVA</div>
|
||||
<div>Albert Franck SAMUELS</div>
|
||||
<div>Benjamin ZULEMARO</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<p class="note">
|
||||
Pour ajouter une photo : cliquez sur une pastille « Ajouter photo », choisissez une image sur votre ordinateur,
|
||||
puis utilisez le bouton « Imprimer / Exporter en PDF ».
|
||||
</p>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<input id="photo-input" type="file" accept="image/*">
|
||||
|
||||
<script>
|
||||
const input = document.getElementById("photo-input");
|
||||
const sheet = document.getElementById("sheet");
|
||||
let currentPhotoButton = null;
|
||||
|
||||
function fitSheet() {
|
||||
if (window.matchMedia("print").matches) {
|
||||
sheet.style.zoom = "1";
|
||||
return;
|
||||
}
|
||||
|
||||
const availableWidth = window.innerWidth - 48;
|
||||
const scale = Math.min(1, availableWidth / 1600);
|
||||
sheet.style.zoom = scale;
|
||||
}
|
||||
|
||||
window.addEventListener("resize", fitSheet);
|
||||
fitSheet();
|
||||
|
||||
document.querySelectorAll(".photo").forEach((button) => {
|
||||
const saved = localStorage.getItem("photo-" + button.dataset.photo);
|
||||
if (saved) {
|
||||
setPhoto(button, saved);
|
||||
}
|
||||
|
||||
button.addEventListener("click", () => {
|
||||
currentPhotoButton = button;
|
||||
input.click();
|
||||
});
|
||||
});
|
||||
|
||||
input.addEventListener("change", () => {
|
||||
const file = input.files && input.files[0];
|
||||
if (!file || !currentPhotoButton) {
|
||||
return;
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const result = reader.result;
|
||||
setPhoto(currentPhotoButton, result);
|
||||
localStorage.setItem("photo-" + currentPhotoButton.dataset.photo, result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
input.value = "";
|
||||
});
|
||||
|
||||
function setPhoto(button, src) {
|
||||
const image = button.querySelector("img");
|
||||
image.src = src;
|
||||
button.classList.add("has-image");
|
||||
}
|
||||
|
||||
function clearPhotos() {
|
||||
document.querySelectorAll(".photo").forEach((button) => {
|
||||
const image = button.querySelector("img");
|
||||
image.removeAttribute("src");
|
||||
button.classList.remove("has-image");
|
||||
localStorage.removeItem("photo-" + button.dataset.photo);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue