205 lines
4.5 KiB
HTML
205 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<script>
|
|
if (typeof module === 'object') {
|
|
window.module = module;
|
|
module = undefined;
|
|
}
|
|
</script>
|
|
<script src="./../libs/jquery/jquery-3.2.1.min.js"></script>
|
|
<script src="./../libs/bootstrap/js/bootstrap.js"></script>
|
|
|
|
<meta charset="utf-8">
|
|
<title></title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #333;
|
|
}
|
|
|
|
@keyframes arrow-spin {
|
|
100% {
|
|
transform: rotate(179deg);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes arrow-spin {
|
|
100% {
|
|
-webkit-transform: rotate(179deg);
|
|
}
|
|
}
|
|
|
|
.psoload,
|
|
.psoload *,
|
|
.psoload *:before,
|
|
.psoload *:after {
|
|
box-sizing: border-box;
|
|
transition: all 0.3s;
|
|
-webkit-transition: all 0.3s;
|
|
}
|
|
|
|
.psoload {
|
|
position: relative;
|
|
margin: 30px auto;
|
|
height: 150px;
|
|
width: 150px;
|
|
}
|
|
|
|
.psoload .straight,
|
|
.psoload .curve {
|
|
position: absolute;
|
|
top: 17.5%;
|
|
left: 17.5%;
|
|
width: 65%;
|
|
height: 65%;
|
|
border-radius: 100%;
|
|
animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite;
|
|
-webkit-animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite;
|
|
}
|
|
|
|
.psoload .straight:before,
|
|
.psoload .straight:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 15%;
|
|
border-bottom: 3px solid #eee;
|
|
transform: rotate(45deg);
|
|
-webkit-transform: rotate(45deg);
|
|
}
|
|
|
|
.psoload .straight:before {
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
.psoload .straight:after {
|
|
bottom: 5px;
|
|
right: 5px;
|
|
}
|
|
|
|
.psoload .curve:before,
|
|
.psoload .curve:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 45px;
|
|
height: 10px;
|
|
border: solid 3px transparent;
|
|
border-top-color: #eee;
|
|
border-radius: 50%/10px 10px 0 0;
|
|
z-index: 90001;
|
|
}
|
|
|
|
.psoload .curve:before {
|
|
transform: rotate(-63deg) translateX(-27px) translateY(-4px);
|
|
-webkit-transform: rotate(-63deg) translateX(-27px) translateY(-4px);
|
|
}
|
|
|
|
.psoload .curve:after {
|
|
bottom: 5px;
|
|
right: 5px;
|
|
transform: rotate(115deg) translateX(-26px) translateY(-12px);
|
|
-webkit-transform: rotate(115deg) translateX(-26px) translateY(-12px);
|
|
}
|
|
|
|
.psoload .center {
|
|
position: absolute;
|
|
top: 20%;
|
|
left: 20%;
|
|
width: 60%;
|
|
height: 60%;
|
|
border-radius: 100%;
|
|
border: 3px solid #eee;
|
|
}
|
|
|
|
.psoload .inner {
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 50%;
|
|
border-radius: 100%;
|
|
animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite reverse;
|
|
-webkit-animation: arrow-spin 0.85s cubic-bezier(0.2, 0.8, 0.9, 0.1) infinite reverse;
|
|
}
|
|
|
|
.psoload .inner:before,
|
|
.psoload .inner:after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border: 6px solid transparent;
|
|
border-bottom-width: 11px;
|
|
border-bottom-color: #eee;
|
|
}
|
|
|
|
.psoload .inner:before {
|
|
top: 12px;
|
|
left: 12px;
|
|
transform: rotate(128deg);
|
|
-webkit-transform: rotate(128deg);
|
|
}
|
|
|
|
.psoload .inner:after {
|
|
bottom: 12px;
|
|
right: 12px;
|
|
transform: rotate(-48deg);
|
|
-webkit-transform: rotate(-48deg);
|
|
}
|
|
.progress{
|
|
height:10px;
|
|
}
|
|
.progress .progress-bar{
|
|
height:5px;
|
|
width:30px;
|
|
background-color:#FFF;
|
|
content:"";
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="psoload">
|
|
<div class="straight"></div>
|
|
<div class="curve"></div>
|
|
<div class="center"></div>
|
|
<div class="inner"></div>
|
|
</div>
|
|
<iframe id="coub" src="https://coub.com/embed/ulak9?muted=false&autostart=true&originalSize=false&startWithHD=false" allowfullscreen="true" frameborder="0" width="320" height="180"></iframe><script async src="https://c-cdn.coub.com/embed-runner.js"></script>
|
|
<hr/>
|
|
<div class="progress">
|
|
<div class="progress-bar" id="main"></div>
|
|
<div class="progress-bar" id="single"></div>
|
|
</div>
|
|
<script>
|
|
$(function(){
|
|
var start = [
|
|
"1k7kx5",
|
|
"1nhvi0",
|
|
"1qfipa",
|
|
"1kfn1h",
|
|
];
|
|
var x = Math.floor(Math.random()*start.length)
|
|
$('#coub').attr('src','https://coub.com/embed/'+start[x]+'?muted=false&autostart=true&originalSize=false&startWithHD=false')
|
|
const ipcRenderer = require('electron').ipcRenderer;
|
|
ipcRenderer.send('download-lib', {});
|
|
ipcRenderer.on('progress', function(event, arg) {
|
|
console.log(arg); // prints "pong"
|
|
$('#single').css("width",arg.percent+"%");
|
|
}).on('fin-loading',function(event,arg){
|
|
$('#main').css("width","100%");
|
|
setTimeout(function(){
|
|
ipcRenderer.send('start-full', {});
|
|
},1000)
|
|
|
|
})
|
|
})
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|