TransCircle-Frontend/index.html at main · TransCircle/TransCircle-Frontend · 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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/svg+xml" href="/logo-mark.svg" sizes="any" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TransCircle·跨环 | 故事分享</title>
    <!-- 自托管展示字体（DESIGN.md §2.6 / §9）：latin 子集，中文由系统栈兜底。
         两者均为可变字体，各一个文件覆盖全部字重，故只需两条 preload。 -->
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      href="/fonts/space-grotesk-latin.woff2"
      crossorigin="anonymous"
    />
    <link
      rel="preload"
      as="font"
      type="font/woff2"
      href="/fonts/nunito-brand-latin.woff2"
      crossorigin="anonymous"
    />
    <script>
      (function() {
        try {
          var t = localStorage.getItem('transcircle-theme')
          // Validate theme value — prevent invalid localStorage values from
          // causing CSS to fail (M1). Valid themes: light, dark.
          if (t !== 'light' && t !== 'dark') {
            t = null
          }
          if (!t) t = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
          document.documentElement.setAttribute('data-theme', t)
        } catch(e) {}
      })()
    </script>
    <style id="legacy-browser-styles">
      /* 仅作用于 #legacy-fallback（旧浏览器回退页）：
         - 现代浏览器里该 div 保持 display:none，不参与渲染；
         - IE 11 不支持 CSS 自定义属性(var())，且应用打包 CSS 的 var() 在 IE 下全部失效，
           因此这里必须写成字面量，不能引用 --pink-600 等 token。
           字面量取自 DESIGN.md v3.0 §2，改 token 时这里要跟着改。
         - 深色跟随头部主题脚本写入的 html[data-theme='dark']。 */
      #legacy-fallback {
        background: #fdf9fb;
        min-height: 100vh;
      }
      #legacy-fallback .legacy-splash {
        display: block;
        max-width: 720px;
        margin: 2rem auto;
        padding: 1.5rem 1.75rem;
        background: #ffffff;
        border: 1px solid #eedfe6;
        border-radius: 12px;
        color: #3e3646;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
        line-height: 1.75;
      }
      #legacy-fallback .legacy-brand {
        display: block;
      }
      #legacy-fallback .legacy-brand img {
        display: block;
        width: 132px;
        height: auto;
      }
      #legacy-fallback .legacy-title {
        margin: 1rem 0 0.5rem;
        font-size: 1.35rem;
        line-height: 1.3;
        color: #1a1420;
      }
      #legacy-fallback .legacy-body {
        margin: 0 0 0.5rem;
        color: #3e3646;
      }
      #legacy-fallback .legacy-upgrade {
        margin: 1.1rem 0 0;
        padding: 0;
        list-style: none;
      }
      #legacy-fallback .legacy-upgrade li {
        margin: 0 0 0.5rem;
      }
      #legacy-fallback .legacy-upgrade a,
      #legacy-fallback .legacy-links a {
        color: #0a6e9e;
        font-weight: 600;
        text-decoration: underline;
      }
      #legacy-fallback .legacy-links {
        margin: 1.1rem 0 0;
        color: #6d6478;
        font-size: 0.95rem;
      }
      #legacy-fallback a:focus {
        outline: 2px solid #efa8c0;
        outline-offset: 2px;
      }
      [data-theme='dark'] #legacy-fallback {
        background: #0c0a13;
      }
      [data-theme='dark'] #legacy-fallback .legacy-splash {
        background: #17131f;
        border-color: #2b2438;
        color: #cfc9da;
      }
      [data-theme='dark'] #legacy-fallback .legacy-title {
        color: #f5f2f8;
      }
      [data-theme='dark'] #legacy-fallback .legacy-body {
        color: #cfc9da;
      }
      [data-theme='dark'] #legacy-fallback .legacy-upgrade a,
      [data-theme='dark'] #legacy-fallback .legacy-links a {
        color: #7cd4fa;
      }
      [data-theme='dark'] #legacy-fallback .legacy-links {
        color: #9c94ac;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <!-- 旧浏览器（不支持 ES modules，如 IE 11 / Android 4.4 WebView / Chrome 30）会整体跳过
         type="module" 脚本，使本 SPA 不执行而白屏。此静态标记 + nomodule 脚本仅在无模块支持的
         浏览器上可见：默认 display:none，由下方脚本在检测到无模块支持时置为可见。
         IE 11 不支持 CSS 变量，样式见头部 #legacy-browser-styles（字面色值）。 -->
    <noscript>
      <p style="max-width:720px;margin:2rem auto;padding:1rem 1.25rem;font-family:sans-serif;color:#222;line-height:1.7;">本页面需要启用 JavaScript 才能正常显示。</p>
    </noscript>
    <div id="legacy-fallback" style="display:none">
      <main class="legacy-splash">
        <header class="legacy-brand">
          <img src="/brand/transcircle-horizontal-on-light.svg" width="132" height="40" alt="TransCircle" />
        </header>
        <h1 class="legacy-title" id="legacy-title">浏览器版本过旧</h1>
        <p class="legacy-body" id="legacy-body">您当前使用的浏览器无法运行本站的现代界面，登录与投稿功能不可用。请升级系统或改用较新浏览器后再访问。</p>
        <ul class="legacy-upgrade">
          <li><a href="https://www.microsoft.com/edge" target="_blank" rel="noopener noreferrer">Microsoft Edge</a></li>
          <li><a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer">Google Chrome</a></li>
          <li><a href="https://www.mozilla.org/firefox/" target="_blank" rel="noopener noreferrer">Mozilla Firefox</a></li>
        </ul>
        <p class="legacy-links">
          <a href="https://transcircle.org/" target="_blank" rel="noopener noreferrer">TransCircle 主页</a>
          &nbsp;·&nbsp;
          <a href="https://submit.transcircle.org" target="_blank" rel="noopener noreferrer">投稿</a>
        </p>
      </main>
    </div>
    <script nomodule>
      (function () {
        var fallback = document.getElementById('legacy-fallback');
        if (!fallback) { return; }
        // 识别 IE / 旧版 Edge(EdgeHTML)：IE 11 及以下 UA 含 MSIE / Trident / rv:11，旧版 Edge 含 Edge/。
        var ua = navigator.userAgent;
        var isIE = /MSIE|Trident|Edge\//.test(ua);
        var title = document.getElementById('legacy-title');
        var body = document.getElementById('legacy-body');
        if (isIE) {
          if (title) { title.textContent = 'Internet Explorer 不再受支持，无法登录'; }
          if (body) {
            body.textContent = '故事站的登录、两步验证与通行密钥等账户功能需要现代浏览器才能安全运行。' +
              '为保障你的账户安全，我们不再支持 Internet Explorer。' +
              '请使用较新的 Microsoft Edge、Google Chrome 或 Mozilla Firefox 登录。';
          }
        }
        // 非 IE 的无模块浏览器（如 Android 4.4 WebView / Chrome 30）沿用默认文案，无需改写。
        fallback.style.display = 'block';
      })();
    </script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>