forked from WhatShouldIBring/ProjectFive
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (106 loc) · 5.33 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>What Should I Bring?</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Francois+One|Lato" rel="stylesheet">
<link rel="stylesheet" href="public/styles/style.css">
<meta name="viewport" content="initial-scale=1.0" user-scalable="no">
<meta charset="utf-8">
<!-- <link rel="icon" href="../../dev/assets/favicon-96x96.ico" type="image/x-icon"> -->
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<!-- <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> -->
<!-- Built by Talia Harrison-Marcassa, Alex Ghattas, and Jessica Del Grande as part of the HackerYou Front-End Web Development Intensive. -->
<!-- Background image generously provided by Nick Ghattas http://www.nickghattasphotography.com/. Favicon by Innocent Sibanda for The Noun Project. -->
</head>
<body>
<header>
<section class="header__placemat">
<div class="infoTextContainer">
<button class="infoTextButton">
<i class="fa fa-glass" aria-hidden="true"></i>
</button>
<div class="infoText">
Built by <a href="http://www.jessicadelgrande.com" target="blank">Jessica Del Grande</a>, <a href="http://www.talialongname.com" target="blank">Talia Harrison-Marcassa</a> and <a href="http://www.alexghattas.com" target="blank">Alex Ghattas</a> using <a href="https://lcboapi.com/" target="blank">LCBO API</a> and <a href="https://developers.google.com/maps/documentation/javascript/" target="blank">Google Maps API</a>. Background image provided by <a href="http://www.nickghattasphotography.com" target="blank">Nick Ghattas</a> and icon's by <a href="https://thenounproject.com/" target="blank">The Noun Project</a>.
</div>
</div>
<div class="selectForm__wrapper">
<h1>What Should I Bring?</h1>
<p class="subhead">The app that turns you into the perfect guest</p>
<form class="userInput"> <!-- This gets hidden and shown on click -->
<div class="selectForm__lookingWrapper">
<div class="selectForm__nameWrapper">
<p>I am looking for</p>
<select class="dropdown" name="alcoholType" id="alcoholType">
<option data-filterParam="Beer" value="Beer" id="Beer">beer & cider</option>
<option data-filterParam="Wine" value="Wine" id="Wine">wine</option>
<option data-filterParam="Spirits" value="Spirits" id="Spirits">spirits</option>
<option data-filterParam="Ready-to-Drink/Coolers" value="coolers" id="coolers">coolers</option>
</select>
</div>
<div class="selectForm__nameWrapper">
<p>for</p>
<select class="dropdown" name="occasion" id="occasion">
<!-- value corresponds to name of objects in js file -->
<option value="tuesday">a Tuesday</option>
<option value="anniversary">an anniversary</option>
<option value="surprise">a surprise party</option>
<option value="meetingParents">meeting the parents</option>
<option value="potluck">a potluck</option>
<option value="dinnerBoss">dinner with your boss</option>
<option value="sorryGift">saying "I'm sorry"</option>
<option value="netflixSpill">Netflix and chill</option>
<option value="gameNight">games night</option>
<option value="holidayParty">a holiday party</option>
<option value="present">a hostess gift</option>
</select>
</div>
</div>
<div class="selectForm__nameWrapper">
<p>I have</p>
<select class="dropdown" name="budget" id="budget">
<option value="low">$</option>
<option value="medium">$$</option>
<option value="high">$$$</option>
</select>
<p>to spend.</p>
</div>
<input class="button" type="submit" value="Gift Me!" id="giftMe">
</form><!-- end .userInput -->
</div><!-- end .selectForm__wrapper -->
<div class="animation">
<img src="assets/bottle.png" alt="">
</div>
</section><!-- end .header__placemat -->
</header>
<section class="alcoholResults">
<form action="" class="results"> <!-- this will be hidden and show -->
<div class="resultsShow">
<!-- Results go here using jquery -->
</div>
<div class="alcoholResults__button--container">
<input type="submit" value="Where can I buy?" id="confirm">
<input type="submit" value="I'd like something different" id="newSelection">
</div>
</form>
</section><!-- end .alcoholResults -->
<section class="mapContainer">
<div class="zoomOut">
<p class="justify"><a id="closeZoom" href="#"><i class="fa fa-times" aria-hidden="true"></i></a></p>
<p>Zoom out for more results!</p>
</div>
<div id="map">
<!-- Google map goes here -->
</div>
</section>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://npmcdn.com/js-offcanvas@1.0/dist/_js/js-offcanvas.pkgd.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVbEW4i2vR1wWs403_TdJ_PVRFeOUwd20&libraries=places"></script>
<script src="dev/scripts/main.js"></script>
<!-- end scripts -->
</body>
</html>