init
This commit is contained in:
@@ -0,0 +1,4 @@
|
||||
(() => {
|
||||
window.componentRegistry ||= {};
|
||||
window.componentRegistry["src-web/rarity/index.html"] = {"showcase":"<div class=\"panel\">\n <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>\n <div class=\"panel-body\">\n <div class=\"rarity-grid\">\n <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>\n <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>\n <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>\n <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>\n <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>\n <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>\n </div>\n <div class=\"divider\"></div>\n <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>\n </div>\n </div>","badges":"<div class=\"panel\">\n <div class=\"panel-heading\"><div class=\"panel-title\">NoticeBadge / LevelBadge</div><div class=\"panel-note\">Separate families</div></div>\n <div class=\"panel-body\">\n <div class=\"rule-label\">Notice badge placements</div>\n <div class=\"badge-demo\">\n <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>\n <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>\n </div>\n <div class=\"divider\"></div>\n <div class=\"rule-label\">Level markers</div>\n <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>\n <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>\n </div>\n </div>"};
|
||||
})();
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 300 B |
Binary file not shown.
|
After Width: | Height: | Size: 304 B |
Binary file not shown.
|
After Width: | Height: | Size: 293 B |
Binary file not shown.
|
After Width: | Height: | Size: 274 B |
Binary file not shown.
|
After Width: | Height: | Size: 316 B |
Binary file not shown.
|
After Width: | Height: | Size: 339 B |
Binary file not shown.
|
After Width: | Height: | Size: 502 B |
Binary file not shown.
|
After Width: | Height: | Size: 862 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,49 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,24 @@
|
||||
/* Source module: rarity.css */
|
||||
.rarity-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:8px; }
|
||||
.rarity-card { min-width:0;padding:8px 5px;border:1px solid #292a27;background:#070807; }
|
||||
.rarity-slot { position:relative;width:40px;height:40px;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;background:#030404; }
|
||||
.rarity-slot.is-emphasized { background:rgba(0,0,0,.9); }
|
||||
.rarity-slot.is-emphasized::before,
|
||||
.rarity-slot.is-emphasized::after { content:"";position:absolute;pointer-events:none; }
|
||||
.rarity-slot.is-emphasized::before {
|
||||
z-index:0;
|
||||
inset:4px;
|
||||
border:1px solid #ffa800;
|
||||
box-shadow:
|
||||
0 0 2px 1px rgba(255,168,0,.88),
|
||||
0 0 5px 4px rgba(255,168,0,.46),
|
||||
inset 0 0 2px rgba(255,168,0,.7);
|
||||
}
|
||||
.rarity-slot.is-emphasized::after {
|
||||
z-index:3;
|
||||
inset:5px;
|
||||
border:1px solid #fffc2a;
|
||||
}
|
||||
.rarity-slot .frame { position:absolute;z-index:2;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);image-rendering:pixelated; }
|
||||
.rarity-slot .item { position:relative;z-index:1;width:28px;height:28px;image-rendering:pixelated; }
|
||||
.rarity-name { text-align:center;font-size:11px;color:var(--gold); }
|
||||
Reference in New Issue
Block a user