Home Explore Help
Sign In
po1son
/
Frames-Support
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Init Frames-Support

Manuel Gall 2 years ago
commit
fe9958bcbd
11 changed files with 2847 additions and 0 deletions
Unified View Show Diff Stats
  1. 0 0
      README.md
  2. 143 0
      header/config.html
  3. 37 0
      header/preview.html
  4. 156 0
      header/service.html
  5. 66 0
      index.php
  6. 186 0
      menu/config.html
  7. 47 0
      menu/preview.html
  8. 406 0
      menu/service.html
  9. 638 0
      spinner/config.html
  10. 583 0
      spinner/preview.html
  11. 585 0
      spinner/service.html

+ 0 - 0
README.md
View File


+ 143 - 0
header/config.html
View File 

@@ -0,0 +1,143 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
+    <title>Design</title>
 
+    
+    <!-- libs, do not modify. When local than load local libs. -->
 
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.svg.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.svgdom.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/vkbeautify.js"></script>
 
+    <script type="text/javascript" src="/js_libs/util.js"></script>
 
+    <script type="text/javascript" src="/js_libs/printf.js"></script>
 
+    <script type="text/javascript" src="/js_libs/strftime.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/parsequery.js"></script>
 
+    <script type="text/javascript" src="/js_libs/underscore.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
 
+    
+    
+    <script type="text/javascript" src="/js_libs/relaxngui.js"></script>
 
+    
+    <script type="text/javascript" src="/js_libs/ui.js"></script>
 
+    <script type="text/javascript" src="/js_libs/custommenu.js"></script>
 
+    
+    <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
 
+    <link   rel="stylesheet"      href="/js_libs/ui.css" type="text/css"/>
 
+    
+    <link   rel="stylesheet"      href="/js_libs/relaxngui.css" type="text/css"/>
 
+    
+    <link rel="icon" href="favicon.ico">
 
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
 
+    
+    <style>
 
+    :root {
 
+      --color: #1e90ff;
 
+      --backgroundcolor: fff;
 
+      --fontcolor: 000;
 
+    }
 
+    
+    body {
 
+      color: var(--fontcolor);
 
+      background-color: var(--backgroundcolor);
 
+    }
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+function newLink() {
 
+  //get form element
 
+  var formEl = document.forms.config;
 
+  var formData = new FormData(formEl);  
+  const formElements = Array.from(formData);
 
+
 
+  //get current url
 
+  var href = window.location.href;
 
+  var dir = href.substring(0, href.lastIndexOf('/')) + "/";
 
+  var link = dir + "service.html?";
 
+  
+  //iterate form eles and build string
 
+  formElements.forEach((element, index) => {
 
+    if(index!=0){
 
+      link+= "&";
 
+    }
 
+    if(element[0].includes("color")){
 
+      link+= element[0] + "=" + element[1].substring(1);
 
+    }
 
+    else{
 
+      link+= element[0] + "=" + element[1];
 
+    }
 
+  });
 
+
 
+  //set new link
 
+  document.getElementById("showurl").innerText =link; 
+  top.document.getElementById('previewframe').setAttribute("src",link);
 
+}
 
+
 
+$(document).ready(function() {
 
+  newLink()
 
+});
 
+
 
+</script>
 
+
 
+<body >
 
+
 
+  <form action="" id="config">
 
+      Text Style:
 
+      <select onchange="newLink()" name="type" id="type">
 
+        <option value="left">Left</option>
 
+        <option value="center">Center</option>
 
+        <option value="right">right</option>
 
+      </select><br>
 
+      Text: <input onchange="newLink()" name="text" type="text" value="<h1>Your Header</h1>" ></input><br>
 
+      Font Color: <input onchange="newLink()" name="fontcolor" type="color" value="#000000" /><br><br>
 
+      
+
 
+      
+      Background Color: <input onchange="newLink()" name="backgroundcolor"  type="color" value="#0081c6" /><br>
 
+      Background Image Url: <input onchange="newLink()" name="backgroundImage" type="text" value="/global_ui/logo.png" /><br>
 
+      Background Image Position:
 
+        <select onchange="newLink()" name="backgroundPosition" id="backgroundPosition">
 
+          <option value="right">Right</option>
 
+          <option value="left">Left</option>
 
+          <option value="left100size">Left Scaled</option>
 
+          <option value="right100size">Right Scaled</option>
 
+          
+        </select><br>
 
+  </form>
 
+
 
+  <br>
 
+  URL:<br>
 
+  <span id="showurl"></span>
 
+
 
+  <br><br>
 
+  Iframe Preview:<br>
 
+  <iframe width="100%" height="200" id="previewframe" src="https://centurio.evva.com/services/frames_support/spinner/service.html?text=Loading%20Serial%20Number&type=lds-spinner&color=000000&fontcolor=000" title="Spinner"></iframe>
 
+
 
+
 
+</div>
 
+
 
+
 
+</body>
 
+</html>

+ 37 - 0
header/preview.html
View File 

@@ -0,0 +1,37 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+  
+    <meta http-equiv='refresh' content='0; URL=./service.html?type=left&text=<h1>Your Header</h1>Set your header text and image and some more stuff.&fontcolor=000000&backgroundcolor=0081c6&backgroundImage=/global_ui/logo.png&backgroundPosition=right'>
 
+    
+    
+  </head>
 
+<script>
 
+
 
+</script>
 
+
 
+<body >
 
+<!-- Animator taken from https://loading.io/css/ -->
 
+<!-- loading icons provided in this page are released under CC0 License -->
 
+
 
+
 
+</body>
 
+</html>

+ 156 - 0
header/service.html
View File 

@@ -0,0 +1,156 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
+    <title>Design</title>
 
+    
+    <!-- libs, do not modify. When local than load local libs. -->
 
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
 
+    
+    
+    <link rel="icon" href="favicon.ico">
 
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
 
+    
+    <style>
 
+    :root {
 
+      --color: #1e90ff;
 
+      --backgroundcolor: fff;
 
+      --fontcolor: 000;
 
+    }
 
+    
+    body {
 
+      color: var(--fontcolor);
 
+      background-color: var(--backgroundcolor);
 
+    }
 
+    
+    
+    body{
 
+      background-repeat: no-repeat;
 
+      background-size: auto 80%;
 
+      background-position: calc(100% - 18px);;
 
+    }
 
+
 
+    .outer{
 
+      width:100%
 
+    }
 
+
 
+    .left{
 
+      display: table;
 
+      margin: 0 0;
 
+    }
 
+    
+    .center{
 
+      display: table;
 
+      margin: 0 auto;
 
+    }
 
+    
+    .right{
 
+      display: table;
 
+      margin: 0px 0px 0px auto;
 
+    }
 
+
 
+    .rendered-form {
 
+      position: absolute;
 
+      top: 50%;
 
+      margin: -1.7em;
 
+    }
 
+
 
+    a {  margin: 5em; border: 0.3em solid black; border-radius: 50%; background-color: rgb(252, 229, 0); font-weight: bold; font-size: 1.3em; padding: 0.8em 1em 0.8em 1em;}
 
+
 
+
 
+    a, a:link, a:visited, a:hover, a:active {
 
+      text-decoration: none;
 
+      color: black;
 
+    }
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+$(document).ready(function() {
 
+  const queryString = window.location.search;
 
+  const urlParams = new URLSearchParams(queryString);
 
+  
+  const text = urlParams.get('text')
 
+  const type = urlParams.get('type')
 
+  const color = urlParams.get('color')
 
+  const backgroundcolor = urlParams.get('backgroundcolor')
 
+  const fontcolor = urlParams.get('fontcolor')
 
+  const backgroundImage = urlParams.get('backgroundImage')
 
+  const backgroundPosition = urlParams.get('backgroundPosition')
 
+  
+  var r = document.documentElement;
 
+
 
+  if(color != null){
 
+    r.style.setProperty('--color', "#" + color);
 
+  }
 
+  if(backgroundcolor != null){
 
+    r.style.setProperty('--backgroundcolor', "#" + backgroundcolor);
 
+  }
 
+  if(fontcolor != null){
 
+    r.style.setProperty('--fontcolor', "#" + fontcolor);
 
+  }
 
+  if(text != null){
 
+    document.getElementById("header").innerHTML=text;
 
+  }
 
+  if(backgroundImage != null){
 
+    document.body.style.backgroundImage = "url('" +  backgroundImage +"')";
 
+  }
 
+  if(backgroundPosition != null){
 
+    if(backgroundPosition == "left"){
 
+      document.body.style.backgroundPosition = "18px";
 
+    }
 
+    else if(backgroundPosition == "left100size"){
 
+      document.body.style.backgroundPosition = "18px";
 
+      document.querySelector('html').style.setProperty('height', '100%')
 
+    }
 
+    else if(backgroundPosition == "right100size"){
 
+      document.body.style.backgroundPosition = "calc(100% - 18px)";
 
+      document.querySelector('html').style.setProperty('height', '100%')
 
+    }
 
+    else{
 
+      document.body.style.backgroundPosition = "calc(100% - 18px)";
 
+    }
 
+  }
 
+  if(type != null){
 
+    document.getElementById("header").classList.add(type);
 
+  }
 
+
 
+});
 
+
 
+</script>
 
+
 
+<body >
 
+<!-- Animator taken from https://loading.io/css/ -->
 
+<!-- loading icons provided in this page are released under CC0 License -->
 
+
 
+  <div class="outer">
 
+    <div id="header" >
 
+
 
+    </div>
 
+  </div>
 
+
 
+
 
+</div>
 
+
 
+</body>
 
+</html>

+ 66 - 0
index.php
View File 

@@ -0,0 +1,66 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
+    <title>Design</title>
 
+    
+    <!-- libs, do not modify. When local than load local libs. -->
 
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
 
+    
+    
+    <link rel="icon" href="favicon.ico">
 
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
 
+    
+    <style>
 
+    .linkwrap { position:relative; display:inline-block; height: 200px; width: 100% }
 
+    .blocker { position:absolute; height:100%; width:100%; z-index:1;}
 
+    .linkwrap iframe { z-index: 2; }
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+$(document).ready(function() {
 
+
 
+});
 
+
 
+</script>
 
+
 
+<body >
 
+  <?php
 
+    $scan = scandir('./');
 
+    foreach($scan as $file) {
 
+      if (is_dir("./$file") && $file != '.' && $file != '..' && $file != 'styles') {
 
+        ?>
 
+        <a href="https://centurio.evva.com/services/frames_support/<?php echo $file;?>/config.html">
 
+          <h1><?php echo ucfirst($file);?>:</h1>
 
+        </a>
 
+        <a href="https://centurio.evva.com/services/frames_support/<?php echo $file;?>/config.html" class="linkwrap">
 
+          <div class="blocker"></div>
 
+          <iframe width="100%" height="200" id="previewframe" src="./<?php echo $file;?>/preview.html" title="<?php echo $file;?>" frameborder="0"></iframe>
 
+        </a>
 
+        <?php
 
+      }
 
+    }
 
+  ?>
 
+</body>
 
+</html>

+ 186 - 0
menu/config.html
View File 

@@ -0,0 +1,186 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
+    <title>Design</title>
 
+    
+    <!-- libs, do not modify. When local than load local libs. -->
 
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.svg.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.svgdom.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/vkbeautify.js"></script>
 
+    <script type="text/javascript" src="/js_libs/util.js"></script>
 
+    <script type="text/javascript" src="/js_libs/printf.js"></script>
 
+    <script type="text/javascript" src="/js_libs/strftime.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/parsequery.js"></script>
 
+    <script type="text/javascript" src="/js_libs/underscore.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
 
+    
+    
+    <script type="text/javascript" src="/js_libs/relaxngui.js"></script>
 
+    
+    <script type="text/javascript" src="/js_libs/ui.js"></script>
 
+    <script type="text/javascript" src="/js_libs/custommenu.js"></script>
 
+    
+    <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
 
+    <link   rel="stylesheet"      href="/js_libs/ui.css" type="text/css"/>
 
+    
+    <link   rel="stylesheet"      href="/js_libs/relaxngui.css" type="text/css"/>
 
+    
+    <link rel="icon" href="favicon.ico">
 
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
 
+    
+    <style>
 
+    :root {
 
+      --color: #1e90ff;
 
+      --backgroundcolor: fff;
 
+      --fontcolor: 000;
 
+    }
 
+    
+    body {
 
+      color: var(--fontcolor);
 
+      background-color: var(--backgroundcolor);
 
+    }
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+function newLink() {
 
+  //get form element
 
+  var formEl = document.forms.config;
 
+  var formData = new FormData(formEl);  
+  const formElements = Array.from(formData);
 
+
 
+  //get current url
 
+  var href = window.location.href;
 
+  var dir = href.substring(0, href.lastIndexOf('/')) + "/";
 
+  var link = dir + "service.html?";
 
+  
+  //iterate form eles and build string
 
+  formElements.forEach((element, index) => {
 
+    if(index!=0){
 
+      link+= "&";
 
+    }
 
+    if(element[0].includes("color")){
 
+      link+= element[0] + "=" + element[1].substring(1);
 
+    }
 
+    else if(element[0] == "buttons"){
 
+      link+= element[0] + "=" + element[1].replace(/(\r\n|\n|\r)/gm,"")
 
+    }
 
+    else{
 
+      link+= element[0] + "=" + element[1];
 
+    }
 
+  });
 
+
 
+  //set new link
 
+  document.getElementById("showurl").innerText =link; 
+  top.document.getElementById('previewframe').setAttribute("src",link);
 
+}
 
+
 
+$(document).ready(function() {
 
+  newLink()
 
+});
 
+
 
+</script>
 
+
 
+<body >
 
+
 
+ 
+  <form action="" id="config">
 
+      Use Header: <input onchange="newLink()" type="checkbox" id="header" name="header"><br>
 
+      Text Style:
 
+      <select onchange="newLink()" name="type" id="type">
 
+        <option value="left">Left</option>
 
+        <option value="center">Center</option>
 
+        <option value="right">right</option>
 
+      </select><br>
 
+      Text: <input onchange="newLink()" name="text" type="text" value="<h1>Your Header</h1>" ></input><br>
 
+      Font Color: <input onchange="newLink()" name="fontcolor" type="color" value="#000000" /><br><br>
 
+      
+      
+      Button Style:
 
+      <select onchange="newLink()" name="buttonstyle" id="buttonstyle">
 
+        <option value="small">Small</option>
 
+        <option value="discrete">Discrete</option>
 
+        <option value="elippse">Elippse</option>
 
+        <option value="reoundedrectangle">Rounded Rectangle</option>
 
+        <option value="centurio">Centurio</option>
 
+      </select><br>
 
+      Alignment:
 
+      <select onchange="newLink()" name="alignment" id="alignment">
 
+        <option value="left">left</option>
 
+        <option value="center">center</option>
 
+        <option value="right">right</option>
 
+        <option value="spread">spread</option>
 
+      </select><br>
 
+      Align Bottom: <input onchange="newLink()" type="checkbox" id="alignbot" name="alignbot"><br>
 
+
 
+      <textarea onchange="newLink()" id="buttons" name="buttons" rows="4" cols="50">Seperate,
 
+Buttons,
 
+By,
 
+Comma</textarea><br>
 
+      Active Button: <input onchange="newLink()" name="activebutton" type="text" value="Comma" /><br>
 
+
 
+      Button Spacing: <input onchange="newLink()" name="buttonspacing" type="text" value="2em" /> If alignment Spread is used this does not have any effect.<br>
 
+
 
+
 
+      Button Text Color: <input onchange="newLink()" name="buttontextcolor" type="color" value="#000000" /><br>
 
+      Button Background Color: <input onchange="newLink()" name="buttonmaincolor" type="color" value="#FCE500" /><br>
 
+      Button Border Color: <input onchange="newLink()" name="button2color" type="color" value="#000000" /><br>
 
+      <!--
 
+      Button Third Color: <input onchange="newLink()" name="button3color" type="color" value="#000000" /><br>
 
+      Button Fourth Color: <input onchange="newLink()" name="button4color" type="color" value="#000000" /><br>
 
+      -->
 
+
 
+      
+
 
+      
+      Background Color: <input onchange="newLink()" name="backgroundcolor"  type="color" value="#0081c6" /><br>
 
+      Background Image Url: <input onchange="newLink()" name="backgroundImage" type="text" value="/global_ui/logo.png" /><br>
 
+      Background Image Position:
 
+        <select onchange="newLink()" name="backgroundPosition" id="backgroundPosition">
 
+          <option value="right">Right</option>
 
+          <option value="left">Left</option>
 
+          <option value="left100size">Left Scaled</option>
 
+          <option value="right100size">Right Scaled</option>
 
+          
+        </select><br>
 
+      Background Image Size: <input onchange="newLink()" name="backgroundImageSize" type="text" value="auto 80%" /><br>
 
+
 
+  </form>
 
+
 
+  <br>
 
+  URL:<br>
 
+  <span id="showurl"></span>
 
+
 
+  <br><br>
 
+  Iframe Preview:<br>
 
+  <iframe width="100%" height="200" id="previewframe" src="https://centurio.evva.com/services/frames_support/spinner/service.html?text=Loading%20Serial%20Number&type=lds-spinner&color=000000&fontcolor=000" title="Spinner"></iframe>
 
+
 
+
 
+</div>
 
+
 
+
 
+</body>
 
+</html>

+ 47 - 0
menu/preview.html
View File 

@@ -0,0 +1,47 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+  <!--
 
+    <meta http-equiv='refresh' content='0; URL=./service.html?header=on&type=center&text=With or without a Header&fontcolor=000000&buttonstyle=elippse&alignment=left&buttons=Verschiedene,Button,Styles&activebutton=&buttonspacing=2em&buttontextcolor=000000&buttonmaincolor=fce500&button2color=000000&backgroundcolor=0081c6&backgroundImage=/global_ui/logo.png&backgroundPosition=right&backgroundImageSize=auto 80%'>-->
 
+    <style>
 
+      html, body{
 
+        margin: 0;
 
+        padding: 0;
 
+      }
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+</script>
 
+
 
+<body >
 
+<!-- Animator taken from https://loading.io/css/ -->
 
+<!-- loading icons provided in this page are released under CC0 License -->
 
+
 
+
 
+<iframe width="50%" height="190" id="previewframe" src="./service.html?header=on&type=center&text=With or without a Header&fontcolor=000000&buttonstyle=elippse&alignment=left&buttons=Verschiedene,Button,Styles&activebutton=&buttonspacing=2em&buttontextcolor=000000&buttonmaincolor=fce500&button2color=000000&backgroundcolor=0081c6&backgroundImage=/global_ui/logo.png&backgroundPosition=right&backgroundImageSize=auto 80%" title="menu" frameborder="0"></iframe>
 
+
 
+<iframe style="float:right;" width="40%" height="190" id="previewframe" src="./service.html?header=on&type=left&text=<h1>Use Centurio Style</h1>&fontcolor=000000&buttonstyle=centurio&alignment=center&alignbot=on&buttons=Allign,Your,Buttons,Bottom&activebutton=Your&buttonspacing=2em&buttontextcolor=000000&buttonmaincolor=ffffff&button2color=000000&backgroundcolor=0081c6&backgroundImage=/global_ui/logo.png&backgroundPosition=right&backgroundImageSize=auto 4em
 
+" title="menu" frameborder="0"></iframe>
 
+
 
+</body>
 
+</html>

+ 406 - 0
menu/service.html
View File 

@@ -0,0 +1,406 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
+    <title>Design</title>
 
+    
+    <!-- libs, do not modify. When local than load local libs. -->
 
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
 
+    
+    
+    <link rel="icon" href="favicon.ico">
 
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
 
+    
+    <style>
 
+    :root {
 
+      --color: #1e90ff;
 
+      --backgroundcolor: fff;
 
+      --fontcolor: 000;
 
+      --buttontextcolor: 000;
 
+      --buttonmaincolor: 000;
 
+      --button2color: 000;
 
+      --buttonspacing: 2em;
 
+      --outer2margin: 2em;
 
+      --backgroundImageSize: auto 80%;
 
+      
+      
+    }
 
+    
+    body {
 
+      color: var(--fontcolor);
 
+      background-color: var(--backgroundcolor);
 
+      overflow: hidden;
 
+    }
 
+    
+    
+    body{
 
+      background-repeat: no-repeat;
 
+      background-size: var(--backgroundImageSize);
 
+      background-position: calc(100% - 18px);;
 
+    }
 
+
 
+    .outer{
 
+      width:100%
 
+    }
 
+
 
+    .left{
 
+      display: table;
 
+      margin: 0 0;
 
+    }
 
+    
+    .center{
 
+      display: table;
 
+      margin: 0 auto;
 
+    }
 
+    
+    .right{
 
+      display: table;
 
+      margin: 0px 0px 0px auto;
 
+    }
 
+
 
+    .rendered-form {
 
+      position: absolute;
 
+      top: 50%;
 
+      margin: -1.7em;
 
+    }
 
+    
+    
+    .navigation ul {
 
+       list-style: none;
 
+       margin: 0;
 
+       padding: 0;
 
+       display: flex;
 
+       flex-wrap: wrap;
 
+    }
 
+    .navigation li{
 
+      text-align: center;
 
+    }
 
+
 
+    .outer2{
 
+      margin: var(--outer2margin) 0em;
 
+      width: 100%;
 
+    }
 
+
 
+
 
+
 
+
 
+    a, a:link, a:visited, a:hover, a:active {
 
+      text-decoration: none;
 
+      color: var(--buttontextcolor);
 
+    }
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+$(document).ready(function() {
 
+  const queryString = window.location.search;
 
+  const urlParams = new URLSearchParams(queryString);
 
+  
+  const header = urlParams.get('header')
 
+  const text = urlParams.get('text')
 
+  const type = urlParams.get('type')
 
+  const color = urlParams.get('color')
 
+  const backgroundcolor = urlParams.get('backgroundcolor')
 
+  const fontcolor = urlParams.get('fontcolor')
 
+  const backgroundImage = urlParams.get('backgroundImage')
 
+  const backgroundPosition = urlParams.get('backgroundPosition')
 
+  const backgroundImageSize = urlParams.get('backgroundImageSize')
 
+  
+  
+
 
+  const buttonstyle = urlParams.get('buttonstyle')
 
+  const alignment = urlParams.get('alignment')
 
+  const alignbot = urlParams.get('alignbot')
 
+  const buttons = urlParams.get('buttons')
 
+  const activebutton = urlParams.get('activebutton')
 
+  const buttonspacing = urlParams.get('buttonspacing')
 
+  const buttontextcolor = urlParams.get('buttontextcolor')
 
+  const buttonmaincolor = urlParams.get('buttonmaincolor')
 
+  const button2color = urlParams.get('button2color')
 
+  const button3color = urlParams.get('button3color')
 
+  const button4color = urlParams.get('button4color')
 
+  
+  var colors = {color: color, backgroundcolor: backgroundcolor, fontcolor: fontcolor, buttontextcolor: buttontextcolor, buttonmaincolor: buttonmaincolor, button2color: button2color, button3color: button3color, button4color: button4color};
 
+  
+
 
+
 
+  
+  var r = document.documentElement;
 
+  
+  for (var singlecolor in colors) {
 
+    var value = colors[singlecolor];
 
+    if(value != null){
 
+      r.style.setProperty('--' + singlecolor, "#" + value);
 
+    }
 
+  }
 
+
 
+  if(header != null){
 
+    if(text != null){
 
+      document.getElementById("header").innerHTML=text;
 
+    }
 
+    if(type != null){
 
+      document.getElementById("header").classList.add(type);
 
+    }
 
+  }
 
+  else{
 
+    $('#headerouter2').remove();
 
+  }
 
+  
+  
+  if(backgroundImage != null){
 
+    document.body.style.backgroundImage = "url('" +  backgroundImage +"')";
 
+  }
 
+  if(backgroundPosition != null){
 
+    if(backgroundPosition == "left"){
 
+      document.body.style.backgroundPosition = "18px";
 
+    }
 
+    else if(backgroundPosition == "left100size"){
 
+      document.body.style.backgroundPosition = "18px";
 
+      document.querySelector('html').style.setProperty('height', '100%')
 
+    }
 
+    else if(backgroundPosition == "right100size"){
 
+      document.body.style.backgroundPosition = "calc(100% - 18px)";
 
+      document.querySelector('html').style.setProperty('height', '100%')
 
+    }
 
+    else{
 
+      document.body.style.backgroundPosition = "calc(100% - 18px)";
 
+    }
 
+  }
 
+  if(backgroundPosition != backgroundImageSize){
 
+      document.body.style.backgroundImageSize = backgroundImageSize;
 
+      r.style.setProperty('--backgroundImageSize', backgroundImageSize);
 
+    
+  }
 
+  
+  
+  
+  
+  if(alignment != null){
 
+    if(alignment == "spread"){
 
+      var styles = `
 
+        .navigation li {
 
+           flex: 3;    
+        }
 
+      `
 
+
 
+      var styleSheet = document.createElement("style")
 
+      styleSheet.innerText = styles
 
+      document.head.appendChild(styleSheet)
 
+    }
 
+    
+    
+    if(alignment == "center"){
 
+      var styles = `
 
+        .navigation ul {
 
+           justify-content: center
 
+        }
 
+      `
 
+
 
+      var styleSheet = document.createElement("style")
 
+      styleSheet.innerText = styles
 
+      document.head.appendChild(styleSheet)
 
+    }
 
+    
+    if(alignment == "right"){
 
+      var styles = `
 
+        .navigation ul {
 
+           justify-content: flex-end
 
+        }
 
+      `
 
+
 
+      var styleSheet = document.createElement("style")
 
+      styleSheet.innerText = styles
 
+      document.head.appendChild(styleSheet)
 
+    }
 
+  }
 
+  
+  if(alignbot != null){
 
+      var styles = `
 
+        html {
 
+           height: 100%;
 
+        }
 
+        .outer2{
 
+          position: absolute;
 
+          bottom: 0;
 
+        }
 
+      `
 
+
 
+      var styleSheet = document.createElement("style")
 
+      styleSheet.innerText = styles
 
+      document.head.appendChild(styleSheet)
 
+    
+  }
 
+    
+  if(buttons != null){
 
+    var buttonlist = buttons.split(',');
 
+    
+    buttonlist.forEach(element => $( "#itemlist" ).append( "<li id='Button" + element + "'><a href='' >" + element + "</a></li>" ));
 
+            
+  }
 
+  if(activebutton != null){
 
+    if(buttonstyle == "centurio"){
 
+      var styles = `
 
+        #Button${activebutton} {
 
+          border-bottom: 1pt solid var(--buttonmamaincolor);
 
+        }
 
+      `
 
+
 
+      var styleSheet = document.createElement("style")
 
+      styleSheet.innerText = styles
 
+      document.head.appendChild(styleSheet)
 
+    }
 
+    
+  }
 
+  
+  
+  if(buttonspacing != null){
 
+    r.style.setProperty('--buttonspacing', buttonspacing);
 
+  }
 
+  if(buttonstyle != null){
 
+    var styles
 
+    if(buttonstyle == "small"){
 
+      styles = `
 
+        a {
 
+        margin: 0 var(--buttonspacing); border: 0.1em solid var(--button2color); background-color: var(--buttonmaincolor); font-weight: bold; font-size: 1em; padding: 0.5em 1em 0.5em 1em; color: var(--buttontextcolor); display: inline-block;
 
+        }
 
+      `
 
+      r.style.setProperty('--outer2margin', "0.2em");
 
+    }
 
+    if(buttonstyle == "discrete"){
 
+      styles = `
 
+        li:not(:last-child) { border-right: 0.1em solid var(--button2color); }
 
+ 
+        a {
 
+        margin: 0 var(--buttonspacing);  background-color: var(--buttonmaincolor); font-weight: bold; font-size: 1em; padding: 0.5em 1em 0.5em 1em; color: var(--buttontextcolor); display: inline-block;
 
+        }
 
+      `
 
+      r.style.setProperty('--outer2margin', "0.2em");
 
+    }
 
+    if(buttonstyle == "elippse"){
 
+      styles = `
 
+        a {
 
+        margin: 0 var(--buttonspacing); border: 0.3em solid var(--button2color); border-radius: 50%; background-color: var(--buttonmaincolor); font-weight: bold; font-size: 1.3em; padding: 0.8em 1em 0.8em 1em; color: var(--buttontextcolor); display: inline-block;
 
+        }
 
+      `
 
+    }
 
+    if(buttonstyle == "reoundedrectangle"){
 
+      styles = `
 
+        a {
 
+        margin: 0 var(--buttonspacing); border: 0.2em solid var(--button2color); border-radius: 1em; background-color: var(--buttonmaincolor); font-weight: bold; font-size: 1em; padding: 0.5em 1em 0.5em 1em; color: var(--buttontextcolor); display: inline-block;
 
+        }
 
+      `
 
+      r.style.setProperty('--outer2margin', "0.2em");
 
+    }
 
+    
+    
+    if(buttonstyle == "centurio"){
 
+      styles = `
 
+        body{
 
+          margin: 0em;
 
+        }
 
+        ul{
 
+          display: flex;
 
+          align-items: stretch;
 
+          flex-direction: row;
 
+          padding-left: 0.5em;
 
+          padding-right: 0.5em;
 
+          margin: 0;
 
+          padding-top: 0.5em;
 
+          -webkit-user-select: none;
 
+          -moz-user-select: none;
 
+          -ms-user-select: none;
 
+          user-select: none;
 
+        }
 
+        li {
 
+          font-size: 1.4em;
 
+          font-weight: bold;
 
+          white-space: nowrap;
 
+          cursor: pointer;
 
+          padding: 0.3em var(--buttonspacing);
 
+          border: 1pt solid var(--button2color);
 
+          border-radius: 0.7em;
 
+          border-bottom-left-radius: 0em;
 
+          border-bottom-right-radius: 0em;
 
+          background: var(--buttonmaincolor);
 
+        }
 
+        ui-behind {
 
+          flex: 1 1 auto;
 
+          vertical-align:bottom;
 
+          padding: 0;
 
+          padding-top: 0.9em;
 
+          border-bottom: 1pt solid var(--button2color);
 
+          border-radius: 0.7em;
 
+          border-bottom-left-radius: 0em;
 
+          border-bottom-right-radius: 0em;
 
+          text-align:right;
 
+          white-space: nowrap;
 
+        }
 
+      `
 
+      
+      if(alignment == "right"){
 
+        $( "#itemlist" ).prepend( "<ui-behind></ui-behind>" );
 
+      }
 
+      else if(alignment == "center"){
 
+        $( "#itemlist" ).append( "<ui-behind></ui-behind>" );
 
+        $( "#itemlist" ).prepend( "<ui-behind></ui-behind>" );
 
+      }
 
+      else if(alignment == "spread"){
 
+        $('ui-behind').remove();
 
+      }
 
+      else{
 
+        $( "#itemlist" ).append( "<ui-behind></ui-behind>" );
 
+      }
 
+      r.style.setProperty('--outer2margin', "0em");
 
+    }
 
+
 
+    var styleSheet = document.createElement("style")
 
+    styleSheet.innerText = styles
 
+    document.head.appendChild(styleSheet)
 
+  }
 
+  
+  
+
 
+});
 
+
 
+</script>
 
+
 
+<body >
 
+<!-- Animator taken from https://loading.io/css/ -->
 
+<!-- loading icons provided in this page are released under CC0 License -->
 
+
 
+  <div class="outer" id="headerouter">
 
+    <div id="header" >
 
+
 
+    </div>
 
+  </div>
 
+  
+  <div class="outer2">
 
+      <nav class="navigation">
 
+         <ul id="itemlist">
 
+         </ul> 
+      </nav>
 
+   </div>
 
+  </div>
 
+
 
+</body>
 
+</html>

+ 638 - 0
spinner/config.html
View File 

@@ -0,0 +1,638 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
+    <title>Design</title>
 
+    
+    <!-- libs, do not modify. When local than load local libs. -->
 
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.svg.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.svgdom.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/vkbeautify.js"></script>
 
+    <script type="text/javascript" src="/js_libs/util.js"></script>
 
+    <script type="text/javascript" src="/js_libs/printf.js"></script>
 
+    <script type="text/javascript" src="/js_libs/strftime.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/parsequery.js"></script>
 
+    <script type="text/javascript" src="/js_libs/underscore.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
 
+    
+    
+    <script type="text/javascript" src="/js_libs/relaxngui.js"></script>
 
+    
+    <script type="text/javascript" src="/js_libs/ui.js"></script>
 
+    <script type="text/javascript" src="/js_libs/custommenu.js"></script>
 
+    
+    <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
 
+    <link   rel="stylesheet"      href="/js_libs/ui.css" type="text/css"/>
 
+    
+    <link   rel="stylesheet"      href="/js_libs/relaxngui.css" type="text/css"/>
 
+    
+    <link rel="icon" href="favicon.ico">
 
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
 
+    
+    <style>
 
+    :root {
 
+      --color: #1e90ff;
 
+      --backgroundcolor: fff;
 
+      --fontcolor: 000;
 
+    }
 
+    
+    body {
 
+      color: var(--fontcolor);
 
+      background-color: var(--backgroundcolor);
 
+    }
 
+    
+    .lds-ring {
 
+      display: inline-block;
 
+      position: relative;
 
+      width: 80px;
 
+      height: 80px;
 
+    }
 
+    .lds-ring div {
 
+      box-sizing: border-box;
 
+      display: block;
 
+      position: absolute;
 
+      width: 64px;
 
+      height: 64px;
 
+      margin: 8px;
 
+      border: 8px solid var(--color) ;
 
+      border-radius: 50%;
 
+      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 
+      border-color: var(--color) transparent transparent transparent;
 
+    }
 
+    .lds-ring div:nth-child(1) {
 
+      animation-delay: -0.45s;
 
+    }
 
+    .lds-ring div:nth-child(2) {
 
+      animation-delay: -0.3s;
 
+    }
 
+    .lds-ring div:nth-child(3) {
 
+      animation-delay: -0.15s;
 
+    }
 
+    @keyframes lds-ring {
 
+      0% {
 
+        transform: rotate(0deg);
 
+      }
 
+      100% {
 
+        transform: rotate(360deg);
 
+      }
 
+    }
 
+    
+    .lds-dual-ring {
 
+  display: inline-block;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-dual-ring:after {
 
+  content: " ";
 
+  display: block;
 
+  width: 64px;
 
+  height: 64px;
 
+  margin: 8px;
 
+  border-radius: 50%;
 
+  border: 6px solid var(--color);
 
+  border-color: var(--color) transparent var(--color) transparent;
 
+  animation: lds-dual-ring 1.2s linear infinite;
 
+}
 
+@keyframes lds-dual-ring {
 
+  0% {
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+
 
+
 
+.lds-facebook {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-facebook div {
 
+  display: inline-block;
 
+  position: absolute;
 
+  left: 8px;
 
+  width: 16px;
 
+  background: var(--color);
 
+  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 
+}
 
+.lds-facebook div:nth-child(1) {
 
+  left: 8px;
 
+  animation-delay: -0.24s;
 
+}
 
+.lds-facebook div:nth-child(2) {
 
+  left: 32px;
 
+  animation-delay: -0.12s;
 
+}
 
+.lds-facebook div:nth-child(3) {
 
+  left: 56px;
 
+  animation-delay: 0;
 
+}
 
+@keyframes lds-facebook {
 
+  0% {
 
+    top: 8px;
 
+    height: 64px;
 
+  }
 
+  50%, 100% {
 
+    top: 24px;
 
+    height: 32px;
 
+  }
 
+}
 
+
 
+.lds-roller {
 
+  display: inline-block;
 
+  position: relative;
 
+  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: var(--color);
 
+  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);
 
+  }
 
+}
 
+
 
+.lds-default {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-default div {
 
+  position: absolute;
 
+  width: 6px;
 
+  height: 6px;
 
+  background: var(--color);
 
+  border-radius: 50%;
 
+  animation: lds-default 1.2s linear infinite;
 
+}
 
+.lds-default div:nth-child(1) {
 
+  animation-delay: 0s;
 
+  top: 37px;
 
+  left: 66px;
 
+}
 
+.lds-default div:nth-child(2) {
 
+  animation-delay: -0.1s;
 
+  top: 22px;
 
+  left: 62px;
 
+}
 
+.lds-default div:nth-child(3) {
 
+  animation-delay: -0.2s;
 
+  top: 11px;
 
+  left: 52px;
 
+}
 
+.lds-default div:nth-child(4) {
 
+  animation-delay: -0.3s;
 
+  top: 7px;
 
+  left: 37px;
 
+}
 
+.lds-default div:nth-child(5) {
 
+  animation-delay: -0.4s;
 
+  top: 11px;
 
+  left: 22px;
 
+}
 
+.lds-default div:nth-child(6) {
 
+  animation-delay: -0.5s;
 
+  top: 22px;
 
+  left: 11px;
 
+}
 
+.lds-default div:nth-child(7) {
 
+  animation-delay: -0.6s;
 
+  top: 37px;
 
+  left: 7px;
 
+}
 
+.lds-default div:nth-child(8) {
 
+  animation-delay: -0.7s;
 
+  top: 52px;
 
+  left: 11px;
 
+}
 
+.lds-default div:nth-child(9) {
 
+  animation-delay: -0.8s;
 
+  top: 62px;
 
+  left: 22px;
 
+}
 
+.lds-default div:nth-child(10) {
 
+  animation-delay: -0.9s;
 
+  top: 66px;
 
+  left: 37px;
 
+}
 
+.lds-default div:nth-child(11) {
 
+  animation-delay: -1s;
 
+  top: 62px;
 
+  left: 52px;
 
+}
 
+.lds-default div:nth-child(12) {
 
+  animation-delay: -1.1s;
 
+  top: 52px;
 
+  left: 62px;
 
+}
 
+@keyframes lds-default {
 
+  0%, 20%, 80%, 100% {
 
+    transform: scale(1);
 
+  }
 
+  50% {
 
+    transform: scale(1.5);
 
+  }
 
+}
 
+
 
+.lds-ellipsis {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-ellipsis div {
 
+  position: absolute;
 
+  top: 33px;
 
+  width: 13px;
 
+  height: 13px;
 
+  border-radius: 50%;
 
+  background: var(--color);
 
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
 
+}
 
+.lds-ellipsis div:nth-child(1) {
 
+  left: 8px;
 
+  animation: lds-ellipsis1 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(2) {
 
+  left: 8px;
 
+  animation: lds-ellipsis2 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(3) {
 
+  left: 32px;
 
+  animation: lds-ellipsis2 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(4) {
 
+  left: 56px;
 
+  animation: lds-ellipsis3 0.6s infinite;
 
+}
 
+@keyframes lds-ellipsis1 {
 
+  0% {
 
+    transform: scale(0);
 
+  }
 
+  100% {
 
+    transform: scale(1);
 
+  }
 
+}
 
+@keyframes lds-ellipsis3 {
 
+  0% {
 
+    transform: scale(1);
 
+  }
 
+  100% {
 
+    transform: scale(0);
 
+  }
 
+}
 
+@keyframes lds-ellipsis2 {
 
+  0% {
 
+    transform: translate(0, 0);
 
+  }
 
+  100% {
 
+    transform: translate(24px, 0);
 
+  }
 
+}
 
+
 
+.lds-spinner {
 
+  color: official;
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-spinner div {
 
+  transform-origin: 40px 40px;
 
+  animation: lds-spinner 1.2s linear infinite;
 
+}
 
+.lds-spinner div:after {
 
+  content: " ";
 
+  display: block;
 
+  position: absolute;
 
+  top: 3px;
 
+  left: 37px;
 
+  width: 6px;
 
+  height: 18px;
 
+  border-radius: 20%;
 
+  background: var(--color);
 
+}
 
+.lds-spinner div:nth-child(1) {
 
+  transform: rotate(0deg);
 
+  animation-delay: -1.1s;
 
+}
 
+.lds-spinner div:nth-child(2) {
 
+  transform: rotate(30deg);
 
+  animation-delay: -1s;
 
+}
 
+.lds-spinner div:nth-child(3) {
 
+  transform: rotate(60deg);
 
+  animation-delay: -0.9s;
 
+}
 
+.lds-spinner div:nth-child(4) {
 
+  transform: rotate(90deg);
 
+  animation-delay: -0.8s;
 
+}
 
+.lds-spinner div:nth-child(5) {
 
+  transform: rotate(120deg);
 
+  animation-delay: -0.7s;
 
+}
 
+.lds-spinner div:nth-child(6) {
 
+  transform: rotate(150deg);
 
+  animation-delay: -0.6s;
 
+}
 
+.lds-spinner div:nth-child(7) {
 
+  transform: rotate(180deg);
 
+  animation-delay: -0.5s;
 
+}
 
+.lds-spinner div:nth-child(8) {
 
+  transform: rotate(210deg);
 
+  animation-delay: -0.4s;
 
+}
 
+.lds-spinner div:nth-child(9) {
 
+  transform: rotate(240deg);
 
+  animation-delay: -0.3s;
 
+}
 
+.lds-spinner div:nth-child(10) {
 
+  transform: rotate(270deg);
 
+  animation-delay: -0.2s;
 
+}
 
+.lds-spinner div:nth-child(11) {
 
+  transform: rotate(300deg);
 
+  animation-delay: -0.1s;
 
+}
 
+.lds-spinner div:nth-child(12) {
 
+  transform: rotate(330deg);
 
+  animation-delay: 0s;
 
+}
 
+@keyframes lds-spinner {
 
+  0% {
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+.lds-ripple {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-ripple div {
 
+  position: absolute;
 
+  border: 4px solid var(--color);
 
+  opacity: 1;
 
+  border-radius: 50%;
 
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 
+}
 
+.lds-ripple div:nth-child(2) {
 
+  animation-delay: -0.5s;
 
+}
 
+@keyframes lds-ripple {
 
+  0% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 0;
 
+  }
 
+  4.9% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 0;
 
+  }
 
+  5% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    top: 0px;
 
+    left: 0px;
 
+    width: 72px;
 
+    height: 72px;
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+    
+    .center {
 
+      margin: 0;
 
+      position: absolute;
 
+      top: 50%;
 
+      left: 50%;
 
+      -ms-transform: translate(-50%, -50%);
 
+      transform: translate(-50%, -50%);
 
+    }}
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+function newLink() {
 
+  //get form element
 
+  var formEl = document.forms.config;
 
+  var formData = new FormData(formEl);  
+  const formElements = Array.from(formData);
 
+
 
+  //get current url
 
+  var href = window.location.href;
 
+  var dir = href.substring(0, href.lastIndexOf('/')) + "/";
 
+  var link = dir + "service.html?";
 
+  
+  //iterate form eles and build string
 
+  formElements.forEach((element, index) => {
 
+    if(index!=0){
 
+      link+= "&";
 
+    }
 
+    if(element[0].includes("color")){
 
+      link+= element[0] + "=" + element[1].substring(1);
 
+    }
 
+    else{
 
+      link+= element[0] + "=" + element[1];
 
+    }
 
+  });
 
+
 
+  //set new link
 
+  document.getElementById("showurl").innerText =link; 
+  top.document.getElementById('previewframe').setAttribute("src",link);
 
+}
 
+
 
+$(document).ready(function() {
 
+  newLink()
 
+});
 
+
 
+</script>
 
+
 
+<body >
 
+<!-- Animator taken from https://loading.io/css/ -->
 
+<!-- loading icons provided in this page are released under CC0 License -->
 
+
 
+
 
+  <template id="lds-ring">
 
+    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-dual-ring">
 
+    <div class="lds-dual-ring"></div>
 
+  </template>
 
+  <template id="lds-facebook">
 
+    <div class="lds-facebook"><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-roller">
 
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-default">
 
+    <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>  </template>
 
+  <template id="lds-ellipsis">
 
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-ripple">
 
+    <div class="lds-ripple"><div></div><div></div></div>  </template>
 
+  <template id="lds-spinner">
 
+    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  
+  
+    <form action="" id="config">
 
+      <input onchange="newLink()" type="radio" id="lds-ring" name="type" value="lds-ring" checked="checked">
 
+      <label for="lds-ring">  <div class="lds-ring"><div></div><div></div><div></div><div></div></div> </label>
 
+
 
+      <input onchange="newLink()" type="radio" id="lds-dual-ring" name="type" value="lds-dual-ring">
 
+      <label for="lds-dual-ring">    <div class="lds-dual-ring"></div> </label>
 
+
 
+      <input onchange="newLink()" type="radio" id="lds-facebook" name="type" value="lds-facebook">
 
+      <label for="lds-facebook">          <div class="lds-facebook"><div></div><div></div><div></div></div>   </label>
 
+
 
+      <input onchange="newLink()" type="radio" id="lds-roller" name="type" value="lds-roller">
 
+      <label for="lds-roller">        <div class="lds-roller" ><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></label>
 
+     
+      <input onchange="newLink()" type="radio" id="lds-default" name="type" value="lds-default">
 
+      <label for="lds-default">        <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></label>
 
+
 
+      <input onchange="newLink()" type="radio" id="lds-ellipsis" name="type" value="lds-ellipsis">
 
+      <label for="lds-ellipsis">        <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div></label>
 
+
 
+      <input onchange="newLink()" type="radio" id="lds-ripple" name="type" value="lds-ripple">
 
+      <label for="lds-ripple">        <div class="lds-ripple"><div></div><div></div></div></label>
 
+
 
+      <input onchange="newLink()" type="radio" id="lds-spinner" name="type" value="lds-spinner">
 
+      <label for="lds-spinner">        <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div> </label>
 
+      <br>
 
+
 
+
 
+      Spinner Color: <input onchange="newLink()" name="color" type="color" value="#1e90ff" /><br>
 
+      Background Color: <input onchange="newLink()" name="backgroundcolor"  type="color" value="#ffffff" /><br>
 
+      Text: <input onchange="newLink()" name="text" type="text"></input><br>
 
+      Font Color: <input onchange="newLink()" name="fontcolor" type="color" value="#000000" /><br>
 
+    </form>
 
+
 
+  <br>
 
+  URL:<br>
 
+  <span id="showurl"></span>
 
+
 
+  <br>
 
+  Iframe Preview:<br>
 
+  <iframe width="500" height="500" id="previewframe" src="https://centurio.evva.com/services/frames_support/spinner/service.html?text=Loading%20Serial%20Number&type=lds-spinner&color=000000&fontcolor=000" title="Spinner"></iframe>
 
+
 
+
 
+</div>
 
+
 
+
 
+</body>
 
+</html>

+ 583 - 0
spinner/preview.html
View File 

@@ -0,0 +1,583 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
+    <title>Design</title>
 
+    
+    <!-- libs, do not modify. When local than load local libs. -->
 
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.svg.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.svgdom.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/vkbeautify.js"></script>
 
+    <script type="text/javascript" src="/js_libs/util.js"></script>
 
+    <script type="text/javascript" src="/js_libs/printf.js"></script>
 
+    <script type="text/javascript" src="/js_libs/strftime.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/parsequery.js"></script>
 
+    <script type="text/javascript" src="/js_libs/underscore.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.caret.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.cookie.js"></script>
 
+    
+    
+    <script type="text/javascript" src="/js_libs/relaxngui.js"></script>
 
+    
+    <script type="text/javascript" src="/js_libs/ui.js"></script>
 
+    <script type="text/javascript" src="/js_libs/custommenu.js"></script>
 
+    
+    <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
 
+    <link   rel="stylesheet"      href="/js_libs/ui.css" type="text/css"/>
 
+    
+    <link   rel="stylesheet"      href="/js_libs/relaxngui.css" type="text/css"/>
 
+    
+    <link rel="icon" href="favicon.ico">
 
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
 
+    
+    <style>
 
+    :root {
 
+      --color: #1e90ff;
 
+      --backgroundcolor: fff;
 
+      --fontcolor: 000;
 
+    }
 
+    
+    body {
 
+      color: var(--fontcolor);
 
+      background-color: var(--backgroundcolor);
 
+    }
 
+    
+    .lds-ring {
 
+      display: inline-block;
 
+      position: relative;
 
+      width: 80px;
 
+      height: 80px;
 
+    }
 
+    .lds-ring div {
 
+      box-sizing: border-box;
 
+      display: block;
 
+      position: absolute;
 
+      width: 64px;
 
+      height: 64px;
 
+      margin: 8px;
 
+      border: 8px solid var(--color) ;
 
+      border-radius: 50%;
 
+      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 
+      border-color: var(--color) transparent transparent transparent;
 
+    }
 
+    .lds-ring div:nth-child(1) {
 
+      animation-delay: -0.45s;
 
+    }
 
+    .lds-ring div:nth-child(2) {
 
+      animation-delay: -0.3s;
 
+    }
 
+    .lds-ring div:nth-child(3) {
 
+      animation-delay: -0.15s;
 
+    }
 
+    @keyframes lds-ring {
 
+      0% {
 
+        transform: rotate(0deg);
 
+      }
 
+      100% {
 
+        transform: rotate(360deg);
 
+      }
 
+    }
 
+    
+    .lds-dual-ring {
 
+  display: inline-block;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-dual-ring:after {
 
+  content: " ";
 
+  display: block;
 
+  width: 64px;
 
+  height: 64px;
 
+  margin: 8px;
 
+  border-radius: 50%;
 
+  border: 6px solid red;
 
+  border-color: red transparent red transparent;
 
+  animation: lds-dual-ring 1.2s linear infinite;
 
+}
 
+@keyframes lds-dual-ring {
 
+  0% {
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+
 
+
 
+.lds-facebook {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-facebook div {
 
+  display: inline-block;
 
+  position: absolute;
 
+  left: 8px;
 
+  width: 16px;
 
+  background: lightgreen;
 
+  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 
+}
 
+.lds-facebook div:nth-child(1) {
 
+  left: 8px;
 
+  animation-delay: -0.24s;
 
+}
 
+.lds-facebook div:nth-child(2) {
 
+  left: 32px;
 
+  animation-delay: -0.12s;
 
+}
 
+.lds-facebook div:nth-child(3) {
 
+  left: 56px;
 
+  animation-delay: 0;
 
+}
 
+@keyframes lds-facebook {
 
+  0% {
 
+    top: 8px;
 
+    height: 64px;
 
+  }
 
+  50%, 100% {
 
+    top: 24px;
 
+    height: 32px;
 
+  }
 
+}
 
+
 
+.lds-roller {
 
+  display: inline-block;
 
+  position: relative;
 
+  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: orange;
 
+  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);
 
+  }
 
+}
 
+
 
+.lds-default {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-default div {
 
+  position: absolute;
 
+  width: 6px;
 
+  height: 6px;
 
+  background: pink;
 
+  border-radius: 50%;
 
+  animation: lds-default 1.2s linear infinite;
 
+}
 
+.lds-default div:nth-child(1) {
 
+  animation-delay: 0s;
 
+  top: 37px;
 
+  left: 66px;
 
+}
 
+.lds-default div:nth-child(2) {
 
+  animation-delay: -0.1s;
 
+  top: 22px;
 
+  left: 62px;
 
+}
 
+.lds-default div:nth-child(3) {
 
+  animation-delay: -0.2s;
 
+  top: 11px;
 
+  left: 52px;
 
+}
 
+.lds-default div:nth-child(4) {
 
+  animation-delay: -0.3s;
 
+  top: 7px;
 
+  left: 37px;
 
+}
 
+.lds-default div:nth-child(5) {
 
+  animation-delay: -0.4s;
 
+  top: 11px;
 
+  left: 22px;
 
+}
 
+.lds-default div:nth-child(6) {
 
+  animation-delay: -0.5s;
 
+  top: 22px;
 
+  left: 11px;
 
+}
 
+.lds-default div:nth-child(7) {
 
+  animation-delay: -0.6s;
 
+  top: 37px;
 
+  left: 7px;
 
+}
 
+.lds-default div:nth-child(8) {
 
+  animation-delay: -0.7s;
 
+  top: 52px;
 
+  left: 11px;
 
+}
 
+.lds-default div:nth-child(9) {
 
+  animation-delay: -0.8s;
 
+  top: 62px;
 
+  left: 22px;
 
+}
 
+.lds-default div:nth-child(10) {
 
+  animation-delay: -0.9s;
 
+  top: 66px;
 
+  left: 37px;
 
+}
 
+.lds-default div:nth-child(11) {
 
+  animation-delay: -1s;
 
+  top: 62px;
 
+  left: 52px;
 
+}
 
+.lds-default div:nth-child(12) {
 
+  animation-delay: -1.1s;
 
+  top: 52px;
 
+  left: 62px;
 
+}
 
+@keyframes lds-default {
 
+  0%, 20%, 80%, 100% {
 
+    transform: scale(1);
 
+  }
 
+  50% {
 
+    transform: scale(1.5);
 
+  }
 
+}
 
+
 
+.lds-ellipsis {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-ellipsis div {
 
+  position: absolute;
 
+  top: 33px;
 
+  width: 13px;
 
+  height: 13px;
 
+  border-radius: 50%;
 
+  background: yellow;
 
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
 
+}
 
+.lds-ellipsis div:nth-child(1) {
 
+  left: 8px;
 
+  animation: lds-ellipsis1 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(2) {
 
+  left: 8px;
 
+  animation: lds-ellipsis2 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(3) {
 
+  left: 32px;
 
+  animation: lds-ellipsis2 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(4) {
 
+  left: 56px;
 
+  animation: lds-ellipsis3 0.6s infinite;
 
+}
 
+@keyframes lds-ellipsis1 {
 
+  0% {
 
+    transform: scale(0);
 
+  }
 
+  100% {
 
+    transform: scale(1);
 
+  }
 
+}
 
+@keyframes lds-ellipsis3 {
 
+  0% {
 
+    transform: scale(1);
 
+  }
 
+  100% {
 
+    transform: scale(0);
 
+  }
 
+}
 
+@keyframes lds-ellipsis2 {
 
+  0% {
 
+    transform: translate(0, 0);
 
+  }
 
+  100% {
 
+    transform: translate(24px, 0);
 
+  }
 
+}
 
+
 
+.lds-spinner {
 
+  color: official;
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-spinner div {
 
+  transform-origin: 40px 40px;
 
+  animation: lds-spinner 1.2s linear infinite;
 
+}
 
+.lds-spinner div:after {
 
+  content: " ";
 
+  display: block;
 
+  position: absolute;
 
+  top: 3px;
 
+  left: 37px;
 
+  width: 6px;
 
+  height: 18px;
 
+  border-radius: 20%;
 
+  background: #fcf;
 
+}
 
+.lds-spinner div:nth-child(1) {
 
+  transform: rotate(0deg);
 
+  animation-delay: -1.1s;
 
+}
 
+.lds-spinner div:nth-child(2) {
 
+  transform: rotate(30deg);
 
+  animation-delay: -1s;
 
+}
 
+.lds-spinner div:nth-child(3) {
 
+  transform: rotate(60deg);
 
+  animation-delay: -0.9s;
 
+}
 
+.lds-spinner div:nth-child(4) {
 
+  transform: rotate(90deg);
 
+  animation-delay: -0.8s;
 
+}
 
+.lds-spinner div:nth-child(5) {
 
+  transform: rotate(120deg);
 
+  animation-delay: -0.7s;
 
+}
 
+.lds-spinner div:nth-child(6) {
 
+  transform: rotate(150deg);
 
+  animation-delay: -0.6s;
 
+}
 
+.lds-spinner div:nth-child(7) {
 
+  transform: rotate(180deg);
 
+  animation-delay: -0.5s;
 
+}
 
+.lds-spinner div:nth-child(8) {
 
+  transform: rotate(210deg);
 
+  animation-delay: -0.4s;
 
+}
 
+.lds-spinner div:nth-child(9) {
 
+  transform: rotate(240deg);
 
+  animation-delay: -0.3s;
 
+}
 
+.lds-spinner div:nth-child(10) {
 
+  transform: rotate(270deg);
 
+  animation-delay: -0.2s;
 
+}
 
+.lds-spinner div:nth-child(11) {
 
+  transform: rotate(300deg);
 
+  animation-delay: -0.1s;
 
+}
 
+.lds-spinner div:nth-child(12) {
 
+  transform: rotate(330deg);
 
+  animation-delay: 0s;
 
+}
 
+@keyframes lds-spinner {
 
+  0% {
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+.lds-ripple {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-ripple div {
 
+  position: absolute;
 
+  border: 4px solid #dfc;
 
+  opacity: 1;
 
+  border-radius: 50%;
 
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 
+}
 
+.lds-ripple div:nth-child(2) {
 
+  animation-delay: -0.5s;
 
+}
 
+@keyframes lds-ripple {
 
+  0% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 0;
 
+  }
 
+  4.9% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 0;
 
+  }
 
+  5% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    top: 0px;
 
+    left: 0px;
 
+    width: 72px;
 
+    height: 72px;
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+    
+    .center {
 
+      margin: 0;
 
+      position: absolute;
 
+      top: 50%;
 
+      left: 50%;
 
+      -ms-transform: translate(-50%, -50%);
 
+      transform: translate(-50%, -50%);
 
+    }}
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+</script>
 
+
 
+<body >
 
+<!-- Animator taken from https://loading.io/css/ -->
 
+<!-- loading icons provided in this page are released under CC0 License -->
 
+
 
+
 
+  <template id="lds-ring">
 
+    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-dual-ring">
 
+    <div class="lds-dual-ring"></div>
 
+  </template>
 
+  <template id="lds-facebook">
 
+    <div class="lds-facebook"><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-roller">
 
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-default">
 
+    <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>  </template>
 
+  <template id="lds-ellipsis">
 
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-ripple">
 
+    <div class="lds-ripple"><div></div><div></div></div>  </template>
 
+  <template id="lds-spinner">
 
+    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  
+  
+  
+
 
+<div id="type">
 
+  <div class="lds-ring"><div></div><div></div><div></div><div></div></div> 
+  <div class="lds-dual-ring"></div>
 
+      <div class="lds-facebook"><div></div><div></div><div></div></div>
 
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
 
+    <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>  </template>
 
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
 
+    <div class="lds-ripple"><div></div><div></div></div>  </template>
 
+    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
 
+</div>
 
+
 
+
 
+<div id="type2">
 
+</div>
 
+<div>
 
+  <div id="spantext">Wähle dein Design, passe die Farben an und Setze deinen Text darunter.</div>
 
+</div>
 
+
 
+
 
+</div>
 
+
 
+</body>
 
+</html>

+ 585 - 0
spinner/service.html
View File 

@@ -0,0 +1,585 @@
 
+<!--
 
+  This file is part of centurio.work/commands.
 
+  
+  centurio.work/commands is free software: you can redistribute it and/or
 
+  modify it under the terms of the GNU General Public License as published by
 
+  the Free Software Foundation, either version 3 of the License, or (at your
 
+  option) any later version.
 
+  
+  centurio.work/commands is distributed in the hope that it will be useful, but
 
+  WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 
+  FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
 
+  more details.
 
+  
+  You should have received a copy of the GNU General Public License along with
 
+  centurio.work/commands (file COPYING in the main directory).  If not, see
 
+  <http://www.gnu.org/licenses/>.
 
+  -->
 
+
 
+<!DOCTYPE html>
 
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
+  <head>
 
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
+    <title>Design</title>
 
+    
+    <!-- libs, do not modify. When local than load local libs. -->
 
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
 
+    <script type="text/javascript" src="/js_libs/jquery.browser.js"></script>
 
+    
+    
+    <link rel="icon" href="favicon.ico">
 
+    <link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
 
+    
+    <style>
 
+    :root {
 
+      --color: #1e90ff;
 
+      --backgroundcolor: fff;
 
+      --fontcolor: 000;
 
+    }
 
+    
+    body {
 
+      color: var(--fontcolor);
 
+      background-color: var(--backgroundcolor);
 
+    }
 
+    
+    .lds-ring {
 
+      display: inline-block;
 
+      position: relative;
 
+      width: 80px;
 
+      height: 80px;
 
+    }
 
+    .lds-ring div {
 
+      box-sizing: border-box;
 
+      display: block;
 
+      position: absolute;
 
+      width: 64px;
 
+      height: 64px;
 
+      margin: 8px;
 
+      border: 8px solid var(--color) ;
 
+      border-radius: 50%;
 
+      animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 
+      border-color: var(--color) transparent transparent transparent;
 
+    }
 
+    .lds-ring div:nth-child(1) {
 
+      animation-delay: -0.45s;
 
+    }
 
+    .lds-ring div:nth-child(2) {
 
+      animation-delay: -0.3s;
 
+    }
 
+    .lds-ring div:nth-child(3) {
 
+      animation-delay: -0.15s;
 
+    }
 
+    @keyframes lds-ring {
 
+      0% {
 
+        transform: rotate(0deg);
 
+      }
 
+      100% {
 
+        transform: rotate(360deg);
 
+      }
 
+    }
 
+    
+    .lds-dual-ring {
 
+  display: inline-block;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-dual-ring:after {
 
+  content: " ";
 
+  display: block;
 
+  width: 64px;
 
+  height: 64px;
 
+  margin: 8px;
 
+  border-radius: 50%;
 
+  border: 6px solid var(--color);
 
+  border-color: var(--color) transparent var(--color) transparent;
 
+  animation: lds-dual-ring 1.2s linear infinite;
 
+}
 
+@keyframes lds-dual-ring {
 
+  0% {
 
+    transform: rotate(0deg);
 
+  }
 
+  100% {
 
+    transform: rotate(360deg);
 
+  }
 
+}
 
+
 
+
 
+.lds-facebook {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-facebook div {
 
+  display: inline-block;
 
+  position: absolute;
 
+  left: 8px;
 
+  width: 16px;
 
+  background: var(--color);
 
+  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
 
+}
 
+.lds-facebook div:nth-child(1) {
 
+  left: 8px;
 
+  animation-delay: -0.24s;
 
+}
 
+.lds-facebook div:nth-child(2) {
 
+  left: 32px;
 
+  animation-delay: -0.12s;
 
+}
 
+.lds-facebook div:nth-child(3) {
 
+  left: 56px;
 
+  animation-delay: 0;
 
+}
 
+@keyframes lds-facebook {
 
+  0% {
 
+    top: 8px;
 
+    height: 64px;
 
+  }
 
+  50%, 100% {
 
+    top: 24px;
 
+    height: 32px;
 
+  }
 
+}
 
+
 
+.lds-roller {
 
+  display: inline-block;
 
+  position: relative;
 
+  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: var(--color);
 
+  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);
 
+  }
 
+}
 
+
 
+.lds-default {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-default div {
 
+  position: absolute;
 
+  width: 6px;
 
+  height: 6px;
 
+  background: var(--color);
 
+  border-radius: 50%;
 
+  animation: lds-default 1.2s linear infinite;
 
+}
 
+.lds-default div:nth-child(1) {
 
+  animation-delay: 0s;
 
+  top: 37px;
 
+  left: 66px;
 
+}
 
+.lds-default div:nth-child(2) {
 
+  animation-delay: -0.1s;
 
+  top: 22px;
 
+  left: 62px;
 
+}
 
+.lds-default div:nth-child(3) {
 
+  animation-delay: -0.2s;
 
+  top: 11px;
 
+  left: 52px;
 
+}
 
+.lds-default div:nth-child(4) {
 
+  animation-delay: -0.3s;
 
+  top: 7px;
 
+  left: 37px;
 
+}
 
+.lds-default div:nth-child(5) {
 
+  animation-delay: -0.4s;
 
+  top: 11px;
 
+  left: 22px;
 
+}
 
+.lds-default div:nth-child(6) {
 
+  animation-delay: -0.5s;
 
+  top: 22px;
 
+  left: 11px;
 
+}
 
+.lds-default div:nth-child(7) {
 
+  animation-delay: -0.6s;
 
+  top: 37px;
 
+  left: 7px;
 
+}
 
+.lds-default div:nth-child(8) {
 
+  animation-delay: -0.7s;
 
+  top: 52px;
 
+  left: 11px;
 
+}
 
+.lds-default div:nth-child(9) {
 
+  animation-delay: -0.8s;
 
+  top: 62px;
 
+  left: 22px;
 
+}
 
+.lds-default div:nth-child(10) {
 
+  animation-delay: -0.9s;
 
+  top: 66px;
 
+  left: 37px;
 
+}
 
+.lds-default div:nth-child(11) {
 
+  animation-delay: -1s;
 
+  top: 62px;
 
+  left: 52px;
 
+}
 
+.lds-default div:nth-child(12) {
 
+  animation-delay: -1.1s;
 
+  top: 52px;
 
+  left: 62px;
 
+}
 
+@keyframes lds-default {
 
+  0%, 20%, 80%, 100% {
 
+    transform: scale(1);
 
+  }
 
+  50% {
 
+    transform: scale(1.5);
 
+  }
 
+}
 
+
 
+.lds-ellipsis {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-ellipsis div {
 
+  position: absolute;
 
+  top: 33px;
 
+  width: 13px;
 
+  height: 13px;
 
+  border-radius: 50%;
 
+  background: var(--color);
 
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
 
+}
 
+.lds-ellipsis div:nth-child(1) {
 
+  left: 8px;
 
+  animation: lds-ellipsis1 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(2) {
 
+  left: 8px;
 
+  animation: lds-ellipsis2 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(3) {
 
+  left: 32px;
 
+  animation: lds-ellipsis2 0.6s infinite;
 
+}
 
+.lds-ellipsis div:nth-child(4) {
 
+  left: 56px;
 
+  animation: lds-ellipsis3 0.6s infinite;
 
+}
 
+@keyframes lds-ellipsis1 {
 
+  0% {
 
+    transform: scale(0);
 
+  }
 
+  100% {
 
+    transform: scale(1);
 
+  }
 
+}
 
+@keyframes lds-ellipsis3 {
 
+  0% {
 
+    transform: scale(1);
 
+  }
 
+  100% {
 
+    transform: scale(0);
 
+  }
 
+}
 
+@keyframes lds-ellipsis2 {
 
+  0% {
 
+    transform: translate(0, 0);
 
+  }
 
+  100% {
 
+    transform: translate(24px, 0);
 
+  }
 
+}
 
+
 
+.lds-spinner {
 
+  color: official;
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-spinner div {
 
+  transform-origin: 40px 40px;
 
+  animation: lds-spinner 1.2s linear infinite;
 
+}
 
+.lds-spinner div:after {
 
+  content: " ";
 
+  display: block;
 
+  position: absolute;
 
+  top: 3px;
 
+  left: 37px;
 
+  width: 6px;
 
+  height: 18px;
 
+  border-radius: 20%;
 
+  background: var(--color);
 
+}
 
+.lds-spinner div:nth-child(1) {
 
+  transform: rotate(0deg);
 
+  animation-delay: -1.1s;
 
+}
 
+.lds-spinner div:nth-child(2) {
 
+  transform: rotate(30deg);
 
+  animation-delay: -1s;
 
+}
 
+.lds-spinner div:nth-child(3) {
 
+  transform: rotate(60deg);
 
+  animation-delay: -0.9s;
 
+}
 
+.lds-spinner div:nth-child(4) {
 
+  transform: rotate(90deg);
 
+  animation-delay: -0.8s;
 
+}
 
+.lds-spinner div:nth-child(5) {
 
+  transform: rotate(120deg);
 
+  animation-delay: -0.7s;
 
+}
 
+.lds-spinner div:nth-child(6) {
 
+  transform: rotate(150deg);
 
+  animation-delay: -0.6s;
 
+}
 
+.lds-spinner div:nth-child(7) {
 
+  transform: rotate(180deg);
 
+  animation-delay: -0.5s;
 
+}
 
+.lds-spinner div:nth-child(8) {
 
+  transform: rotate(210deg);
 
+  animation-delay: -0.4s;
 
+}
 
+.lds-spinner div:nth-child(9) {
 
+  transform: rotate(240deg);
 
+  animation-delay: -0.3s;
 
+}
 
+.lds-spinner div:nth-child(10) {
 
+  transform: rotate(270deg);
 
+  animation-delay: -0.2s;
 
+}
 
+.lds-spinner div:nth-child(11) {
 
+  transform: rotate(300deg);
 
+  animation-delay: -0.1s;
 
+}
 
+.lds-spinner div:nth-child(12) {
 
+  transform: rotate(330deg);
 
+  animation-delay: 0s;
 
+}
 
+@keyframes lds-spinner {
 
+  0% {
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+.lds-ripple {
 
+  display: inline-block;
 
+  position: relative;
 
+  width: 80px;
 
+  height: 80px;
 
+}
 
+.lds-ripple div {
 
+  position: absolute;
 
+  border: 4px solid var(--color);
 
+  opacity: 1;
 
+  border-radius: 50%;
 
+  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 
+}
 
+.lds-ripple div:nth-child(2) {
 
+  animation-delay: -0.5s;
 
+}
 
+@keyframes lds-ripple {
 
+  0% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 0;
 
+  }
 
+  4.9% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 0;
 
+  }
 
+  5% {
 
+    top: 36px;
 
+    left: 36px;
 
+    width: 0;
 
+    height: 0;
 
+    opacity: 1;
 
+  }
 
+  100% {
 
+    top: 0px;
 
+    left: 0px;
 
+    width: 72px;
 
+    height: 72px;
 
+    opacity: 0;
 
+  }
 
+}
 
+
 
+    
+    .center {
 
+      margin: 0;
 
+      position: absolute;
 
+      top: 50%;
 
+      left: 50%;
 
+      -ms-transform: translate(-50%, -50%);
 
+      transform: translate(-50%, -50%);
 
+    }}
 
+    </style>
 
+    
+  </head>
 
+<script>
 
+
 
+$(document).ready(function() {
 
+  const queryString = window.location.search;
 
+  const urlParams = new URLSearchParams(queryString);
 
+  const text = urlParams.get('text')
 
+  const type = urlParams.get('type')
 
+  const color = urlParams.get('color')
 
+  const backgroundcolor = urlParams.get('backgroundcolor')
 
+  const fontcolor = urlParams.get('fontcolor')
 
+  var r = document.documentElement;
 
+
 
+  if(color != null){
 
+    r.style.setProperty('--color', "#" + color);
 
+  }
 
+  if(backgroundcolor != null){
 
+    r.style.setProperty('--backgroundcolor', "#" + backgroundcolor);
 
+  }
 
+  if(fontcolor != null){
 
+    r.style.setProperty('--fontcolor', "#" + fontcolor);
 
+  }
 
+  if(text != null){
 
+    document.getElementById("spantext").innerHTML =text;
 
+  }
 
+  if(type != null){
 
+        var clone = document.importNode(document.querySelector('#' + type).content,true);
 
+        $('#type').append(clone);
 
+  }
 
+  else{
 
+        var clone = document.importNode(document.querySelector('#lds-ring').content,true);
 
+        $('#type').append(clone);
 
+  }
 
+
 
+});
 
+
 
+</script>
 
+
 
+<body >
 
+<!-- Animator taken from https://loading.io/css/ -->
 
+<!-- loading icons provided in this page are released under CC0 License -->
 
+
 
+
 
+  <template id="lds-ring">
 
+    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-dual-ring">
 
+    <div class="lds-dual-ring"></div>
 
+  </template>
 
+  <template id="lds-facebook">
 
+    <div class="lds-facebook"><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-roller">
 
+    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-default">
 
+    <div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>  </template>
 
+  <template id="lds-ellipsis">
 
+    <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  <template id="lds-ripple">
 
+    <div class="lds-ripple"><div></div><div></div></div>  </template>
 
+  <template id="lds-spinner">
 
+    <div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
 
+  </template>
 
+  
+  
+  
+
 
+<div class="center" style="top:calc(50% + 50px)">
 
+  <div id="spantext"></div>
 
+</div>
 
+<div id="type" class="center">
 
+
 
+</div>
 
+
 
+
 
+</div>
 
+
 
+</body>
 
+</html>