134 lines
5.7 KiB
HTML
134 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; }
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: #000;
|
|
}
|
|
|
|
#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;
|
|
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);
|
|
text-align: right;
|
|
min-width: 300px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
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; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{{BACKGROUND}}
|
|
|
|
<div id="info">
|
|
<div class="time" id="time">00:00</div>
|
|
<div class="date" id="date">1月1日 周一</div>
|
|
<div class="weather-section">
|
|
<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="daily-forecast" id="dailyForecast"></div>
|
|
</div>
|
|
<div class="zodiac" id="zodiac">✨ 射手座运势</div>
|
|
</div>
|
|
|
|
<script>
|
|
let lastTimeStr = '';
|
|
let lastDateStr = '';
|
|
let lastZodiac = '';
|
|
|
|
window.updateWeatherFromGo = function(data) {
|
|
if (typeof data === 'string') data = JSON.parse(data);
|
|
var el = document.getElementById('currentWeather');
|
|
if (el && data.current) el.textContent = data.current;
|
|
var fel = document.getElementById('hourlyForecast');
|
|
if (fel) {
|
|
if (data.hourly && data.hourly.length > 0) {
|
|
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>'; }
|
|
}
|
|
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>';
|
|
}).join('');
|
|
} else { del.innerHTML = '<div style="font-size:11px;opacity:0.5">暂无数据</div>'; }
|
|
}
|
|
};
|
|
|
|
var fortunes = {
|
|
'白羊座':'今日运势旺盛，适合开展新计划。','金牛座':'财运不错，但需注意健康。',
|
|
'双子座':'人际关系活跃，社交运势佳。','巨蟹座':'情绪敏感，适合独处思考。',
|
|
'狮子座':'自信爆棚，工作表现突出。','处女座':'细节决定成败，专注当下。',
|
|
'天秤座':'感情运佳，单身者有机会。','天蝎座':'直觉敏锐，适合做决策。',
|
|
'射手座':'冒险精神旺盛，出行注意安全。','摩羯座':'事业运佳，工作效率高。',
|
|
'水瓶座':'创新思维活跃，灵感不断。','双鱼座':'艺术灵感丰富，适合创作。'
|
|
};
|
|
|
|
function getUserZodiac() { return window.userZodiac || '射手座'; }
|
|
|
|
function updateZodiacDisplay() {
|
|
var name = getUserZodiac();
|
|
if (name === lastZodiac) return;
|
|
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>';
|
|
}
|
|
|
|
function updateTime() {
|
|
var now = new Date();
|
|
var hh = String(now.getHours()).padStart(2, '0');
|
|
var mm = String(now.getMinutes()).padStart(2, '0');
|
|
var month = now.getMonth() + 1;
|
|
var day = now.getDate();
|
|
var week = ['周日','周一','周二','周三','周四','周五','周六'][now.getDay()];
|
|
var timeStr = hh + ':' + mm;
|
|
var dateStr = month + '月' + day + '日 ' + week;
|
|
var timeEl = document.getElementById('time');
|
|
var dateEl = document.getElementById('date');
|
|
if (timeEl && timeStr !== lastTimeStr) { timeEl.textContent = timeStr; lastTimeStr = timeStr; }
|
|
if (dateEl && dateStr !== lastDateStr) { dateEl.textContent = dateStr; lastDateStr = dateStr; }
|
|
updateZodiacDisplay();
|
|
}
|
|
|
|
updateTime();
|
|
setInterval(updateTime, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|