updated

Author: ovuiproduction

index.html

@@ -36,22 +36,44 @@ <h1>💻 VOS - VIRTUAL OPERATING SYSTEM SIMULATOR</h1>
           ></textarea>
         </div>
 
-        <!-- PCB Panel -->
-        <div class="panel">
-          <div class="panel-title">Job Details</div>
-          <div class="pcb-grid job-details">
-            <div class="pcb-item">Job Details</div>
-            <div class="pcb-item">
-              <div class="pcb-label">PROCESS ID</div>
-              <div class="pcb-value">-</div>
+       
+        <!-- Execution Control Panel -->
+       
+        <div class="execution-control-panel">
+          <div class="panel">
+            <div class="panel-title">Execution Control</div>
+            <div class="execution-controls">
+              <button class="btn btn-pause" id="pauseBtn" disabled>
+                ⏸ Pause
+              </button>
+              <button class="btn btn-resume" id="resumeBtn" disabled>
+                ▶ Resume
+              </button>
+              <div class="speed-control">
+                <label for="speedRange">
+                  Execution Delay :
+                  <br>
+                  <small>Increasing this value slows down the simulation.</small>
+                </label>
+                <input
+                  type="range"
+                  id="speedRange"
+                  min="100"
+                  max="5000"
+                  value="500"
+                  step="100"
+                />
+                <span id="speedValue">500ms</span>
+              </div>
             </div>
-            <div class="pcb-item">
-              <div class="pcb-label">TIME LIMIT</div>
-              <div class="pcb-value">-</div>
+          </div>
+
+          <div class="panel">
+            <div class="panel-title" style="color: var(--accent-yellow)">
+              Current Stage
             </div>
-            <div class="pcb-item">
-              <div class="pcb-label">LINE LIMIT</div>
-              <div class="pcb-value">-</div>
+            <div id="currentStage" class="current-stage">
+              Waiting for execution...
             </div>
           </div>
         </div>
@@ -133,10 +155,24 @@ <h1>💻 VOS - VIRTUAL OPERATING SYSTEM SIMULATOR</h1>
         <div style="margin-top: 10px">-</div>
       </div>
     </div>
+
+    <!-- Execution Log -->
+    <div class="log-section">
+      <div class="panel">
+        <div class="panel-title">Execution Log (Step-by-Step)</div>
+        <div id="executionLog" class="execution-log">
+          <div class="log-entry">System ready. Waiting for execution...</div>
+        </div>
+      </div>
+    </div>
+
     <p class="hover-instruction">
       After Execution -> Hover over memory cells to see their purpose and
       details.
     </p>
+    <p class="hover-instruction">
+      Reset the simulator to run a new job card.
+    </p>
 
     <!-- Instructions Modal -->
     <div class="modal-overlay" id="modalOverlay"></div>
@@ -276,6 +312,7 @@ <h4>Compare Strings</h4>
         </div>
       </div>
     </div>
+
     <script src="script.js"></script>
   </body>
 </html>