mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
fix: center icon show + add alt to img
This commit is contained in:
Rico van Zelst
@@ -58,7 +58,7 @@
|
|||||||
|
|
||||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3 flex-grow">
|
<div class="container mx-auto p-4 flex items-center justify-center mt-3 flex-grow">
|
||||||
<div class="text-center items-center justify-center align-middle">
|
<div class="text-center items-center justify-center align-middle">
|
||||||
<img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}">
|
<img class="items-center mx-auto" src="{{asset('img/heimerdinger-emote.webp')}}" alt="Heimerdinger Emote">
|
||||||
<p class="text-gray-100">Tired of endless browsing to find that one icon or emote you love?</p>
|
<p class="text-gray-100">Tired of endless browsing to find that one icon or emote you love?</p>
|
||||||
<p class="text-gray-100 ">We got you covered! Search through <span
|
<p class="text-gray-100 ">We got you covered! Search through <span
|
||||||
class="underline decoration-orange-500/50 font-medium">all</span>
|
class="underline decoration-orange-500/50 font-medium">all</span>
|
||||||
|
|||||||
@@ -1,88 +1,101 @@
|
|||||||
<section class="max-w-screen-xl mx-auto mt-12">
|
<section class="min-h-[80vh] flex items-center justify-center">
|
||||||
<p class="sr-only">Heimerdinger Presents:</p>
|
<div class="my-auto mx-auto items-center justify-center align-middle">
|
||||||
<h3
|
<p class="sr-only">Heimerdinger Presents:</p>
|
||||||
class="text-sm font-bold text-center text-transparent uppercase sm:text-md
|
<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">
|
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
|
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">
|
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
|
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">
|
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">
|
<div class="container mx-auto p-4 flex items-center justify-center mt-3 my-auto">
|
||||||
<div class="w-screen grid grid-cols-1 md:grid-cols-2 gap-8">
|
<div class="w-screen grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
<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="items-center align-middle flex flex-col rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm 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 rounded-2xl bg-clip-border border-2 border-orange-400/40
|
||||||
class="transition-transform duration-700 rounded-2xl bg-clip-border border-2 border-orange-400/40
|
|
||||||
shadow-md shadow-orange-400/20"/>
|
shadow-md shadow-orange-400/20"/>
|
||||||
<a href="{{$icon->image}}" target="_blank"
|
<a href="{{$icon->image}}" target="_blank"
|
||||||
class="text-center text-neutral-100 text-sm font-medium px-4 py-2">
|
class="text-center text-neutral-100 text-sm font-medium px-4 py-2">
|
||||||
View in HD
|
View in HD
|
||||||
</a>
|
</a>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80">
|
|
||||||
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
|
|
||||||
{{$icon->title}} Details
|
|
||||||
</h4>
|
|
||||||
<div class="flex flex-col justify-between h-max">
|
|
||||||
<ul class="mx-5 flex-1 h-max">
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Icon ID:</span>
|
|
||||||
<span class="font-mono font-semibold">{{$icon->icon_id}}</span>
|
|
||||||
</li>
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Icon Name:</span> {{$icon->title}}
|
|
||||||
</li>
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Release Year:</span> {{$icon->release_year}}
|
|
||||||
</li>
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Legacy<span class="font-extralight">*</span>:</span> {{$icon->legacy ? 'Yes' : 'No'}}
|
|
||||||
</li>
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Esports Icon:</span> {{$icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No'}}
|
|
||||||
</li>
|
|
||||||
@if($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
|
||||||
@if($icon->esports_team)
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Esports Team:</span> {{$icon->esports_team}}
|
|
||||||
</li>
|
|
||||||
@endif
|
|
||||||
@if($icon->esports_region)
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Esports Region:</span> {{$icon->esports_region}}
|
|
||||||
</li>
|
|
||||||
@endif
|
|
||||||
@if($icon->esports_event)
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Esports Event:</span> {{$icon->esports_event}}
|
|
||||||
</li>
|
|
||||||
@endif
|
|
||||||
@endif
|
|
||||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center" lang="en">
|
|
||||||
<span class="font-bold">Description:</span> {{$icon->description}}
|
|
||||||
</li>
|
|
||||||
<li class="text-neutral-100 hyphens-auto font-light text-sm leading-loose items-center mt-8" lang="en">
|
|
||||||
<span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy skins.
|
|
||||||
It seems like some icons that are marked as legacy are still obtainable or the other way around
|
|
||||||
where some icons that are not marked as legacy are not obtainable anymore.
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<div class="rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80">
|
||||||
|
<h4 class="text-center text-lg font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm mx-2">
|
||||||
|
{{$icon->title}} Details
|
||||||
|
</h4>
|
||||||
|
<div class="flex flex-col justify-between h-max">
|
||||||
|
<ul class="mx-5 flex-1 h-max">
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base leading-loose items-center" lang="en">
|
||||||
|
<span class="font-bold">Icon ID:</span>
|
||||||
|
<span class="font-mono font-semibold">{{$icon->icon_id}}</span>
|
||||||
|
</li>
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||||
|
lang="en">
|
||||||
|
<span class="font-bold">Icon Name:</span> {{$icon->title}}
|
||||||
|
</li>
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||||
|
lang="en">
|
||||||
|
<span class="font-bold">Release Year:</span> {{$icon->release_year}}
|
||||||
|
</li>
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||||
|
lang="en">
|
||||||
|
<span class="font-bold">Legacy<span
|
||||||
|
class="font-extralight">*</span>:</span> {{$icon->legacy ? 'Yes' : 'No'}}
|
||||||
|
</li>
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||||
|
lang="en">
|
||||||
|
<span
|
||||||
|
class="font-bold">Esports Icon:</span> {{$icon->esports_team || $icon->esports_region || $icon->esports_event ? 'Yes' : 'No'}}
|
||||||
|
</li>
|
||||||
|
@if($icon->esports_team || $icon->esports_region || $icon->esports_event)
|
||||||
|
@if($icon->esports_team)
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||||
|
lang="en">
|
||||||
|
<span class="font-bold">Esports Team:</span> {{$icon->esports_team}}
|
||||||
|
</li>
|
||||||
|
@endif
|
||||||
|
@if($icon->esports_region)
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||||
|
lang="en">
|
||||||
|
<span class="font-bold">Esports Region:</span> {{$icon->esports_region}}
|
||||||
|
</li>
|
||||||
|
@endif
|
||||||
|
@if($icon->esports_event)
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||||
|
lang="en">
|
||||||
|
<span class="font-bold">Esports Event:</span> {{$icon->esports_event}}
|
||||||
|
</li>
|
||||||
|
@endif
|
||||||
|
@endif
|
||||||
|
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||||
|
lang="en">
|
||||||
|
<span class="font-bold">Description:</span> {{$icon->description}}
|
||||||
|
</li>
|
||||||
|
<li class="text-neutral-100 hyphens-auto font-light text-sm leading-loose items-center mt-8"
|
||||||
|
lang="en">
|
||||||
|
<span class="font-bold">* Legacy Icons:</span> Legacy Icons don't act the same as legacy
|
||||||
|
skins.
|
||||||
|
It seems like some icons that are marked as legacy are still obtainable or the other way
|
||||||
|
around
|
||||||
|
where some icons that are not marked as legacy are not obtainable anymore.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
1
|
|
||||||
|
|||||||
@@ -44,7 +44,7 @@
|
|||||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="antialiased bg-stone-900 dark scroll-smooth">
|
<body class="antialiased bg-stone-900 dark scroll-smooth min-h-screen">
|
||||||
<x-navbar/>
|
<x-navbar/>
|
||||||
<x-icons.view_grid :icon="$icon"/>
|
<x-icons.view_grid :icon="$icon"/>
|
||||||
<x-footer/>
|
<x-footer/>
|
||||||
|
|||||||
Reference in New Issue
Block a user