Archive/HeimerdingerLoL
1
0
Fork 0
mirror of https://github.com/rico-vz/HeimerdingerLoL.git synced 2025-12-06 10:10:48 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: champ info start

Browse Source
This commit is contained in:
Rico van Zelst
2023-11-08 10:39:52 +01:00
parent cabb5414ae
commit 38247c71d9
6 changed files with 139 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
resources/views/champions/show.blade.php Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="manifest" href="/icons/site.webmanifest">
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#e6855e">
<link rel="shortcut icon" href="/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#ff7c47">
<meta name="msapplication-config" content="/icons/browserconfig.xml">
<meta name="theme-color" content="#ff7c47">
<title>{{$champion->name}} • Heimerdinger.LoL</title>
<meta name="description"
content="Heimerdinger.LoL: {{$champion->name}} details showing all the information you need to know about {{$champion->name}}, {{$champion->title}}. {{substr($champion->lore, 0, 50)}}...">
<!-- OpenGraph -->
<meta property="og:site_name" content="Heimerdinger.LoL">
<meta property="og:title" content="{{$champion->name}} • Heimerdinger.LoL">
<meta property="og:description" content="Heimerdinger.LoL: {{$champion->name}} details showing all the information you need to know about {{$champion->name}}, {{$champion->title}}. {{substr($champion->lore, 0, 50)}}...">
<meta property="og:locale" content="en">
<meta property="og:type" content="website">
<meta property="og:image" content="{{asset('img/og_image.png')}}">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="heimerdinger.lol">
<meta property="twitter:title" content="{{$champion->name}} • Heimerdinger.LoL">
<meta property="twitter:description" content="Heimerdinger.LoL: {{$champion->name}} details showing all the information you need to know about {{$champion->name}}, {{$champion->title}}. {{substr($champion->lore, 0, 50)}}...">
<meta property="twitter:image" content="{{asset('img/og_image.png')}}">
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
@vite('resources/css/app.css')
@vite('resources/js/app.js')
</head>
<body class="antialiased bg-stone-900 dark">
<x-navbar/>
<x-champions.grid_info :champion="$champion"/>
</body>
</html>

43
resources/views/components/champions/grid_info.blade.php Normal file
View File

@@ -0,0 +1,43 @@
<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">
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">
{{$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">
{{$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">
<img
src="//wsrv.nl/?url={{ $champion->getChampionImageAttribute(false) }}&w=880&output=webp&q=85"
alt="{{$champion->name}} Splash Art"
class="w-full h-full object-cover transform scale-100 transition-transform duration-700 hover:scale-105 z-10"
>
</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
</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>
</div>
</div>
</section>