w33b/hstream
1
0
Fork 1
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Update stats design

Browse Source
This commit is contained in:
w33b
2026-05-22 19:41:07 +02:00
parent 09c08f3fea
commit 38e3346dc3
1 changed files with 55 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
resources/views/home/stats.blade.php
View File

@@ -1,47 +1,78 @@
<x-app-layout> <x-app-layout>
<div class="container my-24 mx-auto md:px-6 z-10 relative"> <div class="container mx-auto px-4 py-12 md:py-24">
<section class="mb-32 text-center"> <section class="text-center mb-16">
<div class="flex justify-center pb-10"> <!-- Logo -->
<img src="/images/cropped-HS-1-270x270.webp" class="max-w-[150px]" alt="hstream.moe 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> </div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 lg:gap-x-12">
<div class="mb-12 md:mb-0"> <!-- Stats Grid -->
<div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
<i class="fa-solid fa-eye text-3xl"> {{ number_format($viewCount) }}</i> <!-- 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>
<h5 class="text-lg font-medium dark:text-neutral-300"> <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 total views
</h5> </h5>
</div> </div>
<div class="mb-12 md:mb-0">
<div class="b-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500"> <!-- Episode Count Card -->
<i class="fa-solid fa-video text-3xl"> {{ $episodeCount }}</i> <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>
<h5 class="text-lg font-medium dark:text-neutral-300"> <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 episodes on this site
</h5> </h5>
</div> </div>
<div class="mb-12 md:mb-0">
<div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600"> <!-- Hentai Count Card -->
<i class="fa-solid fa-list text-3xl"> {{ $hentaiCount }}</i> <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>
<h5 class="text-lg font-medium dark:text-neutral-300"> <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 hentais on this site
</h5> </h5>
</div> </div>
<div class="mb-12 md:mb-0">
<div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600"> <!-- Watch Time Card -->
<i class="fa-solid fa-clock text-3xl"> {{ number_format($viewCount * 6) }}</i> <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>
<h5 class="text-lg font-medium dark:text-neutral-300"> <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 estimated minutes of watch time
</h5> </h5>
</div> </div>
</div> </div>
<div class="flex justify-center dark:bg-neutral-950 bg-gray-50 rounded-xl md:m-11 hidden md:block">
<canvas id="monthlyChart"></canvas> <!-- 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> </div>
</section> </section>
</div> </div>
@vite(['resources/js/stats.js']) @vite(['resources/js/stats.js'])
</x-app-layout> </x-app-layout>