Mise à jour du script de stratégie pour inclure les pages Business et DataViz
This commit is contained in:
syoul
@@ -1,7 +1,8 @@
|
||||
// Script pour la stratégie - avec contenu complet du fichier Markdown
|
||||
// Script pour la gestion des pages de stratégie
|
||||
(function() {
|
||||
// Contenu de la stratégie (extrait de docs/strategie-evolution-technique.md)
|
||||
const strategieMarkdown = `# Stratégie d'Évolution Technique - Laplank
|
||||
// Contenu des pages Markdown
|
||||
const pagesContent = {
|
||||
'strategie': `# Stratégie d'Évolution Technique - Laplank
|
||||
|
||||
**Date de mise à jour** : 02/12/2025
|
||||
|
||||
@@ -289,12 +290,231 @@ Aucune migration urgente identifiée actuellement.
|
||||
|
||||
Cette stratégie d'évolution technique vise à aligner les choix technologiques avec les objectifs business, réduire les risques, optimiser les coûts et favoriser l'innovation.
|
||||
|
||||
La mise en œuvre de cette stratégie nécessite un engagement continu de l'équipe et un suivi régulier des métriques définies.`;
|
||||
La mise en œuvre de cette stratégie nécessite un engagement continu de l'équipe et un suivi régulier des métriques définies.`,
|
||||
|
||||
'business': `# Stratégie Business : Data Visualization & Flux Économiques
|
||||
|
||||
**Date** : 02/12/2025
|
||||
**Contexte** : En marge de l'écosystème Duniter/Ğ1, exploration des opportunités de marché autour de la visualisation de données économiques et logistiques.
|
||||
|
||||
---
|
||||
|
||||
## 1. Analyse du Marché de la Data Visualization
|
||||
|
||||
### Vue d'ensemble
|
||||
Le marché de la visualisation de données est en pleine expansion, porté par la complexité croissante des flux d'informations et le besoin de transparence.
|
||||
|
||||
**Taille du marché** : En croissance constante (CAGR estimé à >10% annuel).
|
||||
**Moteurs** :
|
||||
- Besoin de prise de décision basée sur les données (Data-Driven Decision Making).
|
||||
- Complexité des chaînes d'approvisionnement (Supply Chain).
|
||||
- Demande de transparence financière et RSE (Responsabilité Sociétale des Entreprises).
|
||||
|
||||
### Segments Pertinents pour Laplank
|
||||
|
||||
1. **Visualisation de Flux Financiers Complexes (FinTech / DeFi)**
|
||||
* **Besoin** : Comprendre les mouvements de fonds, la création monétaire, les graphes de transactions.
|
||||
* **Cible** : DAOs, projets Blockchain, ONG, Auditeurs financiers.
|
||||
* **Offre** : Dashboards interactifs de transparence, explorateurs de blockchain visuels (au-delà des simples listes de transactions).
|
||||
|
||||
2. **Transparence de la Supply Chain (Flux de Marchandises)**
|
||||
* **Besoin** : Tracer l'origine et le parcours des produits (traçabilité).
|
||||
* **Cible** : Coopératives, circuits courts, commerce équitable, industrie agroalimentaire.
|
||||
* **Lien avec Duniter** : Utilisation possible de la blockchain pour certifier les étapes, visualisées ensuite pour le consommateur final.
|
||||
|
||||
3. **Visualisation de Réseaux et Communautés (Web of Trust)**
|
||||
* **Besoin** : Cartographier les relations humaines, la confiance, la gouvernance décentralisée.
|
||||
* **Cible** : Associations, collectifs, réseaux sociaux décentralisés.
|
||||
|
||||
---
|
||||
|
||||
## 2. Opportunité : Flux Économiques & Marchandises
|
||||
|
||||
C'est le segment le plus prometteur "en marge" de la crypto pure, car il touche l'économie réelle.
|
||||
|
||||
### Le Problème
|
||||
- Les ERP (Enterprise Resource Planning) classiques sont austères et peu visuels.
|
||||
- La donnée est silotée.
|
||||
- Le consommateur ou le décideur ne "voit" pas le flux global.
|
||||
|
||||
### La Solution Laplank
|
||||
Proposer une **plateforme de visualisation unifiée** capable de représenter graphiquement :
|
||||
- **Flux monétaires** (€, Ğ1, Crypto)
|
||||
- **Flux physiques** (Marchandises, Stocks, Logistique)
|
||||
|
||||
### Cas d'Usage Concret : "Le Circuit Court Augmenté"
|
||||
Imaginez une coopérative de producteurs.
|
||||
- **Input** : Données de production, transport, vente.
|
||||
- **Visualisation** :
|
||||
- **Carte interactive (Leaflet)** : Localisation des producteurs et trajets.
|
||||
- **Graphe de flux (Sankey Diagram)** : Répartition de la valeur (combien va au producteur, au transporteur, à la coopérative). *Transparence radicale.*
|
||||
- **Tableau de bord (ECharts/D3)** : Saisonnalité, stocks en temps réel.
|
||||
|
||||
### Avantage Concurrentiel (Différenciation)
|
||||
- **Expertise Technique** : Maîtrise de technologies avancées (D3.js, Rust/Wasm pour la perf, ThreeFold pour l'hébergement souverain).
|
||||
- **Approche Éthique/Souveraine** : Hébergement décentralisé (ThreeFold), pas de GAFAM, respect des données.
|
||||
- **Double Compétence** : Capacité à lier Blockchain (certitude de la donnée) et DataViz (lisibilité de la donnée).
|
||||
|
||||
---
|
||||
|
||||
## 3. Modèle Économique Potentiel
|
||||
|
||||
1. **Service B2B (SaaS / On-Premise)**
|
||||
- Abonnement pour les entreprises/coopératives souhaitant visualiser leurs données.
|
||||
- Hébergement sur ThreeFold (revenus récurrents).
|
||||
|
||||
2. **Prestation de Conseil & Développement**
|
||||
- Création de dashboards sur mesure pour des clients spécifiques.
|
||||
- Audit de données et mise en qualité avant visualisation.
|
||||
|
||||
3. **Produit "Open Core"**
|
||||
- Version de base open-source (attraction communautaire).
|
||||
- Modules "Premium" pour connecteurs spécifiques (ERP propriétaires, Banques) ou fonctionnalités avancées d'analyse prédictive (IA).
|
||||
|
||||
---
|
||||
|
||||
## 4. Roadmap Business (Piste)
|
||||
|
||||
### Phase 1 : POC & Vitrine (6 mois)
|
||||
- Utiliser l'écosystème Duniter/Ğ1 comme "Client Zéro".
|
||||
- Développer l'explorateur visuel de Web of Trust et de flux monétaires.
|
||||
- **Objectif** : Démontrer la capacité technique et l'impact visuel. "Rendre sexy la donnée complexe".
|
||||
|
||||
### Phase 2 : Extension aux Flux Physiques (6-12 mois)
|
||||
- Trouver un partenaire dans l'économie réelle (ex: coopérative bio, réseau de logistique locale).
|
||||
- Adapter les outils de visualisation pour tracer des produits physiques.
|
||||
- **Objectif** : Valider le marché hors crypto.
|
||||
|
||||
### Phase 3 : Plateforme de Transparence Économique (12+ mois)
|
||||
- Lancer une offre packagée.
|
||||
- "Visualisez votre impact économique et écologique en temps réel".
|
||||
|
||||
---
|
||||
|
||||
## 5. Technologies Clés à Surveiller
|
||||
|
||||
- **Digital Twins (Jumeaux Numériques)** : Représentation virtuelle d'objets physiques.
|
||||
- **IoT (Internet of Things)** : Capteurs pour alimenter les données de flux physiques.
|
||||
- **Standardisation (GS1 / EPCIS)** : Normes d'échange de données logistiques.
|
||||
|
||||
---
|
||||
|
||||
## Conclusion
|
||||
|
||||
Le marché de la DataViz appliquée aux **flux économiques mixtes (monnaie + matière)** est une niche stratégique pertinente. Elle valorise l'expertise technique de l'équipe tout en s'ouvrant à des clients "traditionnels" cherchant transparence et optimisation. L'infrastructure ThreeFold apporte la couche de souveraineté nécessaire pour traiter ces données sensibles.`,
|
||||
|
||||
'dataviz': `# Opportunités d'Extension : Data Visualization
|
||||
|
||||
**Date** : 02/12/2025
|
||||
**Objectif** : Identifier les secteurs porteurs pour l'expertise DataViz de l'équipe, au-delà des flux économiques.
|
||||
|
||||
---
|
||||
|
||||
## 1. Territoires & Open Data (Smart Cities Souveraines)
|
||||
|
||||
Les collectivités locales disposent de plus en plus de données (Open Data) mais manquent d'outils pour les rendre intelligibles aux citoyens.
|
||||
|
||||
* **Opportunité** : Créer des portails de transparence pour les mairies/collectivités.
|
||||
* **Cas d'usage** :
|
||||
* **Visualisation budgétaire** : "Où vont mes impôts ?" (Diagrammes de Sankey, Treemaps).
|
||||
* **Urbanisme** : Cartographie des travaux, permis de construire, zones inondables.
|
||||
* **Démocratie participative** : Visualiser les résultats de consultations citoyennes.
|
||||
* **Synergie Technique** : Leaflet (cartes), D3.js (budgets), ThreeFold (hébergement local et souverain des données citoyennes).
|
||||
|
||||
## 2. Green Tech & Impact Environnemental
|
||||
|
||||
La mesure et la communication de l'impact écologique deviennent obligatoires (CSRD) et stratégiques.
|
||||
|
||||
* **Opportunité** : Tableaux de bord RSE (Responsabilité Sociétale des Entreprises) et empreinte carbone.
|
||||
* **Cas d'usage** :
|
||||
* **Visualisation de l'empreinte carbone** : Scope 1, 2, 3. Graphiques d'évolution.
|
||||
* **Monitoring énergétique** : Visualisation temps réel de la consommation (bâtiments, serveurs). *Lien direct avec l'offre ThreeFold "Green IT".*
|
||||
* **Traçabilité des déchets** : Suivre le cycle de vie des produits.
|
||||
* **Synergie Technique** : IoT (capteurs), ECharts (séries temporelles), Rust (traitement performant de gros volumes de données capteurs).
|
||||
|
||||
## 3. Visualisation de la Connaissance (Knowledge Management)
|
||||
|
||||
Dans un monde infobèse, organiser et visualiser l'information est une valeur clé.
|
||||
|
||||
* **Opportunité** : Outils de "Second Cerveau" ou de gestion des connaissances pour entreprises/recherche.
|
||||
* **Cas d'usage** :
|
||||
* **Graphes de connaissances** : Visualiser les liens entre documents, personnes, projets (comme Obsidian ou Roam, mais version web/collaborative).
|
||||
* **Cartographie des compétences** : Version avancée du Radar Technologique pour les RH (gestion des talents).
|
||||
* **Exploration documentaire** : Naviguer visuellement dans des bases documentaires complexes (juridique, technique).
|
||||
* **Synergie Technique** : Cytoscape.js (graphes), ElasticSearch/MeiliSearch (indexation), IA (pour générer les liens).
|
||||
|
||||
## 4. Cybersécurité & Réseaux
|
||||
|
||||
Visualiser l'invisible pour mieux protéger.
|
||||
|
||||
* **Opportunité** : Interfaces de monitoring sécurité pour PME.
|
||||
* **Cas d'usage** :
|
||||
* **Cartographie du réseau** : Visualiser tous les appareils connectés et leurs communications.
|
||||
* **Visualisation d'attaques** : Représenter les tentatives d'intrusion en temps réel (cartes de chaleur, flux).
|
||||
* **Analyse de logs** : Rendre les logs serveurs lisibles graphiquement.
|
||||
* **Synergie Technique** : Rust (sondes réseau), WebGL/Canvas (visualisation haute performance), ThreeFold (réseau overlay).
|
||||
|
||||
---
|
||||
|
||||
## Matrice de Priorisation
|
||||
|
||||
| Secteur | Potentiel Marché | Synergie Technique Actuelle | Complexité Métier | Priorité |
|
||||
| :--- | :---: | :---: | :---: | :---: |
|
||||
| **Flux Éco (Business)** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Moyenne | **1** |
|
||||
| **Territoires (Smart City)** | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Élevée (Politique) | **2** |
|
||||
| **Green Tech** | ⭐⭐⭐⭐ | ⭐⭐⭐ | Moyenne | **3** |
|
||||
| **Connaissance (KM)** | ⭐⭐⭐ | ⭐⭐⭐⭐ | Faible | **2** (Interne d'abord) |
|
||||
| **Cybersécurité** | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | Très Élevée | **4** |
|
||||
|
||||
## Conclusion
|
||||
|
||||
Si le focus principal reste les **Flux Économiques** (cohérent avec l'historique Duniter), l'axe **Territoires/Open Data** est le pivot le plus naturel : il s'agit toujours de visualiser des ressources et des flux, mais appliqués à la cité. De plus, l'argument de la "Souveraineté Numérique" (ThreeFold) y résonne très fort.`
|
||||
};
|
||||
|
||||
const pageTitles = {
|
||||
'strategie': 'Stratégie Technique',
|
||||
'business': 'Business',
|
||||
'dataviz': 'Opportunités DataViz'
|
||||
};
|
||||
|
||||
// Fonction pour convertir Markdown en HTML
|
||||
function markdownToHtml(md) {
|
||||
let html = md;
|
||||
|
||||
// Tableaux
|
||||
html = html.replace(/\|(.+)\|/g, function(match) {
|
||||
// Gestion basique des tableaux markdown
|
||||
if (match.includes('---')) return ''; // Ignore la ligne de séparation
|
||||
const cells = match.split('|').filter(c => c.trim() !== '');
|
||||
const cellTag = match.includes('Secteur') || match.includes('Potentiel') ? 'th' : 'td';
|
||||
return '<tr>' + cells.map(c => `<${cellTag} style="border: 1px solid #ddd; padding: 8px; text-align: left;">${c.trim()}</${cellTag}>`).join('') + '</tr>';
|
||||
});
|
||||
|
||||
// Envelopper les lignes de tableau dans une table si nécessaire (simplifié)
|
||||
// Pour une vraie implémentation, utiliser une lib comme marked ou showdown
|
||||
// Ici on fait un fix rapide pour que les tableaux s'affichent à peu près correctement
|
||||
if (html.includes('<tr>')) {
|
||||
// C'est très rudimentaire, idéalement on utiliserait une vraie lib
|
||||
const parts = html.split('\n');
|
||||
let inTable = false;
|
||||
html = parts.map(line => {
|
||||
if (line.startsWith('<tr>')) {
|
||||
if (!inTable) {
|
||||
inTable = true;
|
||||
return '<table style="border-collapse: collapse; width: 100%; margin: 20px 0;">' + line;
|
||||
}
|
||||
return line;
|
||||
} else {
|
||||
if (inTable && line.trim() === '') {
|
||||
inTable = false;
|
||||
return '</table>';
|
||||
}
|
||||
return line;
|
||||
}
|
||||
}).join('\n');
|
||||
if (inTable) html += '</table>';
|
||||
}
|
||||
|
||||
// Titres
|
||||
html = html.replace(/^# (.*$)/gim, '<h1>$1</h1>');
|
||||
html = html.replace(/^## (.*$)/gim, '<h2>$1</h2>');
|
||||
@@ -314,14 +534,16 @@ La mise en œuvre de cette stratégie nécessite un engagement continu de l'équ
|
||||
|
||||
// Paragraphes
|
||||
html = html.split('\n\n').map(block => {
|
||||
if (block.trim().startsWith('<h') || block.trim().startsWith('<ul') || block.trim().startsWith('<li') || block.trim().startsWith('<hr')) {
|
||||
const trimmed = block.trim();
|
||||
if (!trimmed) return '';
|
||||
if (trimmed.startsWith('<h') || trimmed.startsWith('<ul') || trimmed.startsWith('<li') || trimmed.startsWith('<hr') || trimmed.startsWith('<table') || trimmed.startsWith('<tr') || trimmed.startsWith('</table')) {
|
||||
return block;
|
||||
}
|
||||
return '<p>' + block.trim() + '</p>';
|
||||
return '<p>' + trimmed + '</p>';
|
||||
}).join('\n');
|
||||
|
||||
// Grouper les listes
|
||||
html = html.replace(/(<li>.*?<\/li>)/gim, function(match) {
|
||||
html = html.replace(/(<li>.*?<\/li>(\s*<li>.*?<\/li>)*)/gim, function(match) {
|
||||
return '<ul>' + match + '</ul>';
|
||||
});
|
||||
html = html.replace(/<\/ul>\s*<ul>/gim, '');
|
||||
@@ -330,209 +552,166 @@ La mise en œuvre de cette stratégie nécessite un engagement continu de l'équ
|
||||
}
|
||||
|
||||
function initStrategyLinks() {
|
||||
addStrategyLinkToHeader();
|
||||
interceptStrategyLinks();
|
||||
handleStrategyRoute();
|
||||
addLinksToHeader();
|
||||
handleRoute();
|
||||
}
|
||||
|
||||
function handleStrategyRoute() {
|
||||
if (window.location.pathname === '/business/strategie' || window.location.pathname === '/business/strategie.html' || window.location.hash === '#strategie') {
|
||||
createStrategyPage();
|
||||
}
|
||||
function handleRoute() {
|
||||
const path = window.location.pathname;
|
||||
const hash = window.location.hash;
|
||||
|
||||
// Détection simple
|
||||
if (hash === '#strategie' || path.includes('/strategie')) showPage('strategie');
|
||||
else if (hash === '#business' || path.includes('/business-strat')) showPage('business');
|
||||
else if (hash === '#dataviz' || path.includes('/dataviz')) showPage('dataviz');
|
||||
}
|
||||
|
||||
function interceptStrategyLinks() {
|
||||
document.addEventListener('click', function(e) {
|
||||
const link = e.target.closest('a');
|
||||
if (link && (link.href.includes('/business/strategie') || link.getAttribute('href') === '/business/strategie' || link.id === 'strategie-link' || link.classList.contains('strategie-link'))) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
createStrategyPage();
|
||||
return false;
|
||||
}
|
||||
}, true);
|
||||
}
|
||||
function showPage(pageId) {
|
||||
if (!pagesContent[pageId]) return;
|
||||
|
||||
function createStrategyPage() {
|
||||
if (!window.originalBodyContent) {
|
||||
window.originalBodyContent = document.body.innerHTML;
|
||||
}
|
||||
|
||||
// Convertir le Markdown en HTML
|
||||
const htmlContent = markdownToHtml(strategieMarkdown);
|
||||
const htmlContent = markdownToHtml(pagesContent[pageId]);
|
||||
|
||||
document.body.innerHTML = `
|
||||
<div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background: #f5f5f5; min-height: 100vh;">
|
||||
<div style="background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||
<a href="#" id="back-to-radar" style="display: inline-block; margin-bottom: 20px; color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer;">← Retour au Radar</a>
|
||||
<div id="strategie-content" style="line-height: 1.8; color: #333;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<a href="#" id="back-to-radar" style="color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer; font-size: 1.1em;">← Retour au Radar</a>
|
||||
<div style="display: flex; gap: 15px;">
|
||||
${Object.keys(pageTitles).map(key =>
|
||||
`<a href="#${key}" class="nav-link" data-page="${key}" style="color: ${key === pageId ? '#1a4d3a' : '#2ecc71'}; text-decoration: ${key === pageId ? 'underline' : 'none'}; font-weight: bold; cursor: pointer;">${pageTitles[key]}</a>`
|
||||
).join('')}
|
||||
</div>
|
||||
</div>
|
||||
<div id="page-content" style="line-height: 1.8; color: #333;">
|
||||
${htmlContent}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Appliquer des styles pour le contenu Markdown
|
||||
const contentDiv = document.getElementById('strategie-content');
|
||||
if (contentDiv) {
|
||||
contentDiv.querySelectorAll('h1').forEach(h => {
|
||||
// Styles
|
||||
styleContent();
|
||||
|
||||
// Event listeners
|
||||
document.getElementById('back-to-radar').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
if (window.originalBodyContent) {
|
||||
document.body.innerHTML = window.originalBodyContent;
|
||||
window.history.pushState(null, null, window.location.pathname.replace(/\/business\/.*$/, '/business/'));
|
||||
setTimeout(initStrategyLinks, 100);
|
||||
} else {
|
||||
window.location.href = '/business/';
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.nav-link').forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = this.getAttribute('data-page');
|
||||
showPage(target);
|
||||
});
|
||||
});
|
||||
|
||||
window.history.pushState({page: pageId}, pageTitles[pageId], `/business/${pageId}`);
|
||||
}
|
||||
|
||||
function styleContent() {
|
||||
const contentDiv = document.getElementById('page-content');
|
||||
if (!contentDiv) return;
|
||||
|
||||
contentDiv.querySelectorAll('h1').forEach(h => {
|
||||
h.style.color = '#1a4d3a';
|
||||
h.style.borderBottom = '3px solid #2ecc71';
|
||||
h.style.paddingBottom = '10px';
|
||||
h.style.marginTop = '30px';
|
||||
h.style.marginBottom = '20px';
|
||||
});
|
||||
contentDiv.querySelectorAll('h2').forEach(h => {
|
||||
});
|
||||
contentDiv.querySelectorAll('h2').forEach(h => {
|
||||
h.style.color = '#2ecc71';
|
||||
h.style.marginTop = '30px';
|
||||
h.style.marginBottom = '15px';
|
||||
});
|
||||
contentDiv.querySelectorAll('h3').forEach(h => {
|
||||
});
|
||||
contentDiv.querySelectorAll('h3').forEach(h => {
|
||||
h.style.color = '#3498db';
|
||||
h.style.marginTop = '20px';
|
||||
h.style.marginBottom = '10px';
|
||||
});
|
||||
contentDiv.querySelectorAll('h4').forEach(h => {
|
||||
h.style.color = '#555';
|
||||
h.style.marginTop = '15px';
|
||||
h.style.marginBottom = '8px';
|
||||
});
|
||||
contentDiv.querySelectorAll('ul').forEach(ul => {
|
||||
ul.style.margin = '10px 0';
|
||||
ul.style.paddingLeft = '30px';
|
||||
ul.style.listStyleType = 'disc';
|
||||
});
|
||||
contentDiv.querySelectorAll('li').forEach(li => {
|
||||
li.style.margin = '5px 0';
|
||||
});
|
||||
contentDiv.querySelectorAll('p').forEach(p => {
|
||||
p.style.margin = '10px 0';
|
||||
});
|
||||
contentDiv.querySelectorAll('a').forEach(a => {
|
||||
});
|
||||
contentDiv.querySelectorAll('ul, ol').forEach(l => {
|
||||
l.style.marginLeft = '20px';
|
||||
l.style.marginBottom = '15px';
|
||||
});
|
||||
contentDiv.querySelectorAll('li').forEach(li => {
|
||||
li.style.marginBottom = '5px';
|
||||
});
|
||||
contentDiv.querySelectorAll('p').forEach(p => {
|
||||
p.style.marginBottom = '15px';
|
||||
});
|
||||
contentDiv.querySelectorAll('a').forEach(a => {
|
||||
a.style.color = '#2ecc71';
|
||||
a.style.textDecoration = 'none';
|
||||
});
|
||||
contentDiv.querySelectorAll('a').forEach(a => {
|
||||
a.addEventListener('mouseenter', function() {
|
||||
this.style.textDecoration = 'underline';
|
||||
});
|
||||
a.addEventListener('mouseleave', function() {
|
||||
this.style.textDecoration = 'none';
|
||||
});
|
||||
});
|
||||
contentDiv.querySelectorAll('hr').forEach(hr => {
|
||||
hr.style.border = 'none';
|
||||
hr.style.borderTop = '2px solid #2ecc71';
|
||||
hr.style.margin = '30px 0';
|
||||
});
|
||||
contentDiv.querySelectorAll('strong').forEach(s => {
|
||||
s.style.color = '#1a4d3a';
|
||||
});
|
||||
}
|
||||
|
||||
const backLink = document.getElementById('back-to-radar');
|
||||
if (backLink) {
|
||||
backLink.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
if (window.originalBodyContent) {
|
||||
document.body.innerHTML = window.originalBodyContent;
|
||||
setTimeout(initStrategyLinks, 100);
|
||||
} else {
|
||||
window.location.href = '/business/';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.history.pushState({page: 'strategie'}, 'Stratégie', '/business/strategie');
|
||||
});
|
||||
}
|
||||
|
||||
function addStrategyLinkToHeader() {
|
||||
// Chercher le header ou la barre de navigation
|
||||
function addLinksToHeader() {
|
||||
// Chercher le header
|
||||
const header = document.querySelector('header') ||
|
||||
document.querySelector('nav') ||
|
||||
document.querySelector('[class*="header"]') ||
|
||||
document.querySelector('[class*="nav"]') ||
|
||||
document.querySelector('[class*="Header"]') ||
|
||||
document.querySelector('[class*="Nav"]') ||
|
||||
document.querySelector('div[role="banner"]');
|
||||
|
||||
if (header) {
|
||||
if (header.querySelector('#strategie-link') || header.querySelector('a[href*="strategie"]')) {
|
||||
return;
|
||||
}
|
||||
const strategyLink = document.createElement('a');
|
||||
strategyLink.id = 'strategie-link';
|
||||
strategyLink.className = 'strategie-link';
|
||||
strategyLink.href = '#strategie';
|
||||
strategyLink.textContent = '📋 Stratégie';
|
||||
strategyLink.style.marginLeft = '15px';
|
||||
strategyLink.style.color = '#2ecc71';
|
||||
strategyLink.style.textDecoration = 'none';
|
||||
strategyLink.style.fontWeight = 'bold';
|
||||
strategyLink.style.cursor = 'pointer';
|
||||
strategyLink.style.display = 'inline-block';
|
||||
strategyLink.style.padding = '5px 10px';
|
||||
strategyLink.style.borderRadius = '4px';
|
||||
strategyLink.style.transition = 'background 0.2s';
|
||||
strategyLink.addEventListener('mouseenter', function() {
|
||||
this.style.background = 'rgba(46, 204, 113, 0.1)';
|
||||
});
|
||||
strategyLink.addEventListener('mouseleave', function() {
|
||||
this.style.background = 'transparent';
|
||||
});
|
||||
strategyLink.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
createStrategyPage();
|
||||
});
|
||||
header.appendChild(strategyLink);
|
||||
let container = header;
|
||||
|
||||
// Si pas de header, créer une barre fixe
|
||||
if (!header) {
|
||||
let fixedBar = document.getElementById('custom-nav-bar');
|
||||
if (!fixedBar) {
|
||||
fixedBar = document.createElement('div');
|
||||
fixedBar.id = 'custom-nav-bar';
|
||||
fixedBar.style.cssText = 'position: fixed; top: 0; right: 0; padding: 10px 20px; z-index: 9999; display: flex; gap: 15px; background: rgba(255,255,255,0.9); border-bottom-left-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);';
|
||||
document.body.appendChild(fixedBar);
|
||||
}
|
||||
container = fixedBar;
|
||||
} else {
|
||||
// Si pas de header trouvé, créer une barre en haut de page
|
||||
const existingTopBar = document.getElementById('strategie-top-bar');
|
||||
if (existingTopBar) {
|
||||
return;
|
||||
}
|
||||
|
||||
const topBar = document.createElement('div');
|
||||
topBar.id = 'strategie-top-bar';
|
||||
topBar.style.cssText = 'position: fixed; top: 0; left: 0; right: 0; background: rgba(26, 77, 58, 0.95); padding: 10px 20px; z-index: 1000; text-align: right; box-shadow: 0 2px 4px rgba(0,0,0,0.1);';
|
||||
|
||||
const strategyLink = document.createElement('a');
|
||||
strategyLink.id = 'strategie-link';
|
||||
strategyLink.className = 'strategie-link';
|
||||
strategyLink.href = '#strategie';
|
||||
strategyLink.textContent = '📋 Stratégie';
|
||||
strategyLink.style.color = '#2ecc71';
|
||||
strategyLink.style.textDecoration = 'none';
|
||||
strategyLink.style.fontWeight = 'bold';
|
||||
strategyLink.style.cursor = 'pointer';
|
||||
strategyLink.style.padding = '5px 15px';
|
||||
strategyLink.style.borderRadius = '4px';
|
||||
strategyLink.style.transition = 'background 0.2s';
|
||||
strategyLink.addEventListener('mouseenter', function() {
|
||||
this.style.background = 'rgba(46, 204, 113, 0.2)';
|
||||
});
|
||||
strategyLink.addEventListener('mouseleave', function() {
|
||||
this.style.background = 'transparent';
|
||||
});
|
||||
strategyLink.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
createStrategyPage();
|
||||
});
|
||||
|
||||
topBar.appendChild(strategyLink);
|
||||
document.body.insertBefore(topBar, document.body.firstChild);
|
||||
|
||||
// Ajouter un padding au body pour compenser la barre fixe
|
||||
if (!document.body.style.paddingTop || document.body.style.paddingTop === '0px') {
|
||||
document.body.style.paddingTop = '50px';
|
||||
}
|
||||
// Si header existant, on s'assure qu'on n'a pas déjà ajouté les liens
|
||||
if (header.querySelector('.custom-nav-link')) return;
|
||||
|
||||
// Créer un conteneur pour nos liens s'il n'existe pas
|
||||
let linkContainer = document.createElement('div');
|
||||
linkContainer.style.cssText = 'display: flex; gap: 15px; margin-left: auto; align-items: center; padding-right: 20px;';
|
||||
header.appendChild(linkContainer);
|
||||
container = linkContainer;
|
||||
}
|
||||
|
||||
// Ajouter les liens
|
||||
Object.keys(pageTitles).forEach(key => {
|
||||
if (document.getElementById(`link-${key}`)) return;
|
||||
|
||||
const link = document.createElement('a');
|
||||
link.id = `link-${key}`;
|
||||
link.className = 'custom-nav-link';
|
||||
link.href = `#${key}`;
|
||||
link.textContent = pageTitles[key];
|
||||
link.style.cssText = 'color: #2ecc71; text-decoration: none; font-weight: bold; cursor: pointer; font-size: 14px; padding: 5px 8px; border-radius: 4px; transition: background 0.2s;';
|
||||
|
||||
link.addEventListener('mouseenter', () => link.style.background = 'rgba(46, 204, 113, 0.1)');
|
||||
link.addEventListener('mouseleave', () => link.style.background = 'transparent');
|
||||
|
||||
link.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
showPage(key);
|
||||
});
|
||||
|
||||
container.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('popstate', function(event) {
|
||||
if (window.originalBodyContent && !event.state) {
|
||||
document.body.innerHTML = window.originalBodyContent;
|
||||
setTimeout(initStrategyLinks, 100);
|
||||
if (event.state && event.state.page) {
|
||||
showPage(event.state.page);
|
||||
} else if (window.originalBodyContent) {
|
||||
document.body.innerHTML = window.originalBodyContent;
|
||||
setTimeout(initStrategyLinks, 100);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user