mirror of
https://github.com/lensapp/lens.git
synced 2024-09-20 05:47:24 +03:00
57a1612545
* show openlens on splash Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * make it center Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
165 lines
4.2 KiB
HTML
165 lines
4.2 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
html, body{
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
body {
|
|
background: #1e2124;
|
|
color: #6c757d;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
.aligner-center-center{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.aligner-content{
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 80px;
|
|
}
|
|
.icon {
|
|
position: relative;
|
|
font-size: 36px;
|
|
line-height: 54px;
|
|
margin-bottom: 10px;
|
|
text-align: center;
|
|
}
|
|
.icon svg{
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 54px;
|
|
height: 54px;
|
|
top: 14px;
|
|
}
|
|
.icon .icon-text{
|
|
color: #fff;
|
|
text-align: center;
|
|
display: inline;
|
|
}
|
|
svg{
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.loading{
|
|
padding-top: 10px;
|
|
position: relative;
|
|
}
|
|
.bar{
|
|
position: relative;;
|
|
height: 2px;
|
|
background: #262b2f;
|
|
}
|
|
.progress{
|
|
position: relative;
|
|
height: 2px;
|
|
background: #3d90ce;
|
|
box-shadow: 0 0 20px #3d90ce;
|
|
animation-name: loader-animation;
|
|
animation-duration: 1.6s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
@keyframes loader-animation{
|
|
0% {
|
|
left: 0;
|
|
width: 0px;
|
|
}
|
|
50% {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
width: 0px;
|
|
}
|
|
}
|
|
.glow-wrapper{
|
|
position: relative;
|
|
width: 100%;
|
|
height: 2px;
|
|
top: -2px;
|
|
}
|
|
|
|
.glow{
|
|
height: 100%;
|
|
display: flex;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
.glow div{
|
|
flex: 1;
|
|
background: #3d90ce;
|
|
animation: glow 0.8s infinite alternate ease;
|
|
box-shadow: 0 0 20px #3d90ce;
|
|
}
|
|
|
|
.glow div.b1{ animation-delay: -0.72s; }
|
|
.glow div.b2{ animation-delay: -0.64s; }
|
|
.glow div.b3{ animation-delay: -0.56s; }
|
|
.glow div.b4{ animation-delay: -0.48s; }
|
|
.glow div.b5{ animation-delay: -0.40s; }
|
|
.glow div.b6{ animation-delay: -0.32s; }
|
|
.glow div.b7{ animation-delay: -0.24s; }
|
|
.glow div.b8{ animation-delay: -0.16s; }
|
|
.glow div.b9{ animation-delay: -0.08s; }
|
|
|
|
|
|
@keyframes glow{
|
|
100% {
|
|
background: transparent;
|
|
flex: 10;
|
|
box-shadow: 0 0 0 transparent;
|
|
}
|
|
}
|
|
|
|
.text{
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="aligner-center-center">
|
|
<div class="aligner-content">
|
|
<div class="icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3f90ce"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.25 2.26l-.08-.04-.01.02C13.46 2.09 12.74 2 12 2 6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10c0-4.75-3.31-8.72-7.75-9.74zM19.41 9h-7.99l2.71-4.7c2.4.66 4.35 2.42 5.28 4.7zM13.1 4.08L10.27 9l-1.15 2L6.4 6.3C7.84 4.88 9.82 4 12 4c.37 0 .74.03 1.1.08zM5.7 7.09L8.54 12l1.15 2H4.26C4.1 13.36 4 12.69 4 12c0-1.85.64-3.55 1.7-4.91zM4.59 15h7.98l-2.71 4.7c-2.4-.67-4.34-2.42-5.27-4.7zm6.31 4.91L14.89 13l2.72 4.7C16.16 19.12 14.18 20 12 20c-.38 0-.74-.04-1.1-.09zm7.4-3l-4-6.91h5.43c.17.64.27 1.31.27 2 0 1.85-.64 3.55-1.7 4.91z"/></svg>
|
|
<div class="icon-text">OpenLens</div>
|
|
</div>
|
|
<div class="loading">
|
|
<div class="bar">
|
|
<div class="progress"></div>
|
|
</div>
|
|
<div class="glow-wrapper">
|
|
<div class="glow">
|
|
<div class="b1"></div>
|
|
<div class="b2"></div>
|
|
<div class="b3"></div>
|
|
<div class="b4"></div>
|
|
<div class="b5"></div>
|
|
<div class="b6"></div>
|
|
<div class="b7"></div>
|
|
<div class="b8"></div>
|
|
<div class="b9"></div>
|
|
</div>
|
|
</div>
|
|
<div class="text">
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|