Add countdown overlay and audio controls

2026-07-17 04:55:21 +08:00
parent 0c45291c6a
commit 6de1694da2
4 changed files with 544 additions and 0 deletions
@@ -0,0 +1,183 @@
+(() => {
+  const SHOW_AUDIO_CONTROL = true
+  const AUDIO_SOURCE = '/Locil%20Forecast%20-%20Elevator.mp3'
+
+  const style = document.createElement('style')
+  style.textContent = `
+    #mclive-floating-controls {
+      --mclive-control-night: #041117;
+      --mclive-control-ice: #d7f1e8;
+      --mclive-control-mist: #8fafb2;
+      --mclive-control-gold: #c6a15b;
+      --mclive-control-online: #72aa86;
+      --mclive-control-line: rgba(166, 209, 203, 0.22);
+      position: fixed;
+      z-index: 2147483647;
+      top: 94px;
+      right: clamp(20px, 3vw, 44px);
+      width: 190px;
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      border: 1px solid var(--mclive-control-line);
+      background: rgba(4, 17, 23, 0.92);
+      box-shadow: 0 18px 52px rgba(0, 0, 0, 0.3);
+      -webkit-backdrop-filter: blur(14px);
+      backdrop-filter: blur(14px);
+      pointer-events: none;
+    }
+
+    #mclive-floating-controls:has(.mclive-countdown-restore:not(.is-visible)) .mclive-audio-control {
+      border-bottom: 0;
+    }
+
+    .mclive-floating-control {
+      width: 100%;
+      min-height: 46px;
+      padding: 0 13px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: 9px;
+      border: 0;
+      border-bottom: 1px solid var(--mclive-control-line);
+      color: var(--mclive-control-ice);
+      background: transparent;
+      cursor: pointer;
+      font-family: 'IBM Plex Mono', ui-monospace, monospace;
+      font-size: 8px;
+      letter-spacing: 0.14em;
+      text-transform: uppercase;
+      pointer-events: auto;
+    }
+
+    .mclive-floating-control:hover {
+      background: rgba(198, 161, 91, 0.08);
+    }
+
+    .mclive-floating-control:focus-visible {
+      outline: 2px solid var(--mclive-control-gold);
+      outline-offset: 4px;
+    }
+
+    .mclive-floating-control svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+    }
+
+    .mclive-control-status {
+      width: 6px;
+      height: 6px;
+      flex: 0 0 auto;
+      background: var(--mclive-control-mist);
+      box-shadow: 0 0 0 transparent;
+      transition: background 0.2s ease, box-shadow 0.2s ease;
+    }
+
+    .mclive-audio-control.is-playing .mclive-control-status {
+      background: var(--mclive-control-online);
+      box-shadow: 0 0 10px rgba(114, 170, 134, 0.7);
+    }
+
+    .mclive-control-name {
+      min-width: 0;
+      flex: 1;
+      color: var(--mclive-control-mist);
+      text-align: left;
+    }
+
+    .mclive-control-value {
+      color: var(--mclive-control-ice);
+      font-variant-numeric: tabular-nums;
+      text-align: right;
+    }
+
+    .mclive-audio-icon {
+      width: 14px;
+      height: 14px;
+      display: grid;
+      place-items: center;
+      color: var(--mclive-control-gold);
+    }
+
+    @media (max-width: 620px) {
+      #mclive-floating-controls {
+        top: auto;
+        right: 16px;
+        bottom: 16px;
+        width: 168px;
+      }
+
+      .mclive-floating-control {
+        min-height: 44px;
+        padding: 0 11px;
+      }
+    }
+  `
+
+  let controls = document.getElementById('mclive-floating-controls')
+  if (!controls) {
+    controls = document.createElement('div')
+    controls.id = 'mclive-floating-controls'
+    document.body.appendChild(controls)
+  }
+
+  const audioButton = document.createElement('button')
+  audioButton.className = 'mclive-floating-control mclive-audio-control'
+  audioButton.type = 'button'
+  audioButton.hidden = !SHOW_AUDIO_CONTROL
+  audioButton.setAttribute('aria-label', '播放背景音乐')
+  audioButton.innerHTML = `
+    <span class="mclive-control-status" aria-hidden="true"></span>
+    <span class="mclive-control-name">AUDIO</span>
+    <span class="mclive-control-value mclive-audio-label">OFF</span>
+    <span class="mclive-audio-icon" aria-hidden="true"></span>
+  `
+  controls.appendChild(audioButton)
+  document.head.appendChild(style)
+
+  const audioIcon = audioButton.querySelector('.mclive-audio-icon')
+  const audioLabel = audioButton.querySelector('.mclive-audio-label')
+  const audio = new Audio(AUDIO_SOURCE)
+  audio.loop = true
+  audio.preload = 'auto'
+
+  const playIcon = '<svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>'
+  const pauseIcon = '<svg viewBox="0 0 24 24"><path d="M6 5h4v14H6zm8 0h4v14h-4z"/></svg>'
+
+  function updateAudioControl() {
+    const playing = !audio.paused
+    audioIcon.innerHTML = playing ? pauseIcon : playIcon
+    audioLabel.textContent = playing ? 'ON' : 'OFF'
+    audioButton.classList.toggle('is-playing', playing)
+    audioButton.setAttribute('aria-label', playing ? '暂停背景音乐' : '播放背景音乐')
+  }
+
+  async function startAudio() {
+    if (!audio.paused) return
+    try {
+      await audio.play()
+    } catch {
+      // Browsers may reject playback until a qualifying user gesture occurs.
+    }
+    updateAudioControl()
+  }
+
+  function handleFirstInteraction(event) {
+    if (audioButton.contains(event.target)) return
+    startAudio()
+  }
+
+  audioButton.addEventListener('click', async () => {
+    if (audio.paused) await startAudio()
+    else audio.pause()
+    updateAudioControl()
+  })
+  audio.addEventListener('play', updateAudioControl)
+  audio.addEventListener('pause', updateAudioControl)
+  document.addEventListener('pointerdown', handleFirstInteraction, { passive: true })
+  document.addEventListener('touchstart', handleFirstInteraction, { passive: true })
+  document.addEventListener('keydown', handleFirstInteraction)
+  updateAudioControl()
+})()