Repository navigation
Expand file tree
/
Copy pathartifacts.html
More file actions
176 lines (161 loc) · 7.43 KB
/
Copy pathartifacts.html
File metadata and controls
176 lines (161 loc) · 7.43 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>LazyImpact | Artifacts Inventory</title>
<link rel="stylesheet" href="css/style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="nav__inner">
<div style="display:flex;align-items:center;gap:2rem;">
<a href="index.html" class="nav__brand">LazyImpact</a>
<ul class="nav__links">
<li><a href="index.html" class="nav__link" data-i18n="nav.home">홈</a></li>
<li><a href="smart-discard.html" class="nav__link">스마트 폐기</a></li>
<li><a href="abyss.html" class="nav__link">나선비경</a></li>
</ul>
</div>
<div class="nav__actions">
<button class="nav__icon-btn">
<span class="material-symbols-outlined">settings</span>
</button>
<button class="nav__icon-btn">
<span class="material-symbols-outlined">account_circle</span>
</button>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="main">
<div class="layout-sidebar">
<!-- Sidebar Filters -->
<aside class="sidebar">
<div class="sidebar__sticky">
<div class="filter-card">
<div class="filter-header">
<h2 data-i18n="art.filters">Filters</h2>
<button data-i18n="art.clearall">Clear All</button>
</div>
<!-- Artifact Set -->
<div class="filter-group">
<label data-i18n="art.set">Artifact Set</label>
<div class="filter-search">
<input type="text" placeholder="Search sets..." data-i18n="art.search"/>
<span class="material-symbols-outlined">search</span>
</div>
</div>
<!-- Slot -->
<div class="filter-group">
<label data-i18n="art.slot">Slot</label>
<div class="filter-slots">
<button class="filter-slot">
<span class="material-symbols-outlined">local_florist</span>
</button>
<button class="filter-slot filter-slot--active">
<span class="material-symbols-outlined">flight</span>
</button>
<button class="filter-slot">
<span class="material-symbols-outlined">hourglass_empty</span>
</button>
<button class="filter-slot">
<span class="material-symbols-outlined">wine_bar</span>
</button>
<button class="filter-slot">
<span class="material-symbols-outlined">crown</span>
</button>
</div>
</div>
<!-- Main Stat -->
<div class="filter-group">
<label data-i18n="art.mainstat">Main Stat</label>
<select class="filter-select">
<option>전체</option>
<option>공격력%</option>
<option>치명타 확률</option>
<option>치명타 피해</option>
<option>원소 마스터리</option>
</select>
</div>
<!-- Desired Substats -->
<div class="filter-group">
<label data-i18n="art.substats">Desired Substats</label>
<div class="filter-tags">
<span class="filter-tag filter-tag--active">치명타 확률</span>
<span class="filter-tag filter-tag--active">치명타 피해</span>
<span class="filter-tag">공격력%</span>
<span class="filter-tag">원충%</span>
</div>
</div>
</div>
<!-- Archive Total -->
<div class="archive-total">
<p class="archive-total__label" data-i18n="art.total">Archive Total</p>
<p class="archive-total__value" id="archive-total">—</p>
<p class="archive-total__sub">+20 성유물: <span id="archive-lv20">—</span></p>
</div>
</div>
</aside>
<!-- Content Area -->
<section class="content-area">
<!-- Header & Sort -->
<div class="artifacts-header">
<div>
<h1 data-i18n="art.title">Artifacts Inventory</h1>
<p data-i18n="art.subtitle">Manage and optimize your celestial equipment</p>
</div>
<div class="sort-bar">
<a href="smart-discard.html" class="btn btn--secondary" style="margin-right:1rem; text-decoration:none; display:flex; align-items:center; gap:0.5rem; background:rgba(255, 96, 96, 0.15); color:var(--error); border: 1px solid rgba(255, 96, 96, 0.3);">
<span class="material-symbols-outlined">auto_delete</span>
<span data-i18n="art.smart_discard" style="font-weight:bold;">스마트 폐기</span>
</a>
<span class="sort-bar__label" data-i18n="art.sortby">Sort By</span>
<div class="sort-tabs">
<button class="sort-tab sort-tab--active" data-i18n="art.quality">Quality</button>
<button class="sort-tab" data-i18n="art.newest">Newest</button>
</div>
</div>
</div>
<!-- Artifact Grid -->
<div class="artifact-grid" id="artifact-grid">
<!-- Empty state banner (hidden when artifacts exist) -->
<div id="artifact-empty-state" style="display:none;grid-column:1/-1;text-align:center;padding:4rem 2rem;">
<div style="max-width:28rem;margin:0 auto;">
<span class="material-symbols-outlined" style="font-size:4rem;color:var(--outline);margin-bottom:1rem;display:block;">cloud_upload</span>
<h2 style="font-size:1.25rem;font-weight:700;margin-bottom:0.5rem;">성유물 데이터가 없습니다</h2>
<p style="font-size:0.875rem;color:var(--on-surface-variant);margin-bottom:1.5rem;">GOOD 포맷 JSON 파일을 업로드하면 성유물이 표시됩니다</p>
<div id="artifact-drop-zone" style="border:2px dashed var(--outline-variant);border-radius:var(--r-xl);padding:2.5rem;cursor:pointer;transition:all 0.2s;">
<span class="material-symbols-outlined" style="font-size:2.5rem;color:var(--primary);margin-bottom:0.5rem;display:block;">upload_file</span>
<p style="font-size:0.875rem;color:var(--on-surface-variant);">클릭하거나 파일을 드래그하세요</p>
<p style="font-size:0.75rem;color:var(--outline);margin-top:0.25rem;">GOOD 포맷 (.json)</p>
<input type="file" id="artifact-import-file" accept=".json" style="display:none;"/>
</div>
<div id="artifact-import-result" style="display:none;margin-top:1rem;background:var(--surface-highest);border-radius:var(--r-md);padding:1rem;"></div>
</div>
</div>
</div>
<div class="load-more">
<p class="load-more__count" id="artifact-count-display">—</p>
</div>
</section>
</div>
</main>
<!-- FABs -->
<button class="fab">
<span class="material-symbols-outlined">calculate</span>
<span class="fab__tooltip">Batch Optimize</span>
</button>
<!-- Footer -->
<footer class="footer">
<div class="footer__inner">
<p class="footer__copy" data-i18n="footer.disclaimer">Data provided for theorycrafting purposes. Not affiliated with HoYoverse.</p>
</div>
</footer>
<script src="js/i18n.js"></script>
<script src="js/app.js"></script>
</body>
</html>