4 年之前 · 5b662e19e8
--- a/css/LEDs.css
+++ b/css/LEDs.css
@@ -0,0 +1,63 @@
 
				+body, html {
			
 
				+    margin: 0;
			
 
				+    overflow: hidden;
			
 
				+}
			
 
				+
			
 
				+body {
			
 
				+    background-color: #2c2c36;
			
 
				+}
			
 
				+
			
 
				+.topBar {
			
 
				+    grid-column: 2/-1;
			
 
				+    grid-row: 1/2;
			
 
				+    background-color: #252531;
			
 
				+}
			
 
				+
			
 
				+.topBar button {
			
 
				+    border: none;
			
 
				+    background: none;
			
 
				+    color: white;
			
 
				+    font-size: 20px;
			
 
				+    height: 100%;
			
 
				+    padding: 0 10px;
			
 
				+    font-family: Helvetica, 'Raleway', sans-serif;
			
 
				+}
			
 
				+
			
 
				+.container {
			
 
				+    display: grid;
			
 
				+    grid-template-columns: 150px 1fr;
			
 
				+    grid-template-rows: 5vh 1fr;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+.animationsContainer {
			
 
				+    display: grid;
			
 
				+    grid-row: 2/-1;
			
 
				+    grid-column: 2/-1;
			
 
				+    margin: 10px 10px;
			
 
				+
			
 
				+    grid-template-rows: 10vh auto auto 10vh;
			
 
				+    grid-template-columns: repeat(5, 1fr);
			
 
				+    grid-gap: 10px;
			
 
				+}
			
 
				+
			
 
				+.animationsContainer 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;
			
 
				+}
			
 
				+
			
 
				+.animationsContainer button {
			
 
				+    border: solid #252531 2px;
			
 
				+    border-radius: 10px;
			
 
				+    background-color: #252531;
			
 
				+    color: white;
			
 
				+    font-size: 40px;
			
 
				+    font-family: 'Roboto', sans-serif;
			
 
				+}
			
--- a/css/sidebar.css
+++ b/css/sidebar.css
@@ -0,0 +1,36 @@
 
				+.corner {
			
 
				+    grid-row: 1/2;
			
 
				+    grid-column: 1/2;
			
 
				+
			
 
				+    background-color: #13131e;
			
 
				+    color: #a2ff99;
			
 
				+    font-size: 30px;
			
 
				+    font-family: 'Raleway', sans-serif;
			
 
				+}
			
 
				+
			
 
				+.corner p {
			
 
				+    margin: calc((5vh - 35px)/2) 0;
			
 
				+    text-align: center;
			
 
				+}
			
 
				+
			
 
				+.sideBar {
			
 
				+    grid-row: 2/-1;
			
 
				+    grid-column: 1/2;
			
 
				+
			
 
				+    height: 100vh;
			
 
				+    background-color: #1b1b26;
			
 
				+}
			
 
				+
			
 
				+.sideBar a {
			
 
				+    font-family: Helvetica, 'Raleway', sans-serif;
			
 
				+    color: white;
			
 
				+    text-decoration: none;
			
 
				+    display: block;
			
 
				+    height: min-content;
			
 
				+    padding: 15px;
			
 
				+    font-size: 20px;
			
 
				+}
			
 
				+
			
 
				+.sideBar a:hover {
			
 
				+    background-color: #252531;
			
 
				+}
			
--- a/index.html
+++ b/index.html
@@ -0,0 +1,42 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="se">
			
 
				+<head>
			
 
				+    <meta charset="UTF-8">
			
 
				+    <title>RGB Hub</title>
			
 
				+    <link rel="stylesheet" type="text/css" href="css/LEDs.css">
			
 
				+    <link rel="stylesheet" type="text/css" href="css/sideBar.css">
			
 
				+
			
 
				+    <script src="js/LED.js"></script>
			
 
				+
			
 
				+    <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">
			
 
				+</head>
			
 
				+<body>
			
 
				+    <div class="container">
			
 
				+        <div class="corner"><p>Cool Site</p></div>
			
 
				+        <div class="sideBar">
			
 
				+            <a href="index.html">LED</a>
			
 
				+            <a>Git</a>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="topBar">
			
 
				+            <button>Animations</button>
			
 
				+            <button>Settings</button>
			
 
				+        </div>
			
 
				+
			
 
				+        <div class="animationsContainer">
			
 
				+            <h2>Animations</h2>
			
 
				+
			
 
				+            <button id="B" onclick="buttonPushAnimation('B')">Rainbow</button>
			
 
				+            <button id="C" onclick="buttonPushAnimation('C')">Fill</button>
			
 
				+            <button id="D" onclick="buttonPushAnimation('D')">Chasing</button>
			
 
				+            <button id="E" onclick="buttonPushAnimation('E')">Random colors</button>
			
 
				+            <button id="F" onclick="buttonPushAnimation('F')">Split RGB</button>
			
 
				+            <button id="G" onclick="buttonPushAnimation('G')">Stardust</button>
			
 
				+        </div>
			
 
				+
			
 
				+    </div>
			
 
				+</body>
			
 
				+</html>
			
--- a/js/LED.js
+++ b/js/LED.js
@@ -0,0 +1,24 @@
 
				+let lastPushId = "C"
			
 
				+const arduionoURL = "http://192.168.1.160"
			
 
				+
			
 
				+function buttonPushAnimation(id) {
			
 
				+    if (id !== lastPushId) {
			
 
				+        document.getElementById(id).style.backgroundColor = "#2c2c36"
			
 
				+        document.getElementById(lastPushId).style.backgroundColor = "#252531"
			
 
				+        lastPushId = id
			
 
				+
			
 
				+        httpGetAsync(arduionoURL + "/" + id)
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+function httpGetAsync(theUrl, callback)
			
 
				+{
			
 
				+    var xmlHttp = new XMLHttpRequest();
			
 
				+    xmlHttp.onreadystatechange = function() {
			
 
				+        if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
			
 
				+            callback(xmlHttp.responseText);
			
 
				+    }
			
 
				+    xmlHttp.open("GET", theUrl, true); // true for asynchronous
			
 
				+    xmlHttp.send(null);
			
 
				+}