OpenAuth_server/Frontend/src/pages/login/twofactors/push.svelte

<script>
  import ToList from "./toList.svelte";

  let error = "";
  let code = "";
  export let device = "Handy01";
  // export let deviceId = "";

  export let finish;

  async function requestPush() {
    // Push Request
  }
</script>

<style>
  .error {
    color: var(--error);
  }

  .windows8 {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 2rem auto;
  }

  .windows8 .wBall {
    position: absolute;
    width: 53px;
    height: 53px;
    opacity: 0;
    transform: rotate(225deg);
    -o-transform: rotate(225deg);
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    animation: orbit 5.7425s infinite;
    -o-animation: orbit 5.7425s infinite;
    -ms-animation: orbit 5.7425s infinite;
    -webkit-animation: orbit 5.7425s infinite;
    -moz-animation: orbit 5.7425s infinite;
  }

  .windows8 .wBall .wInnerBall {
    position: absolute;
    width: 7px;
    height: 7px;
    background: rgb(0, 140, 255);
    left: 0px;
    top: 0px;
    border-radius: 7px;
  }

  .windows8 #wBall_1 {
    animation-delay: 1.256s;
    -o-animation-delay: 1.256s;
    -ms-animation-delay: 1.256s;
    -webkit-animation-delay: 1.256s;
    -moz-animation-delay: 1.256s;
  }

  .windows8 #wBall_2 {
    animation-delay: 0.243s;
    -o-animation-delay: 0.243s;
    -ms-animation-delay: 0.243s;
    -webkit-animation-delay: 0.243s;
    -moz-animation-delay: 0.243s;
  }

  .windows8 #wBall_3 {
    animation-delay: 0.5065s;
    -o-animation-delay: 0.5065s;
    -ms-animation-delay: 0.5065s;
    -webkit-animation-delay: 0.5065s;
    -moz-animation-delay: 0.5065s;
  }

  .windows8 #wBall_4 {
    animation-delay: 0.7495s;
    -o-animation-delay: 0.7495s;
    -ms-animation-delay: 0.7495s;
    -webkit-animation-delay: 0.7495s;
    -moz-animation-delay: 0.7495s;
  }

  .windows8 #wBall_5 {
    animation-delay: 1.003s;
    -o-animation-delay: 1.003s;
    -ms-animation-delay: 1.003s;
    -webkit-animation-delay: 1.003s;
    -moz-animation-delay: 1.003s;
  }

  @keyframes orbit {
    0% {
      opacity: 1;
      z-index: 99;
      transform: rotate(180deg);
      animation-timing-function: ease-out;
    }

    7% {
      opacity: 1;
      transform: rotate(300deg);
      animation-timing-function: linear;
      origin: 0%;
    }

    30% {
      opacity: 1;
      transform: rotate(410deg);
      animation-timing-function: ease-in-out;
      origin: 7%;
    }

    39% {
      opacity: 1;
      transform: rotate(645deg);
      animation-timing-function: linear;
      origin: 30%;
    }

    70% {
      opacity: 1;
      transform: rotate(770deg);
      animation-timing-function: ease-out;
      origin: 39%;
    }

    75% {
      opacity: 1;
      transform: rotate(900deg);
      animation-timing-function: ease-out;
      origin: 70%;
    }

    76% {
      opacity: 0;
      transform: rotate(900deg);
    }

    100% {
      opacity: 0;
      transform: rotate(900deg);
    }
  }

  @-o-keyframes orbit {
    0% {
      opacity: 1;
      z-index: 99;
      -o-transform: rotate(180deg);
      -o-animation-timing-function: ease-out;
    }

    7% {
      opacity: 1;
      -o-transform: rotate(300deg);
      -o-animation-timing-function: linear;
      -o-origin: 0%;
    }

    30% {
      opacity: 1;
      -o-transform: rotate(410deg);
      -o-animation-timing-function: ease-in-out;
      -o-origin: 7%;
    }

    39% {
      opacity: 1;
      -o-transform: rotate(645deg);
      -o-animation-timing-function: linear;
      -o-origin: 30%;
    }

    70% {
      opacity: 1;
      -o-transform: rotate(770deg);
      -o-animation-timing-function: ease-out;
      -o-origin: 39%;
    }

    75% {
      opacity: 1;
      -o-transform: rotate(900deg);
      -o-animation-timing-function: ease-out;
      -o-origin: 70%;
    }

    76% {
      opacity: 0;
      -o-transform: rotate(900deg);
    }

    100% {
      opacity: 0;
      -o-transform: rotate(900deg);
    }
  }

  @-ms-keyframes orbit {
    0% {
      opacity: 1;
      z-index: 99;
      -ms-transform: rotate(180deg);
      -ms-animation-timing-function: ease-out;
    }

    7% {
      opacity: 1;
      -ms-transform: rotate(300deg);
      -ms-animation-timing-function: linear;
      -ms-origin: 0%;
    }

    30% {
      opacity: 1;
      -ms-transform: rotate(410deg);
      -ms-animation-timing-function: ease-in-out;
      -ms-origin: 7%;
    }

    39% {
      opacity: 1;
      -ms-transform: rotate(645deg);
      -ms-animation-timing-function: linear;
      -ms-origin: 30%;
    }

    70% {
      opacity: 1;
      -ms-transform: rotate(770deg);
      -ms-animation-timing-function: ease-out;
      -ms-origin: 39%;
    }

    75% {
      opacity: 1;
      -ms-transform: rotate(900deg);
      -ms-animation-timing-function: ease-out;
      -ms-origin: 70%;
    }

    76% {
      opacity: 0;
      -ms-transform: rotate(900deg);
    }

    100% {
      opacity: 0;
      -ms-transform: rotate(900deg);
    }
  }

  @-webkit-keyframes orbit {
    0% {
      opacity: 1;
      z-index: 99;
      -webkit-transform: rotate(180deg);
      -webkit-animation-timing-function: ease-out;
    }

    7% {
      opacity: 1;
      -webkit-transform: rotate(300deg);
      -webkit-animation-timing-function: linear;
      -webkit-origin: 0%;
    }

    30% {
      opacity: 1;
      -webkit-transform: rotate(410deg);
      -webkit-animation-timing-function: ease-in-out;
      -webkit-origin: 7%;
    }

    39% {
      opacity: 1;
      -webkit-transform: rotate(645deg);
      -webkit-animation-timing-function: linear;
      -webkit-origin: 30%;
    }

    70% {
      opacity: 1;
      -webkit-transform: rotate(770deg);
      -webkit-animation-timing-function: ease-out;
      -webkit-origin: 39%;
    }

    75% {
      opacity: 1;
      -webkit-transform: rotate(900deg);
      -webkit-animation-timing-function: ease-out;
      -webkit-origin: 70%;
    }

    76% {
      opacity: 0;
      -webkit-transform: rotate(900deg);
    }

    100% {
      opacity: 0;
      -webkit-transform: rotate(900deg);
    }
  }

  @-moz-keyframes orbit {
    0% {
      opacity: 1;
      z-index: 99;
      -moz-transform: rotate(180deg);
      -moz-animation-timing-function: ease-out;
    }

    7% {
      opacity: 1;
      -moz-transform: rotate(300deg);
      -moz-animation-timing-function: linear;
      -moz-origin: 0%;
    }

    30% {
      opacity: 1;
      -moz-transform: rotate(410deg);
      -moz-animation-timing-function: ease-in-out;
      -moz-origin: 7%;
    }

    39% {
      opacity: 1;
      -moz-transform: rotate(645deg);
      -moz-animation-timing-function: linear;
      -moz-origin: 30%;
    }

    70% {
      opacity: 1;
      -moz-transform: rotate(770deg);
      -moz-animation-timing-function: ease-out;
      -moz-origin: 39%;
    }

    75% {
      opacity: 1;
      -moz-transform: rotate(900deg);
      -moz-animation-timing-function: ease-out;
      -moz-origin: 70%;
    }

    76% {
      opacity: 0;
      -moz-transform: rotate(900deg);
    }

    100% {
      opacity: 0;
      -moz-transform: rotate(900deg);
    }
  }
</style>

<h3>SMS</h3>

<p>A code was sent to your Device <b>{device}</b></p>

<div class="windows8">
  <div class="wBall" id="wBall_1">
    <div class="wInnerBall" />
  </div>
  <div class="wBall" id="wBall_2">
    <div class="wInnerBall" />
  </div>
  <div class="wBall" id="wBall_3">
    <div class="wInnerBall" />
  </div>
  <div class="wBall" id="wBall_4">
    <div class="wInnerBall" />
  </div>
  <div class="wBall" id="wBall_5">
    <div class="wInnerBall" />
  </div>
</div>

<div class="error">{error}</div>
<ToList {finish} />