Update stats page design
This commit is contained in:
@@ -1,78 +1,365 @@
|
||||
<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">
|
||||
<div class="container mx-auto px-4 py-8 md:py-16 max-w-7xl">
|
||||
{{-- Header Section --}}
|
||||
<section class="text-center mb-10 md:mb-14">
|
||||
<div class="flex justify-center mb-6">
|
||||
<img
|
||||
src="/images/cropped-HS-1-270x270.webp"
|
||||
alt="hstream.moe Logo"
|
||||
class="max-w-[150px] w-full h-auto rounded-lg"
|
||||
class="max-w-[120px] w-full h-auto rounded-xl shadow-lg hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
</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>
|
||||
<h1 class="text-3xl md:text-4xl font-extrabold text-gray-900 dark:text-white mb-2 tracking-tight">
|
||||
Site Statistics
|
||||
</h1>
|
||||
<p class="text-gray-500 dark:text-neutral-400 text-sm md:text-base max-w-lg mx-auto">
|
||||
A comprehensive overview of hstream.moe's content and community activity
|
||||
</p>
|
||||
<div class="mt-5 flex justify-center">
|
||||
<div class="inline-flex items-center gap-2 px-4 py-1.5 bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-full text-xs font-semibold">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
|
||||
</span>
|
||||
Live data · Updated hourly
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Primary Stats Grid --}}
|
||||
<section class="mb-8">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5">
|
||||
{{-- Total Views --}}
|
||||
<div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
|
||||
<div class="absolute top-0 right-0 w-24 h-24 bg-sky-400/10 dark:bg-sky-500/10 rounded-bl-[80px] -mr-4 -mt-4"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-sky-100 dark:bg-sky-900/50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-eye text-sky-600 dark:text-sky-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $viewCount }}">
|
||||
{{ number_format($viewCount) }}
|
||||
</div>
|
||||
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Total Views</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Total Episodes --}}
|
||||
<div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
|
||||
<div class="absolute top-0 right-0 w-24 h-24 bg-violet-400/10 dark:bg-violet-500/10 rounded-bl-[80px] -mr-4 -mt-4"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-violet-100 dark:bg-violet-900/50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-video text-violet-600 dark:text-violet-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $episodeCount }}">
|
||||
{{ number_format($episodeCount) }}
|
||||
</div>
|
||||
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Episodes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Total Series --}}
|
||||
<div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
|
||||
<div class="absolute top-0 right-0 w-24 h-24 bg-rose-400/10 dark:bg-rose-500/10 rounded-bl-[80px] -mr-4 -mt-4"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-rose-100 dark:bg-rose-900/50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-list text-rose-600 dark:text-rose-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $hentaiCount }}">
|
||||
{{ number_format($hentaiCount) }}
|
||||
</div>
|
||||
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Series</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Total Users --}}
|
||||
<div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
|
||||
<div class="absolute top-0 right-0 w-24 h-24 bg-emerald-400/10 dark:bg-emerald-500/10 rounded-bl-[80px] -mr-4 -mt-4"></div>
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-emerald-100 dark:bg-emerald-900/50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-users text-emerald-600 dark:text-emerald-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $userCount }}">
|
||||
{{ number_format($userCount) }}
|
||||
</div>
|
||||
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Registered Users</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Secondary Stats Grid --}}
|
||||
<section class="mb-8">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5">
|
||||
{{-- Total Likes --}}
|
||||
<div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-red-100 dark:bg-red-900/50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-heart text-red-500 dark:text-red-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $likeCount }}">
|
||||
{{ number_format($likeCount) }}
|
||||
</div>
|
||||
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Total Likes</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Total Comments --}}
|
||||
<div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-comments text-amber-600 dark:text-amber-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $commentCount }}">
|
||||
{{ number_format($commentCount) }}
|
||||
</div>
|
||||
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Comments</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Total Downloads --}}
|
||||
<div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-download text-blue-600 dark:text-blue-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $downloadCount }}">
|
||||
{{ number_format($downloadCount) }}
|
||||
</div>
|
||||
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Avg Views Per Episode --}}
|
||||
<div class="relative overflow-hidden bg-white dark:bg-neutral-900 rounded-2xl p-4 md:p-6 shadow-sm border border-gray-100 dark:border-neutral-800 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
|
||||
<div class="relative z-10">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-orange-100 dark:bg-orange-900/50 flex items-center justify-center">
|
||||
<i class="fa-solid fa-chart-simple text-orange-600 dark:text-orange-400 text-sm"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $avgViewsPerEpisode }}">
|
||||
{{ number_format($avgViewsPerEpisode) }}
|
||||
</div>
|
||||
<p class="text-xs md:text-sm text-gray-500 dark:text-neutral-400 font-medium">Avg Views / Episode</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Tertiary Stats Row: Today, This Week, New Episodes, 4K Content --}}
|
||||
<section class="mb-10">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-5">
|
||||
{{-- Today's Views --}}
|
||||
<div class="relative overflow-hidden bg-gradient-to-br from-sky-50 to-sky-100/50 dark:from-sky-950/40 dark:to-sky-900/20 rounded-2xl p-4 md:p-6 shadow-sm border border-sky-200/50 dark:border-sky-800/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
|
||||
<div class="relative z-10">
|
||||
<p class="text-xs text-sky-600 dark:text-sky-400 font-semibold uppercase tracking-wider mb-2">Today</p>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $todayViews }}">
|
||||
{{ number_format($todayViews) }}
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-neutral-400 font-medium">views so far</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- This Week's Views with Trend --}}
|
||||
<div class="relative overflow-hidden bg-gradient-to-br from-violet-50 to-violet-100/50 dark:from-violet-950/40 dark:to-violet-900/20 rounded-2xl p-4 md:p-6 shadow-sm border border-violet-200/50 dark:border-violet-800/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
|
||||
<div class="relative z-10">
|
||||
<p class="text-xs text-violet-600 dark:text-violet-400 font-semibold uppercase tracking-wider mb-2">Views This Week</p>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $weeklyViews }}">
|
||||
{{ number_format($weeklyViews) }}
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
@php
|
||||
$trend = $prevWeeklyViews > 0 ? round((($weeklyViews - $prevWeeklyViews) / $prevWeeklyViews) * 100) : 0;
|
||||
@endphp
|
||||
@if($trend > 0)
|
||||
<i class="fa-solid fa-arrow-trend-up text-green-500 text-xs"></i>
|
||||
<span class="text-xs text-green-600 dark:text-green-400 font-semibold">{{ $trend }}% vs last week</span>
|
||||
@elseif($trend < 0)
|
||||
<i class="fa-solid fa-arrow-trend-down text-red-500 text-xs"></i>
|
||||
<span class="text-xs text-red-600 dark:text-red-400 font-semibold">{{ abs($trend) }}% vs last week</span>
|
||||
@else
|
||||
<span class="text-xs text-gray-500 dark:text-neutral-400 font-medium">same as last week</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- New Episodes This Week --}}
|
||||
<div class="relative overflow-hidden bg-gradient-to-br from-emerald-50 to-emerald-100/50 dark:from-emerald-950/40 dark:to-emerald-900/20 rounded-2xl p-4 md:p-6 shadow-sm border border-emerald-200/50 dark:border-emerald-800/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
|
||||
<div class="relative z-10">
|
||||
<p class="text-xs text-emerald-600 dark:text-emerald-400 font-semibold uppercase tracking-wider mb-2">New This Week</p>
|
||||
<div class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1 stat-counter" data-target="{{ $newEpisodesThisWeek }}">
|
||||
{{ number_format($newEpisodesThisWeek) }}
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-neutral-400 font-medium">episodes added</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 4K / 48fps Content --}}
|
||||
<div class="relative overflow-hidden bg-gradient-to-br from-rose-50 to-rose-100/50 dark:from-rose-950/40 dark:to-rose-900/20 rounded-2xl p-4 md:p-6 shadow-sm border border-rose-200/50 dark:border-rose-800/50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-300">
|
||||
<div class="relative z-10">
|
||||
<p class="text-xs text-rose-600 dark:text-rose-400 font-semibold uppercase tracking-wider mb-2">High Quality</p>
|
||||
<div class="flex items-baseline gap-2 mb-1">
|
||||
<span class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white stat-counter" data-target="{{ $episodes4k }}">{{ number_format($episodes4k) }}</span>
|
||||
<span class="text-sm text-gray-500 dark:text-neutral-400">4K</span>
|
||||
<span class="text-gray-300 dark:text-neutral-700">/</span>
|
||||
<span class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white stat-counter" data-target="{{ $episodesUHD48 }}">{{ number_format($episodesUHD48) }}</span>
|
||||
<span class="text-sm text-gray-500 dark:text-neutral-400">48fps</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 dark:text-neutral-400 font-medium">4K & 48fps content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Views Chart Section --}}
|
||||
<section class="mb-10">
|
||||
<div class="bg-white dark:bg-neutral-900 rounded-2xl shadow-sm border border-gray-100 dark:border-neutral-800 p-4 md:p-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-gray-900 dark:text-white">Views Over Time</h2>
|
||||
<p class="text-xs text-gray-500 dark:text-neutral-400">Daily views for the past 28 days</p>
|
||||
</div>
|
||||
<div class="hidden sm:flex items-center gap-3 text-xs text-gray-500 dark:text-neutral-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span> Views
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Chart wrapper with skeleton loader --}}
|
||||
<div class="relative min-h-[300px] md:min-h-[350px]">
|
||||
{{-- Skeleton Loader --}}
|
||||
<div id="chart-skeleton" class="absolute inset-0 flex flex-col justify-end px-1 pb-6 z-10">
|
||||
<div class="flex items-end justify-between gap-1 md:gap-2 h-full">
|
||||
@for ($i = 0; $i < 28; $i++)
|
||||
@php
|
||||
$heights = [55, 40, 65, 35, 60, 45, 70, 50, 75, 38, 58, 42, 80, 48, 68, 33, 62, 44, 72, 52, 55, 40, 65, 58, 78, 46, 63, 50];
|
||||
$h = $heights[$i % count($heights)];
|
||||
@endphp
|
||||
<div class="flex-1 flex flex-col items-center justify-end gap-1">
|
||||
<div class="w-full rounded-md bg-gray-200 dark:bg-neutral-800 animate-pulse" style="height: {{ $h }}%; min-height: 8px;"></div>
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
{{-- Shimmer overlay --}}
|
||||
<div class="absolute inset-0 shimmer-overlay rounded-lg"></div>
|
||||
</div>
|
||||
|
||||
{{-- Actual Chart Canvas --}}
|
||||
<canvas id="monthlyChart" class="w-full h-[300px] md:h-[350px] relative z-0 opacity-0 transition-opacity duration-500"></canvas>
|
||||
|
||||
{{-- Error State --}}
|
||||
<div id="chart-error" class="absolute inset-0 hidden flex-col items-center justify-center bg-white/90 dark:bg-neutral-900/90 rounded-lg z-20">
|
||||
<div class="w-14 h-14 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center mb-3">
|
||||
<i class="fa-solid fa-triangle-exclamation text-red-500 text-xl"></i>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-neutral-300 font-medium">Unable to load chart data</p>
|
||||
<button onclick="retryChart()" class="mt-3 px-4 py-2 text-xs font-semibold text-white bg-rose-600 hover:bg-rose-700 rounded-lg transition-colors">
|
||||
<i class="fa-solid fa-rotate mr-1"></i> Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Mobile legend --}}
|
||||
<div class="flex sm:hidden items-center justify-center gap-3 mt-3 text-xs text-gray-500 dark:text-neutral-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span> Views
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{-- Bottom Section: Top Tags --}}
|
||||
@if($topTags->isNotEmpty())
|
||||
<section class="mb-8">
|
||||
<div class="bg-white dark:bg-neutral-900 rounded-2xl shadow-sm border border-gray-100 dark:border-neutral-800 p-4 md:p-6">
|
||||
<h2 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Most Popular Tags</h2>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
@foreach($topTags as $tag)
|
||||
<span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-semibold
|
||||
bg-gray-100 dark:bg-neutral-800 text-gray-700 dark:text-neutral-300
|
||||
hover:bg-rose-100 dark:hover:bg-rose-900/40 hover:text-rose-700 dark:hover:text-rose-400
|
||||
transition-colors duration-200 cursor-default">
|
||||
#{{ $tag->name }}
|
||||
<span class="text-[10px] text-gray-400 dark:text-neutral-500">{{ number_format($tag->count) }}</span>
|
||||
</span>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
{{-- Footer Note --}}
|
||||
<div class="text-center text-xs text-gray-400 dark:text-neutral-600">
|
||||
Statistics are cached and update periodically. Data shown may not reflect real-time changes.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Animated Counter Script --}}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const animateCounters = () => {
|
||||
document.querySelectorAll('.stat-counter').forEach(counter => {
|
||||
const target = parseInt(counter.dataset.target, 10);
|
||||
if (isNaN(target)) return;
|
||||
|
||||
const duration = 1500;
|
||||
const start = performance.now();
|
||||
const startVal = 0;
|
||||
|
||||
const step = (currentTime) => {
|
||||
const elapsed = currentTime - start;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
// Ease out cubic
|
||||
const eased = 1 - Math.pow(1 - progress, 3);
|
||||
const current = Math.round(startVal + (target - startVal) * eased);
|
||||
|
||||
const formatted = new Intl.NumberFormat().format(current);
|
||||
counter.textContent = formatted;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(step);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(step);
|
||||
});
|
||||
};
|
||||
|
||||
// Use IntersectionObserver to trigger counters when visible
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
animateCounters();
|
||||
observer.disconnect();
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.3 });
|
||||
|
||||
const firstCounter = document.querySelector('.stat-counter');
|
||||
if (firstCounter) {
|
||||
observer.observe(firstCounter);
|
||||
} else {
|
||||
// Fallback
|
||||
animateCounters();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@vite(['resources/js/stats.js'])
|
||||
</x-app-layout>
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user