index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./assets/css/main.css" />
  <script src="./assets/js/genArr.js" defer></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <title>Simulation Sort</title>
</head>

<body>
  <div class="menu">
    <div class="bottom-nav-wrapper">
      <div class="bottom-nav" id="bottomNav">
        <!-- 🟢 Sắp xếp -->
        <div class="nav-item">
          <a href="#" id="sort" title="Sắp xếp">
            <i class="fa-solid fa-arrow-down-a-z"></i>
          </a>
        </div>

        <!-- ⏸️ / ▶️ Tạm dừng / Tiếp tục -->
        <div class="nav-item">
          <a href="#" id="pause-resume" title="Tạm dừng">
            <i id="pauseIcon" class="fa-solid fa-pause"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="visualizer">
    <!-- left: biểu đồ -->
    <div class="chart-wrapper">
      <div class="i-line" id="iLine"></div>
      <div class="container" id="columns"></div>
      <div class="j-line" id="jLine"></div>
      <div class="index" id="indexs"></div>
    </div>

    <!-- right: code -->
    <div class="code-wrapper">
      <pre class="code-view" id="codeView">
        <code>
          <span id="line1">for (let i = 0; i &lt; n - 1; i++) {</span>
          <span id="line2">  for (let j = i + 1; j &lt; n; j++) {</span>
          <!-- <span id="line3">    updatePointers(i, j);</span> -->
          <span id="line4">    if (arr[j] &lt; arr[i]) {</span>
          <span id="line5">      swapColumns(colI, colJ);</span>
          <span id="line6">      let temp = arr[i]; arr[i] = arr[j]; arr[j] = temp;</span>
          <span id="line7">    }</span>
          <span id="line8">  }</span>
          <span id="line9">}</span>
        </code>
      </pre>

    </div>
  </div>


  <script>
    document.addEventListener('DOMContentLoaded', () => {
      genMaps(15);
    });
  </script>

</body>

</html>