Enhanced Conceptual Web VPN

Conceptual Web VPN

A conceptual Web VPN interface
目前為 2024-11-18 提交的版本，檢視最新版本。
安裝腳本 ?
Wrap lines
// ==UserScript==
// @name         Conceptual Web VPN
// @namespace    https://gf.qytechs.cn/users/123456
// @version      1.0
// @description  A conceptual Web VPN interface
// @author       You
// @match        *://*/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';

    const vpnHtml = `
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Product+Sans:wght@400;700&display=swap');
            #vpn-container {
                font-family: 'Product Sans', sans-serif;
            }
        </style>
        <div id="vpn-container" style="position: fixed; top: 0; left: 0; width: 200px; height: 350px; background-color: #f0f0f0; border: 1px solid #ccc; padding: 10px; z-index: 1000;">
          <h1 style="font-size: 16px; margin-top: 0;">Conceptual Web VPN</h1>
          <select id="serverList" style="width: 100%; padding: 10px; border: 1px solid #ccc;">
            <option value="">Select Server</option>
            <option value="us-ny">US - New York</option>
            <option value="us-la">US - Los Angeles</option>
            <option value="us-chi">US - Chicago</option>
            <option value="us-sf">US - San Francisco</option>
            <option value="uk-london">UK - London</option>
            <option value="ca-toronto">CA - Toronto</option>
            <option value="au-sydney">AU - Sydney</option>
            <option value="de-berlin">DE - Berlin</option>
            <option value="fr-paris">FR - Paris</option>
            <option value="jp-tokyo">JP - Tokyo</option>
            <option value="sg-singapore">SG - Singapore</option>
            <option value="in-mumbai">IN - Mumbai</option>
            <option value="br-sao-paulo">BR - Sao Paulo</option>
            <option value="za-johannesburg">ZA - Johannesburg</option> 
          </select>
          <button id="connectBtn" style="width: 100%; padding: 10px; border: 1px solid #ccc;">Connect</button>
          <div id="status" style="margin-top: 10px; font-weight: bold;">Disconnected</div>
        </div>
    `;

    const div = document.createElement('div');
    div.innerHTML = vpnHtml;
    document.body.appendChild(div);

    const vpnContainer = document.getElementById('vpn-container');
    const serverList = document.getElementById('serverList');
    const connectBtn = document.getElementById('connectBtn');
    const statusDiv = document.getElementById('status');

    connectBtn.addEventListener('click', () => {
        if (serverList.value) {
            statusDiv.textContent = 'Connecting...';
            setTimeout(() => {
                statusDiv.textContent = 'Connected to ' + serverList.value;
            }, 1000);
        } else {
            statusDiv.textContent = 'Please select a server.';
        }
    });

    vpnContainer.style.top = '50%';
    vpnContainer.style.left = '0';
    vpnContainer.style.transform = 'translateY(-50%)';

    vpnContainer.addEventListener('mousedown', (e) => {
        let x = e.clientX;
        let y = e.clientY;

        const rect = vpnContainer.getBoundingClientRect();
        let offsetX = x - rect.left;
        let offsetY = y - rect.top;

        document.addEventListener('mousemove', (e) => {
            x = e.clientX;
            y = e.clientY;

            vpnContainer.style.top = (y - offsetY) + 'px';
            vpnContainer.style.left = (x - offsetX) + 'px';
            vpnContainer.style.transform = '';
        });

        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', () => {});
            document.removeEventListener('mouseup', () => {});
        });
    });
})();
欢迎访问Greasy Fork镜像
