forked from izu/student-web-if-development-kit
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 muthianura
|
73964fe874 |
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 296 KiB |
+212
-46
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html lang="id" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
@@ -50,6 +50,11 @@
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
*,
|
||||
@@ -1221,8 +1226,8 @@
|
||||
<!-- Card 1 -->
|
||||
<div class="achiever-card rv d1">
|
||||
<div class="achiever-body">
|
||||
<div class="achiever-avatar-circle">
|
||||
<img src="./assets/izhan.jpg" alt="Izhan Fakhruzi">
|
||||
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #1a3a6b, #2352a0);">
|
||||
<span class="achiever-initials">IF</span>
|
||||
</div>
|
||||
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach1_batch">Angkatan 2005</div>
|
||||
<div class="achiever-name">Izhan Fakhruzi</div>
|
||||
@@ -1239,8 +1244,8 @@
|
||||
<!-- Card 2 -->
|
||||
<div class="achiever-card rv d2">
|
||||
<div class="achiever-body">
|
||||
<div class="achiever-avatar-circle">
|
||||
<img src="./assets/charles.jpg" alt="Charles Darwis Hariman">
|
||||
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #0f766e, #14b8a6);">
|
||||
<span class="achiever-initials">CD</span>
|
||||
</div>
|
||||
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach2_batch">Informatika UNTAN</div>
|
||||
<div class="achiever-name">Charles Darwis Hariman</div>
|
||||
@@ -1257,8 +1262,8 @@
|
||||
<!-- Card 3 -->
|
||||
<div class="achiever-card rv d3">
|
||||
<div class="achiever-body">
|
||||
<div class="achiever-avatar-circle">
|
||||
<img src="./assets/dona.jpg" alt="Dona Pramana Pura">
|
||||
<div class="achiever-avatar-circle" style="background: linear-gradient(135deg, #3730a3, #6366f1);">
|
||||
<span class="achiever-initials">DP</span>
|
||||
</div>
|
||||
<div class="achiever-batch" data-i18n="grp_m4n1fest_ach3_batch">Angkatan 2009</div>
|
||||
<div class="achiever-name">Dona Pramana Pura</div>
|
||||
@@ -1391,47 +1396,102 @@
|
||||
</div>
|
||||
<div class="logo-grid">
|
||||
<div class="logo-card">
|
||||
<img src="./assets/BCA.png" alt="Logo BCA" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #ebf1fb; color: #1a3a6b"
|
||||
>
|
||||
BCA
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bca">BCA</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/bri.png" alt="Logo BRI" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #fff0f0; color: #c00"
|
||||
>
|
||||
BRI
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bri">BRI</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/Telkom.jpg" alt="Logo Telkom Indonesia" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #fff7e6; color: #f5b800"
|
||||
>
|
||||
TLKM
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_telkom">Telkom Indonesia</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/pln.jpg" alt="Logo PLN" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #ebf1fb; color: #0a66c2"
|
||||
>
|
||||
PLN
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_pln">PLN</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/Indofood.png" alt="Logo Indofood Fortuna" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #f0f0ff; color: #3730a3"
|
||||
>
|
||||
INDF
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_indofood">Indofood Fortuna</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/astra.webp" alt="Logo Astra Daihatsu" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #fff0f5; color: #ee4d2d"
|
||||
>
|
||||
ASTR
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_astra">Astra Daihatsu</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/unilever-logo.png" alt="Logo Unilever" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #f0fff4; color: #15803d"
|
||||
>
|
||||
UNVR
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_unilever">Unilever</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/grab.png" alt="Logo Grab" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #f0fff4; color: #16a34a"
|
||||
>
|
||||
GRAB
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_grab">Grab</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/telkomsel.jpg" alt="Logo Telkomsel" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #fff0f0; color: #c00"
|
||||
>
|
||||
TSEL
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_telkomsel">Telkomsel</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/garuda_indonesia.jpg" alt="Logo Garuda Indonesia" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #ebf1fb; color: #0866ff"
|
||||
>
|
||||
GIAA
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_garuda">Garuda Indonesia</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
<img src="./assets/Bulog-Logo.png" alt="Logo Perum Bulog" style="width: 100%; height: 60px; padding: 8px; object-fit: contain; border-radius: 8px;">
|
||||
<div
|
||||
class="logo-initials"
|
||||
style="background: #fffbea; color: #b38500"
|
||||
>
|
||||
BULG
|
||||
</div>
|
||||
<span class="logo-name" data-i18n="grp_m4n1fest_logo_bulog">Perum BULOG</span>
|
||||
</div>
|
||||
<div class="logo-card">
|
||||
@@ -1466,50 +1526,66 @@
|
||||
</div>
|
||||
|
||||
<div class="two-col">
|
||||
<!-- bars -->
|
||||
<div class="rv">
|
||||
<!-- bars: skeleton selalu tampil, garis biru terisi otomatis dari data approved -->
|
||||
<div class="rv" id="skill-bars-container">
|
||||
|
||||
<!-- Web Development -->
|
||||
<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 class="skill-track"><div class="skill-fill" id="bar-web-development" style="width:0%;transition:width 0.8s ease"></div></div>
|
||||
<span class="skill-pct" id="pct-web-development">—</span>
|
||||
</div>
|
||||
<!-- Python / Data Science -->
|
||||
<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 class="skill-track"><div class="skill-fill" id="bar-python-data-science" style="width:0%;transition:width 0.8s ease"></div></div>
|
||||
<span class="skill-pct" id="pct-python-data-science">—</span>
|
||||
</div>
|
||||
<!-- Mobile Development -->
|
||||
<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 class="skill-track"><div class="skill-fill" id="bar-mobile-development" style="width:0%;transition:width 0.8s ease"></div></div>
|
||||
<span class="skill-pct" id="pct-mobile-development">—</span>
|
||||
</div>
|
||||
<!-- UI/UX Design -->
|
||||
<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 class="skill-track"><div class="skill-fill" id="bar-uiux-design" style="width:0%;transition:width 0.8s ease"></div></div>
|
||||
<span class="skill-pct" id="pct-uiux-design">—</span>
|
||||
</div>
|
||||
<!-- Networking / DevOps -->
|
||||
<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 class="skill-track"><div class="skill-fill" id="bar-networking-devops" style="width:0%;transition:width 0.8s ease"></div></div>
|
||||
<span class="skill-pct" id="pct-networking-devops">—</span>
|
||||
</div>
|
||||
<!-- Cybersecurity -->
|
||||
<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 class="skill-track"><div class="skill-fill" id="bar-cybersecurity" style="width:0%;transition:width 0.8s ease"></div></div>
|
||||
<span class="skill-pct" id="pct-cybersecurity">—</span>
|
||||
</div>
|
||||
<!-- Machine Learning / AI -->
|
||||
<div class="skill-row">
|
||||
<span class="skill-label">Machine Learning / AI</span>
|
||||
<div class="skill-track"><div class="skill-fill" id="bar-machine-learning-ai" style="width:0%;transition:width 0.8s ease"></div></div>
|
||||
<span class="skill-pct" id="pct-machine-learning-ai">—</span>
|
||||
</div>
|
||||
<!-- Database -->
|
||||
<div class="skill-row">
|
||||
<span class="skill-label">Database</span>
|
||||
<div class="skill-track"><div class="skill-fill" id="bar-database" style="width:0%;transition:width 0.8s ease"></div></div>
|
||||
<span class="skill-pct" id="pct-database">—</span>
|
||||
</div>
|
||||
|
||||
<!-- Status note -->
|
||||
<p id="skill-data-note" style="font-size:0.72rem;color:#9ca3af;margin-top:14px;text-align:right;font-style:italic;">
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
style="display:inline-block;vertical-align:middle;margin-right:3px;animation:spin 1s linear infinite" id="skill-note-spinner">
|
||||
<path d="M21 12a9 9 0 1 1-6.219-8.56"/>
|
||||
</svg>
|
||||
<span id="skill-note-text">Memuat data skill alumni...</span>
|
||||
</p>
|
||||
</div>
|
||||
<!-- stat box -->
|
||||
<div class="rv d2" style="height: 100%;">
|
||||
@@ -2625,8 +2701,6 @@
|
||||
<!-- Scroll Reveal Observer & Chart.js Initialization -->
|
||||
<script>
|
||||
/* ── IKA FORM SUBMIT ── */
|
||||
// Silakan ganti URL di bawah dengan Web App URL (akhiran /exec) hasil Deploy project Apps Script Anda.
|
||||
// Cara Deploy: di Apps Script editor -> Deploy -> New deployment -> Web app -> Who has access: Anyone.
|
||||
const IKA_SCRIPT_URL = "https://script.google.com/macros/s/AKfycbwrXG3YFu4PEY3Z3acYeFTLCozM6iERfA7_yWxXaiJn7ULwau5vTIpt0Zv04OziMit-/exec";
|
||||
|
||||
// Checkbox visual toggle
|
||||
@@ -2705,6 +2779,98 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ── SKILL DISTRIBUTION — Live fetch from Google Sheets (approved rows only) ── */
|
||||
(function fetchSkillData() {
|
||||
const SHEET_ID = '1mtVB1vLev-OWz6aTuuddGKPS8tCv8MJcGpzws8irpxk';
|
||||
// Col I=Skill1, J=Skill2, K=Skill3, L=Approved (admin status)
|
||||
const query = encodeURIComponent("select I,J,K where lower(L)='approved'");
|
||||
const url = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:json&tq=${query}`;
|
||||
|
||||
// Map: skill label → bar id prefix (must match id="bar-XXX" and id="pct-XXX" in HTML)
|
||||
const SKILL_MAP = {
|
||||
'Web Development' : 'web-development',
|
||||
'Mobile Development' : 'mobile-development',
|
||||
'Python / Data Science': 'python-data-science',
|
||||
'UI/UX Design' : 'uiux-design',
|
||||
'Networking / DevOps' : 'networking-devops',
|
||||
'Cybersecurity' : 'cybersecurity',
|
||||
'Machine Learning / AI': 'machine-learning-ai',
|
||||
'Database' : 'database',
|
||||
};
|
||||
|
||||
const spinner = document.getElementById('skill-note-spinner');
|
||||
const noteText = document.getElementById('skill-note-text');
|
||||
|
||||
function setNote(text, spin, isCta) {
|
||||
if (spinner) spinner.style.animation = spin ? 'spin 1s linear infinite' : 'none';
|
||||
if (!noteText) return;
|
||||
if (isCta) {
|
||||
noteText.innerHTML = text + ' <a href="#kontribusi" style="color:#2352a0;font-weight:700;text-decoration:underline;text-underline-offset:2px;">Isi form kontribusi</a>';
|
||||
} else {
|
||||
noteText.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeSkill(val) {
|
||||
if (!val) return null;
|
||||
const s = val.toLowerCase().trim();
|
||||
if (s.includes('web')) return 'Web Development';
|
||||
if (s.includes('mobile')) return 'Mobile Development';
|
||||
if (s.includes('python') || s.includes('data science') || s.includes('data science')) return 'Python / Data Science';
|
||||
if (s.includes('ui') || s.includes('ux')) return 'UI/UX Design';
|
||||
if (s.includes('network') || s.includes('devops')) return 'Networking / DevOps';
|
||||
if (s.includes('cyber')) return 'Cybersecurity';
|
||||
if (s.includes('machine') || s.includes('ai') || s.includes('artificial')) return 'Machine Learning / AI';
|
||||
if (s.includes('database') || s.includes('db')) return 'Database';
|
||||
return null;
|
||||
}
|
||||
|
||||
fetch(url)
|
||||
.then(res => res.text())
|
||||
.then(raw => {
|
||||
const json = JSON.parse(raw.replace(/^[^{]+/, '').replace(/[);]+$/, ''));
|
||||
const rows = (json.table && json.table.rows) ? json.table.rows : [];
|
||||
|
||||
if (rows.length === 0) {
|
||||
setNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Count normalized skill mentions
|
||||
const counts = {};
|
||||
rows.forEach(row => {
|
||||
[0, 1, 2].forEach(colIdx => {
|
||||
const cell = row.c && row.c[colIdx];
|
||||
const val = cell && cell.v ? String(cell.v).trim() : '';
|
||||
const normalized = normalizeSkill(val);
|
||||
if (normalized) {
|
||||
counts[normalized] = (counts[normalized] || 0) + 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const totalMentions = Object.values(counts).reduce((s, c) => s + c, 0);
|
||||
const maxCount = Math.max(...Object.values(counts), 0);
|
||||
|
||||
// Update bars for predefined skills
|
||||
Object.entries(SKILL_MAP).forEach(([label, idKey]) => {
|
||||
const count = counts[label] || 0;
|
||||
const pct = totalMentions > 0 ? Math.round((count / totalMentions) * 100) : 0;
|
||||
const barPct = maxCount > 0 ? Math.round((count / maxCount) * 100) : 0;
|
||||
|
||||
const barEl = document.getElementById('bar-' + idKey);
|
||||
const pctEl = document.getElementById('pct-' + idKey);
|
||||
if (barEl) barEl.style.width = barPct + '%';
|
||||
if (pctEl) pctEl.textContent = count > 0 ? pct + '%' : '—';
|
||||
});
|
||||
|
||||
setNote(`Data dari ${rows.length} alumni yang diverifikasi.`, false, false);
|
||||
})
|
||||
.catch(() => {
|
||||
setNote('Data skill masih kosong, bantu kami lengkapi data ini!', false, false);
|
||||
});
|
||||
})();
|
||||
|
||||
/* ── REVEAL ON SCROLL ── */
|
||||
const ro = new IntersectionObserver(
|
||||
(entries) => {
|
||||
|
||||
@@ -593,12 +593,6 @@ a {
|
||||
justify-content: center;
|
||||
border: 3px solid var(--navy-ghost);
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.achiever-avatar-circle img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.achiever-card:hover .achiever-avatar-circle {
|
||||
border-color: var(--gold-lt);
|
||||
|
||||
Reference in New Issue
Block a user