izu/student-web-if-development-kit
2
0
Fork 11
Code Issues Pull Requests 4 Actions Packages Projects Releases Wiki Activity
Files
034c9589099fcffe989d42e9ba03ee3d9d044f8a
student-web-if-development-kit/groups/Tapops/js/templates/main-content-template.js
T
Dodo 1270ce60fd refactor(tapops): modularize page code
2026-06-04 18:13:23 +07:00

279 lines
20 KiB
JavaScript
Raw Blame History

export function mainContentTemplate() {
return `<main id="main-content" class="tapops-doc-root pt-[72px] lg:pt-[160px]">
<!-- ═══════════════════════════════════════
HERO
═══════════════════════════════════════ -->
<section class="research-hero immersive-hero">
<div class="hero-container-centered">
<span class="hero-kicker" data-tp-i18n="hero_kicker">Digital Administrative Hub</span>
<h2 class="hero-title" data-tp-i18n="hero_title">Administrasi Akademik Digital</h2>
<p class="hero-tagline" data-tp-i18n="hero_tagline">
Satu pintu menuju semua dokumen penting. Akses terpusat menuju repositori dokumen akademik Program Studi
Informatika Universitas Tanjungpura untuk mahasiswa dan staf.
</p>
<div class="hero-actions">
<a href="#repository" class="btn-join"><span data-tp-i18n="hero_btn_search">Cari Dokumen</span> <i class="fas fa-search"></i></a>
<a href="#procedures" class="btn-outline"><span data-tp-i18n="hero_btn_flow">ALUR PENGAJUAN</span> <i class="fas fa-chevron-right"></i></a>
</div>
</div>
<div class="hero-floating-stat-bar">
<div class="stat-bar-item">
<span class="stat-bar-value" id="stat-active-value">—</span>
<span class="stat-bar-label" data-tp-i18n="stat_active">Dokumen Aktif</span>
</div>
<div class="stat-bar-divider"></div>
<div class="stat-bar-item">
<span class="stat-bar-value" id="stat-updates-value">—</span>
<span class="stat-bar-label" data-tp-i18n="stat_updates">Pembaruan Terbaru</span>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
DOCUMENT REPOSITORY
═══════════════════════════════════════ -->
<section id="repository" class="documents-section">
<div class="repo-dashboard-container">
<!-- Sidebar Filter -->
<aside class="repo-sidebar">
<div class="sidebar-sticky">
<h3 class="sidebar-title" data-tp-i18n="sidebar_category">KATEGORI BERKAS</h3>
<div class="document-filter-wrapper" id="tag-filter-wrapper">
<!-- Filter buttons are built dynamically from API tags by main.js -->
<div class="filter-skeleton">
<div class="filter-skeleton-item"></div>
<div class="filter-skeleton-item short"></div>
<div class="filter-skeleton-item"></div>
<div class="filter-skeleton-item short"></div>
</div>
</div>
<div class="sidebar-info-box">
<i class="fas fa-info-circle"></i>
<p data-tp-i18n="sidebar_info">Pastikan mengunduh versi terbaru untuk menjamin validitas berkas pengajuan.</p>
</div>
</div>
</aside>
<!-- Main Document Area (div, not main — only one <main> per page) -->
<div class="repo-main-content">
<div class="repo-content-header">
<div class="header-title-area">
<h2 class="section-title" data-tp-i18n="repo_title">Eksplorasi Dokumen Prodi</h2>
<p class="section-subtitle" data-tp-i18n="repo_subtitle">Temukan berkas administrasi dan akademik terbaru Program Studi
Informatika.</p>
</div>
<div class="repo-controls">
<div class="search-container">
<div class="search-input-group">
<i class="fas fa-search search-icon"></i>
<input type="text" id="doc-search" data-tp-i18n-placeholder="search_ph" placeholder="Cari nama berkas atau kata kunci...">
</div>
</div>
<div class="filter-controls">
<div class="control-group date-range-group" id="date-range-control-group">
<span class="control-label" data-tp-i18n="label_period">Periode Unggahan</span>
<button type="button" id="date-picker-trigger" class="date-picker-trigger">
<div class="trigger-left-content">
<i class="far fa-calendar-alt"></i>
<span id="date-picker-label" data-tp-i18n="filter_all_time">Semua Waktu</span>
</div>
<i class="fas fa-chevron-down trigger-arrow"></i>
</button>
<div id="date-picker-backdrop" class="date-picker-backdrop"></div>
<div id="date-picker-popover" class="date-picker-popover">
<div class="date-picker-top-bar">
<div class="date-display-inputs">
<div class="date-display-field">
<input type="text" id="picker-start-display" placeholder="DD/MM/YYYY">
</div>
<span class="date-picker-separator">-</span>
<div class="date-display-field">
<input type="text" id="picker-end-display" placeholder="DD/MM/YYYY">
</div>
</div>
</div>
<div class="date-picker-body">
<div class="calendar-container">
<div class="calendar-nav">
<button type="button" id="prev-month-btn" class="nav-btn"><i class="fas fa-chevron-left"></i></button>
<div class="month-labels">
<div id="left-month-label" class="month-label">
<span id="left-month-name">Mei</span>
<div class="year-select-wrapper">
<select id="left-year-select" class="calendar-year-select"></select>
<i class="fas fa-chevron-down select-arrow"></i>
</div>
</div>
<div id="right-month-label" class="month-label">
<span id="right-month-name">Juni</span>
<div class="year-select-wrapper">
<select id="right-year-select" class="calendar-year-select"></select>
<i class="fas fa-chevron-down select-arrow"></i>
</div>
</div>
</div>
<button type="button" id="next-month-btn" class="nav-btn"><i class="fas fa-chevron-right"></i></button>
</div>
<div class="calendar-grids">
<div class="calendar-grid-pane" id="left-calendar-pane">
<div class="day-headers"></div>
<div class="days-container" id="left-days-container"></div>
</div>
<div class="calendar-grid-pane" id="right-calendar-pane">
<div class="day-headers"></div>
<div class="days-container" id="right-days-container"></div>
</div>
</div>
</div>
<div class="presets-container">
<span class="presets-title" data-tp-i18n="presets_title">RENTANG WAKTU</span>
<div class="presets-list">
<button type="button" class="preset-btn" data-preset="all" data-tp-i18n="filter_all_time">Semua Waktu</button>
<button type="button" class="preset-btn" data-preset="today" data-tp-i18n="preset_today">Hari Ini</button>
<button type="button" class="preset-btn" data-preset="yesterday" data-tp-i18n="preset_yesterday">Kemarin</button>
<button type="button" class="preset-btn" data-preset="last7" data-tp-i18n="preset_last_7_days">7 Hari Terakhir</button>
<button type="button" class="preset-btn" data-preset="last14" data-tp-i18n="preset_last_14_days">14 Hari Terakhir</button>
<button type="button" class="preset-btn" data-preset="last30" data-tp-i18n="preset_last_30_days">30 Hari Terakhir</button>
<button type="button" class="preset-btn" data-preset="thisWeek" data-tp-i18n="preset_this_week">Minggu Ini</button>
<button type="button" class="preset-btn" data-preset="lastWeek" data-tp-i18n="preset_last_week">Minggu Lalu</button>
<button type="button" class="preset-btn" data-preset="thisMonth" data-tp-i18n="preset_this_month">Bulan Ini</button>
<button type="button" class="preset-btn" data-preset="lastMonth" data-tp-i18n="preset_last_month">Bulan Lalu</button>
</div>
</div>
</div>
<div class="date-picker-footer">
<button type="button" id="picker-cancel-btn" class="action-btn cancel-btn" data-tp-i18n="btn_cancel">Batal</button>
<button type="button" id="picker-apply-btn" class="action-btn apply-btn" data-tp-i18n="btn_update">Perbarui</button>
</div>
</div>
</div>
<div class="control-group">
<span class="control-label" data-tp-i18n="label_sort">Urutkan</span>
<div id="sort-filter-wrapper"></div>
</div>
<div class="control-group mobile-category-control-group">
<span class="control-label" data-tp-i18n="sidebar_category">Kategori Berkas</span>
<div id="mobile-tag-filter-wrapper"></div>
</div>
</div>
</div>
</div>
<div class="document-grid" id="document-grid">
<div class="repo-loading" style="grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--primary-blue); font-weight: 700; font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 15px;">
<i class="fas fa-circle-notch fa-spin" style="font-size: 2.5rem; color: var(--secondary-gold);"></i>
<span data-tp-i18n="loading">Menghubungkan ke repositori berkas...</span>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
PROCEDURES
═══════════════════════════════════════ -->
<section id="procedures" class="journey-section">
<div class="journey-container">
<div class="section-header centered">
<h2 class="section-title" data-tp-i18n="proc_title">Tata Cara Pengajuan Berkas</h2>
<span class="section-tag" data-tp-i18n="proc_tag">Alur Pengajuan</span>
</div>
<div class="process-flow-wrapper">
<!-- Step 01 -->
<div class="process-step">
<div class="step-visual">
<div class="step-icon-box"><i class="fas fa-file-download"></i></div>
<div class="step-number-badge">01</div>
<div class="step-connector"></div>
</div>
<div class="step-content">
<h3 data-tp-i18n="proc_s1_h">Unduh Formulir</h3>
<p data-tp-i18n="proc_s1_p">Pilih kategori pengajuan Anda, lalu unduh formulir versi terbaru. Pastikan kode revisi pada formulir sesuai dengan yang tertera di halaman ini.</p>
</div>
</div>
<!-- Step 02 -->
<div class="process-step">
<div class="step-visual">
<div class="step-icon-box"><i class="fas fa-edit"></i></div>
<div class="step-number-badge">02</div>
<div class="step-connector"></div>
</div>
<div class="step-content">
<h3 data-tp-i18n="proc_s2_h">Lengkapi Formulir</h3>
<p data-tp-i18n="proc_s2_p">Isi setiap kolom dengan lengkap dan teliti. Sertakan seluruh dokumen pendukung yang diminta sebelum pengiriman.</p>
</div>
</div>
<!-- Step 03 -->
<div class="process-step">
<div class="step-visual">
<div class="step-icon-box"><i class="fas fa-paper-plane"></i></div>
<div class="step-number-badge">03</div>
</div>
<div class="step-content">
<h3 data-tp-i18n="proc_s3_h">Kirim Berkas</h3>
<p data-tp-i18n="proc_s3_p">Kirimkan formulir beserta dokumen pendukung melalui email resmi atau WhatsApp admin prodi. Berkas yang lengkap akan langsung diproses oleh admin prodi.</p>
</div>
</div>
</div>
</div>
</section>
<!-- ═══════════════════════════════════════
HELP CENTER
═══════════════════════════════════════ -->
<section id="help" class="help-center-section">
<div class="help-container">
<div class="help-header-centered">
<h2 class="section-title" data-tp-i18n="help_title">Butuh Bantuan Lebih Lanjut?</h2>
<p data-tp-i18n="help_desc">Tim admin kami siap membantu Anda melalui kanal komunikasi resmi di bawah ini.</p>
</div>
<div class="help-cards-grid">
<div class="interaction-card help-official">
<div class="card-inner">
<div class="card-icon"><i class="fas fa-envelope-open-text"></i></div>
<h3 data-tp-i18n="help_email_title">Korespondensi Resmi (Email)</h3>
<p data-tp-i18n="help_email_desc">Gunakan untuk permohonan form khusus non-publik atau administrasi formal lainnya.</p>
<ul class="card-checklist">
<li><i class="fas fa-check"></i> <span data-tp-i18n="help_email_c1">Respon Maks. 24 Jam</span></li>
<li><i class="fas fa-check"></i> <span data-tp-i18n="help_email_c2">Pelayanan Formal</span></li>
</ul>
<a href="https://mail.google.com/mail/?view=cm&fs=1&to=admin@informatika.untan.ac.id&su=Layanan%20Administrasi%20%26%20CS%20Informatika%20UNTAN&body=Halo%20Admin%20Prodi%20Informatika%20UNTAN%2C%0A%0ASaya%20ingin%20mengajukan%20permohonan%20%2F%20melaporkan%20kendala%20terkait%20administrasi%20akademik.%20Berikut%20detail%20informasi%20saya%3A%0A%0ANama%3A%20%5BNama%20Lengkap%20Anda%5D%0ANIM%3A%20%5BNIM%20Anda%5D%0AKategori%20Layanan%3A%20%5BTata%20Cara%20Pengajuan%20%2F%20Kendala%20Teknis%20%26%20CS%5D%0A%0ADetail%20Masalah%20%2F%20Pengajuan%3A%0A%5BTuliskan%20pertanyaan%2C%20detail%20pengajuan%2C%20atau%20kendala%20Anda%20di%20sini...%5D%0A%0ATerima%20kasih." target="_blank" rel="noopener noreferrer" class="btn-interaction"><span data-tp-i18n="help_email_btn">HUBUNGI ADMIN</span> <i class="fas fa-paper-plane"></i></a>
</div>
</div>
<div class="interaction-card help-urgent">
<div class="card-inner">
<div class="card-icon"><i class="fab fa-whatsapp"></i></div>
<h3 data-tp-i18n="help_wa_title">Quick Support (WhatsApp)</h3>
<p data-tp-i18n="help_wa_desc">Konsultasi cepat alur birokrasi atau pelaporan kendala akses pada berkas repositori.</p>
<ul class="card-checklist">
<li><i class="fas fa-check"></i> <span data-tp-i18n="help_wa_c1">Respon Instan Jam Kerja</span></li>
<li><i class="fas fa-check"></i> <span data-tp-i18n="help_wa_c2">Konsultasi Teknis</span></li>
</ul>
<a href="https://wa.me/6285171655161?text=Halo%20Admin%20Prodi%20Informatika%20UNTAN%2C%0A%0ASaya%20ingin%20mengajukan%20permohonan%20%2F%20melaporkan%20kendala%20terkait%20administrasi%20akademik.%20Berikut%20detail%20informasi%20saya%3A%0A%0ANama%3A%20%5BNama%20Lengkap%20Anda%5D%0ANIM%3A%20%5BNIM%20Anda%5D%0AKategori%20Layanan%3A%20%5BTata%20Cara%20Pengajuan%20%2F%20Kendala%20Teknis%20%26%20CS%5D%0A%0ADetail%20Masalah%20%2F%20Pengajuan%3A%0A%5BTuliskan%20pertanyaan%2C%20detail%20pengajuan%2C%20atau%20kendala%20Anda%20di%20sini...%5D%0A%0ATerima%20kasih." target="_blank" rel="noopener noreferrer" class="btn-interaction-alt"><span data-tp-i18n="help_wa_btn">CHAT WHATSAPP</span> <i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
</div>
</section>
</main>`;
}
Reference in New Issue View Git Blame Copy Permalink