☰

Abnormal Menu

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

目前为 2023-03-17 提交的版本。查看 最新版本。

此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.gf.qytechs.cn/scripts/462013/1162637/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,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFxElEQVR4nO2dW4xdUxjHf1NqXEIUTTXu4hbzIBWNSyTSUqaYtjPHtaUeqFspElJCCdGm4UUjIkPwIBIZJKRF8ICJhAeCEE3EQ0XbcVzbinbMjDmymjW153Tvs8++rPv+J+thMmdnXX57Xfa3vvUtqBSnOcAbwBCwDfgQWBT7y0pK1Qk8DzQS0sNqs68U1T7AQAsYxqCcBNwInEZYerINGBPpQV2FOhH4S2Y6DFxBGJoH/JsBiEgP6CjYsqZMR4AafusIYGtGGBNpperCdQH/BASlA3grJ4yJdJ/qQtYkhGimY8A1+KfbC8LQNnyFAOV04O+SgIh0v+oC+wylE/iqRBja5pQ4KOLvXtzWUwpgiDQOrFBdeN+gXCIbrqEQyp2moLhm35ku7VOqYESh3KG6Mq5D6QDWa4ARhbJcdaVchnKXRhhRKGJprVQuQukCdhoAMgHlNhNQxBf+QuzT/sDXhmBEodyquqKuQHnGMIwolFtChzJf8RI3axIW5RtMQVmAWc0AfrYAQhyUpaFB6QDetqDxk5IwQV0fEpR7LWj0dqBcFwKUWTF7OrYm76EcCGy0oKGzQlliCkqP4nyfs6CB80JZrLhtdjtIjDZlPCyXou0YAS+Q6/ZVwBNAv0zCO+QR4B6gGzhaPtNnQcMWScPSoqAdyi7ZkFEdKdfnL+d0OPgj4i3jchL1xxSUhXL38R3ZZRtV2r01gCkoVWKvNtihC0gFhbZewA/QrLjVV5XY0wZX6gZSQSHxBfxIOnwr07HAIHBmzP+qOYVJML6VxlCl5ostMrPfKyi0GpbFKvNw1aePdjRlWkFhLxDiu+lmaZlWqh8T3oQKCnvaYlAe/dCiTS26Z+hQdsmtgSlo1IUy4woKk9rgCx22qiRdnALlT2B2IN8po8BaYD8Mq4ICPwDnY5FChTIutwoOwkKFBmUTMBcHjgCEAGUAmIYj8hlK3XLf5qCgvCaPVjsrX6Bsk6YPL+Q6lPcjzhXeqNtBKDvlwR/lBkFTcgnKp8ApBKDLpE9Sw2KD5Meqd/Nsk+095XsC1OUW95Rxlz74QukpswlU3ZZCCSWYW6x6Us54mBi+7iYQHZ8Q37HHMigPEYAOkFubQw5AWUMAeqHJYtoV85v5KasvXXPK43iu5TGVrlsMRVtoWBM6t8VQNJQwfC0wPHwpD0xmSsKHdXNK5esW9hRXA7a11L7Sy7udBqhbBkX4K3undRkboW4JlDFbPUiKaHHON7OeAOVSjVDEcQGvdEbBGLlDCRP9Ik0T/Yt4pGnSgy8vjIYFPeVqPNGUkqPyDMnrNOJ6yoiinjLqk+n9sRJhNOTBemFuQWNPES+UF+rJcSdHo8VburKE7eA8UK7CA50sK18GjK3AeRny7i15+FIeqUe1xHr9m5JgfALMzFGGMnuKlkg9KvVqSTD6Cx5yqaCUFFpvGLippJejL2X48rqnzCnBqvoTcHbJ5QoSyjHyw62oM9oMReULCspUOfkWnS+mKi5nMFD6C4AQ9q1rNZa1lgLl0YTn4pbEoza6Bi0tAENEfDjLQJn7EqAMpBzot76nzCpwBcS7wGEGy15ratxBeYtC1uesgTK9RUyTNB/ZNZZ4ks+VEdyeBQ7N8Jx1w5dozPdyRr+xbszNKat6SpZblaPu/MbifPgMpTfHfRwbMg4JLskolFOB7Rnni7W6QxGFAuVg4LsMMLa7epDeBSjixOnrGWBsTHBI8F01XVBWZYDxJnAI4aqmGspFbcZlH5NbrN6e37YBynHAr23A+A2YVzQzz1QrG4owI3zeBowvgRPKrYs3KhXKS23AeEVeMVRJMZQVJbnkVCoBSquDNCL94kL4Ol+gzEy5bugz4Ch9dfBOcVZiAemcPNuw4vazTv11CALK6rgfPt3CJWeZ/nJ7D2UkYu8TUVsnaUkCjM0KXHIq/T9Xr46DgfSF0umSUylFzf5U6zS45FRK2XTaInuK857eOK7/ABHmo+pOOmdHAAAAAElFTkSuQmCC');
  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. document.getElementsByTagName('head')[0].appendChild(style);
  487.  
  488. var CreateToasts = document.createElement("div");
  489. var CreateMenus = document.createElement("div");
  490. var close_button = document.createElement("button");
  491. window.addEventListener('load', (event) => {
  492.   CreateToasts.setAttribute("id", "toasts");
  493.   document.body.prepend(CreateToasts);
  494.   CreateMenus.setAttribute("class", "menus open");
  495.   document.body.prepend(CreateMenus);
  496.   var blur_bg = document.createElement("div");
  497.   blur_bg.setAttribute("class", "bg-blur");
  498.   CreateMenus.prepend(blur_bg);
  499.   close_button.setAttribute("class", "close-button");
  500.   close_button.setAttribute("title", "Close");
  501.   CreateMenus.prepend(close_button);
  502.   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)');
  503. });
  504.  
  505. class SendToast {
  506.   constructor(options) {
  507.     var toast = document.createElement("div");
  508.     toast.setAttribute("id", "toast");
  509.     toast.classList.add('show');
  510.     CreateToasts.prepend(toast);
  511.     var ToastGroup = document.createElement("div");
  512.     ToastGroup.setAttribute("class", "toast group");
  513.     toast.prepend(ToastGroup);
  514.     if (!options) console.error("Data is empty");
  515.     if (options.message) var CreateMsgToast = document.createElement("span");
  516.     if (options.message) CreateMsgToast.setAttribute("class", "toast-msg");
  517.     if (options.message) ToastGroup.prepend(CreateMsgToast);
  518.     if (options.title) var CreateTitleToast = document.createElement("span");
  519.     if (options.title) CreateTitleToast.setAttribute("class", "toast-title");
  520.     if (options.title) ToastGroup.prepend(CreateTitleToast);
  521.     if (options.icon) var CreateimageToast = document.createElement("img");
  522.     if (options.icon) CreateimageToast.setAttribute("class", "toast-img");
  523.     if (options.icon) CreateimageToast.setAttribute("src", options.icon);
  524.     if (options.icon) ToastGroup.prepend(CreateimageToast);
  525.     if (options.type) var CreateColorToast = document.createElement("span");
  526.     if (options.type) CreateColorToast.setAttribute("class", "toast-color");
  527.     if (options.type) ToastGroup.prepend(CreateColorToast);
  528.     if (options.title) CreateTitleToast.innerText = options.title;
  529.     if (options.message) CreateMsgToast.innerText = options.message;
  530.     switch (options.type) {
  531.       case "Success":
  532.         ToastGroup.querySelector('.toast-color').setAttribute("class", "toast-color green");
  533.         break;
  534.  
  535.       case "Error":
  536.         ToastGroup.querySelector('.toast-color').setAttribute("class", "toast-color red");
  537.         break;
  538.  
  539.       case "Warning":
  540.         ToastGroup.querySelector('.toast-color').setAttribute("class", "toast-color yellow");
  541.         break;
  542.  
  543.       case "Info":
  544.         ToastGroup.querySelector('.toast-color').setAttribute("class", "toast-color blue");
  545.         break;
  546.     }
  547.  
  548.     setTimeout(function () { toast.remove(); }, 2900);
  549.     return toast;
  550.   }
  551. }
  552.  
  553. class CreateMenu {
  554.   constructor(options) {
  555.     this.title = options.title;
  556.     this.menuItems = [];
  557.     this.menuItemsContainer = null;
  558.  
  559.     const Menu = document.createElement("div");
  560.     Menu.setAttribute("class", "menu");
  561.     Menu.style.width = `${options.width}px`;
  562.     Menu.style.height = `${options.height}px`;
  563.     Menu.style.left = `${options.startX}px`;
  564.     Menu.style.top = `${options.startY}px`;
  565.     CreateMenus.prepend(Menu);
  566.     const gradient_slider = document.createElement("div");
  567.     gradient_slider.setAttribute("class", "gradient-slider");
  568.     Menu.prepend(gradient_slider);
  569.     const menu_items = document.createElement("div");
  570.     menu_items.setAttribute("class", "menu-items");
  571.     menu_items.style.width = `${options.width}px`;
  572.     menu_items.style.height = `${options.height - 40}px`
  573.     Menu.append(menu_items);
  574.     this.menuItemsContainer = menu_items;
  575.     if (options.title) var menu_title = document.createElement("div");
  576.     if (options.title) menu_title.setAttribute("class", "title");
  577.     if (options.title) menu_title.textContent = options.title;
  578.     if (options.title) gradient_slider.prepend(menu_title);
  579.     if (options.pin == true) var pin_button = document.createElement("button");
  580.     if (options.pin == true) pin_button.setAttribute("class", "pin-button");
  581.     if (options.pin == true) gradient_slider.prepend(pin_button);
  582.     if (options.pin == true) pin_button.addEventListener("click", (e) => { if (Menu.classList.contains('pinned')) { Menu.classList.remove('pinned'); } else { Menu.classList.add('pinned'); } });
  583.  
  584.     let scaleFactor = 1.4;
  585.     window.addEventListener('resize', () => {
  586.       let width = window.innerWidth - (window.innerWidth < 1920 ? 180 : 320);
  587.       let e = width / 1150;
  588.       let scale = e < scaleFactor ? e / scaleFactor : 1;
  589.       Menu.style.transform = `scale(${scale})`;
  590.       Menu.style.transformOrigin = 'center';
  591.     });
  592.  
  593.  
  594.  
  595.     gradient_slider.addEventListener("mousedown", (e) => {
  596.       let initialX = e.clientX;
  597.       let initialY = e.clientY;
  598.  
  599.       function moveMenu(e) {
  600.         let currentX = e.clientX;
  601.         let currentY = e.clientY;
  602.         let diffX = currentX - initialX;
  603.         let diffY = currentY - initialY;
  604.         Menu.style.left = `${Menu.offsetLeft + diffX}px`;
  605.         Menu.style.top = `${Menu.offsetTop + diffY}px`;
  606.         initialX = currentX;
  607.         initialY = currentY;
  608.       }
  609.  
  610.       function removeListeners() {
  611.         document.removeEventListener("mousemove", moveMenu);
  612.         document.removeEventListener("mouseup", removeListeners);
  613.       }
  614.  
  615.       document.addEventListener("mousemove", moveMenu);
  616.       document.addEventListener("mouseup", removeListeners);
  617.     });
  618.  
  619.  
  620.   }
  621.  
  622.   addButton(options) {
  623.     var Group = document.createElement("div");
  624.     Group.setAttribute("class", "list-group Buton");
  625.     this.menuItemsContainer.append(Group);
  626.     var Text = document.createElement("div");
  627.     Text.setAttribute("class", "label");
  628.     if (options.label) Text.innerText = options.label;
  629.     Group.append(Text);
  630.     var Button = document.createElement("button");
  631.     Button.setAttribute("class", "button");
  632.     Button.innerText = options.title;
  633.     Group.append(Button);
  634.     this.menuItems.push(Group);
  635.  
  636.  
  637.     const self = {
  638.       element: Button,
  639.       html: () => self.element,
  640.       on: (event, callback) => {
  641.         self.element.addEventListener(event, callback);
  642.       }
  643.     };
  644.     return self;
  645.   }
  646.  
  647.   addSwitch(options) {
  648.     var ToggleSwitch = document.createElement("div");
  649.     ToggleSwitch.setAttribute("class", "list-group toggle-switch");
  650.     this.menuItemsContainer.append(ToggleSwitch);
  651.     var Text = document.createElement("div");
  652.     Text.setAttribute("class", "label");
  653.     Text.innerText = options.label;
  654.     ToggleSwitch.append(Text);
  655.     var Label = document.createElement("label");
  656.     Label.setAttribute("class", "switch");
  657.     ToggleSwitch.append(Label);
  658.     var checkbox = document.createElement("input");
  659.     checkbox.setAttribute("type", "checkbox");
  660.     //checkbox.checked = value; // set initial value
  661.     Label.append(checkbox);
  662.     var slider = document.createElement("span");
  663.     slider.setAttribute("class", "slider");
  664.     Label.append(slider);
  665.     this.menuItems.push(ToggleSwitch);
  666.  
  667.     const self = {
  668.       element: ToggleSwitch,
  669.       html: () => self.element,
  670.       on: (event, callback) => {
  671.         self.element.addEventListener(event, callback);
  672.       },
  673.       getValue: () => checkbox.checked
  674.     };
  675.     return self;
  676.   }
  677.  
  678.   addFileDrop(options) {
  679.     var Group = document.createElement("div");
  680.     Group.setAttribute("class", "list-group FileDrop");
  681.     this.menuItemsContainer.append(Group);
  682.     var Text = document.createElement("div");
  683.     Text.setAttribute("class", "label");
  684.     Text.innerText = options.label;
  685.     Group.append(Text);
  686.     var DropZone = document.createElement("div");
  687.     DropZone.setAttribute("class", "DropZone");
  688.     Group.append(DropZone);
  689.     var Title = document.createElement("div");
  690.     Title.innerText = options.title;
  691.     DropZone.append(Title);
  692.     var Thumb = document.createElement("div");
  693.     Thumb.setAttribute("class", "DropThumb");
  694.     Thumb.setAttribute("style", "display: none;");
  695.     DropZone.append(Thumb);
  696.     var Fileİnput = document.createElement("input");
  697.     Fileİnput.setAttribute("class", "Fileİnput");
  698.     Fileİnput.setAttribute("type", "file");
  699.     Fileİnput.setAttribute("accept", "image/*");
  700.     DropZone.append(Fileİnput);
  701.     this.menuItems.push(Group);
  702.  
  703.  
  704.     Fileİnput.addEventListener('change', function (e) {
  705.       if (!e.target.files.length) e.target.parentElement.classList.add('Error');
  706.       if (e.target.files.length) updateThumbnail(e.target.files[0]);
  707.       const myEvent = new CustomEvent("Filedrop", { detail: e.target.files });
  708.       DropZone.dispatchEvent(myEvent);
  709.     });
  710.  
  711.     DropZone.addEventListener('click', function (e) {
  712.       e.target.classList.remove('Error');
  713.       Fileİnput.click();
  714.     });
  715.  
  716.     DropZone.addEventListener("dragover", function (e) {
  717.       e.preventDefault();
  718.     });
  719.  
  720.     DropZone.addEventListener('drop', function (e) {
  721.       e.preventDefault();
  722.       if (e.dataTransfer.files.length) {
  723.         e.target.classList.remove('Error');
  724.  
  725.         const myEvent = new CustomEvent("Filedrop", { detail: e.dataTransfer.files });
  726.         DropZone.dispatchEvent(myEvent);
  727.         updateThumbnail(e.dataTransfer.files[0]);
  728.       } else {
  729.         e.target.classList.add('Error');
  730.       }
  731.     });
  732.  
  733.     function updateThumbnail(file) {
  734.  
  735.       if (Thumb) {
  736.         Thumb.dataset.label = file.name;
  737.         if (file.type.startsWith("image/")) {
  738.           var reader = new FileReader();
  739.  
  740.           reader.onload = function (e) {
  741.             Thumb.style.backgroundImage = `url('${e.target.result}')`;
  742.             Thumb.style.display = null;
  743.             Title.style.display = "none";
  744.           }
  745.  
  746.           reader.readAsDataURL(file);
  747.         } else {
  748.           Thumb.style.backgroundImage = null;
  749.           Title.style.display = null;
  750.         }
  751.       }
  752.     }
  753.  
  754.  
  755.     const self =
  756.     {
  757.       element: DropZone,
  758.       html: () => self.element,
  759.       on: (event, callback) => {
  760.         self.element.addEventListener(event, callback);
  761.       }
  762.     }
  763.     return self;
  764.   }
  765.  
  766.   addSelectMenu(options) {
  767.     var Group = document.createElement("div");
  768.     Group.setAttribute("class", "list-group FileDrop");
  769.     this.menuItemsContainer.append(Group);
  770.     var Text = document.createElement("div");
  771.     Text.setAttribute("class", "label");
  772.     Text.innerText = options.label;
  773.     Group.append(Text);
  774.     const optionsMenu = document.createElement("div");
  775.     optionsMenu.setAttribute("class", "options-menu");
  776.     Group.appendChild(optionsMenu);
  777.     const select = document.createElement("select");
  778.     select.setAttribute("class", "select-style");
  779.     optionsMenu.appendChild(select);
  780.     if (options.options && options.options.length > 0) {
  781.       for (let i = 0; i < options.options.length; i++) {
  782.         const option = document.createElement("option");
  783.         option.setAttribute("value", options.options[i].value);
  784.         option.textContent = options.options[i].name;
  785.         select.appendChild(option);
  786.       }
  787.     }
  788.     this.menuItems.push(Group);
  789.  
  790.     const self =
  791.     {
  792.       element: select,
  793.       html: () => self.element,
  794.       changeSelectedIndex: (Index) => {
  795.         self.element.selectedIndex = Index;
  796.       },
  797.       addItem: (name, value) => {
  798.         const option = document.createElement("option");
  799.         option.setAttribute("value", value);
  800.         option.textContent = name;
  801.         select.appendChild(option);
  802.       },
  803.       on: (event, callback) => {
  804.         self.element.addEventListener(event, callback);
  805.       }
  806.     }
  807.     return self;
  808.   }
  809.  
  810.   addHotkey(options) {
  811.     if (options.keyevent instanceof KeyboardEvent) {
  812.       var Group = document.createElement("div");
  813.       Group.setAttribute("class", "list-group Buton");
  814.       this.menuItemsContainer.append(Group);
  815.       var Text = document.createElement("div");
  816.       Text.setAttribute("class", "label");
  817.       if (options.label) Text.innerText = options.label;
  818.       Group.append(Text);
  819.       var Button = document.createElement("button");
  820.       Button.setAttribute("class", "button");
  821.       if (options.keyevent.ctrlKey) {
  822.         Button.innerText = `CTRL + ${options.keyevent.key.toUpperCase()}`;
  823.       } else if (options.keyevent.altKey) {
  824.         Button.innerText = `ALT + ${options.keyevent.key.toUpperCase()}`;
  825.       } else if (options.keyevent.shiftKey) {
  826.         Button.innerText = `SHIFT + ${options.keyevent.key.toUpperCase()}`;
  827.       } else {
  828.         Button.innerText = `${options.keyevent.key.toUpperCase()}`;
  829.       }
  830.       Group.append(Button);
  831.       this.menuItems.push(Group);
  832.  
  833.       Button.addEventListener("click", () => {
  834.         Button.innerText = `...`;
  835.         document.addEventListener("keyup", handleKeyDown);
  836.       });
  837.  
  838.       function handleKeyDown(event) {
  839.         event.preventDefault();
  840.  
  841.         // Kontrol tuşlarına basılıysa, basılan tuşa göre değil de
  842.         // kontrol tuşu kombinasyonuna göre hareket et.
  843.         if (event.ctrlKey) {
  844.           Button.innerText = `CTRL + ${event.key.toUpperCase()}`;
  845.         } else if (event.altKey) {
  846.           Button.innerText = `ALT + ${event.key.toUpperCase()}`;
  847.         } else if (event.shiftKey) {
  848.           Button.innerText = `SHIFT + ${event.key.toUpperCase()}`;
  849.         } else {
  850.           Button.innerText = `${event.key.toUpperCase()}`;
  851.         }
  852.  
  853.         const myEvent = new CustomEvent("Hotkey", { detail: event });
  854.         Button.dispatchEvent(myEvent);
  855.         document.removeEventListener("keyup", handleKeyDown);
  856.       }
  857.  
  858.       const self = {
  859.         element: Button,
  860.         html: () => self.element,
  861.         on: (event, callback) => {
  862.           self.element.addEventListener(event, callback);
  863.         },
  864.       };
  865.       return self;
  866.  
  867.     }else{
  868.       console.error("this is not a KeyboardEvent");
  869.     }
  870.   }
  871.  
  872. }
  873.  
  874. MenuShowHide = function () {
  875.   if (document.querySelector('.menus').className.split(' ').indexOf('open') != -1) {
  876.     document.querySelector('.menus').classList.add('close');
  877.     document.querySelector('.menus').classList.remove('open');
  878.   } else {
  879.     document.querySelector('.menus').classList.add('open');
  880.     document.querySelector('.menus').classList.remove('close');
  881.     document.querySelector('.menus').removeAttribute("style");
  882.   }
  883. }
  884.  
  885. close_button.addEventListener('click', function () {
  886.   MenuShowHide();
  887. });

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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