xtu_mall/public/exam-clock-20260630/index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>考试投屏时钟</title>
  <style>
    :root{
      --black:#050507;
      --white:#fff;
      --blue:#2997ff;
      --blue2:#0071e3;
      --text:rgba(255,255,255,.96);
      --sub:rgba(255,255,255,.68);
      --muted:rgba(255,255,255,.48);
      --glass:rgba(18,18,22,.56);
      --glass2:rgba(255,255,255,.08);
      --line:rgba(255,255,255,.14);
      --ok:#30d158;
      --warn:#ffd60a;
      --danger:#ff453a;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      min-height:100%;
      overflow:hidden;
      color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
      background:#000;
    }
    body:before{
      content:"";
      position:fixed;inset:0;
      background:
        radial-gradient(circle at 50% -12%, rgba(41,151,255,.62), transparent 34%),
        radial-gradient(circle at 12% 30%, rgba(120,119,198,.30), transparent 30%),
        radial-gradient(circle at 88% 72%, rgba(48,209,88,.18), transparent 30%),
        linear-gradient(180deg,#08080c 0%,#000 58%,#08080b 100%);
      z-index:-3;
    }
    body:after{
      content:"";
      position:fixed;inset:0;
      background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
      background-size:64px 64px;
      mask-image:radial-gradient(circle at center, black 0%, transparent 72%);
      z-index:-2;
      pointer-events:none;
    }
    .orb{position:fixed;border-radius:999px;filter:blur(12px);opacity:.62;z-index:-1;animation:float 10s ease-in-out infinite alternate}
    .orb.one{width:20vw;height:20vw;left:7vw;top:12vh;background:rgba(41,151,255,.24)}
    .orb.two{width:16vw;height:16vw;right:10vw;bottom:12vh;background:rgba(48,209,88,.14);animation-delay:-3s}
    @keyframes float{to{transform:translate3d(2vw,2vh,0) scale(1.08)}}

    .screen{height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(18px,3.2vw,48px);gap:clamp(14px,2vw,28px)}
    .nav,.dock{
      display:flex;align-items:center;justify-content:space-between;gap:18px;
      min-height:58px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;
      background:var(--glass);backdrop-filter:saturate(180%) blur(26px);-webkit-backdrop-filter:saturate(180%) blur(26px);
      box-shadow:0 18px 60px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.10);
    }
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .logo{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#b8ddff);color:#06101f;font-weight:800;box-shadow:0 0 34px rgba(41,151,255,.42)}
    .brand-title{font-size:clamp(15px,1.4vw,22px);font-weight:650;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .pill{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;background:var(--glass2);border:1px solid var(--line);color:var(--sub);font-size:clamp(13px,1.15vw,18px);white-space:nowrap}
    .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 20px var(--ok)}

    .hero{display:grid;place-items:center;text-align:center;min-height:0}
    .hero-inner{width:min(1500px,100%)}
    .eyebrow{margin:0 0 clamp(10px,1.4vw,22px);font-size:clamp(20px,2.25vw,40px);font-weight:520;color:var(--sub);letter-spacing:.16em;text-transform:uppercase}
    .clock-card{position:relative;margin:auto;padding:clamp(22px,4.8vw,72px) clamp(18px,5vw,82px);border-radius:clamp(28px,4vw,58px);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.18);box-shadow:0 34px 120px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(28px);overflow:hidden}
    .clock-card:before{content:"";position:absolute;inset:-2px;background:linear-gradient(115deg,transparent 0 20%,rgba(255,255,255,.20) 35%,transparent 52%);transform:translateX(-55%);animation:shine 8s ease-in-out infinite;pointer-events:none}
    @keyframes shine{55%,100%{transform:translateX(75%)}}
    .clock{position:relative;margin:0;font-family:"DIN Alternate","Arial Narrow","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-variant-numeric:tabular-nums;font-size:clamp(88px,17.2vw,268px);font-weight:700;line-height:.92;letter-spacing:.018em;word-spacing:.03em;text-shadow:0 12px 44px rgba(0,0,0,.32)}
    .seconds{display:inline;color:inherit;font-size:1em;margin-left:0;letter-spacing:inherit;vertical-align:baseline;text-shadow:inherit}
    .date{margin:clamp(16px,2vw,30px) 0 0;color:var(--sub);font-size:clamp(22px,2.6vw,46px);font-weight:500;letter-spacing:.06em}

    .timer{display:none;width:min(1160px,96%);margin:clamp(22px,3vh,44px) auto 0;padding:clamp(18px,2.6vw,34px);border-radius:32px;background:rgba(0,0,0,.38);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
    .timer-top{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;text-align:left}
    .timer-label{font-size:clamp(18px,1.8vw,32px);color:var(--sub);letter-spacing:.12em;font-weight:620}
    .remain{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-variant-numeric:tabular-nums;font-size:clamp(44px,7.2vw,116px);font-weight:850;line-height:.9;letter-spacing:-.06em}
    .progress{height:clamp(12px,1vw,18px);margin-top:22px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden;box-shadow:inset 0 1px 4px rgba(0,0,0,.4)}
    .bar{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,var(--ok),var(--blue));box-shadow:0 0 34px rgba(41,151,255,.42);transition:width .35s linear,background .3s ease}

    .dock{border-radius:28px;padding:14px 18px;color:var(--sub)}
    .help{font-size:clamp(13px,1.2vw,18px);line-height:1.65}.help b{color:#fff;font-weight:650}
    .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
    button,a.btn{appearance:none;text-decoration:none;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;border-radius:999px;padding:12px 18px;font-size:15px;line-height:1;cursor:pointer;transition:.18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
    .title-input{width:190px;max-width:32vw;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.10);color:#fff;border-radius:999px;padding:11px 16px;font-size:15px;line-height:1;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:.18s ease}
    .title-input::placeholder{color:rgba(255,255,255,.58)}
    .title-input:focus{border-color:rgba(41,151,255,.75);background:rgba(255,255,255,.16);box-shadow:0 0 0 3px rgba(41,151,255,.16), inset 0 1px 0 rgba(255,255,255,.12)}
    button.primary,a.primary{background:var(--blue2);border-color:var(--blue2);box-shadow:0 12px 36px rgba(0,113,227,.30)}
    button:hover,a.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.18)}button.primary:hover,a.primary:hover{background:#147ce5}

    body.warn .bar{background:linear-gradient(90deg,var(--warn),#ff9f0a);box-shadow:0 0 34px rgba(255,214,10,.34)}
    body.danger .bar{background:linear-gradient(90deg,var(--danger),#ff9f0a);box-shadow:0 0 38px rgba(255,69,58,.46)}
    body.danger .remain,body.danger .seconds{color:var(--danger);text-shadow:0 0 36px rgba(255,69,58,.52)}
    body.done .remain{color:var(--danger);letter-spacing:-.02em}

    @media(max-width:760px){
      body{overflow:auto}.screen{min-height:100%;height:auto}.nav,.dock{border-radius:24px;align-items:flex-start}.pill.hide-sm{display:none}.timer-top{grid-template-columns:1fr;text-align:center}.timer-label{text-align:center}.dock{display:block;text-align:center}.actions{justify-content:center;margin-top:14px}.title-input{width:100%;max-width:280px}.clock-card{border-radius:30px}.clock{font-size:clamp(78px,22vw,160px)}
    }
  </style>
</head>
<body>
  <div class="orb one"></div><div class="orb two"></div>
  <div class="screen">
    <header class="nav">
      <div class="brand"><div class="logo">考</div><div class="brand-title" id="examTitle">考试投屏时钟</div></div>
      <div style="display:flex;gap:10px;align-items:center;min-width:0">
        <div class="pill hide-sm"><span class="dot"></span><span id="statusText">北京时间 · 实时同步</span></div>
        <div class="pill" id="ampm">--</div>
      </div>
    </header>

    <main class="hero">
      <div class="hero-inner">
        <p class="eyebrow" id="pageTitle">EXAM CLOCK</p>
        <section class="clock-card">
          <p class="clock"><span id="hhmm">--:--</span>:<span class="seconds" id="ss">--</span></p>
          <div class="date" id="dateText">----</div>
        </section>
        <section class="timer" id="timerPanel">
          <div class="timer-top">
            <div class="timer-label" id="timerLabel">距离考试结束</div>
            <div class="remain" id="remainText">--:--:--</div>
          </div>
          <div class="progress"><div class="bar" id="bar"></div></div>
        </section>
      </div>
    </main>

    <footer class="dock">
      <div class="help" id="hintText">投屏建议点击 <b>全屏显示</b>；地址后加 <b>?duration=120</b> 可显示 120 分钟倒计时。</div>
      <div class="actions">
        <input class="title-input" id="titleInput" type="text" maxlength="30" placeholder="输入标题" autocomplete="off">
        <button type="button" onclick="applyTitle()">添加标题</button>
        <button class="primary" type="button" onclick="toggleFullScreen()">全屏显示</button>
        <a class="btn" href="?duration=120">120分钟倒计时</a>
        <button type="button" onclick="location.href=location.pathname">只显示时钟</button>
      </div>
    </footer>
  </div>

  <script>
    const $=(id)=>document.getElementById(id);
    const params=new URLSearchParams(location.search);
    const title=params.get('title')||'考试投屏时钟';
    const label=params.get('label')||'距离考试结束';
    const durationMin=Number(params.get('duration')||0);
    const endParam=params.get('end');
    const startTs=Date.now();
    let endTs=null;
    $('examTitle').textContent=title; document.title=title; $('timerLabel').textContent=label;
    $('titleInput').value=params.get('title')||'';
    if(params.get('title')) $('pageTitle').textContent=title; else $('pageTitle').textContent='EXAM CLOCK';
    if(endParam){const parsed=new Date(endParam.replace(' ','T')).getTime(); if(!Number.isNaN(parsed)) endTs=parsed;}
    else if(durationMin>0){endTs=startTs+durationMin*60*1000;}
    if(endTs){$('timerPanel').style.display='block';$('hintText').innerHTML='倒计时已开启；可用参数：<b>?duration=分钟&title=标题</b>，或点击全屏投放。';}
    function pad(n){return String(n).padStart(2,'0')}
    function formatRemain(ms){const total=Math.max(0,Math.ceil(ms/1000));const h=Math.floor(total/3600),m=Math.floor((total%3600)/60),s=total%60;return `${pad(h)}:${pad(m)}:${pad(s)}`}
    function tick(){
      const now=new Date(),w=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
      $('hhmm').textContent=`${pad(now.getHours())}:${pad(now.getMinutes())}`;$('ss').textContent=pad(now.getSeconds());
      $('dateText').textContent=`${now.getFullYear()}年${pad(now.getMonth()+1)}月${pad(now.getDate())}日  ${w[now.getDay()]}`;
      $('ampm').textContent=now.getHours()<12?'上午':'下午';
      if(endTs){const remain=endTs-now.getTime(),total=Math.max(1,endTs-startTs),pct=Math.max(0,Math.min(100,remain/total*100));
        $('remainText').textContent=remain<=0?'考试结束':formatRemain(remain);$('bar').style.width=pct+'%';
        document.body.classList.toggle('warn',pct<=25&&pct>10);document.body.classList.toggle('danger',pct<=10&&pct>0);document.body.classList.toggle('done',remain<=0);
        $('statusText').textContent=remain<=0?'考试已结束':'倒计时进行中';
      }
    }
    function applyTitle(){
      const value=$('titleInput').value.trim();
      const url=new URL(location.href);
      if(value) url.searchParams.set('title',value); else url.searchParams.delete('title');
      location.href=url.pathname+url.search;
    }
    $('titleInput').addEventListener('keydown',function(e){if(e.key==='Enter')applyTitle();});
    function toggleFullScreen(){if(!document.fullscreenElement)document.documentElement.requestFullscreen?.();else document.exitFullscreen?.();}
    tick();setInterval(tick,250);
  </script>
</body>
</html>