☰

Advanced Draggable Font Changer with Language Selector

Change fonts and translate text with a draggable GUI. Adjust font based on device (iPhone/iPad).

  1. // ==UserScript==
  2. // @name         Advanced Draggable Font Changer with Language Selector
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @description  Change fonts and translate text with a draggable GUI. Adjust font based on device (iPhone/iPad).
  6. // @author       Your Name
  7. // @match        *://*/*
  8. // @grant        GM_addStyle
  9. // @require      https://code.jquery.com/jquery-3.6.0.min.js
  10. // @require      https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Add jQuery UI CSS
  17.     GM_addStyle(`
  18.         .font-changer-gui {
  19.             position: fixed;
  20.             top: 100px;
  21.             left: 100px;
  22.             width: 300px;
  23.             background: white;
  24.             border: 2px solid #ccc;
  25.             border-radius: 10px;
  26.             padding: 10px;
  27.             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  28.             z-index: 10000;
  29.             font-family: Arial, sans-serif;
  30.         }
  31.         .font-changer-gui input, .font-changer-gui select, .font-changer-gui button {
  32.             width: 100%;
  33.             padding: 5px;
  34.             margin-top: 5px;
  35.             border-radius: 5px;
  36.             border: 1px solid #ccc;
  37.             font-size: 14px;
  38.         }
  39.         .font-changer-gui button {
  40.             background-color: #4CAF50;
  41.             color: white;
  42.             cursor: pointer;
  43.         }
  44.         .font-changer-gui button:hover {
  45.             background-color: #45a049;
  46.         }
  47.         .font-changer-header {
  48.             cursor: move;
  49.             background-color: #4CAF50;
  50.             color: white;
  51.             padding: 10px;
  52.             text-align: center;
  53.             border-radius: 10px 10px 0 0;
  54.         }
  55.     `);
  56.  
  57.     // Detect if the device is an iPhone or iPad
  58.     function isAppleDevice() {
  59.         return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  60.     }
  61.  
  62.     // Define default fonts based on the device
  63.     const defaultFont = isAppleDevice() ? 'San Francisco' : 'Arial';
  64.  
  65.     // Create the GUI HTML
  66.     const guiHTML = `
  67.         <div class="font-changer-gui">
  68.             <div class="font-changer-header">Font Changer</div>
  69.             <textarea id="text-input" placeholder="Type or paste your text here..."></textarea>
  70.             <select id="language-selector">
  71.                 <option value="en">English</option>
  72.                 <option value="es">Spanish</option>
  73.                 <option value="fr">French</option>
  74.                 <option value="de">German</option>
  75.                 <!-- Add more languages as needed -->
  76.             </select>
  77.             <select id="font-selector">
  78.                 <option value="${defaultFont}">${defaultFont}</option>
  79.                 <option value="Courier New">Courier New</option>
  80.                 <option value="Georgia">Georgia</option>
  81.                 <option value="Times New Roman">Times New Roman</option>
  82.                 <option value="Verdana">Verdana</option>
  83.                 <!-- Add more fonts as needed -->
  84.             </select>
  85.             <button id="translate-and-change-font">Translate & Change Font</button>
  86.         </div>
  87.     `;
  88.     $('body').append(guiHTML);
  89.  
  90.     // Make the GUI draggable
  91.     $('.font-changer-gui').draggable({
  92.         handle: '.font-changer-header'
  93.     });
  94.  
  95.     // Translate and change font function
  96.     $('#translate-and-change-font').click(async function() {
  97.         let text = $('#text-input').val();
  98.         let language = $('#language-selector').val();
  99.         let font = $('#font-selector').val();
  100.  
  101.         // Translate the text using an API (example using LibreTranslate)
  102.         const translatedText = await translateText(text, language);
  103.  
  104.         // Apply the translated text and change the font
  105.         $('#text-input').val(translatedText).css('font-family', font);
  106.     });
  107.  
  108.     // Function to translate text
  109.     async function translateText(text, targetLang) {
  110.         try {
  111.             const response = await fetch(`https://libretranslate.com/translate`, {
  112.                 method: 'POST',
  113.                 body: JSON.stringify({
  114.                     q: text,
  115.                     source: "auto",
  116.                     target: targetLang,
  117.                     format: "text"
  118.                 }),
  119.                 headers: { 'Content-Type': 'application/json' }
  120.             });
  121.             const data = await response.json();
  122.             return data.translatedText;
  123.         } catch (error) {
  124.             console.error('Translation error:', error);
  125.             alert('Translation failed. Please try again.');
  126.             return text;
  127.         }
  128.     }
  129. })();

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址