-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (106 loc) · 4.12 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>
<head>
<title>Liquorcabinet</title>
<!-- make this site look good -->
<link rel="stylesheet" href="assets/scss/main.css">
<!-- make this site functional -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB3KHIJBh5My_KKUHutu0R3U7mo3ad6Fvs"
async defer></script>
<script src="assets/js/mustache.js"></script>
<script src="assets/js/lcbo.js"></script>
</head>
<body>
<h1 class="introduction">
Liquorcabinet
</h1>
<p class="introduction__prompt">What are you drinking tonight?</p>
<div class="firebase">
<div class="firebase__ticker" data-name="name" data-active="0">
<div class="firebase__ticker__flipper">
<span class="firebase__ticker__flipper__front"></span>
<span class="firebase__ticker__flipper__back"></span>
</div>
</div>
<p class="firebase__base"> from </p>
<div class="firebase__ticker" data-name="city" data-active="0">
<div class="firebase__ticker__flipper">
<span class="firebase__ticker__flipper__front"></span>
<span class="firebase__ticker__flipper__back"></span>
</div>
</div>
<p class="firebase__base"> is looking for </p>
<div class="firebase__ticker" data-name="drink" data-active="0">
<div class="firebase__ticker__flipper">
<span class="firebase__ticker__flipper__front"></span>
<span class="firebase__ticker__flipper__back"></span>
</div>
</div>
<p class="firebase__base"> in their cabinet.</p>
</div>
<!-- <div class="location"></div> -->
<header class="find cf">
<div class="locations cf">
<button class="loc loc--active">
<!-- <i class="loc__i"></i> -->
<span class="loc__id">
<p class="loc__name">Loading Store 1...</p>
<p class="loc__hours loc__hours--time">Loading Store Hours...</p>
</span>
</button>
<button class="loc">
<!-- <i class="loc__i"></i> -->
<span class="loc__id">
<p class="loc__name">Loading Store 2...</p>
<p class="loc__hours loc__hours--no-time">Loading Store Hours...</p>
</span>
</button>
<button class="loc">
<span class="loc__id">
<p class="loc__name">Loading Store 3...</p>
<p class="loc__hours loc__hours--time">Loading Store Hours...</p>
</span>
</button>
</div>
<div class="search">
<form class="search__form" id="alcoholSearch">
<p class="search__form__opening">I'm looking </p>
<select class="search__form__option find__option">
<option value="budget">to save money</option>
<option value="money">for a gift</option>
<option value="fresh">for something fresh</option>
<option value="decimated">to be a liability</option>
</select>
<p class="search__form__opening"> find me some </p>
<input type="text" class="search__form__field" id="searchProduct" autocomplete="off">
<input type="submit" class="find__submit" value="Get Drinks">
</form>
</div>
</header>
<div class="drinks cf"></div>
<button class="paginate"></button>
<script id="drinkTemplate" type="text/template">
{{#resultArray}}
<article class="beverage">
<p class="beverage__name">{{ name }}</p>
<div class="beverage__statistics">
<span class="beverage__statistic">
<p class="beverage__statistic__number">${{price}} <span class="beverage__savings">{{#saveLogic}}(${{savings}}){{/saveLogic}}</span></p>
<p class="beverage__statistic__cat">Price (CAD)</p>
</span>
<span class="beverage__statistic">
<p class="beverage__statistic__number">{{units}}</p>
<p class="beverage__statistic__cat">{{ package }}</p>
</span>
<span class="beverage__statistic">
<p class="beverage__statistic__number">{{ content }}</p>
<p class="beverage__statistic__cat">ABV</p>
</span>
</div>
</article>
{{/resultArray}}
</script>
</body>
</html>