From 839f020ebc4b266741213eb0b0d9d0f57e8cc403 Mon Sep 17 00:00:00 2001
From: ed1rac <edkallenn@gmail.com>
Date: Sat, 21 Mar 2026 18:30:52 -0300
Subject: [PATCH] feat: modernize UI with SPA layout, console iframe, and i18n
 support

---
 README.md   |   6 +-
 app.js      | 194 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 index.css   | 190 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html  | 185 +++++++++++++++++++++++++++++++------------------
 util_web.js |  18 ++++-
 5 files changed, 525 insertions(+), 68 deletions(-)
 create mode 100644 app.js
 create mode 100644 index.css

diff --git a/README.md b/README.md
index 18e2c75..a42f57e 100644
--- a/README.md
+++ b/README.md
@@ -4,4 +4,8 @@ JavaScript ports of the examples in David Kopec's "Classic Computer Science Prob
 ## Running Examples
 On console: Type `node {filename}.js`
 
-In a web browser: Open `index.html` from the example root directory and click the links to run the various examples
+In a web browser (Modern UI):
+To run the Single Page Application dashboard and avoid CORS security blocks when reading local files, you should run a local server.
+1. Open your terminal in this directory.
+2. Run `npx serve .` (requires Node.js).
+3. Open `http://localhost:3000` in your browser.
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..5777a59
--- /dev/null
+++ b/app.js
@@ -0,0 +1,194 @@
+const i18n = {
+  en: {
+    title: "Classic CS Problems (JS)",
+    toggleLang: "PT-BR",
+    codeTitle: "Source Code",
+    consoleTitle: "Console Output",
+    selectProblem: "Select a problem from the sidebar to view its code and output.",
+    chapters: {
+      chapter1: "Chapter 1: Small Problems",
+      chapter2: "Chapter 2: Search Problems",
+      chapter3: "Chapter 3: Constraint-satisfaction",
+      chapter4: "Chapter 4: Graph Problems",
+      chapter5: "Chapter 5: Genetic Algorithms",
+      chapter6: "Chapter 6: kMeans Clustering",
+      chapter7: "Chapter 7: Neural Networks",
+      chapter8: "Chapter 8: Adversarial Search",
+      chapter9: "Chapter 9: Miscellaneous",
+    },
+    problems: {
+      fib1: "Fibonacci (missing base case)",
+      fib2: "Fibonacci (recursive)",
+      fib3: "Fibonacci (memoization)",
+      fib4: "Fibonacci (iterative)",
+      fib5: "Fibonacci (generator)",
+      compression: "Trivial Compression",
+      encryption: "Unbreakable Encryption",
+      pi: "Calculating Pi",
+      hanoi: "Towers of Hanoi",
+      dna: "DNA Search",
+      generic_search: "Generic Search Test",
+      maze: "Maze Solving",
+      missionaries: "Missionaries & Cannibals",
+      map_coloring: "Map-coloring Problem",
+      queens: "Eight Queens Problem",
+      word_search: "Word Search",
+      send_more_money: "SEND+MORE=MONEY",
+      graph: "Graph (shortest path)",
+      weighted_graph: "Weighted Graph",
+      mst: "Minimum Spanning Tree",
+      dijkstra: "Dijkstra's Algorithm",
+      simple_eq: "Simple Equation",
+      list_comp: "List Compression",
+      send_more_money2: "SEND+MORE=MONEY 2",
+      kmeans_trivial: "kMeans Trivial",
+      governors: "Governors",
+      mj: "Michael Jackson Albums",
+      iris: "Iris Classification",
+      wine: "Wine Classification",
+      tictactoe: "Tic Tac Toe",
+      connectfour: "Connect Four",
+      knapsack: "The Knapsack Problem",
+      tsp: "Traveling Salesman Problem",
+      phone_mnemonics: "Phone Number Mnemonics"
+    }
+  },
+  pt: {
+    title: "Problemas Clássicos (JS)",
+    toggleLang: "EN",
+    codeTitle: "Código Fonte",
+    consoleTitle: "Saída do Console",
+    selectProblem: "Selecione um problema na barra lateral para ver o código e o resultado.",
+    chapters: {
+      chapter1: "Capítulo 1: Problemas Pequenos",
+      chapter2: "Capítulo 2: Problemas de Busca",
+      chapter3: "Capítulo 3: Satisfação de Restrições",
+      chapter4: "Capítulo 4: Problemas de Grafos",
+      chapter5: "Capítulo 5: Algoritmos Genéticos",
+      chapter6: "Capítulo 6: Clusterização kMeans",
+      chapter7: "Capítulo 7: Redes Neurais",
+      chapter8: "Capítulo 8: Busca Adversária",
+      chapter9: "Capítulo 9: Diversos",
+    },
+    problems: {
+      fib1: "Fibonacci (sem caso base)",
+      fib2: "Fibonacci (recursivo)",
+      fib3: "Fibonacci (memoização)",
+      fib4: "Fibonacci (iterativo)",
+      fib5: "Fibonacci (gerador)",
+      compression: "Compressão Trivial",
+      encryption: "Criptografia Inquebrável",
+      pi: "Calculando Pi",
+      hanoi: "Torres de Hanói",
+      dna: "Busca em DNA",
+      generic_search: "Teste Busca Genérica",
+      maze: "Resolvendo Labirinto",
+      missionaries: "Missionários e Canibais",
+      map_coloring: "Coloração de Mapa",
+      queens: "Problema das 8 Rainhas",
+      word_search: "Caça Palavras",
+      send_more_money: "SEND+MORE=MONEY",
+      graph: "Grafo (caminho curto)",
+      weighted_graph: "Grafo Ponderado",
+      mst: "Árvore Geradora Mínima",
+      dijkstra: "Algoritmo de Dijkstra",
+      simple_eq: "Equação Simples",
+      list_comp: "Compressão de Lista",
+      send_more_money2: "SEND+MORE=MONEY 2",
+      kmeans_trivial: "kMeans Trivial",
+      governors: "Governadores",
+      mj: "Álbuns do Michael Jackson",
+      iris: "Classificação Iris",
+      wine: "Classificação de Vinho",
+      tictactoe: "Jogo da Velha",
+      connectfour: "Ligue Quatro",
+      knapsack: "Problema da Mochila",
+      tsp: "Caixeiro Viajante",
+      phone_mnemonics: "Mnemônicos de Telefone"
+    }
+  }
+};
+
+let currentLang = 'en';
+
+function applyTranslations() {
+  document.querySelectorAll('[data-i18n]').forEach(el => {
+    const keyPath = el.getAttribute('data-i18n').split('.');
+    let value = i18n[currentLang];
+    for (const key of keyPath) {
+      if (value[key] !== undefined) {
+        value = value[key];
+      } else {
+        value = null;
+        break;
+      }
+    }
+    if (value) {
+      if (el.tagName === 'INPUT' && el.type === 'button') {
+        el.value = value;
+      } else {
+        el.textContent = value;
+      }
+    }
+  });
+  
+  // Update toggle button text specially to show opposite language
+  document.getElementById('lang-toggle').textContent = i18n[currentLang].toggleLang;
+}
+
+function toggleLanguage() {
+  currentLang = currentLang === 'en' ? 'pt' : 'en';
+  applyTranslations();
+  updateCurrentTitle();
+}
+
+function updateCurrentTitle() {
+  const activeEl = document.querySelector('.problem.active');
+  const titleEl = document.getElementById('current-title');
+  if (activeEl) {
+    titleEl.textContent = activeEl.textContent;
+  } else {
+    titleEl.textContent = i18n[currentLang].selectProblem;
+  }
+}
+
+async function loadProblem(liElement) {
+  // Update active states
+  document.querySelectorAll('.problem').forEach(el => el.classList.remove('active'));
+  liElement.classList.add('active');
+  updateCurrentTitle();
+
+  const jsPath = liElement.getAttribute('data-js');
+  const htmlPath = liElement.getAttribute('data-html');
+
+  // Load code in viewer
+  if (jsPath) {
+    try {
+      const response = await fetch(jsPath);
+      if (response.ok) {
+        const code = await response.text();
+        document.getElementById('code-viewer').textContent = code;
+      } else {
+        document.getElementById('code-viewer').textContent = "// Error loading " + jsPath;
+      }
+    } catch (e) {
+      document.getElementById('code-viewer').textContent = "// Error fetching " + jsPath;
+    }
+  }
+
+  // Load HTML in execution frame
+  if (htmlPath) {
+    document.getElementById('console-frame').src = htmlPath;
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  document.getElementById('lang-toggle').addEventListener('click', toggleLanguage);
+  
+  document.querySelectorAll('.problem').forEach(el => {
+    el.addEventListener('click', () => loadProblem(el));
+  });
+
+  applyTranslations();
+  updateCurrentTitle();
+});
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..14b358c
--- /dev/null
+++ b/index.css
@@ -0,0 +1,190 @@
+:root {
+  --bg-color: #0d1117;
+  --sidebar-bg: #161b22;
+  --text-primary: #c9d1d9;
+  --text-secondary: #8b949e;
+  --accent-color: #58a6ff;
+  --border-color: #30363d;
+  --panel-bg: #0d1117;
+  --code-bg: #1f2428;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  background-color: var(--bg-color);
+  color: var(--text-primary);
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+/* Sidebar */
+.sidebar {
+  width: 300px;
+  background-color: var(--sidebar-bg);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-header {
+  padding: 20px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sidebar-header h1 {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.lang-toggle {
+  background: var(--bg-color);
+  border: 1px solid var(--border-color);
+  color: var(--text-primary);
+  padding: 5px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  font-weight: bold;
+  transition: all 0.2s;
+}
+
+.lang-toggle:hover {
+  border-color: var(--accent-color);
+  color: var(--accent-color);
+}
+
+.sidebar-nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 10px 0;
+}
+
+.chapter {
+  margin-bottom: 5px;
+}
+
+.chapter-title {
+  padding: 8px 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.problem {
+  padding: 8px 20px 8px 30px;
+  display: block;
+  color: var(--text-primary);
+  text-decoration: none;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.problem:hover, .problem.active {
+  background-color: rgba(88, 166, 255, 0.1);
+  color: var(--accent-color);
+  border-left: 3px solid var(--accent-color);
+  padding-left: 27px;
+}
+
+/* Main Content area */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.top-bar {
+  height: 50px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  background-color: var(--sidebar-bg);
+}
+
+.current-problem-title {
+  font-weight: 600;
+  font-size: 1.1rem;
+}
+
+.split-view {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+/* Code Panel */
+.panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid var(--border-color);
+  background-color: var(--panel-bg);
+}
+
+.panel:last-child {
+  border-right: none;
+}
+
+.panel-header {
+  padding: 10px 20px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--sidebar-bg);
+  display: flex;
+  align-items: center;
+}
+
+.panel-content {
+  flex: 1;
+  overflow: auto;
+  position: relative;
+}
+
+pre#code-viewer {
+  margin: 0;
+  padding: 20px;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  background-color: var(--code-bg);
+  min-height: 100%;
+}
+
+.execution-frame {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: var(--bg-color);
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border-color);
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-secondary);
+}
diff --git a/index.html b/index.html
index 86d57ae..70bdbd4 100644
--- a/index.html
+++ b/index.html
@@ -1,71 +1,126 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-<title>Classic Computer Science Problems in JavaScript</title>
-<meta charset="utf-8" />
+  <meta charset="utf-8" />
+  <title>Classic Computer Science Problems in JavaScript</title>
+  <link rel="stylesheet" href="index.css" />
 </head>
 <body>
-<h1>Classic Computer Science Problems in JavaScript</h1>
-<h2>Chapter 1: Small Problems</h2>
-<ul>
-<li><a href="chapter1/fib1.html">Fibonacci Sequence (recursive with missing base case, will throw exception)</a></li>
-<li><a href="chapter1/fib2.html">Finonacci Sequence (recursive)</a></li>
-<li><a href="chapter1/fib3.html">Fibonacci Sequence (recursive with memoization)</a></li>
-<li><a href="chapter1/fib4.html">Fibonacci Sequence (iterative)</a></li>
-<li><a href="chapter1/fib5.html">Fibonacci Sequence (with generator)</a></li>
-<li><a href="chapter1/trivial_compression.html">Trivial Compression</a></li>
-<li><a href="chapter1/unbreakable_encryption.html">Unbreakable Encryption</a></li>
-<li><a href="chapter1/calculating_pi.html">Calculating Pi</a></li>
-<li><a href="chapter1/hanoi.html">Towers of Hanoi</a></li>
-</ul>
-<h2>Chapter 2: Search Problems</h2>
-<ul>
-<li><a href="chapter2/dna_search.html">DNA Search</a></li>
-<li><a href="chapter2/generic_search_test.html">Generic Search Feature Test</a></li>
-<li><a href="chapter2/maze.html">Maze Solving</a></li>
-<li><a href="chapter2/missionaries.html">Missionaries and Cannibals</a></li>
-</ul>
-<h2>Chapter 3: Constraint-satisfaction Problems</h2>
-<ul>
-<li><a href="chapter3/map_coloring.html">The Australian Map-coloring Problem</a></li>
-<li><a href="chapter3/queens.html">The Eight Queens Problem</a></li>
-<li><a href="chapter3/word_search.html">Word Search</a></li>
-<li><a href="chapter3/send_more_money.html">SEND+MORE=MONEY</a></li>
-</ul>
-<h2>Chapter 4: Graph Problems</h2>
-<ul>
-<li><a href="chapter4/graph_test.html">Graph (with shortest path)</a></li>
-<li><a href="chapter4/weighted_graph_test.html">Weighted Graph</a></li>
-<li><a href="chapter4/mst_test.html">Minimum Spanning Tree</a></li>
-<li><a href="chapter4/dijkstra_test.html">Dijkstra's Algorithm (shortest path in a weighted graph)</a></li>
-</ul>
-<h2>Chapter 5: Genetic Algprithms</h2>
-<ul>
-<li><a href="chapter5/simple_equation.html">Simple Equation</a></li>
-<li><a href="chapter5/list_compression.html">List Compression</a></li>
-<li><a href="chapter5/send_more_money2.html">SEND+MORE=MONEY Revisited</a></li>
-</ul>
-<h2>Chapter 6: kMeans Clustering</h2>
-<ul>
-<li><a href="chapter6/kmeans_test.html">Trivial Example</a></li>
-<li><a href="chapter6/governors.html">Governors</a></li>
-<li><a href="chapter6/mj.html">Michael Jackson Albums</a></li>
-</ul>
-<h2>Chapter 7: Fairly Simple Neural Networks</h2>
-<ul>
-<li><a href="chapter7/iris_test.html">Iris Classification</a></li>
-<li><a href="chapter7/wine_test.html">Wine Classification</a></li>
-</ul>
-<h2>Chapter 8: Adversarial Search</h2>
-<ul>
-<li><a href="chapter8/tictactoe_ai_web.html">Tic Tac Toe</a></li>
-<li><a href="chapter8/connectfour_ai_web.html">Connect Four</a></li>
-</ul>
-<h2>Chapter 9: Miscellaneous Problems</h2>
-<ul>
-<li><a href="chapter9/knapsack.html">The Knapsack Problem</a></li>
-<li><a href="chapter9/tsp.html">The Traveling Salesman Problem</a></li>
-<li><a href="chapter9/phone_number_mnemonics_web.html">Phone Number Mnemonics</a></li>
-</ul>
+
+  <!-- Sidebar -->
+  <aside class="sidebar">
+    <div class="sidebar-header">
+      <h1 data-i18n="title">Classic CS Problems (JS)</h1>
+      <button id="lang-toggle" class="lang-toggle">PT-BR</button>
+    </div>
+    
+    <nav class="sidebar-nav">
+      <!-- Chapter 1 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter1">Chapter 1: Small Problems</div>
+        <a class="problem" data-js="chapter1/fib1.js" data-html="chapter1/fib1.html" data-i18n="problems.fib1">Fibonacci (missing base case)</a>
+        <a class="problem" data-js="chapter1/fib2.js" data-html="chapter1/fib2.html" data-i18n="problems.fib2">Fibonacci (recursive)</a>
+        <a class="problem" data-js="chapter1/fib3.js" data-html="chapter1/fib3.html" data-i18n="problems.fib3">Fibonacci (memoization)</a>
+        <a class="problem" data-js="chapter1/fib4.js" data-html="chapter1/fib4.html" data-i18n="problems.fib4">Fibonacci (iterative)</a>
+        <a class="problem" data-js="chapter1/fib5.js" data-html="chapter1/fib5.html" data-i18n="problems.fib5">Fibonacci (generator)</a>
+        <a class="problem" data-js="chapter1/trivial_compression.js" data-html="chapter1/trivial_compression.html" data-i18n="problems.compression">Trivial Compression</a>
+        <a class="problem" data-js="chapter1/unbreakable_encryption.js" data-html="chapter1/unbreakable_encryption.html" data-i18n="problems.encryption">Unbreakable Encryption</a>
+        <a class="problem" data-js="chapter1/calculating_pi.js" data-html="chapter1/calculating_pi.html" data-i18n="problems.pi">Calculating Pi</a>
+        <a class="problem" data-js="chapter1/hanoi.js" data-html="chapter1/hanoi.html" data-i18n="problems.hanoi">Towers of Hanoi</a>
+      </div>
+
+      <!-- Chapter 2 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter2">Chapter 2: Search Problems</div>
+        <a class="problem" data-js="chapter2/dna_search.js" data-html="chapter2/dna_search.html" data-i18n="problems.dna">DNA Search</a>
+        <a class="problem" data-js="chapter2/generic_search.js" data-html="chapter2/generic_search_test.html" data-i18n="problems.generic_search">Generic Search Test</a>
+        <a class="problem" data-js="chapter2/maze.js" data-html="chapter2/maze.html" data-i18n="problems.maze">Maze Solving</a>
+        <a class="problem" data-js="chapter2/missionaries.js" data-html="chapter2/missionaries.html" data-i18n="problems.missionaries">Missionaries & Cannibals</a>
+      </div>
+
+      <!-- Chapter 3 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter3">Chapter 3: Constraint-satisfaction</div>
+        <a class="problem" data-js="chapter3/map_coloring.js" data-html="chapter3/map_coloring.html" data-i18n="problems.map_coloring">Map-coloring Problem</a>
+        <a class="problem" data-js="chapter3/queens.js" data-html="chapter3/queens.html" data-i18n="problems.queens">Eight Queens Problem</a>
+        <a class="problem" data-js="chapter3/word_search.js" data-html="chapter3/word_search.html" data-i18n="problems.word_search">Word Search</a>
+        <a class="problem" data-js="chapter3/send_more_money.js" data-html="chapter3/send_more_money.html" data-i18n="problems.send_more_money">SEND+MORE=MONEY</a>
+      </div>
+
+      <!-- Chapter 4 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter4">Chapter 4: Graph Problems</div>
+        <a class="problem" data-js="chapter4/graph.js" data-html="chapter4/graph_test.html" data-i18n="problems.graph">Graph (shortest path)</a>
+        <a class="problem" data-js="chapter4/weighted_graph.js" data-html="chapter4/weighted_graph_test.html" data-i18n="problems.weighted_graph">Weighted Graph</a>
+        <a class="problem" data-js="chapter4/mst.js" data-html="chapter4/mst_test.html" data-i18n="problems.mst">Minimum Spanning Tree</a>
+        <a class="problem" data-js="chapter4/dijkstra.js" data-html="chapter4/dijkstra_test.html" data-i18n="problems.dijkstra">Dijkstra's Algorithm</a>
+      </div>
+
+      <!-- Chapter 5 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter5">Chapter 5: Genetic Algorithms</div>
+        <a class="problem" data-js="chapter5/simple_equation.js" data-html="chapter5/simple_equation.html" data-i18n="problems.simple_eq">Simple Equation</a>
+        <a class="problem" data-js="chapter5/list_compression.js" data-html="chapter5/list_compression.html" data-i18n="problems.list_comp">List Compression</a>
+        <a class="problem" data-js="chapter5/send_more_money2.js" data-html="chapter5/send_more_money2.html" data-i18n="problems.send_more_money2">SEND+MORE=MONEY 2</a>
+      </div>
+
+      <!-- Chapter 6 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter6">Chapter 6: kMeans Clustering</div>
+        <a class="problem" data-js="chapter6/kmeans.js" data-html="chapter6/kmeans_test.html" data-i18n="problems.kmeans_trivial">kMeans Trivial</a>
+        <a class="problem" data-js="chapter6/governors.js" data-html="chapter6/governors.html" data-i18n="problems.governors">Governors</a>
+        <a class="problem" data-js="chapter6/mj.js" data-html="chapter6/mj.html" data-i18n="problems.mj">Michael Jackson Albums</a>
+      </div>
+
+      <!-- Chapter 7 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter7">Chapter 7: Neural Networks</div>
+        <a class="problem" data-js="chapter7/iris.js" data-html="chapter7/iris_test.html" data-i18n="problems.iris">Iris Classification</a>
+        <a class="problem" data-js="chapter7/wine.js" data-html="chapter7/wine_test.html" data-i18n="problems.wine">Wine Classification</a>
+      </div>
+
+      <!-- Chapter 8 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter8">Chapter 8: Adversarial Search</div>
+        <a class="problem" data-js="chapter8/tictactoe_ai.js" data-html="chapter8/tictactoe_ai_web.html" data-i18n="problems.tictactoe">Tic Tac Toe</a>
+        <a class="problem" data-js="chapter8/connectfour_ai.js" data-html="chapter8/connectfour_ai_web.html" data-i18n="problems.connectfour">Connect Four</a>
+      </div>
+
+      <!-- Chapter 9 -->
+      <div class="chapter">
+        <div class="chapter-title" data-i18n="chapters.chapter9">Chapter 9: Miscellaneous</div>
+        <a class="problem" data-js="chapter9/knapsack.js" data-html="chapter9/knapsack.html" data-i18n="problems.knapsack">The Knapsack Problem</a>
+        <a class="problem" data-js="chapter9/tsp.js" data-html="chapter9/tsp.html" data-i18n="problems.tsp">Traveling Salesman Problem</a>
+        <a class="problem" data-js="chapter9/phone_number_mnemonics.js" data-html="chapter9/phone_number_mnemonics_web.html" data-i18n="problems.phone_mnemonics">Phone Number Mnemonics</a>
+      </div>
+    </nav>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="main-content">
+    <div class="top-bar">
+      <div class="current-problem-title" id="current-title">Select a problem</div>
+    </div>
+    
+    <div class="split-view">
+      <!-- Code Panel -->
+      <div class="panel">
+        <div class="panel-header" data-i18n="codeTitle">Source Code (JS)</div>
+        <div class="panel-content">
+          <pre id="code-viewer">// Code will appear here...</pre>
+        </div>
+      </div>
+      
+      <!-- Console Panel -->
+      <div class="panel">
+        <div class="panel-header" data-i18n="consoleTitle">Console Output</div>
+        <div class="panel-content">
+          <iframe id="console-frame" class="execution-frame" src="about:blank"></iframe>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  <script src="app.js"></script>
 </body>
 </html>
diff --git a/util_web.js b/util_web.js
index a2723c3..86ad2d6 100644
--- a/util_web.js
+++ b/util_web.js
@@ -1,9 +1,23 @@
+// Inject terminal-like CSS into the execution iframe
+document.write('<style>');
+document.write('body { background: #1f2428; color: #58a6ff; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; padding: 20px; margin: 0; font-size: 0.9rem; line-height: 1.5; }');
+document.write('pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; overflow: hidden; }');
+document.write('p { display: none; } /* Hide "Back to list" link */');
+document.write('.obj { color: #79c0ff; }');
+document.write('</style>');
+
 util = {
   out: function(data) {
     if (typeof data === 'object') {
-      document.writeln(JSON.stringify(data));
+      document.writeln('<div class="obj">' + JSON.stringify(data, null, 2) + '</div>');
     } else {
-      document.writeln(data);
+      // replace newlines with BRs so multi-line text outputs correctly
+      if (typeof data === 'string') {
+          data = data.replace(/\n/g, '<br>');
+      }
+      document.writeln('<div>' + data + '</div>');
     }
+    // Attempt auto-scroll
+    setTimeout(function() { window.scrollTo(0, document.body.scrollHeight); }, 10);
   }
 };