<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>每日60秒读懂世界</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  body {
    background: #f8f9fa;
    color: #222;
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background 0.3s, color 0.3s;
  }

  body.dark {
    background: #121212;
    color: #eee;
  }

  .header {
    margin: 20px 0;
    text-align: center;
  }

  .title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  #date {
    font-size: 15px;
    color: #666;
  }

  body.dark #date {
    color: #aaa;
  }

  .toolbar {
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
  }

  button {
    padding: 8px 14px;
    border: none;
    border-radius: 12px;
    background: #007bff;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }

  button:hover {
    background: #0066cc;
  }

  #darkBtn {
    background: #6c757d;
  }

  #darkBtn:hover {
    background: #5a6268;
  }

  .img-box {
    position: relative;
    width: 100%;
    max-width: 500px;
  }

  #newsImg {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    display: none;
  }

  .loading {
    text-align: center;
    padding: 40px 20px;
    font-size: 16px;
    color: #666;
  }

  body.dark .loading {
    color: #aaa;
  }
</style>
</head>

<body>
<div class="header">
  <div class="title">📰 每日60秒读懂世界</div>
  <div id="date"></div>
</div>

<div class="toolbar">
  <button onclick="loadNews()">🔄 刷新图片</button>
  <button id="darkBtn" onclick="toggleDark()">🌙 深色模式</button>
</div>

<div class="img-box">
  <div class="loading" id="tip">正在加载今日新闻...</div>
  <img id="newsImg">
</div>

<script>
  const api = "https://api.lolimi.cn/API/60s/daily_news";
  const img = document.getElementById("newsImg");
  const tip = document.getElementById("tip");
  const dateEl = document.getElementById("date");

  // 显示当前日期
  function showDate() {
    const now = new Date();
    dateEl.innerText = now.toLocaleDateString('zh-CN', {
      year: 'numeric', month: 'long', day: 'numeric', weekday: 'long'
    });
  }

  // 加载图片
  function loadNews() {
    tip.style.display = "block";
    img.style.display = "none";
    img.src = api + "?t=" + new Date().getTime(); // 防缓存
  }

  // 图片加载完成
  img.onload = function () {
    tip.style.display = "none";
    img.style.display = "block";
  };

  img.onerror = function () {
    tip.innerText = "加载失败，请点击刷新重试";
  };

  // 深色模式
  function toggleDark() {
    document.body.classList.toggle("dark");
  }

  // 自动每天 00:01 刷新一次
  function autoRefresh() {
    const now = new Date();
    const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 1, 5);
    const delay = next - now;
    setTimeout(() => {
      loadNews();
      setInterval(loadNews, 24 * 60 * 60 * 1000);
    }, delay);
  }

  // 初始化
  showDate();
  loadNews();
  autoRefresh();
</script>
</body>
</html>