
<!--

 ██████╗██████╗  █████╗ ███████╗████████╗██╗     ██╗███████╗████████╗██████╗ ██╗
██╔════╝██╔══██╗██╔══██╗██╔════╝╚══██╔══╝██║     ██║██╔════╝╚══██╔══╝██╔══██╗██║
██║     ██████╔╝███████║█████╗     ██║   ██║     ██║███████╗   ██║   ██████╔╝██║
██║     ██╔══██╗██╔══██║██╔══╝     ██║   ██║     ██║╚════██║   ██║   ██╔═══╝ ██║
╚██████╗██║  ██║██║  ██║██║        ██║   ███████╗██║███████║   ██║██╗██║     ███████╗
 ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝        ╚═╝   ╚══════╝╚═╝╚══════╝   ╚═╝╚═╝╚═╝     ╚══════╝

                                ██████╗ ██╗   ██╗
                                ██╔══██╗╚██╗ ██╔╝
                                ██████╔╝ ╚████╔╝
                                ██╔══██╗  ╚██╔╝
                                ██████╔╝   ██║
                                ╚═════╝    ╚═╝

                ██╗   ██╗███████╗██████╗  ██████╗  ██████╗ ███╗   ██╗
                ██║   ██║██╔════╝██╔══██╗██╔═══██╗██╔═══██╗████╗  ██║
                ██║   ██║█████╗  ██████╔╝██║   ██║██║   ██║██╔██╗ ██║
                ╚██╗ ██╔╝██╔══╝  ██╔══██╗██║   ██║██║   ██║██║╚██╗██║
                 ╚████╔╝ ███████╗██║  ██║╚██████╔╝╚██████╔╝██║ ╚████║
                  ╚═══╝  ╚══════╝╚═╝  ╚═╝ ╚═════╝  ╚═════╝ ╚═╝  ╚═══╝

 ██╗██████╗  █████╗ ████████╗██████╗ ██╗   ██╗██╗  ██╗  ██████╗ ██╗   ██╗████████╗███████╗██╗     ██╗
██╔╝██╔══██╗██╔══██╗╚══██╔══╝██╔══██╗╚██╗ ██╔╝██║ ██╔╝  ██╔══██╗╚██╗ ██╔╝╚══██╔══╝██╔════╝██║     ╚██╗
██║ ██████╔╝███████║   ██║   ██████╔╝ ╚████╔╝ █████╔╝   ██████╔╝ ╚████╔╝    ██║   █████╗  ██║      ██║
██║ ██╔═══╝ ██╔══██║   ██║   ██╔══██╗  ╚██╔╝  ██╔═██╗   ██╔═══╝   ╚██╔╝     ██║   ██╔══╝  ██║      ██║
╚██╗██║     ██║  ██║   ██║   ██║  ██║   ██║   ██║  ██╗  ██║        ██║      ██║   ███████╗███████╗██╔╝
 ╚═╝╚═╝     ╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═╝  ╚═╝        ╚═╝      ╚═╝   ╚══════╝╚══════╝╚═╝


-->
<!DOCTYPE html>
<html lang="pl" data-theme="dark">

<!--<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>CraftList.pl – Generator Rang Minecraft (Pixel Art)</title>
    <meta name="description" content="CraftList.pl – najlepsza lista serwerów Minecraft. Dodaj swój serwer, przeglądaj serwery SkyBlock, Survival i kreatywne. Znajdź najlepszy serwer dla siebie!">
    <meta name="keywords" content="generator rang minecraft, pixel art, itemsadder, rank generator, craftlist, minecraft rangi">
    <meta name="google-adsense-account" content="ca-pub-7176552154318713">
    <base href="/" />


    <link rel="icon" type="image/png" href="/assets/img/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/assets/img/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/assets/img/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="Craftlist.pl" />
    <link rel="manifest" href="/assets/img/favicon/site.webmanifest" />


    <link href="https://fonts.googleapis.com" rel="preconnect">
    <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


    <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="/assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">


    <link href="/assets/css/main.css?v=12" rel="stylesheet">

</head>-->

<!DOCTYPE html>
<html lang="pl" data-theme="dark">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>CraftList.pl – Generator Rang Minecraft (Pixel Art)</title>
    <meta name="description" content="CraftList.pl – najlepsza lista serwerów Minecraft. Dodaj swój serwer, przeglądaj serwery SkyBlock, Survival i kreatywne. Znajdź najlepszy serwer dla siebie!">
    <meta name="keywords" content="generator rang minecraft, pixel art, itemsadder, rank generator, craftlist, minecraft rangi">
    <meta name="google-adsense-account" content="ca-pub-7176552154318713">

    <!-- Open Graph -->
    <meta property="og:title" content="CraftList.pl – Generator Rang Minecraft (Pixel Art)">
    <meta property="og:description" content="CraftList.pl – najlepsza lista serwerów Minecraft.">
    <meta property="og:type" content="website">
    
    <base href="/" />

    <!-- Favicons -->
    <link rel="icon" type="image/png" href="/assets/img/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/assets/img/favicon/favicon.svg" />
    <link rel="shortcut icon" href="/assets/img/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="Craftlist.pl" />
    <link rel="manifest" href="/assets/img/favicon/site.webmanifest" />

    <!-- Preload krytycznych CSS -->
    <link rel="preload" href="/assets/vendor/bootstrap/css/bootstrap.min.css" as="style">
    <link rel="preload" href="/assets/css/main.css?v=215" as="style">

    <!-- Fonts (asynchronicznie) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap"
        rel="stylesheet"
        media="print"
        onload="this.media='all'">
    <noscript>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Montserrat:wght@400;500;700&family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
    </noscript>

    <!-- Vendor CSS (ładuj async/prioritize) -->
    <link href="/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="/assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet" media="print" onload="this.media='all'">
    <link href="/assets/vendor/aos/aos.css" rel="stylesheet" media="print" onload="this.media='all'">
    <link href="/assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet" media="print" onload="this.media='all'">
    <link href="/assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" media="print" onload="this.media='all'">

    <!-- Main CSS -->
    <link href="/assets/css/main.css?v=215" rel="stylesheet">
</head><body class="index-page">

    <amp-auto-ads type="adsense"
        data-ad-client="ca-pub-7176552154318713">
    </amp-auto-ads>

    <header id="header" class="header fixed-top backdrop-blur"><!-- End Top Bar -->

        <div class="branding d-flex align-items-cente backdrop-blur">

            <div class="container position-relative d-flex align-items-center justify-content-between">
                <a href="glowna" class="logo d-flex align-items-center">
                    <!-- Uncomment the line below if you also wish to use an image logo -->
                    <!-- <img src="assets/img/logo.png" alt=""> -->
                    <h1 class="sitename">Craft<span>List</span>.pl</h1>
                </a>

                <nav id="navmenu" class="navmenu">
    <ul>
        <li><a href="/glowna">Strona Główna<br></a></li>
        <!--<li><a href="#SerweryPremium">Premium serwery</a></li>
        <li><a href="/serwer_szukaj">Szukaj serwera</a></li>
        <li><a href="/serwer_losuj" class="gradient-blink">Losuj serwer</a></li>
        <li><a href="/serwer_dodaj">Dodaj serwer</a></li>-->
        <li class="dropdown"><a href="#" class="no-link"><span>Serwery</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
            <ul>
                <li><a href="/serwer_szukaj">Szukaj serwera</a></li>
                <li><a href="/serwer_losuj" class="gradient-blink-dark">Losuj serwer</a></li>
                <li><a href="/serwer_dodaj">Dodaj serwer</a></li>
            </ul>
        </li>
        <li class="dropdown"><a href="#" class="no-link"><span>Skrypty</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
            <ul>
                <li><a href="/GENERATOR-Rang.php">Generator rang</a></li>
                <li><a href="/Skrypt-SprLog.php">Sprawdzanie logów serwera</a></li>
            </ul>
        </li>
        <li><a href="https://craftlist.pl/blog">Blog</a></li>
        <li><a href="https://craftlist.pl/faq">FAQ</a></li>
        <!--<li class="dropdown"><a href="#"><span>Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
            <ul>
                <li><a href="#">Dropdown 1</a></li>
                <li class="dropdown"><a href="#"><span>Deep Dropdown</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
                    <ul>
                        <li><a href="#">Deep Dropdown 1</a></li>
                        <li><a href="#">Deep Dropdown 2</a></li>
                        <li><a href="#">Deep Dropdown 3</a></li>
                        <li><a href="#">Deep Dropdown 4</a></li>
                        <li><a href="#">Deep Dropdown 5</a></li>
                    </ul>
                </li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3</a></li>
                <li><a href="#">Dropdown 4</a></li>
            </ul>
        </li>-->


                    <li class="dropdown"><a href="#" class="no-link"><span>Zaloguj się!</span> <i class="bi bi-chevron-down toggle-dropdown"></i></a>
                <ul>
                    <li><a href="https://craftlist.pl/logowanie">Discord</a></li>
                    <!--<li><a href="#">Zaloguj się - Strona</a></li>
                <li><a href="#">Zarejestruj się - Strona</a></li>-->
                </ul>
            </li>
                <li><a href="https://discord.gg/tsBn4yxYx3"><button type="button" class="btn btn-primary position-relative" style="font-family: 'Roboto';padding: 9px 13px 9px 9px;">
                    <i class="bi bi-discord"></i>
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        314                        <span class="visually-hidden">Ilość osób online</span>
                    </span>
                </button></a></li>
    </ul>

    <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
            </div>

        </div>

    </header>

    <main class="main">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>

<!-- Pixel / Minecraft fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Pixelify+Sans:wght@700&family=Press+Start+2P&family=Silkscreen:wght@700&family=Tiny5&family=VT323&display=swap" rel="stylesheet">

<style>
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
details[open] > summary .toggle-icon { transform: rotate(90deg); }
.toggle-icon { transition: transform .2s; display: inline-block; }
.ctrl-group { background: rgba(255,255,255,.03); border: 1px solid #2a2a4a; border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
#tagCanvas { image-rendering: pixelated; image-rendering: crisp-edges; }
</style>

<section id="generator-rang" class="hero contact section">

    <div class="container section-title" data-aos="fade-up">
        <h2>Generator Rang Minecraft</h2>
        <p>Pixel Art rangi dla twojego serwera + automatyczny config ItemsAdder</p>
    </div>

    <div class="container pb-5" data-aos="fade-up" data-aos-delay="100">
        <div class="row gy-4 mb-4">

            <!-- ══ LEWA: Konfiguracja ══════════════════════════════════════════ -->
            <div class="col-lg-6">
                <div class="php-email-form h-100" style="padding:24px;">
                    <h5 class="mb-4 text-light"><i class="bi bi-sliders me-2"></i>Konfiguracja rangi</h5>

                    <!-- Nazwa -->
                    <div class="mb-3">
                        <label class="form-label">Nazwa rangi</label>
                        <input type="text" id="textInput" class="form-control"
                               placeholder="np. VIP, ADMIN, MOD" value="VIP"
                               maxlength="20" autocomplete="off">
                    </div>

                    <!-- ── Styl tekstu ────────────────────────────────────── -->
                    <details open class="mb-2">
                        <summary class="fw-bold text-light mb-3" style="cursor:pointer;user-select:none;">
                            <i class="bi bi-type me-2"></i>Styl tekstu
                            <i class="bi bi-chevron-right toggle-icon ms-1" style="font-size:11px;"></i>
                        </summary>
                        <div class="ctrl-group">
                            <!-- Czcionka -->
                            <div class="mb-3">
                                <label class="form-label">Czcionka</label>
                                <select id="fontSelect" class="form-select">
                                    <option value="Press Start 2P">Press Start 2P – klasyczny Minecraft pixel</option>
                                    <option value="Silkscreen">Silkscreen – czysty blocky pixel</option>
                                    <option value="Pixelify Sans">Pixelify Sans – nowoczesny pixel</option>
                                    <option value="VT323">VT323 – retro terminal 8-bit</option>
                                    <option value="DotGothic16">DotGothic16 – pixel styl japoński</option>
                                    <option value="Tiny5">Tiny5 – minimalistyczny pixel</option>
                                </select>
                                <small class="text-muted d-block mt-1">Wszystkie w stylu Minecraft / pixel art</small>
                            </div>
                            <!-- Kolory tekstu -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label">Kolor (od)</label>
                                    <input type="color" id="textColorStart" class="form-control form-control-color w-100" value="#ffffff">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Kolor (do)</label>
                                    <input type="color" id="textColorEnd" class="form-control form-control-color w-100" value="#ffd700">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="noTextGradient" checked>
                                        <label class="form-check-label small" for="noTextGradient">Jednolity kolor</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Kierunek gradientu tekstu -->
                            <div class="mb-3" id="txtGradDirRow">
                                <label class="form-label small">Kierunek gradientu tekstu</label>
                                <div class="d-flex gap-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="txtGradDir" id="txtGradH" value="h" checked>
                                        <label class="form-check-label small" for="txtGradH">→ Poziomo</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="txtGradDir" id="txtGradV" value="v">
                                        <label class="form-check-label small" for="txtGradV">↓ Pionowo</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Obramówka tekstu -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Obramówka</span>
                                        <span class="text-muted small" id="txtOutVal">0 px</span>
                                    </label>
                                    <input type="range" id="txtOutRange" class="form-range" min="0" max="2" value="0">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Kolor obramówki</label>
                                    <input type="color" id="txtOutColor" class="form-control form-control-color w-100" value="#000000">
                                </div>
                            </div>
                            <!-- Cień tekstu -->
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="txtShdEnabled">
                                <label class="form-check-label small fw-bold" for="txtShdEnabled">Cień tekstu</label>
                            </div>
                            <div id="txtShdControls" style="display:none;">
                                <div class="row">
                                    <div class="col-4 mb-2">
                                        <label class="form-label d-flex justify-content-between">
                                            <span class="small">Offset X</span>
                                            <span class="text-muted small" id="txtShdXVal">2</span>
                                        </label>
                                        <input type="range" id="txtShdX" class="form-range" min="-4" max="4" value="1">
                                    </div>
                                    <div class="col-4 mb-2">
                                        <label class="form-label d-flex justify-content-between">
                                            <span class="small">Offset Y</span>
                                            <span class="text-muted small" id="txtShdYVal">2</span>
                                        </label>
                                        <input type="range" id="txtShdY" class="form-range" min="-4" max="4" value="1">
                                    </div>
                                    <div class="col-4 mb-2">
                                        <label class="form-label small">Kolor</label>
                                        <input type="color" id="txtShdColor" class="form-control form-control-color w-100" value="#000000">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </details>

                    <!-- ── Styl tła ───────────────────────────────────────── -->
                    <details open class="mb-2">
                        <summary class="fw-bold text-light mb-3" style="cursor:pointer;user-select:none;">
                            <i class="bi bi-square-fill me-2"></i>Styl tła
                            <i class="bi bi-chevron-right toggle-icon ms-1" style="font-size:11px;"></i>
                        </summary>
                        <div class="ctrl-group">
                            <!-- Kolory tła -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label">Tło (od)</label>
                                    <input type="color" id="bgColorStart" class="form-control form-control-color w-100" value="#1a237e">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Tło (do)</label>
                                    <input type="color" id="bgColorEnd" class="form-control form-control-color w-100" value="#7b1fa2">
                                    <div class="form-check mt-2">
                                        <input class="form-check-input" type="checkbox" id="noBgGradient">
                                        <label class="form-check-label small" for="noBgGradient">Jednolite tło</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Kierunek gradientu tła -->
                            <div class="mb-3">
                                <label class="form-label small">Kierunek gradientu tła</label>
                                <div class="d-flex gap-3 flex-wrap">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="bgGradDir" id="bgGradH" value="h" checked>
                                        <label class="form-check-label small" for="bgGradH">→ Poziomo</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="bgGradDir" id="bgGradV" value="v">
                                        <label class="form-check-label small" for="bgGradV">↓ Pionowo</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="bgGradDir" id="bgGradD" value="d">
                                        <label class="form-check-label small" for="bgGradD">↘ Ukośnie</label>
                                    </div>
                                </div>
                            </div>
                            <!-- Padding -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Padding poziomy</span>
                                        <span class="text-muted small" id="padHVal">10 px</span>
                                    </label>
                                    <input type="range" id="padHRange" class="form-range" min="1" max="10" value="3">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Padding pionowy</span>
                                        <span class="text-muted small" id="padVVal">6 px</span>
                                    </label>
                                    <input type="range" id="padVRange" class="form-range" min="0" max="6" value="2">
                                </div>
                            </div>
                            <!-- Zaokrąglenie -->
                            <div class="mb-3">
                                <label class="form-label d-flex justify-content-between">
                                    <span>Zaokrąglenie rogów</span>
                                    <span class="text-muted small" id="radiusVal">0 px</span>
                                </label>
                                <input type="range" id="radiusRange" class="form-range" min="0" max="4" value="0">
                                <small class="text-muted">0 = pixel-perfect kwadratowe narożniki</small>
                            </div>
                            <!-- Obramówka tła -->
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label d-flex justify-content-between">
                                        <span>Obramówka</span>
                                        <span class="text-muted small" id="bgOutVal">2 px</span>
                                    </label>
                                    <input type="range" id="bgOutRange" class="form-range" min="0" max="3" value="1">
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Kolor obramówki</label>
                                    <input type="color" id="bgOutColor" class="form-control form-control-color w-100" value="#3d5afe">
                                </div>
                            </div>
                            <!-- Cień tła -->
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="bgShdEnabled" checked>
                                <label class="form-check-label small fw-bold" for="bgShdEnabled">Cień tła</label>
                            </div>
                            <div id="bgShdControls">
                                <div class="row">
                                    <div class="col-4 mb-2">
                                        <label class="form-label d-flex justify-content-between">
                                            <span class="small">Offset X</span>
                                            <span class="text-muted small" id="bgShdXVal">3</span>
                                        </label>
                                        <input type="range" id="bgShdX" class="form-range" min="-5" max="5" value="2">
                                    </div>
                                    <div class="col-4 mb-2">
                                        <label class="form-label d-flex justify-content-between">
                                            <span class="small">Offset Y</span>
                                            <span class="text-muted small" id="bgShdYVal">3</span>
                                        </label>
                                        <input type="range" id="bgShdY" class="form-range" min="-5" max="5" value="2">
                                    </div>
                                    <div class="col-4 mb-2">
                                        <label class="form-label small">Kolor</label>
                                        <input type="color" id="bgShdColor" class="form-control form-control-color w-100" value="#000000">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </details>

                    <!-- ── Ikona ──────────────────────────────────────────── -->
                    <details open class="mb-2">
                        <summary class="fw-bold text-light mb-3" style="cursor:pointer;user-select:none;">
                            <i class="bi bi-emoji-smile me-2"></i>Ikona
                            <i class="bi bi-chevron-right toggle-icon ms-1" style="font-size:11px;"></i>
                        </summary>
                        <div class="ctrl-group">
                            <div class="row">
                                <div class="col-6 mb-3">
                                    <label class="form-label">Emoji</label>
                                    <select id="iconSelect" class="form-select">
                                        <option value="">— Brak —</option>
                                        <optgroup label="Władza / Tytuły">
                                            <option value="👑">👑 Korona</option>
                                            <option value="🛡️">🛡️ Tarcza</option>
                                            <option value="⚔️">⚔️ Miecze</option>
                                            <option value="⚡">⚡ Błyskawica</option>
                                            <option value="🗡️">🗡️ Sztylet</option>
                                            <option value="🏹">🏹 Łuk</option>
                                            <option value="🪓">🪓 Topór</option>
                                            <option value="⚙️">⚙️ Trybik</option>
                                            <option value="🔮">🔮 Kryształ</option>
                                            <option value="🪄">🪄 Różdżka</option>
                                        </optgroup>
                                        <optgroup label="Nagrody">
                                            <option value="💎">💎 Diament</option>
                                            <option value="⭐">⭐ Gwiazda</option>
                                            <option value="🏆">🏆 Puchar</option>
                                            <option value="🥇">🥇 Złoto</option>
                                            <option value="🥈">🥈 Srebro</option>
                                            <option value="🥉">🥉 Brąz</option>
                                            <option value="🔥">🔥 Ogień</option>
                                            <option value="🎯">🎯 Cel</option>
                                        </optgroup>
                                        <optgroup label="Natura / Żywioły">
                                            <option value="❄️">❄️ Lód</option>
                                            <option value="🌙">🌙 Księżyc</option>
                                            <option value="☀️">☀️ Słońce</option>
                                            <option value="🌌">🌌 Galaktyka</option>
                                            <option value="🐉">🐉 Smok</option>
                                            <option value="🦅">🦅 Orzeł</option>
                                            <option value="🐺">🐺 Wilk</option>
                                            <option value="🦊">🦊 Lis</option>
                                            <option value="☠️">☠️ Czaszka</option>
                                            <option value="🧛">🧛 Wampir</option>
                                        </optgroup>
                                        <optgroup label="Minecraft">
                                            <option value="⛏️">⛏️ Kilof</option>
                                            <option value="🪙">🪙 Moneta</option>
                                            <option value="📜">📜 Pergamin</option>
                                            <option value="🏰">🏰 Zamek</option>
                                            <option value="🌋">🌋 Wulkan</option>
                                            <option value="🍀">🍀 Koniczyna</option>
                                            <option value="🍄">🍄 Grzyb</option>
                                            <option value="🗺️">🗺️ Mapa</option>
                                        </optgroup>
                                    </select>
                                </div>
                                <div class="col-6 mb-3">
                                    <label class="form-label">Własny obrazek</label>
                                    <input type="file" id="uploadImage" class="form-control"
                                           accept="image/png,image/webp,image/jpeg">
                                    <div class="d-flex gap-2 mt-2 align-items-center">
                                        <button id="clearImageBtn" class="btn btn-sm btn-outline-danger">
                                            <i class="bi bi-x me-1"></i>Usuń
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <small class="text-muted d-block mt-1">
                                <i class="bi bi-info-circle me-1"></i>
                                Własny obrazek zastępuje emoji. Ikona jest renderowana ostro.
                            </small>
                        </div>
                    </details>

                    <hr class="my-3">

                    <!-- Presety -->
                    <label class="form-label fw-bold">Presety <small class="text-muted fw-normal">(localStorage)</small></label>
                    <div class="d-flex gap-2 flex-wrap align-items-center">
                        <input type="text" id="presetName" class="form-control"
                               style="max-width:160px;" placeholder="Nazwa presetu" autocomplete="off">
                        <button class="btn btn-sm btn-success" id="savePresetBtn">
                            <i class="bi bi-floppy me-1"></i>Zapisz
                        </button>
                        <button class="btn btn-sm btn-outline-info" id="loadPresetsBtn">
                            <i class="bi bi-folder2-open me-1"></i>Moje presety
                        </button>
                    </div>
                </div>
            </div>

            <!-- ══ PRAWA: Podgląd + ItemsAdder ════════════════════════════════ -->
            <div class="col-lg-6" style="position:sticky;top:80px;align-self:start;">
                <div class="d-flex flex-column gap-4">

                <!-- Podgląd -->
                <div class="php-email-form" style="padding:24px;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center gap-2">
                            <h5 class="mb-0 text-light"><i class="bi bi-eye me-2"></i>Podgląd</h5>
                            <span id="fontsLoadStatus" class="badge bg-warning text-dark" style="font-size:10px;">
                                <i class="bi bi-hourglass-split me-1"></i>Ładowanie fontów...
                            </span>
                        </div>
                        <small id="pngSizeInfo" class="text-muted" style="font-family:monospace;"></small>
                    </div>
                    <!-- Szachownica = tło transparencji -->
                    <div class="d-flex justify-content-center align-items-center rounded mb-2"
                         style="min-height:80px; overflow:hidden;
                                background: repeating-conic-gradient(#1c1c38 0% 25%, #111128 0% 50%)
                                            0 0 / 16px 16px;
                                padding:20px;">
                        <canvas id="tagCanvas" style="max-width:100%; display:block;"></canvas>
                    </div>
                    <!-- Mockup czatu Minecraft – realny podgląd w grze -->
                    <div class="mb-3 px-3 py-2 rounded"
                         style="background:#1a1a1a;border:1px solid #333;
                                font-family:'Courier New',monospace;font-size:13px;line-height:2;">
                        <div class="text-muted mb-1" style="font-size:10px;letter-spacing:.5px;text-transform:uppercase;">W Minecraft (czat):</div>
                        <div style="color:#aaa;">
                            <img id="chatRankImg" alt=""
                                 style="image-rendering:pixelated;height:18px;vertical-align:middle;margin-right:3px;">
                            <span style="color:#ddd;">Gracz</span><span style="color:#aaa;">: Cześć wszystkim!</span>
                        </div>
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        <button onclick="downloadCurrentPNG()" class="btn btn-primary btn-sm">
                            <i class="bi bi-download me-1"></i>Pobierz PNG
                        </button>
                        <button onclick="addToProject()" class="btn btn-success btn-sm">
                            <i class="bi bi-plus-circle me-1"></i>Dodaj do projektu
                        </button>
                    </div>
                </div>

                <!-- ItemsAdder config -->
                <div class="php-email-form" style="padding:24px;">
                    <h5 class="mb-3 text-light">
                        <i class="bi bi-code-slash me-2"></i>Przykładowy Config ItemsAdder'a
                        <br><code>Cały config znajdziesz w RAR, gdy pobierzesz cały projekt</code>
                    </h5>
                    <div class="mb-2">
                        <label class="form-label small">Namespace serwera</label>
                        <input type="text" id="iaNamespace" class="form-control form-control-sm"
                               value="my_server" placeholder="np. my_server" autocomplete="off">
                        <small class="text-muted">Folder w <code>plugins/ItemsAdder/contents/</code></small>
                    </div>
                    <div class="position-relative mb-2">
                        <pre id="iaConfigOutput" class="rounded p-3 mb-0"
                             style="background:#0d1117;color:#79c0ff;max-height:220px;overflow-y:auto;
                                    border:1px solid #30363d;font-size:11px;line-height:1.65;
                                    font-family:'Courier New',monospace;white-space:pre;"></pre>
                        <button class="btn btn-sm btn-outline-light position-absolute"
                                style="top:8px;right:8px;opacity:.75;"
                                onclick="copyIAConfig()" title="Kopiuj YAML">
                            <i class="bi bi-clipboard"></i>
                        </button>
                    </div>
                    <div class="p-2 rounded d-flex align-items-center gap-2 flex-wrap"
                         style="background:#161b22;border:1px solid #30363d;font-size:12px;">
                        <strong class="text-light text-nowrap">LuckPerms:</strong>
                        <code id="iaLpCmd" class="text-warning" style="word-break:break-all;flex:1;"></code>
                        <button class="btn btn-sm btn-outline-secondary flex-shrink-0"
                                style="font-size:10px;padding:2px 8px;" onclick="copyLPCmd()">
                            <i class="bi bi-clipboard me-1"></i>Kopiuj
                        </button>
                    </div>
                </div>
            </div><!-- /sticky wrapper -->
            </div>
        </div>

        <!-- ══ Projekt ════════════════════════════════════════════════════════ -->
        <div class="row">
            <div class="col-12">
                <div class="php-email-form" style="padding:24px;">
                    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
                        <h5 class="text-light mb-0">
                            <i class="bi bi-collection me-2"></i>Projekt
                            <span class="badge bg-primary ms-2" id="projectBadge">0</span>
                        </h5>
                        <div class="d-flex gap-2">
                            <button onclick="clearProject()" class="btn btn-sm btn-outline-danger">
                                <i class="bi bi-trash me-1"></i>Wyczyść projekt
                            </button>
                            <button onclick="exportProject()" class="btn btn-sm btn-warning">
                                <i class="bi bi-file-zip me-1"></i>Eksportuj ZIP
                            </button>
                        </div>
                    </div>
                    <p class="text-muted small mb-2">
                        <i class="bi bi-info-circle me-1"></i>
                        ZIP zawiera PNG-i i <code>ranks.yml</code> – wrzuć do
                        <code>plugins/ItemsAdder/contents/</code> i uruchom <code>/iazip</code>.
                    </p>
                    <div id="projectList" class="d-flex gap-3 flex-wrap mt-3">
                        <p class="text-muted small mb-0 py-2">
                            <i class="bi bi-inbox me-1"></i>
                            Projekt jest pusty.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
/* ════════════════════════════════════════════════════════════════════════
   Generator Rang (Pixel Art) – CraftList.pl
   ════════════════════════════════════════════════════════════════════════ */

// ── Skala podglądu: 1 px gry = PREVIEW_SCALE px wyświetlanych ────────────────
// Nearest-neighbor upscale = pixel art, dokładnie jak Minecraft GUI scale 3x
const PREVIEW_SCALE = 5;  // Upscale 5x – bardziej smooth niż 6x, ale wciąż pixel art

// ── DOM refs ──────────────────────────────────────────────────────────────────
const canvas     = document.getElementById('tagCanvas');
const ctx        = canvas.getContext('2d');
const elText     = document.getElementById('textInput');
const elBgS      = document.getElementById('bgColorStart');
const elBgE      = document.getElementById('bgColorEnd');
const elNoBg     = document.getElementById('noBgGradient');
const elTxtS     = document.getElementById('textColorStart');
const elTxtE     = document.getElementById('textColorEnd');
const elNoTxt    = document.getElementById('noTextGradient');
const elRadius   = document.getElementById('radiusRange');
const elIcon     = document.getElementById('iconSelect');
const elFont     = document.getElementById('fontSelect');
const elUpload   = document.getElementById('uploadImage');
const elClearImg = document.getElementById('clearImageBtn');
const elNs       = document.getElementById('iaNamespace');
const elIaOut    = document.getElementById('iaConfigOutput');
const elLpCmd    = document.getElementById('iaLpCmd');
const elFontsLoadStatus = document.getElementById('fontsLoadStatus');

let uploadedImage = null;
let project       = JSON.parse(localStorage.getItem('rankProject') || '[]');

// ── Helpers ────────────────────────────────────────────────────────────────────
function hexToRgb(hex) {
    const n = parseInt(hex.replace('#', ''), 16);
    return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];
}
function slugify(s) {
    return (s || '').toLowerCase()
        .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
        .replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '') || 'rank';
}
function escapeHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
}
function roundedRectPath(cx, x, y, w, h, r) {
    r = Math.max(0, Math.min(r, w / 2, h / 2));
    cx.beginPath();
    cx.moveTo(x + r, y);         cx.lineTo(x + w - r, y);
    cx.arcTo(x + w, y,   x + w, y + r,     r);
    cx.lineTo(x + w, y + h - r); cx.arcTo(x + w, y + h, x + w - r, y + h, r);
    cx.lineTo(x + r, y + h);     cx.arcTo(x, y + h,   x, y + h - r,   r);
    cx.lineTo(x, y + r);         cx.arcTo(x, y,       x + r, y,       r);
    cx.closePath();
}

// ── Główna funkcja renderująca ─────────────────────────────────────────────────
function drawTag() {
    const text      = (elText.value || 'RANGA').toUpperCase();
    const icon      = elIcon.value;
    const hasImg    = !!uploadedImage;
    const hasIcon   = hasImg || !!icon;
    const solidBg   = elNoBg.checked;
    const solidTxt  = elNoTxt.checked;

    const padH      = parseInt(document.getElementById('padHRange').value);
    const padV      = parseInt(document.getElementById('padVRange').value);
    const radius    = parseInt(elRadius.value);
    const bgGradDir = document.querySelector('input[name="bgGradDir"]:checked')?.value || 'h';
    const txtGradDir = document.querySelector('input[name="txtGradDir"]:checked')?.value || 'h';

    const bgOutW    = parseInt(document.getElementById('bgOutRange').value);
    const bgOutC    = document.getElementById('bgOutColor').value;
    const bgShdEn   = document.getElementById('bgShdEnabled').checked;
    const bgShdX    = parseInt(document.getElementById('bgShdX').value);
    const bgShdY    = parseInt(document.getElementById('bgShdY').value);
    const bgShdC    = document.getElementById('bgShdColor').value;

    const txtOutW   = parseInt(document.getElementById('txtOutRange').value);
    const txtOutC   = document.getElementById('txtOutColor').value;
    const txtShdEn  = document.getElementById('txtShdEnabled').checked;
    const txtShdX   = parseInt(document.getElementById('txtShdX').value);
    const txtShdY   = parseInt(document.getElementById('txtShdY').value);
    const txtShdC   = document.getElementById('txtShdColor').value;

    // ── Font – NATYWNA skala Minecraft (1px = 1px gry) ────────────────────
    // Press Start 2P przy 12px = bitmap font czytelny + pixel art
    // Ta sama zasada co Minecraft: render small → upscale nearest-neighbor.
    const MC_FONT_SIZES = {
        'Press Start 2P': 18,   // pixel bitmap – 18px czytelny
        'Silkscreen':     18,   // zaprojektowany przy 18px
        'Pixelify Sans':  18,   // pixel art 18px
        'VT323':          18,   // dot-matrix terminal 18px
        'DotGothic16':    18,   // dot gothic 18px
        'Tiny5':          14,   // mały pixel font – 14px natywna
    };
    const selectedFont = elFont.value || 'Press Start 2P';
    const FONT_PX      = MC_FONT_SIZES[selectedFont] || 8;
    const FONT         = `bold ${FONT_PX}px "${selectedFont}", monospace`;

    // Pomiar metryk w pikselach gry
    const mCtx    = document.createElement('canvas').getContext('2d');
    mCtx.font     = FONT;
    const metrics = mCtx.measureText(text || 'M');
    const textW   = Math.ceil(metrics.width);
    const txtAsc  = metrics.actualBoundingBoxAscent;
    const txtDes  = metrics.actualBoundingBoxDescent;
    const textH   = Math.ceil(txtAsc + txtDes);

    // ── Wymiary (1 jednostka = 1 px Minecrafta) ──────────────────────────────
    const imgSize  = hasIcon ? Math.max(textH, 6) : 0;
    const imgGap   = hasIcon ? 2 : 0;
    const innerW   = textW + padH * 2 + imgSize + imgGap;
    const innerH   = textH + padV * 2;

    // SPAD = dokładne miejsce na cień (nie sztywne 12px)
    const SPAD     = bgShdEn ? Math.max(Math.abs(bgShdX), Math.abs(bgShdY)) + 1 : 0;
    const compW    = innerW + bgOutW * 2 + SPAD * 2;
    const compH    = innerH + bgOutW * 2 + SPAD * 2;
    const origX    = bgOutW + SPAD;
    const origY    = bgOutW + SPAD;
    const midY     = origY + innerH / 2;
    const drawBase = midY + (txtAsc - txtDes) / 2;

    // ── Game canvas – KAŻDY PX = 1 PX MINECRAFT ─────────────────────────────
    const gameCanvas  = document.createElement('canvas');
    gameCanvas.width  = compW;
    gameCanvas.height = compH;
    const gc = gameCanvas.getContext('2d');
    gc.imageSmoothingEnabled = false;

    // ── 1. Cień tła – twardy offset, 0 blur (jak Minecraft) ─────────────────
    if (bgShdEn) {
        roundedRectPath(gc, origX + bgShdX, origY + bgShdY, innerW, innerH, radius);
        gc.fillStyle = bgShdC;
        gc.fill();
    }

    // ── 2. Obramówka tła ─────────────────────────────────────────────────────
    if (bgOutW > 0) {
        roundedRectPath(gc,
            origX - bgOutW, origY - bgOutW,
            innerW + bgOutW * 2, innerH + bgOutW * 2,
            radius + bgOutW
        );
        gc.fillStyle = bgOutC;
        gc.fill();
    }

    // ── 3. Wypełnienie tła ────────────────────────────────────────────────────
    gc.save();
    roundedRectPath(gc, origX, origY, innerW, innerH, radius);
    gc.clip();
    if (solidBg) {
        gc.fillStyle = elBgS.value;
    } else {
        let grad;
        if (bgGradDir === 'h')
            grad = gc.createLinearGradient(origX, 0, origX + innerW, 0);
        else if (bgGradDir === 'v')
            grad = gc.createLinearGradient(0, origY, 0, origY + innerH);
        else
            grad = gc.createLinearGradient(origX, origY, origX + innerW, origY + innerH);
        grad.addColorStop(0, elBgS.value);
        grad.addColorStop(1, elBgE.value);
        gc.fillStyle = grad;
    }
    gc.fillRect(0, 0, compW, compH);
    gc.restore();

    // ── 4. Ikona ──────────────────────────────────────────────────────────────
    let curX = origX + padH;
    if (hasIcon) {
        const drawY = Math.round(midY - imgSize / 2);
        gc.save();
        if (hasImg) {
            gc.imageSmoothingEnabled = false;  // ostry pixel art dla własnego obrazka
            gc.drawImage(uploadedImage, curX, drawY, imgSize, imgSize);
        } else {
            gc.font         = `${imgSize}px "Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif`;
            gc.textBaseline = 'middle';
            gc.textAlign    = 'left';
            gc.fillText(icon, curX, midY);
        }
        gc.restore();
        curX += imgSize + imgGap;
    }

    // ── 5. Cień tekstu ────────────────────────────────────────────────────────
    if (txtShdEn) {
        gc.save();
        gc.font         = FONT;
        gc.textBaseline = 'alphabetic';
        gc.textAlign    = 'left';
        gc.fillStyle    = txtShdC;
        gc.fillText(text, curX + txtShdX, drawBase + txtShdY);
        gc.restore();
    }

    // ── 6. Obramówka tekstu ───────────────────────────────────────────────────
    if (txtOutW > 0) {
        gc.save();
        gc.font         = FONT;
        gc.textBaseline = 'alphabetic';
        gc.textAlign    = 'left';
        gc.strokeStyle  = txtOutC;
        gc.lineWidth    = txtOutW * 2;
        gc.lineJoin     = 'round';
        gc.strokeText(text, curX, drawBase);
        gc.restore();
    }

    // ── 7. Wypełnienie tekstu ─────────────────────────────────────────────────
    gc.save();
    gc.font         = FONT;
    gc.textBaseline = 'alphabetic';
    gc.textAlign    = 'left';
    if (solidTxt) {
        gc.fillStyle = elTxtS.value;
    } else {
        let tg;
        if (txtGradDir === 'h')
            tg = gc.createLinearGradient(curX, 0, curX + textW, 0);
        else
            tg = gc.createLinearGradient(0, drawBase - txtAsc, 0, drawBase + txtDes);
        tg.addColorStop(0, elTxtS.value);
        tg.addColorStop(1, elTxtE.value);
        gc.fillStyle = tg;
    }
    gc.fillText(text, curX, drawBase);
    gc.restore();

    // ── 8. Pixel quantization – każdy px = 0 lub 255 alpha ───────────────────
    // Usuwa sub-pixel AA z czcionki: dokładnie tak działa Minecraft font renderer
    // (każdy texel w bitmap font jest albo w pełni wypełniony albo przezroczysty)
    const id = gc.getImageData(0, 0, compW, compH);
    const pd = id.data;
    for (let i = 3; i < pd.length; i += 4) {
        pd[i] = pd[i] < 80 ? 0 : 255;
    }
    gc.putImageData(id, 0, 0);

    // ── 9. Upscale do podglądu – nearest-neighbor = pixel art jak Minecraft ───
    canvas.width  = compW * PREVIEW_SCALE;
    canvas.height = compH * PREVIEW_SCALE;
    ctx.imageSmoothingEnabled = false;
    ctx.drawImage(gameCanvas, 0, 0, canvas.width, canvas.height);

    // Zachowaj game canvas do eksportu PNG (rzeczywisty rozmiar ItemsAdder)
    canvas._gameCanvas = gameCanvas;

    // Aktualizacja chat preview i info o rozmiarze
    const ci = document.getElementById('chatRankImg');
    if (ci) ci.src = canvas.toDataURL();
    const si = document.getElementById('pngSizeInfo');
    if (si) si.textContent = compW + '\u00d7' + compH + '\u00a0px';

    updateIAConfig();
}

// ── ItemsAdder ────────────────────────────────────────────────────────────────
function updateIAConfig() {
    const ns  = (elNs.value.trim().replace(/[^a-z0-9_]/gi, '').toLowerCase()) || 'my_server';
    const key = slugify(elText.value);
    const yaml =
`info:
  namespace: ${ns}

font_images:
  rank_${key}:
    path: "font/ranks/rank_${key}.png"
    y_position: -8
    ascent: 8
    height: 9
    show_in_list: true
    placeholder: ":rank_${key}:"

# Plik PNG umieść pod:
# plugins/ItemsAdder/contents/${ns}/
#   resourcepack/assets/${ns}/textures/font/ranks/rank_${key}.png`;
    elIaOut.textContent = yaml;
    elLpCmd.textContent  = `/lp group ${key} meta setprefix "%img_rank_${key}% "`;
}
function copyIAConfig() {
    navigator.clipboard.writeText(elIaOut.textContent)
        .then(() => Swal.fire({ icon:'success', title:'Skopiowano YAML!', timer:1200, showConfirmButton:false }));
}
function copyLPCmd() {
    navigator.clipboard.writeText(elLpCmd.textContent)
        .then(() => Swal.fire({ icon:'success', title:'Skopiowano!', timer:1200, showConfirmButton:false }));
}

// ── Pobierz PNG ───────────────────────────────────────────────────────────────
function downloadCurrentPNG() {
    // Pobierz mały game canvas (1px = 1px Minecrafta), nie upscaled podgląd
    const src = canvas._gameCanvas
        ? canvas._gameCanvas.toDataURL('image/png')
        : canvas.toDataURL('image/png');
    const a = document.createElement('a');
    a.download = `rank_${slugify(elText.value) || 'rank'}.png`;
    a.href     = src;
    a.click();
}

// ── Ustawienia ────────────────────────────────────────────────────────────────
function getSettings() {
    return {
        text:         elText.value,
        bgS:          elBgS.value,          bgE:          elBgE.value,
        noBg:         elNoBg.checked,       txtS:         elTxtS.value,
        txtE:         elTxtE.value,         noTxt:        elNoTxt.checked,
        radius:       elRadius.value,       icon:         elIcon.value,
        font:         elFont.value,
        padH:         document.getElementById('padHRange').value,
        padV:         document.getElementById('padVRange').value,
        bgGradDir:    document.querySelector('input[name="bgGradDir"]:checked')?.value || 'h',
        txtGradDir:   document.querySelector('input[name="txtGradDir"]:checked')?.value || 'h',
        bgOutW:       document.getElementById('bgOutRange').value,
        bgOutC:       document.getElementById('bgOutColor').value,
        bgShdEn:      document.getElementById('bgShdEnabled').checked,
        bgShdX:       document.getElementById('bgShdX').value,
        bgShdY:       document.getElementById('bgShdY').value,
        bgShdC:       document.getElementById('bgShdColor').value,
        txtOutW:      document.getElementById('txtOutRange').value,
        txtOutC:      document.getElementById('txtOutColor').value,
        txtShdEn:     document.getElementById('txtShdEnabled').checked,
        txtShdX:      document.getElementById('txtShdX').value,
        txtShdY:      document.getElementById('txtShdY').value,
        txtShdC:      document.getElementById('txtShdColor').value,
    };
}
function setEl(id, val, type = 'value') {
    const el = document.getElementById(id);
    if (!el) return;
    if (type === 'checked') el.checked = val ?? false;
    else el.value = val ?? el.value;
}
function applySettings(s) {
    elText.value = s.text ?? '';
    elBgS.value  = s.bgS ?? elBgS.value;   elBgE.value  = s.bgE ?? elBgE.value;
    elNoBg.checked = s.noBg ?? false;
    elTxtS.value = s.txtS ?? elTxtS.value;  elTxtE.value = s.txtE ?? elTxtE.value;
    elNoTxt.checked = s.noTxt ?? true;
    elRadius.value = s.radius ?? 0;         elIcon.value = s.icon ?? '';
    if (s.font) elFont.value = s.font;
    setEl('padHRange', s.padH); setEl('padVRange', s.padV);
    setEl('bgOutRange', s.bgOutW);        setEl('bgOutColor', s.bgOutC);
    setEl('bgShdEnabled', s.bgShdEn, 'checked');
    setEl('bgShdX', s.bgShdX);           setEl('bgShdY', s.bgShdY);  setEl('bgShdColor', s.bgShdC);
    setEl('txtOutRange', s.txtOutW);      setEl('txtOutColor', s.txtOutC);
    setEl('txtShdEnabled', s.txtShdEn, 'checked');
    setEl('txtShdX', s.txtShdX);          setEl('txtShdY', s.txtShdY); setEl('txtShdColor', s.txtShdC);
    // Radio buttons
    if (s.bgGradDir)  { const r = document.getElementById('bgGrad'  + s.bgGradDir.toUpperCase());  if (r) r.checked = true; }
    if (s.txtGradDir) { const r = document.getElementById('txtGrad' + s.txtGradDir.toUpperCase()); if (r) r.checked = true; }
    updateAllLabels();
    updateShadowVisibility();
    drawTag();
}

// ── Projekt ────────────────────────────────────────────────────────────────────
function addToProject() {
    const settings    = getSettings();
    const dataUrl     = canvas.toDataURL('image/png');   // upscaled – do miniatur
    const gameDataUrl = canvas._gameCanvas               // mały PNG – do eksportu
        ? canvas._gameCanvas.toDataURL('image/png')
        : dataUrl;
    const key      = slugify(settings.text);
    const idx      = project.findIndex(r => slugify(r.settings.text) === key);
    if (idx >= 0) {
        project[idx] = { ...project[idx], settings, dataUrl, gameDataUrl };
        Swal.fire({ icon:'info', title:`Zaktualizowano „${settings.text}"`, timer:1500, showConfirmButton:false });
    } else {
        project.push({ id: Date.now(), settings, dataUrl, gameDataUrl });
        Swal.fire({ icon:'success', title:`Dodano „${settings.text}"!`, timer:1500, showConfirmButton:false });
    }
    saveProject(); renderProject();
}
function editRank(id) {
    const r = project.find(r => r.id === id);
    if (r) { applySettings(r.settings); window.scrollTo({ top:0, behavior:'smooth' }); }
}
function removeFromProject(id) { project = project.filter(r => r.id !== id); saveProject(); renderProject(); }
function clearProject() {
    if (!project.length) return;
    Swal.fire({ icon:'warning', title:'Wyczyścić projekt?', showCancelButton:true,
        confirmButtonText:'Tak', cancelButtonText:'Anuluj', confirmButtonColor:'#dc3545' })
        .then(r => { if (r.isConfirmed) { project = []; saveProject(); renderProject(); } });
}
function saveProject() { localStorage.setItem('rankProject', JSON.stringify(project)); }
function renderProject() {
    const el = document.getElementById('projectList');
    document.getElementById('projectBadge').textContent = project.length;
    if (!project.length) {
        el.innerHTML = '<p class="text-muted small mb-0 py-2"><i class="bi bi-inbox me-1"></i>Projekt jest pusty.</p>';
        return;
    }
    el.innerHTML = project.map(r => `
        <div class="d-flex flex-column align-items-center gap-2 p-2 rounded"
             style="background:#10102a;border:1px solid #2a2a4a;max-width:220px;">
            <img src="${r.dataUrl}" alt="${escapeHtml(r.settings.text)}"
                 style="max-width:200px;border-radius:4px;">
            <small class="text-light fw-bold text-truncate w-100 text-center">${escapeHtml(r.settings.text.toUpperCase())}</small>
            <div class="d-flex gap-1">
                <button class="btn btn-sm btn-outline-primary" style="font-size:11px;padding:2px 8px;"
                        onclick="editRank(${r.id})"><i class="bi bi-pencil"></i></button>
                <button class="btn btn-sm btn-outline-danger" style="font-size:11px;padding:2px 8px;"
                        onclick="removeFromProject(${r.id})"><i class="bi bi-trash"></i></button>
            </div>
        </div>`).join('');
}

// ── Eksport ZIP ───────────────────────────────────────────────────────────────
async function exportProject() {
    if (!project.length) { Swal.fire({ icon:'warning', title:'Projekt jest pusty!' }); return; }
    const ns  = (elNs.value.trim().replace(/[^a-z0-9_]/gi,'').toLowerCase()) || 'my_server';
    const zip = new JSZip();
    let yaml  = `info:\n  namespace: ${ns}\n\nfont_images:\n`;
    const lp  = [];
    for (const rank of project) {
        const key = slugify(rank.settings.text);
        yaml += `\n  rank_${key}:\n    path: "font/ranks/rank_${key}.png"\n    y_position: -8\n    ascent: 8\n    height: 9\n    show_in_list: true\n    placeholder: ":rank_${key}:"\n`;
        lp.push(`/lp group ${key} meta setprefix "%img_rank_${key}% "`);
        const pngBase64 = (rank.gameDataUrl || rank.dataUrl).split(',')[1];
        zip.file(`${ns}/resourcepack/assets/${ns}/textures/font/ranks/rank_${key}.png`, pngBase64, { base64: true });
    }
    zip.file(`${ns}/config/ranks.yml`, yaml);
    zip.file('README.txt', `CraftList.pl – Generator Rang\n\nWrzuć folder "${ns}/" do plugins/ItemsAdder/contents/ następnie uruchom /iazip\n\nLuckPerms:\n${lp.join('\n')}`);
    saveAs(await zip.generateAsync({ type:'blob', compression:'DEFLATE' }), `itemsadder_${ns}_rangi.zip`);
}

// ── Presety ────────────────────────────────────────────────────────────────────
function getPresets() { return JSON.parse(localStorage.getItem('rankPresets') || '{}'); }
document.getElementById('savePresetBtn').addEventListener('click', () => {
    const name = document.getElementById('presetName').value.trim();
    if (!name) { Swal.fire({ icon:'warning', title:'Podaj nazwę!', timer:1800, showConfirmButton:false }); return; }
    const p = getPresets(); p[name] = getSettings();
    localStorage.setItem('rankPresets', JSON.stringify(p));
    Swal.fire({ icon:'success', title:`Preset „${name}" zapisany!`, timer:1400, showConfirmButton:false });
    document.getElementById('presetName').value = '';
});
document.getElementById('loadPresetsBtn').addEventListener('click', () => {
    const keys = Object.keys(getPresets());
    if (!keys.length) { Swal.fire({ icon:'info', title:'Brak presetów.', showConfirmButton:true }); return; }
    Swal.fire({
        title: '<span style="color:#fff">Moje presety</span>',
        html: `<div style="text-align:left;max-height:300px;overflow-y:auto;">${keys.map(k => `
            <div class="d-flex justify-content-between align-items-center mb-2 gap-2 p-2 rounded" style="background:#1a1a38;border:1px solid #2a2a50;">
                <span class="text-light">${escapeHtml(k)}</span>
                <div class="d-flex gap-1 flex-shrink-0">
                    <button class="btn btn-sm btn-primary" onclick="loadPreset('${escapeHtml(k)}')"><i class="bi bi-upload me-1"></i>Wczytaj</button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deletePreset('${escapeHtml(k)}')"><i class="bi bi-trash"></i></button>
                </div>
            </div>`).join('')}</div>`,
        showConfirmButton: false, showCloseButton: true, background:'#12122a', color:'#fff',
    });
});
window.loadPreset = n => { const p = getPresets()[n]; if (p) { applySettings(p); Swal.close(); } };
window.deletePreset = n => { const p = getPresets(); delete p[n]; localStorage.setItem('rankPresets', JSON.stringify(p)); Swal.close(); Swal.fire({ icon:'success', title:'Usunięto!', timer:1200, showConfirmButton:false }); };

// ── Aktualizacja labeli i widoczności ──────────────────────────────────────────
function updateAllLabels() {
    document.getElementById('radiusVal').textContent    = elRadius.value + ' px';
    document.getElementById('padHVal').textContent      = document.getElementById('padHRange').value + ' px';
    document.getElementById('padVVal').textContent      = document.getElementById('padVRange').value + ' px';
    document.getElementById('bgOutVal').textContent     = document.getElementById('bgOutRange').value + ' px';
    document.getElementById('bgShdXVal').textContent    = document.getElementById('bgShdX').value;
    document.getElementById('bgShdYVal').textContent    = document.getElementById('bgShdY').value;
    document.getElementById('txtOutVal').textContent    = document.getElementById('txtOutRange').value + ' px';
    document.getElementById('txtShdXVal').textContent   = document.getElementById('txtShdX').value;
    document.getElementById('txtShdYVal').textContent   = document.getElementById('txtShdY').value;
}
function updateShadowVisibility() {
    document.getElementById('bgShdControls').style.display  = document.getElementById('bgShdEnabled').checked  ? '' : 'none';
    document.getElementById('txtShdControls').style.display = document.getElementById('txtShdEnabled').checked ? '' : 'none';
}

// ── Event listeners ─────────────────────────────────────────────────────────────
const allInputs = document.querySelectorAll(
    '#textInput,#fontSelect,#bgColorStart,#bgColorEnd,#noBgGradient,#textColorStart,#textColorEnd,' +
    '#noTextGradient,#radiusRange,#iconSelect,' +
    '#padHRange,#padVRange,#bgOutRange,#bgOutColor,#bgShdEnabled,#bgShdX,#bgShdY,#bgShdColor,' +
    '#txtOutRange,#txtOutColor,#txtShdEnabled,#txtShdX,#txtShdY,#txtShdColor,' +
    'input[name="bgGradDir"],input[name="txtGradDir"]'
);
allInputs.forEach(el => {
    el.addEventListener('input',  () => { updateAllLabels(); updateShadowVisibility(); drawTag(); });
    el.addEventListener('change', () => { updateAllLabels(); updateShadowVisibility(); drawTag(); });
});

elUpload.addEventListener('change', e => {
    const f = e.target.files[0];
    if (!f) return;
    const r = new FileReader();
    r.onload = ev => { uploadedImage = new Image(); uploadedImage.onload = drawTag; uploadedImage.src = ev.target.result; };
    r.readAsDataURL(f);
});
elClearImg.addEventListener('click', () => { uploadedImage = null; elUpload.value = ''; drawTag(); });

// ── Loader: pokazuj "Ładowanie fontów..." dopóki się nie załadują ─────────────
function drawLoadingScreen() {
    canvas.width  = 200;
    canvas.height = 100;
    ctx.fillStyle = '#1a1a1a';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#888';
    ctx.font = 'bold 12px "Arial", sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('⏳ Ładowanie fontów...', canvas.width / 2, canvas.height / 2);
}

// Aktualizuj badge statusu fontów
function updateFontLoadStatus(loaded) {
    if (!elFontsLoadStatus) return;
    if (loaded) {
        elFontsLoadStatus.innerHTML = '<i class="bi bi-check-circle me-1"></i>Załadowane';
        elFontsLoadStatus.className = 'badge bg-success text-white';
    } else {
        elFontsLoadStatus.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i>Fallback';
        elFontsLoadStatus.className = 'badge bg-danger text-white';
    }
}

// Najpierw pokaż loader
drawLoadingScreen();

// Czekaj na załadowanie, max 5 sec dla bezpieczeństwa
const fontLoadPromise = document.fonts.ready;
const fontTimeoutPromise = new Promise(resolve => setTimeout(resolve, 5000));

Promise.race([fontLoadPromise, fontTimeoutPromise])
    .then(() => {
        console.log('✓ Czcionki załadowane');
        updateFontLoadStatus(true);
        drawTag();
    })
    .catch(() => {
        console.warn('⚠ Timeout załadowania fontów');
        updateFontLoadStatus(false);
        drawTag();
    });

// Re-render na każdą zmianę input
elText.addEventListener('input', () => { updateAllLabels(); updateShadowVisibility(); drawTag(); });

updateAllLabels();
updateShadowVisibility();
renderProject();
</script>

</main>

<footer id="footer" class="footer accent-background">

    <div class="container footer-top">
        <div class="row gy-4">
            <div class="col-lg-6 col-md-12 footer-about">
                <a href="index.html" class="logo d-flex align-items-center">
                    <span class="sitename">
                        <h1 class="sitename">Craft<span>List</span>.pl</h1>
                    </span>
                </a>
                <p>Szukasz skutecznej reklamy serwera Minecraft? Nasza lista serwerów Minecraft łączy innowacyjne funkcje z dynamiczną prezentacją Twojego serwera. Dodaj swój serwer Minecraft za darmo, zbieraj głosy, zyskaj widoczność i przyciągnij nowych graczy. Wspieramy serwery survival, skyblock, minigry i wiele innych trybów. Promuj serwer Minecraft łatwo i skutecznie – dołącz do najlepszych!</p>
                <!--<div class="social-links d-flex mt-4">
                    <a href=""><i class="bi bi-twitter-x"></i></a>
                    <a href=""><i class="bi bi-facebook"></i></a>
                    <a href=""><i class="bi bi-instagram"></i></a>
                    <a href=""><i class="bi bi-linkedin"></i></a>
                </div>-->
            </div>

            <div class="col-lg-3 col-6 footer-links">
                <h4>Przydatne linki</h4>
                <ul>
                    <li><a href="glowna">Strona Główna <i class="bi bi-link-45deg"></i></a></li>
                    <!--<li><a href="onas">O nas</a></li>-->
                    <!--<li><a href="uslugi">Usługi</a></li>
                    <li><a href="warunki">Warunki usług</a></li>-->
                    <li><a href="polityka-prywatnosci">Polityka prywatności <i class="bi bi-link-45deg"></i></a></li>
                    <li><a href="polityka-plikow-cookies">Polityka Plików Cookie <i class="bi bi-link-45deg"></i></a></li>
                    <li><a href="plugin">Konfiguracja pluginu <i class="bi bi-link-45deg"></i></a></li>
                    <li><a href="webhooki">Konfiguracja webhooków <i class="bi bi-link-45deg"></i></a></li>
                </ul>
            </div>

            <!--<div class="col-lg-2 col-6 footer-links">
                <h4>Our Services</h4>
                <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Product Management</a></li>
                    <li><a href="#">Marketing</a></li>
                    <li><a href="#">Graphic Design</a></li>
                </ul>
            </div>-->


            <div class="col-lg-3 col-md-12 footer-contact text-center text-md-start">
                <h4>Kontakt</h4>
                <p><strong>Email:</strong> <span>kontakt@craftlist.pl</span></p>
            </div>


        </div>
    </div>

    <div class="container copyright text-center mt-4">
        <div class="row gy-4">
            <div class="col-lg-6 col-6 footer-links">
                <h4>Szukaj po tagach</h4>
                                    <a href="/serwer_szukaj_tag_Anarchia-SMP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Anarchia-SMP</span></a>
                                    <a href="/serwer_szukaj_tag_Anarchy"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Anarchy</span></a>
                                    <a href="/serwer_szukaj_tag_Annihilation"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Annihilation</span></a>
                                    <a href="/serwer_szukaj_tag_BedWars"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">BedWars</span></a>
                                    <a href="/serwer_szukaj_tag_BlockParty"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">BlockParty</span></a>
                                    <a href="/serwer_szukaj_tag_BoxPvP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">BoxPvP</span></a>
                                    <a href="/serwer_szukaj_tag_CashBlock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">CashBlock</span></a>
                                    <a href="/serwer_szukaj_tag_Caveblock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Caveblock</span></a>
                                    <a href="/serwer_szukaj_tag_ChunkBlock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">ChunkBlock</span></a>
                                    <a href="/serwer_szukaj_tag_ChestPVP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">ChestPVP</span></a>
                                    <a href="/serwer_szukaj_tag_Creative"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Creative</span></a>
                                    <a href="/serwer_szukaj_tag_Duels"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Duels</span></a>
                                    <a href="/serwer_szukaj_tag_Dzialki"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Dzialki</span></a>
                                    <a href="/serwer_szukaj_tag_Earth-SMP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Earth-SMP</span></a>
                                    <a href="/serwer_szukaj_tag_EggWars"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">EggWars</span></a>
                                    <a href="/serwer_szukaj_tag_Ekonomia"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Ekonomia</span></a>
                                    <a href="/serwer_szukaj_tag_Factions"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Factions</span></a>
                                    <a href="/serwer_szukaj_tag_Freebuild"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Freebuild</span></a>
                                    <a href="/serwer_szukaj_tag_Gildie"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Gildie</span></a>
                                    <a href="/serwer_szukaj_tag_Hardcore"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Hardcore</span></a>
                                    <a href="/serwer_szukaj_tag_Hide-n-Seek"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Hide-n-Seek</span></a>
                                    <a href="/serwer_szukaj_tag_Hunger-Games"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Hunger-Games</span></a>
                                    <a href="/serwer_szukaj_tag_Inne"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Inne</span></a>
                                    <a href="/serwer_szukaj_tag_KitPVP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">KitPVP</span></a>
                                    <a href="/serwer_szukaj_tag_Lifesteal SMP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Lifesteal SMP</span></a>
                                    <a href="/serwer_szukaj_tag_MasterBuilders"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">MasterBuilders</span></a>
                                    <a href="/serwer_szukaj_tag_Mega-Enchant"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Mega-Enchant</span></a>
                                    <a href="/serwer_szukaj_tag_MegaDrop"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">MegaDrop</span></a>
                                    <a href="/serwer_szukaj_tag_MiniGames"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">MiniGames</span></a>
                                    <a href="/serwer_szukaj_tag_Mody"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Mody</span></a>
                                    <a href="/serwer_szukaj_tag_Murder-Mystery"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Murder-Mystery</span></a>
                                    <a href="/serwer_szukaj_tag_Oneblock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Oneblock</span></a>
                                    <a href="/serwer_szukaj_tag_Paintball"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Paintball</span></a>
                                    <a href="/serwer_szukaj_tag_Parkour"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Parkour</span></a>
                                    <a href="/serwer_szukaj_tag_Prison"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Prison</span></a>
                                    <a href="/serwer_szukaj_tag_PvP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">PvP</span></a>
                                    <a href="/serwer_szukaj_tag_PvP-Arena"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">PvP-Arena</span></a>
                                    <a href="/serwer_szukaj_tag_PvP-Practice"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">PvP-Practice</span></a>
                                    <a href="/serwer_szukaj_tag_RealLife"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">RealLife</span></a>
                                    <a href="/serwer_szukaj_tag_Roleplay"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Roleplay</span></a>
                                    <a href="/serwer_szukaj_tag_RPG"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">RPG</span></a>
                                    <a href="/serwer_szukaj_tag_RPG-Quest"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">RPG-Quest</span></a>
                                    <a href="/serwer_szukaj_tag_SkyBlock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SkyBlock</span></a>
                                    <a href="/serwer_szukaj_tag_SkyGen"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SkyGen</span></a>
                                    <a href="/serwer_szukaj_tag_SkySurvival"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SkySurvival</span></a>
                                    <a href="/serwer_szukaj_tag_SkyWars"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SkyWars</span></a>
                                    <a href="/serwer_szukaj_tag_SMP"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SMP</span></a>
                                    <a href="/serwer_szukaj_tag_Spleef"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Spleef</span></a>
                                    <a href="/serwer_szukaj_tag_Survival"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Survival</span></a>
                                    <a href="/serwer_szukaj_tag_SurvivalGames"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">SurvivalGames</span></a>
                                    <a href="/serwer_szukaj_tag_TNT-Run"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">TNT-Run</span></a>
                                    <a href="/serwer_szukaj_tag_UHC"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">UHC</span></a>
                                    <a href="/serwer_szukaj_tag_UHC-Champions"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">UHC-Champions</span></a>
                                    <a href="/serwer_szukaj_tag_Vanilla"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">Vanilla</span></a>
                                    <a href="/serwer_szukaj_tag_WarZ"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">WarZ</span></a>
                                    <a href="/serwer_szukaj_tag_WaterBlock"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">WaterBlock</span></a>
                                    <a href="/serwer_szukaj_tag_EasyHC"><span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">EasyHC</span></a>
                            </div>

            <div class="col-lg-6 col-6 footer-links">
                <h4>Szukaj po wersji</h4>
                                    <a href="/serwer_szukaj_wer_26.1.11">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            26.1.11                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_26.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            26.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.11">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.11                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.10">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.10                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.9">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.9                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.8">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.8                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.7">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.7                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.21">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.21                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.20">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.20                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.19">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.19                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.18.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.18.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.18.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.18.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.18">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.18                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.17.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.17.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.17">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.17                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.16">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.16                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.15.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.15.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.15.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.15.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.15">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.15                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.14">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.14                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.13.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.13.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.13.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.13.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.13">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.13                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.12.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.12.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.12.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.12.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.12">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.12                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.11.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.11.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.11.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.11.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.11">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.11                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.10.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.10.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.10.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.10.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.10">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.10                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.9">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.9                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.9">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.9                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.8">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.8                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.7">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.7                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.8">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.8                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.10">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.10                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.9">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.9                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.8">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.8                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.7">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.7                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.7.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.7.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.6.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.6.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.6.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.6.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.6.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.6.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.5.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.5.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.5.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.5.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.7">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.7                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.6">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.6                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.4.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.4.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.3.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.3.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.3.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.3.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.5">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.5                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.4">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.4                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.3">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.3                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.2">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.2                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.2.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.2.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.0.1">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.0.1                        </span>
                    </a>
                                    <a href="/serwer_szukaj_wer_1.0.0">
                        <span class="badge fs-14 mt-1" style="background-color: #388bc2;background-color: #388bc2;text-shadow: 1px 1px 2px #00000069;font-size: 12px;">
                            1.0.0                        </span>
                    </a>
                
            </div>
        </div>
        <div class="row gy-4 copyright">
            <p>© <span>Copyright</span> <strong class="px-1 sitename" style="font-size: 19px;margin: 0;font-weight: 700;font-family: var(--logo-font);color: var(--heading-color);">Craft<span style="font-size: 19px;margin-left: -2px;font-family: var(--logo-font);color: var(--nav-hover-color);">List</span>.pl</strong> <span>Wszelkie prawa zastrzeżone</span></p>
            <div class="credits">
                <!-- All the links in the footer should remain intact. -->
                <!-- You can delete the links only if you've purchased the pro version. -->
                <!-- Licensing information: https://bootstrapmade.com/license/ -->
                <!-- Purchase the pro version with working PHP/AJAX contact form: [buy-url] -->
                Zaprojektowany przez <a href="https://bootstrapmade.com/">BootstrapMade</a> z mocnymi zmianami przez właściciela CraftList.pl
            </div>
        </div>
    </div>

</footer>

<!-- Baner cookies -->
<div id="cookie-banner" class="fixed-bottom bg-dark text-white p-3 d-none" style="z-index: 999990;">
    <div class="container d-flex justify-content-between align-items-center">
        <span>
            Używamy plików cookie, aby zapewnić najlepsze działanie strony.
            <a href="/polityka-plikow-cookies" class="text-decoration-underline text-info">Dowiedz się więcej</a>
        </span>
        <button id="accept-cookies" class="btn btn-primary btn-sm ms-3">Akceptuję</button>
    </div>
</div>

<!-- Scroll Top -->
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

<!-- Preloader -->
<div id="preloader"></div>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7176552154318713"
    crossorigin="anonymous"></script>

<!-- Vendor JS Files -->
<!--<script src="/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        setTimeout(() => {
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltipTriggerList.forEach(el => {
                new bootstrap.Tooltip(el);
            });
        }, 100); // małe opóźnienie na wstawienie DOM

    });
</script>


<script src="/assets/vendor/php-email-form/validate.js"></script>
<script src="/assets/vendor/aos/aos.js"></script>
<script src="/assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="/assets/vendor/swiper/swiper-bundle.min.js"></script>
<script src="/assets/vendor/purecounter/purecounter_vanilla.js"></script>
<script src="/assets/vendor/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="/assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>

<!-- Main JS File -->
<script src="/assets/js/main.js"></script>
<!--<script>
    // Funkcja, która dodaje (lub aktualizuje) parametr w URL-u
    function updateUrl(url, paramName, paramValue) {

        // Pomijamy YouTube oraz base64 (data:) linki
        if (url.includes('img.youtube.com') || url.startsWith('data:')) {
            return url; // Zwracamy oryginalny URL bez zmian
        }

        var separator = url.indexOf('?') === -1 ? '?' : '&';
        var regex = new RegExp('([?&])' + paramName + '=[^&]*');
        if (regex.test(url)) {
            return url.replace(regex, '$1' + paramName + '=' + paramValue);
        } else {
            return url + separator + paramName + '=' + paramValue;
        }
    }

    window.addEventListener('load', function() {
        // Używamy timestamp jako losowej wartości
        var randomValue = Date.now(); // lub Math.floor(Math.random() * 1000000)
        var paramName = 'v';

        // Aktualizacja tagów <img>
        var imgs = document.getElementsByTagName('img');
        for (var i = 0; i < imgs.length; i++) {
            var src = imgs[i].getAttribute('src');
            if (src) {
                imgs[i].setAttribute('src', updateUrl(src, paramName, randomValue));
            }
        }

        // Aktualizacja linków do arkuszy CSS
        var links = document.getElementsByTagName('link');
        for (var j = 0; j < links.length; j++) {
            if (links[j].rel === 'stylesheet') {
                var href = links[j].getAttribute('href');
                if (href) {
                    links[j].setAttribute('href', updateUrl(href, paramName, randomValue));
                }
            }
        }

        // Dynamiczne załadowanie plików JS z cache bustingiem
        var scripts = document.querySelectorAll('script[data-dynamic="true"]');
        scripts.forEach(function(script) {
            var originalSrc = script.getAttribute('src');
            if (originalSrc) {
                var newScript = document.createElement('script');
                newScript.src = updateUrl(originalSrc, paramName, randomValue);
                newScript.async = false; // zachowaj kolejność
                script.parentNode.insertBefore(newScript, script.nextSibling);
                script.remove(); // usuń stary <script>
            }
        });


        // Aktualizacja URL-i w inline stylach (np. background, background-image)
        // Jeśli chcesz tylko dla divów, użyj: document.querySelectorAll('div[style*="url("]')
        var elems = document.querySelectorAll('[style*="url("]');
        elems.forEach(function(elem) {
            var styleText = elem.getAttribute('style');
            // Wyszukujemy wszystkie wystąpienia url(...) w atrybucie style
            var updatedStyle = styleText.replace(/url\(\s*(['"]?)([^'")]+)\1\s*\)/g, function(match, quote, url) {
                var newUrl = updateUrl(url, paramName, randomValue);
                return 'url(' + (quote || '') + newUrl + (quote || '') + ')';
            });
            elem.setAttribute('style', updatedStyle);
        });
    });
</script>-->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('a.no-link').forEach(function(link) {
            link.addEventListener('click', function(e) {
                e.preventDefault();
            });
        });
    });
</script>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const banner = document.getElementById("cookie-banner");
        const btn = document.getElementById("accept-cookies");

        // Sprawdź, czy cookies były zaakceptowane
        if (!localStorage.getItem("cookiesAccepted")) {
            banner.classList.remove("d-none");
        }

        btn.addEventListener("click", function() {
            localStorage.setItem("cookiesAccepted", "true");
            banner.classList.add("d-none");
        });
    });
</script>

</body>

</html>