1
0
mirror of https://github.com/lensapp/lens.git synced 2024-09-20 13:57:23 +03:00
lens/static/splash.html
Jari Kolehmainen 1d0815abd2
Lens app source code (#119)
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
2020-03-15 09:52:02 +02:00

143 lines
7.1 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;
}
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">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 497.43 228.97"><defs><style>.cls-1{fill:#3f90ce;}.cls-2{opacity:0.15;}.cls-3{fill:#fff;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,0H12.25V170H110v11.64H0Z"/><path class="cls-1" d="M138.75,167.24Q122.82,148,122.82,116.39t15.93-50.84q15.93-19,42.27-19T223.29,64q15.92,17.46,15.93,46.55v5.82H135.08q0,26.65,12.55,42.58T181,174.9a50.14,50.14,0,0,0,28.18-8.27A44.23,44.23,0,0,0,227,144.27h12.25q-3.08,18.07-19.61,30T181,186.23Q154.68,186.23,138.75,167.24ZM227,104.75v-4.59a46.49,46.49,0,0,0-14.71-30.63A45.05,45.05,0,0,0,181,57.28a43.4,43.4,0,0,0-30.94,12.56,47.58,47.58,0,0,0-15,31.54v3.37Z"/><path class="cls-1" d="M268,181.64V51.15h12.25V73.21a41.83,41.83,0,0,1,16.85-18.38,46.6,46.6,0,0,1,25.12-7q19.29,0,32.77,12.56Q368.79,73.21,368.78,91v90.67H356.53V91a30.37,30.37,0,0,0-10.11-23,34.12,34.12,0,0,0-24.19-9.5A40.35,40.35,0,0,0,295,68.92a45.21,45.21,0,0,0-14.7,26.65v86.07Z"/><path class="cls-1" d="M409.83,172.75Q395.12,160.51,395.12,143h11.34q0,13.17,11.33,22.67,11.32,9.18,27.26,9.19,18.38,0,29.71-8.27a27,27,0,0,0,11-22.36q0-10.41-11.64-17.77-11.64-7-31.24-8.88-20.84-1.84-33.08-11.64-12.57-9.8-12.56-24.2,0-16.23,12.56-25.11t35.22-8.89q21.75,0,34.61,9.5,13.17,9.5,13.17,25.42H481.19A28.06,28.06,0,0,0,469.55,64q-9.49-6.73-24.5-6.74-16.55,0-26.34,6.74t-9.8,17.76q0,10.43,11.94,17.77,11.64,7,31.25,8.88,20.5,1.84,33.08,12.25,12.24,10.42,12.25,26,0,17.46-14.4,27.87Q468.95,185,445.05,185,424.22,185,409.83,172.75Z"/><g class="cls-2"><polygon class="cls-3" points="433.45 208.56 430.83 208.56 426.32 215.64 426.32 208.55 423.85 208.55 423.85 222.42 426.32 222.42 426.32 219.42 427.97 216.89 430.93 222.42 433.75 222.42 429.35 214.97 433.45 208.56"/><path class="cls-3" d="M441.17,208.56h-3.72a2.26,2.26,0,0,0-2.47,2v9.9a2.26,2.26,0,0,0,2.47,2h3.72a2.28,2.28,0,0,0,2.47-2v-9.9A2.26,2.26,0,0,0,441.17,208.56Zm0,11.88h-3.72v-9.9h3.72Z"/><polygon class="cls-3" points="452.29 216.7 448.79 208.55 446.11 208.55 446.11 222.42 448.59 222.42 448.59 213.34 452.58 222.42 454.77 222.42 454.77 208.55 452.29 208.55 452.29 216.7"/><polygon class="cls-3" points="456.63 210.54 459.72 210.54 459.72 222.42 462.2 222.42 462.2 210.54 465.28 210.54 465.28 208.55 456.63 208.55 456.63 210.54"/><polygon class="cls-3" points="467.14 222.42 474.56 222.42 474.56 220.44 469.61 220.44 469.61 216.08 473.32 216.08 473.32 214.1 469.61 214.1 469.61 210.53 474.56 210.53 474.56 208.55 467.14 208.55 467.14 222.42"/><polygon class="cls-3" points="482.89 208.55 482.89 216.7 479.38 208.55 476.71 208.55 476.71 222.42 479.18 222.42 479.18 213.34 483.18 222.42 485.36 222.42 485.36 208.55 482.89 208.55"/><path class="cls-3" d="M493.72,208.55h-3.11l-3.71,13.87h2.62l.49-2h4.31l.49,2h2.62Zm-3.21,9.91,1.7-6.45,1.61,6.45Z"/><polygon class="cls-3" points="405.98 201.77 402.06 204.04 398.13 206.31 394.2 208.57 394.2 213.11 394.2 217.64 394.2 222.17 398.13 224.44 398.13 219.91 398.13 215.37 398.13 210.84 402.06 208.57 402.06 213.11 402.06 213.11 402.06 217.64 405.98 215.37 405.98 215.37 409.91 213.11 409.91 208.57 413.83 206.31 409.91 204.04 405.98 201.77"/><polygon class="cls-3" points="413.83 210.84 413.83 215.37 409.91 217.64 413.83 219.91 413.83 224.44 417.76 222.17 417.76 217.64 417.76 213.11 417.76 208.57 413.83 206.31 413.83 210.84"/><polygon class="cls-3" points="405.98 219.91 402.06 222.17 402.06 222.17 402.06 226.71 405.98 228.97 409.91 226.71 409.91 222.17 405.98 219.91 405.98 219.91"/></g><g class="cls-2"><path class="cls-3" d="M374.77,219.07a3.08,3.08,0,0,1-1.11-1.28v1.5h-.72V208.56h.72v4.76a2.82,2.82,0,0,1,2.7-1.86,3,3,0,0,1,2.43,1.1,5.19,5.19,0,0,1,0,5.9,3,3,0,0,1-2.43,1.1A2.79,2.79,0,0,1,374.77,219.07Zm3.54-1.06a4.65,4.65,0,0,0,0-5,2.37,2.37,0,0,0-1.95-.94,2.33,2.33,0,0,0-1.9,1,3.8,3.8,0,0,0-.8,2.43,3.75,3.75,0,0,0,.8,2.42,2.32,2.32,0,0,0,1.9,1A2.37,2.37,0,0,0,378.31,218Z"/><path class="cls-3" d="M381.23,221.64h.56c.28,0,.58-.22.9-.67a7.1,7.1,0,0,0,.89-1.75l-2.95-7.64h.67l2.62,6.75,2.61-6.75h.71l-3.32,8.54a4.33,4.33,0,0,1-.88,1.51,1.65,1.65,0,0,1-1.12.56h-.69Z"/></g></g></g></svg>
<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>