feat: tambah grup 06-10 (PPL-B) dan update shell halaman grup

- Update index.html launcher: tambah Group 06-10 (ACAAB, LimaEm, RODA, Tapops, ApeNameTeamE)
- Semua 10 halaman grup kini pakai navbar & footer identik dengan prod (Tailwind, mega menu, mobile menu)
- Tambah assets/global/output.css dan localization.js untuk dukungan Tailwind dan toggle ID/EN
- Buat folder dan index.html untuk Group 06-10

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Power BI Dev
2026-05-22 07:52:07 +07:00
parent b8fbc7c769
commit d80baff1e1
20 changed files with 22812 additions and 205 deletions

1338
groups/ACAAB/index.html Normal file

File diff suppressed because it is too large Load Diff

48
groups/ACAAB/style.css Normal file
View File

@@ -0,0 +1,48 @@
:root {
--brand-navy: #003150;
--brand-yellow: #feb401;
--text-main: #1e293b;
--text-soft: #64748b;
--bg-soft: #f8fafc;
--line: #e2e8f0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
.container { width: min(1100px, 92%); margin-inline: auto; }
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
.cover img { width: 100%; height: auto; display: block; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.article-body p { margin: 0 0 1em; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
.article-body a { color: #005eb8; }
.article-body img { max-width: 100%; border-radius: 8px; }
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
.footer-logo { height: 28px; width: auto; }
.footer-ornament { width: 100%; display: block; opacity: .9; }

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,48 @@
:root {
--brand-navy: #003150;
--brand-yellow: #feb401;
--text-main: #1e293b;
--text-soft: #64748b;
--bg-soft: #f8fafc;
--line: #e2e8f0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
.container { width: min(1100px, 92%); margin-inline: auto; }
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
.cover img { width: 100%; height: auto; display: block; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.article-body p { margin: 0 0 1em; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
.article-body a { color: #005eb8; }
.article-body img { max-width: 100%; border-radius: 8px; }
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
.footer-logo { height: 28px; width: auto; }
.footer-ornament { width: 100%; display: block; opacity: .9; }

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

1338
groups/LimaEm/index.html Normal file

File diff suppressed because it is too large Load Diff

48
groups/LimaEm/style.css Normal file
View File

@@ -0,0 +1,48 @@
:root {
--brand-navy: #003150;
--brand-yellow: #feb401;
--text-main: #1e293b;
--text-soft: #64748b;
--bg-soft: #f8fafc;
--line: #e2e8f0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
.container { width: min(1100px, 92%); margin-inline: auto; }
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
.cover img { width: 100%; height: auto; display: block; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.article-body p { margin: 0 0 1em; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
.article-body a { color: #005eb8; }
.article-body img { max-width: 100%; border-radius: 8px; }
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
.footer-logo { height: 28px; width: auto; }
.footer-ornament { width: 100%; display: block; opacity: .9; }

File diff suppressed because it is too large Load Diff

1338
groups/RODA/index.html Normal file

File diff suppressed because it is too large Load Diff

48
groups/RODA/style.css Normal file
View File

@@ -0,0 +1,48 @@
:root {
--brand-navy: #003150;
--brand-yellow: #feb401;
--text-main: #1e293b;
--text-soft: #64748b;
--bg-soft: #f8fafc;
--line: #e2e8f0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
.container { width: min(1100px, 92%); margin-inline: auto; }
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
.cover img { width: 100%; height: auto; display: block; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.article-body p { margin: 0 0 1em; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
.article-body a { color: #005eb8; }
.article-body img { max-width: 100%; border-radius: 8px; }
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
.footer-logo { height: 28px; width: auto; }
.footer-ornament { width: 100%; display: block; opacity: .9; }

1338
groups/Tapops/index.html Normal file

File diff suppressed because it is too large Load Diff

48
groups/Tapops/style.css Normal file
View File

@@ -0,0 +1,48 @@
:root {
--brand-navy: #003150;
--brand-yellow: #feb401;
--text-main: #1e293b;
--text-soft: #64748b;
--bg-soft: #f8fafc;
--line: #e2e8f0;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Roboto", Arial, sans-serif; color: var(--text-main); background: #fff; line-height: 1.6; }
.container { width: min(1100px, 92%); margin-inline: auto; }
.nav { background: var(--brand-navy); color: #fff; border-bottom: 4px solid var(--brand-yellow); padding: 14px 0; }
.brand { font-size: 1.1rem; font-weight: 700; letter-spacing: .02em; }
.hero { position: relative; color: #fff; min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45); }
.hero-inner { position: relative; z-index: 1; padding: 36px 0; }
.badge { display: inline-block; background: var(--brand-yellow); color: #111827; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .2rem .45rem; margin-bottom: 12px; }
.hero h1 { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.2; }
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; padding: 2rem 0 4rem; }
@media (min-width: 1024px) { .layout { grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr); } }
.meta { font-size: .78rem; text-transform: uppercase; color: #475569; display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-bottom: 1rem; }
.cover { background: var(--bg-soft); border: 1px solid var(--line); margin-bottom: 1.5rem; }
.cover img { width: 100%; height: auto; display: block; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
.article-body h3 { font-size: 1.1rem; margin: 1.4em 0 .4em; }
.article-body p { margin: 0 0 1em; }
.article-body ul, .article-body ol { padding-left: 1.4rem; }
.article-body blockquote { border-left: 4px solid #005eb8; background: #eef6ff; padding: .8rem 1rem; color: #334155; }
.article-body a { color: #005eb8; }
.article-body img { max-width: 100%; border-radius: 8px; }
.article-body code { background: #f1f5f9; padding: .1em .35em; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.note { border: 1px solid var(--line); background: var(--bg-soft); padding: 1rem; }
.note h3 { margin: 0 0 .5rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: #475569; }
.footer { margin-top: 2rem; background: var(--brand-navy); color: #fff; border-top: 4px solid var(--brand-yellow); }
.footer-inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 1rem 0; }
.footer-logo { height: 28px; width: auto; }
.footer-ornament { width: 100%; display: block; opacity: .9; }