Hex Math Panel

Calculator for math websites add ur own if urs isnt here.

  1. // ==UserScript==
  2. // @name Hex Math Panel
  3. // @namespace http://tampermonkey.net/
  4. // @version 1.0.0.
  5. // @license MIT
  6. // @description Calculator for math websites add ur own if urs isnt here.
  7. // @icon data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJUAAACUCAMAAACtIJvYAAAAZlBMVEX29vYAAAD39/cGBgb6+vr///+ZmZnz8/Pq6uru7u7c3NzBwcFKSkpqamrNzc2srKw3Nzfk5OSEhIR5eXnV1dUvLy+0tLQiIiJAQEBjY2O7u7sUFBSSkpJWVlaLi4tPT0+hoaEbGxsZRrT+AAAJlklEQVR4nO2c6XarOAyAwTFhyUIJ2fe8/0sOBMs7IBnamR/jc27TEpA/ZFu2ZPlGLPrvFRZNp2Kc80QWztlkkVOpGqIo26/e9eWxbspj8zxui3wq2SSqBiktyvoVm+Vwea6yBuzfoeJR8d7cYm/52V3zcK5wKp7sn2c/0rfcLmWaBAoPpWKsqD8DTN9yLgP1FUjFs/dhjKktl2szGv6IivH92qp+0ZTuh3V9mQVghVDxfHmygBbmXzrbektvxQAqntWWjpxiXD2UZONFp+LFS6++p0MZsMuU2IpkKh2qD8nhuhO1RaRq+vlBVTsEZXLVKa0aGhWvXqrOESjjnmWrLXRVNCpePQhMJhZlJJKoWFQ7tY1yic/bitDjSVT8TYZSWOcCj0Whkj2dAqWwanwbEqhY/giBUljlL1AxVlq1ULHwbUigKtaBUFK5uwRZG54qeZpVBCgrrpDKQlOx3KohRFnPuXUFViEESmL97HHKQlIxVtmeDBGr+7jjrANWV7y8TVCVVNY5n5OK8dp451CqeItqQixV9TGEB2B1H7s5qfh2mqrkow/UQgtLtZuJ6oNqQhwViy5ToeDZ44xUxc90qu7h3XwtyLfT7IL28ANTIZLqqAueRPWDsVhIqknTjUF1wixnkP2qG4Lh1kpRLTCDEElVT1cVvBPGq0BRzWEYJNX1f6q/p4rY5j9JNUtv737O1tsjftcFT6L6YBbJSKpyNqpDNp9tXy3molrPOA+KCMMMa4bNfGsGlj6mU3Uf7/nWV/OtRXFhrL9et68xnR3t42Rd3H+yj1PP6eNMb0LxIC4OiaZanSZRQaBhVt+5acLLJGVBUGbW6EejrKvx0oGqmjcm00YaIFQbDhXvZo/1gZ8TgvVrsT7VswKitWAWEmxd+Mg233/MSqhQL6yqaLsA9zBl/Wa8vQ3YbkKwfndvom3Dk1UTAeq39nFaoyWxsFxw3wkXewyhYtFS1obcIIRfUOuqMKrGli7dCgeY4J7Fm/j2xH3qdIfG0vadsZsSgVQN1l2rFqWoBoq2GR6Qz9A04sJXcz9TTGu+IKqIsePJX7u38eJTSX9zOlWjre3DADDJrL/Pf5Mn02LpqTK6bhzEuC4CUrBCWrD5x/nK2QPzJfKsy+TP8q/a53h1txHcsiPMMnNQNVhJ9RzMVzs0jRcGFU4Vtc24f/70M+1ZINPULFae5Nf67NqGc32dlDA6Pbc2L65PI8tvfT8W6ZQc1iDbbv3JWKOVtFqV7+XyfdxW7d82EzWFjjw789R3tSXhbWY0Zx4ClhKbk7i+Ytm7HoyqeL/jq82W1KakdTvP3mfvbuhXVVAcgd/Vz2ZF4CL4gzwvv7166VCxrFzKsnVWLaxqn7tt9uhUSHycIbkKL9XZ0Ga5PivenDA/X3V7nqddhVQXOp+hqGUunD2N8K1h4x0PS/qR8fmNa8Zxqu9knL+1JZXdhBDbEuVhVcxybQK4bDFWAqOrRlEb3X5vrCbkRyP1/seql2/1hw9vRO9CUPG0NHThbHrAzgW0sAHNtAYUutyPtuI4Fc+fsVXeZmxF88a+xRTJ8ov1+Pk6hjVKxbdqkoNV3cWUalOZsU8ZFNfacZcPt+IIFUtWqqsuQPLBHIXcUqZp/JOlfFrdUg/n4g9TsVRTw0K9sJFWwvgmNorR7Vj0sp9uy3CEdJDK9UghaKd3aMY1j6ctRkyd7/W0EcV1Xg0cQBmi4qlSwsL47KI+DKisBWlp6Ko0cBTWbdXf5weoNPdKyRK/6LMKiz4m1VIbohCJcyQ0E9CxV1v9VFyNaP2wRvex0StOTag2WVVJcXcW1a/HPm31UvG0dsWoP7TXlJmkUPRQsW9vWL7kqc9w9VGxHijPLhHLLCpdkcnDI0RifXo2m3qoNJNgeTAyuUs+x/cW1UWNUGhdv5DGQPjjkj1UkB7qCZ11F16VolpZd7yUGZW7P7YQuLD2mlM/larI9fVEGpXSvTU5N3ZDEkM/cAMQ8srFtzfnpeIFHMHzBKecPTV5bgHKT8EsQT4xcM0XnPRRqVneFzET4tbyHe3JuaECYlh5DchpjG7iOpnuBTmf+sOxIE1OZI6uzkpXQ/vCcPHgbu94dCU7VU/QU1yWTej0qzX0K5YdBgWJz4vjYbpUPBs5tCGuS1fHGYMPaFywGX0hXbju7BC4LQha7w+ni1EIpoZX1vcbbooaCDR3Hzd7WeNQQcLqQIzfyi3pnQdZvh6TBNOqZR5sKjbWfuqrl2hCxqyjvLAmBO90YK8AaimTQaqkNG/3y/r+/IAB4Dvza+jsmFwy8Z2V52BRseo0Lklvwq8Paw5C8AdZesa+YBzfDQ5bV7D0x+zQQG/ge2MxKkwGA+90eBMKlGUt9nUqvj+brzAoCmYWlunuxAfWqcLmj20kiq/1paJFhT2fBH0U6tebEFYTMG5GZYnvK95DhT6fJCTVETSh9h3sumGz7mReSB8Vlw4lTtJCTBWMa7YBljgMm33u6Vk6VReTwwiy18mJWjacwIqlF/0FEMLufipeYgaNfgvMLVoTgisB8xBGmBg8apLWqCAHGpWsIARZPTtW6iMkvi4szRtUvuDJCNUCrAAD1x9WMdLNRwkT9k96IbquKMnG4OrAgBNvFO/gFQtK3qsI9cj+rqhYhpggbEFrYWVYJgYKBA8IfVTdtXSpiLnGVl8QM/QBGjAl5Z6L214yoKJ0Rcu9tNbJYtUCppATDzuJ+2AhKalY+qPXhqX6AfNUte2/kEsr4rEiqwklFTmnV7S3eD0Wtao+Qzfjfd5pn7DuRnBZJVVCTfe3LPLXd4ccR5kgjBVmjUKgcqNfSEGPTAM56ogBVLejqStq91SCoIcmm/gE61ziyFF37sx+xVefMKr4DhPfUQauYJqnCDM6luxX9FMklrfaWHO5Cg04ZiE033kogopo9XQqcDFZvoMZIwlIOzcsFlCBzgOw3mCHM/FJnLsMqi7+LKh4YXxHkiQdXzl3BR1nEB3LoJog6ORsfnR9lJgY3N19/s7uQBV0OEncbR0WhqBcEFV3tElQJcQZwqBaW9uFKO+0R1iXlwBUL+0bMpYZJEjCjtaK7aurooINokAqYzspSnD+t5+qkyWo8rBzXOCt6htzYcNZyrqrfsWLwHMtYuDoe6vBZ6M1T0BQbT9TJN20USgXH1RRotS5ourWt3RJ4gntnBSEjUJlXTSqa+irdeWkRqETfSeW73pNUB3Hbx8scutK/gchoeU1I5XcqHQ2C/9NKrn5Bmvj4LKekUoeobRzG8hlTl3FT90tnE71D30wc460bPKAAAAAAElFTkSuQmCC
  8. // @author Hex Developments
  9. // @match https://gmm.getmoremath.com/*
  10. // @match https://khanacademy.org/*
  11. // @match https://ixl.com/math/*
  12. // @match https://desmos.com/*
  13. // @match https://mathway.com/*
  14. // @match https://wolframalpha.com/*
  15. // @match https://mathletics.com/*
  16. // @match https://brilliant.org/*
  17. // @match https://coolmathgames.com/*
  18. // @match https://purplemath.com/*
  19. // @match https://artofproblemsolving.com/*
  20. // @match https://nrich.maths.org/*
  21. // @match https://math.com/*
  22. // @match https://algebrator.com/*
  23. // @match https://mathhelp.com/*
  24. // @match https://xtramath.org/*
  25. // @match https://edmodo.com/*
  26. // @match https://geogebra.org/*
  27. // @match https://cimt.org.uk/*
  28. // @match https://shmoop.com/*
  29. // @match https://socratic.org/*
  30. // @match https://mathsisfun.com/*
  31. // @match https://study.com/*
  32. // @match https://hippocampus.org/*
  33. // @match https://learnzillion.com/*
  34. // @match https://getmoremath.com/*
  35. // @grant GM_addStyle
  36. // @run-at document-end
  37. // ==/UserScript==
  38.  
  39. (function() {
  40. 'use strict';
  41.  
  42. // Create the draggable container
  43. const container = document.createElement('div');
  44. container.id = 'advancedCalculator';
  45. container.innerHTML = `
  46. <div id="header">
  47. <span>Hex Panel</span>
  48. <button id="collapseToggle">-</button>
  49. </div>
  50. <div id="content">
  51. <input type="text" id="display" />
  52. <div id="buttons">
  53. <button data-value="7">7</button>
  54. <button data-value="8">8</button>
  55. <button data-value="9">9</button>
  56. <button data-value="/">/</button>
  57. <button data-value="4">4</button>
  58. <button data-value="5">5</button>
  59. <button data-value="6">6</button>
  60. <button data-value="*">*</button>
  61. <button data-value="1">1</button>
  62. <button data-value="2">2</button>
  63. <button data-value="3">3</button>
  64. <button data-value="-">-</button>
  65. <button data-value="0">0</button>
  66. <button data-value=".">.</button>
  67. <button data-value="/">/</button>
  68. <button data-value="+">+</button>
  69. <button id="fraction">1/x</button>
  70. <button id="calculate">=</button>
  71. <button id="clear">C</button>
  72. </div>
  73. </div>
  74. `;
  75. document.body.appendChild(container);
  76.  
  77. // Add CSS styles
  78. GM_addStyle(`
  79. #advancedCalculator {
  80. position: fixed;
  81. top: 10px;
  82. left: 10px;
  83. width: 260px;
  84. background: #1e1e1e;
  85. border: 1px solid #444;
  86. border-radius: 10px;
  87. box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
  88. z-index: 10000;
  89. font-family: 'Courier New', Courier, monospace;
  90. transition: height 0.3s ease;
  91. }
  92. #header {
  93. background: #00ff00;
  94. color: #000;
  95. padding: 10px;
  96. display: flex;
  97. justify-content: space-between;
  98. align-items: center;
  99. cursor: move;
  100. border-top-left-radius: 10px;
  101. border-top-right-radius: 10px;
  102. font-size: 18px;
  103. font-weight: bold;
  104. }
  105. #header button {
  106. background: #333;
  107. color: #00ff00;
  108. border: none;
  109. padding: 5px 10px;
  110. border-radius: 5px;
  111. cursor: pointer;
  112. }
  113. #header button:hover {
  114. background: #555;
  115. }
  116. #header button:active {
  117. background: #00ff00;
  118. color: #000;
  119. }
  120. #content {
  121. padding: 10px;
  122. overflow: hidden;
  123. }
  124. #display {
  125. width: 100%;
  126. margin-bottom: 10px;
  127. font-size: 22px;
  128. text-align: right;
  129. background: #000;
  130. color: #00f; /* Blue color for text */
  131. border: 1px solid #333;
  132. border-radius: 5px;
  133. padding: 10px;
  134. box-sizing: border-box;
  135. }
  136. #buttons {
  137. display: grid;
  138. grid-template-columns: repeat(4, 1fr);
  139. gap: 5px;
  140. }
  141. #buttons button {
  142. background: #222;
  143. color: #00ff00;
  144. padding: 15px;
  145. font-size: 16px;
  146. border: 1px solid #444;
  147. border-radius: 5px;
  148. cursor: pointer;
  149. transition: background 0.3s ease;
  150. }
  151. #buttons button:hover {
  152. background: #333;
  153. }
  154. #buttons button:active {
  155. background: #00ff00;
  156. color: #000;
  157. }
  158. `);
  159.  
  160. // Make the container draggable
  161. let header = document.getElementById('header');
  162. let isDragging = false;
  163. let offsetX, offsetY;
  164.  
  165. header.onmousedown = function(e) {
  166. isDragging = true;
  167. offsetX = e.clientX - container.getBoundingClientRect().left;
  168. offsetY = e.clientY - container.getBoundingClientRect().top;
  169. };
  170.  
  171. document.onmousemove = function(e) {
  172. if (isDragging) {
  173. container.style.left = (e.clientX - offsetX) + 'px';
  174. container.style.top = (e.clientY - offsetY) + 'px';
  175. }
  176. };
  177.  
  178. document.onmouseup = function() {
  179. isDragging = false;
  180. };
  181.  
  182. // Event listeners for buttons
  183. document.querySelectorAll('#buttons button').forEach(button => {
  184. button.addEventListener('click', function() {
  185. const value = this.getAttribute('data-value');
  186. if (value) {
  187. appendNumber(value);
  188. }
  189. });
  190. });
  191.  
  192. // Specific button event listeners
  193. document.getElementById('fraction').addEventListener('click', appendFraction);
  194. document.getElementById('calculate').addEventListener('click', calculate);
  195. document.getElementById('clear').addEventListener('click', clearDisplay);
  196. document.getElementById('collapseToggle').addEventListener('click', toggleCollapse);
  197.  
  198. // Calculator functions
  199. function appendNumber(num) {
  200. let display = document.getElementById('display');
  201. display.value += num;
  202. }
  203.  
  204. function appendOperator(op) {
  205. let display = document.getElementById('display');
  206. display.value += ' ' + op + ' ';
  207. }
  208.  
  209. function appendFraction() {
  210. let display = document.getElementById('display');
  211. let value = display.value.trim();
  212. if (value) {
  213. display.value = '1 / (' + value + ')';
  214. }
  215. }
  216.  
  217. function calculate() {
  218. let display = document.getElementById('display');
  219. let expression = display.value;
  220.  
  221. // Replace 'x' with '*' for multiplication
  222. expression = expression.replace(/x/g, '*');
  223.  
  224. try {
  225. // Evaluate the expression safely
  226. let result = Function('"use strict";return (' + expression + ')')();
  227. display.value = result;
  228. } catch (e) {
  229. display.value = 'Error';
  230. setTimeout(() => {
  231. display.value = ''; // Clear the display after showing 'Error'
  232. }, 1000);
  233. console.error('Calculation error:', e);
  234. }
  235.  
  236. // Clear display after calculation
  237. setTimeout(clearDisplay, 1000);
  238. }
  239.  
  240. function clearDisplay() {
  241. document.getElementById('display').value = '';
  242. }
  243.  
  244. function toggleCollapse() {
  245. const content = document.getElementById('content');
  246. const collapseButton = document.getElementById('collapseToggle');
  247. if (content.style.display === 'none') {
  248. content.style.display = 'block';
  249. collapseButton.textContent = '-';
  250. } else {
  251. content.style.display = 'none';
  252. collapseButton.textContent = '+';
  253. }
  254. }
  255.  
  256. // Handle Enter key for calculation
  257. document.addEventListener('keydown', function(event) {
  258. if (event.key === 'Enter') {
  259. event.preventDefault(); // Prevent form submission if inside a form
  260. calculate();
  261. }
  262. });
  263. })();