390 lines
7.5 KiB
Svelte
390 lines
7.5 KiB
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} />
|