愚人节整蛊代码：“网络未连接”和“系统蓝屏”彩蛋动画

<!-- 未连接网络错误 -->
<script src="https://img.zhangpingguo.com/web/xtcw/error.js"></script>
<!-- 系统蓝屏错误 -->
<script src="https://img.zhangpingguo.com/web/xtcw/lp.js"></script>

// 张苹果博客：https://zhangpingguo.com/
(function() {
  // 创建浏览器断网样式遮罩层
  const overlay = document.createElement('div');
  overlay.id = 'networkOverlay';
  overlay.style.display = 'none';
  overlay.innerHTML = `
    <div class="container">
      <div class="earth"></div>
      <h1 class="title">你似乎未连接到 Internet</h1>
      <p class="description">错误代码: ERR_INTERNET_DISCONNECTED</p>
      <div class="retry-info">
        <span class="countdown">5</span> 秒后尝试重新连接...
      </div>
      <button class="retry-button" onclick="location.reload()">立即重试</button>
       <div class="game-info">
        想在等待时玩游戏吗? <span>启动游戏</span>
      </div>
    </div>
  `;
  Object.assign(overlay.style, {
    position: 'fixed',
    top: 0,
    left:0,
    width: '100%',
    height: '100%',
    background: '#f8f9fa',
    color: '#343a40',
    zIndex: 99999,
    fontFamily: 'system-ui, sans-serif',
    display: 'flex',
    alignItems: 'left',
    justifyContent: 'left',
    textAlign: 'left'
  });
  document.body.appendChild(overlay);

  // 创建样式
  const style = document.createElement('style');
  style.textContent = `
  @keyframes zoomFade {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
   @keyframes explode {
      0% { transform: scale(0); opacity: 1; }
      100% { transform: translate(${Math.random()*200-100}px, ${Math.random()*200-100}px) scale(3); opacity: 0; }
    }
  
    .container {
      max-width: 600px;
      padding: 2rem;
      padding-left: 10%;
    }
    .earth {
    content:url('https://img.zhangpingguo.com/web/xtcw/logo.webp');
     width: 9rem;
      margin-top: 7rem;
      margin-bottom: 2rem;
    }
    .title {
      margin-bottom: 1rem;
    }
    .description {
      font-size: 1rem;
      color: #6c757d;
      margin-bottom: 2rem;
    }
    .retry-info {
      font-size: 0.9rem;
      margin-bottom: 1.5rem;
    }
    .countdown {
      color: #dc3545;
    }
    .retry-button {
      padding: 7px 16px;
      font-size: 1.2rem;
      background: #0070C6;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 0.2s;
    }
    .retry-button:hover {
      opacity:0.9
    }
      .game-info{
       margin-top:10px;
      padding-top:10px;
      border-top:1px solid #ccc;
      }
      .game-info span{
         cursor: pointer;
         color:#0070C6
      }
  `;
  document.head.appendChild(style);

  // 倒计时逻辑
  let seconds = 5;
  const countdownElement = overlay.querySelector('.countdown');

  function startCountdown() {
    overlay.style.display = 'flex';
    
    const timer = setInterval(() => {
      seconds--;
      countdownElement.textContent = seconds;
      
      if(seconds <= 0) {
        clearInterval(timer);
        showEasterEgg();
      }
    }, 1000);
  }

  // 保留原有彩蛋动画
  function showEasterEgg() {
    overlay.style.display = 'none';
    // 创建动画容器
    const animationContainer = document.createElement('div');
    Object.assign(animationContainer.style, {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      pointerEvents: 'none',
      zIndex: 100000
    });
    document.body.appendChild(animationContainer);

   

    // 添加烟花特效
    const colors = ['🎈', '🎊', '🎁', '✨', '💫'];
    for(let i=0; i<80; i++) {
      const emoji = document.createElement('div');
      emoji.textContent = colors[Math.floor(Math.random()*colors.length)];
      Object.assign(emoji.style, {
        position: 'absolute',
        left: `${Math.random()*100}%`,
        top: `${Math.random()*100}%`,
        fontSize: `${25 + Math.random()*30}px`,
        animation: `explode ${1.5 + Math.random()*2}s ease-out both`
      });
      animationContainer.appendChild(emoji);
    }
 // 添加节日文字
 const text = document.createElement('div');
    text.innerHTML = '🎉愚人节快乐！';
    Object.assign(text.style, {
      position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
fontSize: '1.5rem',
textShadow: '0 0 20px rgba(255,255,0,0.8)',
animation: 'zoomFade 3s ease-out forwards'  
    });
    animationContainer.appendChild(text);
    // 3秒后同时消失
    setTimeout(() => {
      animationContainer.remove();
    }, 3000);
  }

  //开始
  startCountdown();
})();

// 张苹果博客：https://zhangpingguo.com/
(function() {
  // 创建系统错误遮罩层
  const overlay = document.createElement('div');
  overlay.id = 'shutdownOverlay';
  overlay.style.display = 'none';
  overlay.innerHTML = `
    <div class="bsod">
      <div class="warning">
        <div class="warning-icon">⚠️</div>
        <h1>系统严重错误</h1>
        <p>检测到不兼容的硬件驱动 (代码: 0xAPRIL_FOOL)</p>
        <div class="countdown">00:05</div>
      </div>
      <div class="progress-bar"></div>
    </div>
    
  `;
  Object.assign(overlay.style, {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    background: '#0078d4',
    color: 'white',
    zIndex: 99999,
    fontFamily: 'Segoe UI, sans-serif',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column'
  });
  document.body.appendChild(overlay);

  // 创建样式
  const style = document.createElement('style');
  style.textContent = `
    @keyframes explode {
      0% { transform: scale(0); opacity: 1; }
      100% { transform: translate(${Math.random()*200-100}px, ${Math.random()*200-100}px) scale(3); opacity: 0; }
    }
    @keyframes float {
      0%, 100% { transform: translate(-50%, -55%); }
      50% { transform: translate(-50%, -45%); }
    }
    .warning {
      text-align: center;
      margin-bottom: 2rem;
    }
    .warning-icon {
      font-size: 5rem;
      animation: pulse 1s infinite;
    }
    .progress-bar {
      width: 300px;
      height: 3px;
      background: rgba(255,255,255,0.3);
      margin-top: 2rem;
    }
    .progress-bar::after {
      content: '';
      display: block;
      width: 0;
      height: 100%;
      background: white;
      transition: width 1s linear;
    }
    @keyframes pulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
  `;
  document.head.appendChild(style);

  // 倒计时逻辑
  let seconds = 5;
  const countdownElement = overlay.querySelector('.countdown');
  const progressBar = overlay.querySelector('.progress-bar');

  function formatTime(s) {
    return `00:${s.toString().padStart(2, '0')}`;
  }

  function startCountdown() {
    overlay.style.display = 'flex';
    
    const timer = setInterval(() => {
      seconds--;
      countdownElement.textContent = formatTime(seconds);
      progressBar.style.width = `${(5 - seconds) * 20}%`;
      
      if(seconds <= 0) {
        clearInterval(timer);
        showEasterEgg();
      }
    }, 1000);
  }

  // 彩蛋动画
  function showEasterEgg() {
    overlay.style.display = 'none';
    
    // 创建动画容器
    const animationContainer = document.createElement('div');
    Object.assign(animationContainer.style, {
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      pointerEvents: 'none',
      zIndex: 100000
    });
    document.body.appendChild(animationContainer);

    // 添加节日文字
    const text = document.createElement('div');
    text.innerHTML = '🎉 愚人节快乐！🎉';
    Object.assign(text.style, {
      position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    fontSize: '2.5rem',
    fontWeight: 'bold',
    textShadow: '0 0 20px rgba(255,255,0,0.8)',
    animation: 'float 2s ease-in-out infinite'
    });
    animationContainer.appendChild(text);

    // 添加烟花特效
    const colors = ['🎈', '🎊', '🎁', '✨', '💫'];
    for(let i=0; i<80; i++) {
      const emoji = document.createElement('div');
      emoji.textContent = colors[Math.floor(Math.random()*colors.length)];
      Object.assign(emoji.style, {
        position: 'absolute',
        left: `${Math.random()*100}%`,
        top: `${Math.random()*100}%`,
        fontSize: `${25 + Math.random()*30}px`,
        animation: `explode ${1.5 + Math.random()*2}s ease-out both`
      });
      animationContainer.appendChild(emoji);
    }

    // 3秒后同时消失
    setTimeout(() => {
      animationContainer.remove();
    }, 3000);
  }
  // 启动
  startCountdown()
})();