[[div class="cn cdver2" style="width: 100%;height: 0;padding-bottom: calc(50% / 3);background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22100%22%20viewBox%3D%220%200%20600%20100%22%3E%3Cdefs%3E%3Cstyle%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3Erect%5Bfill*%3D%22b01%22%5D%20%7Banimation%3A%20blink%203s%20ease-in-out%20infinite%3B%7D%40keyframes%20blink%20%7B0%25%2C20%25%7Bfill-opacity%3A%201%3B%7D50%25%7Bfill-opacity%3A%200.75%3B%7D80%25%2C100%25%20%7Bfill-opacity%3A%201%3B%7D%7D%3C%2Fstyle%3E%3Cfilter%20id%3D%22shadow%22%20width%3D%22200%25%22%20height%3D%22200%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%223%22%20result%3D%22shadow%22%2F%3E%3CfeOffset%20dx%3D%220%22%20dy%3D%220%22%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%3E%3Ctext%20x%3D%2210%22%20y%3D%2240%22%20font-size%3D%2216%22%20font-family%3D%22Arial%2Csans-serif%22%3E%3Ctspan%20font-weight%3D%22bold%22%3E%E9%A1%B9%E7%9B%AE%E7%BC%96%E5%8F%B7%EF%BC%9A%3C%2Ftspan%3ESCP-268-KO
%3C%2Ftext%3E%3Ctext%20x%3D%2210%22%20y%3D%2270%22%20font-size%3D%2216%22%20font-family%3D%22Arial%2Csans-serif%22%3E%3Ctspan%20font-weight%3D%22bold%22%3E%E9%A1%B9%E7%9B%AE%E7%AD%89%E7%BA%A7%EF%BC%9A%3C%2Ftspan%3ESafe
%3C%2Ftext%3E%3C%2Fg%3E%3Cg%3E%3Crect%20x%3D%22220%22%20y%3D%2225%22%20width%3D%222%22%20height%3D%2250%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22%23333%22%2F%3E%3Ctext%20x%3D%22230%22%20y%3D%2232%22%20font-size%3D%229%22%20font-family%3D%22Arial%2Csans-serif%22%3E%3Ctspan%20font-weight%3D%22bold%22%3E%E8%B4%9F%E8%B4%A3%E7%AB%99%E7%82%B9%EF%BC%9A%3C%2Ftspan%3EKRSE%E2%96%88%E2%96%88%20Site-21K
%3C%2Ftext%3E%3Ctext%20x%3D%22230%22%20y%3D%2246%22%20font-size%3D%229%22%20font-family%3D%22Arial%2Csans-serif%22%3E%3Ctspan%20font-weight%3D%22bold%22%3E%E9%A1%B9%E7%9B%AE%E4%B8%BB%E7%AE%A1%EF%BC%9A%3C%2Ftspan%3EGangsu%20Lee
%3C%2Ftext%3E%3Ctext%20x%3D%22230%22%20y%3D%2260%22%20font-size%3D%229%22%20font-family%3D%22Arial%2Csans-serif%22%3E%3Ctspan%20font-weight%3D%22bold%22%3E%E9%A6%96%E5%B8%AD%E7%A0%94%E7%A9%B6%E5%91%98%EF%BC%9A%3C%2Ftspan%3E%E2%96%88%E2%96%88%E2%96%88
%3C%2Ftext%3E%3Ctext%20x%3D%22230%22%20y%3D%2274%22%20font-size%3D%229%22%20font-family%3D%22Arial%2Csans-serif%22%3E%3Ctspan%20font-weight%3D%22bold%22%3E%E6%8C%87%E6%B4%BE%E7%89%B9%E9%81%A3%E9%98%9F%EF%BC%9A%3C%2Ftspan%3EN/A
%3C%2Ftext%3E%3Crect%20x%3D%22488%22%20y%3D%2225%22%20width%3D%222%22%20height%3D%2250%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22%23333%22%2F%3E%3C%2Fg%3E%3Cg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20transform%3D%22skewX(-15)%22%3E%3Crect%20x%3D%22523%22%20y%3D%2225%22%20width%3D%2210%22%20height%3D%2250%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22[[#ifexpr 3 == 6 | %23b01 | transparent ]]%22%2F%3E%3Crect%20x%3D%22535%22%20y%3D%2225%22%20width%3D%2210%22%20height%3D%2250%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22[[#ifexpr 3 == 6 | %23b01 ]][[#ifexpr 3 == 5 | %23b01 ]][[#ifexpr 3
< 5 | %23aaa ]]%22%2F%3E%3Crect%20x%3D%22547%22%20y%3D%2225%22%20width%3D%2210%22%20height%3D%2250%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22[[#ifexpr 3 == 6 | %23b01 ]][[#ifexpr 3 == 5 | %23333 ]][[#ifexpr 3 == 4 | %23b01 ]][[#ifexpr 3
< 4 | %23aaa ]]%22%2F%3E%3Crect%20x%3D%22559%22%20y%3D%2225%22%20width%3D%2210%22%20height%3D%2250%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22[[#ifexpr 3 == 6 | %23b01 ]][[#ifexpr 3 == 5 | %23333 ]][[#ifexpr 3 == 4 | %23333 ]][[#ifexpr 3 == 3 | %23b01 ]][[#ifexpr 3
< 3 | %23aaa ]]%22%2F%3E%3Crect%20x%3D%22571%22%20y%3D%2225%22%20width%3D%2210%22%20height%3D%2250%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22[[#ifexpr 3 == 6 | %23b01 ]][[#ifexpr 3 == 5 | %23333 ]][[#ifexpr 3 == 4 | %23333 ]][[#ifexpr 3 == 3 | %23333 ]][[#ifexpr 3 == 2 | %23b01 ]][[#ifexpr 3
< 2 | %23aaa ]]%22%2F%3E%3Crect%20x%3D%22583%22%20y%3D%2225%22%20width%3D%2210%22%20height%3D%2250%22%20rx%3D%222%22%20ry%3D%222%22%20fill%3D%22[[#ifexpr 3 == 6 | %23b01 ]][[#ifexpr 3 == 5 | %23333 ]][[#ifexpr 3 == 4 | %23333 ]][[#ifexpr 3 == 3 | %23333 ]][[#ifexpr 3 == 2 | %23333 ]][[#ifexpr 3 == 1 | %23b01 ]][[#ifexpr 3
< 1 | %23aaa ]]%22%2F%3E%3C%2Fg%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%22535%22%20y%3D%2270%22%20font-size%3D%2216%22%20font-family%3D%22Arial%2Csans-serif%22%20font-weight%3D%22bold%22%20fill%3D%22[[#ifexpr 3 > 5 | %23aaa | %23fff ]]%22%20filter%3D%22url(%23shadow)%22%3ELv.%3Ctspan%20font-size%3D%2225%22%3E3
%3C%2Ftspan%3E%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%22535%22%20y%3D%2270%22%20font-size%3D%2216%22%20font-family%3D%22Arial%2Csans-serif%22%20font-weight%3D%22bold%22%20fill%3D%22[[#ifexpr 3 > 5 | %23fff | %23000 ]]%22%3ELv.%3Ctspan%20font-size%3D%2225%22%3E3
%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E");"]]
[[/div]]
[[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%;}</style>
</head>
<body>
<div class="sample"></div>
<div class="opt">
<b>许可等级：</b><input type="number" min="0" max="6" value="3" />
<span>1, 2, 3, 4, 5, 6</span>
<b>编号：</b><input type="text" value="SCP-XXXX" />
<b>等级：</b><input type="text" value="Euclid" />
<b>负责站点：</b><input type="text" value="Site-19" />
<b>项目主管：</b><input type="text" value="研究员 John Doe" />
<b>首席研究员：</b><input type="text" value="研究员 John Doe" />
<b>指派特遣队：</b><input type="text" value="MTF Beta-7（“Maz Hatters”-疯帽商）" />
</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 :scp-wiki-cn:component:cd-ver2\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="16" font-family="Arial,sans-serif"><tspan font-weight="bold">项目编号：</tspan> ' + o.item.value + '</text><text x="10" y="70" font-size="16" font-family="Arial,sans-serif"><tspan font-weight="bold">项目等级：</tspan> ' + o.class.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="9" font-family="Arial,sans-serif"><tspan font-weight="bold">负责站点：</tspan> ' + o['site-responsible'].value + '</text><text x="230" y="46" font-size="9" font-family="Arial,sans-serif"><tspan font-weight="bold">项目主管：</tspan> ' + o['director'].value + '</text><text x="230" y="60" font-size="9" font-family="Arial,sans-serif"><tspan font-weight="bold">首席研究员：</tspan> ' + o['research-head'].value + '</text><text x="230" y="74" font-size="9" font-family="Arial,sans-serif"><tspan font-weight="bold">指派特遣队：</tspan> ' + o['assigned-task-force'].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',
'item',
'class',
'site-responsible',
'director',
'research-head',
'assigned-task-force'
][i],
input: v};
o[_.name] = v;
return _;
});
txt.onfocus = function(e) {
e.target.select();
}
ipt[0].input.onchange();
</script>
</body>
</html>[[/iftags]]
特殊收容措施：SCP-268-KO被收容于下方网页中。为防止 SCP-268-KO 显现其异常性质，故对项目的描述当且仅当记录在上述页面中。