po1son
/
Frames-Support


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407
							<!--
  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>