vela/index.html at master · PSYCH0patch/vela · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vela — AI Novel Writing IDE</title>
  </head>
  <body style="margin: 0;">
    <!-- 同步读取主题，避免加载页与主界面背景色闪跳 -->
    <script>
      (function() {
        var bgMap = { light: '#F7F9FC', galaxy: '#0A1628', paper: '#F5F0E8', dark: '#1E1E1E' };
        var theme = 'dark';
        try {
          var raw = localStorage.getItem('vela-theme');
          if (raw) {
            var state = JSON.parse(raw).state;
            theme = state.resolvedTheme || state.theme || 'dark';
            if (theme === 'night') theme = 'dark'; // 兼容旧版
          }
        } catch(e) {}

        var bg = bgMap[theme] || bgMap.galaxy;

        // 提前给 html 注入主题 class，确保所有全局 CSS 变量立即生效
        document.documentElement.classList.remove('light', 'dark', 'galaxy', 'paper');
        document.documentElement.classList.add(theme);

        document.body.style.backgroundColor = bg;
        /* 将背景色注入 CSS 变量供 .vela-initial-loader 引用 */
        document.documentElement.style.setProperty('--loader-bg', bg);
      })();
    </script>
    <div id="root">
      <style>
        .vela-initial-loader {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          height: 100vh;
          width: 100vw;
          background-color: var(--loader-bg, #0A1628);
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
          user-select: none;
        }

        .vela-core-container {
          position: relative;
          width: 80px;
          height: 80px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 24px;
        }

        .vela-ring {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          border: 2px solid transparent;
          border-top-color: rgba(126, 200, 227, 0.8);
          border-bottom-color: rgba(155, 142, 200, 0.8);
          animation: vela-spin 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
        }

        .vela-ring-inner {
          position: absolute;
          width: 65%;
          height: 65%;
          border-radius: 50%;
          border: 2px solid transparent;
          border-left-color: rgba(126, 200, 227, 0.8);
          border-right-color: rgba(201, 167, 108, 0.8);
          animation: vela-spin-reverse 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
        }

        .vela-core {
          width: 14px;
          height: 14px;
          background: linear-gradient(135deg, #7EC8E3, #9B8EC8);
          border-radius: 50%;
          box-shadow: 0 0 20px rgba(126, 200, 227, 0.6), 0 0 40px rgba(155, 142, 200, 0.4);
          animation: vela-pulse 2s ease-in-out infinite;
        }

        .vela-text {
          font-size: 13px;
          font-weight: 500;
          letter-spacing: 4px;
          text-transform: uppercase;
          background: linear-gradient(90deg, #7EC8E3, #9B8EC8, #C9A76C, #7EC8E3);
          background-size: 200% auto;
          color: transparent;
          -webkit-background-clip: text;
          background-clip: text;
          animation: vela-text-shine 3s linear infinite;
        }

        @keyframes vela-spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }

        @keyframes vela-spin-reverse {
          0% { transform: rotate(360deg); }
          100% { transform: rotate(0deg); }
        }

        @keyframes vela-pulse {
          0%, 100% { transform: scale(0.8); opacity: 0.8; box-shadow: 0 0 15px rgba(126, 200, 227, 0.5); }
          50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 30px rgba(126, 200, 227, 0.9), 0 0 50px rgba(155, 142, 200, 0.6); }
        }

        @keyframes vela-text-shine {
          to { background-position: 200% center; }
        }
      </style>
      <div class="vela-initial-loader">
        <div class="vela-core-container">
          <div class="vela-ring"></div>
          <div class="vela-ring-inner"></div>
          <div class="vela-core"></div>
        </div>
        <div class="vela-text">Vela</div>
      </div>
    </div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>