wuyi
/
junma-show


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>离线模式 - Junma Show</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      color: #fff;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .container {
      text-align: center;
      max-width: 500px;
    }

    .icon {
      width: 120px;
      height: 120px;
      margin: 0 auto 30px;
      background: rgba(16, 185, 129, 0.1);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon svg {
      width: 60px;
      height: 60px;
      color: #10b981;
    }

    h1 {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 16px;
      color: #fff;
    }

    p {
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 30px;
    }

    .features {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 16px;
      padding: 24px;
      margin: 30px 0;
      text-align: left;
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 16px;
    }

    .feature-item:last-child {
      margin-bottom: 0;
    }

    .feature-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      color: #10b981;
    }

    .feature-text {
      flex: 1;
      font-size: 14px;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.8);
    }

    .btn {
      display: inline-block;
      padding: 12px 32px;
      background: #10b981;
      color: #fff;
      text-decoration: none;
      border-radius: 12px;
      font-weight: 600;
      transition: all 0.3s;
      border: none;
      cursor: pointer;
      font-size: 16px;
    }

    .btn:hover {
      background: #059669;
      transform: translateY(-2px);
      box-shadow: 0 8px 16px rgba(16, 185, 129, 0.3);
    }

    @media (max-width: 768px) {
      h1 {
        font-size: 24px;
      }

      p {
        font-size: 14px;
      }

      .icon {
        width: 100px;
        height: 100px;
        margin-bottom: 24px;
      }

      .icon svg {
        width: 50px;
        height: 50px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="icon">
      <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"/>
      </svg>
    </div>

    <h1>您当前处于离线状态</h1>
    <p>看起来您的设备未连接到互联网。请检查网络连接后重试。</p>

    <div class="features">
      <div class="feature-item">
        <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        <div class="feature-text">
          <strong>已缓存的内容</strong>可以离线访问
        </div>
      </div>
      <div class="feature-item">
        <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        <div class="feature-text">
          恢复网络连接后，应用将<strong>自动同步</strong>
        </div>
      </div>
      <div class="feature-item">
        <svg class="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
        </svg>
        <div class="feature-text">
          您的浏览记录和设置已<strong>安全保存</strong>
        </div>
      </div>
    </div>

    <button class="btn" onclick="window.location.reload()">
      重新连接
    </button>
  </div>

  <script>
    // 每 5 秒检查一次网络连接
    setInterval(() => {
      if (navigator.onLine) {
        window.location.reload();
      }
    }, 5000);

    // 监听网络状态变化
    window.addEventListener('online', () => {
      window.location.reload();
    });
  </script>
</body>
</html>