Skip to content

Commit b83af17

Browse files
NJX-njxNJX-njx
committed
Optimize HTML dashboard design
1 parent b309105 commit b83af17

1 file changed

Lines changed: 102 additions & 64 deletions

File tree

‎microgpt_optimized.html‎

Lines changed: 102 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -9,155 +9,193 @@
99
:root {
1010
--bg: #0d1117;
1111
--panel: #161b22;
12-
--line: #21262d;
13-
--text: #c9d1d9;
12+
--line: #30363d;
13+
--text: #e6edf3;
1414
--muted: #8b949e;
1515
--accent: #58a6ff;
1616
--active: #1f6feb;
1717
--ln: #6e7681;
18+
--header-bg: #161b22;
19+
--border-radius: 12px;
1820
}
1921
body {
2022
background: var(--bg);
2123
color: var(--text);
22-
font-family: "SF Mono", "Fira Code", "Consolas", "Courier New", monospace;
23-
font-size: 13px;
24-
line-height: 1.5;
24+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
25+
font-size: 14px;
26+
line-height: 1.6;
2527
min-height: 100vh;
28+
-webkit-font-smoothing: antialiased;
2629
}
2730
.wrap {
28-
max-width: 1600px;
31+
max-width: 1400px;
2932
margin: 0 auto;
30-
padding: 14px;
33+
padding: 40px 20px;
3134
}
32-
h1 {
33-
font-size: 24px;
34-
color: var(--accent);
35+
header {
3536
text-align: center;
36-
margin-bottom: 6px;
37+
margin-bottom: 40px;
38+
}
39+
h1 {
40+
font-size: 32px;
41+
font-weight: 600;
42+
color: var(--text);
43+
margin-bottom: 12px;
44+
letter-spacing: -0.5px;
3745
}
3846
.subtitle {
39-
text-align: center;
4047
color: var(--muted);
41-
font-size: 12px;
42-
margin-bottom: 12px;
48+
font-size: 16px;
49+
max-width: 600px;
50+
margin: 0 auto 24px;
4351
}
4452
.toolbar {
4553
display: flex;
4654
justify-content: center;
47-
gap: 8px;
48-
margin-bottom: 12px;
49-
flex-wrap: wrap;
55+
gap: 12px;
56+
margin-bottom: 32px;
5057
}
5158
.btn {
52-
border: 1px solid #30363d;
53-
background: #161b22;
59+
border: 1px solid var(--line);
60+
background: var(--panel);
5461
color: var(--text);
55-
padding: 6px 10px;
56-
font-size: 12px;
62+
padding: 8px 16px;
63+
font-size: 14px;
64+
font-weight: 500;
5765
border-radius: 6px;
5866
cursor: pointer;
67+
transition: all 0.2s cubic-bezier(0.3, 0, 0.5, 1);
68+
}
69+
.btn:hover {
70+
background: #30363d;
71+
border-color: #8b949e;
5972
}
60-
.btn:hover { border-color: var(--accent); }
6173
.btn.active {
6274
background: var(--active);
63-
border-color: var(--active);
75+
border-color: rgba(255, 255, 255, 0.1);
6476
color: #fff;
6577
}
66-
.hint {
67-
text-align: center;
68-
color: var(--muted);
69-
font-size: 11px;
70-
margin-bottom: 10px;
71-
}
7278
.grid {
7379
display: grid;
7480
grid-template-columns: 1fr 1fr;
75-
gap: 10px;
81+
gap: 20px;
7682
}
7783
.panel {
7884
border: 1px solid var(--line);
79-
border-radius: 8px;
85+
border-radius: var(--border-radius);
8086
overflow: hidden;
81-
background: var(--panel);
82-
min-height: 70vh;
87+
background: #010409;
88+
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
8389
display: flex;
8490
flex-direction: column;
91+
height: 800px;
8592
}
86-
.panel.hidden { display: none; }
8793
.panel-header {
88-
background: #0f141b;
94+
background: var(--header-bg);
8995
border-bottom: 1px solid var(--line);
90-
padding: 8px 10px;
96+
padding: 12px 16px;
9197
display: flex;
9298
justify-content: space-between;
9399
align-items: center;
94100
}
95101
.panel-title {
96-
color: var(--accent);
97-
font-size: 12px;
102+
color: var(--text);
103+
font-size: 14px;
98104
font-weight: 600;
105+
display: flex;
106+
align-items: center;
107+
gap: 8px;
108+
}
109+
.panel-title::before {
110+
content: "";
111+
display: inline-block;
112+
width: 8px;
113+
height: 8px;
114+
border-radius: 50%;
115+
background: var(--accent);
99116
}
100117
.panel-meta {
101118
color: var(--muted);
102-
font-size: 11px;
119+
font-size: 12px;
120+
font-family: inherit;
103121
}
104122
.code-scroll {
105123
overflow: auto;
106-
height: 100%;
124+
flex: 1;
125+
background: #0d1117;
107126
}
108127
.line {
109128
display: flex;
110-
border-bottom: 1px solid rgba(33,38,45,0.35);
129+
font-family: "ui-monospace", "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
130+
font-size: 12px;
111131
}
112132
.ln {
113-
width: 56px;
114-
min-width: 56px;
133+
width: 48px;
134+
min-width: 48px;
115135
text-align: right;
116136
color: var(--ln);
117-
padding: 0 10px 0 0;
137+
padding: 0 12px;
118138
user-select: none;
139+
background: #0d1117;
119140
border-right: 1px solid var(--line);
120-
background: #0f141b;
141+
opacity: 0.6;
121142
}
122143
.code {
123144
white-space: pre;
124-
padding: 0 10px;
125-
width: 100%;
126-
color: var(--text);
145+
padding: 0 16px;
146+
color: #e6edf3;
147+
}
148+
/* Scrollbar Styling */
149+
.code-scroll::-webkit-scrollbar {
150+
width: 10px;
151+
height: 10px;
152+
}
153+
.code-scroll::-webkit-scrollbar-track {
154+
background: #0d1117;
155+
}
156+
.code-scroll::-webkit-scrollbar-thumb {
157+
background: #30363d;
158+
border-radius: 10px;
159+
border: 2px solid #0d1117;
127160
}
161+
.code-scroll::-webkit-scrollbar-thumb:hover {
162+
background: #484f58;
163+
}
164+
128165
.view-python .panel-cuda { display: none; }
129166
.view-cuda .panel-python { display: none; }
130-
.view-python .grid,
131-
.view-cuda .grid { grid-template-columns: 1fr; }
132-
@media (max-width: 1100px) {
167+
.view-python .grid, .view-cuda .grid { grid-template-columns: 1fr; }
168+
169+
@media (max-width: 1000px) {
133170
.grid { grid-template-columns: 1fr; }
171+
.panel { height: 600px; }
134172
}
135173
</style>
136174
</head>
137175
<body class="view-bilingual">
138176
<div class="wrap">
139-
<h1>microgpt Code Converter</h1>
140-
<div class="subtitle">Python and CUDA versions as bilingual documents: switch or compare side by side.</div>
141-
142-
<div class="toolbar">
143-
<button class="btn" data-view="python">Python View</button>
144-
<button class="btn" data-view="cuda">CUDA View</button>
145-
<button class="btn active" data-view="bilingual">Bilingual View</button>
146-
</div>
147-
<div class="hint">This page behaves like a language-version converter: same project, two implementation languages.</div>
177+
<header>
178+
<h1>MicroGPT Dashboard</h1>
179+
<div class="subtitle">A minimalist GPT-2 implementation in pure Python vs CUDA/C++. Cross-platform bilingual code documentation.</div>
180+
<div class="toolbar">
181+
<button class="btn" data-view="python">Python Implementation</button>
182+
<button class="btn" data-view="cuda">CUDA Kernel</button>
183+
<button class="btn active" data-view="bilingual">Side-by-Side Compare</button>
184+
</div>
185+
</header>
148186

149187
<div class="grid">
150-
<section class="panel panel-python" id="panel-python">
188+
<section class="panel panel-python">
151189
<div class="panel-header">
152-
<div class="panel-title">Python (microgpt.py)</div>
190+
<div class="panel-title">microgpt.py</div>
153191
<div class="panel-meta" id="meta-python"></div>
154192
</div>
155193
<div class="code-scroll" id="scroll-python"></div>
156194
</section>
157195

158-
<section class="panel panel-cuda" id="panel-cuda">
196+
<section class="panel panel-cuda">
159197
<div class="panel-header">
160-
<div class="panel-title">CUDA/C++ (microgpt_cuda.cu)</div>
198+
<div class="panel-title">microgpt_cuda.cu</div>
161199
<div class="panel-meta" id="meta-cuda"></div>
162200
</div>
163201
<div class="code-scroll" id="scroll-cuda"></div>

0 commit comments

Comments
 (0)