form multi

by zerrax

HTML

<div class="tool">

<div class="wrapper">
  <label style="">
  <a>Active Real Fund Buy Sell</a>
    <input onchange="set(this)" type="checkbox" name="buy" id="toggle">
    <label for="toggle"></label>
  </label>
</div>
<div class="wrapper">
  <label style="">
  <a>Start Stop Trading view Module</a>
    <input onchange="set(this)" type="checkbox" name="tvm" id="toggle">
    <label for="toggle"></label>
  </label>
</div>
<div class="wrapper">
  <label style="">
  <a>Start Stop bot</a>
    <input onchange="set(this)" type="checkbox" name="sst" id="toggle">
    <label for="toggle"></label>
  </label>
</div>
<div class="wrapper">
  <label style="">
  <a>Activate Debug mode</a>
    <input onchange="set(this)" type="checkbox" name="adm" id="toggle">
    <label for="toggle"></label>
  </label>
</div>

<div class="wrapper">
<label style="">
  <a>biance api key</a>
  <input value="" id="bak" type="text">
  <button name="bak" onclick="set(this)">ok</button>
  </label>
</div>

<div class="wrapper">
<label style="">
  <a>biance private key</a>
  <input value="" id="bpk" type="text">
  <button name="bpk" onclick="set(this)">ok</button>
  </label>
</div>



<div class="wrapper">
<label style="">
  <a>telegram api key</a>
  <input value="" id="tak" type="text">
  <button name="tak" onclick="set(this)">ok</button>
  </label>
</div>

<div class="wrapper">
<label style="">
  <a>telegram private key</a>
  <input value="" id="tpk" type="text">
  <button name="tpk" onclick="set(this)">ok</button>
  </label>
</div>
<div class="wrapper">
<label style="">
  <a>Email Url</a>
  <input value="" id="eu" type="text">
  <button name="eu" onclick="set(this)">ok</button>
  </label>
</div>

<div class="wrapper">
<label style="">
  <a>Panel Password</a>
  <input value="" id="pp" type="text">
  <button name="pp" onclick="set(this)">ok</button>
  </label>
</div>

</div>

CSS

body{
  margin:0;
  padding:0;
  background:black;
}
.tool{
  padding:15px;
    display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;

}
/* Hides the checkbox */
input#toggle {
  max-height: 0;
  max-width: 0;
  opacity: 0;
  
}
*:focus {
    outline: none;
}
/* <label> style to look/animate like ios toggle button */
input#toggle + label {
  display: block;
  position: relative;
  box-shadow: inset 0 0 0px 1px #d5d5d5;
  text-indent: -5000px;
  height: 30px;
  width: 60px;
  border-radius: 15px;
      right: 0;
    position: absolute;
        top: 0px;
}

input#toggle + label:before {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0;
  border-radius: 15px;
  background: rgba(19, 191, 17, 0);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
  
}

input#toggle + label:after {
  content: "";
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 0;
  left: 0px;
  border-radius: 15px;
  background: white;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 2px 4px rgba(0, 0, 0, .2);
  -moz-transition: .25s ease-in-out;
  -webkit-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Switch background if checked */
input#toggle:checked + label:before {
  width: 60px;
  background: rgba(19, 191, 17, 1);
}

input#toggle:checked + label:after {
  left: 30px;
  box-shadow: inset 0 0 0 1px rgba(19, 191, 17, 1), 0 2px 4px rgba(0, 0, 0, .2);
 
}
div.wrapper > label{
//  background:#2d333b;
  display: flex;
  border-radius:6px;
  padding:5px;
  color:#eee;
  //border:solid 1.3px rgba(0,0,0,0.8);
  width:100%;
  position: relative;
      display: block;
}
div.wrapper{
  margin:10px;

}
div.wrapper > label > a {
      padding: 5px;
margin-top:10px;
font-size: 16px;
}
div.wrapper > label > input{
  background: rgba(0,0,0,0.2);
  border: solid rgba(255,255,255,0.4) 1px;
  margin:3px;
  color:#ddd;
 ...

JavaScript

function set($a)
{
  if($a.name == "buy")
  {
  	req("acc.php?buy="+$a.checked");
  }
  else if($a.name == "tvm")
  {
  	req("acc.php?tvm="+$a.checked");
  }
  else if($a.name == "sst")
  {
  	req("acc.php?sst="+$a.checked");
  }
  else if($a.name == "adm")
  {
  	req("acc.php?adm="+$a.checked");
  }
  else if($a.name == "bak")
  {
  	req("acc.php?bak="+$a.checked");
  }
  else if($a.name == "bpk")
  {
  	req("acc.php?bpk="+$a.checked");
  }
  else if($a.name == "pp")
  {
  	req("acc.php?pp="+$a.checked");
  }
  else if($a.name == "eu")
  {
  	req("acc.php?eu="+$a.checked");
  }
   else if($a.name == "tpk")
  {
  	req("acc.php?tpk="+$a.checked");
  }
  else if($a.name == "tak")
  {
  	req("acc.php?tak="+$a.checked");
  }
  else{
  
  }
}
function req($url)
{
	var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function()
    { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
        {
           // callback(xmlHttp.responseText);
        }
    }
    xmlHttp.open("GET", $url, true); // true for asynchronous 
    xmlHttp.send(null)
}