274 lines
12 KiB
Plaintext
274 lines
12 KiB
Plaintext
@using kehati.Models.View
|
|
@{
|
|
ViewData["Title"] = "Lokasi Detail";
|
|
var statusColor = new Dictionary<string, string>
|
|
{
|
|
{ "Aman", "bg-primary/10 text-primary border-primary/20" },
|
|
{ "Rentan", "bg-amber-100 text-amber-800 border-amber-200" },
|
|
{ "Terancam", "bg-orange-100 text-orange-800 border-orange-200" },
|
|
{ "Kritis", "bg-red-100 text-red-800 border-red-200" },
|
|
{ "Dilindungi", "bg-emerald-100 text-emerald-800 border-emerald-200" }
|
|
};
|
|
@model kehati.Models.View.HomeViewModel
|
|
var flora = Model.FeaturedSpesies.Where(x => x.Type == "flora").ToList();
|
|
var fauna = Model.FeaturedSpesies.Where(x => x.Type == "fauna").ToList();
|
|
}
|
|
|
|
<div>
|
|
<div class="relative h-[45vh] min-h-[320px] overflow-hidden">
|
|
<img src="~/images/@Model.Location.Image" asp-append-version="true" alt="@Model.Location.Name" class="h-full w-full object-cover"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-background/10"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto mt-24 max-w-5xl px-4 sm:px-6 lg:px-8">
|
|
<div class="rounded-2xl border border-border bg-card p-8 shadow-sm sm:p-10">
|
|
<a asp-controller="lokasi"
|
|
asp-action="index"
|
|
class="inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground">
|
|
<i data-lucide="arrow-left" class="h-4 w-4"></i>
|
|
Semua lokasi
|
|
</a>
|
|
<h1 class="mt-4 font-serif text-4xl leading-tight text-foreground sm:text-5xl">
|
|
@Model.Location.Name
|
|
</h1>
|
|
<div class="mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm text-muted-foreground">
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<i data-lucide="map-pin" class="h-4 w-4 text-primary"></i>
|
|
@Model.Location.Region
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5">
|
|
<i data-lucide="ruler" class="h-4 w-4 text-primary"></i>
|
|
@Model.Location.Area
|
|
</span>
|
|
</div>
|
|
<p class="mt-6 max-w-3xl text-base leading-relaxed text-muted-foreground">
|
|
@Model.Location.Description
|
|
</p>
|
|
<div class="mt-6 flex gap-8 text-sm">
|
|
<div>
|
|
<div class="font-serif text-3xl text-primary">
|
|
@Model.Location.FloraCount
|
|
</div>
|
|
<div class="text-xs uppercase tracking-widest text-muted-foreground">
|
|
Flora
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="font-serif text-3xl text-primary">
|
|
@Model.Location.FaunaCount
|
|
</div>
|
|
<div class="text-xs uppercase tracking-widest text-muted-foreground">
|
|
Fauna
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto max-w-5xl px-4 py-16 sm:px-6 lg:px-8">
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<button class="tab-btn active" data-tab="all">
|
|
Semua (@Model.FeaturedSpesies.Count)
|
|
</button>
|
|
<button class="tab-btn" data-tab="flora">
|
|
Flora (@flora.Count)
|
|
</button>
|
|
<button class="tab-btn" data-tab="fauna">
|
|
Fauna (@fauna.Count)
|
|
</button>
|
|
</div>
|
|
|
|
<div id="tab-all" class="tab-content mt-8">
|
|
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
@foreach(SpesiesModel s in Model.FeaturedSpesies)
|
|
{
|
|
<a asp-controller="katalog" asp-action="detail" asp-route-slug="@s.Slug" class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
|
|
<!-- Image -->
|
|
<div class="relative aspect-[4/3] overflow-hidden bg-muted">
|
|
<img src="~/images/@s.Image"
|
|
alt="@s.CommonName"
|
|
loading="lazy"
|
|
asp-append-version="true"
|
|
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
|
|
|
<!-- Type Badge -->
|
|
<div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
|
|
@if(s.Type == "Flora")
|
|
{
|
|
<i data-lucide="leaf" class="h-3 w-3"></i>
|
|
}
|
|
else
|
|
{
|
|
<i data-lucide="bird" class="h-3 w-3"></i>
|
|
}
|
|
@s.Type
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h3 class="font-serif text-lg leading-tight text-foreground">
|
|
@s.CommonName
|
|
</h3>
|
|
</div>
|
|
<p class="mt-0.5 text-xs italic text-muted-foreground">
|
|
@s.ScientificName
|
|
</p>
|
|
<!-- Status Badge -->
|
|
<div class="mt-3">
|
|
<span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
|
|
@(statusColor.ContainsKey(s.ConservationStatus)
|
|
? statusColor[s.ConservationStatus]
|
|
: "")">
|
|
@s.ConservationStatus
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="tab-flora" class="tab-content mt-8 hidden">
|
|
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
@foreach(var s in flora)
|
|
{
|
|
<a asp-controller="katalog" asp-action="detail" asp-route-slug="@s.Slug" class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
|
|
<!-- Image -->
|
|
<div class="relative aspect-[4/3] overflow-hidden bg-muted">
|
|
<img src="~/images/@s.Image"
|
|
alt="@s.CommonName"
|
|
loading="lazy"
|
|
asp-append-version="true"
|
|
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
|
|
|
<!-- Type Badge -->
|
|
<div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
|
|
@if(s.Type == "Flora")
|
|
{
|
|
<i data-lucide="leaf" class="h-3 w-3"></i>
|
|
}
|
|
else
|
|
{
|
|
<i data-lucide="bird" class="h-3 w-3"></i>
|
|
}
|
|
@s.Type
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h3 class="font-serif text-lg leading-tight text-foreground">
|
|
@s.CommonName
|
|
</h3>
|
|
</div>
|
|
<p class="mt-0.5 text-xs italic text-muted-foreground">
|
|
@s.ScientificName
|
|
</p>
|
|
<!-- Status Badge -->
|
|
<div class="mt-3">
|
|
<span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
|
|
@(statusColor.ContainsKey(s.ConservationStatus)
|
|
? statusColor[s.ConservationStatus]
|
|
: "")">
|
|
@s.ConservationStatus
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="tab-fauna" class="tab-content mt-8 hidden">
|
|
|
|
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
|
|
@foreach(SpesiesModel s in fauna)
|
|
{
|
|
<a asp-controller="katalog" asp-action="detail" asp-route-slug="@s.Slug" class="group block overflow-hidden rounded-2xl border border-border bg-card transition-all hover:-translate-y-1 hover:shadow-lg">
|
|
<!-- Image -->
|
|
<div class="relative aspect-[4/3] overflow-hidden bg-muted">
|
|
<img src="~/images/@s.Image"
|
|
alt="@s.CommonName"
|
|
loading="lazy"
|
|
asp-append-version="true"
|
|
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
|
|
|
<!-- Type Badge -->
|
|
<div class="absolute left-3 top-3 flex items-center gap-1.5 rounded-full bg-background/90 px-2.5 py-1 text-[11px] font-medium capitalize backdrop-blur">
|
|
@if(s.Type == "Flora")
|
|
{
|
|
<i data-lucide="leaf" class="h-3 w-3"></i>
|
|
}
|
|
else
|
|
{
|
|
<i data-lucide="bird" class="h-3 w-3"></i>
|
|
}
|
|
@s.Type
|
|
</div>
|
|
</div>
|
|
<!-- Content -->
|
|
<div class="p-4">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h3 class="font-serif text-lg leading-tight text-foreground">
|
|
@s.CommonName
|
|
</h3>
|
|
</div>
|
|
<p class="mt-0.5 text-xs italic text-muted-foreground">
|
|
@s.ScientificName
|
|
</p>
|
|
<!-- Status Badge -->
|
|
<div class="mt-3">
|
|
<span class="inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium
|
|
@(statusColor.ContainsKey(s.ConservationStatus)
|
|
? statusColor[s.ConservationStatus]
|
|
: "")">
|
|
@s.ConservationStatus
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts{
|
|
|
|
<script>
|
|
|
|
document.querySelectorAll(".tab-btn").forEach(btn=>{
|
|
|
|
btn.addEventListener("click",function(){
|
|
|
|
document.querySelectorAll(".tab-btn")
|
|
.forEach(x=>x.classList.remove("active"));
|
|
|
|
this.classList.add("active");
|
|
|
|
document.querySelectorAll(".tab-content")
|
|
.forEach(x=>x.classList.add("hidden"));
|
|
|
|
document
|
|
.getElementById("tab-"+this.dataset.tab)
|
|
.classList.remove("hidden");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
} |