-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
79 lines (79 loc) · 3.72 KB
/
index.html
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
<!doctype html>
<html class="no-js" 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" />
<title>Your Fridge & Your Bar</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<link rel="stylesheet" href= "./assets/styles/styles.css" />
</head>
<body>
<!-- Nav Bar -->
<div class="top-bar topbar-center-logo" id="topbar-center-logo">
<div class="top-bar-left">
<ul class="menu vertical medium-horizontal">
<li><a href="index.html">Home</a></li>
<li><a href="favorite.html">Favorites</a></li>
<li><a href="cocktail.html">Drinks</a></li>
<!-- START OF MODAL -->
<button class="button secondary" data-open="info-modal">How to use this page.</button>
<div id="info-modal" class="reveal-modal reveal" aria-labelledby="modalTitle" aria-hidden="true" role="dialog" data-reveal>
<h2 id="modalTitle">Happy Cooking!</h2>
<p class="lead">Enter ingredients from your fridge into the form to generate related recipes.</p>
<p>We specialize in specialties, you can set the parameters for special diet restrictions to get 5 results related to you.</p>
<p>On the drinks tab click "Get Cocktail" to pair a drink with your food! Then you can save your favorites!</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- END OF MODAL -->
</ul>
</div>
</div>
<div class="hero-full-screen">
<div class="middle-content-section">
<h1>Your BF (Bar & Fridge)</h1>
<p>In a world where take-out options are endless but can be expensive, sometimes we just want a nice, homemade
meal to satisfy our stomachs.
Even then, we can struggle to find the perfect recipe for the ingredients readily available in our
refrigerator.
Let us help! Enter what you have available in your fridge, and we will give you a recipe you can make at home!
</p>
<div>
<h2>Want to try a new cocktail to go along with your meal? Click the cocktail button to generate a random drink!
</h2>
</div>
<form id="search-form">
<div class="foodContainer">
<fieldset class="fieldset">
<legend>Allergies / Diet Type</legend>
<input name="health[]" id="vegancheck" type="checkbox" value="vegan"><label for="vegancheck">Vegan</label>
<input name="health[]" id="gfcheck" type="checkbox" value="gluten"><label for="gfcheck">Gluten-Free</label>
<input name="health[]" id="vegcheck" type="checkbox" value="vegetarian"><label for="vegcheck">Vegetarian</label>
<input name="health[]" id="ketocheck" type="checkbox" value="keto"><label for="ketocheck">Keto</label>
</fieldset>
<div class="input-group">
<span class="input-group-label">Enter an ingredient.</span>
<input class="input-group-field middle" type="text" id="user-input">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</div>
</form>
<div class="grid-x" id="recipe-card">
</div>
<div class="container">
<a class="button warning small-only-expanded" href="cocktail.html">Click here for a cocktail pairing!</a>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" crossorigin="anonymous"></script>
<script>
$(document).foundation();
</script>
<script src="./assets/js/logic.js"></script>
</body>
</html>