April Fool's Day spoof code: System error countdown with holiday egg animation

There is still a week before April Fool's Day, and as a webmaster, we can add some interesting interactive effects to the webpage through code. For example, a piece of JavaScript code shared below can help you create a realistic system error screen on a web page and display an Easter egg animation after the countdown is over. Let your website bring surprises and fun to users on April Fools' Day!

The original text can be viewed online:April Fools' Day spoof code-Zhang Apple Blog

You can use it by introducing the link below through script on the web page.

<script src="/web/xtcw/"></script>

Implementation steps

1. Create a "System Error" mask layer

First, create a full-screen mask layer to simulate the effect of system errors. The mask layer includes warning icons, error messages, countdowns, and progress bars.

const overlay = ('div');
  = 'shutdownOverlay';
  = 'none';
  = `
   <div class="bsod">
     <div class="warning">
       <div class="warning-icon">⚠️</div>
       <h1>System Error</h1>
       <p>Incompatible hardware driver detected (code: 0xAPRIL_FOOL)</p>
       <div class="countdown">00:05</div>
     </div>
     <div class="progress-bar"></div>
   </div>
 `;

2. Add style animation

To make the mask layer look more realistic, add styles and define some animation effects, such as the impulse animation of the warning icon and the filling effect of the progress bar.

...The specific code is included below, so I won't write it...

Three, complete JS code

(function() {
     // Create system error mask layer
     const overlay = ('div');
      = 'shutdownOverlay';
      = 'none';
      = `
       <div class="bsod">
         <div class="warning">
           <div class="warning-icon">⚠️</div>
           <h1>System Error</h1>
           <p>Incompatible hardware driver detected (code: 0xAPRIL_FOOL)</p>
           <div class="countdown">00:05</div>
         </div>
         <div class="progress-bar"></div>
       </div>
     `;
     (, {
       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'
     });
     (overlay);
  
     // Create style
     const style = ('style');
      = `
       @keyframes exploit {
         0% { transform: scale(0); opacity: 1; }
         100% { transform: translate(${()*200-100}px, ${()*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); }
       }
     `;
     (style);
  
     // Countdown logic
     let seconds = 5;
     const countdownElement = ('.countdown');
     const progressBar = ('.progress-bar');
  
     function formatTime(s) {
       return `00:${().padStart(2, '0')}`;
     }
  
     function startCountdown() {
        = 'flex';
      
       const timer = setInterval(() => {
         seconds--;
          = formatTime(seconds);
          = `${(5 - seconds) * 20}%`;
        
         if(seconds <= 0) {
           clearInterval(timer);
           showEasterEgg();
         }
       }, 1000);
     }
  
     // Easter egg animation
     function showEasterEgg() {
        = 'none';
      
       // Create an animation container
       const animationContainer = ('div');
       (, {
         position: 'fixed',
         top: 0,
         left: 0,
         width: '100%',
         height: '100%',
         pointerEvents: 'none',
         zIndex: 100000
       });
       (animationContainer);
  
       // Add holiday text
       const text = ('div');
        = '🎉 Happy April Fool's Day!  🎉';
       (, {
         position: 'absolute',
         top: '50%',
         left: '50%',
         transform: 'translate(-50%, -50%)',
         fontSize: '3.5rem',
         animation: 'float 2s ease-in-out infinite'
       });
       (text);
  
       // Add fireworks special effects
       const colors = ['🎈', '🎊', '🎁', '✨', '💫'];
       for(let i=0; i<80; i++) {
         const emoji = ('div');
          = colors[(()*)];
         (, {
           position: 'absolute',
           left: `${()*100}%`,
           top: `${()*100}%`,
           fontSize: `${25 + ()*30}px`,
           animation: `explode ${1.5 + ()*2}s ease-out both`
         });
         (emoji);
       }
  
       // Disappears at the same time after 3 seconds
       setTimeout(() => {
         ();
       }, 3000);
     }
     // start up
  
     startCountdown()
   })();