Prompt
Buatkan prompt untuk membuat website News yang memuat berita pengembangan keterampilan digital skills
Buat website News/Portal Berita bernama “Digital Skills News” yang memuat berita dan insight seputar pengembangan keterampilan digital (AI, data, coding, design, digital marketing, cyber, product, career).
Teknologi
Frontend: HTML + TailwindCSS (CDN), 1 file index.html (boleh tambah article.html kalau perlu)
Tanpa framework (no React/Vue)
Tambahkan JS vanilla secukupnya untuk interaksi (menu mobile, search, filter kategori, load more)
Desain clean, modern, premium, banyak whitespace, mobile-first, aksesibilitas (focus state, aria-label)
Struktur halaman
Header / Navbar (sticky)
Logo teks: “Digital Skills News”
Menu: Latest, AI, Data, Coding, Design, Marketing, Career
Search bar (desktop), tombol search icon (mobile)
CTA tombol: “Submit News” / “Subscribe”
Mobile hamburger menu (toggle JS)
Hero / Top Story
1 berita utama (gambar placeholder gradient), judul besar, ringkasan, author + tanggal, tombol “Read More”
Di samping/di bawah: 3 berita trending kecil
Section: Latest News
Grid card berita (min 12)
Setiap card: kategori badge, judul, excerpt 2 baris, author, tanggal, estimasi waktu baca, tombol “Read”
Hover micro-interaction: lift/scale kecil + shadow
Section: Featured Topics
Chip / tab filter kategori (AI, Data, Coding, Design, Marketing, Career)
Saat klik chip, filter card (UI + JS filter sederhana)
Section: Newsletter / Subscribe
Background gradient
Copy: “Dapatkan berita & roadmap skill digital tiap minggu”
Form: email + tombol subscribe
Teks privasi singkat
Footer
Kolom: About, Categories, Contact, Social
Link kebijakan privasi & terms
Fitur interaksi (JS)
Toggle mobile menu
Search (filter judul/excerpt)
Filter kategori (chip)
Load more (tampilkan 6 berita dulu, tombol tambah)
Konten dummy
Buat 12–18 berita dummy yang relevan dengan digital skills (judul realistis, ringkasan singkat, kategori bervariasi)
Gunakan tanggal yang masuk akal dan author placeholder
Style / Warna
Palet: slate netral + aksen indigo/emerald
Card border halus, rounded besar, shadow lembut
Tipografi jelas (heading tebal, body nyaman)
Output: berikan kode index.html lengkap (Tailwind CDN + JS). Jangan gunakan library eksternal selain Tailwind.
Index.html
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Skills News — Berita & Insight Keterampilan Digital</title>
<meta name="description" content="Digital Skills News memuat berita dan insight seputar AI, data, coding, design, marketing, cyber, product, dan career untuk upgrade skill digitalmu." />
<!-- TailwindCSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-50 text-slate-900 antialiased">
<!-- Skip link -->
<a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-xl focus:bg-white focus:px-4 focus:py-2 focus:shadow">
Lewati ke konten utama
</a>
<!-- Header / Navbar (sticky) -->
<header class="sticky top-0 z-50 border-b border-slate-200 bg-white/80 backdrop-blur">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between gap-3">
<!-- Logo -->
<a href="#" class="inline-flex items-center gap-2 font-extrabold tracking-tight text-slate-900">
<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-indigo-600 text-white shadow-sm" aria-hidden="true">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none">
<path d="M4 6.5C4 5.12 5.12 4 6.5 4H20v14H6.5C5.12 18 4 16.88 4 15.5v-9Z" stroke="currentColor" stroke-width="1.8"/>
<path d="M8 8h8M8 11h6M8 14h8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
<path d="M20 18v2H7.5C5.57 20 4 18.43 4 16.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</span>
<span>Digital Skills News</span>
</a>
<!-- Desktop menu -->
<nav class="hidden lg:flex items-center gap-7" aria-label="Navigasi utama">
<a href="#latest" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Latest</a>
<a href="#topics" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">AI</a>
<a href="#topics" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Data</a>
<a href="#topics" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Coding</a>
<a href="#topics" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Design</a>
<a href="#topics" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Marketing</a>
<a href="#topics" class="text-sm font-medium text-slate-700 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Career</a>
</nav>
<!-- Desktop search -->
<div class="hidden md:flex items-center gap-3 flex-1 justify-end">
<div class="relative w-full max-w-md">
<label for="searchDesktop" class="sr-only">Cari berita</label>
<input
id="searchDesktop"
type="search"
placeholder="Cari AI, data, coding, career…"
class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-2.5 pr-10 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30"
/>
<span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400" aria-hidden="true">
🔎
</span>
</div>
<a href="#subscribe"
class="hidden sm:inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Subscribe
</a>
<a href="#"
class="hidden sm:inline-flex items-center justify-center rounded-2xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Submit News
</a>
</div>
<!-- Mobile actions -->
<div class="flex items-center gap-2 md:hidden">
<button id="mobileSearchButton"
type="button"
class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white p-2.5 text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
aria-label="Buka pencarian"
aria-controls="mobileSearch"
aria-expanded="false">
<span aria-hidden="true">🔎</span>
</button>
<button id="mobileMenuButton"
type="button"
class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white p-2.5 text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
aria-label="Buka menu"
aria-controls="mobileMenu"
aria-expanded="false">
<svg id="iconOpen" aria-hidden="true" class="h-5 w-5" viewBox="0 0 24 24" fill="none">
<path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<svg id="iconClose" aria-hidden="true" class="hidden h-5 w-5" viewBox="0 0 24 24" fill="none">
<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</button>
</div>
</div>
<!-- Mobile search -->
<div id="mobileSearch" class="md:hidden hidden pb-4">
<div class="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
<label for="searchMobile" class="sr-only">Cari berita</label>
<input
id="searchMobile"
type="search"
placeholder="Cari berita…"
class="w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30"
/>
</div>
</div>
<!-- Mobile menu -->
<div id="mobileMenu" class="md:hidden hidden pb-4" role="dialog" aria-label="Menu mobile">
<div class="rounded-2xl border border-slate-200 bg-white p-3 shadow-sm">
<div class="grid gap-1">
<a href="#latest" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Latest</a>
<a href="#topics" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">AI</a>
<a href="#topics" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Data</a>
<a href="#topics" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Coding</a>
<a href="#topics" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Design</a>
<a href="#topics" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Marketing</a>
<a href="#topics" class="rounded-xl px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">Career</a>
</div>
<div class="mt-3 grid gap-2 sm:grid-cols-2">
<a href="#subscribe"
class="inline-flex w-full items-center justify-center rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Subscribe
</a>
<a href="#"
class="inline-flex w-full items-center justify-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Submit News
</a>
</div>
</div>
</div>
</div>
</header>
<main id="main">
<!-- Hero / Top Story -->
<section class="relative overflow-hidden">
<!-- background ornaments -->
<div aria-hidden="true" class="absolute inset-0 -z-10">
<div class="absolute -top-24 -left-24 h-72 w-72 rounded-full bg-indigo-200 blur-3xl opacity-70"></div>
<div class="absolute -bottom-28 -right-24 h-80 w-80 rounded-full bg-emerald-200 blur-3xl opacity-70"></div>
</div>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10 sm:py-14">
<div class="grid gap-6 lg:grid-cols-12 lg:items-stretch">
<!-- Top story -->
<article class="lg:col-span-8 rounded-3xl border border-slate-200 bg-white shadow-sm overflow-hidden">
<div class="relative h-56 sm:h-64 lg:h-72">
<div class="absolute inset-0 bg-gradient-to-br from-indigo-600 via-indigo-500 to-emerald-500 opacity-90"></div>
<div class="absolute inset-0 opacity-20"
style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 22px 22px;"
aria-hidden="true"></div>
<div class="absolute left-6 top-6">
<span class="inline-flex items-center rounded-full bg-white/20 px-3 py-1 text-xs font-semibold text-white backdrop-blur">
Top Story • AI
</span>
</div>
</div>
<div class="p-6 sm:p-7">
<h1 class="text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl">
Roadmap Belajar AI 30 Hari: Dari Prompting sampai Project Portfolio
</h1>
<p class="mt-3 text-slate-600 leading-relaxed">
Panduan ringkas untuk membangun kebiasaan belajar AI yang efektif: materi harian, latihan, dan proyek mini yang bisa kamu pajang di portofolio.
</p>
<div class="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-slate-600">
<span class="font-semibold text-slate-900">By Editor Desk</span>
<span aria-hidden="true">•</span>
<time datetime="2025-12-26">26 Des 2025</time>
<span aria-hidden="true">•</span>
<span>6 min read</span>
</div>
<div class="mt-6 flex flex-col gap-3 sm:flex-row sm:items-center">
<a href="#"
class="inline-flex items-center justify-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Read More
<span class="ml-2" aria-hidden="true">→</span>
</a>
<a href="#subscribe"
class="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Dapatkan update mingguan
</a>
</div>
</div>
</article>
<!-- Trending -->
<aside class="lg:col-span-4 grid gap-4">
<div class="flex items-center justify-between">
<h2 class="text-base font-extrabold text-slate-900">Trending</h2>
<a href="#latest" class="text-sm font-semibold text-indigo-600 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">
Lihat semua
</a>
</div>
<article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm transition hover:shadow-md">
<div class="flex items-center gap-2">
<span class="inline-flex rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700">Data</span>
<span class="text-xs text-slate-500">• 4 min</span>
</div>
<h3 class="mt-2 text-sm font-extrabold text-slate-900">
Dashboards yang Dibaca Manajer: 7 Pola Visual yang Efektif
</h3>
<p class="mt-2 text-sm text-slate-600 line-clamp-2">
Cara memilih chart, narasi angka, dan metrik yang tidak menyesatkan audiens.
</p>
<div class="mt-3 text-xs text-slate-600">
<span class="font-semibold text-slate-900">By Maya</span> • <time datetime="2025-12-22">22 Des 2025</time>
</div>
</article>
<article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm transition hover:shadow-md">
<div class="flex items-center gap-2">
<span class="inline-flex rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-semibold text-indigo-700">Coding</span>
<span class="text-xs text-slate-500">• 5 min</span>
</div>
<h3 class="mt-2 text-sm font-extrabold text-slate-900">
Cara Membangun Portfolio Web Dev: 3 Project yang “Recruiter Friendly”
</h3>
<p class="mt-2 text-sm text-slate-600 line-clamp-2">
Fokus ke project yang menunjukkan problem-solving, UI rapi, dan deployment.
</p>
<div class="mt-3 text-xs text-slate-600">
<span class="font-semibold text-slate-900">By Rafi</span> • <time datetime="2025-12-18">18 Des 2025</time>
</div>
</article>
<article class="rounded-3xl border border-slate-200 bg-white p-5 shadow-sm transition hover:shadow-md">
<div class="flex items-center gap-2">
<span class="inline-flex rounded-full bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-700">Career</span>
<span class="text-xs text-slate-500">• 3 min</span>
</div>
<h3 class="mt-2 text-sm font-extrabold text-slate-900">
CV Digital Skills: Bagian yang Paling Sering Dilihat Recruiter
</h3>
<p class="mt-2 text-sm text-slate-600 line-clamp-2">
Ringkas, bukti nyata, dan link portofolio yang mudah diverifikasi.
</p>
<div class="mt-3 text-xs text-slate-600">
<span class="font-semibold text-slate-900">By Editor</span> • <time datetime="2025-12-12">12 Des 2025</time>
</div>
</article>
</aside>
</div>
</div>
</section>
<!-- Featured Topics -->
<section id="topics" class="py-10 sm:py-12">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
<div>
<h2 class="text-xl font-extrabold text-slate-900 sm:text-2xl">Featured Topics</h2>
<p class="mt-1 text-slate-600">Filter berita berdasarkan kategori untuk fokus belajar.</p>
</div>
<div class="flex flex-wrap items-center gap-2" role="tablist" aria-label="Filter kategori berita">
<button type="button" data-filter="all" class="topic-chip">
Semua
</button>
<button type="button" data-filter="AI" class="topic-chip">
AI
</button>
<button type="button" data-filter="Data" class="topic-chip">
Data
</button>
<button type="button" data-filter="Coding" class="topic-chip">
Coding
</button>
<button type="button" data-filter="Design" class="topic-chip">
Design
</button>
<button type="button" data-filter="Marketing" class="topic-chip">
Marketing
</button>
<button type="button" data-filter="Cyber" class="topic-chip">
Cyber
</button>
<button type="button" data-filter="Product" class="topic-chip">
Product
</button>
<button type="button" data-filter="Career" class="topic-chip">
Career
</button>
</div>
</div>
</div>
</section>
<!-- Latest News Grid -->
<section id="latest" class="pb-14 sm:pb-16">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between gap-4">
<h2 class="text-xl font-extrabold text-slate-900 sm:text-2xl">Latest News</h2>
<p id="resultCount" class="text-sm text-slate-600"></p>
</div>
<div id="newsGrid" class="mt-6 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
<!-- Articles injected / rendered in HTML for no-build approach (we keep them in DOM for simplicity). -->
<!-- Each article uses data-title, data-excerpt, data-category for filter/search. -->
<!-- 1 -->
<article class="news-card" data-category="AI" data-title="Prompting untuk Kerja Kantoran: 12 Template yang Dipakai Setiap Hari" data-excerpt="Template prompt untuk email, ringkasan meeting, riset cepat, dan SOP kerja yang lebih rapi.">
<div class="news-thumb bg-gradient-to-br from-indigo-600 via-indigo-500 to-emerald-500"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-ai">AI</span>
<span class="meta">• 5 min</span>
</div>
<h3 class="mt-3 title">Prompting untuk Kerja Kantoran: 12 Template yang Dipakai Setiap Hari</h3>
<p class="mt-2 excerpt">Template prompt untuk email, ringkasan meeting, riset cepat, dan SOP kerja yang lebih rapi.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Editor Desk</span> • <time datetime="2025-12-27">27 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 2 -->
<article class="news-card" data-category="Data" data-title="Belajar Data Analytics Tanpa Pusing: Mulai dari Pertanyaan, Bukan Chart" data-excerpt="Framework sederhana untuk mengubah masalah bisnis menjadi metrik, analisis, lalu rekomendasi.">
<div class="news-thumb bg-gradient-to-br from-emerald-500 via-emerald-400 to-indigo-500"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-data">Data</span>
<span class="meta">• 6 min</span>
</div>
<h3 class="mt-3 title">Belajar Data Analytics Tanpa Pusing: Mulai dari Pertanyaan, Bukan Chart</h3>
<p class="mt-2 excerpt">Framework sederhana untuk mengubah masalah bisnis menjadi metrik, analisis, lalu rekomendasi.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Maya</span> • <time datetime="2025-12-24">24 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 3 -->
<article class="news-card" data-category="Coding" data-title="Git untuk Pemula: 8 Perintah yang Cukup untuk Kerja Tim" data-excerpt="Belajar workflow commit, branch, pull request, dan cara menghindari konflik yang bikin panik.">
<div class="news-thumb bg-gradient-to-br from-slate-900 via-slate-700 to-indigo-600"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-coding">Coding</span>
<span class="meta">• 7 min</span>
</div>
<h3 class="mt-3 title">Git untuk Pemula: 8 Perintah yang Cukup untuk Kerja Tim</h3>
<p class="mt-2 excerpt">Belajar workflow commit, branch, pull request, dan cara menghindari konflik yang bikin panik.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Rafi</span> • <time datetime="2025-12-21">21 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 4 -->
<article class="news-card" data-category="Design" data-title="UI yang Terlihat Premium: 9 Detail Kecil yang Sering Dilupakan" data-excerpt="Spacing, hierarchy, contrast, dan micro-interactions sederhana yang bikin UI terasa mahal.">
<div class="news-thumb bg-gradient-to-br from-indigo-500 via-slate-200 to-emerald-400"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-design">Design</span>
<span class="meta">• 4 min</span>
</div>
<h3 class="mt-3 title">UI yang Terlihat Premium: 9 Detail Kecil yang Sering Dilupakan</h3>
<p class="mt-2 excerpt">Spacing, hierarchy, contrast, dan micro-interactions sederhana yang bikin UI terasa mahal.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Nadia</span> • <time datetime="2025-12-20">20 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 5 -->
<article class="news-card" data-category="Marketing" data-title="Konten yang Konsisten: Sistem Produksi 90 Menit per Hari" data-excerpt="Bikin pipeline: ide → skrip → edit → jadwal. Cocok untuk personal brand dan UMKM.">
<div class="news-thumb bg-gradient-to-br from-emerald-600 via-indigo-500 to-slate-900"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-marketing">Marketing</span>
<span class="meta">• 5 min</span>
</div>
<h3 class="mt-3 title">Konten yang Konsisten: Sistem Produksi 90 Menit per Hari</h3>
<p class="mt-2 excerpt">Bikin pipeline: ide → skrip → edit → jadwal. Cocok untuk personal brand dan UMKM.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Sinta</span> • <time datetime="2025-12-19">19 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 6 -->
<article class="news-card" data-category="Career" data-title="Wawancara Digital Skills: Cara Menjawab ‘Ceritakan Project Terakhirmu’" data-excerpt="Pola STAR + metrik yang relevan agar cerita project terdengar jelas dan berdampak.">
<div class="news-thumb bg-gradient-to-br from-slate-800 via-indigo-600 to-emerald-500"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-career">Career</span>
<span class="meta">• 6 min</span>
</div>
<h3 class="mt-3 title">Wawancara Digital Skills: Cara Menjawab ‘Ceritakan Project Terakhirmu’</h3>
<p class="mt-2 excerpt">Pola STAR + metrik yang relevan agar cerita project terdengar jelas dan berdampak.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Editor</span> • <time datetime="2025-12-17">17 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 7 -->
<article class="news-card" data-category="Cyber" data-title="Cyber Hygiene: 10 Kebiasaan Aman untuk Pekerja Remote" data-excerpt="Password manager, 2FA, update rutin, dan trik sederhana untuk mengurangi risiko phishing.">
<div class="news-thumb bg-gradient-to-br from-slate-900 via-emerald-600 to-indigo-500"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-cyber">Cyber</span>
<span class="meta">• 4 min</span>
</div>
<h3 class="mt-3 title">Cyber Hygiene: 10 Kebiasaan Aman untuk Pekerja Remote</h3>
<p class="mt-2 excerpt">Password manager, 2FA, update rutin, dan trik sederhana untuk mengurangi risiko phishing.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Dimas</span> • <time datetime="2025-12-16">16 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 8 -->
<article class="news-card" data-category="Product" data-title="PRD untuk Pemula: Struktur Dokumen Produk yang Praktis" data-excerpt="Cara menulis problem statement, scope, user stories, dan acceptance criteria yang mudah dipahami.">
<div class="news-thumb bg-gradient-to-br from-indigo-600 via-slate-100 to-emerald-500"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-product">Product</span>
<span class="meta">• 7 min</span>
</div>
<h3 class="mt-3 title">PRD untuk Pemula: Struktur Dokumen Produk yang Praktis</h3>
<p class="mt-2 excerpt">Cara menulis problem statement, scope, user stories, dan acceptance criteria yang mudah dipahami.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Alya</span> • <time datetime="2025-12-15">15 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 9 -->
<article class="news-card" data-category="AI" data-title="Belajar AI dengan Benar: Bedakan ‘Demo’ vs ‘Skill’" data-excerpt="Checklist latihan agar kamu benar-benar bisa menerapkan AI, bukan sekadar coba-coba tools.">
<div class="news-thumb bg-gradient-to-br from-indigo-700 via-emerald-500 to-slate-900"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-ai">AI</span>
<span class="meta">• 5 min</span>
</div>
<h3 class="mt-3 title">Belajar AI dengan Benar: Bedakan ‘Demo’ vs ‘Skill’</h3>
<p class="mt-2 excerpt">Checklist latihan agar kamu benar-benar bisa menerapkan AI, bukan sekadar coba-coba tools.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Editor Desk</span> • <time datetime="2025-12-14">14 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 10 -->
<article class="news-card" data-category="Data" data-title="SQL yang Dipakai di Dunia Kerja: SELECT, JOIN, dan CASE" data-excerpt="Latihan query dengan contoh kasus sederhana yang mirip kebutuhan tim bisnis dan produk.">
<div class="news-thumb bg-gradient-to-br from-emerald-600 via-slate-800 to-indigo-600"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-data">Data</span>
<span class="meta">• 8 min</span>
</div>
<h3 class="mt-3 title">SQL yang Dipakai di Dunia Kerja: SELECT, JOIN, dan CASE</h3>
<p class="mt-2 excerpt">Latihan query dengan contoh kasus sederhana yang mirip kebutuhan tim bisnis dan produk.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Kevin</span> • <time datetime="2025-12-13">13 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 11 -->
<article class="news-card" data-category="Coding" data-title="Clean Code untuk Pemula: 6 Kebiasaan yang Langsung Terasa" data-excerpt="Nama variabel, fungsi kecil, dan struktur folder yang bikin project lebih mudah dirawat.">
<div class="news-thumb bg-gradient-to-br from-slate-900 via-indigo-600 to-slate-200"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-coding">Coding</span>
<span class="meta">• 6 min</span>
</div>
<h3 class="mt-3 title">Clean Code untuk Pemula: 6 Kebiasaan yang Langsung Terasa</h3>
<p class="mt-2 excerpt">Nama variabel, fungsi kecil, dan struktur folder yang bikin project lebih mudah dirawat.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Rafi</span> • <time datetime="2025-12-11">11 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 12 -->
<article class="news-card" data-category="Design" data-title="Design System Mini untuk UMKM: Komponen yang Wajib Ada" data-excerpt="Button, input, card, dan aturan spacing agar tampilan konsisten walau dikerjakan cepat.">
<div class="news-thumb bg-gradient-to-br from-indigo-500 via-emerald-400 to-slate-50"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-design">Design</span>
<span class="meta">• 5 min</span>
</div>
<h3 class="mt-3 title">Design System Mini untuk UMKM: Komponen yang Wajib Ada</h3>
<p class="mt-2 excerpt">Button, input, card, dan aturan spacing agar tampilan konsisten walau dikerjakan cepat.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Nadia</span> • <time datetime="2025-12-10">10 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 13 -->
<article class="news-card" data-category="Marketing" data-title="Iklan yang Tidak Boncos: Setup Tracking sebelum Scale" data-excerpt="Apa yang wajib dicek di event, UTM, dan laporan agar keputusan scale lebih aman.">
<div class="news-thumb bg-gradient-to-br from-emerald-500 via-indigo-600 to-slate-900"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-marketing">Marketing</span>
<span class="meta">• 7 min</span>
</div>
<h3 class="mt-3 title">Iklan yang Tidak Boncos: Setup Tracking sebelum Scale</h3>
<p class="mt-2 excerpt">Apa yang wajib dicek di event, UTM, dan laporan agar keputusan scale lebih aman.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Sinta</span> • <time datetime="2025-12-09">9 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 14 -->
<article class="news-card" data-category="Career" data-title="Belajar Skill Digital Sambil Kerja: Jadwal 5 Jam per Minggu" data-excerpt="Strategi micro-learning: fokus output, bukan jam panjang. Cocok untuk yang super sibuk.">
<div class="news-thumb bg-gradient-to-br from-slate-700 via-emerald-500 to-indigo-600"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-career">Career</span>
<span class="meta">• 4 min</span>
</div>
<h3 class="mt-3 title">Belajar Skill Digital Sambil Kerja: Jadwal 5 Jam per Minggu</h3>
<p class="mt-2 excerpt">Strategi micro-learning: fokus output, bukan jam panjang. Cocok untuk yang super sibuk.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Editor</span> • <time datetime="2025-12-08">8 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 15 -->
<article class="news-card" data-category="Cyber" data-title="Phishing Modern: 5 Tanda yang Sering Terlihat ‘Meyakinkan’" data-excerpt="Contoh pola penipuan yang lebih halus: domain mirip, urgensi palsu, dan lampiran berbahaya.">
<div class="news-thumb bg-gradient-to-br from-slate-900 via-indigo-600 to-emerald-500"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-cyber">Cyber</span>
<span class="meta">• 5 min</span>
</div>
<h3 class="mt-3 title">Phishing Modern: 5 Tanda yang Sering Terlihat ‘Meyakinkan’</h3>
<p class="mt-2 excerpt">Contoh pola penipuan yang lebih halus: domain mirip, urgensi palsu, dan lampiran berbahaya.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Dimas</span> • <time datetime="2025-12-07">7 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 16 -->
<article class="news-card" data-category="Product" data-title="Product Thinking: Cara Menentukan Prioritas Tanpa Drama" data-excerpt="Gunakan impact vs effort, plus definisi ‘success metric’ agar diskusi lebih objektif.">
<div class="news-thumb bg-gradient-to-br from-indigo-600 via-emerald-500 to-slate-800"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-product">Product</span>
<span class="meta">• 6 min</span>
</div>
<h3 class="mt-3 title">Product Thinking: Cara Menentukan Prioritas Tanpa Drama</h3>
<p class="mt-2 excerpt">Gunakan impact vs effort, plus definisi ‘success metric’ agar diskusi lebih objektif.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Alya</span> • <time datetime="2025-12-06">6 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 17 -->
<article class="news-card" data-category="AI" data-title="AI untuk Riset: Cara Mengecek Fakta & Menghindari Halusinasi" data-excerpt="Langkah praktis: prompt verifikasi, sumber primer, dan cara menilai jawaban yang meragukan.">
<div class="news-thumb bg-gradient-to-br from-indigo-700 via-slate-900 to-emerald-500"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-ai">AI</span>
<span class="meta">• 8 min</span>
</div>
<h3 class="mt-3 title">AI untuk Riset: Cara Mengecek Fakta & Menghindari Halusinasi</h3>
<p class="mt-2 excerpt">Langkah praktis: prompt verifikasi, sumber primer, dan cara menilai jawaban yang meragukan.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Editor Desk</span> • <time datetime="2025-12-05">5 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
<!-- 18 -->
<article class="news-card" data-category="Career" data-title="LinkedIn untuk Digital Skills: Struktur Profil yang Mudah Dicari" data-excerpt="Headline, about, featured, dan project link yang bikin profilmu naik di pencarian.">
<div class="news-thumb bg-gradient-to-br from-slate-800 via-indigo-600 to-slate-200"></div>
<div class="p-6">
<div class="flex items-center gap-2">
<span class="badge badge-career">Career</span>
<span class="meta">• 5 min</span>
</div>
<h3 class="mt-3 title">LinkedIn untuk Digital Skills: Struktur Profil yang Mudah Dicari</h3>
<p class="mt-2 excerpt">Headline, about, featured, dan project link yang bikin profilmu naik di pencarian.</p>
<div class="mt-4 flex items-center justify-between">
<div class="meta">
<span class="font-semibold text-slate-900">By Editor</span> • <time datetime="2025-12-03">3 Des 2025</time>
</div>
<a href="#" class="read-link">Read</a>
</div>
</div>
</article>
</div>
<!-- Empty state -->
<div id="emptyState" class="mt-10 hidden rounded-3xl border border-slate-200 bg-white p-8 text-center shadow-sm">
<p class="text-base font-extrabold text-slate-900">Tidak ada berita yang cocok.</p>
<p class="mt-2 text-slate-600">Coba kata kunci lain atau pilih kategori yang berbeda.</p>
<button id="resetFilters"
type="button"
class="mt-5 inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Reset filter
</button>
</div>
<!-- Load more -->
<div class="mt-8 flex justify-center">
<button id="loadMoreBtn"
type="button"
class="inline-flex items-center justify-center rounded-2xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Load more
<span class="ml-2" aria-hidden="true">↓</span>
</button>
</div>
</div>
</section>
<!-- Newsletter / Subscribe -->
<section id="subscribe" class="pb-14 sm:pb-16">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="relative overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-indigo-600 via-indigo-500 to-emerald-500 shadow-sm">
<div aria-hidden="true" class="absolute inset-0 opacity-20"
style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 22px 22px;"></div>
<div class="relative grid gap-8 p-6 sm:p-10 lg:grid-cols-2 lg:items-center">
<div class="text-white">
<h2 class="text-2xl font-extrabold tracking-tight sm:text-3xl">
Dapatkan berita & roadmap skill digital tiap minggu
</h2>
<p class="mt-3 text-white/90 leading-relaxed">
Satu email per minggu. Ringkas, actionable, dan fokus ke skill yang benar-benar dipakai di dunia kerja.
</p>
<div class="mt-6 grid gap-3 sm:grid-cols-2">
<div class="rounded-2xl bg-white/15 p-4 backdrop-blur">
<p class="text-sm font-semibold">✅ Kurasi topik</p>
<p class="mt-1 text-sm text-white/85">AI, data, coding, career</p>
</div>
<div class="rounded-2xl bg-white/15 p-4 backdrop-blur">
<p class="text-sm font-semibold">✅ Praktis</p>
<p class="mt-1 text-sm text-white/85">Checklist + template belajar</p>
</div>
</div>
</div>
<form class="rounded-3xl bg-white p-6 sm:p-7 shadow-sm" action="#" method="post">
<label for="newsletterEmail" class="block text-sm font-semibold text-slate-900">Email</label>
<input id="newsletterEmail" name="newsletterEmail" type="email" required
class="mt-2 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30"
placeholder="nama@email.com" />
<button type="submit"
class="mt-4 inline-flex w-full items-center justify-center rounded-2xl bg-slate-900 px-6 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Subscribe
<span class="ml-2" aria-hidden="true">→</span>
</button>
<p class="mt-3 text-xs text-slate-600">
Dengan subscribe, kamu setuju menerima email mingguan. Kami tidak membagikan data pribadimu.
</p>
</form>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="border-t border-slate-200 bg-white">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
<div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
<div>
<p class="text-base font-extrabold text-slate-900">Digital Skills News</p>
<p class="mt-3 text-sm leading-relaxed text-slate-600">
Portal berita dan insight untuk upgrade keterampilan digital: AI, data, coding, design, marketing, cyber, product, dan career.
</p>
</div>
<div>
<p class="text-sm font-extrabold text-slate-900">Categories</p>
<ul class="mt-3 space-y-2 text-sm text-slate-600">
<li><a href="#topics" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">AI</a></li>
<li><a href="#topics" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Data</a></li>
<li><a href="#topics" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Coding</a></li>
<li><a href="#topics" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Design</a></li>
<li><a href="#topics" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Marketing</a></li>
<li><a href="#topics" class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Career</a></li>
</ul>
</div>
<div>
<p class="text-sm font-extrabold text-slate-900">Contact</p>
<ul class="mt-3 space-y-2 text-sm text-slate-600">
<li><span class="font-semibold text-slate-900">Email:</span> hello@digitalskillsnews.com</li>
<li><span class="font-semibold text-slate-900">Submit:</span> submit@digitalskillsnews.com</li>
<li><span class="font-semibold text-slate-900">Lokasi:</span> Indonesia</li>
</ul>
</div>
<div>
<p class="text-sm font-extrabold text-slate-900">Social</p>
<div class="mt-3 flex items-center gap-3">
<a href="#" aria-label="Instagram" class="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
<span aria-hidden="true">📷</span>
</a>
<a href="#" aria-label="YouTube" class="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
<span aria-hidden="true">▶️</span>
</a>
<a href="#" aria-label="LinkedIn" class="inline-flex h-10 w-10 items-center justify-center rounded-2xl border border-slate-200 bg-white shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
<span aria-hidden="true">in</span>
</a>
</div>
<a href="#subscribe"
class="mt-6 inline-flex w-full items-center justify-center rounded-2xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">
Subscribe
</a>
</div>
</div>
<div class="mt-10 flex flex-col gap-3 border-t border-slate-200 pt-6 sm:flex-row sm:items-center sm:justify-between">
<p class="text-sm text-slate-600">© <span id="year"></span> Digital Skills News. All rights reserved.</p>
<div class="flex flex-wrap gap-4 text-sm">
<a href="#" class="text-slate-600 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Privacy Policy</a>
<a href="#" class="text-slate-600 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Terms</a>
</div>
</div>
</div>
</footer>
<!-- Minimal JS: menu, search, category filter, load more -->
<script>
(function () {
// Utility
const $ = (sel, root = document) => root.querySelector(sel);
const $$ = (sel, root = document) => Array.from(root.querySelectorAll(sel));
// Elements
const mobileMenuBtn = $('#mobileMenuButton');
const mobileMenu = $('#mobileMenu');
const iconOpen = $('#iconOpen');
const iconClose = $('#iconClose');
const mobileSearchBtn = $('#mobileSearchButton');
const mobileSearch = $('#mobileSearch');
const searchDesktop = $('#searchDesktop');
const searchMobile = $('#searchMobile');
const chips = $$('.topic-chip');
const newsCards = $$('.news-card');
const newsGrid = $('#newsGrid');
const loadMoreBtn = $('#loadMoreBtn');
const emptyState = $('#emptyState');
const resetBtn = $('#resetFilters');
const resultCount = $('#resultCount');
// Style chips with Tailwind classes (no custom CSS)
chips.forEach((btn) => {
btn.className = "topic-chip inline-flex items-center rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2";
});
// Make "Semua" active initially
setChipActive('all');
// Small helpers
function setMenu(open) {
mobileMenu.classList.toggle('hidden', !open);
iconOpen.classList.toggle('hidden', open);
iconClose.classList.toggle('hidden', !open);
mobileMenuBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
mobileMenuBtn.setAttribute('aria-label', open ? 'Tutup menu' : 'Buka menu');
}
function setSearch(open) {
mobileSearch.classList.toggle('hidden', !open);
mobileSearchBtn.setAttribute('aria-expanded', open ? 'true' : 'false');
mobileSearchBtn.setAttribute('aria-label', open ? 'Tutup pencarian' : 'Buka pencarian');
if (open) setTimeout(() => searchMobile && searchMobile.focus(), 50);
}
function normalize(s) {
return (s || '').toString().toLowerCase().trim();
}
// Visible limit (Load more)
let visibleLimit = 6;
// Filters state
let activeCategory = 'all';
let activeQuery = '';
function setChipActive(filter) {
chips.forEach((b) => {
const isActive = b.dataset.filter === filter;
b.setAttribute('aria-selected', isActive ? 'true' : 'false');
b.className = isActive
? "topic-chip inline-flex items-center rounded-full border border-indigo-200 bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
: "topic-chip inline-flex items-center rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2";
});
}
function matchesFilters(card) {
const cat = card.dataset.category || '';
const title = card.dataset.title || '';
const excerpt = card.dataset.excerpt || '';
const query = activeQuery;
const catOk = (activeCategory === 'all') || (cat === activeCategory);
const qOk = !query || normalize(title).includes(query) || normalize(excerpt).includes(query);
return catOk && qOk;
}
function applyFilters() {
// First, determine which cards match filters
const matched = newsCards.filter(matchesFilters);
// Then apply limit
let shownCount = 0;
newsCards.forEach((card) => {
const ok = matched.includes(card);
if (!ok) {
card.classList.add('hidden');
return;
}
// If matched, show only within limit
shownCount++;
card.classList.toggle('hidden', shownCount > visibleLimit);
});
// Empty state
const anyVisible = newsCards.some((c) => !c.classList.contains('hidden'));
emptyState.classList.toggle('hidden', anyVisible);
// Result count
resultCount.textContent = matched.length
? `${matched.length} artikel ditemukan`
: `0 artikel ditemukan`;
// Load more button
const canLoadMore = matched.length > visibleLimit;
loadMoreBtn.classList.toggle('hidden', !canLoadMore);
}
function resetAll() {
activeCategory = 'all';
activeQuery = '';
visibleLimit = 6;
setChipActive('all');
if (searchDesktop) searchDesktop.value = '';
if (searchMobile) searchMobile.value = '';
applyFilters();
}
// Mobile menu events
mobileMenuBtn && mobileMenuBtn.addEventListener('click', () => {
const isHidden = mobileMenu.classList.contains('hidden');
setMenu(isHidden);
});
// Mobile search events
mobileSearchBtn && mobileSearchBtn.addEventListener('click', () => {
const isHidden = mobileSearch.classList.contains('hidden');
setSearch(isHidden);
});
// Close mobile menu/search on escape
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
setMenu(false);
setSearch(false);
}
});
// Close menu on anchor click
$$('#mobileMenu a[href^="#"]').forEach((a) => {
a.addEventListener('click', () => setMenu(false));
});
// Chips filter
chips.forEach((btn) => {
btn.addEventListener('click', () => {
activeCategory = btn.dataset.filter || 'all';
visibleLimit = 6; // reset pagination on filter change
setChipActive(activeCategory);
applyFilters();
// Scroll a bit to show results on mobile
const latest = document.getElementById('latest');
if (latest) latest.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
// Search (desktop & mobile)
function handleSearch(val) {
activeQuery = normalize(val);
visibleLimit = 6; // reset pagination on search
applyFilters();
}
searchDesktop && searchDesktop.addEventListener('input', (e) => handleSearch(e.target.value));
searchMobile && searchMobile.addEventListener('input', (e) => handleSearch(e.target.value));
// Load more
loadMoreBtn && loadMoreBtn.addEventListener('click', () => {
visibleLimit += 6;
applyFilters();
});
// Reset button
resetBtn && resetBtn.addEventListener('click', resetAll);
// Footer year
const yearEl = document.getElementById('year');
if (yearEl) yearEl.textContent = new Date().getFullYear();
// Tailwind helper classes for cards/badges/links (no external CSS)
// Add classes to specific elements via JS-less approach (we prepared class names in markup below).
// Ensure initial state
applyFilters();
})();
</script>
<!-- Tiny Tailwind-only component classes via markup (no custom CSS file)
Using repeated class strings but kept readable. -->
<script>
// Apply Tailwind classes to repeated elements without custom CSS.
(function () {
const cards = document.querySelectorAll('.news-card');
cards.forEach(card => {
card.classList.add(
'group','rounded-3xl','border','border-slate-200','bg-white','shadow-sm','overflow-hidden',
'transition','hover:-translate-y-0.5','hover:shadow-md'
);
});
const thumbs = document.querySelectorAll('.news-thumb');
thumbs.forEach(t => {
t.classList.add('h-44','w-full','opacity-90');
});
const titles = document.querySelectorAll('.title');
titles.forEach(t => {
t.classList.add('text-base','font-extrabold','tracking-tight','text-slate-900','group-hover:text-slate-950');
});
const excerpts = document.querySelectorAll('.excerpt');
excerpts.forEach(e => {
e.classList.add('text-sm','text-slate-600','leading-relaxed');
});
const metas = document.querySelectorAll('.meta');
metas.forEach(m => {
m.classList.add('text-xs','text-slate-600');
});
const readLinks = document.querySelectorAll('.read-link');
readLinks.forEach(a => {
a.classList.add(
'inline-flex','items-center','gap-2','rounded-xl','border','border-slate-200','bg-white',
'px-3','py-1.5','text-xs','font-semibold','text-slate-900','shadow-sm',
'transition','hover:bg-slate-50','hover:shadow',
'focus:outline-none','focus:ring-2','focus:ring-indigo-600','focus:ring-offset-2'
);
a.setAttribute('aria-label', 'Baca artikel');
});
// Badges
const badgeBase = ['inline-flex','items-center','rounded-full','px-2.5','py-1','text-xs','font-semibold'];
const badgeMap = {
'badge-ai': ['bg-indigo-50','text-indigo-700'],
'badge-data': ['bg-emerald-50','text-emerald-700'],
'badge-coding': ['bg-slate-100','text-slate-700'],
'badge-design': ['bg-indigo-50','text-indigo-700'],
'badge-marketing': ['bg-emerald-50','text-emerald-700'],
'badge-cyber': ['bg-slate-100','text-slate-700'],
'badge-product': ['bg-indigo-50','text-indigo-700'],
'badge-career': ['bg-slate-100','text-slate-700']
};
Object.keys(badgeMap).forEach(cls => {
document.querySelectorAll('.' + cls).forEach(b => {
b.classList.add(...badgeBase, ...badgeMap[cls]);
});
});
})();
</script>
</body>
</html>
Tidak ada komentar:
Posting Komentar