Pytems

Create & Manage Items in Infinite Craft with an Easy to use Menu!

目前为 2024-02-22 提交的版本。查看 最新版本

  1. // ==UserScript==
  2. // @name Pytems
  3. // @namespace https://py9.dev/
  4. // @version 1.0.6
  5. // @description Create & Manage Items in Infinite Craft with an Easy to use Menu!
  6. // @author Py9
  7. // @match https://neal.fun/infinite-craft/
  8. // @icon https://www.google.com/s2/favicons?sz=64&domain=neal.fun
  9. // @grant none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13. const version = '1.0.6';
  14. var updateAvailable = false;
  15. let checkVersion = async () => {
  16. let response = await fetch('https://raw.githubusercontent.com/Proyo9/Infinite-Hack/main/version.txt');
  17. let text = await response.text();
  18. let latestVersion = text.trim();
  19. if (compareVersions(version, latestVersion) === -1) {
  20. updateAvailable = true;
  21. document.getElementById('pytems-update').innerText = `Update (v${latestVersion})`;
  22. document.getElementById('pytems-update').style.display = 'flex';
  23. console.log('%cYour Pytems is not up to date, get the latest update from: %chttps://greasyfork.org/en/scripts/487439-pytems', 'color: red; font-weight: bold;', 'color: blue; text-decoration: underline;');
  24. let items = document.querySelectorAll('.item');
  25. /*items.forEach(item => {
  26. if (item.textContent.includes('Thank you for using Pytems')) {
  27. item.innerHTML = `<span data-v-adfd717a="" class="item-emoji">❗</span> Pytems Update Available (v${latestVersion})`;
  28. }
  29. });*/
  30. }
  31. }
  32. function compareVersions(version1, version2) {
  33. const parts1 = version1.split('.');
  34. const parts2 = version2.split('.');
  35. for (let i = 0; i < Math.max(parts1.length, parts2.length); i++) {
  36. const num1 = parseInt(parts1[i]) || 0;
  37. const num2 = parseInt(parts2[i]) || 0;
  38.  
  39. if (num1 < num2) {
  40. return -1;
  41. } else if (num1 > num2) {
  42. return 1;
  43. }
  44. }
  45. return 0;
  46. }
  47. checkVersion();
  48. let script = document.createElement('script');
  49. script.src = 'https://cdn.jsdelivr.net/npm/emoji-picker-element@^1/index.js';
  50. script.type = 'module';
  51. document.head.appendChild(script);
  52. let ht = localStorage.getItem('pytems:hidethanks');
  53. let items = localStorage.getItem('infinite-craft-data')
  54. if (ht && !updateAvailable) {
  55. items = JSON.parse(items);
  56. items.elements = items.elements.filter(e => e.text !== 'Thank you for using Pytems');
  57. localStorage.setItem('infinite-craft-data', JSON.stringify(items));
  58. } else {
  59. if (items === null) {
  60. items = {"elements":[{"text":"Water","emoji":"💧","discovered":false},{"text":"Fire","emoji":"🔥","discovered":false},{"text":"Wind","emoji":"🌬️","discovered":false},{"text":"Earth","emoji":"🌍","discovered":false}]}
  61. } else {
  62. items = JSON.parse(items)
  63. }
  64. localStorage.setItem('infinite-craft-data', JSON.stringify(items))
  65. let thanks = {"text":"Thank you for using Pytems","emoji":"🍉","discovered":false}
  66. if (!items.elements.some(e => e.text === thanks.text)) {
  67. items.elements.unshift(thanks)
  68. }
  69. localStorage.setItem('infinite-craft-data', JSON.stringify(items))
  70. }
  71. let buttonContainer = document.createElement('div');
  72. buttonContainer.style.display = 'flex';
  73. buttonContainer.style.justifyContent = 'center';
  74. document.body.appendChild(buttonContainer);
  75. let createButton = document.createElement('button');
  76. createButton.textContent = 'Create Item';
  77. createButton.style.zIndex = 1000000;
  78. createButton.style.padding = '10px 20px';
  79. createButton.style.backgroundColor = '#4CAF50';
  80. createButton.style.color = 'white';
  81. createButton.style.border = 'none';
  82. createButton.style.borderRadius = '5px';
  83. createButton.style.cursor = 'pointer';
  84. createButton.style.marginTop = '10px';
  85. buttonContainer.appendChild(createButton);
  86. createButton.addEventListener('click', function() {
  87. document.querySelectorAll('.sidebar-input').forEach(input => input.disabled = true);
  88. createItemMenu.style.display = 'flex';
  89. });
  90. let deleteButton = document.createElement('button');
  91. deleteButton.textContent = 'Delete Item';
  92. deleteButton.style.zIndex = 1000000;
  93. deleteButton.style.padding = '10px 20px';
  94. deleteButton.style.backgroundColor = '#f44336';
  95. deleteButton.style.color = 'white';
  96. deleteButton.style.border = 'none';
  97. deleteButton.style.borderRadius = '5px';
  98. deleteButton.style.cursor = 'pointer';
  99. deleteButton.style.marginLeft = '10px';
  100. deleteButton.style.marginTop = '10px';
  101. buttonContainer.appendChild(deleteButton);
  102. deleteButton.addEventListener('click', function() {
  103. document.querySelectorAll('.sidebar-input').forEach(input => input.disabled = true);
  104. deleteItemMenu.style.display = 'flex';
  105. });
  106.  
  107. let magicCreateButton = document.createElement('button');
  108. magicCreateButton.textContent = 'Magic Create';
  109. magicCreateButton.style.zIndex = 1000000;
  110. magicCreateButton.style.padding = '10px 20px';
  111. magicCreateButton.style.backgroundColor = '#6779d0';
  112. magicCreateButton.style.color = 'white';
  113. magicCreateButton.style.border = 'none';
  114. magicCreateButton.style.borderRadius = '5px';
  115. magicCreateButton.style.cursor = 'pointer';
  116. magicCreateButton.style.marginLeft = '10px';
  117. magicCreateButton.style.marginTop = '10px';
  118. buttonContainer.appendChild(magicCreateButton);
  119. magicCreateButton.addEventListener('click', function() {
  120. document.querySelectorAll('.sidebar-input').forEach(input => input.disabled = true);
  121. magicCreateMenu.style.display = 'flex';
  122. });
  123.  
  124. let magicCreateMenu = document.createElement('div');
  125. magicCreateMenu.style.position = 'fixed';
  126. magicCreateMenu.style.top = '15%';
  127. magicCreateMenu.style.left = '50%';
  128. magicCreateMenu.style.transform = 'translateX(-50%)';
  129. magicCreateMenu.style.zIndex = 1000000;
  130. magicCreateMenu.style.padding = '20px';
  131. magicCreateMenu.style.backgroundColor = 'white';
  132. magicCreateMenu.style.borderRadius = '5px';
  133. magicCreateMenu.style.display = 'none';
  134. magicCreateMenu.style.flexDirection = 'column';
  135. magicCreateMenu.style.alignItems = 'center';
  136. magicCreateMenu.style.justifyContent = 'center';
  137. magicCreateMenu.style.border = '1px solid #ddd';
  138. magicCreateMenu.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
  139. document.body.appendChild(magicCreateMenu);
  140.  
  141. let firstElementInput = document.createElement('input');
  142. firstElementInput.style.padding = '10px';
  143. firstElementInput.style.margin = '5px';
  144. firstElementInput.style.width = '100%';
  145. firstElementInput.style.border = '1px solid #ddd';
  146. firstElementInput.style.borderRadius = '5px';
  147. firstElementInput.style.fontSize = '16px';
  148. firstElementInput.style.outline = 'none';
  149. firstElementInput.placeholder = "Element One";
  150. magicCreateMenu.appendChild(firstElementInput);
  151.  
  152. let secondElementInput = document.createElement('input');
  153. secondElementInput.style.padding = '10px';
  154. secondElementInput.style.margin = '5px';
  155. secondElementInput.style.width = '100%';
  156. secondElementInput.style.border = '1px solid #ddd';
  157. secondElementInput.style.borderRadius = '5px';
  158. secondElementInput.style.fontSize = '16px';
  159. secondElementInput.style.outline = 'none';
  160. secondElementInput.placeholder = "Element Two";
  161. magicCreateMenu.appendChild(secondElementInput);
  162.  
  163. let magicCreateButton2 = document.createElement('button');
  164. magicCreateButton2.textContent = 'Create';
  165. magicCreateButton2.style.zIndex = 1000000;
  166. magicCreateButton2.style.padding = '10px 20px';
  167. magicCreateButton2.style.backgroundColor = '#6779d0';
  168. magicCreateButton2.style.color = 'white';
  169. magicCreateButton2.style.border = 'none';
  170. magicCreateButton2.style.borderRadius = '5px';
  171. magicCreateButton2.style.cursor = 'pointer';
  172. magicCreateButton2.style.marginTop = '10px';
  173. magicCreateMenu.appendChild(magicCreateButton2);
  174.  
  175. magicCreateButton2.addEventListener('click', function() {
  176. const firstElement = firstElementInput.value;
  177. const secondElement = secondElementInput.value;
  178. var text = '';
  179. fetch(`https://neal.fun/api/infinite-craft/pair?first=${firstElement}&second=${secondElement}`)
  180. .then(response => {
  181. if (!response.ok) {
  182. throw new Error('Network response was not ok');
  183. }
  184. // Return the ReadableStream directly
  185. return response.body;
  186. })
  187. .then(body => {
  188. const reader = body.getReader();
  189.  
  190. const readStream = () => {
  191. return reader.read().then(({ done, value }) => {
  192. if (done) {
  193. responseJSON = JSON.parse(text);
  194. let newItem = {"text":responseJSON.result,"emoji":responseJSON.emoji,"discovered":responseJSON.isNew};
  195. items = localStorage.getItem('infinite-craft-data')
  196. items = JSON.parse(items)
  197. items.elements.push(newItem);
  198. localStorage.setItem('infinite-craft-data', JSON.stringify(items))
  199. location.reload();
  200. return;
  201. }
  202. text += new TextDecoder().decode(value);
  203. return readStream();
  204. });
  205. };
  206.  
  207. return readStream();
  208. })
  209. .catch(error => {
  210. console.error('There was a problem with the fetch operation:', error);
  211. });
  212.  
  213. magicCreateMenu.remove();
  214. });
  215.  
  216. let createItemMenu = document.createElement('div');
  217. createItemMenu.style.position = 'fixed';
  218. createItemMenu.style.top = '15%';
  219. createItemMenu.style.left = '50%';
  220. createItemMenu.style.transform = 'translateX(-50%)';
  221. createItemMenu.style.zIndex = 1000000;
  222. createItemMenu.style.padding = '20px';
  223. createItemMenu.style.backgroundColor = 'white';
  224. createItemMenu.style.borderRadius = '5px';
  225. createItemMenu.style.display = 'none';
  226. createItemMenu.style.flexDirection = 'column';
  227. createItemMenu.style.alignItems = 'center';
  228. createItemMenu.style.justifyContent = 'center';
  229. createItemMenu.style.border = '1px solid #ddd';
  230. createItemMenu.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
  231. document.body.appendChild(createItemMenu);
  232.  
  233. let createItemInput = document.createElement('input');
  234. createItemInput.style.padding = '10px';
  235. createItemInput.style.margin = '5px';
  236. createItemInput.style.width = '100%';
  237. createItemInput.style.border = '1px solid #ddd';
  238. createItemInput.style.borderRadius = '5px';
  239. createItemInput.style.fontSize = '16px';
  240. createItemInput.style.outline = 'none';
  241. createItemInput.placeholder = 'Enter the name of the item';
  242. createItemInput.value = 'New Item';
  243. createItemMenu.appendChild(createItemInput);
  244. let createItemEmoji = document.createElement('input');
  245. createItemEmoji.style.padding = '10px';
  246. createItemEmoji.style.margin = '5px';
  247. createItemEmoji.style.width = '100%';
  248. createItemEmoji.style.border = '1px solid #ddd';
  249. createItemEmoji.style.borderRadius = '5px';
  250. createItemEmoji.style.fontSize = '16px';
  251. createItemEmoji.style.outline = 'none';
  252. createItemEmoji.placeholder = 'Enter the emoji for the item';
  253. createItemEmoji.value = '📋';
  254. createItemMenu.appendChild(createItemEmoji);
  255. let pickerButton = document.createElement('button');
  256. pickerButton.textContent = 'Pick Emoji';
  257. pickerButton.style.padding = '10px 20px';
  258. pickerButton.style.backgroundColor = '#2196F3';
  259. pickerButton.style.color = 'white';
  260. pickerButton.style.border = 'none';
  261. pickerButton.style.borderRadius = '5px';
  262. pickerButton.style.cursor = 'pointer';
  263. pickerButton.style.marginBottom = '10px';
  264. createItemMenu.appendChild(pickerButton);
  265. pickerButton.addEventListener('click', function() {
  266. pickerButton.style.display = 'none';
  267. emojiPicker.style.display = 'flex';
  268. }
  269. );
  270. let emojiPicker = document.createElement('emoji-picker');
  271. emojiPicker.style.marginTop = '10px';
  272. emojiPicker.style.marginBottom = '10px';
  273. emojiPicker.style.display = 'none';
  274. emojiPicker.addEventListener('emoji-click', (event) => {
  275. createItemEmoji.value = event.detail.emoji.unicode;
  276. emojiPicker.style.display = 'none';
  277. pickerButton.style.display = 'flex';
  278. });
  279. createItemMenu.appendChild(emojiPicker);
  280. let createItemDiscoveredLabel = document.createElement('label');
  281. createItemDiscoveredLabel.textContent = 'Discovered';
  282. createItemDiscoveredLabel.style.fontSize = '16px';
  283. createItemDiscoveredLabel.style.outline = 'none';
  284. createItemMenu.appendChild(createItemDiscoveredLabel);
  285. let createItemDiscovered = document.createElement('input');
  286. createItemDiscovered.type = 'checkbox';
  287. createItemDiscovered.style.border = '1px solid #ddd';
  288. createItemDiscovered.style.borderRadius = '5px';
  289. createItemDiscovered.style.fontSize = '16px';
  290. createItemDiscovered.style.outline = 'none';
  291. createItemDiscovered.style.marginBottom = '5px';
  292. createItemMenu.appendChild(createItemDiscovered);
  293. let createItemSubmit = document.createElement('button');
  294. createItemSubmit.textContent = 'Create Item';
  295. createItemSubmit.style.padding = '10px 20px';
  296. createItemSubmit.style.backgroundColor = '#4CAF50';
  297. createItemSubmit.style.color = 'white';
  298. createItemSubmit.style.border = 'none';
  299. createItemSubmit.style.borderRadius = '5px';
  300. createItemSubmit.style.cursor = 'pointer';
  301. createItemMenu.appendChild(createItemSubmit);
  302. createItemSubmit.addEventListener('click', function() {
  303. let newItem = {"text":createItemInput.value,"emoji":createItemEmoji.value,"discovered":createItemDiscovered.checked};
  304. items = localStorage.getItem('infinite-craft-data')
  305. items = JSON.parse(items)
  306. items.elements.push(newItem);
  307. localStorage.setItem('infinite-craft-data', JSON.stringify(items))
  308. location.reload();
  309. });
  310. let deleteItemMenu = document.createElement('div');
  311. deleteItemMenu.style.position = 'fixed';
  312. deleteItemMenu.style.top = '15%';
  313. deleteItemMenu.style.left = '50%';
  314. deleteItemMenu.style.transform = 'translateX(-50%)';
  315. deleteItemMenu.style.zIndex = 1000000;
  316. deleteItemMenu.style.padding = '20px';
  317. deleteItemMenu.style.backgroundColor = 'white';
  318. deleteItemMenu.style.borderRadius = '5px';
  319. deleteItemMenu.style.display = 'none';
  320. deleteItemMenu.style.flexDirection = 'column';
  321. deleteItemMenu.style.alignItems = 'center';
  322. deleteItemMenu.style.justifyContent = 'center';
  323. deleteItemMenu.style.border = '1px solid #ddd';
  324. deleteItemMenu.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
  325. document.body.appendChild(deleteItemMenu);
  326.  
  327. let deleteItemInput = document.createElement('input');
  328. deleteItemInput.style.padding = '10px';
  329. deleteItemInput.style.margin = '5px';
  330. deleteItemInput.style.width = '100%';
  331. deleteItemInput.style.border = '1px solid #ddd';
  332. deleteItemInput.style.borderRadius = '5px';
  333. deleteItemInput.style.fontSize = '16px';
  334. deleteItemInput.style.outline = 'none';
  335. deleteItemInput.placeholder = 'Enter the name of the item';
  336. deleteItemMenu.appendChild(deleteItemInput);
  337. let deleteItemSubmit = document.createElement('button');
  338. deleteItemSubmit.textContent = 'Delete Item';
  339. deleteItemSubmit.style.padding = '10px 20px';
  340. deleteItemSubmit.style.backgroundColor = '#f44336';
  341. deleteItemSubmit.style.color = 'white';
  342. deleteItemSubmit.style.border = 'none';
  343. deleteItemSubmit.style.borderRadius = '5px';
  344. deleteItemSubmit.style.cursor = 'pointer';
  345. deleteItemMenu.appendChild(deleteItemSubmit);
  346. deleteItemSubmit.addEventListener('click', function() {
  347. items = localStorage.getItem('infinite-craft-data')
  348. items = JSON.parse(items)
  349. items.elements = items.elements.filter(e => e.text !== deleteItemInput.value)
  350. localStorage.setItem('infinite-craft-data', JSON.stringify(items))
  351. location.reload();
  352. });
  353.  
  354. let updateButton = document.createElement('button');
  355. updateButton.textContent = 'Update';
  356. updateButton.style.zIndex = 1000000;
  357. updateButton.style.padding = '10px 20px';
  358. updateButton.style.backgroundColor = '#2196F3';
  359. updateButton.style.color = 'white';
  360. updateButton.style.border = 'none';
  361. updateButton.style.borderRadius = '5px';
  362. updateButton.style.cursor = 'pointer';
  363. updateButton.style.marginLeft = '10px';
  364. updateButton.style.marginTop = '10px';
  365. updateButton.style.display = 'none';
  366. updateButton.id = 'pytems-update';
  367. buttonContainer.appendChild(updateButton);
  368. updateButton.addEventListener('click', function() {
  369. window.location.href = 'https://greasyfork.org/en/scripts/487439-pytems';
  370. });
  371.  
  372. let settingsMenu = document.createElement('div');
  373. settingsMenu.style.position = 'fixed';
  374. settingsMenu.style.top = '15%';
  375. settingsMenu.style.right = '50%';
  376. settingsMenu.style.transform = 'translateX(50%)';
  377. settingsMenu.style.zIndex = 1000000;
  378. settingsMenu.style.padding = '20px';
  379. settingsMenu.style.backgroundColor = 'white';
  380. settingsMenu.style.borderRadius = '5px';
  381. settingsMenu.style.display = 'none';
  382. settingsMenu.style.flexDirection = 'column';
  383. settingsMenu.style.alignItems = 'center';
  384. settingsMenu.style.justifyContent = 'center';
  385. settingsMenu.style.border = '1px solid #ddd';
  386. settingsMenu.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
  387. document.body.appendChild(settingsMenu);
  388.  
  389. settingsMenu.innerHTML = `
  390. <style>
  391. #pytems-github {
  392. margin-top: 10px;
  393. color: #2196F3;
  394. text-decoration: none;
  395. }
  396. #pytems-github:hover {
  397. text-decoration: underline;
  398. }
  399. #pytems-settings-close {
  400. margin-top: 10px;
  401. padding: 10px 20px;
  402. background-color: #f44336;
  403. color: white;
  404. border: none;
  405. border-radius: 5px;
  406. cursor: pointer;
  407. }
  408. #pytems-settings-close:hover {
  409. background-color: #ff6666;
  410. }
  411. .checkbox-info {
  412. margin-top: 10px;
  413. }
  414. .pytems-label {
  415. margin-left: 10px;
  416. }
  417. </style>
  418. <h1>Pytems Settings</h1>
  419. <span class="checkbox-info"><input type="checkbox" id="pytems-setting-hidethanks"></input><label for="pytems-setting-hidethanks" class="pytems-label">Hide Thanks Item</label></span>
  420. <a href="https://github.com/Proyo9/Infinite-Hack/" target="_blank" id="pytems-github">GitHub</a>
  421. <button id="pytems-settings-close">Close</button>
  422. `;
  423.  
  424. let settingsClose = document.getElementById('pytems-settings-close');
  425. settingsClose.addEventListener('click', function() {
  426. // save settings
  427. let hideThanks = document.getElementById('pytems-setting-hidethanks').checked;
  428. hideThanks ? localStorage.setItem('pytems:hidethanks', hideThanks) : localStorage.removeItem('pytems:hidethanks');
  429.  
  430. window.location.reload();
  431. });
  432.  
  433. let hideThanks = localStorage.getItem('pytems:hidethanks');
  434. if (hideThanks) {
  435. document.getElementById('pytems-setting-hidethanks').checked = true;
  436. }
  437. let darkmodesetting = localStorage.getItem('pytems:darkmode');
  438. if (darkmodesetting) {
  439. setTimeout(() => {
  440. // darkmode
  441. let customstyle = document.createElement('style');
  442. customstyle.id = 'pytems-style';
  443. customstyle.innerHTML = `
  444. body {
  445. color: white !important;
  446. }
  447. .items {
  448. background-color: #1e1e1e !important;
  449. color: white !important;
  450. }
  451. .item {
  452. background-color: #2e2e2e !important;
  453. color: white !important;
  454. }
  455. .item:hover {
  456. background: #3e3e3e !important;
  457. }
  458. .container {
  459. background-color: #1e1e1e !important;
  460. }
  461. .reset {
  462. color: white !important;
  463. }
  464. .sidebar-sorting-item {
  465. background-color: #2e2e2e !important;
  466. color: white !important;
  467. }
  468. .sidebar-input {
  469. background-color: #2e2e2e !important;
  470. color: white !important;
  471. }
  472. .item-selected {
  473. background: #3e3e3e !important;
  474. }
  475. .instance {
  476. background: #2e2e2e !important;
  477. }
  478. ::-webkit-scrollbar {
  479. width: 10px;
  480. }
  481. ::-webkit-scrollbar-track {
  482. background: #2e2e2e;
  483. }
  484. ::-webkit-scrollbar-thumb {
  485. background: #3e3e3e;
  486. }
  487. ::-webkit-scrollbar-thumb:hover {
  488. background: #4e4e4e;
  489. }
  490. input {
  491. color: white !important;
  492. background-color: #2e2e2e !important;
  493. }
  494. img {
  495. filter: invert(1) !important;
  496. }
  497. `
  498. let emojiPicker = document.querySelector('emoji-picker');
  499. emojiPicker.classList.add('dark');
  500. createButton.style.backgroundColor = 'transparent';
  501. createButton.style.border = 'solid 2px #4CAF50';
  502. deleteButton.style.backgroundColor = 'transparent';
  503. deleteButton.style.border = 'solid 2px #f44336';
  504. magicCreateButton.style.backgroundColor = 'transparent';
  505. magicCreateButton.style.border = 'solid 2px #6779d0';
  506. document.head.appendChild(customstyle);
  507. let checkImagesInterval = setInterval(() => {
  508. let images = document.querySelectorAll('img');
  509. if (images.length === 9) {
  510. clearInterval(checkImagesInterval);
  511. images.forEach(image => {
  512. image.style.filter = 'invert(1)';
  513. });
  514. }
  515. }, 100);
  516. let canvas = document.querySelector('.particles');
  517. canvas.style.filter = 'invert(1)';
  518. createItemMenu.style.backgroundColor = '#2e2e2e';
  519. deleteItemMenu.style.backgroundColor = '#2e2e2e';
  520. magicCreateMenu.style.backgroundColor = '#2e2e2e';
  521. settingsMenu.style.backgroundColor = '#2e2e2e';
  522. }, 10);
  523. }
  524.  
  525. setTimeout(() => {
  526. let darkmodeToggle = `
  527. <a data-v-0d6976f8="" target="_blank" class="darkmodetoggle" id="darkmodetoggle" style="margin-top: 3.5px;">
  528. <img data-v-0d6976f8="" src="https://static-00.iconduck.com/assets.00/moon-icon-1868x2048-ifpp8fum.png" class="coffee">
  529. </a>
  530. `
  531. let settingsToggle = `
  532. <a data-v-0d6976f8="" target="_blank" class="settingstoggle" id="settingstoggle" style="margin-top: 4px;">
  533. <img data-v-0d6976f8="" src="https://static-00.iconduck.com/assets.00/gear-icon-2048x2048-5lk2g86a.png" class="coffee">
  534. </a>
  535. `
  536. let sideControls = document.querySelector('.side-controls');
  537. sideControls.innerHTML = darkmodeToggle + settingsToggle + sideControls.innerHTML;
  538. let darkmodeButton = document.getElementById('darkmodetoggle');
  539. darkmodeButton.addEventListener('click', function() {
  540. if (localStorage.getItem('pytems:darkmode')) {
  541. localStorage.removeItem('pytems:darkmode');
  542. location.reload();
  543. } else {
  544. localStorage.setItem('pytems:darkmode', 'true');
  545. location.reload();
  546. }
  547. });
  548. let settingsButton = document.getElementById('settingstoggle');
  549. settingsButton.addEventListener('click', function() {
  550. settingsMenu.style.display = 'flex';
  551. });
  552. }, 500);
  553. })();