beenull/speedtest
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Added an attractive background which can attract the attention of the user

Browse source
This commit is contained in:
Vimuthu Thesara 2022-10-24 07:39:47 +05:30
parent 97e0390680
commit 4214fbf146
10 changed files with 118 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
example-multipleServers-full.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
<meta charset="UTF-8" />

1
example-multipleServers-pretty.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<link rel="shortcut icon" href="favicon.ico">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />

1
example-singleServer-basic.html
View file

@ -4,6 +4,7 @@
<head>
<title>LibreSpeed Example</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
</head>
<script type="text/javascript" src="speedtest.js"></script>
<body>

1
example-singleServer-chart.html
View file

@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<title>LibreSpeed Example</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<style type="text/css">
html,
body {

1
example-singleServer-customSettings.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
<title>LibreSpeed Example</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="speedtest.js"></script>
<script type="text/javascript">

1
example-singleServer-full.html
View file

@ -5,6 +5,7 @@
<meta charset="UTF-8" />
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript" src="speedtest.js"></script>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript">
function I(i){return document.getElementById(i);}
//INITIALIZE SPEEDTEST

1
example-singleServer-gauges.html
View file

@ -4,6 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
<meta charset="UTF-8" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="speedtest.js"></script>
<script type="text/javascript">
function I(i){return document.getElementById(i);}

1
example-singleServer-pretty.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
<title>LibreSpeed Example</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="speedtest.js"></script>
<script type="text/javascript">

1
example-singleServer-progressBar.html
View file

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no" />
<title>LibreSpeed Example</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="speedtest.js"></script>
<script type="text/javascript">

109
styles.css Normal file
View file

@ -0,0 +1,109 @@
body {
background: -moz-linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
background: -webkit-linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
background: linear-gradient(45deg, #02e1ba 0%,#26c9f2 29%,#d911f2 66%,#ffa079 100%);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
/*min-height: calc(100vh - 2rem);*/
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-evenly;
overflow: hidden;
position: relative;
}
body::before,
body::after {
content: "";
width: 70vmax;
height: 70vmax;
position: absolute;
background: rgba(255, 255, 255, 0.07);
left: -20vmin;
top: -20vmin;
animation: morph 15s linear infinite alternate, spin 20s linear infinite;
z-index: 1;
will-change: border-radius, transform;
transform-origin: 55% 55%;
pointer-events: none;
}
body::after {
width: 70vmin;
height: 70vmin;
left: auto;
right: -10vmin;
top: auto;
bottom: 0;
animation: morph 10s linear infinite alternate, spin 26s linear infinite reverse;
transform-origin: 20% 20%;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
@keyframes Gradient {
0% {
background-position: 0 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0 50%
}
}
@keyframes morph {
0% {
border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
100% {
border-radius: 40% 60%; }
}
@keyframes spin {
to {
transform: rotate(1turn);
}
}
.st0{display:none;}
.st1{display:inline;}
.st2{opacity:0.29;}
.st3{fill:#FFFFFF;}
.st4{clip-path:url(#SVGID_2_);fill:#FFFFFF;}
.st5{clip-path:url(#SVGID_4_);}
.st6{clip-path:url(#SVGID_6_);}
.st7{clip-path:url(#SVGID_8_);}
.st8{clip-path:url(#SVGID_10_);}
.st9{fill:none;}
.st10{clip-path:url(#SVGID_12_);}
.st11{opacity:0.7;}
.st12{clip-path:url(#SVGID_14_);}
.st13{opacity:0.2;}
.st14{clip-path:url(#SVGID_16_);}
.st15{opacity:0.3;fill:#FFFFFF;enable-background:new ;}