feat: link to the hatty crabby icon guide

- Added a link to a guide for a specific icon ID (6584).
This commit is contained in:
Rico van Zelst
2024-04-01 16:36:25 +02:00
parent 55a72607e2
commit d099289685

View File

@@ -1,85 +1,95 @@
<section class="min-h-[80vh] flex items-center justify-center"> <section class="min-h-[80vh] flex items-center justify-center">
<div class="my-auto mx-auto items-center justify-center align-middle"> <div class="items-center justify-center mx-auto my-auto align-middle">
<p class="sr-only">Heimerdinger Presents:</p> <p class="sr-only">Heimerdinger Presents:</p>
<h3 <h3
class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text"> class="text-sm font-bold text-center text-transparent uppercase sm:text-md bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
ICON DETAILS</h3> ICON DETAILS</h3>
<h1 <h1
class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text"> class="text-3xl font-bold text-center text-transparent uppercase sm:text-4xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
{{$icon->title}}</h1> {{ $icon->title }}</h1>
<h2 <h2
class="text-sm md:text-lg font-bold text-center text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text"> class="text-sm font-bold text-center text-transparent uppercase md:text-lg bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
Released in: {{$icon->release_year}}</h2> Released in: {{ $icon->release_year }}</h2>
<div class="container mx-auto p-4 flex items-center justify-center mt-3 my-auto"> <div class="container flex items-center justify-center p-4 mx-auto my-auto mt-3">
<div class="w-screen grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="grid w-screen grid-cols-1 gap-8 md:grid-cols-2">
<div <div
class="items-center align-middle flex flex-col rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80"> class="flex flex-col items-center align-middle border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80">
<h4 class="text-center text-2xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mb-3"> <h4 class="text-center text-2xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mb-3">
The {{$icon->title}}</h4> The {{ $icon->title }}</h4>
<img <img src="//wsrv.nl/?url={{ $icon->image }}&w=400&output=webp&q=100&il"
src="//wsrv.nl/?url={{ $icon->image }}&w=400&output=webp&q=100&il" alt="{{ $icon->title }} Icon"
alt="{{$icon->title}} Icon" class="transition-transform duration-700 border-2 shadow-md rounded-2xl bg-clip-border border-orange-400/40 shadow-orange-400/20" />
class="transition-transform duration-700 rounded-2xl bg-clip-border border-2 border-orange-400/40 shadow-md shadow-orange-400/20"/> <a href="{{ $icon->image }}" rel="noopener" target="_blank"
<a href="{{$icon->image}}" rel="noopener" target="_blank" class="px-4 py-2 text-sm font-medium text-center text-neutral-100">
class="text-center text-neutral-100 text-sm font-medium px-4 py-2">
View in HD View in HD
</a> </a>
</div> </div>
<div class="rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80"> <div class="border shadow-sm rounded-2xl bg-stone-800/40 border-neutral-300/5 shadow-stone-800/80">
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2"> <h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
{{$icon->title}} Details {{ $icon->title }} Details
</h4> </h4>
<div class="flex flex-col justify-between h-max"> <div class="flex flex-col justify-between h-max">
<ul class="mx-5 flex-1 h-max"> <ul class="flex-1 mx-5 h-max">
<li class="text-neutral-100 hyphens-auto text-base leading-loose items-center" lang="en"> <li class="items-center text-base leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Icon ID:</span> <span class="font-bold">Icon ID:</span>
<span class="font-mono font-semibold">{{$icon->icon_id}}</span> <span class="font-mono font-semibold">{{ $icon->icon_id }}</span>
</li> </li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" <li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span class="font-bold">Icon Name:</span> {{$icon->title}} <span class="font-bold">Icon Name:</span> {{ $icon->title }}
</li> </li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" <li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span class="font-bold">Release Year:</span> {{$icon->release_year}} <span class="font-bold">Release Year:</span> {{ $icon->release_year }}
</li> </li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" <li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span class="font-bold">Legacy<span <span class="font-bold">Legacy<span class="font-extralight">*</span>:</span>
class="font-extralight">*</span>:</span> {{$icon->legacy ? 'Yes' : 'No'}} {{ $icon->legacy ? 'Yes' : 'No' }}
</li> </li>
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" <li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span <span class="font-bold">Esports Icon:</span>
class="font-bold">Esports Icon:</span> {{$icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No'}} {{ $icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No' }}
</li> </li>
@if($icon->esports_team || $icon->esports_region || $icon->esports_event) @if ($icon->esports_team || $icon->esports_region || $icon->esports_event)
@if($icon->esports_team) @if ($icon->esports_team)
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" <li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span class="font-bold">Esports Team:</span> {{$icon->esports_team}} <span class="font-bold">Esports Team:</span> {{ $icon->esports_team }}
</li> </li>
@endif @endif
@if($icon->esports_region) @if ($icon->esports_region)
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" <li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span class="font-bold">Esports Region:</span> {{$icon->esports_region}} <span class="font-bold">Esports Region:</span> {{ $icon->esports_region }}
</li> </li>
@endif @endif
@if($icon->esports_event) @if ($icon->esports_event)
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" <li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span class="font-bold">Esports Event:</span> {{$icon->esports_event}} <span class="font-bold">Esports Event:</span> {{ $icon->esports_event }}
</li> </li>
@endif @endif
@endif @endif
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" <li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span class="font-bold">Description:</span> {{$icon->description}} <span class="font-bold">Description:</span> {{ $icon->description }}
</li> </li>
<li class="text-neutral-100 hyphens-auto font-light text-sm leading-loose items-center mt-8"
@if ($icon->icon_id === 6584)
<li class="items-center text-base font-medium leading-loose text-neutral-100 hyphens-auto"
lang="en">
<span class="font-bold">Guide:</span> <a href="https://heimerdinger.lol/post/how-to-get-hatty-crabby-icon-in-league-of-legends"
class="underline hover:text-orange-400 decoration-orange-400">How to get the Hatty Crabby Icon in
League of Legends</a>
</li>
@endif
<li class="items-center mt-8 text-sm font-light leading-loose text-neutral-100 hyphens-auto"
lang="en"> lang="en">
<span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy <span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy
skins. skins.