Threat Index Calculator

index.html

<div class="flat-form">
  <ul class="tabs">
    <li>
      <a href="#login" class="active">Threat Index</a>
    </li>
    <li>
      <a href="#register">FKDR</a>
    </li>
    <li>
      <a href="#reset">BW Level</a>
    </li>
  </ul>
  <div id="login" class="form-action show">
    <h1>Calculate Threat Index</h1>
    <p>To calculate your threat index, fill in your bedwars level and FKDR below</p>
    <form id='index-form'>
      <h2>Threat Indecies</h2>
      <ul class="indecies">
        <li style="color: #AAAAAA;">Gray (0 - 45)</li>
        <li style="color: #55FF55;">Light Green (46 - 80)</li>
        <li style="color: #00AA00;">Green (81 - 120)</li>
        <li style="color: #FFFF55;">Yellow (121 - 225)</li>
        <li style="color: #FFAA00;">Orange (226 - 325)</li>
        <li style="color: #FF5555;">Light Red (326 - 650)</li>
        <li style="color: #CC2222;">Red (651+)</li>
      </ul>
      <br>
      <ul class="inputs">
        <li>
          <input id="index-bwl" type="number" placeholder="Bedwars Level" />
        </li>
        <li>
          <input id="index-fkdr" type="number" placeholder="Final KDR" step="0.01" />
        </li>
        <li class="calc">
          <input type="submit" value="Calculate" class="button" />
          <h3>Index: <span id="index-calc">0</span></h3>
        </li>
      </ul>
    </form>
  </div>
  <!--/#login.form-action-->
  <div id="register" class="form-action hide">
    <h1>Calculate Final KDR</h1>
    <p>Input your Bedwars level and desired threat index. Then it will calculate the Final KDR you would need to achieve that</p>
    <form id='fkdr-form'>
      <h2>Threat Indecies</h2>
      <ul class="indecies">
        <li style="color: #AAAAAA;">Gray (0 - 45)</li>
        <li style="color: #55FF55;">Light Green (46 - 80)</li>
        <li style="color: #00AA00;">Green (81 - 120)</li>
        <li style="color: #FFFF55;">Yellow (121 - 225)</li>
        <li style="color: #FFAA00;">Orange (226 - 325)</li>
        <li style="color: #FF5555;">Light Red (326 - 650)</li>
        <li style="color: #CC2222;">Red (651+)</li>
      </ul>
      <br>
      <ul class="inputs">
        <li>
          <input id="fkdr-bwl" type="number" placeholder="Bedwars Level" />
        </li>
        <li>
          <input id="fkdr-index" type="number" placeholder="Desired Threat Index" step="0.01" />
        </li>
        <li class="calc">
          <input type="submit" value="Calculate" class="button" />
          <h3>Final KDR: <span id="fkdr-calc">0</span></h3>
        </li>
      </ul>
    </form>
  </div>
  <!--/#register.form-action-->
  <div id="reset" class="form-action hide">
    <h1>Calculate Bedwars Level</h1>
    <p>Input your FKDR and desired threat index and it will calculate the Bedwars level you would need to achieve that</p>
    <form id="level-form">
      <h2>Threat Indecies</h2>
      <ul class="indecies">
        <li style="color: #AAAAAA;">Gray (0 - 45)</li>
        <li style="color: #55FF55;">Light Green (46 - 80)</li>
        <li style="color: #00AA00;">Green (81 - 120)</li>
        <li style="color: #FFFF55;">Yellow (121 - 225)</li>
        <li style="color: #FFAA00;">Orange (226 - 325)</li>
        <li style="color: #FF5555;">Light Red (326 - 650)</li>
        <li style="color: #CC2222;">Red (651+)</li>
      </ul>
      <br>
      <ul class="inputs">
        <li>
          <input id="level-fkdr" type="number" placeholder="Final KDR" step="0.01"/>
        </li>
        <li>
          <input id="level-index" class="threat-in" type="number" placeholder="Desired Threat Index" step="0.01" />
        </li>
        <li class="calc">
          <input type="submit" value="Calculate" class="button" />
          <h3>BW Level: <span id="level-calc">0</span></h3>
        </li>
      </ul>
    </form>
  </div>
  <!--/#register.form-action-->
</div>

script.js

$('.tabs').on('click', 'li a', function(e){
  e.preventDefault();
  var $tab = $(this),
       href = $tab.attr('href');

   $('.active').removeClass('active');
   $tab.addClass('active');

   $('.show')
      .removeClass('show')
      .addClass('hide')
      .hide();
  
    $(href)
      .removeClass('hide')
      .addClass('show')
      .hide()
      .fadeIn(550);
});

 $("#index-form").submit(() => { 
    $("div").load("file.xml")
    calcIndex()
    return false
 })

$("#fkdr-form").submit(() => { 
    $("div").load("file.xml")
    calcFkdr()
    return false
 })

$("#level-form").submit(() => { 
    $("div").load("file.xml")
    calcLevel()
    return false
 })

$('#fkdr-index').on('input', input => {
  $('#fkdr-index').css('color', getThreatColor($('#fkdr-index').val()))
});

$('#level-index').on('input', input => {
  $('#level-index').css('color', getThreatColor($('#level-index').val()))
});

const calcIndex = () => {
  const level = $("#index-bwl").val()
  const fkdr = $("#index-fkdr").val()
  const index = (level * fkdr * fkdr) / 10
  $("#index-calc").text(Math.round((index + Number.EPSILON) * 100) / 100)
  $("#index-calc").css('color', getThreatColor(index))
}

const calcFkdr = () => {
  const level = $("#fkdr-bwl").val()
  const index = $("#fkdr-index").val()
  const fkdr = Math.sqrt(10 * index / level)
  $("#fkdr-calc").text(Math.round((fkdr + Number.EPSILON) * 100) / 100)
}

const calcLevel = () => {
  const fkdr = $("#level-fkdr").val()
  const index = $("#level-index").val()
  const level = 10 * index / (fkdr * fkdr)
  $("#level-calc").text(Math.round((level + Number.EPSILON) * 100) / 100)
}

const getThreatColor = index => {
  index = Math.ceil(index);

  if (index <= 45) return `#AAAAAA`
  else if (index <= 80 ) return `#55FF55`
  else if (index <= 120) return `#00AA00`
  else if (index <= 225) return `#FFFF55`
  else if (index <= 325) return `#FFAA00`
  else if (index <= 650) return `#FF5555`
  else return `#CC2222`
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Roboto:300);

:root {
  //--bkg: #c0392b;
  --bkg: #3a3a3a;
  //--frg: #e74c3c;
  --frg: #4a4a4a;
}

.indecies {
  background-color: #222222;
  padding: 10px;
  width: 100%;
  border-radius: 10px;
  border: 1px solid white;
  li {
    margin-bottom: 3px;
  }
}

.flat-form {
  background: var(--frg);
  color: white;
  margin: 25px auto;
  width: 500px;
  height: 545px;
  position: relative;
  font-family: "Roboto";
  border-radius: 10px;

  .tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    justify-items: center;
    align-items: center;

    background: var(--bkg);
    // width: 100%;
    height: 40px;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    position: relative;
    list-style-type: none;

    border-radius: 10px;

    li {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: var(--bkg);
      > .active {
        background: var(--frg);
      }
      &:hover {
        background: lighten(#3a3a3a, 10%);
      }
      a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: white;
        text-decoration: none;
        font-size: 16px;
      }
    }

    li:last-child {
      border-radius: 0 10px 0 0;
    }

    li:last-child > a {
      border-radius: 0 10px 0 0;
    }

    li:first-child > a {
      border-radius: 10px 0 0 0;
    }

    li:first-child {
      border-radius: 10px 0 0 0;
    }
  }
  .form-action {
    padding: 0 20px;
    position: relative;
  }
  h1 {
    font-size: 42px;
    padding-bottom: 10px;
  }
  h2 {
    font-size: 24px;
    padding-bottom: 10px;
  }
  h3 {
    font-size: 20px;
  }
  p {
    font-size: 14px;
    padding-bottom: 10px;
    line-height: 25px;
  }
  a {
    color: yellow;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  form {
    padding-right: 20px !important;
    .inputs > li > input[type="number"] {
      width: 100%;
    }
    .inputs > .calc {
      width: 104%;
    }
    input {
      &[type="text"],
      &[type="number"],
      &[type="submit"] {
        font-family: "Roboto";
      }
      &[type="text"],
      &[type="number"] {
        border-radius: 40px;
        height: 40px;
        margin-bottom: 10px;
        padding-left: 15px;
        background: #fff;
        border: none;
        color: var(--frg);
        outline: none;
        text-shadow: 1px 1px 2px #aaa;
      }
      &.button {
        border: none;
        display: block;
        background: #136899;
        height: 40px;
        width: 100%;
        color: white;
        text-align: center;
        @include border-radius(20px);
        @include box-shadow(0px 3px 1px #2075aa);
        @include transition(all 0.15s linear);
        &:hover {
          background: #1e75aa;
          @include box-shadow(0 3px 1px #237bb2);
        }
        &:active {
          background: #136899;
          @inclue box-shadow( 0 3px 1px #0f608c );
        }
      }
      $placeholder-color: var(--bkg);
      &::-webkit-input-placeholder {
        color: $placeholder-color;
      }
      &:-moz-placeholder {
        color: $placeholder-color;
      }
      &::-moz-placeholder {
        color: $placeholder-color;
      }
      &:-ms-input-placeholder {
        color: $placeholder-color;
      }
    }
  }
  .show {
    display: block;
  }
  .hide {
    display: none;
  }
}

input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.calc {
  width: 100%;
  input {
    margin-right: auto;
  }
  display: grid;
  grid-template-columns: 50% 50%;
  justify-items: center;
  align-items: center;
}

body {
  background: #222222;
  display: flex;
  align-items: center;
  justify-content: center;
}

html,
body {
  height: 100%;
}

threat-index-calculator.markdown

Threat Index Calculator

Self Contained SCSS.

Forked from http://cssdeck.com/labs/flat-ui-login-form by: http://codepen.io/davideast

A Pen by Adrian Wowk on CodePen.

License.