<!DOCTYPE html>
<html lang="en" dir="ltr" >
<head>
<!-- Meta Data -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="icon" href="https://skinmc.net/img/icons/favicon.png">
<link rel="icon" type="image/jpg" sizes="512x512" href="https://skinmc.net/img/pwa/app_512.png">
<link rel="apple-touch-icon" type="image/jpg" sizes="512x512" href="https://skinmc.net/img/pwa/app_512.png">
<title>
Minecraft Skin Viewer — SkinMC
</title>
<meta name="description" content="View and download Minecraft skins, discover the best skins in curated collections, check username availability and history and so much more! — SkinMC">
<meta name="keywords" content="SkinMC , Minecraft, Minecraft Skins, Skin Editor, Minecraft Servers, Minecraft Achievements, Avatar Maker, Minecraft Creations">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://skinmc.net">
<link rel="preload" as="style" href="https://skinmc.net/build/assets/app-Ch4Wx5hz.css" /><link rel="modulepreload" href="https://skinmc.net/build/assets/app-Bp6eOLCn.js" /><link rel="modulepreload" href="https://skinmc.net/build/assets/jquery-WtZBIVyz.js" /><link rel="modulepreload" href="https://skinmc.net/build/assets/croppr-BIgFl0rL.js" /><link rel="modulepreload" href="https://skinmc.net/build/assets/_commonjsHelpers-CqkleIqs.js" /><link rel="stylesheet" href="https://skinmc.net/build/assets/app-Ch4Wx5hz.css" data-navigate-track="reload" /><script type="module" src="https://skinmc.net/build/assets/app-Bp6eOLCn.js" data-navigate-track="reload"></script> <link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
<!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}[wire\:cloak] {display: none !important;}</style>
</head>
<style>
.search-nav.mobile {
padding-top: env(safe-area-inset-top, 32px);
}
.tab-bar {
padding-bottom: env(safe-area-inset-bottom, 24px);
height: calc(env(safe-area-inset-bottom, 24px) + 54px)
}
</style>
<body style="">
<nav class="navbar navbar-home navbar-expand-md fixed-top navbar-dark main-nav d-none d-md-block preload">
<div class="container justify-content-center">
<ul class="nav navbar-nav w-100 py-3">
<li class="nav-item mx-auto mx-md-0">
<a href="https://skinmc.net" class="navbar-brand p-0">
<svg title="SkinMC" width="36" height="36" viewBox="0 0 36 36" fill="white" xmlns="http://www.w3.org/2000/svg" class="svg-logo logo-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6L5 0H5.21379H36V30.7862V31L31 36H0V6ZM33.5172 2.48276H7.69655V28.3034H33.5172V2.48276Z" class="svg-logo-bg"></path>
<g class="svg-logo-top">
<path fill-rule="evenodd" clip-rule="evenodd" d="M36 0H5V31H36V0ZM33 3H8V28H33V3Z"></path>
<path d="M26 17H15V24H18V21.5H23V24H26V17Z"></path>
<path d="M18 14H23V17H18V14Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8H18V14H12V8ZM23 14V8H29V14H23Z" class="logo-eye"></path>
</g>
</svg>
<span class="fs-5 align-middle">SkinMC</span>
</a>
</li>
</ul>
<ul class="nav navbar-nav flex-nowrap w-100 justify-content-center fs-5 nav-middle">
<li class="nav-item ">
<a class="nav-link" href="https://skinmc.net/feed/home" style="width: max-content;">Feed</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://skinmc.net/skins" style="width: max-content;">Skins</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://skinmc.net/skin-editor" style="width: max-content;">Editor</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://skinmc.net/avatars" style="width: max-content;">Avatars</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://skinmc.net/capes" style="width: max-content;">Capes</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://skinmc.net/totem" style="width: max-content;">Totems</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://skinmc.net/servers" style="width: max-content;">Servers</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="https://skinmc.net/achievement" style="width: max-content;">Achievement</a>
</li>
</ul>
<ul class="nav navbar-nav flex-nowrap w-100 justify-content-end">
<li class="nav-item d-none d-md-block d-lg-block">
<div class="theme-select">
<button class="btn rounded-pill hover-bg shadow-none px-1 py-1 align-middle d-flex align-items-center"
data-bs-toggle="modal" data-bs-target="#loginModal">
<span class="material-icons m-1 notificationsEmpty d-flex">notifications</span>
</button>
</div>
</li>
<li class="nav-item d-none d-md-block d-lg-block theme-select">
<button class="btn rounded-pill hover-bg shadow-none px-1 py-1 align-middle d-flex align-items-center" type="button" href="#languageModal" data-bs-toggle="modal" data-bs-target="#languageModal">
<span class="material-icons text-decoration-none m-1 d-flex">globe</span>
</button>
</li>
<li class="nav-item">
<div class="dropdown theme-select">
<button class="btn rounded-pill hover-bg shadow-none px-1 py-1 align-middle me-lg-1 me-md-0 d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" style="transition: color 0s!important;">
<span class="theme-icon-active material-icons text-decoration-none m-1">dark_mode</span>
</button>
<ul class="dropdown-menu dropdown-menu-end p-2 mt-2" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
<div class="d-flex w-auto justify-content-between gap-1 align-items-center">
<li>
<button type="button" class="dropdown-item btn border border-0 border-12 px-2 d-flex flex-column align-items-center text-decoration-none text-reset gap-1" data-bs-theme-value="light">
<span class="material-icons mx-2 mt-2">light_mode</span>
<span style="font-size: 12px" class="text-muted mb-1">Light</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item btn border border-0 border-12 px-2 d-flex flex-column align-items-center text-decoration-none text-reset gap-1" data-bs-theme-value="dark">
<span class="material-icons mx-2 mt-2">dark_mode</span>
<span style="font-size: 12px" class="text-muted mb-1">Dark</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item btn border border-0 border-12 px-2 d-flex flex-column align-items-center text-decoration-none text-reset gap-1" data-bs-theme-value="auto">
<span class="material-icons mx-2 mt-2">brightness_auto</span>
<span style="font-size: 12px" class="text-muted mb-1">Automatic</span>
</button>
</li>
</div>
</ul>
</div>
</li>
<li class="nav-item d-none d-md-block d-lg-block">
<div class="dropdown">
<button class="btn bg-white btn-light rounded-pill px-1 py-1 align-middle shadow-none shadow-md d-flex flex-nowrap align-items-center nav-user" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<span class="material-icons text-decoration-none m-1 d-flex">menu</span>
<span class="material-icons text-dark rounded-circle align-middle d-none d-md-inline-block" style="font-size: 32px">account_circle</span>
</button>
<ul class="dropdown-menu dropdown-menu-end px-0 pt-1 z-index-1200 mt-3 mt-md-2 custom-scroll" aria-label="Menu" style="min-width: 225px; max-height: calc(100vh - 84px); overflow-y: auto; overflow-x: hidden; background: var(--bs-body-bg)">
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3 fw-500 d-none d-md-block" href="#signUpModal" data-bs-toggle="modal" data-bs-target="#signUpModal">Sign up</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3 d-none d-md-block" href="#loginModal" data-bs-toggle="modal" data-bs-target="#loginModal">Log in</a></li>
<li><hr class="dropdown-divider ms-n2 me-n2 d-none d-md-block"></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/feed/home">Feed</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/skins">Skins</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/skin-editor">Editor</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/capes">Capes</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/p/mod">Mod</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/servers">Servers</a></li>
<div class="dropdown">
<button class="btn hover-bg text-dark rounded-0 text-decoration-none p-2 px-3 w-100 fw-normal border-0 d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Generators
<span class="material-icons d-flex">expand_more</span>
</button>
<ul class="dropdown-menu position-static">
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/avatars">Avatars</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/achievement">Achievement</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/totem">Totems</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/banner/gallery">Banners</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/heads">Heads</a></li>
</ul>
</div>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/leaderboard">Leaderboard</a></li>
<li><hr class="dropdown-divider ms-n2 me-n2"></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/go/discord" target="_blank">Discord</a></li>
<li><a class="dropdown-item hover-bg text-dark rounded-0 text-decoration-none p-2 px-3" href="https://skinmc.net/go/bsky" target="_blank">Bluesky</a></li>
</ul>
</div>
</li>
</ul>
</div>
<style>
.shadow-search {
box-shadow: 0 0 1px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.10), 0 1px 12px rgba(0, 0, 0, 0.05), 0 6px 24px rgba(0, 0, 0, 0.15);
}
</style>
<div class="search-nav position-fixed" >
<div class="container d-flex justify-content-center">
<div class="col-xl-8 col-lg-10 col-md-12 col-12 mt-5">
<!-- Search Bar -->
<div class="search-bar shadow-search border p-1 pe-md-3 btn-glow" id="btn-glow" data-bs-placement="bottom">
<form action="https://skinmc.net/s" method="get" class="row main-search " id="search">
<!-- Username -->
<div class="col-md-6 col-12 ps-xs-0 has-autocomplete position-static" id="usernameSearch">
<label for="searchName" class="w-100 rounded-pill divider">
<div class="search-field">
<span class="fw-500" id="searchFieldTitle">What</span>
<input type="text" required name="search" id="searchName" class="form-control fs-5 search-box" placeholder="Try “Truzze”" autocomplete="off" minlength="2" maxlength="36" pattern="[a-zA-Z0-9_.\-][a-zA-Z0-9_.\-]{1,36}">
<button class="close-icon btn p-0 rounded-circle d-none" type="reset" id="resetSearchBtn" aria-label="Reset form">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g><path d="M12 0C5.364 0 0 5.364 0 12s5.364 12 12 12 12-5.364 12-12S18.636 0 12 0z" fill-opacity=".125" class="close-bg"/><path d="M16.3 16.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></g></svg>
</button>
</div>
</label>
<div class="autocomplete-menu">
<div style="pointer-events: none; position: absolute; top: 47px; height: 12px; width: 100%; background: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%)"></div>
<div class="autocomplete-menu-content d-flex pe-3" style="padding-bottom: 37px;" data-bs-theme="light">
<div class="row w-100">
<div class="col-md-5 h-100 custom-scroll overflow-y-scroll">
<span class="fw-bolder">Recent searches</span>
<nav class="nav flex-column pt-md-0 px-0 recentSearchesList text-wrap">
<div class="recent-is-empty"><p class="mt-2">As you start searching, your past searches will show here.</p></div>
</nav>
</div>
<div class="col-auto pb-4 px-4 d-none d-md-flex" style="z-index: 1;">
<div class="border-start h-100"></div>
</div>
<div class="col h-100 custom-scroll overflow-y-scroll pt-md-0 pt-4">
<span class="fw-bolder">Recently viewed</span>
<style>.recentlyViewedList .hover-bg:hover {background: none!important}</style>
<div class="row row-cols-2 flex-row flex-wrap pt-1 g-1 recentlyViewedList">
<p class="mt-2 d-flex flex-column w-100">After visiting some profiles, your past visited ones will show here.</p>
</div>
</div>
</div>
</div>
<div style="pointer-events: none; position: absolute; bottom: 37px; height: 12px; width: 100%; background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%)"></div>
<div data-bs-theme="light" class="text-muted d-flex flex-wrap justify-content-center flex-row gap-3" style="position: absolute; bottom: 0;padding: 6px; width: 100%; background: white; border-radius: 0 0 32px 32px; border-top: 1px solid var(--bs-border-color)">
<span class="d-flex align-items-center">
<kbd class="me-1">ctrl</kbd>
<kbd class="me-3">k</kbd>
<span class="small">Open search</span>
</span>
</div>
</div>
</div>
<div class="col-md-3 col-12 ps-md-0 pe-0 flex-shrink-1">
<div class="dropdown" data-bs-theme="light">
<button class="btn w-100 search-field rounded-pill text-start row pe-2 text-dark" style="font-size: 0.9rem;" type="button" id="searchTypeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<span class="col mb-n1 text-truncate p-0">Search type</span>
<div class="col text-truncate fs-5 mb-n1 mt-n1 p-0" id="searchTypeActiveName">
All results
</div>
</button>
<ul class="dropdown-menu ms-n3 mt-3 p-4 bg-body" id="selectSearchType" aria-labelledby="searchTypeDropdown">
<div class="row row-cols-2 g-3">
<div class="col">
<span class="btn border border-16 hover-bg shadow-none text-start p-3 w-100 h-100 d-flex flex-column" id="searchTypeAll">
<span class="material-icons mb-2">search</span>
<span>All results</span>
<span class="text-muted small fw-normal">Name, tag, UUID, etc...</span>
</span>
</div>
<div class="col">
<span class="btn border border-16 hover-bg shadow-none text-start p-3 w-100 h-100 d-flex flex-column" id="searchTypeProfiles">
<span class="material-icons mb-2">badge</span>
<span>Profiles</span>
<span class="text-muted small fw-normal">Name/UUID</span>
</span>
</div>
<div class="col">
<span class="btn border border-16 hover-bg shadow-none text-start p-3 w-100 h-100 d-flex flex-column" id="searchTypeSkins">
<span class="material-icons mb-2">style</span>
<span>Skins</span>
<span class="text-muted small fw-normal">Tagged Minecraft Skins</span>
</span>
</div>
<div class="col">
<span class="btn border border-16 hover-bg shadow-none text-start p-3 w-100 h-100 d-flex flex-column" id="searchTypeServers">
<span class="material-icons mb-2">dns</span>
<span>Servers</span>
<span class="text-muted small fw-normal">Minecraft servers</span>
</span>
</div>
</div>
</ul>
</div>
</div>
<div class="d-grid gap-2 col py-2 mx-3 mb-2 mb-md-0 mx-md-0 text-truncate">
<button type="submit" class="btn btn-primary btn-load fs-5 rounded-pill" id="btn-primary">
<div class="px-2 my-1 d-flex justify-content-center gap-1 align-items-center">
<span class="material-icons" style="font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;">search</span>
<span>Search</span>
</div>
</button>
</div>
</form>
<div class="row">
<div class="search-collapse d-none px-4 pe-2">
<div class="d-flex ps-1">
<div class="ms-2 ps-2 ps-md-0 ms-lg-0">
<span for="mobileSearchForm" class="small text-muted">What</span>
<p class="mb-0 font-1 fw-500 mt-n1">Start searching</p>
</div>
<div class="d-flex ms-auto bg-primary p-2 rounded-circle me-3 me-md-0 my-auto">
<svg width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M11.81 10.245l-.38.485a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34A6.505 6.505 0 0 0 .05 7.32c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l-.323.27 3.843 4.05c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49l-3.93-4.015zM6.5 11C4.01 11 2 8.99 2 6.5S4.01 2 6.5 2 11 4.01 11 6.5 8.99 11 6.5 11z" fill="#FFF"/></svg></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<div class="search-nav mobile d-block d-md-none z-index-1200 has-scroll-bg" id="search-mobile-container">
<form action="https://skinmc.net/s" method="get" id="formMobile">
<div class="container" id="main-mobile-search-container">
<div class="row mt-3 pb-3">
<!-- Back button -->
<div class="col-auto d-flex align-items-center back-button d-none">
<div class="search-mobile-back d-none d-lg-none position-absolute ms-1">
<a onclick="window.history.back();" class="btn shadow-none hover-bg rounded-pill btn-back p-1">
<span class="material-icons">keyboard_arrow_left</span>
</a>
</div>
</div>
<!-- Cancel button -->
<div class="col-12 search-close mb-3 fadeInDownSearch">
<div class="p-2 btn border rounded-circle text-dark" id="closeSearch" title="Cancel">
<span class="material-icons fs-5 d-flex">close</span>
</div>
</div>
<!-- Search Bar -->
<div class="col w-100 pe-0" id="search-input-col">
<div id="search-input-card">
<div class="search-bar mobile-search-bar p-1 m-0 btn-glow" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.05)!important;">
<div class="px-3 pe-1 py-0" id="mobile-search-field">
<div class="d-flex align-items-center">
<div class="search-field mb-0 d-flex flex-column font-14 ps-md-0 ms-lg-0 ms-0 w-100">
<p for="mobileSearchForm" class="small text-muted mb-0">What</p>
<input type="text" required name="search" id="mobileSearchForm" class="form-control fs-6 search-box" placeholder="Try “Truzze”" autocomplete="off" maxlength="37" pattern="[a-zA-Z0-9_-][a-zA-Z0-9 -_]{2,37}">
<button class="close-icon btn p-0 rounded-circle d-none" type="reset" id="mobileResetBtn" onclick="document.getElementById('mobileSearchForm').value = ''; $('#mobileSearchForm').typeahead('val', '');" style="top: 8px">
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><g><path d="M12 0C5.364 0 0 5.364 0 12s5.364 12 12 12 12-5.364 12-12S18.636 0 12 0z" fill-opacity=".125" class="close-bg"/><path d="M16.3 16.3a.996.996 0 0 1-1.41 0L12 13.41 9.11 16.3a.996.996 0 1 1-1.41-1.41L10.59 12 7.7 9.11A.996.996 0 1 1 9.11 7.7L12 10.59l2.89-2.89a.996.996 0 1 1 1.41 1.41L13.41 12l2.89 2.89c.38.38.38 1.02 0 1.41z"/></g></svg>
</button>
</div>
<button type="submit" class="btn d-flex ms-auto bg-primary p-2 text-white rounded-pill me-md-0 btn-load" style="height: 35px">
<svg width="17" height="17" xmlns="http://www.w3.org/2000/svg"><path d="M11.81 10.245l-.38.485a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34A6.505 6.505 0 0 0 .05 7.32c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l-.323.27 3.843 4.05c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49l-3.93-4.015zM6.5 11C4.01 11 2 8.99 2 6.5S4.01 2 6.5 2 11 4.01 11 6.5 8.99 11 6.5 11z" fill="#FFF"/></svg></span>
</button>
</div>
</div>
</div>
<div class="mobile-search-types">
<div class="row row-cols-2 scrolling-wrapper flex-row flex-nowrap mt-2 py-2 pt-2 gx-2 mx-n3 mb-n2 collapse show" id="mobileSearchTypeCards">
<div class="col ps-3">
<span class="btn text-dark border border-16 hover-bg shadow-none text-start p-3 w-100 h-100 d-flex flex-column" id="searchMobileTypeAll">
<span class="material-icons mb-2">search</span>
<span>All results</span>
<span class="text-muted small fw-normal">Name, tag, UUID, etc...</span>
</span>
</div>
<div class="col">
<span class="btn text-dark border border-16 hover-bg shadow-none text-start p-3 w-100 h-100 d-flex flex-column" id="searchMobileTypeProfiles">
<span class="material-icons mb-2">badge</span>
<span>Profiles</span>
<span class="text-muted small fw-normal">Name/UUID</span>
</span>
</div>
<div class="col">
<span class="btn text-dark border border-16 hover-bg shadow-none text-start p-3 w-100 h-100 d-flex flex-column" id="searchMobileTypeSkins">
<span class="material-icons mb-2">style</span>
<span>Skins</span>
<span class="text-muted small fw-normal">Tagged Minecraft Skins</span>
</span>
</div>
<div class="col me-3">
<span class="btn text-dark border border-16 hover-bg shadow-none text-start p-3 w-100 h-100 d-flex flex-column" id="searchMobileTypeServers">
<span class="material-icons mb-2">dns</span>
<span>Servers</span>
<span class="text-muted small fw-normal">Minecraft servers</span>
</span>
</div>
</div>
</div>
</div>
<div class="collapse" id="typeaheadBackground">
<div class="card shadow p-3 pt-0 border-24 mt-3 typeahead-background-card"></div>
</div>
</div>
<!-- Menu button -->
<div class="col-auto d-flex align-items-center menu-button me-2">
<div class="search-mobile-menu d-block d-lg-none position-absolute">
<button class="nav-link btn bg-white rounded-pill px-1 px-md-2 py-1 align-middle shadow-none shadow-md" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasMenu" aria-controls="offcanvasMenu">
<img src="https://skinmc.net/img/icons/menu.svg" alt="Menu" width="24px" height="24px" class="m-1 d-flex">
</button>
</div>
</div>
</div>
<div class="row autocomplete-m g-3 pb-3">
<div class="col">
<div class="card border-24 shadow" id="mobileRecentSearchCard">
<div class="card-body">
<a class="text-decoration-none text-reset d-flex justify-content-between align-items-center collapse-recent-searches" data-bs-toggle="collapse" href="#collapseRecentlySearched" role="button" aria-expanded="false" aria-controls="collapseRecentlySearched">
<span class="text-muted small fw-bolder">Recent searches</span>
<span class="text-collapsed small">Show more</span>
<span class="text-expanded small">Show less</span>
</a>
<div class="col collapse" id="collapseRecentlySearched">
<nav class="nav flex-column pt-md-0 px-0 recentSearchesList text-wrap">
<div class="recent-is-empty"><p class="mt-4">As you start searching, your past searches will show here.</p></div>
</nav>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card border-24 shadow" id="mobileRecentViewedCard">
<div class="card-body">
<a class="text-decoration-none text-reset d-flex justify-content-between align-items-center collapse-recent-views" data-bs-toggle="collapse" href="#collapseRecentlyViewed" role="button" aria-expanded="false" aria-controls="collapseRecentlyViewed">
<span class="text-muted small fw-bolder">Recently viewed</span>
<span class="text-collapsed small">Show more</span>
<span class="text-expanded small">Show less</span>
</a>
<div class="col overflow-x-hidden collapse" id="collapseRecentlyViewed">
<div class="row row-cols-2 flex-row flex-wrap g-1 recentlyViewedList">
<p class="mt-4 d-flex flex-column w-100">After visiting some profiles, your past visited ones will show here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sticky bar -->
<div class="px-4 py-3 border-top shadow position-absolute bottom-0 start-0 w-100 card border-0 rounded-0 d-none"
id="stickySearchBarMobile">
<button class="btn w-100 btn-primary btn-load" type="submit" style="height: 46px">
<span>Search</span>
</button>
</div>
</div>
</form>
</div>
<div class="offcanvas offcanvas-end p-2 py-0" tabindex="-1" id="offcanvasMenu" aria-labelledby="offcanvasMenuLabel" style="width: 85%;max-width: 400px;">
<div class="offcanvas-header position-absolute w-100 ms-n2 justify-content-end">
<button type="button" class="btn btn-light bg-white text-dark border border-white shadow-none rounded-pill px-lg-3 px-2 py-2" style="line-height: 0;" data-bs-dismiss="offcanvas" aria-label="Close">
<span class="material-icons d-flex">close</span>
</button>
</div>
<div class="offcanvas-body p-4">
<div class="row">
<div class="col-12">
<div class="mb-4">
<img src="https://skinmc.net/img/icons/account.svg" alt="Account" width="72px" height="72px" class="mb-3">
<h5 class="mb-3">Not signed in</h5>
<a class="px-3 btn btn-dark rounded-pill px-2 py-2 w-100" href="https://skinmc.net/auth/login">Log in</a>
</div>
</div>
<div class="col-12">
<nav class="nav flex-column">
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/feed/home">Feed</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/skins">Skins</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/skin-editor">Editor</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/totem">Totems</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/heads">Heads</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/avatars">Avatars</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/capes">Capes</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/banner/gallery">Banners</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/servers">Servers</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/achievement">Achievement</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/leaderboard">Leaderboard</a></li>
</nav>
</div>
<div class="col-12">
<nav class="nav flex-column border-top pt-4 mt-4">
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/p/faq">FAQs</a></li>
<li><a class="dropdown-item text-dark px-0 py-1 fs-5 fw-normal text-decoration-underline-hover bg-none" href="https://skinmc.net/p/contact">Contact</a></li>
</nav>
<nav class="nav flex-row border-top pt-4 mt-4">
<a class="nav-link ps-0" href="https://skinmc.net/go/bsky" target="_blank"><img src="https://skinmc.net/img/social/bluesky.svg" alt="Bluesky" width="28px"></a>
<a class="nav-link ps-0" href="https://skinmc.net/go/discord" target="_blank"><img src="https://skinmc.net/img/social/discord.png" alt="Discord" width="32px" height="32px"></a>
<a class="nav-link ps-0" href="https://skinmc.net/go/instagram" target="_blank"><img src="https://skinmc.net/img/social/instagram.png" alt="Instagram" width="32px" height="32px"></a>
</nav>
<nav class="nav flex-row border-top pt-4 mt-4 justify-content-between">
<button class="btn rounded-pill hover-bg shadow-none px-1 py-1 align-middle d-flex align-items-center" type="button" href="#languageModal" data-bs-toggle="modal" data-bs-target="#languageModal">
<span class="material-icons text-decoration-none m-1 d-flex">globe</span>
<span class="align-middle pe-1 text-decoration-none">English (EN)</span>
</button>
<div class="dropup theme-select">
<a class="btn rounded-pill hover-bg shadow-none px-1 py-1 align-middle me-lg-2 me-md-0 d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" style="transition: color 0s!important;">
<span class="theme-icon-active material-icons text-decoration-none m-1">dark_mode</span>
</a>
<ul class="dropdown-menu dropdown-menu-end p-2" aria-labelledby="bd-theme" style="--bs-dropdown-min-width: 8rem;">
<li>
<button type="button" class="dropdown-item border-12 px-2 d-flex align-items-center text-decoration-none text-reset gap-2" data-bs-theme-value="light">
<span class="material-icons">light_mode</span>
<span>Light mode</span>
</button>
</li>
<li>
<button type="button" class="dropdown-item border-12 px-2 d-flex align-items-center text-decoration-none text-reset gap-2" data-bs-theme-value="dark">
<span class="material-icons">dark_mode</span>
<span>Dark mode</span>
</button>
</li>
<li>
<hr class="dropdown-divider ms-n2 me-n2">
</li>
<li>
<button type="button" class="dropdown-item border-12 px-2 d-flex align-items-center text-decoration-none text-reset gap-2" data-bs-theme-value="auto">
<span class="material-icons">brightness_auto</span>
<span>Automatic</span>
</button>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="nav-backdrop"></div>
<nav class="tab-bar d-flex d-md-none nav justify-content-evenly flex-nowrap overflow-visible" id="tab-bar">
<a href="https://skinmc.net" class="nav-link py-1 px-1 my-auto text-dark border-12 active">
<div class="d-flex justify-content-center position-relative">
<div style="font-variation-settings: 'FILL' 1, 'wght' 100, 'GRAD' 0, 'opsz' 24">
<span class="material-icons d-flex">home</span>
</div>
</div>
<div class="d-flex mx-auto small visually-hidden">
Search
</div>
</a>
<a href="https://skinmc.net/feed/home" class="nav-link py-1 px-1 my-auto text-dark border-12">
<div class="d-flex justify-content-center position-relative">
<div style="font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24">
<span class="material-icons d-flex">article</span>
</div>
</div>
<div class="d-flex mx-auto small visually-hidden">
Feed
</div>
</a>
<a href="https://skinmc.net/auth/login" class="nav-link py-1 px-1 my-auto text-dark border-12">
<div class="d-flex justify-content-center position-relative">
<div style="font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24">
<span class="material-icons d-flex">notifications</span>
</div>
</div>
<div class="d-flex mx-auto small visually-hidden">
Notifications
</div>
</a>
<a href="https://skinmc.net/auth/login" class="nav-link py-1 px-1 my-auto text-dark border-12">
<div class="d-flex justify-content-center position-relative">
<div style="font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24">
<span class="material-icons d-flex">mail</span>
</div>
</div>
<div class="d-flex mx-auto small visually-hidden">
Notifications
</div>
</a>
<a href="https://skinmc.net/auth/login" class="nav-link py-1 px-1 my-auto text-dark border-12">
<div class="d-flex justify-content-center position-relative">
<div style="font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24">
<span class="material-icons d-flex">account_circle</span>
</div>
</div>
<div class="d-flex mx-auto small visually-hidden">
Log in
</div>
</a>
</nav>
<div class="position-fixed bottom-0 end-0 mb-5 me-4 mb-md-3 pb-4 pb-md-0 z-index-900 feedback-button-container">
<button class="px-3 btn btn-dark rounded-pill px-2 py-2 align-middle shadow"
type="button" onclick="FreshworksWidget('open');" id="feedbackBtn">
<div class="d-flex align-items-center">Help</div>
</button>
</div>
<script>
window.fwSettings={
'widget_id':103000002180
};
!function(){if("function"!=typeof window.FreshworksWidget){var n=function(){n.q.push(arguments)};n.q=[],window.FreshworksWidget=n}}()
</script>
<script type='text/javascript' src='https://euc-widget.freshworks.com/widgets/103000002180.js' async defer></script>
<script type='text/javascript'>
FreshworksWidget('hide', 'launcher');
FreshworksWidget('identify', 'ticketForm', {
name: '',
email: '',
});
</script>
<div class="container-fluid head hero g-0 position-relative overflow-hidden">
<div class="hero-3 h-100 w-100 position-absolute top-0"></div>
<div class="container h-100 position-relative">
<div class="row h-100">
<div class="col-md-8 mx-auto text-center mt-auto mb-5 pb-4 pb-md-5">
<h1 class="text-white mb-4" style="text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);">Your place for Minecraft Skins.</h1>
</div>
</div>
</div>
<div x-data="{ show: localStorage.getItem('kofiMessageShow') === null }">
<script>
function dismissMessage() {
localStorage.setItem('kofiMessageShow', 'false');
this.show = false; // Hide the message
}
document.addEventListener('alpine:init', () => {
Alpine.store('show', localStorage.getItem('kofiMessageShow'));
});
</script>
<div x-show="show">
<div class="message-container d-flex w-100 position-absolute bottom-0 start-50 translate-middle-x align-items-end p-3 p-md-4">
<div class="d-flex flex-shrink-0 message-dot rounded-pill shadow"></div>
<div class="message-pill-container position-relative">
<div class="message-pill px-3 py-2 rounded-pill position-relative shadow text-black">
<span>
Support SkinMC on Ko-Fi! <a href="https://ko-fi.com/skinmc?utm_source=kofi_hero_message&utm_medium=bubble&utm_campaign=kofi_hero_message&utm_id=kofi-bubble" class="stretched-link" target="_blank">Donate</a>
</span>
</div>
<div class="position-absolute top-0 start-100 translate-middle close-message">
<button @click="dismissMessage" class="btn rounded-circle p-1 bg-body shadow-sm hover-shadow overflow-hidden hover-opacity-5">
<span class="material-icons d-flex small">close</span>
</button>
</div>
</div>
</div>
</div>
</div>
<style>
@keyframes dotAppear {
0% { opacity: 0; transform: translateY(100%); }
100% { opacity: 1; transform: translateY(0%); }
}
@keyframes messageAppear {
0% { opacity: 0; }
35% { opacity: 0; transform: translateX(-20px) scale(0.85); transform-origin: bottom left }
75% { opacity: 1; }
100% { opacity: 1; transform: translateX(0%) scale(1); }
}
@keyframes fade-in {
0% { opacity: 0; }
90% { opacity: 0; }
100% { opacity: 1; }
}
/* Dot */
.message-dot {
width: 10px;
height: 10px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(6px);
animation: dotAppear 0.75s cubic-bezier(.52,-0.71,.46,2.05) forwards;
}
/* Pill */
.message-pill-container {
animation: messageAppear forwards;
animation-duration: 1.5s;
animation-timing-function: cubic-bezier(.52,-0.13,.16,1.75);
}
.message-pill {
background: rgba(255,255,255,0.9);
backdrop-filter: blur(6px);
color: var(--bs-dark);
transition: box-shadow 0.2s ease-out, transform 0.2s ease-out, background 0.125s ease-in-out, color 0.125s ease-in-out
}
.message-pill:hover {
transform: scale(1.04);
box-shadow: 0 0 1px transparent, 0 0 0 4px transparent, 0 6px 16px rgba(0,0,0,0.12) !important
}
.message-pill:active {
transform: scale(0.98);
}
.close-message {
visibility: hidden;
opacity: 0;
transition: all ease-in-out .2s!important;
}
.message-pill-container:hover .close-message {
visibility: visible;
opacity: 1;
}
@media (max-width: 768px) {
.close-message {
visibility: visible;
opacity: 1;
}
.close-message .btn {
animation: fade-in 2s ease-in forwards;
}
}
</style>
</div>
<div class="position-fixed bottom-0 start-50 translate-middle-x mb-5 me-4 mb-md-3 pb-4 pb-md-0 z-index-900 feedback-button-container">
<style>
.btn-show-skins:hover {
background: rgb(34, 34, 34) !important;
transform: scale(1.04);
box-shadow: 0 0 1px transparent, 0 0 0 4px transparent, 0 6px 16px rgba(0,0,0,0.12) !important
}
.btn-show-skins:active{
transform: scale(0.94);
}
</style>
<a class="px-3 btn btn-dark btn-show-skins rounded-pill py-2 align-middle shadow border-0"
href="https://skinmc.net/skins/tagged">
<div class="fw-700 d-flex align-items-center">
<span class="my-1 mx-2">Explore skins</span>
<span class="material-icons d-none d-md-flex me-1">style</span>
</div>
</a>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="p-3 d-flex gap-2 rounded-4 bg-light my-4 position-relative hover-bg">
<span class="material-icons">campaign</span>
<span>We’re now on Bluesky! Follow us for skin inspiration and fun Minecraft content. <a class="fw-bolder stretched-link" href="https://skinmc.net/go/bsky" target="_blank">Follow</a></span>
</div>
</div>
</div>
</div>
<div id="stickyFilterTrigger"></div>
<div class="container-fluid sticky-filter-bar sticky-top bg-white px-0 px-md-3 overflow-hidden" style="z-index: 800">
<div class="container">
<div class="row">
<div class="col-12 flex-row d-flex position-relative">
<div id="scrollBarFadeLeft" class="fade" style="width: 100px;z-index: 1;height: 100%;position: absolute;background: linear-gradient(-90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); left: 0; pointer-events: none;"></div>
<div class="position-absolute top-50 start-0 translate-middle-y ps-2 p-3 fade" style="z-index: 2; pointer-events: none" id="stickyBackwardButtonGroup">
<button class="btn bg-white btn-outline-dark shadow-none hover-shadow text-body border-8 p-1 w-auto h-auto rounded-circle my-auto" id="stickyBackwardButton">
<div class="d-flex align-items-center">
<span class="material-icons font-125">keyboard_arrow_left</span>
</div>
</button>
</div>
<div class="scrolling-wrapper hide-scrollbar filter-bar row flex-row flex-nowrap py-3 ms-n2" id="scrolling-wrapper-trending-tags" style="scroll-behavior: smooth;">
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 active" href="https://skinmc.net/skins"><span class="icon align-middle material-icons">whatshot</span><span class="align-middle">Trending</span></a>
<div wire:snapshot="{"data":[],"memo":{"id":"L9VeofuPpIlSw4CGtNUs","name":"trending-skin-tags","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"29acd4dc28d6ba12b400902cbdb10e2e8308da002c8be5d76b9b8a741698ad78"}" wire:effects="[]" wire:id="L9VeofuPpIlSw4CGtNUs" class="d-flex">
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/girl">
<span class="align-middle">Girl</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/boy">
<span class="align-middle">Boy</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/furry">
<span class="align-middle">Furry</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/steve">
<span class="align-middle">Steve</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/animal">
<span class="align-middle">Animal</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/christmas">
<span class="align-middle">Christmas</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/fox">
<span class="align-middle">Fox</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/pokemon">
<span class="align-middle">Pokemon</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/suit">
<span class="align-middle">Suit</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/hoodie">
<span class="align-middle">Hoodie</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/youtuber">
<span class="align-middle">YouTuber</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/long-hair">
<span class="align-middle">Long Hair</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/cat">
<span class="align-middle">Cat</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/maid">
<span class="align-middle">Maid</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/pink">
<span class="align-middle">Pink</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/snowman">
<span class="align-middle">Snowman</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/sunglasses">
<span class="align-middle">Sunglasses</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/scarf">
<span class="align-middle">Scarf</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/cute">
<span class="align-middle">Cute</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/duck">
<span class="align-middle">Duck</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/black">
<span class="align-middle">Black</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/blue">
<span class="align-middle">Blue</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/cool">
<span class="align-middle">Cool</span>
</a>
<a class="btn border-16 hover-bg shadow-none w-auto px-2 py-1 me-2 cursor-pointer text-nowrap"
href="https://skinmc.net/skins/tagged/dream-smp">
<span class="align-middle">Dream SMP</span>
</a>
<div style="min-width: 32px"></div>
</div>
</div>
<div class="py-2 py-md-1 ms-md-auto my-auto me-auto me-md-0 flex-shrink-0 ps-3 d-flex flex-row bg-white position-relative fade show" id="stickyForwardButtonGroup">
<button class="btn bg-white btn-outline-dark shadow-none hover-shadow text-body border-8 p-1 w-auto h-auto rounded-circle my-auto" id="stickyForwardButton">
<div class="d-flex align-items-center">
<span class="material-icons font-125">keyboard_arrow_right</span>
</div>
</button>
<div id="scrollBarFadeRight" style="width: 62px;z-index: 1;height: 100%;position: absolute;background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); left: -60px; pointer-events: none;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div wire:snapshot="{"data":[],"memo":{"id":"GSRUZfwKCoVWYrSs7RRm","name":"trending-skins","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"lazyLoaded":false,"lazyIsolated":true,"errors":[],"locale":"en"},"checksum":"1fb946f5b24a911faacef0c43570613d1edd5e2744519aa4f51209d0fed8893c"}" wire:effects="[]" wire:id="GSRUZfwKCoVWYrSs7RRm" x-intersect="$wire.__lazyLoad('eyJkYXRhIjp7ImZvck1vdW50IjpbW10seyJzIjoiYXJyIn1dfSwibWVtbyI6eyJpZCI6IkdSTDdkNHVhR0F1YmhKZTBsT3Q1IiwibmFtZSI6Il9fbW91bnRQYXJhbXNDb250YWluZXIifSwiY2hlY2tzdW0iOiIxMTYyMWNhNjI2MmQyZTRmZTc1Y2ExMDhhN2M1MmMzMTUxNjJjNTc0MzBmOTFlZjRmZjBiZjgxZGEwOGM3NDY0In0=')" class="row row-cols-2 row-cols-lg-6 g-3 mt-1">
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card hover-image card-pressed border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12 px-3">
<svg class="img-fluid mx-auto d-block p-4" width="200px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="text-center my-2">
<a class="btn btn-outline-dark hover-bg shadow-none text-dark border-8 py-2 px-3" href="https://skinmc.net/skins">Continue browsing</a>
</div>
</div>
<div id="stickyFilterStopTrigger"></div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h3>Discover the best Minecraft Servers</h3>
<p class="lead">Browse servers</p>
</div>
</div>
<div wire:snapshot="{"data":{"readyToLoad":false},"memo":{"id":"cYmxmIIXfHxsD4MXACfo","name":"trending-servers","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"46ab9279712996586c525aa9839458a1140c815f8201f774624fe881a430de63"}" wire:effects="[]" wire:id="cYmxmIIXfHxsD4MXACfo" wire:init="loadServers">
<div class="row scrolling-wrapper flex-row flex-nowrap flex-md-wrap row-cols-1 row-cols-lg-4 g-3">
</div>
<div class="row row-cols-1 row-cols-lg-4 g-3 pt-3" wire:loading.flex>
<div class="col position-relative">
<div class="card border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12">
<svg class="img-fluid mx-auto d-block" width="400px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12">
<svg class="img-fluid mx-auto d-block" width="400px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12">
<svg class="img-fluid mx-auto d-block" width="400px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12">
<svg class="img-fluid mx-auto d-block" width="400px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12">
<svg class="img-fluid mx-auto d-block" width="400px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12">
<svg class="img-fluid mx-auto d-block" width="400px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12">
<svg class="img-fluid mx-auto d-block" width="400px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
<div class="col position-relative">
<div class="card border-0 pb-3 placeholder-glow">
<div class="placeholder overflow-hidden border-12">
<svg class="img-fluid mx-auto d-block" width="400px" height="400px" xmlns="http://www.w3.org/2000/svg"><path fill="none" fill-rule="evenodd" d="M0 0H16V32H0z"/></svg>
</div>
<p class="mt-2 mb-0">
<span class="placeholder col-3 border-12"></span>
<span class="placeholder col-3 border-12"></span>
</p>
<p class="mb-0 mt-0">
<span class="placeholder border-12" style="width: 75%;"></span>
</p>
<span>
<span class="placeholder border-12" style="width: 50%;"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="text-center my-2 pt-3">
<a class="btn btn-outline-dark hover-bg shadow-none text-dark border-8 py-2 px-3" href="https://skinmc.net/servers">Continue browsing</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 mt-5">
<h3>Try something new</h3>
<p class="lead">Explore new ideas and tools</p>
</div>
</div>
<div class="row scrolling-wrapper flex-row flex-nowrap row-cols-1 row-cols-lg-3 g-3">
<div class="col">
<div class="card card-pressed border-0 bg-dark border-16">
<div class="skin-card border-16 border-b0 overflow-hidden">
<picture>
<source srcset="/img/cards/achievement-cover.webp" type="image/webp">
<source srcset="/img/cards/achievement-cover.jpg" type="image/jpeg">
<img src="/img/cards/achievement-cover.jpg" alt="Achievement generator" class="img-fluid mx-auto d-block w-100" crossorigin="anonymous">
</picture>
</div>
<div class="p-4 pt-3">
<p class="fs-5 mb-0 mt-0 text-white">Achievement generator</p>
<a href="https://skinmc.net/achievement" class="stretched-link text-white text-decoration-none">Create your own, custom and personalised achievements.</a>
</div>
</div>
</div>
<div class="col">
<div class="card card-pressed border-0 bg-dark border-16">
<div class="skin-card border-16 border-b0 overflow-hidden">
<picture>
<source srcset="/img/cards/avatar-cover.webp" type="image/webp">
<source srcset="/img/cards/avatar-cover.jpg" type="image/jpeg">
<img src="/img/cards/avatar-cover.jpg" alt="Avatar generator" class="img-fluid mx-auto d-block w-100" crossorigin="anonymous">
</picture>
</div>
<div class="p-4 pt-3">
<p class="fs-5 mb-0 mt-0 text-white">Avatar generator</p>
<a href="https://skinmc.net/avatars" class="stretched-link text-white text-decoration-none">Generate your custom Minecraft avatar profile pictures.</a>
</div>
</div>
</div>
<div class="col">
<div class="card card-pressed border-0 bg-dark border-16">
<div class="skin-card border-16 border-b0 overflow-hidden">
<picture>
<source srcset="/img/cards/heads-cover.webp" type="image/webp">
<source srcset="/img/cards/heads-cover.jpg" type="image/jpeg">
<img src="/img/cards/heads-cover.jpg" alt="Minecraft Head Database" class="img-fluid mx-auto d-block w-100" crossorigin="anonymous">
</picture>
</div>
<div class="p-4 pt-3">
<p class="fs-5 mb-0 mt-0 text-white">Minecraft heads</p>
<a href="https://skinmc.net/heads" class="stretched-link text-white text-decoration-none">Browse the Minecraft heads database, or create new ones.</a>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12">
<div class="border-16 p-4 p-md-5 hero position-relative overflow-hidden" style="height: 65vh; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.25) 100%)">
<picture>
<source srcset="https://skinmc.net/img/headers/bubbletea.webp" type="image/webp">
<source srcset="https://skinmc.net/img/headers/bubbletea.jpg" type="image/jpeg">
<img src="https://skinmc.net/img/headers/bubbletea.jpg" alt="SkinMC Mod" class="top-0 bottom-0 start-0 end-0 position-absolute w-100 h-100" style="z-index: -1;object-fit: cover;" crossorigin="anonymous">
</picture>
<div class="row h-100">
<div class="col-md-6">
<span class="p-0 text-white">
<svg title="SkinMC" width="42" height="42" viewBox="0 0 36 36" fill="white" xmlns="http://www.w3.org/2000/svg" class="svg-logo logo-icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 6L5 0H5.21379H36V30.7862V31L31 36H0V6ZM33.5172 2.48276H7.69655V28.3034H33.5172V2.48276Z" class="svg-logo-bg"></path>
<g class="svg-logo-top">
<path fill-rule="evenodd" clip-rule="evenodd" d="M36 0H5V31H36V0ZM33 3H8V28H33V3Z"></path>
<path d="M26 17H15V24H18V21.5H23V24H26V17Z"></path>
<path d="M18 14H23V17H18V14Z"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8H18V14H12V8ZM23 14V8H29V14H23Z" class="logo-eye"></path>
</g>
</svg>
<span class="fs-4 fw-bolder align-middle">SkinMC</span>
<span class="fs-4 fw-bolder align-middle p-1 px-2 border border-dark border-3 border-12 border-white">Mod</span>
</span>
<h3 class="fs-1 text-white mt-5" style="text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5);">Introducing the SkinMC Mod for more customisation</h3>
</div>
<div class="col-12 mt-auto">
<a class="btn btn-white btn-lg py-2 px-4 border-12 shadow-lg" href="https://skinmc.net/p/mod">
<div class="m-0 my-md-1 mx-md-2 fw-700">Download now</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div
x-data="{
message: '',
init() {
let newMessage = '';
if (newMessage) {
this.show(newMessage);
}
},
show(message) {
this.message = message;
let flashMessage = document.getElementById('flash-message');
if (flashMessage) {
let toast = new bootstrap.Toast(flashMessage);
toast.show(); // Show the toast
}
}
}"
x-init="init()"
x-on:toast.window="show($event.detail.message)">
<div class="toast-container position-fixed bottom-0 end-0 start-0 w-100" style="z-index: 1300!important;">
<div id="flash-message" class="toast mb-3 border-12 text-white bg-dark mx-auto">
<div class="toast-body" x-text="message"></div>
</div>
</div>
</div>
<footer class="mt-5 pt-4">
<div class="container">
<div class="row row-cols-1 row-cols-lg-5">
<div class="col pt-4 pb-3">
<nav class="nav flex-column">
<h5 class="title-sm">About</h5>
<a class="nav-link ps-0" href="https://skinmc.net">Home</a>
<a class="nav-link ps-0" href="https://skinmc.net/p/about">About</a>
<a class="nav-link ps-0" href="https://skinmc.net/p/mod">Mod</a>
<a class="nav-link ps-0" href="https://skinmc.net/p/contact">Contact</a>
<a class="nav-link ps-0" href="https://skinmc.net/p/faq">Help</a>
<a class="nav-link ps-0" href="https://skinmc.statuspage.io/" target="_blank">Status</a>
<a class="nav-link ps-0" href="https://skinmc.net/go/ko-fi" target="_blank">Ko-fi</a>
</nav>
<div class="divider d-block d-lg-none mt-3"></div>
</div>
<div class="col pt-4 pb-3">
<nav class="nav flex-column">
<h5 class="title-sm">Tools</h5>
<a class="nav-link ps-0" href="https://skinmc.net">Skin viewer</a>
<a class="nav-link ps-0" href="https://skinmc.net/skin-editor">Editor</a>
<a class="nav-link ps-0" href="https://skinmc.net/avatars">Avatar maker</a>
<a class="nav-link ps-0" href="https://skinmc.net/achievement">Achievement</a>
</nav>
<div class="divider d-block d-lg-none mt-3"></div>
</div>
<div class="col pt-4 pb-3">
<nav class="nav flex-column">
<h5 class="title-sm">More tools</h5>
<a class="nav-link ps-0" href="https://skinmc.net/p/mod">Mod</a>
<a class="nav-link ps-0" href="https://skinmc.net/servers">Servers</a>
<a class="nav-link ps-0" href="https://skinmc.net/capes">Capes</a>
<a class="nav-link ps-0" href="https://skinmc.net/heads">Heads</a>
<a class="nav-link ps-0" href="https://skinmc.net/banner/gallery">Banners</a>
<a class="nav-link ps-0" href="https://skinmc.net/totem">Totems</a>
</nav>
<div class="divider d-block d-lg-none mt-3"></div>
</div>
<div class="col pt-4 pb-3">
<nav class="nav flex-column">
<h5 class="title-sm">Collections</h5>
<a class="nav-link ps-0" href="https://skinmc.net/skins">All Minecraft Skins</a>
<a class="nav-link ps-0" href="https://skinmc.net/skins/tagged">Tagged Minecraft Skins</a>
<a class="nav-link ps-0" href="https://skinmc.net/servers">Minecraft Server List</a>
<h5 class="title-sm pt-4">For Server Admins</h5>
<a class="nav-link ps-0" href="https://skinmc.net/p/host/server">List your Server</a>
</nav>
<div class="divider d-block d-lg-none mt-3"></div>
</div>
<div class="col pt-4 pb-0">
<nav class="nav flex-column">
<h5 class="title-sm">Community</h5>
<a class="nav-link ps-0" href="https://skinmc.net/leaderboard">Leaderboard</a>
<a class="nav-link ps-0" href="https://skinmc.net/go/discord" target="_blank">Discord</a>
<a class="nav-link ps-0" href="https://skinmc.net/go/bsky" target="_blank">Bluesky</a>
<a class="nav-link ps-0" href="https://skinmc.net/go/instagram" target="_blank">Instagram</a>
</nav>
<div class="divider d-block d-lg-none mt-3"></div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="divider d-none d-lg-block mt-3"></div>
</div>
<div class="col-lg-12 col-12 pt-3 pb-1">
<nav class="nav small">
<p class="mb-0 pt-2 mt-1">SkinMC © 2025</p>
<p class="mb-0 pt-2 mt-1 ms-3">·</p>
<a class="nav-link mb-0 pt-2 mt-1 pe-0" href="https://skinmc.net/p/impressum">Imprint</a>
<a class="nav-link mb-0 pt-2 mt-1 pe-0" href="https://skinmc.net/p/cookies">Cookies</a>
<a class="nav-link mb-0 pt-2 mt-1 pe-0" href="https://skinmc.net/p/terms">Terms of Service</a>
<a class="nav-link mb-0 pt-2 mt-1 pe-0" href="https://skinmc.net/p/privacy">Privacy policy</a>
<a class="nav-link mb-0 pt-2 mt-1" href="https://github.com/microsoft/fluentui-emoji" target="_blank">Emoji by Fluent Emoji</a>
<a class="ms-md-auto my-auto me-md-2" title="Crowdin" target="_blank" href="https://crowdin.com/project/skinmc"><img alt="Translate on Crowdin" src="https://badges.crowdin.net/skinmc/localized.svg"></a>
<div class="nav-item mt-1">
<button class="btn rounded-pill hover-bg shadow-none px-1 py-1 align-middle d-flex align-items-center" type="button" href="#languageModal" data-bs-toggle="modal" data-bs-target="#languageModal">
<span class="material-icons text-decoration-none m-1 d-flex">globe</span>
<span class="align-middle pe-1 text-decoration-none">English (EN)</span>
</button>
</div>
</nav>
</div>
<div class="col-lg-12 col-12 pt-0 pb-5 pb-md-4 mb-5 mb-md-0">
<nav class="nav small">
<span class="mb-0 p-0 text-muted ">NOT APPROVED BY OR ASSOCIATED WITH MOJANG OR MICROSOFT</span>
</nav>
</div>
</div>
</div>
</footer>
<!-- Language Modal -->
<div class="modal fade" id="languageModal" tabindex="-1" role="dialog" aria-labelledby="languageModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn bg-white border border-white shadow-none rounded-pill px-2 py-2 position-relative ms-md-2 mt-md-2" style="line-height: 0;" data-bs-dismiss="modal" aria-label="Close">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body p-md-4 mb-3">
<div class="container-fluid">
<div class="row">
<p class="fs-4" id="languageModalTitle">Choose your language</p>
</div>
<div wire:snapshot="{"data":[],"memo":{"id":"XTPeHk8ccaHrzczmpI0d","name":"language-select","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"806ccabaea234c1d5391831f7af2fceaeee5792164f58b757dea1525b81bab8f"}" wire:effects="[]" wire:id="XTPeHk8ccaHrzczmpI0d" class="row g-3 row-cols-1 row-cols-lg-3">
<div class="col">
<a wire:click.prevent="setLocale('en', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg active border">
<div class="small text-muted">EN</div>
<div class="text-dark">English</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('de', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">DE</div>
<div class="text-dark">Deutsch</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('no', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">NO</div>
<div class="text-dark">Norsk</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('fi', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">FI</div>
<div class="text-dark">Suomalainen</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('sv-SE', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">SV-SE</div>
<div class="text-dark">Svenska</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('nl', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">NL</div>
<div class="text-dark">Nederlands</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('es-ES', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">ES-ES</div>
<div class="text-dark">Español</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('it', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">IT</div>
<div class="text-dark">Italiano</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('fr', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">FR</div>
<div class="text-dark">Français</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('hu', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">HU</div>
<div class="text-dark">Magyar</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('pt', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">PT</div>
<div class="text-dark">Português brasileiro</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('jp', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">JP</div>
<div class="text-dark">日本</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('ko', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">KO</div>
<div class="text-dark">한국어</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('zh-CN', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">ZH-CN</div>
<div class="text-dark">汉语</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('pl', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">PL</div>
<div class="text-dark">Polski</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('cs', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">CS</div>
<div class="text-dark">Češka</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('uk', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">UK</div>
<div class="text-dark">Українська</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('ru', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">RU</div>
<div class="text-dark">Русский</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('tr', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">TR</div>
<div class="text-dark">Türk</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('he', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">HE</div>
<div class="text-dark">עִברִית</div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('fa', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">FA</div>
<div class="text-dark">فارسی </div>
</div>
</a>
</div>
<div class="col">
<a wire:click.prevent="setLocale('ar', 'http://skinmc.net')" class="text-decoration-none" href="#">
<div class="border-8 px-3 py-2 hover-bg ">
<div class="small text-muted">AR</div>
<div class="text-dark">اَلْعَرَبِيَّةُ</div>
</div>
</a>
</div>
<div class="col">
<a class="text-decoration-none" href="https://crowdin.com/project/skinmc" target="_blank">
<div class="border-8 px-3 py-2 hover-bg">
<div class="small text-muted">Contribute</div>
<div class="text-dark">Add translation</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Sign up Modal -->
<div class="modal fade" id="signUpModal" tabindex="-1" role="dialog" aria-labelledby="signUpModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn bg-white border border-white shadow-none rounded-pill px-2 py-2" style="line-height: 0;" data-bs-dismiss="modal" aria-label="Close">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body p-4">
<p class="fs-3" id="signUpModalTitle">Sign up</p>
<form wire:snapshot="{"data":{"email":null,"password":null,"inviteCode":null,"invite":null},"memo":{"id":"PK4fUajOCKQe5qNWP2bP","name":"sign-up-form","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"d4ea14ab259164d8cbb18257dee2feaed426fe23ef5528045f80d1ae07cfd1b8"}" wire:effects="[]" wire:id="PK4fUajOCKQe5qNWP2bP" wire:submit="submit">
<div class="connected-form">
<div class="form-label-group auth-input-group ">
<input wire:model="email" type="email" class="form-control" id="signUpEmail" placeholder="Email" autocomplete="email">
<label for="signUpEmail">Email address</label>
</div>
<div class="form-label-group auth-input-group " x-data="{ show: false }">
<input wire:model="password" :type="show ? 'text' : 'password'" class="form-control pe-5" id="signUpPassword" placeholder="Password" autocomplete="new-password">
<label for="signUpPassword">Password</label>
<span type="button" @click="show = ! show" class="position-absolute top-50 end-0 translate-middle pointer-cursor user-select-none">
<span x-show="!show">
<span class="material-icons d-flex link-secondary" x-tooltip.animation.scale="{content: 'Show password', inertia: true, duration: 250}">visibility</span>
</span>
<span x-show="show">
<span class="material-icons d-flex link-secondary" x-tooltip.animation.scale="{content: 'Hide password', inertia: true}">visibility_off</span>
</span>
</span>
</div>
</div>
<div x-data="{
toggle: false }">
<div class="form-check">
<input class="form-check-input" type="checkbox" x-model="toggle" id="inviteCodeToggle" name="inviteCodeToggle" >
<label class="form-check-label small" for="inviteCodeToggle">
Have an invite?
</label>
</div>
<div id="toggleOn" x-show="toggle" x-cloak x-transition.opacity>
<div class="connected-form">
<div class="form-label-group auth-input-group ">
<input wire:model.live="inviteCode" type="text" class="form-control" id="inviteCode" placeholder="Invite code" autocomplete="off" value="">
<label for="inviteCode">Invite code</label>
</div>
</div>
</div>
</div>
<p class="text-muted my-3" style="line-height: 16px; font-size: 12px">By selecting <b>Agree and continue</b>, I agree to SkinMC's <a class="text-muted" target="_blank" href="https://skinmc.net/p/terms">Terms of Service</a> and acknowledge the <a class="text-muted" target="_blank" href="https://skinmc.net/p/privacy">Privacy policy</a>.</p>
<button type="submit" class="btn w-100 py-3 btn-primary btn-load">
<span>Agree and continue</span>
</button>
</form>
<p class="mt-3 mb-0">Already have an account? <a href="#loginModal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#loginModal">Log in</a></p>
<div class="hr-text mt-3" data-content="or"></div>
<a href="https://skinmc.net/auth/google/redirect" class="btn btn-load btn-outline-dark hover-bg shadow-none text-dark border-8 py-2 px-3 mt-3 w-100">
<div class="account-info d-flex justify-content-between align-items-center">
<div class="d-flex">
<svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" style="height: 20px; width: 20px; display: block;"><g fill="none" fill-rule="evenodd"><path d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z" fill="#EA4335"></path><path d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z" fill="#4285F4"></path><path d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z" fill="#FBBC05"></path><path d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z" fill="#34A853"></path><path d="M0 0h18v18H0V0z"></path></g></svg>
</div>
<div class="d-flex pl-2">Continue with Google</div>
<div class=""></div>
</div>
</a>
<a href="https://skinmc.net/auth/microsoft/redirect" class="btn btn-load btn-outline-dark hover-bg shadow-none text-dark border-8 py-2 px-3 mt-3 w-100">
<div class="account-info d-flex justify-content-between align-items-center">
<div class="d-flex">
<img class="account-image" src="https://skinmc.net/img/social/microsoft.png" alt="Microsoft" width="20px" height="20px">
</div>
<div class="d-flex pl-2">Continue with Microsoft</div>
<div class=""></div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn bg-white border border-white shadow-none rounded-pill px-2 py-2" style="line-height: 0;" data-bs-dismiss="modal" aria-label="Close">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body p-4">
<p class="fs-3" id="loginModalTitle">Log in</p>
<form wire:snapshot="{"data":{"email":null,"password":null},"memo":{"id":"5ABiN9QgnfX2SgcpJCBp","name":"sign-in-form","path":"\/","method":"GET","children":[],"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"8b249be2013108d2785135cbca69a4fe57b156f169790210ffc36365dd2cecc8"}" wire:effects="[]" wire:id="5ABiN9QgnfX2SgcpJCBp" wire:submit="submit">
<div class="connected-form">
<div class="form-label-group auth-input-group ">
<input wire:model="email" type="email" class="form-control" id="logInEmail" placeholder="Email" autocomplete="email">
<label for="logInEmail">Email address</label>
</div>
<div class="form-label-group auth-input-group " x-data="{ show: false }">
<input wire:model="password" :type="show ? 'text' : 'password'" class="form-control pe-5" id="loginPassword" placeholder="Password" autocomplete="current-password">
<label for="loginPassword">Password</label>
<span type="button" @click="show = ! show" class="position-absolute top-50 end-0 translate-middle pointer-cursor user-select-none">
<span x-show="!show">
<span class="material-icons d-flex link-secondary" x-tooltip.animation.scale="{content: 'Show password', inertia: true, duration: 250}">visibility</span>
</span>
<span x-show="show">
<span class="material-icons d-flex link-secondary" x-tooltip.animation.scale="{content: 'Hide password', inertia: true}">visibility_off</span>
</span>
</span>
</div>
</div>
<button type="submit" class="btn w-100 py-3 btn-primary btn-load">
<span>Log in</span>
</button>
</form>
<p class="mt-3 mb-0">Forgot your password? <a href="#forgotModal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#forgotModal">Reset</a></p>
<p class="mt-2 mb-0">Don't have an account yet? <a href="#signUpModal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#signUpModal">Sign up</a></p>
<div class="hr-text mt-3" data-content="or"></div>
<a href="https://skinmc.net/auth/google/redirect" class="btn btn-load btn-outline-dark hover-bg shadow-none text-dark border-8 py-2 px-3 mt-3 w-100">
<div class="account-info d-flex justify-content-between align-items-center">
<div class="d-flex">
<svg viewBox="0 0 18 18" role="presentation" aria-hidden="true" focusable="false" style="height: 20px; width: 20px; display: block;"><g fill="none" fill-rule="evenodd"><path d="M9 3.48c1.69 0 2.83.73 3.48 1.34l2.54-2.48C13.46.89 11.43 0 9 0 5.48 0 2.44 2.02.96 4.96l2.91 2.26C4.6 5.05 6.62 3.48 9 3.48z" fill="#EA4335"></path><path d="M17.64 9.2c0-.74-.06-1.28-.19-1.84H9v3.34h4.96c-.1.83-.64 2.08-1.84 2.92l2.84 2.2c1.7-1.57 2.68-3.88 2.68-6.62z" fill="#4285F4"></path><path d="M3.88 10.78A5.54 5.54 0 0 1 3.58 9c0-.62.11-1.22.29-1.78L.96 4.96A9.008 9.008 0 0 0 0 9c0 1.45.35 2.82.96 4.04l2.92-2.26z" fill="#FBBC05"></path><path d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.84-2.2c-.76.53-1.78.9-3.12.9-2.38 0-4.4-1.57-5.12-3.74L.97 13.04C2.45 15.98 5.48 18 9 18z" fill="#34A853"></path><path d="M0 0h18v18H0V0z"></path></g></svg>
</div>
<div class="d-flex pl-2">Continue with Google</div>
<div class=""></div>
</div>
</a>
<a href="https://skinmc.net/auth/microsoft/redirect" class="btn btn-load btn-outline-dark hover-bg shadow-none text-dark border-8 py-2 px-3 mt-3 w-100">
<div class="account-info d-flex justify-content-between align-items-center">
<div class="d-flex">
<img class="account-image" src="https://skinmc.net/img/social/microsoft.png" alt="Microsoft" width="20px" height="20px">
</div>
<div class="d-flex pl-2">Continue with Microsoft</div>
<div class=""></div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- Logout Modal -->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 360px; margin: auto">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn bg-white border border-white shadow-none rounded-pill px-2 py-2" style="line-height: 0;" data-bs-dismiss="modal" aria-label="Close">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body p-4">
<p class="fs-4" id="logoutModalTitle">Log out</p>
<p>Are you sure you would like to log out of your SkinMC account?</p>
<button class="btn btn-outline-dark hover-bg shadow-none text-dark border-8 py-2 px-3 w-100" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<!-- Forgot Modal -->
<div class="modal fade" id="forgotModal" tabindex="-1" role="dialog" aria-labelledby="forgotModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn bg-white border border-white shadow-none rounded-pill px-2 py-2" style="line-height: 0;" data-bs-dismiss="modal" aria-label="Close">
<span class="material-icons">close</span>
</button>
</div>
<div class="modal-body p-4">
<p class="fs-3 mb-2" id="forgotModalTitle">Recover account</p>
<p class="text-muted">Lost your password? Recover it by entering your email address to get it back.</p>
<form action="https://skinmc.net/auth/forgot-password" method="POST">
<input type="hidden" name="_token" value="u3w8NeF4EBxrfpBNlojO3mCO4IaxXzHHANRwGUL6" autocomplete="off"> <div class="connected-form">
<div class="form-label-group">
<input type="email"
name="email"
placeholder="Email address"
value=""
class="form-control"
id="recoverEmail"
placeholder="Email address">
<label for="recoverEmail">Email address</label>
</div>
</div>
<button type="submit" class="btn w-100 py-3 btn-primary btn-load"><span>Send recovery email</span></button>
</form>
<p class="mt-3 mb-0">Found your password? <a href="#loginModal" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#loginModal">Log in</a></p>
</div>
</div>
</div>
</div>
<!-- QR code Modal -->
<div class="modal fade" id="qrCodeModal" tabindex="-1" role="dialog" aria-labelledby="qrCodeModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn bg-white border border-white shadow-none rounded-pill px-2 py-2 ms-n2 position-absolute" style="line-height: 0;" data-bs-dismiss="modal" aria-label="Close">
<span class="material-icons">close</span>
</button>
<h5 class="modal-title align-self-center mx-auto" id="qrCodeModalTitle">Scan QR code</h5>
</div>
<div class="modal-body p-4 py-5">
<div class="col-md-8 offset-md-2">
<div class="qr-code-svg">
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="#ffffff"/><g transform="scale(3.448)"><g transform="translate(0,0)"><path fill-rule="evenodd" d="M9 0.5L9 1.501A0.5 0.5 0 0 1 8.501 2L8.5 2A0.5 0.5 0 0 0 8 2.5L8 3.501A0.5 0.5 0 0 0 8.5 4L8.501 4A0.5 0.5 0 0 1 9 4.5L9 4.501A0.5 0.5 0 0 0 9.5 5L9.501 5A0.5 0.5 0 0 1 10 5.5L10 6.501A0.5 0.5 0 0 1 9.501 7L9.5 7A0.5 0.5 0 0 1 9 6.501L9 6.5A0.5 0.5 0 0 0 8.501 6L8.5 6A0.5 0.5 0 0 0 8 6.5L8 6.501A0.5 0.5 0 0 0 8.5 7L8.501 7A0.5 0.5 0 0 1 9 7.5L9 8.501A0.5 0.5 0 0 1 8.501 9L8.5 9A0.5 0.5 0 0 1 8 8.501L8 8.5A0.5 0.5 0 0 0 7.501 8L6.5 8A0.5 0.5 0 0 0 6 8.5L6 8.501A0.5 0.5 0 0 1 5.501 9L5.5 9A0.5 0.5 0 0 1 5 8.501L5 8.5A0.5 0.5 0 0 0 4.501 8L3.5 8A0.5 0.5 0 0 0 3 8.5L3 8.501A0.5 0.5 0 0 1 2.501 9L2.5 9A0.5 0.5 0 0 0 2 9.5L2 9.501A0.5 0.5 0 0 0 2.5 10L3.501 10A0.5 0.5 0 0 0 4 9.501L4 9.5A0.5 0.5 0 0 1 4.5 9L4.501 9A0.5 0.5 0 0 1 5 9.5L5 10.501A0.5 0.5 0 0 1 4.501 11L3.5 11A0.5 0.5 0 0 0 3 11.5L3 11.501A0.5 0.5 0 0 1 2.501 12L2.5 12A0.5 0.5 0 0 0 2 12.5L2 12.501A0.5 0.5 0 0 1 1.501 13L0.5 13A0.5 0.5 0 0 0 0 13.5L0 13.501A0.5 0.5 0 0 0 0.5 14L0.501 14A0.5 0.5 0 0 1 1 14.5L1 14.501A0.5 0.5 0 0 0 1.5 15L1.501 15A0.5 0.5 0 0 0 2 14.501L2 13.5A0.5 0.5 0 0 1 2.5 13L2.501 13A0.5 0.5 0 0 1 3 13.5L3 15.501A0.5 0.5 0 0 1 2.501 16L0.5 16A0.5 0.5 0 0 0 0 16.5L0 20.501A0.5 0.5 0 0 0 0.5 21L6.501 21A0.5 0.5 0 0 0 7 20.501L7 20.5A0.5 0.5 0 0 1 7.5 20L8.501 20A0.5 0.5 0 0 1 9 20.5L9 20.501A0.5 0.5 0 0 1 8.501 21L8.5 21A0.5 0.5 0 0 0 8 21.5L8 22.501A0.5 0.5 0 0 0 8.5 23L9.501 23A0.5 0.5 0 0 1 10 23.5L10 24.501A0.5 0.5 0 0 0 10.5 25L11.501 25A0.5 0.5 0 0 1 12 25.5L12 28.501A0.5 0.5 0 0 0 12.5 29L13.501 29A0.5 0.5 0 0 0 14 28.501L14 28.5A0.5 0.5 0 0 1 14.5 28L15.501 28A0.5 0.5 0 0 1 16 28.5L16 28.501A0.5 0.5 0 0 0 16.5 29L16.501 29A0.5 0.5 0 0 0 17 28.501L17 28.5A0.5 0.5 0 0 1 17.5 28L17.501 28A0.5 0.5 0 0 1 18 28.5L18 28.501A0.5 0.5 0 0 0 18.5 29L18.501 29A0.5 0.5 0 0 0 19 28.501L19 28.5A0.5 0.5 0 0 1 19.5 28L19.501 28A0.5 0.5 0 0 1 20 28.5L20 28.501A0.5 0.5 0 0 0 20.5 29L20.501 29A0.5 0.5 0 0 0 21 28.501L21 27.5A0.5 0.5 0 0 1 21.5 27L21.501 27A0.5 0.5 0 0 1 22 27.5L22 27.501A0.5 0.5 0 0 0 22.5 28L22.501 28A0.5 0.5 0 0 1 23 28.5L23 28.501A0.5 0.5 0 0 0 23.5 29L24.501 29A0.5 0.5 0 0 0 25 28.501L25 28.5A0.5 0.5 0 0 1 25.5 28L26.501 28A0.5 0.5 0 0 0 27 27.501L27 27.5A0.5 0.5 0 0 1 27.5 27L27.501 27A0.5 0.5 0 0 1 28 27.5L28 27.501A0.5 0.5 0 0 0 28.5 28L28.501 28A0.5 0.5 0 0 0 29 27.501L29 26.5A0.5 0.5 0 0 0 28.501 26L28.5 26A0.5 0.5 0 0 1 28 25.501L28 25.5A0.5 0.5 0 0 0 27.501 25L27.5 25A0.5 0.5 0 0 0 27 25.5L27 25.501A0.5 0.5 0 0 1 26.501 26L24.5 26A0.5 0.5 0 0 1 24 25.501L24 25.5A0.5 0.5 0 0 1 24.5 25L24.501 25A0.5 0.5 0 0 0 25 24.501L25 24.5A0.5 0.5 0 0 1 25.5 24L25.501 24A0.5 0.5 0 0 0 26 23.501L26 23.5A0.5 0.5 0 0 1 26.5 23L26.501 23A0.5 0.5 0 0 0 27 22.501L27 21.5A0.5 0.5 0 0 1 27.5 21L28.501 21A0.5 0.5 0 0 0 29 20.501L29 18.5A0.5 0.5 0 0 0 28.501 18L28.5 18A0.5 0.5 0 0 0 28 18.5L28 19.501A0.5 0.5 0 0 1 27.501 20L27.5 20A0.5 0.5 0 0 1 27 19.501L27 19.5A0.5 0.5 0 0 0 26.501 19L26.5 19A0.5 0.5 0 0 1 26 18.501L26 18.5A0.5 0.5 0 0 1 26.5 18L26.501 18A0.5 0.5 0 0 0 27 17.501L27 17.5A0.5 0.5 0 0 0 26.501 17L26.5 17A0.5 0.5 0 0 1 26 16.501L26 16.5A0.5 0.5 0 0 1 26.5 16L27.501 16A0.5 0.5 0 0 1 28 16.5L28 16.501A0.5 0.5 0 0 0 28.5 17L28.501 17A0.5 0.5 0 0 0 29 16.501L29 13.5A0.5 0.5 0 0 0 28.501 13L28.5 13A0.5 0.5 0 0 1 28 12.501L28 12.5A0.5 0.5 0 0 1 28.5 12L28.501 12A0.5 0.5 0 0 0 29 11.501L29 11.5A0.5 0.5 0 0 0 28.501 11L28.5 11A0.5 0.5 0 0 0 28 11.5L28 11.501A0.5 0.5 0 0 1 27.501 12L27.5 12A0.5 0.5 0 0 0 27 12.5L27 12.501A0.5 0.5 0 0 1 26.501 13L26.5 13A0.5 0.5 0 0 1 26 12.501L26 12.5A0.5 0.5 0 0 0 25.501 12L25.5 12A0.5 0.5 0 0 1 25 11.501L25 11.5A0.5 0.5 0 0 1 25.5 11L25.501 11A0.5 0.5 0 0 0 26 10.501L26 10.5A0.5 0.5 0 0 1 26.5 10L27.501 10A0.5 0.5 0 0 0 28 9.501L28 9.5A0.5 0.5 0 0 0 27.501 9L27.5 9A0.5 0.5 0 0 1 27 8.501L27 8.5A0.5 0.5 0 0 0 26.501 8L25.5 8A0.5 0.5 0 0 0 25 8.5L25 8.501A0.5 0.5 0 0 1 24.501 9L24.5 9A0.5 0.5 0 0 0 24 9.5L24 9.501A0.5 0.5 0 0 1 23.501 10L23.5 10A0.5 0.5 0 0 1 23 9.501L23 9.5A0.5 0.5 0 0 0 22.501 9L22.5 9A0.5 0.5 0 0 0 22 9.5L22 9.501A0.5 0.5 0 0 1 21.501 10L21.5 10A0.5 0.5 0 0 1 21 9.501L21 5.5A0.5 0.5 0 0 0 20.501 5L20.5 5A0.5 0.5 0 0 1 20 4.501L20 4.5A0.5 0.5 0 0 1 20.5 4L20.501 4A0.5 0.5 0 0 0 21 3.501L21 1.5A0.5 0.5 0 0 0 20.501 1L20.5 1A0.5 0.5 0 0 1 20 0.501L20 0.5A0.5 0.5 0 0 0 19.501 0L18.5 0A0.5 0.5 0 0 0 18 0.5L18 1.501A0.5 0.5 0 0 0 18.5 2L18.501 2A0.5 0.5 0 0 0 19 1.501L19 1.5A0.5 0.5 0 0 1 19.5 1L19.501 1A0.5 0.5 0 0 1 20 1.5L20 2.501A0.5 0.5 0 0 1 19.501 3L19.5 3A0.5 0.5 0 0 0 19 3.5L19 3.501A0.5 0.5 0 0 1 18.501 4L18.5 4A0.5 0.5 0 0 1 18 3.501L18 3.5A0.5 0.5 0 0 0 17.501 3L17.5 3A0.5 0.5 0 0 0 17 3.5L17 4.501A0.5 0.5 0 0 1 16.501 5L16.5 5A0.5 0.5 0 0 1 16 4.501L16 3.5A0.5 0.5 0 0 0 15.501 3L14.5 3A0.5 0.5 0 0 1 14 2.501L14 2.5A0.5 0.5 0 0 0 13.501 2L12.5 2A0.5 0.5 0 0 0 12 2.5L12 2.501A0.5 0.5 0 0 1 11.501 3L11.5 3A0.5 0.5 0 0 0 11 3.5L11 3.501A0.5 0.5 0 0 0 11.5 4L11.501 4A0.5 0.5 0 0 1 12 4.5L12 6.501A0.5 0.5 0 0 1 11.501 7L11.5 7A0.5 0.5 0 0 1 11 6.501L11 5.5A0.5 0.5 0 0 0 10.501 5L10.5 5A0.5 0.5 0 0 1 10 4.501L10 0.5A0.5 0.5 0 0 0 9.501 0L9.5 0A0.5 0.5 0 0 0 9 0.5ZM13 0.5L13 0.501A0.5 0.5 0 0 0 13.5 1L13.501 1A0.5 0.5 0 0 0 14 0.501L14 0.5A0.5 0.5 0 0 0 13.501 0L13.5 0A0.5 0.5 0 0 0 13 0.5ZM15 0.5L15 1.501A0.5 0.5 0 0 0 15.5 2L16.501 2A0.5 0.5 0 0 0 17 1.501L17 1.5A0.5 0.5 0 0 0 16.501 1L16.5 1A0.5 0.5 0 0 1 16 0.501L16 0.5A0.5 0.5 0 0 0 15.501 0L15.5 0A0.5 0.5 0 0 0 15 0.5ZM13 5.5L13 6.501A0.5 0.5 0 0 1 12.501 7L12.5 7A0.5 0.5 0 0 0 12 7.5L12 7.501A0.5 0.5 0 0 0 12.5 8L12.501 8A0.5 0.5 0 0 1 13 8.5L13 8.501A0.5 0.5 0 0 1 12.501 9L12.5 9A0.5 0.5 0 0 0 12 9.5L12 9.501A0.5 0.5 0 0 0 12.5 10L12.501 10A0.5 0.5 0 0 0 13 9.501L13 9.5A0.5 0.5 0 0 1 13.5 9L13.501 9A0.5 0.5 0 0 1 14 9.5L14 10.501A0.5 0.5 0 0 0 14.5 11L14.501 11A0.5 0.5 0 0 1 15 11.5L15 12.501A0.5 0.5 0 0 1 14.501 13L14.5 13A0.5 0.5 0 0 1 14 12.501L14 12.5A0.5 0.5 0 0 0 13.501 12L13.5 12A0.5 0.5 0 0 1 13 11.501L13 11.5A0.5 0.5 0 0 0 12.501 11L12.5 11A0.5 0.5 0 0 0 12 11.5L12 11.501A0.5 0.5 0 0 1 11.501 12L10.5 12A0.5 0.5 0 0 0 10 12.5L10 12.501A0.5 0.5 0 0 1 9.501 13L8.5 13A0.5 0.5 0 0 1 8 12.501L8 11.5A0.5 0.5 0 0 1 8.5 11L8.501 11A0.5 0.5 0 0 0 9 10.501L9 10.5A0.5 0.5 0 0 1 9.5 10L9.501 10A0.5 0.5 0 0 1 10 10.5L10 10.501A0.5 0.5 0 0 0 10.5 11L10.501 11A0.5 0.5 0 0 0 11 10.501L11 9.5A0.5 0.5 0 0 0 10.501 9L9.5 9A0.5 0.5 0 0 0 9 9.5L9 9.501A0.5 0.5 0 0 1 8.501 10L8.5 10A0.5 0.5 0 0 1 8 9.501L8 9.5A0.5 0.5 0 0 0 7.501 9L6.5 9A0.5 0.5 0 0 0 6 9.5L6 9.501A0.5 0.5 0 0 0 6.5 10L6.501 10A0.5 0.5 0 0 1 7 10.5L7 10.501A0.5 0.5 0 0 1 6.501 11L6.5 11A0.5 0.5 0 0 0 6 11.5L6 11.501A0.5 0.5 0 0 0 6.5 12L6.501 12A0.5 0.5 0 0 1 7 12.5L7 12.501A0.5 0.5 0 0 1 6.501 13L5.5 13A0.5 0.5 0 0 0 5 13.5L5 13.501A0.5 0.5 0 0 1 4.501 14L4.5 14A0.5 0.5 0 0 0 4 14.5L4 15.501A0.5 0.5 0 0 1 3.501 16L3.5 16A0.5 0.5 0 0 0 3 16.5L3 16.501A0.5 0.5 0 0 1 2.501 17L1.5 17A0.5 0.5 0 0 0 1 17.5L1 17.501A0.5 0.5 0 0 0 1.5 18L2.501 18A0.5 0.5 0 0 1 3 18.5L3 18.501A0.5 0.5 0 0 1 2.501 19L2.5 19A0.5 0.5 0 0 0 2 19.5L2 19.501A0.5 0.5 0 0 0 2.5 20L6.501 20A0.5 0.5 0 0 0 7 19.501L7 19.5A0.5 0.5 0 0 0 6.501 19L6.5 19A0.5 0.5 0 0 1 6 18.501L6 18.5A0.5 0.5 0 0 1 6.5 18L6.501 18A0.5 0.5 0 0 0 7 17.501L7 17.5A0.5 0.5 0 0 0 6.501 17L6.5 17A0.5 0.5 0 0 0 6 17.5L6 17.501A0.5 0.5 0 0 1 5.501 18L5.5 18A0.5 0.5 0 0 1 5 17.501L5 16.5A0.5 0.5 0 0 1 5.5 16L6.501 16A0.5 0.5 0 0 0 7 15.501L7 15.5A0.5 0.5 0 0 1 7.5 15L7.501 15A0.5 0.5 0 0 1 8 15.5L8 18.501A0.5 0.5 0 0 0 8.5 19L8.501 19A0.5 0.5 0 0 0 9 18.501L9 15.5A0.5 0.5 0 0 1 9.5 15L9.501 15A0.5 0.5 0 0 1 10 15.5L10 16.501A0.5 0.5 0 0 0 10.5 17L10.501 17A0.5 0.5 0 0 1 11 17.5L11 17.501A0.5 0.5 0 0 1 10.501 18L10.5 18A0.5 0.5 0 0 0 10 18.5L10 20.501A0.5 0.5 0 0 1 9.501 21L9.5 21A0.5 0.5 0 0 0 9 21.5L9 21.501A0.5 0.5 0 0 0 9.5 22L9.501 22A0.5 0.5 0 0 1 10 22.5L10 22.501A0.5 0.5 0 0 0 10.5 23L10.501 23A0.5 0.5 0 0 1 11 23.5L11 23.501A0.5 0.5 0 0 0 11.5 24L12.501 24A0.5 0.5 0 0 1 13 24.5L13 25.501A0.5 0.5 0 0 0 13.5 26L14.501 26A0.5 0.5 0 0 1 15 26.5L15 26.501A0.5 0.5 0 0 0 15.5 27L17.501 27A0.5 0.5 0 0 0 18 26.501L18 26.5A0.5 0.5 0 0 0 17.501 26L17.5 26A0.5 0.5 0 0 1 17 25.501L17 25.5A0.5 0.5 0 0 1 17.5 25L18.501 25A0.5 0.5 0 0 1 19 25.5L19 26.501A0.5 0.5 0 0 0 19.5 27L19.501 27A0.5 0.5 0 0 0 20 26.501L20 26.5A0.5 0.5 0 0 1 20.5 26L21.501 26A0.5 0.5 0 0 1 22 26.5L22 26.501A0.5 0.5 0 0 0 22.5 27L22.501 27A0.5 0.5 0 0 1 23 27.5L23 27.501A0.5 0.5 0 0 0 23.5 28L23.501 28A0.5 0.5 0 0 0 24 27.501L24 27.5A0.5 0.5 0 0 0 23.501 27L23.5 27A0.5 0.5 0 0 1 23 26.501L23 25.5A0.5 0.5 0 0 0 22.501 25L19.5 25A0.5 0.5 0 0 1 19 24.501L19 24.5A0.5 0.5 0 0 0 18.501 24L18.5 24A0.5 0.5 0 0 1 18 23.501L18 23.5A0.5 0.5 0 0 0 17.501 23L16.5 23A0.5 0.5 0 0 0 16 23.5L16 24.501A0.5 0.5 0 0 1 15.501 25L14.5 25A0.5 0.5 0 0 1 14 24.501L14 24.5A0.5 0.5 0 0 1 14.5 24L14.501 24A0.5 0.5 0 0 0 15 23.501L15 21.5A0.5 0.5 0 0 1 15.5 21L17.501 21A0.5 0.5 0 0 1 18 21.5L18 21.501A0.5 0.5 0 0 0 18.5 22L18.501 22A0.5 0.5 0 0 0 19 21.501L19 21.5A0.5 0.5 0 0 1 19.5 21L19.501 21A0.5 0.5 0 0 0 20 20.501L20 20.5A0.5 0.5 0 0 1 20.5 20L20.501 20A0.5 0.5 0 0 0 21 19.501L21 19.5A0.5 0.5 0 0 1 21.5 19L23.501 19A0.5 0.5 0 0 0 24 18.501L24 17.5A0.5 0.5 0 0 1 24.5 17L24.501 17A0.5 0.5 0 0 0 25 16.501L25 16.5A0.5 0.5 0 0 0 24.501 16L24.5 16A0.5 0.5 0 0 1 24 15.501L24 15.5A0.5 0.5 0 0 1 24.5 15L24.501 15A0.5 0.5 0 0 0 25 14.501L25 14.5A0.5 0.5 0 0 1 25.5 14L25.501 14A0.5 0.5 0 0 1 26 14.5L26 14.501A0.5 0.5 0 0 0 26.5 15L27.501 15A0.5 0.5 0 0 0 28 14.501L28 13.5A0.5 0.5 0 0 0 27.501 13L27.5 13A0.5 0.5 0 0 0 27 13.5L27 13.501A0.5 0.5 0 0 1 26.501 14L26.5 14A0.5 0.5 0 0 1 26 13.501L26 13.5A0.5 0.5 0 0 0 25.501 13L25.5 13A0.5 0.5 0 0 1 25 12.501L25 12.5A0.5 0.5 0 0 0 24.501 12L24.5 12A0.5 0.5 0 0 1 24 11.501L24 11.5A0.5 0.5 0 0 0 23.501 11L21.5 11A0.5 0.5 0 0 1 21 10.501L21 10.5A0.5 0.5 0 0 0 20.501 10L20.5 10A0.5 0.5 0 0 1 20 9.501L20 5.5A0.5 0.5 0 0 0 19.501 5L19.5 5A0.5 0.5 0 0 0 19 5.5L19 6.501A0.5 0.5 0 0 1 18.501 7L18.5 7A0.5 0.5 0 0 1 18 6.501L18 6.5A0.5 0.5 0 0 0 17.501 6L17.5 6A0.5 0.5 0 0 0 17 6.5L17 6.501A0.5 0.5 0 0 1 16.501 7L16.5 7A0.5 0.5 0 0 1 16 6.501L16 6.5A0.5 0.5 0 0 0 15.501 6L15.5 6A0.5 0.5 0 0 0 15 6.5L15 6.501A0.5 0.5 0 0 1 14.501 7L14.5 7A0.5 0.5 0 0 1 14 6.501L14 5.5A0.5 0.5 0 0 0 13.501 5L13.5 5A0.5 0.5 0 0 0 13 5.5ZM14 8.5L14 8.501A0.5 0.5 0 0 0 14.5 9L15.501 9A0.5 0.5 0 0 0 16 8.501L16 8.5A0.5 0.5 0 0 0 15.501 8L14.5 8A0.5 0.5 0 0 0 14 8.5ZM18 8.5L18 8.501A0.5 0.5 0 0 1 17.501 9L17.5 9A0.5 0.5 0 0 0 17 9.5L17 10.501A0.5 0.5 0 0 0 17.5 11L18.501 11A0.5 0.5 0 0 0 19 10.501L19 10.5A0.5 0.5 0 0 0 18.501 10L18.5 10A0.5 0.5 0 0 1 18 9.501L18 9.5A0.5 0.5 0 0 1 18.5 9L18.501 9A0.5 0.5 0 0 0 19 8.501L19 8.5A0.5 0.5 0 0 0 18.501 8L18.5 8A0.5 0.5 0 0 0 18 8.5ZM0 9.5L0 11.501A0.5 0.5 0 0 0 0.5 12L0.501 12A0.5 0.5 0 0 0 1 11.501L1 9.5A0.5 0.5 0 0 0 0.501 9L0.5 9A0.5 0.5 0 0 0 0 9.5ZM25 9.5L25 9.501A0.5 0.5 0 0 0 25.5 10L25.501 10A0.5 0.5 0 0 0 26 9.501L26 9.5A0.5 0.5 0 0 0 25.501 9L25.5 9A0.5 0.5 0 0 0 25 9.5ZM16 12.5L16 12.501A0.5 0.5 0 0 0 16.5 13L16.501 13A0.5 0.5 0 0 1 17 13.5L17 13.501A0.5 0.5 0 0 1 16.501 14L14.5 14A0.5 0.5 0 0 1 14 13.501L14 13.5A0.5 0.5 0 0 0 13.501 13L13.5 13A0.5 0.5 0 0 0 13 13.5L13 16.501A0.5 0.5 0 0 1 12.501 17L12.5 17A0.5 0.5 0 0 1 12 16.501L12 16.5A0.5 0.5 0 0 0 11.501 16L11.5 16A0.5 0.5 0 0 0 11 16.5L11 16.501A0.5 0.5 0 0 0 11.5 17L11.501 17A0.5 0.5 0 0 1 12 17.5L12 17.501A0.5 0.5 0 0 1 11.501 18L11.5 18A0.5 0.5 0 0 0 11 18.5L11 19.501A0.5 0.5 0 0 0 11.5 20L11.501 20A0.5 0.5 0 0 1 12 20.5L12 20.501A0.5 0.5 0 0 1 11.501 21L11.5 21A0.5 0.5 0 0 0 11 21.5L11 21.501A0.5 0.5 0 0 0 11.5 22L11.501 22A0.5 0.5 0 0 1 12 22.5L12 22.501A0.5 0.5 0 0 0 12.5 23L12.501 23A0.5 0.5 0 0 1 13 23.5L13 23.501A0.5 0.5 0 0 0 13.5 24L13.501 24A0.5 0.5 0 0 0 14 23.501L14 20.5A0.5 0.5 0 0 1 14.5 20L14.501 20A0.5 0.5 0 0 0 15 19.501L15 19.5A0.5 0.5 0 0 1 15.5 19L15.501 19A0.5 0.5 0 0 1 16 19.5L16 19.501A0.5 0.5 0 0 0 16.5 20L18.501 20A0.5 0.5 0 0 0 19 19.501L19 18.5A0.5 0.5 0 0 0 18.501 18L18.5 18A0.5 0.5 0 0 1 18 17.501L18 17.5A0.5 0.5 0 0 0 17.501 17L17.5 17A0.5 0.5 0 0 1 17 16.501L17 16.5A0.5 0.5 0 0 1 17.5 16L17.501 16A0.5 0.5 0 0 0 18 15.501L18 15.5A0.5 0.5 0 0 1 18.5 15L18.501 15A0.5 0.5 0 0 1 19 15.5L19 15.501A0.5 0.5 0 0 0 19.5 16L19.501 16A0.5 0.5 0 0 1 20 16.5L20 18.501A0.5 0.5 0 0 0 20.5 19L20.501 19A0.5 0.5 0 0 0 21 18.501L21 14.5A0.5 0.5 0 0 0 20.501 14L19.5 14A0.5 0.5 0 0 1 19 13.501L19 13.5A0.5 0.5 0 0 1 19.5 13L21.501 13A0.5 0.5 0 0 1 22 13.5L22 13.501A0.5 0.5 0 0 0 22.5 14L22.501 14A0.5 0.5 0 0 1 23 14.5L23 14.501A0.5 0.5 0 0 0 23.5 15L23.501 15A0.5 0.5 0 0 0 24 14.501L24 14.5A0.5 0.5 0 0 1 24.5 14L24.501 14A0.5 0.5 0 0 0 25 13.501L25 13.5A0.5 0.5 0 0 0 24.501 13L24.5 13A0.5 0.5 0 0 0 24 13.5L24 13.501A0.5 0.5 0 0 1 23.501 14L23.5 14A0.5 0.5 0 0 1 23 13.501L23 12.5A0.5 0.5 0 0 0 22.501 12L18.5 12A0.5 0.5 0 0 0 18 12.5L18 12.501A0.5 0.5 0 0 1 17.501 13L17.5 13A0.5 0.5 0 0 1 17 12.501L17 12.5A0.5 0.5 0 0 0 16.501 12L16.5 12A0.5 0.5 0 0 0 16 12.5ZM7 13.5L7 13.501A0.5 0.5 0 0 1 6.501 14L5.5 14A0.5 0.5 0 0 0 5 14.5L5 14.501A0.5 0.5 0 0 0 5.5 15L6.501 15A0.5 0.5 0 0 0 7 14.501L7 14.5A0.5 0.5 0 0 1 7.5 14L7.501 14A0.5 0.5 0 0 1 8 14.5L8 14.501A0.5 0.5 0 0 0 8.5 15L8.501 15A0.5 0.5 0 0 0 9 14.501L9 14.5A0.5 0.5 0 0 0 8.501 14L8.5 14A0.5 0.5 0 0 1 8 13.501L8 13.5A0.5 0.5 0 0 0 7.501 13L7.5 13A0.5 0.5 0 0 0 7 13.5ZM10 13.5L10 13.501A0.5 0.5 0 0 0 10.5 14L10.501 14A0.5 0.5 0 0 0 11 13.501L11 13.5A0.5 0.5 0 0 0 10.501 13L10.5 13A0.5 0.5 0 0 0 10 13.5ZM16 15.5L16 15.501A0.5 0.5 0 0 0 16.5 16L16.501 16A0.5 0.5 0 0 0 17 15.501L17 15.5A0.5 0.5 0 0 0 16.501 15L16.5 15A0.5 0.5 0 0 0 16 15.5ZM14 16.5L14 16.501A0.5 0.5 0 0 0 14.5 17L14.501 17A0.5 0.5 0 0 1 15 17.5L15 17.501A0.5 0.5 0 0 1 14.501 18L12.5 18A0.5 0.5 0 0 0 12 18.5L12 18.501A0.5 0.5 0 0 0 12.5 19L14.501 19A0.5 0.5 0 0 0 15 18.501L15 18.5A0.5 0.5 0 0 1 15.5 18L15.501 18A0.5 0.5 0 0 0 16 17.501L16 17.5A0.5 0.5 0 0 0 15.501 17L15.5 17A0.5 0.5 0 0 1 15 16.501L15 16.5A0.5 0.5 0 0 0 14.501 16L14.5 16A0.5 0.5 0 0 0 14 16.5ZM22 16.5L22 17.501A0.5 0.5 0 0 0 22.5 18L22.501 18A0.5 0.5 0 0 0 23 17.501L23 16.5A0.5 0.5 0 0 0 22.501 16L22.5 16A0.5 0.5 0 0 0 22 16.5ZM4 18.5L4 18.501A0.5 0.5 0 0 0 4.5 19L4.501 19A0.5 0.5 0 0 0 5 18.501L5 18.5A0.5 0.5 0 0 0 4.501 18L4.5 18A0.5 0.5 0 0 0 4 18.5ZM17 18.5L17 18.501A0.5 0.5 0 0 0 17.5 19L17.501 19A0.5 0.5 0 0 0 18 18.501L18 18.5A0.5 0.5 0 0 0 17.501 18L17.5 18A0.5 0.5 0 0 0 17 18.5ZM25 19.5L25 19.501A0.5 0.5 0 0 0 25.5 20L25.501 20A0.5 0.5 0 0 0 26 19.501L26 19.5A0.5 0.5 0 0 0 25.501 19L25.5 19A0.5 0.5 0 0 0 25 19.5ZM21 21.5L21 23.501A0.5 0.5 0 0 0 21.5 24L23.501 24A0.5 0.5 0 0 0 24 23.501L24 21.5A0.5 0.5 0 0 0 23.501 21L21.5 21A0.5 0.5 0 0 0 21 21.5ZM22 22.5L22 22.501A0.5 0.5 0 0 0 22.5 23L22.501 23A0.5 0.5 0 0 0 23 22.501L23 22.5A0.5 0.5 0 0 0 22.501 22L22.5 22A0.5 0.5 0 0 0 22 22.5ZM25 22.5L25 22.501A0.5 0.5 0 0 0 25.5 23L25.501 23A0.5 0.5 0 0 0 26 22.501L26 22.5A0.5 0.5 0 0 0 25.501 22L25.5 22A0.5 0.5 0 0 0 25 22.5ZM8 24.5L8 25.501A0.5 0.5 0 0 0 8.5 26L8.501 26A0.5 0.5 0 0 1 9 26.5L9 27.501A0.5 0.5 0 0 0 9.5 28L9.501 28A0.5 0.5 0 0 1 10 28.5L10 28.501A0.5 0.5 0 0 0 10.5 29L10.501 29A0.5 0.5 0 0 0 11 28.501L11 26.5A0.5 0.5 0 0 0 10.501 26L9.5 26A0.5 0.5 0 0 1 9 25.501L9 24.5A0.5 0.5 0 0 0 8.501 24L8.5 24A0.5 0.5 0 0 0 8 24.5ZM0 0.5L0 6.501A0.5 0.5 0 0 0 0.5 7L6.501 7A0.5 0.5 0 0 0 7 6.501L7 0.5A0.5 0.5 0 0 0 6.501 0L0.5 0A0.5 0.5 0 0 0 0 0.5ZM1 1.5L1 5.501A0.5 0.5 0 0 0 1.5 6L5.501 6A0.5 0.5 0 0 0 6 5.501L6 1.5A0.5 0.5 0 0 0 5.501 1L1.5 1A0.5 0.5 0 0 0 1 1.5ZM2 2.5L2 4.501A0.5 0.5 0 0 0 2.5 5L4.501 5A0.5 0.5 0 0 0 5 4.501L5 2.5A0.5 0.5 0 0 0 4.501 2L2.5 2A0.5 0.5 0 0 0 2 2.5ZM22 0.5L22 6.501A0.5 0.5 0 0 0 22.5 7L28.501 7A0.5 0.5 0 0 0 29 6.501L29 0.5A0.5 0.5 0 0 0 28.501 0L22.5 0A0.5 0.5 0 0 0 22 0.5ZM23 1.5L23 5.501A0.5 0.5 0 0 0 23.5 6L27.501 6A0.5 0.5 0 0 0 28 5.501L28 1.5A0.5 0.5 0 0 0 27.501 1L23.5 1A0.5 0.5 0 0 0 23 1.5ZM24 2.5L24 4.501A0.5 0.5 0 0 0 24.5 5L26.501 5A0.5 0.5 0 0 0 27 4.501L27 2.5A0.5 0.5 0 0 0 26.501 2L24.5 2A0.5 0.5 0 0 0 24 2.5ZM0 22.5L0 28.501A0.5 0.5 0 0 0 0.5 29L6.501 29A0.5 0.5 0 0 0 7 28.501L7 22.5A0.5 0.5 0 0 0 6.501 22L0.5 22A0.5 0.5 0 0 0 0 22.5ZM1 23.5L1 27.501A0.5 0.5 0 0 0 1.5 28L5.501 28A0.5 0.5 0 0 0 6 27.501L6 23.5A0.5 0.5 0 0 0 5.501 23L1.5 23A0.5 0.5 0 0 0 1 23.5ZM2 24.5L2 26.501A0.5 0.5 0 0 0 2.5 27L4.501 27A0.5 0.5 0 0 0 5 26.501L5 24.5A0.5 0.5 0 0 0 4.501 24L2.5 24A0.5 0.5 0 0 0 2 24.5Z" fill="#000000"/></g></g></svg>
</div>
<div class="mt-4">
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.eu-popup {
bottom: 0;
position: fixed;
display: flex;
padding: 24px;
z-index: 4242;
flex-wrap: wrap;
background-color: var(--bs-body-bg);
box-shadow: 0px 0px 1px 0px rgb(0 0 0 / 15%), 0px 4px 24px 4px rgb(0 0 0 / 15%);
margin: 20px;
border-radius: 24px;
transition: bottom ease-in-out .2s;
flex-direction: column;
}
[data-bs-theme=dark] .eu-popup {
background-color: var(--bs-dark)!important;
}
.eu-popup-button {
background-color: #212121;
color: white;
padding: 10px;
padding-left: 20px;
padding-right: 20px;
border: 1px #212121 solid;
border-radius: 8px;
}
.eu-popup-button:hover {
cursor: pointer;
background-color: black !important;
}
[data-bs-theme=dark] .eu-popup-button {
background-color: var(--bs-body-color);
color: var(--bs-body-bg);
}
[data-bs-theme=dark] .eu-popup-button:hover {
background-color: rgba(var(--bs-body-color-rgb), 0.95) !important;
color: var(--bs-body-bg);
}
.eu-popup-button#editButton {
background-color: white !important;
color: #212121;
}
.eu-popup-button#editButton:hover {
background-color: rgba(0, 0, 0, 0.05) !important;
}
[data-bs-theme=dark] .eu-popup-button#editButton {
background-color: rgba(var(--bs-body-color-rgb), 0.15) !important;
color: var(--bs-body-color);
}
[data-bs-theme=dark] .eu-popup-button#editButton:hover {
background-color: rgba(var(--bs-body-color-rgb), 0.2) !important;
color: var(--bs-body-color);
}
.eu-popup.modal-show {
bottom: -250px;
}
</style>
<style>
.eu-popup {
bottom: 54px!important;
}
</style>
<script>
function euCookieConsentSetCheckboxesByClassName(classname) {
checkboxes = document.getElementsByClassName('eu-cookie-consent-cookie');
for (i = 0; i < checkboxes.length; i++) {
checkboxes[i].setAttribute('checked', 'checked');
checkboxes[i].checked = true;
}
}
</script>
<div style="" class="eu-popup">
<div>
<h5 class="font-weight-bold d-flex">
<span class="material-icons align-middle me-1">lock</span>
<span class="align-middle">
Cookie consent
</span>
</h5>
</div>
<div>
<p class="mb-0">
SkinMC uses cookies to provide functionality and features.
</p>
</div>
<form action="/saveTheCookie" method="POST">
<!-- Modal -->
<div class="cookiesCustom modal fade" id="cookiesCustom" tabindex="-1" aria-labelledby="cookiesCustomLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn ms-n2 position-absolute" data-bs-dismiss="modal" aria-label="Close">
<span class="material-icons mt-2">keyboard_arrow_left</span>
</button>
<h5 class="modal-title align-self-center mx-auto" id="cookiesCustomLabel">
Customise cookies
</h5>
</div>
<div class="modal-body p-4">
<div style="width: 100%;">
<div class="mb-4">
<h5>
Essential data
</h5>
<p>
Essential data cookies are required to run the site you are visiting technically. You can not deactivate them.
</p>
<div>
<div class="form-check form-switch">
<input checked="checked" class="form-check-input" type="checkbox" role="switch" id="session" name="session" class="eu-cookie-consent-category-essential eu-cookie-consent-cookie" value="1" checked="checked" disabled="disabled" }}>
<input type="hidden" name="session" value="1">
<label class="form-check-label d-flex" for="session">
Session Cookie: PHP uses a Cookie to identify user sessions.
</label>
</div>
</div>
<div>
<div class="form-check form-switch">
<input checked="checked" class="form-check-input" type="checkbox" role="switch" id="xsrf-token" name="xsrf-token" class="eu-cookie-consent-category-essential eu-cookie-consent-cookie" value="1" checked="checked" disabled="disabled" }}>
<input type="hidden" name="xsrf-token" value="1">
<label class="form-check-label d-flex" for="xsrf-token">
XSRF-Token Cookie: automatically created CSRF "token" for each active user session managed by the application. This token is used to verify that the authenticated user is the one actually making the requests to the application.
</label>
</div>
</div>
</div>
<div class="mb-4">
<h5>
Functional cookies
</h5>
<p>
These cookies allow the provision of enhanced functionality such as videos. They may be set by us or by third-party providers whose services we have added to our pages. If you do not allow these cookies, then some or all of these functionalities may not function properly.
</p>
<div>
<div class="form-check form-switch">
<input checked="checked" class="form-check-input" type="checkbox" role="switch" id="youtube" name="youtube" class="eu-cookie-consent-category-functional eu-cookie-consent-cookie" value="1" }}>
<label class="form-check-label d-flex" for="youtube">
YouTube
</label>
</div>
</div>
<div>
<p>
These cookies allow functionality from Sign in with Google to quickly sign in or create an account with Google. Data from Sign in with Google is only used for security purposes.
</p>
<div class="form-check form-switch">
<input checked="checked" class="form-check-input" type="checkbox" role="switch" id="googleOneTap" name="googleOneTap" class="eu-cookie-consent-category-functional eu-cookie-consent-cookie" value="1" }}>
<label class="form-check-label d-flex" for="googleOneTap">
Sign in with Google
</label>
</div>
</div>
</div>
<div class="mb-4">
<h5>
Analytical cookies
</h5>
<p>
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. If you do not allow these cookies, information from these cookies will not be used to help site performance.
</p>
<div>
<div class="form-check form-switch">
<input checked="checked" class="form-check-input" type="checkbox" role="switch" id="googleAnalytics" name="googleAnalytics" class="eu-cookie-consent-category-analytical eu-cookie-consent-cookie" value="1" }}>
<label class="form-check-label d-flex" for="googleAnalytics">
Google Analytics
</label>
</div>
</div>
<div>
<div class="form-check form-switch">
<input checked="checked" class="form-check-input" type="checkbox" role="switch" id="microsoftClarity" name="microsoftClarity" class="eu-cookie-consent-category-analytical eu-cookie-consent-cookie" value="1" }}>
<label class="form-check-label d-flex" for="microsoftClarity">
Microsoft Clarity
</label>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="saveButton" type="submit" class="eu-popup-button w-100">
Save
</button>
</div>
</div>
</div>
</div>
<div style="margin-top: 16px;">
<button class="eu-popup-button" onclick="euCookieConsentSetCheckboxesByClassName('eu-cookie-consent-cookie');">
Accept all
</button>
<button type="button" class="eu-popup-button" id="editButton" data-bs-toggle="modal" data-bs-toggle="collapse" data-bs-target="#cookiesCustom">
Customise
</button>
</div>
</form>
</div>
<div id="update_popup_container"></div>
<script>
function update_popup() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
if (xhr.status >= 200 && xhr.status < 300) {
var element = document.getElementById('update_popup_container');
element.innerHTML = xhr.response;
console.log('success!', xhr);
} else {
console.log('The request failed!');
}
}
xhr.open('POST', 'https://skinmc.net/saveTheCookie/update');
xhr.send();
}
</script>
<!-- Scripts -->
<script>const LOCALE = "en";</script>
<script defer src="https://skinmc.net/js/typeahead.bundle.min.js"></script>
<script defer src="https://skinmc.net/js/modernizr-custom.js"></script>
<script type="module">
// Set the Options for "Bloodhound" suggestion engine
let engineUrl = 'https://skinmc.net/autocomplete' + '?query=%QUERY%';
document.addEventListener("DOMContentLoaded", function() {
});
let engine = new Bloodhound({
remote: {
url: engineUrl,
wildcard: '%QUERY%',
},
datumTokenizer: Bloodhound.tokenizers.whitespace('query'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
});
$('#searchName').typeahead({
hint: true,
highlight: true,
autoselect: true,
minLength: 1,
classNames: {
dataset: 'tt-dataset text-body data-bs-theme-light'
}
},
{
source: engine.ttAdapter(),
limit: 12,
templates: {
suggestion: function(data) {
return '<div class="d-flex flex-row align-items-center">' +
'<div class="position-relative img-border rounded-circle"><img src="https://minotar.net/helm/'+data+'/32.png" class="img-scalenearest rounded-circle my-auto bg-light" width="32px" height="32px"></div>' +
'<div class="d-flex flex-column ps-3">' +
'<p>'+data+'</p>' +
'</div>'+
'</div>';
}
}
});
$('#mobileSearchForm')
.typeahead({
hint: true,
highlight: true,
autoselect: false,
minLength: 1,
classNames: {
menu: 'p-0 py-0 mobile-typeahead-form border-24 text-body',
dataset: 'card-body'
}
},
{
source: engine.ttAdapter(),
limit: 12,
templates: {
suggestion: function(data) {
return '<div class="d-flex flex-row align-items-center">' +
'<div class="position-relative img-border rounded-circle"><img src="https://minotar.net/helm/'+data+'/32.png" class="img-scalenearest rounded-circle my-auto bg-light" width="32px" height="32px"></div>' +
'<div class="d-flex flex-column ps-3">' +
'<p>'+data+'</p>' +
'</div>'+
'</div>';
}
}
});
document.querySelector('.tt-dataset.data-bs-theme-light').setAttribute('data-bs-theme', 'light')
document.addEventListener('DOMContentLoaded', function() {
// Get relevant elements
const mainSearchForm = document.getElementById('search');
const searchTypeLabel = document.getElementById('searchTypeActiveName');
// Define a function to update the action based on the provided action name
function updateAction(action) {
const routes = {
'all': { route: 'https://skinmc.net/s', label: 'All results' },
'profiles': { route: 'https://skinmc.net/s/profiles', label: 'Profiles' },
'skins': { route: 'https://skinmc.net/s/skins', label: 'Skins' },
'servers': { route: 'https://skinmc.net/s/servers', label: 'Servers' }
};
if (routes.hasOwnProperty(action)) {
const { route, label } = routes[action];
// Update action and label
mainSearchForm.action = route;
searchTypeLabel.innerText = label;
// Remove 'active' class from all elements
document.querySelectorAll('#selectSearchType .active').forEach(element => {
element.classList.remove('active');
});
// Add 'active' class to the clicked element
document.getElementById(`searchType${action.charAt(0).toUpperCase() + action.slice(1)}`).classList.add('active');
// Clear engine and set remote URL based on action
engine.clear();
if (action === 'skins') {
engine.remote.url = 'https://skinmc.net/autocomplete/skin-tags' + '?query=%QUERY%';
} else if (action === 'servers') {
engine.remote.url = 'https://skinmc.net/autocomplete/servers' + '?query=%QUERY%';
} else {
engine.remote.url = 'https://skinmc.net/autocomplete' + '?query=%QUERY%';
}
// Reinitialize typeahead
$('#searchName').typeahead('destroy').typeahead({
hint: true,
highlight: true,
autoselect: true,
minLength: 1,
classNames: {
dataset: 'tt-dataset text-body data-bs-theme-light'
}
},
{
source: engine.ttAdapter(),
limit: 12,
templates: {
suggestion: function(data) {
let icon = '';
if (action === 'skins') {
icon = '<span class="material-icons bg-light p-2 border-12">style</span>';
} else if (action === 'servers') {
icon = '<span class="material-icons bg-light p-2 border-12">dns</span>';
} else {
icon = '<div class="position-relative img-border rounded-circle"><img src="https://minotar.net/helm/'+data+'/32.png" class="img-scalenearest rounded-circle my-auto bg-light" width="32px" height="32px"></div>';
}
return '<div class="d-flex flex-row align-items-center">' +
icon +
'<div class="d-flex flex-column ps-3">' +
'<p>'+data+'</p>' +
'</div>'+
'</div>';
}
}
});
engine.initialize(true);
// Focus on search input after a short delay
setTimeout(() => {
$(".search-bar input").focus();
}, 100);
}
}
// Add event listeners to the elements corresponding to the actions
document.getElementById('searchTypeAll').addEventListener('click', function() {
updateAction('all');
});
document.getElementById('searchTypeProfiles').addEventListener('click', function() {
updateAction('profiles');
});
document.getElementById('searchTypeSkins').addEventListener('click', function() {
updateAction('skins');
});
document.getElementById('searchTypeServers').addEventListener('click', function() {
updateAction('servers');
});
});
// Go through names in the search box
let tryNames = ["Rux", "jeb_", "Link", "Gronkh", "Vecoan", "Herobrine", "UUID"];
let tryNamesIndex = 0;
setInterval(function () {
if (tryNamesIndex >= tryNames.length) tryNamesIndex = 0;
$('#searchName').attr('placeholder', `Try “${tryNames[tryNamesIndex]}”`);
tryNamesIndex++;
}, 4000);
// Mobile
document.addEventListener('DOMContentLoaded', function() {
$("#search-mobile-container #mobileSearchForm").on("keyup", function () {
toggleMobileRecents()
})
function toggleMobileRecents() {
if($("#mobileSearchForm").val().length < 1) {
$(".search-nav.mobile.is-open .autocomplete-m").removeClass('d-none');
$(":reset").addClass('d-none');
document.getElementById('mobileSearchTypeCards').classList.add('show');
document.getElementById('typeaheadBackground').classList.add('hide');
document.getElementById('typeaheadBackground').classList.remove('show');
}
else {
$(".search-nav.mobile.is-open .autocomplete-m").addClass('d-none');
$(":reset").removeClass('d-none');
document.getElementById('mobileSearchTypeCards').classList.remove('show');
document.getElementById('typeaheadBackground').classList.add('show');
}
}
$('#mobileResetBtn').on('click', function () {
$(".search-nav.mobile.is-open .autocomplete-m").removeClass('d-none');
$(":reset").addClass('d-none');
document.getElementById('mobileSearchTypeCards').classList.add('show');
document.getElementById('typeaheadBackground').classList.add('hide');
document.getElementById('typeaheadBackground').classList.remove('show');
engine.clear();
});
// Check if virtualKeyboard is supported
if ("virtualKeyboard" in navigator) {
navigator.virtualKeyboard.overlaysContent = true;
}
// Get relevant elements
const mobileSearchForm = document.getElementById('formMobile');
// Define a function to remove 'active' class from all elements
function clearActiveClasses() {
const allElements = document.querySelectorAll('#mobileSearchTypeCards .active');
allElements.forEach((element) => {
element.classList.remove('active');
});
}
// Define a function to update action based on the provided action name
function updateActionMobile(action) {
const routes = {
'all': { route: 'https://skinmc.net/s', id: 'searchMobileTypeAll' },
'profiles': { route: 'https://skinmc.net/s/profiles', id: 'searchMobileTypeProfiles' },
'skins': { route: 'https://skinmc.net/s/skins', id: 'searchMobileTypeSkins' },
'servers': { route: 'https://skinmc.net/s/servers', id: 'searchMobileTypeServers' }
};
if (routes.hasOwnProperty(action)) {
const { route, id } = routes[action];
// Update action
mobileSearchForm.action = route;
// Clear active classes and add 'active' class to the clicked element
clearActiveClasses();
document.getElementById(id).classList.add('active');
// Clear engine and set remote URL based on action
engine.clear();
if (action === 'skins') {
engine.remote.url = 'https://skinmc.net/autocomplete/skin-tags' + '?query=%QUERY%';
} else if (action === 'servers') {
engine.remote.url = 'https://skinmc.net/autocomplete/servers' + '?query=%QUERY%';
} else {
engine.remote.url = 'https://skinmc.net/autocomplete' + '?query=%QUERY%';
}
engine.initialize(true);
// Focus on search input after a short delay
setTimeout(() => {
$(".search-bar input").focus();
}, 100);
}
}
// Add event listeners to the elements corresponding to the actions
document.getElementById('searchMobileTypeAll').addEventListener('click', function() {
updateActionMobile('all');
});
document.getElementById('searchMobileTypeProfiles').addEventListener('click', function() {
updateActionMobile('profiles');
});
document.getElementById('searchMobileTypeSkins').addEventListener('click', function() {
updateActionMobile('skins');
});
document.getElementById('searchMobileTypeServers').addEventListener('click', function() {
updateActionMobile('servers');
});
});
</script>
<style>
@media (max-width: 768px) {
.profile-dialog{
border-radius: 20px;
min-width: calc(100% - 16px)!important;
width: calc(100% - 16px)!important;
max-width: calc(100% - 16px)!important;
left: 0px !important;
right: 0px !important;
margin: 8px !important;
position: fixed;
bottom: 52px!important;
top: auto!important;
z-index: 1200;
position: fixed!important;
max-height: 80vh;
overflow: scroll;
max-width: 100%;
transform-origin: bottom !important;
}
}
</style>
<script data-navigate-once="true">window.livewireScriptConfig = {"csrf":"u3w8NeF4EBxrfpBNlojO3mCO4IaxXzHHANRwGUL6","uri":"\/livewire\/update","progressBar":"","nonce":""};</script>
</body>
</html>