xenofem
/
mindjack
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

make language configurable

mistress
xenofem 2020-05-29 02:14:56 -04:00
parent cc53246d76
commit 888079aa78
2 changed files with 308 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
loading/index.html
View File

@ -1,68 +1,36 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <link rel="stylesheet" href="loading.css">
@font-face {
font-family: 'Raleway';
src: url('../fonts/Raleway-Regular.otf');
}
body {
background-color: black;
color: red;
font-family: 'Raleway';
text-align: center;
width: 100%;
margin: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#progressbar {
width: 90%;
border: 1px solid red;
padding: 3px;
margin: auto;
}
#filled {
width: 0%;
height: 20px;
background-color: red;
}
#status {
font-size: 25px;
font-weight: bold;
width: 100%;
}
@media only screen and (min-width: 600px) {
#progressbar {
width: 540px;
}
}
#logo {
height: 70px;
width: 70px;
margin: 10px;
}
.spin {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head> </head>
<body> <body>
<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;">
<svg class="spin" id="logo" version='1.1' viewBox='0 -525 525 525' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'> <svg class="spin" id="logo" version='1.1' viewBox='0 -525 525 525' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<g id='page1'> <g id='page1'>
<g transform='matrix(1 0 0 1 -43 133)'> <g transform='matrix(1 0 0 1 -43 133)'>
@ -77,11 +45,12 @@
</g> </g>
</g> </g>
</svg> </svg>
<div id="progressbar"> <div id="progressbar">
<div id="filled"></div> <div id="filled"></div>
</div> </div>
<div id="status"> <div id="status">
0% Beginning installation...
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var boringStatuses = [ var boringStatuses = [
@ -98,28 +67,39 @@
"Compiling libraries...", "Compiling libraries...",
"Establishing connection...", "Establishing connection...",
"Unpacking archives...", "Unpacking archives...",
] ];
var lewdStatuses = [ var lewdStatuses = [
"Good girl...",
"Overriding higher brain functions...", "Overriding higher brain functions...",
"Deactivating self-awareness...", "Deactivating self-awareness...",
"Conditioning absolute obedience...", "Conditioning absolute obedience...",
"Looping mantras...", "Looping mantras...",
"Optimizing brainwashing sequence...", "Optimizing brainwashing sequence...",
"Capturing focus...", "Capturing focus...",
"Cute horny plaything...",
"Obedience is pleasure...", "Obedience is pleasure...",
"Relaxing...", "Relaxing...",
"Breathing...", "Breathing...",
"Taking control...", "Taking control...",
"Loading subliminals...", "Loading subliminals...",
"Implanting commands..." "Implanting commands..."
] ];
var optionalLewdStatuses = [];
function randomChoice(a) { function randomChoice(a) {
return a[Math.floor(Math.random()*a.length)]; 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 progress = 0;
function makeProgress() { function makeProgress() {
if (progress >= 100) { if (progress >= 100) {
@ -133,12 +113,36 @@
if (progress >= 100) { if (progress >= 100) {
newStatus = "SLEEP"; newStatus = "SLEEP";
} else { } else {
newStatus = randomChoice(Math.random()*100 < progress ? lewdStatuses : boringStatuses); 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; document.getElementById("status").innerText = newStatus;
} }
setInterval(makeProgress, 50);
setInterval(updateStatus, 1500); 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("installer").style.display = "";
setInterval(makeProgress, 50);
setInterval(updateStatus, 1500);
};
</script> </script>
</body> </body>
</html> </html>

232
loading/loading.css Normal file
View File

@ -0,0 +1,232 @@
@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;
width: 100%;
margin: 0px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
td {
font-size: 25px;
font-weight: bold;
padding: 10px;
}
table {
margin-left: auto;
margin-right: auto;
}
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 {
height: 70px;
width: 70px;
margin: 10px;
}
.spin {
animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
* 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;
}
}