API tools faq
paste
Advertisement
Thunder-Menu

Chat_P2P.html

Thunder-Menu
Nov 8th, 2023 (edited)
1,048
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 54.66 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Chat P2P avec WebRTC</title>
  7. </head>
  8.     <style>
  9.         body {
  10.             font-family: Arial, sans-serif;
  11.             display: flex;
  12.             flex-direction: column;
  13.             align-items: center;
  14.             justify-content: center;
  15.             margin: 0;
  16.         }
  17.  
  18.         #controls {
  19.             width: 30%;
  20.             padding: 10px;
  21.             box-sizing: border-box;
  22.             display: flex;
  23.             flex-direction: column;
  24.             gap: 10px;
  25.         }
  26.  
  27.         #message-controls {
  28.             display: flex;
  29.             flex-direction: column;
  30.             gap: 10px;
  31.         }
  32.  
  33.         #emoji-list {
  34.             display: none;
  35.             flex-wrap: wrap;
  36.             gap: 5px;
  37.             padding-top: 10px;
  38.             border-top: 1px solid #ccc;
  39.             position: absolute;
  40.             background-color: white;
  41.             z-index: 1;
  42.             left: 400px;
  43.         }
  44. .emoji-row {
  45.     display: flex;
  46.     flex-wrap: wrap;
  47.     gap: 5px;
  48. }
  49.         .emoji-container {
  50.             display: none;
  51.             flex-wrap: wrap;
  52.             border: 1px solid #ccc;
  53.             padding: 10px;
  54.             width: 400px;
  55.         }
  56.         .emoji {
  57.             cursor: pointer;
  58.             width: 20px;
  59.             height: 20px;
  60.         }
  61.  
  62.         .chat-message {
  63.             margin-bottom: 5px;
  64.         }
  65.  
  66.         .username-label {
  67.             cursor: pointer;
  68.             text-decoration: underline;
  69.         }
  70.  
  71.         .user-options {
  72.             display: none;
  73.             flex-direction: column;
  74.             gap: 10px;
  75.             position: absolute;
  76.             background-color: white;
  77.             z-index: 1;
  78.             padding: 10px;
  79.         }
  80.     </style>
  81.  
  82. <body>
  83.     <br>
  84.  
  85.     Votre ID: <span id="my-id"></span><br>
  86.     <ul id="online-users"></ul>
  87.     Ajouter un ID: <input type="text" id="new-id">
  88.     <button onclick="addId()">Ajouter</button><br>
  89.     Connecter à l'ID: <select id="connect-id"></select>
  90.     <button onclick="connectTo()">Connecter</button><br>
  91.   <button onclick="saveIdsToLocalStorage()">Sauvegarder la liste</button>
  92. <button onclick="removeSelectedId()">Supprimer l'ID sélectionné</button>
  93.         <textarea id="messages" rows="10" cols="30" readonly></textarea><br>
  94.  
  95.     <div id="controls">
  96.         <div id="message-controls">
  97.             <textarea id="message" rows="5" cols="40" placeholder="Message"></textarea>
  98.             <button id="emoji-button">Emojis</button>
  99.  
  100. <label><input type="checkbox" id="show-emojis"> Afficher les emojis</label><br>
  101.     <div id="emojislists" style="display: none;">
  102. <br>
  103.     <div id="emoji-container" class="emoji-container" onclick="openEmojiContainer(event)"></div>
  104.  
  105.     <select id="emoji-prefix" onchange="displayEmojis()">
  106.         <option value="0x1F100">0x1F100</option>
  107.         <option value="0x1F200">0x1F200</option>
  108.         <option value="0x1F300">0x1F300</option>
  109.         <option value="0x1F400">0x1F400</option>
  110.         <option value="0x1F500">0x1F500</option>
  111.         <option value="0x1F600">0x1F600</option>
  112.         <option value="0x1F700">0x1F700</option>
  113.         <option value="0x1F800">0x1F800</option>
  114.         <option value="0x1F900">0x1F900</option>
  115.  
  116. <option value="0x0000">ASCII caractères de contrôle et des caractères d'impression de base</option> //0x007F (127)
  117. <option value="0x0400">Cyrillique slaves</option> //0x04FF (255)
  118. <option value="0x4E00">chinois, japonais et coréens, CJK unifiés milliers de caractères Han.</option> //0x9FFF (20991)
  119. <option value="0x1F300">symboles, emojis, icônes, ornements.</option> //0x1F6FF (1023)
  120. <option value="0x2000">ponctuation, espaces, symboles de devises et formes fléchies.</option> //0x206F (111)
  121. <option value="0x20A0">Symboles de devises.</option> //0x20CF (47)
  122. <option value="0x2200">Mathématiques, opérateurs, formes géométriques, etc.</option> //0x22FF (255)
  123. <option value="0x0080">ASCII lettres latines étendues et des caractères spéciaux</option> //0x00FF (127)
  124. <option value="0x0100">langues européennes, tels que l'accent circonflexe, tréma, etc.</option> //0x017F (127)
  125. <option value="0x0180">phonétiques, notation musicale, etc.</option> //0x024F (207)
  126. <option value="0x0250">l'alphabet phonétique international.</option> //0x02AF (95)
  127. <option value="0x02B0">diacritiques et les transcriptions phonétiques.</option> //0x02FF (79)
  128. <option value="0x0300">diacritiques, accents, marques de ton, dans diverses langues.</option> //0x036F (111)
  129. <option value="0x0370">Alphabet grec, grec ancien, et des symboles grecs spéciaux.</option> //0x03FF (143)
  130. <option value="0x0500">cyrilliques non slaves.</option> //0x052F (47)
  131. <option value="0x0530">arménien et d'autres langues.</option> //0x058F (95)
  132. <option value="0x0590">hébreu, yiddish et différents signes de ponctuation hébraïque.</option> //0x05FF (111)
  133. <option value="0x0600">Alphabet arabe et symboles utilisés dans les langues écrites en arabe.</option> //0x06FF (255)
  134. <option value="0x0700">syriaque et des symboles supplémentaires pour écrire des langues syriaques.</option> //0x074F (79)
  135. <option value="0x0750">arabe supplémentaire, symboles de présentation, ornements.</option> //0x077F (47)
  136. <option value="0x0780">Thaana, utilisé pour écrire le maldivien.</option> //0x07BF (63)
  137. <option value="0x07C0">Symboles N'Ko, utilisés pour écrire des langues mandées d'Afrique de l'Ouest.</option> //0x07FF (63)
  138. <option value="0x0800">Écritures samaritaine, araméenne et mandaïte.</option> //0x083F (63)
  139. <option value="0x2300">emojis de divers symboles techniques.</option> //0x23FF (255)
  140. <option value="0x1F300">Pictographs divers symboles des objets, des drapeaux et formes géométriques.</option> //0x1F5FF (767)
  141. <option value="0x1F900">personnages de genres différents.</option> //0x1F9FF (255)
  142. <option value="0x1F980">nourriture, y compris fruits, légumes et autres produits</option> //0x1F9DF (95)
  143. <option value="0x2600">météo, astrologie, etc.</option> //0x26FF (255)
  144. <option value="0x2700">des outils, des ornements, des objets, les symboles religieux, les pointillés, etc.</option> //0x27BF (191)
  145. <option value="0x1F600">Emojis de visages et d'expressions.</option> //0x1F64F (79)
  146. <option value="0x1F680">Emojis de transports.</option> //0x1F6FF (127)
  147. <option value="0x1F910">Emojis de personnes métiers, incluant des professionnels, des activités, etc.</option> //0x1F9FF (239)
  148. <option value="0x1F1E6">Drapeaux de pays représentés par des emojis.</option> //0x1F1FF (25)
  149. <option value="0x1F910">Emojis de différentes professions, comme les scientifiques, les chefs, les rock stars, etc.</option> //0x1F96B (91)
  150. <option value="0x1F980">Emojis représentant des objets, comme des aliments, des jouets, des outils, etc.</option> //0x1F9E0 (96)
  151. <option value="0x1F000">Miscellaneous Symbols and Pictographs</option> //0x1F02F (47)
  152. <option value="0x1F030">Emoticons</option> //0x1F09F (111)
  153. <option value="0x1F0A0">Miscellaneous Symbols and Pictographs</option> //0x1F0FF (95)
  154. <option value="0x1F100">Enclosed Alphanumeric Supplement</option> //0x1F1FF (255)
  155. <option value="0x1F200">Enclosed Ideographic Supplement</option> //0x1F2FF (255)
  156. <option value="0x1F650">Ornamental Dingbats</option> //0x1F67F (47)
  157. <option value="0x1F700">Alchemical Symbols</option> //0x1F77F (127)
  158. <option value="0x1F780">Geometric Shapes Extended</option> //0x1F7FF (127)
  159. <option value="0x1F800">Supplemental Arrows-C</option> //0x1F8FF (255)
  160. <option value="0x1FA00">Chess Symbols</option> //0x1FA6F (111)
  161. <option value="0x1D400">Notation musicale, symboles d'accord, etc.</option> //0x1D7FF (1023)
  162. <option value="0x2800">Caractères Braille, utilisés pour l'écriture en braille.</option> //0x28FF (255)
  163. <option value="0x2900">Symboles techniques, flèches, pointillés, etc.</option> //0x297F (127)
  164. <option value="0x2980">Symboles divers, y compris des ornements, des flèches et des blocs.</option> //0x29FF (127)
  165. <option value="0x2A00">Symboles mathématiques, opérateurs et autres symboles techniques.</option> //0x2AFF (255)
  166. <option value="0x2B00">des flèches, des formes géométriques, des blocs, des formes diverses.</option> //0x2BFF (255)
  167. <option value="0x2C00">des radicaux pour la composition de caractères chinois.</option> //0x2C5F (95)
  168. <option value="0x2C60">des idéogrammes chinois.</option> //0x2C7F (31)
  169. <option value="0x2C80">caractères coptes, incluant des symboles, des lettres, etc.</option> //0x2CFF (127)
  170. <option value="0x2D00">caractères géorgiens, incluant des lettres majuscules et des symboles.</option> //0x2D2F (47)
  171. <option value="0x2D30">caractères géorgiens, incluant des lettres minuscules, des numéraux, etc.</option> //0x2D7F (79)
  172. <option value="0x2D80">caractère éthiopien, incluant des lettres et des symboles spécifiques.</option> //0x2DDF (95)
  173. <option value="0x2DE0">des symboles combinateurs et d'espacement.</option> //0x2DFF (31)
  174. <option value="0x2E00">des caractères supplémentaires pour le script éthiopien.</option> //0x2E7F (127)
  175. <option value="0x2E80">les caractères CJK (chinois, japonais, coréen).</option> //0x2EFF (127)
  176. <option value="0x2F00">caractères chinois, tels que les radicaux et d'autres composants graphiques.</option> //0x2FDF (223)
  177. <option value="0x2FF0">caractères idéographiques et les symboles utilisés dans les formats verticaux.</option> //0x2FFF (15)
  178. <option value="0x3000">caractères de ponctuation, des symboles de devise et des symboles de lettres.</option> //0x303F (63)
  179. <option value="0x3040">caractères hiraganas (un script japonais).</option> //0x309F (95)
  180. <option value="0x30A0">caractères katakanas (un autre script japonais).</option> //0x30FF (95)
  181. <option value="0x3100">caractères Bopomofo, utilisés pour transcrire les sons du mandarin.</option> //0x312F (47)
  182. <option value="0x3130">caractères hangûls, utilisés dans l'écriture du coréen.</option> //0x318F (95)
  183. <option value="0x3190">caractères de ponctuation, les symboles de lettre et les symboles.</option> //0x319F (15)
  184. <option value="0x31A0">caractères Bopomofo étendus.</option> //0x31BF (31)
  185. <option value="0x31C0">les symboles de lettre.</option> //0x31EF (47)
  186. <option value="0x31F0">des symboles kana supplémentaires.</option> //0x31FF (15)
  187. <option value="0x3200">des caractères de formulaire, de notation et de lettres.</option> //0x32FF (255)
  188. <option value="0x3300">des caractères CJK (chinois, japonais, coréen) compatibles.</option> //0x33FF (255)
  189. <option value="0x3400">les caractères CJK unifiés.</option> //0x4DBF (6591)
  190. <option value="0x4DC0">les symboles Yijing hexagram.</option> //0x4DFF (63)
  191. <option value="0xA000">les caractères Yi (utilisés pour écrire la langue Yi, parlée par le peuple Yi en Chine).</option> //0xA48F (1167)
  192. <option value="0xA490">également dédiée aux caractères Yi.</option> //0xA4CF (63)
  193. <option value="0xA700">les symboles Modifier Tone Letters.</option> //0xA71F (31)
  194. <option value="0xA720">signes d'écriture syllabique latin médiéval.</option> //0xA7FF (223)
  195. <option value="0xAB00">les symboles Ethiopic.</option> //0xAB2F (47)
  196. <option value="0xD800">les points de code non attribués dans les paires de substitution haute.</option> //0xDB7F (895)
  197. <option value="0xDB80">les points de code non attribués dans les paires de substitution hautes.</option> //0xDBFF (127)
  198. <option value="0xDC00">Points de code non attribués dans les paires de substitution basses.</option> //0xDFFF (1023)
  199. <option value="0xE000">Zone privée (Private Use Area), caractères personnalisés dans certains contextes spécifiques.</option> //0xF8FF (6399)
  200. <option value="0xF900">caractères CJK (Chinois, Japonais, Coréen) pour la compatibilité idéographique.</option> //0xFAFF (511)
  201. <option value="0xFB00">les ligatures alphabétiques arabes présentant des formes d'écriture différentes.</option> //0xFB4F (79)
  202. <option value="0xFB50">caractères alphabétiques arabes.</option> //0xFDFF (687)
  203. <option value="0xFE00">sélecteurs de variation.</option> //0xFE0F (15)
  204. <option value="0xFE10">Symboles de ponctuation variés.</option> //0xFE1F (15)
  205. <option value="0xFE20">les symboles de ponctuation chinois.</option> //0xFE2F (15)
  206. <option value="0xFE30">caractères CJK pour la compatibilité verticale.</option> //0xFE4F (31)
  207. <option value="0xFE50">les formes de caractères petits.</option> //0xFE6F (31)
  208. <option value="0xFE70">caractères arabes présentant des formes d'écriture différentes.</option> //0xFEFF (143)
  209. <option value="0xFF00">caractères CJK à usage général.</option> //0xFFEF (239)
  210. <option value="0xFFF0">Zone privée (Private Use Area) supplémentaire.</option> //0FFFF (15)
  211.  
  212.     </select>
  213.     <select id="emoji-range" onchange="displayEmojis()">
  214.         <option value="0-99">0-99</option>
  215.         <option value="100-199">100-199</option>
  216.         <option value="200-299">200-299</option>
  217.         <option value="300-399">300-399</option>
  218.         <option value="400-499">400-499</option>
  219.         <option value="500-599">500-599</option>
  220.         <option value="600-699">600-699</option>
  221.         <option value="700-799">700-799</option>
  222.         <option value="800-899">800-899</option>
  223.         <option value="900-999">900-999</option>
  224.         <option value="1000-1099">1000-1099</option>
  225.         <option value="1100-1199">1100-1199</option>
  226.         <option value="1200-1299">1200-1299</option>
  227.         <option value="1300-1399">1300-1399</option>
  228.         <option value="1400-1499">1400-1499</option>
  229.         <option value="1500-1599">1500-1599</option>
  230.         <option value="1600-1699">1600-1699</option>
  231.         <option value="1700-1799">1700-1799</option>
  232.         <option value="1800-1899">1800-1899</option>
  233.         <option value="1900-1999">1900-1999</option>
  234.         <option value="2000-2099">2000-2099</option>
  235.         <option value="2100-2199">2100-2199</option>
  236.         <option value="2200-2299">2200-2299</option>
  237.         <option value="2300-2399">2300-2399</option>
  238.         <option value="2400-2499">2400-2499</option>
  239.         <option value="2500-2599">2500-2599</option>
  240.         <option value="2600-2699">2600-2699</option>
  241.         <option value="2700-2799">2700-2799</option>
  242.         <option value="2800-2899">2800-2899</option>
  243.         <option value="2900-2999">2900-2999</option>
  244.       <option value="3000-3099">3000-3099</option>
  245.         <option value="3100-3199">3100-3199</option>
  246.         <option value="3200-3299">3200-3299</option>
  247.         <option value="3300-3399">3300-3399</option>
  248.         <option value="3400-3499">3400-3499</option>
  249.         <option value="3500-3599">3500-3599</option>
  250.         <option value="3600-3699">3600-3699</option>
  251.         <option value="3700-3799">3700-3799</option>
  252.         <option value="3800-3899">3800-3899</option>
  253.         <option value="3900-3999">3900-3999</option>
  254.       <option value="4000-4099">4000-4099</option>
  255.         <option value="4100-4199">4100-4199</option>
  256.         <option value="4200-4299">4200-4299</option>
  257.         <option value="4300-4399">4300-4399</option>
  258.         <option value="4400-4499">4400-4499</option>
  259.         <option value="4500-4599">4500-4599</option>
  260.         <option value="4600-4699">4600-4699</option>
  261.         <option value="4700-4799">4700-4799</option>
  262.         <option value="4800-4899">4800-4899</option>
  263.         <option value="4900-4999">4900-4999</option>
  264.       <option value="5000-5099">5000-5099</option>
  265.         <option value="5100-5199">5100-5199</option>
  266.         <option value="5200-5299">5200-5299</option>
  267.         <option value="5300-5399">5300-5399</option>
  268.         <option value="5400-5499">5400-5499</option>
  269.         <option value="5500-5599">5500-5599</option>
  270.         <option value="5600-5699">5600-5699</option>
  271.         <option value="5700-5799">5700-5799</option>
  272.         <option value="5800-5899">5800-5899</option>
  273.         <option value="5900-5999">5900-5999</option>
  274.         <option value="6000-6099">6000-6099</option>
  275.         <option value="6100-6199">6100-6199</option>
  276.         <option value="6200-6299">6200-6299</option>
  277.         <option value="6300-6399">6300-6399</option>
  278.         <option value="6400-6499">6400-6499</option>
  279.         <option value="6500-6599">6500-6599</option>
  280.         <option value="6600-6699">6600-6699</option>
  281.         <option value="6700-6799">6700-6799</option>
  282.         <option value="6800-6899">6800-6899</option>
  283.         <option value="6900-6999">6900-6999</option>
  284.         <option value="7000-7099">7000-7099</option>
  285.         <option value="7100-7199">7100-7199</option>
  286.         <option value="7200-7299">7200-7299</option>
  287.         <option value="7300-7399">7300-7399</option>
  288.         <option value="7400-7499">7400-7499</option>
  289.         <option value="7500-7599">7500-7599</option>
  290.         <option value="7600-7699">7600-7699</option>
  291.         <option value="7700-7799">7700-7799</option>
  292.         <option value="7800-7899">7800-7899</option>
  293.         <option value="7900-7999">7900-7999</option>
  294.         <option value="8000-8099">8000-8099</option>
  295.         <option value="8100-8199">8100-8199</option>
  296.         <option value="8200-8299">8200-8299</option>
  297.         <option value="8300-8399">8300-8399</option>
  298.         <option value="8400-8499">8400-8499</option>
  299.         <option value="8500-8599">8500-8599</option>
  300.         <option value="8600-8699">8600-8699</option>
  301.         <option value="8700-8799">8700-8799</option>
  302.         <option value="8800-8899">8800-8899</option>
  303.         <option value="8900-8999">8900-8999</option>
  304.         <option value="9000-9099">9000-9099</option>
  305.         <option value="9100-9199">9100-9199</option>
  306.         <option value="9200-9299">9200-9299</option>
  307.         <option value="9300-9399">9300-9399</option>
  308.         <option value="9400-9499">9400-9499</option>
  309.         <option value="9500-9599">9500-9599</option>
  310.         <option value="9600-9699">9600-9699</option>
  311.         <option value="9700-9799">9700-9799</option>
  312.         <option value="9800-9899">9800-9899</option>
  313.         <option value="9900-9999">9900-9999</option>
  314.         <option value="10000-10099">10000-10099</option>
  315.         <option value="10100-10199">10100-10199</option>
  316.         <option value="10200-10299">10200-10299</option>
  317.         <option value="10300-10399">10300-10399</option>
  318.         <option value="10400-10499">10400-10499</option>
  319.         <option value="10500-10599">10500-10599</option>
  320.         <option value="10600-10699">10600-10699</option>
  321.         <option value="10700-10799">10700-10799</option>
  322.         <option value="10800-10899">10800-10899</option>
  323.         <option value="10900-10999">10900-10999</option>
  324.         <option value="11000-11099">11000-11099</option>
  325.         <option value="11100-11199">11100-11199</option>
  326.         <option value="11200-11299">11200-11299</option>
  327.         <option value="11300-11399">11300-11399</option>
  328.         <option value="11400-11499">11400-11499</option>
  329.         <option value="11500-11599">11500-11599</option>
  330.         <option value="11600-11699">11600-11699</option>
  331.         <option value="11700-11799">11700-11799</option>
  332.         <option value="11800-11899">11800-11899</option>
  333.         <option value="11900-11999">11900-11999</option>
  334.         <option value="12000-12099">12000-12099</option>
  335.         <option value="12100-12199">12100-12199</option>
  336.         <option value="12200-12299">12200-12299</option>
  337.         <option value="12300-12399">12300-12399</option>
  338.         <option value="12400-12499">12400-12499</option>
  339.         <option value="12500-12599">12500-12599</option>
  340.         <option value="12600-12699">12600-12699</option>
  341.         <option value="12700-12799">12700-12799</option>
  342.         <option value="12800-12899">12800-12899</option>
  343.         <option value="12900-12999">12900-12999</option>
  344.       <option value="13000-13099">13000-13099</option>
  345.        <option value="13100-13199">13100-13199</option>
  346.         <option value="13200-13299">13200-13299</option>
  347.         <option value="13300-13399">13300-13399</option>
  348.         <option value="13400-13499">13400-13499</option>
  349.         <option value="13500-13599">13500-13599</option>
  350.         <option value="13600-13699">13600-13699</option>
  351.         <option value="13700-13799">13700-13799</option>
  352.         <option value="13800-13899">13800-13899</option>
  353.         <option value="13900-13999">13900-13999</option>
  354.       <option value="14000-14099">14000-14099</option>
  355.         <option value="14100-14199">14100-14199</option>
  356.         <option value="14200-14299">14200-14299</option>
  357.         <option value="14300-14399">14300-14399</option>
  358.         <option value="14400-14499">14400-14499</option>
  359.         <option value="14500-14599">14500-14599</option>
  360.         <option value="14600-14699">14600-14699</option>
  361.         <option value="14700-14799">14700-14799</option>
  362.         <option value="14800-14899">14800-14899</option>
  363.         <option value="14900-14999">14900-14999</option>
  364.       <option value="15000-15099">15000-15099</option>
  365.         <option value="15100-15199">15100-15199</option>
  366.         <option value="15200-15299">15200-15299</option>
  367.         <option value="15300-15399">15300-15399</option>
  368.         <option value="15400-15499">15400-15499</option>
  369.         <option value="15500-15599">15500-15599</option>
  370.         <option value="15600-15699">15600-15699</option>
  371.         <option value="15700-15799">15700-15799</option>
  372.         <option value="15800-15899">15800-15899</option>
  373.         <option value="15900-15999">15900-15999</option>
  374.         <option value="16000-16099">16000-16099</option>
  375.         <option value="16100-16199">16100-16199</option>
  376.         <option value="16200-16299">16200-16299</option>
  377.         <option value="16300-16399">16300-16399</option>
  378.         <option value="16400-16499">16400-16499</option>
  379.         <option value="16500-16599">16500-16599</option>
  380.         <option value="16600-16699">16600-16699</option>
  381.         <option value="16700-16799">16700-16799</option>
  382.         <option value="16800-16899">16800-16899</option>
  383.         <option value="16900-16999">16900-16999</option>
  384.         <option value="17000-17099">17000-17099</option>
  385.         <option value="17100-17199">17100-17199</option>
  386.         <option value="17200-17299">17200-17299</option>
  387.         <option value="17300-17399">17300-17399</option>
  388.         <option value="17400-17499">17400-17499</option>
  389.         <option value="17500-17599">17500-17599</option>
  390.         <option value="17600-17699">17600-17699</option>
  391.         <option value="17700-17799">17700-17799</option>
  392.         <option value="17800-17899">17800-17899</option>
  393.         <option value="17900-17999">17900-17999</option>
  394.         <option value="18000-18099">18000-18099</option>
  395.         <option value="18100-18199">18100-18199</option>
  396.         <option value="18200-18299">18200-18299</option>
  397.         <option value="18300-18399">18300-18399</option>
  398.         <option value="18400-18499">18400-18499</option>
  399.         <option value="18500-18599">18500-18599</option>
  400.         <option value="18600-18699">18600-18699</option>
  401.         <option value="18700-18799">18700-18799</option>
  402.         <option value="18800-18899">18800-18899</option>
  403.         <option value="18900-18999">18900-18999</option>
  404.         <option value="19000-19099">19000-19099</option>
  405.         <option value="19100-19199">19100-19199</option>
  406.         <option value="19200-19299">19200-19299</option>
  407.         <option value="19300-19399">19300-19399</option>
  408.         <option value="19400-19499">19400-19499</option>
  409.         <option value="19500-19599">19500-19599</option>
  410.         <option value="19600-19699">19600-19699</option>
  411.         <option value="19700-19799">19700-19799</option>
  412.         <option value="19800-19899">19800-19899</option>
  413.         <option value="19900-19999">19900-19999</option>
  414.         <option value="20000-20099">20000-20099</option>
  415.         <option value="20100-20199">20100-20199</option>
  416.         <option value="20200-20299">20200-20299</option>
  417.         <option value="20300-20399">20300-20399</option>
  418.         <option value="20400-20499">20400-20499</option>
  419.         <option value="20500-20599">20500-20599</option>
  420.         <option value="20600-20699">20600-20699</option>
  421.         <option value="20700-20799">20700-20799</option>
  422.         <option value="20800-20899">20800-20899</option>
  423.         <option value="20900-20999">20900-20999</option>
  424.         <option value="21000-21099">21000-21099</option>
  425.         <option value="21100-21199">21100-21199</option>
  426.         <option value="21200-21299">21200-21299</option>
  427.         <option value="21300-21399">21300-21399</option>
  428.         <option value="21400-21499">21400-21499</option>
  429.         <option value="21500-21599">21500-21599</option>
  430.         <option value="21600-21699">21600-21699</option>
  431.         <option value="21700-21799">21700-21799</option>
  432.         <option value="21800-21899">21800-21899</option>
  433.         <option value="21900-21999">21900-21999</option>
  434.         <option value="22000-22099">22000-22099</option>
  435.  
  436.     </select>
  437.    </div>
  438.             <button onclick="sendMessage()">Envoyer</button>
  439.             <textarea id="username" placeholder="Nom d'utilisateur"></textarea>
  440.             <select id="user-list" size="5"></select>
  441.  
  442.             <button id="delete-button" onclick="deleteConfig()">Supprimer la configuration</button>
  443.         </div>
  444.     </div>
  445.     <div id="emoji-list"></div>
  446.     <div id="admin-controls" style="display: none;">
  447.         <h2>Exclure un Utilisateur</h2>
  448.         <label for="usernameExclude">Nom d'utilisateur à exclure :</label>
  449.         <input type="text" id="usernameExclude">
  450.         <button id="exclude-button">Exclure</button>
  451.  
  452.         <h2>Vérifier et Supprimer les Exclusions</h2>
  453.         <label for="usernameCheck">Nom d'utilisateur :</label>
  454.         <input type="text" id="usernameCheck">
  455.         <button id="check-button">Vérifier</button>
  456.         <div id="result"></div>
  457.         <label for="excludedUsers">Utilisateurs exclus :</label>
  458.         <select id="excludedUsers"></select>
  459.         <button id="remove-button">Supprimer l'exclusion</button>
  460.     </div>
  461.     <div id="encode-decode" style="display: none;">
  462.     <h2>Encodage/Décodage Hexadécimal (Format UUID)</h2>
  463.  
  464.     <label for="conversionType">Choisir une conversion : </label>
  465.     <select id="conversionType">
  466.         <option value="encode">Encoder</option>
  467.         <option value="decode">Décoder</option>
  468.     </select>
  469.     <br><br>
  470.  
  471.     <label for="inputString">Saisir le texte à encoder/décoder : </label>
  472.     <input type="text" id="inputString" size="40">
  473.     <br><br>
  474.  
  475.     <button onclick="convert()">Convertir</button>
  476.     <br><br>
  477.  
  478.     <label for="output">Résultat : </label>
  479.     <br>
  480.     <textarea id="output" rows="4" cols="50" readonly></textarea>
  481.     <br>
  482.     <button id="change-id-button">Change Id by Username</button>
  483.     </div>
  484.     <button id="share-screen" onclick="shareScreen()">Partager écran</button>
  485.     <button onclick="requestScreenShare()">Demander le partage d'écran</button>
  486.     <br>
  487.     <label><input type="checkbox" id="show-my-share"> Afficher mon partage</label><br>
  488.  
  489.     <video id="my-shared-screen" controls style="display: none;"></video>
  490.     <video id="shared-screen" controls style="display: none;"></video>
  491.     <br>
  492. <button id="toggleMicrophoneBtn" onclick="toggleMicrophone()">Activer le micro</button>
  493. <a id="downloadLink" style="display: none;"></a>
  494. <div id="file-section" style="display: none;">
  495.     Sélectionner un fichier: <input type="file" id="file-selector">
  496.     <span id="file-display">Aucun fichier n’a été sélectionné</span>
  497.     <button onclick="sendFile()">Envoyer fichier</button>
  498. </div>
  499.     </div>
  500.  
  501.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  502.     <script src="https://cdn.jsdelivr.net/npm/peerjs@1.3.2/dist/peerjs.min.js"></script>
  503.     <script>
  504.         const emojiContainer = document.getElementById("emoji-container");
  505.         const selectedEmojisField = document.getElementById("message");
  506.  
  507. let storedPeerId = localStorage.getItem('peerId');
  508. let peer = storedPeerId ? new Peer(storedPeerId) : new Peer();
  509.  
  510. let conn = null;
  511. let screenStream = null;
  512.  
  513.         let onlineUsers = [];
  514.     const messages = document.getElementById("messages");
  515.  
  516.         const userList = document.getElementById("user-list");
  517.         const usernameInput = document.getElementById("username");
  518.         const messageInput = document.getElementById("message");
  519.         const emojiButton = document.getElementById("emoji-button");
  520.         const emojiList = document.getElementById("emoji-list");
  521.         const deleteButton = document.getElementById("delete-button");
  522.  
  523.         const userLabel = document.createElement("label");
  524.         userLabel.className = "username-label";
  525.         const savedUsername = localStorage.getItem("chatUsername");
  526.         userLabel.textContent = savedUsername || "Changer le nom d'utilisateur";
  527.         userLabel.addEventListener("click", openUserOptions);
  528. document.body.insertBefore(userLabel, document.getElementById("messages"));
  529.  
  530.         const userOptionsContainer = document.createElement("div");
  531.         userOptionsContainer.className = "user-options";
  532.         userOptionsContainer.style.left = userLabel.offsetLeft + "px";
  533.         userOptionsContainer.style.top = userLabel.offsetTop + userLabel.offsetHeight + "px";
  534.         document.body.appendChild(userOptionsContainer);
  535.  
  536.  
  537. const emojis = ["😀", "😃", "😄", "😁", "😆", "😅", "😂", "🤣", "😊", "😇", "🙂", "🙃", "😉", "😌", "😍", "😘", "😗", "😙", "😚", "😋", "😛", "😝", "😜", "🤪", "🤨", "🧐", "🤓", "😎", "🥸", "🤩", "🥳", "😏", "😒", "😞", "😔", "😟", "😕", "🙁", "☹️", "😣", "😖", "😫", "😩", "🥺", "😢", "😭", "😤", "😠", "😡", "🤬", "🤯", "😳", "🥵", "🥶", "😱", "😨", "😰", "😥", "😓", "🤗", "🤔", "🤭", "🤫", "🤥", "😶", "😐", "😑", "😬", "🙄", "😯", "😦", "😧", "😮", "😲", "🥱", "😴", "🤤", "😪", "😵", "🤐", "🥴", "🤢", "🤮", "🤧", "😷", "🤒", "🤕", "🤑", "🤠", "😈", "👿", "👹", "👺", "🤡", "💩", "👻", "💀", "☠️", "👽", "👾", "🤖", "🎃", "😺", "😸", "😹", "😻", "😼", "😽", "🙀", "😿", "😾", "🙈", "🙉", "🙊", "💥", "💫", "💦", "💨", "🐶", "🐺", "🦊", "🦝", "🐱", "🐭", "🐹", "🐰", "🦇", "🐻", "🐨", "🐼", "🦃", "🦆", "🦢", "🦉", "🦩", "🦚", "🦜", "🦔", "🦡", "🐔", "🐧", "🐦", "🐤", "🐣", "🐥", "🐺", "🐗", "🐴", "🦄", "🐝", "🐛", "🦋", "🐌", "🐞", "🐜", "🦗", "🕷️", "🕸️", "🦂", "🦟", "🦠", "🐢", "🐍", "🦎", "🦖", "🦕", "🐙", "🦑", "🦐", "🦞", "🦀", "🐡", "🐠", "🐟", "🐬", "🐳", "🐋", "🦈", "🐊", "🐅", "🐆", "🦓", "🦍", "🦧", "🦣", "🐘", "🦛", "🦏", "🐪", "🐫", "🦒", "🦘", "🦬", "🐃", "🐂", "🐄", "🐎", "🐖", "🦙", "🦌", "🦛", "🦘", "🦡", "🦇", "🦦", "🦥", "🦨", "🦝", "🦥", "🦦", "🦨", "🦣", "🦤", "🦥", "🦦", "🦧", "🦥", "🦤", "🦧", "🦨", "🦩", "🦚", "🦜", "🦛", "🦝", "🦣", "🦤", "🦥", "🦦", "🦧", "🦥", "🦦", "🦧", "🦨", "🦩", "🦚", "🦜", "🦝", "🦧", "🦨", "⚡", "🌩️"];
  538.  
  539. const emojisContainer = document.getElementById("emojislists");
  540.  
  541. // Créer un seul span pour contenir tous les emojis
  542. const emojiGroup = document.createElement("span");
  543.  
  544. emojis.forEach((emoji, index) => {
  545.     // Créer un élément span pour chaque emoji
  546.     const emojiElement = document.createElement("span");
  547.     emojiElement.className = "emoji";
  548.     emojiElement.textContent = emoji;
  549.     emojiElement.addEventListener("click", () => insertEmoji(emoji));
  550.  
  551.     // Ajouter l'emoji à emojiGroup
  552.     emojiGroup.appendChild(emojiElement);
  553.  
  554.     // Ajouter un saut de ligne après chaque 10e emoji
  555.     if ((index + 1) % 10 === 0) {
  556.         emojiGroup.appendChild(document.createElement("br"));
  557.     }
  558. });
  559.  
  560. // Ajouter emojiGroup à emojiList
  561. emojiList.appendChild(emojiGroup);
  562.  
  563.         emojiButton.addEventListener("click", toggleEmojiList);
  564.  
  565.         function toggleEmojiList() {
  566.         const showEmojisCheckbox = document.getElementById("show-emojis");
  567.         const isCheckboxChecked = showEmojisCheckbox.checked;
  568.     if(isCheckboxChecked)
  569.     {
  570.         emojiContainer.style.display = emojiContainer.style.display === "flex" ? "none" : "flex";
  571.     }
  572.         if (emojiContainer.style.display === "flex") {
  573.         displayEmojis();
  574.         }
  575.         emojislists.style.display = emojislists.style.display === "block" ? "none" : "block";
  576.         emojiList.style.display = emojiList.style.display === "block" ? "none" : "block";
  577.     }
  578.  
  579.     peer.on('open', function (id) {
  580.     $("#my-id").text(id);
  581.         localStorage.setItem('peerId', id);
  582.         onlineUsers.push(id);
  583.         displayOnlineUsers();
  584.     });
  585.  
  586.     peer.on('connection', function (connection) {
  587.         conn = connection;const showEmojisCheckbox = document.getElementById("show-emojis");
  588.     showEmojisCheckbox.addEventListener("change", toggleEmojiList);
  589.  
  590.         conn.on('data', handleData);            
  591.     });
  592. function scrollToBottom() {
  593.     messages.scrollTop = messages.scrollHeight;
  594. }
  595.     function handleData(data) {
  596.         if (data.message) {
  597.         const decodedMessage = decodeEmojiFromURI(data.message); // Décodage du message
  598.         if (data && data.message && typeof data.message === 'string') {
  599.        const message = decodeURIComponent(data.message); // Décodage de l'URI pour traiter les encodages
  600.         const excludeCommand = '!exclude';
  601.         const excludeIndex = message.indexOf(excludeCommand);
  602.  
  603.         if (excludeIndex !== -1) {
  604.             let excludedUser = message.substring(excludeIndex + excludeCommand.length).trim();
  605.  
  606.             if (excludedUser) {
  607.                 excludedUsers.push(excludedUser);
  608.                 localStorage.setItem("excludedUsers", JSON.stringify(excludedUsers));
  609.                 console.log(`Utilisateur ${excludedUser} exclu avec succès !`);
  610.             messageInput.value = ''; // Videz le champ de saisie en utilisant le DOM natif
  611.             return;  // Ne pas envoyer le message secret aux autres
  612.             }
  613.         }
  614.     }
  615.         $("#messages").val($("#messages").val() + conn.peer + ": " + decodedMessage + "\n");
  616.         addIdToSelect(conn.peer);
  617.     } else if (data.type === 'requestScreenShare') {
  618.         shareScreen();
  619.     } else if (data.type === 'screenShared') {
  620.         requestSharedScreenStream();
  621.     }
  622. scrollToBottom();
  623. }
  624. function excludeUserLocally(excludedUser) {
  625.     const excludedUsers = JSON.parse(localStorage.getItem("excludedUsers")) || [];
  626.     excludedUsers.push(excludedUser);
  627.     localStorage.setItem("excludedUsers", JSON.stringify(excludedUsers));
  628.     console.log(`Utilisateur ${excludedUser} exclu avec succès !`);
  629. }
  630.  
  631. function requestSharedScreenStream() {
  632.     let peerIdToConnect = $("#connect-id").val();
  633.     mediaConn = peer.call(peerIdToConnect, null);
  634.     mediaConn.on('stream', function(remoteStream) {
  635.         displayVideoStream('shared-screen', remoteStream);
  636.     });
  637. }
  638.  
  639. function connectTo() {
  640.     let peerIdToConnect = $("#connect-id").val();
  641.     conn = peer.connect(peerIdToConnect);
  642.     conn.on('data', handleData);
  643. }
  644.  
  645. function requestScreenShare() {
  646.     if (conn) {
  647.         conn.send({ type: 'requestScreenShare' });
  648.     }
  649. }
  650. document.getElementById('message').addEventListener('keydown', function(event) {
  651.     if (event.key === 'Enter' && !event.shiftKey) {
  652.        event.preventDefault(); // Empêche le saut de ligne
  653.         sendMessage(); // Appelle la fonction pour envoyer le message
  654.     }
  655. });
  656.  
  657. function sendMessage() {
  658.     const message = messageInput.value;
  659.  
  660.     const messageData = {
  661.         type: 'chatMessage',
  662.         message: encodeEmojiToURI(message) // Utilisez directement la variable 'message' au lieu de jQuery pour obtenir la valeur
  663.     };
  664.     // Vérifiez si le message contient le mot secret
  665.     if (message === "!More") {
  666.         document.getElementById("admin-controls").style.display = "block";
  667.         document.getElementById('file-section').style.display = 'block';
  668.     document.getElementById('encode-decode').style.display = 'block';
  669.         messageInput.value = ''; // Videz le champ de saisie en utilisant le DOM natif
  670.         return;  // Ne pas envoyer le message secret aux autres
  671.     }
  672.  
  673.     if (currentUser && message) {
  674.        const newMessage = document.createElement("div");
  675.         newMessage.className = "chat-message";
  676.         newMessage.innerHTML = `<strong>${currentUser}:</strong> ${message}`; // Utilisez la variable 'message' au lieu de 'messages'
  677.     messages.appendChild(newMessage);
  678.         saveMessage(currentUser, message);
  679.         messageInput.value = "";
  680.         updateUserLastActive(currentUser);
  681.     }
  682.     conn.send(messageData);
  683.     // Récupérer le contenu actuel du champ "Nom d'utilisateur"
  684.     const user = document.getElementById("my-id").textContent; // ou innerText
  685.     // Insérer le message avec le nom d'utilisateur dans la zone de texte "messages"
  686.     document.getElementById("messages").value += user + ": " + message + "\n";
  687.     document.getElementById("message").value = "";
  688. scrollToBottom();
  689.     }
  690.  
  691.         function displayOnlineUsers() {
  692.             $('#online-users').empty();
  693.             onlineUsers.forEach(id => {
  694.                 $('#online-users').append(`<li>${id}</li>`);
  695.             });
  696.         }
  697.  
  698. function addId() {
  699.     const newId = $("#new-id").val().trim();
  700.     addIdToSelect(newId);
  701. }
  702.  
  703. // Fonction pour ajouter l'ID sélectionné dans le JSON
  704. function addIdToJSON(id) {
  705.     const savedIds = JSON.parse(localStorage.getItem("savedIds")) || {};
  706.     savedIds[id] = true;
  707.     localStorage.setItem("savedIds", JSON.stringify(savedIds));
  708. }
  709.  
  710. function addIdToSelect(id) {
  711.     if (id && id !== $("#my-id").text() && !$("#connect-id option[value='" + id + "']").length) {
  712.        $("#connect-id").append(`<option value="${id}">${id}</option>`);
  713.         $("#new-id").val('');
  714.         addIdToJSON(id); // Appel de la fonction pour sauvegarder l'ID
  715.     }
  716. }
  717. // Fonction pour supprimer l'ID sélectionné du JSON
  718. function deleteIdFromJSON(id) {
  719.     const savedIds = JSON.parse(localStorage.getItem("savedIds")) || {};
  720.     if (savedIds[id]) {
  721.         delete savedIds[id];
  722.         localStorage.setItem("savedIds", JSON.stringify(savedIds));
  723.     }
  724. }
  725.  
  726. // Utiliser cette fonction pour supprimer l'ID sélectionné lors de l'action de suppression
  727. function removeSelectedId() {
  728.     const selectedId = $("#connect-id").val();
  729.     if (selectedId) {
  730.         $("#connect-id option[value='" + selectedId + "']").remove();
  731.         deleteIdFromJSON(selectedId); // Appel de la fonction pour supprimer l'ID
  732.     }
  733. }
  734.  
  735. let mediaConn = null;
  736.  
  737. async function shareScreen() {
  738.     try {
  739.         screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
  740.         const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  741.         let tracks = [...screenStream.getTracks(), ...audioStream.getAudioTracks()];
  742.         screenStream = new MediaStream(tracks);
  743.  
  744.         if ($("#show-my-share").is(":checked")) {
  745.             displayVideoStream('my-shared-screen', screenStream);
  746.         }
  747.         sendScreenStreamToPeer();
  748.     } catch (err) {
  749.         console.error("Erreur lors du partage d'écran:", err);
  750.     }
  751. }
  752.  
  753. function sendScreenStreamToPeer() {
  754.     let peerIdToConnect = $("#connect-id").val();
  755.     mediaConn = peer.call(peerIdToConnect, screenStream);
  756. }
  757.  
  758. function displayVideoStream(videoId, stream) {
  759.     let video = document.getElementById(videoId);
  760.     video.srcObject = stream;
  761.     video.play();
  762.     video.style.display = "block";
  763. }
  764.  
  765. $("#show-my-share").change(function(){
  766.     const myVideo = document.getElementById("my-shared-screen");
  767.     if (this.checked) {
  768.         if (screenStream) {
  769.             displayVideoStream('my-shared-screen', screenStream);
  770.         }
  771.     } else {
  772.         myVideo.style.display = "none";
  773.     }
  774. });
  775.  
  776. peer.on('call', function (incomingCall) {
  777.     if (screenStream) {
  778.         incomingCall.answer(screenStream);
  779.     } else {
  780.         incomingCall.answer(null);
  781.     }
  782.     incomingCall.on('stream', function (remoteStream) {
  783.         displayVideoStream('shared-screen', remoteStream);
  784.     });
  785. });
  786.  
  787. let isMicrophoneMuted = true;
  788.  
  789. function toggleMicrophone() {
  790.     if (isMicrophoneMuted) {
  791.         unmuteMicrophone();
  792.         document.getElementById("toggleMicrophoneBtn").innerText = "Désactiver le micro";
  793.     } else {
  794.         muteMicrophone();
  795.         document.getElementById("toggleMicrophoneBtn").innerText = "Activer le micro";
  796.     }
  797.     isMicrophoneMuted = !isMicrophoneMuted;
  798. }
  799.  
  800. let currentAudioStream;
  801.  
  802. function muteMicrophone() {
  803.     if (currentAudioStream) {
  804.         const audioTracks = currentAudioStream.getAudioTracks();
  805.         audioTracks.forEach(track => track.enabled = false); // Mettre en pause
  806.     }
  807. }
  808.  
  809. async function unmuteMicrophone() {
  810.     try {
  811.         if (!currentAudioStream) {
  812.             currentAudioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  813.         } else {
  814.             const audioTracks = currentAudioStream.getAudioTracks();
  815.             audioTracks.forEach(track => track.enabled = true); // Réactiver
  816.         }
  817.     } catch (err) {
  818.         console.error("Erreur lors de l'activation du micro:", err);
  819.     }
  820. }
  821.  
  822.  
  823.         function insertEmoji(emoji) {
  824.     const showEmojisCheckbox = document.getElementById("show-emojis");
  825.     const isCheckboxChecked = showEmojisCheckbox.checked;
  826.             messageInput.focus();
  827.             const startPosition = messageInput.selectionStart;
  828.             const endPosition = messageInput.selectionEnd;
  829.             const textBefore = messageInput.value.substring(0, startPosition);
  830.             const textAfter = messageInput.value.substring(endPosition);
  831.             messageInput.value = `${textBefore}${emoji}${textAfter}`;
  832.             messageInput.setSelectionRange(startPosition + emoji.length, startPosition + emoji.length);
  833.         if (!isCheckboxChecked)
  834.             {
  835.             emojiList.style.display = "none";
  836.             }
  837.         }
  838.  
  839.         function deleteConfig() {
  840.             localStorage.removeItem("chatUsers");
  841.             localStorage.removeItem("chatUsername");
  842.             localStorage.removeItem("chatMessages");
  843.             userList.innerHTML = "";
  844.             deleteButton.style.display = "none";
  845.             usernameInput.style.display = "block";
  846.             loadUserList();
  847.         }
  848.  
  849.         function loadUserList() {
  850.             userList.innerHTML = "";
  851.     const onlineUsers = getOnlineUsers();
  852.     onlineUsers.forEach(user => {
  853.         addUserToComboBox(user);
  854.     });
  855.             const savedUsers = JSON.parse(localStorage.getItem("chatUsers")) || [];
  856.             savedUsers.forEach(user => {
  857.                 addUserToComboBox(user);
  858.             });
  859.  
  860.             if (savedUsers.length > 0) {
  861.                 deleteButton.style.display = "block";
  862.             }
  863. if (savedUsername) {
  864.     userList.value = savedUsername;
  865. }
  866.  
  867. }
  868. let currentUser = "";
  869.  
  870. function addUserToComboBox(username) {
  871.     const optionExists = [...userList.options].some(option => option.value === username);
  872.     if (!optionExists) {
  873.         const newUserOption = new Option(username, username);
  874.         userList.appendChild(newUserOption);
  875.     }
  876.     currentUser = username;
  877. }
  878.  
  879.  
  880.  
  881.         function saveUser(user) {
  882.             const savedUsers = JSON.parse(localStorage.getItem("chatUsers")) || [];
  883.             if (!savedUsers.includes(user)) {
  884.                 savedUsers.push(user);
  885.                 localStorage.setItem("chatUsers", JSON.stringify(savedUsers));
  886.                 loadUserList();
  887.             }
  888.         }
  889.  
  890.         if (savedUsername) {
  891.             usernameInput.style.display = "none";
  892.             saveUser(savedUsername);
  893.         }
  894.  
  895.         usernameInput.addEventListener("blur", () => {
  896.             const newUsername = usernameInput.value.trim();
  897.             if (newUsername) {
  898.                 usernameInput.style.display = "none";
  899.                 saveUser(newUsername);
  900.                 localStorage.setItem("chatUsername", newUsername);
  901.                 userLabel.textContent = newUsername;
  902.             }
  903.         });
  904.  
  905.         loadMessages();
  906.  
  907. function loadMessages() {
  908. messages.innerHTML = '';
  909.     const savedMessages = JSON.parse(localStorage.getItem("chatMessages")) || {};
  910.     Object.keys(savedMessages).forEach(user => {
  911.         savedMessages[user].forEach(message => {
  912.             const newMessage = document.createElement("div");
  913.             newMessage.className = "chat-message";
  914.             newMessage.innerHTML = `<strong>${user}:</strong> ${message}`;
  915. messages.appendChild(newMessage);
  916.         });
  917.     });
  918. }
  919.  
  920.  
  921.         function saveMessage(user, message) {
  922.             const savedMessages = JSON.parse(localStorage.getItem("chatMessages")) || {};
  923.             if (!savedMessages[user]) {
  924.                 savedMessages[user] = [];
  925.             }
  926.             savedMessages[user].push(message);
  927.             localStorage.setItem("chatMessages", JSON.stringify(savedMessages));
  928.         }
  929.  
  930.         loadUserList();
  931.  
  932.         function openUserOptions() {
  933.             userOptionsContainer.style.display = "block";
  934.             const setUsernameOption = document.createElement("button");
  935.             setUsernameOption.textContent = "Changer le nom d'utilisateur";
  936.             setUsernameOption.addEventListener("click", changeUsername);
  937.             userOptionsContainer.appendChild(setUsernameOption);
  938.  
  939.             const deleteUserOption = document.createElement("button");
  940.             deleteUserOption.textContent = "Supprimer la configuration";
  941.             deleteUserOption.addEventListener("click", deleteConfig);
  942.             userOptionsContainer.appendChild(deleteUserOption);
  943.  
  944.             document.addEventListener("click", (e) => {
  945.                 if (!userOptionsContainer.contains(e.target) && e.target !== userLabel) {
  946.                    userOptionsContainer.style.display = "none";
  947.                     setUsernameOption.remove();
  948.                     deleteUserOption.remove();
  949.                 }
  950.             });
  951.         }
  952.  
  953.         function changeUsername() {
  954.             usernameInput.style.display = "block";
  955.             usernameInput.value = savedUsername;
  956.             userOptionsContainer.style.display = "none";
  957.         }
  958.  
  959. let excludedUsers = JSON.parse(localStorage.getItem("excludedUsers")) || [];
  960. const excludedUsersSelect = document.getElementById("excludedUsers");
  961. const resultDiv = document.getElementById("result");
  962. const excludeButton = document.getElementById("exclude-button");
  963. const checkButton = document.getElementById("check-button");
  964.  
  965. function refreshExcludedUsersOptions() {
  966.     excludedUsersSelect.innerHTML = "";
  967.     excludedUsers.forEach(username => {
  968.         const option = document.createElement("option");
  969.         option.text = username;
  970.         excludedUsersSelect.add(option);
  971.     });
  972. }
  973.  
  974. function excludeUser() {
  975.     const usernameInput = document.getElementById("usernameExclude");
  976.     const username = usernameInput.value.trim();
  977.     if (username) {
  978.         excludedUsers.push(username);
  979.         localStorage.setItem("excludedUsers", JSON.stringify(excludedUsers));
  980.         usernameInput.value = "";
  981.         refreshExcludedUsersOptions();
  982.         resultDiv.innerHTML = "<h2>Utilisateur exclu avec succès !</h2>";
  983.     }
  984. }
  985.  
  986. function checkUser() {
  987.     const username = document.getElementById("usernameCheck").value.trim();
  988.     if (excludedUsers.includes(username)) {
  989.         resultDiv.innerHTML = "<h2>Utilisateur exclu</h2>";
  990.     } else {
  991.         resultDiv.innerHTML = "<h2>Utilisateur non exclu</h2>";
  992.     }
  993. }
  994.  
  995. excludeButton.addEventListener("click", excludeUser);
  996. checkButton.addEventListener("click", checkUser);
  997. refreshExcludedUsersOptions();
  998.  
  999. const removeButton = document.getElementById("remove-button");
  1000.  
  1001. removeButton.addEventListener("click", () => {
  1002.     const selectedUsername = excludedUsersSelect.value;
  1003.     if (selectedUsername) {
  1004.         const index = excludedUsers.indexOf(selectedUsername);
  1005.         if (index !== -1) {
  1006.             excludedUsers.splice(index, 1);
  1007.             localStorage.setItem("excludedUsers", JSON.stringify(excludedUsers));
  1008.             refreshExcludedUsersOptions();
  1009.             resultDiv.innerHTML = "<h2>Exclusion supprimée avec succès !</h2>";
  1010.         }
  1011.     }
  1012. });
  1013.  
  1014. if (excludedUsers.includes(localStorage.getItem("chatUsername")) || excludedUsers.includes(localStorage.getItem("my-id"))) {
  1015.     document.body.innerHTML = '<a href="about:blank">Vous avez été exclu</a>';
  1016.     throw new Error("L'utilisateur est exclu"); // Arrêter l'exécution du script
  1017. }
  1018.  
  1019. let lastMessageCount = 0; // Variable pour stocker le nombre de messages la dernière fois qu'ils ont été chargés
  1020. const refreshInterval = setInterval(refreshChat, 5000); // 5000ms équivaut à 5 secondes
  1021.  
  1022. function refreshChat() {
  1023.     // Vérifier si un nouvel utilisateur a été banni
  1024.     if (excludedUsers.includes(localStorage.getItem("chatUsername")) || excludedUsers.includes(localStorage.getItem("my-id"))) {
  1025.         document.body.innerHTML = '<a href="about:blank">Vous avez été exclu</a>';
  1026.         clearInterval(refreshInterval); // Arrêtez le rafraîchissement si l'utilisateur est exclu.
  1027.         return;
  1028.     }
  1029.  
  1030.     loadMessages(); // Charger de nouveaux messages
  1031. }
  1032.  
  1033.  
  1034. function updateUserLastActive(username) {
  1035.     const userLastActive = JSON.parse(localStorage.getItem("userLastActive")) || {};
  1036.     userLastActive[username] = Date.now(); // L'heure actuelle en millisecondes
  1037.     localStorage.setItem("userLastActive", JSON.stringify(userLastActive));
  1038. }
  1039. function getOnlineUsers() {
  1040.     const userLastActive = JSON.parse(localStorage.getItem("userLastActive")) || {};
  1041.     const onlineUsers = [];
  1042.     const FIVE_MINUTES = 5 * 1000; // 5 minutes en millisecondes
  1043.  
  1044.     for (const user in userLastActive) {
  1045.         if (Date.now() - userLastActive[user] < FIVE_MINUTES) {
  1046.            onlineUsers.push(user);
  1047.        }
  1048.    }
  1049.  
  1050.    return onlineUsers;
  1051. }
  1052.  
  1053. function encodeToUUIDFormat(text) {
  1054.    const hex = text.split('').map(char => char.charCodeAt(0).toString(16).padStart(2, '0')).join('');
  1055.     const formattedHex = [
  1056.         hex.substr(0, 8).padEnd(8, 'f'),
  1057.         hex.substr(8, 4).padEnd(4, 'f'),
  1058.         hex.substr(12, 4).padEnd(4, 'f'),
  1059.         hex.substr(16, 4).padEnd(4, 'f'),
  1060.         hex.substr(20).padEnd(12, 'f')
  1061.     ].join('-');
  1062.     return formattedHex;
  1063. }
  1064.  
  1065. function decodeFromUUIDFormat(uuid) {
  1066.     const hex = uuid.split('-').join('');
  1067.     let decoded = [
  1068.         hex.substr(0, 8),
  1069.         hex.substr(8, 4),
  1070.         hex.substr(12, 4),
  1071.         hex.substr(16, 4),
  1072.         hex.substr(20)
  1073.     ].join('');
  1074.  
  1075.     while (decoded.endsWith('f')) {
  1076.         decoded = decoded.slice(0, -1);
  1077.     }
  1078.  
  1079.     decoded = decoded.match(/.{2}/g).map(h => String.fromCharCode(parseInt(h, 16))).join('');
  1080.  
  1081.     return decoded;
  1082. }
  1083.  
  1084. function convert() {
  1085.     const conversionType = document.getElementById("conversionType").value;
  1086.     const inputString = document.getElementById("inputString").value;
  1087.     let output = "";
  1088.  
  1089.     if (conversionType === "encode") {
  1090.         output = encodeToUUIDFormat(inputString);
  1091.     } else {
  1092.         output = decodeFromUUIDFormat(inputString);
  1093.     }
  1094.  
  1095.     document.getElementById("output").value = output;
  1096. }
  1097.  
  1098.  
  1099. // Définir la fonction changeId
  1100. function changeId() {
  1101.     const peerId2 = document.getElementById("output").value; // Récupérer la valeur du champ de saisie
  1102.  
  1103.     // Stocker la valeur dans le stockage local avec la clé "peerId"
  1104.     localStorage.setItem('peerId', peerId2);
  1105. }
  1106.  
  1107. // Associer la fonction à l'événement clic du bouton
  1108. document.getElementById("change-id-button").addEventListener("click", changeId);
  1109.  
  1110. function encodeEmojiToURI(emoji) {
  1111.     const encodedEmoji = encodeURIComponent(emoji);
  1112.     return encodedEmoji;
  1113. }
  1114. function decodeEmojiFromURI(encodedEmoji) {
  1115.     const decodedEmoji = decodeURIComponent(encodedEmoji);
  1116.     return decodedEmoji;
  1117. }
  1118.  
  1119.         document.addEventListener("DOMContentLoaded", function () {
  1120.             loadIdsFromLocalStorage();
  1121.         });
  1122.  
  1123.         function loadIdsFromLocalStorage() {
  1124.             const savedIds = JSON.parse(localStorage.getItem("savedIds")) || {};
  1125.  
  1126.             savedIds.forEach(id => {
  1127.                 const option = document.createElement('option');
  1128.                 option.value = id;
  1129.                 option.textContent = id;
  1130.                 document.getElementById('connect-id').appendChild(option);
  1131.             });
  1132.         }
  1133.  
  1134.         function saveIdsToLocalStorage() {
  1135.             const connectIdElement = document.getElementById('connect-id');
  1136.             const savedIds = Array.from(connectIdElement.options).map(option => option.value);
  1137.  
  1138.             localStorage.setItem('savedIds', JSON.stringify(savedIds));
  1139.         }
  1140.  
  1141.         function displayEmojis() {
  1142.         const showEmojisCheckbox = document.getElementById("show-emojis");
  1143.         const isCheckboxChecked = showEmojisCheckbox.checked;
  1144.             emojiContainer.innerHTML = "";
  1145.             emojiContainer.style.display = "flex";
  1146.  
  1147.             const selectedPrefix = document.getElementById("emoji-prefix").value;
  1148.             const selectedRange = document.getElementById("emoji-range").value;
  1149.  
  1150.             const startCode = parseInt(selectedPrefix, 16);
  1151.             const rangeStart = parseInt(selectedRange.split("-")[0]);
  1152.  
  1153.             let emojiRow = document.createElement("div");
  1154.             emojiRow.classList.add("emoji-row");
  1155.             for (let i = rangeStart; i < rangeStart + 100; i++) {
  1156.                const emojiCode = String.fromCodePoint(startCode + i);
  1157.                const emojiSpan = document.createElement("span");
  1158.                emojiSpan.textContent = emojiCode;
  1159.                emojiSpan.classList.add("emoji");
  1160.                emojiSpan.addEventListener("click", function(event) {
  1161.                    const selectedEmojis = emojiSpan.textContent + ' ';
  1162.                    selectedEmojisField.value += selectedEmojis;
  1163. if (!isCheckboxChecked)
  1164. {
  1165.                    emojiContainer.style.display = "none";
  1166. }
  1167.                });
  1168.                emojiRow.appendChild(emojiSpan);
  1169.  
  1170.                if ((i + 1) % 10 === 0) {
  1171.                    emojiContainer.appendChild(emojiRow);
  1172.                    emojiRow = document.createElement("div");
  1173.                    emojiRow.classList.add("emoji-row");
  1174.                }
  1175.            }
  1176.        }
  1177.  
  1178.        function openEmojiContainer(event) {
  1179.            if (event.target === emojiContainer) {
  1180.                emojiContainer.style.display = "none";
  1181.            }
  1182.        }
  1183.  
  1184.        document.addEventListener("keydown", function(event) {
  1185.            if (event.key === "F4") {
  1186.                            localStorage.removeItem("excludedUsers");
  1187.            alert("Toutes les exclusions ont été effacées.");
  1188.            }
  1189.        });
  1190.        document.getElementById("clearExclusions").addEventListener("click", clearAllExclusions);
  1191.  
  1192. setInterval(refreshChat, 5000); // Rafraîchir le chat toutes les 5 secondes
  1193.    </script>
  1194. </body>
  1195.  
  1196. </html>
  1197.  
  1198.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!