po1son
/
Frames-Support


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