To se mi líbí 1
Fork 0

Naposledy aktivní 1 month ago

Page PHP pour afficher , copier les emoji simplement

Emoji HTML PHP TOP

Erreur32's Avatar Erreur32 revidoval tento gist 6 months ago. Přejít na revizi

Žádné změny

Erreur32's Avatar Erreur32 revidoval tento gist 1 year ago. Přejít na revizi

1 file changed, 3 insertions, 1 deletion

emoji.php

@@ -4,7 +4,9 @@
4 4 // Made with coffee 🍵 and 🩷 by Erreur32 - 2025
5 5
6 6
7 - // Script PHP pour télécharger le fichier emoji.json depuis un lien fixe
7 + // Script PHP pour télécharger le fichier emoji.json depuis
8 + // https://github.com/amio/emoji.json
9 +
8 10 $url = 'https://raw.githubusercontent.com/amio/emoji.json/refs/heads/master/emoji.json';
9 11 $localFile = 'emoji.json';
10 12

Erreur32's Avatar Erreur32 revidoval tento gist 1 year ago. Přejít na revizi

1 file changed, 353 insertions

emoji.php(vytvořil soubor)

@@ -0,0 +1,353 @@
1 + <?php
2 +
3 + // ✨ Simple script to find emoji . need emoji.json (don't panic it will downloading it automaticly)
4 + // Made with coffee 🍵 and 🩷 by Erreur32 - 2025
5 +
6 +
7 + // Script PHP pour télécharger le fichier emoji.json depuis un lien fixe
8 + $url = 'https://raw.githubusercontent.com/amio/emoji.json/refs/heads/master/emoji.json';
9 + $localFile = 'emoji.json';
10 +
11 + if (!file_exists($localFile)) {
12 + // Télécharger le fichier JSON seulement s'il n'existe pas
13 + $emojiJson = file_get_contents($url);
14 +
15 + if ($emojiJson !== false) {
16 + file_put_contents($localFile, $emojiJson);
17 + // check if json is valid
18 + $decodedJson = json_decode($emojiJson, true);
19 + if (json_last_error() !== JSON_ERROR_NONE) {
20 + die('Le fichier téléchargé n\'est pas un JSON valide.');
21 + }
22 +
23 + 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>";
24 + } else {
25 + 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>";
26 + }
27 + } else {
28 + 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>";
29 + }
30 +
31 +
32 + ?>
33 +
34 + <!DOCTYPE html>
35 + <html lang="fr">
36 + <head>
37 + <meta charset="UTF-8">
38 + <title>📜 Liste Emojis</title>
39 + <style>
40 + body {
41 + font-family: Arial, sans-serif;
42 + padding: 20px;
43 + background-color: #ffffff;
44 + color: #000000;
45 + transition: background-color 0.3s, color 0.3s;
46 + }
47 +
48 + body.dark-mode {
49 + background-color: #2c2c2c;
50 + color: #e0e0e0;
51 + }
52 +
53 + #controls {
54 + display: flex;
55 + gap: 10px;
56 + margin-bottom: 20px;
57 + }
58 + #search {
59 + flex: 1;
60 + padding: 10px;
61 + font-size: 16px;
62 + box-sizing: border-box;
63 + }
64 + #category {
65 + padding: 10px;
66 + font-size: 16px;
67 + }
68 + #reset {
69 + padding: 10px 15px;
70 + font-size: 16px;
71 + cursor: pointer;
72 + background-color: #007BFF;
73 + color: #fff;
74 + border: none;
75 + border-radius: 5px;
76 + }
77 + #reset:hover {
78 + background-color: #0056b3;
79 + }
80 +
81 + #dark-mode-toggle {
82 + padding: 10px;
83 + font-size: 16px;
84 + cursor: pointer;
85 + background-color: #333;
86 + color: #fff;
87 + border: none;
88 + border-radius: 5px;
89 + display: flex;
90 + align-items: center;
91 + gap: 5px;
92 + }
93 +
94 + #dark-mode-toggle:hover {
95 + background-color: #555;
96 + }
97 +
98 + .group-title {
99 + font-size: 1.5em;
100 + margin: 20px 0 10px;
101 + text-decoration: underline;
102 + }
103 + .emoji-group {
104 + display: grid;
105 + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
106 + gap: 20px;
107 + margin-bottom: 30px;
108 + }
109 + .emoji-item {
110 + display: flex;
111 + align-items: center;
112 + justify-content: flex-start;
113 + gap: 10px;
114 + padding: 10px;
115 + border: 1px solid #ddd;
116 + border-radius: 5px;
117 + background-color: #f9f9f9;
118 + cursor: pointer;
119 + transition: background-color 0.3s, color 0.3s;
120 + }
121 + .emoji-item:hover {
122 + background-color: #e6e6e6;
123 + }
124 + body.dark-mode .emoji-item {
125 + background-color: #3a3a3a;
126 + border-color: #555;
127 + }
128 + body.dark-mode .emoji-item:hover {
129 + background-color: #4a4a4a;
130 + }
131 +
132 + .emoji {
133 + font-size: 32px;
134 + flex-shrink: 0;
135 + }
136 + .name {
137 + text-align: left;
138 + word-wrap: break-word;
139 + flex: 1;
140 + }
141 + #confirmation {
142 + display: none;
143 + background-color: #4CAF50;
144 + color: white;
145 + padding: 10px;
146 + margin-top: 20px;
147 + border-radius: 5px;
148 + text-align: center;
149 + font-size: 16px;
150 + position: fixed;
151 + bottom: 20px;
152 + left: 50%;
153 + transform: translateX(-50%);
154 + z-index: 1000;
155 + opacity: 0;
156 + transition: opacity 0.3s ease-in-out;
157 + }
158 + #custom-block, #custom-block-2 {
159 + background-color: #f3f4f6;
160 + padding: 10px;
161 + margin-bottom: 10px;
162 + border: 1px solid #ddd;
163 + border-radius: 10px;
164 + font-size: 18px;
165 + text-align: center;
166 + white-space: pre-wrap;
167 + font-family: "Courier New", Courier, monospace;
168 + word-wrap: break-word;
169 + }
170 + body.dark-mode #custom-block, body.dark-mode #custom-block-2 {
171 + background-color: #3a3a3a;
172 + border-color: #555;
173 + color: #e0e0e0;
174 + }
175 + </style>
176 + </head>
177 + <body>
178 + <button id="dark-mode-toggle">
179 + 🌙 Mode Sombre
180 + </button>
181 + <h1>📜 Liste Emojis</h1>
182 +
183 + <!-- Bloc personnalisé 1 -->
184 + <div id="custom-block">
185 + 🆓🅴🅲🅷🅾️🆂🆈🆂🆃🅴🅼
186 + 🅴🆁🆁🅴🆄🆁32
187 +
188 + </div>
189 +
190 + <!-- Bloc personnalisé 2 (nouveau bloc) -->
191 + <div id="custom-block-2">
192 + 🧑‍💻 🧑‍🎓 🧑‍🏫 🧑‍🔬 👨‍💻 👨‍🎓 👨‍🏫 👨‍🔬 👩‍💻 👩‍🎓 👩‍🏫 👩‍🔬 📱 🖥️ ⌨️ 🖱️ 🔧🧠
193 + 💻🖥️⌨️🖱️📚🎓🔍🧠🔧🌐📈📊🔄🛠️📦🔗🚀🔒🔐🔑👩‍💻👨‍💻👨‍🎓👩‍🎓🎯🎲📲💡🌟💫⭐🚦🔀🛡️🔔🔨🔩⏱️🏆🧩📝📖🗂️🗄️📋🗒️💼📁📂📆📉🌍🔖📜🔬🧮🧪📡📟📢📣🔌🌡️🧲🔋🔌🔑💾💽📀📼📹📷📸📲🔌🔋💬🔠🔡🔢🔣🔤🔼🔽⏪⏩⏫⏬🔂🔁🔄⏹️⏸️⏩🔚🔛🔜🔝💯🆒🔥🌈💪🤖✨👏🙌🎉🎊💀 ☠️
194 + </div>
195 +
196 + <br />
197 + <div id="controls">
198 + <input type="text" id="search" placeholder="Rechercher un emoji...">
199 + <select id="category">
200 + <option value="">Sélectionner une catégorie</option>
201 + </select>
202 + <button id="reset">Réinitialiser</button>
203 + </div>
204 +
205 + <div id="emoji-list"></div>
206 + <div id="confirmation">Emoji copié dans le presse-papiers !</div>
207 +
208 + <script>
209 + // Activer le mode sombre par défaut si enregistré dans localStorage
210 + if (localStorage.getItem('theme') === 'dark') {
211 + document.body.classList.add('dark-mode');
212 + document.getElementById('dark-mode-toggle').textContent = '☀️ Mode Clair';
213 + }
214 +
215 + // Fonction pour charger le fichier JSON des emojis
216 + async function loadEmojis() {
217 + try {
218 + const response = await fetch('emoji.json');
219 + if (!response.ok) {
220 + throw new Error(`HTTP error! Status: ${response.status}`);
221 + }
222 + const data = await response.json();
223 + return data;
224 + } catch (error) {
225 + console.error('Erreur lors du chargement des emojis:', error);
226 + document.getElementById('emoji-list').innerHTML = '<p>Impossible de charger la liste des emojis.</p>';
227 + return [];
228 + }
229 + }
230 +
231 + // Fonction pour afficher les emojis
232 + function displayEmojis(emojis, filter = "", category = "") {
233 + const emojiList = document.getElementById('emoji-list');
234 + emojiList.innerHTML = '';
235 +
236 + const filteredEmojis = emojis.filter(item =>
237 + (item.name.toLowerCase().includes(filter.toLowerCase()) || item.char.includes(filter)) &&
238 + (category ? item.category === category : true)
239 + );
240 +
241 + const groups = {};
242 + filteredEmojis.forEach(item => {
243 + const group = item.group || 'Autres';
244 + if (!groups[group]) {
245 + groups[group] = [];
246 + }
247 + groups[group].push(item);
248 + });
249 +
250 + if (filteredEmojis.length === 0) {
251 + emojiList.innerHTML = '<p>Aucun emoji trouvé.</p>';
252 + return;
253 + }
254 +
255 + Object.entries(groups).forEach(([group, items]) => {
256 + const groupTitle = document.createElement('h2');
257 + groupTitle.classList.add('group-title');
258 + groupTitle.textContent = group;
259 + emojiList.appendChild(groupTitle);
260 +
261 + const emojiGroup = document.createElement('div');
262 + emojiGroup.classList.add('emoji-group');
263 +
264 + items.forEach(item => {
265 + const emojiItem = document.createElement('div');
266 + emojiItem.classList.add('emoji-item');
267 +
268 + const emojiSpan = document.createElement('span');
269 + emojiSpan.classList.add('emoji');
270 + emojiSpan.textContent = item.char;
271 +
272 + const nameSpan = document.createElement('span');
273 + nameSpan.classList.add('name');
274 + nameSpan.textContent = item.name;
275 +
276 + emojiItem.appendChild(emojiSpan);
277 + emojiItem.appendChild(nameSpan);
278 + emojiGroup.appendChild(emojiItem);
279 +
280 + emojiItem.addEventListener('click', () => {
281 + navigator.clipboard.writeText(item.char).then(() => {
282 + const confirmation = document.getElementById('confirmation');
283 + confirmation.style.display = 'block';
284 + confirmation.style.opacity = 1;
285 + setTimeout(() => {
286 + confirmation.style.opacity = 0;
287 + }, 2000);
288 + }).catch(err => {
289 + console.error('Erreur lors de la copie dans le presse-papiers: ', err);
290 + });
291 + });
292 + });
293 +
294 + emojiList.appendChild(emojiGroup);
295 + });
296 + }
297 +
298 + document.addEventListener('DOMContentLoaded', async () => {
299 + const emojis = await loadEmojis();
300 + if (!emojis) return;
301 +
302 + // Afficher par défaut la catégorie "Objects"
303 + displayEmojis(emojis, "", "");
304 +
305 + const categorySelect = document.getElementById('category');
306 + const categories = [...new Set(emojis.map(item => item.category))].sort();
307 + categories.forEach(category => {
308 + const option = document.createElement('option');
309 + option.value = category;
310 + option.textContent = category;
311 + categorySelect.appendChild(option);
312 + });
313 +
314 + const searchInput = document.getElementById('search');
315 + searchInput.addEventListener('input', (e) => {
316 + const query = e.target.value;
317 + const category = categorySelect.value;
318 + displayEmojis(emojis, query, category);
319 + });
320 +
321 + categorySelect.addEventListener('change', (e) => {
322 + const category = e.target.value;
323 + const query = searchInput.value;
324 + displayEmojis(emojis, query, category);
325 + });
326 +
327 + const resetButton = document.getElementById('reset');
328 + resetButton.addEventListener('click', () => {
329 + searchInput.value = "";
330 + categorySelect.value = "Objects";
331 + displayEmojis(emojis, "", "Objects");
332 + });
333 + });
334 +
335 + document.getElementById('dark-mode-toggle').addEventListener('click', () => {
336 + const body = document.body;
337 + const button = document.getElementById('dark-mode-toggle');
338 + body.classList.toggle('dark-mode');
339 + const theme = body.classList.contains('dark-mode') ? 'dark' : 'light';
340 + localStorage.setItem('theme', theme);
341 + button.textContent = theme === 'dark' ? '☀️ Mode Clair' : '🌙 Mode Sombre';
342 + });
343 +
344 + // Supprimer le pop-up après 3 secondes
345 + setTimeout(() => {
346 + const popup = document.getElementById('popup-info');
347 + if (popup) popup.style.display = 'none';
348 + }, 3000);
349 + </script>
350 +
351 +
352 + </body>
353 + </html>
Novější Starší

Vytvořeno pomocí Opengist ⋅ Load: 13ms⋅

Čeština