Oracle 2.0

index.pug

a(href="http://volorf.dribbble.com/" title="Cool designer 😎").aboutMe Made by Volorf
.whiteBg
  .oracle oracle
.container
  .switcherOne
    .title Good
    .control
      .circle
  .switcherTwo
    .title Cheap
    .control
      .circle
  .switcherThree
    .title Fast
    .control
      .circle

oracle-2-0.markdown

Oracle 2.0

Simple analytic tool for startupers that allow to understand long-term and short-term perspectives of project.

A Pen by Oleg Frolov on CodePen.

License.

script.js

class ChangeSwitcher {
    constructor (switcher) {
      this.state = false
      this.switcher = switcher
    }
    change () {
      this.state = !(this.state)
      this.changeUI(this.state)
    }
    changeUI (state) {
      if (state == true) {
        this.switcher.addClass("bgOn")
        this.switcher.children().addClass("circleOn")
        this.state = true
      } else {
        this.switcher.removeClass("bgOn")
        this.switcher.children().removeClass("circleOn")
        this.state = false
      }     
    }
    currentState () {
      return this.state
    }
 } 



$(document).ready(function() {
  
  var switcherOne = $(".switcherOne .control")
  var switcherTwo = $(".switcherTwo .control")
  var switcherThree = $(".switcherThree .control")
  
  var changeSwitcherOne = new ChangeSwitcher(switcherOne)
  var changeSwitcherTwo = new ChangeSwitcher(switcherTwo)
  var changeSwitcherThree = new ChangeSwitcher(switcherThree)
  
  switcherOne.on("click", function() {
    changeSwitcherOne.change() 
    removeTremor()
    if (changeSwitcherTwo.currentState() == true && changeSwitcherThree.currentState() == true ) {
      changeSwitcherTwo.changeUI(false)
      changeSwitcherThree.changeUI(false)
      addTremor()
    }
  })
  
  switcherTwo.on("click", function() {
    changeSwitcherTwo.change()
    removeTremor()
    if (changeSwitcherOne.currentState() == true && changeSwitcherThree.currentState() == true) {
      changeSwitcherOne.changeUI(false)
      changeSwitcherThree.changeUI(false)
      addTremor()
    }
  })
  
  switcherThree.on("click", function() {
    changeSwitcherThree.change()
    removeTremor()
    if (changeSwitcherOne.currentState() == true && changeSwitcherTwo.currentState() == true) {
        changeSwitcherOne.changeUI(false)
        changeSwitcherTwo.changeUI(false)
        addTremor()
    }
  }) 
  
  function addTremor() {
    $(".container").addClass("windowTremor")
  }
  
  function removeTremor() {
    $(".container").removeClass("windowTremor")
  }
  
})

scripts

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

style.stylus

separatorColor = rgba(226,229,231,.5)
switcherBg = rgba(226,229,231,1)
green = #44DB5E
red = #FF6D6D
bgColor = red
shadowColor = rgba(104,11,11,.3)
dark = #202329
time-function = ease-out

*
  box-sizing border-box
  transition all .5s ease


body
  background bgColor
  width 100vw
  height 100vh
  display flex
  justify-content center
  align-items center
  font-family "SF UI Display", "Arial", sans-serif
  .container
    width 400px
    height 240px
    background #fff
    box-shadow 0px 48px 96px shadowColor
    display flex
    flex-direction column
    justify-content center
    align-items center
    padding 0 44px
    border-radius 6px
    z-index 2
    .switcherOne, .switcherTwo, .switcherThree
      height 54px
      width 100%
      background #fff
      display flex
      justify-content space-between
      align-items center
      font-size 20px
      color dark
    .switcherTwo
      border-top 1px solid separatorColor
      border-bottom 1px solid separatorColor
.title
  width 100px
.control
  width 50px
  height 30px
  background switcherBg
  border-radius 15px
  &:hover
    cursor pointer
.circle
  width 26px
  height 26px
  background #fff
  border-radius 50%
  position absolute
  margin-top 2px
  margin-left 2px
.bgOn
  background red
.circleOn
  margin-left 22px
  
.whiteBg
  width 100vw
  height 50%
  position absolute
  background white
  z-index 0
  top 0
  left 0
.oracle
  z-index 1
  position absolute
  font-size 500px
  width 100%
  bottom 0
  line-height 500px
  margin-bottom -80px
  color bgColor
  opacity .1
  text-align center
  margin-left -24px
  -webkit-user-select none
.aboutMe
  color white
  text-decoration none
  z-index 2
  position absolute
  bottom 0
  font-size 12px
  opacity .3
  margin-bottom 11px
  text-transform uppercase
  letter-spacing 1.5px
  text-align center
  &:hover
    opacity 1
    
.windowTremor
  animation windowTremor .6s .3s time-function
    
@keyframes windowTremor
  0%
    margin-left 0px
  25%
    margin-left -24px
  50%
    margin-left 24px
  75%
    margin-left -24px
  100%
    margin-left 0px
  
@media (max-width: 640px)
  .whiteBg
    display none
  body .container
    width 320px
    padding 0 24px
    height 210px