halo-theme-pix/embed-code/page/news-2026.html

<div class="tab-container" style="width: 100%; max-width: 1200px; margin: 30px auto 0;">
  <div class="tab-nav" style="display: flex; border-bottom: 1px solid #a7f3d0; margin-bottom: 15px;">
    <div class="tab-nav-item active" data-tab="tab1"
      style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #f0fdf4; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
      黄黄日历</div>
    <div class="tab-nav-item" data-tab="tab2"
      style="flex: 1; padding: 8px 0; cursor: pointer; background-color: #ffffff; border: 1px solid #a7f3d0; border-bottom: none; border-radius: 8px 8px 0 0; font-weight: 500; text-align: center; color: #065f46; transition: all 0.3s ease-in-out;">
      近日快讯</div>
  </div>

  <div class="tab-content" style="width: 100%; height: auto; position: relative;">
    <div class="tab-panel active" id="tab1" style="display: block; width: 100%; height: auto;">
      <div style="width: 100%; height: auto; position: relative; overflow: hidden;">
        <div id="calendar-img-container-2026" style="width: 100%; height: auto; position: relative;">
          <div id="calendar-2026-global-blur"></div>
          <div id="calendar-2026-intro">
            <div id="calendar-2026-intro-mask"></div>
            <img id="calendar-2026-intro-img" src="/upload/2026-0.jpg">
          </div>
          <img id="calendar-2026-month"
            style="width:100%;height:auto;position:absolute;top:0;left:0;object-fit:contain;opacity:0;transition:opacity 1s ease-in-out;z-index:1;pointer-events:none;">
          <a id="calendar-2026-link" href="/calendar"></a>
        </div>
      </div>

      <style>
        #calendar-2026-global-blur {
          position: fixed;
          inset: 0;
          background: rgba(255, 255, 255, .35);
          backdrop-filter: blur(16px);
          z-index: 9997;
          opacity: 1;
          transition: opacity .8s ease;
          pointer-events: none;
        }

        #calendar-2026-intro {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          z-index: 9999;
          pointer-events: none;
        }

        #calendar-2026-intro-mask {
          position: absolute;
          inset: 0;
          background: rgba(255, 255, 255, .25);
          backdrop-filter: blur(18px);
        }

        #calendar-2026-intro-img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: auto;
          opacity: .25;
          transform: scale(.50);
          transition: opacity .9s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
        }

        #calendar-2026-link {
          position: absolute;
          inset: 0;
          z-index: 5;
          pointer-events: auto;
          text-decoration: none;
        }

        .tab-nav-item:hover:not(.active) {
          background-color: #dcfce7;
          border-color: #86efac;
          color: #047857;
        }

        .tab-nav-item.active {
          background-color: #4ADE80 !important;
          color: #ffffff !important;
          border-color: #4ADE80 !important;
        }
      </style>

      <script>
        function initializeCalendar2026() {
          const container = document.getElementById('calendar-img-container-2026');
          if (!container) return;

          const intro = document.getElementById("calendar-2026-intro");
          const introImg = document.getElementById("calendar-2026-intro-img");
          const globalBlur = document.getElementById("calendar-2026-global-blur");
          const monthImg = document.getElementById('calendar-2026-month');

          const month = new Date().getMonth() + 1;
          monthImg.src = `/upload/2026-${month}.jpg`;

          container.style.height = "100vh";

          const setHeight = img => {
            if (img.complete)
              container.style.height = img.offsetHeight + 'px';
            else
              img.onload = () => container.style.height = img.offsetHeight + 'px';
          };

          const smoothScrollToContainer = () => {
            const rect = container.getBoundingClientRect();
            const target =
              window.scrollY +
              rect.top +
              rect.height / 2 -
              window.innerHeight / 2;
            $('html, body').animate({ scrollTop: target }, 800);
          };

          const init = async () => {
            await new Promise(r =>
              monthImg.complete ? r() : monthImg.onload = r
            );

            setHeight(monthImg);

            introImg.style.opacity = "1";
            introImg.style.transform = "scale(1)";

            smoothScrollToContainer();

            setTimeout(() => {
              intro.style.transition = "opacity .8s ease";
              intro.style.opacity = 0;

              globalBlur.style.opacity = 0;

              setTimeout(() => {
                intro.remove();
                globalBlur.remove();
              }, 800);

              monthImg.style.opacity = 1;
              monthImg.style.zIndex = 3;
              setHeight(monthImg);

            }, 1500);
          };

          init();
        }

        document.addEventListener("DOMContentLoaded", initializeCalendar2026);
        document.addEventListener("pjax:complete", initializeCalendar2026);
      </script>
    </div>

    <div class="tab-panel" id="tab2" style="display: none; width: 100%; height: auto;">
      <iframe src="https://60s.lylme.com/" width="100%" height="800px"></iframe>
    </div>
  </div>
</div>

<script>
  function initTabSwitch() {
    const navItems = document.querySelectorAll('.tab-nav-item');
    const panels = document.querySelectorAll('.tab-panel');

    navItems.forEach(item => {
      item.addEventListener('click', function () {
        navItems.forEach(nav => nav.classList.remove('active'));
        this.classList.add('active');

        const targetTab = this.dataset.tab;
        panels.forEach(panel => {
          panel.style.display = 'none';
          panel.classList.remove('active');
        });

        const targetPanel = document.getElementById(targetTab);
        targetPanel.style.display = 'block';
        targetPanel.classList.add('active');
      });
    });
  }

  document.addEventListener('DOMContentLoaded', initTabSwitch);
  document.addEventListener('pjax:complete', initTabSwitch);
</script>