<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Bootstrap-->
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link href="https://bootswatch.com/4/flatly/bootstrap.css" rel="stylesheet" id="bootstrap-css3">

    <link rel="stylesheet" title="default" href="/static/main.css">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">



    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>


    <script src="/static/coms.js"></script>
    <script src="/static/render.js"></script>
    <script src="/static/main.js"></script>

</head>

<body>


    <div style="text-align:center;">
        <div class="container bg-dark" id="main">
            <nav class="navbar navbar-expand-lg navbar-dark bg-primary" id="nav-container">
                  <form class="form-inline my-2 my-lg-0" id="search-form" onsubmit="loadData();return false" action="#">
                    <input class="form-control" type="text" id="search-field" placeholder="Mehl, Eier, Zucker">
                    <button class="btn btn-secondary my-2 my-sm-0" id="nav-button" type="button" onclick="loadData()">🔍</button>
                  </form>
            </nav>
            <div id="recipe-list">
                
            </div>
        </div>
    </div>


    
</body>

</html>