po1son
/
Frames-Support


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