Ping Show gartic.io

Ping & fps
سوئال سوراش، ئوبزور يېزىش ياكى قوليازمىنى پاش قىلىش.
Wrap lines
// ==UserScript==
// @name         Ping Show gartic.io
// @description  Ping & fps
// @version      1.0
// @author       iiJavad
// @match        *://gartic.io/*
// @grant        none
// @namespace    http://tampermonkey.net/
// ==/UserScript==

(function() {
    'use strict';

    const createPingPanel = () => {
        const panel = document.createElement('div');
        panel.style = `
            width: 200px;
            height: 100px;
            z-index: 99;
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            background: #222;
            border: 2px solid #fff;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0px 0px 10px rgba(255,255,255,0.7);
            color: #fff;
            font-size: 12px;
            text-align: center;
            overflow: hidden;
            transition: opacity 0.5s, transform 0.5s;
            opacity: 0; /* Initially hidden */
            transform: translateX(-50%) translateY(-100%); /* Move out of view */
        `;
        panel.id = 'pingPanel';
        document.body.appendChild(panel);

        const toggleButton = document.createElement('button');
        toggleButton.textContent = 'Show/Hide Panel';
        toggleButton.style = `
            position: fixed;
            top: 10px;
            right: 10px;
            background: #FFD700;
            color: #000;
            border: 2px solid #000;
            border-radius: 5px;
            padding: 5px 10px;
            z-index: 100;
            cursor: pointer;
            box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
        `;
        toggleButton.onclick = () => {
            const panel = document.getElementById('pingPanel');
            if (panel.style.opacity === '0') {
                panel.style.opacity = '1';
                panel.style.transform = 'translateX(-50%) translateY(0)';
            } else {
                panel.style.opacity = '0';
                panel.style.transform = 'translateX(-50%) translateY(-100%)';
            }
        };
        document.body.appendChild(toggleButton);

        const title = document.createElement('div');
        title.textContent = 'gol SCRIPT j-❤️S-';
        title.style = `
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #fff;
        `;
        panel.appendChild(title);

        const pingLabel = document.createElement('div');
        pingLabel.id = 'pingLabel';
        pingLabel.textContent = 'Ping: Calculating...';
        panel.appendChild(pingLabel);

        const pingBarContainer = document.createElement('div');
        pingBarContainer.style = `
            margin-top: 5px;
            background: linear-gradient(90deg, #000, #444);
            height: 15px;
            border-radius: 5px;
            overflow: hidden;
        `;
        const pingBar = document.createElement('div');
        pingBar.id = 'pingBar';
        pingBar.style = `
            height: 100%;
            background: linear-gradient(90deg, #f00, #0f0, #00f);
            width: 0%;
            border-radius: 5px;
            transition: width 0.5s, background 1s;
        `;
        pingBarContainer.appendChild(pingBar);
        panel.appendChild(pingBarContainer);

        const urlInputContainer = document.createElement('div');
        urlInputContainer.style = `
            margin-top: 5px;
        `;
        const urlInputLabel = document.createElement('label');
        urlInputLabel.textContent = 'Ping URL:';
        urlInputLabel.style = `
            display: block;
            color: #fff;
            font-size: 12px;
        `;
        urlInputContainer.appendChild(urlInputLabel);

        const urlInput = document.createElement('input');
        urlInput.type = 'text';
        urlInput.id = 'pingUrl';
        urlInput.value = 'https://api.ipify.org?format=json';
        urlInput.style = `
            width: 100%;
            height: 20px;
            border-radius: 5px;
            padding: 3px;
            border: 1px solid #fff;
            background-color: #333;
            color: #fff;
            font-size: 12px;
        `;
        urlInputContainer.appendChild(urlInput);
        panel.appendChild(urlInputContainer);

        const intervalInputContainer = document.createElement('div');
        intervalInputContainer.style = `
            margin-top: 5px;
        `;
        const intervalInputLabel = document.createElement('label');
        intervalInputLabel.textContent = 'Update Interval (ms):';
        intervalInputLabel.style = `
            display: block;
            color: #fff;
            font-size: 12px;
        `;
        intervalInputContainer.appendChild(intervalInputLabel);

        const intervalInput = document.createElement('input');
        intervalInput.type = 'number';
        intervalInput.id = 'pingInterval';
        intervalInput.value = '1000'; // default 1 second
        intervalInput.min = '100';
        intervalInput.style = `
            width: 100%;
            height: 20px;
            border-radius: 5px;
            padding: 3px;
            border: 1px solid #fff;
            background-color: #333;
            color: #fff;
            font-size: 12px;
        `;
        intervalInputContainer.appendChild(intervalInput);
        panel.appendChild(intervalInputContainer);

        const lastUpdateLabel = document.createElement('div');
        lastUpdateLabel.id = 'lastUpdateLabel';
        lastUpdateLabel.textContent = 'Last Update: Never';
        lastUpdateLabel.style = `
            margin-top: 5px;
            font-size: 12px;
        `;
        panel.appendChild(lastUpdateLabel);

        const statusLabel = document.createElement('div');
        statusLabel.id = 'statusLabel';
        statusLabel.textContent = 'Status: Unknown';
        statusLabel.style = `
            margin-top: 5px;
            font-size: 12px;
        `;
        panel.appendChild(statusLabel);
    };

    // Function to calculate and display ping
    const getPing = () => {
        const testUrl = document.getElementById('pingUrl').value;
        const interval = parseInt(document.getElementById('pingInterval').value) || 1000;

        const startTime = performance.now();

        fetch(testUrl)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                const endTime = performance.now();
                const ping = Math.round(endTime - startTime);
                document.getElementById('pingLabel').textContent = `Ping: ${ping} ms`;
                const pingBar = document.getElementById('pingBar');
                pingBar.style.width = `${Math.min(ping, 100)}%`;
                pingBar.style.background = `linear-gradient(90deg, ${getRandomColor()}, ${getRandomColor()}, ${getRandomColor()})`;
                document.getElementById('statusLabel').textContent = 'Status: Online';
            })
            .catch(error => {
                document.getElementById('pingLabel').textContent = 'Ping: Error';
                document.getElementById('pingBar').style.width = '0%';
                document.getElementById('pingBar').style.background = `linear-gradient(90deg, #f00, #0f0, #00f)`;
                document.getElementById('statusLabel').textContent = 'Status: Error';
            })
            .finally(() => {
                document.getElementById('lastUpdateLabel').textContent = `Last Update: ${new Date().toLocaleTimeString()}`;
            });
    };

    
    const getRandomColor = () => {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    };

    const updatePing = () => {
        getPing();
        const interval = parseInt(document.getElementById('pingInterval').value) || 1000;
        setTimeout(updatePing, interval); 
    };

    
    window.onload = () => {
        createPingPanel();
        updatePing();
    };
})();
Greasy Fork镜像

Ping Show gartic.io

赞助商

广告
