Boutique

#app-soutien-commune .sc-card {
background:#f7f3ec;
border-radius:16px;
padding:16px;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
#app-soutien-commune h2 {
font-size:1.2rem;
margin:0 0 8px;
text-align:center;
}
#app-soutien-commune p {
font-size:0.9rem;
color:#555;
margin:0 0 8px;
text-align:center;
}
#app-soutien-commune .sc-video-wrapper {
position:relative;
width:100%;
padding-top:100%; /* carré */
overflow:hidden;
border-radius:16px;
background:#000;
margin-top:10px;
}
#app-soutien-commune video {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
object-fit:cover;
transform:scaleX(-1); /* miroir */
}
#app-soutien-commune .sc-overlay {
position:absolute;
top:0;left:0;
width:100%;
height:100%;
pointer-events:none;
background-size:cover;
background-position:center;
/* 👉 Remplace l’URL ci-dessous par l’URL WordPress de ton PNG */
background-image:url(« https://ton-site.fr/wp-content/uploads/overlay_campagne_commune.png »);
}
#app-soutien-commune .sc-actions {
display:flex;
gap:8px;
margin-top:12px;
flex-wrap:wrap;
justify-content:center;
}
#app-soutien-commune button {
border:none;
border-radius:999px;
padding:10px 16px;
font-size:0.9rem;
cursor:pointer;
background:#FF55FF;
color:#fff;
font-weight:600;
box-shadow:0 3px 10px rgba(0,0,0,0.15);
}
#app-soutien-commune button[disabled] {
opacity:0.6;
cursor:not-allowed;
box-shadow:none;
}
#app-soutien-commune .sc-result {
margin-top:16px;
text-align:center;
display:none;
}
#app-soutien-commune .sc-result img {
max-width:100%;
border-radius:16px;
display:block;
margin:0 auto 8px;
}
#app-soutien-commune .sc-note {
font-size:0.8rem;
color:#777;
text-align:left;
margin-top:8px;
}

(function() {
const startBtn = document.getElementById(‘sc-start’);
const captureBtn = document.getElementById(‘sc-capture’);
const downloadBtn = document.getElementById(‘sc-download’);
const video = document.getElementById(‘sc-video’);
const canvas = document.getElementById(‘sc-canvas’);
const resultBox = document.getElementById(‘sc-result’);
const photoImg = document.getElementById(‘sc-photo’);
let stream = null;
let lastDataUrl = null;

// Activer la caméra
startBtn.addEventListener(‘click’, async () => {
try {
stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
video.srcObject = stream;
captureBtn.disabled = false;
startBtn.disabled = true;
startBtn.textContent = « Caméra activée »;
} catch (err) {
alert(« Impossible d’activer la caméra. Vérifiez les autorisations. »);
console.error(err);
}
});

// Capture de la photo
captureBtn.addEventListener(‘click’, () => {
if (!stream) return;
const videoTrack = stream.getVideoTracks()[0];
const settings = videoTrack.getSettings();
const vw = settings.width || video.videoWidth;
const vh = settings.height || video.videoHeight;

const size = Math.min(vw, vh); // carré
const sx = (vw – size) / 2;
const sy = (vh – size) / 2;

canvas.width = size;
canvas.height = size;
const ctx = canvas.getContext(‘2d’);

// Dessiner la vidéo (miroir)
ctx.save();
ctx.translate(size, 0);
ctx.scale(-1, 1); // miroir
ctx.drawImage(video, sx, sy, size, size, 0, 0, size, size);
ctx.restore();

// Charger l’overlay et l’appliquer avant export
const overlay = new Image();
// 👉 Remplace aussi ici par l’URL de ton PNG si besoin
overlay.src = « https://ton-site.fr/wp-content/uploads/overlay_campagne_commune.png »;

overlay.onload = function() {
ctx.drawImage(overlay, 0, 0, size, size);
lastDataUrl = canvas.toDataURL(« image/png »);
photoImg.src = lastDataUrl;
resultBox.style.display = ‘block’;
downloadBtn.disabled = false;
};

overlay.onerror = function() {
// Si l’overlay ne charge pas, on garde quand même la photo
lastDataUrl = canvas.toDataURL(« image/png »);
photoImg.src = lastDataUrl;
resultBox.style.display = ‘block’;
downloadBtn.disabled = false;
console.warn(« Impossible de charger l’overlay, la photo est générée sans cadre. »);
};
});

// Téléchargement de la photo
downloadBtn.addEventListener(‘click’, () => {
if (!lastDataUrl) return;
const a = document.createElement(‘a’);
a.href = lastDataUrl;
a.download = ‘soutien_commune.png’;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
});

// Nettoyage si besoin
window.addEventListener(‘beforeunload’, () => {
if (stream) {
stream.getTracks().forEach(t => t.stop());
}
});
})();