steuerung.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <link href="../static/style.css" rel="stylesheet" media="screen">
    <link rel="icon" href="../static/robot01_schwarz.png">
</head>
<body style="font-family: 'Courier New'">
    <!--Logo, Titel, Navigationbar und Uhrzeit-->
    <nav>
        <img src="../static/robot01.png" style="width:60px; height: auto" align="left">
        <name align="left"><font size="8"><b>GROWBOT</b></font></name>
        <ul>
            <li><a href="messwerte">Messwerte</a></li>
            <li><a class="active" href="steuerung">Steuerung</a></li>
            <li><a href="analyse">Analyse</a></li>
            <li><a href="logout">Logout</a></li>
        </ul>
        <hr color=white>
    </nav>
    <div align="right"><font size="4">{{ time }}</font></div>

    </br></br></br></br></br></br>

    <h1 style="margin-left: 200px"><font size="6">aktuelle Steuerung:</font></h1>
    <!--Licht-->
    <div class="left"><button id="btn1" class="button button1 move-right" style="margin-left: 200px;">Licht an</button></div>

    <!--Wasser-->
    <div class="left"><button id="btn2" class="button button2 move-right" style="margin-left: 200px;">Pumpe an</button></div>

    </br></br></br></br>
    <h1 style="margin-left: 200px"><font size="5">Stärke:</font></h1>

    <!--Regler für Stärke-->
    <div style="margin-left: 200px" class="slidecontainer">
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
    </div>

    <h1 style="margin-left: 200px; margin-bottom: 0px"><font size="5">Zeitschaltung planen:</font></h1>
    <!--Zeitschaltung mit Start- und Endzeit-->
    <div style="margin-left: 150px" class="toggle">
      <label>
        <input type="checkbox">
        <span class="slider"></span>
      </label>
    </div>

    <!--PopUp-->
    <!--Button muss mit Schalter getauscht werden. Noch keine Ahnung wie :( -->
    <button style="margin-left: 200px" onclick="myFunction2()" id="myBtn">Read more</button>
    <span id="dots"> </span><span id="more">
        <form style="margin-left: 200px; margin-top:20px" action="/action_page.php">
        <label for="appt">Select a start time:</label>
        <input type="time" id="apt" name="apt" value="05:30">
        <!--<input style="width: 10%" type="submit">
        Eventuell brauch man den Button später um das zu verarbeiten?-->
        </form>

        <form style="margin-left: 200px; margin-top:20px" action="/action_page.php">
        <label for="appt">Select an end time:</label>
        <input type="time" id="appt" name="appt" value="21:00" required>
        <!--<input style="width: 10%" type="submit"  value="Submit form">-->
        </form>
    </span></p>


    <script src="../static/index.js"></script>

</body>
</html>