Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
    <link href="/Content/Site.css" rel="stylesheet">
    <link href="/Content/bootstrap.css" rel="stylesheet">


    <script src="/Scripts/jquery-3.4.1.js"></script>


    <script type="text/javascript">
        function show() {
            document.getElementById("btn-Search").style.display = 'inline-block';
        };
        $(document).ready(function () {
            $("#inpSearch").focus(function () {
                $(".close-btn").addClass("active");
            });

            $("#inpSearch").focusout(function () {
                $(".close-btn").removeClass("active");
                $(this).val("");
            });

            $('#inpSearch').on('keyup', function(e){
                if (e.keyCode === 13) {
                var baseUrl = '/Home/search/'
                var url = baseUrl + $('#inpSearch').val();
                    window.location.href = "/Home/search?inpSearch=" + $('#inpSearch').val();
                }
            })
        });
        $(function () {
            $("#btnHome").hover(
                function () { //mouse over
                    $(this).children('img').attr("src", "/XImages/home7.png");
                },
                function () { //mouse Out
                    $(this).children('img').attr("src", "/XImages/home-512.png");
                }
            )
        });
        $(function () {
            $("#btnTypeGrocery").hover(
                function () { //mouse over
                    $(this).children('img').attr("src", "/XImages/grocery5.png");
                },
                function () { //mouse Out
                    $(this).children('img').attr("src", "/XImages/grocery1.png");
                }
            )
        });
        $(function () {
            $("#btnShopOnline").hover(
                function () { //mouse over
                    $(this).children('img').attr("src", "/XImages/shope_online.png");
                },
                function () { //mouse Out
                    $(this).children('img').attr("src", "/XImages/shope_online0.png");
                }
            )
        });
        $(function () {
            $("#btnDeliveryDate").hover(
                function () { //mouse over
                    $(this).children('img').attr("src", "/XImages/Delivery.png");
                },
                function () { //mouse Out
                    $(this).children('img').attr("src", "/XImages/Delivery0.png");
                }
            )
        });
        $(function () {
            $("#btnRegister").hover(
                function () { //mouse over
                    $(this).children('img').attr("src", "/XImages/key1.png");
                },
                function () { //mouse Out
                    $(this).children('img').attr("src", "/XImages/key.png");
                }
            )
        });
        $(function () {
            $("#cartLi").mouseenter(function () {
                $("#cartLi a img").attr("src", "/XImages/cart_completed1.png");
            });
        })
        function autocomplete(inp, arr) {
  /*the autocomplete function takes two arguments,
  the text field element and an array of possible autocompleted values:*/
  var currentFocus;
  /*execute a function when someone writes in the text field:*/
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      /*close any already open lists of autocompleted values*/
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      /*create a DIV element that will contain the items (values):*/
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      /*append the DIV element as a child of the autocomplete container:*/
      this.parentNode.appendChild(a);
      /*for each item in the array...*/
      for (i = 0; i < arr.length; i++) {
        /*check if the item starts with the same letters as the text field value:*/
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          /*create a DIV element for each matching element:*/
          b = document.createElement("DIV");
          /*make the matching letters bold:*/
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          /*insert a input field that will hold the current array item's value:*/
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          /*execute a function when someone clicks on the item value (DIV element):*/
              b.addEventListener("click", function(e) {
              /*insert the value for the autocomplete text field:*/
              inp.value = this.getElementsByTagName("input")[0].value;
              /*close the list of autocompleted values,
              (or any other open lists of autocompleted values:*/
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  /*execute a function presses a key on the keyboard:*/
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        /*If the arrow DOWN key is pressed,
        increase the currentFocus variable:*/
        currentFocus++;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 38) { //up
        /*If the arrow UP key is pressed,
        decrease the currentFocus variable:*/
        currentFocus--;
        /*and and make the current item more visible:*/
        addActive(x);
      } else if (e.keyCode == 13) {
        /*If the ENTER key is pressed, prevent the form from being submitted,*/
        e.preventDefault();
        if (currentFocus > -1) {
          /*and simulate a click on the "active" item:*/
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    /*a function to classify an item as "active":*/
    if (!x) return false;
    /*start by removing the "active" class on all items:*/
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    /*add class "autocomplete-active":*/
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    /*a function to remove the "active" class from all autocomplete items:*/
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    /*close all autocomplete lists in the document,
    except the one passed as an argument:*/
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
          x[i].parentNode.removeChild(x[i]);
          document.getElementById("inpSearch").style.borderRadius = '1em';
    }
  }
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
    closeAllLists(e.target);
});
}
    </script>
</head>
<body>
    <main>
        <div id="container3">
            <div id="container2">
                <div id="container1">
                    <div id="col1">

                    </div>
                    <div id="col2" style="padding-bottom: 20%">
                        <div id="searchform">
                            <center style="height: 100%">
                                <div id="searchContainer">

                                    <input oninput="autocompl()" autocomplete="off" name="inpSearch" id="inpSearch" type="text" spellcheck="true" placeholder="Search here..." />
                                    <div class="close-btn">&times;</div>

                                </div>
                            </center>
                        </div>
                        <ul id="tm">
                            <li>
                                <a id="btnHome" href="/" role="link" title="Home">
                                    <img src="/XImages/home-512.png" alt="home1.png" />
                                    <span>Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="/Home/CreateAGroceryList" id="btnTypeGrocery">
                                    <img src="/XImages/grocery1.png" alt="grocery.png" />
                                    <span>Type Grocery List</span>
                                </a>
                            </li>
                            <li class="menuItem" id="shopOnline">
                                <a href="/Home/Browse" id="btnShopOnline">
                                    <img src="/XImages/shope_online0.png" alt="shop.png" />
                                    <span>Shop Online</span>
                                </a>
                            </li>
                            <li id="deliveryDate">
                                <a href="/Home/SetDeliveryDate" id="btnDeliveryDate">
                                    <img src="/XImages/Delivery0.png" alt="setDelivery.png" />
                                    <span>Set Delivery Date</span>
                                </a>
                            </li>
                            <li id="registerLi">
                                <a href="/Account/Login" id="btnRegister">
                                    <img src="/ximages/key.png" alt="register.png" />
                                    <span>Login / Register</span>

                                </a>
                            </li>
                            <li id="cartLi">
                                <a href="/ShoppingCart/Index" id="btnCart">
                                    <img src="/XImages/cart_completed.png" alt="cart_completed1.png" />
                                    <span>My Cart</span>
                                </a>
                            </li>
                        </ul>
                        <div class="cart-skeleton">
                            <ul></ul>
                        </div>
                        <div class="confirmItemCart">
                            <span id="successAdd">
                            </span>
                        </div>


<head>
    <link href="/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<h2>Register.</h2>

<form action="/Account/Register" class="form-horizontal" method="post" role="form"><input name="__RequestVerificationToken" type="hidden" value="v-TIoGZc6-uiriXgcE8LdYbIMVzhS8jz958inhO79PG5LPHYBZts90rmCXzMtubHwj7fnjxfI5q_feAbprCOy_uSX7qtk9ZxYhNVVH_n-j41" />    <div class="col-md-10 col-md-offset-2">
        <div class="card card-body bg-light">
            <table class="table table-bordered">
                <thead>
                    <tr class="table-success">
                        <td colspan="2">
                            New User Registeration
                        </td>
                    </tr>
                </thead>
                <div class="validation-summary-valid text-danger" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div>
                <tbody>
                    <tr>
                        <td>
                            <label for="Email">Email</label>
                        </td>
                        <td>
                            <input data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="The Email field is required." id="txtEmail" name="Email" placeholder="Email" type="text" value="" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="Password">Password</label>
                        </td>
                        <td>
                            <input data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password field is required." id="txtPassword" name="Password" placeholder="Password" type="text" value="" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <label for="ConfirmPassword">Confirm password</label>
                        </td>
                        <td>
                            <input data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" id="txtConfirmPassword" name="ConfirmPassword" placeholder="Confirm Password" type="text" value="" />
                        </td>
                    </tr>
                    <tr class="table-success">
                        <td colspan="2">
                            <input id="btnRegister" class="btn btn-success" type="button" value="Register" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="modal fade" tabindex="-1" id="successModal" data-keyboard="false" data-backdrop="static">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                &times;
                            </button>
                            <h4>Success</h4>
                        </div>
                        <div class="modal-body">
                            <h2>Registration Successful!</h2>
                        </div>
                        <div class="modal-footer">
                            <button type="button" data-dismiss="modal" class="btn btn-success">
                                Close
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form><script src="/Scripts/bootstrap.min.js"></script>
<script type="text/javascript">
    //if (!window.jQuery) {
    //    alert("no jQuery");
    //}
    //else {
    //    alert("jQuery");
    //}

    $(document).ready(function () {
        $('#btnRegister').click(function () {
            $('#successModal').modal('show');
        })
    });
</script>


                    </div>
                    <div id="col3">
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <p>&copy; 2019 - BabagmallLocal.Co</p>
    </footer>
</body>
<script type="text/javascript">
    function autocompl() {
        $.post("/Home/ItemList",
            function (data) {
                //successful requests get here
                if (!(JSON.stringify(Response.data) == '{}')) {
                    autocomplete(document.getElementById("inpSearch"), data)
                    $("#inpSearch").css("border-radius", "1em 1em 0 0")
                }
            }
        )
    }
</script>

</html>