Eureka of the Day: MEMBUAT SCROLL BOX! | Help by ChatGPT

RAW:

%%{init: {'theme':'base', 'themeVariables': {

'primaryColor':'#e3f2fd','primaryTextColor':'#01579b','primaryBorderColor':'#0277bd',

'lineColor':'#0288d1','secondaryColor':'#c8e6c9','tertiaryColor':'#fff9c4',

'noteBkgColor':'#fff3e0','noteTextColor':'#e65100'}}}%% flowchart TD Start([Teks

Kanji Input]) --> Header1[/"bLAPISAN 1 – JALUR PRIORITAS JEPANG"\] Header1

--> Opsi1[OPSI 1 – Jalur Auto-Detect] Opsi1 --> Auto["Auto-detect

GoogleTranslate"] Auto --> Fail1["❌ FAILURE"] Header1 --> Separator[" "]

Separator --> Opsi2[OPSI 2 – Jalur Deteksi Jepang] Opsi2 -->

Check{"isJapanese()?"} Check -->|NO| Layer2["Masuk Lapisan 2"] Check -->|YES|

JP["jpTranslate(sl=ja)"] JP --> Force["Paksa sl=ja ke Google"] Force -->

Success["✅ SUCCESS"] style Header1

fill:#0277bd,stroke:#01579b,stroke-width:3px,color:#fff style Opsi1

fill:#ffeb3b,stroke:#f57f17,stroke-width:2px,color:#000 style Opsi2

fill:#4caf50,stroke:#2e7d32,stroke-width:2px,color:#fff style Fail1

fill:#f44336,stroke:#c62828,stroke-width:2px,color:#fff style Success

fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff style Check

fill:#03a9f4,stroke:#0277bd,stroke-width:2px,color:#fff style JP

fill:#8bc34a,stroke:#558b2f,stroke-width:2px,color:#000 style Force

fill:#9c27b0,stroke:#6a1b9a,stroke-width:2px,color:#fff style Auto

fill:#ffa726,stroke:#e65100,stroke-width:2px,color:#000 style Layer2

fill:#90caf9,stroke:#1976d2,stroke-width:2px,color:#000 style Start

fill:#e1f5fe,stroke:#0277bd,stroke-width:2px,color:#01579b style Separator

fill:none,stroke:none

---

---

MODIFIED

SOURCE CODE

<div

    style="

        background-color: #282c34; color: #abb2bf; font-family: Consolas, 'Courier New', monospace; font-size: 14px; line-height: 19px; white-space: pre; padding: 12px; border-radius: 4px; "

>

<div>'%%{init: {'theme':'base', 'themeVariables': {</div>

<div style="line-height:19px;">

<div>'primaryColor':'#e3f2fd','primaryTextColor':'#01579b','primaryBorderColor':'#0277bd',</div>

<div>'lineColor':'#0288d1','secondaryColor':'#c8e6c9','tertiaryColor':'#fff9c4',</div>

<div>'noteBkgColor':'#fff3e0','noteTextColor':'#e65100'}}}%% flowchart TD Start([Teks</div>

<div>Kanji Input]) --> Header1[/"<b>LAPISAN 1 – JALUR PRIORITAS JEPANG</b>"\] Header1</div>

<div>--> Opsi1[<b>OPSI 1 – Jalur Auto-Detect</b>] Opsi1 --> Auto["Auto-detect</div>

<div>GoogleTranslate"] Auto --> Fail1["❌ <b>FAILURE</b>"] Header1 --> Separator[" "]</div>

<div>Separator --> Opsi2[<b>OPSI 2 – Jalur Deteksi Jepang</b>] Opsi2 --></div>

<div>Check{"isJapanese()?"} Check -->|NO| Layer2["Masuk Lapisan 2"] Check -->|YES|</div>

<div>JP["jpTranslate(sl=ja)"] JP --> Force["Paksa sl=ja ke Google"] Force --></div>

<div>Success["✅ <b>SUCCESS</b>"] style Header1</div>

<div>fill:#0277bd,stroke:#01579b,stroke-width:3px,color:#fff style Opsi1</div>

<div>fill:#ffeb3b,stroke:#f57f17,stroke-width:2px,color:#000 style Opsi2</div>

<div>fill:#4caf50,stroke:#2e7d32,stroke-width:2px,color:#fff style Fail1</div>

<div>fill:#f44336,stroke:#c62828,stroke-width:2px,color:#fff style Success</div>

<div>fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff style Check</div>

<div>fill:#03a9f4,stroke:#0277bd,stroke-width:2px,color:#fff style JP</div>

<div>fill:#8bc34a,stroke:#558b2f,stroke-width:2px,color:#000 style Force</div>

<div>fill:#9c27b0,stroke:#6a1b9a,stroke-width:2px,color:#fff style Auto</div>

<div>fill:#ffa726,stroke:#e65100,stroke-width:2px,color:#000 style Layer2</div>

<div>fill:#90caf9,stroke:#1976d2,stroke-width:2px,color:#000 style Start</div>

<div>fill:#e1f5fe,stroke:#0277bd,stroke-width:2px,color:#01579b style Separator</div>

<div>fill:none,stroke:none</div>

<br />

</div>

</div>

RENDERED-TEXT + SCROLL Activated

'%%{init: {'theme':'base', 'themeVariables': {

'primaryColor':'#e3f2fd','primaryTextColor':'#01579b','primaryBorderColor':'#0277bd',

'lineColor':'#0288d1','secondaryColor':'#c8e6c9','tertiaryColor':'#fff9c4',

'noteBkgColor':'#fff3e0','noteTextColor':'#e65100'}}}%% flowchart TD Start([Teks

Kanji Input]) --> Header1[/"<b>LAPISAN 1 – JALUR PRIORITAS JEPANG</b>"\] Header1

--> Opsi1[<b>OPSI 1 – Jalur Auto-Detect</b>] Opsi1 --> Auto["Auto-detect

GoogleTranslate"] Auto --> Fail1["❌ <b>FAILURE</b>"] Header1 --> Separator[" "]

Separator --> Opsi2[<b>OPSI 2 – Jalur Deteksi Jepang</b>] Opsi2 -->

Check{"isJapanese()?"} Check -->|NO| Layer2["Masuk Lapisan 2"] Check -->|YES|

JP["jpTranslate(sl=ja)"] JP --> Force["Paksa sl=ja ke Google"] Force -->

Success["✅ <b>SUCCESS</b>"] style Header1

fill:#0277bd,stroke:#01579b,stroke-width:3px,color:#fff style Opsi1

fill:#ffeb3b,stroke:#f57f17,stroke-width:2px,color:#000 style Opsi2

fill:#4caf50,stroke:#2e7d32,stroke-width:2px,color:#fff style Fail1

fill:#f44336,stroke:#c62828,stroke-width:2px,color:#fff style Success

fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff style Check

fill:#03a9f4,stroke:#0277bd,stroke-width:2px,color:#fff style JP

fill:#8bc34a,stroke:#558b2f,stroke-width:2px,color:#000 style Force

fill:#9c27b0,stroke:#6a1b9a,stroke-width:2px,color:#fff style Auto

fill:#ffa726,stroke:#e65100,stroke-width:2px,color:#000 style Layer2

fill:#90caf9,stroke:#1976d2,stroke-width:2px,color:#000 style Start

fill:#e1f5fe,stroke:#0277bd,stroke-width:2px,color:#01579b style Separator

fill:none,stroke:none

---

📜 RAW CODE — Mermaid Flowchart Source

%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#e3f2fd', 'primaryTextColor': '#01579b', 'primaryBorderColor': '#0277bd', 'lineColor': '#0288d1', 'secondaryColor': '#c8e6c9', 'tertiaryColor': '#fff9c4', 'noteBkgColor': '#fff3e0', 'noteTextColor': '#e65100' }}}%% flowchart TD Start([Teks Kanji Input]) --> Header1[/"LAPISAN 1 - JALUR PRIORITAS JEPANG"\] Header1 --> Opsi1[OPSI 1 - Jalur Auto-Detect] Opsi1 --> Auto["Auto-detect GoogleTranslate"] Auto --> Fail1["FAILURE"] Header1 --> Separator[" "] Separator --> Opsi2[OPSI 2 - Jalur Deteksi Jepang] Opsi2 --> Check{"isJapanese()?"} Check -->|NO| Layer2["Masuk Lapisan 2"] Check -->|YES| JP["jpTranslate(sl=ja)"] JP --> Force["Paksa sl=ja ke Google"] Force --> Success["SUCCESS"] style Header1 fill:#0277bd,stroke:#01579b,stroke-width:3px,color:#fff style Opsi1 fill:#ffeb3b,stroke:#f57f17,stroke-width:2px,color:#000 style Opsi2 fill:#4caf50,stroke:#2e7d32,stroke-width:2px,color:#fff style Fail1 fill:#f44336,stroke:#c62828,stroke-width:2px,color:#fff style Success fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff style Check fill:#03a9f4,stroke:#0277bd,stroke-width:2px,color:#fff style JP fill:#8bc34a,stroke:#558b2f,stroke-width:2px,color:#000 style Force fill:#9c27b0,stroke:#6a1b9a,stroke-width:2px,color:#fff style Auto fill:#ffa726,stroke:#e65100,stroke-width:2px,color:#000 style Layer2 fill:#90caf9,stroke:#1976d2,stroke-width:2px,color:#000 style Start fill:#e1f5fe,stroke:#0277bd,stroke-width:2px,color:#01579b style Separator fill:none,stroke:none

🔀 RENDERED DIAGRAM — Lapisan 1: Jalur Prioritas Jepang

%%{init: {'theme':'base', 'themeVariables': { 'primaryColor': '#e3f2fd', 'primaryTextColor': '#01579b', 'primaryBorderColor': '#0277bd', 'lineColor': '#0288d1', 'secondaryColor': '#c8e6c9', 'tertiaryColor': '#fff9c4', 'noteBkgColor': '#fff3e0', 'noteTextColor': '#e65100' }}}%% flowchart TD Start([Teks Kanji Input]) --> Header1[/"LAPISAN 1 - JALUR PRIORITAS JEPANG"\] Header1 --> Opsi1[OPSI 1 - Jalur Auto-Detect] Opsi1 --> Auto["Auto-detect GoogleTranslate"] Auto --> Fail1["❌ FAILURE"] Header1 --> Separator[" "] Separator --> Opsi2[OPSI 2 - Jalur Deteksi Jepang] Opsi2 --> Check{"isJapanese()?"} Check -->|NO| Layer2["Masuk Lapisan 2"] Check -->|YES| JP["jpTranslate(sl=ja)"] JP --> Force["Paksa sl=ja ke Google"] Force --> Success["✅ SUCCESS"] style Header1 fill:#0277bd,stroke:#01579b,stroke-width:3px,color:#fff style Opsi1 fill:#ffeb3b,stroke:#f57f17,stroke-width:2px,color:#000 style Opsi2 fill:#4caf50,stroke:#2e7d32,stroke-width:2px,color:#fff style Fail1 fill:#f44336,stroke:#c62828,stroke-width:2px,color:#fff style Success fill:#4caf50,stroke:#2e7d32,stroke-width:3px,color:#fff style Check fill:#03a9f4,stroke:#0277bd,stroke-width:2px,color:#fff style JP fill:#8bc34a,stroke:#558b2f,stroke-width:2px,color:#000 style Force fill:#9c27b0,stroke:#6a1b9a,stroke-width:2px,color:#fff style Auto fill:#ffa726,stroke:#e65100,stroke-width:2px,color:#000 style Layer2 fill:#90caf9,stroke:#1976d2,stroke-width:2px,color:#000 style Start fill:#e1f5fe,stroke:#0277bd,stroke-width:2px,color:#01579b style Separator fill:none,stroke:none

⚙️ Powered by Mermaid.js — Diagram rendered automatically on page load. If the diagram does not appear, please reload the page.