Clock Page Source Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Animated Homescreen Clock</title>
<style>
  body {
    margin: 0;
    background-color: #F5ECC2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: monospace;
    color: #837E31;
    box-sizing: border-box;
    padding: 0 10px;
  }
  #gif-container {
    font-size: 3rem;
    min-height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #time-gif {
    width: 100%;
    max-width: min(90vw, 650px);
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
  }
  #loading-text {
    position: absolute;
    font-size: 3rem;
    pointer-events: none;
  }
  #phrase {
    margin-top: 1rem;
    font-size: 1.5rem;
    color: #837E31;
    text-align: center;
    min-height: 2rem;
  }
  #bottom-link {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-family: monospace;
    font-size: 1.2rem;
    color: #CA92A8;
    text-decoration: none;
  }
</style>
</head>
<body>

<div id="gif-container">
  <span id="loading-text">...</span>
  <img id="time-gif" src="" alt="Time GIF" />
</div>

<div id="phrase"></div>

<a id="bottom-link" href="https://emyue.me" target="_blank" rel="noopener noreferrer">emyue.me</a>

<script>
  function setDateText() {
    const dateEl = document.getElementById('phrase');
    const now = new Date();
    const options = {
      weekday: 'long',
      month: 'short',
      day: 'numeric',
      year: 'numeric'
    };
    const formatted = now.toLocaleDateString('en-US', options);
    dateEl.textContent = formatted;
  }

  function formatTime(date) {
    let h = date.getHours();
    const m = date.getMinutes();
    // convert to 12-hour with 12 instead of 0
    h = h % 12;
    if (h === 0) h = 12;
    const HH = String(h).padStart(2, '0');
    const MM = String(m).padStart(2, '0');
    return HH + MM;
  }

  function loadGif() {
    const img = document.getElementById('time-gif');
    const loadingText = document.getElementById('loading-text');
    const now = new Date();
    const timeString = formatTime(now);
    const gifSrc = `assets/${timeString}.gif`;
    const sorrySrc = `assets/sorry.gif`;

    console.log('Attempting to preload:', gifSrc);

    // Show loading only if no image loaded yet
    if (!img.src || img.src.trim() === '') {
      loadingText.style.display = 'inline';
    } else {
      loadingText.style.display = 'none';
    }

    // Preload target gif
    const tempImg = new Image();
    tempImg.onload = () => {
      console.log('Preloaded gif:', gifSrc);
      img.src = gifSrc + '?t=' + Date.now();
      loadingText.style.display = 'none';
    };
    tempImg.onerror = () => {
      console.warn('Failed to preload:', gifSrc, '— trying sorry.gif');

      const fallback = new Image();
      fallback.onload = () => {
        console.log('Loaded sorry.gif fallback.');
        img.src = sorrySrc + '?t=' + Date.now();
        loadingText.style.display = 'none';
      };
      fallback.onerror = () => {
        console.error('Failed to load sorry.gif fallback.');
        loadingText.textContent = 'Sorry image not found.';
      };
      fallback.src = sorrySrc + '?t=' + Date.now();
    };
    tempImg.src = gifSrc + '?t=' + Date.now();
  }

  function updateTimeAndGif() {
    loadGif();
  }

  window.onload = () => {
    setDateText();
    updateTimeAndGif();

    function scheduleNext() {
      const now = new Date();
      const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
      setTimeout(() => {
        updateTimeAndGif();
        scheduleNext();
      }, delay);
    }

    scheduleNext();
  };
</script>

</body>
</html>

<html lang="en">
<head>
<meta charset="UTF-8" />
...
</html>