☰

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. // @author       Hex Developments
  8. // @match        https://gmm.getmoremath.com/*
  9. // @match        https://khanacademy.org/*
  10. // @match        https://ixl.com/math/*
  11. // @match        https://desmos.com/*
  12. // @match        https://mathway.com/*
  13. // @match        https://wolframalpha.com/*
  14. // @match        https://mathletics.com/*
  15. // @match        https://brilliant.org/*
  16. // @match        https://coolmathgames.com/*
  17. // @match        https://purplemath.com/*
  18. // @match        https://artofproblemsolving.com/*
  19. // @match        https://nrich.maths.org/*
  20. // @match        https://math.com/*
  21. // @match        https://algebrator.com/*
  22. // @match        https://mathhelp.com/*
  23. // @match        https://xtramath.org/*
  24. // @match        https://edmodo.com/*
  25. // @match        https://geogebra.org/*
  26. // @match        https://cimt.org.uk/*
  27. // @match        https://shmoop.com/*
  28. // @match        https://socratic.org/*
  29. // @match        https://mathsisfun.com/*
  30. // @match        https://study.com/*
  31. // @match        https://hippocampus.org/*
  32. // @match        https://learnzillion.com/*
  33. // @match        https://getmoremath.com/*
  34. // @grant        GM_addStyle
  35. // @run-at       document-end
  36. // ==/UserScript==
  37.  
  38. (function() {
  39.     'use strict';
  40.  
  41.     // Create the draggable container
  42.     const container = document.createElement('div');
  43.     container.id = 'advancedCalculator';
  44.     container.innerHTML = `
  45.         <div id="header">
  46.             <span>Hex Panel</span>
  47.             <button id="collapseToggle">-</button>
  48.         </div>
  49.         <div id="content">
  50.             <input type="text" id="display" />
  51.             <div id="buttons">
  52.                 <button data-value="7">7</button>
  53.                 <button data-value="8">8</button>
  54.                 <button data-value="9">9</button>
  55.                 <button data-value="/">/</button>
  56.                 <button data-value="4">4</button>
  57.                 <button data-value="5">5</button>
  58.                 <button data-value="6">6</button>
  59.                 <button data-value="*">*</button>
  60.                 <button data-value="1">1</button>
  61.                 <button data-value="2">2</button>
  62.                 <button data-value="3">3</button>
  63.                 <button data-value="-">-</button>
  64.                 <button data-value="0">0</button>
  65.                 <button data-value=".">.</button>
  66.                 <button data-value="/">/</button>
  67.                 <button data-value="+">+</button>
  68.                 <button id="fraction">1/x</button>
  69.                 <button id="calculate">=</button>
  70.                 <button id="clear">C</button>
  71.             </div>
  72.         </div>
  73.     `;
  74.     document.body.appendChild(container);
  75.  
  76.     // Add CSS styles
  77.     GM_addStyle(`
  78.         #advancedCalculator {
  79.             position: fixed;
  80.             top: 10px;
  81.             left: 10px;
  82.             width: 260px;
  83.             background: #1e1e1e;
  84.             border: 1px solid #444;
  85.             border-radius: 10px;
  86.             box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
  87.             z-index: 10000;
  88.             font-family: 'Courier New', Courier, monospace;
  89.             transition: height 0.3s ease;
  90.         }
  91.         #header {
  92.             background: #00ff00;
  93.             color: #000;
  94.             padding: 10px;
  95.             display: flex;
  96.             justify-content: space-between;
  97.             align-items: center;
  98.             cursor: move;
  99.             border-top-left-radius: 10px;
  100.             border-top-right-radius: 10px;
  101.             font-size: 18px;
  102.             font-weight: bold;
  103.         }
  104.         #header button {
  105.             background: #333;
  106.             color: #00ff00;
  107.             border: none;
  108.             padding: 5px 10px;
  109.             border-radius: 5px;
  110.             cursor: pointer;
  111.         }
  112.         #header button:hover {
  113.             background: #555;
  114.         }
  115.         #header button:active {
  116.             background: #00ff00;
  117.             color: #000;
  118.         }
  119.         #content {
  120.             padding: 10px;
  121.             overflow: hidden;
  122.         }
  123.         #display {
  124.             width: 100%;
  125.             margin-bottom: 10px;
  126.             font-size: 22px;
  127.             text-align: right;
  128.             background: #000;
  129.             color: #00f; /* Blue color for text */
  130.             border: 1px solid #333;
  131.             border-radius: 5px;
  132.             padding: 10px;
  133.             box-sizing: border-box;
  134.         }
  135.         #buttons {
  136.             display: grid;
  137.             grid-template-columns: repeat(4, 1fr);
  138.             gap: 5px;
  139.         }
  140.         #buttons button {
  141.             background: #222;
  142.             color: #00ff00;
  143.             padding: 15px;
  144.             font-size: 16px;
  145.             border: 1px solid #444;
  146.             border-radius: 5px;
  147.             cursor: pointer;
  148.             transition: background 0.3s ease;
  149.         }
  150.         #buttons button:hover {
  151.             background: #333;
  152.         }
  153.         #buttons button:active {
  154.             background: #00ff00;
  155.             color: #000;
  156.         }
  157.     `);
  158.  
  159.     // Make the container draggable
  160.     let header = document.getElementById('header');
  161.     let isDragging = false;
  162.     let offsetX, offsetY;
  163.  
  164.     header.onmousedown = function(e) {
  165.         isDragging = true;
  166.         offsetX = e.clientX - container.getBoundingClientRect().left;
  167.         offsetY = e.clientY - container.getBoundingClientRect().top;
  168.     };
  169.  
  170.     document.onmousemove = function(e) {
  171.         if (isDragging) {
  172.             container.style.left = (e.clientX - offsetX) + 'px';
  173.             container.style.top = (e.clientY - offsetY) + 'px';
  174.         }
  175.     };
  176.  
  177.     document.onmouseup = function() {
  178.         isDragging = false;
  179.     };
  180.  
  181.     // Event listeners for buttons
  182.     document.querySelectorAll('#buttons button').forEach(button => {
  183.         button.addEventListener('click', function() {
  184.             const value = this.getAttribute('data-value');
  185.             if (value) {
  186.                 appendNumber(value);
  187.             }
  188.         });
  189.     });
  190.  
  191.     // Specific button event listeners
  192.     document.getElementById('fraction').addEventListener('click', appendFraction);
  193.     document.getElementById('calculate').addEventListener('click', calculate);
  194.     document.getElementById('clear').addEventListener('click', clearDisplay);
  195.     document.getElementById('collapseToggle').addEventListener('click', toggleCollapse);
  196.  
  197.     // Calculator functions
  198.     function appendNumber(num) {
  199.         let display = document.getElementById('display');
  200.         display.value += num;
  201.     }
  202.  
  203.     function appendOperator(op) {
  204.         let display = document.getElementById('display');
  205.         display.value += ' ' + op + ' ';
  206.     }
  207.  
  208.     function appendFraction() {
  209.         let display = document.getElementById('display');
  210.         let value = display.value.trim();
  211.         if (value) {
  212.             display.value = '1 / (' + value + ')';
  213.         }
  214.     }
  215.  
  216.     function calculate() {
  217.         let display = document.getElementById('display');
  218.         let expression = display.value;
  219.  
  220.         // Replace 'x' with '*' for multiplication
  221.         expression = expression.replace(/x/g, '*');
  222.  
  223.         try {
  224.             // Evaluate the expression safely
  225.             let result = Function('"use strict";return (' + expression + ')')();
  226.             display.value = result;
  227.         } catch (e) {
  228.             display.value = 'Error';
  229.             setTimeout(() => {
  230.                 display.value = ''; // Clear the display after showing 'Error'
  231.             }, 1000);
  232.             console.error('Calculation error:', e);
  233.         }
  234.  
  235.         // Clear display after calculation
  236.         setTimeout(clearDisplay, 1000);
  237.     }
  238.  
  239.     function clearDisplay() {
  240.         document.getElementById('display').value = '';
  241.     }
  242.  
  243.     function toggleCollapse() {
  244.         const content = document.getElementById('content');
  245.         const collapseButton = document.getElementById('collapseToggle');
  246.         if (content.style.display === 'none') {
  247.             content.style.display = 'block';
  248.             collapseButton.textContent = '-';
  249.         } else {
  250.             content.style.display = 'none';
  251.             collapseButton.textContent = '+';
  252.         }
  253.     }
  254.  
  255.     // Handle Enter key for calculation
  256.     document.addEventListener('keydown', function(event) {
  257.         if (event.key === 'Enter') {
  258.             event.preventDefault(); // Prevent form submission if inside a form
  259.             calculate();
  260.         }
  261.     });
  262. })();