<?php

// ✨ Simple script to find emoji . need emoji.json (don't panic it will downloading it automaticly)
// Made with coffee 🍵 and 🩷 by Erreur32 -  2025


// Script PHP pour télécharger le fichier emoji.json depuis 
// https://github.com/amio/emoji.json 

$url = 'https://raw.githubusercontent.com/amio/emoji.json/refs/heads/master/emoji.json';
$localFile = 'emoji.json';

if (!file_exists($localFile)) {
    // Télécharger le fichier JSON seulement s'il n'existe pas
    $emojiJson = file_get_contents($url);

    if ($emojiJson !== false) {
        file_put_contents($localFile, $emojiJson);
        // check if json is valid
        $decodedJson = json_decode($emojiJson, true);
        if (json_last_error() !== JSON_ERROR_NONE) {
            die('Le fichier téléchargé n\'est pas un JSON valide.');
        }
 
        echo "<div id='popup-info' style='position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: #4CAF50; color: white; padding: 15px; border-radius: 8px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000;'>Fichier emoji.json téléchargé avec succès depuis : ".htmlspecialchars($url, ENT_QUOTES, 'UTF-8')."</div>";
    } else {
        echo "<div id='popup-info' style='position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: #e74c3c; color: white; padding: 15px; border-radius: 8px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000;'>Erreur : Impossible de télécharger le fichier emoji.json.</div>";
    }
} else {
    echo "<div id='popup-info' style='position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background-color: #4CAF50; color: white; padding: 15px; border-radius: 8px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000;'>Le fichier emoji.json existe déjà localement.</div>";
}


?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>📜 Liste Emojis</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #ffffff;
            color: #000000;
            transition: background-color 0.3s, color 0.3s;
        }

        body.dark-mode {
            background-color: #2c2c2c;
            color: #e0e0e0;
        }

        #controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        #search {
            flex: 1;
            padding: 10px;
            font-size: 16px;
            box-sizing: border-box;
        }
        #category {
            padding: 10px;
            font-size: 16px;
        }
        #reset {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 5px;
        }
        #reset:hover {
            background-color: #0056b3;
        }

        #dark-mode-toggle {
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        #dark-mode-toggle:hover {
            background-color: #555;
        }

        .group-title {
            font-size: 1.5em;
            margin: 20px 0 10px;
            text-decoration: underline;
        }
        .emoji-group {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .emoji-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        .emoji-item:hover {
            background-color: #e6e6e6;
        }
        body.dark-mode .emoji-item {
            background-color: #3a3a3a;
            border-color: #555;
        }
        body.dark-mode .emoji-item:hover {
            background-color: #4a4a4a;
        }
        
        .emoji {
            font-size: 32px;
            flex-shrink: 0;
        }
        .name {
            text-align: left;
            word-wrap: break-word;
            flex: 1;
        }
        #confirmation {
            display: none;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            margin-top: 20px;
            border-radius: 5px;
            text-align: center;
            font-size: 16px;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        #custom-block, #custom-block-2 {
            background-color: #f3f4f6;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 18px;
            text-align: center;
            white-space: pre-wrap;
            font-family: "Courier New", Courier, monospace;
            word-wrap: break-word;
        }
        body.dark-mode #custom-block, body.dark-mode #custom-block-2 {
            background-color: #3a3a3a;
            border-color: #555;
            color: #e0e0e0;
        }
    </style>
</head>
<body>
<button id="dark-mode-toggle">
        🌙 Mode Sombre
    </button>
    <h1>📜 Liste Emojis</h1>

   <!-- Bloc personnalisé 1 -->
   <div id="custom-block">
        🆓🅴🅲🅷🅾️🆂🆈🆂🆃🅴🅼
          🅴🆁🆁🅴🆄🆁32

    </div>

    <!-- Bloc personnalisé 2 (nouveau bloc) -->
    <div id="custom-block-2">
        🧑‍💻 🧑‍🎓 🧑‍🏫 🧑‍🔬 👨‍💻 👨‍🎓 👨‍🏫 👨‍🔬 👩‍💻 👩‍🎓 👩‍🏫 👩‍🔬 📱 🖥️ ⌨️ 🖱️ 🔧🧠
        💻🖥️⌨️🖱️📚🎓🔍🧠🔧🌐📈📊🔄🛠️📦🔗🚀🔒🔐🔑👩‍💻👨‍💻👨‍🎓👩‍🎓🎯🎲📲💡🌟💫⭐🚦🔀🛡️🔔🔨🔩⏱️🏆🧩📝📖🗂️🗄️📋🗒️💼📁📂📆📉🌍🔖📜🔬🧮🧪📡📟📢📣🔌🌡️🧲🔋🔌🔑💾💽📀📼📹📷📸📲🔌🔋💬🔠🔡🔢🔣🔤🔼🔽⏪⏩⏫⏬🔂🔁🔄⏹️⏸️⏩🔚🔛🔜🔝💯🆒🔥🌈💪🤖✨👏🙌🎉🎊💀 ☠️
    </div>

    <br />
    <div id="controls">
        <input type="text" id="search" placeholder="Rechercher un emoji...">
        <select id="category">
            <option value="">Sélectionner une catégorie</option>
        </select>
        <button id="reset">Réinitialiser</button>
    </div>

    <div id="emoji-list"></div>
    <div id="confirmation">Emoji copié dans le presse-papiers !</div>

    <script>
        // Activer le mode sombre par défaut si enregistré dans localStorage
        if (localStorage.getItem('theme') === 'dark') {
            document.body.classList.add('dark-mode');
            document.getElementById('dark-mode-toggle').textContent = '☀️ Mode Clair';
        }

        // Fonction pour charger le fichier JSON des emojis
        async function loadEmojis() {
            try {
                const response = await fetch('emoji.json');
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                const data = await response.json();
                return data;
            } catch (error) {
                console.error('Erreur lors du chargement des emojis:', error);
                document.getElementById('emoji-list').innerHTML = '<p>Impossible de charger la liste des emojis.</p>';
                return [];
            }
        }

        // Fonction pour afficher les emojis
        function displayEmojis(emojis, filter = "", category = "") {
            const emojiList = document.getElementById('emoji-list');
            emojiList.innerHTML = '';

            const filteredEmojis = emojis.filter(item =>
                (item.name.toLowerCase().includes(filter.toLowerCase()) || item.char.includes(filter)) &&
                (category ? item.category === category : true)
            );

            const groups = {};
            filteredEmojis.forEach(item => {
                const group = item.group || 'Autres';
                if (!groups[group]) {
                    groups[group] = [];
                }
                groups[group].push(item);
            });

            if (filteredEmojis.length === 0) {
                emojiList.innerHTML = '<p>Aucun emoji trouvé.</p>';
                return;
            }

            Object.entries(groups).forEach(([group, items]) => {
                const groupTitle = document.createElement('h2');
                groupTitle.classList.add('group-title');
                groupTitle.textContent = group;
                emojiList.appendChild(groupTitle);

                const emojiGroup = document.createElement('div');
                emojiGroup.classList.add('emoji-group');

                items.forEach(item => {
                    const emojiItem = document.createElement('div');
                    emojiItem.classList.add('emoji-item');

                    const emojiSpan = document.createElement('span');
                    emojiSpan.classList.add('emoji');
                    emojiSpan.textContent = item.char;

                    const nameSpan = document.createElement('span');
                    nameSpan.classList.add('name');
                    nameSpan.textContent = item.name;

                    emojiItem.appendChild(emojiSpan);
                    emojiItem.appendChild(nameSpan);
                    emojiGroup.appendChild(emojiItem);

                    emojiItem.addEventListener('click', () => {
                        navigator.clipboard.writeText(item.char).then(() => {
                            const confirmation = document.getElementById('confirmation');
                            confirmation.style.display = 'block';
                            confirmation.style.opacity = 1;
                            setTimeout(() => {
                                confirmation.style.opacity = 0;
                            }, 2000);
                        }).catch(err => {
                            console.error('Erreur lors de la copie dans le presse-papiers: ', err);
                        });
                    });
                });

                emojiList.appendChild(emojiGroup);
            });
        }

        document.addEventListener('DOMContentLoaded', async () => {
            const emojis = await loadEmojis();
            if (!emojis) return;

            // Afficher par défaut la catégorie "Objects"
            displayEmojis(emojis, "", "");

            const categorySelect = document.getElementById('category');
            const categories = [...new Set(emojis.map(item => item.category))].sort();
            categories.forEach(category => {
                const option = document.createElement('option');
                option.value = category;
                option.textContent = category;
                categorySelect.appendChild(option);
            });

            const searchInput = document.getElementById('search');
            searchInput.addEventListener('input', (e) => {
                const query = e.target.value;
                const category = categorySelect.value;
                displayEmojis(emojis, query, category);
            });

            categorySelect.addEventListener('change', (e) => {
                const category = e.target.value;
                const query = searchInput.value;
                displayEmojis(emojis, query, category);
            });

            const resetButton = document.getElementById('reset');
            resetButton.addEventListener('click', () => {
                searchInput.value = "";
                categorySelect.value = "Objects";
                displayEmojis(emojis, "", "Objects");
            });
        });

        document.getElementById('dark-mode-toggle').addEventListener('click', () => {
            const body = document.body;
            const button = document.getElementById('dark-mode-toggle');
            body.classList.toggle('dark-mode');
            const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
            localStorage.setItem('theme', theme);
            button.textContent = theme === 'dark' ? '☀️ Mode Clair' : '🌙 Mode Sombre';
        });

        // Supprimer le pop-up après 3 secondes
        setTimeout(() => {
            const popup = document.getElementById('popup-info');
            if (popup) popup.style.display = 'none';
        }, 3000);
    </script>

 
</body>
</html>
