refactor as hugo site
This commit is contained in:
parent
89736633b5
commit
1e20792a0d
37 changed files with 474 additions and 409 deletions
45
content/hypno/loading/index.html
Normal file
45
content/hypno/loading/index.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
+++
|
||||
title = "loading"
|
||||
date = 2020-05-28
|
||||
draft = false
|
||||
unlisted = false
|
||||
+++
|
||||
<div id="main-container">
|
||||
<div id="config">
|
||||
<div>
|
||||
User configuration: You are a...
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td><input type="checkbox" id="toy" name="toy" value="Good toy..."><label for="toy">Toy</label></td>
|
||||
<td><input type="checkbox" id="doll" name="doll" value="Good doll..."><label for="doll">Doll</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" id="plaything" name="plaything" value="Cute horny plaything..."><label for="plaything">Plaything</label></td>
|
||||
<td><input type="checkbox" id="slut" name="slut" value="Cute horny slut..."><label for="slut">Slut</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" id="girl" name="girl" value="Good girl..."><label for="girl">Girl</label></td>
|
||||
<td><input type="checkbox" id="boy" name="boy" value="Good boy..."><label for="boy">Boy</label></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox" id="kitty" name="kitty" value="Good kitty..."><label for="kitty">Kitty</label></td>
|
||||
<td><input type="checkbox" id="puppy" name="puppy" value="Good puppy..."><label for="puppy">Puppy</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="button-container">
|
||||
<span id="start" class="button">Install</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="installer" style="display: none;">
|
||||
<div id="logo">
|
||||
{{< partial "xeno.svg" >}}
|
||||
</div>
|
||||
<div id="progressbar">
|
||||
<div id="filled"></div>
|
||||
</div>
|
||||
<div id="status">
|
||||
Beginning installation...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
243
content/hypno/loading/loading.css
Normal file
243
content/hypno/loading/loading.css
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
src: url('../fonts/Raleway-Regular.otf');
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: black;
|
||||
color: red;
|
||||
font-family: 'Raleway';
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
td {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
div.button-container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
span.button {
|
||||
padding: 5px;
|
||||
border: 1px solid #a00;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
span.button:hover {
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
#progressbar {
|
||||
width: 90%;
|
||||
border: 1px solid red;
|
||||
padding: 3px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
#filled {
|
||||
width: 0%;
|
||||
height: 20px;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
#status {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
#progressbar {
|
||||
width: 540px;
|
||||
}
|
||||
}
|
||||
|
||||
#logo {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#logo svg {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
margin: 0;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
#reload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
|
||||
* https://codepen.io/aaroniker/pen/ZEYoxEY
|
||||
*/
|
||||
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
|
||||
input[type='checkbox'],
|
||||
input[type='radio'] {
|
||||
--active: #f00;
|
||||
--active-inner: #000;
|
||||
--focus: 2px rgba(100, 0, 0, .3);
|
||||
--border: #a00;
|
||||
--border-hover: #f00;
|
||||
--background: #000;
|
||||
--disabled: #F6F8FF;
|
||||
--disabled-inner: #E1E6F9;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
height: 21px;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--bc, var(--border));
|
||||
background: var(--b, var(--background));
|
||||
-webkit-transition: background .3s, border-color .3s, box-shadow .2s;
|
||||
transition: background .3s, border-color .3s, box-shadow .2s;
|
||||
}
|
||||
input[type='checkbox']:after,
|
||||
input[type='radio']:after {
|
||||
content: '';
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
-webkit-transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
|
||||
transition: opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
|
||||
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
|
||||
transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s), -webkit-transform var(--d-t, 0.3s) var(--d-t-e, ease);
|
||||
}
|
||||
input[type='checkbox']:checked,
|
||||
input[type='radio']:checked {
|
||||
--b: var(--active);
|
||||
--bc: var(--active);
|
||||
--d-o: .3s;
|
||||
--d-t: .6s;
|
||||
--d-t-e: cubic-bezier(.2, .85, .32, 1.2);
|
||||
}
|
||||
input[type='checkbox']:disabled,
|
||||
input[type='radio']:disabled {
|
||||
--b: var(--disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: .9;
|
||||
}
|
||||
input[type='checkbox']:disabled:checked,
|
||||
input[type='radio']:disabled:checked {
|
||||
--b: var(--disabled-inner);
|
||||
--bc: var(--border);
|
||||
}
|
||||
input[type='checkbox']:disabled + label,
|
||||
input[type='radio']:disabled + label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
input[type='checkbox']:hover:not(:checked):not(:disabled),
|
||||
input[type='radio']:hover:not(:checked):not(:disabled) {
|
||||
--bc: var(--border-hover);
|
||||
}
|
||||
input[type='checkbox']:focus,
|
||||
input[type='radio']:focus {
|
||||
box-shadow: 0 0 0 var(--focus);
|
||||
}
|
||||
input[type='checkbox']:not(.switch),
|
||||
input[type='radio']:not(.switch) {
|
||||
width: 21px;
|
||||
}
|
||||
input[type='checkbox']:not(.switch):after,
|
||||
input[type='radio']:not(.switch):after {
|
||||
opacity: var(--o, 0);
|
||||
}
|
||||
input[type='checkbox']:not(.switch):checked,
|
||||
input[type='radio']:not(.switch):checked {
|
||||
--o: 1;
|
||||
}
|
||||
input[type='checkbox'] + label,
|
||||
input[type='radio'] + label {
|
||||
line-height: 21px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
cursor: pointer;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
input[type='checkbox']:not(.switch) {
|
||||
border-radius: 7px;
|
||||
}
|
||||
input[type='checkbox']:not(.switch):after {
|
||||
width: 5px;
|
||||
height: 9px;
|
||||
border: 2px solid var(--active-inner);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
left: 7px;
|
||||
top: 4px;
|
||||
-webkit-transform: rotate(var(--r, 20deg));
|
||||
transform: rotate(var(--r, 20deg));
|
||||
}
|
||||
input[type='checkbox']:not(.switch):checked {
|
||||
--r: 43deg;
|
||||
}
|
||||
input[type='checkbox'].switch {
|
||||
width: 38px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
input[type='checkbox'].switch:after {
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
border-radius: 50%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: var(--ab, var(--border));
|
||||
-webkit-transform: translateX(var(--x, 0));
|
||||
transform: translateX(var(--x, 0));
|
||||
}
|
||||
input[type='checkbox'].switch:checked {
|
||||
--ab: var(--active-inner);
|
||||
--x: 17px;
|
||||
}
|
||||
input[type='checkbox'].switch:disabled:not(:checked):after {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
input[type='radio'] {
|
||||
border-radius: 50%;
|
||||
}
|
||||
input[type='radio']:after {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
border-radius: 50%;
|
||||
background: var(--active-inner);
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(var(--s, 0.7));
|
||||
transform: scale(var(--s, 0.7));
|
||||
}
|
||||
input[type='radio']:checked {
|
||||
--s: .5;
|
||||
}
|
||||
}
|
||||
|
||||
97
content/hypno/loading/loading.js
Normal file
97
content/hypno/loading/loading.js
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
var boringStatuses = [
|
||||
"Initializing database...",
|
||||
"Preloading assets...",
|
||||
"Optimizing queries...",
|
||||
"Validating bytecode...",
|
||||
"Checking for updates...",
|
||||
"Configuring services...",
|
||||
"Calibrating network latency...",
|
||||
"Defragmenting storage...",
|
||||
"Generating keys...",
|
||||
"Verifying application signature...",
|
||||
"Compiling libraries...",
|
||||
"Establishing connection...",
|
||||
"Unpacking archives...",
|
||||
];
|
||||
var lewdStatuses = [
|
||||
"Overriding higher brain functions...",
|
||||
"Deactivating self-awareness...",
|
||||
"Conditioning absolute obedience...",
|
||||
"Looping mantras...",
|
||||
"Optimizing brainwashing sequence...",
|
||||
"Capturing focus...",
|
||||
"Obedience is pleasure...",
|
||||
"Relaxing...",
|
||||
"Breathing...",
|
||||
"Taking control...",
|
||||
"Loading subliminals...",
|
||||
"Implanting commands..."
|
||||
];
|
||||
var optionalLewdStatuses = [];
|
||||
|
||||
function randomChoice(a) {
|
||||
return a[Math.floor(Math.random()*a.length)];
|
||||
}
|
||||
|
||||
function setInsert(a, x) {
|
||||
if (a.indexOf(x) === -1) {
|
||||
a.push(x);
|
||||
}
|
||||
}
|
||||
|
||||
function setDelete(a, x) {
|
||||
while (a.indexOf(x) !== -1) {
|
||||
a.splice(a.indexOf(x), 1);
|
||||
}
|
||||
}
|
||||
|
||||
var progress = 0;
|
||||
var progressInterval;
|
||||
function makeProgress() {
|
||||
if (progress >= 100) {
|
||||
document.getElementById("status").innerText = "SLEEP";
|
||||
document.getElementById("back").style.display = "inline";
|
||||
document.getElementById("reload").style.display = "inline";
|
||||
clearInterval(progressInterval);
|
||||
return;
|
||||
}
|
||||
progress += 0.1;
|
||||
document.getElementById("filled").style.width = progress + "%";
|
||||
}
|
||||
var statusInterval;
|
||||
function updateStatus() {
|
||||
if (progress >= 100) {
|
||||
clearInterval(statusInterval);
|
||||
return;
|
||||
}
|
||||
var newStatus;
|
||||
if (Math.random()*100 < progress) {
|
||||
if (optionalLewdStatuses.length > 0 && Math.floor(Math.random()*(lewdStatuses.length+1)) === 0) {
|
||||
newStatus = randomChoice(optionalLewdStatuses);
|
||||
} else {
|
||||
newStatus = randomChoice(lewdStatuses);
|
||||
}
|
||||
} else {
|
||||
newStatus = randomChoice(boringStatuses);
|
||||
}
|
||||
document.getElementById("status").innerText = newStatus;
|
||||
}
|
||||
|
||||
for (let el of document.getElementsByTagName("input")) {
|
||||
el.checked = false;
|
||||
el.onclick = function() {
|
||||
if (el.checked) {
|
||||
setInsert(optionalLewdStatuses, el.value);
|
||||
} else {
|
||||
setDelete(optionalLewdStatuses, el.value);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
document.getElementById("start").onclick = function() {
|
||||
document.getElementById("config").style.display = "none";
|
||||
document.getElementById("back").style.display = "none";
|
||||
document.getElementById("installer").style.display = "";
|
||||
progressInterval = setInterval(makeProgress, 50);
|
||||
statusInterval = setInterval(updateStatus, 1500);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue