Peta Jaringan Keiretsu

#!/usr/bin/env python3 # -*- coding: utf-8 -*- """Generator widget ib-asia-pacific. Menulis file .html ke folder ini. Setiap widget: ES5 IIFE, syncTheme literal, aria-label, viewBox<=660x260, body padding 12px, .wrap max-width 700px, reset bila >=2 kontrol, Bahasa Indonesia. """ import os, textwrap HERE = os.path.dirname(os.path.abspath(__file__)) HEAD = """ Peta Jaringan Keiretsu — stdsquare

Peta Jaringan Keiretsu Jepang

Keiretsu

Bank inti—

Anggota inti—

Sifat: —

Keiretsu = jaringan perusahaan dengan saham silang, mengelilingi satu main bank. Stabil jangka panjang tapi kurang responsif terhadap shareholder aktivis. Beda dari chaebol (keluarga).

""" def fmt_body(svg, ctrls, metrics_html, steps_html, cap_html, h3): parts = [] parts.append('

%s

' % h3) if ctrls: parts.append('

' % "".join(ctrls)) if svg: parts.append(svg) if metrics_html: parts.append('

' % metrics_html) if steps_html: parts.append('

' % steps_html) if cap_html: parts.append(cap_html) if ctrls: parts.append(' ') parts.append('

') return "\n".join(parts) * { box-sizing:border-box; margin:0; padding:0; } body { font-family:Inter, system-ui, -apple-system, sans-serif; background:var(--cbg); color:var(--text); padding:12px; font-size:14px; line-height:1.5; } .wrap { max-width:700px; margin:0 auto; } h2.h { font-size:15px; font-weight:700; margin-bottom:6px; color:var(--text); } p.lead { font-size:12.5px; color:var(--text-muted); margin-bottom:8px; line-height:1.55; } .panel { border:1px solid var(--hairline); border-radius:10px; padding:10px 12px; margin-bottom:8px; background:var(--card-bg); } .panel > h3 { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-soft); margin-bottom:7px; } .ctrls { display:flex; gap:12px; flex-wrap:wrap; } .grp { flex:1 1 200px; min-width:0; } .frow { display:flex; align-items:center; gap:6px; margin-bottom:5px; } .frow label { flex:0 0 auto; width:130px; font-size:11px; color:var(--text-soft); line-height:1.2; } .frow input, .frow select { flex:1 1 auto; min-width:0; padding:4px 6px; font:600 12px Inter, system-ui, sans-serif; border:1px solid var(--hairline); border-radius:5px; background:var(--cbg); color:var(--text); } .frow input:focus, .frow select:focus { outline:2px solid var(--accent-tint); border-color:var(--accent); } .frow .unit { flex:0 0 auto; width:46px; font-size:10px; color:var(--text-faint); } button.reset { margin-top:6px; padding:5px 12px; font:600 11px Inter, system-ui, sans-serif; border:1px solid var(--hairline); border-radius:6px; background:var(--panel-bg); color:var(--text-soft); cursor:pointer; } button.reset:hover { border-color:var(--accent); color:var(--accent); } svg { width:100%; display:block; } .metrics { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; } .mcell { flex:1 1 90px; min-width:0; border:1px solid var(--hairline); border-radius:7px; padding:6px 8px; background:var(--panel-bg); text-align:center; } .mcell .mlabel { font-size:9px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.02em; display:block; margin-bottom:2px; } .mcell .mval { font-size:15px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; } .mcell.win { border-color:var(--accent2); background:var(--accent2-tint); } .mcell.win .mval { color:var(--accent2); } .mcell.lose { border-color:var(--accent); background:var(--accent-tint); } .mcell.lose .mval { color:var(--accent); } .steps { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; color:var(--text-soft); background:var(--panel-bg); border-radius:7px; padding:7px 10px; margin-top:7px; line-height:1.8; } .steps b { color:var(--text); } .steps .lbl { color:var(--text-faint); font-family:Inter, system-ui, sans-serif; } .cap { font-size:11.5px; color:var(--text-soft); margin-top:7px; line-height:1.55; } .cap b { color:var(--text); } .cap .warn { color:var(--accent); font-weight:700; } .legend { display:flex; gap:10px; margin-top:6px; font-size:10.5px; color:var(--text-soft); flex-wrap:wrap; } .legend span { display:inline-flex; align-items:center; gap:4px; } .legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }