51 lines
1.9 KiB
PHP
51 lines
1.9 KiB
PHP
<div class="mx-auto space-y-6 z-10 absolute">
|
|
<div class="flex !m-0 justify-center pt-[5vh] md:pt-[15vh] w-[99vw]">
|
|
<img src="/images/cropped-HS-1-270x270.webp" loading="lazy" height="133px" width="133px">
|
|
</div>
|
|
<div class="flex !m-0 justify-center h-[4vh] md:h-[7vh] w-[99vw]">
|
|
<h1 class="font-bold text-2xl md:text-4xl whitespace-nowrap dark:text-white">hstream.moe</h1>
|
|
</div>
|
|
<div class="flex !m-0 justify-center h-[4vh] md:h-[7vh] w-[99vw]">
|
|
<h2 class="text-1xl md:text-3xl font-extralight dark:text-white">{{ __('home.branding') }}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto space-y-6 h-[30vh] sm:h-[40vh] md:h-[60vh] z-10 overflow-hidden">
|
|
|
|
<div class="!m-0">
|
|
@php
|
|
$array = \cache()->remember('background', 300, function () {
|
|
$bg = new \App\Models\SiteBackground();
|
|
return $bg->getImages();
|
|
});
|
|
@endphp
|
|
|
|
@if ($array->isNotEmpty())
|
|
@php
|
|
$imageId = $array->random();
|
|
@endphp
|
|
<img
|
|
class="fade-img sm:relative md:absolute top-0 w-screen"
|
|
src="/images/background/{{ $imageId }}-1080p.webp"
|
|
srcset="/images/background/{{ $imageId }}-640p.webp 640w,
|
|
/images/background/{{ $imageId }}-720p.webp 720w,
|
|
/images/background/{{ $imageId }}-1080p.webp 1080w,
|
|
/images/background/{{ $imageId }}-1440p.webp 1440w"
|
|
sizes="(max-width: 640px) 640px,
|
|
(max-width: 1080px) 720px,
|
|
(max-width: 1440px) 1080px,
|
|
1440px"
|
|
loading="lazy"
|
|
height="640px"
|
|
>
|
|
@else
|
|
<img
|
|
class="fade-img sm:relative md:absolute top-0 w-screen"
|
|
src="/images/hs_branding_1.webp"
|
|
loading="lazy"
|
|
>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|