emil
/
LED-web


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!DOCTYPE html>
<html lang="sv">
<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" class="shelfButton" onclick="shelfClick(0)"></button>
            <button id="b1" class="shelfButton" onclick="shelfClick(1)"></button>
            <button id="b2" class="shelfButton" onclick="shelfClick(2)"></button>
            <button id="b3" class="shelfButton" onclick="shelfClick(3)"></button>
            <button id="b4" class="shelfButton" onclick="shelfClick(4)"></button>
            <button id="b5" class="shelfButton" onclick="shelfClick(5)"></button>
            <button id="b6" class="shelfButton" onclick="shelfClick(6)"></button>
            <button id="b7" class="shelfButton" onclick="shelfClick(7)"></button>
            <button id="b8" class="shelfButton" onclick="shelfClick(8)"></button>
            <button id="b9" class="shelfButton" onclick="shelfClick(9)"></button>
            <button id="makeCluster" class="hidden" onclick="createCluster()">Skapa kluster</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">Hastighet (MS)</p>
            <input type="number" class="speedInput">
            <button id="deleteCluster"><span class="material-symbols-outlined">delete</span></button>
            <div id="clusters">
                <button>Synk</button>
            </div>
        </div>

    </div>

    <script src="js/spotlight.js"></script>
</div>
</body>
</html>