From 2ea37e78f509056dccab1cd2c30b3744e51fa075 Mon Sep 17 00:00:00 2001
From: Osten <11805592+LagradOst@users.noreply.github.com>
Date: Thu, 24 Mar 2022 15:20:46 +0000
Subject: [PATCH] Update index.html

---
 docs/index.html | 106 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 83 insertions(+), 23 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 425be473..a19815da 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -5,21 +5,82 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
     <title>CloudStream-3 Supported Sites</title>
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+	
+	<style>
+	body {
+		font-family: "Roboto", sans-serif;
+		background-color: #FFF;
+	}
+	.whiteText {
+		color : #FFF;
+	}
+	
+	.button {
+		color : #000;
+		text-decoration: none;
+	}
+	
+	.redButton {	
+	}
+	.blueButton {
+	}
+	.greenButton {
+	}
+	.yellowButton {
+	}
+	.row {
+		padding: 0px 10px;
+		white-space: nowrap;
+	}
+	table {
+		border-spacing: 0.5rem;
+	}
+	
+	.yellowButton::before {
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12 24c6.6274 0 12-5.3726 12-12 0-6.62744-5.3726-12-12-12-6.62744 0-12 5.37256-12 12 0 6.6274 5.37256 12 12 12zm0-17.5c.4141 0 .75.33582.75.75v4.5c0 .4142-.3359.75-.75.75s-.75-.3358-.75-.75v-4.5c0-.41418.3359-.75.75-.75zm.8242 9.5658c.0635-.0919.1118-.195.1416-.3054.0132-.0482.0225-.0979.0283-.1487.0039-.0366.0059-.074.0059-.1117 0-.5522-.4478-1-1-1s-1 .4478-1 1 .4478 1 1 1c.3423 0 .644-.172.8242-.4342z' fill='%23dbab09'/%3E%3C/svg%3e");
+	}
+	
+	.blueButton::before {
+		filter: sepia(100%) saturate(300%) brightness(70%) hue-rotate(180deg);
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12 24c6.6274 0 12-5.3726 12-12 0-6.62744-5.3726-12-12-12-6.62744 0-12 5.37256-12 12 0 6.6274 5.37256 12 12 12zm0-17.5c.4141 0 .75.33582.75.75v4.5c0 .4142-.3359.75-.75.75s-.75-.3358-.75-.75v-4.5c0-.41418.3359-.75.75-.75zm.8242 9.5658c.0635-.0919.1118-.195.1416-.3054.0132-.0482.0225-.0979.0283-.1487.0039-.0366.0059-.074.0059-.1117 0-.5522-.4478-1-1-1s-1 .4478-1 1 .4478 1 1 1c.3423 0 .644-.172.8242-.4342z' fill='%23dbab09'/%3E%3C/svg%3e");
+	}
+	
+	.redButton::before {
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m12 24c6.6274 0 12-5.3726 12-12 0-6.62744-5.3726-12-12-12-6.62744 0-12 5.37256-12 12 0 6.6274 5.37256 12 12 12zm0-17.5c.4141 0 .75.33582.75.75v4.5c0 .4142-.3359.75-.75.75s-.75-.3358-.75-.75v-4.5c0-.41418.3359-.75.75-.75zm.8242 9.5658c.0635-.0919.1118-.195.1416-.3054.0132-.0482.0225-.0979.0283-.1487.0039-.0366.0059-.074.0059-.1117 0-.5522-.4478-1-1-1s-1 .4478-1 1 .4478 1 1 1c.3423 0 .644-.172.8242-.4342z' fill='%23d73a49'/%3E%3C/svg%3e");
+	}
+
+	.greenButton::before{
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='15' height='15' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m1 12c0-6.07513 4.92487-11 11-11 6.0751 0 11 4.92487 11 11 0 6.0751-4.9249 11-11 11-6.07513 0-11-4.9249-11-11zm16.2803-2.71967c.2929-.29289.2929-.76777 0-1.06066s-.7677-.29289-1.0606 0l-5.9697 5.96963-2.46967-2.4696c-.29289-.2929-.76777-.2929-1.06066 0s-.29289.7677 0 1.0606l3 3c.29293.2929.76773.2929 1.06063 0z' fill='%2328a745'/%3E%3C/svg%3e");ontent: '';
+    }
+	
+	.indicator::before {
+		display: inline-block;
+		width: 24px;
+		height: 24px;
+		content: "";
+		vertical-align: text-bottom;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		background-position: center center;
+		margin-right:10px;
+	}
+
+	</style>
 </head>
 
 <body>
     <div>
         <h1>Site supported:</h1>
-        <p>Loading Status: <span id="status">Idle</span></p>
-        <ul id="siteList">
-        </ul>
+        <table>
+		<tbody id="siteList"></tbody>
+        </table>
     </div>
     <script>
         var status = document.getElementById("status");
         var mainContainer = document.getElementById("siteList");
-        status.innerHTML = "Fetching..."
         $(document).ready(function () {
             $.getJSON("providers.json", function (data) {
                 status.innerHTML = "Parsing...";
@@ -30,47 +91,46 @@
                         if(value.url == "NONE") { continue; }
                         
                         var _status = value.status
-                        //Create <li> node
-                        var node = document.createElement("li");
-                        //Add <a> to <li> node
+
+                        var node = document.createElement("tr");
+						node.classList.add("row");
+
                         var _a = document.createElement("a");
                         _a.setAttribute('href', value.url);
-                        _a.innerHTML = value.name + ": "
-                        _a.style.color = "black";
-                        node.appendChild(_a);
-                        //Add <span> to <li> node
-                        var _span = document.createElement("span");
-                        var _statusText = "Unknown";
+                        _a.innerHTML = value.name
+						
+					    var _statusText = "Unknown";
+                        var _buttonText = "yellow";
                         switch (_status) {
                             case 0:
                                 _statusText = "Unavailable";
-                                _span.style.color = "red";
+                                _buttonText = "red";
                                 break;
                             case 1:
-                                _statusText = "Available";
-                                _span.style.color = "green";
+                                _statusText = "Available";	
+								_buttonText = "green";
+
                                 break;
                             case 2:
                                 _statusText = "Slow";
-                                _span.style.color = "yellow";
+								_buttonText = "yellow";
                                 break;
                             case 3:
                                 _statusText = "Beta";
-                                _span.style.color = "blue";
+								_buttonText = "blue";
                                 break;
                         }
-                        _span.textContent = _statusText;
-                        node.appendChild(_span);
-                        //Add <li> to <ul> siteList
+						_a.classList.add(_buttonText+"Button");
+						_a.classList.add("indicator");
+						_a.classList.add("button");
+						node.appendChild(_a);
                         mainContainer.appendChild(node);
                     }
                 }
             }).fail(function () {
                 console.log("An error has occurred.");
-                status.innerHTML = "Error occured!"
             });
         });
-        status.innerHTML = "Done loading!"
     </script>
 </body>