Cocktail-Search/index.html at main · pandersail/Cocktail-Search · 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
<!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">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <!-- bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
  <!-- font awesome -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <!-- our stylesheet -->
  <link rel="stylesheet" href="./assets/css/style.css">
  <title>Cocktail-Mix</title>
</head>

<body>
<!-- age confirm modal
<div class="modalAge" id="agepopup">
  <h4>
    The contents of this site pertain to the preperation of alcoholic beverages.
    ONLY ENTER IF YOU ARE 18 AND ABOVE !!!!!!!
  </h4>
  <p>Please enter your date of birth:</p>
  <input type="date" id="date-input">
  <button id="confirm-age"> Submit </button>
</div>  -->

  <!-- nav bar with icon-->
  <nav class="navbar bg-body-tertiary" class="jumbotron">
    <div class="container-fluid">
      <a class="navbar-brand" class="header" href="#">

        <h1>
          <img src="./assets/images/cocktail.png" alt="Logo" width="30" height="24"
            class="d-inline-block align-text-top">
          Cocktail-Mix
        </h1>
      </a>
    </div>
  </nav>

  <!--Hero image-->
  <figure>
    <img src="./assets/images/barman.jpg" class="img-fluid" alt="man standing before prepared cocktails">
  </figure>

  <!--Search & Result-->
  <main>
    <section class="search">
      <nav class="navbar bg-body-tertiary">
        <div class="container-fluid">
          <h3 class="navbar-brand mb-0 h1">Cocktail Search</h3>
          <!-- instructions modal trigger button -->
          <button type="button" class="instructions-open">
            <i class="fa fa-solid fa-question"></i></button>
        </div>
      </nav>

      <!-- how it works modal -->
     <div id="how-it-works" class="hide">
      <h4>How our Search Works: </h4>
      <p>Welcome to Cocktail Mix, here you can find a whole world of
      cocktail recipes. There are three ways to search:
      </p>
      <ol>
        <li><span class="font-weight-bold">By Name:</span>
          Know exactly what you're looking for, or only remember on word from the name? Great!
          Put in the name or word, and we'll shake up a recipe for you!</li>
        <li><span class="font-weight-bold">By Ingredient and Category:</span>
           You can find any cocktail that is a particular type of drink
          <em>and</em> has your favourite ingredient!</li>
        <li><span class="font-weight-bold">Random:</span>
           Feeling a bit overwhelmed by the possibilities? Hit the random button!</li>
      </ol>
      <p class="font-weight-bold">Can I save a recipe for later?</p>
      <p>Yes! press the little heart next to a cocktail to add it to
        your favourites bar. You can store up to 5 cocktails.
      </p>
     <button class="instructions-close">Got It</button>
     </div>

      <div class="search-area">
        <div class="name-search-set">
          <span><strong>Name</span></strong>
          <br><input type="text" class="form-control" id="search-box-name" placeholder="Name of the cocktail" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="ingredient-search-set"></div>
          <span><strong>Ingredient</span></strong>
          <br><input type="text" class="form-control" id="search-box-ingredient" placeholder="Name one ingredient" aria-label="Username" aria-describedby="basic-addon1">
        </div>
      </div>
    </div>


      <label for="search-box-category"><strong>By category</strong></label>
      <br><select id="search-box-category" name="name of drink" class="category">
        <option value="">Select Option</option>

        <option value="Cocktail">Cocktail</option>
        <option value="Shot">Shot</option>
        <option value="Punch / Party Drink">Punch / Party Drink</option>
        <option value="Ordinary_Drink">Ordinary Drink</option>
        <option value="Beer">Beers</option>
        <option value="Soft_Drink">Soft Drink</option>
        <option value="Other / Unknown">Other / Unknown</option>
      </select>

      <br><label for="number-input"><strong>Number of Results</strong></label>
      <br><input type="number" id="number-input" name="number-input" placeholder="3"
       value="3" min="1" max="5" step="1" class="form-control"
       aria-label="Username" aria-describedby="basic-addon1" required/>

       <!-- warning message -->
       <p class="hide text-white" id="no-search-warning">Please enter at least one search parameter</p>
     <!-- buttons bar -->
    <div id="buttons">
      <br><button type="button" class="submit-btn">Shake
       <!-- <img src="./assets/images/shaker.gif" class="btn btn-outline-primary"> -->
      </button>
      <button type="button" class="random">Random
      <!-- <img src="./assets/images/random.gif" class="btn btn-outline-primary"> -->
      </button>
      <button type="button" class="clear-results">Clear Results
      </button>
      <button type="button" class="clear-favourites">Clear Favourites
      </button>
  </div>
    </section>

    <section id="favourites-bar"></section>

    <section class="results">
      <nav class="navbar bg-body-tertiary">
        <div class="container-fluid">
          <h3 class="visibility" class="navbar-brand mb-0 h1">Results</h3>
        </div>
      </nav>
    </section>
  </main>

  <footer>
    <!-- to include icons or text with href, GitHub, Contact...-->
    <div class="container my-5">

  <footer class="row-footer" style="background-color: #8c80e57c;">
  <div class="container p-4">
    <div >
        <h3 class="mb-3" style="letter-spacing: 2px; color: #c0fc51;">Cocktail-Mix</h3>
        <p>
          Welcome to Cocktail-Mix, the cocktail generator app with an underground vibe. Say goodbye to boring drinks and hello to a world of endless possibilities. Our app is designed for cocktail lovers who are looking for something new and exciting to add to their repertoire.

<br><br>A great cocktail is more than just a drink – it's an experience. Our app provides a curated selection of handcrafted cocktails from top mixologists, all inspired by the speakeasy and underground bar scene. Each recipe is carefully crafted to ensure that you're getting the best possible combination of flavors and ingredients. Our user-friendly interface makes it easy for you to find the perfect drink for any occasion.

<br><br>Whether you're hosting a dinner party, impressing your date, or just looking for a new twist on an old classic, Cocktail-Mix is the ultimate tool for all your cocktail needs. With our app, you can bring the underground bar experience right to your own home.
        </p>

      <div>
        <h3 class="mb-3" style="letter-spacing: 2px; color: #c0fc51;">links</h3>
        <ul class="list-unstyled mb-0">
          <li class="mb-1">
            <a href="https://www.americanexpress.com/en-us/business/trends-and-insights/articles/the-dumbest-google-searches-of-all-time/" style="color: #f4e923;">Frequently Asked Questions</a>
          </li>
          <li class="mb-1">
            <a href="https://youtu.be/dQw4w9WgXcQ?t=85" style="color: #f4e923;">Where to find us</a>
          </li>
          <li class="mb-1">
            <a href="https://www.eater.com/2013/2/8/6482995/the-worlds-most-expensive-cocktail-is-now-12916" style="color: #f4e923;">Pricing</a>
          </li>
          <li>
            <a href="https://www.choice.com.au/food-and-drink/bread-cereal-and-grains/bread/review-and-compare/hot-cross-buns" style="color: #f4e923;">Reviews</a>
          </li>
        </ul>
      </div>
      <div >
        <h3 class="footer-head" style="letter-spacing: 2px; color: #c0fc51;">opening hours</h3>
        <table class="table" style="color: #f4e923; border-color: #f4e923;">
          <tbody>
            <tr>
              <td>Mon - Fri:</td>
              <td>8pm - 0am</td>
            </tr>
            <tr>
              <td>Sat - Sun:</td>
              <td>6pm - 3am</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="text-center p-3" style="background-color: rgba(208, 121, 218, 0.185);">
    © 2023 Copyright:
    <a href="https://github.com/DaisyEverard/Cocktail-Search">
      <img id="github" src="./assets/images/github-sign.png">
    </a>
  </div>
</footer>

    </div>
    <!-- End of .container -->
  </footer>

  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- moment.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
  <!-- our script -->
  <script src="./assets/js/script.js"></script>
</body>

</html>