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>

groups/ACAAB/style.css

@@ -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; }
+

groups/ApeNameTeamE/style.css

@@ -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; }
+

groups/LimaEm/style.css

@@ -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; }
+

groups/RODA/style.css

@@ -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; }
+

groups/Tapops/style.css

@@ -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; }
+

index.html

@@ -22,11 +22,16 @@
       <h1>Web Student Safe</h1>
       <p>Launcher untuk akses halaman tiap kelompok.</p>
       <ul>
-        <li><a href="./groups/group-01/index.html">Group 01</a></li>
+        <li><a href="./groups/Jellyfish.Corp/index.html">Group 01 – Jellyfish.Corp</a></li>
-        <li><a href="./groups/group-02/index.html">Group 02</a></li>
+        <li><a href="./groups/HabisIniSeminar/index.html">Group 02 – HabisIniSeminar</a></li>
-        <li><a href="./groups/group-03/index.html">Group 03</a></li>
+        <li><a href="./groups/HarusSelesaiKP/index.html">Group 03 – HarusSelesaiKP</a></li>
-        <li><a href="./groups/group-04/index.html">Group 04</a></li>
+        <li><a href="./groups/C4A/index.html">Group 04 – C4A</a></li>
-        <li><a href="./groups/group-05/index.html">Group 05</a></li>
+        <li><a href="./groups/M4N1FEST/index.html">Group 05 – M4N1FEST</a></li>
+        <li><a href="./groups/ACAAB/index.html">Group 06 – ACAAB</a></li>
+        <li><a href="./groups/LimaEm/index.html">Group 07 – LIMA EM</a></li>
+        <li><a href="./groups/RODA/index.html">Group 08 – RODA</a></li>
+        <li><a href="./groups/Tapops/index.html">Group 09 – TAPOPS</a></li>
+        <li><a href="./groups/ApeNameTeamE/index.html">Group 10 – Ape Name Tim E</a></li>
       </ul>
     </section>
   </main>