forked from izu/student-web-if-development-kit
1562 lines
68 KiB
HTML
1562 lines
68 KiB
HTML
<!doctype html>
|
||
<html lang="id">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Group 05 — Alumni Informatika UNTAN</title>
|
||
<link rel="stylesheet" href="./style.css" />
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- ══ NAV ══ -->
|
||
<header class="nav">
|
||
<div class="container">
|
||
<div class="brand">Informatika UNTAN — Static Assignment</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ══ HERO ══ -->
|
||
<section class="hero-custom custom-hero-m4n1fest">
|
||
<div class="custom-hero-container">
|
||
<div class="custom-hero-label">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
|
||
<path d="M22 10v6M2 10l10-5 10 5-10 5z"/>
|
||
<path d="M6 12v5c3 3 9 3 12 0v-5"/>
|
||
</svg>
|
||
PROGRAM STUDI INFORMATIKA · UNTAN PONTIANAK
|
||
</div>
|
||
<h1 class="custom-hero-title">
|
||
<span>Alumni</span><br>
|
||
<span class="custom-text-yellow custom-serif">Informatika</span>
|
||
</h1>
|
||
<h2 class="custom-hero-subtitle custom-serif">UNTAN Pontianak</h2>
|
||
|
||
<p class="custom-hero-desc">
|
||
Ribuan lulusan Informatika UNTAN kini berkarya di berbagai penjuru Indonesia dan dunia. Temukan jejak mereka, inspirasi dari perjalanan mereka, dan jadilah bagian dari jaringan ini.
|
||
</p>
|
||
|
||
<div class="custom-hero-buttons">
|
||
<a href="#database" class="custom-btn-primary">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
|
||
</svg>
|
||
Lihat Statistik Alumni
|
||
</a>
|
||
<a href="#kontribusi" class="custom-btn-secondary">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="9" cy="7" r="4"></circle>
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||
</svg>
|
||
Gabung Grup IKA
|
||
</a>
|
||
</div>
|
||
|
||
<div class="custom-stats">
|
||
<div class="custom-stat-box">
|
||
<div class="custom-stat-num custom-serif">850<span class="custom-stat-plus">+</span></div>
|
||
<div class="custom-stat-label">TOTAL ALUMNI</div>
|
||
</div>
|
||
<div class="custom-stat-box">
|
||
<div class="custom-stat-num custom-serif">18<span class="custom-stat-plus">+</span></div>
|
||
<div class="custom-stat-label">ANGKATAN</div>
|
||
</div>
|
||
<div class="custom-stat-box" style="border-right: none;">
|
||
<div class="custom-stat-num custom-serif">150<span class="custom-stat-plus">+</span></div>
|
||
<div class="custom-stat-label">PERUSAHAAN</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ MAIN LAYOUT ══ -->
|
||
<main class="container layout" style="display: block; width: 100%;">
|
||
<article style="width: 100%;">
|
||
|
||
<!-- ================= START: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||
<div id="assignment-body" class="article-body" style="max-width: 1100px; margin: 0 auto;">
|
||
<!-- ─────────────────────────────────────────
|
||
2. HIGH ACHIEVERS
|
||
───────────────────────────────────────── -->
|
||
<section id="achievers" style="padding: 56px 0 40px">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow">High Achievers</div>
|
||
<h2 class="sec-h2">Alumni <em>Informatika</em></h2>
|
||
<p class="sec-sub" style="max-width: 440px; margin: 10px auto 0">
|
||
Mereka membuktikan bahwa lulusan Informatika UNTAN mampu
|
||
bersaing dan berkarya di level tertinggi.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="achiever-grid">
|
||
<!-- Card 1 -->
|
||
<div class="achiever-card rv d1">
|
||
<div class="achiever-body">
|
||
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #1a3a6b, #2352a0);">
|
||
<span class="achiever-initials">IF</span>
|
||
</div>
|
||
<div class="achiever-batch">Angkatan 2005</div>
|
||
<div class="achiever-name">Izhan Fakhruzi</div>
|
||
<div class="achiever-pos">
|
||
Dosen Tetap, Univ Muhammadiyah Pontianak & Peneliti, Universidad de Granada
|
||
</div>
|
||
<ul class="achiever-achievements">
|
||
<li>M.Sc. Computer Engineering, Marmara University</li>
|
||
<li>Ph.D. in Info & Comm Tech, Universidad de Granada</li>
|
||
<li>Berpengalaman dalam penelitian AI lintas negara</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Card 2 -->
|
||
<div class="achiever-card rv d2">
|
||
<div class="achiever-body">
|
||
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #0f766e, #14b8a6);">
|
||
<span class="achiever-initials">CD</span>
|
||
</div>
|
||
<div class="achiever-batch">Informatika UNTAN</div>
|
||
<div class="achiever-name">Charles Darwis Hariman</div>
|
||
<div class="achiever-pos">
|
||
Software Developer, Traxpay GmbH, Jerman
|
||
</div>
|
||
<ul class="achiever-achievements">
|
||
<li>M.Sc. Computer Science, Saarland University</li>
|
||
<li>Berkarir di industri FinTech Eropa</li>
|
||
<li>Pakar sistem pembayaran digital & integrasi ERP</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- Card 3 -->
|
||
<div class="achiever-card rv d3">
|
||
<div class="achiever-body">
|
||
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #3730a3, #6366f1);">
|
||
<span class="achiever-initials">DP</span>
|
||
</div>
|
||
<div class="achiever-batch">Angkatan 2009</div>
|
||
<div class="achiever-name">Dona Pramana Pura</div>
|
||
<div class="achiever-pos">
|
||
Product Manager, CX-Oriented Tech, Ai Tech
|
||
</div>
|
||
<ul class="achiever-achievements">
|
||
<li>AI Practitioner berfokus pada Voice AI</li>
|
||
<li>Merancang produk teknologi berbasis Customer Experience</li>
|
||
<li>Inovator solusi AI di berbagai platform</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
3. CAREER PATH
|
||
───────────────────────────────────────── -->
|
||
<section id="career">
|
||
<div class="section-inner">
|
||
<div class="two-col">
|
||
<!-- left: bars -->
|
||
<div class="rv">
|
||
<div class="eyebrow">Career Path</div>
|
||
<h2 class="sec-h2">Alumni Bekerja di <em>Mana?</em></h2>
|
||
<p class="sec-sub" style="margin-bottom: 24px">
|
||
Sebaran industri tempat alumni berkarir.
|
||
</p>
|
||
|
||
<div class="industry-row rv d1">
|
||
<div class="industry-labels">
|
||
<span class="industry-label"
|
||
>Instansi pemerintah</span
|
||
>
|
||
<span class="industry-pct">29.41%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 29.41%;
|
||
background: linear-gradient(90deg, #1a3a6b, #3b6cc7);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="industry-row rv d2">
|
||
<div class="industry-labels">
|
||
<span class="industry-label">Perusahaan swasta</span>
|
||
<span class="industry-pct">23.53%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 23.53%;
|
||
background: linear-gradient(90deg, #2352a0, #3b6cc7);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="industry-row rv d2">
|
||
<div class="industry-labels">
|
||
<span class="industry-label">Wiraswasta/perusahaan sendiri</span>
|
||
<span class="industry-pct">14.71%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 14.71%;
|
||
background: linear-gradient(90deg, #3b6cc7, #5b8ce8);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="industry-row rv d3">
|
||
<div class="industry-labels">
|
||
<span class="industry-label">BUMN/BUMD</span>
|
||
<span class="industry-pct">5.88%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 5.88%;
|
||
background: linear-gradient(90deg, #f5b800, #ffda5a);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="industry-row rv d3">
|
||
<div class="industry-labels">
|
||
<span class="industry-label"
|
||
>Organisasi non-profit/LSM</span
|
||
>
|
||
<span class="industry-pct">2.94%</span>
|
||
</div>
|
||
<div class="industry-track">
|
||
<div
|
||
class="industry-fill"
|
||
style="
|
||
width: 2.94%;
|
||
background: linear-gradient(90deg, #059669, #34d399);
|
||
"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="note-tiny">
|
||
* Data diperoleh dari data Tracer Study Untan. Diperbarui terakhir Mei 2026.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- right: company logos -->
|
||
<div class="rv d2">
|
||
<div
|
||
style="
|
||
font-size: 0.76rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
color: #6b7280;
|
||
margin-bottom: 14px;
|
||
"
|
||
>
|
||
Perusahaan Tempat Alumni Berkarir
|
||
</div>
|
||
<div class="logo-grid">
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #ebf1fb; color: #1a3a6b"
|
||
>
|
||
BCA
|
||
</div>
|
||
<span class="logo-name">BCA</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #fff0f0; color: #c00"
|
||
>
|
||
BRI
|
||
</div>
|
||
<span class="logo-name">BRI</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #fff7e6; color: #f5b800"
|
||
>
|
||
TLKM
|
||
</div>
|
||
<span class="logo-name">Telkom Indonesia</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #ebf1fb; color: #0a66c2"
|
||
>
|
||
PLN
|
||
</div>
|
||
<span class="logo-name">PLN</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #f0f0ff; color: #3730a3"
|
||
>
|
||
INDF
|
||
</div>
|
||
<span class="logo-name">Indofood Fortuna</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #fff0f5; color: #ee4d2d"
|
||
>
|
||
ASTR
|
||
</div>
|
||
<span class="logo-name">Astra Daihatsu</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #f0fff4; color: #15803d"
|
||
>
|
||
UNVR
|
||
</div>
|
||
<span class="logo-name">Unilever</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #f0fff4; color: #16a34a"
|
||
>
|
||
GRAB
|
||
</div>
|
||
<span class="logo-name">Grab</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #fff0f0; color: #c00"
|
||
>
|
||
TSEL
|
||
</div>
|
||
<span class="logo-name">Telkomsel</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #ebf1fb; color: #0866ff"
|
||
>
|
||
GIAA
|
||
</div>
|
||
<span class="logo-name">Garuda Indonesia</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #fffbea; color: #b38500"
|
||
>
|
||
BULG
|
||
</div>
|
||
<span class="logo-name">Perum BULOG</span>
|
||
</div>
|
||
<div class="logo-card">
|
||
<div
|
||
class="logo-initials"
|
||
style="background: #f3f4f6; color: #4b5563"
|
||
>
|
||
202+
|
||
</div>
|
||
<span class="logo-name" style="color: #6b7280"
|
||
>Lainnya</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<p class="note-tiny" style="margin-top: 24px;">
|
||
* Data diperoleh dari data Tracer Study Untan. Diperbarui terakhir Mei 2026.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
4. SKILL DISTRIBUTION
|
||
───────────────────────────────────────── -->
|
||
<section id="skill" style="padding: 52px 0 40px">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow">Skill Distribution</div>
|
||
<h2 class="sec-h2">Skill yang <em>Dikuasai Alumni</em></h2>
|
||
<p class="sec-sub" style="max-width: 440px; margin: 10px auto 0">
|
||
Distribusi skill berdasarkan data form kontribusi alumni —
|
||
gambaran kompetensi nyata lulusan Informatika UNTAN.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="two-col">
|
||
<!-- bars -->
|
||
<div class="rv">
|
||
<div class="skill-row">
|
||
<span class="skill-label">Web Development</span>
|
||
<div class="skill-track">
|
||
<div class="skill-fill" style="width: 78%"></div>
|
||
</div>
|
||
<span class="skill-pct">78%</span>
|
||
</div>
|
||
<div class="skill-row">
|
||
<span class="skill-label">Python / Data Science</span>
|
||
<div class="skill-track">
|
||
<div class="skill-fill" style="width: 65%"></div>
|
||
</div>
|
||
<span class="skill-pct">65%</span>
|
||
</div>
|
||
<div class="skill-row">
|
||
<span class="skill-label">Mobile Development</span>
|
||
<div class="skill-track">
|
||
<div class="skill-fill" style="width: 54%"></div>
|
||
</div>
|
||
<span class="skill-pct">54%</span>
|
||
</div>
|
||
<div class="skill-row">
|
||
<span class="skill-label">UI/UX Design</span>
|
||
<div class="skill-track">
|
||
<div class="skill-fill" style="width: 48%"></div>
|
||
</div>
|
||
<span class="skill-pct">48%</span>
|
||
</div>
|
||
<div class="skill-row">
|
||
<span class="skill-label">Networking / DevOps</span>
|
||
<div class="skill-track">
|
||
<div class="skill-fill" style="width: 38%"></div>
|
||
</div>
|
||
<span class="skill-pct">38%</span>
|
||
</div>
|
||
<div class="skill-row">
|
||
<span class="skill-label">Cybersecurity</span>
|
||
<div class="skill-track">
|
||
<div class="skill-fill" style="width: 25%"></div>
|
||
</div>
|
||
<span class="skill-pct">25%</span>
|
||
</div>
|
||
</div>
|
||
<!-- stat box -->
|
||
<div class="rv d2" style="height: 100%;">
|
||
<div class="skill-stat-box" style="height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box;">
|
||
<div class="skill-stat-title" style="font-size: 1.35rem; margin-bottom: 10px; color: var(--gold-lt);">
|
||
Belum Terdata di Sini?
|
||
</div>
|
||
<p class="skill-stat-sub" style="margin-bottom: 20px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.85); line-height: 1.7;">
|
||
Bantu kami melengkapi database skill alumni Informatika UNTAN. Kontribusikan data keahlian Anda untuk memetakan potensi nyata dari lulusan di berbagai sektor industri.
|
||
</p>
|
||
<div style="margin-top: 10px; position: relative; z-index: 10;">
|
||
<a href="#kontribusi" class="btn-gold" style="width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700;">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||
<path d="M18.5 2.5a2.121 2.121 0 1 1 3 3L12 15l-4 1 1-4z" />
|
||
</svg>
|
||
Isi Form Kontribusi
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
5. STATISTIK ALUMNI — Chart.js bar chart
|
||
───────────────────────────────────────── -->
|
||
<section id="database">
|
||
<div class="section-inner">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow">Statistik Alumni</div>
|
||
<h2 class="sec-h2">Jumlah Alumni <em>berdasarkan Tahun Kelulusan</em></h2>
|
||
<p class="sec-sub" style="max-width: 440px; margin: 10px auto 0">
|
||
Data wisudawan dan lulusan berdasarkan periode semester dan tahun kelulusan.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="two-col" style="align-items: flex-start;">
|
||
<!-- left: Table -->
|
||
<div class="rv d1" style="background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; padding: 0;">
|
||
<table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 0.9rem;">
|
||
<thead>
|
||
<tr style="background: #374151; color: #fff;">
|
||
<th style="padding: 14px 20px; font-weight: 600;">Periode</th>
|
||
<th style="padding: 14px 20px; font-weight: 600; text-align: right;">Jumlah</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr style="background: #fff; border-bottom: 1px solid #f1f5f9;">
|
||
<td style="padding: 14px 20px;">2024 Genap</td>
|
||
<td style="padding: 14px 20px; text-align: right;">50</td>
|
||
</tr>
|
||
<tr style="background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
|
||
<td style="padding: 14px 20px;">2024 Ganjil</td>
|
||
<td style="padding: 14px 20px; text-align: right;">27</td>
|
||
</tr>
|
||
<tr style="background: #fff; border-bottom: 1px solid #f1f5f9;">
|
||
<td style="padding: 14px 20px;">2023 Genap</td>
|
||
<td style="padding: 14px 20px; text-align: right;">63</td>
|
||
</tr>
|
||
<tr style="background: #f8fafc; border-bottom: 1px solid #f1f5f9;">
|
||
<td style="padding: 14px 20px;">2023 Ganjil</td>
|
||
<td style="padding: 14px 20px; text-align: right;">27</td>
|
||
</tr>
|
||
<tr style="background: #fff; border-bottom: 1px solid #e2e8f0;">
|
||
<td style="padding: 14px 20px;">2022 Genap</td>
|
||
<td style="padding: 14px 20px; text-align: right;">45</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div style="padding: 12px 20px; font-size: 0.75rem; color: #6b7280; font-style: italic; text-align: center;">
|
||
Sumber : BAK UNTAN
|
||
</div>
|
||
</div>
|
||
|
||
<!-- right: Chart -->
|
||
<div class="chart-box rv d2" style="margin-top: 0;">
|
||
<div class="chart-header">
|
||
<div class="chart-title">
|
||
Grafik Jumlah Lulusan
|
||
</div>
|
||
</div>
|
||
<div style="position: relative; height: 280px; width: 100%;">
|
||
<canvas id="kelulusanChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
6. TESTIMONIALS
|
||
───────────────────────────────────────── -->
|
||
<section id="testimoni">
|
||
<div
|
||
style="
|
||
position: absolute;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(
|
||
rgba(255, 255, 255, 0.02) 1px,
|
||
transparent 1px
|
||
),
|
||
linear-gradient(
|
||
90deg,
|
||
rgba(255, 255, 255, 0.02) 1px,
|
||
transparent 1px
|
||
);
|
||
background-size: 48px 48px;
|
||
pointer-events: none;
|
||
"
|
||
></div>
|
||
<div class="testi-section-inner">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow eyebrow-y">Testimoni Alumni</div>
|
||
<h2 class="sec-h2 sec-h2-w">
|
||
Kata Mereka tentang <em>Informatika UNTAN</em>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="testi-grid">
|
||
<!-- T1 -->
|
||
<div class="testi-card rv d1">
|
||
<div class="testi-quote-mark">"</div>
|
||
<p class="testi-text">
|
||
"Bagi calon mahasiswa Informatika Untan, saya berpesan untuk terus mengembangkan diri dan tidak cepat merasa puas. Perkuliahan adalah titik awal untuk membuka berbagai peluang yang lebih luas. Fokuslah pada bidang yang diminati, tingkatkan keahlian spesifik, perluas jejaring, serta kuasai bahasa asing sebagai nilai tambah. Dengan komitmen dan kemauan yang kuat, peluang untuk berkarir maupun melanjutkan studi di tingkat global akan semakin terbuka."
|
||
</p>
|
||
<div class="testi-footer">
|
||
<div
|
||
class="testi-avatar"
|
||
style="
|
||
background: linear-gradient(135deg, #3730a3, #6366f1);
|
||
"
|
||
>
|
||
DP
|
||
</div>
|
||
<div class="testi-meta">
|
||
<div class="testi-name">Dona Pramana Pura</div>
|
||
<div class="testi-role">
|
||
Product Manager, Ai Practitioner · Angkatan 2009
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- T2 -->
|
||
<div class="testi-card rv d2">
|
||
<div class="testi-quote-mark">"</div>
|
||
<p class="testi-text">
|
||
"Fondasi yang kalian bangun di Informatika Untan itu sangat berharga. Kemampuan berpikir algoritmik dan memecahkan masalah yang diasah selama kuliah adalah bekal yang akan terus relevan di mana pun kalian berkarier. Jangan takut bermimpi besar. Jika saya — yang memulai dari Pontianak — bisa sampai di Frankfurt dan berkontribusi di industri FinTech Eropa, kalian pun bisa. Yang penting adalah terus belajar, berani mengambil kesempatan, dan jangan pernah meremehkan kualitas pendidikan yang kalian terima di Untan."
|
||
</p>
|
||
<div class="testi-footer">
|
||
<div
|
||
class="testi-avatar"
|
||
style="
|
||
background: linear-gradient(135deg, #0f766e, #14b8a6);
|
||
"
|
||
>
|
||
CD
|
||
</div>
|
||
<div class="testi-meta">
|
||
<div class="testi-name">Charles Darwis Hariman</div>
|
||
<div class="testi-role">
|
||
Software Developer, Traxpay GmbH
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- T3 -->
|
||
<div class="testi-card rv d3">
|
||
<div class="testi-quote-mark">"</div>
|
||
<p class="testi-text">
|
||
"Fondasi yang kita peroleh dari kampus dan Himpunan merupakan wadah terbaik untuk belajar ketangguhan. Jadikanlah pengalaman tersebut sebagai sarana untuk terus terbuka terhadap perubahan. Jika kita mampu beradaptasi dengan baik, batas kemampuan kita tidak lagi ditentukan oleh geografi, melainkan seberapa jauh kita berani melangkah."
|
||
</p>
|
||
<div class="testi-footer">
|
||
<div
|
||
class="testi-avatar"
|
||
style="
|
||
background: linear-gradient(135deg, #1a3a6b, #2352a0);
|
||
"
|
||
>
|
||
IF
|
||
</div>
|
||
<div class="testi-meta">
|
||
<div class="testi-name">Izhan Fakhruzi</div>
|
||
<div class="testi-role">
|
||
Dosen Tetap, UMP & Peneliti, Universidad de Granada
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
7. KEGIATAN — SKBI RAMADHAN & INFORMERS
|
||
───────────────────────────────────────── -->
|
||
<section id="kegiatan" style="padding: 52px 0 40px">
|
||
<div class="sec-title-center rv">
|
||
<div class="eyebrow">Kegiatan Tahunan</div>
|
||
<h2 class="sec-h2">Temui Kami di <em>Setiap Tahun</em></h2>
|
||
<p class="sec-sub" style="max-width: 520px; margin: 10px auto 0">
|
||
HMIF Informatika UNTAN menyelenggarakan dua kegiatan tahunan
|
||
besar yang selalu mengundang dan mempertemukan para alumni.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="event-grid">
|
||
<!-- SKBI -->
|
||
<div class="event-card rv d1">
|
||
<img
|
||
src="./assets/WhatsApp Image 2026-05-21 at 5.34.09 AM.jpeg"
|
||
alt="SKBI Ramadhan"
|
||
style="width: 100%; height: 200px; object-fit: cover; display: block;"
|
||
/>
|
||
<div class="event-body">
|
||
<div class="event-title-row">
|
||
<span class="event-name">SKBI Ramadhan</span>
|
||
<span
|
||
style="
|
||
font-size: 0.72rem;
|
||
color: #6b7280;
|
||
font-weight: 600;
|
||
"
|
||
>Silaturahmi Keluarga Besar Informatika</span
|
||
>
|
||
</div>
|
||
<p class="event-desc">
|
||
SKBI Ramadhan adalah acara silaturahmi yang mempertemukan
|
||
seluruh keluarga besar Informatika UNTAN — mahasiswa aktif,
|
||
dosen, dan alumni dari berbagai angkatan. Kegiatan ini menjadi momen silaturahmi yang hangat di bulan Ramadhan, mempererat tali persaudaraan alumni dengan civitas akademika melalui kegiatan sosial, buka bersama, dan networking.
|
||
</p>
|
||
|
||
<div class="event-actions">
|
||
<a
|
||
href="https://www.instagram.com/hmif_ftuntan"
|
||
target="_blank"
|
||
class="btn-ig"
|
||
style="font-size: 0.78rem; padding: 9px 15px"
|
||
>
|
||
<svg
|
||
width="13"
|
||
height="13"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
@hmif_ftuntan
|
||
</a>
|
||
<span class="event-info-note">
|
||
<svg
|
||
width="11"
|
||
height="11"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#9CA3AF"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="8" x2="12" y2="12" />
|
||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||
</svg>
|
||
Info lengkap di Instagram HMIF
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- INFORMERS -->
|
||
<div class="event-card rv d2">
|
||
<img
|
||
src="./assets/WhatsApp Image 2026-05-21 at 5.33.12 AM (1).jpeg"
|
||
alt="INFORMERS"
|
||
style="width: 100%; height: 200px; object-fit: cover; display: block;"
|
||
/>
|
||
<div class="event-body">
|
||
<div class="event-title-row">
|
||
<span class="event-name">INFORMERS</span>
|
||
<span
|
||
style="
|
||
font-size: 0.72rem;
|
||
color: #6b7280;
|
||
font-weight: 600;
|
||
"
|
||
>Informatic Anniversary</span
|
||
>
|
||
</div>
|
||
<p class="event-desc">
|
||
INFORMERS adalah perayaan Hari Ulang Tahun Program Studi Informatika
|
||
UNTAN. Acara besar ini mewadahi berbagai kegiatan kompetisi akademik maupun non-akademik tingkat mahasiswa, pameran inovasi IT, hiburan musik, hingga malam puncak yang mengumpulkan seluruh civitas akademika dan alumni dalam semangat dedikasi dan kebersamaan.
|
||
</p>
|
||
|
||
<div class="event-actions">
|
||
<a
|
||
href="https://www.instagram.com/informershmif"
|
||
target="_blank"
|
||
class="btn-ig"
|
||
style="font-size: 0.78rem; padding: 9px 15px"
|
||
>
|
||
<svg
|
||
width="13"
|
||
height="13"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
@informershmif
|
||
</a>
|
||
<span class="event-info-note">
|
||
<svg
|
||
width="11"
|
||
height="11"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#9CA3AF"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<circle cx="12" cy="12" r="10" />
|
||
<line x1="12" y1="8" x2="12" y2="12" />
|
||
<line x1="12" y1="16" x2="12.01" y2="16" />
|
||
</svg>
|
||
Pantau IG untuk jadwal & cara daftar
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
8. GABUNG IKA
|
||
───────────────────────────────────────── -->
|
||
<section id="kontribusi">
|
||
<div class="section-inner">
|
||
<div class="two-col">
|
||
<!-- left: info & steps -->
|
||
<div class="rv">
|
||
<div class="eyebrow">Gabung IKA</div>
|
||
<h2 class="sec-h2">Bergabung dengan <em>Grup Alumni</em></h2>
|
||
<p class="sec-sub" style="margin-bottom: 24px">
|
||
Daftarkan dirimu untuk bergabung ke grup WhatsApp Ikatan
|
||
Keluarga Alumni (IKA) Informatika UNTAN. Terhubung dengan
|
||
ratusan alumni dan dapatkan info lowongan, kegiatan, dan
|
||
kolaborasi.
|
||
</p>
|
||
|
||
<div class="step-list">
|
||
<div class="step-row">
|
||
<div class="step-num">1</div>
|
||
<div>
|
||
<div class="step-h">Isi Form Pendaftaran</div>
|
||
<p class="step-p">
|
||
Masukkan nama, NIM, nomor HP, email, status pekerjaan,
|
||
dan 3 skill utamamu.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num">2</div>
|
||
<div>
|
||
<div class="step-h">Verifikasi Admin IKA</div>
|
||
<p class="step-p">
|
||
Admin IKA akan memverifikasi bahwa kamu adalah alumni
|
||
Informatika UNTAN dalam 1–2 hari kerja.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="step-row">
|
||
<div class="step-num step-num-done">
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#fff"
|
||
stroke-width="3"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<polyline points="20 6 9 17 4 12" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="step-h">Masuk Grup WhatsApp IKA</div>
|
||
<p class="step-p">
|
||
Setelah terverifikasi, kamu akan diundang ke grup
|
||
WhatsApp IKA dan langsung terhubung dengan ratusan
|
||
alumni!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="group-highlight">
|
||
<div class="group-ey">Grup IKA Informatika UNTAN</div>
|
||
<div class="group-inner">
|
||
<div class="group-wa-icon">
|
||
<svg
|
||
width="21"
|
||
height="21"
|
||
viewBox="0 0 24 24"
|
||
fill="#fff"
|
||
>
|
||
<path
|
||
d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51a12.8 12.8 0 0 0-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<div class="group-title">IKA Informatika UNTAN</div>
|
||
<div class="group-member">500+ anggota aktif</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- right: form preview -->
|
||
<!-- right: form AKTIF dengan Google Apps Script -->
|
||
<div class="rv d2">
|
||
<div class="form-card">
|
||
<div class="form-card-title">Form Pendaftaran IKA</div>
|
||
<p class="form-card-sub">
|
||
Isi data di bawah untuk bergabung ke grup WhatsApp alumni.
|
||
</p>
|
||
|
||
<!-- Nama Lengkap -->
|
||
<div class="form-group">
|
||
<label class="form-label">Nama Lengkap *</label>
|
||
<input type="text" id="ika-nama" class="form-input" placeholder="Ahmad Rizky Pratama" />
|
||
</div>
|
||
|
||
<!-- NIM & Angkatan -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">NIM</label>
|
||
<input type="text" id="ika-nim" class="form-input" placeholder="H1031..." />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Angkatan *</label>
|
||
<input type="text" id="ika-angkatan" class="form-input" placeholder="2020" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- No HP & Email -->
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">No. HP / WhatsApp *</label>
|
||
<input type="tel" id="ika-hp" class="form-input" placeholder="+62 812-xxxx-xxxx" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">Email Aktif *</label>
|
||
<input type="email" id="ika-email" class="form-input" placeholder="nama@gmail.com" />
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Status -->
|
||
<div class="form-group">
|
||
<label class="form-label">Status Saat Ini *</label>
|
||
<select id="ika-status" class="form-input">
|
||
<option value="">— Pilih Status —</option>
|
||
<option value="Bekerja">Bekerja</option>
|
||
<option value="Wirausaha">Wirausaha / Freelance</option>
|
||
<option value="Melanjutkan Studi">Melanjutkan Studi</option>
|
||
<option value="Mencari Kerja">Sedang Mencari Kerja</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Instansi -->
|
||
<div class="form-group">
|
||
<label class="form-label">Tempat Bekerja / Instansi
|
||
<span class="form-note-optional">(opsional)</span></label>
|
||
<input type="text" id="ika-instansi" class="form-input" placeholder="Contoh: PT. Telkom Indonesia, Google..." />
|
||
</div>
|
||
|
||
<!-- 3 Skill -->
|
||
<div class="form-group" style="margin-bottom: 6px">
|
||
<label class="form-label">3 Skill Utama yang Dikuasai *</label>
|
||
<p style="font-size: 0.72rem; color: #9ca3af; margin-bottom: 8px;">Pilih 3 skill yang paling kamu kuasai.</p>
|
||
</div>
|
||
<div class="form-row-3" style="margin-bottom: 14px">
|
||
<div class="form-group">
|
||
<label class="form-label" style="font-size: 0.72rem">Skill 1 *</label>
|
||
<select id="ika-skill1" class="form-input" style="font-size: 0.82rem">
|
||
<option value="">— Pilih —</option>
|
||
<option>Web Development</option>
|
||
<option>Mobile Development</option>
|
||
<option>Python / Data Science</option>
|
||
<option>UI/UX Design</option>
|
||
<option>Networking / DevOps</option>
|
||
<option>Cybersecurity</option>
|
||
<option>Machine Learning / AI</option>
|
||
<option>Database</option>
|
||
<option>Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" style="font-size: 0.72rem">Skill 2</label>
|
||
<select id="ika-skill2" class="form-input" style="font-size: 0.82rem">
|
||
<option value="">— Pilih —</option>
|
||
<option>Web Development</option>
|
||
<option>Mobile Development</option>
|
||
<option>Python / Data Science</option>
|
||
<option>UI/UX Design</option>
|
||
<option>Networking / DevOps</option>
|
||
<option>Cybersecurity</option>
|
||
<option>Machine Learning / AI</option>
|
||
<option>Database</option>
|
||
<option>Lainnya</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label" style="font-size: 0.72rem">Skill 3</label>
|
||
<select id="ika-skill3" class="form-input" style="font-size: 0.82rem">
|
||
<option value="">— Pilih —</option>
|
||
<option>Web Development</option>
|
||
<option>Mobile Development</option>
|
||
<option>Python / Data Science</option>
|
||
<option>UI/UX Design</option>
|
||
<option>Networking / DevOps</option>
|
||
<option>Cybersecurity</option>
|
||
<option>Machine Learning / AI</option>
|
||
<option>Database</option>
|
||
<option>Lainnya</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Persetujuan -->
|
||
<div class="form-group">
|
||
<label class="form-label">Persetujuan *</label>
|
||
<div class="form-consent" style="cursor:pointer" onclick="document.getElementById('ika-consent').click()">
|
||
<input type="checkbox" id="ika-consent" style="display:none" />
|
||
<div class="form-checkbox" id="ika-consent-box">
|
||
<!-- centang muncul via JS -->
|
||
</div>
|
||
<p class="form-consent-text">
|
||
Saya menyetujui bahwa data yang saya masukkan adalah benar dan bersedia diverifikasi oleh admin IKA Informatika UNTAN.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tombol Submit -->
|
||
<button id="ika-submit-btn" onclick="submitIkaForm()" class="btn-gold"
|
||
style="width: 100%; justify-content: center; margin-top: 6px; border: none; cursor: pointer;">
|
||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<line x1="22" y1="2" x2="11" y2="13" />
|
||
<polygon points="22 2 15 22 11 13 2 9 22 2" />
|
||
</svg>
|
||
Daftar Sekarang
|
||
</button>
|
||
<p class="form-cta-note" id="ika-status-msg">Data langsung tersimpan · Proses 1–2 hari kerja</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ─────────────────────────────────────────
|
||
9. FAQ + KONTAK
|
||
───────────────────────────────────────── -->
|
||
<section id="faq" style="padding: 52px 0 40px">
|
||
<div class="two-col">
|
||
<!-- left: FAQ -->
|
||
<div class="rv">
|
||
<div class="eyebrow">FAQ</div>
|
||
<h2 class="sec-h2" style="margin-bottom: 24px">
|
||
Pertanyaan Seputar <em>Alumni</em>
|
||
</h2>
|
||
|
||
<div class="faq-list">
|
||
<div class="faq-item open">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span
|
||
>Bagaimana cara bergabung dengan grup alumni IKA?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a">
|
||
Isi form pendaftaran di section "Gabung IKA" di atas
|
||
dengan nama lengkap, angkatan, nomor WhatsApp, dan email
|
||
aktifmu. Setelah diverifikasi admin dalam 1–2 hari kerja,
|
||
kamu akan diundang ke grup WhatsApp IKA Informatika UNTAN.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span
|
||
>Berapa lama proses verifikasi pendaftaran IKA?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a">
|
||
Proses verifikasi biasanya memakan waktu 1–2 hari kerja.
|
||
Admin IKA akan mengecek bahwa kamu adalah alumni
|
||
Informatika UNTAN berdasarkan nama dan angkatan yang
|
||
diisi.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span>Apa manfaat bergabung ke grup alumni IKA?</span>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a">
|
||
Di grup IKA kamu dapat mengakses info lowongan kerja dari
|
||
sesama alumni, info kegiatan tahunan seperti SKBI Ramadhan dan
|
||
INFORMERS, kolaborasi proyek, berbagi pengalaman karir,
|
||
serta membangun koneksi profesional dengan ratusan alumni
|
||
dari berbagai angkatan dan industri.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span
|
||
>Apakah ada info lowongan kerja atau magang di
|
||
IKA?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a">
|
||
Ya! Salah satu manfaat utama grup IKA adalah alumni yang
|
||
sudah bekerja sering berbagi info lowongan dari perusahaan
|
||
mereka. Banyak anggota IKA yang mendapat pekerjaan pertama
|
||
atau berpindah karir melalui referral dari sesama alumni
|
||
di grup ini.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span
|
||
>Apakah ada program kerja sama industri dari Prodi
|
||
Informatika?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a">
|
||
Prodi Informatika UNTAN memiliki program Kerja Praktik
|
||
(KP) wajib yang menghubungkan mahasiswa dengan industri.
|
||
Info terkini tentang kerja sama industri bisa diikuti
|
||
melalui Instagram @informatika.untan.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span
|
||
>Bagaimana cara mengikuti kegiatan SKBI Ramadhan atau
|
||
INFORMERS?</span
|
||
>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a">
|
||
Info pendaftaran dan kegiatan SKBI Ramadhan dapat ditemukan di
|
||
Instagram @hmif_ftuntan. Untuk INFORMERS, pantau Instagram
|
||
@informershmif. Sebagai anggota grup IKA, kamu juga akan
|
||
mendapatkan notifikasi langsung setiap kali ada kegiatan
|
||
yang melibatkan alumni.
|
||
</div>
|
||
</div>
|
||
<div class="faq-item">
|
||
<div class="faq-q" onclick="toggleFaq(this.parentElement)">
|
||
<span>Siapa saja yang bisa mendaftar ke IKA?</span>
|
||
<svg
|
||
class="faq-icon"
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="12" y1="5" x2="12" y2="19" />
|
||
<line x1="5" y1="12" x2="19" y2="12" />
|
||
</svg>
|
||
</div>
|
||
<div class="faq-a">
|
||
Seluruh alumni Program Studi Informatika Universitas
|
||
Tanjungpura dari semua angkatan dapat mendaftar ke IKA.
|
||
Tidak ada batasan angkatan, status pekerjaan, atau
|
||
domisili. Selama kamu adalah lulusan Informatika UNTAN,
|
||
kamu berhak bergabung!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- right: Instagram -->
|
||
<div class="rv d2">
|
||
<div class="eyebrow">Kontak & Sosial Media</div>
|
||
<h2 class="sec-h2" style="margin-bottom: 20px">
|
||
Temukan Kami di <em>Instagram</em>
|
||
</h2>
|
||
<p class="sec-sub" style="margin-bottom: 22px">
|
||
Ikuti akun Instagram resmi kami untuk informasi terbaru
|
||
seputar kegiatan alumni, info lowongan, dan update Prodi
|
||
Informatika UNTAN.
|
||
</p>
|
||
|
||
<a
|
||
href="https://www.instagram.com/informatika.untan"
|
||
target="_blank"
|
||
class="ig-main-card"
|
||
>
|
||
<div class="ig-icon-lg">
|
||
<svg
|
||
width="24"
|
||
height="24"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#fff"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
</div>
|
||
<div style="flex: 1">
|
||
<div class="ig-main-label">Instagram Resmi Prodi</div>
|
||
<div class="ig-main-handle">@informatika.untan</div>
|
||
<div class="ig-main-sub">
|
||
Update akademik, kegiatan, dan info alumni
|
||
</div>
|
||
</div>
|
||
<svg
|
||
width="16"
|
||
height="16"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#E1306C"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<line x1="7" y1="17" x2="17" y2="7" />
|
||
<polyline points="7 7 17 7 17 17" />
|
||
</svg>
|
||
</a>
|
||
|
||
<div class="ig-grid">
|
||
<a
|
||
href="https://www.instagram.com/hmif_ftuntan"
|
||
target="_blank"
|
||
class="ig-card"
|
||
>
|
||
<div class="ig-icon-sm">
|
||
<svg
|
||
width="17"
|
||
height="17"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#fff"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
</div>
|
||
<div class="ig-handle">@hmif_ftuntan</div>
|
||
<div class="ig-sub">HMIF & SKBI Ramadhan</div>
|
||
</a>
|
||
<a
|
||
href="https://www.instagram.com/informershmif"
|
||
target="_blank"
|
||
class="ig-card"
|
||
>
|
||
<div class="ig-icon-sm">
|
||
<svg
|
||
width="17"
|
||
height="17"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="#fff"
|
||
stroke-width="2"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<rect x="2" y="2" width="20" height="20" rx="5" />
|
||
<path
|
||
d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"
|
||
/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
|
||
</svg>
|
||
</div>
|
||
<div class="ig-handle">@informershmif</div>
|
||
<div class="ig-sub">INFORMERS</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="cta-box">
|
||
<div class="cta-box-ey">Siap bergabung?</div>
|
||
<p class="cta-box-p">
|
||
Scroll ke atas dan isi form pendaftaran IKA sekarang.
|
||
Gratis, cepat, dan langsung terhubung dengan ratusan alumni!
|
||
</p>
|
||
<a
|
||
href="#kontribusi"
|
||
class="btn-gold"
|
||
style="font-size: 0.82rem"
|
||
>
|
||
<svg
|
||
width="14"
|
||
height="14"
|
||
viewBox="0 0 24 24"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
stroke-width="2.5"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
>
|
||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
|
||
<circle cx="9" cy="7" r="4" />
|
||
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
|
||
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||
</svg>
|
||
Daftar IKA Sekarang
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
<!-- ================= END: BAGIAN YANG DIEDIT KELOMPOK ================= -->
|
||
</article>
|
||
|
||
<aside>
|
||
</aside>
|
||
</main>
|
||
|
||
<!-- ══ FOOTER ══ -->
|
||
<footer class="footer">
|
||
<div class="container footer-inner">
|
||
<img
|
||
src="../../assets/global/logo.png"
|
||
alt="Logo"
|
||
class="footer-logo"
|
||
/>
|
||
<p>© Informatika UNTAN — Group 05</p>
|
||
</div>
|
||
<img
|
||
src="../../assets/global/footer.png"
|
||
alt="Footer ornament"
|
||
class="footer-ornament"
|
||
/>
|
||
</footer>
|
||
|
||
<script>
|
||
/* ── IKA FORM SUBMIT ── */
|
||
const IKA_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwrXG3YFu4PEY3Z3acYeFTLCozM6iERfA7_yWxXaiJn7ULwau5vTIpt0Zv04OziMit-/exec";
|
||
|
||
// Checkbox visual toggle
|
||
document.getElementById('ika-consent').addEventListener('change', function() {
|
||
const box = document.getElementById('ika-consent-box');
|
||
if (this.checked) {
|
||
box.innerHTML = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none"
|
||
stroke="#2352A0" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
|
||
<polyline points="20 6 9 17 4 12"/></svg>`;
|
||
} else {
|
||
box.innerHTML = '';
|
||
}
|
||
});
|
||
|
||
async function submitIkaForm() {
|
||
const nama = document.getElementById('ika-nama').value.trim();
|
||
const nim = document.getElementById('ika-nim').value.trim();
|
||
const angkatan = document.getElementById('ika-angkatan').value.trim();
|
||
const hp = document.getElementById('ika-hp').value.trim();
|
||
const email = document.getElementById('ika-email').value.trim();
|
||
const status = document.getElementById('ika-status').value;
|
||
const instansi = document.getElementById('ika-instansi').value.trim();
|
||
const skill1 = document.getElementById('ika-skill1').value;
|
||
const skill2 = document.getElementById('ika-skill2').value;
|
||
const skill3 = document.getElementById('ika-skill3').value;
|
||
const consent = document.getElementById('ika-consent').checked;
|
||
|
||
const msg = document.getElementById('ika-status-msg');
|
||
|
||
// Validasi
|
||
if (!nama || !angkatan || !hp || !email || !status || !skill1 || !consent) {
|
||
msg.textContent = '⚠️ Lengkapi semua field wajib (*) dan centang persetujuan.';
|
||
msg.style.color = '#ef4444';
|
||
return;
|
||
}
|
||
|
||
const btn = document.getElementById('ika-submit-btn');
|
||
btn.disabled = true;
|
||
btn.textContent = 'Mengirim...';
|
||
msg.textContent = 'Sedang mengirim data...';
|
||
msg.style.color = '#9ca3af';
|
||
|
||
try {
|
||
const params = new URLSearchParams({
|
||
nama, nim, angkatan, noHp: hp,
|
||
email, status, instansi, skill1, skill2, skill3
|
||
});
|
||
|
||
await fetch(IKA_SCRIPT_URL + "?" + params.toString(), {
|
||
method: 'GET',
|
||
mode: 'no-cors',
|
||
});
|
||
|
||
msg.textContent = '✅ Data berhasil dikirim! Admin akan menghubungimu dalam 1–2 hari kerja.';
|
||
msg.style.color = '#16a34a';
|
||
btn.textContent = 'Terkirim ✓';
|
||
// Reset form
|
||
['ika-nama','ika-nim','ika-angkatan','ika-hp','ika-email','ika-instansi']
|
||
.forEach(id => document.getElementById(id).value = '');
|
||
['ika-status','ika-skill1','ika-skill2','ika-skill3']
|
||
.forEach(id => document.getElementById(id).selectedIndex = 0);
|
||
document.getElementById('ika-consent').checked = false;
|
||
document.getElementById('ika-consent-box').innerHTML = '';
|
||
|
||
} catch (err) {
|
||
msg.textContent = '❌ Gagal mengirim. Coba lagi atau hubungi admin.';
|
||
msg.style.color = '#ef4444';
|
||
btn.disabled = false;
|
||
btn.textContent = 'Daftar Sekarang';
|
||
}
|
||
}
|
||
/* ── REVEAL ON SCROLL ── */
|
||
const ro = new IntersectionObserver(
|
||
(entries) => {
|
||
entries.forEach((e) => {
|
||
if (e.isIntersecting) e.target.classList.add("in");
|
||
});
|
||
},
|
||
{ threshold: 0.08 },
|
||
);
|
||
document.querySelectorAll(".rv").forEach((el) => ro.observe(el));
|
||
|
||
/* ── FAQ TOGGLE ── */
|
||
function toggleFaq(item) {
|
||
item.classList.toggle("open");
|
||
}
|
||
|
||
/* ── CHART.JS ── */
|
||
window.addEventListener("load", function () {
|
||
if (typeof Chart === "undefined") return;
|
||
const ctx = document.getElementById("kelulusanChart").getContext("2d");
|
||
new Chart(ctx, {
|
||
type: "bar",
|
||
data: {
|
||
labels: [
|
||
"2022 Genap",
|
||
"2023 Ganjil",
|
||
"2023 Genap",
|
||
"2024 Ganjil",
|
||
"2024 Genap",
|
||
],
|
||
datasets: [
|
||
{
|
||
label: "Jumlah Lulusan",
|
||
data: [45, 27, 63, 27, 50],
|
||
backgroundColor: "#299bc1", // sesuai dengan warna biru pada gambar
|
||
borderRadius: 0,
|
||
borderSkipped: false,
|
||
}
|
||
],
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
maintainAspectRatio: false,
|
||
plugins: {
|
||
legend: { display: false },
|
||
tooltip: {
|
||
backgroundColor: "#1A3A6B",
|
||
titleFont: {
|
||
family: "Plus Jakarta Sans",
|
||
size: 12,
|
||
weight: "700",
|
||
},
|
||
bodyFont: { family: "Plus Jakarta Sans", size: 11 },
|
||
padding: 12,
|
||
cornerRadius: 8,
|
||
callbacks: {
|
||
label: (ctx) => `Jumlah: ${ctx.raw} Orang`,
|
||
},
|
||
},
|
||
},
|
||
scales: {
|
||
x: {
|
||
grid: { display: false, drawBorder: false },
|
||
ticks: {
|
||
font: { family: "Plus Jakarta Sans", size: 11 },
|
||
color: "#6b7280",
|
||
},
|
||
},
|
||
y: {
|
||
grid: {
|
||
color: "#f3f4f6",
|
||
drawBorder: false,
|
||
},
|
||
ticks: {
|
||
font: { family: "Plus Jakarta Sans", size: 11 },
|
||
color: "#9ca3af",
|
||
stepSize: 10,
|
||
},
|
||
min: 0,
|
||
max: 70
|
||
},
|
||
},
|
||
},
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|