Search and navigate to a Discord server by name
目前為
// ==UserScript==
// @name Discord Server Search
// @namespace Made by @hakav
// @author @hakav
// @version 1.9
// @description Search and navigate to a Discord server by name
// @match https://discord.com/*
// @grant none
// @icon https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSrWjmWEq2JeU0yKb2ArlyAAJA4QQLkhbuihw&s
// @license Copyright @hakav
// ==/UserScript==
(function() {
'use strict';
// Create the search icon
const searchIcon = document.createElement('div');
searchIcon.innerHTML = '🔍';
searchIcon.style.position = 'fixed';
searchIcon.style.bottom = '20px';
searchIcon.style.right = '20px';
searchIcon.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
searchIcon.style.color = 'black';
searchIcon.style.border = '2px solid rgba(0, 0, 0, 0.3)';
searchIcon.style.borderRadius = '50%';
searchIcon.style.padding = '10px';
searchIcon.style.cursor = 'pointer';
searchIcon.style.zIndex = '1000';
searchIcon.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
searchIcon.style.transition = 'background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease'; // Add scaling transition
document.body.appendChild(searchIcon);
// Add hover effect with scaling to give depth
searchIcon.onmouseenter = function() {
searchIcon.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
searchIcon.style.boxShadow = '0 0 15px rgba(0, 0, 0, 0.5)';
searchIcon.style.transform = 'scale(1.1)'; // Slightly scale up
};
searchIcon.onmouseleave = function() {
searchIcon.style.backgroundColor = 'rgba(255, 255, 255, 0.3)';
searchIcon.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)';
searchIcon.style.transform = 'scale(1)'; // Return to normal size
};
// Add click animation with slight press effect
searchIcon.onclick = function() {
searchIcon.style.transform = 'scale(0.9)'; // Shrink slightly on click
setTimeout(() => {
searchIcon.style.transform = 'scale(1.1)'; // Bounce back
setTimeout(() => {
searchIcon.style.transform = 'scale(1)'; // Return to normal size
}, 100);
}, 100);
};
// Create the "Designed by @hakav" label
const designerLabel = document.createElement('div');
designerLabel.innerHTML = 'Designed by @hakav';
designerLabel.style.position = 'fixed';
designerLabel.style.bottom = '60px';
designerLabel.style.right = '20px';
designerLabel.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
designerLabel.style.color = 'white';
designerLabel.style.padding = '5px 10px';
designerLabel.style.borderRadius = '5px';
designerLabel.style.fontFamily = 'Arial, sans-serif';
designerLabel.style.fontSize = '12px';
designerLabel.style.zIndex = '1001';
designerLabel.style.opacity = '0'; // Initially hidden
designerLabel.style.transition = 'opacity 0.5s ease';
designerLabel.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
document.body.appendChild(designerLabel);
// Show the designer label on click
const showDesignerLabel = () => {
designerLabel.style.opacity = '1';
setTimeout(() => {
designerLabel.style.opacity = '0';
}, 3000);
};
// Create the search input popup with smooth slide-in effect
const searchPopup = document.createElement('div');
searchPopup.style.position = 'fixed';
searchPopup.style.bottom = '80px';
searchPopup.style.right = '-250px'; // Slide in from outside the screen
searchPopup.style.backgroundColor = 'white';
searchPopup.style.padding = '15px';
searchPopup.style.borderRadius = '5px';
searchPopup.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.5)';
searchPopup.style.display = 'none';
searchPopup.style.zIndex = '1001';
searchPopup.style.opacity = '0';
searchPopup.style.transition = 'opacity 0.3s ease, transform 0.3s ease, right 0.5s ease'; // Smooth slide-in effect
const searchInput = document.createElement('input');
searchInput.placeholder = 'Enter server name...';
searchInput.style.width = '200px';
searchInput.style.border = '2px solid #ccc';
searchInput.style.padding = '5px';
searchInput.style.transition = 'border-color 0.3s ease'; // Add border change on focus
searchPopup.appendChild(searchInput);
// Highlight the input on focus
searchInput.onfocus = function() {
searchInput.style.borderColor = '#4A90E2'; // Change border to blue on focus
};
searchInput.onblur = function() {
searchInput.style.borderColor = '#ccc'; // Revert border color on blur
};
const searchButton = document.createElement('button');
searchButton.innerText = 'Search';
searchButton.style.marginLeft = '10px';
searchButton.style.padding = '5px 10px';
searchButton.style.backgroundColor = '#4A90E2'; // Add some cool color
searchButton.style.color = 'white';
searchButton.style.border = 'none';
searchButton.style.borderRadius = '3px';
searchButton.style.cursor = 'pointer';
searchButton.style.transition = 'transform 0.2s ease, background-color 0.3s ease'; // Add button hover effect
// Button hover effect
searchButton.onmouseenter = function() {
searchButton.style.backgroundColor = '#357ABD'; // Darken on hover
searchButton.style.transform = 'scale(1.05)'; // Slightly scale up
};
searchButton.onmouseleave = function() {
searchButton.style.backgroundColor = '#4A90E2'; // Revert to original color
searchButton.style.transform = 'scale(1)'; // Revert to original size
};
// Search function
const searchServer = () => {
const serverName = searchInput.value.trim();
if (serverName) {
// Get the list of servers from the sidebar
const servers = Array.from(document.querySelectorAll('[data-list-id="guildsnav"] [aria-label]'));
const matchedServer = servers.find(server =>
server.getAttribute('aria-label').toLowerCase().includes(serverName.toLowerCase())
);
if (matchedServer) {
matchedServer.click(); // Click the server to open it
} else {
alert('Server not found!');
}
}
};
searchButton.onclick = searchServer;
searchInput.addEventListener('keydown', function (e) {
if (e.key === 'Enter') {
searchServer(); // Call search function when Enter key is pressed
}
});
searchPopup.appendChild(searchButton);
document.body.appendChild(searchPopup);
// Show popup with sliding and fading animation
const showPopup = () => {
searchPopup.style.display = 'block';
setTimeout(() => {
searchPopup.style.opacity = '1';
searchPopup.style.right = '20px'; // Slide it into view
}, 10);
};
// Hide popup with sliding out animation
const hidePopup = () => {
searchPopup.style.opacity = '0';
searchPopup.style.right = '-250px'; // Slide it back out
setTimeout(() => {
searchPopup.style.display = 'none';
}, 300);
};
// Show/hide popup and label on icon click with animation
searchIcon.onclick = function() {
if (searchPopup.style.display === 'none' || searchPopup.style.opacity === '0') {
showPopup();
showDesignerLabel(); // Show "Designed by @hakav" label when the icon is clicked
searchInput.focus();
} else {
hidePopup();
}
};
// Hide popup when clicking outside with animation
window.onclick = function(event) {
if (!searchIcon.contains(event.target) && !searchPopup.contains(event.target)) {
hidePopup();
}
};
})();