- document.addEventListener("DOMContentLoaded", () => {

- const fivemTab = document.getElementById("fivemTab");

- const discordTab = document.getElementById("discordTab");

- const fivemContent = document.getElementById("fivemContent");

- const discordContent = document.getElementById("discordContent");

-

- const serverIpInput = document.getElementById("serverIp");

- const fivemSearchButton = document.getElementById("fivemSearchButton");

- const fivemErrorMessage = document.getElementById("fivemErrorMessage");

- const serverInfo = document.getElementById("serverInfo");

- const serverName = document.getElementById("serverName");

- const playerList = document.getElementById("playerList");

- const playerSearch = document.getElementById("playerSearch");

- const playerSearchInput = document.getElementById("playerSearchInput");

- const searchField = document.getElementById("searchField");

-

- const discordIdInput = document.getElementById("discordId");

- const discordSearchButton = document.getElementById("discordSearchButton");

- const discordErrorMessage = document.getElementById("discordErrorMessage");

- const userInfo = document.getElementById("userInfo");

- const avatar = document.getElementById("avatar");

- const username = document.getElementById("username");

- const globalName = document.getElementById("globalName");

- const userId = document.getElementById("userId");

- const createdAt = document.getElementById("createdAt");

- const badges = document.getElementById("badges");

-

- let serverData = null;

-

- fivemTab.addEventListener("click", () => switchTab("fivem"));

- discordTab.addEventListener("click", () => switchTab("discord"));

- fivemSearchButton.addEventListener("click", fetchServerInfo);

- discordSearchButton.addEventListener("click", fetchDiscordUserInfo);

- playerSearchInput.addEventListener("input", filterPlayers);

- searchField.addEventListener("change", filterPlayers);

-

- function switchTab(tab) {

- if (tab === "fivem") {

- fivemTab.classList.add("active");

- discordTab.classList.remove("active");

- fivemContent.classList.add("active");

- fivemContent.classList.remove("hidden");

- discordContent.classList.remove("active");

- discordContent.classList.add("hidden");

- } else {

- discordTab.classList.add("active");

- fivemTab.classList.remove("active");

- discordContent.classList.add("active");

- discordContent.classList.remove("hidden");

- fivemContent.classList.remove("active");

- fivemContent.classList.add("hidden");

- }

- }

-

- async function fetchServerInfo() {

- const serverIp = serverIpInput.value.trim();

- if (!serverIp) return;

-

- try {

- fivemErrorMessage.textContent = "";

- fivemSearchButton.textContent = "Searching...";

- fivemSearchButton.disabled = true;

- serverInfo.classList.add("hidden");

-

- const response = await fetch(

- `https://servers-frontend.fivem.net/api/servers/single/${serverIp}`,

- );

- if (!response.ok) {

- throw new Error("Server not found or API error");

- }

-

- serverData = await response.json();

- displayServerInfo();

- } catch (error) {

- fivemErrorMessage.textContent =

- "Failed to fetch server information. Please check the IP and try again.";

- } finally {

- fivemSearchButton.textContent = "Search";

- fivemSearchButton.disabled = false;

- }

- }

-

- function displayServerInfo() {

- serverName.textContent = `${stripColorCodes(serverData.Data.hostname)} - ${serverData.Data.clients}/${serverData.Data.sv_maxclients} Players`;

- serverInfo.classList.remove("hidden");

- playerSearch.classList.remove("hidden");

- filterPlayers();

- }

-

- function filterPlayers() {

- const searchTerm = playerSearchInput.value.toLowerCase();

- const field = searchField.value;

-

- const filteredPlayers = serverData.Data.players.filter((player) => {

- if (field === "id") {

- return player.id.toString().includes(searchTerm);

- }

- return player.name.toLowerCase().includes(searchTerm);

- });

-

- displayPlayers(filteredPlayers);

- }

-

- function displayPlayers(players) {

- playerList.innerHTML = "";

- players.forEach((player) => {

- const playerCard = createPlayerCard(player);

- playerList.appendChild(playerCard);

- });

- }

-

- function createPlayerCard(player) {

- const card = document.createElement("div");

- card.className = "player-card";

-

- const header = document.createElement("div");

- header.className = "player-header";

- header.innerHTML = `

-

-

-

- `;

-

- const identifiers = document.createElement("div");

- identifiers.className = "player-identifiers";

- identifiers.innerHTML = "

Identifiers:

";

-

- player.identifiers.forEach((identifier) => {

- const item = document.createElement("div");

- item.className = "identifier-item";

- item.innerHTML = `

- ${identifier}

-

- content_copy

-

- `;

- identifiers.appendChild(item);

- });

-

- card.appendChild(header);

- card.appendChild(identifiers);

-

- return card;

- }

-

- function stripColorCodes(text) {

- return text.replace(/\^[0-9]/g, "");

- }

-

- async function fetchDiscordUserInfo() {

- const discordId = discordIdInput.value.trim();

- if (!discordId) return;

-

- try {

- discordErrorMessage.textContent = "";

- discordSearchButton.textContent = "Searching...";

- discordSearchButton.disabled = true;

- userInfo.classList.add("hidden");

-

- const response = await fetch(

- `https://discordlookup.mesalytic.moe/v1/user/${discordId}`,

- );

- if (!response.ok) {

- throw new Error("User not found or API error");

- }

-

- const userData = await response.json();

- displayDiscordUserInfo(userData);

- } catch (error) {

- discordErrorMessage.textContent =

- "Failed to fetch user information. Please check the ID and try again.";

- } finally {

- discordSearchButton.textContent = "Search";

- discordSearchButton.disabled = false;

- }

- }

-

- function displayDiscordUserInfo(user) {

- avatar.src =

- user.avatar.link || "https://cdn.discordapp.com/embed/avatars/0.png";

- username.textContent = user.username;

- globalName.textContent = user.global_name || "";

- userId.textContent = user.id;

- createdAt.textContent = new Date(user.created_at).toLocaleString();

-

- badges.innerHTML = "";

- user.badges.forEach((badge) => {

- const badgeElement = document.createElement("span");

- badgeElement.className = "badge";

- badgeElement.textContent = badge.replace(/_/g, " ");

- badges.appendChild(badgeElement);

- });

-

- userInfo.classList.remove("hidden");

- }

-

- document.addEventListener("click", (e) => {

- if (e.target.closest(".copy-button")) {

- const button = e.target.closest(".copy-button");

- let text = button.getAttribute("data-clipboard");

- text = text.split(":")[1];

-

- navigator.clipboard

- .writeText(text)

- .then(() => {

- const icon = button.querySelector(".material-icons");

- icon.textContent = "check";

- setTimeout(() => {

- icon.textContent = "content_copy";

- }, 1000);

- })

- .catch((err) => {

- console.error("Failed to copy text: ", err);

- });

- }

- });

- });

- body {

- font-family: "Orbitron", monospace;

- background-color: black;

- color: #4ade80;

- min-height: 100vh;

- margin: 0;

- padding: 0;

- }

-

- .container {

- max-width: 1200px;

- margin: 0 auto;

- padding: 2rem;

- }

-

- h1,

- h2 {

- text-align: center;

- color: #4ade80;

- }

-

- .tabs {

- display: flex;

- justify-content: center;

- margin-bottom: 1rem;

- }

-

- .tab-button {

- font-family: "Orbitron", monospace;

- background-color: #111;

- color: #4ade80;

- border: 1px solid #4ade80;

- padding: 0.5rem 1rem;

- cursor: pointer;

- transition: background-color 0.3s;

- }

-

- .tab-button:hover,

- .tab-button.active {

- background-color: #15803d;

- color: black;

- }

-

- .tab-content {

- display: none;

- }

-

- .tab-content.active {

- display: block;

- }

-

- .search-container {

- display: flex;

- gap: 0.5rem;

- margin-bottom: 1rem;

- }

-

- input,

- select,

- button {

- font-family: "Orbitron", monospace;

- padding: 0.5rem;

- border: 1px solid #4ade80;

- background-color: black;

- color: #4ade80;

- }

-

- input,

- select {

- flex-grow: 1;

- }

-

- button {

- background-color: #15803d;

- color: black;

- cursor: pointer;

- transition: background-color 0.3s;

- }

-

- .error-message {

- color: #ef4444;

- margin-bottom: 1rem;

- }

-

- .hidden {

- display: none;

- }

-

- .player-grid {

- display: grid;

- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

- gap: 1rem;

- }

-

- .player-card,

- .profile-card {

- background-color: #111;

- border: 1px solid #4ade80;

- border-radius: 8px;

- padding: 1rem;

- box-shadow: 0 2px 10px 0 rgba(74, 222, 128, 0.2);

- overflow: hidden;

- }

-

- .player-header,

- .profile-header {

- margin-bottom: 1rem;

- }

-

- .player-name,

- .profile-name h2 {

- font-weight: bold;

- color: #4ade80;

- margin: 0;

- display: table;

- }

-

- .player-ping,

- .profile-name span {

- font-size: 0.875rem;

- color: #22c55e;

- }

-

- .player-id,

- .profile-details {

- font-size: 0.875rem;

- }

-

- .player-identifiers,

- .profile-details p {

- margin-top: 0.5rem;

- font-family: "Source Code Pro", monospace;

- }

-

- .identifier-item,

- .badge {

- display: flex;

- justify-content: space-between;

- align-items: center;

- margin-bottom: 0.25rem;

- word-break: break-all;

- }

-

- .copy-button {

- background: none;

- border: none;

- color: #22c55e;

- cursor: pointer;

- padding: 0;

- display: flex;

- align-items: center;

- justify-content: center;

- font-size: 1rem;

- }

-

- .profile-picture {

- width: 80px;

- height: 80px;

- margin-right: 1rem;

- }

-

- .profile-picture img {

- width: 100%;

- height: 100%;

- border-radius: 50%;

- object-fit: cover;

- border: 2px solid #4ade80;

- }

-

- .badge {

- display: inline-block;

- margin-right: 0.5rem;

- padding: 0.2rem 0.5rem;

- background-color: #15803d;

- color: #4ade80;

- border-radius: 4px;

- font-size: 0.8rem;

- }

-

- .identifier-text {

- flex-grow: 1;

- margin-right: 0.5rem;

- overflow: hidden;

- text-overflow: ellipsis;

- }

-

- .material-icons {

- font-size: 18px;

- }

-

- .material-icons:hover {

- font-size: 20px;

- }

- theme roboto

-

- Hello World my name is