49 lines
2.3 KiB
PHP
49 lines
2.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Koleksi Buku Interaktif</title>
|
|
<link rel="icon" href="{{ asset('images/pustaka.jpeg') }}" type="image/png">
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="bg-green-50 min-h-screen">
|
|
|
|
<div class="max-w-7xl mx-auto py-10 px-6">
|
|
|
|
<h1 class="text-5xl font-extrabold text-green-700 mb-6 text-center drop-shadow-lg animate-bounce">
|
|
Koleksi Buku Kami
|
|
</h1>
|
|
|
|
<div class="text-center mb-6">
|
|
<span class="text-xl text-green-800 font-semibold animate-pulse">
|
|
Total Buku: {{ $koleksi->count() }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="h-[80vh] overflow-y-auto pr-4">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
@forelse ($koleksi as $buku)
|
|
<div class="bg-white shadow-2xl rounded-3xl overflow-hidden transform transition duration-500 hover:scale-105 hover:-translate-y-2 hover:shadow-2xl cursor-pointer"
|
|
onclick="openModal({{ $buku->id }})">
|
|
@if($buku->cover)
|
|
<img src="{{ asset('storage/' . $buku->cover) }}" alt="{{ $buku->judul }}" class="w-full h-64 object-cover">
|
|
@else
|
|
<div class="w-full h-64 bg-green-100 flex items-center justify-center text-green-400 font-bold text-xl">
|
|
No Cover
|
|
</div>
|
|
@endif
|
|
<div class="p-4">
|
|
<h3 class="text-xl font-semibold mb-1 text-green-700">{{ $buku->judul }}</h3>
|
|
<p class="text-gray-700 mb-1"><span class="font-medium">Penulis:</span> {{ $buku->penulis }}</p>
|
|
<p class="text-gray-700 mb-1"><span class="font-medium">Kategori:</span> {{ $buku->kategori ?? '-' }}</p>
|
|
<p class="text-gray-700 mb-2"><span class="font-medium">Tahun:</span> {{ $buku->tahun_terbit ?? '-' }}</p>
|
|
<p class="text-gray-600 text-sm">{{ \Illuminate\Support\Str::limit($buku->deskripsi ?? '-', 100) }}</p>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-span-full text-center text-gray-500 italic py-10">
|
|
Belum a
|
|
|