emil
/
LED-web


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
							<!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/nav.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">

    <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>Custom</button>
            <button onclick="topBarClick('settingsContainer')">Settings</button>
        </div>

        <div id="animationsContainer">
            <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>

        <div class="hide" id="settingsContainer">
            <div class="settingsContainer">
                <h2>Settings</h2>
                <button onclick="setSpeed(1)">Speed 1</button>
                <button onclick="setSpeed(10)">Speed 10</button>
                <button onclick="setSpeed(100)">Speed 100</button>
                <button onclick="setSpeed(500)">Speed 500</button>
                <button onclick="setSpeed(1000)">Speed 1000</button>

                <button onclick="setVar_1(0)">Setting 1: 0</button>
                <button onclick="setVar_1(1)">Setting 1: 1</button>
                <button onclick="setVar_1(2)">Setting 1: 2</button>
                <button onclick="setVar_1(5)">Setting 1: 5</button>
                <button onclick="setVar_1(10)">Setting 1: 10</button>

                <div class="settingUnit">
                    <p>Speed (ms/tick)</p>
                    <input type="number" id="speed">
                </div>
                <div class="settingUnit">
                    <p>Setting 1</p>
                    <input type="number" id="var_1">
                </div>

                <button id="set" onclick="setSettings()">Set</button>
            </div>
        </div>

    </div>
</body>
</html>