Duolingo Helper

This tool helps you listen to music while studying

当前为 2024-09-04 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Duolingo Helper
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0.2
  5. // @description This tool helps you listen to music while studying
  6. // @author @kietxx and @.
  7. // @match https://*.duolingo.com/*
  8. // @grant GM_setValue
  9. // @grant GM_getValue
  10. // @grant GM_deleteValue
  11. // @icon https://d35aaqx5ub95lt.cloudfront.net/images/leagues/afe5c7067cd5fb7de936d3928ea7add6.svg
  12. // ==/UserScript==
  13.  
  14. (function() {
  15. 'use strict';
  16.  
  17. let basePing = 100; // Basic Ping (ms)
  18. let baseFps = 60; // Basic FPS
  19.  
  20. let ping = basePing; // Current ping value (ms)
  21. let fps = baseFps; // Current FPS value
  22. let sessionStartTime = Date.now(); // Session start time
  23.  
  24. function isLocalStorageSupported() {
  25. try {
  26. const testKey = '__testKey';
  27. localStorage.setItem(testKey, testKey);
  28. localStorage.removeItem(testKey);
  29. return true;
  30. } catch (error) {
  31. return false;
  32. }
  33. }
  34.  
  35. if (!isLocalStorageSupported()) {
  36. console.error('LocalStorage is not supported.');
  37. return;
  38. }
  39.  
  40. const style = document.createElement('style');
  41. style.textContent = `
  42. :root {
  43. --text-color: black; /* Default text color */
  44. --background-color: white; /* Default background color */
  45. }
  46.  
  47. @keyframes rainbow-border {
  48. 0% { border-color: red; }
  49. 14% { border-color: orange; }
  50. 28% { border-color: yellow; }
  51. 42% { border-color: green; }
  52. 57% { border-color: blue; }
  53. 71% { border-color: indigo; }
  54. 85% { border-color: violet; }
  55. 100% { border-color: red; }
  56. }
  57.  
  58. #performanceMonitor {
  59. position: fixed;
  60. top: 10px;
  61. right: 10px;
  62. padding: 8px;
  63. border: 5px solid;
  64. border-radius: 8px;
  65. font-family: Arial, sans-serif;
  66. font-size: 14px;
  67. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  68. width: 200px;
  69. height: auto;
  70. text-align: left;
  71. overflow: hidden;
  72. cursor: pointer;
  73. z-index: 9999;
  74. transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, transform 0.3s ease-in-out;
  75. background-color: var(--background-color); /* Use the CSS variable for background color */
  76. background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAA...');
  77. background-size: 32px 32px;
  78. background-repeat: no-repeat;
  79. background-position: 10px center;
  80. animation: rainbow-border 3s linear infinite;
  81. color: var(--text-color); /* Use the CSS variable for text color */
  82. }
  83. #performanceMonitor.hidden {
  84. width: 80px;
  85. transform: scale(0.9);
  86. }
  87. #performanceContentWrapper {
  88. transition: opacity 0.3s ease-in-out;
  89. }
  90. #performanceContentWrapper.hidden {
  91. opacity: 0;
  92. height: 0;
  93. overflow: hidden;
  94. }
  95. #performanceMonitor button {
  96. display: block;
  97. margin-bottom: 5px;
  98. cursor: pointer;
  99. background-color: #444; /* Fixed button background color */
  100. color: white; /* Fixed button text color */
  101. border: none;
  102. border-radius: 4px;
  103. padding: 4px 8px;
  104. font-size: 12px;
  105. transition: background-color 0.3s, transform 0.3s;
  106. }
  107. #performanceMonitor button:hover {
  108. background-color: #666;
  109. transform: scale(1.05);
  110. }
  111. .modal {
  112. position: fixed;
  113. left: 50%;
  114. top: 50%;
  115. transform: translate(-50%, -50%) scale(0);
  116. background-color: rgba(255, 255, 255, 0.9); /* Default modal background */
  117. color: var(--text-color); /* Use the CSS variable for modal text color */
  118. border-radius: 8px;
  119. padding: 20px;
  120. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  121. z-index: 10000;
  122. transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  123. opacity: 0;
  124. }
  125. .modal.show {
  126. transform: translate(-50%, -50%) scale(1);
  127. opacity: 1;
  128. }
  129. .modal h3 {
  130. margin-bottom: 10px;
  131. }
  132. .modal label {
  133. display: block;
  134. margin-bottom: 5px;
  135. }
  136. .modal input[type="email"], .modal textarea {
  137. width: 100%;
  138. padding: 8px;
  139. margin-bottom: 10px;
  140. border: 1px solid #666;
  141. border-radius: 4px;
  142. background-color: #f9f9f9; /* Default input background color */
  143. color: var(--text-color); /* Use the CSS variable for input text color */
  144. }
  145. .modal textarea {
  146. height: 100px; /* Set height for feedback textarea */
  147. resize: vertical; /* Allow vertical resizing */
  148. }
  149. .modal button {
  150. margin-top: 10px;
  151. padding: 8px 16px;
  152. background-color: #1cb0f6;
  153. color: white;
  154. border: none;
  155. border-radius: 4px;
  156. cursor: pointer;
  157. transition: background-color 0.3s;
  158. }
  159. .modal button:hover {
  160. background-color: #0a7bb0;
  161. }
  162. #settingsPanel {
  163. position: fixed;
  164. left: 50%;
  165. top: 50%;
  166. transform: translate(-50%, -50%) scale(0);
  167. background-color: rgba(255, 255, 255, 0.9); /* Default settings panel background */
  168. color: var(--text-color); /* Use the CSS variable for settings panel text color */
  169. border-radius: 8px;
  170. padding: 20px;
  171. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  172. z-index: 10001;
  173. transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  174. opacity: 0;
  175. }
  176. #settingsPanel.show {
  177. transform: translate(-50%, -50%) scale(1);
  178. opacity: 1;
  179. }
  180. #settingsPanel h3 {
  181. margin-bottom: 10px;
  182. }
  183. #musicMenu {
  184. position: fixed;
  185. left: 50%;
  186. top: 50%;
  187. transform: translate(-50%, -50%) scale(0);
  188. background-color: rgba(255, 255, 255, 0.9);
  189. color: var(--text-color);
  190. border-radius: 8px;
  191. padding: 20px;
  192. box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  193. z-index: 10001;
  194. transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
  195. opacity: 0;
  196. max-height: 80%;
  197. overflow-y: auto;
  198. }
  199. #musicMenu.show {
  200. transform: translate(-50%, -50%) scale(1);
  201. opacity: 1;
  202. }
  203. #musicMenu button {
  204. display: block;
  205. margin-bottom: 5px;
  206. cursor: pointer;
  207. background-color: #444;
  208. color: white;
  209. border: none;
  210. border-radius: 4px;
  211. padding: 4px 8px;
  212. font-size: 12px;
  213. transition: background-color 0.3s, transform 0.3s;
  214. }
  215. #musicMenu button:hover {
  216. background-color: #666;
  217. transform: scale(1.05);
  218. }
  219. `;
  220. document.head.appendChild(style);
  221.  
  222. // Add audio element
  223. const audio = document.createElement('audio');
  224. audio.id = 'backgroundMusic';
  225. audio.src = 'https://ia600605.us.archive.org/8/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3'; // Thay thế URL bằng liên kết đến file nhạc của bạn
  226. audio.loop = true; // Lặp lại nhạc liên tục
  227. document.body.appendChild(audio);
  228.  
  229. const container = document.createElement('div');
  230. container.id = 'performanceMonitor';
  231. container.title = 'Click to hide/show';
  232. document.body.appendChild(container);
  233.  
  234. const contentWrapper = document.createElement('div');
  235. contentWrapper.id = 'performanceContentWrapper';
  236. container.appendChild(contentWrapper);
  237.  
  238. const content = document.createElement('div');
  239. content.id = 'performanceContent';
  240. contentWrapper.appendChild(content);
  241.  
  242. const toggleButton = document.createElement('button');
  243. toggleButton.textContent = 'Hide';
  244. toggleButton.addEventListener('mouseover', () => {
  245. toggleButton.style.backgroundColor = '#666';
  246. });
  247. toggleButton.addEventListener('mouseout', () => {
  248. toggleButton.style.backgroundColor = '#444';
  249. });
  250. toggleButton.addEventListener('click', () => {
  251. const isVisible = !contentWrapper.classList.contains('hidden');
  252. contentWrapper.classList.toggle('hidden', isVisible);
  253. toggleButton.textContent = isVisible ? 'Show' : 'Hide';
  254.  
  255. const monitor = document.getElementById('performanceMonitor');
  256. monitor.classList.toggle('hidden', isVisible);
  257. });
  258. container.appendChild(toggleButton);
  259.  
  260. const reloadButton = document.createElement('button');
  261. reloadButton.textContent = 'Reload Page';
  262. reloadButton.addEventListener('click', () => {
  263. location.reload();
  264. });
  265. contentWrapper.appendChild(reloadButton);
  266.  
  267. const discordButton = document.createElement('button');
  268. discordButton.textContent = 'Join Discord Server';
  269. discordButton.addEventListener('click', () => {
  270. window.open('https://discord.gg/ubVE6xRq', '_blank');
  271. });
  272. contentWrapper.appendChild(discordButton);
  273.  
  274. // New Choose Music Button
  275. const chooseMusicButton = document.createElement('button');
  276. chooseMusicButton.textContent = 'Choose Music';
  277. chooseMusicButton.addEventListener('click', () => {
  278. showMusicMenu();
  279. });
  280. contentWrapper.appendChild(chooseMusicButton);
  281.  
  282. // Music Menu
  283. const musicMenu = document.createElement('div');
  284. musicMenu.id = 'musicMenu';
  285. musicMenu.innerHTML = `
  286. <h3>Select Music</h3>
  287. <button data-music-url="https://ia600605.us.archive.org/8/items/NeverGonnaGiveYouUp/jocofullinterview41.mp3">Secret :))</button>
  288.  
  289. <button data-music-url="https://ia804703.us.archive.org/34/items/sapientdream-pastlives-lyrics-mp-3-320-k/sapientdream%20-%20Pastlives%20%28lyrics%29%28MP3_320K%29.mp3">PastLives</button>
  290. <button data-music-url="https://ia601604.us.archive.org/29/items/gio-jank/GI%C3%93%20-%20JANK.mp3">Gió (Song by JanK)</button>
  291. <button data-music-url="https://ia904703.us.archive.org/4/items/ha-con-vuong-nang-dat-kaa_202210/H%E1%BA%A1%20C%C3%B2n%20V%C6%B0%C6%A1ng%20N%E1%BA%AFng%20-%20DatKaa.mp3">H còn vương nng</button>
  292. <button data-music-url="https://ia803408.us.archive.org/29/items/keo-bong-gon-xuan-ken/Keo-Bong-Gon-XuanKen.mp3">Ko Bông Gòn</button>
  293. <button data-music-url="https://ia904609.us.archive.org/24/items/VicetoneFeat.CoziZuehlsdorff-Nevadamp3edm.eu/Vicetone%20feat.%20Cozi%20Zuehlsdorff%20%E2%80%93%20Nevada%20%5Bmp3edm.eu%5D.mp3">Nevada</button>
  294. <button data-music-url="https://ia801709.us.archive.org/20/items/10-lies/06%20Runaway.mp3">Runaway</button>
  295. <button data-music-url="https://ia902307.us.archive.org/35/items/the-kid-laroi-justin-bieber-stay_20211019/The%20Kid%20LAROI%20Justin%20Bieber%20STAY.mp3">STAY</button>
  296. <button data-music-url="https://ia801801.us.archive.org/26/items/tuyet-sac-orinn-remix-nam-duc-nhac-tre-mo-xuyen-tet-v.-a-playlist-nhac-cua-tui/Tuy%E1%BB%87t%20S%E1%BA%AFc%20%28Orinn%20Remix%29%20-%20Nam%20%C4%90%E1%BB%A9c%20-%20Nh%E1%BA%A1c%20Tr%E1%BA%BB%20M%E1%BB%9F%20Xuy%C3%AAn%20T%E1%BA%BFt%20-%20V.A%20-%20Playlist%20NhacCuaTui.mp3">Tuyt Sc</button>
  297. <button data-music-url="https://ia601409.us.archive.org/9/items/youtube-Ko63BameVgI/Ko63BameVgI.mp4">少女A</button>
  298. <button data-music-url="https://dn720300.ca.archive.org/0/items/muon-roi-ma-sao-con-son-tung-m-tp-di-dau-cung-nghe-v.-a-playlist-nhac-cua-tui-2/Mu%E1%BB%99n%20R%E1%BB%93i%20M%C3%A0%20Sao%20C%C3%B2n%20-%20S%C6%A1n%20T%C3%B9ng%20M-TP%20-%20%C4%90i%20%C4%90%C3%A2u%20C%C5%A9ng%20Nghe%20-%20V.A%20-%20Playlist%20NhacCuaTui_2.mp3">Mun Ri Mà Sao Còn</button>
  299. <button data-music-url="https://ia601502.us.archive.org/0/items/NoiNayCoAnhSonTungMTPZingMP3/N%C6%A1i%20N%C3%A0y%20C%C3%B3%20Anh%20-%20S%C6%A1n%20T%C3%B9ng%20M-TP%20_%20Zing%20MP3.MP3">Nơi Này Có Anh</button>
  300. <button data-music-url="https://ia801404.us.archive.org/28/items/duong-toi-cho-em-ve-cukak-remix-buitruonglinh-cukak/%C4%90%C6%B0%E1%BB%9Dng%20T%C3%B4i%20Ch%E1%BB%9F%20Em%20V%E1%BB%81%20%28Cukak%20Remix%29%20-%20buitruonglinh%2C%20Cukak.mp3">đường tôi ch em về</button> <button data-music-url="https://ia802701.us.archive.org/11/items/hoa-co-lau-phong-max-bai-hat-lyrics/Hoa%20C%E1%BB%8F%20Lau%20-%20Phong%20Max%20-%20B%C3%A0i%20h%C3%A1t%2C%20lyrics.mp3">Hoa C Lau</button>
  301. <button data-music-url="https://ia800106.us.archive.org/30/items/LacTroiSonTungMTP/Lac-Troi-Son-Tung-M-TP.mp3">Lc Trôi</button>
  302. <button data-music-url="https://dn720301.ca.archive.org/0/items/vietnamese-communist-anthems-old-recordings/Vietnamese%20Communist%20Anthems%20%5BOld%20Recordings%5D.mp3">Quc Ca Vit Nam</button>
  303. <button data-music-url="https://ia600304.us.archive.org/16/items/soundcloud-295595865/Alan_Walker_-_Fade-295595865.mp3">Faded</button>
  304. <button data-music-url="https://ia800909.us.archive.org/0/items/AlanWalkerAlone_201902/Alan_Walker_-_Alone.mp3">Alone by Alan Walker</button>
  305. <button data-music-url="https://ia801503.us.archive.org/26/items/soundcloud-251045088/Janji_Heroes_Tonight_feat_Johnning_SNC-251045088.mp3">Heroes Tonight</button>
  306. <button data-music-url="https://rr4---sn-8qj-i5oll.googlevideo.com/videoplayback?expire=1725446579&ei=U-XXZrGPH9Dwz7sPk-SdqQQ&ip=103.175.41.246&id=o-ALwXKadWerz0qz3AERe-_huJbgXOqjCbamTq_i84-yLs&itag=18&source=youtube&requiressl=yes&xpc=EgVo2aDSNQ%3D%3D&bui=AQmm2ezHl7QAKjxLOAhxYkCrCEIGQ2Q_HkmTSdUxIfFIJGaXGaCg9Lu04NN_VHDkYt1coe111b1E-6HV&spc=Mv1m9rltin2UpaU6PEzeFoJmzT6nQdOshPk34FsWYJg0L2TDVYp1K1Y&vprv=1&svpuc=1&mime=video%2Fmp4&ns=P1vYJyVbAzjFAFwWgCDFMsIQ&rqh=1&cnr=14&ratebypass=yes&dur=220.775&lmt=1725102713216155&c=WEB_CREATOR&sefc=1&txp=5538434&n=aYkqjiXdN-QJVg&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cxpc%2Cbui%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Cns%2Crqh%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AJfQdSswRQIhAIiz1-PDVxK_PpdkDX4bu-WNbyyjpAGZ5g-zxziLxt8tAiA-HDUjXntg3zJ-ixISsaFAlNk_riWjEynKZEcQ1zPnFw%3D%3D&title=Egzod%20%26%20Maestro%20Chives%20-%20Royalty%20(Lyrics)%20ft.%20Neoni&rm=sn-ntqsd7e,sn-8qj-8qil7e&rrc=104,40&fexp=24350456,24350516,24350518,24350556,24350561&req_id=67e852869323a3ee&ipbypass=yes&redirect_counter=2&cms_redirect=yes&cmsv=e&mh=u3&mip=2001:ee1:f108:b960:74c0:2164:ae59:3d8a&mm=29&mn=sn-8qj-i5oll&ms=rdu&mt=1725426312&mv=m&mvi=4&pl=48&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=ABPmVW0wRQIhAJHMsaoC20tPrRJ7nHumFpfPlkG5ibUZo6JVISwNbkiGAiBYBcp-KJH9AGQTLGERPYzzPBW-MsP3JxASOQ2AdcVJIA%3D%3D">Royalty</button>
  307. <button data-music-url="https://rr5---sn-i3b7knld.googlevideo.com/videoplayback?expire=1725445234&ei=EuDXZoPOBbGw9fwPju6D6Qk&ip=2405%3A9800%3Ab950%3A85b9%3Ab470%3A784%3A711d%3Ae708&id=o-AAgVOIQABDQ2Y5mbwMIWXnMDwk5WyGy4ksRT9p55s4MP&itag=18&source=youtube&requiressl=yes&xpc=EgVo2aDSNQ%3D%3D&bui=AQmm2ezRHJBAEZottXfnGX_xzDpbM9b454z7q-RXc4rRhEhoI58oXYfw7UZrAEYVpq0eVAYCBJt3VYnb&spc=Mv1m9lHJYxqsFqb_UXFeY1is6XA2nZAGqqEy7SN78s1b0p_qxd3bdsU&vprv=1&svpuc=1&mime=video%2Fmp4&ns=mx0pJ4GOUxcn0G-AdfCyYRMQ&rqh=1&cnr=14&ratebypass=yes&dur=86.842&lmt=1708990307984358&c=WEB_CREATOR&sefc=1&txp=4438434&n=Pj4ezgACeyWvfA&sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cxpc%2Cbui%2Cspc%2Cvprv%2Csvpuc%2Cmime%2Cns%2Crqh%2Ccnr%2Cratebypass%2Cdur%2Clmt&sig=AJfQdSswRQIgMLAOGFybuoosoSeIygkBkk-JBFz7BvNVeGZwgLFltRECIQC3FCOn_i0STVDM1FshxNfL3CruovcC3VRhjPeRLvuO1g%3D%3D&title=Wii%20Music%20-%20Gaming%20Background%20Music%20(HD)&rm=sn-5fo-0u2l7z,sn-5fo-c33y7l,sn-30asz7z&rrc=79,79,104&fexp=24350458,24350516,24350517,24350556,24350561&req_id=18adbc590a7a3ee&cmsv=e&redirect_counter=3&cms_redirect=yes&ipbypass=yes&mh=Xp&mip=2001:ee1:f108:b960:74c0:2164:ae59:3d8a&mm=30&mn=sn-i3b7knld&ms=nxu&mt=1725426759&mv=m&mvi=5&pl=48&lsparams=ipbypass,mh,mip,mm,mn,ms,mv,mvi,pl&lsig=ABPmVW0wRQIhAN3oaiE95cXP6Wmt8INQ4XWA9oMTIe_MxENFK1dpTrB7AiA4hsKn6Qwa6h-z3SeXKGJlJdAAc9YY3hUW5eY6faYM7g%3D%3D">Wii Music</button>
  308. <button data-music-url="https://example.com/your-other-music.mp3">Stop Music</button>
  309. <button id="closeMusicMenu">Close</button
  310. `;
  311. document.body.appendChild(musicMenu);
  312.  
  313. document.getElementById('closeMusicMenu').addEventListener('click', () => {
  314. musicMenu.classList.remove('show');
  315. });
  316.  
  317. musicMenu.querySelectorAll('button[data-music-url]').forEach(button => {
  318. button.addEventListener('click', () => {
  319. const musicUrl = button.getAttribute('data-music-url');
  320. const audioElement = document.getElementById('backgroundMusic');
  321. audioElement.src = musicUrl;
  322. audioElement.play();
  323. chooseMusicButton.textContent = 'Choose Music';
  324. musicMenu.classList.remove('show');
  325. });
  326. });
  327.  
  328. const feedbackButton = document.createElement('button');
  329. feedbackButton.textContent = 'Feedback';
  330. feedbackButton.addEventListener('click', () => {
  331. showFeedbackModal();
  332. });
  333. contentWrapper.appendChild(feedbackButton);
  334.  
  335. const settingsButton = document.createElement('button');
  336. settingsButton.textContent = 'Settings';
  337. settingsButton.addEventListener('click', () => {
  338. showSettingsPanel();
  339. });
  340. contentWrapper.appendChild(settingsButton);
  341.  
  342. async function measurePing(url) {
  343. try {
  344. const start = performance.now();
  345. const response = await fetch(url, { method: 'HEAD' });
  346. await response;
  347. const end = performance.now();
  348. const pingValue = Math.round(end - start) + ' ms';
  349. updateDisplay(pingValue);
  350. } catch (error) {
  351. console.error('Ping Error:', error);
  352. updateDisplay('Error');
  353. }
  354. }
  355.  
  356. let lastFrameTime = performance.now();
  357. let frameCount = 0;
  358.  
  359. function measureFPS() {
  360. const now = performance.now();
  361. const delta = now - lastFrameTime;
  362. frameCount++;
  363.  
  364. if (delta >= 1000) {
  365. const fpsValue = Math.round((frameCount * 1000) / delta);
  366. updateDisplay(null, fpsValue);
  367. frameCount = 0;
  368. lastFrameTime = now;
  369. }
  370.  
  371. requestAnimationFrame(measureFPS);
  372. }
  373.  
  374. function updateDisplay(pingValue, fpsValue) {
  375. if (pingValue !== undefined) {
  376. ping = pingValue;
  377. }
  378. if (fpsValue !== undefined) {
  379. fps = fpsValue;
  380. }
  381.  
  382. const elapsedTime = formatSessionTime(Date.now() - sessionStartTime);
  383.  
  384. const display = document.getElementById('performanceContent');
  385. display.innerHTML = `
  386. <div><strong>Ping:</strong> ${ping}</div>
  387. <div><strong>FPS:</strong> ${fps}</div>
  388. <div><strong>Session Time:</strong> ${elapsedTime}</div>
  389. `;
  390. }
  391.  
  392. function formatSessionTime(milliseconds) {
  393. let seconds = Math.floor(milliseconds / 1000);
  394. const hours = Math.floor(seconds / 3600);
  395. seconds %= 3600;
  396. const minutes = Math.floor(seconds / 60);
  397. seconds %= 60;
  398. return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  399. }
  400.  
  401. const feedbackModal = document.createElement('div');
  402. feedbackModal.className = 'modal';
  403. feedbackModal.innerHTML = `
  404. <h3>Send Feedback</h3>
  405. <div>
  406. <label for="feedbackMessage">Your Report:</label>
  407. <textarea id="feedbackMessage"></textarea>
  408. </div>
  409. <button id="sendFeedback" style="margin-top: 10px;">Submit</button>
  410. <button id="cancelFeedback" style="margin-top: 10px;">Cancel</button>
  411. `;
  412. document.body.appendChild(feedbackModal);
  413.  
  414. const settingsPanel = document.createElement('div');
  415. settingsPanel.id = 'settingsPanel';
  416. settingsPanel.innerHTML = `
  417. <h3>Settings</h3>
  418. <div>
  419. <label for="fontSize">Font Size:</label>
  420. <input type="number" id="fontSize" value="14" min="10" max="30" />
  421. </div>
  422. <div>
  423. <label for="backgroundColor">Background Color:</label>
  424. <input type="color" id="backgroundColor" value="#ffffff" />
  425. </div>
  426. <div>
  427. <label for="transparentBackground">Transparent Background:</label>
  428. <input type="checkbox" id="transparentBackground" />
  429. </div>
  430. <button id="applySettings" style="margin-top: 10px;">Apply</button>
  431. <button id="resetSettings" style="margin-top: 10px;">Reset to Default</button>
  432. <button id="cancelSettings" style="margin-top: 10px;">Cancel</button>
  433. `;
  434. document.body.appendChild(settingsPanel);
  435.  
  436. function hideAllPanels() {
  437. feedbackModal.classList.remove('show');
  438. settingsPanel.classList.remove('show');
  439. musicMenu.classList.remove('show');
  440. document.getElementById('performanceContentWrapper').classList.remove('hidden');
  441. }
  442.  
  443. document.getElementById('sendFeedback').addEventListener('click', () => {
  444. const feedback = document.getElementById('feedbackMessage').value;
  445. if (feedback) {
  446. // Normally, you would send the feedback to your backend here.
  447. console.log('Feedback:', feedback);
  448. alert('Feedback sent!');
  449. feedbackModal.classList.remove('show');
  450. } else {
  451. alert('Please enter your feedback.');
  452. }
  453. });
  454.  
  455. document.getElementById('cancelFeedback').addEventListener('click', () => {
  456. feedbackModal.classList.remove('show');
  457. });
  458.  
  459. document.getElementById('applySettings').addEventListener('click', () => {
  460. const fontSize = document.getElementById('fontSize').value + 'px';
  461. const backgroundColor = document.getElementById('backgroundColor').value;
  462. const isTransparent = document.getElementById('transparentBackground').checked;
  463.  
  464. const performanceMonitor = document.getElementById('performanceMonitor');
  465. performanceMonitor.style.fontSize = fontSize;
  466. performanceMonitor.style.backgroundColor = isTransparent ? 'rgba(255, 255, 255, 0)' : backgroundColor;
  467.  
  468. // Update text color based on background color
  469. const textColor = getContrastColor(backgroundColor);
  470. document.documentElement.style.setProperty('--text-color', textColor);
  471.  
  472. alert('Settings applied.');
  473. });
  474.  
  475. document.getElementById('resetSettings').addEventListener('click', () => {
  476. document.getElementById('fontSize').value = '14';
  477. document.getElementById('backgroundColor').value = '#ffffff';
  478. document.getElementById('transparentBackground').checked = false;
  479.  
  480. const performanceMonitor = document.getElementById('performanceMonitor');
  481. performanceMonitor.style.fontSize = '14px';
  482. performanceMonitor.style.backgroundColor = 'white';
  483.  
  484. // Reset text color to default
  485. document.documentElement.style.setProperty('--text-color', 'black');
  486.  
  487. alert('Settings reset to default.');
  488. });
  489.  
  490. document.getElementById('cancelSettings').addEventListener('click', () => {
  491. settingsPanel.classList.remove('show');
  492. });
  493.  
  494. function showFeedbackModal() {
  495. hideAllPanels();
  496. feedbackModal.classList.add('show');
  497. }
  498.  
  499. function showSettingsPanel() {
  500. hideAllPanels();
  501. settingsPanel.classList.add('show');
  502. }
  503.  
  504. function showMusicMenu() {
  505. hideAllPanels();
  506. musicMenu.classList.add('show');
  507. }
  508.  
  509. function getContrastColor(hex) {
  510. // Calculate luminance and return black or white based on contrast
  511. const r = parseInt(hex.substring(1, 3), 16);
  512. const g = parseInt(hex.substring(3, 5), 16);
  513. const b = parseInt(hex.substring(5, 7), 16);
  514.  
  515. const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
  516. return luminance > 128 ? 'black' : 'white';
  517. }
  518.  
  519. measureFPS();
  520.  
  521. setInterval(() => {
  522. measurePing('https://www.google.com');
  523. }, 30000);
  524.  
  525. })();