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

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

@@ -1,47 +1,78 @@
<x-app-layout>
<div class="container my-24 mx-auto md:px-6 z-10 relative">
<section class="mb-32 text-center">
<div class="flex justify-center pb-10">
<img src="/images/cropped-HS-1-270x270.webp" class="max-w-[150px]" alt="hstream.moe Logo" />
<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>
<div class="grid md:grid-cols-2 lg:grid-cols-4 lg:gap-x-12">
<div class="mb-12 md:mb-0">
<div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
<i class="fa-solid fa-eye text-3xl"> {{ number_format($viewCount) }}</i>
<!-- 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>
<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
</h5>
</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">
<i class="fa-solid fa-video text-3xl"> {{ $episodeCount }}</i>
<!-- 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>
<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
</h5>
</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">
<i class="fa-solid fa-list text-3xl"> {{ $hentaiCount }}</i>
<!-- 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>
<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
</h5>
</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">
<i class="fa-solid fa-clock text-3xl"> {{ number_format($viewCount * 6) }}</i>
<!-- 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>
<h5 class="text-lg font-medium dark:text-neutral-300">
estimated minutes of watch time
<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>
<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>
</section>
</div>
@vite(['resources/js/stats.js'])
</x-app-layout>