☰

Google-Style Neon Calculator Userscript

Adds a Google-style neon calculator to the webpage using Tampermonkey

  1. // ==UserScript==
  2. // @name         Google-Style Neon Calculator Userscript
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Adds a Google-style neon calculator to the webpage using Tampermonkey
  6. // @author       Your Name
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const calculatorContainer = document.createElement('div');
  16.     calculatorContainer.className = 'calculator-container';
  17.     calculatorContainer.style.position = 'fixed';
  18.     calculatorContainer.style.bottom = '20px';
  19.     calculatorContainer.style.left = '50%';
  20.     calculatorContainer.style.transform = 'translateX(-50%)';
  21.     calculatorContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
  22.     calculatorContainer.style.borderRadius = '10px';
  23.     calculatorContainer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.4)';
  24.     calculatorContainer.style.padding = '10px';
  25.     calculatorContainer.style.display = 'none';
  26.     calculatorContainer.style.zIndex = '9999';
  27.  
  28.     const calculatorInput = document.createElement('input');
  29.     calculatorInput.type = 'text';
  30.     calculatorInput.className = 'calculator-input';
  31.     calculatorInput.style.width = '100%';
  32.     calculatorInput.style.border = 'none';
  33.     calculatorInput.style.fontSize = '20px';
  34.     calculatorInput.style.padding = '8px';
  35.     calculatorInput.style.marginBottom = '10px';
  36.     calculatorInput.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  37.     calculatorInput.style.color = '#fff';
  38.     calculatorContainer.appendChild(calculatorInput);
  39.  
  40.     // Rest of your original code...
  41.  
  42.     document.body.appendChild(calculatorContainer);
  43.  
  44.     const calculatorInputField = document.querySelector('.calculator-input');
  45.     const calculatorButtons = document.querySelectorAll('.calculator-button');
  46.  
  47.     calculatorButtons.forEach(button => {
  48.         button.addEventListener('click', () => {
  49.             // Rest of your original calculator functionality code...
  50.         });
  51.     });
  52.  
  53.     const calculatorToggleButton = document.createElement('div');
  54.     calculatorToggleButton.className = 'calculator-toggle-button';
  55.     calculatorToggleButton.textContent = 'Calculator';
  56.     // Rest of your original code...
  57.  
  58.     calculatorToggleButton.addEventListener('click', () => {
  59.         calculatorContainer.style.display = calculatorContainer.style.display === 'none' ? 'block' : 'none';
  60.     });
  61.  
  62.     document.body.appendChild(calculatorToggleButton);
  63. })();