Skip to content

Commit b272c0d

Browse files
ovuiproductionovuiproduction
committed
First Commit
0 parents  commit b272c0d

3 files changed

Lines changed: 1318 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>OS Simulator</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<!-- Header -->
11+
<div class="header">
12+
<h1>💻 VOS - VIRTUAL OPERATING SYSTEM SIMULATOR</h1>
13+
<div class="header-controls">
14+
<button class="btn btn-execute" id="execute">▶ Execute</button>
15+
<button class="btn btn-reset" id="renew">⟲ Reset</button>
16+
<button class="btn" id="jobCardBtn">Job Cards</button>
17+
<button class="btn" id="instBtn">? Help</button>
18+
</div>
19+
</div>
20+
<!-- Main Container -->
21+
<div class="container">
22+
<!-- Left Panel: Control & Status -->
23+
<div class="control-panel">
24+
<!-- Input Panel -->
25+
<div class="panel">
26+
<div class="panel-title">Job Card Input</div>
27+
<textarea
28+
id="paragraphInput"
29+
placeholder="Enter job card instructions here...
30+
Example:
31+
$AMJ000100040006
32+
GD20LR20CR20BT09PD20H
33+
$DTA
34+
Hello World
35+
$END"
36+
></textarea>
37+
</div>
38+
39+
<!-- PCB Panel -->
40+
<div class="panel">
41+
<div class="panel-title">Job Details</div>
42+
<div class="pcb-grid job-details">
43+
<div class="pcb-item">Job Details</div>
44+
<div class="pcb-item">
45+
<div class="pcb-label">PROCESS ID</div>
46+
<div class="pcb-value">-</div>
47+
</div>
48+
<div class="pcb-item">
49+
<div class="pcb-label">TIME LIMIT</div>
50+
<div class="pcb-value">-</div>
51+
</div>
52+
<div class="pcb-item">
53+
<div class="pcb-label">LINE LIMIT</div>
54+
<div class="pcb-value">-</div>
55+
</div>
56+
</div>
57+
</div>
58+
59+
<!-- Register Panel -->
60+
<div class="panel">
61+
<div class="panel-title">General Purpose Register</div>
62+
<div id="Rregister">-</div>
63+
</div>
64+
</div>
65+
66+
<!-- Right Panel: Memory Visualization -->
67+
<div class="memory-section">
68+
<div class="memory-header">
69+
<div class="panel-title">Memory Map (300 Blocks × 4 Bytes)</div>
70+
<div class="memory-legend">
71+
<div class="legend-item">
72+
<div class="legend-color legend-page-table"></div>
73+
<span># Page Table</span>
74+
</div>
75+
<div class="legend-item">
76+
<div class="legend-color legend-instructions"></div>
77+
<span>Instructions</span>
78+
</div>
79+
<div class="legend-item">
80+
<div class="legend-color legend-allocated"></div>
81+
<span>Allocated</span>
82+
</div>
83+
<div class="legend-item">
84+
<div class="legend-color legend-data"></div>
85+
<span>Data</span>
86+
</div>
87+
</div>
88+
</div>
89+
<div id="memory"></div>
90+
</div>
91+
</div>
92+
93+
<!-- Output Section -->
94+
<div class="output-section">
95+
<div class="output-panel" id="error">
96+
<div class="panel-title" style="color: var(--crt-error)">
97+
Status Messages
98+
</div>
99+
<div style="margin-top: 10px">Waiting for execution...</div>
100+
</div>
101+
102+
<div class="panel" id="pcb-display">
103+
<div class="panel-title">Process Control Block</div>
104+
<div class="pcb-grid">
105+
<div class="pcb-item">Execution Summary</div>
106+
<div class="pcb-item">
107+
<div class="pcb-label">PROCESS ID</div>
108+
<div class="pcb-value">-</div>
109+
</div>
110+
<div class="pcb-item">
111+
<div class="pcb-label">TIME LIMIT</div>
112+
<div class="pcb-value">-</div>
113+
</div>
114+
<div class="pcb-item">
115+
<div class="pcb-label">TIME COUNTER</div>
116+
<div class="pcb-value">-</div>
117+
</div>
118+
<div class="pcb-item">
119+
<div class="pcb-label">LINE LIMIT</div>
120+
<div class="pcb-value">-</div>
121+
</div>
122+
<div class="pcb-item">
123+
<div class="pcb-label">LINE COUNTER</div>
124+
<div class="pcb-value">-</div>
125+
</div>
126+
</div>
127+
</div>
128+
129+
<div class="output-panel" id="datablock">
130+
<div class="panel-title" style="color: var(--accent-blue)">
131+
Output Data
132+
</div>
133+
<div style="margin-top: 10px">-</div>
134+
</div>
135+
</div>
136+
<p class="hover-instruction">
137+
After Execution -> Hover over memory cells to see their purpose and
138+
details.
139+
</p>
140+
141+
<!-- Instructions Modal -->
142+
<div class="modal-overlay" id="modalOverlay"></div>
143+
<div class="modal" id="instructionBlock">
144+
<span class="modal-close" id="close">✕</span>
145+
<h2>VOS SIMULATOR - INSTRUCTIONS</h2>
146+
<p class="hover-instruction">
147+
After Execution -> Hover over memory cells to see their purpose and
148+
details.
149+
</p>
150+
<h3 style="margin-top: 20px; color: var(--accent-yellow)">
151+
System Assumptions:
152+
</h3>
153+
<ul>
154+
<li>
155+
Simulates basic OS operations including memory management and paging
156+
</li>
157+
<li>Supports time limits, line limits, and error handling</li>
158+
<li>Uses paging with page tables stored in real memory</li>
159+
<li>30 memory blocks available for program allocation</li>
160+
<li>Handles program errors via Program Interrupt (PI)</li>
161+
<li>Handles time-out errors via Timer Interrupt (TI)</li>
162+
</ul>
163+
164+
<h3 style="margin-top: 20px; color: var(--accent-yellow)">
165+
Supported Instructions:
166+
</h3>
167+
<ul>
168+
<li><strong>GD</strong> - Get Data (read input)</li>
169+
<li><strong>PD</strong> - Put Data (write output)</li>
170+
<li><strong>LR</strong> - Load Register</li>
171+
<li><strong>SR</strong> - Store Register</li>
172+
<li><strong>CR</strong> - Compare Register</li>
173+
<li><strong>BT</strong> - Branch if True</li>
174+
<li><strong>H</strong> - Halt</li>
175+
</ul>
176+
177+
<h3 style="margin-top: 20px; color: var(--accent-yellow)">
178+
Error Codes:
179+
</h3>
180+
<ul>
181+
<li><strong>0</strong> - No Error</li>
182+
<li><strong>1</strong> - Out Of Data</li>
183+
<li><strong>2</strong> - Line Limit Exceeded</li>
184+
<li><strong>3</strong> - Time Limit Exceeded</li>
185+
<li><strong>4</strong> - Operation Code Error</li>
186+
<li><strong>5</strong> - Operand Error</li>
187+
<li><strong>6</strong> - Invalid Page Fault</li>
188+
</ul>
189+
</div>
190+
191+
<!-- Job Card Modal -->
192+
<div class="modal" id="jobCardBlock">
193+
<span class="modal-close" id="jobCardClose">✕</span>
194+
<h2>Job Card Format</h2>
195+
<p>Each job card consists of the following sections:</p>
196+
<ul>
197+
<li>
198+
<strong>$AMJ</strong>: Indicates the start of a new job. Followed by:
199+
<ul>
200+
<li>
201+
<strong>Job ID</strong>: A unique identifier for the job (4
202+
digits)
203+
</li>
204+
<li>
205+
<strong>Time Limit</strong>: Maximum time allowed for execution (2
206+
digits)
207+
</li>
208+
<li>
209+
<strong>Line Limit</strong>: Maximum number of output lines
210+
allowed (2 digits)
211+
</li>
212+
</ul>
213+
</li>
214+
<li>
215+
<strong>Program Instructions</strong>: A series of instructions to be
216+
executed by the OS. Each instruction is 4 characters long.
217+
</li>
218+
<li>
219+
<strong>$DTA</strong>: Indicates the start of the data section for the
220+
job.
221+
</li>
222+
<li>
223+
<strong>Input Data</strong>: Data to be read by GD instructions. Each
224+
line can contain up to 40 characters.
225+
</li>
226+
<li><strong>$END</strong>: Indicates the end of the job card.</li>
227+
</ul>
228+
229+
<div class="job-example-list">
230+
<h2>Example Job Card:</h2>
231+
<div>
232+
<h4>Print VIT</h4>
233+
<p>
234+
$AMJ000100040001 <br />
235+
GD10PD10H <br />
236+
$DTA <br />
237+
VIT <br />
238+
$END0001 <br />
239+
</p>
240+
</div>
241+
<div>
242+
<h4>Load Store and Print</h4>
243+
<p>
244+
$AMJ000200070001 <br />
245+
GD10LR10SR20PD10H <br />
246+
$DTA <br />
247+
STAYHOMESTAYSAFE <br />
248+
$END0002 <br />
249+
</p>
250+
</div>
251+
<div>
252+
<h4>Multiple Load Store oprations</h4>
253+
<p>
254+
$AMJ000300130001 <br />
255+
GD20GD30GD40GD50LR20SR60PD60H <br />
256+
$DTA <br />
257+
VIT <br />
258+
VIIT <br />
259+
COEP <br />
260+
IITB <br />
261+
$END0003 <br />
262+
</p>
263+
</div>
264+
<div>
265+
<h4>Compare Strings</h4>
266+
<p>
267+
$AMJ000400150001 <br />
268+
GD10GD20GD30GD40LR10CR20BT09PD30HPD40H <br />
269+
$DTA <br />
270+
VIT <br />
271+
VIT <br />
272+
NOT SAME <br />
273+
SAME <br />
274+
$END0004 <br />
275+
</p>
276+
</div>
277+
</div>
278+
</div>
279+
<script src="script.js"></script>
280+
</body>
281+
</html>

0 commit comments

Comments
 (0)