Cd Ver2

Link to article: Cd Ver2.

.cdver2 {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.0%22%20width%3D%22600%22%20height%3D%22100%22%20viewBox%3D%220%200%20600%20100%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%20%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2230%22%20text-anchor%3D%22middle%22%20font-size%3D%2221%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23901%22%20font-weight%3D%22bold%22%3EOh%20no!%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2245%22%20text-anchor%3D%22middle%22%20font-size%3D%2211%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23444%22%20font-weight%3D%22normal%22%3EPlease%20use%20an%20encoder%3B%20maybe%20the%20module%20is%20inserted%20characters%20without%20alphabets%2C%20numbers%20or%20a%20few%20symbols.%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2260%22%20text-anchor%3D%22middle%22%20font-size%3D%2211%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23444%22%20font-weight%3D%22normal%22%3EThe%20encoder%20will%20be%20found%20in%20SCP%20Style%20Resource.%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2275%22%20text-anchor%3D%22middle%22%20font-size%3D%2211%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23444%22%20font-weight%3D%22normal%22%3E%3Ctspan%20font-weight%3D%22bold%22%3ETips%3A%3C%2Ftspan%3E%20You%20can't%20use%20the%20following%20symbols%20without%20encoding%3A%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2290%22%20text-anchor%3D%22middle%22%20font-size%3D%2211%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23444%22%20font-weight%3D%22normal%22%3E%25%20%22%20%7B%20%7D%20%7C%20%5C%20%2F%20%5E%20%5B%20%5D%20%60%20%26lt%3B%20%26gt%3B%20%40%20%23%20%2C%20%3D%20%3F%20*%20%2B%20%2C%20%3B%3C%2Ftext%3E%20%3C%2Fsvg%3E");
}

background: rgba(201,133,184,.4); box-shadow: 1px 1px 3px #999; padding: .5em;

```
height: 650px; width: 100%;
```

width: 100%;height: 0;padding-bottom: calc(50% / 3);background-position: center; background-size: contain; background-repeat: no-repeat; background-image: url(

(none)

```
en
```
```
cdver2
```
```
sample
```
```
opt
```

[[iftags +component]]
[[div style="background: rgba(201,133,184,.4); box-shadow: 1px 1px 3px #999; padding: .5em;"]]
//**sample:** [[[roget-s-conspiracy-theory-for-scp-001|]]], [[[scp-3178|]]]//
----
+ How to use?
> [[iframe https://scp-wiki.wikidot.com/component:cd-ver2/code/1 style="height: 650px; width: 100%;"]]
[[/div]]
----
[[/iftags]]

[[div class="en 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%3EItem%20%23%3A%3C%2Ftspan%3E%20{$item}%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%3EObject%20Class%3A%3C%2Ftspan%3E%20{$class}%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%3ESite%20Responsible%3A%3C%2Ftspan%3E%20{$site-responsible}%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%3EDirector%3A%3C%2Ftspan%3E%20{$director}%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%3EResearch%20Head%3A%3C%2Ftspan%3E%20{$research-head}%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%3EAssigned%20Task%20Force%3A%3C%2Ftspan%3E%20{$assigned-task-force}%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 {$lv} == 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 {$lv} == 6 | %23b01 ]][[#ifexpr {$lv} == 5 | %23b01 ]][[#ifexpr {$lv} < 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 {$lv} == 6 | %23b01 ]][[#ifexpr {$lv} == 5 | %23333 ]][[#ifexpr {$lv} == 4 | %23b01 ]][[#ifexpr {$lv} < 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 {$lv} == 6 | %23b01 ]][[#ifexpr {$lv} == 5 | %23333 ]][[#ifexpr {$lv} == 4 | %23333 ]][[#ifexpr {$lv} == 3 | %23b01 ]][[#ifexpr {$lv} < 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 {$lv} == 6 | %23b01 ]][[#ifexpr {$lv} == 5 | %23333 ]][[#ifexpr {$lv} == 4 | %23333 ]][[#ifexpr {$lv} == 3 | %23333 ]][[#ifexpr {$lv} == 2 | %23b01 ]][[#ifexpr {$lv} < 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 {$lv} == 6 | %23b01 ]][[#ifexpr {$lv} == 5 | %23333 ]][[#ifexpr {$lv} == 4 | %23333 ]][[#ifexpr {$lv} == 3 | %23333 ]][[#ifexpr {$lv} == 2 | %23333 ]][[#ifexpr {$lv} == 1 | %23b01 ]][[#ifexpr {$lv} < 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 {$lv} > 5 | %23aaa | %23fff ]]%22%20filter%3D%22url(%23shadow)%22%3ELv.%3Ctspan%20font-size%3D%2225%22%3E{$lv}%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 {$lv} > 5 | %23fff | %23000 ]]%22%3ELv.%3Ctspan%20font-size%3D%2225%22%3E{$lv}%3C%2Ftspan%3E%3C%2Ftext%3E%3C%2Fsvg%3E");"]]
[[/div]]

[[module css]]
.cdver2 {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.0%22%20width%3D%22600%22%20height%3D%22100%22%20viewBox%3D%220%200%20600%20100%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%20%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2230%22%20text-anchor%3D%22middle%22%20font-size%3D%2221%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23901%22%20font-weight%3D%22bold%22%3EOh%20no!%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2245%22%20text-anchor%3D%22middle%22%20font-size%3D%2211%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23444%22%20font-weight%3D%22normal%22%3EPlease%20use%20an%20encoder%3B%20maybe%20the%20module%20is%20inserted%20characters%20without%20alphabets%2C%20numbers%20or%20a%20few%20symbols.%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2260%22%20text-anchor%3D%22middle%22%20font-size%3D%2211%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23444%22%20font-weight%3D%22normal%22%3EThe%20encoder%20will%20be%20found%20in%20SCP%20Style%20Resource.%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2275%22%20text-anchor%3D%22middle%22%20font-size%3D%2211%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23444%22%20font-weight%3D%22normal%22%3E%3Ctspan%20font-weight%3D%22bold%22%3ETips%3A%3C%2Ftspan%3E%20You%20can't%20use%20the%20following%20symbols%20without%20encoding%3A%3C%2Ftext%3E%3Ctext%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%2250%25%22%20y%3D%2290%22%20text-anchor%3D%22middle%22%20font-size%3D%2211%22%20font-family%3D%22'Trebuchet%20MS'%2C%20Trebuchet%2C%20Verdana%2C%20Arial%2C%20Helvetica%22%20fill%3D%22%23444%22%20font-weight%3D%22normal%22%3E%25%20%22%20%7B%20%7D%20%7C%20%5C%20%2F%20%5E%20%5B%20%5D%20%60%20%26lt%3B%20%26gt%3B%20%40%20%23%20%2C%20%3D%20%3F%20*%20%2B%20%2C%20%3B%3C%2Ftext%3E%20%3C%2Fsvg%3E");
}
[[/module]]









[[iftags]]
[[code type="HTML"]]

<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>Lv:</b> <input type="number" min="0" max="6" value="3" />
    <span>0, 1, 2, 3, 4, 5, 6</span>
    <b>Item:</b> <input type="text" value="SCP-XXXX" />
    <b>Class:</b> <input type="text" value="Euclid" />
    <b>Site Responsible:</b> <input type="text" value="Site-19" />
    <b>Director:</b> <input type="text" value="Researcher John Doe" />
    <b>Research Head:</b> <input type="text" value="Researcher John Doe" />
    <b>Assigned Task Force:</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: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">Item #:</tspan> ' + o.item.value + '</text><text x="10" y="70" font-size="16" font-family="Arial,sans-serif"><tspan font-weight="bold">Object Class:</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">Site Responsible:</tspan> ' + o['site-responsible'].value + '</text><text x="230" y="46" font-size="9" font-family="Arial,sans-serif"><tspan font-weight="bold">Director:</tspan> ' + o['director'].value + '</text><text x="230" y="60" font-size="9" font-family="Arial,sans-serif"><tspan font-weight="bold">Research Head:</tspan> ' + o['research-head'].value + '</text><text x="230" y="74" font-size="9" font-family="Arial,sans-serif"><tspan font-weight="bold">Assigned Task Force:</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>
[[/code]]
[[/iftags]]

Cd Ver2

Module Styles

Inline Styles

Includes

CSS Classes

Page Source