Ping: ${server.ping}ms
${location.city}, ${location.country.name}
FPS: ${Math.round(server.fps)}
`;
const joinButton = cardItem.querySelector(".rbx-game-server-join");
joinButton.addEventListener("click", () => {
console.log(`Roblox.GameLauncher.joinGameInstance(${gameId}, "${server.id}")`);
showLoadingOverlay();
Roblox.GameLauncher.joinGameInstance(gameId, server.id); // join server
});
const container = adjustJoinButtonContainer(joinButton);
const inviteButton = createInviteButton(gameId, server.id);
container.appendChild(inviteButton);
serverCard.appendChild(cardItem);
serverListContainer.appendChild(serverCard);
});
};
// Add event listeners to dropdowns
const countryFilter = document.getElementById('countryFilter');
const cityFilter = document.getElementById('cityFilter');
countryFilter.addEventListener('change', () => {
displayFilteredServers(countryFilter.value, cityFilter.value);
});
cityFilter.addEventListener('change', () => {
displayFilteredServers(countryFilter.value, cityFilter.value);
});
// Display all servers initially
displayFilteredServers("", "");
setTimeout(() => {
hideMessage();
}, 3000);
} catch (error) {
console.error("Error rebuilding server list:", error);
notifications('An error occurred while filtering servers. Please try again.', 'error', '😔');
messageElement.textContent = "An error occurred while filtering servers. Please try again.";
Loadingbar(false); // enable loading bar
} finally {
Loadingbar(false); // omg bruh i just realzed i could put this here but now im too lazy to thorugh the code to remove all of the loading bar disabl functions
}
}
// Function to extract the game ID from the URL
function extractGameId() {
const url = window.location.href;
const match = url.match(/roblox\.com\/games\/(\d+)/);
if (match && match[1]) {
return match[1]; // Return the game ID
}
return null; // Return null if no game ID is found
}
// Log the game ID to the console
const gameId = extractGameId();
// Function to create and append the Invite button
function createInviteButton(placeId, serverId) { // too lazy to comment this function tbh just ready the name
const inviteButton = document.createElement('button');
inviteButton.textContent = 'Invite';
inviteButton.className = 'btn-control-xs btn-primary-md btn-min-width btn-full-width';
inviteButton.style.width = '25%';
inviteButton.style.marginLeft = '5px';
inviteButton.style.padding = '4px 8px';
inviteButton.style.fontSize = '12px';
inviteButton.style.borderRadius = '8px';
inviteButton.style.backgroundColor = '#393b3d';
inviteButton.style.borderColor = '#bdbebe';
inviteButton.style.color = '#bdbebe';
inviteButton.style.cursor = 'pointer';
inviteButton.style.fontWeight = '500';
inviteButton.style.textAlign = 'center';
inviteButton.style.whiteSpace = 'nowrap';
inviteButton.style.verticalAlign = 'middle';
inviteButton.style.lineHeight = '100%';
inviteButton.style.fontFamily = 'Builder Sans, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif';
inviteButton.style.textRendering = 'auto';
inviteButton.style.webkitFontSmoothing = 'antialiased';
inviteButton.style.mozOsxFontSmoothing = 'grayscale';
inviteButton.addEventListener('mouseenter', () => {
inviteButton.style.color = '#ffffff';
inviteButton.style.borderColor = '#ffffff';
});
inviteButton.addEventListener('mouseleave', () => {
inviteButton.style.color = '#bdbebe';
inviteButton.style.borderColor = '#bdbebe';
});
inviteButton.addEventListener('click', () => {
const inviteLink = `https://oqarshi.github.io/Invite/?placeid=${placeId}&serverid=${serverId}`;
navigator.clipboard.writeText(inviteLink).then(() => {
console.log(`Invite link copied to clipboard: ${inviteLink}`);
notifications('Success! Invite link copied to clipboard!', 'success', '🎉');
}).catch(() => {
console.error('Failed to copy invite link.');
notifications('Error: Failed to copy invite link', 'error', '😔');
});
});
return inviteButton;
}
// Function to adjust the Join button and its container
function adjustJoinButtonContainer(joinButton) {
const container = document.createElement('div');
container.style.display = 'flex';
container.style.width = '100%';
joinButton.style.width = '75%';
joinButton.parentNode.insertBefore(container, joinButton);
container.appendChild(joinButton);
return container;
}
/*********************************************************************************************************************************************************************************************************************************************
Functions for the 6th button.
*********************************************************************************************************************************************************************************************************************************************/
function calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // Radius of the Earth in kilometers
const dLat = (lat2 - lat1) * (Math.PI / 180);
const dLon = (lon2 - lon1) * (Math.PI / 180);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c; // Distance in kilometers
}
function getUserLocation() {
return new Promise((resolve, reject) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
(position) => {
notifications('We successfully detected your location.\nConnecting you to a nearby server in about 15-20 seconds. 😊', 'success', '🌎');
disableLoadMoreButton(true);
disableFilterButton(true);
Loadingbar(true);
resolve({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
});
},
(error) => {
console.error('Error getting user location:', error);
disableLoadMoreButton(true);
disableFilterButton(true);
Loadingbar(true);
notifications('Error getting user location.\nPlease enable location permissions for this website.\nAssuming your location is New York in the United States.', 'error', '⚠️');
// Fallback to a default location (e.g., New York City)
resolve({
latitude: 40.7128, // Default latitude (New York City)
longitude: -74.0060, // Default longitude (New York City)
});
}
);
} else {
console.error('Geolocation is not supported by this browser.');
disableLoadMoreButton(true);
disableFilterButton(true);
Loadingbar(true);
notifications('Error getting user location.\nThis browser doesent support location.\nAssuming your location is New York in the United States.', 'error', '⚠️');
// Fallback to a default location (e.g., New York City)
resolve({
latitude: 40.7128, // Default latitude (New York City)
longitude: -74.0060, // Default longitude (New York City)
});
}
});
}
/*********************************************************************************************************************************************************************************************************************************************
Functions for the 7th button.
*********************************************************************************************************************************************************************************************************************************************/
async function auto_join_small_server() {
// Disable the "Load More" button and show the loading bar
Loadingbar(true);
disableFilterButton(true);
disableLoadMoreButton();
// Get the game ID from the URL
const gameId = window.location.pathname.split('/')[2];
// Retry mechanism for 429 errors
let retries = 3; // Number of retries
let success = false;
while (retries > 0 && !success) {
try {
// Fetch server data using GM_xmlhttpRequest
const data = await new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: "GET",
url: `https://games.roblox.com/v1/games/${gameId}/servers/public?sortOrder=1&excludeFullGames=true&limit=100`,
onload: function(response) {
if (response.status === 429) {
reject('429: Too Many Requests');
} else if (response.status >= 200 && response.status < 300) {
resolve(JSON.parse(response.responseText));
} else {
reject(`HTTP error: ${response.status}`);
}
},
onerror: function(error) {
reject(error);
},
});
});
// Find the server with the lowest player count
let minPlayers = Infinity;
let targetServer = null;
for (const server of data.data) {
if (server.playing < minPlayers) {
minPlayers = server.playing;
targetServer = server;
}
}
if (targetServer) {
// Join the server with the lowest player count
showLoadingOverlay();
Roblox.GameLauncher.joinGameInstance(gameId, targetServer.id);
notifications(`Joining a server with ${targetServer.playing} player(s).`, 'success', '🚀');
success = true; // Mark as successful
} else {
notifications('No available servers found.', 'error', '⚠️');
break; // Exit the loop if no servers are found
}
} catch (error) {
if (error === '429: Too Many Requests' && retries > 0) {
console.log('Rate limited. Retrying in 10 seconds...');
notifications('Rate limited. Retrying in 10 seconds...', 'warning', '⏳');
await delay(10000); // Wait 10 seconds before retrying
retries--;
} else {
console.error('Error fetching server data:', error);
notifications('Error: Failed to fetch server data. Please try again later.', 'error', '⚠️');
break; // Exit the loop if it's not a 429 error or no retries left
}
}
}
// Hide the loading bar and enable the filter button
Loadingbar(false);
disableFilterButton(false);
}
/*********************************************************************************************************************************************************************************************************************************************
Functions for the 8th button.
*********************************************************************************************************************************************************************************************************************************************/
function find_user_server_tab() {
// Create the overlay (backdrop)
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
`;
document.body.appendChild(overlay);
// Create the popup container
const popup = document.createElement('div');
popup.className = 'player-count-popup';
popup.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(30, 32, 34);
padding: 20px;
border-radius: 10px;
z-index: 10000;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 300px;
opacity: 0;
transition: opacity 0.3s ease, transform 0.3s ease;
`;
// Add a close button in the top-right corner (bigger size)
const closeButton = document.createElement('button');
closeButton.innerHTML = '×'; // Using '×' for the close icon
closeButton.style.cssText = `
position: absolute;
top: 10px;
right: 10px;
background: transparent;
border: none;
color: #ffffff;
font-size: 24px; /* Increased font size */
cursor: pointer;
width: 36px; /* Increased size */
height: 36px; /* Increased size */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease, color 0.3s ease;
`;
closeButton.addEventListener('mouseenter', () => {
closeButton.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
closeButton.style.color = '#ff4444';
});
closeButton.addEventListener('mouseleave', () => {
closeButton.style.backgroundColor = 'transparent';
closeButton.style.color = '#ffffff';
});
// Add a title
const title = document.createElement('h3');
title.textContent = 'Enter Username';
title.style.cssText = `
color: white;
margin: 0;
font-size: 18px;
font-weight: 500;
`;
popup.appendChild(title);
// Add an input box for the username
const usernameInput = document.createElement('input');
usernameInput.type = 'text';
usernameInput.placeholder = 'Username';
usernameInput.style.cssText = `
width: 80%;
padding: 8px;
font-size: 16px;
border: 1px solid #444;
border-radius: 5px;
background-color: #1a1a1a;
color: white;
outline: none;
`;
popup.appendChild(usernameInput);
// Add a confirm button with dark, blackish style
const confirmButton = document.createElement('button');
confirmButton.textContent = 'Confirm';
confirmButton.style.cssText = `
padding: 8px 20px;
font-size: 16px;
background-color: #1a1a1a; /* Dark blackish color */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
`;
confirmButton.addEventListener('mouseenter', () => {
confirmButton.style.backgroundColor = '#333'; /* Slightly lighter on hover */
confirmButton.style.transform = 'scale(1.05)';
});
confirmButton.addEventListener('mouseleave', () => {
confirmButton.style.backgroundColor = '#1a1a1a';
confirmButton.style.transform = 'scale(1)';
});
// Handle confirm button click
confirmButton.addEventListener('click', () => {
const username = usernameInput.value.trim();
if (username) {
// Check if the username is between 3 and 20 characters
if (username.length >= 3 && username.length <= 20) {
// Call the function with the username
FindPlayerGameServer(username);
notifications("Searching for the user's server...", "info", "");
fadeOutAndRemove_7th(popup, overlay);
} else {
// Show an error notification if the username is not within the required length
notifications('Error: Username must be between 3 and 20 characters', 'error', '⚠️');
}
} else {
notifications('Error: Please enter a username', 'error', '⚠️');
}
});
// Append the popup to the body
document.body.appendChild(popup);
// Fade in the overlay and popup
setTimeout(() => {
overlay.style.opacity = '1';
popup.style.opacity = '1';
popup.style.transform = 'translate(-50%, -50%) scale(1)';
}, 10);
/*******************************************************
name of function: fadeOutAndRemove_7th
description: Fades out and removes the popup and overlay.
*******************************************************/
function fadeOutAndRemove_7th(popup, overlay) {
popup.style.opacity = '0';
popup.style.transform = 'translate(-50%, -50%) scale(0.9)';
overlay.style.opacity = '0';
setTimeout(() => {
popup.remove();
overlay.remove();
}, 300); // Match the duration of the transition
}
// Close the popup when clicking outside
overlay.addEventListener('click', () => {
fadeOutAndRemove_7th(popup, overlay);
});
// Close the popup when the close button is clicked
closeButton.addEventListener('click', () => {
fadeOutAndRemove_7th(popup, overlay);
});
popup.appendChild(confirmButton);
popup.appendChild(closeButton);
}
async function FindPlayerGameServer(playerName) {
disableLoadMoreButton();
Loadingbar(true);
disableFilterButton(true);
const wait = milliseconds => new Promise(resolve => setTimeout(resolve, milliseconds));
const fetchData = async (url, options = {}) => {
if (!options.headers) options.headers = {};
return fetch(url, options)
.then(response => response.json())
.catch(error => console.error("Fetch error:", error));
};
const fetchDataGM = (url, options = {}) => {
return new Promise((resolve, reject) => {
GM_xmlhttpRequest({
method: options.method || 'GET',
url: url,
headers: options.headers || {},
anonymous: true, // Prevents sending cookies
nocache: true, // Prevents caching
onload: function(response) {
try {
const parsedData = JSON.parse(response.responseText);
resolve(parsedData);
} catch (error) {
console.error("JSON parsing error:", error);
reject(error);
}
},
onerror: function(error) {
console.error("Request error:", error);
reject(error);
}
});
});
};
console.log(`Initiating search for player: ${playerName}`);
const gameId = window.location.href.split("/")[4];
console.log(`Game ID identified: ${gameId}`);
let userId;
try {
console.log(`Retrieving user ID for player: ${playerName}`);
const userProfile = await fetch(`https://www.roblox.com/users/profile?username=${playerName}`);
if (!userProfile.ok) {
notifications("Error: User does not exist on Roblox!", "error", "⚠️");
Loadingbar(false);
disableFilterButton(false);
throw `Player "${playerName}" not found`;
}
userId = userProfile.url.match(/\d+/)[0];
console.log(`User ID retrieved: ${userId}`);
} catch (error) {
console.error("Error:", error);
return `Error: ${error}`;
}
console.log(`Fetching avatar thumbnail for user ID: ${userId}`);
const avatarThumbnail = (await fetchData(`https://thumbnails.roblox.com/v1/users/avatar-headshot?userIds=${userId}&format=Png&size=150x150`)).data[0].imageUrl;
console.log(`Avatar thumbnail URL: ${avatarThumbnail}`);
let pageCursor = null;
let playerFound = false;
let totalServersChecked = 0;
let startTime = Date.now();
// Show the search progress popup with the player's thumbnail
const progressPopup = showSearchProgressPopup(avatarThumbnail);
while (true) {
let apiUrl = `https://games.roblox.com/v1/games/${gameId}/servers/0?limit=100`;
if (pageCursor) apiUrl += "&cursor=" + pageCursor;
console.log(`Accessing servers with URL: ${apiUrl}`);
const serverList = await fetchDataGM(apiUrl, {
credentials: "omit"
}).catch(() => null);
if (serverList && serverList.data) {
console.log(`Discovered ${serverList.data.length} servers in this set.`);
for (let index = 0; index < serverList.data.length; index++) {
const server = serverList.data[index];
if (!playerFound) {
totalServersChecked++;
// Calculate time elapsed
const timeElapsed = Math.floor((Date.now() - startTime) / 1000);
// Update the progress popup
updateSearchProgressPopup(
progressPopup,
totalServersChecked,
timeElapsed
);
if (server.playerTokens.length === 0) {
console.log(`Server ${index + 1} is empty. Proceeding to next server.`);
continue;
}
console.log(`Inspecting server ${index + 1} hosting ${server.playing} players...`);
let thumbnailData;
while (true) {
let requestBody = [];
const generateRequestEntry = (playerToken) => ({
requestId: `0:${playerToken}:AvatarHeadshot:150x150:png:regular`,
type: "AvatarHeadShot",
targetId: 0,
token: playerToken,
format: "png",
size: "150x150"
});
server.playerTokens.forEach(token => {
requestBody.push(generateRequestEntry(token));
});
try {
console.log(`Fetching thumbnails for ${server.playerTokens.length} player(s)...`);
thumbnailData = await fetchData("https://thumbnails.roblox.com/v1/batch", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json"
},
body: JSON.stringify(requestBody)
});
console.log("Thumbnail Data Response:", thumbnailData);
break;
} catch (error) {
console.error("Thumbnail retrieval error:", error);
await wait(1000);
}
}
if (!thumbnailData.data) {
console.log("No thumbnail data available. Moving to next server.");
continue;
}
for (let thumbIndex = 0; thumbIndex < thumbnailData.data.length; thumbIndex++) {
const thumbnail = thumbnailData.data[thumbIndex];
if (thumbnail && thumbnail.imageUrl === avatarThumbnail) {
playerFound = true;
console.log(`Player located in server ${index + 1}!`);
notifications("Found User's Server! Joining Server...", "success", "🚀");
showLoadingOverlay();
Roblox.GameLauncher.joinGameInstance(gameId, server.id);
fadeOutAndRemove_7th_progress(progressPopup.popup, progressPopup.overlay);
Loadingbar(false);
disableFilterButton(false);
return {
gameId,
serverId: server.id,
currentPlayers: server.playing,
maximumPlayers: server.maxPlayers,
};
}
}
} else {
break;
}
}
pageCursor = serverList.nextPageCursor;
if (!pageCursor || playerFound) break;
else {
console.log("Pausing for 1 seconds before next server batch...");
await wait(1);
}
} else {
console.log("Server fetch failed. Retrying in 10 seconds...");
notifications("Got rate limited. Waiting 10 seconds...", "info", "❗")
await wait(10000);
}
}
if (!playerFound) {
// Wait for 2 seconds before calling another function
setTimeout(() => {
fadeOutAndRemove_7th_progress(progressPopup.popup, progressPopup.overlay);
notifications("User not found playing this game!", "error", "⚠️");
}, 2000); // 2000 milliseconds = 2 seconds
// Existing logic (unchanged)
Loadingbar(false);
disableFilterButton(false);
console.log(`Player not found in the searched servers (${totalServersChecked} servers checked)`);
// Update the progress popup with the final count
updateSearchProgressPopup(
progressPopup,
totalServersChecked,
Math.floor((Date.now() - startTime) / 1000),
true
);
return `Player not found in the searched servers (${totalServersChecked} servers checked)`;
}
}
/*******************************************************
name of function: showSearchProgressPopup
description: Creates and displays a popup showing the search progress.
*******************************************************/
function showSearchProgressPopup(avatarThumbnail) {
// Create the overlay (backdrop)
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
opacity: 0;
transition: opacity 0.3s ease;
`;
document.body.appendChild(overlay);
// Create the popup container
const popup = document.createElement('div');
popup.className = 'search-progress-popup';
popup.style.cssText = `
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(30, 32, 34);
padding: 20px;
border-radius: 10px;
z-index: 10000; /* Higher than overlay */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
width: 300px;
opacity: 0; /* Start invisible */
transition: opacity 0.3s ease, transform 0.3s ease;
`;
// Add a title
const title = document.createElement('h3');
title.textContent = 'Searching for Player...';
title.style.cssText = `
color: white;
margin: 0;
font-size: 18px;
font-weight: 500;
`;
popup.appendChild(title);
// Add the player's thumbnail
const thumbnail = document.createElement('img');
thumbnail.src = avatarThumbnail;
thumbnail.style.cssText = `
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
`;
popup.appendChild(thumbnail);
// Add a progress text for servers searched
const serversSearchedText = document.createElement('p');
serversSearchedText.textContent = 'Servers searched: 0';
serversSearchedText.style.cssText = `
color: white;
margin: 0;
font-size: 16px;
`;
popup.appendChild(serversSearchedText);
// Add a text for time elapsed
const timeElapsedText = document.createElement('p');
timeElapsedText.textContent = 'Time elapsed: 0s';
timeElapsedText.style.cssText = `
color: white;
margin: 0;
font-size: 16px;
`;
popup.appendChild(timeElapsedText);
// Append the popup to the body
document.body.appendChild(popup);
// Fade in the overlay and popup
setTimeout(() => {
overlay.style.opacity = '1';
popup.style.opacity = '1';
popup.style.transform = 'translate(-50%, -50%) scale(1)';
}, 10);
return {
popup,
overlay,
serversSearchedText,
timeElapsedText,
};
}
/*******************************************************
name of function: updateSearchProgressPopup
description: Updates the search progress popup with the current count.
*******************************************************/
function updateSearchProgressPopup(
progressPopup,
totalServersChecked,
timeElapsed,
isFinal = false
) {
progressPopup.serversSearchedText.textContent = `Servers searched: ${totalServersChecked}`;
progressPopup.timeElapsedText.textContent = `Time elapsed: ${timeElapsed}s`;
if (isFinal) {
progressPopup.serversSearchedText.textContent += ' (Search completed)';
}
}
/*******************************************************
name of function: fadeOutAndRemove
description: Fades out and removes the popup and overlay.
*******************************************************/
function fadeOutAndRemove_7th_progress(popup, overlay) {
popup.style.opacity = '0';
popup.style.transform = 'translate(-50%, -50%) scale(0.9)';
overlay.style.opacity = '0';
setTimeout(() => {
popup.remove();
overlay.remove();
}, 300); // Match the duration of the transition
}
/*********************************************************************************************************************************************************************************************************************************************
Functions for the 9th button.
*********************************************************************************************************************************************************************************************************************************************/
function credits() {
// Inject CSS for the popup
const css = `
.credits-popup {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
animation: fadeIn 0.5s ease-in-out forwards;
}
.credits-popup-content {
background-color: #000;
padding: 20px;
border-radius: 10px;
width: 300px;
box-shadow: 0 5px 15px rgba(255, 255, 255, 0.1);
text-align: center;
position: relative;
color: #fff;
}
.credits-popup-content h2 {
margin-top: 0;
color: #fff;
}
.credits-popup-content .version {
font-size: 14px;
color: #aaa;
margin-bottom: 10px;
}
.credits-popup-content ul {
list-style-type: none;
padding: 0;
}
.credits-popup-content ul li {
margin: 10px 0;
color: #bbb;
}
.credits-popup-content a {
color: #4da6ff;
text-decoration: none;
}
.credits-popup-content a:hover {
text-decoration: underline;
}
.credits-popup-close {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
color: #fff;
}
.credits-popup-close:hover {
color: #ccc;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
`;
// Add CSS to the document
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
document.head.appendChild(style);
// Create the popup HTML
const popupHTML = `
`;
// Add the popup to the document
const popupContainer = document.createElement('div');
popupContainer.innerHTML = popupHTML;
document.body.appendChild(popupContainer);
// Add event listener to close the popup with animation
const closeButton = document.querySelector('.credits-popup-close');
const popup = document.querySelector('.credits-popup');
closeButton.addEventListener('click', () => {
popup.style.animation = 'fadeOut 0.5s ease-in-out forwards';
setTimeout(() => {
popup.remove(); // Remove the popup from the DOM after animation
}, 500); // Match the duration of the fadeOut animation
});
}
/*********************************************************************************************************************************************************************************************************************************************
End of: This is all the functions for the 8 buttons
*********************************************************************************************************************************************************************************************************************************************/
/*********************************************************************************************************************************************************************************************************************************************
The Universal Functions
*********************************************************************************************************************************************************************************************************************************************/
function showFirstTimePopup() {
// Check if the localStorage item exists
if (!localStorage.getItem('firstTimeDownload')) {
// Inject CSS for the popup
const css = `
.first-time-popup {
display: flex;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
animation: fadeIn 0.5s ease-in-out forwards;
}
.first-time-popup-content {
background-color: #1a1a1a;
padding: 30px;
border-radius: 15px;
width: 350px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
text-align: center;
position: relative;
color: #fff;
transform: scale(0.9);
animation: scaleUp 0.5s ease-in-out forwards;
}
.first-time-popup-content h2 {
margin-top: 0;
color: #4da6ff; /* Blue color for a calm but important feel */
font-size: 28px;
margin-bottom: 15px;
}
.first-time-popup-content p {
font-size: 16px;
color: #bbb;
margin-bottom: 10px;
}
.first-time-popup-content .countdown {
font-size: 16px;
color: #aaa;
margin-bottom: 20px;
font-weight: bold;
}
.first-time-popup-content a {
color: #4da6ff;
text-decoration: none;
transition: color 0.3s ease;
}
.first-time-popup-content a:hover {
color: #80bfff;
text-decoration: underline;
}
.first-time-popup-close {
position: absolute;
top: 15px;
right: 15px;
font-size: 28px;
font-weight: bold;
cursor: pointer;
color: #fff;
transition: color 0.3s ease;
opacity: 0.5; /* Make the close button look disabled */
pointer-events: none; /* Disable clicking */
}
.first-time-popup-close.active {
opacity: 1; /* Make the close button fully visible */
pointer-events: auto; /* Enable clicking */
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes scaleUp {
from { transform: scale(0.9); }
to { transform: scale(1); }
}
@keyframes scaleDown {
from { transform: scale(1); }
to { transform: scale(0.9); }
}
`;
// Add CSS to the document
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
document.head.appendChild(style);
// Create the popup HTML
const popupHTML = `
`;
// Add the popup to the document
const popupContainer = document.createElement('div');
popupContainer.innerHTML = popupHTML;
document.body.appendChild(popupContainer);
// Get the close button, popup, and countdown elements
const closeButton = document.querySelector('.first-time-popup-close');
const popup = document.querySelector('.first-time-popup');
const countdownTimer = document.getElementById('countdown-timer');
// Start the countdown
let countdown = 5;
const countdownInterval = setInterval(() => {
countdown--;
countdownTimer.innerHTML = `