mirror of https://github.com/Lissy93/dashy.git
128 lines
3.1 KiB
HTML
128 lines
3.1 KiB
HTML
|
<!doctype html>
|
||
|
|
<html>
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<title>Dashy</title>
|
||
|
|
<meta name="description" content="Welcome to Dashy">
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<svg viewbox="0 0 100 20">
|
||
|
|
<defs>
|
||
|
|
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
|
||
|
|
<stop offset="5%" stop-color="#00CCB4" />
|
||
|
|
<stop offset="95%" stop-color="#1186cf" />
|
||
|
|
</linearGradient>
|
||
|
|
<pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
|
||
|
|
<path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z"
|
||
|
|
mask="url(#mask)" fill="url(#gradient)">
|
||
|
|
<animateTransform attributeName="transform" begin="0s" dur="3s" type="translate" from="0,0" to="40,0"
|
||
|
|
repeatCount="indefinite" />
|
||
|
|
</path>
|
||
|
|
</pattern>
|
||
|
|
</defs>
|
||
|
|
<text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)" fill-opacity="0.8">Dashy</text>
|
||
|
|
<text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.5">Dashy</text>
|
||
|
|
</svg>
|
||
|
|
<div>
|
||
|
|
<h2>Initializing</h2>
|
||
|
|
<span class="dots-cont">
|
||
|
|
<span class="dot dot-1"></span>
|
||
|
|
<span class="dot dot-2"></span>
|
||
|
|
<span class="dot dot-3"></span>
|
||
|
|
<span class="dot dot-4"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style lang="css">
|
||
|
|
body,
|
||
|
|
html {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: #141b33;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg {
|
||
|
|
font-family: 'Fredoka One', 'Cabin Condensed', 'Courier New', Courier, monospace;
|
||
|
|
font-weight: bold;
|
||
|
|
max-width: 80%;
|
||
|
|
height: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
h2 {
|
||
|
|
color: #fff;
|
||
|
|
font-family: 'Courier New', Courier, monospace;
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dots-cont {
|
||
|
|
display: inline;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dot {
|
||
|
|
width: 4px;
|
||
|
|
height: 4px;
|
||
|
|
background: #fff;
|
||
|
|
display: inline-block;
|
||
|
|
border-radius: 35%;
|
||
|
|
right: 0px;
|
||
|
|
bottom: 0px;
|
||
|
|
margin: 0px 2.5px;
|
||
|
|
position: relative;
|
||
|
|
animation: jump 1s infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dots-cont .dot-1 {
|
||
|
|
-webkit-animation-delay: 100ms;
|
||
|
|
animation-delay: 100ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dots-cont .dot-2 {
|
||
|
|
-webkit-animation-delay: 200ms;
|
||
|
|
animation-delay: 200ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dots-cont .dot-3 {
|
||
|
|
-webkit-animation-delay: 300ms;
|
||
|
|
animation-delay: 300ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dots-cont .dot-4 {
|
||
|
|
-webkit-animation-delay: 400ms;
|
||
|
|
animation-delay: 400ms;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes jump {
|
||
|
|
0% {
|
||
|
|
bottom: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
20% {
|
||
|
|
bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
40% {
|
||
|
|
bottom: 0px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
setTimeout(() => { location.reload(); }, 10000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|