换新域名了分享个页面跳转单页

木头

2年前

随记

用了挺久的5杂net，虽然也挺喜欢的，不过感觉还是回归com吧。

可以cname或者nginx跳转的，不过显得有点突兀，免得说被盗了，虽然一万年没更新，也没人看。

~~写了个~~指示ChatGPT写了个域名跳转单页。分享一下，感觉改改做个备案单页也不错。

来吧展示：

<!DOCTYPE html>
<html>
  <head>
    <title>趣人小站迁移通知</title>
    <meta charset="utf-8" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #66a9c9;
      }
      h1 {
        color: #d8e3e7;
        font-size: 48px;
        text-align: center;
        margin-bottom: 0;
      }
      h2 {
        color: #d8e3e7;
        font-size: 32px;
        text-align: center;
        margin-bottom: 0;
      }
      #countdown {
        color: #d8e3e7;
        font-size: 24px;
        margin-top: 20px;
      }
      #countdown-message {
        text-align: center;
      }
      #bubble {
        position: fixed;
        bottom: -30px;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }
    </style>
  </head>
  <body>
    <h1>本博客已经启用新域名啦</h1>
    <h1><a href="https://www.boilog.com">www.boilog.com</a></h1>
    <h2>虽然做了个跳转页面显得很假……</h2>

    <div id="countdown">
      <div id="countdown-message"></div>
    </div>
    <div id="bubble"></div>
    <script>
      // Countdown
      let timeleft = 10;
      const countdownMessageEl = document.getElementById("countdown-message");
      const countdownTimer = setInterval(() => {
        if (timeleft <= 0) {
          clearInterval(countdownTimer);
          location.href = "https://www.boilog.com";
        }
        countdownMessageEl.innerHTML = `页面将在 ${timeleft} 秒后自动跳转`;
        timeleft -= 1;
      }, 1000);

      // Bubbles
      const bubbleEl = document.getElementById("bubble");
      const colors = ["#ffffff", "#c7f0db", "#ffe8d6", "#b5d9ff", "#f0c2c7"];
      const minSize = 30;
      const maxSize = 80;
      const minDuration = 5;
      const maxDuration = 15;
      const numBubbles = 30;
      for (let i = 0; i < numBubbles; i++) {
        const bubble = document.createElement("div");
        const size = Math.floor(Math.random() * (maxSize - minSize + 1)) + minSize;
        const duration = Math.floor(
          Math.random() * (maxDuration - minDuration + 1)
        ) + minDuration;
        bubble.style.width = `${size}px`;
        bubble.style.height = `${size}px`;
        bubble.style.bottom = `-${size}px`;
        bubble.style.left = `${Math.random() * 100}%`;
        bubble.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
        bubble.style.opacity = "0.5";
        bubble.style.position = "absolute";
        bubble.style.borderRadius = "50%";
        bubble.style.pointerEvents = "none";
        bubble.style.animation = `bubbleRise ${duration}s ease-in-out infinite`;
        bubbleEl.appendChild(bubble);
      }
    </script>
    <style>
      @keyframes bubbleRise {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(-200vh);
        }
      }
    </style>
  </body>
</html>