emil
/
LED-web


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<!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>