☰

Snay.io Public Skins Lib

Snay.io Public Lib

// ==UserScript==
// @name         Snay.io Public Skins Lib
// @namespace    http://tampermonkey.net/
// @version      1.7
// @description  Snay.io Public Lib
// @author       GravityG
// @match        https://www.snay.io/*
// @grant        GM_openInTab
// @grant        GM_info
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
// @license MIT
// ==/UserScript==

/* global bootstrap */

(async function () {
    'use strict';

    // Add Bootstrap CSS to the document head
    const bootstrapCSS = document.createElement('link');
    bootstrapCSS.rel = 'stylesheet';
    bootstrapCSS.href = 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css';
    document.head.appendChild(bootstrapCSS);

    console.log('Bootstrap:', typeof bootstrap);

    // Add custom CSS for styling, animations, and the navbar button
    const customCSS = document.createElement('style');
    customCSS.innerHTML = `
    nav.navbar {
        background-color: rgb(43, 48, 53) !important;
        color: white;
        position: relative;
    }
    .btn-shine {
        position: absolute;
        top: 50%;
        left: 14.25rem; /* 9.5rem x 1.5 */
        transform: translate(-50%, -50%);
        padding: 18px 72px; /* 12px 48px x 1.5 */
        color: #fff;
        background: linear-gradient(to right, #bed7f7 10%, #79aef2 10%, #868686 20%);
        background-position: 0;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: shine 3s infinite linear;
        animation-fill-mode: forwards;
        font-weight: 600;
        font-size: 24px; /* 16px x 1.5 */
        text-decoration: none;
        white-space: nowrap;
        font-family: "Poppins", sans-serif;
    }
    @keyframes shine {
        0% {
            background-position: 0;
        }
        60% {
            background-position: 215px;
        }
        100% {
            background-position: 215px;
        }
    }
    .search-container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        padding-right: 22.5px;
    }
    .skinurl-container {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
        flex-grow: 1;
        padding-right: 22.5px;
        align-items: flex-start;
        align-content: flex-start;
        height: auto;
    }
    .search-container .input {
        border: 3px solid transparent;
        width: 24.5em;
        height: 3.25em;
        padding-left: 1.2em;
        outline: none;
        overflow: hidden;
        background-color: #1d2024;
        color: white;
        border-radius: 15px;
        transition: all 0.5s;
        font-size: 1.56rem;
        font-weight: bold;
    }
    .search-container .input:hover,
    .search-container .input:focus {
        border: 3px solid #4A9DEC !important; /* 2px x 1.5 */
        box-shadow: 0px 0px 0px 10.5px rgb(74, 157, 236, 20%) !important; /* 7px x 1.5 */
        background-color: #1d2024 !important;
    }
    #mySkinsContainer, #favoritesContainer, #skinsContainer {
        display: flex;
        grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); /* 150px x 1.5 */
        gap: 30px; /* 20px x 1.5 */
        padding: 30px; /* 20px x 1.5 */
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0 auto;
        align-content: flex-start;
    }
    #skinsContainer::-webkit-scrollbar {
        width: 12px; /* 8px x 1.5 */
    }
    #skinsContainer::-webkit-scrollbar-thumb {
        background-color: #6c757d !important;
        border-radius: 15px !important; /* 10px x 1.5 */
    }
    #skinsContainer::-webkit-scrollbar-track {
        background-color: #1d2024 !important;
    }
    .skinItem {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0.9);
        filter: blur(10px);
        transition: all 0.5s ease-in-out;
    }
    .skinItem::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 213px;
    height: 213px;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    filter: contrast(1.2) brightness(0.6) saturate(1.75) url(#gaussianBlur);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.9;
    mask: radial-gradient(circle, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    }
    .skinItem.loaded {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    .skinItem > img {
        width: 195px; /* 130px x 1.5 */
        height: 195px; /* 130px x 1.5 */
        border-radius: 75%; /* 50% x 1.5 */
        object-fit: cover !important;
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .skinItem img:hover {
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    }
    .badge {
        margin-top: 15px; /* 10px x 1.5 */
        font-size: 1.35rem; /* 0.9rem x 1.5 */
        text-align: center;
        background-color: #0d6efd !important;
        color: white !important;
        padding: 7.5px 15px; /* 5px 10px x 1.5 */
        border-radius: 5px; /* 10px x 1.5 */
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .profile-image {
        margin-left: 30px; /* 20px x 1.5 */
        width: 50px; /* 40px x 1.5 */
        height: 50px; /* 40px x 1.5 */
        border-radius: 75%; /* 50% x 1.5 */
        cursor: pointer;
        border: 3px solid white; /* 2px x 1.5 */
    }
    .dropdown-menu.custom-dropdown-menu {
        min-width: 15rem;
        padding: 0.75rem 0;
        font-size: 2.25rem;
        color: var(--bs-body-color);
        background-color: #1d202496 !important;
        border-radius: 15px !important;
        box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15) !important;
        filter: drop-shadow(2px 9px 9px black);
    }
    .dropdown-menu.custom-dropdown-menu>li>a {
        display: block;
        padding: 4.5px 30px !important; /* 3px 20px x 1.5 */
        clear: both;
        font-weight: 400 !important;
        color: #fafafa !important;
        white-space: nowrap !important;
    }
    .dropdown-menu.custom-dropdown-menu>li>a:hover {
        background-color: #4A9DEC !important;
        color: white !important;
    }
    .dropdown-menu.custom-dropdown-menu .dropdown-item.disabled {
        color: #6c757d !important;
        cursor: not-allowed !important;
    }
    .multi-button {
        display: flex;
        justify-content: center;
        margin: 1.5rem auto; /* 1rem x 1.5 */
        width: fit-content;
    }
    .multi-button > button {
        font-size: 1.8rem; /* 1.2rem x 1.5 */
        padding: 0.75em 1.5em; /* 0.5em 1em x 1.5 */
        background: #fff;
        color: #4A5568;
        border: 0px solid #A0AEC0;
        margin: 0.15em; /* 0.1em x 1.5 */
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        box-shadow: 0 0 0 #BEE3F8;
        transform: translateY(0);
        cursor: pointer;
        font-weight: bold;
    }
    .multi-button > button:first-of-type {
        border-radius: 0.75em 0 0 0.75em; /* 0.5em x 1.5 */
    }
    .multi-button > button:last-of-type {
        border-radius: 0 0.75em 0.75em 0; /* 0.5em x 1.5 */
    }
    .multi-button > button:hover {
        background: #D53F8C;
        color: #fff;
        box-shadow: 0 0 1.2em 0 rgba(213, 63, 140, 0.8); /* 0 0 0.8em x 1.5 */
        transform: translateY(-0.3em); /* -0.2em x 1.5 */
    }
    .multi-button > button.active {
        background: #D53F8C !important;
        color: white !important;
        box-shadow: 0 0 1.2em 0 rgba(213, 63, 140, 0.8) !important; /* 0 0 0.8em x 1.5 */
        transform: translateY(-0.3em); /* -0.2em x 1.5 */
    }

    .button1 {
  position: absolute; /* Positions the button relative to its container */
  right: 10px;          /* Pushes the button to the far right */
  width: 4em;
  height: 4em;
  border: none;
  background: rgba(180, 83, 107, 0.11);
  border-radius: 5px;
  transition: background 0.5s;
  display: flex;      /* Flexbox ensures centering */
  justify-content: center;
  align-items: center;
}

.X, .Y {
  content: "";
  position: absolute;
  width: 2em;
  height: 2px; /* Adjust thickness for better visibility */
  background-color: #fff;
}

.X {
  transform: rotate(45deg);
}

.Y {
  transform: rotate(-45deg);
}

.button1:hover {
  background-color: rgb(211, 21, 21);
}

`;
document.head.appendChild(customCSS);


    const customMySkinsCSS = document.createElement('style');
    customMySkinsCSS.innerHTML = `
           .profile-upload {
            width: 150px;
            height: 150px;
            border-radius: 75%;
            cursor: pointer;
            border: 3px solid #add8e6;
           }
          .form-container {
            display: flex;
            margin-top: 10px !important;
            justify-content: center;
            align-items: flex-start; !important;
            gap: 5px; /* Add space between elements */
            margin-top: 0; /* Adjust as needed for spacing from the top */
          }
          .skin-name-input {
            position: relative;
            margin: 20px 0;
            width: 190px;
          }
          .skin-name-input input {
            background-color: transparent;
            border: 0;
            border-bottom: 2px #fff solid;
            display: block;
            width: 100%;
            padding: 15px 0;
            font-size: 18px;
            color: #fff;
          }
          .skin-name-input input:focus,
          .skin-name-input input:valid {
            outline: 0;
            border-bottom-color: lightblue;
          }
          .skin-name-input label {
            position: absolute;
            top: 15px;
            left: 0;
            pointer-events: none;
          }
          .skin-name-input label span {
            display: inline-block;
            font-size: 18px;
            min-width: 5px;
            color: #fff;
            transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          }
          .skin-name-input input:focus + label span,
          .skin-name-input input:valid + label span {
            color: lightblue;
            transform: translateY(-30px);
          }
          .submit-btn {
            background-color: lightblue;
            border: none;
            border-radius: 5px;
            color: #000;
            font-size: 18px;
            padding: 10px 15px;
            cursor: pointer;
            transition: background-color 0.3s ease;
          }
          .submit-btn:hover {
            background-color: #007acc;
            color: #fff;
          }
          .submit-btn:active {
            transform: scale(0.95);
          }
          .dot-spinner {
            --uib-size: 2.8rem;
            --uib-speed: .9s;
            --uib-color: #183153;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: var(--uib-size);
            width: var(--uib-size);
          }

          .dot-spinner__dot {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 100%;
            width: 100%;
          }

          .dot-spinner__dot::before {
            content: '';
            height: 20%;
            width: 20%;
            border-radius: 50%;
            background-color: #ffffff;
            transform: scale(0);
            opacity: 0.5;
            animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
            box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
          }

                    .dot-spinner__dot:nth-child(2) {
                      transform: rotate(45deg);
                    }

          .dot-spinner__dot:nth-child(2)::before {
            animation-delay: calc(var(--uib-speed) * -0.875);
          }

          .dot-spinner__dot:nth-child(3) {
            transform: rotate(90deg);
          }

          .dot-spinner__dot:nth-child(3)::before {
            animation-delay: calc(var(--uib-speed) * -0.75);
          }

          .dot-spinner__dot:nth-child(4) {
            transform: rotate(135deg);
          }

          .dot-spinner__dot:nth-child(4)::before {
            animation-delay: calc(var(--uib-speed) * -0.625);
          }

          .dot-spinner__dot:nth-child(5) {
            transform: rotate(180deg);
          }

          .dot-spinner__dot:nth-child(5)::before {
            animation-delay: calc(var(--uib-speed) * -0.5);
          }

          .dot-spinner__dot:nth-child(6) {
            transform: rotate(225deg);
          }

          .dot-spinner__dot:nth-child(6)::before {
            animation-delay: calc(var(--uib-speed) * -0.375);
          }

          .dot-spinner__dot:nth-child(7) {
            transform: rotate(270deg);
          }

          .dot-spinner__dot:nth-child(7)::before {
            animation-delay: calc(var(--uib-speed) * -0.25);
          }

          .dot-spinner__dot:nth-child(8) {
            transform: rotate(315deg);
          }

          .dot-spinner__dot:nth-child(8)::before {
            animation-delay: calc(var(--uib-speed) * -0.125);
          }

          @keyframes pulse0112 {
            0%,
            100% {
              transform: scale(0);
              opacity: 0.5;
            }

            50% {
              transform: scale(1);
              opacity: 1;
            }
          }
          #shine2 {
          display: none;
          }
    @media (max-width: 939px) {
    .container-fluid {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align content to the left */
    }
    .btn-shine {
        display: none;
    }
    .dropdown-menu.custom-dropdown-menu {
        right: -15rem;
    }
    #shine2 {
    display: block;
    top: auto;
    left: 50%;
    }
    @media (max-width: 560px) {
    .search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding-right: 22.5px;
    height: 10px;
    }
    .search-container .input {
    height: 2.25em;
    }
    .profile-image {
    margin-left: 30px;
    width: 35px;
    height: 35px;
    border-radius: 75%;
    cursor: pointer;
    border: 3px solid white;
    }
    .multi-button {
    display: flex;
    justify-content: center;
    margin: 1.5rem auto;
    width: fit-content;
    height: 30px;
    align-items: center;
    }
    .dropdown-menu.custom-dropdown-menu {
        right: -5rem;
    }
    .skinItem > img {
    width: 155px;
    height: 155px;
    border-radius: 75%;
    object-fit: cover !important;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    #mySkinsContainer, #favoritesContainer, #skinsContainer {
    display: flex;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
    padding: 30px;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0 auto;
    align-content: flex-start;
    }
    .skinItem::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -63%);
    width: 166px;
    height: 166px;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    filter: contrast(1.2) brightness(0.6) saturate(1.75) url(#gaussianBlur);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.9;
    mask: radial-gradient(circle, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    }
}
`;
document.head.appendChild(customMySkinsCSS);

    (function () {
    // Append CSS to the document for notifications
    const notificationCSS = `
.notification {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  position: fixed;
  bottom: 5%; /* Spawns in the bottom-left corner */
  left: 2%;
  z-index: 9999;
  width: 18rem;
  height: auto;
  background: #29292c;
  border-radius: 1rem;
  overflow: hidden;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 16px;
  --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);
  --color: #32a6ff;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.notification:before {
  position: absolute;
  content: "";
  inset: 0.0625rem;
  border-radius: 0.9375rem;
  background: #18181b;
  z-index: 2;
}

.notification:after {
  position: absolute;
  content: "";
  width: 0.25rem;
  inset: 0.65rem auto 0.65rem 0.5rem;
  border-radius: 0.125rem;
  background: var(--gradient);
  transition: transform 300ms ease;
  z-index: 4;
}

.notification:hover:after {
  transform: translateX(0.15rem);
}

.notititle {
  color: var(--color);
  padding: 0.65rem 0.25rem 0.4rem 1.25rem;
  font-weight: 500;
  font-size: 1.1rem;
  visibility: visible; /* Ensure visibility */
}

.notibody {
  color: #99999d;
  padding: 0 1.25rem;
  font-size: 0.9rem;
  visibility: visible; /* Ensure visibility */
}

.notification.success {
  --gradient: linear-gradient(to bottom, #28a745, #218838);
  --color: #28a745;
}

.notification.error {
  --gradient: linear-gradient(to bottom, #dc3545, #c82333);
  --color: #dc3545;
}

.notification.info {
  --gradient: linear-gradient(to bottom, #2eadff, #3d83ff);
  --color: #32a6ff;
}
`;

    // Append the CSS to the document
    const style = document.createElement("style");
    style.innerHTML = notificationCSS;
    document.head.appendChild(style);

    // Define the notification system as a window property
    window.showNotification = function (type, title = "Title", body = "Body", duration = 3000) {
        if (!title || !body) {
            console.error("Notification requires a title and body.");
            return;
        }

        const notification = document.createElement("div");
        notification.className = `notification ${type}`;
        notification.innerHTML = `
            <div class="notititle">${title}</div>
            <div class="notibody">${body}</div>
        `;

        document.body.appendChild(notification);

        // Trigger animation
        requestAnimationFrame(() => {
            notification.classList.add("show");
        });

        // Auto-remove after duration
        setTimeout(() => {
            notification.classList.remove("show");
            setTimeout(() => notification.remove(), 300); // Allow transition to finish
        }, duration);
    };

    // Example usage message in the console
    console.log("Notification system loaded. Test it by calling showNotification(type, title, body, duration) from the console.");
})();



    // JavaScript for Tab Switching
function setupTabSwitching() {
    const publicSkinsTab = document.getElementById('publicSkinsTab');
    const mySkinsTab = document.getElementById('mySkinsTab');
    const favoritesTab = document.getElementById('favoritesTab');
    const skinsContainer = document.getElementById('skinsContainer');
    const mySkinsContainer = document.getElementById('mySkinsContainer');
    const favoritesContainer = document.getElementById('favoritesContainer');
    const title = document.getElementById('shine2');
    const title2 = document.getElementById('shine1');

    // Function to update tab content
    function switchTab(tabKey) {
        // Hide all containers by default
        skinsContainer.style.display = 'none';
        mySkinsContainer.style.display = 'none';
        favoritesContainer.style.display = 'none';

        if (tabKey === 'public') {
            // Show the skins container for PUBLIC SKINS
            title.innerText = 'Public Skins';
            title2.innerText = 'Public Skins';
            skinsContainer.style.display = 'grid';
            skinsContainer.innerHTML = `
                <div class="dot-spinner">
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
                </div>`;
            // Fetch and refresh skins when switching to PUBLIC SKINS
            fetchImages()
                .then((images) => {
                    renderImagesLazy(images, skinsContainer);
                    console.log("Public skins refreshed successfully!");
                })
                .catch((error) => {
                    skinsContainer.innerHTML = '<p style="color: red;">Failed to refresh skins. Please try again later.</p>';
                    console.error("Failed to refresh skins:", error);
                });
        } else if (tabKey === 'mySkins') {
            // Display custom content for MY SKINS tab
    title.innerText = 'My Skins';
title2.innerText = 'My Skins';
mySkinsContainer.style.display = 'flex';
mySkinsContainer.style.flexDirection = 'column';
mySkinsContainer.style.justifyContent = 'flex-start';
mySkinsContainer.style.alignItems = 'center';
mySkinsContainer.style.marginTop = '10px';
mySkinsContainer.innerHTML = `
    <img src="https://i.imghippo.com/files/IFso7215PtQ.png" alt="Preview" class="profile-upload" id="preview" aria-expanded="false">
    <div class="search-container skinurl-container">
        <input id="skinName" class="input" style="background-color: #454444;" placeholder="Skin name...">
        <input id="skinurl" class="input" style="background-color: #454444;" placeholder="Skin url...">
        <button id="submitSkin" class="submit-btn"><span>Confirm</span> <span>Skin</span></button>
    </div>
`;

// Get the preview image element
const previewImg = document.getElementById('preview');
const urlInput = document.getElementById('skinurl');
const nameInput = document.getElementById('skinName');

// Create a hidden file input element
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = '.png, .jpeg, .jpg, .gif'; // Restrict to specific file types
fileInput.style.display = 'none'; // Hide the input

// Append the file input to the body
document.body.appendChild(fileInput);

// Add a click event to the preview image
previewImg.addEventListener('click', () => {
    fileInput.click(); // Trigger the file input's click
});

// Enable or disable the URL input based on the preview image state
const toggleUrlInput = () => {
    if (previewImg.src.startsWith('data:image')) {
        urlInput.value = '';
        urlInput.disabled = true;
    } else {
        urlInput.disabled = false;
    }
};
previewImg.addEventListener('load', toggleUrlInput);

// Handle file input change
fileInput.addEventListener('change', (event) => {
    const file = event.target.files[0];
    if (file) {
        const validExtensions = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif']; // Allowed MIME types
        if (validExtensions.includes(file.type)) {
            const reader = new FileReader();
            reader.onload = (e) => {
                previewImg.src = e.target.result; // Update the image src
            };
            reader.readAsDataURL(file);
        } else {
            alert('Please select a valid image file (PNG, JPEG, or GIF).');
        }
    }
});

// Handle skin submission
document.getElementById('submitSkin').addEventListener('click', async () => {
    const name = nameInput.value.trim(); // Get and trim the skin name
    const owner = protoService?.userInfo?.id || 'defaultOwner'; // Ensure owner ID exists

    // Check if an image is selected
    const isImageSelected = previewImg.src.startsWith('data:image');

    // Validate inputs
    if (!name) {
        alert('Please provide a skin name.');
        return;
    }

    if (!isImageSelected && !urlInput.value) {
        alert('Please provide a URL or select an image.');
        return;
    }

    if (!isImageSelected && !urlInput.value.startsWith('https://i.imgur.com')) {
        alert('URL must start with https://i.imgur.com.');
        return;
    }

    try {
        let url;

        if (isImageSelected) {
            console.log('Uploading image to Imgur...');
            const base64Image = previewImg.src.split(',')[1]; // Extract Base64 data

            // Upload image to Imgur
            const imgurResponse = await fetch('https://api.imgur.com/3/image', {
                method: 'POST',
                headers: {
                    Authorization: 'Client-ID 8b2cd28516b0976', // Replace with your Imgur Client ID
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ image: base64Image, type: 'base64' }),
            });

            if (!imgurResponse.ok) {
                const error = await imgurResponse.json();
                console.error('Imgur upload failed:', error);
                throw new Error('Failed to upload image to Imgur.');
            }

            const imgurData = await imgurResponse.json();
            url = imgurData.data.link; // Get the Imgur URL
            console.log('Image uploaded to Imgur:', url);
        } else {
            url = urlInput.value.trim(); // Get the user-provided URL
        }

        // Send POST request to the new API endpoint
        const response = await fetch('https://snay.vercel.app/api/addSkin', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ name, url, owner }), // JSON-encoded body
        });

        // Check response status
        if (!response.ok) {
            const errorData = await response.json();
            console.error('Server error details:', errorData);
            throw new Error(`Error ${response.status}: ${errorData.error || 'Unknown error occurred'}`);
        }

        const result = await response.json();
        console.log('Skin added successfully. Server response:', result);

        // Notify the user of success
        showNotification("success", "Success!", "Skin uploaded successfully!.");
        if (isImageSelected) {
            previewImg.src = result.url; // Update the preview image to the uploaded Imgur URL
        }
    } catch (error) {
        console.error('Error during skin submission:', error);
        alert(`An error occurred: ${error.message}`);
    }
});

        } else if (tabKey === 'favorites') {
            // Display custom content for FAVORITES tab
            title.innerText = 'Favorites';
            title2.innerText = 'Favorites';
            favoritesContainer.style.display = 'flex';
            favoritesContainer.style.justifyContent = 'center';
            favoritesContainer.style.alignItems = 'center';
            favoritesContainer.innerHTML = `
                <div style="text-align: center;">
                    <img src="https://media.tenor.com/hB9OTbewrikAAAAi/work-work-in-progress.gif"
                         alt="Work in Progress"
                         style="max-width: 100%; height: auto; border-radius: 10px;">
                </div>`;
        }

        // Update the active tab button styles
        publicSkinsTab.classList.remove('active');
        mySkinsTab.classList.remove('active');
        favoritesTab.classList.remove('active');

        if (tabKey === 'public') publicSkinsTab.classList.add('active');
        else if (tabKey === 'mySkins') mySkinsTab.classList.add('active');
        else if (tabKey === 'favorites') favoritesTab.classList.add('active');
    }

    // Add event listeners to each tab button
    publicSkinsTab.addEventListener('click', () => switchTab('public'));
    mySkinsTab.addEventListener('click', () => switchTab('mySkins'));
    favoritesTab.addEventListener('click', () => switchTab('favorites'));

    // Set PUBLIC SKINS as the default tab
    switchTab('public');
}


    // URL of the API endpoint
const API_URL = "https://snay.vercel.app/api/skins";

// Fetch images from the API
async function fetchImages() {
    try {
        console.log("Starting fetch for skins...");
        const response = await fetch(API_URL, {
            method: 'GET', // Explicitly specify GET method
        });
        if (!response.ok) {
            throw new Error(`API request failed with status ${response.status}`);
        }
        const { data } = await response.json(); // Extract `data` property from API response
        console.log("Fetched skins data:", data);
        return data;
    } catch (error) {
        console.error("Error in fetchImages:", error);
        throw error;
    }
}
    const svgFilter = `
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <filter id="gaussianBlur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
        </filter>
    </svg>
`;
document.body.insertAdjacentHTML('afterbegin', svgFilter);

// Render skins in a lazy-loaded manner
function renderImagesLazy(images, container) {
    container.innerHTML = ""; // Clear previous content

    if (!images || images.length === 0) {
        container.innerHTML = '<p style="color: white;">No skins found.</p>';
        return;
    }

    // Keep track of the currently open dropdown
    let openDropdown = null;

    images.forEach((image, index) => {
        // Create the main skin container
        const skinDiv = document.createElement("div");
        skinDiv.className = "skinItem";
        skinDiv.style.position = "relative";

        skinDiv.style.setProperty("--bg", `url(${image.url})`);

        // Create the image element
        const img = document.createElement("img");
        img.src = image.url;
        img.alt = `Owner: ${image.owner}`; // Set the alt attribute to include _id
        img.title = image.name; // Set the title to the skin's name

        // Create a badge for the skin name
        const badge = document.createElement("span");
        badge.className = "badge text-bg-secondary";
        badge.textContent = image.name;

        // Badge click event to call userInfoRequest with owner ID
        badge.addEventListener("click", (event) => {
            event.stopPropagation(); // Prevent other click handlers from triggering
            if (image.owner) {
                userInfoRequest(image.owner); // Call userInfoRequest with the owner ID
            } else {
                console.warn("Owner ID is missing for this skin.");
            }
        });

        // Create the dropdown container
        const dropdownContainer = document.createElement("ul");
        dropdownContainer.className = "dropdown-menu custom-dropdown-menu dropdown-menu-end";
        dropdownContainer.style.cssText = `
            display: none;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -200%);
            z-index: 1000;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            `;
        // Create dropdown item for "Vip Skin"
        const vipDropdownItem = document.createElement("li");
        const vipDropdownLink = document.createElement("a");
        vipDropdownLink.className = "dropdown-item";
        vipDropdownLink.href = "#";

        // Create dropdown item for "Custom Skin"
        const customSkinDropdownItem = document.createElement("li");
        const customSkinDropdownLink = document.createElement("a");
        customSkinDropdownLink.className = "dropdown-item";
        customSkinDropdownLink.href = "#";

        // Add an image badge next to the dropdown link
        const vipBadgeImage = document.createElement("img");
        vipBadgeImage.src = "./assets/badges/badge4.png";
        vipBadgeImage.alt = "Badge";
        vipBadgeImage.className = "badge-image";
        vipBadgeImage.style.cssText = `
           width: 20px;
           height: 20px;
           margin-right: 8px;
           vertical-align: middle;
       `;

        // Add an image badge next to the dropdown link
        const customBadgeImage = document.createElement("img");
        customBadgeImage.src = "./assets/img/SkinsCustom.png";
        customBadgeImage.alt = "Custom Skin";
        customBadgeImage.className = "badge-image";
        customBadgeImage.style.cssText = `
           width: 20px;
           height: 20px;
           margin-right: 8px;
           vertical-align: middle;
       `;

        vipDropdownLink.appendChild(vipBadgeImage);
        vipDropdownLink.appendChild(document.createTextNode("Vip Skin"));
        customSkinDropdownLink.appendChild(customBadgeImage);
        customSkinDropdownLink.appendChild(document.createTextNode("Custom Skin"));

        // Dropdown link click handler
        vipDropdownLink.addEventListener("click", (event) => {
            event.preventDefault();
            const vipSkinInput = document.getElementById("addVipSkin");
            if (vipSkinInput) {
                vipSkinInput.value = image.url; // Set the skin URL
            } else {
                console.warn("Input element with id='addVipSkin' not found.");
            }
            const vipButton = document.querySelector("#gallery-body > div.vip-div > ul > li:nth-child(1) > button");
            if (vipButton) {
                vipButton.click();
            }
        });

        customSkinDropdownLink.addEventListener("click", (event) => {
            event.preventDefault(); // Prevent default link behavior
            changeSkin(image.url); // Dynamically pass the URL of the skin
        });


        vipDropdownItem.appendChild(vipDropdownLink);
        dropdownContainer.appendChild(vipDropdownItem);
        customSkinDropdownItem.appendChild(customSkinDropdownLink);
        dropdownContainer.appendChild(customSkinDropdownItem);

        // Dropdown toggle logic
        skinDiv.addEventListener("click", (event) => {
            event.stopPropagation(); // Prevent click event propagation
            if (openDropdown && openDropdown !== dropdownContainer) {
                openDropdown.style.display = "none"; // Close other dropdownsF
            }
            dropdownContainer.style.display =
                dropdownContainer.style.display === "block" ? "none" : "block";
            openDropdown = dropdownContainer.style.display === "block" ? dropdownContainer : null;
        });

        // Append elements to the skin container
        skinDiv.appendChild(img);
        skinDiv.appendChild(badge);
        skinDiv.appendChild(dropdownContainer);

        // Append skin container to the main container
        container.appendChild(skinDiv);

        // Apply lazy-loading animation with delay
        setTimeout(() => {
            skinDiv.classList.add("loaded");
        }, index * 100); // 100ms delay per skin
    });

    // Global click listener to close dropdowns when clicking outside
    document.addEventListener("click", () => {
        if (openDropdown) {
            openDropdown.style.display = "none";
            openDropdown = null; // Reset the tracker
        }
    });
}

// Example usage
const skinsContainer = document.getElementById("skinsContainer");
fetchImages()
    .then((images) => renderImagesLazy(images, skinsContainer))
    .catch((error) => {
        skinsContainer.innerHTML = '<p style="color: red;">Failed to load skins.</p>';
    });


    // Main Function
async function main() {
    const sideButtons = document.querySelector('#main-menu .side-buttons') || await waitForElement('#main-menu .side-buttons');

    // Create the "Public Skins" button
    const button = document.createElement('button');
    button.className = 'btn side-btn';
    button.id = 'PublicSkins';
    button.style.cssText = `
        background-color: rgb(139 92 246 / 0%);
        color: white;
        border-radius: 0px;
        padding: 16px 40px;
        font-size: 1.2rem;
        background-image: url(https://i.postimg.cc/wBhr5Ftc/SlF1SEF.png);
    `;

    // Ensure the sideButtons container is set up
    sideButtons.style.display = 'flex';
    sideButtons.style.flexDirection = 'column';
    sideButtons.style.alignItems = 'center';
    sideButtons.prepend(button);

    // Create the drawer
    const drawer = document.createElement('div');
    drawer.className = 'offcanvas offcanvas-bottom';
    drawer.tabIndex = -1;
    drawer.id = 'publicSkinsDrawer';
    drawer.setAttribute('aria-labelledby', 'publicSkinsDrawerLabel');
    drawer.style.height = '100%';
    drawer.style.backgroundColor = '#1d2024';
    drawer.innerHTML = `
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
                <div class="search-container">
<button class="button1" id="closebtn"> <span class="X"></span><span class="Y"></span></button>
                    <input id="customInputField" class="input" placeholder="Search skins...">
                    <div class="dropdown profile-container">
                        <img src="https://i.imgur.com/V4RclNb.png" alt="Profile" class="profile-image dropdown-toggle" id="profileDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <ul class="dropdown-menu custom-dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
                            <li><a class="dropdown-item" href="#" id="discord-login-btn" data-action="login">Login</a></li>
                            <li><a class="dropdown-item" href="#" id="discord-logout-btn" data-action="logout" style="display: none;">Logout</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#" id="refreshSkins">Refresh Skins</a></li>
                        </ul>
                    </div>
                </div>
                <a href="#" id="shine1" class="btn-shine">Public Skins</a>
            </div>
        </nav>
        <div class="multi-button">
            <button id="publicSkinsTab">PUBLIC SKINS</button>
            <button id="mySkinsTab">MY SKINS</button>
            <button id="userPPP">hello</button>
            <button id="favoritesTab">❤️</button>
        </div>
        <div class="offcanvas-body">
            <a href="#" id="shine2" class="btn-shine">Public Skins</a>
            <div id="skinsContainer" style="display: none;"></div>
            <div id="mySkinsContainer" style="display: none;"></div>
            <div id="favoritesContainer" style="display: none;"></div>
        </div>
    `;

    // Add the drawer to the body
    document.body.appendChild(drawer);

    // Configure the Public Skins button to open the drawer
    button.setAttribute('data-bs-toggle', 'offcanvas');
    button.setAttribute('data-bs-target', '#publicSkinsDrawer');

    // Ensure Bootstrap initializes the drawer correctly
    //const drawerInstance = new bootstrap.Offcanvas(drawer);
    // Check if the close button and drawer elements exist before proceeding
    const closeButton = document.getElementById("closebtn");

    // Only attach the event listener if both elements exist
    if (closeButton && drawer) {
        closeButton.addEventListener("click", function () {
            const bsDrawer = bootstrap.Offcanvas.getInstance(drawer);
            if (bsDrawer) {
                bsDrawer.hide();
                console.log('Drawer closed.');
            } else {
                console.log('Bootstrap Offcanvas instance not found for the drawer.');
            }
        });
    } else {
        if (!closeButton) {
            console.log('Close button with ID "closebtn" not found.');
        }
        if (!drawer) {
            console.log('Drawer element with ID "publicSkinsDrawer" not found.');
        }
    }

    // Discord OAuth URL
    const DISCORD_OAUTH_URL = "https://discord.com/api/oauth2/authorize?client_id=1266230711690596455&redirect_uri=https://snay.vercel.app/api/discord&response_type=code&scope=identify";

   function updateButtons() {
    const storedUsername = localStorage.getItem("discordUsername");
    const storedToken = localStorage.getItem("discordToken");
    const username = new URLSearchParams(window.location.search).get("username") || storedUsername;
    const token = new URLSearchParams(window.location.search).get("token") || storedToken;

    const loginButton = document.getElementById("discord-login-btn");
    const logoutButton = document.getElementById("discord-logout-btn");
    const profileImage = document.getElementById("profileDropdown"); // Profile image element
    const userprofile = document.getElementById("userPPP");

    if (username && token) {
        loginButton.innerText = `Logged in as ${username}`;
        loginButton.disabled = true;
        userprofile.innerText = `${username}`;
        loginButton.style.display = "none";
        logoutButton.style.display = "block";
        userprofile.style.display = "block";

        if (!storedUsername || !storedToken) {
            // Store username and token if not already stored
            localStorage.setItem("discordUsername", username);
            localStorage.setItem("discordToken", token);
        }

        // Fetch Discord user information
        fetch('https://discord.com/api/users/@me', {
            method: 'GET',
            headers: {
                Authorization: `Bearer ${token}`,
            },
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`Failed to fetch user info: ${response.status}`);
                }
                return response.json();
            })
            .then(userData => {
                console.log("Fetched Discord user data:", userData);

                // Update profile picture
                const avatarURL = userData.avatar
                    ? `https://cdn.discordapp.com/avatars/${userData.id}/${userData.avatar}.png`
                    : `https://cdn.discordapp.com/embed/avatars/${userData.discriminator % 5}.png`; // Default avatar
                profileImage.src = avatarURL;
            })
            .catch(error => {
                console.error("Error fetching Discord user info:", error);
                profileImage.src = "https://i.imgur.com/V4RclNb.png"; // Fallback profile image
            });

        // Remove query parameters from URL
        if (new URLSearchParams(window.location.search).has("username")) {
            history.replaceState(null, null, window.location.pathname);
        }
    } else {
        loginButton.style.display = "block";
        loginButton.innerText = "Login with Discord";
        loginButton.disabled = false;
        logoutButton.style.display = "none";
        userprofile.style.display = "none";

        // Reset to default profile picture
        if (profileImage) {
            profileImage.src = "https://i.imgur.com/V4RclNb.png";
        }
    }
}


    // Create Login Button Behavior
    function createLoginButton() {
        const loginButton = document.getElementById("discord-login-btn");
        loginButton.addEventListener("click", (event) => {
            event.preventDefault();
            window.location.href = DISCORD_OAUTH_URL;
        });
    }

    // Create Logout Button Behavior
    function createLogoutButton() {
        const logoutButton = document.getElementById("discord-logout-btn");
        logoutButton.addEventListener("click", (event) => {
            event.preventDefault();
            localStorage.removeItem("discordUsername");
            localStorage.removeItem("discordToken");
            updateButtons();
        });
    }

    // Initialize Buttons
    if (document.readyState === "complete" || document.readyState === "interactive") {
        createLoginButton();
        createLogoutButton();
        updateButtons();
    } else {
        document.addEventListener("DOMContentLoaded", () => {
            createLoginButton();
            createLogoutButton();
            updateButtons();
        });
    }


        button.setAttribute('data-bs-toggle', 'offcanvas');
        button.setAttribute('data-bs-target', '#publicSkinsDrawer');

        const skinsContainer = document.getElementById('skinsContainer');
        const customInputField = document.getElementById('customInputField');

        // Tooltip Initialization
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
        setupTabSwitching();

                // Refresh Skins Functionality
        document.getElementById('refreshSkins').addEventListener('click', async () => {
            window.showNotification("error", "Error", "Something went wrong.", 3000);

            skinsContainer.innerHTML = `
                <div class="dot-spinner">
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
            <div class="dot-spinner__dot"></div>
                </div>`;
            try {
                const images = await fetchImages();
                renderImagesLazy(images, skinsContainer);
                console.log("Skins refreshed successfully!");

            } catch (error) {
                console.log("Failed to refresh skins.");
            }
        });

        try {
            const images = await fetchImages();
            renderImagesLazy(images, skinsContainer);

            // Add search functionality
            customInputField.addEventListener('input', () => {
                const searchTerm = customInputField.value.toLowerCase();
                const filteredImages = images.filter(image => image.name.toLowerCase().includes(searchTerm));
                renderImagesLazy(filteredImages, skinsContainer);
            });
        } catch (error) {
            skinsContainer.innerHTML = '<p style="color: white;">Failed to load skins. Please try again later.</p>';
        }

    }

    main();
})();