新增: Bing壁纸历史导航+极光流体主题+重启菜单

2026-05-25 22:44:21 +08:00
parent bb1574641f
commit d4bce23d19
7 changed files with 601 additions and 72 deletions
--- a/web/overlay.html
+++ b/web/overlay.html
@@ -1,3 +1,4 @@
+<!-- v3 -->
 <!DOCTYPE html>
 <html lang="zh">
 <head>
@@ -13,37 +14,120 @@ html, body {

 #info {
  position: fixed;
-  top: 50%;
-  right: 80px;
-  transform: translateY(-50%);
-  background: rgba(0, 0, 0, 0.4);
-  backdrop-filter: blur(20px);
-  border-radius: 16px;
-  padding: 24px 32px;
+  top: 40px;
+  right: 40px;
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border-radius: 20px;
+  padding: 28px 32px;
  color: #ffffff;
  font-family: "Microsoft YaHei", sans-serif;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255,255,255,0.08);
  text-align: right;
-  min-width: 300px;
-  max-height: 90vh;
-  overflow-y: auto;
+  min-width: 320px;
  z-index: 10;
 }

-.time { font-size: 64px; font-weight: 300; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.8); letter-spacing: -1px; }
-.date { font-size: 15px; color: rgba(255,255,255,0.9); margin-top: 6px; text-shadow: 0 1px 6px rgba(0,0,0,0.8); }
-.weather-section { margin-top: 20px; }
-.current-weather { font-size: 17px; color: rgba(255,255,255,0.95); text-shadow: 0 1px 4px rgba(0,0,0,0.8); margin-bottom: 12px; }
-.forecast-title { font-size: 13px; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
-.weather-forecast { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; justify-content: flex-end; }
-.forecast-item { background: rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px; text-align: center; min-width: 55px; font-size: 11px; color: rgba(255,255,255,0.85); }
-.forecast-time { margin-bottom: 4px; opacity: 0.8; }
-.forecast-temp { font-weight: 500; }
-.daily-forecast { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; justify-content: flex-end; }
-.daily-item { background: rgba(255,255,255,0.06); border-radius: 6px; padding: 6px 8px; text-align: center; min-width: 48px; font-size: 11px; color: rgba(255,255,255,0.85); }
-.zodiac { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.5; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
-.weather-forecast::-webkit-scrollbar, #info::-webkit-scrollbar { display: none; }
+.time {
+  font-size: 72px;
+  font-weight: 200;
+  color: #fff;
+  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
+  letter-spacing: -2px;
+  line-height: 1;
+}
+.date {
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(255,255,255,0.7);
+  margin-top: 8px;
+  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
+  letter-spacing: 0.5px;
+}
+
+.divider {
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
+  margin: 16px 0;
+}
+
+.weather-section {}
+.current-weather {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(255,255,255,0.95);
+  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
+  margin-bottom: 14px;
+}
+.forecast-title {
+  font-size: 11px;
+  font-weight: 500;
+  color: rgba(255,255,255,0.45);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  margin-bottom: 8px;
+}
+.weather-forecast {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+  justify-content: flex-end;
+}
+.forecast-item {
+  background: rgba(255,255,255,0.06);
+  border-radius: 10px;
+  padding: 8px 10px;
+  text-align: center;
+  min-width: 52px;
+  font-size: 11px;
+  color: rgba(255,255,255,0.8);
+  border: 1px solid rgba(255,255,255,0.04);
+}
+.forecast-time { margin-bottom: 4px; opacity: 0.6; font-size: 10px; }
+.forecast-temp { font-weight: 500; margin-top: 2px; }
+
+.daily-forecast {
+  display: flex;
+  gap: 4px;
+  overflow-x: auto;
+  padding-bottom: 6px;
+  justify-content: flex-end;
+}
+.daily-item {
+  background: rgba(255,255,255,0.04);
+  border-radius: 8px;
+  padding: 6px 8px;
+  text-align: center;
+  min-width: 48px;
+  font-size: 11px;
+  color: rgba(255,255,255,0.8);
+  border: 1px solid rgba(255,255,255,0.03);
+}
+
+.zodiac {
+  font-size: 14px;
+  color: rgba(255,255,255,0.9);
+  line-height: 1.6;
+  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
+}
+
+.weather-forecast::-webkit-scrollbar,
+.daily-forecast::-webkit-scrollbar,
+#info::-webkit-scrollbar { display: none; }
+
+#author {
+  position: fixed;
+  bottom: 60px;
+  right: 30px;
+  font-size: 16px;
+  color: rgba(255,255,255,0.5);
+  font-family: "Microsoft YaHei", sans-serif;
+  letter-spacing: 1px;
+  z-index: 10;
+  pointer-events: none;
+}
 </style>
 </head>
 <body>
@@ -52,16 +136,20 @@ html, body {
 <div id="info">
  <div class="time" id="time">00:00</div>
  <div class="date" id="date">1月1日 周一</div>
+  <div class="divider"></div>
  <div class="weather-section">
-    <div class="current-weather" id="currentWeather">🌤️ 加载中...</div>
-    <div class="forecast-title">未来24小时</div>
+    <div class="current-weather" id="currentWeather">加载中...</div>
+    <div class="forecast-title">24小时预报</div>
    <div class="weather-forecast" id="hourlyForecast"></div>
-    <div class="forecast-title" style="margin-top: 12px;">未来7天</div>
+    <div class="forecast-title" style="margin-top: 12px;">7日预报</div>
    <div class="daily-forecast" id="dailyForecast"></div>
  </div>
-  <div class="zodiac" id="zodiac">✨ 射手座运势</div>
+  <div class="divider"></div>
+  <div class="zodiac" id="zodiac">加载中...</div>
 </div>

+<div id="author">绝尘</div>
+
 <script>
 let lastTimeStr = '';
 let lastDateStr = '';
@@ -77,25 +165,31 @@ window.updateWeatherFromGo = function(data) {
      fel.innerHTML = data.hourly.map(function(item) {
        return '<div class="forecast-item"><div class="forecast-time">' + item.time + '</div><div>' + item.icon + '</div><div class="forecast-temp">' + item.temp + '</div></div>';
      }).join('');
-    } else { fel.innerHTML = '<div style="font-size:11px;opacity:0.5">暂无数据</div>'; }
+    } else { fel.innerHTML = '<div style="font-size:11px;opacity:0.4">暂无数据</div>'; }
  }
  var del = document.getElementById('dailyForecast');
  if (del) {
    if (data.daily && data.daily.length > 0) {
      del.innerHTML = data.daily.map(function(item) {
-        return '<div class="daily-item"><div style="opacity:0.8;margin-bottom:3px">' + item.date + '</div><div>' + item.icon + '</div><div class="forecast-temp">' + item.tempMin + '°~' + item.tempMax + '°</div></div>';
+        return '<div class="daily-item"><div style="opacity:0.6;margin-bottom:3px;font-size:10px">' + item.date + '</div><div>' + item.icon + '</div><div class="forecast-temp">' + item.tempMin + '°~' + item.tempMax + '°</div></div>';
      }).join('');
-    } else { del.innerHTML = '<div style="font-size:11px;opacity:0.5">暂无数据</div>'; }
+    } else { del.innerHTML = '<div style="font-size:11px;opacity:0.4">暂无数据</div>'; }
  }
 };

-var fortunes = {
-  '白羊座':'今日运势旺盛，适合开展新计划。','金牛座':'财运不错，但需注意健康。',
-  '双子座':'人际关系活跃，社交运势佳。','巨蟹座':'情绪敏感，适合独处思考。',
-  '狮子座':'自信爆棚，工作表现突出。','处女座':'细节决定成败，专注当下。',
-  '天秤座':'感情运佳，单身者有机会。','天蝎座':'直觉敏锐，适合做决策。',
-  '射手座':'冒险精神旺盛，出行注意安全。','摩羯座':'事业运佳，工作效率高。',
-  '水瓶座':'创新思维活跃，灵感不断。','双鱼座':'艺术灵感丰富，适合创作。'
+var zodiacData = {
+  '白羊座':{icon:'♈',date:'3.21-4.19',fortune:'今日运势旺盛，适合开展新计划。'},
+  '金牛座':{icon:'♉',date:'4.20-5.20',fortune:'财运不错，但需注意健康。'},
+  '双子座':{icon:'♊',date:'5.21-6.21',fortune:'人际关系活跃，社交运势佳。'},
+  '巨蟹座':{icon:'♋',date:'6.22-7.22',fortune:'情绪敏感，适合独处思考。'},
+  '狮子座':{icon:'♌',date:'7.23-8.22',fortune:'自信爆棚，工作表现突出。'},
+  '处女座':{icon:'♍',date:'8.23-9.22',fortune:'细节决定成败，专注当下。'},
+  '天秤座':{icon:'♎',date:'9.23-10.23',fortune:'感情运佳，单身者有机会。'},
+  '天蝎座':{icon:'♏',date:'10.24-11.22',fortune:'直觉敏锐，适合做决策。'},
+  '射手座':{icon:'♐',date:'11.23-12.21',fortune:'冒险精神旺盛，出行注意安全。'},
+  '摩羯座':{icon:'♑',date:'12.22-1.19',fortune:'事业运佳，工作效率高。'},
+  '水瓶座':{icon:'♒',date:'1.20-2.18',fortune:'创新思维活跃，灵感不断。'},
+  '双鱼座':{icon:'♓',date:'2.19-3.20',fortune:'艺术灵感丰富，适合创作。'}
 };

 function getUserZodiac() { return window.userZodiac || '射手座'; }
@@ -106,8 +200,8 @@ function updateZodiacDisplay() {
  lastZodiac = name;
  var el = document.getElementById('zodiac');
  if (!el) return;
-  var fortune = fortunes[name] || '运势平稳，保持平常心。';
-  el.innerHTML = '✨ ' + name + '运势<br><small style="opacity:0.7">' + fortune + '</small>';
+  var z = zodiacData[name] || {icon:'✨',date:'',fortune:'运势平稳，保持平常心。'};
+  el.innerHTML = z.icon + ' ' + name + '运势 <span style="opacity:0.4;font-size:12px">' + z.date + '</span><br><span style="opacity:0.6;font-size:12px">' + z.fortune + '</span>';
 }

 function updateTime() {