refactor as hugo site
This commit is contained in:
parent
89736633b5
commit
1e20792a0d
37 changed files with 474 additions and 409 deletions
24
content/hypno/colors/colors.css
Normal file
24
content/hypno/colors/colors.css
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
#word {
|
||||
font-size: 80px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: red;
|
||||
}
|
||||
|
||||
#word img {
|
||||
height: 100px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
#word svg path {
|
||||
fill: #c00;
|
||||
}
|
||||
|
||||
#word svg:hover path {
|
||||
fill: red;
|
||||
}
|
||||
42
content/hypno/colors/colors.js
Normal file
42
content/hypno/colors/colors.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
var started = false;
|
||||
var showControls = false;
|
||||
|
||||
var colorWords = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
|
||||
var hypnoWords = ["sleep", "relax", "fall", "deeper", "trance"];
|
||||
var colors = ["red", "orange", "yellow", "green", "blue", "purple", "white"];
|
||||
var wordEl = document.getElementById("word");
|
||||
|
||||
function randomChoice(a) {
|
||||
return a[Math.floor(Math.random()*a.length)];
|
||||
}
|
||||
|
||||
var hypnoFrequency = 0;
|
||||
var hypnoIncrements = 10;
|
||||
function changeWord() {
|
||||
var wordList = (Math.random()*hypnoIncrements < hypnoFrequency) ? hypnoWords : colorWords;
|
||||
var newWord;
|
||||
do {
|
||||
newWord = randomChoice(wordList);
|
||||
} while (newWord === wordEl.innerText);
|
||||
|
||||
var newColor;
|
||||
do {
|
||||
newColor = randomChoice(colors);
|
||||
} while (newColor === wordEl.style.color);
|
||||
|
||||
wordEl.innerText = newWord;
|
||||
wordEl.style.color = newColor;
|
||||
}
|
||||
|
||||
window.onclick = function () {
|
||||
if (!started) {
|
||||
started = true;
|
||||
document.getElementById("controls").style.display = "none";
|
||||
changeWord();
|
||||
setInterval(changeWord, 1000);
|
||||
setInterval(function() { if (hypnoFrequency < hypnoIncrements) { hypnoFrequency++; } }, 5000);
|
||||
} else {
|
||||
document.getElementById("controls").style.display = showControls ? "none" : "block";
|
||||
showControls = !showControls;
|
||||
}
|
||||
}
|
||||
7
content/hypno/colors/index.html
Normal file
7
content/hypno/colors/index.html
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
+++
|
||||
title = "colors"
|
||||
date = 2018-11-01
|
||||
draft = false
|
||||
unlisted = false
|
||||
+++
|
||||
<div id="word">{{< partial "play.svg" >}}</div>
|
||||
57
content/hypno/follow/follow.css
Normal file
57
content/hypno/follow/follow.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
#logo svg {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
}
|
||||
#logo svg path {
|
||||
stroke: black;
|
||||
}
|
||||
#light {
|
||||
background: red;
|
||||
box-shadow: 0 0 80px red, 0 0 30px FireBrick, 0 0 6px DarkRed;
|
||||
border-radius: 50%;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
#light, #logo svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
animation: swing 4s ease-in-out infinite, spin 2s linear infinite;
|
||||
}
|
||||
@keyframes swing {
|
||||
0% {
|
||||
left: 90%;
|
||||
}
|
||||
50% {
|
||||
left: 10%;
|
||||
}
|
||||
100% {
|
||||
left: 90%;
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox] {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
}
|
||||
#controls {
|
||||
display: none;
|
||||
}
|
||||
input[type=checkbox]:checked ~ #controls {
|
||||
display: block;
|
||||
}
|
||||
#reload {
|
||||
display: none;
|
||||
}
|
||||
13
content/hypno/follow/index.html
Normal file
13
content/hypno/follow/index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
+++
|
||||
title = "follow"
|
||||
date = 2018-10-01
|
||||
draft = false
|
||||
unlisted = false
|
||||
+++
|
||||
<div class="fixation">
|
||||
<div id="light"></div>
|
||||
<div id="logo">
|
||||
{{< partial "xeno.svg" >}}
|
||||
</div>
|
||||
</div>
|
||||
<input type="checkbox">
|
||||
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);
|
||||
};
|
||||
8
content/hypno/web/index.html
Normal file
8
content/hypno/web/index.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
+++
|
||||
title = "web"
|
||||
date = 2020-05-29
|
||||
draft = true
|
||||
unlisted = true
|
||||
+++
|
||||
<div class="light"></div>
|
||||
<div id="circles"></div>
|
||||
19
content/hypno/web/web.css
Normal file
19
content/hypno/web/web.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.circle {
|
||||
border: solid red;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.light {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
background: red;
|
||||
box-shadow: 0 0 5px red, 0 0 2px FireBrick, 0 0 1px DarkRed;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
23
content/hypno/web/web.js
Normal file
23
content/hypno/web/web.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
var innermost = 15;
|
||||
var start = 30;
|
||||
var growth = 1.2;
|
||||
|
||||
var radius = innermost;
|
||||
for (var i = 0; radius < Math.min(window.innerWidth, window.innerHeight)/2; ++i) {
|
||||
e = document.createElement("div");
|
||||
e.className = "circle";
|
||||
e.style.height = (2*radius) + "px";
|
||||
e.style.width = (2*radius) + "px";
|
||||
document.getElementById("circles").appendChild(e);
|
||||
|
||||
radius += start * Math.pow(growth, i);
|
||||
}
|
||||
|
||||
/* document.getElementsByClassName("light")[0].animate(
|
||||
[
|
||||
{ top: "50%", left: "50%" },
|
||||
{ top: "50%", left: "50%", offset: 0.9 },
|
||||
{ top: "50%", left: "50%" }
|
||||
],
|
||||
{ duration: 10000, iterations: Infinity }
|
||||
);*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue