<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>