revisi dawg
This commit is contained in:
Araya's Project
@@ -593,7 +593,7 @@ const translations = {
|
||||
ape_testimonial_title: 'Apa Kata Mereka?',
|
||||
ape_testimonial_desc: 'Cerita inspiratif dari para penerima beasiswa Program Studi Informatika UNTAN',
|
||||
ape_cta_title: 'Ingin Mengetahui Info Lebih Lanjut?',
|
||||
ape_cta_desc: 'Hubungi admin prodi atau ikuti Instagram kemahasiswaan UNTAN untuk informasi terbaru tentang beasiswa dan program akademik.',
|
||||
ape_cta_desc: 'Hubungi admin prodi untuk informasi terbaru tentang beasiswa dan program akademik.',
|
||||
ape_cta_btn1: 'DAFTAR BEASISWA',
|
||||
ape_cta_btn2: 'Hubungi Kami',
|
||||
},
|
||||
@@ -1186,7 +1186,7 @@ const translations = {
|
||||
ape_testimonial_title: 'What They Say?',
|
||||
ape_testimonial_desc: 'Inspiring stories from scholarship recipients at UNTAN Informatics Study Program',
|
||||
ape_cta_title: 'Want to Know More?',
|
||||
ape_cta_desc: 'Contact the program admin or follow UNTAN student affairs Instagram for the latest scholarship and academic program information.',
|
||||
ape_cta_desc: 'Contact the program admin for the latest scholarship and academic program information.',
|
||||
ape_cta_btn1: 'SCHOLARSHIP LIST',
|
||||
ape_cta_btn2: 'Contact Us',
|
||||
}
|
||||
|
||||
@@ -21,11 +21,14 @@
|
||||
--shadow-card-hover: 0 8px 30px rgba(43, 69, 144, 0.15);
|
||||
--shadow-popup: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
--radius: 12px;
|
||||
--navbar-height: 108px; /* 60px top bar putih + 48px main nav kuning */
|
||||
--navbar-height: 108px;
|
||||
/* 60px top bar putih + 48px main nav kuning */
|
||||
}
|
||||
|
||||
/* ===== BASE RESET ===== */
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -45,8 +48,14 @@ body {
|
||||
}
|
||||
|
||||
/* ===== SCROLLBAR ===== */
|
||||
::-webkit-scrollbar { width: 5px; }
|
||||
::-webkit-scrollbar-track { background: #f1f5f9; }
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-primary);
|
||||
border-radius: 3px;
|
||||
@@ -80,28 +89,42 @@ body {
|
||||
|
||||
.navbar-logo-name {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
font-size: 1.125rem; /* text-lg = 18px */
|
||||
font-size: 1.125rem;
|
||||
/* text-lg = 18px */
|
||||
font-weight: 700;
|
||||
color: #ffffff;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.1em; /* tracking-widest */
|
||||
letter-spacing: 0.1em;
|
||||
/* tracking-widest */
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.navbar-logo-sub {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
|
||||
font-size: 10px; /* text-[10px] */
|
||||
font-size: 10px;
|
||||
/* text-[10px] */
|
||||
font-weight: 400;
|
||||
color: rgba(226, 232, 240, 0.9); /* text-slate-200 opacity-90 */
|
||||
letter-spacing: 0.15em; /* tracking-[0.15em] */
|
||||
color: rgba(226, 232, 240, 0.9);
|
||||
/* text-slate-200 opacity-90 */
|
||||
letter-spacing: 0.15em;
|
||||
/* tracking-[0.15em] */
|
||||
margin-top: 0.125rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.navbar-logo-name { font-size: 1.5rem; } /* lg:text-2xl = 24px */
|
||||
.navbar-logo-sub { font-size: 0.875rem; letter-spacing: 0.3em; } /* lg:text-sm, lg:tracking-[0.3em] */
|
||||
.navbar-logo-name {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* lg:text-2xl = 24px */
|
||||
.navbar-logo-sub {
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.3em;
|
||||
}
|
||||
|
||||
/* lg:text-sm, lg:tracking-[0.3em] */
|
||||
}
|
||||
|
||||
/* "SATU UNTAN" text */
|
||||
@@ -147,7 +170,9 @@ body {
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.navbar-search-btn:hover { color: #ffffff; }
|
||||
.navbar-search-btn:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Language Toggle — dark top bar */
|
||||
#lang-toggle {
|
||||
@@ -192,7 +217,9 @@ body {
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.navbar-main { display: flex; }
|
||||
.navbar-main {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* Nav links — teks gelap di atas latar kuning */
|
||||
@@ -240,7 +267,8 @@ body {
|
||||
/* Badge wrapper */
|
||||
.ticker-badge-block {
|
||||
flex-shrink: 0;
|
||||
background: rgba(0,0,0,0.15); /* Slightly darker than primary */
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
/* Slightly darker than primary */
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -297,8 +325,13 @@ body {
|
||||
}
|
||||
|
||||
@keyframes ticker-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== HERO SECTION ===== */
|
||||
@@ -411,7 +444,9 @@ body {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.hero-cta:hover i { transform: translateX(4px); }
|
||||
.hero-cta:hover i {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Hero image — foto lebih besar dan rounded sesuai Figma */
|
||||
.hero-image-wrap {
|
||||
@@ -641,14 +676,14 @@ body {
|
||||
color: #003150;
|
||||
}
|
||||
|
||||
/* ===== SCHOLARSHIP CARDS ===== */
|
||||
/* ===== SCHOLARSHIP CARDS — Schoters Style ===== */
|
||||
.scholarship-card {
|
||||
background: white;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-card);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 2px 16px rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
border: 1px solid #f0f4f8;
|
||||
border: 1px solid #eef2f8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@@ -656,134 +691,158 @@ body {
|
||||
}
|
||||
|
||||
.scholarship-card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
transform: translateY(-5px);
|
||||
border-color: rgba(43,69,144,0.1);
|
||||
box-shadow: 0 8px 32px rgba(0,49,80,0.12);
|
||||
transform: translateY(-4px);
|
||||
border-color: rgba(0,49,80,0.08);
|
||||
}
|
||||
|
||||
.card-img-wrap {
|
||||
width: 100%;
|
||||
height: 165px;
|
||||
overflow: hidden;
|
||||
background: #f0f4ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-img-wrap img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.scholarship-card:hover .card-img-wrap img {
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
/* ─── Card Body ─── */
|
||||
.card-body {
|
||||
padding: 16px;
|
||||
padding: 20px 20px 18px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.badge-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 3px 10px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
align-self: flex-start;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.badge-buka {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
|
||||
.badge-buka::before {
|
||||
content: '●';
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.badge-ditutup {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.badge-ditutup::before {
|
||||
content: '○';
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
/* ─── Title ─── */
|
||||
.card-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 12px;
|
||||
color: var(--color-accent);
|
||||
line-height: 1.55;
|
||||
margin: 0 0 6px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ─── Subtitle (Funding Type) ─── */
|
||||
.card-subtitle {
|
||||
font-size: 12.5px;
|
||||
color: #64748b;
|
||||
margin: 0 0 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ─── Pills Row ─── */
|
||||
.card-pills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 11.5px;
|
||||
font-weight: 600;
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
letter-spacing: 0.2px;
|
||||
}
|
||||
|
||||
.card-pill-level {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
/* ─── Divider ─── */
|
||||
.card-divider {
|
||||
border: none;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
/* ─── Two-column Date Row ─── */
|
||||
.card-dates {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.card-date-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.card-date-label {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.card-date-value {
|
||||
font-size: 12px;
|
||||
color: #64748b;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ─── Status Button ─── */
|
||||
.card-status-btn {
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
border: none;
|
||||
cursor: default;
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: #94a3b8;
|
||||
.status-btn-buka {
|
||||
background: #dcfce7;
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.card-date i {
|
||||
color: var(--color-secondary);
|
||||
font-size: 10px;
|
||||
.status-btn-ditutup {
|
||||
background: #fee2e2;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
.status-btn-segera {
|
||||
background: #fef9c3;
|
||||
color: #a16207;
|
||||
}
|
||||
|
||||
/* ─── Outline Selengkapnya Button ─── */
|
||||
.btn-selengkapnya {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
background: white;
|
||||
color: #0f172a;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--color-secondary);
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
transition: var(--transition);
|
||||
font-family: var(--font-inter);
|
||||
font-family: var(--font-sans);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-selengkapnya:hover {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
gap: 10px;
|
||||
background: #f8faff;
|
||||
}
|
||||
|
||||
/* Entrance animation */
|
||||
@keyframes fadeInCard {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.scholarship-card.fade-in-up {
|
||||
animation: fadeInCard 0.4s ease both;
|
||||
}
|
||||
|
||||
/* ===== EMPTY STATE ===== */
|
||||
@@ -1438,8 +1497,15 @@ footer {
|
||||
|
||||
/* ===== ANIMATIONS ===== */
|
||||
@keyframes fadeInUp {
|
||||
from { opacity: 0; transform: translateY(18px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
@@ -1455,36 +1521,76 @@ footer {
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 767px) {
|
||||
:root { --navbar-height: 104px; }
|
||||
:root {
|
||||
--navbar-height: 104px;
|
||||
}
|
||||
|
||||
.hero-section { padding: 32px 0 48px; min-height: auto; }
|
||||
.hero-title { font-size: 32px; }
|
||||
.hero-image-wrap { display: none; }
|
||||
.hero-section {
|
||||
padding: 32px 0 48px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.stats-section { padding: 24px 0; }
|
||||
.stat-item + .stat-item::before { display: none; }
|
||||
.hero-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.cta-card { padding: 40px 20px; }
|
||||
.hero-image-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-tabs { gap: 6px; }
|
||||
.filter-tab { padding: 7px 12px; font-size: 10px; }
|
||||
.stats-section {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.popup-modal { border-radius: 14px; }
|
||||
.popup-periode { grid-template-columns: 1fr; }
|
||||
.stat-item+.stat-item::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.testimonial-card { padding: 22px 16px; }
|
||||
.cta-card {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: 7px 12px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.popup-modal {
|
||||
border-radius: 14px;
|
||||
}
|
||||
|
||||
.popup-periode {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.testimonial-card {
|
||||
padding: 22px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1023px) {
|
||||
.hero-image-wrap img { height: 300px; }
|
||||
.hero-image-wrap img {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.hero-section { min-height: 540px; }
|
||||
.hero-section {
|
||||
min-height: 540px;
|
||||
}
|
||||
}
|
||||
@@ -61,12 +61,19 @@
|
||||
|
||||
async function getBeasiswa() {
|
||||
try {
|
||||
const data = await fetchRemote();
|
||||
return { data, source: 'remote' };
|
||||
} catch (err) {
|
||||
console.warn('[BeasiswaAPI] API remote gagal, fallback ke data lokal:', err.message);
|
||||
// Prioritas: data lokal (lengkap: url_sumber, syarat_umum, kontak tersedia)
|
||||
// Remote API digunakan hanya sebagai fallback jika data lokal tidak ditemukan.
|
||||
const data = await fetchLocal();
|
||||
return { data, source: 'local' };
|
||||
} catch (err) {
|
||||
console.warn('[BeasiswaAPI] Data lokal gagal, fallback ke API remote:', err.message);
|
||||
try {
|
||||
const data = await fetchRemote();
|
||||
return { data, source: 'remote' };
|
||||
} catch (remoteErr) {
|
||||
console.error('[BeasiswaAPI] Semua sumber gagal:', remoteErr.message);
|
||||
throw remoteErr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -32,7 +32,38 @@ function sanitize(str) {
|
||||
* Gunakan textContent/setAttribute — hindari langsung innerHTML dari user input
|
||||
*/
|
||||
function createCard(bsw) {
|
||||
const isBuka = bsw.status === 'Buka' || bsw.status === 'Dibuka';
|
||||
// Tentukan badge & warna tombol status
|
||||
let statusClass = 'status-btn-ditutup';
|
||||
let statusLabel = 'Ditutup';
|
||||
const statusLower = (bsw.status || '').toLowerCase();
|
||||
if (statusLower === 'buka' || statusLower === 'dibuka') {
|
||||
statusClass = 'status-btn-buka';
|
||||
statusLabel = 'Pendaftaran Dibuka';
|
||||
} else if (statusLower.includes('segera')) {
|
||||
statusClass = 'status-btn-segera';
|
||||
statusLabel = 'Segera Dibuka';
|
||||
}
|
||||
|
||||
// Ambil pills dari tags lokal: ["jenjang", "kategori/swasta/pemerintah", "negara", "tipe_pendanaan", ...]
|
||||
const tags = Array.isArray(bsw.tags) ? bsw.tags : [];
|
||||
const jenjang = tags[0] || '';
|
||||
|
||||
// Negara: cari tag yang bukan jenjang (S1/S2/S3), bukan kategori sumber (Swasta/Pemerintah),
|
||||
// dan bukan tipe pendanaan (Fully/Partially Funded)
|
||||
const skipPatterns = /^(S1|S2|S3|D3|D4|Swasta|Pemerintah|Fully Funded|Partially Funded|Beasiswa Penuh|Beasiswa Sebagian|Prestasi)$/i;
|
||||
const negara = tags.slice(1).find(t => !skipPatterns.test(t)) || '';
|
||||
|
||||
// Tipe pendanaan untuk subtitle — ambil dari kategori field atau dari deskripsi_singkat
|
||||
const tipe = bsw.kategori || '';
|
||||
|
||||
const pillsHtml = [jenjang, negara]
|
||||
.filter(Boolean)
|
||||
.map((t, i) => `<span class="card-pill ${i === 0 ? 'card-pill-level' : ''}">${t}</span>`)
|
||||
.join('');
|
||||
|
||||
// Subtitle: hindari duplikasi "Beasiswa Beasiswa ..."
|
||||
const rawTipe = tipe.replace(/^beasiswa\s+/i, '');
|
||||
const subtitle = rawTipe ? `Beasiswa ${rawTipe}` : '';
|
||||
|
||||
const article = document.createElement('article');
|
||||
article.className = 'scholarship-card fade-in-up';
|
||||
@@ -40,34 +71,27 @@ function createCard(bsw) {
|
||||
article.setAttribute('data-id', bsw.id);
|
||||
|
||||
article.innerHTML = `
|
||||
<div class="card-img-wrap">
|
||||
<img
|
||||
src="${bsw.thumbnail}"
|
||||
alt="${bsw.nama}"
|
||||
class="card-img"
|
||||
loading="lazy"
|
||||
onerror="this.style.display='none';this.parentElement.style.background='#eef2ff';this.parentElement.innerHTML+='<i class=\\'fas fa-graduation-cap\\' style=\\'font-size:40px;color:#c7d2fe;\\'></i>'"
|
||||
>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="badge-status ${isBuka ? 'badge-buka' : 'badge-ditutup'}">
|
||||
${bsw.status}
|
||||
</span>
|
||||
<h3 class="card-title">${bsw.nama}</h3>
|
||||
<p class="card-desc">${bsw.deskripsi_singkat}</p>
|
||||
<div class="card-date">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
<span>${formatDate(bsw.tanggal_tutup)}</span>
|
||||
${subtitle ? `<p class="card-subtitle">${subtitle}</p>` : ''}
|
||||
${pillsHtml ? `<div class="card-pills">${pillsHtml}</div>` : ''}
|
||||
<hr class="card-divider">
|
||||
<div class="card-dates">
|
||||
<div class="card-date-col">
|
||||
<span class="card-date-label">Mulai</span>
|
||||
<span class="card-date-value">${formatDate(bsw.tanggal_buka)}</span>
|
||||
</div>
|
||||
<div class="card-date-col">
|
||||
<span class="card-date-label">Deadline</span>
|
||||
<span class="card-date-value">${formatDate(bsw.tanggal_tutup)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="card-status-btn ${statusClass}" disabled>${statusLabel}</button>
|
||||
<button
|
||||
class="btn-selengkapnya"
|
||||
onclick="openPopup('${bsw.id}')"
|
||||
aria-label="Lihat detail beasiswa ${bsw.nama}"
|
||||
>
|
||||
Selengkapnya <i class="fas fa-arrow-right" style="font-size:10px;"></i>
|
||||
</button>
|
||||
>Selengkapnya</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@@ -51,14 +51,6 @@ function openPopup(id) {
|
||||
|
||||
// Render konten popup
|
||||
popupBody.innerHTML = `
|
||||
<!-- Thumbnail / Hero gambar -->
|
||||
<img
|
||||
src="${bsw.thumbnail || ''}"
|
||||
alt="${bsw.nama}"
|
||||
class="popup-hero"
|
||||
onerror="this.style.display='none'"
|
||||
>
|
||||
|
||||
<div class="popup-body">
|
||||
<!-- Badge status + kategori -->
|
||||
<div class="popup-kategori-row">
|
||||
|
||||
@@ -1293,13 +1293,6 @@
|
||||
Temukan beragam beasiswa dari berbagai sumber resmi yang tersedia untuk mahasiswa aktif.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 mt-2" data-aos="fade-left">
|
||||
<!-- Button "Buku Panduan Beasiswa" -->
|
||||
<a href="#" class="btn-panduan" aria-label="Unduh Buku Panduan Beasiswa">
|
||||
<i class="far fa-file-alt"></i>
|
||||
<span data-i18n="ape_dir_guide">Buku Panduan Beasiswa</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter & Search Row (UC-02, UC-03) -->
|
||||
@@ -1366,74 +1359,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================
|
||||
POPUP MODAL HUBUNGI KAMI
|
||||
================================================ -->
|
||||
<div id="contact-overlay"
|
||||
class="fixed inset-0 z-[2000] hidden items-center justify-center p-4 transition-opacity duration-300 opacity-0"
|
||||
role="dialog" aria-modal="true" aria-labelledby="contact-title">
|
||||
<!-- Backdrop -->
|
||||
<div id="contact-backdrop" class="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-pointer">
|
||||
</div>
|
||||
|
||||
<!-- Modal Card -->
|
||||
<div class="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col transform transition-transform duration-300 scale-95"
|
||||
id="contact-modal">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="bg-[#003150] px-6 py-4 flex items-center justify-between">
|
||||
<h3 id="contact-title" class="text-white font-bold font-serif m-0 text-lg">Hubungi Kami</h3>
|
||||
<button id="contact-close"
|
||||
class="text-white/70 hover:text-white transition-colors bg-transparent border-none cursor-pointer p-0"
|
||||
style="background: transparent; border: none; outline: none;" aria-label="Tutup">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="p-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
|
||||
<!-- Card Admin WhatsApp -->
|
||||
<div
|
||||
class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(34,197,94,0.12)] transition-shadow">
|
||||
<div
|
||||
class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4 text-green-500 text-2xl">
|
||||
<i class="fab fa-whatsapp"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 mb-1">Admin Beasiswa</h4>
|
||||
<p class="text-xs text-gray-500 mb-6">Senin - Jumat | 08.00 - 15.00 WIB</p>
|
||||
<a href="https://wa.me/628115719999" target="_blank" rel="noopener noreferrer"
|
||||
class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-[#25D366] hover:bg-[#1ebd57] text-white text-sm font-semibold rounded-lg transition-colors gap-2">
|
||||
Chat Whatsapp <i class="fas fa-arrow-right text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Card Instagram -->
|
||||
<div
|
||||
class="bg-white border border-gray-100 rounded-xl p-6 text-center shadow-[0_4px_20px_rgba(0,0,0,0.04)] hover:shadow-[0_10px_30px_rgba(236,72,153,0.12)] transition-shadow">
|
||||
<div
|
||||
class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-4 text-pink-500 text-2xl">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</div>
|
||||
<h4 class="font-bold text-gray-900 mb-1">@kemahasiswaan.untan</h4>
|
||||
<p class="text-xs text-gray-500 mb-6">Informasi Beasiswa Terkini</p>
|
||||
<a href="https://instagram.com/kemahasiswaan.untan" target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center justify-center w-full py-2.5 px-4 bg-gradient-to-r from-[#833AB4] via-[#FD1D1D] to-[#F56040] hover:opacity-90 text-white text-sm font-semibold rounded-lg transition-colors gap-2">
|
||||
Buka Instagram <i class="fas fa-arrow-right text-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="text-center text-[10px] text-gray-400 m-0">*Pastikan WhatsApp Kamu aktif sebelum
|
||||
menghubungi admin.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ================================================
|
||||
TESTIMONI (#testimonial) — UC-07
|
||||
================================================ -->
|
||||
@@ -1478,9 +1403,9 @@
|
||||
<span data-i18n="ape_cta_btn1">Daftar Beasiswa</span>
|
||||
</a>
|
||||
<!-- Kontak CTA -->
|
||||
<button id="btn-open-contact" class="cta-btn-secondary" aria-label="Hubungi admin">
|
||||
<a id="btn-open-contact" class="cta-btn-secondary" aria-label="Hubungi admin" href="https://wa.me/+6285171655161">
|
||||
<span data-i18n="ape_cta_btn2">Hubungi Kami</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user