☰

LokisMod - Beta - MiniMap - Macro - Bots Coming Soon....

LokisMod Helps you to enjoy agario and take controll of your server be the king of the leaderboard and dominate everyone Updates coming soon

  1. // ==UserScript==
  2. // @name         LokisMod - Beta - MiniMap - Macro - Bots Coming Soon....
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  LokisMod Helps you to enjoy agario and take controll of your server be the king of the leaderboard and dominate everyone Updates coming soon
  6. // @author       Lokisdreams
  7. // @match        https://agar.io/*
  8. // @run-at       document-start
  9. // @grant        none
  10. // @license      MIT
  11. // @require      https://code.jquery.com/jquery-3.6.0.min.js
  12. // ==/UserScript==
  13. //
  14. // DO NOT TRY TO CHANGE ANYTHING CODE WILL MOSTLY BREAK
  15. // LICENSED BY ECHOSERVICE.CC COMPANY OF LOKISDREAMS
  16. // STEALING OR CHANGING CODE ISNT ALLOWED SO PLEASE RESPECT THAT AND HAVE FUN!
  17. // LAST UPDATE 3/17/2025 4:51 AM
  18. //
  19. //                 # LOKI ON TOP #
  20. //         # LOKI ON TOP # # LOKI ON TOP #
  21. //      # LOKI ON TOP #      # LOKI ON TOP #
  22. //      # LOKI ON TOP #  0   # LOKI ON TOP #
  23. //      # LOKI ON TOP #      # LOKI ON TOP #
  24. //        # LOKI ON TOP # # LOKI ON TOP #
  25. //                # LOKI ON TOP #
  26. //
  27.  
  28. (function() {
  29.     "use strict";
  30.  
  31.     // Canvas Modding to change leaderboard text to red
  32.     function canvasModding() {
  33.         var proxiedFillText = CanvasRenderingContext2D.prototype.fillText;
  34.         CanvasRenderingContext2D.prototype.fillText = function() {
  35.             this.fillStyle = "red"; // Set text color to red
  36.  
  37.             if (arguments[0] == "Leaderboard") {
  38.                 arguments[0] = "👻 LokisMod"; // Change Leaderboard title
  39.             }
  40.             return proxiedFillText.apply(this, arguments);
  41.         };
  42.  
  43.         var proxiedStrokeText = CanvasRenderingContext2D.prototype.strokeText;
  44.         CanvasRenderingContext2D.prototype.strokeText = function() {
  45.             this.strokeStyle = "red"; // Make text outline red
  46.             return proxiedStrokeText.apply(this, arguments);
  47.         };
  48.     }
  49.  
  50.     // Start Canvas Modding after the game has loaded
  51.     setTimeout(function() {
  52.         canvasModding(); // Apply Leaderboard Modifications
  53.     }, 3000); // Wait for 3 seconds for the game to load
  54. })();
  55.  
  56. // Funktion, um den Titel zu ändern
  57.    function changeTitleText() {
  58.      const titleElement = document.getElementById("title");
  59.       if (titleElement) {
  60.        titleElement.textContent = "LokisMod"; // Titel zu "👻LokisMod👻" ändern
  61.         titleElement.style.color = "red"; // Titelfarbe auf Rot setzen
  62.     }
  63. }
  64.  
  65. // Warten, bis die Seite geladen ist, und den Titel nach einer kurzen Verzögerung ändern
  66. window.addEventListener("load", function() {
  67.     setTimeout(changeTitleText, 1000); // 1 Sekunde warten, bis die Elemente geladen sind
  68. });
  69.  
  70.     let lastTime = 0;
  71.     let fps = 0;
  72.     let frameCount = 0;
  73.     let fpsDisplay;
  74.     let pingDisplay;
  75.     let ping = 0;
  76.  
  77.     // Funktion, um die FPS- und Ping-Anzeige zu erstellen
  78.     function createDisplay() {
  79.         // FPS-Anzeige erstellen
  80.         fpsDisplay = document.createElement("div");
  81.         fpsDisplay.style.position = "absolute";
  82.         fpsDisplay.style.top = "10px";
  83.         fpsDisplay.style.left = "10px";
  84.         fpsDisplay.style.fontSize = "20px";
  85.         fpsDisplay.style.color = "white";
  86.         fpsDisplay.style.fontFamily = "Arial, sans-serif";
  87.         fpsDisplay.style.zIndex = "9999";
  88.         fpsDisplay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
  89.         fpsDisplay.style.padding = "5px 10px";
  90.         fpsDisplay.style.borderRadius = "5px";
  91.         document.body.appendChild(fpsDisplay);
  92.  
  93.         // Ping-Anzeige erstellen
  94.         pingDisplay = document.createElement("div");
  95.         pingDisplay.style.position = "absolute";
  96.         pingDisplay.style.top = "40px";
  97.         pingDisplay.style.left = "10px";
  98.         pingDisplay.style.fontSize = "20px";
  99.         pingDisplay.style.color = "white";
  100.         pingDisplay.style.fontFamily = "Arial, sans-serif";
  101.         pingDisplay.style.zIndex = "9999";
  102.         pingDisplay.style.backgroundColor = "rgba(0, 0, 0, 0.5)";
  103.         pingDisplay.style.padding = "5px 10px";
  104.         pingDisplay.style.borderRadius = "5px";
  105.         document.body.appendChild(pingDisplay);
  106.     }
  107.  
  108.     // Funktion zur Berechnung der FPS
  109.     function calculateFPS() {
  110.         frameCount++;
  111.         const currentTime = performance.now();
  112.         const deltaTime = currentTime - lastTime;
  113.  
  114.         if (deltaTime >= 1000) {
  115.             fps = frameCount;
  116.             frameCount = 0;
  117.             lastTime = currentTime;
  118.         }
  119.  
  120.         // Zeige die FPS im Element an
  121.         if (fpsDisplay) {
  122.             fpsDisplay.textContent = "FPS: " + fps;
  123.         }
  124.  
  125.         // Rufe die Funktion erneut auf
  126.         requestAnimationFrame(calculateFPS);
  127.     }
  128.  
  129.     // Funktion zur Messung des Pings
  130.     function measurePing() {
  131.         const startTime = Date.now();
  132.         const ws = new WebSocket('wss://agar.io'); // Standard WebSocket-URL für Agar.io (ändern, falls benötigt)
  133.  
  134.         ws.onopen = () => {
  135.             const latency = Date.now() - startTime;
  136.             ping = latency;
  137.             ws.close();
  138.         };
  139.  
  140.         ws.onerror = () => {
  141.             ping = "N/A"; // Falls ein Fehler beim Ping auftritt
  142.         };
  143.  
  144.         // Zeige den Ping im Element an
  145.         if (pingDisplay) {
  146.             pingDisplay.textContent = "Ping: " + ping + " ms";
  147.         }
  148.  
  149.         // Wiederhole den Ping-Test alle 5 Sekunden
  150.         setTimeout(measurePing, 5000);
  151.     }
  152.  
  153.     // Starte das Skript
  154.     window.addEventListener("load", function() {
  155.         setTimeout(() => {
  156.             createDisplay();
  157.             calculateFPS();
  158.             measurePing();
  159.         }, 1000); // 1 Sekunde warten, bis die Seite vollständig geladen ist
  160.     });
  161.  
  162. var Feed = false;
  163. var Speed = 50;
  164.  
  165. // Functions
  166. function split() {
  167.     $("body").trigger($.Event("keydown", { keyCode: 32 }));
  168.     $("body").trigger($.Event("keyup", { keyCode: 32 }));
  169. }
  170.  
  171. function mass() {
  172.     if (Feed) {
  173.         window.onkeydown({ keyCode: 87 });
  174.         window.onkeyup({ keyCode: 87 });
  175.         setTimeout(mass, Speed);
  176.     }
  177. }
  178.  
  179. function keydown(event) {
  180.     switch (event.keyCode) {
  181.         // Feed Macro - Q Key
  182.         case 81:                                        // Q
  183.             Feed = true;
  184.             setTimeout(mass, Speed);
  185.             break;
  186.  
  187.         // Center Mouse - S Key
  188.         case 83:                                       // S
  189.             var X = window.innerWidth / 2;
  190.             var Y = window.innerHeight / 2;
  191.             $("canvas").trigger($.Event("mousemove", { clientX: X, clientY: Y }));
  192.             break;
  193.  
  194.         // Tricksplit - Shift + 4
  195.         case 16:                // Shift
  196.             if (event.keyCode == 16 && event.shiftKey) {
  197.                 split();
  198.                 setTimeout(split, Speed);
  199.                 setTimeout(split, Speed * 2);
  200.                 setTimeout(split, Speed * 3);
  201.             }
  202.             break;
  203.  
  204.         // Doublesplit - A Key
  205.         case 65:         // A
  206.             split();
  207.             setTimeout(split, Speed);
  208.             setTimeout(split, Speed * 2);
  209.             break;
  210.  
  211.         // Triplesplit - D Key
  212.         case 68:         // D
  213.             split();
  214.             setTimeout(split, Speed);
  215.             break;
  216.     }
  217. }
  218.  
  219. // When Player Lets Go Of Q, It Stops Feeding
  220. function keyup(event) {
  221.     if (event.keyCode == 81) {
  222.         Feed = false;
  223.     }
  224. }
  225.  
  226. // Mouse Clicks
  227. (function() {
  228.     "use strict";
  229.  
  230.     // Stelle sicher, dass jQuery verfügbar ist
  231.     if (typeof jQuery === "undefined") {
  232.         var script = document.createElement("script");
  233.         script.src = "https://code.jquery.com/jquery-3.6.0.min.js";
  234.         script.onload = initMouseControls;
  235.         document.head.appendChild(script);
  236.     } else {
  237.         initMouseControls();
  238.     }
  239.  
  240.     function initMouseControls() {
  241.         console.log("✅ Mouse Controls Loaded!");
  242.  
  243.         // Warte, bis das Spiel wirklich geladen ist
  244.         let checkCanvas = setInterval(() => {
  245.             let canvas = document.querySelector("canvas");
  246.             if (canvas) {
  247.                 clearInterval(checkCanvas);
  248.                 setupMouseBindings(canvas);
  249.             }
  250.         }, 500);
  251.     }
  252.  
  253.     function setupMouseBindings(canvas) {
  254.         console.log("✅ Canvas gefunden! Maussteuerung wird aktiviert...");
  255.  
  256.         document.addEventListener("mousedown", function(event) {
  257.             switch (event.which) {
  258.                 case 1: // Linksklick -> Split
  259.                     split();
  260.                     break;
  261.                 case 2: // Mittelklick -> Mehrfach-Split
  262.                     split();
  263.                     setTimeout(split, Speed);
  264.                     setTimeout(split, Speed * 2);
  265.                     setTimeout(split, Speed * 3);
  266.                     break;
  267.                 case 3: // Rechtsklick -> Macro Feed aktivieren
  268.                     Feed = true;
  269.                     setTimeout(mass, Speed);
  270.                     break;
  271.             }
  272.         });
  273.  
  274.         document.addEventListener("mouseup", function(event) {
  275.             if (event.which == 3) { // Rechtsklick loslassen -> Macro Feed deaktivieren
  276.                 Feed = false;
  277.             }
  278.         });
  279.  
  280.         document.addEventListener("contextmenu", function(event) {
  281.             event.preventDefault(); // Blockiert das Kontextmenü
  282.         });
  283.     }
  284. })();
  285.  
  286. // Add event listeners for keydown and keyup
  287. window.addEventListener('keydown', keydown);
  288. window.addEventListener('keyup', keyup);
  289.  
  290. 	$(document).ready(function() {
  291. 		$(document).on('keydown', function(e) {
  292. 			var key = e.which || e.keyCode;
  293. 			if(key == 77) { // key M
  294. 				core.playersMinimap(1)
  295. 				core.setMinimap(1)
  296. 			}
  297. 		});
  298. 	});
  299.  
  300. "use strict";
  301.  
  302. const qs = sel => document.querySelector(sel);
  303. const observe = (target, options, callback) => {
  304. 	(new MutationObserver(callback)).observe(target, options);
  305. };
  306.  
  307. let css = "";
  308.  
  309. // ** Block Advertisements
  310. const scripts = document.getElementsByTagName("script");
  311. const adRegex = /adinplay|amazon-adsystem|doubleclick\.net/;
  312. for (const script of scripts) {
  313. 	if (adRegex.test(script.src)) {
  314. 		script.parentNode.removeChild(script);
  315. 		console.log("removed script", script.src);
  316. 	}
  317. }
  318.  
  319. addEventListener("DOMContentLoaded", () => {
  320. 	const mainPanel = qs("#mainPanel");
  321. 	const playContainer = qs(".play-container");
  322. 	const playElm = qs("#mainui-play");
  323. 	const settingsBtn = qs("#settingsButton");
  324. 	let settingsElm = null;
  325.  
  326. 	// ** Darken Stuff
  327. 	css += `
  328. 		#mainui-ads, #mainui-features, #mainui-modes, #mainui-offers,
  329. 			#mainui-party, #mainui-play, #mainui-promo, #mainui-user,
  330. 			#mainui-settings > .dialog, .tosBox, .agario-party-dialog
  331. 		{
  332. 			background: #000 !important;
  333. 			color: #ddd !important;
  334. 			outline: 1.5px solid #ddd;
  335. 			border-radius: 0;
  336. 		}
  337. 		.options, #region, #nick, .potion-slot-container,
  338. 			.potion-slot-container > .cover-up, .token > .party-token,
  339. 			.party-icon-back,
  340. 			#mode_ffa:not(.active):not(:hover),
  341. 			#mode_battleroyale:not(.active):not(:hover),
  342. 			#mode_teams:not(.active):not(:hover),
  343. 			#mode_experimental:not(.active):not(:hover)
  344. 		{
  345. 			background-color: #000 !important;
  346. 			color: #ddd !important;
  347. 		}
  348. 		#nick::selection, .party-token::selection {
  349. 			paddding: 2px;
  350. 			background-color: rgba(0, 255, 0, 0.5);
  351. 		}
  352. 		#mainui-grid > div {
  353. 			overflow: visible;
  354. 		}
  355. 		.label, .progress-bar-text {
  356. 			color: #fff !important;
  357. 			font-weight: 400;
  358. 		}
  359. 		@import url('https://fonts.googleapis.com/css?family=Ubuntu');
  360. 		body {
  361. 			font-family: 'Ubuntu', sans-serif !important;
  362. 		}
  363. 		#title {
  364. 			margin-top: 0 !important;
  365. 		}
  366. 		#playnick {
  367. 			margin-bottom: 40px !important;
  368. 		}
  369. 		#instructions {
  370. 			position: static !important;
  371. 			border-top: 1px solid grey;
  372. 			border-bottom: 1px solid grey;
  373. 			padding: 5px 10px;
  374. 		}
  375. 		#mainui-play {
  376. 			height: auto !important;
  377. 		}
  378. 		.play-blocker {
  379. 			display: none;
  380. 		}
  381. 		#stats span {
  382. 			color: rgba(255, 255, 255, 0.8) !important;
  383. 		}
  384. 		header {
  385. 			top: auto;
  386. 			bottom: 0;
  387. 		}
  388. 	`;
  389. 	const lb = qs("#statsTimeLeaderboardContainer");
  390. 	lb.lastElementChild.innerText = "Leaderboard";
  391.  
  392. 	// ** Hide Static Ads
  393. 	css += `
  394. 		#adsTop, #adsBottom, #adsRight, #adsLeft,
  395. 			#mainui-ads, #mainui-promo, #socialButtons, .adsbygoogle,
  396. 			#agar-io_300x250, #agar-io_970x90
  397. 		{
  398. 			display: none !important;
  399. 		}
  400. 	`;
  401.  
  402. 	// ** Canvas Height Correction
  403. 	// Really weird that the miniclip dev put the style on the html:
  404. 	document.body.parentElement.style = "--bottom-banner-height:0px;";
  405.  
  406. 	// ** Move Settings Back To Center Column
  407. 	addEventListener("load", () => {
  408. 		settingsBtn.click();
  409. 		settingsBtn.parentElement.removeChild(settingsBtn);
  410. 		observe(mainPanel, {childList: true}, (mutationList, me) => {
  411. 			settingsElm = qs("#mainui-settings");
  412. 			if (!settingsElm) return;
  413. 			me.disconnect();
  414.  
  415. 			for (const elm of [qs(".actions"), qs("#region"),
  416. 				qs("#quality"), qs(".options"), qs("#instructions"),
  417. 				qs(".versions")])
  418. 			{
  419. 				mainPanel.appendChild(elm);
  420. 			}
  421. 			settingsElm.parentElement.removeChild(settingsElm);
  422. 		});
  423. 	});
  424. 	css += `
  425. 		#mainui-settings > .dialog {
  426. 			position: static;
  427. 			left: 0;
  428. 			top: 0;
  429. 			transform: translate(0, 0);
  430. 			width: 295px;
  431. 		}
  432. 		.options {
  433. 			padding: 0 !important;
  434. 		}
  435. 		.options label {
  436. 			width: auto !important;
  437. 		}
  438. 		.actions > button {
  439. 			width: 130px !important;
  440. 		}
  441. 		.actions {
  442. 			margin-bottom: 15px;
  443. 		}
  444. 	`;
  445.  
  446. 	// ** Append CSS To DOM
  447. 	const style = document.createElement("style");
  448. 	style.id = "agarExtras";
  449. 	style.innerHTML = css;
  450. 	document.head.appendChild(style);
  451. });
  452.  
  453. let isChecking = false;
  454.  
  455. (function() {
  456.     const blockedHosts = ["ads", "doubleclick", "googlesyndication", "adservice"];
  457.  
  458.     // Blockiere fetch-Requests
  459.     const originalFetch = window.fetch;
  460.     window.fetch = function(url, ...args) {
  461.         if (blockedHosts.some(host => url.includes(host))) {
  462.             console.log("[AdBlock] Blocked:", url);
  463.             return Promise.reject("Blocked Ad Request");
  464.         }
  465.         return originalFetch(url, ...args);
  466.     };
  467. })();
  468.  
  469. function removeAds() {
  470.         let adIframes = document.querySelectorAll('iframe');
  471.         adIframes.forEach(function(iframe) {
  472.             let src = iframe.src.toLowerCase();
  473.             if (src.includes('ads') || src.includes('adserver') || src.includes('doubleclick') || src.includes('googlesyndication')) {
  474.                 iframe.remove();
  475.             }
  476.         });
  477.  
  478.         let adElements = document.querySelectorAll('[id*="adBanner"], [id*="adContainer"], [id*="ad-container"], [class*="adBox"], ' +
  479.             '[class*="ad-container"], [id*="google_ads"], [class*="google_ads"], ' +
  480.             '[id*="agar-io_300x250"], [class*="agar-io_300x250"], ' +
  481.             '[id*="agar-io_160x600"], [class*="agar-io_160x600"], ' +
  482.             '[id*="google_ads_iframe"], [class*="google_ads_iframe"], ' +
  483.             '[id*="agar-io_160x600_2"], [class*="agar-io_160x600_2"], ' +
  484.             '[id*="agar-io_970x90"], [class*="agar-io_970x90"], ' +
  485.             '#preroll, .preroll, #adsBottom, .adsBottom, [id^="google_ads"], ' +
  486.             '[id*="divFullscreenLoading"], [class*="divFullscreenLoading"]');
  487.         adElements.forEach(function(ad) {
  488.             ad.remove();
  489.         });
  490.     }
  491.  
  492.     function adjustBannerHeight() {
  493.         document.documentElement.style.setProperty('--bottom-banner-height', '0px');
  494.     }
  495.  
  496.     function clearUnused() {
  497.         let oldAds = document.querySelectorAll('.old-ad');
  498.         oldAds.forEach(ad => {
  499.             ad.remove();
  500.             ad = null;
  501.         });
  502.     }
  503.  
  504.     function update() {
  505.         clearUnused();
  506.         requestAnimationFrame(update);
  507.     }
  508.  
  509.     function checkAds() {
  510.         if (!isChecking) {
  511.             isChecking = true;
  512.             removeAds();
  513.             adjustBannerHeight();
  514.             isChecking = false;
  515.         }
  516.     }
  517.  
  518. window.onload = function() {
  519.         // Sichert, dass das Canvas-Element existiert
  520.         var canvas = document.getElementById("canvas");
  521.         if (canvas) {
  522.             var ctx = canvas.getContext("2d");
  523.         }
  524.  
  525.         // Ersetzt die Titel- und Header-Elemente
  526.         $("h2").replaceWith('<h2>LokisMod Agar.io</h2>');
  527.         $("title").replaceWith('<title>LokisMod Agar.io</title>');
  528.         $("h1").replaceWith('<h1>LokisMod Agar.io</h1>');
  529.     };
  530.  
  531.     window.onload = function() {
  532.         // Creating a toggle button for the menu
  533.         const toggleButton = document.createElement('button');
  534.         toggleButton.innerText = 'Toggle Menu';
  535.         toggleButton.style.position = 'fixed';
  536.         toggleButton.style.top = '80px'; // Adjusted to be slightly lower
  537.         toggleButton.style.left = '10px'; // Slightly off from the left edge
  538.         toggleButton.style.zIndex = '9999';
  539.         toggleButton.style.padding = '15px 25px';
  540.         toggleButton.style.cursor = 'pointer';
  541.         toggleButton.style.backgroundColor = '#b22222'; // Dark red
  542.         toggleButton.style.border = 'none';
  543.         toggleButton.style.borderRadius = '10px';
  544.         toggleButton.style.color = 'white';
  545.         toggleButton.style.fontSize = '18px';
  546.         toggleButton.style.fontWeight = 'bold';
  547.         toggleButton.style.boxShadow = '0 0 15px rgba(178, 34, 34, 0.7)';
  548.         toggleButton.style.transition = '0.3s ease-out';
  549.  
  550.         // Animation effect on hover
  551.         toggleButton.onmouseover = function() {
  552.             toggleButton.style.transform = 'scale(1.1)';
  553.             toggleButton.style.boxShadow = '0 0 25px rgba(178, 34, 34, 1)';
  554.         };
  555.  
  556.         toggleButton.onmouseout = function() {
  557.             toggleButton.style.transform = 'scale(1)';
  558.             toggleButton.style.boxShadow = '0 0 15px rgba(178, 34, 34, 0.7)';
  559.         };
  560.  
  561.         // Appending the button to the body
  562.         document.body.appendChild(toggleButton);
  563.  
  564.         // Creating the menu container
  565.         const menu = document.createElement('div');
  566.         menu.id = 'lokisModMenu';
  567.         menu.style.position = 'fixed';
  568.         menu.style.top = '100px'; // Below the toggle button
  569.         menu.style.left = '10px';
  570.         menu.style.width = '250px';
  571.         menu.style.height = '300px';
  572.         menu.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  573.         menu.style.color = 'white';
  574.         menu.style.padding = '10px';
  575.         menu.style.borderRadius = '10px';
  576.         menu.style.boxShadow = '0 0 15px rgba(255, 0, 0, 0.7)';
  577.         menu.style.zIndex = '10000';  // Make sure it shows on top of other elements
  578.         menu.style.display = 'none';  // Initially hidden
  579.         menu.style.transition = '0.3s ease';
  580.  
  581.         // Adding a glowing border effect on hover
  582.         menu.onmouseover = function() {
  583.             menu.style.boxShadow = '0 0 25px rgba(255, 0, 0, 1)';
  584.         };
  585.  
  586.         menu.onmouseleave = function() {
  587.             menu.style.boxShadow = '0 0 15px rgba(255, 0, 0, 0.7)';
  588.         };
  589.  
  590.         // Adding some content to the menu
  591.         const title = document.createElement('h2');
  592.         title.innerText = 'LokisMod Features';
  593.         title.style.textAlign = 'center';
  594.         title.style.marginBottom = '15px';
  595.         title.style.fontFamily = 'Arial, sans-serif';
  596.         title.style.color = '#ff4d4d';
  597.         title.style.textShadow = '0 0 10px rgba(255, 0, 0, 0.7)';
  598.         menu.appendChild(title);
  599.  
  600.         const featureList = document.createElement('div');
  601.         featureList.innerHTML = `
  602.             <ul>
  603.                 <li>Press: A = Double Split </li>
  604.                 <li>Press: S = Center Mouse </li>
  605.                 <li>Press: M = Minimap </li>
  606.                 <li>Press: Q = Macro Feed </li>
  607.                 <li>Press: Shift = Tricksplit </li>
  608.                 <li>Press: D = Tripple Split </li>
  609.                 <li>Click Mouse = Split </li>
  610.                 <li>Added FPS Booster </li>
  611.                 <li>More Coming Soon </li>
  612.             </ul>
  613.         `;
  614.         featureList.style.listStyle = 'none';
  615.         featureList.style.fontFamily = 'Arial, sans-serif';
  616.         featureList.style.fontSize = '16px';
  617.         featureList.style.color = '#fff';
  618.         menu.appendChild(featureList);
  619.  
  620.         // Appending the menu to the body
  621.         document.body.appendChild(menu);
  622.  
  623.         // Toggle the visibility of the menu when the button is clicked
  624.         toggleButton.onclick = function() {
  625.             if (menu.style.display === 'none') {
  626.                 menu.style.display = 'block'; // Show the menu
  627.             } else {
  628.                 menu.style.display = 'none'; // Hide the menu
  629.             }
  630.         };
  631.  
  632.         // Making the menu draggable
  633.         let isDragging = false;
  634.         let offsetX = 0;
  635.         let offsetY = 0;
  636.  
  637.         menu.onmousedown = function(e) {
  638.             isDragging = true;
  639.             offsetX = e.clientX - menu.offsetLeft;
  640.             offsetY = e.clientY - menu.offsetTop;
  641.             document.onmousemove = function(e) {
  642.                 if (isDragging) {
  643.                     menu.style.left = e.clientX - offsetX + 'px';
  644.                     menu.style.top = e.clientY - offsetY + 'px';
  645.                 }
  646.             };
  647.         };
  648.  
  649.         document.onmouseup = function() {
  650.             isDragging = false;
  651.             document.onmousemove = null;
  652.         };
  653.     };