yirensha/index.html at main · y1342474280/yirensha · 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>异人杀 · 墨染天地</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@300;600;900&display=swap" rel="stylesheet">
  <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <audio id="bgm" loop><source src="assets/bgm.mp3" type="audio/mpeg"></audio>
  <div id="music-toggle" class="music-control" title="播放/暂停"><div class="music-icon">律</div></div>

  <div id="ink-container"><canvas id="ink-canvas"></canvas></div>
  <svg style="position: absolute; width: 0; height: 0;">
    <defs>
      <filter id="ink-flow">
        <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="2" result="noise" />
        <feDisplacementMap in="SourceGraphic" in2="noise" scale="5" />
      </filter>
    </defs>
  </svg>

  <header class="hero">
    <div class="hero-content">
      <div class="brand-box">
        <h1 class="ink-title" data-text="异人杀">异人杀</h1>
        <div class="stamp">官方</div>
      </div>
      <p class="subtitle">灵能流转 · 阶序飞升 · 牌河博弈</p>
      <div class="btn-group">
        <button id="enter-btn" class="btn-ink">入局</button>
        <button id="knowledge-btn" class="btn-outline">参悟</button>
      </div>
    </div>
  </header>

  <main class="container" id="gallery-section">
    <div class="section-title">
      <span class="deco-l"></span><h2>万象 · 图谱</h2><span class="deco-r"></span>
    </div>

    <div class="filter-ink-bar">
      <div class="filters">
        <span class="filter-item active" data-type="all">万象</span>
        <span class="filter-item" data-type="法术">法术</span>
        <span class="filter-item" data-type="状态">状态</span>
        <span class="filter-item" data-type="装备">装备</span>
      </div>
      <div class="search-wrap">
        <input type="text" id="search" placeholder="寻觅神通..." />
      </div>
    </div>

    <div id="cards-grid" class="cards-grid"></div>

    <div id="loading-state" class="loading-box">
      <div class="ink-loader"></div>
      <p id="loading-text">正在沟通天地灵气...</p>
      <div id="error-actions" style="display:none; margin-top:15px;">
        <button onclick="loadBuiltInData()" class="btn-outline">加载天道真言 (演示数据)</button>
      </div>
    </div>
  </main>

  <div id="modal" class="modal-overlay">
    <div class="modal-scroll">
      <div class="close-modal">&times;</div>
      <div class="modal-inner">
        <div class="modal-visual">
          <img id="m-img" src="" alt="">
          <div class="ink-splash"></div>
        </div>
        <div class="modal-text">
          <h2 id="m-name"></h2>
          <div class="m-tags"><span id="m-tier" class="tag-gold"></span><span id="m-type" class="tag-ink"></span></div>
          <div class="m-stat">数值/消耗: <span id="m-val"></span></div>
          <div class="m-desc-box"><p id="m-effect"></p></div>
        </div>
      </div>
    </div>
  </div>

  <div id="knowledge-modal" class="modal-overlay knowledge-overlay">
    <div class="book-container">
      <div class="close-book" id="close-knowledge">&times;</div>

      <div class="book-tabs">
        <div class="book-tab active" data-tab="hero">奇人志</div>
        <div class="book-tab" data-tab="rule-basic">基础法则</div>
        <div class="book-tab" data-tab="rule-terms">万物词条</div>
      </div>

      <div class="book-pages">

        <div id="tab-hero" class="page-content active">
          <div class="page-header">
            <h3>奇人 · 异士</h3>
            <p>天赋各异，神通显化</p>
          </div>
          <div id="hero-list" class="hero-list"></div>
        </div>

        <div id="tab-rule-basic" class="page-content">
          <div class="page-header">
            <h3>天道 · 运行</h3>
            <p>起手、回合、胜负之分</p>
          </div>
          <div id="rule-basic-list" class="rule-content-box"></div>
        </div>

        <div id="tab-rule-terms" class="page-content">
          <div class="page-header">
            <h3>万象 · 释义</h3>
            <p>灵能、牌河、等阶之秘</p>
          </div>
          <div id="rule-term-list" class="rule-content-box"></div>
        </div>

      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>