From 44ba1fa1ff3323e0eb8a59268d176cc45802d511 Mon Sep 17 00:00:00 2001 From: GJ Date: Sun, 3 May 2026 14:50:05 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20UX=20overhaul=20=E2=80=94=20reading=20p?= =?UTF-8?q?rogress=20bar,=20sticky=20jump=20nav,=20FAB=20cluster,=20subscr?= =?UTF-8?q?ibe=20strip=20above=20fold,=20PWA=20manifest,=20mobile=20tweaks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 231 +++++++++++++++++++++++++++++++++++++++++++++++--- manifest.json | 10 +++ 2 files changed, 229 insertions(+), 12 deletions(-) create mode 100644 manifest.json diff --git a/index.html b/index.html index 4f452f1..e0fad9b 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,11 @@ + + + + + 金融日报 | Financial Daily — 北美华人投资者日报 @@ -1173,9 +1178,106 @@ /* live data age warning */ .data-stale { border-color: rgba(255,179,0,0.35) !important; } + /* ── Reading progress bar ──────────────────────────────────── */ + #reading-progress { + position: fixed; top: 0; left: 0; height: 3px; width: 0%; + background: linear-gradient(90deg, var(--accent) 0%, #4fc3f7 100%); + z-index: 9999; transition: width 0.1s linear; + box-shadow: 0 0 8px rgba(0,212,170,0.6); + } + + /* ── Sticky section jump nav ───────────────────────────── */ + .jump-nav { + position: sticky; top: 0; z-index: 90; + background: rgba(7,11,20,0.94); backdrop-filter: blur(14px); + border-bottom: 1px solid var(--border); + padding: 7px 20px; display: flex; gap: 6px; + flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; + } + .jump-nav::-webkit-scrollbar { display: none; } + .jump-nav a { + font-size: 0.67rem; font-family: var(--mono); + color: var(--muted); padding: 4px 10px; + border: 1px solid var(--border); border-radius: 20px; + white-space: nowrap; text-decoration: none; + transition: all 0.18s; flex-shrink: 0; + } + .jump-nav a:hover, .jump-nav a.active { + color: var(--accent); border-color: rgba(0,212,170,0.5); + background: rgba(0,212,170,0.08); text-decoration: none; + } + + /* ── Floating action cluster ───────────────────────────── */ + .fab-cluster { + position: fixed; bottom: 28px; right: 24px; + display: flex; flex-direction: column; gap: 10px; + z-index: 500; + } + .fab { + width: 44px; height: 44px; border-radius: 50%; + border: 1px solid var(--border-light); + background: var(--card); color: var(--muted); + display: flex; align-items: center; justify-content: center; + cursor: pointer; font-size: 1.1rem; + box-shadow: 0 4px 16px rgba(0,0,0,0.5); + transition: all 0.2s; + } + .fab:hover { background: var(--card-hover); color: var(--accent); border-color: rgba(0,212,170,0.5); transform: scale(1.08); } + #fab-top { opacity: 0; pointer-events: none; transition: opacity 0.3s; } + #fab-top.visible { opacity: 1; pointer-events: auto; } + + /* ── Subscribe strip (inline, after summary) ───────────────── */ + .subscribe-strip { + background: linear-gradient(135deg, rgba(0,212,170,0.06) 0%, rgba(79,195,247,0.04) 100%); + border: 1px solid rgba(0,212,170,0.2); + border-radius: var(--radius-lg); padding: 14px 18px; + display: flex; align-items: center; gap: 14px; flex-wrap: wrap; + margin-bottom: 16px; + } + .subscribe-strip-icon { font-size: 1.3rem; flex-shrink: 0; } + .subscribe-strip-body { flex: 1; min-width: 160px; } + .subscribe-strip-body strong { display: block; color: var(--accent); font-size: 0.86rem; margin-bottom: 2px; } + .subscribe-strip-body span { font-size: 0.73rem; color: var(--muted); } + .subscribe-strip-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } + .btn-sub-email { + padding: 6px 12px; border-radius: 6px; border: none; + background: var(--accent); color: #000; font-size: 0.76rem; + font-weight: 600; cursor: pointer; white-space: nowrap; + } + .btn-sub-email:hover { background: #33e0be; } + .btn-sub-tg { + padding: 6px 12px; border-radius: 6px; + background: linear-gradient(135deg,#229ED9,#1a8bbf); + color: #fff; font-size: 0.76rem; font-weight: 600; + text-decoration: none; white-space: nowrap; display: flex; align-items: center; gap: 5px; + } + .btn-sub-tg:hover { opacity: 0.9; text-decoration: none; color: #fff; } + + /* ── Section anchor scroll offset (for sticky jump nav) ── */ + .sec-anchor { scroll-margin-top: 90px; } + + /* ── Share toast ──────────────────────────────────────────── */ + #share-toast { + position: fixed; bottom: 84px; right: 24px; + background: var(--card); border: 1px solid var(--border-light); + color: var(--text); font-size: 0.78rem; padding: 8px 14px; + border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); + opacity: 0; pointer-events: none; transition: opacity 0.3s; + z-index: 501; + } + #share-toast.show { opacity: 1; } + + /* ── Mobile tweaks ────────────────────────────────────────── */ + @media (max-width: 768px) { + .two-col { grid-template-columns: 1fr !important; } + .fab-cluster { bottom: 20px; right: 16px; } + .subscribe-strip { flex-direction: column; align-items: flex-start; } + .jump-nav { padding: 6px 12px; } + } +
+ + @@ -1276,7 +1393,7 @@ -
+
@@ -1295,10 +1412,34 @@
+ +
+ +
+ -
+
⭐ 我的工作台 · My Dashboard
@@ -1349,7 +1490,7 @@
-
+
市场领袖观点 · Market Leaders
@@ -1410,7 +1551,7 @@
-
+
央行动态 · Central Banks
@@ -1491,7 +1632,7 @@
-
+
市场要闻 · Market News
@@ -1563,7 +1704,7 @@
-
+
宏观指标 · Macro Data
@@ -1626,7 +1767,7 @@ ========================================================= --> -
+
财报追踪 · Earnings Tracker
@@ -1774,7 +1915,7 @@ ========================================================= --> -
+
板块表现 · Sector Performance
@@ -1920,7 +2061,7 @@ -
+
本周日程 · Economic Calendar
@@ -2412,6 +2553,65 @@ + // ── Reading progress bar ────────────────────────────────────────────────────────── + (function() { + const bar = document.getElementById('reading-progress'); + if (!bar) return; + window.addEventListener('scroll', function() { + const scrolled = window.scrollY; + const total = document.documentElement.scrollHeight - window.innerHeight; + bar.style.width = (total > 0 ? (scrolled / total * 100) : 0) + '%'; + }, { passive: true }); + })(); + + // ── Back-to-top FAB visibility ─────────────────────────────────────────────────── + (function() { + const btn = document.getElementById('fab-top'); + if (!btn) return; + window.addEventListener('scroll', function() { + btn.classList.toggle('visible', window.scrollY > 400); + }, { passive: true }); + })(); + + // ── Share / copy URL ──────────────────────────────────────────────────────────── + function shareOrCopy() { + const url = window.location.href; + const toast = document.getElementById('share-toast'); + if (navigator.share) { + navigator.share({ title: '金融日报 | Financial Daily', url }); + } else { + navigator.clipboard.writeText(url).then(function() { + toast.classList.add('show'); + setTimeout(function() { toast.classList.remove('show'); }, 2000); + }); + } + } + + // ── Jump nav active highlight on scroll ──────────────────────────────────────── + (function() { + const sections = document.querySelectorAll('.sec-anchor[id]'); + const links = document.querySelectorAll('.jump-nav a'); + if (!sections.length || !links.length) return; + const obs = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + links.forEach(function(l) { l.classList.remove('active'); }); + const a = document.querySelector('.jump-nav a[href="#' + entry.target.id + '"]'); + if (a) a.classList.add('active'); + } + }); + }, { rootMargin: '-20% 0px -70% 0px' }); + sections.forEach(function(s) { obs.observe(s); }); + })(); + + // ── Dismiss subscribe strip if already dismissed ──────────────────────────── + (function() { + if (localStorage.getItem('fd_sub_dismissed')) { + var el = document.getElementById('subscribe-strip'); + if (el) el.style.display = 'none'; + } + })(); + // ── Subscriber count (Telegram) ─────────────────────────────────────── (function loadSubCount() { const el = document.getElementById('subscriber-count'); @@ -2463,5 +2663,12 @@ }); + +
+ + +
+
✅ 链接已复制
+ diff --git a/manifest.json b/manifest.json new file mode 100644 index 0000000..13b80bf --- /dev/null +++ b/manifest.json @@ -0,0 +1,10 @@ +{ + "name": "金融日报 | Financial Daily", + "short_name": "金融日报", + "description": "北美华人投资者专属每日金融简报", + "start_url": "/finance-daily-site/", + "display": "standalone", + "background_color": "#070b14", + "theme_color": "#070b14", + "icons": [] +}