79 lines
3.8 KiB
PHP
79 lines
3.8 KiB
PHP
<x-app-layout>
|
|
<div class="container mx-auto px-4 py-12 md:py-24">
|
|
<section class="text-center mb-16">
|
|
<!-- Logo -->
|
|
<div class="flex justify-center mb-8">
|
|
<img
|
|
src="/images/cropped-HS-1-270x270.webp"
|
|
alt="hstream.moe Logo"
|
|
class="max-w-[150px] w-full h-auto rounded-lg"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
|
|
<!-- View Count Card -->
|
|
<div class="bg-sky-300/50 dark:bg-sky-950/50 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="flex justify-center mb-4">
|
|
<i class="fa-solid fa-eye text-4xl text-sky-600 dark:text-sky-400 p-3"></i>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
{{ number_format($viewCount) }}
|
|
</div>
|
|
<h5 class="text-lg font-medium text-gray-700 dark:text-neutral-300">
|
|
total views
|
|
</h5>
|
|
</div>
|
|
|
|
<!-- Episode Count Card -->
|
|
<div class="bg-sky-300/50 dark:bg-sky-950/50 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="flex justify-center mb-4">
|
|
<i class="fa-solid fa-video text-4xl text-sky-600 dark:text-sky-400 p-3"></i>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
{{ $episodeCount }}
|
|
</div>
|
|
<h5 class="text-lg font-medium text-gray-700 dark:text-neutral-300">
|
|
episodes on this site
|
|
</h5>
|
|
</div>
|
|
|
|
<!-- Hentai Count Card -->
|
|
<div class="bg-rose-300/50 dark:bg-rose-950/50 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="flex justify-center mb-4">
|
|
<i class="fa-solid fa-list text-4xl text-rose-600 dark:text-rose-400 p-3"></i>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
{{ $hentaiCount }}
|
|
</div>
|
|
<h5 class="text-lg font-medium text-gray-700 dark:text-neutral-300">
|
|
hentais on this site
|
|
</h5>
|
|
</div>
|
|
|
|
<!-- Watch Time Card -->
|
|
<div class="bg-rose-300/50 dark:bg-rose-950/50 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div class="flex justify-center mb-4">
|
|
<i class="fa-solid fa-clock text-4xl text-rose-600 dark:text-rose-400 p-3"></i>
|
|
</div>
|
|
<div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
|
|
{{ number_format($viewCount * 6) }}
|
|
</div>
|
|
<h5 class="text-lg font-medium text-gray-700 dark:text-neutral-300">
|
|
estimated minutes of watch time
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Container -->
|
|
<div class="mt-12 mx-auto max-w-4xl">
|
|
<div class="bg-gray-50 dark:bg-neutral-950 rounded-xl p-4 md:p-6 shadow-inner hidden sm:block">
|
|
<canvas id="monthlyChart" class="w-full h-64 md:h-80"></canvas>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
@vite(['resources/js/stats.js'])
|
|
</x-app-layout>
|