Threat Index Calculator

index.html

<div class="flat-form">
  <ul class="tabs">
    <li class="active-">
      <a href="#login">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><hr><br>
    <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" id="index-inputs">
        <li class="input-field">
          <input id="index-bwl" class="input-animated" type="number" placeholder="Bedwars Level" min="0" max="4000"/>
          <label type="text">Bedwars Level</label>
        </li>
        <li class="input-field">
          <input id="index-fkdr" class="input-animated" type="number" placeholder="Final KDR" step="0.01" min="0" max="2000"/>
          <label type="text">Final KDR</label>
        </li>
        <li class="calc">
          <input type="submit" value="Calculate" class="button" />
          <h3>Threat Index: <span style="color: #AAAAAA;" 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" id="fkdr-inputs" >
        <li class="input-field">
          <input id="fkdr-bwl" min="0" max="4000" class="input-animated" type="number" placeholder="Bedwars Level" />
          <label type="text">Bedwars Level</label>
        </li>
        <li class="input-field">
          <input id="fkdr-index" class="input-animated" type="number" placeholder="Desired Threat Index" step="0.01" min="0" max="1600000000"/>
          <label type="text">Desired Threat Index</label>
        </li>
        <li class="calc">
          <input type="submit" value="Calculate" class="button" />
          <h3>Final KDR: <span style="color: #AAAAAA;" 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" id="level-inputs">
        <li class="input-field">
          <input id="level-fkdr" class="input-animated" type="number" placeholder="Final KDR" step="0.01" min="0" max="2000"/>
          <label type="text">Final KDR</label>
        </li>
        <li class="input-field">
          <input id="level-index" class="input-animated" type="number" placeholder="Desired Threat Index" step="0.01" min="0" max="1600000000"/>
          <label type="text">Desired Threat Index</label>
        </li>
        <li class="calc">
          <input type="submit" value="Calculate" class="button" />
          <h3>BW Level: <span style="color: #AAAAAA;" id="level-calc">0</span></h3>
        </li>
      </ul>
    </form>
  </div>
  <!--/#register.form-action-->
</div>

script.js

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

   $('.active').removeClass('active');
   $(this).addClass('active');
  
   $('.active-').removeClass('active-');
 
   $('.show')
      .removeClass('show')
      .addClass('hide')
      .hide();
  
    $(href)
      .removeClass('hide')
      .addClass('show')
      .hide()
      .fadeIn(550, "swing");
});

 $("#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)
  let text = Math.round((fkdr + Number.EPSILON) * 100) / 100
  $("#fkdr-calc").text(text = text ? text : 0)
}

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

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: #3a3a3a;
  --frg: #4a4a4a;
}

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

.flat-form > * {
  transform: translateY(-40px);
}

.flat-form {
  background: var(--frg);
  color: white;
  margin: 25px auto;
  width: 500px;
  height: 505px;
  position: relative;
  font-family: "Roboto";
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.8);
  // transform: scale(1.1);
  // transform: rotate3d(360, 120, -90, 60deg) rotateZ(-30deg);
  
  .tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
    justify-items: center;
    align-items: center;
    column-gap: 0px;

    background: rgba(0, 255, 0, 0.0);
    height: 40px;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    position: relative;
    list-style-type: none;
    box-shadow: 0 25px 0 var(--frg), 0 0 25px rgba(0, 0, 0, 0.8);
    
    transform: translateY(-40px) scale(1.0005, 1);
    z-index: 0;

    border-radius: 10px;

    li {
      height: 120%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      background: var(--bkg);
      border-radius: 10px 10px 0 0;
      
      &:hover > a {
        background: lighten(#3a3a3a, 10%);
        @include transition(background 0.3s linear);
      }
      
      &:hover {
        background: lighten(#3a3a3a, 10%) !important;
        @include transition(background 0.3s linear);
      }
      
      &.active {
        box-shadow: 0 25px 0 var(--frg), 0 0 15px rgba(0, 0, 0, 0.4);
        z-index: 100000;
        background: var(--frg);
        transform: translateY(-8px);
        animation: bounce 0.3s ease-out;
      }
      
      &.active > a { 
        transform: translateY(8px);
        animation: bounce-other 0.3s ease-out;
      }
      
      &.active- {
        box-shadow: 0 25px 0 var(--frg), 0 0 15px rgba(0, 0, 0, 0.4);
        z-index: 100000;
        background: var(--frg);
        transform: translateY(-8px);
      }
      
      &.active- > a { 
        transform: translateY(8px);
      }
      
      a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        color: white;
        text-decoration: none;
        font-size: 16px;
        border-radius: 10px 10px 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 transition(all 0.15s linear);
        &:hover {
          background: #1e75aa;
          transform: scale(1.02);
        }
        &:active {
          background: #136899;
          transform: scale(0.93)
        }
      }
      $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%;
}

.inputs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  
  .input-field:nth-child(1) > label {
    top: 72.5%;
  }
  
  .input-field:nth-child(2) > label {
    top: 83.5%;
  }
}

#index-inputs {
 
  .input-field:nth-child(1) > .input-animated:focus, .input-field:nth-child(1) > .input-animated:not(:placeholder-shown) {
    width: 75% !important;
    margin-left: 25%;
  }
  
  .input-field:nth-child(2) > .input-animated:focus, .input-field:nth-child(2) > .input-animated:not(:placeholder-shown)  {
    width: 82% !important;
    margin-left: 18%;
  }
}

#fkdr-inputs {
  .input-field:nth-child(1) > .input-animated:focus, .input-field:nth-child(1) > .input-animated:not(:placeholder-shown) {
    width: 75% !important;
    margin-left: 25%;
  }
  
  .input-field:nth-child(2) > .input-animated:focus, .input-field:nth-child(2) > .input-animated:not(:placeholder-shown)  {
    width: 65% !important;
    margin-left: 35%;
  }
}

#level-inputs {
  .input-field:nth-child(1) > .input-animated:focus, .input-field:nth-child(1) > .input-animated:not(:placeholder-shown) {
    width: 82% !important;
    margin-left: 18%;
  }
  
  .input-field:nth-child(2) > .input-animated:focus, .input-field:nth-child(2) > .input-animated:not(:placeholder-shown)  {
    width: 65% !important;
    margin-left: 35%;
  }
}

.input-field {
  z-index: 100;
  label {
    border-bottom: 2px solid #136899;
    
    opacity: 0;
    transform: translate(10%);
    
    -webkit-transition: all 0.3s;
	  transition: all 0.3s;
    transform: translate(100px);
    
    position: absolute;
    pointer-events: none;
    z-index: -100;
  }
}

.input-animated {  
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
  &::-webkit-input-placeholder {
    -webkit-transition: all 0.3s;
    transition: all 0.3s; 
  }
}

.input-animated:focus + label {
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
  opacity: 1;
  transform: translate(0);
}

.input-animated:focus {
	box-shadow: 0px 0px 3px 3px lighten(#136899, 15%);
  
  &::-webkit-input-placeholder {
    opacity: 0;
    transform: translate(-100px);
    -webkit-transition: all 0.3s;
    transition: all 0.3s; 
  }
}

.input-animated:hover:not(:focus) {
  transform: scale(1.02);
}

.input-animated:not(:placeholder-shown) + label {
  opacity: 1;
  transform: translate(0);
}

@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  
  40% {
    transform: translateY(-10px);
  }
  
  100% {
    transform: translateY(-8px);
  }
}

@keyframes bounce-other {
  0% {
    transform: translateY(0px);
  }
  
  40% {
    transform: translateY(10px);
  }
  
  100% {
    transform: translateY(8px);
  }
}

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.