__html_css_js/public/script_html_infos.js

// Création de la boîte d'information
const infoBox = document.createElement('div');
infoBox.id = 'info-box';
infoBox.innerHTML = `
    <div id="info-toggle">
        <label>
            <input type="checkbox" id="toggle-display"> <span id="toggle_hide_text">Masquer</span>
        </label>
    </div>
    <div id="info-content">
        <div><strong>Élément :</strong> <span id="element-tag"></span></div>
        <div><strong>ID :</strong> <span id="element-id"></span></div>
        <div><strong>Classe(s) :</strong> <span id="element-class"></span></div>
        <div><strong>Parent :</strong> <span id="element-parent"></span></div>
    </div>
`;

// Ajout des styles
const style = document.createElement('style');
style.textContent = `
    #info-box {
        position: fixed;
        top: 20px;
        right: 20px;
        background: #333;
        color: white;
        padding: 15px 20px;
        border-radius: 8px;
        min-width: 250px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
        font-size: 14px;
        display: none;
        z-index: 9999;
    }
    
    #info-box.visible {
        display: block;
    }
    
    #info-box div {
        margin: 5px 0;
    }
    
    #info-box strong {
        color: #4CAF50;
    }
    
    #info-toggle {
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #555;
    }
    
    #info-box.no_infos {
        max-width: 200px;
        display: block;
        overflow: hidden;
        min-width: auto;
    }

    #info-box.no_infos {
        #info-toggle {
            border-bottom: 0px solid #555;
            padding: 0;
            margin: 0;
        }
        #toggle_hide_text {
            display: none;
        }
    }
    #info-toggle label {
        cursor: pointer;
        user-select: none;
    }
    
    #info-content.hidden {
        display: none;
    }
    #toggle-display {
        cursor: pointer;
    }
`;

// Injection dans le DOM
document.head.appendChild(style);
document.body.appendChild(infoBox);

// Récupération des éléments d'affichage
const elementTag = document.getElementById('element-tag');
const elementId = document.getElementById('element-id');
const elementClass = document.getElementById('element-class');
const elementParent = document.getElementById('element-parent');
const toggleCheckbox = document.getElementById('toggle-display');
const infoContent = document.getElementById('info-content');

// Clé pour le localStorage
const STORAGE_KEY = 'info-box-hidden-state';

// Fonction pour appliquer l'état
function applyToggleState(isHidden) {
    if (isHidden) {
        infoContent.classList.add('hidden');
        infoBox.classList.add('no_infos');
        toggleCheckbox.checked = true;
    } else {
        infoContent.classList.remove('hidden');
        infoBox.classList.remove('no_infos');
        toggleCheckbox.checked = false;
    }
}

// Charger l'état depuis localStorage au démarrage
const savedState = localStorage.getItem(STORAGE_KEY);
if (savedState !== null) {
    applyToggleState(savedState === 'true');
}

// Gestion du toggle
toggleCheckbox.addEventListener('change', function() {
    const isHidden = this.checked;
    applyToggleState(isHidden);
    // Sauvegarder l'état dans localStorage
    localStorage.setItem(STORAGE_KEY, isHidden);
});

// Écouter l'événement mouseover sur tout le document
document.addEventListener('mouseover', function(e) {
    const el = e.target;
    
    // Ignorer la boîte d'info elle-même
    if (el.closest('#info-box')) {
        return;
    }
    
    // Récupérer les informations
    const tag = el.tagName.toLowerCase();
    const id = el.id || '(aucun)';
    const classes = el.className || '(aucune)';
    const parent = el.parentElement ? el.parentElement.tagName.toLowerCase() : '(aucun)';
    
    // Afficher les informations
    elementTag.textContent = tag;
    elementId.textContent = id;
    elementClass.textContent = classes;
    elementParent.textContent = parent;
    
    // Rendre la boîte visible
    infoBox.classList.add('visible');
});

// Optionnel : cacher la boîte quand on quitte la page
document.addEventListener('mouseout', function(e) {
    if (e.relatedTarget === null) {
        infoBox.classList.remove('visible');
    }
});