☰

Abnormal Menu

This is a JavaScript script that creates a menu for scripts.

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/462013/1164920/Abnormal%20Menu.js 

  1. /*
  2. Created by anonimbiri
  3. */
  4.  
  5. const link = document.createElement('link');
  6. link.rel = 'stylesheet';
  7. link.href = 'https://fonts.googleapis.com/css?family=Nunito:bold';
  8. document.getElementsByTagName('head')[0].appendChild(link);
  9. var style = document.createElement('style');
  10. style.type = 'text/css';
  11. style.innerHTML = `
  12. @keyframes blur-in  {
  13.    0% {
  14.       backdrop-filter:blur(0px);
  15.    }
  16.    100% {
  17.       backdrop-filter:blur(10px);
  18.    }
  19. }
  20. @keyframes blur-out  {
  21.    100% {
  22.       backdrop-filter:blur(0px);
  23.    }
  24.    0% {
  25.       backdrop-filter:blur(10px);
  26.    }
  27. }
  28. .menus {
  29.     position: absolute;
  30.     z-index: 1000;
  31.     top: 0;
  32.     left: 0;
  33.     display: flex;
  34.     width: 100%;
  35.     height: 100vh;
  36.     justify-content: center;
  37.     align-items: center;
  38. }
  39. .bg-blur {
  40.     position: absolute;
  41.     top: 0;
  42.     left: 0;
  43.     width: 100%;
  44.     height: 100%;
  45.     background: rgba(0, 0, 0, .16);
  46. }
  47. .menus.open {
  48.     animation:blur-in .3s;
  49.     animation-fill-mode:forwards;
  50.     visibility: visible;
  51. }
  52. .menus.close {
  53.     animation:blur-out .3s;
  54.     animation-fill-mode: forwards;
  55.     visibility: hidden;
  56. }
  57. .close-button {
  58.   background: url('data:image/png;base64,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');
  59.   background-size: 32px !important;
  60.   position: absolute;
  61.   z-index: 1001;
  62.   right: 32px;
  63.   top: 32px;
  64.   width: 32px;
  65.   height: 32px;
  66.   opacity: 0.3;
  67.   border: none;
  68. }
  69. .close-button:hover {
  70.   opacity: 1;
  71. }
  72. .close-button:before, .close-button:after {
  73.   position: absolute;
  74.   left: 15px;
  75.   height: 33px;
  76.   width: 2px;
  77.   background-color: #333;
  78. }
  79. .close-button:before {
  80.   transform: rotate(45deg);
  81. }
  82. .close-button:after {
  83.   transform: rotate(-45deg);
  84. }
  85. .menu {
  86.     background-color: #111111;
  87.     width: 640px;
  88.     height: 520px;
  89.     margin: 0 auto;
  90.     border-radius: 5px;
  91.     position: absolute;
  92.     transform: scale(0.82971);
  93.     flex-direction: column;
  94.     z-index: 1001;
  95. }
  96. .menu.pinned {
  97.     visibility: visible;
  98. }
  99. .menu-items {
  100.    width: 640px;
  101.    height: 480px;
  102.    overflow-y: scroll;
  103. }
  104. ::-webkit-scrollbar {
  105.   width: 10px;
  106. }
  107. ::-webkit-scrollbar-thumb {
  108.   background: #888;
  109.   border-radius: 10px;
  110. }
  111. ::-webkit-scrollbar-track {
  112.   background: transparent;
  113. }
  114. .gradient-slider .title {
  115.    font-family: 'Nunito', sans-serif;
  116.    font-weight: bold;  
  117.    font-size: 20px;
  118.    margin: 0px 0px 20px;
  119.    color: rgb(0, 0, 0);
  120.    position: relative;
  121.    display: flex;
  122.    flex-direction: column;
  123.    align-items: center;
  124.    padding: 5px;
  125. }
  126. .gradient-slider {
  127.     background: linear-gradient(268deg, #ff3939, #eeff30, #37ff30, #30ffd6, #ff30f4);
  128.     background-size: 1000% 1000%;
  129.     width: 100%;
  130.     height: 30px;
  131.     margin: 0 auto;
  132.     border-radius: 5px 5px 0px  0px;
  133.     animation: AnimationName 30s ease infinite;
  134.     cursor: move;
  135. }
  136. @keyframes AnimationName {
  137.     0%{background-position:0% 50%}
  138.     50%{background-position:100% 50%}
  139.     100%{background-position:0% 50%}
  140. }
  141. .gradient-slider .pin-button {
  142.   background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFN0lEQVR4nO2dW4xeUxTHf8albkFLQlJxK1UVD0Jo3JWQKkq/eShFShAal5C0KBJEouFB8FKJF/NQl6Yvpm4J4hJVUre4pJVoqzNqRglGKNN2juxYX/Kl+b75znXvtfc+v2S9zWT2Wv/Z5+yz9tprQ007Lgb6gWFgG7AauKLtT9ZUyj7A80DSwR6s9s/XtLInsGocMWpRLPNECjGadr/twcXGucDODIIYu8/1oENlIvBDRjGadq/rwYfISznFaNpi1w6ExE0FxTA2Btzm2pEQOBYYKUGQpigLXTvkM3sAa0oSo1WUW1075iuPlSxGqyi3uHbON84GdlQkSFOUm1076QsHFVjiZjHzTXOta2d94AULYjTNzMJrXDusmRssitEqytWuHdfIMSUucfOIcpXrAGhb4n7kSIxWUea5DoQWHnUsRtNGgTlEzlkVL3Gz2r/A5UTKgcBGBSK0E+UyImS5guCPJ8psIuI6BUHvZv8AlxABRwN/KAh4GvsbmEngS9zVCgKdxf4CzidQHlYQ4LyinIfyJOBpwHzgbuABYKnYEuB2YAEwAzhAfudMYLuC4OY185idihImS66pL2c21ixvtyoIalF70aUI+wPXA2/nKMFJArXfXAhxMPAQ8KuCACTKzNQRW2OCPP//VOB4otTMPr8VLgDWK3A4UW6mLKny74Klss/s2tnEg9mxV5ViHAZ8qMDRxANbBxxedRHa9wocTTyw14BDqhTjJGBIgaOJchuRcqHdqJh3FDibKLd3JQlqhY8VOJwozu7eBfRgkVme55SSiuwTYBqOaMimvusgJApsuyz9zRlGp9SiwNfAKSgiVlF2Ak9JukgdsYmyATgH5cQgyhjwrGwreEHIomzxtawnRFFeBibhMaGIMhxSQxrfRVlRdULQBT6K8nvo5wd9EuWNqvcstNDrQe7rLRtpck1onynfEiENxaLskG5z0dFQLIqqJKFNepW+U6I+3txQOFOiaSxj0g7HezBTFhMBPVIGY6pUpiufKY8Q2RnyH5XPlMcJnDltSkyHFM+UoBteTpW8UDvHh4ATFIpyI4FidtS+6eL8TwpFCSbV3orJB61MGYABqRHW8k45nQBZkjEIA8AUBTNlNMTUyYU5G8FsViDKZwTGkQVPyW52LMoyAsJM9c9LCMqmDhXjNt4pQTW07CsxMJtkttkUZVtLcwLvuaPk4LwifbCw+PgyBQ1BcIb0hSojKGNSQd7tXEUVoswlACbLx10ZAfkFuCjD3y7z8TWotWA6C+YcxAclBeQLafGalbJmimly4z3LShJjObBvgXEUFWVLCB+DZXSPHpXFQBkUeXx5PztOlkONRcT4uYKWd3lmyqcajqAV7fCzoaAYazt8Y9gWxTSnPBGP2R14s6AYfRae142UoiwiogsZ2/032tz46e3yTumXfzBvmVug08+g9Ey0TaPDTFnr03G0dkwrcAXE+9ItyBWNXUTZ6Hg8pXQN/S6nGE9KHy3XzJJZ8WqH1L439KS8Vbld1tS0dq1R0KzYtH49teyB1MClOVq6vu77KVWtHCd9ZbOmzL1eRmrFLAe/yiDGiKz5ayqqpcpyxfV631MP2lmUQYx+WRLXVMTMlOnrtFusNQU4QtLhaa5ZiP46uKrZW3oEdhPjS9+/cn3huRRimIt+93M90BhY2EUI8065x/UgY2GG7FF0EmOr3HRQY4FDZY9ivH3mo2wMpOb/Df33HG+x1rTwTAchzOPrzjpSdpmvbIs1egYVbrFGzfAuYjzte5GY71wpXRQG5PFVgzv+AynEgK57r17vAAAAAElFTkSuQmCC');
  143.   background-size: 25px !important;
  144.   position: absolute;
  145.   z-index: 1001;
  146.   top: 10;
  147.   left: 10px;
  148.   width: 25px;
  149.   height: 25px;
  150.   opacity: 0.3;
  151.   border: none;
  152. }
  153. .menu.pinned .gradient-slider .pin-button {
  154.   background: url('data:image/png;base64,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');
  155. }
  156. .pin-button:hover {
  157.   opacity: 1;
  158. }
  159. .pin-button:before, .close-button:after {
  160.   position: absolute;
  161.   right: 15px;
  162.   height: 33px;
  163.   width: 2px;
  164.   background-color: #333;
  165. }
  166. .pin-button:before {
  167.   transform: rotate(45deg);
  168. }
  169. .pin-button:after {
  170.   transform: rotate(-45deg);
  171. }
  172. .ui-tooltip {
  173. 	padding: 8px;
  174. 	position: absolute;
  175. 	z-index: 9999;
  176. 	max-width: 300px;
  177.   width: 120px;
  178.   background-color: #042c70;
  179.   color: #fff;
  180.   text-align: center;
  181.   padding: 5px 10px;
  182.   border-radius: 3px;
  183.   font-family: nunitobold;
  184.   font-size: 14px;
  185. }
  186. body .ui-tooltip {
  187. 	border-width: 2px;
  188. }
  189. .ui-tooltip:after {
  190.     position: absolute;
  191.     top: -8px;
  192.     left: 50%;
  193.     -webkit-transform: translateX(-50%);
  194.     -moz-transform: translateX(-50%);
  195.     -ms-transform: translateX(-50%);
  196.     -o-transform: translateX(-50%);
  197.     transform: translateX(-50%);
  198.     content: '';
  199.     border-style: solid;
  200.     border-width: 0 10px 15px;
  201.     border-color: transparent transparent #042c70 transparent;
  202.     z-index: -1;
  203. }
  204. .ui-helper-hidden-accessible {
  205. 	border: 0;
  206. 	clip: rect(0 0 0 0);
  207. 	height: 1px;
  208. 	margin: -1px;
  209. 	overflow: hidden;
  210. 	padding: 0;
  211. 	position: absolute;
  212. 	width: 1px;
  213. }
  214. .toast-color {
  215.   display: block;
  216.   width: 15px;
  217.   margin-right: 5px;
  218.   border-radius: 3px 0 0 3px;
  219.   position: relative;
  220.   box-sizing: border-box;
  221.   color: #eee;
  222.   font-size: 16px;
  223.   font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
  224. }
  225. .toast-color.red {
  226.   background-color: #b90909;
  227. }
  228. .toast-color.green {
  229.   background-color: #4caf50;
  230. }
  231. .toast-color.yellow {
  232.   background-color: #ff9800;
  233. }
  234. .toast-color.blue {
  235.   background-color: #2196f3;
  236. }
  237. .toast-img {
  238.  padding: 5px;
  239.  position: relative;
  240.  box-sizing: border-box;
  241.  width: 42px;
  242.  height: 42px;
  243.  object-fit: cover;
  244. }
  245. .toast-title {
  246.  padding: 12px;
  247.  position: relative;
  248.  box-sizing: border-box;
  249.  color: #eee;
  250.  font-size: 16px;
  251.  font-weight: bold;
  252.  font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
  253. }
  254. .toast-msg {
  255.  padding: 12px;
  256.  position: relative;
  257.  box-sizing: border-box;
  258.  color: #eee;
  259.  font-size: 16px;
  260.  font-family: 'Roboto', Tahoma, Geneva, Verdana, sans-serif;
  261. }
  262. #toasts {
  263.     position: absolute;
  264.     bottom: 0;
  265.     right: 0;
  266.     display: flex;
  267.     flex-direction: column;
  268.     align-items: flex-end;
  269.     max-width: 100%;
  270.     padding: 10px;
  271.     overflow: hidden;
  272. }
  273. #toast {
  274.     height: 43px;
  275.     opacity: 1;
  276.     margin-top: 5px;
  277.     margin-bottom: 5px;
  278.     overflow: hidden;
  279.     margin: 5px 0;
  280.     border-radius: 3px;
  281.     box-shadow: 0 0 4px 0 #000;
  282.     box-sizing: border-box;
  283.     display: block;
  284.     z-index: 1001;
  285.     position: relative;
  286. }
  287. .toast.group {
  288.     display: inline-flex;
  289.     box-sizing: border-box;
  290.     border-radius: 3px;
  291.     color: #eee;
  292.     font-size: 16px;
  293.     background-color: #262626;
  294.     vertical-align: bottom;
  295. }
  296. #toast.show {
  297.   -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  298.   animation: fadein 0.5s, fadeout 0.5s 2.5s;
  299. }
  300. @-webkit-keyframes fadein {
  301.   from {right: -30%; opacity: 0;}
  302.   to {right: 1%; opacity: 1;}
  303. }
  304. @keyframes fadein {
  305.   from {right: -30%; opacity: 0;}
  306.   to {right: 1%; opacity: 1;}
  307. }
  308. @-webkit-keyframes fadeout {
  309.   from {right: 1%; opacity: 1;}
  310.   to {right: -30%; opacity: 0;}
  311. }
  312. @keyframes fadeout {
  313.   from {right: 1%; opacity: 1;}
  314.   to {right: -30%; opacity: 0;}
  315. }
  316. .button {
  317.   background-color: transparent;
  318.   border: 2px solid #e0e1e2;
  319.   color: #e0e1e2;
  320.   padding: 16px 32px;
  321.   text-align: center;
  322.   text-decoration: none;
  323.   display: inline-block;
  324.   font-size: 16px;
  325.   margin: 4px 2px;
  326.   transition-duration: 0.4s;
  327.   cursor: pointer;
  328.   border-radius: 5px;
  329.   font-family: 'Nunito', sans-serif;
  330.   font-weight: bold;
  331. }
  332. .button:hover {  color: rgba(0,0,0,.6); background: #cacbcd }
  333. .switch {
  334. 	position: relative;
  335. 	display: inline-block;
  336.     width: 60px;
  337.     height: 34px;
  338. 	border-radius:40px;
  339. 	border:2px solid #e0e1e2;
  340. }
  341. .switch input { 
  342.   opacity: 0;
  343. }
  344. .slider {
  345.         position: absolute;
  346. 	cursor:pointer;
  347. 	top:0;
  348. 	left:0;
  349. 	right:0;
  350. 	bottom:0;
  351. 	border-radius: 34px;
  352. 	-webkit-transition:.5s;
  353. }
  354. .slider:before {
  355. 	position: absolute;
  356. 	content:"";
  357.     height: 26px;
  358.     width: 26px;
  359. 	top:3px;
  360. 	left:4px;
  361. 	background-color: #e0e1e2;
  362. 	-webkit-transition:.5s;
  363. }
  364. input:checked + .slider:before{
  365.   -webkit-transform: translateX(26px);
  366.   -ms-transform: translateX(26px);
  367.   transform: translateX(26px);
  368. }
  369. .slider:before {
  370.   border-radius: 50%;
  371. }
  372. .list-group {
  373.  align-items: center;
  374.  display: flex;
  375.  padding-left: 10px;
  376.  padding-right: 10px;
  377.  padding-top: 20px;
  378.  justify-content: space-between;
  379. }
  380. .list-group .label {
  381.  display: inline-block;
  382.  color: white;
  383.  font-family: 'Nunito', sans-serif;
  384.  font-weight: bold;
  385. }
  386. .DropZone {
  387.  width: 200px;
  388.  max-width: 200px;
  389.  height: 200px;
  390.  padding: 25px;
  391.  display: flex;
  392.  align-items: center;
  393.  justify-content: center;
  394.  border: 4px dashed #e0e1e27a;
  395.  cursor:pointer;
  396. }
  397. .DropZone:hover {
  398.  border-color: #cacbcd;
  399. }
  400. .DropZone.Error {
  401.  border: 4px dashed #ff00007a;
  402. }
  403. .DropZone.Error:hover {
  404.  border: 4px dashed #ff003b;
  405. }
  406. .DropZone.Error div{
  407.  color: #ff003b;
  408. }
  409. .DropZone div{
  410.     text-align: center;
  411.     font-family: 'Nunito', sans-serif;
  412.     font-weight: 500;
  413.     font-size: 20px;
  414.     color: lightgray;
  415.     position: relative;
  416. }
  417. .Fileİnput {
  418.     display: none;
  419. }
  420. .DropThumb {
  421.   width: 100%;
  422.   height: 100%;
  423.   border-radius: 10px;
  424.   overflow: hidden;
  425.   background-color: #cccccc;
  426.   background-size: cover;
  427.   position: relative;
  428. }
  429. .DropThumb::after {
  430.   content: attr(data-label);
  431.   position: absolute;
  432.   bottom: 0;
  433.   left: 0;
  434.   width: 100%;
  435.   padding: 5px 0;
  436.   color: #ffffff;
  437.   background: rgba(0, 0, 0, 0.75);
  438.   font-size: 14px;
  439.   text-align: center;
  440. }
  441. .options-menu {
  442.   background-color: #e0e1e2;
  443.   width: 200px;
  444.   position: relative;
  445.   display: inline-block;
  446.   border-radius: 5px;
  447. }
  448. .select-style {
  449.   background-color: transparent;
  450.   border: none;
  451.   padding: 5px 10px;
  452.   font-size: 16px;
  453.   color: #555;
  454.   width: 100%;
  455.   border-radius: 5px;
  456.   -webkit-appearance: none;
  457.   -moz-appearance: none;
  458.   appearance: none;
  459.   cursor: pointer;
  460.   outline: none;
  461.   font-family: 'Nunito', sans-serif;
  462.   font-weight: bold;
  463. }
  464. .select-style:after {
  465.   content: "\f107";
  466.   font-family: "Font Awesome 5 Free";
  467.   font-weight: 900;
  468.   position: absolute;
  469.   right: 10px;
  470.   top: 50%;
  471.   transform: translateY(-50%);
  472.   pointer-events: none;
  473. }
  474. .select-style option {
  475.   background-color: #e0e1e2;
  476.   color: #555;
  477.   font-size: 16px;
  478.   padding: 5px 10px;
  479.   cursor: pointer;
  480. }
  481. .select-style option:checked {
  482.   background-color: #8f8f8f;
  483.   color: #fff;
  484. }
  485.  
  486. .list-group.Input input {
  487.   font-size: 16px;
  488.   padding: 10px;
  489.   background-color: #e0e1e2;
  490.   border-radius: 9px;
  491.   font-family: 'Nunito', sans-serif;
  492.   font-weight: bold;
  493.   border: 4px solid;
  494. }
  495.  
  496. .list-group.Input .input {
  497.   width: 200px;
  498. }
  499.  
  500. .list-group.Input input:focus {
  501.   outline: none;
  502.   border: 4px solid #007fff;
  503. }
  504.  
  505. `;
  506. document.getElementsByTagName('head')[0].appendChild(style);
  507.  
  508. var CreateToasts = document.createElement("div");
  509. var CreateMenus = document.createElement("div");
  510. var close_button = document.createElement("button");
  511. window.addEventListener('load', (event) => {
  512.   CreateToasts.setAttribute("id", "toasts");
  513.   document.body.prepend(CreateToasts);
  514.   CreateMenus.setAttribute("class", "menus open");
  515.   document.body.prepend(CreateMenus);
  516.   var blur_bg = document.createElement("div");
  517.   blur_bg.setAttribute("class", "bg-blur");
  518.   CreateMenus.prepend(blur_bg);
  519.   close_button.setAttribute("class", "close-button");
  520.   close_button.setAttribute("title", "Close");
  521.   CreateMenus.prepend(close_button);
  522.   console.log('%c╦═══════════════════════════╦\n║Anonim Biri - Abnormal-Menu║\n╩═══════════════════════════╩\n%cGtihub doc: %chttps://github.com/anonimbiri/Abnormal-Menu\n\n%cNote: %cthis doesn\'t give you cheats, it\'s a ui design.', 'font-weight: bold; font-size: 50px;color: rgb(255, 10, 63); text-shadow: 3px 3px 0 rgb(64, 1, 25)', 'font-weight: bold; font-size: 15px;color: rgb(245, 236, 66); text-shadow: 1px 1px 0 rgb(145, 140, 33)', 'font-weight: bold; font-size: 15px;color: rgb(240, 239, 233); text-shadow: 1px 1px 0 rgb(145, 145, 144)', 'font-weight: bold; font-size: 15px;color: rgb(245, 236, 66); text-shadow: 1px 1px 0 rgb(145, 140, 33)', 'font-weight: bold; font-size: 15px;color: rgb(240, 239, 233); text-shadow: 1px 1px 0 rgb(145, 145, 144)');
  523. });
  524.  
  525. class SendToast {
  526.   constructor(options) {
  527.     var toast = document.createElement("div");
  528.     toast.setAttribute("id", "toast");
  529.     toast.classList.add('show');
  530.     CreateToasts.prepend(toast);
  531.     var ToastGroup = document.createElement("div");
  532.     ToastGroup.setAttribute("class", "toast group");
  533.     toast.prepend(ToastGroup);
  534.     if (!options) console.error("Data is empty");
  535.     if (options.message) var CreateMsgToast = document.createElement("span");
  536.     if (options.message) CreateMsgToast.setAttribute("class", "toast-msg");
  537.     if (options.message) ToastGroup.prepend(CreateMsgToast);
  538.     if (options.title) var CreateTitleToast = document.createElement("span");
  539.     if (options.title) CreateTitleToast.setAttribute("class", "toast-title");
  540.     if (options.title) ToastGroup.prepend(CreateTitleToast);
  541.     if (options.icon) var CreateimageToast = document.createElement("img");
  542.     if (options.icon) CreateimageToast.setAttribute("class", "toast-img");
  543.     if (options.icon) CreateimageToast.setAttribute("src", options.icon);
  544.     if (options.icon) ToastGroup.prepend(CreateimageToast);
  545.     if (options.type) var CreateColorToast = document.createElement("span");
  546.     if (options.type) CreateColorToast.setAttribute("class", "toast-color");
  547.     if (options.type) ToastGroup.prepend(CreateColorToast);
  548.     if (options.title) CreateTitleToast.innerText = options.title;
  549.     if (options.message) CreateMsgToast.innerText = options.message;
  550.     switch (options.type) {
  551.       case "Success":
  552.         ToastGroup.querySelector('.toast-color').setAttribute("class", "toast-color green");
  553.         break;
  554.  
  555.       case "Error":
  556.         ToastGroup.querySelector('.toast-color').setAttribute("class", "toast-color red");
  557.         break;
  558.  
  559.       case "Warning":
  560.         ToastGroup.querySelector('.toast-color').setAttribute("class", "toast-color yellow");
  561.         break;
  562.  
  563.       case "Info":
  564.         ToastGroup.querySelector('.toast-color').setAttribute("class", "toast-color blue");
  565.         break;
  566.     }
  567.  
  568.     setTimeout(function () { toast.remove(); }, 2900);
  569.     return toast;
  570.   }
  571. }
  572.  
  573. class CreateMenu {
  574.   constructor(options) {
  575.     this.title = options.title;
  576.     this.menuItems = [];
  577.     this.menuItemsContainer = null;
  578.  
  579.     const Menu = document.createElement("div");
  580.     Menu.setAttribute("class", "menu");
  581.     Menu.style.width = `${options.width}px`;
  582.     Menu.style.height = `${options.height}px`;
  583.     Menu.style.left = `${options.startX}px`;
  584.     Menu.style.top = `${options.startY}px`;
  585.     CreateMenus.prepend(Menu);
  586.     const gradient_slider = document.createElement("div");
  587.     gradient_slider.setAttribute("class", "gradient-slider");
  588.     Menu.prepend(gradient_slider);
  589.     const menu_items = document.createElement("div");
  590.     menu_items.setAttribute("class", "menu-items");
  591.     menu_items.style.width = `${options.width}px`;
  592.     menu_items.style.height = `${options.height - 40}px`
  593.     Menu.append(menu_items);
  594.     this.menuItemsContainer = menu_items;
  595.     if (options.title) var menu_title = document.createElement("div");
  596.     if (options.title) menu_title.setAttribute("class", "title");
  597.     if (options.title) menu_title.textContent = options.title;
  598.     if (options.title) gradient_slider.prepend(menu_title);
  599.     if (options.pin == true) var pin_button = document.createElement("button");
  600.     if (options.pin == true) pin_button.setAttribute("class", "pin-button");
  601.     if (options.pin == true) gradient_slider.prepend(pin_button);
  602.     if (options.pin == true) pin_button.addEventListener("click", (e) => { if (Menu.classList.contains('pinned')) { Menu.classList.remove('pinned'); } else { Menu.classList.add('pinned'); } });
  603.  
  604.     let scaleFactor = 1.4;
  605.     window.addEventListener('resize', () => {
  606.       let width = window.innerWidth - (window.innerWidth < 1920 ? 180 : 320);
  607.       let e = width / 1150;
  608.       let scale = e < scaleFactor ? e / scaleFactor : 1;
  609.       Menu.style.transform = `scale(${scale})`;
  610.       Menu.style.transformOrigin = 'center';
  611.     });
  612.  
  613.  
  614.  
  615.     gradient_slider.addEventListener("mousedown", (e) => {
  616.       let initialX = e.clientX;
  617.       let initialY = e.clientY;
  618.  
  619.       function moveMenu(e) {
  620.         let currentX = e.clientX;
  621.         let currentY = e.clientY;
  622.         let diffX = currentX - initialX;
  623.         let diffY = currentY - initialY;
  624.         Menu.style.left = `${Menu.offsetLeft + diffX}px`;
  625.         Menu.style.top = `${Menu.offsetTop + diffY}px`;
  626.         initialX = currentX;
  627.         initialY = currentY;
  628.       }
  629.  
  630.       function removeListeners() {
  631.         document.removeEventListener("mousemove", moveMenu);
  632.         document.removeEventListener("mouseup", removeListeners);
  633.       }
  634.  
  635.       document.addEventListener("mousemove", moveMenu);
  636.       document.addEventListener("mouseup", removeListeners);
  637.     });
  638.  
  639.  
  640.   }
  641.  
  642.   addButton(options) {
  643.     var Group = document.createElement("div");
  644.     Group.setAttribute("class", "list-group Buton");
  645.     this.menuItemsContainer.append(Group);
  646.     var Text = document.createElement("div");
  647.     Text.setAttribute("class", "label");
  648.     if (options.label) Text.innerText = options.label;
  649.     Group.append(Text);
  650.     var Button = document.createElement("button");
  651.     Button.setAttribute("class", "button");
  652.     Button.innerText = options.title;
  653.     Group.append(Button);
  654.     this.menuItems.push(Group);
  655.  
  656.  
  657.     const self = {
  658.       element: Button,
  659.       html: () => self.element,
  660.       on: (event, callback) => {
  661.         self.element.addEventListener(event, callback);
  662.       }
  663.     };
  664.     return self;
  665.   }
  666.  
  667.   addSwitch(options) {
  668.     var ToggleSwitch = document.createElement("div");
  669.     ToggleSwitch.setAttribute("class", "list-group toggle-switch");
  670.     this.menuItemsContainer.append(ToggleSwitch);
  671.     var Text = document.createElement("div");
  672.     Text.setAttribute("class", "label");
  673.     Text.innerText = options.label;
  674.     ToggleSwitch.append(Text);
  675.     var Label = document.createElement("label");
  676.     Label.setAttribute("class", "switch");
  677.     ToggleSwitch.append(Label);
  678.     var checkbox = document.createElement("input");
  679.     checkbox.setAttribute("type", "checkbox");
  680.     if (options.value) checkbox.checked = options.value;
  681.     Label.append(checkbox);
  682.     var slider = document.createElement("span");
  683.     slider.setAttribute("class", "slider");
  684.     Label.append(slider);
  685.     this.menuItems.push(ToggleSwitch);
  686.  
  687.     const self = {
  688.       element: ToggleSwitch,
  689.       html: () => self.element,
  690.       on: (event, callback) => {
  691.         self.element.addEventListener(event, callback);
  692.       },
  693.       getValue: () => checkbox.checked
  694.     };
  695.     return self;
  696.   }
  697.  
  698.   addFileDrop(options) {
  699.     var Group = document.createElement("div");
  700.     Group.setAttribute("class", "list-group FileDrop");
  701.     this.menuItemsContainer.append(Group);
  702.     var Text = document.createElement("div");
  703.     Text.setAttribute("class", "label");
  704.     Text.innerText = options.label;
  705.     Group.append(Text);
  706.     var DropZone = document.createElement("div");
  707.     DropZone.setAttribute("class", "DropZone");
  708.     Group.append(DropZone);
  709.     var Title = document.createElement("div");
  710.     Title.innerText = options.title;
  711.     DropZone.append(Title);
  712.     var Thumb = document.createElement("div");
  713.     Thumb.setAttribute("class", "DropThumb");
  714.     Thumb.setAttribute("style", "display: none;");
  715.     DropZone.append(Thumb);
  716.     var Fileİnput = document.createElement("input");
  717.     Fileİnput.setAttribute("class", "Fileİnput");
  718.     Fileİnput.setAttribute("type", "file");
  719.     Fileİnput.setAttribute("accept", "image/*");
  720.     DropZone.append(Fileİnput);
  721.     this.menuItems.push(Group);
  722.  
  723.  
  724.     Fileİnput.addEventListener('change', function (e) {
  725.       if (!e.target.files.length) e.target.parentElement.classList.add('Error');
  726.       if (e.target.files.length) updateThumbnail(e.target.files[0]);
  727.       const myEvent = new CustomEvent("Filedrop", { detail: e.target.files });
  728.       DropZone.dispatchEvent(myEvent);
  729.     });
  730.  
  731.     DropZone.addEventListener('click', function (e) {
  732.       e.target.classList.remove('Error');
  733.       Fileİnput.click();
  734.     });
  735.  
  736.     DropZone.addEventListener("dragover", function (e) {
  737.       e.preventDefault();
  738.     });
  739.  
  740.     DropZone.addEventListener('drop', function (e) {
  741.       e.preventDefault();
  742.       if (e.dataTransfer.files.length) {
  743.         e.target.classList.remove('Error');
  744.  
  745.         const myEvent = new CustomEvent("Filedrop", { detail: e.dataTransfer.files });
  746.         DropZone.dispatchEvent(myEvent);
  747.         updateThumbnail(e.dataTransfer.files[0]);
  748.       } else {
  749.         e.target.classList.add('Error');
  750.       }
  751.     });
  752.  
  753.     function updateThumbnail(file) {
  754.  
  755.       if (Thumb) {
  756.         Thumb.dataset.label = file.name;
  757.         if (file.type.startsWith("image/")) {
  758.           var reader = new FileReader();
  759.  
  760.           reader.onload = function (e) {
  761.             Thumb.style.backgroundImage = `url('${e.target.result}')`;
  762.             Thumb.style.display = null;
  763.             Title.style.display = "none";
  764.           }
  765.  
  766.           reader.readAsDataURL(file);
  767.         } else {
  768.           Thumb.style.backgroundImage = null;
  769.           Title.style.display = null;
  770.         }
  771.       }
  772.     }
  773.  
  774.  
  775.     const self =
  776.     {
  777.       element: DropZone,
  778.       html: () => self.element,
  779.       on: (event, callback) => {
  780.         self.element.addEventListener(event, callback);
  781.       }
  782.     }
  783.     return self;
  784.   }
  785.  
  786.   addSelectMenu(options) {
  787.     var Group = document.createElement("div");
  788.     Group.setAttribute("class", "list-group FileDrop");
  789.     this.menuItemsContainer.append(Group);
  790.     var Text = document.createElement("div");
  791.     Text.setAttribute("class", "label");
  792.     Text.innerText = options.label;
  793.     Group.append(Text);
  794.     const optionsMenu = document.createElement("div");
  795.     optionsMenu.setAttribute("class", "options-menu");
  796.     Group.appendChild(optionsMenu);
  797.     const select = document.createElement("select");
  798.     select.setAttribute("class", "select-style");
  799.     if (options.value) select.value = options.value;
  800.     optionsMenu.appendChild(select);
  801.     if (options.options && options.options.length > 0) {
  802.       for (let i = 0; i < options.options.length; i++) {
  803.         const option = document.createElement("option");
  804.         option.setAttribute("value", options.options[i].value);
  805.         option.textContent = options.options[i].name;
  806.         select.appendChild(option);
  807.       }
  808.     }
  809.     this.menuItems.push(Group);
  810.  
  811.     const self =
  812.     {
  813.       element: select,
  814.       html: () => self.element,
  815.       changeSelectedIndex: (Index) => {
  816.         self.element.selectedIndex = Index;
  817.       },
  818.       addItem: (name, value) => {
  819.         const option = document.createElement("option");
  820.         option.setAttribute("value", value);
  821.         option.textContent = name;
  822.         select.appendChild(option);
  823.       },
  824.       removeItem: (value) => {
  825.         const options = select.querySelectorAll('option');
  826.         options.forEach((option) => {
  827.           if (option.value === value) {
  828.             option.remove();
  829.           }
  830.         });
  831.       },
  832.       clearAllItems: () => {
  833.         const options = select.querySelectorAll('option');
  834.         for (let i = 0; i < options.length; i++) {
  835.           const option = options[i];
  836.           option.remove();
  837.         }
  838.       },
  839.       getValue: () => self.element.value,
  840.       on: (event, callback) => {
  841.         self.element.addEventListener(event, callback);
  842.       }
  843.     }
  844.     return self;
  845.   }
  846.  
  847.   addHotkey(options) {
  848.     if (options.keyevent instanceof KeyboardEvent) {
  849.       var Group = document.createElement("div");
  850.       Group.setAttribute("class", "list-group Buton");
  851.       this.menuItemsContainer.append(Group);
  852.       var Text = document.createElement("div");
  853.       Text.setAttribute("class", "label");
  854.       if (options.label) Text.innerText = options.label;
  855.       Group.append(Text);
  856.       var Button = document.createElement("button");
  857.       Button.setAttribute("class", "button");
  858.       if (options.keyevent.ctrlKey) {
  859.         Button.innerText = `CTRL + ${options.keyevent.key.toUpperCase()}`;
  860.       } else if (options.keyevent.altKey) {
  861.         Button.innerText = `ALT + ${options.keyevent.key.toUpperCase()}`;
  862.       } else if (options.keyevent.shiftKey) {
  863.         Button.innerText = `SHIFT + ${options.keyevent.key.toUpperCase()}`;
  864.       } else {
  865.         Button.innerText = `${options.keyevent.key.toUpperCase()}`;
  866.       }
  867.       Group.append(Button);
  868.       this.menuItems.push(Group);
  869.  
  870.       Button.addEventListener("click", () => {
  871.         Button.innerText = `...`;
  872.         document.addEventListener("keyup", handleKeyDown);
  873.       });
  874.  
  875.       function handleKeyDown(event) {
  876.         event.preventDefault();
  877.  
  878.         // Kontrol tuşlarına basılıysa, basılan tuşa göre değil de
  879.         // kontrol tuşu kombinasyonuna göre hareket et.
  880.         if (event.ctrlKey) {
  881.           Button.innerText = `CTRL + ${event.key.toUpperCase()}`;
  882.         } else if (event.altKey) {
  883.           Button.innerText = `ALT + ${event.key.toUpperCase()}`;
  884.         } else if (event.shiftKey) {
  885.           Button.innerText = `SHIFT + ${event.key.toUpperCase()}`;
  886.         } else {
  887.           Button.innerText = `${event.key.toUpperCase()}`;
  888.         }
  889.  
  890.         const myEvent = new CustomEvent("Hotkey", { detail: event });
  891.         Button.dispatchEvent(myEvent);
  892.         document.removeEventListener("keyup", handleKeyDown);
  893.       }
  894.  
  895.       const self = {
  896.         element: Button,
  897.         html: () => self.element,
  898.         on: (event, callback) => {
  899.           self.element.addEventListener(event, callback);
  900.         },
  901.       };
  902.       return self;
  903.  
  904.     } else {
  905.       console.error("this is not a KeyboardEvent");
  906.     }
  907.   }
  908.  
  909.   addInput(options) {
  910.     var Group = document.createElement("div");
  911.     Group.setAttribute("class", "list-group Input");
  912.     this.menuItemsContainer.append(Group);
  913.     var Text = document.createElement("div");
  914.     Text.setAttribute("class", "label");
  915.     if (options.label) Text.innerText = options.label;
  916.     Group.append(Text);
  917.     var Input = document.createElement("input");
  918.     Input.setAttribute("class", "input");
  919.     if (options.placeholder) Input.setAttribute("placeholder", options.placeholder);
  920.     Input.setAttribute("type", options.type === "number" ? "number" : "text");
  921.     if (options.value) Input.value = options.value;
  922.     if (options.min) Input.setAttribute("min", options.min);
  923.     if (options.max) Input.setAttribute("max", options.max);
  924.     Group.append(Input);
  925.     Input.addEventListener("input", function() {
  926.       if (Input.validity.rangeOverflow) {
  927.         Input.value = Input.max;
  928.       } else if (Input.validity.rangeUnderflow) {
  929.         Input.value = Input.min;
  930.       }
  931.     });
  932.     this.menuItems.push(Group);
  933.  
  934.     const self = {
  935.       element: Input,
  936.       html: () => self.element,
  937.       on: (event, callback) => {
  938.         self.element.addEventListener(event, callback);
  939.       },
  940.       changeValue: (text) => {
  941.         self.element.value = text;
  942.       },
  943.       getValue: () => self.element.value,
  944.     };
  945.     return self;
  946.   }
  947. }
  948.  
  949. MenuShowHide = function () {
  950.   if (document.querySelector('.menus').className.split(' ').indexOf('open') != -1) {
  951.     document.querySelector('.menus').classList.add('close');
  952.     document.querySelector('.menus').classList.remove('open');
  953.   } else {
  954.     document.querySelector('.menus').classList.add('open');
  955.     document.querySelector('.menus').classList.remove('close');
  956.     document.querySelector('.menus').removeAttribute("style");
  957.   }
  958. }
  959.  
  960. close_button.addEventListener('click', function () {
  961.   MenuShowHide();
  962. });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址