crave/search.html at master · Nicholas-Lin/crave · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!--
File Name: search.html
Author: Nicholas Lin
Date: 3/8/20
Description: Search results page of web app
-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- For Rating Stars CSS -->
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="styleSheet">

    <!-- BootStrap Dependencies -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

    <!-- Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- Custom styles for this page -->
    <link href="./assets/css/style.css" rel="stylesheet">
</head>

<body>

    <div class="container-fluid h-100 ">
        <div class="row justify-content-center h-100">
            <div class="h-100 d-flex flex-column col-md-12">
                <div class="row ">
                    <header id="results-summary" class="header ">Loading your next Adventure...</header>
                    <!--Toggle input for displaying only open businesses-->
                    <div class="col-md-2" style="align-items: center; display: flex; justify-content: flex-start;">
                        <div class="btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-checked font-weight-bold active" data-toggle="tooltip" data-placement="top"
                            title="Find businesses that are open now" >
                              <input id="open-checkbox" type="checkbox" checked autocomplete="off"> Open Now
                            </label>
                          </div>
                    </div>

                    <!--Button to load more results-->
                    <div id=more-results class="col-md-3"
                        style="align-items: center; display: flex; justify-content: flex-end;">
                        <button class="btn btn-conf-3 btn-blue font-weight-bold" tabindex="-1" role="button">
                            Show Me More!
                        </button>
                    </div>

                    <!--Radio buttons for additional search preferences-->
                    <div class="col-md-4">
                        <h5 class="font-weight-bold"> Search By: </h5>
                        <div id="sortby" class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-secondary active" data-toggle="tooltip" data-placement="top"
                                title="Sort by best match">
                                <input type="radio" name="options" id="best_match" autocomplete="off" checked> Best
                                Match
                            </label>
                            <label class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
                                title="Sort by a combination of rating and number of reviews">
                                <input type="radio" name="options" id="rating" autocomplete="off"> Highest Rating
                            </label>
                            <label class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
                                title="Sort by distance">
                                <input type="radio" name="options" id="distance" autocomplete="off"> Distance
                            </label>
                            <label class="btn btn-secondary" data-toggle="tooltip" data-placement="top"
                                title="Sort by the number of reviews">
                                <input type="radio" name="options" id="review_count" autocomplete="off"> Most Reviews
                            </label>
                        </div>
                    </div>

                    <!--Button for making another search-->
                    <div class="col-md-3" style="align-items: center; display: flex; justify-content: flex-end;">
                        <a href="./index.html" class="btn btn-conf-3 btn-blue font-weight-bold" tabindex="-1" role="button">
                            Discover Another Experience
                        </a>
                    </div>
                </div>

                <!--Row for displaying results-->
                <div class="row flex-grow-1">
                    <!--List of search results-->
                    <div id= "results-col" class="col-md-5" data-toggle="tooltip" data-placement="top"
                    title="Scroll and click on an item to see it on the map">
                        <div class="scroll-container">
                            <ul id="main-list" class="list-group border" >
                                <!--Javascript generates a list of businesses here-->
                            </ul>
                        </div>
                    </div>
                    <!--Google Map with plotted merchants-->
                    <div class="col-md-7">
                        <div id="map"></div>
                    </div>
                </div>
                <div class="row ">
                    <footer class = "footer" >Created by <a href="www.linkedin.com/in/nlin10" style = "color:white;"> Nicholas Lin. </a> Powered by <a
                        href="https://www.yelp.com/developers" style = "color:white;"> Yelp's Fusion API. </a></footer>
                </div>
            </div>
        </div>
    </div>

    <script src="./assets/js/search.js"></script>
    <script src="./assets/js/search-jquery.js" ></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDBXKeIPL8przIRziEutJMF2tggdNhI5UE&callback=initMap"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>