<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPY-DER</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/main.css') }}">

</head>

<body>
    <div class="container-flex">
        <div class="header">
            <h1><u><b><span style="color:#5C5C5C;">SPY</span><span style="color:#139442">-DER</span></b></u></h1>
            <h4>BY SPARKLERS</h4>
        </div>
        <div class="row">
            <div class="col custom">
                <div class="section">
                    <a class="btn btn-success btn-lg  me-4" id="lighton" href="#"><b>Light On</b></a>
                    <a class="btn btn-success btn-lg  m-4 " id="lightoff" href="#"><b>Light Off</b></a>
                </div>
                <div class="section">
                    <a class="btn btn-success btn-lg me-4 mt-auto" id="cameraon" href="#"><b>Camera On</b></a>
                    <a class="btn btn-success btn-lg m-4" id="cameraoff" href="#"><b>Camera Off</b></a>
                </div>
                <div class="section">

                    <!-- <button type="button" class="btn btn-success btn-lg  px-5 me-4"><b>Sit</b></button>
                    <button type="button" class="btn btn-success btn-lg  px-5 m-4"><b>Stand</b></button> -->

                    <a class="btn btn-success btn-lg me-4 mt-auto" id="sit" href="#"><b>Sit</b></a>
                    <a class="btn btn-success btn-lg m-4" id="stand" href="#"><b>Stand</b></a>

                </div>
                <div class="section">
                    <a class="btn btn-success btn-lg m-4 mt-auto" id="handwave" href="#"><b>Hand Wave</b></a>
                </div>
                <div class="section">
                    <!-- <button type="button" class="btn btn-success btn-lg  px-5 m-4"><b>Dance</b></button> -->
                    <a class="btn btn-success btn-lg m-4 mt-auto" id="dance" href="#"><b>Dance</b></a>
                </div>
            </div>
            <div class="col custom">
                <div class="container-flex section1">
                    <div>
                        <center>
                            <a href="#" id="up" style="font-size:60px; text-decoration:none;">  &#x1F881;</a>
                        </center>
                        <a href="#" id="left" style="font-size:60px;text-decoration: none;"> &#x1F880; </a>
                        <a href="#" id="right" style="font-size:60px; margin-left: 90px; text-decoration: none;">  &#x1F882;</a>
                        <center>
                            <a href="#" id="down" style="font-size:60px;text-decoration:none;"> &#x1F883;</a>
                        </center>
                    </div>
                    <div class="section1">
                        <button type="button" id="poweroff" class="btn btn-success btn-lg  px-5 mt-5"><b>Power Off</b></button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer -->
        <footer class="container-fluid text-center ">
            <b>  <p>Made By <a href="#">SPARKLERS</a></p> </b>
        </footer>
    </div>
    <script>
        $(document).ready(function() {
            $("#down").on("mousedown", function() {
                $.get('/down_side');
            }).on('mouseup', function() {
                $.get('/stop');
            });
            $("#up").on("mousedown", function() {
                $.get('/up_side');
            }).on('mouseup', function() {
                $.get('/stop');
            });
            $("#left").on("mousedown", function() {
                $.get('/left_side');
            }).on('mouseup', function() {
                $.get('/stop');
            });
            $("#right").on("mousedown", function() {
                $.get('/right_side');
            }).on('mouseup', function() {
                $.get('/stop');
            });
            $("#lighton").on("mousedown", function() {
                $.get('/lighton');
            });
            $("#lightoff").on("mousedown", function() {
                $.get('/lightoff');
            });
            $("#handwave").on("mousedown", function() {
                $.get('/handwave');
            });
            $("#dance").on("mousedown", function() {
                $.get('/dance');
            });
            $("#cameraon").on("mousedown", function() {
                $.get('/cameraon');
            });
            $("#cameraoff").on("mousedown", function() {
                $.get('/cameraoff');
            });
            $("#poweroff").on("mousedown", function() {
                $.get('/poweroff');
            });
            $("#sit").on("mousedown", function() {
                $.get('/sit');
            });
            $("#stand").on("mousedown", function() {
                $.get('/stand');
            });
        });
    </script>
</body>

</html>
