Testlinote
/* =========================================================
PROGRESSIWEB — SCRIPT COMPLET AUTO-SUFFISANT
Version propre et fonctionnelle
========================================================= */
(function() {
'use strict';
/* =========================================================
1 — DONNÉES
========================================================= */
var DATA = {
images: [
"https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-1-presentation-1-standard-4nzeyz.jpg",
"https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-2-presentation-1-standard.jpg",
"https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-3-pre-sentation-1-standard.jpg",
"https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-4-pre-sentation-1-standard.jpg",
"https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-5-pre-sentation-1-standard.jpg",
"https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-6-pre-sentation-1-standard.jpg"
],
titles: [
"Un besoin grandissant",
"Sessions adaptées",
"Accompagnement résidents",
"Pourquoi Progressiweb ?",
"Nous nous déplaçons",
"Soulagez votre établissement"
],
popups: [
"Dans de nombreuses structures, et malgré tous les soins apportés par le personnel, beaucoup de résidents se sentent isolés, oubliés.
Leurs proches et les amis ne peuvent être là tous les jours.
Les seniors se sentent alors éloignés de tout et de tous, ce qui engendre des modifications profondes et durables dans la façon dont vos résidents perçoivent leur environnement.
Votre rôle :
• les accompagner dans leur vie de résident
• leur apporter tous les soins nécessaires
• votre personnel est souvent leur dernière famille", "Sessions adaptées
directement en établissement.
• individuel ou collectif
• durée 45 min à 1 h
• accompagnement complet", "Accompagnement des résidents
pour leurs usages quotidiens.
✔ simplicité
✔ sécurité
✔ progression adaptée", "Pourquoi Progressiweb :
✔ expertise seniors
✔ autonomie renforcée
✔ gain pour les équipes", "Intervention sur site :
✔ diagnostic
✔ mise en place
✔ suivi", "L'intervention de notre formateur est bénéfique sur différents secteurs de votre établissement.
Vos pensionnaires bénéficient d'une activité supplémentaire et épanouissante qui les aide à devenir plus autonomes.
Ces formations soulagent votre personnel sur le long terme, car c'est autant de sollicitations en moins pour des demandes diverses.
Pour les familles des résidents, c'est une bonne raison de vous confier un parent qui aura la possibilité de s'émanciper sur internet en toute sécurité." ], pdfUrl: "https://www.progressiweb.fr/documents/demarches.pdf", fiches: { 0: { title: "Un besoin grandissant", subtitle: "En EHPAD ou maisons de retraite", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-1-presentation-1-standard-4nzeyz.jpg", blockTitle: "Une réalité quotidienne", blockSubtitle: "L'isolement des résidents", blockText: "Dans de nombreuses structures, et malgré tous les soins apportés par le personnel, beaucoup de résidents se sentent isolés, oubliés.
Leurs proches et les amis ne peuvent être là tous les jours.
Les seniors se sentent alors éloignés de tout et de tous, ce qui engendre des modifications profondes et durables dans la façon dont vos résidents perçoivent leur environnement.", col1Title: "Pour l'établissement", col1Sub: "Un allégement des demandes", col1Text: "Vous ouvrez grandes les portes de la liberté à vos résidents.
Vous optimisez leur lien avec leurs proches tout en leur permettant une activité ludique.
Vous limitez de nombreuses sollicitations de votre personnel.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Une liberté salvatrice", col2Text: "Le résident se sent moins isolé, il peut à loisir « s'évader » pour des activités libres.
Le résident découvre le monde du web, les réseaux sociaux et le contact avec ses proches facilité malgré leur distance.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 1: { title: "Sessions adaptées", subtitle: "Formation accompagnée", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-2-presentation-1-standard.jpg", blockTitle: "Des formations sur mesure", blockSubtitle: "Adaptées à chaque résident", blockText: "Nos sessions sont conçues pour s'adapter au rythme de chaque résident.
• Individuel ou collectif
• Durée de 45 minutes à 1 heure
• Accompagnement complet et personnalisé
• Progression adaptée aux capacités de chacun", col1Title: "Pour l'établissement", col1Sub: "Simplicité d'organisation", col1Text: "Nous nous déplaçons directement dans votre structure.
Pas de déplacement pour vos résidents.
Une organisation clé en main.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Apprentissage serein", col2Text: "Un accompagnement bienveillant.
Un rythme adapté aux capacités.
Une progression visible et encourageante.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 2: { title: "Accompagnement résidents", subtitle: "Autonomie numérique", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-3-pre-sentation-1-standard.jpg", blockTitle: "Devenir autonome", blockSubtitle: "Un objectif accessible", blockText: "L'autonomie numérique est à la portée de tous.
• Simplicité d'utilisation
• Sécurité renforcée
• Progression adaptée
• Confiance en soi retrouvée", col1Title: "Pour l'établissement", col1Sub: "Des résidents plus sereins", col1Text: "Moins de demandes récurrentes.
Une ambiance plus apaisée.
Du temps libéré pour le personnel soignant.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Une fenêtre sur le monde", col2Text: "Restez connecté à vos proches.
Découvrez de nouveaux loisirs.
Retrouvez le goût de la découverte.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 3: { title: "Pourquoi Progressiweb ?", subtitle: "Soutien numérique", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-4-pre-sentation-1-standard.jpg", blockTitle: "Notre expertise à votre service", blockSubtitle: "Des spécialistes du numérique senior", blockText: "Progressiweb est spécialisé dans l'accompagnement numérique des seniors.
• Une expertise reconnue
• Des formateurs expérimentés
• Des méthodes adaptées
• Un suivi personnalisé", col1Title: "Notre engagement", col1Sub: "Qualité et proximité", col1Text: "Nous intervenons sur tout le territoire.
Des formations de qualité.
Un suivi dans la durée.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Nos valeurs", col2Sub: "Humanité et bienveillance", col2Text: "L'humain au cœur de notre démarche.
La bienveillance comme moteur.
L'autonomie comme objectif.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 4: { title: "Nous nous déplaçons", subtitle: "Intervention sur site", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-5-pre-sentation-1-standard.jpg", blockTitle: "Des formations à domicile", blockSubtitle: "Dans votre établissement", blockText: "Nous venons directement dans votre structure pour former vos résidents.
• Diagnostic préalable
• Mise en place des sessions
• Suivi personnalisé
• Adaptabilité aux contraintes de l'établissement", col1Title: "Pour l'établissement", col1Sub: "Une solution clé en main", col1Text: "Nous gérons toute l'organisation.
Pas de déplacement pour vos résidents.
Une formation adaptée à vos horaires.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Un apprentissage serein", col2Text: "Formez-vous dans un cadre connu et rassurant.
Un formateur à votre écoute.
Une progression à votre rythme.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 5: { title: "Soulagez votre établissement", subtitle: "Une charge mentale de moins", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-6-pre-sentation-1-standard.jpg", blockTitle: "Un bénéfice pour tous", blockSubtitle: "Moins de sollicitations, plus de sérénité", blockText: "L'intervention de notre formateur est bénéfique sur différents secteurs de votre établissement.
Vos pensionnaires bénéficient d'une activité supplémentaire et épanouissante qui les aide à devenir plus autonomes.
Ces formations soulagent votre personnel sur le long terme, car c'est autant de sollicitations en moins pour des demandes diverses.
Pour les familles des résidents, c'est une bonne raison de vous confier un parent qui aura la possibilité de s'émanciper sur internet en toute sécurité.", col1Title: "Pour l'établissement", col1Sub: "Un gain de temps précieux", col1Text: "Moins de demandes récurrentes.
Un personnel moins sollicité.
Une ambiance plus apaisée.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Plus de liberté", col2Text: "Une activité enrichissante.
La possibilité de communiquer librement.
Une ouverture sur le monde.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" } } }; /* ========================================================= 2 — ÉTAT DE L'APPLICATION ========================================================= */ var state = { currentText: "", currentFicheIndex: -1, isReadingTiles: false, isPopupReading: false, tileReadIndex: 0, tileReadTimer: null }; /* ========================================================= 3 — STYLES CSS ========================================================= */ function injectStyles() { var style = document.createElement("style"); style.textContent = ` .pw-kiosk{font-family:Arial,sans-serif;padding:20px;text-align:center;} .pw-header{font-size:34px;font-weight:700;margin-bottom:6px;color:#fff;} .pw-subheader{font-size:20px;font-weight:600;margin-bottom:6px;color:#fff;} .pw-subtext{font-size:15px;color:#eaeaea;margin:15px auto 25px;} .pw-speak-btn{background:#ffcc00;color:#000;border:none;padding:14px 18px;border-radius:10px;font-size:16px;font-weight:bold;cursor:pointer;margin-bottom:25px;} .pw-speak-btn.stop{background:#ff9000;} .pw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;max-width:1000px;margin:auto;} .pw-tile{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.15);border:2px solid rgba(255,255,255,.45);cursor:pointer;transition:.25s;position:relative;} .pw-tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 22px rgba(0,0,0,.18);} .pw-tile:active{transform:scale(.98);} .pw-tile img{width:100%;height:90px;object-fit:cover;display:block;} .pw-title{font-size:18px;font-weight:bold;margin:10px 0 5px;color:#1f2b35;} .pw-keywords{font-size:13px;color:#2b2b2b;padding:0 10px 10px;} .pw-tile.active-read{outline:4px solid #ffcc00;transform:scale(1.02);} .pw-tile.full{grid-column:1/-1;} .pw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:999999999;isolation:isolate;padding:15px;} .pw-popup{background:#fff;width:92%;max-width:750px;max-height:90vh;border-radius:16px;overflow-y:auto;color:#1f2b35;} .pw-popup-controls{display:flex;gap:10px;flex-wrap:wrap;padding:20px 20px 0;} .pw-popup-audio{background:#1a73e8;color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;} .pw-popup-audio.stop{background:#ff9000;} .pw-popup-content{padding:20px;} .pw-popup-title{font-size:28px;font-weight:700;margin:0 0 10px;color:#1f2b35;} .pw-popup-text{font-size:16px;line-height:1.6;} .pw-popup-action{background:#ffcc00;color:#000;border:none;padding:11px 15px;border-radius:10px;font-weight:bold;cursor:pointer;margin:10px 8px 0 0;} .pw-close{display:block;width:calc(100% - 40px);margin:20px;background:#b30000;color:#fff;border:none;padding:16px;border-radius:14px;font-size:20px;font-weight:bold;cursor:pointer;} .pw-fiche{padding:20px;} .pw-fiche-title{font-size:30px;font-weight:700;text-align:center;margin:0 0 5px;color:#1f2b35;} .pw-fiche-subtitle{font-size:19px;font-weight:600;text-align:center;color:#555;margin-bottom:18px;} .pw-fiche-image{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:20px;background:#eee;} .pw-fiche-image img{width:100%;height:100%;object-fit:cover;display:block;} .pw-fiche-block{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:18px;margin-bottom:20px;} .pw-fiche-block-title{font-size:20px;font-weight:700;text-align:center;color:#1f2b35;margin-bottom:3px;} .pw-fiche-block-subtitle{font-size:16px;font-weight:600;text-align:center;color:#555;margin-bottom:10px;} .pw-fiche-block-text{font-size:15px;line-height:1.6;color:#333;} .pw-fiche-cols{display:flex;gap:15px;margin-bottom:20px;} .pw-fiche-col{flex:1;background:#fff;border:2px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06);} .pw-fiche-col-image{width:80px;height:80px;margin:0 auto 10px;border-radius:14px;overflow:hidden;} .pw-fiche-col-image img{width:100%;height:100%;object-fit:cover;} .pw-fiche-col-title{font-size:18px;font-weight:700;margin-bottom:3px;} .pw-fiche-col-sub{font-size:14px;font-weight:600;color:#555;margin-bottom:6px;} .pw-fiche-col-text{font-size:14px;line-height:1.5;color:#333;} .pw-fiche-brand{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;background:#f8f9fa;border-radius:10px;margin-bottom:15px;} .pw-fiche-brand img{width:50px;height:50px;object-fit:contain;} .pw-fiche-brand-text{font-size:15px;font-weight:600;} .pw-fiche-brand-text small{font-weight:400;opacity:.7;} .pw-fiche-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px;} .pw-fiche-audio{background:#1a73e8;color:#fff;border:none;padding:11px 16px;border-radius:9px;font-size:16px;font-weight:bold;cursor:pointer;} .pw-fiche-audio.stop{background:#ff9000;} @media (min-width:900px){.pw-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:600px){.pw-kiosk{padding:12px;}.pw-header{font-size:26px;}.pw-subheader{font-size:17px;}.pw-grid{gap:10px;}.pw-title{font-size:16px;}.pw-fiche{padding:15px;}.pw-fiche-title{font-size:24px;}.pw-fiche-subtitle{font-size:17px;}.pw-fiche-cols{flex-direction:column;}.pw-fiche-col{width:100%;}} `; document.head.appendChild(style); } /* ========================================================= 4 — GÉNÉRATION DU HTML ========================================================= */ function generateHTML() { var container = document.getElementById('kiosk'); if (!container) { console.error('Conteneur #kiosk introuvable'); return; } var html = `
`;
container.innerHTML = html;
}
/* =========================================================
5 — FONCTIONS DE L'APPLICATION
========================================================= */
var app = {
/* ---- Gestion des tuiles ---- */
toggleReadTiles: function() {
if (state.isReadingTiles) {
this.stopTileReading();
} else {
this.startTileReading();
}
},
startTileReading: function() {
var btn = document.getElementById("readTilesBtn");
if (!btn) return;
this.stopPopupAudio();
speechSynthesis.cancel();
var tiles = document.querySelectorAll(".pw-tile");
if (!tiles.length) return;
state.isReadingTiles = true;
state.tileReadIndex = 0;
btn.innerText = "⏹ Stop";
btn.classList.add("stop");
tiles.forEach(function(tile) {
tile.classList.remove("active-read");
});
this.readNextTile();
},
readNextTile: function() {
if (!state.isReadingTiles) return;
var tiles = document.querySelectorAll(".pw-tile");
if (state.tileReadIndex >= tiles.length) {
this.stopTileReading();
return;
}
tiles.forEach(function(tile) {
tile.classList.remove("active-read");
});
var tile = tiles[state.tileReadIndex];
tile.classList.add("active-read");
var text = tile.innerText;
var msg = new SpeechSynthesisUtterance(text);
msg.lang = "fr-FR";
msg.rate = 0.9;
var self = this;
msg.onend = function() {
if (!state.isReadingTiles) return;
state.tileReadIndex++;
state.tileReadTimer = setTimeout(function() {
self.readNextTile();
}, 300);
};
msg.onerror = function() {
if (!state.isReadingTiles) return;
state.tileReadIndex++;
state.tileReadTimer = setTimeout(function() {
self.readNextTile();
}, 300);
};
speechSynthesis.speak(msg);
},
stopTileReading: function() {
var btn = document.getElementById("readTilesBtn");
state.isReadingTiles = false;
speechSynthesis.cancel();
if (state.tileReadTimer) {
clearTimeout(state.tileReadTimer);
state.tileReadTimer = null;
}
if (btn) {
btn.innerText = "🔊 Lire les blocs";
btn.classList.remove("stop");
}
document.querySelectorAll(".pw-tile").forEach(function(tile) {
tile.classList.remove("active-read");
});
},
/* ---- Gestion du popup audio ---- */
togglePopupAudio: function() {
if (state.isPopupReading) {
this.stopPopupAudio();
} else {
this.startPopupAudio();
}
},
startPopupAudio: function() {
var btn = document.getElementById("popupAudioBtn");
if (!state.currentText) return;
speechSynthesis.cancel();
state.isPopupReading = true;
if (btn) {
btn.innerText = "⏹ Stop";
btn.classList.add("stop");
}
var msg = new SpeechSynthesisUtterance(state.currentText);
msg.lang = "fr-FR";
msg.rate = 0.95;
var self = this;
msg.onend = function() { self.stopPopupAudio(); };
msg.onerror = function() { self.stopPopupAudio(); };
speechSynthesis.speak(msg);
},
stopPopupAudio: function() {
state.isPopupReading = false;
speechSynthesis.cancel();
var btn = document.getElementById("popupAudioBtn");
if (btn) {
btn.innerText = "🔊 Écouter";
btn.classList.remove("stop");
}
},
/* ---- Ouverture du popup ---- */
openPopup: function(index, event) {
if (event) event.stopPropagation();
this.stopTileReading();
this.stopPopupAudio();
var popup = document.getElementById("popup");
var title = document.getElementById("popupTitle");
var text = document.getElementById("popupText");
var video = document.getElementById("popupVideo");
var buttons = document.getElementById("popupButtons");
if (!popup || !title || !text || !video || !buttons) {
console.error("Éléments du popup manquants");
return;
}
state.currentFicheIndex = -1;
popup.style.display = "flex";
document.body.style.overflow = "hidden";
title.innerText = DATA.titles[index] || "";
text.innerHTML = DATA.popups[index] || "";
text.style.display = "block";
buttons.style.display = "block";
video.innerHTML = "";
state.currentText = text.innerText;
var audioBtn = document.getElementById("popupAudioBtn");
if (audioBtn) {
audioBtn.innerText = "🔊 Écouter";
audioBtn.classList.remove("stop");
}
// Boutons d'action
buttons.innerHTML = "";
var actions = this.getPopupActions(index);
actions.forEach(function(action) {
var btn = document.createElement("button");
btn.className = "pw-popup-action";
btn.innerText = action.label;
btn.onclick = function(e) {
e.stopPropagation();
if (action.type === 'fiche') {
window.progressiweb.openFicheDetail(action.index);
} else if (action.type === 'pdf') {
window.progressiweb.openPdfInPopup();
}
};
buttons.appendChild(btn);
});
},
getPopupActions: function(index) {
var actions = [];
var ficheMap = {
0: { label: "En savoir plus", fiche: 0 },
1: { label: "Détails de cette formation", fiche: 1 },
2: { label: "Détails de cette formation", fiche: 2 },
3: { label: "Détails de cette formation", fiche: 3 },
4: { label: "Détails de cette formation", fiche: 4 },
5: { label: "Détails de cette formation", fiche: 5 }
};
if (ficheMap[index]) {
actions.push({
type: 'fiche',
label: ficheMap[index].label,
index: ficheMap[index].fiche
});
if (index >= 4) {
actions.push({
type: 'pdf',
label: 'Télécharger PDF'
});
}
}
return actions;
},
/* ---- Fiches détaillées ---- */
openFicheDetail: function(index) {
var fiche = DATA.fiches[index];
if (!fiche) {
console.error("Fiche introuvable :", index);
return;
}
this.stopPopupAudio();
state.currentFicheIndex = index;
var video = document.getElementById("popupVideo");
var text = document.getElementById("popupText");
var buttons = document.getElementById("popupButtons");
if (!video || !text || !buttons) {
console.error("Éléments nécessaires à la fiche introuvables");
return;
}
var html = this.buildFicheHTML(fiche, index);
video.innerHTML = html;
text.style.display = "none";
buttons.style.display = "none";
var globalAudio = document.getElementById("popupAudioBtn");
if (globalAudio) {
globalAudio.style.display = "none";
}
},
buildFicheHTML: function(fiche, index) {
var html = '
/gi, " ") .replace(/<[^>]*>/g, " ") .replace(/\s+/g, " ") .trim(); if (!text) return; var utterance = new SpeechSynthesisUtterance(text); utterance.lang = "fr-FR"; utterance.rate = 0.9; utterance.pitch = 1; utterance.volume = 1; speechSynthesis.speak(utterance); }, /* ---- Fermeture ---- */ closePopup: function() { this.stopPopupAudio(); this.stopTileReading(); speechSynthesis.cancel(); var popup = document.getElementById("popup"); var text = document.getElementById("popupText");
Leurs proches et les amis ne peuvent être là tous les jours.
Les seniors se sentent alors éloignés de tout et de tous, ce qui engendre des modifications profondes et durables dans la façon dont vos résidents perçoivent leur environnement.
Votre rôle :
• les accompagner dans leur vie de résident
• leur apporter tous les soins nécessaires
• votre personnel est souvent leur dernière famille", "Sessions adaptées
directement en établissement.
• individuel ou collectif
• durée 45 min à 1 h
• accompagnement complet", "Accompagnement des résidents
pour leurs usages quotidiens.
✔ simplicité
✔ sécurité
✔ progression adaptée", "Pourquoi Progressiweb :
✔ expertise seniors
✔ autonomie renforcée
✔ gain pour les équipes", "Intervention sur site :
✔ diagnostic
✔ mise en place
✔ suivi", "L'intervention de notre formateur est bénéfique sur différents secteurs de votre établissement.
Vos pensionnaires bénéficient d'une activité supplémentaire et épanouissante qui les aide à devenir plus autonomes.
Ces formations soulagent votre personnel sur le long terme, car c'est autant de sollicitations en moins pour des demandes diverses.
Pour les familles des résidents, c'est une bonne raison de vous confier un parent qui aura la possibilité de s'émanciper sur internet en toute sécurité." ], pdfUrl: "https://www.progressiweb.fr/documents/demarches.pdf", fiches: { 0: { title: "Un besoin grandissant", subtitle: "En EHPAD ou maisons de retraite", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-1-presentation-1-standard-4nzeyz.jpg", blockTitle: "Une réalité quotidienne", blockSubtitle: "L'isolement des résidents", blockText: "Dans de nombreuses structures, et malgré tous les soins apportés par le personnel, beaucoup de résidents se sentent isolés, oubliés.
Leurs proches et les amis ne peuvent être là tous les jours.
Les seniors se sentent alors éloignés de tout et de tous, ce qui engendre des modifications profondes et durables dans la façon dont vos résidents perçoivent leur environnement.", col1Title: "Pour l'établissement", col1Sub: "Un allégement des demandes", col1Text: "Vous ouvrez grandes les portes de la liberté à vos résidents.
Vous optimisez leur lien avec leurs proches tout en leur permettant une activité ludique.
Vous limitez de nombreuses sollicitations de votre personnel.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Une liberté salvatrice", col2Text: "Le résident se sent moins isolé, il peut à loisir « s'évader » pour des activités libres.
Le résident découvre le monde du web, les réseaux sociaux et le contact avec ses proches facilité malgré leur distance.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 1: { title: "Sessions adaptées", subtitle: "Formation accompagnée", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-2-presentation-1-standard.jpg", blockTitle: "Des formations sur mesure", blockSubtitle: "Adaptées à chaque résident", blockText: "Nos sessions sont conçues pour s'adapter au rythme de chaque résident.
• Individuel ou collectif
• Durée de 45 minutes à 1 heure
• Accompagnement complet et personnalisé
• Progression adaptée aux capacités de chacun", col1Title: "Pour l'établissement", col1Sub: "Simplicité d'organisation", col1Text: "Nous nous déplaçons directement dans votre structure.
Pas de déplacement pour vos résidents.
Une organisation clé en main.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Apprentissage serein", col2Text: "Un accompagnement bienveillant.
Un rythme adapté aux capacités.
Une progression visible et encourageante.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 2: { title: "Accompagnement résidents", subtitle: "Autonomie numérique", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-3-pre-sentation-1-standard.jpg", blockTitle: "Devenir autonome", blockSubtitle: "Un objectif accessible", blockText: "L'autonomie numérique est à la portée de tous.
• Simplicité d'utilisation
• Sécurité renforcée
• Progression adaptée
• Confiance en soi retrouvée", col1Title: "Pour l'établissement", col1Sub: "Des résidents plus sereins", col1Text: "Moins de demandes récurrentes.
Une ambiance plus apaisée.
Du temps libéré pour le personnel soignant.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Une fenêtre sur le monde", col2Text: "Restez connecté à vos proches.
Découvrez de nouveaux loisirs.
Retrouvez le goût de la découverte.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 3: { title: "Pourquoi Progressiweb ?", subtitle: "Soutien numérique", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-4-pre-sentation-1-standard.jpg", blockTitle: "Notre expertise à votre service", blockSubtitle: "Des spécialistes du numérique senior", blockText: "Progressiweb est spécialisé dans l'accompagnement numérique des seniors.
• Une expertise reconnue
• Des formateurs expérimentés
• Des méthodes adaptées
• Un suivi personnalisé", col1Title: "Notre engagement", col1Sub: "Qualité et proximité", col1Text: "Nous intervenons sur tout le territoire.
Des formations de qualité.
Un suivi dans la durée.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Nos valeurs", col2Sub: "Humanité et bienveillance", col2Text: "L'humain au cœur de notre démarche.
La bienveillance comme moteur.
L'autonomie comme objectif.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 4: { title: "Nous nous déplaçons", subtitle: "Intervention sur site", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-5-pre-sentation-1-standard.jpg", blockTitle: "Des formations à domicile", blockSubtitle: "Dans votre établissement", blockText: "Nous venons directement dans votre structure pour former vos résidents.
• Diagnostic préalable
• Mise en place des sessions
• Suivi personnalisé
• Adaptabilité aux contraintes de l'établissement", col1Title: "Pour l'établissement", col1Sub: "Une solution clé en main", col1Text: "Nous gérons toute l'organisation.
Pas de déplacement pour vos résidents.
Une formation adaptée à vos horaires.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Un apprentissage serein", col2Text: "Formez-vous dans un cadre connu et rassurant.
Un formateur à votre écoute.
Une progression à votre rythme.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" }, 5: { title: "Soulagez votre établissement", subtitle: "Une charge mentale de moins", image: "https://primary.jwwb.nl/public/o/a/w/temp-ujkcukdnplfswodjjhei/formation-6-pre-sentation-1-standard.jpg", blockTitle: "Un bénéfice pour tous", blockSubtitle: "Moins de sollicitations, plus de sérénité", blockText: "L'intervention de notre formateur est bénéfique sur différents secteurs de votre établissement.
Vos pensionnaires bénéficient d'une activité supplémentaire et épanouissante qui les aide à devenir plus autonomes.
Ces formations soulagent votre personnel sur le long terme, car c'est autant de sollicitations en moins pour des demandes diverses.
Pour les familles des résidents, c'est une bonne raison de vous confier un parent qui aura la possibilité de s'émanciper sur internet en toute sécurité.", col1Title: "Pour l'établissement", col1Sub: "Un gain de temps précieux", col1Text: "Moins de demandes récurrentes.
Un personnel moins sollicité.
Une ambiance plus apaisée.", col1Image: "https://cdn.pixabay.com/photo/2024/04/19/16/59/ai-generated-8706802_1280.jpg", col2Title: "Pour le résident", col2Sub: "Plus de liberté", col2Text: "Une activité enrichissante.
La possibilité de communiquer librement.
Une ouverture sur le monde.", col2Image: "https://cdn.pixabay.com/photo/2025/07/20/14/15/ai-generated-9724575_1280.jpg" } } }; /* ========================================================= 2 — ÉTAT DE L'APPLICATION ========================================================= */ var state = { currentText: "", currentFicheIndex: -1, isReadingTiles: false, isPopupReading: false, tileReadIndex: 0, tileReadTimer: null }; /* ========================================================= 3 — STYLES CSS ========================================================= */ function injectStyles() { var style = document.createElement("style"); style.textContent = ` .pw-kiosk{font-family:Arial,sans-serif;padding:20px;text-align:center;} .pw-header{font-size:34px;font-weight:700;margin-bottom:6px;color:#fff;} .pw-subheader{font-size:20px;font-weight:600;margin-bottom:6px;color:#fff;} .pw-subtext{font-size:15px;color:#eaeaea;margin:15px auto 25px;} .pw-speak-btn{background:#ffcc00;color:#000;border:none;padding:14px 18px;border-radius:10px;font-size:16px;font-weight:bold;cursor:pointer;margin-bottom:25px;} .pw-speak-btn.stop{background:#ff9000;} .pw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;max-width:1000px;margin:auto;} .pw-tile{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.15);border:2px solid rgba(255,255,255,.45);cursor:pointer;transition:.25s;position:relative;} .pw-tile:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 10px 22px rgba(0,0,0,.18);} .pw-tile:active{transform:scale(.98);} .pw-tile img{width:100%;height:90px;object-fit:cover;display:block;} .pw-title{font-size:18px;font-weight:bold;margin:10px 0 5px;color:#1f2b35;} .pw-keywords{font-size:13px;color:#2b2b2b;padding:0 10px 10px;} .pw-tile.active-read{outline:4px solid #ffcc00;transform:scale(1.02);} .pw-tile.full{grid-column:1/-1;} .pw-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:999999999;isolation:isolate;padding:15px;} .pw-popup{background:#fff;width:92%;max-width:750px;max-height:90vh;border-radius:16px;overflow-y:auto;color:#1f2b35;} .pw-popup-controls{display:flex;gap:10px;flex-wrap:wrap;padding:20px 20px 0;} .pw-popup-audio{background:#1a73e8;color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;} .pw-popup-audio.stop{background:#ff9000;} .pw-popup-content{padding:20px;} .pw-popup-title{font-size:28px;font-weight:700;margin:0 0 10px;color:#1f2b35;} .pw-popup-text{font-size:16px;line-height:1.6;} .pw-popup-action{background:#ffcc00;color:#000;border:none;padding:11px 15px;border-radius:10px;font-weight:bold;cursor:pointer;margin:10px 8px 0 0;} .pw-close{display:block;width:calc(100% - 40px);margin:20px;background:#b30000;color:#fff;border:none;padding:16px;border-radius:14px;font-size:20px;font-weight:bold;cursor:pointer;} .pw-fiche{padding:20px;} .pw-fiche-title{font-size:30px;font-weight:700;text-align:center;margin:0 0 5px;color:#1f2b35;} .pw-fiche-subtitle{font-size:19px;font-weight:600;text-align:center;color:#555;margin-bottom:18px;} .pw-fiche-image{width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:20px;background:#eee;} .pw-fiche-image img{width:100%;height:100%;object-fit:cover;display:block;} .pw-fiche-block{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:18px;margin-bottom:20px;} .pw-fiche-block-title{font-size:20px;font-weight:700;text-align:center;color:#1f2b35;margin-bottom:3px;} .pw-fiche-block-subtitle{font-size:16px;font-weight:600;text-align:center;color:#555;margin-bottom:10px;} .pw-fiche-block-text{font-size:15px;line-height:1.6;color:#333;} .pw-fiche-cols{display:flex;gap:15px;margin-bottom:20px;} .pw-fiche-col{flex:1;background:#fff;border:2px solid rgba(0,0,0,.08);border-radius:14px;padding:16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.06);} .pw-fiche-col-image{width:80px;height:80px;margin:0 auto 10px;border-radius:14px;overflow:hidden;} .pw-fiche-col-image img{width:100%;height:100%;object-fit:cover;} .pw-fiche-col-title{font-size:18px;font-weight:700;margin-bottom:3px;} .pw-fiche-col-sub{font-size:14px;font-weight:600;color:#555;margin-bottom:6px;} .pw-fiche-col-text{font-size:14px;line-height:1.5;color:#333;} .pw-fiche-brand{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px;background:#f8f9fa;border-radius:10px;margin-bottom:15px;} .pw-fiche-brand img{width:50px;height:50px;object-fit:contain;} .pw-fiche-brand-text{font-size:15px;font-weight:600;} .pw-fiche-brand-text small{font-weight:400;opacity:.7;} .pw-fiche-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:15px;} .pw-fiche-audio{background:#1a73e8;color:#fff;border:none;padding:11px 16px;border-radius:9px;font-size:16px;font-weight:bold;cursor:pointer;} .pw-fiche-audio.stop{background:#ff9000;} @media (min-width:900px){.pw-grid{grid-template-columns:repeat(3,1fr);}} @media (max-width:600px){.pw-kiosk{padding:12px;}.pw-header{font-size:26px;}.pw-subheader{font-size:17px;}.pw-grid{gap:10px;}.pw-title{font-size:16px;}.pw-fiche{padding:15px;}.pw-fiche-title{font-size:24px;}.pw-fiche-subtitle{font-size:17px;}.pw-fiche-cols{flex-direction:column;}.pw-fiche-col{width:100%;}} `; document.head.appendChild(style); } /* ========================================================= 4 — GÉNÉRATION DU HTML ========================================================= */ function generateHTML() { var container = document.getElementById('kiosk'); if (!container) { console.error('Conteneur #kiosk introuvable'); return; } var html = `
🌟 Progressiweb
Ateliers numériques en EHPAD
Des formations adaptées pour vos résidents
`;
for (var i = 0; i < DATA.titles.length; i++) {
html += `
![${DATA.titles[i]}](%24%7BDATA.images%5Bi%5D%7D)
`;
}
html += `
${DATA.titles[i]}
Cliquez pour en savoir plus
';
html += '';
html += '
';
html += '
';
return html;
},
/* ---- Audio des fiches ---- */
playFicheAudio: function(index) {
var fiche = DATA.fiches[index];
if (!fiche) return;
speechSynthesis.cancel();
var text = fiche.title + ". " +
fiche.subtitle + ". " +
fiche.blockTitle + ". " +
fiche.blockSubtitle + ". " +
fiche.blockText + ". " +
fiche.col1Title + ". " +
fiche.col1Sub + ". " +
fiche.col1Text + ". " +
fiche.col2Title + ". " +
fiche.col2Sub + ". " +
fiche.col2Text;
text = text.replace(/' + fiche.title + '
'; html += '' + fiche.subtitle + '
';
html += '';
html += '
';
html += '' + fiche.blockTitle + '
';
html += '' + fiche.blockSubtitle + '
';
html += '' + fiche.blockText + '
';
html += '';
html += '
';
html += '';
html += '
';
html += '
';
html += '' + fiche.col1Title + '
';
html += '' + fiche.col1Sub + '
';
html += '' + fiche.col1Text + '
';
html += '';
html += '
';
html += '
';
html += '' + fiche.col2Title + '
';
html += '' + fiche.col2Sub + '
';
html += '' + fiche.col2Text + '
';
html += '';
html += '
';
html += '
';
html += '';
html += 'Progressiweb Ateliers numériques et services web pour seniors
';
html += '/gi, " ") .replace(/<[^>]*>/g, " ") .replace(/\s+/g, " ") .trim(); if (!text) return; var utterance = new SpeechSynthesisUtterance(text); utterance.lang = "fr-FR"; utterance.rate = 0.9; utterance.pitch = 1; utterance.volume = 1; speechSynthesis.speak(utterance); }, /* ---- Fermeture ---- */ closePopup: function() { this.stopPopupAudio(); this.stopTileReading(); speechSynthesis.cancel(); var popup = document.getElementById("popup"); var text = document.getElementById("popupText");