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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>STEMChat</title>
    <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="/css/pure_css.css">
    <link rel="stylesheet" href="css/feedback.css">
    <link rel="stylesheet" href="/css/navbar.css">
</head>

<body>
    <div  class="topnav" id="myTopnav1">
        <a href="javascript:void(0);" class="icon" onclick="myFunction1()">
            <i>â˜°</i>
        </a>


        <!-- Navigation links (hidden by default) -->
        <div id="myLinks">
            <a href="/">Home</a>

            <a href='<%=about%>'>About</a>
            <%if(curr_user){%>
                <a href='<%=home%>'>Chat</a>
                <%}%>

            <a href='<%=blog%>'>Blogs</a>
            <a href='<%=project%>'>Projects</a>
            <a href='<%=feedback%>'  class="active">Feedback</a>
            <%if(curr_user){%>
                <a href='<%=profile%>'>Profile</a>
                <%}%>

            <%if(!curr_user){%>
                <a href='<%=home%>'>Login</a>
                <%}%>
            <%if(curr_user){%>
                <a href="<%=logout%>">Logout</a>
                <%}%>
        </div>
        <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->

    </div>


        <div id="main">
            <div class="content">
                <h2 class="content-subhead">Feedback</h2>
                <form class="pure-form pure-form-stacked" action="/feedback" method="POST">
                    <fieldset>
                        <legend></legend>



                        <label for="stacked-email">How would you rate our app?</label>




                        <br>
                        <select name="ratings" id="rating" multiple>
                            <option value="satisfied">ðŸ˜€</option>
                            <br>
                            <option value="neutral">ðŸ˜‘ </option>
                            <br>
                            <option value="unsatisfied"> ðŸ˜Ÿ</option>
                            <br>

                        </select>

                        <br>



                        <label for="stacked-state"></label>
                        <div>
                            <select name="options" id="stacked-state">
                                <option value="Suggestion">Suggestion</option>
                                <option value="Complaint">Complaint</option>
                                <option value="Bug">Bug Report</option>
                                <option value="others">Others</option>
                            </select>
                        </div>


                        <label for="stacked-email">Topic</label>
                        <div class="pure-u-1">
                            <textarea rows="2" class="pure-u-1" name="topic" placeholder="Topic"></textarea>
                        </div>

                        <label for="stacked-password">Please Describe</label>
                        <div class="pure-u-1">
                            <textarea rows="6" class="pure-u-1" name="desc" placeholder="Description"></textarea>
                        </div>

                        <button type="submit" class="pure-button pure-button-primary">Submit</button>
                    </fieldset>
                </form>
            </div>
            <center>
              <!--
              <div class='foot'>
                  <p> MADE BY BITS 2020</p>
              </div>
              -->
            </center>


        </div>


    <script src="/js/ui.js"></script>
    <script>
          function myFunction1() {
            var x = document.getElementById("myTopnav1");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
        function _myFunction2() {
            var x = document.getElementById("myLinks");
            if (x.style.display === "block") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            }
        }
    </script>

</body>
<style>

</style>
</html>
