imas2-show-name/index.html at main · IMASOFA-TL/imas2-show-name · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="将制作人名称转换为《偶像大师2》汉化补丁可显示的字符串。"
    />
    <title>偶像大师2汉化补丁 制作人名称转写工具</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="app.js" defer></script>
  </head>
  <body>
    <div class="page-shell">
      <header class="hero">
        <p class="eyebrow">THE IDOLM@STER 2 · FAN TOOL</p>
        <h1>
          <span>
            <a class="patch-link" href="https://2nd.idolmaster.top/">偶像大师2汉化补丁</a>
          </span>
          制作人名称转写工具
        </h1>
        <p class="intro">
          输入想在游戏中显示的制作人名称，工具会自动进行字符转写，并检查游戏字体是否支持。
        </p>
      </header>

      <main class="converter" aria-labelledby="converter-title">
        <h2 id="converter-title" class="sr-only">名称转换</h2>

        <section class="field-block">
          <div class="field-heading">
            <label for="source-text">想要显示的名称</label>
            <span id="source-count" class="counter">0 字</span>
          </div>
          <textarea
            id="source-text"
            rows="3"
            spellcheck="false"
            autocomplete="off"
            placeholder="例如：简体字名称制作人"
            aria-describedby="source-hint"
          ></textarea>
          <p id="source-hint" class="field-hint">输入后点击转换，也可以按 Ctrl + Enter。</p>
        </section>

        <div class="action-row">
          <span class="line" aria-hidden="true"></span>
          <button id="convert-button" class="primary-button" type="button" disabled>
            <span>转换名称</span>
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M5 12h14m-5-5 5 5-5 5" />
            </svg>
          </button>
          <span class="line" aria-hidden="true"></span>
        </div>

        <section class="field-block output-block">
          <div class="field-heading">
            <label for="result-text">需要输入的字符串</label>
            <button id="copy-button" class="copy-button" type="button" disabled>
              复制结果
            </button>
          </div>
          <textarea
            id="result-text"
            rows="3"
            readonly
            placeholder="转换结果会显示在这里"
            aria-describedby="result-hint"
          ></textarea>
          <p id="result-hint" class="field-hint">请把转换后的字符串原样输入游戏。</p>
        </section>

        <section id="status-panel" class="status-panel is-loading" aria-live="polite">
          <img src="resources/ComBackground.png" alt="" aria-hidden="true" />
          <div class="status-copy">
            <p id="status-title" class="status-title">正在准备字符数据…</p>
            <p id="status-detail" class="status-detail">请稍候，马上就好。</p>
          </div>
        </section>
      </main>

      <footer>
        <span>仅进行字符映射与字体可用性检查</span>
        <span class="footer-mark">765</span>
      </footer>
    </div>
  </body>
</html>