add pw-frontend

1 files changed, 309 insertions, 0 deletions

diff --git a/web/pw-frontend/src/lib/visualizer/style.css b/web/pw-frontend/src/lib/visualizer/style.css
new file mode 100644
index 0000000..8c5119e
--- /dev/null
+++ b/web/pw-frontend/src/lib/visualizer/style.css
@@ -0,0 +1,309 @@
+    * {
+        margin: 0;
+        padding: 0;
+    }
+    
+    body {
+        background-color: #333;
+    }
+    
+    p {
+        padding: 3px 0;
+    }
+    
+    #wrapper {
+        max-height: 100%;
+        min-height: 100%;
+        width: 100%;
+        height: 100%;
+        display: flex;
+    }
+    
+    #main {
+        height: 100%;
+        flex-grow: 1;
+        position: relative;
+    }
+    
+    #name {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        color: white;
+    }
+    
+    #meta {
+        padding: 10px 2%;
+        color: white;
+        position: absolute;
+        bottom: 0;
+        width: 96%;
+    }
+    
+    .options {
+        background-color: black;
+        max-width: 300px;
+        width: 20%;
+        min-width: 150px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+    }
+    
+    .option {
+        color: white;
+        margin: 0 0 20px 0;
+        padding: 10px;
+        background-color: #333;
+    }
+    
+    .option:last-child {
+        margin: 0;
+    }
+    
+    .option:hover {
+        background-color: #777;
+    }
+    
+    .lds-roller {
+        display: none;
+    }
+    
+    .loading>.lds-roller {
+        display: inline-block;
+    }
+    
+    .lds-roller {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 80px;
+        height: 80px;
+    }
+    
+    .lds-roller div {
+        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        transform-origin: 40px 40px;
+    }
+    
+    .lds-roller div:after {
+        content: " ";
+        display: block;
+        position: absolute;
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        background: #fff;
+        margin: -4px 0 0 -4px;
+    }
+    
+    .lds-roller div:nth-child(1) {
+        animation-delay: -0.036s;
+    }
+    
+    .lds-roller div:nth-child(1):after {
+        top: 63px;
+        left: 63px;
+    }
+    
+    .lds-roller div:nth-child(2) {
+        animation-delay: -0.072s;
+    }
+    
+    .lds-roller div:nth-child(2):after {
+        top: 68px;
+        left: 56px;
+    }
+    
+    .lds-roller div:nth-child(3) {
+        animation-delay: -0.108s;
+    }
+    
+    .lds-roller div:nth-child(3):after {
+        top: 71px;
+        left: 48px;
+    }
+    
+    .lds-roller div:nth-child(4) {
+        animation-delay: -0.144s;
+    }
+    
+    .lds-roller div:nth-child(4):after {
+        top: 72px;
+        left: 40px;
+    }
+    
+    .lds-roller div:nth-child(5) {
+        animation-delay: -0.18s;
+    }
+    
+    .lds-roller div:nth-child(5):after {
+        top: 71px;
+        left: 32px;
+    }
+    
+    .lds-roller div:nth-child(6) {
+        animation-delay: -0.216s;
+    }
+    
+    .lds-roller div:nth-child(6):after {
+        top: 68px;
+        left: 24px;
+    }
+    
+    .lds-roller div:nth-child(7) {
+        animation-delay: -0.252s;
+    }
+    
+    .lds-roller div:nth-child(7):after {
+        top: 63px;
+        left: 17px;
+    }
+    
+    .lds-roller div:nth-child(8) {
+        animation-delay: -0.288s;
+    }
+    
+    .lds-roller div:nth-child(8):after {
+        top: 56px;
+        left: 12px;
+    }
+    
+    @keyframes lds-roller {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+    
+    #speed {
+        width: 100px;
+    }
+    
+    #canvas {
+        position: relative;
+        background-color: black;
+        width: 100%;
+        height: 100%;
+    }
+    
+    .button {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        width: 0;
+        height: 0;
+    }
+    
+    .button::before {
+        content: "";
+        display: block;
+        float: left;
+        margin: 0 -20px 0 0;
+        font-family: 'fontawesome';
+        content: "\f1e1";
+        transform: translate(-1em, 0px);
+        color: antiquewhite;
+        font-size: 1.5em;
+    }
+    
+    .button:hover::before {
+        color: #ff7f00;
+    }
+    /* ----------------------------------------------
+ * Generated by Animista on 2019-9-17 14:35:13
+ * Licensed under FreeBSD License.
+ * See http://animista.net/license for more info.
+ * w: http://animista.net, t: @cssanimista
+ * ---------------------------------------------- */
+    /**
+ * ----------------------------------------
+ * animation slide-top
+ * ----------------------------------------
+ */
+    
+    @-webkit-keyframes slide-top {
+        0% {
+            -webkit-transform: translate(-50%, 50%);
+            transform: translate(-50%, 50%);
+        }
+        100% {
+            -webkit-transform: translate(-50%, -150%);
+            transform: translate(-50%, -150%);
+        }
+    }
+    
+    @keyframes slide-top {
+        0% {
+            -webkit-transform: translate(-50%, 50%);
+            transform: translate(-50%, 50%);
+        }
+        100% {
+            -webkit-transform: translate(-50%, -150%);
+            transform: translate(-50%, -150%);
+        }
+    }
+    /**
+ * ----------------------------------------
+ * Copy from https://www.w3schools.com/howto/howto_js_rangeslider.asp
+ * ----------------------------------------
+ */
+    
+    .slidecontainer {
+        margin-top: 10px;
+        width: 100%;
+        /* Width of the outside container */
+    }
+    
+    .slider {
+        -webkit-appearance: none;
+        width: 100%;
+        height: 15px;
+        border-radius: 5px;
+        background: #d3d3d3;
+        outline: none;
+        opacity: 0.7;
+        -webkit-transition: .2s;
+        transition: opacity .2s;
+    }
+    
+    .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: #ff7000;
+        cursor: pointer;
+    }
+    
+    .slider::-moz-range-thumb {
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background: #ff7000;
+        cursor: pointer;
+    }
+    
+     ::-webkit-scrollbar-track {
+        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+        border-radius: 10px;
+        background-color: #444;
+        border-radius: 10px;
+    }
+    
+     ::-webkit-scrollbar {
+        width: 10px;
+        background-color: #444;
+    }
+    
+     ::-webkit-scrollbar-thumb {
+        border-radius: 10px;
+        background-color: #F90;
+        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
+    }
\ No newline at end of file