☰

Mobile CAI Improved

Better mobile CAI experience

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

  1. // ==UserScript==
  2. // @name         Mobile CAI Improved
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.4
  5. // @description  Better mobile CAI experience
  6. // @author       LuxTallis
  7. // @match        https://character.ai/*
  8. // @grant        GM_addStyle
  9. // @grant        GM_getValue
  10. // @grant        GM_setValue
  11. // @license      MIT
  12. // ==/UserScript==
  13. (function () {
  14.     'use strict';
  15.  
  16.     // Create the panel
  17.     const panel = document.createElement('div');
  18.     panel.style.position = 'fixed';
  19.     panel.style.bottom = '0';
  20.     panel.style.left = '0';
  21.     panel.style.width = '100%';
  22.     panel.style.height = '30px';
  23.     panel.style.backgroundColor = 'black';
  24.     panel.style.padding = '2px 5px';
  25.     panel.style.zIndex = '9999';
  26.     panel.style.display = 'flex';
  27.     panel.style.justifyContent = 'space-between';
  28.     panel.style.alignItems = 'center';
  29.  
  30.     // Create zoom buttons
  31.     const zoomInButton = document.createElement('button');
  32.     zoomInButton.innerHTML = 'A+';
  33.     zoomInButton.style.padding = '5px';
  34.     zoomInButton.style.fontSize = '16px';
  35.     zoomInButton.style.border = 'none';
  36.     zoomInButton.style.borderRadius = '3px';
  37.     zoomInButton.style.backgroundColor = '#000000';
  38.     zoomInButton.style.color = 'white';
  39.     zoomInButton.style.cursor = 'pointer';
  40.     zoomInButton.style.marginLeft = '5px';
  41.  
  42.     const zoomOutButton = document.createElement('button');
  43.     zoomOutButton.innerHTML = 'A-';
  44.     zoomOutButton.style.padding = '5px';
  45.     zoomOutButton.style.fontSize = '16px';
  46.     zoomOutButton.style.border = 'none';
  47.     zoomOutButton.style.borderRadius = '3px';
  48.     zoomOutButton.style.backgroundColor = '#000000';
  49.     zoomOutButton.style.color = 'white';
  50.     zoomOutButton.style.cursor = 'pointer';
  51.     zoomOutButton.style.marginLeft = '5px';
  52.  
  53.     // Create the full-screen toggle button
  54.     const fullScreenButton = document.createElement('button');
  55.     fullScreenButton.innerHTML = '⛶';
  56.     fullScreenButton.id = 'fullScreenToggle';
  57.     fullScreenButton.style.padding = '5px';
  58.     fullScreenButton.style.fontSize = '16px';
  59.     fullScreenButton.style.border = 'none';
  60.     fullScreenButton.style.borderRadius = '3px';
  61.     fullScreenButton.style.backgroundColor = '#000000';
  62.     fullScreenButton.style.color = 'white';
  63.     fullScreenButton.style.cursor = 'pointer';
  64.     fullScreenButton.style.marginRight = '5px';
  65.  
  66.     // Append buttons to the panel
  67.     const leftGroup = document.createElement('div');
  68.     leftGroup.style.display = 'flex';
  69.     leftGroup.appendChild(zoomInButton);
  70.     leftGroup.appendChild(zoomOutButton);
  71.     panel.appendChild(leftGroup);
  72.  
  73.     const rightGroup = document.createElement('div');
  74.     rightGroup.appendChild(fullScreenButton);
  75.     panel.appendChild(rightGroup);
  76.  
  77.     // Append the panel to the body
  78.     document.body.appendChild(panel);
  79.  
  80.     // CSS adjustments
  81.     GM_addStyle(`
  82.         @import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
  83.  
  84.         body {
  85.             background-color: #000000 !important;
  86.             color: #ffffff !important;
  87.             font-family: 'PT Sans', sans-serif !important;
  88.         }
  89.  
  90.         .mt-1.bg-surface-elevation-2,
  91.         .mt-1.bg-surface-elevation-3,
  92.         .prose,
  93.         .grow,
  94.         textarea.flex {
  95.             background-color: #000000 !important;
  96.             font-family: 'PT Sans', sans-serif !important;
  97.         }
  98.  
  99.         .text-foreground {
  100.             color: #000000 !important;
  101.             font-family: 'PT Sans', sans-serif !important;
  102.         }
  103.  
  104.         #chat-messages .max-w-xl.rounded-2xl.bg-surface-elevation-2,
  105.         #chat-messages textarea[maxlength="4092"] {
  106.             background-color: #000000 !important;
  107.             border: none !important;
  108.         }
  109.  
  110.         .dark #chat-header-background {
  111.             background: #000000 !important;
  112.         }
  113.  
  114.         button.px-unit-0:nth-child(2) {
  115.             display: none !important;
  116.         }
  117.  
  118.         /* Ensure the zoom and fullscreen buttons are unaffected by font size change */
  119.         button {
  120.             font-size: 16px !important;
  121.             font-family: 'PT Sans', sans-serif !important;
  122.         }
  123.     `);
  124.  
  125.     // Load saved font size
  126.     let fontSize = GM_getValue('fontSize', 16);
  127.  
  128.     const applyFontSize = () => {
  129.         GM_addStyle(`
  130.             * { font-size: ${fontSize}px !important; }
  131.         `);
  132.     };
  133.  
  134.     applyFontSize();
  135.  
  136.     // Full-screen toggle functionality
  137.     fullScreenButton.addEventListener('click', () => {
  138.         if (!document.fullscreenElement) {
  139.             document.documentElement.requestFullscreen().catch(err => {
  140.                 console.error(`Error attempting to enable full-screen mode: ${err.message}`);
  141.             });
  142.         } else {
  143.             document.exitFullscreen().catch(err => {
  144.                 console.error(`Error attempting to exit full-screen mode: ${err.message}`);
  145.             });
  146.         }
  147.     });
  148.  
  149.     // Zoom in and out functionality
  150.     zoomInButton.addEventListener('click', () => {
  151.         fontSize += 1;
  152.         GM_setValue('fontSize', fontSize);
  153.         applyFontSize();
  154.     });
  155.  
  156.     zoomOutButton.addEventListener('click', () => {
  157.         fontSize -= 1;
  158.         GM_setValue('fontSize', fontSize);
  159.         applyFontSize();
  160.     });
  161. })();