<!DOCTYPE html>
<html>
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.menu{
  width: 700px;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background-color: rgb(0, 0, 0); 
  border-color: 1px white;
  border-style: solid;
  display: block;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select:none;
}
.verpopup{
  width: 650px;
  height: 300px;
  margin: auto;
  border-radius: 10px;
  background-color: rgb(44, 43, 43); 
  border-color: 1px white;
  border-style: solid;
  color: #ffffff;
  position: relative;
  text-align: center;
  display: none;
}
.area {
  height:240px;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: -10px;
  margin-bottom: 0px;
  flex-wrap: wrap;
  display: flex;
  user-select: none;
  -webkit-user-select:none;
}
.tab_class {
  width: 70px;
  height: 20px;
  margin-bottom:calc(100%/5);
  margin : auto;
  margin-left: 0px;
  justify-content: center;
  background-color: rgb(255, 255, 255);
  line-height: 20px;
  font-size: 15px;
  text-align: center;
  float: left;
  order: -1;
  border: 1px solid #999;
  border-radius: 6px;
  color: rgb(0, 0, 0);
  padding:5px 0;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select:none;
  letter-spacing: 13;

}
.menucontent{
  width: 90px;
  height: 100%;
  border-right: 2px solid #ffffff;
}
.cheatcontent{
  width: 265px;
  margin-left: 15px;
  border-right: 2px solid #ffffff;
  height: 240px;
}
.onec{
  border-radius: 10px;
  width: 250px;
  height: 40px;
  overflow: hidden;
  color: rgb(255, 255, 255);
  margin-right: 20px;
  margin-bottom: 5px;
  background-color: rgb(255, 255, 255);
} 
.nnmma{
  font-size: 17px;
  font-weight:bold;
  position:absolute;
  margin-left:15px;
  margin-top:8.5px;
  user-select: none;
  color: rgb(0, 0, 0);
}
.title{
  border-bottom: 1px solid #333;
}
input[name="tab_name"] {
  display: none;
}
 
input:checked + .tab_class {
  background-color: rgb(0, 0, 0);
  color: aliceblue;
}

input:checked + .tab_class +.content_class {
  display: block;
}

h1{
    font-size: 17px;
    font-weight:bold;
    margin-bottom: 17px;
    user-select: none;
}
.sliders{
    width: 5px;
}
.downmenu{
    display: flex;
    width: 605px;
}
.slidd{
    width: 100px;
}
.text{
    font-size: 24px;
    margin-left: 5px;
    text-align: center;
}
span{
    font-size: 20px;
    color: white;
    font-weight: bold;
}
.checks{
    height: 200px;
    justify-content: flex-end;
    margin-left: 5px;
    margin-top: 7px;
}
.content_class {
  display: none;
  margin-top: 0px;
  width: 100%;
}

.c-switch-check {
    display: none;
}
.c-switch-label {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
    border-radius: calc(30px / 2);
    background: #cccccc;
    transition: background 200ms;
    margin-top:5px;
    margin-left:190px;
}
.c-switch-label::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    display: block;
    width: calc(30px - 4px);
    height: calc(30px - 4px);
    border-radius: calc((30px - 4px) / 2);
    background: #ffffff;
    transform: translateX(0);
    transition: transform 200ms;
    margin:0 auto;
}
.c-switch-check:checked + .c-switch-label {
    background: #55d150;
}
.c-switch-check:checked + .c-switch-label::before {
    transform: translateX(calc((50px - 4px) - (30px - 4px)));
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  width: 65%;
  margin-left: 10px;
  margin-top: 10px;
}
 
/* Track: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-runnable-track {
  background: #000000;
  height: 8px;
  border-radius: 8px;
  margin-bottom: 5px;
  margin-top: 5px;
}
 
/* Thumb: Chrome, Safari, Opera, Edge Chromium */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  margin-top: -6px; /* 位置の調整が必要 */
  background-color: #4cabe2;
  border-radius: 50%;
  margin-bottom: 5px;
}
</style>
<meta charset="UTF-8">
<div class="verpopup" id="verpp">
<h1 id="Verx1">EXmod Update</h1>
</br>
<a style="color: #70f119;">|--------------|</a></br><a>Added SpeedHack</a></br>
<button onclick="Closepopup()" style="display: block ; position: absolute; right: 20px ; bottom: 20px">Close This Window</button>
</div>
</head>
<div class="menu" id="menupp">
  <div style="border-bottom: 2px solid #ffffff;"><a>EX</a></div>
</br>
<div class="area">
  <div class="menucontent">
    <input type="radio" name="tab_name" id="tab1" checked>
    <label class="tab_class" for="tab1" style="font-weight: bold;">Visual</label></br></br>
    <input type="radio" name="tab_name" id="tab2">
    <label class="tab_class" for="tab2" style="font-weight: bold;">Player</label></br></br>
    <input type="radio" name="tab_name" id="tab3">
    <label class="tab_class" for="tab3" style="font-weight: bold;">Battle</label></br></br>
    <input type="radio" name="tab_name" id="tab4">
    <label class="tab_class" for="tab4" style="font-weight: bold;">Misc</label></br></br>
    <input type="radio" name="tab_name" id="tab5">
    <label class="tab_class" for="tab5" style="font-weight: bold;">INFO</label></br></br>
  </div>
  <br>
  <div class="cheatcontent">
    <div id="cheat1"style="display: none; ">
      <div class="onec">
        <a class="nnmma">PlayerColorRED</a>
        <input type="checkbox" id="pr"class="c-switch-check">
        <label class="c-switch-label" for="pr"></label>
      </div>
      <div class="onec">
        <a class="nnmma">PlayerColorGREEN</a>
        <input type="checkbox" id="pg"class="c-switch-check">
        <label class="c-switch-label" for="pg"></label>
      </div>
      <div class="onec">
        <a class="nnmma">PlayerColorBLUE</a>
        <input type="checkbox" id="pb"class="c-switch-check">
        <label class="c-switch-label" for="pb"></label>
      </div>
    </div>
    <div id="cheat2"style="display: none;">
      <div class="onec">
        <a class="nnmma">Speed</a>
        <input type="checkbox" id="s625"class="c-switch-check">
        <label class="c-switch-label" for="s625"></label>
      </div>
      <div class="onec">
        <a class="nnmma">MiniJump</a>
        <input type="checkbox" id="mjp"class="c-switch-check">
        <label class="c-switch-label" for="mjp"></label>
      </div>
      <div class="onec">
        <a class="nnmma">HighHop</a>
        <input type="checkbox" id="hh"class="c-switch-check">
        <label class="c-switch-label" for="hh"></label>
      </div>
      <div class="onec">
        <a class="nnmma">IgnoreObject</a>
        <input type="checkbox" id="io"class="c-switch-check">
        <label class="c-switch-label" for="io"></label>
      </div>
      <div class="onec">
        <a class="nnmma">DeleteObject</a>
        <input type="checkbox" id="do"class="c-switch-check">
        <label class="c-switch-label" for="do"></label>
      </div>
    </div>
    <div id="cheat3"style="display: none;">
      <div class="onec">
        <a class="nnmma">pSilent</a>
        <input type="checkbox" id="ps"class="c-switch-check">
        <label class="c-switch-label" for="ps"></label>
      </div>
      <div class="onec">
        <a class="nnmma">pSilent Range</a>
      </div>
      <div class="onec">
        <input type="range" id="prange" name="sliders" min="0" max="10" step="1" value="0">
      </div>
    </div>
    <div id="cheat4"style="display: none;">
      <div class="onec">
        <a class="nnmma">Coming Soon...</a>
      </div>
    </div>
    <div id="cheat5"style="display: none;">
      <div class="onec">
        <a class="nnmma">Made by ??????????</a>
      </div>
    </div>
  </div>
  <br>
  <div class="cheatcontent">
    <div id="cheat6"style="display: none; ">
      <div class="onec">
        <a class="nnmma">WorldColorRED</a>
        <input type="checkbox" id="wr"class="c-switch-check">
        <label class="c-switch-label" for="wr"></label>
      </div>
      <div class="onec">
        <a class="nnmma">WorldColorGREEN</a>
        <input type="checkbox" id="wg"class="c-switch-check">
        <label class="c-switch-label" for="wg"></label>
      </div>
      <div class="onec">
        <a class="nnmma">WorldColorBLUE</a>
        <input type="checkbox" id="wb"class="c-switch-check">
        <label class="c-switch-label" for="wb"></label>
      </div>
    </div>
    <div id="cheat7"style="display: none;">
      
    </div>
    <div id="cheat8"style="display: none;">
      <div class="onec">
        <a class="nnmma">Suoto</a>
        <input type="checkbox" id="st"class="c-switch-check">
        <label class="c-switch-label" for="st"></label>
      </div>
      <div class="onec">
        <a class="nnmma">Suojia</a>
        <input type="checkbox" id="sj"class="c-switch-check">
        <label class="c-switch-label" for="sj"></label>
      </div>
      <div class="onec">
        <a class="nnmma">SuojiaLevel</a>
      </div>
      <div class="onec">
        <input type="range" id="psj" name="sliders" min="0" max="10" step="1" value="0">
      </div>
    </div>
    <div id="cheat9"style="display: none;">
      <div class="onec">
        <a class="nnmma">Coming Soon...</a>
      </div>
    </div>
    <div id="cheat10"style="display: none;">

    </div>
  </div>
  
  

    
    
    
            
</div>
</div>
</html>