From 888079aa7870aad7e12c6a3ec5a5d3313fdec9dd Mon Sep 17 00:00:00 2001
From: xenofem <xenofem@xeno.science>
Date: Fri, 29 May 2020 02:14:56 -0400
Subject: [PATCH] make language configurable

---
 loading/index.html  | 148 ++++++++++++++--------------
 loading/loading.css | 232 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 308 insertions(+), 72 deletions(-)
 create mode 100644 loading/loading.css
diff --git a/loading/index.html b/loading/index.html
index 3bced40..efa7231 100644
--- a/loading/index.html
+++ b/loading/index.html
@@ -1,68 +1,36 @@
 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-      @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>
+    <link rel="stylesheet" href="loading.css">
   </head>
   <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'>
 	<g id='page1'>
 	  <g transform='matrix(1 0 0 1 -43 133)'>
@@ -77,11 +45,12 @@
 	  </g>
 	</g>
       </svg>
-    <div id="progressbar">
-      <div id="filled"></div>
-    </div>
-    <div id="status">
-      0%
+      <div id="progressbar">
+        <div id="filled"></div>
+      </div>
+      <div id="status">
+        Beginning installation...
+      </div>
     </div>
     <script type="text/javascript">
       var boringStatuses = [
@@ -98,28 +67,39 @@
           "Compiling libraries...",
           "Establishing connection...",
           "Unpacking archives...",
-      ]
+      ];
       var lewdStatuses = [
-          "Good girl...",
           "Overriding higher brain functions...",
           "Deactivating self-awareness...",
           "Conditioning absolute obedience...",
           "Looping mantras...",
           "Optimizing brainwashing sequence...",
           "Capturing focus...",
-          "Cute horny plaything...",
           "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;
       function makeProgress() {
           if (progress >= 100) {
@@ -133,12 +113,36 @@
           if (progress >= 100) {
               newStatus = "SLEEP";
           } 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;
       }
-      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>
   </body>
 </html>
diff --git a/loading/loading.css b/loading/loading.css
new file mode 100644
index 0000000..6fd33e8
--- /dev/null
+++ b/loading/loading.css
@@ -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;
+    }
+}
+
