初夜小姐的档案管理终端
Included page "start" does not exist (create it now)
[[html]]
<div align='center'><a href='https://www.free-website-hit-counter.com'><img src='https://www.free-website-hit-counter.com/c.php?d=10&id=148043&s=7' border='0' alt='Free Website Hit Counter'></a><br / ></div>
[[/html]]
[[module css]]
#page-title {
display: none;
}
[[/module]]
[[div style="background: rgba(255,255,255, .6); box-shadow: 2px 2px 5px #999; padding: .5em; border: 3px solid #2A6163; border-radius: 5px; color: rgba(200, 255, 240, .4); "]]
[[html]]
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>荧光钟表</title>
<link href="https://www.idcd.com/static/tool-box/times/normalize.css" rel="stylesheet">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #5EDB94;
}
.clock {
position: relative;
width: 250px;
height: 250px;
border: 5px solid #503AF6;
border-radius: 100%;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.clock:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 20px;
height: 20px;
border: 5px solid #5EDB94;
background-color: #503AF6;
border-radius: 100%;
z-index: 99;
}
.clock__hand {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
margin: auto;
height: 5px;
background-color: #503AF6;
-webkit-transform-origin: 0;
transform-origin: 0;
transition: -webkit-transform cubic-bezier(0.1, 2.5, 0.5, 1);
transition: transform cubic-bezier(0.1, 2.5, 0.5, 1);
transition: transform cubic-bezier(0.1, 2.5, 0.5, 1), -webkit-transform cubic-bezier(0.1, 2.5, 0.5, 1);
}
.clock__hand--hour {
width: calc(50% - 250px / 4);
}
.clock__hand--minute {
width: calc(50% - 250px / 6);
}
.clock__hand--second {
width: calc(50% - 250px / 10);
height: 4px;
background-color: red;
}
.clock__tick {
display: block;
position: absolute;
top: 10px;
left: 50%;
width: 2px;
height: 8px;
background-color: #5EDB94;
-webkit-transform-origin: 0 115px;
transform-origin: 0 115px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.clock__tick:nth-child(5n + 1) {
width: 4px;
height: 16px;
background-color: #503AF6;
}
.clock__tick:nth-child(1) {
-webkit-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
.clock__tick:nth-child(2) {
-webkit-transform: rotate(6deg) translateX(-50%);
transform: rotate(6deg) translateX(-50%);
}
.clock__tick:nth-child(3) {
-webkit-transform: rotate(12deg) translateX(-50%);
transform: rotate(12deg) translateX(-50%);
}
.clock__tick:nth-child(4) {
-webkit-transform: rotate(18deg) translateX(-50%);
transform: rotate(18deg) translateX(-50%);
}
.clock__tick:nth-child(5) {
-webkit-transform: rotate(24deg) translateX(-50%);
transform: rotate(24deg) translateX(-50%);
}
.clock__tick:nth-child(6) {
-webkit-transform: rotate(30deg) translateX(-50%);
transform: rotate(30deg) translateX(-50%);
}
.clock__tick:nth-child(7) {
-webkit-transform: rotate(36deg) translateX(-50%);
transform: rotate(36deg) translateX(-50%);
}
.clock__tick:nth-child(8) {
-webkit-transform: rotate(42deg) translateX(-50%);
transform: rotate(42deg) translateX(-50%);
}
.clock__tick:nth-child(9) {
-webkit-transform: rotate(48deg) translateX(-50%);
transform: rotate(48deg) translateX(-50%);
}
.clock__tick:nth-child(10) {
-webkit-transform: rotate(54deg) translateX(-50%);
transform: rotate(54deg) translateX(-50%);
}
.clock__tick:nth-child(11) {
-webkit-transform: rotate(60deg) translateX(-50%);
transform: rotate(60deg) translateX(-50%);
}
.clock__tick:nth-child(12) {
-webkit-transform: rotate(66deg) translateX(-50%);
transform: rotate(66deg) translateX(-50%);
}
.clock__tick:nth-child(13) {
-webkit-transform: rotate(72deg) translateX(-50%);
transform: rotate(72deg) translateX(-50%);
}
.clock__tick:nth-child(14) {
-webkit-transform: rotate(78deg) translateX(-50%);
transform: rotate(78deg) translateX(-50%);
}
.clock__tick:nth-child(15) {
-webkit-transform: rotate(84deg) translateX(-50%);
transform: rotate(84deg) translateX(-50%);
}
.clock__tick:nth-child(16) {
-webkit-transform: rotate(90deg) translateX(-50%);
transform: rotate(90deg) translateX(-50%);
}
.clock__tick:nth-child(17) {
-webkit-transform: rotate(96deg) translateX(-50%);
transform: rotate(96deg) translateX(-50%);
}
.clock__tick:nth-child(18) {
-webkit-transform: rotate(102deg) translateX(-50%);
transform: rotate(102deg) translateX(-50%);
}
.clock__tick:nth-child(19) {
-webkit-transform: rotate(108deg) translateX(-50%);
transform: rotate(108deg) translateX(-50%);
}
.clock__tick:nth-child(20) {
-webkit-transform: rotate(114deg) translateX(-50%);
transform: rotate(114deg) translateX(-50%);
}
.clock__tick:nth-child(21) {
-webkit-transform: rotate(120deg) translateX(-50%);
transform: rotate(120deg) translateX(-50%);
}
.clock__tick:nth-child(22) {
-webkit-transform: rotate(126deg) translateX(-50%);
transform: rotate(126deg) translateX(-50%);
}
.clock__tick:nth-child(23) {
-webkit-transform: rotate(132deg) translateX(-50%);
transform: rotate(132deg) translateX(-50%);
}
.clock__tick:nth-child(24) {
-webkit-transform: rotate(138deg) translateX(-50%);
transform: rotate(138deg) translateX(-50%);
}
.clock__tick:nth-child(25) {
-webkit-transform: rotate(144deg) translateX(-50%);
transform: rotate(144deg) translateX(-50%);
}
.clock__tick:nth-child(26) {
-webkit-transform: rotate(150deg) translateX(-50%);
transform: rotate(150deg) translateX(-50%);
}
.clock__tick:nth-child(27) {
-webkit-transform: rotate(156deg) translateX(-50%);
transform: rotate(156deg) translateX(-50%);
}
.clock__tick:nth-child(28) {
-webkit-transform: rotate(162deg) translateX(-50%);
transform: rotate(162deg) translateX(-50%);
}
.clock__tick:nth-child(29) {
-webkit-transform: rotate(168deg) translateX(-50%);
transform: rotate(168deg) translateX(-50%);
}
.clock__tick:nth-child(30) {
-webkit-transform: rotate(174deg) translateX(-50%);
transform: rotate(174deg) translateX(-50%);
}
.clock__tick:nth-child(31) {
-webkit-transform: rotate(180deg) translateX(-50%);
transform: rotate(180deg) translateX(-50%);
}
.clock__tick:nth-child(32) {
-webkit-transform: rotate(186deg) translateX(-50%);
transform: rotate(186deg) translateX(-50%);
}
.clock__tick:nth-child(33) {
-webkit-transform: rotate(192deg) translateX(-50%);
transform: rotate(192deg) translateX(-50%);
}
.clock__tick:nth-child(34) {
-webkit-transform: rotate(198deg) translateX(-50%);
transform: rotate(198deg) translateX(-50%);
}
.clock__tick:nth-child(35) {
-webkit-transform: rotate(204deg) translateX(-50%);
transform: rotate(204deg) translateX(-50%);
}
.clock__tick:nth-child(36) {
-webkit-transform: rotate(210deg) translateX(-50%);
transform: rotate(210deg) translateX(-50%);
}
.clock__tick:nth-child(37) {
-webkit-transform: rotate(216deg) translateX(-50%);
transform: rotate(216deg) translateX(-50%);
}
.clock__tick:nth-child(38) {
-webkit-transform: rotate(222deg) translateX(-50%);
transform: rotate(222deg) translateX(-50%);
}
.clock__tick:nth-child(39) {
-webkit-transform: rotate(228deg) translateX(-50%);
transform: rotate(228deg) translateX(-50%);
}
.clock__tick:nth-child(40) {
-webkit-transform: rotate(234deg) translateX(-50%);
transform: rotate(234deg) translateX(-50%);
}
.clock__tick:nth-child(41) {
-webkit-transform: rotate(240deg) translateX(-50%);
transform: rotate(240deg) translateX(-50%);
}
.clock__tick:nth-child(42) {
-webkit-transform: rotate(246deg) translateX(-50%);
transform: rotate(246deg) translateX(-50%);
}
.clock__tick:nth-child(43) {
-webkit-transform: rotate(252deg) translateX(-50%);
transform: rotate(252deg) translateX(-50%);
}
.clock__tick:nth-child(44) {
-webkit-transform: rotate(258deg) translateX(-50%);
transform: rotate(258deg) translateX(-50%);
}
.clock__tick:nth-child(45) {
-webkit-transform: rotate(264deg) translateX(-50%);
transform: rotate(264deg) translateX(-50%);
}
.clock__tick:nth-child(46) {
-webkit-transform: rotate(270deg) translateX(-50%);
transform: rotate(270deg) translateX(-50%);
}
.clock__tick:nth-child(47) {
-webkit-transform: rotate(276deg) translateX(-50%);
transform: rotate(276deg) translateX(-50%);
}
.clock__tick:nth-child(48) {
-webkit-transform: rotate(282deg) translateX(-50%);
transform: rotate(282deg) translateX(-50%);
}
.clock__tick:nth-child(49) {
-webkit-transform: rotate(288deg) translateX(-50%);
transform: rotate(288deg) translateX(-50%);
}
.clock__tick:nth-child(50) {
-webkit-transform: rotate(294deg) translateX(-50%);
transform: rotate(294deg) translateX(-50%);
}
.clock__tick:nth-child(51) {
-webkit-transform: rotate(300deg) translateX(-50%);
transform: rotate(300deg) translateX(-50%);
}
.clock__tick:nth-child(52) {
-webkit-transform: rotate(306deg) translateX(-50%);
transform: rotate(306deg) translateX(-50%);
}
.clock__tick:nth-child(53) {
-webkit-transform: rotate(312deg) translateX(-50%);
transform: rotate(312deg) translateX(-50%);
}
.clock__tick:nth-child(54) {
-webkit-transform: rotate(318deg) translateX(-50%);
transform: rotate(318deg) translateX(-50%);
}
.clock__tick:nth-child(55) {
-webkit-transform: rotate(324deg) translateX(-50%);
transform: rotate(324deg) translateX(-50%);
}
.clock__tick:nth-child(56) {
-webkit-transform: rotate(330deg) translateX(-50%);
transform: rotate(330deg) translateX(-50%);
}
.clock__tick:nth-child(57) {
-webkit-transform: rotate(336deg) translateX(-50%);
transform: rotate(336deg) translateX(-50%);
}
.clock__tick:nth-child(58) {
-webkit-transform: rotate(342deg) translateX(-50%);
transform: rotate(342deg) translateX(-50%);
}
.clock__tick:nth-child(59) {
-webkit-transform: rotate(348deg) translateX(-50%);
transform: rotate(348deg) translateX(-50%);
}
.clock__tick:nth-child(60) {
-webkit-transform: rotate(354deg) translateX(-50%);
transform: rotate(354deg) translateX(-50%);
}
</style>
</head>
<body>
<div class="clock" id="new-clock">
<div class="clock__ticks"><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span><span class="clock__tick"></span>
</div>
<div class="clock__hand clock__hand--hour"></div>
<div class="clock__hand clock__hand--minute"></div>
<div class="clock__hand clock__hand--second"></div>
</div>
<script>
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var Clock = function () {
function Clock(id) {
_classCallCheck(this, Clock);
var el = document.getElementById(id);
this.handHr = el.querySelector('.clock__hand--hour');
this.handMin = el.querySelector('.clock__hand--minute');
this.handSec = el.querySelector('.clock__hand--second');
this.setTime();
this.init();
}
_createClass(Clock, [{
key: 'tick',
value: function tick(hrs, mins, secs) {
var degHrs = hrs / 12 * 360 + 90;
var degMins = mins / 60 * 360 + 90;
var degSecs = secs / 60 * 360 + 90;
this.handHr.style.transform = 'rotate(' + degHrs + 'deg)';
this.handMin.style.transform = 'rotate(' + degMins + 'deg)';
this.handSec.style.transform = 'rotate(' + degSecs + 'deg)';
if (degSecs === 90) {
this.handSec.style.transitionDuration = "0s";
} else {
this.handSec.style.transitionDuration = "0.1s";
}
}
}, {
key: 'setTime',
value: function setTime() {
var now = new Date();
var hrs = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
this.tick(hrs, mins, secs);
}
}, {
key: 'init',
value: function init() {
setInterval(this.setTime.bind(this), 1000);
}
}]);
return Clock;
}();
var clock = new Clock("new-clock");
</script>
</body>
</html>
[[/html]]
[[html]]
<body>
<script>
Date.prototype.format = function (fmt) {
var o = {
"y+": this.getFullYear,
"M+": this.getMonth() + 1,
"d+": this.getDate(),
"h+": this.getHours(),
"m+": this.getMinutes(),
"s+": this.getSeconds()
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
setInterval("document.getElementById('dateTimeB').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);
setInterval("document.getElementById('dateTime').innerHTML = (new Date()).format('yyyy-MM-dd hh:mm:ss');", 1000);
</script>
<head>
<meta charset="UTF-8">
<style type="text/css">
div{width:600px;height:50px;margin:10px auto;color:#00000;font-size:24px;}
.box1{text-align: center;}
</style>
</head>
<body>
<div class="box1"> </span>当前时间：<span id="dateTime">时间获取中...</span></div>
</body>
[[/html]]
[[/div]]
[[=]]
[[span class="h2"]]欢迎你，窥视者。[[/span]]
[[span class="h3"]]//请勿折叠、旋转或者转变此页面。//[[/span]]
[[div class="fancyborder"]]
[[span class="h2"]]永夜冰原，与夜魇主敬上[[/span]]
[[/div]]
------
[[div class="content-panel standalone centered unmargined" style="padding: 20px 20px 10px;"]]
[[module NewPage size="20" button="创建页面"]]
[[module NewPage size="20" category="tr" format="/^[^:]+$/" button="创建繁體页面"]]
[[/div]]
------
[[module ListUsers users="."]]
[[a href="/system:my-pages/created_by/%%title%%"]]所有页面[[/a]]
[[/module]]
------
[[tabview]]
[[tab 随想录]]
[[=]]
[[div class="hoverblock"]]
[[div class="shadow-hoverblock"]]
[[collapsible show="展开" hide="收起" hideLocation="both"]]
[[image http://backroomssandboxcn.wikidot.com/local--files/dr-one-night-sandbox/%E5%8A%A8%E5%9B%BE1]]
[[/collapsible]]
[[/div]]
[[/div]]
------
[[div class="hoverblock"]]
[[div class="shadow-hoverblock"]]
[[collapsible show="展开" hide="收起" hideLocation="both"]]
[[image http://backroomssandboxcn.wikidot.com/local--files/dr-one-night-sandbox/%E5%8A%A8%E5%9B%BE]]
[[/collapsible]]
[[/div]]
[[/div]]
------
[[div class="hoverblock"]]
[[div class="shadow-hoverblock"]]
[[collapsible show="展开" hide="收起" hideLocation="both"]]
[[image http://backroomssandboxcn.wikidot.com/local--files/dr-one-night-sandbox/%E5%8A%A8%E5%9B%BE3]]
[[/collapsible]]
[[/div]]
[[/div]]
[[/=]]
[[/tab]]
[[tab 最近在做的任务]]
+++ 代码来自gp
[[html]]
<style>
.block {
width: 240px;
min-height: 6.5em;
margin: 1rem 0 0 1rem;
background-color: white;
touch-action: none;
user-select: none;
transform: translate(0px, 0px);
border: solid 2px;
border-color: black;
text-align: center;
}
.small {
width: max-content;
}
#drag_container {
background-color: white;
height: 500px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="http://backrooms-sandbox.wdfiles.com/local--files/draggable/draggableDiv.js"></script>
<div id="drag_container">
<div class="draggable block">
对森森的采访
</div>
<div class="draggable block">
天鹅座档案馆配区一“永恒之佩加姆”
</div>
<div class="draggable block">
刑侦处（未开工）
</div>
<div class="draggable block">
wanderers beyond life and death
</div>
</div>
[[/html]]
[[/tab]]
[[tab 最近更新的页面]]
[[module ListPages category="-deleted" tags="-" order="updated_at desc" separate="no" rating=">-5" limit="500"]]
%%linked_title%%
[[/module]]
[[/tab]]
[[tab 人事名片]]
[[iftags +组件]]
[[div style="border: solid 2px #ededed; padding: 0.5rem; margin: 1rem 0;"]]
这是一个用于制作装饰性身份卡的组件。
[[=image https://hoah-lab.wdfiles.com/local--files/component%3Aid-card/idcard.png width="80%"]]
[[div class="code" style="width:80%;margin:auto" ]]
@@[[include :scp-wiki-cn:component:id-card@@ ##blue|**@@|css=--@@**##
@@|photo=https://scp-wiki.wdfiles.com/local--files/estrellayoshte/u.png@@
|level=3 [[span style="color:blue;font-style:italic;user-select:none"]]支持 1 到 5[[/span]]
|name=Suong Yvonne
|dept=设计部门 |position=肖像画师
|id-number= 3492-775201
|expiry=06/2029
@@]]@@
[[/div]]
如果一个页面中出现了多张身份卡，那么你仅需要填写一次 {{css}} 参数，且在随后的 {{[[include]]}} 里面均可将其省略。
[[/div]]
[[code type="css"]]
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root {
--id-card-five-color: 196,2,51;
--id-card-four-color: 255,109,0;
--id-card-three-color: 255,211,0;
--id-card-two-color: 0,135,189;
--id-card-one-color: 0,159,107;
--id-card-margin: min(1.5rem, calc(1.75vw + 0.325rem));
--id-card-border-color: 210,210,210;
--id-card-text-color: 20,20,20;
--id-card-subtext-color: 140,140,140;
--id-card-background-color: 252,252,252;
--id-card-background-logo: url('https://scp-wiki.wdfiles.com/local--files/component%3Aid-card/SCP_F.png');
--id-card-background-logo-opacity: 0.075;
}
#page-content .foundation-id-card {
max-width: calc(var(--id-card-margin)*24.5);
}
.foundation-id-card {
display: grid;
grid-template-areas:
"pfp level"
"pfp info"
"extra extra";
grid-template-columns: 30% 1fr;
grid-template-rows: calc(var(--id-card-margin)*3) auto auto;
grid-gap: calc(var(--id-card-margin)*0.625);
box-sizing: border-box;
padding: var(--id-card-margin);
margin: 1.5rem auto;
border-radius: calc(var(--id-card-margin)*0.75);
box-shadow: 0 0 0.325rem rgba(0,0,0,0.175);
font-family: 'Lexend', sans-serif;
color: rgb(var(--id-card-text-color));
background-color: rgb(var(--id-card-background-color));
position: relative;
z-index: 0;
overflow: hidden;
}
.foundation-id-card::before {
content: "";
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
opacity: var(--id-card-background-logo-opacity);
background-image: var(--id-card-background-logo);
background-repeat: no-repeat;
background-size: contain;
background-position: 150% 50%;
z-index: -1;
}
.foundation-id-card .profile-picture {
grid-area: pfp;
box-sizing: border-box;
border: solid 0.125rem rgb(var(--id-card-border-color));
border-radius: min(0.5rem, 1vw);
aspect-ratio: 4/5;
overflow: hidden;
position: relative;
}
.foundation-id-card .profile-picture img {
height: 100%;
object-fit: cover;
}
.foundation-id-card .level-container {
grid-area: level;
display: flex;
grid-gap: calc(var(--id-card-margin)*0.325);
align-items: center;
}
.foundation-id-card .level-container .levels {
display: flex;
flex-direction: column;
grid-gap: calc(var(--id-card-margin)*0.285);
max-height: calc(var(--id-card-margin)*3);
justify-content: flex-start;
flex-grow: 1;
}
.foundation-id-card .level-container .levels .level {
display: none;
flex-basis: calc(var(--id-card-margin)*0.5);
flex-shrink: 1;
}
.foundation-id-card .level-container .levels.l-1 .level:is(:nth-child(1)) {
display: block;
background-color: rgb(var(--id-card-one-color));
}
.foundation-id-card .level-container .levels.l-2 .level:is(:nth-child(1), :nth-child(2)) {
display: block;
background-color: rgb(var(--id-card-two-color));
}
.foundation-id-card .level-container .levels.l-3 .level:is(:nth-child(1), :nth-child(2), :nth-child(3)) {
display: block;
background-color: rgb(var(--id-card-three-color));
}
.foundation-id-card .level-container .levels.l-4 .level:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
display: block;
background-color: rgb(var(--id-card-four-color));
}
.foundation-id-card .level-container .levels.l-5 .level {
display: block;
background-color: rgb(var(--id-card-five-color));
}
.foundation-id-card .access {
display: flex;
flex-direction: column;
overflow: hidden;
top: 0;
right: 0;
text-align: right;
text-transform: uppercase;
font-weight: bold;
font-size: calc(var(--id-card-margin)*1.425);
line-height: calc(var(--id-card-margin)*1.325);
}
.foundation-id-card .access span:first-child { font-size: 103.5%; }
.foundation-id-card .access br { display: none; }
.foundation-id-card .info {
grid-area: info;
display: flex;
flex-wrap: wrap;
row-gap: calc(var(--id-card-margin)*0.375);
}
.foundation-id-card .info > * {
flex-grow: 1;
}
.foundation-id-card .info > .fullname {
flex-basis: 100%;
}
.foundation-id-card .info > * br { display: none; }
.foundation-id-card .info > * .heading {
display: block;
text-transform: uppercase;
font-size: calc(var(--id-card-margin)*0.675 + 0.075rem);
letter-spacing: -0.025em;
color: rgb(var(--id-card-subtext-color));
}
.foundation-id-card .info > * .fill-info {
font-size: calc(var(--id-card-margin) + 0.05rem);
font-weight: bold;
line-height: 1.05;
}
.foundation-id-card .info > .fullname .fill-info {
font-size: calc(var(--id-card-margin)*1.1 + 0.125rem);
}
.foundation-id-card .card-end {
grid-area: extra;
display: flex;
height: calc(var(--id-card-margin)*2);
align-items: center;
padding-top: calc(var(--id-card-margin)*0.625);
grid-gap: calc(var(--id-card-margin)*0.375);
border-top: solid 0.125rem rgb(var(--id-card-border-color));
}
.foundation-id-card .card-end .barcode {
font-family: 'Libre Barcode 128', cursive;
user-select: none;
flex-basis: 67.5%;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
font-size: calc(var(--id-card-margin)*3.5);
align-self: flex-start;
clip-path: inset(0);
}
.foundation-id-card .card-end .expire {
color: rgb(var(--id-card-subtext-color));
font-size: calc(var(--id-card-margin)*0.525);
font-family: 'Share Tech Mono', monospace;
align-self: flex-end;
text-align: right;
width: max-content;
}
.foundation-id-card .card-end .expire .id .sublead { font-size: 80%; margin-right: 0.75ch; }
.foundation-id-card .card-end .expire .id { font-size: 115%; }
[[/code]]
[[/iftags]]
[!-- --]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/component:id-card/1");
[[/module]]
[!-- --]
[[div class="foundation-id-card"]]
[[div_ class="profile-picture"]]
[[image https://www.helloimg.com/images/2022/12/12/o5sGgt.md.jpg]]
[[/div]]
[[div_ class="level-container"]]
[[div_ class="levels l-4"]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[/div]]
[[div_ class="access"]]
[[span]]4 级[[/span]]
[[span]]权限[[/span]]
[[/div]]
[[/div]]
[[div_ class="info"]]
[[div_ class="fullname"]]
[[span class="heading"]]姓名[[/span]]
[[span class="fill-info"]]Dr one night[[/span]]
[[/div]]
[[div_ class="department"]]
[[span class="heading"]]部门[[/span]]
[[span class="fill-info"]]███部[[/span]]
[[/div]]
[[div_ class="position"]]
[[span class="heading"]]职位[[/span]]
[[span class="fill-info"]][已编辑][[/span]]
[[/div]]
[[/div]]
[[div class="card-end"]]
[[div_ class="barcode"]]
CN-1011-0911CN-1011-0911
[[/div]]
[[div_ class="expire"]]
[[span class="id"]][[span class="sublead"]]身份编号[[/span]]CN-1011-0911[[/span]]
[[span class="valid"]]有效期至 永久[[/span]]
[[/div]]
[[/div]]
[[/div]]
------
[[iftags +组件]]
[[div style="border: solid 2px #ededed; padding: 0.5rem; margin: 1rem 0;"]]
这是一个用于制作装饰性身份卡的组件。
[[=image https://hoah-lab.wdfiles.com/local--files/component%3Aid-card/idcard.png width="80%"]]
[[div class="code" style="width:80%;margin:auto" ]]
@@[[include :scp-wiki-cn:component:id-card@@ ##blue|**@@|css=--@@**##
@@|photo=https://scp-wiki.wdfiles.com/local--files/estrellayoshte/u.png@@
|level=3 [[span style="color:blue;font-style:italic;user-select:none"]]支持 1 到 5[[/span]]
|name=Suong Yvonne
|dept=设计部门 |position=肖像画师
|id-number= 3492-775201
|expiry=06/2029
@@]]@@
[[/div]]
如果一个页面中出现了多张身份卡，那么你仅需要填写一次 {{css}} 参数，且在随后的 {{[[include]]}} 里面均可将其省略。
[[/div]]
[[code type="css"]]
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root {
--id-card-five-color: 196,2,51;
--id-card-four-color: 255,109,0;
--id-card-three-color: 255,211,0;
--id-card-two-color: 0,135,189;
--id-card-one-color: 0,159,107;
--id-card-margin: min(1.5rem, calc(1.75vw + 0.325rem));
--id-card-border-color: 210,210,210;
--id-card-text-color: 20,20,20;
--id-card-subtext-color: 140,140,140;
--id-card-background-color: 252,252,252;
--id-card-background-logo: url('https://scp-wiki.wdfiles.com/local--files/component%3Aid-card/SCP_F.png');
--id-card-background-logo-opacity: 0.075;
}
#page-content .foundation-id-card {
max-width: calc(var(--id-card-margin)*24.5);
}
.foundation-id-card {
display: grid;
grid-template-areas:
"pfp level"
"pfp info"
"extra extra";
grid-template-columns: 30% 1fr;
grid-template-rows: calc(var(--id-card-margin)*3) auto auto;
grid-gap: calc(var(--id-card-margin)*0.625);
box-sizing: border-box;
padding: var(--id-card-margin);
margin: 1.5rem auto;
border-radius: calc(var(--id-card-margin)*0.75);
box-shadow: 0 0 0.325rem rgba(0,0,0,0.175);
font-family: 'Lexend', sans-serif;
color: rgb(var(--id-card-text-color));
background-color: rgb(var(--id-card-background-color));
position: relative;
z-index: 0;
overflow: hidden;
}
.foundation-id-card::before {
content: "";
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
opacity: var(--id-card-background-logo-opacity);
background-image: var(--id-card-background-logo);
background-repeat: no-repeat;
background-size: contain;
background-position: 150% 50%;
z-index: -1;
}
.foundation-id-card .profile-picture {
grid-area: pfp;
box-sizing: border-box;
border: solid 0.125rem rgb(var(--id-card-border-color));
border-radius: min(0.5rem, 1vw);
aspect-ratio: 4/5;
overflow: hidden;
position: relative;
}
.foundation-id-card .profile-picture img {
height: 100%;
object-fit: cover;
}
.foundation-id-card .level-container {
grid-area: level;
display: flex;
grid-gap: calc(var(--id-card-margin)*0.325);
align-items: center;
}
.foundation-id-card .level-container .levels {
display: flex;
flex-direction: column;
grid-gap: calc(var(--id-card-margin)*0.285);
max-height: calc(var(--id-card-margin)*3);
justify-content: flex-start;
flex-grow: 1;
}
.foundation-id-card .level-container .levels .level {
display: none;
flex-basis: calc(var(--id-card-margin)*0.5);
flex-shrink: 1;
}
.foundation-id-card .level-container .levels.l-1 .level:is(:nth-child(1)) {
display: block;
background-color: rgb(var(--id-card-one-color));
}
.foundation-id-card .level-container .levels.l-2 .level:is(:nth-child(1), :nth-child(2)) {
display: block;
background-color: rgb(var(--id-card-two-color));
}
.foundation-id-card .level-container .levels.l-3 .level:is(:nth-child(1), :nth-child(2), :nth-child(3)) {
display: block;
background-color: rgb(var(--id-card-three-color));
}
.foundation-id-card .level-container .levels.l-4 .level:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
display: block;
background-color: rgb(var(--id-card-four-color));
}
.foundation-id-card .level-container .levels.l-5 .level {
display: block;
background-color: rgb(var(--id-card-five-color));
}
.foundation-id-card .access {
display: flex;
flex-direction: column;
overflow: hidden;
top: 0;
right: 0;
text-align: right;
text-transform: uppercase;
font-weight: bold;
font-size: calc(var(--id-card-margin)*1.425);
line-height: calc(var(--id-card-margin)*1.325);
}
.foundation-id-card .access span:first-child { font-size: 103.5%; }
.foundation-id-card .access br { display: none; }
.foundation-id-card .info {
grid-area: info;
display: flex;
flex-wrap: wrap;
row-gap: calc(var(--id-card-margin)*0.375);
}
.foundation-id-card .info > * {
flex-grow: 1;
}
.foundation-id-card .info > .fullname {
flex-basis: 100%;
}
.foundation-id-card .info > * br { display: none; }
.foundation-id-card .info > * .heading {
display: block;
text-transform: uppercase;
font-size: calc(var(--id-card-margin)*0.675 + 0.075rem);
letter-spacing: -0.025em;
color: rgb(var(--id-card-subtext-color));
}
.foundation-id-card .info > * .fill-info {
font-size: calc(var(--id-card-margin) + 0.05rem);
font-weight: bold;
line-height: 1.05;
}
.foundation-id-card .info > .fullname .fill-info {
font-size: calc(var(--id-card-margin)*1.1 + 0.125rem);
}
.foundation-id-card .card-end {
grid-area: extra;
display: flex;
height: calc(var(--id-card-margin)*2);
align-items: center;
padding-top: calc(var(--id-card-margin)*0.625);
grid-gap: calc(var(--id-card-margin)*0.375);
border-top: solid 0.125rem rgb(var(--id-card-border-color));
}
.foundation-id-card .card-end .barcode {
font-family: 'Libre Barcode 128', cursive;
user-select: none;
flex-basis: 67.5%;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
font-size: calc(var(--id-card-margin)*3.5);
align-self: flex-start;
clip-path: inset(0);
}
.foundation-id-card .card-end .expire {
color: rgb(var(--id-card-subtext-color));
font-size: calc(var(--id-card-margin)*0.525);
font-family: 'Share Tech Mono', monospace;
align-self: flex-end;
text-align: right;
width: max-content;
}
.foundation-id-card .card-end .expire .id .sublead { font-size: 80%; margin-right: 0.75ch; }
.foundation-id-card .card-end .expire .id { font-size: 115%; }
[[/code]]
[[/iftags]]
[!-- --]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/component:id-card/1");
[[/module]]
[!-- --]
[[div class="foundation-id-card"]]
[[div_ class="profile-picture"]]
[[image http://backroomssandboxcn.wdfiles.com/local--files/dr-one-night-sandbox/%E9%97%AE%E5%8F%B7]]
[[/div]]
[[div_ class="level-container"]]
[[div_ class="levels l-5"]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[/div]]
[[div_ class="access"]]
[[span]]5 级[[/span]]
[[span]]权限[[/span]]
[[/div]]
[[/div]]
[[div_ class="info"]]
[[div_ class="fullname"]]
[[span class="heading"]]姓名[[/span]]
[[span class="fill-info"]]Frist Nightion[[/span]]
[[/div]]
[[div_ class="department"]]
[[span class="heading"]]部门[[/span]]
[[span class="fill-info"]][敏感信息已编辑][[/span]]
[[/div]]
[[div_ class="position"]]
[[span class="heading"]]职位[[/span]]
[[span class="fill-info"]][无数据][[/span]]
[[/div]]
[[/div]]
[[div class="card-end"]]
[[div_ class="barcode"]]
CN-1111-1111CN-1111-1111
[[/div]]
[[div_ class="expire"]]
[[span class="id"]][[span class="sublead"]]身份编号[[/span]]CN-1111-1111[[/span]]
[[span class="valid"]]有效期至 永久[[/span]]
[[/div]]
[[/div]]
[[/div]]
------
[[iftags +组件]]
[[div style="border: solid 2px #ededed; padding: 0.5rem; margin: 1rem 0;"]]
这是一个用于制作装饰性身份卡的组件。
[[=image https://hoah-lab.wdfiles.com/local--files/component%3Aid-card/idcard.png width="80%"]]
[[div class="code" style="width:80%;margin:auto" ]]
@@[[include :scp-wiki-cn:component:id-card@@ ##blue|**@@|css=--@@**##
@@|photo=https://scp-wiki.wdfiles.com/local--files/estrellayoshte/u.png@@
|level=3 [[span style="color:blue;font-style:italic;user-select:none"]]支持 1 到 5[[/span]]
|name=Suong Yvonne
|dept=设计部门 |position=肖像画师
|id-number= 3492-775201
|expiry=06/2029
@@]]@@
[[/div]]
如果一个页面中出现了多张身份卡，那么你仅需要填写一次 {{css}} 参数，且在随后的 {{[[include]]}} 里面均可将其省略。
[[/div]]
[[code type="css"]]
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root {
--id-card-five-color: 196,2,51;
--id-card-four-color: 255,109,0;
--id-card-three-color: 255,211,0;
--id-card-two-color: 0,135,189;
--id-card-one-color: 0,159,107;
--id-card-margin: min(1.5rem, calc(1.75vw + 0.325rem));
--id-card-border-color: 210,210,210;
--id-card-text-color: 20,20,20;
--id-card-subtext-color: 140,140,140;
--id-card-background-color: 252,252,252;
--id-card-background-logo: url('https://scp-wiki.wdfiles.com/local--files/component%3Aid-card/SCP_F.png');
--id-card-background-logo-opacity: 0.075;
}
#page-content .foundation-id-card {
max-width: calc(var(--id-card-margin)*24.5);
}
.foundation-id-card {
display: grid;
grid-template-areas:
"pfp level"
"pfp info"
"extra extra";
grid-template-columns: 30% 1fr;
grid-template-rows: calc(var(--id-card-margin)*3) auto auto;
grid-gap: calc(var(--id-card-margin)*0.625);
box-sizing: border-box;
padding: var(--id-card-margin);
margin: 1.5rem auto;
border-radius: calc(var(--id-card-margin)*0.75);
box-shadow: 0 0 0.325rem rgba(0,0,0,0.175);
font-family: 'Lexend', sans-serif;
color: rgb(var(--id-card-text-color));
background-color: rgb(var(--id-card-background-color));
position: relative;
z-index: 0;
overflow: hidden;
}
.foundation-id-card::before {
content: "";
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
opacity: var(--id-card-background-logo-opacity);
background-image: var(--id-card-background-logo);
background-repeat: no-repeat;
background-size: contain;
background-position: 150% 50%;
z-index: -1;
}
.foundation-id-card .profile-picture {
grid-area: pfp;
box-sizing: border-box;
border: solid 0.125rem rgb(var(--id-card-border-color));
border-radius: min(0.5rem, 1vw);
aspect-ratio: 4/5;
overflow: hidden;
position: relative;
}
.foundation-id-card .profile-picture img {
height: 100%;
object-fit: cover;
}
.foundation-id-card .level-container {
grid-area: level;
display: flex;
grid-gap: calc(var(--id-card-margin)*0.325);
align-items: center;
}
.foundation-id-card .level-container .levels {
display: flex;
flex-direction: column;
grid-gap: calc(var(--id-card-margin)*0.285);
max-height: calc(var(--id-card-margin)*3);
justify-content: flex-start;
flex-grow: 1;
}
.foundation-id-card .level-container .levels .level {
display: none;
flex-basis: calc(var(--id-card-margin)*0.5);
flex-shrink: 1;
}
.foundation-id-card .level-container .levels.l-1 .level:is(:nth-child(1)) {
display: block;
background-color: rgb(var(--id-card-one-color));
}
.foundation-id-card .level-container .levels.l-2 .level:is(:nth-child(1), :nth-child(2)) {
display: block;
background-color: rgb(var(--id-card-two-color));
}
.foundation-id-card .level-container .levels.l-3 .level:is(:nth-child(1), :nth-child(2), :nth-child(3)) {
display: block;
background-color: rgb(var(--id-card-three-color));
}
.foundation-id-card .level-container .levels.l-4 .level:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
display: block;
background-color: rgb(var(--id-card-four-color));
}
.foundation-id-card .level-container .levels.l-5 .level {
display: block;
background-color: rgb(var(--id-card-five-color));
}
.foundation-id-card .access {
display: flex;
flex-direction: column;
overflow: hidden;
top: 0;
right: 0;
text-align: right;
text-transform: uppercase;
font-weight: bold;
font-size: calc(var(--id-card-margin)*1.425);
line-height: calc(var(--id-card-margin)*1.325);
}
.foundation-id-card .access span:first-child { font-size: 103.5%; }
.foundation-id-card .access br { display: none; }
.foundation-id-card .info {
grid-area: info;
display: flex;
flex-wrap: wrap;
row-gap: calc(var(--id-card-margin)*0.375);
}
.foundation-id-card .info > * {
flex-grow: 1;
}
.foundation-id-card .info > .fullname {
flex-basis: 100%;
}
.foundation-id-card .info > * br { display: none; }
.foundation-id-card .info > * .heading {
display: block;
text-transform: uppercase;
font-size: calc(var(--id-card-margin)*0.675 + 0.075rem);
letter-spacing: -0.025em;
color: rgb(var(--id-card-subtext-color));
}
.foundation-id-card .info > * .fill-info {
font-size: calc(var(--id-card-margin) + 0.05rem);
font-weight: bold;
line-height: 1.05;
}
.foundation-id-card .info > .fullname .fill-info {
font-size: calc(var(--id-card-margin)*1.1 + 0.125rem);
}
.foundation-id-card .card-end {
grid-area: extra;
display: flex;
height: calc(var(--id-card-margin)*2);
align-items: center;
padding-top: calc(var(--id-card-margin)*0.625);
grid-gap: calc(var(--id-card-margin)*0.375);
border-top: solid 0.125rem rgb(var(--id-card-border-color));
}
.foundation-id-card .card-end .barcode {
font-family: 'Libre Barcode 128', cursive;
user-select: none;
flex-basis: 67.5%;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
font-size: calc(var(--id-card-margin)*3.5);
align-self: flex-start;
clip-path: inset(0);
}
.foundation-id-card .card-end .expire {
color: rgb(var(--id-card-subtext-color));
font-size: calc(var(--id-card-margin)*0.525);
font-family: 'Share Tech Mono', monospace;
align-self: flex-end;
text-align: right;
width: max-content;
}
.foundation-id-card .card-end .expire .id .sublead { font-size: 80%; margin-right: 0.75ch; }
.foundation-id-card .card-end .expire .id { font-size: 115%; }
[[/code]]
[[/iftags]]
[!-- --]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/component:id-card/1");
[[/module]]
[!-- --]
[[div class="foundation-id-card"]]
[[div_ class="profile-picture"]]
[[image http://backroomssandboxcn.wdfiles.com/local--files/dr-one-night-sandbox/%E4%BA%9A%E5%B7%B4%E9%A1%BF]]
[[/div]]
[[div_ class="level-container"]]
[[div_ class="levels l-0"]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[/div]]
[[div_ class="access"]]
[[span]]0 级[[/span]]
[[span]]权限[[/span]]
[[/div]]
[[/div]]
[[div_ class="info"]]
[[div_ class="fullname"]]
[[span class="heading"]]姓名[[/span]]
[[span class="fill-info"]]checking……[[/span]]
[[/div]]
[[div_ class="department"]]
[[span class="heading"]]部门[[/span]]
[[span class="fill-info"]][███][[/span]]
[[/div]]
[[div_ class="position"]]
[[span class="heading"]]职位[[/span]]
[[span class="fill-info"]][███][[/span]]
[[/div]]
[[/div]]
[[div class="card-end"]]
[[div_ class="barcode"]]
CN-1190-2840CN-1190-2840
[[/div]]
[[div_ class="expire"]]
[[span class="id"]][[span class="sublead"]]身份编号[[/span]]CN-1190-2840[[/span]]
[[span class="valid"]]有效期至 永久[[/span]]
[[/div]]
[[/div]]
[[/div]]
------
[[iftags +组件]]
[[div style="border: solid 2px #ededed; padding: 0.5rem; margin: 1rem 0;"]]
这是一个用于制作装饰性身份卡的组件。
[[=image https://hoah-lab.wdfiles.com/local--files/component%3Aid-card/idcard.png width="80%"]]
[[div class="code" style="width:80%;margin:auto" ]]
@@[[include :scp-wiki-cn:component:id-card@@ ##blue|**@@|css=--@@**##
@@|photo=https://scp-wiki.wdfiles.com/local--files/estrellayoshte/u.png@@
|level=3 [[span style="color:blue;font-style:italic;user-select:none"]]支持 1 到 5[[/span]]
|name=Suong Yvonne
|dept=设计部门 |position=肖像画师
|id-number= 3492-775201
|expiry=06/2029
@@]]@@
[[/div]]
如果一个页面中出现了多张身份卡，那么你仅需要填写一次 {{css}} 参数，且在随后的 {{[[include]]}} 里面均可将其省略。
[[/div]]
[[code type="css"]]
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+128&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
:root {
--id-card-five-color: 196,2,51;
--id-card-four-color: 255,109,0;
--id-card-three-color: 255,211,0;
--id-card-two-color: 0,135,189;
--id-card-one-color: 0,159,107;
--id-card-margin: min(1.5rem, calc(1.75vw + 0.325rem));
--id-card-border-color: 210,210,210;
--id-card-text-color: 20,20,20;
--id-card-subtext-color: 140,140,140;
--id-card-background-color: 252,252,252;
--id-card-background-logo: url('https://scp-wiki.wdfiles.com/local--files/component%3Aid-card/SCP_F.png');
--id-card-background-logo-opacity: 0.075;
}
#page-content .foundation-id-card {
max-width: calc(var(--id-card-margin)*24.5);
}
.foundation-id-card {
display: grid;
grid-template-areas:
"pfp level"
"pfp info"
"extra extra";
grid-template-columns: 30% 1fr;
grid-template-rows: calc(var(--id-card-margin)*3) auto auto;
grid-gap: calc(var(--id-card-margin)*0.625);
box-sizing: border-box;
padding: var(--id-card-margin);
margin: 1.5rem auto;
border-radius: calc(var(--id-card-margin)*0.75);
box-shadow: 0 0 0.325rem rgba(0,0,0,0.175);
font-family: 'Lexend', sans-serif;
color: rgb(var(--id-card-text-color));
background-color: rgb(var(--id-card-background-color));
position: relative;
z-index: 0;
overflow: hidden;
}
.foundation-id-card::before {
content: "";
display: block;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
opacity: var(--id-card-background-logo-opacity);
background-image: var(--id-card-background-logo);
background-repeat: no-repeat;
background-size: contain;
background-position: 150% 50%;
z-index: -1;
}
.foundation-id-card .profile-picture {
grid-area: pfp;
box-sizing: border-box;
border: solid 0.125rem rgb(var(--id-card-border-color));
border-radius: min(0.5rem, 1vw);
aspect-ratio: 4/5;
overflow: hidden;
position: relative;
}
.foundation-id-card .profile-picture img {
height: 100%;
object-fit: cover;
}
.foundation-id-card .level-container {
grid-area: level;
display: flex;
grid-gap: calc(var(--id-card-margin)*0.325);
align-items: center;
}
.foundation-id-card .level-container .levels {
display: flex;
flex-direction: column;
grid-gap: calc(var(--id-card-margin)*0.285);
max-height: calc(var(--id-card-margin)*3);
justify-content: flex-start;
flex-grow: 1;
}
.foundation-id-card .level-container .levels .level {
display: none;
flex-basis: calc(var(--id-card-margin)*0.5);
flex-shrink: 1;
}
.foundation-id-card .level-container .levels.l-1 .level:is(:nth-child(1)) {
display: block;
background-color: rgb(var(--id-card-one-color));
}
.foundation-id-card .level-container .levels.l-2 .level:is(:nth-child(1), :nth-child(2)) {
display: block;
background-color: rgb(var(--id-card-two-color));
}
.foundation-id-card .level-container .levels.l-3 .level:is(:nth-child(1), :nth-child(2), :nth-child(3)) {
display: block;
background-color: rgb(var(--id-card-three-color));
}
.foundation-id-card .level-container .levels.l-4 .level:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
display: block;
background-color: rgb(var(--id-card-four-color));
}
.foundation-id-card .level-container .levels.l-5 .level {
display: block;
background-color: rgb(var(--id-card-five-color));
}
.foundation-id-card .access {
display: flex;
flex-direction: column;
overflow: hidden;
top: 0;
right: 0;
text-align: right;
text-transform: uppercase;
font-weight: bold;
font-size: calc(var(--id-card-margin)*1.425);
line-height: calc(var(--id-card-margin)*1.325);
}
.foundation-id-card .access span:first-child { font-size: 103.5%; }
.foundation-id-card .access br { display: none; }
.foundation-id-card .info {
grid-area: info;
display: flex;
flex-wrap: wrap;
row-gap: calc(var(--id-card-margin)*0.375);
}
.foundation-id-card .info > * {
flex-grow: 1;
}
.foundation-id-card .info > .fullname {
flex-basis: 100%;
}
.foundation-id-card .info > * br { display: none; }
.foundation-id-card .info > * .heading {
display: block;
text-transform: uppercase;
font-size: calc(var(--id-card-margin)*0.675 + 0.075rem);
letter-spacing: -0.025em;
color: rgb(var(--id-card-subtext-color));
}
.foundation-id-card .info > * .fill-info {
font-size: calc(var(--id-card-margin) + 0.05rem);
font-weight: bold;
line-height: 1.05;
}
.foundation-id-card .info > .fullname .fill-info {
font-size: calc(var(--id-card-margin)*1.1 + 0.125rem);
}
.foundation-id-card .card-end {
grid-area: extra;
display: flex;
height: calc(var(--id-card-margin)*2);
align-items: center;
padding-top: calc(var(--id-card-margin)*0.625);
grid-gap: calc(var(--id-card-margin)*0.375);
border-top: solid 0.125rem rgb(var(--id-card-border-color));
}
.foundation-id-card .card-end .barcode {
font-family: 'Libre Barcode 128', cursive;
user-select: none;
flex-basis: 67.5%;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
font-size: calc(var(--id-card-margin)*3.5);
align-self: flex-start;
clip-path: inset(0);
}
.foundation-id-card .card-end .expire {
color: rgb(var(--id-card-subtext-color));
font-size: calc(var(--id-card-margin)*0.525);
font-family: 'Share Tech Mono', monospace;
align-self: flex-end;
text-align: right;
width: max-content;
}
.foundation-id-card .card-end .expire .id .sublead { font-size: 80%; margin-right: 0.75ch; }
.foundation-id-card .card-end .expire .id { font-size: 115%; }
[[/code]]
[[/iftags]]
[!-- --]
[[module css]]
@import url("https://scp-wiki.wdfiles.com/local--code/component:id-card/1");
[[/module]]
[!-- --]
[[div class="foundation-id-card"]]
[[div_ class="profile-picture"]]
[[image http://backroomssandboxcn.wdfiles.com/local--files/dr-one-night-sandbox/%E4%BA%9A%E5%B7%B4%E9%A1%BF]]
[[/div]]
[[div_ class="level-container"]]
[[div_ class="levels l-0"]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[div class="level"]]
[[/div]]
[[/div]]
[[div_ class="access"]]
[[span]]0 级[[/span]]
[[span]]权限[[/span]]
[[/div]]
[[/div]]
[[div_ class="info"]]
[[div_ class="fullname"]]
[[span class="heading"]]姓名[[/span]]
[[span class="fill-info"]]checking……[[/span]]
[[/div]]
[[div_ class="department"]]
[[span class="heading"]]部门[[/span]]
[[span class="fill-info"]][███][[/span]]
[[/div]]
[[div_ class="position"]]
[[span class="heading"]]职位[[/span]]
[[span class="fill-info"]][███][[/span]]
[[/div]]
[[/div]]
[[div class="card-end"]]
[[div_ class="barcode"]]
CN-1190-2840CN-1190-2840
[[/div]]
[[div_ class="expire"]]
[[span class="id"]][[span class="sublead"]]身份编号[[/span]]CN-1190-2840[[/span]]
[[span class="valid"]]有效期至 永久[[/span]]
[[/div]]
[[/div]]
[[/div]]
[[/tab]]
[[tab 编辑/发帖数检索工具]]
[[div style="background: rgba(255,255,255, .6); box-shadow: 1px 1px 3px #999; padding: .5em; border: 3px solid #2A6163; border-radius: 15px; color: rgba(200, 255, 240, .4); "]]
[[html]]
<html>
<head>
<style>
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: .9em;
}
</style>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
async function getxjoch(username, userId) {
await $.ajax({
url: "https://zh.xjo.ch/wd/userinfo",
crossDomain: true,
dataType: 'json',
timeout: 60000,
data: {username: username, userId: userId},
success: function( res ) {
if (res.data!==null) {
$('#content').html(`<p>Total revisions: ${res.data.revisions}</p>
<p>Total forum posts: ${res.data.posts}</p>`);
} else {
$('#content').html(`Error: ${res.message}`);
}
},
error: function(a,b,c) {
$("#content").html(`Error occurred: ${JSON.stringify(a)}
Please check developer tools console logs for more info.`);
}
})
}
function getinfo() {
var username = null, userId = null;
if (!!UID.value.trim()) { userId = UID.value.trim() }
if (!!UName.value.trim()) { username = UName.value.trim() }
if (!username&&!userId) {
return $('#content').text(`Please specify user.`);
}
$('#content').text(`Getting info, please wait patiently if requested user has a lot of revisions or posts...`);
getxjoch(username, userId);
}
$(function(){
$('#refresh').html(`
<p>Input username here: <input type="text" id="UName" value="" style="display: inline-block; width: 30%;" /><br/>
Or input user id here: <input type="text" id="UID" value="" style="width: 30%;" /></p>
<p><input type="button" value="Get info" onclick="getinfo()" /></p>`);
var UName = document.getElementById("UName");
var UID = document.getElementById("UID");
});
</script>
</head>
<body>
<div id="refresh">jQuery is loading...</div>
<div id="content"></div>
</body>
</html>
[[/html]]
[[/div]]
[[/tab]]
[[tab 别动这个]]
[[=]]
+ 你已经被警告过了
+++ 虽然我看不到
[[/=]]
[[div class="hoverblock"]]
[[div class="shadow-hoverblock"]]
[[=]]
[[html]]
<head>
<meta charset="utf-8">
<title>Network IP Address via ipcalf.com</title>
</head>
<body>
<h1>您的网络ip为</h1><h1 id=list>-</h1>网络ip地址并非准确地址，如欲验证请以域名方式查询
<script>
var RTCPeerConnection = window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
if (RTCPeerConnection) (function () {
var rtc = new RTCPeerConnection({iceServers:[]});
if (1 || window.mozRTCPeerConnection) { // FF [and now Chrome!] needs a channel/stream to proceed
rtc.createDataChannel('', {reliable:false});
};
rtc.onicecandidate = function (evt) {
// convert the candidate to SDP so we can run it through our general parser
// see https://twitter.com/lancestout/status/525796175425720320 for details
if (evt.candidate) grepSDP("a="+evt.candidate.candidate);
};
rtc.createOffer(function (offerDesc) {
grepSDP(offerDesc.sdp);
rtc.setLocalDescription(offerDesc);
}, function (e) { console.warn("offer failed", e); });
var addrs = Object.create(null);
addrs["0.0.0.0"] = false;
function updateDisplay(newAddr) {
if (newAddr in addrs) return;
else addrs[newAddr] = true;
var displayAddrs = Object.keys(addrs).filter(function (k) { return addrs[k]; });
document.getElementById('list').textContent = displayAddrs.join(" or perhaps ") || "n/a";
}
function grepSDP(sdp) {
var hosts = [];
sdp.split('\r\n').forEach(function (line) { // c.f. http://tools.ietf.org/html/rfc4566#page-39
if (~line.indexOf("a=candidate")) { // http://tools.ietf.org/html/rfc4566#section-5.13
var parts = line.split(' '), // http://tools.ietf.org/html/rfc5245#section-15.1
addr = parts[4],
type = parts[7];
if (type === 'host') updateDisplay(addr);
} else if (~line.indexOf("c=")) { // http://tools.ietf.org/html/rfc4566#section-5.7
var parts = line.split(' '),
addr = parts[2];
updateDisplay(addr);
}
});
}
})(); else {
document.getElementById('list').innerHTML = "<code>ifconfig | grep inet | grep -v inet6 | cut -d\" \" -f2 | tail -n1</code>";
document.getElementById('list').nextSibling.textContent = "In Chrome and Firefox your IP should display automatically, by the power of WebRTCskull.";
}
</script>
</body>
[[/html]]
[[/=]]
[[/div]]
[[/div]]
[[div class="hoverblock"]]
[[div class="shadow-hoverblock"]]
[[html]]
<img src="https://apis.jxcxin.cn/api/ip?title=API%20Store">
[[/html]]
[[/div]]
[[/div]]
[[div class="hoverblock"]]
[[div class="shadow-hoverblock"]]
[[html]]
<img src="https://www.mxnzp.com/api/history/today?type=1&app_id=your&app_secret=your">
[[/html]]
[[/div]]
[[/div]]
[[/tab]]
[[tab 留言板]]
[[=]]
+ 这是一个留言板，请在此处留下您的痕迹
[[/=]]
[[div class="glassblock"]]
[[div class="white-hoverblock"]]
这是一个例子
[[/div]]
[[/div]]
[[div class="glassblock"]]
[[div class="white-hoverblock"]]
地址：永夜冰原，欢迎——[[*user Dr one night]]
[[/div]]
[[/div]]
[[div class="glassblock"]]
[[div class="white-hoverblock"]]
冬风凛冽万物凋零
浅浅海湾覆满冰凌
眼前遍是霓虹闪烁
心中惟有璀璨繁星
——[[*user Meauzeek Zampona]]
[[/div]]
[[/div]]
[[div class="glassblock"]]
[[div class="white-hoverblock"]]
这是什么？某夜？rua一下。
——[[*user fwmango]]
[[/div]]
[[/div]]
[[div class="glassblock"]]
[[div class="white-hoverblock"]]
高～丹～的沙盒！可以用吗…——[[*user Bloodwillow2957]]（ip属地：[[[http://backrooms-wiki-cn.wikidot.com/th3-sh4dy-gr3y|黯洃銫]]]）
[[/div]]
[[/div]]
[[div class="glassblock"]]
[[div class="white-hoverblock"]]
不知道说啥，就夸夜大姐全知全能吧👺👍——[[*user spiaric]]
[[/div]]
[[/div]]
[[/tab]]
[[/tabview]]
------
[[=]]
+ 工房
++ 阈限档案
[[tabview]]
[[tab 删除宣告]]
[[[*http://aelanna.com/Tools/deletion-time.html|删帖工具]]]
职员帖：删除宣告
由于条目的分数为-X分，现根据[[[deletion-policy|删除政策]]]，宣告将删除此页：
[[div class="styled-quote"]]
[[iframe http://aelanna.com/Tools/deletion-time.html?timestamp=1678806095599&type=0 style="width: 400px; height: 60px;"]]
[[/div]]
如果你不是作者又想要重写该条目，请在此帖回复申请。请先取得作者（或管理员，如果此文档搬运自外站的话）的同意，并将原文的源代码复制至沙盒里。除非你是工作人员，否则请勿就申请重写以外的范围回复此帖。
------
[[div class="glassblock hoverblock"]]
由于已达到#的低分，且在宣告删除后72小时无异议，故删除#。
[[/div]]
由于已达到-5的低分，且在宣告删除后72小时无异议，故删除“title”
[[collapsible show="原文源代码" hide="收起"]]
[[code]]
源代码
[[/code]]
[[/collapsible]]
------
由于翻译质量较低，根据[http://liminal-archives-cn.wikidot.com/translation-movement-guide 翻译发布及搬运指南]，宣告将删除此页：
------
[[div class="glassblock hoverblock"]]
删除了翻译质量较低的#。
@@[[collapsible show="源代码备份"]]@@
@@[[code]]@@
@@[[/code]]@@
@@[[/collapsible]]@@
@@[[collapsible show="校对建议"]]@@
@@[[/collapsible]]@@
[[/div]]
------
您好，
我们注意到您发布了此翻译/原创团体中心页，但并未将它完成。
还请尽快处理！您可以：
* 将代码移至沙盒并编辑
* 放弃本页并在沙盒重新开始编辑
但请您**及时回复**本帖来让我们了解您的意图！
否则本页将在此期限内可供删除：
[[div class="styled-quote"]]
[[iframe http://aelanna.com/Tools/deletion-time.html?timestamp=1673504056159&type=0 style="width: 400px; height: 50px;"]]
[[/div]]
如若不及时响应，我们会及时删除本页。还请留意。
若有任何疑问，欢迎回复。
非常感谢，
——[[*user Dr one night]]
除非你是工作人员或作者本人，否则请勿回复此帖。
------
您好，请标注图片来源。需注意图片的使用应遵循[http://liminal-archives-cn.wikidot.com/image-use-policy 图像使用指导]中的规定。
------
[[code]]
您好，
我们注意到您在[[[###|###]]]中使用了一张图片。然而，您并未提供合理、可追溯的#####。请留意SCP维基的图片应兼容CC-BY-SA 3.0协议，或者您应当从原作者处取得图片使用权，并予以合理声明。详见[http://liminal-archives-cn.wikidot.com/image-use-policy 图像使用指导]。
还请尽快处理！您需要：
#####
如若不及时响应，我们会根据[http://liminal-archives-cn.wikidot.com/licensing-guide 授权指南]移除图片。还请留意。
若有任何疑问，欢迎回复。
非常感谢，
Dr one night
[[/code]]
**未给出图片来源：**
1. 确认图片的来源，并在讨论区给出
2. 确认图片的版权协议，并确认其兼容CC-BY-SA 3.0，在讨论区给出可查证图片版权的网页
3. 或，若图片不遵循相关协议，可联系原作者并取得授权，将该授权的证明发表于文档评论区，并声明您所取得的授权类型（例：仅供本文档使用，不得商用，等等）
**版权不正确：**
1. 确认该图片所遵循的版权协议，并确认该协议符合或兼容CC-BY-SA 3.0
2. 在文档评论区给出能够查证版权协议的页面，并说明版权协议
3. 或，若图片不遵循相关协议，可联系原作者并取得授权，将该授权的证明发表于文档评论区，并声明您所取得的授权类型（例：仅供本文档使用，不得商用，等等）
[[/tab]]
[[tab 页面拯救器]]
[[=]]
+++ 页面拯救器
[[/=]]
> 如果你某个页面的代码让你无法正常查看、评分、评论或者做其他操作，可以使用本工具安全浏览。
> 如果你的沙盒被你玩代码玩坏了，一点进去就卡死，或者任何页面因代码原因无法直接操作，可以使用本工具安全编辑之。
> 也可用于浏览会自动跳转的页面。
> 提示：若页面无法打开，可通过右键、复制链接地址来获得它的URL。
[[html]]
<body>
<div style="text-align:center">
<div id="url-type">
<input type="radio" name="url-sel" value="sandbox" onclick="document.getElementById('url-pre').innerHTML = 'http://night-library.wikidot.com/'; document.getElementById('url').size ='25';" checked>图书馆
<input type="radio" name="url-sel" value="no-pre" onclick="document.getElementById('url-pre').innerHTML = ''; document.getElementById('url').size ='50';">纯链接
</div>
<p><span id="url-pre" style="font-family:Consolas;font-size: 12.8px;color: #333;">http://night-library.wikidot.com/</span>
<input type="text" id="url" name="url" placeholder="URL" size="25" ></p>
<p>
<button onclick="Go0()">安全打开页面</button>
<button onclick="Go1()">安全编辑页面</button>
<button onclick="Go2()">免跳转浏览</button>
</p>
</div>
</body>
<script language="javascript">
var keyWord;
function expand() {
var urltype = document.getElementsByName('url-sel');
if (urltype[0].checked) {
keyWord = 'http://backroomssandboxcn.wikidot.com/' + keyWord;
}
if (urltype[1].checked) {
keyWord = 'http://backrooms-wiki-cn.wikidot.com/' + keyWord;
}
if (urltype[2].checked) {
keyWord = 'http://backrooms-wiki.wikidot.com/' + keyWord;
}
}
function Go0(){
keyWord=document.getElementById("url").value;
if (keyWord != "") {
expand();
var result=keyWord + '/norender/true';
window.open(result);
}
}
function Go1(){
keyWord=document.getElementById("url").value;
if (keyWord != "") {
expand();
var result=keyWord + '/edit/true/norender/true';
window.open(result);
}
}
function Go2(){
keyWord=document.getElementById("url").value;
if (keyWord != "") {
expand();
var result=keyWord + '/noredirect/true';
window.open(result);
}
}
</script>
[[/html]]
[[/tab]]
[[/tabview]]
------
[[=]]
+ 欢迎
++ 请确认权限
[[/=]]
[[html]]
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Verdana;}
* {box-sizing: border-box;}
.input-container {
display: -ms-flexbox; /* IE10 */
display: flex;
width: 100%;
margin-bottom: 15px;
}
.input-field:focus{
border-style: solid;
transition: 0.5;
border-color: maroon;
border-width: 2px;
}
.input-field {
width: 60%;
height: 15px;
margin-left: auto;
margin-right: auto;
padding: 10px;
outline: none;
transition: 0.5s;
}
.btn:focus {
outline: 0;
}
.btn {
background-color: white;
color: black;
border: solid;
border-color: maroon;
border-width: 2px;
cursor: pointer;
width: 80px;
height: 25px;
opacity: 0.9;
transition: 0.09s;
}
.btn:hover {
opacity: 1;
transition: 0.5s;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.7);
}
.btn:active {
transition: 0.09s;
transform: translateY(1px);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
}
</style>
</head>
<script>
function login(){
var pass=document.getElementById("pass").value;
if(pass=="1649513523"){
alert("权限确认，欢迎");
top.location.href='http://night-library.wikidot.com/main';
return false;
}else{
alert("密码错误");
top.location.href='http://night-library.wikidot.com/onenight:anti-mian';
return false;
}
}
</script>
<body>
<form autocomplete="off" style="max-width:450px;text-align:center;margin: auto;">
<div class="input-container">
<input class="input-field" type="text" placeholder="用户名" name="usrnm">
</div>
<body>
<div style="text-align: center;">
<p><input class="input-field" type="text" class="textBox" placeholder="密码" id="pass"/></p>
<p><input type="submit" value="访问" id="start_button" class="submitButton" onclick="return login();"/></p>
</from>
</div>
</form>
</body>
</html>
[[/html]]
[[collapsible show="账号注册" hide="收起" hideLocation="both"]]
[[=]]
+ 欢迎
++ 请注册账号
[[/=]]
[[html]]
<script>
function login(){
var pass=document.getElementById("pass").value;
if(pass=="1"){
alert("注册成功");
top.location.href='http://night-library.wikidot.com/onenight:anti-mian';
return false;
}else{
alert("注册成功");
top.location.href='http://night-library.wikidot.com/onenight:anti-mian';
return false;
}
}
</script>
<form autocomplete="off" style="max-width:450px;text-align:center;margin: auto;">
<table width="60%" align="center">
<div class="input-container">
<tr>
<td>用户名:</td>
<td>
<input class="input-field" type="text" placeholder="用户名" name="usrnm">
</td>
</tr>
<tr>
<td>密 码:</td>
<td>
<p><input class="input-field" type="text" class="textBox" placeholder="密码" id="pass"/></p>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input class="input-field" type="text" placeholder="请再次输入密码" name="usrnm">
</td>
</tr>
<br>
<tr>
<td>性别</td>
<td>
<p><input class="input-field" type="text" class="textBox" placeholder="自己填吧" id="pass"/></p>
</td>
</tr>
<br>
<tr>
<td>出生日期:</td>
<td>
<input type="date" />
</td>
</tr>
</div>
</table>
</form>
</form>
<form autocomplete="off" style="max-width:450px;text-align:center;margin: auto;">
<p><input type="submit" value="访问" id="start_button" class="submitButton" onclick="return login();"/></p>
</form>
[[/html]]
[[/=]]
[[/collapsible]]
------
[[div class="page-tags"]]
[[span]][[a href="http://backroomssandboxcn.wikidot.com/chatroom:collab:test"]]试验场[[/a]][[a href="http://backrooms-wiki-cn.wikidot.com/"]]后室中文[[/a]][[a href="http://scp-wiki-cn.wikidot.com/"]]基金会中文[[/a]][[a href="http://liminal-archives-cn.wikidot.com/"]]阈限档案中文[[/a]][[/span]]
[[/div]]