Skip to content

Commit a736dbf

Browse files
itech001itech001
committed
feat: light theme website, remove diagram from HTML, regenerate PNG for README only
1 parent c030170 commit a736dbf

3 files changed

Lines changed: 74 additions & 81 deletions

File tree

‎agent-runner-diagram.html‎

Lines changed: 61 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,21 @@
1010

1111
body {
1212
font-family: 'IBM Plex Sans', sans-serif;
13-
background: #0D0D0D;
14-
color: #F0F0F5;
13+
background: #F5F5F7;
14+
color: #1A1A1F;
1515
padding: 40px;
1616
min-height: 100vh;
1717
}
1818

1919
.canvas {
2020
max-width: 1400px;
2121
margin: 0 auto;
22-
background: linear-gradient(180deg, #0A0A0F 0%, #111118 50%, #0D0D12 100%);
22+
background: linear-gradient(180deg, #FFFFFF 0%, #F8F8FA 50%, #F0F0F5 100%);
2323
border-radius: 24px;
2424
padding: 60px 48px;
2525
position: relative;
2626
overflow: hidden;
27+
border: 1px solid #E0E0E8;
2728
}
2829

2930
/* Grid pattern background */
@@ -32,8 +33,8 @@
3233
position: absolute;
3334
inset: 0;
3435
background-image:
35-
linear-gradient(rgba(124, 106, 239, 0.04) 1px, transparent 1px),
36-
linear-gradient(90deg, rgba(124, 106, 239, 0.04) 1px, transparent 1px);
36+
linear-gradient(rgba(124, 106, 239, 0.06) 1px, transparent 1px),
37+
linear-gradient(90deg, rgba(124, 106, 239, 0.06) 1px, transparent 1px);
3738
background-size: 40px 40px;
3839
pointer-events: none;
3940
}
@@ -46,7 +47,7 @@
4647
right: -10%;
4748
width: 600px;
4849
height: 600px;
49-
background: radial-gradient(circle, rgba(124, 106, 239, 0.08) 0%, transparent 70%);
50+
background: radial-gradient(circle, rgba(124, 106, 239, 0.06) 0%, transparent 70%);
5051
pointer-events: none;
5152
}
5253

@@ -63,22 +64,22 @@
6364
gap: 8px;
6465
padding: 6px 16px;
6566
border-radius: 100px;
66-
background: rgba(34, 197, 94, 0.08);
67-
border: 1px solid rgba(34, 197, 94, 0.2);
67+
background: rgba(22, 163, 74, 0.08);
68+
border: 1px solid rgba(22, 163, 74, 0.2);
6869
font-family: 'IBM Plex Mono', monospace;
6970
font-size: 0.65rem;
7071
font-weight: 500;
7172
letter-spacing: 0.1em;
7273
text-transform: uppercase;
73-
color: #22C55E;
74+
color: #16A34A;
7475
margin-bottom: 20px;
7576
}
7677
.header-badge .dot {
7778
width: 6px;
7879
height: 6px;
7980
border-radius: 50%;
80-
background: #22C55E;
81-
box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
81+
background: #16A34A;
82+
box-shadow: 0 0 8px rgba(22, 163, 74, 0.5);
8283
animation: blink 2s ease-in-out infinite;
8384
}
8485
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@@ -90,10 +91,10 @@
9091
letter-spacing: -0.03em;
9192
margin-bottom: 12px;
9293
}
93-
.header h1 .prompt { color: #22C55E; }
94+
.header h1 .prompt { color: #16A34A; }
9495
.header .subtitle {
9596
font-size: 1.1rem;
96-
color: #7A7A90;
97+
color: #6B6B80;
9798
font-weight: 300;
9899
}
99100

@@ -128,12 +129,13 @@
128129

129130
/* Panels */
130131
.panel {
131-
background: linear-gradient(145deg, rgba(20, 20, 24, 0.9) 0%, rgba(28, 28, 34, 0.9) 100%);
132-
border: 1px solid rgba(42, 42, 53, 0.8);
132+
background: linear-gradient(145deg, #FFFFFF 0%, #F8F8FA 100%);
133+
border: 1px solid #E0E0E8;
133134
border-radius: 16px;
134135
padding: 28px;
135136
position: relative;
136137
overflow: hidden;
138+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
137139
}
138140
.panel::before {
139141
content: '';
@@ -142,7 +144,7 @@
142144
left: 0;
143145
right: 0;
144146
height: 1px;
145-
background: linear-gradient(90deg, transparent, rgba(124, 106, 239, 0.4), transparent);
147+
background: linear-gradient(90deg, transparent, rgba(124, 106, 239, 0.25), transparent);
146148
}
147149

148150
/* File Tree */
@@ -151,9 +153,9 @@
151153
font-size: 0.82rem;
152154
line-height: 2.4;
153155
}
154-
.file-tree .dir { color: #22D3EE; font-weight: 600; }
155-
.file-tree .file { color: #B0B0C0; }
156-
.file-tree .comment { color: #5A5A70; font-style: italic; margin-left: 8px; }
156+
.file-tree .dir { color: #0891B2; font-weight: 600; }
157+
.file-tree .file { color: #4A4A5A; }
158+
.file-tree .comment { color: #8A8A9A; font-style: italic; margin-left: 8px; }
157159
.file-tree .indent-1 { padding-left: 20px; }
158160
.file-tree .indent-2 { padding-left: 40px; }
159161
.file-tree .indent-3 { padding-left: 60px; }
@@ -178,14 +180,14 @@
178180
top: 42px;
179181
bottom: -2px;
180182
width: 2px;
181-
background: linear-gradient(180deg, rgba(124, 106, 239, 0.3), rgba(124, 106, 239, 0.05));
183+
background: linear-gradient(180deg, rgba(124, 106, 239, 0.25), rgba(124, 106, 239, 0.05));
182184
}
183185
.step-num {
184186
width: 44px;
185187
height: 44px;
186188
border-radius: 10px;
187-
background: linear-gradient(135deg, rgba(124, 106, 239, 0.15), rgba(124, 106, 239, 0.05));
188-
border: 1px solid rgba(124, 106, 239, 0.3);
189+
background: linear-gradient(135deg, rgba(124, 106, 239, 0.1), rgba(124, 106, 239, 0.03));
190+
border: 1px solid rgba(124, 106, 239, 0.2);
189191
display: flex;
190192
align-items: center;
191193
justify-content: center;
@@ -203,7 +205,7 @@
203205
}
204206
.step-content p {
205207
font-size: 0.76rem;
206-
color: #7A7A90;
208+
color: #6B6B80;
207209
line-height: 1.5;
208210
}
209211

@@ -214,18 +216,19 @@
214216
z-index: 1;
215217
}
216218
.loop-container {
217-
background: linear-gradient(145deg, rgba(20, 20, 24, 0.9) 0%, rgba(28, 28, 34, 0.9) 100%);
218-
border: 1px solid rgba(42, 42, 53, 0.8);
219+
background: linear-gradient(145deg, #FFFFFF 0%, #F8F8FA 100%);
220+
border: 1px solid #E0E0E8;
219221
border-radius: 20px;
220222
padding: 40px;
221223
position: relative;
222224
overflow: hidden;
225+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
223226
}
224227
.loop-container::before {
225228
content: '';
226229
position: absolute;
227230
inset: 0;
228-
background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(34, 211, 238, 0.06) 0%, transparent 70%);
231+
background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(8, 145, 178, 0.05) 0%, transparent 70%);
229232
pointer-events: none;
230233
}
231234
.loop-title {
@@ -234,7 +237,7 @@
234237
font-weight: 600;
235238
letter-spacing: 0.18em;
236239
text-transform: uppercase;
237-
color: #7A7A90;
240+
color: #6B6B80;
238241
text-align: center;
239242
margin-bottom: 36px;
240243
}
@@ -253,22 +256,22 @@
253256
font-family: 'IBM Plex Mono', monospace;
254257
font-size: 0.78rem;
255258
font-weight: 600;
256-
background: rgba(28, 28, 34, 0.8);
257-
border: 1px solid rgba(42, 42, 53, 0.8);
259+
background: #F0F0F5;
260+
border: 1px solid #E0E0E8;
258261
position: relative;
259262
transition: all 0.3s ease;
260263
}
261264
.flow-node.active {
262-
border-color: rgba(34, 211, 238, 0.5);
263-
box-shadow: 0 0 20px rgba(34, 211, 238, 0.15);
264-
color: #22D3EE;
265+
border-color: rgba(8, 145, 178, 0.4);
266+
box-shadow: 0 0 16px rgba(8, 145, 178, 0.1);
267+
color: #0891B2;
265268
}
266269
.flow-node.active::after {
267270
content: '';
268271
position: absolute;
269272
inset: -2px;
270273
border-radius: 12px;
271-
border: 1px solid rgba(34, 211, 238, 0.2);
274+
border: 1px solid rgba(8, 145, 178, 0.15);
272275
animation: pulse-glow 2s ease-in-out infinite;
273276
}
274277
@keyframes pulse-glow {
@@ -277,12 +280,12 @@
277280
}
278281
.flow-arrow {
279282
font-size: 1rem;
280-
color: #5A5A70;
283+
color: #8A8A9A;
281284
animation: flow-anim 1.5s ease-in-out infinite;
282285
}
283286
@keyframes flow-anim {
284287
0%, 100% { opacity: 0.3; }
285-
50% { opacity: 1; color: #22D3EE; }
288+
50% { opacity: 1; color: #0891B2; }
286289
}
287290
.flow-return {
288291
display: flex;
@@ -296,9 +299,9 @@
296299
width: 100%;
297300
max-width: 400px;
298301
height: 20px;
299-
border-bottom: 1px dashed rgba(124, 106, 239, 0.3);
300-
border-left: 1px dashed rgba(124, 106, 239, 0.3);
301-
border-right: 1px dashed rgba(124, 106, 239, 0.3);
302+
border-bottom: 1px dashed rgba(124, 106, 239, 0.25);
303+
border-left: 1px dashed rgba(124, 106, 239, 0.25);
304+
border-right: 1px dashed rgba(124, 106, 239, 0.25);
302305
border-radius: 0 0 12px 12px;
303306
position: relative;
304307
}
@@ -312,7 +315,7 @@
312315
height: 0;
313316
border-left: 6px solid transparent;
314317
border-right: 6px solid transparent;
315-
border-bottom: 6px solid rgba(124, 106, 239, 0.5);
318+
border-bottom: 6px solid rgba(124, 106, 239, 0.4);
316319
}
317320
.return-label {
318321
font-family: 'IBM Plex Mono', monospace;
@@ -336,22 +339,23 @@
336339
display: flex;
337340
align-items: center;
338341
gap: 10px;
339-
background: rgba(20, 20, 24, 0.6);
340-
border: 1px solid rgba(42, 42, 53, 0.6);
342+
background: #FFFFFF;
343+
border: 1px solid #E0E0E8;
341344
border-radius: 8px;
342345
padding: 12px 14px;
343346
transition: all 0.2s ease;
347+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
344348
}
345349
.tool-item:hover {
346-
border-color: rgba(124, 106, 239, 0.4);
350+
border-color: rgba(124, 106, 239, 0.3);
347351
transform: translateY(-1px);
348352
}
349353
.tool-icon {
350354
width: 28px;
351355
height: 28px;
352356
border-radius: 6px;
353-
background: rgba(28, 28, 34, 0.8);
354-
border: 1px solid rgba(42, 42, 53, 0.6);
357+
background: #F8F8FA;
358+
border: 1px solid #E0E0E8;
355359
display: flex;
356360
align-items: center;
357361
justify-content: center;
@@ -375,7 +379,7 @@
375379
}
376380
.tool-info span {
377381
font-size: 0.65rem;
378-
color: #7A7A90;
382+
color: #6B6B80;
379383
}
380384

381385
/* Config */
@@ -390,39 +394,40 @@
390394
gap: 12px;
391395
}
392396
.config-item {
393-
background: rgba(20, 20, 24, 0.6);
394-
border: 1px solid rgba(42, 42, 53, 0.6);
397+
background: #FFFFFF;
398+
border: 1px solid #E0E0E8;
395399
border-radius: 10px;
396400
padding: 16px;
401+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
397402
}
398403
.config-item h4 {
399404
font-family: 'IBM Plex Mono', monospace;
400405
font-size: 0.76rem;
401406
font-weight: 600;
402-
color: #F0F0F5;
407+
color: #1A1A1F;
403408
margin-bottom: 6px;
404409
display: flex;
405410
align-items: center;
406411
gap: 6px;
407412
}
408413
.config-item .type-tag {
409414
font-size: 0.55rem;
410-
color: #7A7A90;
415+
color: #6B6B80;
411416
font-weight: 400;
412417
padding: 1px 5px;
413-
background: rgba(28, 28, 34, 0.8);
418+
background: #F0F0F5;
414419
border-radius: 3px;
415420
}
416421
.config-item p {
417422
font-size: 0.72rem;
418-
color: #7A7A90;
423+
color: #6B6B80;
419424
line-height: 1.5;
420425
}
421426
.config-item code {
422427
font-family: 'IBM Plex Mono', monospace;
423428
font-size: 0.65rem;
424-
color: #22D3EE;
425-
background: rgba(34, 211, 238, 0.08);
429+
color: #0891B2;
430+
background: rgba(8, 145, 178, 0.06);
426431
padding: 1px 4px;
427432
border-radius: 3px;
428433
}
@@ -431,14 +436,14 @@
431436
.footer {
432437
text-align: center;
433438
padding: 32px 0;
434-
border-top: 1px solid rgba(42, 42, 53, 0.6);
439+
border-top: 1px solid #E0E0E8;
435440
position: relative;
436441
z-index: 1;
437442
}
438443
.footer p {
439444
font-family: 'IBM Plex Mono', monospace;
440445
font-size: 0.68rem;
441-
color: #5A5A70;
446+
color: #8A8A9A;
442447
margin-bottom: 6px;
443448
}
444449
.footer a {
@@ -452,7 +457,7 @@
452457
position: absolute;
453458
width: 40px;
454459
height: 40px;
455-
border: 1px solid rgba(124, 106, 239, 0.2);
460+
border: 1px solid rgba(124, 106, 239, 0.15);
456461
}
457462
.corner-tl { top: 20px; left: 20px; border-right: none; border-bottom: none; border-radius: 12px 0 0 0; }
458463
.corner-tr { top: 20px; right: 20px; border-left: none; border-bottom: none; border-radius: 0 12px 0 0; }

‎web-site/agent-runner-architecture.png‎

-42.7 KB
Loading

0 commit comments

Comments
 (0)