Skip to content

Commit 29139a5

Browse files
Zia-RashidZia-Rashid
committed
updated design docs
1 parent 5c01a63 commit 29139a5

8 files changed

Lines changed: 686 additions & 142 deletions

File tree

‎docs/layout.html‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Heap Memory Structure</title>
6+
<style>
7+
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;500;700&display=swap');
8+
9+
* { margin: 0; padding: 0; box-sizing: border-box; }
10+
11+
body {
12+
background: #0d0d14;
13+
display: flex;
14+
align-items: center;
15+
justify-content: center;
16+
min-height: 100vh;
17+
font-family: 'JetBrains Mono', monospace;
18+
}
19+
20+
.diagram {
21+
width: 820px;
22+
padding: 48px;
23+
}
24+
25+
.title {
26+
text-align: center;
27+
color: #e0e0ff;
28+
font-size: 13px;
29+
letter-spacing: 0.2em;
30+
text-transform: uppercase;
31+
margin-bottom: 40px;
32+
opacity: 0.5;
33+
}
34+
35+
/* HEAP */
36+
.heap {
37+
background: rgba(100, 120, 255, 0.04);
38+
border: 1.5px solid rgba(100, 120, 255, 0.25);
39+
border-radius: 16px;
40+
padding: 28px;
41+
position: relative;
42+
}
43+
44+
.heap-label {
45+
position: absolute;
46+
bottom: -36px;
47+
left: 50%;
48+
transform: translateX(-50%);
49+
color: #6478ff;
50+
font-size: 11px;
51+
letter-spacing: 0.15em;
52+
text-transform: uppercase;
53+
display: flex;
54+
align-items: center;
55+
gap: 8px;
56+
white-space: nowrap;
57+
}
58+
59+
.heap-label::before, .heap-label::after {
60+
content: '';
61+
display: block;
62+
width: 60px;
63+
height: 1px;
64+
background: #6478ff;
65+
opacity: 0.4;
66+
}
67+
68+
/* SEGMENTS row */
69+
.segments {
70+
display: flex;
71+
gap: 12px;
72+
}
73+
74+
/* SEGMENT */
75+
.segment {
76+
flex: 1;
77+
background: rgba(80, 200, 180, 0.04);
78+
border: 1.5px solid rgba(80, 200, 180, 0.25);
79+
border-radius: 12px;
80+
padding: 14px;
81+
position: relative;
82+
}
83+
84+
.segment-label {
85+
position: absolute;
86+
bottom: -30px;
87+
left: 50%;
88+
transform: translateX(-50%);
89+
color: #50c8b4;
90+
font-size: 10px;
91+
letter-spacing: 0.12em;
92+
text-transform: uppercase;
93+
white-space: nowrap;
94+
}
95+
96+
/* PAGES column inside segment */
97+
.pages {
98+
display: flex;
99+
flex-direction: column;
100+
gap: 6px;
101+
}
102+
103+
/* PAGE */
104+
.page {
105+
background: rgba(255, 200, 100, 0.04);
106+
border: 1px solid rgba(255, 200, 100, 0.2);
107+
border-radius: 6px;
108+
padding: 5px 6px;
109+
display: flex;
110+
gap: 4px;
111+
position: relative;
112+
}
113+
114+
/* CHUNK */
115+
.chunk {
116+
flex: 1;
117+
height: 10px;
118+
background: rgba(255, 200, 100, 0.15);
119+
border: 1px solid rgba(255, 200, 100, 0.3);
120+
border-radius: 2px;
121+
transition: background 0.2s;
122+
}
123+
124+
.chunk:hover {
125+
background: rgba(255, 200, 100, 0.4);
126+
}
127+
128+
/* Highlight one page + segment for labels */
129+
.segment:nth-child(2) .page:nth-child(3) {
130+
border-color: rgba(255, 200, 100, 0.6);
131+
}
132+
133+
/* Legend */
134+
.legend {
135+
margin-top: 60px;
136+
display: flex;
137+
justify-content: center;
138+
gap: 40px;
139+
}
140+
141+
.legend-item {
142+
display: flex;
143+
align-items: center;
144+
gap: 10px;
145+
font-size: 11px;
146+
letter-spacing: 0.1em;
147+
}
148+
149+
.legend-swatch {
150+
width: 24px;
151+
height: 12px;
152+
border-radius: 3px;
153+
border: 1.5px solid;
154+
}
155+
156+
.l-heap { border-color: #6478ff; background: rgba(100,120,255,0.15); color: #6478ff; }
157+
.l-seg { border-color: #50c8b4; background: rgba(80,200,180,0.15); color: #50c8b4; }
158+
.l-page { border-color: rgba(255,200,100,0.7); background: rgba(255,200,100,0.12); color: #ffc864; }
159+
.l-chunk { border-color: rgba(255,200,100,0.9); background: rgba(255,200,100,0.4); color: #ffc864; }
160+
161+
.legend-item span { color: #888; }
162+
163+
/* size arrow */
164+
.size-arrow {
165+
margin-top: 48px;
166+
display: flex;
167+
align-items: center;
168+
justify-content: center;
169+
gap: 0;
170+
color: #444;
171+
font-size: 10px;
172+
letter-spacing: 0.15em;
173+
}
174+
175+
.arrow-line {
176+
display: flex;
177+
align-items: center;
178+
gap: 12px;
179+
}
180+
181+
.arrow-track {
182+
width: 300px;
183+
height: 2px;
184+
background: linear-gradient(to left, #6478ff44, #ffc86444);
185+
position: relative;
186+
}
187+
188+
.arrow-track::before {
189+
content: '◂';
190+
position: absolute;
191+
left: -8px;
192+
top: -8px;
193+
color: #ffc864;
194+
font-size: 14px;
195+
}
196+
197+
.arrow-track::after {
198+
content: '▸';
199+
position: absolute;
200+
right: -8px;
201+
top: -8px;
202+
color: #6478ff;
203+
font-size: 14px;
204+
}
205+
206+
.label-small { color: #ffc864; font-size: 10px; letter-spacing: 0.1em; }
207+
.label-large { color: #6478ff; font-size: 10px; letter-spacing: 0.1em; }
208+
</style>
209+
</head>
210+
<body>
211+
<div class="diagram">
212+
<div class="title">Memory Allocator — Hierarchy</div>
213+
214+
<div class="heap">
215+
<!-- 4 segments -->
216+
<div class="segments">
217+
218+
<!-- Segment 1 -->
219+
<div class="segment">
220+
<div class="pages">
221+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
222+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
223+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
224+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
225+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
226+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
227+
</div>
228+
</div>
229+
230+
<!-- Segment 2 — labeled -->
231+
<div class="segment" id="s2">
232+
<div class="pages">
233+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
234+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
235+
<div class="page" id="highlighted-page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
236+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
237+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
238+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
239+
</div>
240+
</div>
241+
242+
<!-- Segment 3 -->
243+
<div class="segment">
244+
<div class="pages">
245+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
246+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
247+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
248+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
249+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
250+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
251+
</div>
252+
</div>
253+
254+
<!-- Segment 4 -->
255+
<div class="segment">
256+
<div class="pages">
257+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
258+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
259+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
260+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
261+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
262+
<div class="page"><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div><div class="chunk"></div></div>
263+
</div>
264+
</div>
265+
266+
</div>
267+
<div class="heap-label">Heap</div>
268+
</div>
269+
270+
<!-- Legend -->
271+
<div class="legend">
272+
<div class="legend-item">
273+
<div class="legend-swatch l-heap"></div>
274+
<span class="l-heap" style="color:#6478ff">Heap</span>
275+
</div>
276+
<div class="legend-item">
277+
<div class="legend-swatch l-seg"></div>
278+
<span class="l-seg" style="color:#50c8b4">Segment</span>
279+
</div>
280+
<div class="legend-item">
281+
<div class="legend-swatch l-page"></div>
282+
<span style="color:#ffc864">Page</span>
283+
</div>
284+
<div class="legend-item">
285+
<div class="legend-swatch l-chunk"></div>
286+
<span style="color:#ffc864">Chunk</span>
287+
</div>
288+
</div>
289+
290+
<!-- Size scale -->
291+
<div class="size-arrow">
292+
<div class="arrow-line">
293+
<span class="label-small">smallest</span>
294+
<div class="arrow-track"></div>
295+
<span class="label-large">largest</span>
296+
</div>
297+
</div>
298+
299+
</div>
300+
301+
<style>
302+
/* add segment label on hover for s2 only — cleaner */
303+
.segment { transition: border-color 0.2s; }
304+
.segment:hover { border-color: rgba(80,200,180,0.5); }
305+
.page:hover { border-color: rgba(255,200,100,0.5); }
306+
307+
/* extra style for the heap wrapper bottom spacing */
308+
.heap { margin-bottom: 48px; }
309+
310+
/* annotate one segment and one page with a subtle callout */
311+
</style>
312+
313+
<!-- SVG callout arrows overlay -->
314+
<svg style="position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible" id="arrows"></svg>
315+
316+
</body>
317+
</html>

0 commit comments

Comments
 (0)