☰

Greasy Fork is available in English.

Google-Style Neon Calculator Userscript

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

// ==UserScript==
// @name         Google-Style Neon Calculator Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Adds a Google-style neon calculator to the webpage using Tampermonkey
// @author       Your Name
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const calculatorContainer = document.createElement('div');
    calculatorContainer.className = 'calculator-container';
    calculatorContainer.style.position = 'fixed';
    calculatorContainer.style.bottom = '20px';
    calculatorContainer.style.left = '50%';
    calculatorContainer.style.transform = 'translateX(-50%)';
    calculatorContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    calculatorContainer.style.borderRadius = '10px';
    calculatorContainer.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.4)';
    calculatorContainer.style.padding = '10px';
    calculatorContainer.style.display = 'none';
    calculatorContainer.style.zIndex = '9999';

    const calculatorInput = document.createElement('input');
    calculatorInput.type = 'text';
    calculatorInput.className = 'calculator-input';
    calculatorInput.style.width = '100%';
    calculatorInput.style.border = 'none';
    calculatorInput.style.fontSize = '20px';
    calculatorInput.style.padding = '8px';
    calculatorInput.style.marginBottom = '10px';
    calculatorInput.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    calculatorInput.style.color = '#fff';
    calculatorContainer.appendChild(calculatorInput);

    // Rest of your original code...

    document.body.appendChild(calculatorContainer);

    const calculatorInputField = document.querySelector('.calculator-input');
    const calculatorButtons = document.querySelectorAll('.calculator-button');

    calculatorButtons.forEach(button => {
        button.addEventListener('click', () => {
            // Rest of your original calculator functionality code...
        });
    });

    const calculatorToggleButton = document.createElement('div');
    calculatorToggleButton.className = 'calculator-toggle-button';
    calculatorToggleButton.textContent = 'Calculator';
    // Rest of your original code...

    calculatorToggleButton.addEventListener('click', () => {
        calculatorContainer.style.display = calculatorContainer.style.display === 'none' ? 'block' : 'none';
    });

    document.body.appendChild(calculatorToggleButton);
})();