350 lines
14 KiB
PHP
350 lines
14 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ $news->title }} - 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;
|
|
/* Warna hijau utama */
|
|
--secondary-color: #6c757d;
|
|
--text-dark: #2c3e50;
|
|
--text-light: #34495e;
|
|
--bg-light: #f8f9fa;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background-color: var(--bg-light);
|
|
}
|
|
|
|
/* === IMPROVEMENT: Konsistensi Warna Hijau === */
|
|
.btn-primary,
|
|
.bg-primary {
|
|
background-color: var(--primary-color) !important;
|
|
border-color: var(--primary-color) !important;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #157347 !important;
|
|
border-color: #146c43 !important;
|
|
}
|
|
|
|
.btn-outline-primary {
|
|
color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.btn-outline-primary:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.breadcrumb-item a,
|
|
.text-primary {
|
|
color: var(--primary-color) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb-item a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* === IMPROVEMENT: Layout Artikel & Tipografi === */
|
|
.article-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
.article-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
color: var(--secondary-color);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.category-badge {
|
|
display: inline-block;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
font-weight: 500;
|
|
border-radius: 20px;
|
|
padding: 0.4rem 1rem;
|
|
text-decoration: none;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.category-badge:hover {
|
|
background-color: #157347;
|
|
color: white;
|
|
}
|
|
|
|
.article-content {
|
|
font-size: 1.1rem;
|
|
line-height: 1.8;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.article-content p {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.article-content blockquote {
|
|
border-left: 4px solid var(--primary-color);
|
|
padding-left: 1.5rem;
|
|
margin: 2rem 0;
|
|
font-style: italic;
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.article-image img {
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.news-article {
|
|
background: white;
|
|
padding: 2.5rem;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
/* === IMPROVEMENT: Tombol Bagikan yang Konsisten === */
|
|
.share-btn {
|
|
border-radius: 20px;
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
.share-btn:hover {
|
|
transform: translateY(-2px);
|
|
color: white !important;
|
|
}
|
|
|
|
/* Warna hover spesifik untuk tiap tombol */
|
|
.share-btn.facebook:hover {
|
|
background-color: #1877F2;
|
|
border-color: #1877F2;
|
|
}
|
|
|
|
.share-btn.twitter:hover {
|
|
background-color: #1DA1F2;
|
|
border-color: #1DA1F2;
|
|
}
|
|
|
|
.share-btn.whatsapp:hover {
|
|
background-color: #25D366;
|
|
border-color: #25D366;
|
|
}
|
|
|
|
.share-btn.copy-link:hover {
|
|
background-color: var(--secondary-color);
|
|
border-color: var(--secondary-color);
|
|
}
|
|
|
|
/* === IMPROVEMENT: Sidebar & Kartu === */
|
|
.sidebar {
|
|
position: sticky;
|
|
top: 2rem;
|
|
/* Jarak dari atas saat sticky */
|
|
}
|
|
|
|
.sidebar .card {
|
|
border: none;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
|
|
}
|
|
|
|
.sidebar .card-header {
|
|
background-color: white;
|
|
border-bottom: 1px solid #eee;
|
|
border-radius: 1rem 1rem 0 0 !important;
|
|
}
|
|
|
|
.related-news-item a:hover h6 {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.sidebar {
|
|
position: static;
|
|
}
|
|
|
|
/* Matikan sticky di mobile */
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.article-title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.news-article {
|
|
padding: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<main class="py-5">
|
|
<div class="container">
|
|
<nav aria-label="breadcrumb" class="mb-4">
|
|
<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"><a href="{{ route('news.index') }}">Berita</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">{{ Str::limit($news->title, 40) }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<div class="row gx-lg-5">
|
|
<div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
|
|
<article class="news-article">
|
|
<header class="article-header mb-4">
|
|
<h1 class="article-title mb-3">{{ $news->title }}</h1>
|
|
<div class="article-meta">
|
|
<a href="{{ route('news.index', ['category' => $news->category]) }}"
|
|
class="category-badge">{{ $news->category }}</a>
|
|
<span class="d-flex align-items-center"><i
|
|
class="bi bi-calendar3 me-2"></i>{{ $news->created_at->format('d F Y') }}</span>
|
|
<span class="d-flex align-items-center"><i
|
|
class="bi bi-eye me-2"></i>{{ $news->views }} kali dibaca</span>
|
|
</div>
|
|
</header>
|
|
|
|
@if ($news->image)
|
|
<div class="article-image mb-4">
|
|
<img src="{{ asset($news->image) }}" alt="{{ $news->title }}"
|
|
class="img-fluid shadow-sm">
|
|
</div>
|
|
@endif
|
|
|
|
@php use Mews\Purifier\Facades\Purifier; @endphp
|
|
<div class="article-content">
|
|
{!! Purifier::clean($news->content, 'news') !!}
|
|
</div>
|
|
|
|
|
|
<div class="article-share mt-5 pt-4 border-top">
|
|
<h6 class="mb-3 fw-bold">Bagikan artikel ini:</h6>
|
|
<div class="d-flex gap-2 flex-wrap">
|
|
<a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->url()) }}"
|
|
target="_blank" class="btn btn-outline-secondary share-btn facebook"><i
|
|
class="bi bi-facebook me-2"></i>Facebook</a>
|
|
<a href="https://twitter.com/intent/tweet?url={{ urlencode(request()->url()) }}&text={{ urlencode($news->title) }}"
|
|
target="_blank" class="btn btn-outline-secondary share-btn twitter"><i
|
|
class="bi bi-twitter me-2"></i>Twitter</a>
|
|
<a href="https://wa.me/?text={{ urlencode($news->title . ' - ' . request()->url()) }}"
|
|
target="_blank" class="btn btn-outline-secondary share-btn whatsapp"><i
|
|
class="bi bi-whatsapp me-2"></i>WhatsApp</a>
|
|
<button onclick="copyToClipboard('{{ request()->url() }}')"
|
|
class="btn btn-outline-secondary share-btn copy-link"><i
|
|
class="bi bi-link-45deg me-2"></i>Salin Link</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="article-footer mt-4 pt-4 border-top text-center">
|
|
<a href="{{ route('news.index') }}" class="btn btn-primary">
|
|
<i class="bi bi-arrow-left me-2"></i>Kembali ke Daftar Berita
|
|
</a>
|
|
</div>
|
|
|
|
</article>
|
|
</div>
|
|
|
|
<div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
|
|
<div class="sidebar">
|
|
@if ($relatedNews->count() > 0)
|
|
<div class="card mb-4">
|
|
<div class="card-header bg-white">
|
|
<h5 class="mb-0 fw-bold"><i class="bi bi-newspaper me-2 text-primary"></i>Berita
|
|
Terkait</h5>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
@foreach ($relatedNews as $related)
|
|
<a href="{{ route('news.show', $related->slug) }}"
|
|
class="list-group-item list-group-item-action related-news-item">
|
|
<div class="d-flex w-100">
|
|
@if ($related->image)
|
|
<img src="{{ asset($related->image) }}"
|
|
alt="{{ $related->title }}" class="rounded me-3"
|
|
style="width: 80px; height: 60px; object-fit: cover;">
|
|
@else
|
|
<div class="bg-light rounded me-3 d-flex align-items-center justify-content-center"
|
|
style="width: 80px; height: 60px; flex-shrink: 0;"><i
|
|
class="bi bi-image text-muted"></i></div>
|
|
@endif
|
|
<div>
|
|
<h6 class="mb-1 fw-bold text-dark">
|
|
{{ Str::limit($related->title, 55) }}</h6>
|
|
<small
|
|
class="text-muted">{{ $related->created_at->format('d M Y') }}</small>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="card">
|
|
<div class="card-header bg-white">
|
|
<h5 class="mb-0 fw-bold"><i class="bi bi-tags me-2 text-primary"></i>Kategori</h5>
|
|
</div>
|
|
<div class="list-group list-group-flush">
|
|
<a href="{{ route('news.index') }}" class="list-group-item list-group-item-action"><i
|
|
class="bi bi-grid me-2"></i>Semua Kategori</a>
|
|
@foreach (['Infrastruktur', 'Ekonomi', 'Kesehatan', 'Budaya', 'Pemerintahan', 'Pendidikan', 'Lingkungan', 'Teknologi'] as $cat)
|
|
<a href="{{ route('news.index', ['category' => $cat]) }}"
|
|
class="list-group-item list-group-item-action">{{ $cat }}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
AOS.init({
|
|
duration: 800,
|
|
easing: 'ease-in-out',
|
|
once: true
|
|
});
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(function() {
|
|
const button = event.target.closest('button');
|
|
const originalHtml = button.innerHTML;
|
|
button.innerHTML = '<i class="bi bi-check-lg me-2"></i>Tersalin!';
|
|
button.classList.add('btn-success', 'text-white');
|
|
button.classList.remove('btn-outline-secondary');
|
|
|
|
setTimeout(function() {
|
|
button.innerHTML = originalHtml;
|
|
button.classList.remove('btn-success', 'text-white');
|
|
button.classList.add('btn-outline-secondary');
|
|
}, 2000);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|