☰

Conceptual Web VPN

A conceptual Web VPN interface

当前为 2024-11-18 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Conceptual Web VPN
  3. // @namespace    https://greasyfork.org/users/123456
  4. // @version      1.0
  5. // @description  A conceptual Web VPN interface
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const vpnHtml = `
  16.         <style>
  17.             @import url('https://fonts.googleapis.com/css2?family=Product+Sans:wght@400;700&display=swap');
  18.             #vpn-container {
  19.                 font-family: 'Product Sans', sans-serif;
  20.             }
  21.         </style>
  22.         <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;">
  23.           <h1 style="font-size: 16px; margin-top: 0;">Conceptual Web VPN</h1>
  24.           <select id="serverList" style="width: 100%; padding: 10px; border: 1px solid #ccc;">
  25.             <option value="">Select Server</option>
  26.             <option value="us-ny">US - New York</option>
  27.             <option value="us-la">US - Los Angeles</option>
  28.             <option value="us-chi">US - Chicago</option>
  29.             <option value="us-sf">US - San Francisco</option>
  30.             <option value="uk-london">UK - London</option>
  31.             <option value="ca-toronto">CA - Toronto</option>
  32.             <option value="au-sydney">AU - Sydney</option>
  33.             <option value="de-berlin">DE - Berlin</option>
  34.             <option value="fr-paris">FR - Paris</option>
  35.             <option value="jp-tokyo">JP - Tokyo</option>
  36.             <option value="sg-singapore">SG - Singapore</option>
  37.             <option value="in-mumbai">IN - Mumbai</option>
  38.             <option value="br-sao-paulo">BR - Sao Paulo</option>
  39.             <option value="za-johannesburg">ZA - Johannesburg</option> 
  40.           </select>
  41.           <button id="connectBtn" style="width: 100%; padding: 10px; border: 1px solid #ccc;">Connect</button>
  42.           <div id="status" style="margin-top: 10px; font-weight: bold;">Disconnected</div>
  43.         </div>
  44.     `;
  45.  
  46.     const div = document.createElement('div');
  47.     div.innerHTML = vpnHtml;
  48.     document.body.appendChild(div);
  49.  
  50.     const vpnContainer = document.getElementById('vpn-container');
  51.     const serverList = document.getElementById('serverList');
  52.     const connectBtn = document.getElementById('connectBtn');
  53.     const statusDiv = document.getElementById('status');
  54.  
  55.     connectBtn.addEventListener('click', () => {
  56.         if (serverList.value) {
  57.             statusDiv.textContent = 'Connecting...';
  58.             setTimeout(() => {
  59.                 statusDiv.textContent = 'Connected to ' + serverList.value;
  60.             }, 1000);
  61.         } else {
  62.             statusDiv.textContent = 'Please select a server.';
  63.         }
  64.     });
  65.  
  66.     vpnContainer.style.top = '50%';
  67.     vpnContainer.style.left = '0';
  68.     vpnContainer.style.transform = 'translateY(-50%)';
  69.  
  70.     vpnContainer.addEventListener('mousedown', (e) => {
  71.         let x = e.clientX;
  72.         let y = e.clientY;
  73.  
  74.         const rect = vpnContainer.getBoundingClientRect();
  75.         let offsetX = x - rect.left;
  76.         let offsetY = y - rect.top;
  77.  
  78.         document.addEventListener('mousemove', (e) => {
  79.             x = e.clientX;
  80.             y = e.clientY;
  81.  
  82.             vpnContainer.style.top = (y - offsetY) + 'px';
  83.             vpnContainer.style.left = (x - offsetX) + 'px';
  84.             vpnContainer.style.transform = '';
  85.         });
  86.  
  87.         document.addEventListener('mouseup', () => {
  88.             document.removeEventListener('mousemove', () => {});
  89.             document.removeEventListener('mouseup', () => {});
  90.         });
  91.     });
  92. })();