<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠴⠒⠒⠒⢒⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠁⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠞⠁⠀⢀⣀⣀⣀⡀⠀⠀⢧⠀⠀⠀⠀⠀⡴⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣰⠿⠒⠋⠉⠉⠀⠀⠀⠈⠉⠓⠾⢄⣀⠀⠀⢠⡇⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣩⠏⠉⠒⢒⣲⡤⠤⣀⣀⠀⠀⠀⠀⠀⠈⠑⢤⡘⡄⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀
⠀⠀⠀⠀⠀⢰⠾⣣⠴⠚⠉⠉⠀⠀⠀⠀⠀⠉⠓⠀⠀⠀⠀⠀⠀⠙⣧⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⣔⡿⡍⡇
⠀⠀⠀⠀⠀⢸⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠆⠀⠀⢳⡀⠀⠀⠀⠀⠀⣀⡤⠞⠋⣡⠞⠉⠀⣇⡇
⠀⠀⠀⠀⣴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠴⠒⠛⠓⠚⠉⠉⠉⠁⠀⣴⡟⠁⠀⠀⠀⣿⠁
⠀⠀⠀⣼⣁⣠⡤⢴⠖⠒⠒⠦⠤⢴⣶⣢⠤⠤⠔⠚⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣞⡞⠀⠀⠀⠀⢰⢿⠀
⠀⠀⠀⠉⠉⢙⣦⠞⠀⡠⠞⠉⢉⡷⡄⠉⢙⡶⠃⠀⠀⠀⢀⣠⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡎⡼⠀⠀⠀⠀⠀⡜⡞⠀
⠀⠀⠀⣤⡖⠛⠀⠀⡜⠁⠀⡴⢋⣀⣹⣠⠋⠀⠀⠀⠀⣰⣿⠿⠛⠛⠿⣿⣷⣄⡀⠀⠀⠀⠀⠀⡼⢰⠃⠀⠀⠀⠀⡼⢱⠃⠀
⠀⢀⣴⠛⠀⠀⠀⢼⠁⠀⣼⢁⣿⡬⣿⠃⠀⠀⠀⠀⠐⠋⠁⠀⠀⠀⠀⠀⠙⢿⣷⣄⠀⠀⠀⣸⢃⡏⠀⠀⠀⢀⡜⢡⠏⠀⠀
⠀⠸⡿⠀⠀⠀⠀⢻⡀⠀⠀⠀⠉⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠁⣀⡜⠁⡼⠀⠀⠀⡠⠋⣰⠋⠀⠀⠀
⠀⠀⣧⠀⠀⠀⠀⠈⢳⣀⣙⣦⡤⠋⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀⠀⠀⠀⠀⠀⢤⠀⣹⠌⢩⠏⢠⣇⣠⠴⠊⢀⡼⠁⠀⠀⠀⠀
⠀⠀⠘⡆⢀⡴⠖⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠘⢧⣤⣾⣷⣿⣿⣿⣷⣦⡀⠀⢸⠀⠻⣾⠉⠀⠀⠀⠀⢀⣠⠋⠀⠀⠀⠀⠀⠀
⠀⠀⢠⡟⣥⠤⠦⠤⠤⢤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠉⠛⠿⣿⣿⣄⣸⠀⠈⠻⣇⠀⢀⣀⠤⠟⠓⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠸⡆⢧⡀⠀⠀⠀⠀⠀⠈⠙⠲⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠀⣸⡍⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢳⡄⠙⢦⡀⠀⠀⠀⣀⡤⠞⠁⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠙⢦⣀⣉⣷⡚⠉⠀⠀⠀⠀⠀⠀⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣦⣴⠚⢁⡾⠋⠉⠳⢤⣀⢀⣀⣀⣠⠔⠋⠀⠀⠀⠀⠀⠀⣀⣠⠤⠖⠋⠁⢀⣺⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣷⡇⠀⡞⠀⠀⠀⠀⠀⡼⠋⠉⠁⠀⠀⣀⣀⠤⠴⠒⠊⠉⠉⠀⠀⠀⠀⠀⣼⣿⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠈⢯⡛⢦⡀⠀⠀⠀⢀⡾⠥⠤⠔⠒⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⡆⣸⣹⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡿⠀⢹⣶⣶⣖⡋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⡿⠿⠉⠉⠋⠀⠀⠉⠙⠶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠹⢤⣀⣀⣀⣀⣀⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠢⣄⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠙⠋⠩⠿⢿⣁⠀⠀⠀⠀⠀⠀
⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡄⠀⠉⠑⠶⢤⣀⣀⣠⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⣅⠀⠀⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠂⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⠀⠀
⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠀⠀⠀
⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠀
Yep, this project is made by a furry owo >;3 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <meta http-equiv="X-Frame-Options" content="DENY">
    <meta http-equiv="Referrer-Policy" content="no-referrer">
    
    <link href="/static/css/main.css?v=1747838793" rel="stylesheet">
    <link href="/static/themes.php" rel="stylesheet">
    <link href="/static/css/fonts.css?v=1747740437" rel="stylesheet">
    <link href="/static/css/notifications.css?v=1747740437" rel="stylesheet">
    <link rel="stylesheet" href="/static/js/sweetalert2.min.css?v=1747740437">

    <script src="/static/js/sweetalert2.min.js?v=1747740437" defer></script>
    <script src="/static/header_scripts.js?v=1747740437" defer></script>
    <script src="/static/js/notifications.js?v=1747740437" defer></script>

    <link rel="stylesheet" href="/static/lib/tippy/tippy.css?v=1747740437">
    <script src="/static/lib/tippy/popper.min.js?v=1747740437"></script>
    <script src="/static/lib/tippy/tippy.umd.min.js?v=1747740437"></script>
    <script src="/static/lib/chart/chart.min.js?v=1747740437"></script>
    <link rel="stylesheet" href="/static/css/bootstrap-icons.css?v=1747740437">

    <script>
        if (localStorage.getItem("dark-mode") === "enabled") {
            document.documentElement.classList.add("dark-mode");
        }
    </script>
    
        
        <style>
        .dark-mode body {
            background-image: url('/static/backgrounds/test.jpg');
        }
    </style>
        
    <style>
            </style>
    
        
    <div class="topbar">
        <div class="topbar-container">
            <div class="logo-container">
                <div class="topbar-title logo">
                    <a href="/">
                        <img src="/static/logos/logo_halloween_by_peasley.png" alt="Logo" width="180">
                    </a>
                </div>
                <div id="banner" class="banner">
                    <div class="note" id="bannerNote"></div>
                    <button id="closeBanner" onclick="closeBanner()">&times;</button>
                </div>
                <div class="topbar-subtitle">goSupertools
                </div>
            </div>
            <div class="topbar-button-container">

                <a href="/" class="topbar-button active">Home</a>
                <a href="/list/" class="topbar-button">Item
                    Database</a>
                <a href="/sale/"
                    class="topbar-button">Sales
                    Manager</a>
                <a href="/list/catwalk.php"
                    class="topbar-button">Catwalk</a>
                <a href="/analyzer-v2/"
                    class="topbar-button">Wardrobe
                    Analyzer</a>

                                </div>
                <div class="topbar-links">
                    <button id="registerButton" class="profile-button"><i class="bi bi-person-plus-fill" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Register</button>
                    <button id="loginButton" class="log-in"><i class="bi bi-box-arrow-in-right" style="font-size: 18px; font-weight: bold; margin-right: 8px;"></i>Login</button>
                                <div class="search-container">
                    <input type="text" id="linkInput" name="searchInput" class="search-input"
                        placeholder="Enter Item Link" autocomplete="off">
                    <button id="srchButton" class="search-button">
                        <i class="bi bi-search" style="font-size: 18px; font-weight: bold;"></i>
                    </button>
                </div>

                <div id="dark-mode-toggle" class="toggle-container">
                    <div class="toggle-switch">
                        <i class="bi bi-moon-fill moon-icon" style="font-size: 18px; color: #D9D9D9;"></i>
                        <i class="bi bi-sun-fill sun-icon" style="font-size: 18px; color: #606060;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
        <div class="footer">    
    <div class="footer-links">
        <span><a href="/item/gpYzjAVrD6dMsRVklcwyM">Random Item</a></span> | 
        <span><a href="/help/">Help</a></span> | 
        <span><a href="/help/info.php">Information</a></span> | 
        <span><a href="/help/safety.php">Safety</a></span> | 
        <span><a href="/help/terms.php">Terms</a></span> | 
        <span><a href="/help/rules.php">Rules</a></span> | 
        <span><a href="/help/thanks.php">Credits</a></span> | 
        <span><a href="/help/feedback.php">Feedback</a></span> | 
        <span><a href="/help/imprint.php">Imprint</a></span>
            </div>
    <div class="footer-note">
        <span>Thanks to © 2024 Momio Aps. All Rights Reserved. Used with permission.</span>
    </div>
</div>

<style>
    .gsm-ad-container {
        width: 100%;
        max-width: inherit;
        padding: 20px 0;
        text-align: center;
        margin: 10px auto 80px auto;
    }
    
    .gsm-ad-banner {
        background-color: var(--gst-background-columncontainer-opacity);
        border-radius: 25px;
        padding: 10px;
        display: inline-block;
        max-width: 100%;
    }
    
    .dark-mode .gsm-ad-banner {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }
    
    .gsm-ad-content {
        min-height: 90px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
    
    .column-container {
        margin-bottom: 0;
    }
</style>

<script>
    function trackAdImpression(bannerId) {
        fetch('/ad.php?id=' + bannerId + '&i=1')
        .catch(error => {
            console.error('Impression tracking error:', error);
        });
    }
    
    document.addEventListener('DOMContentLoaded', function() {
        const columnContainer = document.querySelector('.column-container');
        if (columnContainer) {
            const adBannerContainer = document.createElement('div');
            adBannerContainer.className = 'gsm-ad-container';
            adBannerContainer.innerHTML = `
                <div class="gsm-ad-banner">
                    <div class="gsm-ad-content"><a href="/ad.php?id=1" data-target-url="https://gosupermodel.com/profiles/settings/mail_settings.jsp" target="_blank"><img src="/static/ads/newbanner.png" alt="Advertisement" style="max-width: 100%; height: auto;border-radius: 10px;"></a></div>
                </div>
            `;
            
            columnContainer.parentNode.insertBefore(adBannerContainer, columnContainer.nextSibling);
            
            const computedStyle = window.getComputedStyle(columnContainer);
            adBannerContainer.style.width = computedStyle.width;
            adBannerContainer.style.maxWidth = computedStyle.maxWidth;
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        trackAdImpression(1);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.5 });
            
            observer.observe(adBannerContainer);
        }
    });
</script>
<title>goSupertools - Home</title>
<style>
  .main-box,
  .button-box {
    margin: 0 15px 20px 15px;
    padding: 20px;
    border-radius: 15px;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    transition: 0.3s ease;
  }

  .content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 30px;
  }

  .box1 {
    background: var(--gst-background-white);
    width: 100%;
    height: 295px;
    border-radius: 25px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: span 2;
    order: 2;
  }

  .box1 img {
    border-radius: 25px;
  }

  .box2 {
    height: 295px;
    background: var(--gst-background-white);
    border-radius: 25px;
    padding: 0;
    margin: 0;
    grid-column: span 1;
    order: 1;
  }

  .box4 {
    width: 100%;
    height: 370px;
    background: var(--gst-background-white);
    border-radius: 25px;
    padding: 0;
    margin: 0;
    order: 4;
  }

  .collaboration-box {
    height: 80px;
    background: var(--gst-background-white);
    border-radius: 25px;
    padding: 20px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-column: span 3;
    order: 3;
  }

  .collaboration-content {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 100%;
  }

  .collaboration-image-container {
    display: block;
    text-decoration: none;
    transition: transform 0.2s ease;
  }

  .collaboration-image-container:hover {
    transform: scale(1.02);
  }

  .collaboration-image {
    max-width: 300px;
    max-height: 120px;
    width: auto;
    height: auto;
  }

  .collaboration-text {
    flex: 1;
    text-align: left;
  }

  .collaboration-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--gst-background-for-news);
    margin-bottom: 8px;
  }

  .collaboration-description {
    font-size: 14px;
    color: var(--gst-body-fontcolor);
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .collaboration-benefits {
    font-size: 13px;
    color: #777;
    line-height: 1.3;
  }

  .dark-mode-collaboration-image {
    display: none;
  }

  .dark-mode .light-mode-collaboration-image {
    display: none;
  }

  .dark-mode .dark-mode-collaboration-image {
    display: block;
  }

  .quick-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    margin-top: 43px;
  }

  .quick-link {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--gst-background-for-news);
    border-radius: 10px;
    color: var(--gst-text-on-pink);
    text-decoration: none;
    transition: 0.2s ease;
  }

  .quick-link:hover {
    transform: translateX(5px);
  }

  .quick-link img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  
  .quick-link i.bi {
    font-size: 20px;
    font-weight: bold;
    margin-right: 16px;
  }

  .table-container {
    height: 100%;
    overflow: auto;
    margin-top: 42px;
  }

  table {
    border-collapse: collapse;
  }

  td {
    font-weight: normal;
    font-size: 14px;
    height: 34px;
    width: 270px;
    border-bottom: 1px solid #ddd;
  }

  .image-cell img {
    width: 23px;
    height: auto;
    position: absolute;
    margin-left: 3px;
    margin-top: -2px;
  }

  .bold {
    font-weight: 600;
    font-size: 15px;
    color: #4A4949;
  }

  .unstyled-link {
    text-decoration: none;
    transition: color 0.1s;
    color: var(--gst-body-fontcolor);
  }

  .unstyled-link:hover {
    color: #999;
  }

  .title-div {
    margin-left: 29px;
    word-wrap: anywhere;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 222px;
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 5px;
    padding: 0 30px 0 20px;
  }

  .pagination-link {
    text-decoration: none;
    color: var(--gst-background-for-news);
    font-weight: 700;
  }
  .pagination-link:hover {
    color: var(--gst-background-for-news);
  }

  .pagination-container .prev-btn {
    margin-right: auto;
  }

  .box3 {
    position: absolute;
    right: 0;
    top: 342px;
    margin-right: 4px;
  }

  .blue-box {
    border-radius: 15px;
    background-color: var(--gst-background-pinktogreen);
    height: 40px;
    width: 110px;
    margin-left: 20px;
    padding: 12.5px;
    transition: 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: var(--gst-text-on-pink);
    font-size: 13px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .blue-box img {
    width: 37px;
    margin-right: 8px;
  }

  .blue-container {
    display: flex;
  }

  .button-box {
    box-shadow: none;
    transition: none;
  }

  .blue-box:hover {
    background-color: var(--gst-background-pinktogreenhover);
  }

  .news-title {
    background: var(--gst-background-for-news);
    width: 272px;
    height: 42px;
    position: absolute;
    border-radius: 25px 25px 0px 0px;
    font-weight: bold;
  }

  .news-title span {
    font-size: 20px;
    color: var(--gst-text-on-pink);
    padding: 10px;
    position: absolute;
    margin-left: 9px;
  }

  .bottom-container {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    width: calc(100% - 42px);
  }

  .column-container {
    position: relative;
  }

  .activity-list {
    max-height: 304px;
    overflow-y: auto;
    padding-right: 5px;
    position: relative;
  }
  
  .activity-item {
    margin-bottom: 4px;
    padding: 4px 5px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.03);
    transition: background-color 0.2s;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
  }
  
  .activity-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .activity-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    font-size: 0.7rem;
    color: var(--gst-body-fontcolor);
  }
  
  .activity-user {
    font-weight: bold;
    color: var(--gst-background-for-news);
    text-decoration: none;
  }
  
  .activity-user:hover {
    text-decoration: underline;
  }
  
  .activity-time {
    color: #777;
    font-size: 0.65rem;
  }
  
  .activity-content {
    display: block;
    font-size: 0.75rem;
    color: var(--gst-body-fontcolor);
    text-decoration: none;
    word-break: break-word;
  }
  
  .activity-content:hover {
    color: var(--gst-background-for-news);
  }
  
  .activity-content i {
    margin-right: 3px;
  }
  
  .activity-comment { color: var(--gst-background-for-news); }
  .activity-item-upload { color: var(--gst-background-for-news); }
  .activity-poll { color: var(--gst-background-for-news); }
  .activity-tag { color: var(--gst-background-for-news); }
  .activity-category { color: var(--gst-background-for-news); }
  .activity-itemcomment { color: var(--gst-background-for-news); }
  .activity-relation { color: var(--gst-background-for-news); }
  .activity-lookset { color: var(--gst-background-for-news); }
  .activity-savedlook { color: var(--gst-background-for-news); }
  .activity-shop { color: var(--gst-background-for-news); }
  .activity-wishlist { color: var(--gst-background-for-news); }  
  .activity-user { color: #607D8B; }
  .activity-info { color: #777; }

  .activity-error {
    padding: 5px;
    background-color: rgba(220, 53, 69, 0.1);
    border-radius: 4px;
    color: #721c24;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    font-size: 0.7rem;
  }
  
  .activity-error i, .activity-empty i {
    margin-right: 5px;
  }
  
  .activity-empty {
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
    color: #777;
    text-align: center;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
  }
  
  .poll-question {
    font-size: 16px;
    font-weight: 600;
    color: var(--gst-body-fontcolor);
    margin: 0;
    line-height: 1.3;
  }
  
  .poll-login-message {
    font-size: 14px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    color: #777;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .poll-option {
    margin-bottom: 10px;
  }
  
  .poll-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 14px;
  }
  
  .poll-option-text {
    font-weight: 500;
  }
  
  .poll-percentage {
    font-weight: 600;
    color: var(--gst-background-for-news);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .poll-progress-container {
    background-color: rgba(0, 0, 0, 0.05);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
  }
  
  .poll-progress-bar {
    background-color: var(--gst-background-for-news);
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
  }
  
  .poll-option-input {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    padding: 5px;
    border-radius: 6px;
    transition: background-color 0.2s;
  }
  
  .poll-option-input:hover {
    background-color: rgba(0, 0, 0, 0.03);
  }
  
  .poll-option-input label {
    font-size: 14px;
    margin-left: 10px;
    cursor: pointer;
    flex: 1;
  }
  
  .poll-submit-btn {
    margin-top: 10px;
    background-color: var(--gst-background-for-news);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s;
  }
  
  .poll-submit-btn:hover {
    background-color: var(--gst-background-pinktogreenhover);
  }
  
  .poll-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    font-size: 13px;
    color: #777;
  }
  
  .poll-total-votes {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .user-vote .poll-option-text {
    font-weight: 600;
  }
  
  .poll-empty {
    padding: 10px;
    text-align: center;
    color: #777;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
  }
  
  .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(180, 117, 130, 0.2);
    border-radius: 50%;
    border-top-color: var(--gst-background-for-news);
    animation: spin 1s linear infinite;
    margin-bottom: 5px;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  .loading-text {
    color: #777;
    font-size: 0.7rem;
    margin-top: 3px;
  }

  .item-tooltip {
    position: relative;
  }

  .item-tooltip .item-preview {
    display: none;
    position: fixed;
    bottom: auto;
    left: auto;
    transform: translate(-50%, -100%);
    background-color: var(--gst-background-white);
    border: 1px solid var(--gst-background-for-news);
    border-radius: 8px;
    padding: 5px;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    margin-top: -10px;
  }

  .item-tooltip:hover .item-preview {
    display: block;
    animation: fadeIn 0.3s ease;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -100%) translateY(10px); }
    to { opacity: 1; transform: translate(-50%, -100%) translateY(0); }
  }

  .item-preview img {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 4px;
  }
</style>
</head>

<body>
    <div class="column-container">
    <div class="content-grid">
      <div class="box1">
                  <img id="dynamicImage" src="static/billboard/halloweenwelcome.png" alt="Dynamic Image">
              </div>

      <div class="box2">
        <div class="news-title"><span>News</span></div>
        <div class="table-container">
          <table>
            <tr><td class='image-cell bold'><img src='static/icons/cool_icon.png' alt='Cool Icon'><div class='title-div'><a href='news.php?id=58' class='unstyled-link'>Designer Spotlight: Yuuni</a></div></td></tr><tr><td class='image-cell bold'><img src='static/icons/cool_icon.png' alt='Cool Icon'><div class='title-div'><a href='news.php?id=57' class='unstyled-link'>Designer Spotlight: LauraNadinex</a></div></td></tr><tr><td class='image-cell bold'><img src='static/icons/cool_icon.png' alt='Cool Icon'><div class='title-div'><a href='news.php?id=55' class='unstyled-link'>Community Made, Sep &#039;25</a></div></td></tr><tr><td class='image-cell '><img src='static/icons/cool_icon_gray.png' alt='Cool Icon'><div class='title-div'><a href='news.php?id=56' class='unstyled-link'>Designer Spotlight: qaz116</a></div></td></tr><tr><td class='image-cell '><img src='static/icons/cool_icon_gray.png' alt='Cool Icon'><div class='title-div'><a href='news.php?id=54' class='unstyled-link'>Designer Spotlight: Auxiliary</a></div></td></tr><tr><td class='image-cell '><img src='static/icons/cool_icon_gray.png' alt='Cool Icon'><div class='title-div'><a href='news.php?id=53' class='unstyled-link'>Designer Spotlight: Mommy</a></div></td></tr>          </table>

          <div class="pagination-container">
            <span class='pagination-link next-btn'><a href='?page=2' class='pagination-link'>Next >></a></span>          </div>
        </div>
      </div>

      <div class="box4">
        <div class="news-title"><span>Poll</span></div>
        <div class="poll-container" style="padding: 15px;margin-top: 42px;">
            <h3 class="poll-question">When does the spooky season start for you? </h3><div class="poll-login-message"><i class="bi bi-lock"></i> Please log in to vote!</div>        </div>
      </div>

      <div class="box4">
        <div class="news-title"><span>Quick Links</span></div>
        <div class="quick-links">
          <a href="/item/gpYzjAVrD6dMsRVklcwyM" class="quick-link">
            <i class="bi bi-shuffle"></i>
            <span>Random Item</span>
          </a>
          <a href="/games/" class="quick-link">
            <i class="bi bi-controller"></i>
            <span>Games</span>
          </a>
          <a href="/leaderboard" class="quick-link">
            <i class="bi bi-trophy"></i>
            <span>Leaderboard</span>
          </a>
          <a href="/help/" class="quick-link">
            <i class="bi bi-question-circle"></i>
            <span>Get Help</span>
          </a>
          <a href="https://gosupermodel.com/community/club.jsp?clubid=2474" target="_blank" class="quick-link">
            <i class="bi bi-people"></i>
            <span>Join our club!</span>
          </a>
        </div>
      </div>

      <div class="box4">
        <div class="news-title"><span>Activity Log</span></div>
        <div id="activity-log" style="padding: 8px; margin-top: 43px;">
          <div id="loading-spinner" class="loading-spinner">
            <div class="spinner"></div>
            <div class="loading-text">Loading activities...</div>
          </div>
          <div id="activity-list" class="activity-list"></div>
        </div>
      </div>

      <div class="collaboration-box">
        <div class="collaboration-content">
          <a href="https://gosupermodel.com" target="_blank" class="collaboration-image-container">
            <img src="/static/images/lightmode.png" alt="goSupermodel x goSupertools Collaboration" class="collaboration-image light-mode-collaboration-image">
            <img src="/static/images/darkmode.png" alt="goSupermodel x goSupertools Collaboration" class="collaboration-image dark-mode-collaboration-image">
          </a>
          <div class="collaboration-text">
            <div class="collaboration-title">Official Partnership</div>
            <div class="collaboration-description">
              goSupertools is an official partner of goSupermodel.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div id="snowfall"></div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var images = ["static\/billboard\/halloweenwelcome.png"];
      var currentIndex = 0;
      var dynamicImage = document.getElementById('dynamicImage');

      if (images.length > 1) {
        setInterval(function () {
          currentIndex = (currentIndex + 1) % images.length;
          dynamicImage.src = images[currentIndex];
        }, 3000);
      }
      
      loadActivities();
      
      document.addEventListener('mouseover', function(e) {
        if (e.target && e.target.closest('.item-tooltip')) {
          const tooltip = e.target.closest('.item-tooltip');
          const preview = tooltip.querySelector('.item-preview');
          
          if (preview) {
            const rect = tooltip.getBoundingClientRect();
            preview.style.top = (e.clientY - 20) + 'px';
            preview.style.left = e.clientX + 'px';
          }
        }
      }, true);
    });
    
    function loadActivities() {
      const activityList = document.getElementById('activity-list');
      const loadingSpinner = document.getElementById('loading-spinner');
      
      activityList.innerHTML = '';
      loadingSpinner.style.display = 'flex';
      
      fetch('/api/activity/log.php')
        .then(response => response.json())
        .then(data => {
          loadingSpinner.style.display = 'none';
          
          if (data.error) {
            activityList.innerHTML = `<div class="activity-error"><i class="bi bi-exclamation-triangle"></i> ${data.error}</div>`;
            return;
          }
          
          if (!data || data.length === 0) {
            activityList.innerHTML = '<div class="activity-empty"><i class="bi bi-info-circle"></i> No activities</div>';
            return;
          }
          
          let html = '';
          
          data.forEach(activity => {
            const timeAgo = formatTimeAgo(new Date(activity.timestamp));
            
            let icon = '';
            let typeClass = '';
            
            switch(activity.type) {
              case 'comment': icon = '<i class="bi bi-chat-dots"></i>'; typeClass = 'activity-comment'; break;
              case 'item': icon = '<i class="bi bi-box-seam"></i>'; typeClass = 'activity-item-upload'; break;
              case 'poll': icon = '<i class="bi bi-bar-chart"></i>'; typeClass = 'activity-poll'; break;
              case 'tag': icon = '<i class="bi bi-tag"></i>'; typeClass = 'activity-tag'; break;
              case 'category': icon = '<i class="bi bi-folder"></i>'; typeClass = 'activity-category'; break;
              case 'itemcomment': icon = '<i class="bi bi-chat-square-text"></i>'; typeClass = 'activity-itemcomment'; break;
              case 'relation': icon = '<i class="bi bi-link-45deg"></i>'; typeClass = 'activity-relation'; break;
              case 'lookset': icon = '<i class="bi bi-collection"></i>'; typeClass = 'activity-lookset'; break;
              case 'savedlook': icon = '<i class="bi bi-heart"></i>'; typeClass = 'activity-savedlook'; break;
              case 'shop': icon = '<i class="bi bi-shop"></i>'; typeClass = 'activity-shop'; break;
              case 'wishlist': icon = '<i class="bi bi-list-stars"></i>'; typeClass = 'activity-wishlist'; break;
              case 'user': icon = '<i class="bi bi-person-plus"></i>'; typeClass = 'activity-user'; break;
              case 'info': icon = '<i class="bi bi-info-circle"></i>'; typeClass = 'activity-info'; break;
              default: icon = '<i class="bi bi-activity"></i>'; break;
            }
            
            let headerContent = '';
            if (['item', 'tag', 'category', 'itemcomment', 'relation', 'poll', 'info'].includes(activity.type)) {
              headerContent = `<span class="activity-time">${timeAgo}</span>`;
            } else {
              const userElement = activity.user_profile 
                ? `<a href="/profile/?id=${activity.user_id}" class="activity-user">${activity.user}</a>`
                : `<span class="activity-user">${activity.user}</span>`;
              
              headerContent = `${userElement}<span class="activity-time">${timeAgo}</span>`;
            }
            
            let contentElement = '';
            let itemPreview = '';
            
            if (['item', 'tag', 'category', 'itemcomment', 'relation'].includes(activity.type) && activity.uiid) {
              const shortUiid = activity.uiid.substring(0, 12);
              itemPreview = `<div class="item-preview">
                <img src="https://gosupermodel.com/item/${shortUiid}" alt="Item preview">
              </div>`;
            }
            
            if (['item', 'tag', 'category', 'itemcomment', 'relation'].includes(activity.type) && activity.uiid) {
              contentElement = `<a href="${activity.url}" class="activity-content ${typeClass}">
                ${icon} ${activity.content}
              </a>`;
            } else {
              contentElement = activity.url 
                ? `<a href="${activity.url}" class="activity-content ${typeClass}">${icon} ${activity.content}</a>`
                : `<span class="activity-content ${typeClass}">${icon} ${activity.content}</span>`;
            }
            
            let itemClass = '';
            if (['item', 'tag', 'category', 'itemcomment', 'relation'].includes(activity.type) && activity.uiid) {
              itemClass = ' item-tooltip';
            }
            
            html += `
            <div class="activity-item${itemClass}">
              <div class="activity-header">${headerContent}</div>
              ${contentElement}
              ${itemPreview}
            </div>`;
          });
          
          activityList.innerHTML = html;
        })
        .catch(error => {
          loadingSpinner.style.display = 'none';
          activityList.innerHTML = '<div class="activity-error"><i class="bi bi-wifi-off"></i> Error loading data</div>';
          console.error('Error loading activities:', error);
        });
    }
    
    function formatTimeAgo(date) {
      const now = new Date();
      const diffInSeconds = Math.floor((now - date) / 1000);
      
      if (diffInSeconds < 60) return 'just now';
      
      const diffInMinutes = Math.floor(diffInSeconds / 60);
      if (diffInMinutes < 60) return `${diffInMinutes}m ago`;
      
      const diffInHours = Math.floor(diffInMinutes / 60);
      if (diffInHours < 24) return `${diffInHours}h ago`;
      
      const diffInDays = Math.floor(diffInHours / 24);
      if (diffInDays < 30) return `${diffInDays}d ago`;
      
      return `${date.getMonth()+1}/${date.getDate()}/${date.getFullYear().toString().substr(2)}`;
    }
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
        const voteForm = document.getElementById('voteForm');
        if (voteForm) {
            voteForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const formData = new FormData(voteForm);
                const pollId = formData.get('poll_id');
                const optionIndex = formData.get('option');
                
                if (!optionIndex) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Please select an option!',
                        confirmButtonColor: 'var(--gst-background-for-news)'
                    });
                    return;
                }
                
                fetch('/api/poll/vote.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `poll_id=${pollId}&option_index=${optionIndex}`
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        location.reload();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: data.message || 'Error submitting vote',
                            confirmButtonColor: 'var(--gst-background-for-news)'
                        });
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error submitting vote',
                        confirmButtonColor: 'var(--gst-background-for-news)'
                    });
                });
            });
        }
    });
  </script>
</body>
</html>