Skip to content

Commit 844bdf2

Browse files
jinwandalaohu66jinwandalaohu66
committed
优化：系统字体、慢速粒子、居中布局、提升对比度
1 parent b3ccb1c commit 844bdf2

1 file changed

Lines changed: 41 additions & 34 deletions

File tree

‎docs/index.html‎

Lines changed: 41 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@
77
<title>PythonIDE - 掌上的 Python & JavaScript 开发环境</title>
88
<link rel="icon" type="image/png" href="icon.png" />
99
<style>
10-
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
11-
1210
:root {
1311
--bg: #050508;
1412
--card: rgba(22, 27, 34, 0.7);
@@ -49,7 +47,7 @@
4947
html { scroll-behavior: smooth; }
5048

5149
body {
52-
font-family: 'Noto Sans SC', -apple-system, sans-serif;
50+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
5351
background: var(--bg);
5452
color: var(--text);
5553
line-height: 1.7;
@@ -300,13 +298,12 @@
300298
background: linear-gradient(90deg, var(--border), transparent);
301299
}
302300

303-
/* Bento Grid - 特色布局 */
301+
/* Bento Grid - 为什么选择 */
304302
.bento {
305303
display: grid;
306304
grid-template-columns: repeat(3, 1fr);
307-
grid-template-rows: auto auto;
308-
gap: 1.5rem;
309-
margin-bottom: 4rem;
305+
gap: 1.25rem;
306+
margin-bottom: 2rem;
310307
}
311308
.bento-card {
312309
background: var(--card);
@@ -334,22 +331,21 @@
334331
box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(255, 255, 255, 0.06);
335332
}
336333
.bento-card:hover::before { opacity: 1; }
337-
.bento-card.featured { grid-column: span 2; }
338-
.bento-card .icon { font-size: 2rem; margin-bottom: 1rem; }
334+
.bento-card .icon { font-size: 1.5rem; margin-bottom: 0.75rem; }
339335
.bento-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--text); }
340336
.bento-card p { color: var(--text-muted); font-size: 0.95rem; }
341337

342338
.why-grid {
343339
display: grid;
344-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
340+
grid-template-columns: repeat(3, 1fr);
345341
gap: 1rem;
346-
margin: 2rem 0;
342+
margin-top: 0;
347343
}
348344
.why-item {
349345
display: flex;
350-
align-items: flex-start;
346+
align-items: center;
351347
gap: 1rem;
352-
padding: 1.25rem;
348+
padding: 1rem 1.25rem;
353349
background: var(--card);
354350
border-radius: 16px;
355351
border: 1px solid var(--border);
@@ -358,8 +354,8 @@
358354
.why-item:hover {
359355
border-color: var(--hover-border);
360356
background: var(--card-hover);
361-
transform: translateX(6px);
362-
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
357+
transform: translateY(-2px);
358+
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
363359
}
364360
.why-item .check {
365361
width: 28px;
@@ -439,15 +435,15 @@
439435
transition: all 0.3s;
440436
}
441437
.tab-btn:hover {
442-
color: #fff;
438+
color: var(--text);
443439
border-color: var(--hover-border);
444-
background: rgba(255, 255, 255, 0.06);
440+
background: var(--card-hover);
445441
}
446442
.tab-btn.active {
447-
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
448-
color: #fff;
443+
background: var(--card-hover);
444+
color: var(--text);
449445
border-color: var(--hover-border);
450-
box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
446+
box-shadow: 0 0 20px var(--hover-glow);
451447
}
452448
.tab-content { display: none; }
453449
.tab-content.active {
@@ -462,11 +458,13 @@
462458
gap: 1rem;
463459
}
464460
.feature-chip {
465-
padding: 1rem;
461+
padding: 1rem 1.25rem;
466462
background: var(--card);
467463
border-radius: 12px;
468464
border: 1px solid var(--border);
469465
transition: all 0.3s;
466+
text-align: center;
467+
color: var(--text);
470468
}
471469
.feature-chip:hover {
472470
border-color: var(--hover-border);
@@ -494,7 +492,11 @@
494492
gap: 1rem;
495493
}
496494
.link-card {
497-
display: block;
495+
display: flex;
496+
flex-direction: column;
497+
align-items: center;
498+
justify-content: center;
499+
text-align: center;
498500
padding: 1.25rem;
499501
background: var(--card);
500502
border-radius: 16px;
@@ -509,7 +511,7 @@
509511
transform: translateY(-4px);
510512
box-shadow: 0 10px 40px rgba(255, 255, 255, 0.08);
511513
}
512-
.link-card span { color: #e6edf3; font-weight: 600; }
514+
.link-card span { color: var(--text); font-weight: 600; display: block; margin-bottom: 0.25rem; }
513515

514516
/* Donate */
515517
.donate-section {
@@ -540,7 +542,6 @@
540542
}
541543
.footer a { color: var(--accent); text-decoration: none; }
542544
.footer a:hover { text-shadow: 0 0 20px var(--accent-glow); }
543-
.link-card span { color: var(--text); }
544545

545546
@media (prefers-color-scheme: light) {
546547
.btn-appstore { border-color: rgba(0,0,0,0.15); }
@@ -553,9 +554,10 @@
553554
}
554555

555556
@media (max-width: 768px) {
556-
.bento-card.featured { grid-column: span 1; }
557557
.bento { grid-template-columns: 1fr; }
558+
.why-grid { grid-template-columns: 1fr; }
558559
.nav-links { display: none; }
560+
.feature-grid { grid-template-columns: 1fr; }
559561
}
560562
</style>
561563
</head>
@@ -605,30 +607,35 @@ <h2 class="section-title">🌟 为什么选择 PythonIDE？</h2>
605607
<p style="margin-bottom: 1.5rem; color: var(--text-muted); font-style: italic;">不是把电脑版塞进手机，而是专为触摸屏和移动场景重新设计的编程环境。</p>
606608

607609
<div class="bento">
608-
<div class="bento-card featured">
610+
<div class="bento-card">
609611
<div class="icon">🚀</div>
610612
<h3>完全本地运行</h3>
611-
<p>代码执行不依赖任何服务器，无网络也能用。Python 3.13 完整标准库，asyncio、threading、socket 全都有。</p>
613+
<p>代码执行不依赖任何服务器，无网络也能用。</p>
612614
</div>
613615
<div class="bento-card">
614616
<div class="icon">⚡</div>
615617
<h3>12 个 C 扩展</h3>
616-
<p>NumPy、Pillow、cryptography 等，速度是纯 Python 的 10–100 倍。</p>
618+
<p>NumPy、Pillow、cryptography 等，10–100 倍加速。</p>
617619
</div>
618620
<div class="bento-card">
619621
<div class="icon">📦</div>
620622
<h3>150+ 预装库</h3>
621-
<p>常用库开箱即用，搜索 PyPI 在线安装更多。</p>
623+
<p>常用库开箱即用，搜索 PyPI 在线安装。</p>
622624
</div>
623625
<div class="bento-card">
624626
<div class="icon">🤖</div>
625627
<h3>AI 助手</h3>
626-
<p>免费额度直接用，支持 BYOK 无限使用。</p>
628+
<p>免费额度 + BYOK 无限使用。</p>
627629
</div>
628-
<div class="bento-card featured">
630+
<div class="bento-card">
629631
<div class="icon">📱</div>
630632
<h3>iOS 深度集成</h3>
631-
<p>灵动岛、Siri 快捷指令、x-callback-url、相册/相机 API 一应俱全。</p>
633+
<p>灵动岛、Siri 快捷指令、x-callback-url。</p>
634+
</div>
635+
<div class="bento-card">
636+
<div class="icon">🔒</div>
637+
<h3>隐私安全</h3>
638+
<p>Face ID 锁定，本地运行，代码不外传。</p>
632639
</div>
633640
</div>
634641

@@ -754,8 +761,8 @@ <h2 class="section-title">☕ 支持开发</h2>
754761
constructor() {
755762
this.x = Math.random() * w;
756763
this.y = Math.random() * h;
757-
this.vx = (Math.random() - 0.5) * 0.8;
758-
this.vy = (Math.random() - 0.5) * 0.8;
764+
this.vx = (Math.random() - 0.5) * 0.15;
765+
this.vy = (Math.random() - 0.5) * 0.15;
759766
this.r = Math.random() * 2 + 1;
760767
this.opacity = Math.random() * 0.5 + 0.2;
761768
}

0 commit comments

Comments
 (0)