mirror of
https://github.com/rico-vz/HeimerdingerLoL.git
synced 2025-12-06 18:20:48 +01:00
feat: champ information, style improvement
This commit is contained in:
Rico van Zelst
@@ -7,23 +7,32 @@
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(90deg, rgba(239, 148, 61, 0.7), rgba(245, 101, 35, 0.7));
|
||||
background: var(--splash-color);
|
||||
opacity: 0;
|
||||
filter: blur(5px);
|
||||
filter: blur(8px);
|
||||
animation: glow 4s infinite;
|
||||
--tw-scale-x: 1.02;
|
||||
--tw-scale-y: 1.02;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.shadow-md-splash {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--splash-color), 0 2px 4px -2px var(--splash-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
opacity: 0.8;
|
||||
filter: blur(8px);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.2;
|
||||
filter: blur(13px);
|
||||
opacity: 0.45;
|
||||
filter: blur(11px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0.5;
|
||||
opacity: 0.8;
|
||||
filter: blur(8px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,10 +14,12 @@
|
||||
{{$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 grid-rows-5 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 lg:row-span-2">
|
||||
<div class="glow-shadow absolute inset-0 rounded-2xl"></div>
|
||||
<div class="overflow-hidden rounded-2xl relative">
|
||||
<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 ">
|
||||
<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">
|
||||
<img
|
||||
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(false) }}&w=880&output=webp&q=85"
|
||||
alt="{{$champion->name}} Splash Art"
|
||||
@@ -26,18 +28,89 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="rounded-2xl bg-stone-800/40 border border-stone-800 shadow-sm
|
||||
shadow-stone-800/80 lg:row-span-2 lg:col-start-3 hover:shadow-orange-500/20">
|
||||
5</div>
|
||||
<div class="rounded-2xl bg-stone-800/40 border border-stone-800 shadow-sm
|
||||
shadow-stone-800/80 lg:row-start-3 hover:shadow-orange-500/20">8
|
||||
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">
|
||||
{{$champion->name}} Information</h4>
|
||||
|
||||
<ul class="ml-7">
|
||||
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose mt-8" lang="en">
|
||||
<span class="font-bold">Full Title:</span> {{$champion->name}}, {{$champion->title}}.
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose" lang="en">
|
||||
<span class="font-bold">Popular Positions:</span> @foreach($champion->lanes->roles as $lane)
|
||||
<span
|
||||
class="inline-block lowercase capitalize-first">{{$lane}} @svg(getRoleIconSvg($lane), 'w-5 h-5 inline-block')
|
||||
@if(!$loop->last)
|
||||
-
|
||||
@endif</span>
|
||||
@endforeach
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-base font-medium leading-loose items-center"
|
||||
lang="en">
|
||||
<span class="font-bold">Blue Essence Cost:</span>
|
||||
<x-icon-lcu-be-svg class="inline-block w-4"/> {{$champion->price_be}} BE
|
||||
</li>
|
||||
<li class="text-neutral-100 hyphens-auto text-medium font-medium leading-loose items-center"
|
||||
lang="en">
|
||||
<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">
|
||||
<span class="font-bold">Roles:</span> @foreach($champion->roles as $role)
|
||||
<span
|
||||
class="inline-block lowercase capitalize-first">{{$role}}
|
||||
@if(!$loop->last)
|
||||
-
|
||||
@endif</span>
|
||||
@endforeach
|
||||
</li>
|
||||
<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">
|
||||
<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">
|
||||
<span class="font-bold">Release Date:</span> {{$champion->release_date}}
|
||||
</li>
|
||||
<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"
|
||||
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">
|
||||
{{$champion->name}} Lore</h4>
|
||||
<p class="text-neutral-100 hyphens-auto text-base mt-2.5 leading-loose" lang="en">
|
||||
{{$champion->lore}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div
|
||||
class="rounded-2xl bg-stone-800/40 border border-stone-800 shadow-sm
|
||||
shadow-stone-800/80 lg:col-span-2 lg:row-start-3 hover:shadow-orange-500/20">
|
||||
9</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"
|
||||
style="--tw-shadow-color:{{$champion->splash_color}}; --tw-shadow: var(--tw-shadow-colored); background-color: {{$champion->splash_color}};">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user