LEGv8-Simulator-/main.html at main · InfiniteVoidLoop/LEGv8-Simulator- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>LEGv8 Simulator</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: 'Segoe UI', sans-serif;
    }
  </style>
</head>
<body class="min-h-screen flex flex-col">

  <!-- Navbar -->
  <nav class="bg-blue-700 text-white px-6 py-4 flex items-center justify-between shadow">
    <div class="flex items-center space-x-2 text-lg font-semibold">
      <span>💻</span>
      <span>Computer Architecture Simulator</span>
    </div>
    <span class="text-sm text-white/80">v2.1.5</span>
  </nav>

  <!-- Main Content -->
  <main class="flex flex-col items-center justify-center flex-grow p-6">
    <div class="bg-white rounded-xl border border-gray-300 shadow-lg max-w-xl w-full p-8 text-center">
      <div class="mb-4">
        <div class="w-20 h-20 mx-auto rounded-full bg-blue-600 text-white flex items-center justify-center text-4xl">⚡</div>
        <h1 class="text-3xl font-bold text-blue-700 mt-4">LEGv8 Simulator</h1>
        <p class="text-gray-600 mt-2 text-sm">Trình mô phỏng kiến trúc LEGv8 giúp bạn học tập và mô phỏng dễ dàng</p>
      </div>

     <div class="mt-6 text-left text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg p-4">
  <p><strong class="text-blue-600">🔁 Nhánh:</strong> B, B.COND, CBZ, CBNZ</p>
  <pre class="bg-white p-2 mt-1 rounded text-gray-800 font-mono text-xs">   B LABEL         // Nhảy không điều kiện đến LABEL
   B.EQ LABEL      // Nhảy nếu Zero flag = 1
   CBZ X1, LABEL   // Nhảy nếu X1 == 0
   CBNZ X2, LABEL  // Nhảy nếu X2 != 0</pre>

  <p class="mt-3"><strong class="text-blue-600">➕ Số học:</strong> ADD, ADDI, SUB, SUBI, ADDS, SUBS</p>
  <pre class="bg-white p-2 mt-1 rounded text-gray-800 font-mono text-xs">   ADD X1, X2, X3   // X1 = X2 + X3
   ADDI X1, X2, #10 // X1 = X2 + 10
   SUB X4, X5, X6   // X4 = X5 - X6
   SUBI X7, X8, #4  // X7 = X8 - 4</pre>

  <p class="mt-3"><strong class="text-blue-600">🔣 Logic:</strong> AND, ORR</p>
  <pre class="bg-white p-2 mt-1 rounded text-gray-800 font-mono text-xs">   AND X1, X2, X3   // X1 = X2 AND X3
   ORR X4, X5, X6   // X4 = X5 OR X6</pre>

  <p class="mt-3"><strong class="text-blue-600">📦 Bộ nhớ:</strong> LDUR, STUR</p>
  <pre class="bg-white p-2 mt-1 rounded text-gray-800 font-mono text-xs">   LDUR X1, [X2, #0]  // Tải từ địa chỉ X2 vào X1
   STUR X3, [X4, #4]  // Lưu X3 vào địa chỉ X4 + 4</pre>
</div>

      <button onclick="navigateToSimulator()" class="mt-6 w-full py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all text-lg font-semibold shadow-md">
        Bắt đầu mô phỏng →
      </button>

      <!-- Ghi chú về Little Endian -->
      <div class="mt-6 text-left text-xs text-gray-800 bg-yellow-100 border-l-4 border-yellow-500 rounded-md p-4">
        <strong class="block text-yellow-700 mb-1">📝 Ghi chú:</strong>
        Dữ liệu trong bộ mô phỏng được lưu theo định dạng <strong>Little Endian</strong>:<br />
        <span class="mt-2 block font-mono bg-white border rounded p-2 text-sm text-gray-700">
          Ví dụ: 0x12345678 được lưu như sau:<br/>
          Địa chỉ +0 → 0x78<br/>
          Địa chỉ +1 → 0x56<br/>
          Địa chỉ +2 → 0x34<br/>
          Địa chỉ +3 → 0x12
        </span>
      </div>

      <p class="text-xs text-gray-500 mt-4">Phiên bản 2.1.5 • Hỗ trợ các lệnh cơ bản • Debug + mô phỏng trực quan</p>
    </div>
  </main>

  <script>
    function navigateToSimulator() {
      const button = document.querySelector('button');
      button.innerText = '⏳ Đang tải...';
      button.disabled = true;
      setTimeout(() => {
        window.location.href = 'index.html';
      }, 1000);
    }
  </script>
</body>
</html>