From 4214fbf1466ddfb3187b893e3301b1410332adff Mon Sep 17 00:00:00 2001
From: Vimuthu Thesara <116469173+Vimu004@users.noreply.github.com>
Date: Mon, 24 Oct 2022 07:39:47 +0530
Subject: [PATCH] Added an attractive background which can attract the
attention of the user
---
example-multipleServers-full.html | 1 +
example-multipleServers-pretty.html | 1 +
example-singleServer-basic.html | 1 +
example-singleServer-chart.html | 1 +
example-singleServer-customSettings.html | 1 +
example-singleServer-full.html | 1 +
example-singleServer-gauges.html | 1 +
example-singleServer-pretty.html | 1 +
example-singleServer-progressBar.html | 1 +
styles.css | 109 +++++++++++++++++++++++
10 files changed, 118 insertions(+)
create mode 100644 styles.css
diff --git a/example-multipleServers-full.html b/example-multipleServers-full.html
index 125edf500..fca4ef5dc 100755
--- a/example-multipleServers-full.html
+++ b/example-multipleServers-full.html
@@ -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" />
diff --git a/example-multipleServers-pretty.html b/example-multipleServers-pretty.html
index 4316eabf6..fe2676da3 100755
--- a/example-multipleServers-pretty.html
+++ b/example-multipleServers-pretty.html
@@ -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" />
diff --git a/example-singleServer-basic.html b/example-singleServer-basic.html
index 810c548bb..e6b4b47f6 100755
--- a/example-singleServer-basic.html
+++ b/example-singleServer-basic.html
@@ -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>
diff --git a/example-singleServer-chart.html b/example-singleServer-chart.html
index d0040e346..78783a400 100755
--- a/example-singleServer-chart.html
+++ b/example-singleServer-chart.html
@@ -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 {
diff --git a/example-singleServer-customSettings.html b/example-singleServer-customSettings.html
index b1c0cfbba..e312740e1 100755
--- a/example-singleServer-customSettings.html
+++ b/example-singleServer-customSettings.html
@@ -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">
diff --git a/example-singleServer-full.html b/example-singleServer-full.html
index 823ef9f29..fd6be9176 100755
--- a/example-singleServer-full.html
+++ b/example-singleServer-full.html
@@ -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
diff --git a/example-singleServer-gauges.html b/example-singleServer-gauges.html
index 9a49705f0..3a7b5d6ea 100755
--- a/example-singleServer-gauges.html
+++ b/example-singleServer-gauges.html
@@ -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);}
diff --git a/example-singleServer-pretty.html b/example-singleServer-pretty.html
index 771553538..17cf9bbb4 100755
--- a/example-singleServer-pretty.html
+++ b/example-singleServer-pretty.html
@@ -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">
diff --git a/example-singleServer-progressBar.html b/example-singleServer-progressBar.html
index f9e7007c3..85019e999 100755
--- a/example-singleServer-progressBar.html
+++ b/example-singleServer-progressBar.html
@@ -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">
diff --git a/styles.css b/styles.css
new file mode 100644
index 000000000..b7240310d
--- /dev/null
+++ b/styles.css
@@ -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 ;}
\ No newline at end of file