mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
Sort Tailwind classes
This commit is contained in:
@@ -1,22 +1,19 @@
|
||||
<section class="max-w-screen-xl mx-auto mt-12">
|
||||
<p class="sr-only">Heimerdinger Presents:</p>
|
||||
<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">
|
||||
CHAMPION DETAILS</h3>
|
||||
<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">
|
||||
{{$champion->name}}</h1>
|
||||
<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 md:text-lg font-bold text-center text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
{{$champion->title}}</h2>
|
||||
|
||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3">
|
||||
<div class="w-screen grid grid-cols-1 md-grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<div
|
||||
class="relative rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80 lg:col-span-2 ">
|
||||
class="relative rounded-2xl bg-stone-800/40 border border-neutral-300/5 shadow-sm shadow-stone-800/80 lg:col-span-2">
|
||||
<div class="aspect-w-16 aspect-h-9 glow-shadow absolute inset-0 rounded-2xl"
|
||||
style="--splash-color: {{$champion->splash_color}}"></div>
|
||||
<div class="aspect-w-16 aspect-h-9 overflow-hidden rounded-2xl relative">
|
||||
@@ -29,8 +26,7 @@
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="rounded-2xl border border-3 border-white/10
|
||||
lg:col-start-3 shadow-md transition-all duration-700"
|
||||
class="rounded-2xl border border-3 border-white/10 lg:col-start-3 shadow-md transition-all duration-700"
|
||||
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
|
||||
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-3.5 shadow-sm">
|
||||
@@ -60,7 +56,7 @@
|
||||
<span class="font-bold">Riot Points Cost:</span>
|
||||
<x-icon-RiotPoints class="inline-block w-4"/> {{$champion->price_rp}} RP
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Roles:</span> @foreach($champion->roles as $role)
|
||||
<span
|
||||
class="inline-block lowercase capitalize-first">{{$role}}
|
||||
@@ -69,32 +65,31 @@
|
||||
@endif</span>
|
||||
@endforeach
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Attack Type:</span> <span
|
||||
class="inline-block lowercase capitalize-first">{{$champion->attack_type}}</span>
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Damage Type:</span> {{$champion->adaptive_type}}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Resource Type:</span> {{$champion->resource_type}}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose" lang="en">
|
||||
<span class="font-bold">Champion ID:</span> <span
|
||||
class="font-mono font-medium">{{$champion->champion_id}}</span>
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Release Date:</span> {{$champion->release_date}}
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<li class="text-neutral-100 hyphens-auto leading-loose font-medium" lang="en">
|
||||
<span class="font-bold">Release Patch:</span> Patch {{$champion->release_patch}}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="rounded-2xl border border-3 border-white/10 shadow-md
|
||||
shadow-stone-800/80 hover:shadow-orange-500/20 transition-all duration-700"
|
||||
<div class="rounded-2xl border border-3 border-white/10 shadow-md shadow-stone-800/80 hover:shadow-orange-500/20 transition-all duration-700"
|
||||
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
@@ -106,8 +101,7 @@
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="rounded-2xl border border-3 border-white/10 shadow-md
|
||||
shadow-stone-800/80 lg:col-span-2 hover:shadow-orange-500/20 transition-all duration-700"
|
||||
class="rounded-2xl border border-3 border-white/10 shadow-md shadow-stone-800/80 lg:col-span-2 hover:shadow-orange-500/20 transition-all duration-700"
|
||||
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
|
||||
<div class="p-4">
|
||||
<h4 class="text-center text-xl font-semibold text-neutral-100 uppercase mt-2.5 shadow-sm">
|
||||
@@ -115,14 +109,13 @@
|
||||
<div id="skinsElement" class="overflow-x-scroll mt-2.5">
|
||||
<div class="grid grid-flow-col grid-rows-2 w-max gap-4 mb-2.5">
|
||||
@foreach($champion->skins as $key => $skin)
|
||||
<div class="group flex flex-col ">
|
||||
<div class="group flex flex-col">
|
||||
<a href="/skin/{{$skin->slug}}">
|
||||
<img
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=70&il"
|
||||
alt="{{$champion->name}} {{$skin->name}} Splash Art"
|
||||
@if($key < 6) loading="eager" @else loading="lazy" @endif
|
||||
class=" inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10
|
||||
hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
|
||||
class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10 hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
|
||||
</a>
|
||||
<div>
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container flex items-center justify-center p-4 mx-auto mt-3">
|
||||
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4 ">
|
||||
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
@foreach($champions as $key => $champion)
|
||||
<div
|
||||
@@ -53,7 +53,7 @@
|
||||
</p>
|
||||
@endforeach
|
||||
|
||||
<div class="flex items-end justify-end w-full justify-items-end ">
|
||||
<div class="flex items-end justify-end w-full justify-items-end">
|
||||
<p class="text-2xl text-right text-orange-300 md:text-lg hover:text-orange-400">
|
||||
<a href="/champion/{{$champion->slug}}"
|
||||
aria-label="[Detailed {{$champion->name}} info...]">
|
||||
|
||||
@@ -3,8 +3,7 @@
|
||||
|
||||
<section class="max-w-screen-xl mx-auto mt-12">
|
||||
<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">
|
||||
Summoner Emotes</h1>
|
||||
|
||||
<x-emotes.searchbar/>
|
||||
@@ -14,13 +13,12 @@
|
||||
|
||||
@foreach($emotes as $key => $emote)
|
||||
<div
|
||||
class="champ-card flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border
|
||||
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center">
|
||||
class="champ-card flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center">
|
||||
<div
|
||||
class="mx-4 overflow-hidden h-36 w-36 rounded-2xl bg-clip-border border-2 border-orange-400/40 mt-3">
|
||||
<img @if($key < 8) loading="eager" @else loading="lazy" @endif
|
||||
src="//wsrv.nl/?url={{ $emote->image }}&w=200&output=webp&q=50&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
|
||||
class="object-cover w-full h-full "
|
||||
class="object-cover w-full h-full"
|
||||
alt="{{ $emote->title }} Emote"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<div class="flex items-center justify-center mt-8 ">
|
||||
<div class="flex items-center justify-center mt-8">
|
||||
<form action="{{ route('assets.emotes.index') }}" method="GET" class="flex" id="searchForm">
|
||||
<div class="relative">
|
||||
<input type="text" name="filter[title]" placeholder="Search by emote name"
|
||||
value="{{ request('filter.title') }}"
|
||||
class="border border-transparent focus:border-transparent focus:ring-0 border-stone-700 rounded-l
|
||||
px-4 py-2 bg-stone-800 text-white ring-orange-500 pr-10">
|
||||
class="border border-transparent focus:border-transparent focus:ring-0 border-stone-700 rounded-l px-4 py-2 bg-stone-800 text-white ring-orange-500 pr-10">
|
||||
@if(request('filter.title'))
|
||||
<button type="button" onclick="clearSearchAndSubmit()"
|
||||
class="absolute inset-y-0 right-0 flex items-center px-3 bg-stone-800 text-white cursor-pointer">
|
||||
@@ -13,8 +12,7 @@
|
||||
@endif
|
||||
</div>
|
||||
<button type="submit"
|
||||
class="bg-orange-500 hover:bg-orange-600 text-white font-semibold px-4 py-2 rounded-r
|
||||
focus:outline-none ring-orange-500">
|
||||
class="bg-orange-500 hover:bg-orange-600 text-white font-semibold px-4 py-2 rounded-r focus:outline-none ring-orange-500">
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
href="https://www.riotgames.com/" rel="noopener" target="_blank">Riot Games</a>. <a
|
||||
href="https://www.riotgames.com/" rel="noopener" target="_blank">Riot Games</a> does not endorse or sponsor
|
||||
this project.</p>
|
||||
<ul class="flex flex-wrap items-center justify-center mb-6 text-neutral-300 ">
|
||||
<ul class="flex flex-wrap items-center justify-center mb-6 text-neutral-300">
|
||||
<li>
|
||||
<a href="/contact"
|
||||
class="mr-4 hover:underline md:mr-6 decoration-orange-500 decoration-1">Contact</a>
|
||||
@@ -42,7 +42,7 @@
|
||||
href="{{route('sitemap.index')}}" class="hover:underline">Sitemap</a></span>
|
||||
<span
|
||||
class="flex flex-row items-center justify-center text-sm text-gray-500 whitespace-pre sm:text-center dark:text-gray-400">© {{date('Y')}} <a
|
||||
href="/" class=" hover:underline">Heimerdinger.LoL</a> • Made with <a
|
||||
href="/" class="hover:underline">Heimerdinger.LoL</a> • Made with <a
|
||||
aria-label="Find out more about the creator of Heimerdinger.lol" href="https://rico.sh"><x-iconsax-bul-heart-circle
|
||||
class="relative self-center inline-block w-5 text-red-400"/></a></span>
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
href="/skins">
|
||||
<x-iconsax-bul-paintbucket class="h-10 text-orange-400" />
|
||||
|
||||
<h2 class="mt-4 text-xl font-bold text-white ">Skin Information</h2>
|
||||
<h2 class="mt-4 text-xl font-bold text-white">Skin Information</h2>
|
||||
|
||||
<p class="mt-1 text-sm text-stone-300">
|
||||
All the information you need about skins in League of Legends. Check out the
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<h2 class="mt-4 text-xl font-bold text-white"><a
|
||||
href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a>
|
||||
</h2>
|
||||
<h3 class=" text-stone-200">Released
|
||||
<h3 class="text-stone-200">Released
|
||||
{{ Carbon::parse($skin->release_date)->diffForHumans([
|
||||
'parts' => 2,
|
||||
'join' => true,
|
||||
@@ -41,10 +41,7 @@
|
||||
@foreach ($skin->associated_skinline as $skinline)
|
||||
<span class="sr-only">Associated Skinline:</span>
|
||||
<span
|
||||
class="my-2 bg-orange-100 text-orange-800 text-xs font-medium
|
||||
mr-2 px-2.5 py-0.5 rounded
|
||||
border border-orange-300
|
||||
">
|
||||
class="my-2 bg-orange-100 text-orange-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded border border-orange-300">
|
||||
{{ $skinline }}</span>
|
||||
@endforeach
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<h2 class="mt-4 text-xl font-bold text-white"><a
|
||||
href="{{ route('skins.show', $skin->slug) }}">{{ $skin->skin_name }}</a></h2>
|
||||
|
||||
<div class="my-1 ">
|
||||
<div class="my-1">
|
||||
<span class="sr-only">Associated Skinline:</span>
|
||||
@foreach ($skin->associated_skinline as $skinline)
|
||||
<span
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
<a href="/icon/{{ $icon->slug }}">
|
||||
<img @if ($key < 8) loading="eager" @else loading="lazy" @endif
|
||||
src="//wsrv.nl/?url={{ $icon->image }}&w=200&output=webp&q=50&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
|
||||
class="object-cover w-full h-full " alt="{{ $icon->title }} Icon" /></a>
|
||||
class="object-cover w-full h-full" alt="{{ $icon->title }} Icon" /></a>
|
||||
</div>
|
||||
|
||||
<div class="px-4 py-2">
|
||||
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-end justify-center px-4 mt-auto mb-2 text-2xl text-white md:text-lg">
|
||||
<p class="text-sm font-medium hover:text-orange-400 "><a href="/icon/{{ $icon->slug }}">More
|
||||
<p class="text-sm font-medium hover:text-orange-400"><a href="/icon/{{ $icon->slug }}">More
|
||||
details
|
||||
<x-iconsax-bul-arrow-circle-right class="inline-block w-6" />
|
||||
</a>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="flex items-center justify-center mt-8 ">
|
||||
<div class="flex items-center justify-center mt-8">
|
||||
<form action="{{ route('assets.icons.index') }}" method="GET" class="flex" id="searchForm">
|
||||
<div class="relative">
|
||||
<input type="text" name="filter[title]" placeholder="Search by icon title"
|
||||
|
||||
@@ -2,16 +2,13 @@
|
||||
<div class="my-auto mx-auto items-center justify-center align-middle">
|
||||
<p class="sr-only">Heimerdinger Presents:</p>
|
||||
<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>
|
||||
<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>
|
||||
<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 md:text-lg font-bold text-center text-transparent uppercase bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">
|
||||
Released in: {{$icon->release_year}}</h2>
|
||||
|
||||
<div class="container mx-auto p-4 flex items-center justify-center mt-3 my-auto">
|
||||
@@ -23,8 +20,7 @@
|
||||
<img
|
||||
src="//wsrv.nl/?url={{ $icon->image }}&w=400&output=webp&q=100&il"
|
||||
alt="{{$icon->title}} Icon"
|
||||
class="transition-transform duration-700 rounded-2xl bg-clip-border border-2 border-orange-400/40
|
||||
shadow-md 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"
|
||||
class="text-center text-neutral-100 text-sm font-medium px-4 py-2">
|
||||
View in HD
|
||||
@@ -36,7 +32,7 @@
|
||||
{{$icon->title}} Details
|
||||
</h4>
|
||||
<div class="flex flex-col justify-between h-max">
|
||||
<ul class="mx-5 flex-1 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>
|
||||
|
||||
@@ -6,9 +6,7 @@
|
||||
<span class="sr-only">Home</span>
|
||||
</a>
|
||||
<button data-collapse-toggle="navbar-default" type="button"
|
||||
class="inline-flex items-center justify-center w-10 h-10 p-2 text-sm rounded-lg text-stone-500
|
||||
md:hidden hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-200 dark:text-stone-400
|
||||
dark:hover:bg-stone-700 dark:focus:ring-stone-600"
|
||||
class="inline-flex items-center justify-center w-10 h-10 p-2 text-sm rounded-lg text-stone-500 md:hidden hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-200 dark:text-stone-400 dark:hover:bg-stone-700 dark:focus:ring-stone-600"
|
||||
aria-controls="navbar-default" aria-expanded="false">
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
@@ -19,9 +17,7 @@
|
||||
</button>
|
||||
<div id="navbar-default" class="hidden w-full md:block md:w-auto">
|
||||
<ul
|
||||
class="flex flex-col p-2 items-center
|
||||
md:flex-row md:space-x-6 md:mt-0 md:border-0 md:bg-white dark:bg-stone-800 md:dark:bg-stone-800
|
||||
dark:border-stone-700">
|
||||
class="flex flex-col p-2 items-center md:flex-row md:space-x-6 md:mt-0 md:border-0 md:bg-white dark:bg-stone-800 md:dark:bg-stone-800 dark:border-stone-700">
|
||||
<li>
|
||||
<a href="{{route('champions.index')}}"
|
||||
class="flex py-2 pl-3 pr-2 rounded hover:bg-stone-100 md:hover:bg-transparent
|
||||
|
||||
@@ -6,8 +6,7 @@
|
||||
@if($post->hidden)
|
||||
@continue
|
||||
@endif
|
||||
<article class="inline-block text-gray-200 bg-stone-800/40 shadow-md rounded-2xl border border-stone-800
|
||||
hover:border-orange-500/10 hover:shadow-orange-500/10 items-center h-80 relative">
|
||||
<article class="inline-block text-gray-200 bg-stone-800/40 shadow-md rounded-2xl border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center h-80 relative">
|
||||
<span
|
||||
class="absolute top-4 left-4 text-sm text-gray-100 font-medium bg-black/60 px-1 py-1 rounded-lg">
|
||||
<abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
|
||||
|
||||
@@ -5,14 +5,11 @@
|
||||
|
||||
<section class="max-w-screen-xl mx-auto mt-12">
|
||||
<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">
|
||||
Sale Rotation</h1>
|
||||
<h2 class="text-lg font-bold text-center text-transparent uppercase sm:text-xl
|
||||
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">All champions & skins on sale</h2>
|
||||
<h2 class="text-lg font-bold text-center text-transparent uppercase sm:text-xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">All champions & skins on sale</h2>
|
||||
|
||||
<h3 class="mt-8 mb-2 text-2xl font-bold text-center text-transparent uppercase sm:text-3xl
|
||||
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">Champions on Sale</h3>
|
||||
<h3 class="mt-8 mb-2 text-2xl font-bold text-center text-transparent uppercase sm:text-3xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text">Champions on Sale</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@foreach($sales['CHAMPION'] as $sale)
|
||||
@@ -24,14 +21,12 @@
|
||||
@endphp
|
||||
<a href="/champion/{{$champion->slug}}">
|
||||
<div
|
||||
class="flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border
|
||||
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center">
|
||||
class="flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center">
|
||||
<div class="absolute mt-4 rounded-full bg-black/60 px-3 py-1 text-white">
|
||||
{{ $discountPercentage }}% Off
|
||||
</div>
|
||||
<div
|
||||
class="mx-4 overflow-hidden w-auto rounded-2xl bg-clip-border border-2 border-orange-400/40 mt-3
|
||||
aspect-video">
|
||||
class="mx-4 overflow-hidden w-auto rounded-2xl bg-clip-border border-2 border-orange-400/40 mt-3 aspect-video">
|
||||
<img
|
||||
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute() }}&w=450&output=webp&q=80&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
|
||||
class="aspect-video"
|
||||
@@ -53,8 +48,7 @@
|
||||
</div>
|
||||
|
||||
|
||||
<h3 class="text-2xl font-bold text-center text-transparent uppercase sm:text-3xl
|
||||
bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text mt-8">Skins on Sale</h3>
|
||||
<h3 class="text-2xl font-bold text-center text-transparent uppercase sm:text-3xl bg-gradient-to-bl from-orange-300 to-orange-500 bg-clip-text mt-8">Skins on Sale</h3>
|
||||
<div class="container mx-auto p-4 flex items-center justify-center flex-col text-white">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@foreach($sales['CHAMPION_SKIN'] as $sale)
|
||||
@@ -66,14 +60,12 @@
|
||||
@endphp
|
||||
<a href="/skin/{{ $skin->slug }}">
|
||||
<div
|
||||
class="flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border
|
||||
border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center">
|
||||
class="flex flex-col text-gray-700 bg-stone-800/40 shadow-md rounded-2xl bg-clip-border border border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 items-center">
|
||||
<div class="absolute mt-4 rounded-full bg-black/60 px-3 py-1 text-white">
|
||||
{{ $discountPercentage }}% Off
|
||||
</div>
|
||||
<div
|
||||
class="mx-4 overflow-hidden w-auto rounded-2xl bg-clip-border border-2 border-orange-400/40 mt-3
|
||||
aspect-video">
|
||||
class="mx-4 overflow-hidden w-auto rounded-2xl bg-clip-border border-2 border-orange-400/40 mt-3 aspect-video">
|
||||
<img
|
||||
src="//wsrv.nl/?url={{ $skin->getSkinImageAttribute() }}&w=450&output=webp&q=80&il&default=ssl:wsrv.nl%2F%3Furl%3Dhttps://i.ibb.co/5s6YyvN/aaaa.png"
|
||||
class="aspect-video"
|
||||
|
||||
@@ -163,14 +163,13 @@
|
||||
</p>
|
||||
@endif
|
||||
@foreach($skin->chromas as $key => $chroma)
|
||||
<div class="flex flex-col group ">
|
||||
<div class="flex flex-col group">
|
||||
<a href="/skin/{{$skin->slug}}">
|
||||
<img
|
||||
src="//wsrv.nl/?url={{ $chroma->getChromaImageAttribute() }}&w=220&output=webp&q=70&il"
|
||||
alt="{{$chroma->chroma_name}} {{$chroma->skin_name}} ScreenShot"
|
||||
@if($key < 6) loading="eager" @else loading="lazy" @endif
|
||||
class=" inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10
|
||||
hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
|
||||
class="inline-block h-36 object-cover rounded-2xl shadow-md border border-3 border-white/10 hover:shadow-orange-500/20 transition-all duration-700 mr-2.5">
|
||||
</a>
|
||||
<div>
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</div>
|
||||
|
||||
<div class="container flex items-center justify-center p-4 mx-auto mt-3">
|
||||
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4 ">
|
||||
<div class="grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
@foreach ($skins as $key => $skin)
|
||||
<div
|
||||
@@ -23,10 +23,7 @@
|
||||
@foreach ($skin->associated_skinline as $skinline)
|
||||
<span class="sr-only">Associated Skinline:</span>
|
||||
<span
|
||||
class="m-2 bg-orange-100 text-orange-800 text-xs font-medium
|
||||
mr-2 px-2.5 py-0.5 rounded
|
||||
border border-orange-300
|
||||
">
|
||||
class="m-2 bg-orange-100 text-orange-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded border border-orange-300">
|
||||
{{ $skinline }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
@@ -53,7 +50,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex items-end justify-center px-4 mt-auto mb-2 text-2xl text-white md:text-lg">
|
||||
<p class="text-sm font-medium hover:text-orange-400 "><a href="/skin/{{ $skin->slug }}">More
|
||||
<p class="text-sm font-medium hover:text-orange-400"><a href="/skin/{{ $skin->slug }}">More
|
||||
details
|
||||
<x-iconsax-bul-arrow-circle-right class="inline-block w-6" />
|
||||
</a>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="flex items-center justify-center mt-8 ">
|
||||
<div class="flex items-center justify-center mt-8">
|
||||
<form action="{{ route('skins.index') }}" method="GET" class="flex" id="searchForm">
|
||||
<div class="relative">
|
||||
<input type="text" name="filter[name]" placeholder="Search by skin name"
|
||||
|
||||
Reference in New Issue
Block a user