50 lines
4.1 KiB
HTML
50 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=1920, initial-scale=1">
|
|
<base href="../../">
|
|
<title>rarity component catalog</title>
|
|
<link rel="stylesheet" href="src-web/index.css">
|
|
</head>
|
|
<body>
|
|
<!-- Root pages load individual templates through index.html#fragment references. -->
|
|
<template id="showcase">
|
|
<div class="panel">
|
|
<div class="panel-heading"><div class="panel-title">ItemIcon / Rarity token application</div><div class="panel-note">Content asset + frame component + semantic tone + optional emphasis</div></div>
|
|
<div class="panel-body">
|
|
<div class="rarity-grid">
|
|
<div class="rarity-card"><div class="rarity-slot"><img class="item" src="src-web/rarity/img/sprite_item.NPK/equipmentskill.img/0.PNG"><img class="frame" src="src-web/rarity/img/equipment-rarity/rare.png"></div><div class="rarity-name q-rare">稀有 / Rare</div></div>
|
|
<div class="rarity-card"><div class="rarity-slot"><img class="item" src="src-web/rarity/img/sprite_item.NPK/equipmentskill.img/1.PNG"><img class="frame" src="src-web/rarity/img/equipment-rarity/artifact.png"></div><div class="rarity-name q-artifact">神器 / Artifact</div></div>
|
|
<div class="rarity-card"><div class="rarity-slot"><img class="item" src="src-web/rarity/img/sprite_item.NPK/equipmentskill.img/2.PNG"><img class="frame" src="src-web/rarity/img/equipment-rarity/legend.png"></div><div class="rarity-name q-legend">传说 / Legend</div></div>
|
|
<div class="rarity-card"><div class="rarity-slot"><img class="item" src="src-web/rarity/img/sprite_item.NPK/equipmentskill.img/3.PNG"><img class="frame" src="src-web/rarity/img/equipment-rarity/epic.png"></div><div class="rarity-name q-epic">史诗 / Epic</div></div>
|
|
<div class="rarity-card"><div class="rarity-slot"><img class="item" src="src-web/rarity/img/sprite_item.NPK/equipmentskill.img/4.PNG"><img class="frame" src="src-web/rarity/img/equipment-rarity/primeval.png"></div><div class="rarity-name q-primeval">太初 / Primeval</div></div>
|
|
<div class="rarity-card"><div class="rarity-slot is-emphasized" title="Emphasized"><img class="item" src="src-web/rarity/img/sprite_item.NPK/equipmentskill.img/3.PNG"></div><div class="rarity-name">强调 / Emphasis</div></div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="spec-row"><span class="spec-chip asset">RasterIcon</span><span class="spec-chip">IconFrame = Instance Swap</span><span class="spec-chip">RarityTone = Token</span><span class="spec-chip captured">Emphasis = Optional modifier</span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template id="badges">
|
|
<div class="panel">
|
|
<div class="panel-heading"><div class="panel-title">NoticeBadge / LevelBadge</div><div class="panel-note">Separate families</div></div>
|
|
<div class="panel-body">
|
|
<div class="rule-label">Notice badge placements</div>
|
|
<div class="badge-demo">
|
|
<div class="badge-anchor"><img src="src-web/rarity/img/sprite_interface2_option.NPK/option.img/97.PNG"><img class="alert-badge" src="src-web/rarity/img/sprite_interface.NPK/windowcommon.chn.img/301.PNG"></div>
|
|
<div class="badge-anchor"><img src="src-web/rarity/img/sprite_interface2_option.NPK/option.img/100.PNG"><img class="alert-badge" src="src-web/rarity/img/sprite_interface.NPK/windowcommon.chn.img/301.PNG"></div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="rule-label">Level markers</div>
|
|
<div style="display:flex;gap:10px" class="dnf-ui"><div class="level-badge">1级</div><div class="level-badge" style="color:var(--info)">2级</div><div class="level-badge" style="color:var(--success)">56级</div></div>
|
|
<div class="spec-row" style="margin-top:16px"><span class="spec-chip captured">Captured tones</span><span class="spec-chip derived">Count deferred</span></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
document.querySelectorAll('template').forEach((template) => document.body.append(template.content.cloneNode(true)));
|
|
</script>
|
|
</body>
|
|
</html>
|