现象分级系统(PCS)
现象分级系统（PCS）Phenomena Classification System
说明：本组件名为现象分级系统，仅为现象的写作提供参考思路，起辅助作用，并非强制使用。
组件源代码由Meauzeek Zampona参考修改自分级装饰栏 第2版。添加原创标签的目的是避免该组件显示在翻译栏。
如何使用？
在下面的输入框内补全信息，然后复制最底端框内的代码，即可在文章中引用该模块。
[[iftags]]
<html>
<head>
<style>body {font-family: sans-serif; font-size: .8em;} .sample {width: 100%;height: 0;padding-bottom: calc(50% / 3);background-position: center; background-size: contain; background-repeat: no-repeat;} .opt {display: grid; grid-template-columns: 15em 1fr;} .opt > b {grid-column: 1 / 2;} .opt > input {font-size: 16px; grid-column: 2 / 2;} .opt > span {color: #888; grid-column: 2 / 2; margin: 0 0 1em;} textarea {font-family: sans-serif; height: 300px; width: 100%;} .rounded-border {border: 2px dotted #000000; border-radius: 15px; background: #ffffff; padding-left: 20px; padding-right: 10px;}</style>
</head>
<body>
<br>
<b>【预览效果】</b>
<br>
<br>
<div class="rounded-border">
<div class="sample"></div>
</div>
<div class="opt">
<br>
<br>
<br>
<b>安全等级：</b> <input type="number" min="0" max="6" value="3" />
<span>可填入0, 1, 2, 3, 4, 5, 6, 数字越大代表危险性越高。</span>
<b>现象名称：</b> <input type="text" value="名称" />
<b>现象编号：</b> <input type="text" value="C-X" />
<b>适用区域：</b> <input type="text" value="Level C-XXX" />
<b>存在形式：</b> <input type="text" value="形式" />
<b>条件与成因：</b> <input type="text" value="成因" />
<b>效果及影响：</b> <input type="text" value='影响' />
<br>
<b>复制以下框内的代码：</b>
</div>
<textarea readonly></textarea>
<script>
var o = {};
var txt = document.querySelector('textarea');
var smp = document.querySelector('.sample');
var ipt = Array.from(document.querySelectorAll('input')).map(function(v, i) {
['onchange', 'oninput'].forEach(function(f) {
v[f] = function(e) {
txt.value = '[[include :backrooms-wiki-cn:component:pcs\n' + ipt.map(function(v) {return '|' + v.name + '=' + encodeURI(v.input.value)}).join('\n') + '\n]]';
smp.setAttribute('style', 'background-image: url("data:image/svg+xml;charset=utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="600" height="100" viewBox="0 0 600 100"><defs><style>rect[fill*="b01"] {animation: blink 3s ease-in-out infinite;}@keyframes blink {0%,20%{fill-opacity: 1;}50%{fill-opacity: 0.75;}80%,100% {fill-opacity: 1;}}</style><filter id="shadow" width="200%" height="200%"><feGaussianBlur stdDeviation="3" result="shadow"/><feOffset dx="0" dy="0"/></filter></defs><g><text x="10" y="40" font-size="20" font-family="Arial,sans-serif"><tspan font-weight="bold">名称：</tspan> ' + o.name.value + '</text><text x="10" y="70" font-size="20" font-family="Arial,sans-serif"><tspan font-weight="bold">编号：</tspan> ' + o.number.value + '</text></g><g><rect x="220" y="25" width="2" height="50" rx="2" ry="2" fill="#333"/><text x="230" y="32" font-size="12" font-family="Arial,sans-serif"><tspan font-weight="bold">适用区域：</tspan> ' + o['area'].value + '</text><text x="230" y="46" font-size="12" font-family="Arial,sans-serif"><tspan font-weight="bold">存在形式：</tspan> ' + o['existence'].value + '</text><text x="230" y="60" font-size="12" font-family="Arial,sans-serif"><tspan font-weight="bold">成因：</tspan> ' + o['cause'].value + '</text><text x="230" y="74" font-size="12" font-family="Arial,sans-serif"><tspan font-weight="bold">影响：</tspan> ' + o['effects'].value + '</text><rect x="488" y="25" width="2" height="50" rx="2" ry="2" fill="#333"/></g><g transform="skewX(-15)"><rect x="523" y="25" width="10" height="50" rx="2" ry="2" fill="' + (Number(o.lv.value) == 6 ? '#b01' : 'transparent') + '"/><rect x="535" y="25" width="10" height="50" rx="2" ry="2" fill="' + (Number(o.lv.value) == 6 || Number(o.lv.value) == 5 ? '#b01' : '#aaa') + '"/><rect x="547" y="25" width="10" height="50" rx="2" ry="2" fill="' + (Number(o.lv.value) == 6 || Number(o.lv.value) == 4 ? '#b01' : Number(o.lv.value) > 4 ? '#333' : '#aaa') + '"/><rect x="559" y="25" width="10" height="50" rx="2" ry="2" fill="' + (Number(o.lv.value) == 6 || Number(o.lv.value) == 3 ? '#b01' : Number(o.lv.value) > 3 ? '#333' : '#aaa') + '"/><rect x="571" y="25" width="10" height="50" rx="2" ry="2" fill="' + (Number(o.lv.value) == 6 || Number(o.lv.value) == 2 ? '#b01' : Number(o.lv.value) > 2 ? '#333' : '#aaa') + '"/><rect x="583" y="25" width="10" height="50" rx="2" ry="2" fill="' + (Number(o.lv.value) == 6 || Number(o.lv.value) == 1 ? '#b01' : Number(o.lv.value) > 1 ? '#333' : '#aaa') + '"/></g><text x="535" y="70" font-size="16" font-family="Arial,sans-serif" font-weight="bold" fill="#fff" filter="url(#shadow)">Lv.<tspan font-size="25">' + o.lv.value + '</tspan></text><text x="535" y="70" font-size="16" font-family="Arial,sans-serif" font-weight="bold" fill="' + (Number(o.lv.value) == 6 ? '#fff' : '#000') + '">Lv.<tspan font-size="25">' + o.lv.value + '</tspan></text></svg>') + '");')
}
})
var _ = {name: [
'lv',
'name',
'number',
'area',
'existence',
'cause',
'effects'
][i],
input: v};
o[_.name] = v;
return _;
});
txt.onfocus = function(e) {
e.target.select();
}
ipt[0].input.onchange();
</script>
</body>
</html>