emil
/
LED-web


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
							<!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" />

    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <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 id="a0" onclick="changeAnimation(0)">Off</button>
                <button id="a1" onclick="changeAnimation(1)">Rainbow</button>
                <button id="a2" onclick="changeAnimation(2)">Random Colors</button>
            </div>
            <p class="var1Input">{var1Name}</p>
            <input class="var1Input" onblur="changeVar(this.value, 'animationSetting1')">
            <p class="var2Input">{var2Name}</p>
            <input class="var2Input" onblur="changeVar(this.value, 'animationSetting2')">
            <p class="var3Input">{var3Name}</p>
            <input class="var3Input" onblur="changeVar(this.value, 'animationSetting3')">
            <p class="var4Input">{var4Name}</p>
            <input class="var4Input" onblur="changeVar(this.value, 'animationSetting4')">
            <p class="speedInput">Hastighet (MS)</p>
            <input class="speedInput" onblur="changeVar(this.value, 'delayTime')">
            <button id="deleteCluster" onclick="deleteCluster()"><span class="material-symbols-outlined">delete</span></button>
            <button id="sync">Synk</button>
            <div id="clusters">

            </div>
        </div>

    </div>

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