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
