<!--
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⠴⠒⠒⠒⢒⡶⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠞⠁⠀⠀⠀⠀⠀⡾⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡴⠁⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠞⠁⠀⢀⣀⣀⣀⡀⠀⠀⢧⠀⠀⠀⠀⠀⡴⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢀⣰⠿⠒⠋⠉⠉⠀⠀⠀⠈⠉⠓⠾⢄⣀⠀⠀⢠⡇⠸⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⣩⠏⠉⠒⢒⣲⡤⠤⣀⣀⠀⠀⠀⠀⠀⠈⠑⢤⡘⡄⠀⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⠀
⠀⠀⠀⠀⠀⢰⠾⣣⠴⠚⠉⠉⠀⠀⠀⠀⠀⠉⠓⠀⠀⠀⠀⠀⠀⠙⣧⠀⠀⢣⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⡤⣔⡿⡍⡇
⠀⠀⠀⠀⠀⢸⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠆⠀⠀⢳⡀⠀⠀⠀⠀⠀⣀⡤⠞⠋⣡⠞⠉⠀⣇⡇
⠀⠀⠀⠀⣴⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡠⠴⠒⠛⠓⠚⠉⠉⠉⠁⠀⣴⡟⠁⠀⠀⠀⣿⠁
⠀⠀⠀⣼⣁⣠⡤⢴⠖⠒⠒⠦⠤⢴⣶⣢⠤⠤⠔⠚⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣞⡞⠀⠀⠀⠀⢰⢿⠀
⠀⠀⠀⠉⠉⢙⣦⠞⠀⡠⠞⠉⢉⡷⡄⠉⢙⡶⠃⠀⠀⠀⢀⣠⣦⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡎⡼⠀⠀⠀⠀⠀⡜⡞⠀
⠀⠀⠀⣤⡖⠛⠀⠀⡜⠁⠀⡴⢋⣀⣹⣠⠋⠀⠀⠀⠀⣰⣿⠿⠛⠛⠿⣿⣷⣄⡀⠀⠀⠀⠀⠀⡼⢰⠃⠀⠀⠀⠀⡼⢱⠃⠀
⠀⢀⣴⠛⠀⠀⠀⢼⠁⠀⣼⢁⣿⡬⣿⠃⠀⠀⠀⠀⠐⠋⠁⠀⠀⠀⠀⠀⠙⢿⣷⣄⠀⠀⠀⣸⢃⡏⠀⠀⠀⢀⡜⢡⠏⠀⠀
⠀⠸⡿⠀⠀⠀⠀⢻⡀⠀⠀⠀⠉⢠⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣿⠁⣀⡜⠁⡼⠀⠀⠀⡠⠋⣰⠋⠀⠀⠀
⠀⠀⣧⠀⠀⠀⠀⠈⢳⣀⣙⣦⡤⠋⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀⠀⠀⠀⠀⠀⢤⠀⣹⠌⢩⠏⢠⣇⣠⠴⠊⢀⡼⠁⠀⠀⠀⠀
⠀⠀⠘⡆⢀⡴⠖⠋⠉⠉⠀⠀⠀⠀⠀⠀⠀⠘⢧⣤⣾⣷⣿⣿⣿⣷⣦⡀⠀⢸⠀⠻⣾⠉⠀⠀⠀⠀⢀⣠⠋⠀⠀⠀⠀⠀⠀
⠀⠀⢠⡟⣥⠤⠦⠤⠤⢤⣀⣀⠀⠀⠀⠀⠀⠀⠀⠉⠁⠀⠀⠉⠛⠿⣿⣿⣄⣸⠀⠈⠻⣇⠀⢀⣀⠤⠟⠓⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠸⡆⢧⡀⠀⠀⠀⠀⠀⠈⠙⠲⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠉⠁⠀⠀⠀⣸⡍⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢳⡄⠙⢦⡀⠀⠀⠀⣀⡤⠞⠁⠀⠀⠀⠀⢀⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⡿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠙⢦⣀⣉⣷⡚⠉⠀⠀⠀⠀⠀⠀⠀⢀⡾⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠼⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣦⣴⠚⢁⡾⠋⠉⠳⢤⣀⢀⣀⣀⣠⠔⠋⠀⠀⠀⠀⠀⠀⣀⣠⠤⠖⠋⠁⢀⣺⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣷⡇⠀⡞⠀⠀⠀⠀⠀⡼⠋⠉⠁⠀⠀⣀⣀⠤⠴⠒⠊⠉⠉⠀⠀⠀⠀⠀⣼⣿⠻⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠈⢯⡛⢦⡀⠀⠀⠀⢀⡾⠥⠤⠔⠒⠊⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⡆⣸⣹⠛⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢠⡿⠀⢹⣶⣶⣖⡋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡟⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⡿⠿⠉⠉⠋⠀⠀⠉⠙⠶⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⡀⠹⢤⣀⣀⣀⣀⣀⡠⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⡰⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠢⣄⠀⠀⠀⡀⠀⠀⠀⠀⠀⠀⠀⣼⠇⠀⠀⠀⠀⠀⠙⠋⠩⠿⢿⣁⠀⠀⠀⠀⠀⠀
⡼⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⡄⠀⠉⠑⠶⢤⣀⣀⣠⣴⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⣅⠀⠀⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠂⠀⠀⠀⠀⠀⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢦⠀⠀⠀⠀
⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀
⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠀⠀⠀
⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠀⠀⠀
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/GST-bg.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">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/pqgC0V86-3vfjbrKd0o6v">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: 100px;
    }
</style>


<title>goSupertools - Catwalk</title>


<style>
    .header-container {
        text-align: center;
        width: 2000px;
        text-align: center;
    }

    .header-container h2 {
        font-size: 36px;
        font-weight: 700;
        margin: 0;
        padding: 20px;
    }

    .search-container2 {
        text-align: center;
        margin-bottom: 20px;
        width: 940px;
    }

    .search-box {
        padding: 10px;
        font-size: 16px;
        margin: 0 10px;
        width: 210px;
        border: none;
  border-radius: 25px;
    }

    .look {
        padding: 20px;
        width: 150px;
        border-radius: 10px;
        background-color: var(--gst-background-lightgray);
        border: 1px solid var(--gst-border-pink);
    }

    .look-title {
        color: var(--gst-text-pink);
        font-weight: 700;
        font-size: 14px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .look-username {
        color: var(--gst-text-555);
        font-weight: 500;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .look-content {
        margin-top: 10px;
        height: 300px;
        position: relative;
        margin-bottom: 20px;
    }

    .look-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;
    }

    .dressup-container {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .dressup-item,
    .dressup-back-item,
    .dressup-mannequin {
        position: absolute;
    }

    .dressup-back-item {
        z-index: 0;
    }

    .dressup-mannequin {
        background-image: url('../static/images/mannequin.png');
        background-repeat: no-repeat;
        height: 300px;
        width: 140px;
        z-index: 1;
    }

    .dressup-item {
        z-index: 2;
    }

    .try-on-button {
        width: fit-content;
    }

    .buttonwrappr svg {
        width: 30px;
        height: auto;
    }

    .like-div {
        width: fit-content;
    }

    .div-wrapper {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        max-height: 0;
        overflow-y: auto;
        transition: max-height 0.3s ease;
        scrollbar-width: thin;
        scrollbar-color: transparent transparent;
    }

    .div-wrapper.open {
        max-height: 250px;
    }

    .img-wrapper {
        margin: 2px;
        background-color: #818181;
        padding: 5px;
        border-radius: 8px;
        width: 55px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .img-wrapper img {
        max-width: 100%;
        max-height: 100%;
    }

    .img-wrapper:hover {
        cursor: pointer;
        filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.8));
    }

    .dressup-item {
        transition: filter 0.3s ease;
    }

    .like-button img,
    .like2-button img {
        margin-right: 4px;

    }

    .like-button,
    .like2-button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        font-size: 16px;
    }

    .buttonwrappr {
        background-color: var(--gst-background-white2);
        border-radius: 15px;
        display: flex;
        justify-content: space-evenly;
        padding: 5px 0 2px 0;
    }

    .dressup-item-count {
        font-size: 14px;
        color: var(--gst-text-555);
        cursor: pointer;
        text-decoration: underline;
        text-align: center;
        transition: transform 0.3s ease;
        padding: 6px;
    }

    .dressup-item-count svg {
        height: 17px;
        vertical-align: bottom;
        padding-right: 2px;
    }

    .like-button:hover {
        background-image: var(--gst-like-hover);
        background-repeat: no-repeat;
        background-size: 30px;
        height: auto;
    }
    .like-button span {
        color: var(--gst-body-fontcolor);
    }

    .pagination-info {
        background-color: var(--gst-background-pink-hover);
        color: #fff;
        border-radius: 7px;
        font-size: 17px;
        font-weight: 700;
        padding: 10px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20px;
        margin: 0 5px 0 5px;
    }

    .pagination a {
        margin: 0 5px 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--gst-background-pink-hover);
        border-radius: 7px;
        padding: 10px 20px;
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        height: 20px;
        width: 0px;
        transition: 0.2s;
    }

    .pagination a:hover {
        background-color: var(--gst-background-pink);
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 15px;
        width: 940px;
        margin-bottom: 15px;
    }

    .pagination img {
        filter: invert(100%);
        height: 24px;
        width: 24px;
    }

    #dropdown,
    #vibe-dropdown {
        background-color: var(--gst-background-pink);
        width: fit-content;
        border-radius: 25px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        margin-right: 15px;
        padding: 6px 12px 6px 12px;
        transition: 0.2s;
    }

    #dropdown:hover,
    #vibe-dropdown:hover {
        background-color: var(--gst-background-pink-hover);
    }

    .save-button2 {
        background-color: #5EBD73;
        width: 100px;
        height: 33px;
        border-radius: 15px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        border: none;
        cursor: pointer;
        margin-right: 15px;
        transition: 0.2s;
    }

    .save-button2:hover {
        background-color: #88D098;
    }
    .look-button,
    .portfolio-button {
        position: absolute;
  right: 0;
  top: 0;
  font-size: 16px;
  z-index: 2;
  background-color: var(--gst-background-pink);
  border-radius: 17px;
  padding: 9px;
  text-align: end;
  color: var(--gst-text-on-pink);
  font-weight: 500;
  padding-right: 15px;
  padding-left: 15px;
  margin: 10px;
  border: none;
  margin-right: 150px;
  cursor: pointer;
  transition: 0.2s;
    }
    .look-button:hover,
    .portfolio-button:hover {
        background-color: var(--gst-background-pink-hover);
    }
    .portfolio-button {
        right: unset;
    }
    .board-container {
        width: 100%;
        padding: 20px;
        background-color: #F0F0F0;
        border-radius: 10px;
        margin-bottom: 30px;
        text-align: center;
    }

    .board {
        padding: 20px;
        margin: 10px 0;
        width: 300px;
        border-radius: 10px;
        background-color: var(--gst-background-lightgray);
        border: 1px solid var(--gst-border-pink);
    }

    .board-info {
        color: var(--gst-text-555);
    }

    .board-title {
        color: var(--gst-text-pink);
  font-weight: 700;
  font-size: 17px;
  margin-bottom:3px;
    }

    .board-desc {
        color: var(--gst-text-555);
        font-size: 16px;
        margin-top: 5px;
        font-weight: 400;
    }

    .look-username a {
        color: var(--gst-text-555);
    }

    .board-owner {
        color: var(--gst-text-555);
        font-size: 14px;
        margin-top: 10px;
        font-weight: 600;
    }

    .add-to-board-btn {
        width: fit-content;
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        align-items: center;
        font-size: 16px;
        margin-bottom: 4px;
    }

    .vibetag-item {
  font-size: 12px;
  background-color: var(--gst-background-pink);
  padding: 5px 10px;
  border-radius: 100px;
  transition: 0.3s;
  min-height: 15px;
  color: transparent;
  border: 0.69px solid var(--gst-border-white);
  width: fit-content;
  font-weight: bold;
  margin: 10px 0 auto;
  white-space: nowrap;
  overflow: hidden;
  max-width: 14px;
  cursor: pointer;
}

.vibetag-item img {
  height: 15px;
  vertical-align: top;
  padding-right: 3px;
}

.vibetag {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.vibetag-item:hover {
  max-width: 150px;
  overflow: visible;
  color: var(--gst-text-on-pink);
}

</style>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const countItemsLinks = document.querySelectorAll('.dressup-item-count');
        let currentOpenWrapper = null;

        const urlParams = new URLSearchParams(window.location.search);
        const filterValue = urlParams.get('filter');
        if (filterValue) {
            const filterSelect = document.querySelector('select[name="filter"]');
            filterSelect.value = filterValue;
        }

        const likedLooks = JSON.parse(localStorage.getItem('likedLooks')) || [];


        countItemsLinks.forEach(link => {
            link.addEventListener('click', function () {
                const lookDiv = this.closest('.look');
                const imgWrapper = lookDiv.querySelector('.div-wrapper');


                if (imgWrapper.classList.contains('open')) {
                    imgWrapper.classList.remove('open');
                    resetDressupItems(lookDiv);
                    currentOpenWrapper = null;
                } else {
                    if (currentOpenWrapper) {
                        currentOpenWrapper.classList.remove('open');
                        const prevLookDiv = currentOpenWrapper.closest('.look');
                        resetDressupItems(prevLookDiv);
                    }

                    imgWrapper.innerHTML = '';
                    const dressupContainer = lookDiv.querySelector('.dressup-container');
                    const dressupItems = dressupContainer.querySelectorAll('.dressup-item');

                    dressupItems.forEach(item => {
                        const imgSrc = item.querySelector('img').src;
                        const imgElement = document.createElement('div');
                        imgElement.classList.add('img-wrapper');
                        imgElement.setAttribute('data-img-src', imgSrc);
                        imgElement.innerHTML = '<img src="' + imgSrc + '">';
                        imgElement.addEventListener('mouseenter', function () {
                            highlightDressupItem(imgSrc, lookDiv);
                        });
                        imgElement.addEventListener('mouseleave', function () {
                            resetDressupItems(lookDiv);
                        });
                        imgElement.addEventListener('click', function () {
                            openItemInNewTab(item.dataset.uiid);
                        });

                        imgWrapper.prepend(imgElement);
                    });

                    imgWrapper.classList.add('open');
                    currentOpenWrapper = imgWrapper;
                }
            });
        });

        function highlightDressupItem(imgSrc, lookDiv) {
            const dressupItems = lookDiv.querySelectorAll('.dressup-item img');
            const isDarkMode = document.documentElement.classList.contains('dark-mode');
            const shadowColor = isDarkMode ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)';
            
            dressupItems.forEach(item => {
                if (item.src === imgSrc) {
                    item.style.filter = `drop-shadow(0 0 4px ${shadowColor})`;
                } else {
                    item.style.filter = 'none';
                }
            });
        }

        function resetDressupItems(lookDiv) {
            const dressupItems = lookDiv.querySelectorAll('.dressup-item img');
            dressupItems.forEach(item => {
                item.style.filter = 'none';
            });
        }

        function openItemInNewTab(uiid) {
            const url = '/item/' + uiid;
            window.open(url, '_blank');
        }

        function handleLikeButtonClick(event) {
        const lookDiv = event.target.closest('.look');
        const lookID = lookDiv.dataset.lookId;
        const likeButton = event.target.closest('.like-button');
        const likeImg = likeButton.querySelector('.like-img');
        const likeCount = likeButton.querySelector('span');

        fetch('../api/list/like.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ lookID: lookID })
        }).then(response => response.json())
            .then(data => {
                if (data.success) {
                    likeCount.innerText = data.likes;

                    if (likeImg.src.includes('fav1.svg')) {
                        likeImg.src = '../static/icons/fav2.svg';
                    } else {
                        likeImg.src = '../static/icons/fav1.svg';
                    }
                } else {
                    customAlertError('' + data.message);
                }
            }).catch(error => {
                console.error('Error:', error);
            });
    }

    const likeButtons = document.querySelectorAll('.like-button');
    likeButtons.forEach(button => {
        button.addEventListener('click', handleLikeButtonClick);
    });
    });

</script>


</head>

<body>
    <div class="column-container">
    <a href="/help/help.php?id=21"><div id="questionIcon">Help</div></a>
        <div class="header-container">
            <h2>Catwalk</h2>
        </div>
        <style>
    .portfolio-list {
        width: 402px;
  border: 1px solid var(--gst-border-pink);
  position: absolute;
  border-radius: 10px;
  margin-top: 143.5px;
  margin-left: 26px;
  height: 464px;
  background-color: var(--gst-background-pink);
  padding: 10px;
    }
    .portfolio-item {
        padding: 10px;
        margin: 2px 10px 2px 10px;
        border-radius: 10px;
        opacity: 100%;
        transition: opacity 0.3s ease;
        }

    .portfolio-item:hover {
        opacity:50%
    }
    .board-wrapper {
        background-color: var(--gst-background-lightgray);
        border-radius: 14px;
        overflow-y: auto;
  height: 394px;
    }
</style>

<div class="portfolio-list">
    <h2 style="color:#FAFAFA;margin-top: 20px;margin-bottom: 20px;">Public Boards</h2>
    <div class="board-wrapper">
                <a style="text-decoration:none;" href="board.php?id=421">
                <div class="portfolio-item">
                    <div class="board-title">Anarki Designs</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">16 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Anarki</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 20.11.2025 06:57</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=510">
                <div class="portfolio-item">
                    <div class="board-title">Rock Chick - Design 16</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">0 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by LauraNadinex</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 19.11.2025 17:06</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=509">
                <div class="portfolio-item">
                    <div class="board-title">Classy - Design 15</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">4 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by LauraNadinex</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 19.11.2025 17:05</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=508">
                <div class="portfolio-item">
                    <div class="board-title">Goth - Design 14</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">4 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by LauraNadinex</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 19.11.2025 16:58</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=507">
                <div class="portfolio-item">
                    <div class="board-title">Creepy Mermaids - Design 13</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">3 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by LauraNadinex</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 19.11.2025 16:46</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=506">
                <div class="portfolio-item">
                    <div class="board-title">Glitter demon - Design 12</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">3 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by LauraNadinex</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 19.11.2025 16:41</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=505">
                <div class="portfolio-item">
                    <div class="board-title">Mix &amp; Match - Design 11</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">4 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by LauraNadinex</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 19.11.2025 16:36</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=76">
                <div class="portfolio-item">
                    <div class="board-title">Cautious&#039; Looks</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">51 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by perfectlycautious</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 19.11.2025 09:30</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=366">
                <div class="portfolio-item">
                    <div class="board-title">Black and Gold Looks</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">3 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by perfectlycautious</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 19.11.2025 09:30</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=504">
                <div class="portfolio-item">
                    <div class="board-title">My first design</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">1 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Giy</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 18.11.2025 22:19</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=314">
                <div class="portfolio-item">
                    <div class="board-title">mixed</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">164 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by xSycorax</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 18.11.2025 21:55</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=339">
                <div class="portfolio-item">
                    <div class="board-title">My Designs</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">14 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by LostMySoul</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 18.11.2025 17:51</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=286">
                <div class="portfolio-item">
                    <div class="board-title">santi&#039;s lookbook</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">31 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by santikko</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 18.11.2025 17:06</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=414">
                <div class="portfolio-item">
                    <div class="board-title">Nature</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">42 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by xSycorax</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 18.11.2025 16:54</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=187">
                <div class="portfolio-item">
                    <div class="board-title">Fantasy</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">104 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by xSycorax</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 18.11.2025 16:54</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=216">
                <div class="portfolio-item">
                    <div class="board-title">Colorful</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">127 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by xSycorax</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 18.11.2025 16:54</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=469">
                <div class="portfolio-item">
                    <div class="board-title">Cutie looks</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">18 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Annelie</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 17.11.2025 13:50</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=503">
                <div class="portfolio-item">
                    <div class="board-title">CM - Week 47 2025 - overview</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">0 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Inuka</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 17.11.2025 09:43</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=498">
                <div class="portfolio-item">
                    <div class="board-title">CM - Week 46 2025 - overview</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">47 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Inuka</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 17.11.2025 09:42</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=139">
                <div class="portfolio-item">
                    <div class="board-title">designs (new to old)</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">49 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by applehoax</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 15.11.2025 22:12</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=11">
                <div class="portfolio-item">
                    <div class="board-title">Winx Club</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">236 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Lilac</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 15.11.2025 13:45</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=28">
                <div class="portfolio-item">
                    <div class="board-title">Villains &amp; baddies</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">36 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Lilac</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 15.11.2025 13:45</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=308">
                <div class="portfolio-item">
                    <div class="board-title">Turquoise</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">26 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by xSycorax</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 15.11.2025 10:03</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=318">
                <div class="portfolio-item">
                    <div class="board-title">Barbie</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">20 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Lilac</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 14.11.2025 19:12</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=356">
                <div class="portfolio-item">
                    <div class="board-title">Steampunk&amp;Sci-fi</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">21 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 14.11.2025 14:27</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=196">
                <div class="portfolio-item">
                    <div class="board-title">Looks by Magolor</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">29 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Magolor</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 14.11.2025 10:35</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=198">
                <div class="portfolio-item">
                    <div class="board-title">Cosplay looks by Magolor</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">17 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Magolor</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 14.11.2025 10:35</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=502">
                <div class="portfolio-item">
                    <div class="board-title">Cute</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">0 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruusy</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 13.11.2025 23:09</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=409">
                <div class="portfolio-item">
                    <div class="board-title">Sci-fi</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">16 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by xSycorax</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 13.11.2025 15:33</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=499">
                <div class="portfolio-item">
                    <div class="board-title">Fantasy inspired</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">1 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Moonybear</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 13.11.2025 14:49</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=138">
                <div class="portfolio-item">
                    <div class="board-title">goddaddy&#039;s looks</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">56 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Godfather</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 13.11.2025 12:37</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=490">
                <div class="portfolio-item">
                    <div class="board-title">CM - Week 45 2025 - overview</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">45 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Inuka</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 12.11.2025 23:28</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=497">
                <div class="portfolio-item">
                    <div class="board-title">gsm 1.0 outfits</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">10 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by adrian.</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 12.11.2025 12:38</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=487">
                <div class="portfolio-item">
                    <div class="board-title">absolute bangers</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">7 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by cruciamentum</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 11.11.2025 22:44</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=188">
                <div class="portfolio-item">
                    <div class="board-title">Horror</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">39 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by xSycorax</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 11.11.2025 19:16</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=496">
                <div class="portfolio-item">
                    <div class="board-title">cos</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">0 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Towa</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 10.11.2025 19:54</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=305">
                <div class="portfolio-item">
                    <div class="board-title">Pirates</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">10 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 09.11.2025 19:48</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=320">
                <div class="portfolio-item">
                    <div class="board-title">Knights/Warriors</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">26 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 09.11.2025 19:48</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=217">
                <div class="portfolio-item">
                    <div class="board-title">Saved looks</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">13 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Clear your heart.</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 09.11.2025 15:47</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=175">
                <div class="portfolio-item">
                    <div class="board-title">Ruoto&#039;s creatures</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">29 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 08.11.2025 18:51</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=494">
                <div class="portfolio-item">
                    <div class="board-title">ocs!!!</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">1 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by meganinthewoods</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 07.11.2025 19:54</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=493">
                <div class="portfolio-item">
                    <div class="board-title">Pretty shit</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">1 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 07.11.2025 15:31</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=86">
                <div class="portfolio-item">
                    <div class="board-title">Ruoto&#039;s cosplays</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">52 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 07.11.2025 15:30</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=321">
                <div class="portfolio-item">
                    <div class="board-title">Fantasy shid</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">65 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 07.11.2025 02:09</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=395">
                <div class="portfolio-item">
                    <div class="board-title">Deities</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">29 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 07.11.2025 02:09</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=146">
                <div class="portfolio-item">
                    <div class="board-title">Spoopy creatures</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">49 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Ruoto</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 07.11.2025 02:09</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=242">
                <div class="portfolio-item">
                    <div class="board-title">✰ — ❝ Chizumi&#039;s Looks❞ — ✰</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">22 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Chizumi</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 06.11.2025 17:07</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=419">
                <div class="portfolio-item">
                    <div class="board-title">✰ — ❝ Chizumi&#039;s Album ❞ — ✰</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">21 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Chizumi</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 06.11.2025 17:07</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=404">
                <div class="portfolio-item">
                    <div class="board-title">✰ — ❝ Chizumi&#039;s Designs ❞ — ✰</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">23 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Chizumi</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 06.11.2025 13:51</span>
                    </div>
                </div>
            </a>
                        <a style="text-decoration:none;" href="board.php?id=400">
                <div class="portfolio-item">
                    <div class="board-title">fall25</div>
                    <div class="board-info">
                    <span style="background-color:var(--gst-background-pink-hover);border-radius:3px;color:#FAFAFA;font-weight:600;padding: 0 5px 0 5px;">12 Looks</span>
                        <span style="color:#9B9B9B;font-weight:600;">Created by Carmen99</span>
                    </div>
                    <div class="board-info">
                        <span style="color: var(--gst-text-959595);font-weight: 400;font-style: italic;font-size: 13px;">Last update on 06.11.2025 10:55</span>
                    </div>
                </div>
            </a>
                </div>
</div>


<div class="search-container2">
    <form method="GET">
        <input type="text" maxlength="20" name="username" class="search-box" placeholder="Search by model name"
            value="">
        <input type="text" name="content" class="search-box" placeholder="Search by Item URL"
            value="">

        <select id="dropdown" name="filter">
            <option value="" >Filter by</option>
            <option value="newest" >Newest</option>
            <option value="oldest" >Oldest</option>
            <option value="most_likes" >Most Likes</option>
            <option value="most_items" >Most Items</option>
        </select>

        <select id="vibe-dropdown" name="vibe">
            <option value="">Select Vibe</option>
            <option value="Activities" >Activities</option><option value="Alternative" >Alternative</option><option value="Bohemian" >Bohemian</option><option value="Casual" >Casual</option><option value="Chic" >Chic</option><option value="Cultural" >Cultural</option><option value="Eccentric" >Eccentric</option><option value="Fantasy" >Fantasy</option><option value="Goth" >Goth</option><option value="Historic" >Historic</option><option value="Holiday" >Holiday</option><option value="Inclusivity" >Inclusivity</option><option value="Masculine" >Masculine</option><option value="Sci-fi" >Sci-fi</option><option value="Sexy" >Sexy</option><option value="Summer" >Summer</option><option value="Sweet" >Sweet</option><option value="Urban" >Urban</option><option value="Wacky" >Wacky</option><option value="Winter" >Winter</option>        </select>

        <input class="save-button2" type="submit" value="Search">
    </form>
</div>


        <div class="look-wrapper"><div class="look" style="border: 1px solid transparent;background-color: transparent;"></div><div class="look" style="border: 1px solid transparent;background-color: transparent;"></div><div class="look" data-look-id="1"><div class="look-title">Old Uniques</div><div class="look-username"> by Sieena</div><div class="look-content"><div class="dressup-container"><div class="dressup-item" data-uiid="a15HBOGPsZWN7nGm8eo-X" style="position: absolute;"><img src="https://gosupermodel.com/item/a15HBOGPsZWN7nGm8eo-X" style="position: absolute; left: 35px; top: 24px; width: 35px; height: 45px;"></div><div class="dressup-item" data-uiid="LM69a1hWSOhZwChr0O_fo" style="position: absolute;"><img src="https://gosupermodel.com/item/LM69a1hWSOhZwChr0O_fo" style="position: absolute; left: 7px; top: 69px; width: 119px; height: 206px;"></div><div class="dressup-item" data-uiid="yrppg4_CaPuwM3xUPCAll" style="position: absolute;"><img src="https://gosupermodel.com/item/yrppg4_CaPuwM3xUPCAll" style="position: absolute; left: 1px; top: 34px; width: 107px; height: 126px;"></div><div class="dressup-item" data-uiid="yOJ1Dt9NN8HAuyhsCICsg" style="position: absolute;"><img src="https://gosupermodel.com/item/yOJ1Dt9NN8HAuyhsCICsg" style="position: absolute; left: 18px; top: 68px; width: 56px; height: 111px;"></div><div class="dressup-item" data-uiid="vCdnPGQP1sU6gRerbvZ87" style="position: absolute;"><img src="https://gosupermodel.com/item/vCdnPGQP1sU6gRerbvZ87" style="position: absolute; left: 41px; top: 71px; width: 26px; height: 59px;"></div><div class="dressup-item" data-uiid="NYz9Ick3qgOYfUVZ_3peI" style="position: absolute;"><img src="https://gosupermodel.com/item/NYz9Ick3qgOYfUVZ_3peI" style="position: absolute; left: 14px; top: 20px; width: 65px; height: 123px;"></div><div class="dressup-back-item" style="position: absolute; z-index:0;"><img src="https://gosupermodel.com/item/MJr49Tc4Am1QyxqDT1OiU" style="position: absolute; left: 30px; top: 22px; width: 57px; height: 121px;"></div><div class="dressup-item" data-uiid="HgU-joTkenD4t9PWqOMio" style="position: absolute;"><img src="https://gosupermodel.com/item/HgU-joTkenD4t9PWqOMio" style="position: absolute; left: 20px; top: 236px; width: 93px; height: 41px;"></div><div class="dressup-item" data-uiid="H5M0nVhhWyfvjv_gDxYzQ" style="position: absolute;"><img src="https://gosupermodel.com/item/H5M0nVhhWyfvjv_gDxYzQ" style="position: absolute; left: 59px; top: 116px; width: 54px; height: 58px;"></div><div class="dressup-item" data-uiid="IhNP8gfb2ErTBZNILkU1P" style="position: absolute;"><img src="https://gosupermodel.com/item/IhNP8gfb2ErTBZNILkU1P" style="position: absolute; left: 43px; top: 39px; width: 29px; height: 25px;"></div><div class="dressup-mannequin"></div></div></div><div class="buttonwrappr"><div class="like-div"><button class="like2-button" data-tippy-content="Please log in to like"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#ADADAD"><path d="m479.43-94-71-63.87q-103.26-92.69-170.67-160.39-67.41-67.7-106.7-121.61Q91.78-493.78 76-539.48 60.22-585.17 60.22-634q0-102.48 68.37-171.13 68.37-68.65 170.84-68.65 51.44 0 97.87 19.74 46.44 19.73 82.13 56.91 35.7-37.18 82.14-56.91 46.43-19.74 97.86-19.74 102.48 0 171.42 68.65 68.93 68.65 68.93 171.13 0 48.26-15.5 93.96-15.5 45.69-55.06 99.32-39.57 53.63-107.26 121.61-67.7 67.98-171.52 161.24L479.43-94Z"/></svg><span style="color:var(--gst-text-555);">9</span></button></div><div class="try-on-button"><a href="https://gosupermodel.com/shopping/inventory.jsp?context=0&amp;uiids=a15HBOGPsZWN7nGm8eo-X,LM69a1hWSOhZwChr0O_fo,yrppg4_CaPuwM3xUPCAll,yOJ1Dt9NN8HAuyhsCICsg,vCdnPGQP1sU6gRerbvZ87,MJr49Tc4Am1QyxqDT1OiU,HgU-joTkenD4t9PWqOMio,H5M0nVhhWyfvjv_gDxYzQ,IhNP8gfb2ErTBZNILkU1P" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--gst-svg-pink)"><path d="M206.78-100.78q-44.3 0-75.15-30.85-30.85-30.85-30.85-75.15v-546.44q0-44.3 30.85-75.15 30.85-30.85 75.15-30.85H480v106H206.78v546.44h546.44V-480h106v273.22q0 44.3-30.85 75.15-30.85 30.85-75.15 30.85H206.78ZM405.52-332 332-405.52l347.69-347.7H560v-106h299.22V-560h-106v-119.69L405.52-332Z"></path></svg>
        </a></div></div>
        <div class="vibetag">
</div>

<div class="dressup-item-count"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="var(--gst-svg-grayToWhite)"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>9 items</div><div class="div-wrapper"></div></div></div><div class="pagination"><div class="pagination-item"><a href="?page=1&username=&content=&filter=&vibe="><i class="bi bi-chevron-double-left" style="font-size: 20px; font-weight: bold; color: white;"></i></a></div><div class="pagination-item"><a href="?page=333&username=&content=&filter=&vibe="><i class="bi bi-chevron-left" style="font-size: 20px; font-weight: bold; color: white;"></i></a></div><div class="pagination-info"><span>334/334</span></div></div>
<script>
document.querySelectorAll('.add-to-board-btn').forEach(function(button) {
    button.addEventListener('click', function() {
        const lookId = this.getAttribute('data-look-id');
        const isOwnLook = this.getAttribute('data-is-own-look') === 'true';

        fetch('../api/list/get_portfolio_status.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: new URLSearchParams({ look_id: lookId })
        })
        .then(response => response.json())
        .then(data => {
            Swal.fire({
                title: 'Add to Board',
                html: `
                    <form id="addToBoardForm">
                        ${data.portfolios.map(portfolio => `
                            <div>
                                <input type="checkbox" name="portfolio[]" value="${portfolio.id}" ${portfolio.checked ? 'checked' : ''}>
                                <label>${portfolio.name}</label>
                            </div>
                        `).join('')}
                    </form>
                `,
                showCancelButton: true,
                confirmButtonText: 'Save'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.getElementById('addToBoardForm');
                    const selectedPortfolios = Array.from(form.querySelectorAll('input[name="portfolio[]"]:checked'))
                        .map(input => input.value);
                    const unselectedPortfolios = Array.from(form.querySelectorAll('input[name="portfolio[]"]:not(:checked)'))
                        .map(input => input.value);

                    const url = isOwnLook ? '../api/list/add_look_to_portfolio.php' : '../api/list/add_look_to_portfolio_other.php';

                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: new URLSearchParams({
                            look_id: lookId,
                            portfolio_ids: selectedPortfolios.join(','),
                            deletePortfolio_ids: unselectedPortfolios.join(',')
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire('Success', 'Look updated in the selected Boards.', 'success');
                        } else {
                            Swal.fire('Error', data.message || 'Failed to update look in Boards.', 'error');
                        }
                    })
                    .catch(() => {
                        Swal.fire('Error', 'An error occurred. Please try again later.', 'error');
                    });
                }
            });
        })
        .catch(() => {
            Swal.fire('Error', 'An error occurred while loading portfolios.', 'error');
        });
    });
});
    document.addEventListener('DOMContentLoaded', function() {
                tippy('.like2-button', {
        placement: 'top',
        animation: 'shift-away',
        theme: 'light',
    });
    
    tippy('.add-to-board-btn', {
        content: 'Add to Board',
        placement: 'top'
    });
    
    tippy('.like-button', {
        content: 'Like',
        placement: 'top'
    });
    
    tippy('.try-on-button a', {
        content: 'Open Look on gSm',
        placement: 'top'
    });
});

</script>


    </div>
</body>

</html>