331 lines
12 KiB
PHP
331 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Berita & Pengumuman - Desa Pelem</title>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #198754;
|
|
--secondary-color: #6c757d;
|
|
--accent-color: #0d6efd;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background-color: #f8f9fa;
|
|
padding-top: 0;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #157347;
|
|
border-color: #157347;
|
|
}
|
|
|
|
/* === PERUBAHAN 1: Aturan umum untuk semua tombol .btn-outline-primary === */
|
|
.btn-outline-primary {
|
|
color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
/* Pastikan teks menjadi putih saat di-hover */
|
|
}
|
|
|
|
.section-title {
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.section-title h2 {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #2c3e50;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.section-title p {
|
|
font-size: 1.1rem;
|
|
color: var(--secondary-color);
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.news-card {
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
border: none;
|
|
}
|
|
|
|
.news-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.category-filter {
|
|
transition: all 0.2s ease-in-out;
|
|
border-radius: 20px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.category-filter:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.category-filter.btn-primary {
|
|
background: linear-gradient(45deg, var(--primary-color), #157347);
|
|
border: none;
|
|
}
|
|
|
|
/* Aturan hover spesifik untuk tombol kategori agar menggunakan gradien */
|
|
.category-filter.btn-outline-primary:hover {
|
|
background: linear-gradient(45deg, var(--primary-color), #157347);
|
|
border-color: var(--primary-color);
|
|
color: white;
|
|
/* === PERUBAHAN 2: Menambahkan warna teks putih saat hover === */
|
|
}
|
|
|
|
.card-img-top {
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
|
|
.news-card:hover .card-img-top {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.badge {
|
|
font-size: 0.75rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.bg-primary {
|
|
background-color: var(--primary-color) !important;
|
|
}
|
|
|
|
/* Improved Pagination Styles */
|
|
.pagination-container {
|
|
background: white;
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.pagination {
|
|
margin: 0;
|
|
justify-content: center;
|
|
}
|
|
|
|
.pagination .page-link {
|
|
border-radius: 8px;
|
|
margin: 0 3px;
|
|
color: var(--primary-color);
|
|
border: 1px solid #e9ecef;
|
|
padding: 0.5rem 0.75rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.pagination .page-link:hover {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.pagination .page-item.active .page-link {
|
|
background: linear-gradient(45deg, var(--primary-color), #157347);
|
|
border-color: var(--primary-color);
|
|
color: white;
|
|
box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
|
|
}
|
|
|
|
.pagination .page-item.disabled .page-link {
|
|
color: #6c757d;
|
|
background-color: #f8f9fa;
|
|
border-color: #e9ecef;
|
|
}
|
|
|
|
.pagination-info {
|
|
text-align: center;
|
|
color: var(--secondary-color);
|
|
font-size: 0.9rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.breadcrumb-item a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb-item a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.back-btn {
|
|
background: linear-gradient(45deg, var(--primary-color), #157347);
|
|
border: none;
|
|
border-radius: 25px;
|
|
padding: 0.5rem 1.5rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
background: linear-gradient(45deg, #157347, #146c43);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 768px) {
|
|
.section-title h2 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.pagination .page-link {
|
|
padding: 0.4rem 0.6rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.category-filter {
|
|
font-size: 0.9rem;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<main>
|
|
<div class="container">
|
|
<nav aria-label="breadcrumb" class="mb-4 pt-3">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="{{ route('home') }}">
|
|
<i class="bi bi-house me-1"></i>Beranda
|
|
</a>
|
|
</li>
|
|
<li class="breadcrumb-item active" aria-current="page">Berita & Pengumuman</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="section-title" data-aos="fade-up">
|
|
<h2>Berita & Pengumuman</h2>
|
|
<p>Informasi terbaru seputar kegiatan dan pengumuman Desa Pelem</p>
|
|
</div>
|
|
|
|
<div class="row mb-4" data-aos="fade-up" data-aos-delay="100">
|
|
<div class="col-12">
|
|
<div class="d-flex flex-wrap justify-content-center gap-2">
|
|
<a href="{{ route('news.index') }}"
|
|
class="btn {{ $category === 'all' ? 'btn-primary' : 'btn-outline-primary' }} btn-sm px-3 py-2 category-filter">
|
|
<i class="bi bi-grid me-1"></i>Semua Kategori
|
|
</a>
|
|
@foreach ($categories as $cat)
|
|
<a href="{{ route('news.index', ['category' => $cat]) }}"
|
|
class="btn {{ $category === $cat ? 'btn-primary' : 'btn-outline-primary' }} btn-sm px-3 py-2 category-filter">
|
|
{{ $cat }}
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" data-aos="fade-up" data-aos-delay="200">
|
|
@forelse($news as $item)
|
|
<div class="col-lg-4 col-md-6 mb-4">
|
|
<div class="card h-100 shadow-sm news-card">
|
|
<div class="position-relative">
|
|
@if ($item->image)
|
|
<img src="{{ asset($item->image) }}" class="card-img-top" alt="{{ $item->title }}"
|
|
style="height: 200px; object-fit: cover;">
|
|
@else
|
|
<div class="card-img-top bg-light d-flex align-items-center justify-content-center"
|
|
style="height: 200px;">
|
|
<i class="bi bi-newspaper text-muted" style="font-size: 3rem;"></i>
|
|
</div>
|
|
@endif
|
|
<div class="position-absolute top-0 start-0 m-2">
|
|
<span class="badge bg-primary">{{ $item->category }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title fw-bold">{{ $item->title }}</h5>
|
|
<p class="card-text text-muted flex-grow-1">
|
|
{{ Str::limit(strip_tags($item->content), 120) }}
|
|
</p>
|
|
<div class="d-flex justify-content-between align-items-center mt-auto">
|
|
<small class="text-muted">
|
|
<i class="bi bi-calendar3 me-1"></i>{{ $item->created_at->format('d M Y') }}
|
|
</small>
|
|
<small class="text-muted">
|
|
<i class="bi bi-eye me-1"></i>{{ $item->views }}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer bg-transparent border-0">
|
|
<a href="{{ route('news.show', $item->slug) }}"
|
|
class="btn btn-outline-primary btn-sm w-100">
|
|
<i class="bi bi-arrow-right me-1"></i>Baca Selengkapnya
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12 text-center py-5">
|
|
<i class="bi bi-newspaper text-muted" style="font-size: 4rem;"></i>
|
|
<h4 class="mt-3 text-muted">Belum ada berita</h4>
|
|
<p class="text-muted">Berita akan ditampilkan di sini</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
@if ($news->hasPages())
|
|
<div class="pagination-container">
|
|
<div class="pagination-info">
|
|
Menampilkan {{ $news->firstItem() ?? 0 }} sampai {{ $news->lastItem() ?? 0 }} dari
|
|
{{ $news->total() }} berita
|
|
</div>
|
|
<nav aria-label="News pagination">
|
|
{{ $news->appends(request()->query())->links('landing.components.custom-pagination') }}
|
|
</nav>
|
|
</div>
|
|
@endif
|
|
<div class="text-center mt-5 mb-4">
|
|
<a href="{{ route('home') }}" class="btn back-btn text-white">
|
|
<i class="bi bi-arrow-left me-2"></i>Kembali ke Beranda
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
|
|
<script>
|
|
// Initialize AOS
|
|
AOS.init({
|
|
duration: 800,
|
|
easing: 'ease-in-out',
|
|
once: true
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|