☰

Discord Server Search

Search and navigate to a Discord server by name

目前为 2024-10-09 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         Discord Server Search
  3. // @namespace    Made by @hakav
  4. // @author       @hakav
  5. // @version      1.9
  6. // @description  Search and navigate to a Discord server by name
  7. // @match        https://discord.com/*
  8. // @grant        none
  9. // @icon         https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrWjmWEq2JeU0yKb2ArlyAAJA4QQLkhbuihw&s
  10. // @license      Copyright @hakav
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // Create the search icon
  17.     const searchIcon = document.createElement('div');
  18.     searchIcon.innerHTML = '🔍';
  19.     searchIcon.style.position = 'fixed';
  20.     searchIcon.style.bottom = '20px';
  21.     searchIcon.style.right = '20px';
  22.     searchIcon.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
  23.     searchIcon.style.color = 'black';
  24.     searchIcon.style.border = '2px solid rgba(0, 0, 0, 0.3)';
  25.     searchIcon.style.borderRadius = '50%';
  26.     searchIcon.style.padding = '10px';
  27.     searchIcon.style.cursor = 'pointer';
  28.     searchIcon.style.zIndex = '1000';
  29.     searchIcon.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
  30.     searchIcon.style.transition = 'background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease'; // Add scaling transition
  31.     document.body.appendChild(searchIcon);
  32.  
  33.     // Add hover effect with scaling to give depth
  34.     searchIcon.onmouseenter = function() {
  35.         searchIcon.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
  36.         searchIcon.style.boxShadow = '0 0 15px rgba(0, 0, 0, 0.5)';
  37.         searchIcon.style.transform = 'scale(1.1)'; // Slightly scale up
  38.     };
  39.  
  40.     searchIcon.onmouseleave = function() {
  41.         searchIcon.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
  42.         searchIcon.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
  43.         searchIcon.style.transform = 'scale(1)'; // Return to normal size
  44.     };
  45.  
  46.     // Add click animation with slight press effect
  47.     searchIcon.onclick = function() {
  48.         searchIcon.style.transform = 'scale(0.9)'; // Shrink slightly on click
  49.         setTimeout(() => {
  50.             searchIcon.style.transform = 'scale(1.1)'; // Bounce back
  51.             setTimeout(() => {
  52.                 searchIcon.style.transform = 'scale(1)'; // Return to normal size
  53.             }, 100);
  54.         }, 100);
  55.     };
  56.  
  57.     // Create the "Designed by @hakav" label
  58.     const designerLabel = document.createElement('div');
  59.     designerLabel.innerHTML = 'Designed by @hakav';
  60.     designerLabel.style.position = 'fixed';
  61.     designerLabel.style.bottom = '60px';
  62.     designerLabel.style.right = '20px';
  63.     designerLabel.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  64.     designerLabel.style.color = 'white';
  65.     designerLabel.style.padding = '5px 10px';
  66.     designerLabel.style.borderRadius = '5px';
  67.     designerLabel.style.fontFamily = 'Arial, sans-serif';
  68.     designerLabel.style.fontSize = '12px';
  69.     designerLabel.style.zIndex = '1001';
  70.     designerLabel.style.opacity = '0'; // Initially hidden
  71.     designerLabel.style.transition = 'opacity 0.5s ease';
  72.     designerLabel.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  73.     document.body.appendChild(designerLabel);
  74.  
  75.     // Show the designer label on click
  76.     const showDesignerLabel = () => {
  77.         designerLabel.style.opacity = '1';
  78.         setTimeout(() => {
  79.             designerLabel.style.opacity = '0';
  80.         }, 3000);
  81.     };
  82.  
  83.     // Create the search input popup with smooth slide-in effect
  84.     const searchPopup = document.createElement('div');
  85.     searchPopup.style.position = 'fixed';
  86.     searchPopup.style.bottom = '80px';
  87.     searchPopup.style.right = '-250px'; // Slide in from outside the screen
  88.     searchPopup.style.backgroundColor = 'white';
  89.     searchPopup.style.padding = '15px';
  90.     searchPopup.style.borderRadius = '5px';
  91.     searchPopup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
  92.     searchPopup.style.display = 'none';
  93.     searchPopup.style.zIndex = '1001';
  94.     searchPopup.style.opacity = '0';
  95.     searchPopup.style.transition = 'opacity 0.3s ease, transform 0.3s ease, right 0.5s ease'; // Smooth slide-in effect
  96.  
  97.     const searchInput = document.createElement('input');
  98.     searchInput.placeholder = 'Enter server name...';
  99.     searchInput.style.width = '200px';
  100.     searchInput.style.border = '2px solid #ccc';
  101.     searchInput.style.padding = '5px';
  102.     searchInput.style.transition = 'border-color 0.3s ease'; // Add border change on focus
  103.     searchPopup.appendChild(searchInput);
  104.  
  105.     // Highlight the input on focus
  106.     searchInput.onfocus = function() {
  107.         searchInput.style.borderColor = '#4A90E2'; // Change border to blue on focus
  108.     };
  109.  
  110.     searchInput.onblur = function() {
  111.         searchInput.style.borderColor = '#ccc'; // Revert border color on blur
  112.     };
  113.  
  114.     const searchButton = document.createElement('button');
  115.     searchButton.innerText = 'Search';
  116.     searchButton.style.marginLeft = '10px';
  117.     searchButton.style.padding = '5px 10px';
  118.     searchButton.style.backgroundColor = '#4A90E2'; // Add some cool color
  119.     searchButton.style.color = 'white';
  120.     searchButton.style.border = 'none';
  121.     searchButton.style.borderRadius = '3px';
  122.     searchButton.style.cursor = 'pointer';
  123.     searchButton.style.transition = 'transform 0.2s ease, background-color 0.3s ease'; // Add button hover effect
  124.  
  125.     // Button hover effect
  126.     searchButton.onmouseenter = function() {
  127.         searchButton.style.backgroundColor = '#357ABD'; // Darken on hover
  128.         searchButton.style.transform = 'scale(1.05)'; // Slightly scale up
  129.     };
  130.  
  131.     searchButton.onmouseleave = function() {
  132.         searchButton.style.backgroundColor = '#4A90E2'; // Revert to original color
  133.         searchButton.style.transform = 'scale(1)'; // Revert to original size
  134.     };
  135.  
  136.     // Search function
  137.     const searchServer = () => {
  138.         const serverName = searchInput.value.trim();
  139.         if (serverName) {
  140.             // Get the list of servers from the sidebar
  141.             const servers = Array.from(document.querySelectorAll('[data-list-id="guildsnav"] [aria-label]'));
  142.             const matchedServer = servers.find(server =>
  143.                 server.getAttribute('aria-label').toLowerCase().includes(serverName.toLowerCase())
  144.             );
  145.  
  146.             if (matchedServer) {
  147.                 matchedServer.click(); // Click the server to open it
  148.             } else {
  149.                 alert('Server not found!');
  150.             }
  151.         }
  152.     };
  153.  
  154.     searchButton.onclick = searchServer;
  155.  
  156.     searchInput.addEventListener('keydown', function (e) {
  157.         if (e.key === 'Enter') {
  158.             searchServer(); // Call search function when Enter key is pressed
  159.         }
  160.     });
  161.  
  162.     searchPopup.appendChild(searchButton);
  163.     document.body.appendChild(searchPopup);
  164.  
  165.     // Show popup with sliding and fading animation
  166.     const showPopup = () => {
  167.         searchPopup.style.display = 'block';
  168.         setTimeout(() => {
  169.             searchPopup.style.opacity = '1';
  170.             searchPopup.style.right = '20px'; // Slide it into view
  171.         }, 10);
  172.     };
  173.  
  174.     // Hide popup with sliding out animation
  175.     const hidePopup = () => {
  176.         searchPopup.style.opacity = '0';
  177.         searchPopup.style.right = '-250px'; // Slide it back out
  178.         setTimeout(() => {
  179.             searchPopup.style.display = 'none';
  180.         }, 300);
  181.     };
  182.  
  183.     // Show/hide popup and label on icon click with animation
  184.     searchIcon.onclick = function() {
  185.         if (searchPopup.style.display === 'none' || searchPopup.style.opacity === '0') {
  186.             showPopup();
  187.             showDesignerLabel(); // Show "Designed by @hakav" label when the icon is clicked
  188.             searchInput.focus();
  189.         } else {
  190.             hidePopup();
  191.         }
  192.     };
  193.  
  194.     // Hide popup when clicking outside with animation
  195.     window.onclick = function(event) {
  196.         if (!searchIcon.contains(event.target) && !searchPopup.contains(event.target)) {
  197.             hidePopup();
  198.         }
  199.     };
  200.  
  201. })();