1.3.0
This commit is contained in:
205
src/app/view/init.html
Normal file
205
src/app/view/init.html
Normal file
@@ -0,0 +1,205 @@
|
||||
<!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 = [
|
||||
"whbex",
|
||||
"wf0jb",
|
||||
"ulak9",
|
||||
"wcmxa",
|
||||
"wc5e2"
|
||||
];
|
||||
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>
|
||||
Reference in New Issue
Block a user