JSFiddle - React, Tailwind, and code Playground

by quakerv

HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>KP狂人传送门</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/js-cookie@3.0.1/dist/js.cookie.min.js" type="application/javascript"></script>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body, html {
      height: 100%;
      overflow: hidden;
      background-color: #0d0d12;
      color: #F5F5F7;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    /* ── Background particles / gradient ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 20% 30%, rgba(120, 40, 200, 0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 70%, rgba(20, 180, 255, 0.14) 0%, transparent 70%),
        radial-gradient(ellipse 100% 80% at 50% 50%, rgba(255, 40, 120, 0.06) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Loading area ── */
    #loadingArea {
      position: relative;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      gap: 28px;
      padding: 20px;
    }

    #loadingMessage {
      font-size: 18px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: #c8c8d4;
      text-align: center;
    }

    #status {
      font-size: 13px;
      color: #8888aa;
      text-align: center;
      letter-spacing: 0.04em;
    }

    /* Spinner */
   ...