feat: Add tips

debjitbis08 · Dec 1, 2024 · 007f0b0 · 007f0b0
1 parent fb6f1bd
commit 007f0b0
Show file tree

Hide file tree

Showing 7 changed files with 678 additions and 527 deletions.
diff --git a/public/tips/Comments.html b/public/tips/Comments.html
@@ -1,9 +1,12 @@
 <h3 class="text-lg font-bold mb-4">Comment Syntax</h3>
 
 <div class="mb-4">
-  <p class="text-gray-600 dark:text-gray-200 mb-2">
-    Comments always start with the semicolon character <code class="text-gray-600 bg-gray-100 rounded px-1">;</code>.
-    Everything after this character on the same line is ignored by the assembler.
-  </p>
-  <pre class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"><code class="block"><span class="label">LABEL:</span> <span class="inst">MVI</span> <span class="register">A</span>, <span class="number">0AH</span><span class="comment">; LOAD 0AH INTO REGISTER A</span></code></pre>
+    <p class="mb-2">
+        Comments always start with the semicolon character
+        <code class="text-gray-600 bg-gray-100 rounded px-1">;</code>. Everything after this character on the same line
+        is ignored by the assembler.
+    </p>
+    <pre
+        class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"
+    ><code class="block"><span class="label">LABEL:</span> <span class="inst">MVI</span> <span class="register">A</span>, <span class="number">0AH</span><span class="comment">; LOAD 0AH INTO REGISTER A</span></code></pre>
 </div>
diff --git a/public/tips/Labels.html b/public/tips/Labels.html
@@ -1,8 +1,16 @@
 <h3 class="text-lg font-bold mb-4">Label Syntax</h3>
 
 <div class="mb-4 text-sm line leading-6">
-  <p class="text-gray-600 dark:text-gray-200 mb-2">
-    Labels must consist of one to six alphanumeric characters, with the first character being either alphabetic or one of the special characters <code class="text-gray-600 bg-gray-100 rounded px-1">?</code> or <code class="text-gray-600 bg-gray-100 rounded px-1">@</code>. Each label must be followed by a colon <code class="text-gray-600 bg-gray-100 rounded px-1">:</code> to indicate that it is a label. There should be <span class="font-bold">no space</span> between the word and the <code class="text-gray-600 bg-gray-100 rounded px-1">:</code> character. Additionally, a label can only be defined once in the program, and it must be unique.
-  </p>
-  <pre class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"><code class="block"><span class="label">LABEL:</span> <span class="inst">MVI</span> <span class="register">A</span>, <span class="number">0AH</span><span class="comment">; LOAD 0AH INTO REGISTER A</span></code></pre>
+    <p class="mb-2">
+        Labels must consist of one to six alphanumeric characters, with the first character being either alphabetic or
+        one of the special characters <code class="text-gray-600 bg-gray-100 rounded px-1">?</code> or
+        <code class="text-gray-600 bg-gray-100 rounded px-1">@</code>. Each label must be followed by a colon
+        <code class="text-gray-600 bg-gray-100 rounded px-1">:</code> to indicate that it is a label. There should be
+        <span class="font-bold">no space</span> between the word and the
+        <code class="text-gray-600 bg-gray-100 rounded px-1">:</code> character. Additionally, a label can only be
+        defined once in the program, and it must be unique.
+    </p>
+    <pre
+        class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"
+    ><code class="block"><span class="label">LABEL:</span> <span class="inst">MVI</span> <span class="register">A</span>, <span class="number">0AH</span><span class="comment">; LOAD 0AH INTO REGISTER A</span></code></pre>
 </div>
diff --git a/public/tips/Number.html b/public/tips/Number.html
@@ -3,27 +3,48 @@ <h3 class="text-lg font-bold mb-4">Number Syntax</h3>
 <div class="text-sm">
     <!-- Hexadecimal Section -->
     <div class="mb-4">
-      <p class="text-gray-600 dark:text-gray-200 mb-2">Each hexadecimal number must begin with a numeric digit (0 through 9) and must be
-      followed by the letter <code class="text-green-800 bg-green-100 rounded px-1 pt-1">H</code>.</p>
-      <pre class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"><code class="block"><span class="label">HERE:</span> <span class="inst">MVI</span> C, 0BAH   ; LOAD REG C WITH HEX BA</code></pre>
+        <p class="mb-2">
+            Each hexadecimal number must begin with a numeric digit (0 through 9) and must be followed by the letter
+            <code class="text-green-800 bg-green-100 rounded px-1 pt-1">H</code>.
+        </p>
+        <pre
+            class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"
+        ><code class="block"><span class="label">HERE:</span> <span class="inst">MVI</span> C, 0BAH   ; LOAD REG C WITH HEX BA</code></pre>
     </div>
 
     <!-- Decimal Section -->
     <div class="mb-4">
-      <p class="text-gray-600 dark:text-gray-200 mb-2">Each decimal number may be identified by the letter <code class="text-green-600 bg-green-100 rounded px-1">D</code> immediately after its last digit or may
-      stand alone. Any number not specifically identified as hexadecimal, octal, or binary is assumed to be decimal.</p>
-      <pre class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"><code class="block"><span class="label">ABC:</span> <span class="inst">MVI</span> E, 15D   ; LOAD E WITH 15 IN DECIMAL</code></pre>
+        <p class="mb-2">
+            Each decimal number may be identified by the letter
+            <code class="text-green-600 bg-green-100 rounded px-1">D</code> immediately after its last digit or may
+            stand alone. Any number not specifically identified as hexadecimal, octal, or binary is assumed to be
+            decimal.
+        </p>
+        <pre
+            class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"
+        ><code class="block"><span class="label">ABC:</span> <span class="inst">MVI</span> E, 15D   ; LOAD E WITH 15 IN DECIMAL</code></pre>
     </div>
 
     <!-- Octal Section -->
     <div class="mb-4">
-      <p class="text-gray-600 dark:text-gray-200 mb-2">Each octal number must be followed by the letter <code class="text-green-600 bg-green-100 rounded px-1">O</code> or the letter <code class="text-green-600 bg-green-100 rounded px-1">Q</code>.</p>
-      <pre class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"><code class="block"><span class="label">LABEL:</span> <span class="inst">MVI</span> A, 72Q   ; LOAD OCTAL 72 INTO ACCUM</code></pre>
+        <p class="mb-2">
+            Each octal number must be followed by the letter
+            <code class="text-green-600 bg-green-100 rounded px-1">O</code> or the letter
+            <code class="text-green-600 bg-green-100 rounded px-1">Q</code>.
+        </p>
+        <pre
+            class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"
+        ><code class="block"><span class="label">LABEL:</span> <span class="inst">MVI</span> A, 72Q   ; LOAD OCTAL 72 INTO ACCUM</code></pre>
     </div>
 
     <!-- Binary Section -->
     <div class="mb-4">
-      <p class="text-gray-600 dark:text-gray-200 mb-2">Each binary number must be followed by the letter <code class="text-pink-600 bg-pink-100 rounded px-1">B</code>.</p>
-      <pre class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"><code class="block"><span class="label">NOW:</span> <span class="inst">MVI</span> D, 1111011OB   ; LOAD REGISTER D WITH 0F6H</code></pre>
+        <p class="mb-2">
+            Each binary number must be followed by the letter
+            <code class="text-pink-600 bg-pink-100 rounded px-1">B</code>.
+        </p>
+        <pre
+            class="bg-gray-100 dark:bg-gray-900 p-2 rounded-md overflow-auto"
+        ><code class="block"><span class="label">NOW:</span> <span class="inst">MVI</span> D, 1111011OB   ; LOAD REGISTER D WITH 0F6H</code></pre>
     </div>
 </div>