Skip to content

Commit 7e93fa3

Browse files
MostlyKIGuessMostlyKIGuess
committed
demo for workflow
1 parent c99b623 commit 7e93fa3

File tree

7 files changed

+10675
-119
lines changed

7 files changed

+10675
-119
lines changed

‎.github/workflows/deploy-pages.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ main, master ]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
jobs:
14+
deploy:
15+
environment:
16+
name: github-pages
17+
url: ${{ steps.deployment.outputs.page_url }}
18+
runs-on: ubuntu-latest
19+
steps:
20+
- name: Checkout
21+
uses: actions/checkout@v3
22+
23+
- name: Setup Pages
24+
uses: actions/configure-pages@v2
25+
26+
- name: Upload artifact
27+
uses: actions/upload-pages-artifact@v1
28+
with:
29+
path: 'demo'
30+
31+
- name: Deploy to GitHub Pages
32+
id: deployment
33+
uses: actions/deploy-pages@v1

‎demo/css/styles.css‎

Lines changed: 357 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,357 @@
1+
body {
2+
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
background-color: #f9fafb;
6+
color: #111827;
7+
line-height: 1.5;
8+
}
9+
10+
.container {
11+
width: 100%;
12+
max-width: 1700px;
13+
margin: 0 auto;
14+
padding: 1.5rem;
15+
display: grid;
16+
grid-template-rows: auto auto 1fr;
17+
grid-template-columns: 1fr;
18+
gap: 1.5rem;
19+
height: 97vh;
20+
}
21+
22+
.header {
23+
grid-row: 1;
24+
text-align: center;
25+
background-color: #ffffff;
26+
border-radius: 12px;
27+
padding: 1.25rem;
28+
box-shadow: 0 4px 6px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05);
29+
}
30+
31+
.header h1 {
32+
margin: 0;
33+
color: #1f2937;
34+
font-weight: 700;
35+
font-size: 1.75rem;
36+
}
37+
38+
.controls {
39+
grid-row: 2;
40+
display: flex;
41+
justify-content: center;
42+
align-items: center;
43+
gap: 1rem;
44+
padding: 0.75rem 0;
45+
flex-wrap: wrap;
46+
}
47+
48+
.main-view {
49+
grid-row: 3;
50+
display: grid;
51+
grid-template-columns: 320px 1fr 320px;
52+
gap: 1.5rem;
53+
height: 100%;
54+
}
55+
56+
.left-sidebar, .right-sidebar {
57+
display: flex;
58+
flex-direction: column;
59+
gap: 1.5rem;
60+
}
61+
62+
#cpu-diagram {
63+
background-color: white;
64+
border-radius: 12px;
65+
box-shadow: 0 4px 6px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05);
66+
padding: 1.5rem;
67+
overflow: hidden;
68+
display: flex;
69+
justify-content: center;
70+
align-items: center;
71+
}
72+
73+
.panel {
74+
background-color: white;
75+
border-radius: 12px;
76+
box-shadow: 0 4px 6px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.05);
77+
padding: 1.25rem;
78+
transition: transform 0.2s, box-shadow 0.2s;
79+
}
80+
81+
.panel:hover {
82+
box-shadow: 0 6px 12px rgba(0,0,0,0.05), 0 3px 6px rgba(0,0,0,0.05);
83+
}
84+
85+
.panel h3 {
86+
margin-top: 0;
87+
margin-bottom: 1rem;
88+
border-bottom: 1px solid #f3f4f6;
89+
padding-bottom: 0.75rem;
90+
color: #374151;
91+
font-weight: 600;
92+
}
93+
94+
#register-view, #memory-view {
95+
max-height: 300px;
96+
overflow-y: auto;
97+
scrollbar-width: thin;
98+
scrollbar-color: #e5e7eb #f9fafb;
99+
}
100+
101+
#register-view::-webkit-scrollbar, #memory-view::-webkit-scrollbar {
102+
width: 6px;
103+
}
104+
105+
#register-view::-webkit-scrollbar-track, #memory-view::-webkit-scrollbar-track {
106+
background: #f9fafb;
107+
}
108+
109+
#register-view::-webkit-scrollbar-thumb, #memory-view::-webkit-scrollbar-thumb {
110+
background-color: #e5e7eb;
111+
border-radius: 10px;
112+
}
113+
114+
.register, .memory-cell {
115+
display: flex;
116+
justify-content: space-between;
117+
padding: 0.6rem 0.75rem;
118+
border-bottom: 1px solid #f3f4f6;
119+
font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
120+
transition: background-color 0.2s;
121+
}
122+
123+
.memory-group {
124+
margin-bottom: 1.25rem;
125+
background-color: white;
126+
border-radius: 8px;
127+
box-shadow: 0 2px 4px rgba(0,0,0,0.03);
128+
overflow: hidden;
129+
}
130+
131+
.memory-address {
132+
background-color: #f3f4f6;
133+
padding: 0.6rem 0.75rem;
134+
font-weight: 600;
135+
color: #4b5563;
136+
border-bottom: 1px solid #e5e7eb;
137+
}
138+
139+
.memory-byte {
140+
display: flex;
141+
justify-content: space-between;
142+
padding: 0.4rem 1.5rem;
143+
font-size: 0.9rem;
144+
color: #6b7280;
145+
border-bottom: 1px dotted #f3f4f6;
146+
}
147+
148+
.memory-cell {
149+
font-weight: 600;
150+
background-color: #f9fafb;
151+
padding: 0.6rem 0.75rem;
152+
}
153+
154+
.memory-cell:last-child {
155+
border-bottom: none;
156+
}
157+
158+
#memory-view {
159+
max-height: 500px;
160+
overflow-y: auto;
161+
padding: 0.75rem;
162+
}
163+
164+
.register:hover, .memory-cell:hover, .memory-byte:hover {
165+
background-color: #f9fafb;
166+
}
167+
168+
button {
169+
padding: 0.6rem 1rem;
170+
background-color: #2a9492;
171+
color: white;
172+
border: none;
173+
border-radius: 8px;
174+
cursor: pointer;
175+
font-weight: 500;
176+
transition: all 0.2s;
177+
font-size: 0.95rem;
178+
}
179+
180+
button:disabled {
181+
background-color: #d1d5db;
182+
cursor: not-allowed;
183+
}
184+
185+
button:hover:not(:disabled) {
186+
background-color: #38cab2;
187+
transform: translateY(-2px);
188+
box-shadow: 0 2px 4px rgba(79, 70, 229, 0.25);
189+
}
190+
191+
button:active:not(:disabled) {
192+
transform: translateY(0);
193+
}
194+
195+
#play-pause {
196+
background-color: #268eb8;
197+
}
198+
199+
#play-pause:hover {
200+
background-color: #059669;
201+
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25);
202+
}
203+
204+
#step-back {
205+
background-color: #f43f5e;
206+
}
207+
208+
#step-back:hover {
209+
background-color: #e11d48;
210+
box-shadow: 0 2px 4px rgba(244, 63, 94, 0.25);
211+
}
212+
213+
#step-forward {
214+
background-color: #3b82f6;
215+
}
216+
217+
#step-forward:hover {
218+
background-color: #2563eb;
219+
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
220+
}
221+
222+
select {
223+
padding: 0.6rem 0.75rem;
224+
border: 1px solid #d1d5db;
225+
border-radius: 8px;
226+
background-color: white;
227+
font-size: 0.95rem;
228+
transition: border-color 0.2s, box-shadow 0.2s;
229+
}
230+
231+
select:focus {
232+
outline: none;
233+
border-color: #4f46e5;
234+
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
235+
}
236+
237+
/* Component styling */
238+
.component {
239+
fill: #f9fafb;
240+
stroke: #4b5563;
241+
stroke-width: 2px;
242+
transition: all 0.3s;
243+
filter: drop-shadow(0px 2px 3px rgba(0,0,0,0.08));
244+
}
245+
246+
.component:hover {
247+
fill: #f3f4f6;
248+
transform: scale(1.01);
249+
}
250+
251+
.component-text {
252+
text-anchor: middle;
253+
dominant-baseline: middle;
254+
font-size: 13px;
255+
font-weight: 500;
256+
user-select: none;
257+
fill: #1f2937;
258+
}
259+
260+
.data-path {
261+
fill: none;
262+
stroke: #9ca3af;
263+
stroke-width: 2px;
264+
transition: all 0.3s;
265+
stroke-linecap: round;
266+
stroke-linejoin: round;
267+
}
268+
269+
.data-path.active {
270+
stroke: #f59e0b;
271+
stroke-width: 3px;
272+
filter: drop-shadow(0px 0px 3px rgba(245, 158, 11, 0.4));
273+
}
274+
275+
.control-signal {
276+
fill: none;
277+
stroke: #9ca3af;
278+
stroke-width: 1.5px;
279+
stroke-dasharray: 5,5;
280+
transition: all 0.3s;
281+
stroke-linecap: round;
282+
stroke-linejoin: round;
283+
}
284+
285+
.control-signal.active {
286+
stroke: #06b6d4;
287+
filter: drop-shadow(0px 0px 3px rgba(6, 182, 212, 0.4));
288+
}
289+
290+
.path-label {
291+
font-size: 12px;
292+
fill: #6b7280;
293+
text-anchor: middle;
294+
font-weight: 500;
295+
user-select: none;
296+
}
297+
298+
.signal {
299+
display: flex;
300+
justify-content: space-between;
301+
padding: 0.5rem 0.75rem;
302+
border-radius: 6px;
303+
margin-bottom: 0.4rem;
304+
transition: all 0.2s;
305+
}
306+
307+
.signal.active {
308+
background-color: rgba(6, 182, 212, 0.08);
309+
border-left: 3px solid #06b6d4;
310+
}
311+
312+
.signal.inactive {
313+
background-color: rgba(107, 114, 128, 0.05);
314+
}
315+
316+
.signal-value {
317+
font-weight: 600;
318+
font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
319+
}
320+
321+
.register-changed {
322+
background-color: rgba(245, 158, 11, 0.08);
323+
animation: highlight 1.5s ease-out;
324+
}
325+
326+
@keyframes highlight {
327+
0% { background-color: rgba(245, 158, 11, 0.2); }
328+
100% { background-color: transparent; }
329+
}
330+
331+
#cycle-display {
332+
background-color: #f3f4f6;
333+
padding: 0.6rem 0.75rem;
334+
border-radius: 8px;
335+
font-weight: 500;
336+
border: 1px solid #e5e7eb;
337+
box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
338+
}
339+
340+
.decoded {
341+
background-color: #f3f4f6;
342+
padding: 0.75rem;
343+
margin-top: 0.75rem;
344+
border-radius: 8px;
345+
border-left: 4px solid #4f46e5;
346+
font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
347+
font-size: 0.95rem;
348+
}
349+
350+
svg {
351+
width: 100%;
352+
height: 100%;
353+
overflow: visible;
354+
display: block;
355+
margin: 0 auto;
356+
margin-bottom: 12rem;
357+
}

0 commit comments

Comments
 (0)