☰

AccesSight

Améliore l'accessibilité des sites web pour les utilisateurs malvoyants.

// ==UserScript==
// @name         AccesSight
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Améliore l'accessibilité des sites web pour les utilisateurs malvoyants.
// @author       YGL, Benjamin Moine
// @include      *
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @license      Gnu GPL 3.0.
// ==/UserScript==

(function() {
    'use strict';

    // Ressources de traduction pour les différentes langues
    const translations = {
        fr: {
            appTitle: "AccesSight",
            functionality1: "Fonctionnalité 1",
            functionality2: "Fonctionnalité 2",
            functionality3: "Fonctionnalité 3",
            // Ajoutez les autres traductions ici...
        },
        en: {
            appTitle: "AccesSight",
            functionality1: "Functionality 1",
            functionality2: "Functionality 2",
            functionality3: "Functionality 3",
            // Ajoutez les autres traductions ici...
        },
        // Ajoutez les autres langues ici...
    };

    // Fonction pour détecter la langue de l'utilisateur
    function detectUserLanguage() {
        const userLanguage = navigator.language || navigator.userLanguage;
        return userLanguage.split("-")[0];
    }

    // Langue par défaut
    const defaultLanguage = 'fr';

    // Langue de l'utilisateur
    const userLanguage = detectUserLanguage();

    // Initialisation de i18next avec la langue détectée
    i18next.init({
        lng: userLanguage || defaultLanguage,
        resources: translations,
        fallbackLng: defaultLanguage
    });

    // Fonction pour changer la langue
    function changeLanguage(lang) {
        i18next.changeLanguage(lang);
    }

    // Création du menu pour choisir la langue
    const languageMenu = document.createElement('div');
    languageMenu.innerHTML = `
        <select id="languageSelect">
            <option value="fr">Français</option>
            <option value="en">English</option>
            <!-- Ajoutez les autres langues ici -->
        </select>
    `;
    languageMenu.style.position = 'fixed';
    languageMenu.style.top = '20px';
    languageMenu.style.right = '20px';
    document.body.appendChild(languageMenu);

    // Événement pour changer la langue lorsque l'utilisateur choisit une option
    document.getElementById('languageSelect').addEventListener('change', function() {
        const selectedLanguage = this.value;
        changeLanguage(selectedLanguage);
    });

    // Styles pour l'interface utilisateur
    const styles = `
        /* Fond sombre pour l'application */
        body {
            background-color: #0f1c29;
            color: #fff; /* Couleur du texte */
        }

        /* Menu utilisateur */
        header {
            background-color: #1f364d;
            border-radius: 10px;
            padding: 20px;
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
        }

        /* Liens du menu */
        nav ul {
            list-style-type: none;
            padding: 0;
        }

        nav ul li {
            display: inline;
            margin-right: 10px;
        }

        nav ul li a {
            color: #fff;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        nav ul li a:hover {
            background-color: #2e4a62;
        }

        /* Contenu principal */
        main {
            margin-top: 100px; /* Pour éviter que le contenu ne soit caché par le header */
        }

        /* Pied de page */
        footer {
            background-color: #1f364d;
            text-align: center;
            padding: 20px;
            color: #fff;
            clear: both;
        }
    `;

    // Injecter les styles dans la page
    const styleElement = document.createElement('style');
    styleElement.textContent = styles;
    document.head.appendChild(styleElement);

    // Balises sémantiques pour améliorer l'accessibilité
    const headerElement = document.createElement('header');
    headerElement.innerHTML = `
        <h1>${i18next.t('appTitle')}</h1>
        <nav>
            <ul>
                <li><a href="#fonctionnalite1">${i18next.t('functionality1')}</a></li>
                <li><a href="#fonctionnalite2">${i18next.t('functionality2')}</a></li>
                <li><a href="#fonctionnalite3">${i18next.t('functionality3')}</a></li>
            </ul>
        </nav>
    `;
    document.body.prepend(headerElement);

    const mainElement = document.createElement('main');
    mainElement.innerHTML = `
        <section id="fonctionnalite1">
            <h2>${i18next.t('functionality1')}</h2>
            <p>Description de la fonctionnalité 1.</p>
        </section>
        
        <section id="fonctionnalite2">
            <h2>${i18next.t('functionality2')}</h2>
            <p>Description de la fonctionnalité 2.</p>
        </section>
        
        <section id="fonctionnalite3">
            <h2>${i18next.t('functionality3')}</h2>
            <p>Description de la fonctionnalité 3.</p>
        </section>
    `;
    document.body.appendChild(mainElement);

    const footerElement = document.createElement('footer');
    footerElement.innerHTML = `<p>${i18next.t('appTitle')} - Tous droits réservés</p>`;
    document.body.appendChild(footerElement);
})();