查看“︁模板:生物联赛倒计时”︁的源代码

<noinclude>这是用于显示距离下一届全国生物学奥林匹克竞赛联赛天数的模板。使用{{Countdown}}模板计算天数。</noinclude>
<includeonly>
<!-- 定义未来25年（2025-2050）全国生物联赛日期（五月第二个星期日） -->
{{#arraydefine:bio_dates
  | 2025-05-11, 2026-05-10, 2027-05-09, 2028-05-14, 2029-05-13, 2030-05-12
  | 2031-05-11, 2032-05-09, 2033-05-08, 2034-05-14, 2035-05-13, 2036-05-11
  | 2037-05-10, 2038-05-09, 2039-05-08, 2040-05-13, 2041-05-12, 2042-05-11
  | 2043-05-10, 2044-05-08, 2045-05-14, 2046-05-13, 2047-05-12, 2048-05-10
  | 2049-05-09, 2050-05-08
}}

<!-- 获取当前年份 (YYYY) -->
{{#vardefine:current_year|{{#time:Y}}}}

<!-- 初始化目标日期变量 -->
{{#vardefine:target_date|}}

<!-- 循环查找下一个联赛日期 -->
{{#forargs:
  | arg | val | @@@@ | <!-- 占位符，实际不需要参数名 -->
  | {{#arrayindex:date_candidate|bio_dates|{{#var:loopindex}}}}
  {{#if: {{#var:target_date}} | | <!-- 如果还没找到target_date，则继续检查 -->
      {{#ifexpr:
        ( {{#time:U|{{#var:date_candidate}}}} >= {{#time:U}} ) OR <!-- 候选日期是未来或今天 -->
        ( {{#time:U|{{#var:date_candidate}}|Y}} > {{#var:current_year}} ) <!-- 或者候选日期的年份已超过当前年（说明当前年联赛已过） -->
        | {{#vardefine:target_date|{{#var:date_candidate}}}} <!-- 找到！赋值给target_date -->
      }}
  }}
}}

<!-- 确保如果循环结束还没找到（理论上应该不会，但保险起见），使用数组最后一个日期 -->
{{#if: {{#var:target_date}} | | {{#vardefine:target_date|{{#arrayindex:last_date|bio_dates|-1}}}} }}

<!-- 获取目标日期的年份用于显示 -->
{{#vardefine:target_year|{{#time:Y|{{#var:target_date}}}}}}

<!-- 华丽倒计时显示框 -->
<div style="
  position:relative;
  width:320px; max-width:90%;
  margin:2em auto;
  padding:2.5em 1.5em 2em;
  border-radius:18px;
  background: linear-gradient(135deg, #0b1928 0%, #1a3a4a 50%, #2c5d73 100%);
  color:#fff;
  font-family:'Segoe UI', Arial, Helvetica, sans-serif;
  text-align:center;
  box-shadow:
    0 0 15px #00f5ff,
    0 0 30px #00f5ff44,
    inset 0 0 8px #00000088,
    inset 0 0 15px rgba(0, 245, 255, 0.2);
  overflow:hidden;
  z-index:0;
">
  <!-- 扫描光 (更柔和) -->
  <div style="
    position:absolute; top:-50%; left:-50%;
    width:200%; height:200%;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 245, 255, 0.05) 50%, transparent 100%);
    animation: scan 8s linear infinite;
    pointer-events:none; z-index:-1;
  "></div>

  <!-- 动态粒子背景 (可选，增加科技感) -->
  <div style="
    position:absolute; top:0; left:0; width:100%; height:100%;
    background-image: radial-gradient(rgba(0, 245, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events:none; z-index:-1;
  "></div>

  <style>
    @keyframes scan {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes pulse {
      0%, 100% { transform: scale(1); text-shadow: 0 0 5px #fff, 0 0 10px #00f5ff; }
      50% { transform: scale(1.05); text-shadow: 0 0 15px #fff, 0 0 20px #00f5ff, 0 0 30px #00f5ff; }
    }
    .countdown-number {
      animation: pulse 3s ease-in-out infinite;
    }
  </style>

  <!-- 标题 -->
  <div style="
    font-size:24px; font-weight:700; letter-spacing:1.5px; margin-bottom:1em;
    color: #a8fff6; /* 更亮的青蓝色 */
    text-shadow: 0 0 5px rgba(0, 245, 255, 0.7);
  ">
    全国生物联赛倒计时
  </div>

  <!-- 年份显示 -->
  <div style="
    font-size:18px; font-weight:600; margin-bottom:0.5em;
    color: #c7fcff;
  ">
    距离 {{#var:target_year}} 年全国生物联赛还有
  </div>

  <!-- 倒计时数字 (核心) -->
  <div style="
    font-size:48px; font-weight:900;
    color: #ffffff;
    padding: 0.3em 0.8em;
    border-radius: 14px;
    background: rgba(10, 25, 40, 0.6);
    display: inline-block;
    box-shadow:
      inset 0 0 10px rgba(0, 0, 0, 0.7),
      0 0 15px rgba(0, 245, 255, 0.5);
    border: 2px solid rgba(0, 245, 255, 0.4);
    margin: 0.5em 0;
    position: relative;
    z-index: 1;
  ">
    <span class="countdown-number">
      {{Countdown|{{#var:target_date}}|text=天}} <!-- 调用核心倒计时模板 -->
    </span>
  </div>

  <!-- 底部装饰/备注 -->
  <div style="
    font-size:12px; margin-top:1.5em; opacity:0.8;
    color: #a0e4f0;
  ">
    日期依据：每年五月第二个星期日
  </div>
</div>
</includeonly>