Passcode

Link to article: Passcode.

.pass-wrapper { display: contents; }
iframe.pass-check {
    display: block;
    width: min(100%, 27.5rem);
    height: 8.75rem!important;
    margin: auto;
}

.pass-content { display: none; }
.pass-check[style^="height: 1600"] + .pass-content { display: block; }

border: solid .1rem #ededed; padding: 0.325rem 1.5rem; margin: 1.5em 0;

(none)

```
blockquote
```
```
pass-content
```
```
pass-wrapper
```
```
pass-check
```

[[iftags +component]]
[[>]]
[[module Rate]]
[[/>]]
[[div style="border: solid .1rem #ededed; padding: 0.325rem 1.5rem; margin: 1.5em 0;"]]
This is a component that gates content behind a passcode input module.

To use, add the following:

[[div class="blockquote"]]
@@[[include :scp-wiki:component:passcode@@
|passcode=password123
]]
@@[[div class="pass-content"]]@@
hidden content here
@@[[/div]]@@
@@[[/div]]@@
[[/div]]

To change the look of the module, append a {{|css=}} parameter to pass custom CSS into it.

This is for display purpose **only**, and is not implicative of any actual security measures — For all intents and purposes, it's a very fancy collapsible. Don't use actual identifying information as the passcode.

++ How it works

The password module is an {{[[html]]}} block that take advantage of Wikidot's built-in ability to resize iframes by writing inline height style to it.

This component resizes the content to an arbitrary px value (1600px, in this case), which is detected on the outside with a {{[style^="height: 1600"]}} attribute selector — effectively creating a dynamic multi-state toggle.

++ Credits

The success checkmark icon is from [https://thenounproject.com/icon/checkmark-5845039/ The Noun Project] by zackwillshon.
[[/div]]
[[/iftags]]

[[module css]]
.pass-wrapper { display: contents; }
iframe.pass-check {
    display: block;
    width: min(100%, 27.5rem);
    height: 8.75rem!important;
    margin: auto;
}

.pass-content { display: none; }
.pass-check[style^="height: 1600"] + .pass-content { display: block; }
[[/module]]

[[div_ class="pass-wrapper"]]
[[html class="pass-check"]]
<head>
<meta charset="UTF-8" />
<script type="text/javascript">
function verify() {
  if(document.getElementById('pw-field').value == "{$passcode}"){
  document.getElementById('logic').classList.remove("false");
  document.getElementById('logic').classList.add("true");
  }
  else {
  document.getElementById('logic').classList.remove("false");
  document.getElementById('logic').offsetWidth;
  document.getElementById('logic').classList.add("false");
  }
}
</script>
<style type="text/css">
@import url('https://api.fonts.coollabs.io/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:where(:root) {
    --text: 248 248 248;
    --background: 38 44 50;
    --main: 35 146 228;
    --true: 43 190 75;
    --false: 255 81 42;
    --checkmark: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 95 95'%3E%3Cpath d='M47.5 0a47.5 47.5 0 1 0 0 95 47.5 47.5 0 0 0 0-95Zm0 6.3a41.1 41.1 0 1 1 .1 82.3 41.1 41.1 0 0 1-.1-82.3zm22.3 22.2c-.8 0-1.6.4-2.1 1L41.2 56.7 30 45.2a3.2 3.2 0 1 0-4.6 4.4L39 63.4a3.2 3.2 0 0 0 4.5 0L72.2 34a3.2 3.2 0 0 0-2.4-5.4z'/%3E%3C/svg%3E");
}
body {
    position: relative;
    font-family: 'Space Mono', monospace;
}

#logic {
    display: flex;
    flex-direction: column;
    gap: .175rem;
    height: 8.75rem;
    padding: 1.375rem; padding-block-start: 0.175rem;
    box-sizing: border-box;
    border-radius: .625rem;
    color: rgb(var(--text));
    background: rgb(var(--background));
}
#logic::before {
    content: "";
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    pointer-events: none;
    z-index: -1;
}
#logic::after {
    content: "";
    position: absolute;
    width: 100%; height: 100%;
    max-height: 1500px;
    top: 0; left: 0;
    background: rgb(var(--true));
    pointer-events: none;
    opacity: 0;
    z-index: 1;

    -webkit-mask: var(--checkmark) center no-repeat;
    mask: var(--checkmark) center no-repeat;
    -webkit-mask-size: 3.75rem;
    mask-size: 3.75rem;
}

#logic > label {
    text-align: center;
    width: 100%;
    font-size: .75em;
    font-weight: bold;
    font-style: italic;
    color: rgb(var(--false));
    visibility: hidden;
}

#pw-field {
    appearance: none;
    border: none;
    border-radius: 0.25rem;
    flex-grow: 1;
    padding: 0.5rem;
    font-size: 1.0125em;
    color: inherit;
    font-family: inherit;
    background: rgb(var(--text)/.075);
    outline: solid 0 rgb(var(--main));
    transition: outline 0.175s ease-out;
}
#pw-field:focus-visible { outline-width: .25rem; }

#enter-button {
    appearance: none;
    border: none;
    border-radius: 0.25rem;
    flex-grow: 1;
    padding: .375rem;
    margin-block-start: .5rem;
    font-family: inherit;
    font-size: .95em;
    font-weight: bold;
    letter-spacing: .05em;
    text-align: center;
    cursor: pointer;
    background-color: rgb(var(--text));
    color: rgb(var(--background));
    outline: solid 0 rgb(var(--main));
    transition: color 0.15s ease-out, background-color 0.05s ease, outline 0.175s ease-out;
}
#enter-button:is(:hover,:focus) {
    background-color: rgb(var(--main));
    color: rgb(var(--text));
    outline-width: .25rem;
}

/*--------------------------------*/

#logic.false > label {
    visibility: visible;
    animation: incorrect 0.175s;
    animation-fill-mode: forwards;
}
@keyframes incorrect {
0% { opacity: 0; }
100% { opacity: 1; }
}

#logic.true::before {
    height: 1600px;
}

#logic.true > * {
    opacity: 0;
    pointer-events: none;
    user-select: none;
    transition: opacity 0.175s ease-out 0.175s;
}
#logic.true::after {
    opacity: 1;
    transition: opacity 0.25s ease-out 0.425s;
}
</style>
<style type="text/css">
{$css}
</style>
</head>
<body>
<div id="logic">
  <label for="if-fail">INCORRECT</label>
  <input type="text" id="pw-field" name="password"/>
  <input type="submit" id="enter-button" value="SUBMIT" onclick="verify()"/>
</div>
</body>
[[/html]]

Passcode

Module Styles

Inline Styles

Includes

CSS Classes

Page Source