Added spotlight site. So far no JS

css/spotlight.css

@@ -0,0 +1,183 @@
+#spotlightContainer {
+    display: grid;
+    grid-row: 2/-1;
+    grid-column: 2/-1;
+    margin: 10px 10px;
+    height: 100%;
+
+    grid-template-rows: 10vh auto 10vh;
+    grid-template-columns: 1fr 30vw;
+}
+
+#spotlightContainer h2 {
+    grid-column: 1/-1;
+    grid-row: 1/2;
+
+    color: white;
+    font-size: 50px;
+    align-self: center;
+    text-align: center;
+    font-family: 'Raleway', sans-serif;
+}
+
+#shelfButtonContainer {
+    grid-row: 2/3;
+    grid-column: 1/2;
+
+    display: grid;
+    grid-template-columns: repeat(3, calc(26vh));
+    grid-template-rows: 0 0.5fr 1fr 1fr 0.5fr;
+
+    justify-content: center;
+}
+
+#b0 {
+    grid-column: 1/2;
+    grid-row: 5/6;
+    border: none;
+}
+#b1 {
+    grid-column: 1/2;
+    grid-row: 4/5;
+    border: #a8a9b4 solid 3px;
+}
+#b2 {
+    grid-column: 1/2;
+    grid-row: 3/4;
+    border: #a8a9b4 solid 3px;
+}
+#b3 {
+    grid-column: 1/2;
+    grid-row: 2/3;
+    border: none;
+}
+#b4 {
+    grid-column: 2/3;
+    grid-row: 5/6;
+    border: none;
+}
+#b5 {
+    grid-column: 2/3;
+    grid-row: 4/5;
+    border: #a8a9b4 solid 3px;
+}
+#b6 {
+    grid-column: 2/3;
+    grid-row: 3/4;
+    border: none;
+}
+#b7 {
+    grid-column: 3/4;
+    grid-row: 5/6;
+    border: none;
+}
+#b8 {
+    grid-column: 3/4;
+    grid-row: 4/5;
+    border: #a8a9b4 solid 3px;
+}
+#b9 {
+    grid-column: 3/4;
+    grid-row: 3/4;
+    border: none;
+}
+
+#spotlightContainer button {
+    background-color: #2c2c36;
+}
+
+#spotlightContainer button:hover {
+    background-color: #2f2f3d;
+    border-radius: 10px;
+}
+
+#selected {
+    background-color: #a8a9b4 !important;
+}
+
+
+#spotlightSettingsContainer {
+    background-color: #252531;
+    grid-column: -2/-1;
+    grid-row: 2/-2;
+    margin-left: 2vw;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 10vh 1fr 1fr 1fr 1fr 1fr auto;
+    grid-gap: 1vw;
+    padding: 0 1vw;
+}
+
+.var1Input {
+    grid-row: 4/5;
+    grid-column: 1/2;
+}
+
+.var2Input {
+    grid-row: 4/5;
+    grid-column: 2/3;
+}
+
+.speedInput {
+    grid-row: 5/6;
+    grid-column: 1/2;
+}
+
+#spotlightAnimations {
+    grid-row: 3/4;
+    grid-column: 1/3;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    grid-gap: 0.2vw;
+}
+
+#spotlightSettingsContainer input {
+    height: 20%;
+    margin-top: auto;
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#spotlightSettingsContainer p {
+    color: white;
+    font-size: 1.5vw;
+    text-align: center;
+    font-family: 'Raleway', sans-serif;
+    margin: auto;
+}
+
+#spotlightSettingsContainer button {
+    background-color: #1b1b26;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    font-size: 1.5vw;
+    font-family: 'Raleway', sans-serif;
+}
+
+#deleteCluster {
+    grid-column: 2/3;
+    grid-row: 5/6;
+    height: min-content;
+    width: min-content;
+    padding: 10px;
+    background-color: #ff4b48 !important;
+    margin-left: auto;
+    margin-top: auto;
+}
+
+#deleteCluster:hover {
+    background-color: #ff6e6b !important;
+}
+
+.material-symbols-outlined {
+    font-size: 40px !important;
+     font-variation-settings:
+             'FILL' 0,
+             'wght' 400,
+             'GRAD' 0,
+             'opsz' 48
+}

js/LED.js

@@ -61,7 +61,7 @@ function setVar_1(value) {
         var_1 = value
         document.getElementById("var_1").value = value
         try {
-            httpGetAsync(arduionoURL + "/y2:" + value + ":;")
+            httpGet(arduionoURL + "/y2:" + value + ":;")
         } catch (e) {
         }
     }

js/spotlight.js

@@ -0,0 +1 @@
+const shelfGrid = document.getElementById("shelfButtonContainer")

sidebar.html

@@ -1,4 +1,5 @@
 <a href="LED.html">LED</a>
+<a href="spotlights.html">Spotlight</a>
 <a href="gallery.html">Galleri</a>
 <a href="https://git.andromeda.nu/emil" target="_blank">Git</a>
 <a href="https://github.com/" target="_blank">GitHub</a>

spotlights.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="se">
+<head>
+    <meta charset="UTF-8">
+    <title>RGB Hub</title>
+    <link rel="stylesheet" type="text/css" href="css/spotlight.css">
+    <link rel="stylesheet" type="text/css" href="css/nav.css">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Raleway&family=Roboto&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+
+    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
+</head>
+<body>
+<div class="container">
+    <div class="corner"><a href="index.html">Emil Hub</a></div>
+
+    <!--Navigation bar-->
+    <div class="sideBar" id="nav"></div>
+    <script>$(function(){$("#nav").load("sidebar.html");});</script>
+    <!--end of Navigation bar-->
+
+    <div class="topBar">
+        <!--<button onclick="topBarClick('animationsContainer')">Animations</button>
+        <button onclick="topBarClick('customContainer')">Custom</button>
+        <button onclick="topBarClick('settingsContainer')">Settings</button>-->
+    </div>
+
+    <div id="spotlightContainer">
+        <h2>Spotlight</h2>
+        <div id="shelfButtonContainer">
+            <button id="b0"></button>
+            <button id="b1"></button>
+            <button id="b2"></button>
+            <button id="b3"></button>
+            <button id="b4"></button>
+            <button id="b5"></button>
+            <button id="b6"></button>
+            <button id="b7"></button>
+            <button id="b8"></button>
+            <button id="b9"></button>
+        </div>
+
+        <div id="spotlightSettingsContainer">
+            <h2>Settings</h2>
+            <p>{clusterName}</p>
+            <div id="spotlightAnimations">
+                <button class="a0">Off</button>
+                <button class="a1">Rainbow</button>
+            </div>
+            <p class="var1Input">{var1Name}</p>
+            <input type="number" class="var1Input">
+            <p class="var2Input">{var2Name}</p>
+            <input type="number" class="var2Input">
+            <p class="speedInput">Speed (MS)</p>
+            <input type="number" class="speedInput">
+            <button id="deleteCluster"><span class="material-symbols-outlined">delete</span></button>
+            <div id="clusters">
+                <button>Sync</button>
+            </div>
+        </div>
+
+    </div>
+
+    <script src="js/spotlight.js"></script>
+</div>
+</body>
+</html>