-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
183 lines (151 loc) · 8.62 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Quarantinis</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./config.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-orange.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body>
<div class="demo-blog mdl-layout mdl-js-layout has-drawer is-upgraded">
<div><img src="images/title-image.png" id="title" alt="title-image-quarantinis"></div>
<main class="mdl-layout__content">
<div class="demo-blog__posts mdl-grid">
<!--Instructions-->
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-cell--12-col-desktop" id="intoxicated">
<h1>Until you're inoculated, stay intoxicated!</h1>
<div id="instructions">
<p>2020 was a real cluster. We held it together only with considerable help from adult beverages. Netflix, Instacart, and Franzia kept us from losing it under lockdown with hyperactive children, pandemic puppies, and partners we'd like to get some social distance from.</p>
<p>Sidewalks became social clubs. Video chat replaced water-cooler gossip. And in cul-de-sacs across the country, driveway drinking helped parents avoid costly virtual therapy and coronadivorce. Thanks, alcohol!</p>
<p>Our app keeps the party going. Quarantine and chill to some smooth tunes from the Pandemic Player, and shelter in place with the perfect cocktail. You can search for familiar favorites or click "Random Cocktail" to try something new. Think of it as a slot machine for booze. So put on your best velour track suit, kick back in the La-Z-Boy, and raise your glass to the new year. Because it's 5 o'clock somewhere, and 2020 is over everywhere.</p>
</div>
</div>
<!-- BEGIN COCKTAIL SEARCH CARD -->
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-cell--6-col-desktop">
<div class="mdl-card__media mdl-color-text--grey-50 cocktail-pic">
</div>
<div class="mdl-card__supporting-text meta mdl-color-text--grey-600 the-one">
<div class="cocktail-buttons">
<form action="#">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label field">
<input class="mdl-textfield__input" type="text" id="cocktail-search" style="float: left;">
<label class="mdl-textfield__label" for="sample3">Search for a cocktail</label>
<button class="mdl-button mdl-js-button mdl-button--raised" id="search">
Search
</button>
</div>
<div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="random-cocktails">
Random cocktail
</button>
</div>
</form>
</div>
</div>
</div>
<!--BEGIN INGREDIENTS CARD-->
<div class="mdl-card something-else mdl-cell mdl-cell--12-col mdl-cell--6-col-desktop ingredients-card" style="position: relative;">
<button id="plus-sign" class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
<i class="material-icons mdl-color-text--white" role="presentation">add</i>
<span class="visuallyhidden">add</span>
</button>
<div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" id="ingredients">
</div>
<div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600 cocktail-name-card" style="align-self: flex-end;">
<div id="cocktail-name">Cocktail
</div>
</div>
</div>
<!--BEGIN FAVORITES-->
<div class="mdl-card something-else mdl-cell mdl-cell--12-col mdl-cell--5-col-desktop favorite-corners">
<div class="mdl-card__supporting-text meta meta--fill mdl-color-text--grey-600" id="favorites-card">
<div class="card-4-title">
<h2 class="favorite-title">Favorites</h2>
</div>
</div>
<div class="reset-button">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="reset">
Clear Favorites
</button>
</div>
<div class="mdl-card__media mdl-color--white mdl-color-text--grey-600" id="favorites">
</div>
</div>
<!--BEGIN COCKTAIL RECIPE CARD-->
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-cell--7-col-desktop">
<div class="mdl-card__media mdl-color-text--grey-50" id="recipe">
<h2>Cocktail Recipe</h2>
</div>
<div class="mdl-card__supporting-text meta mdl-color-text--grey-600 recipe">
</div>
</div>
<!--BEGIN PANDEMIC PLAYER-->
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-cell--12-col-desktop" style="min-height: 0px">
<div class="mdl-card__media mdl-color-text--grey-50 pandemic">
<h2>Pandemic Player</h2>
</div>
</div>
<!--YouTube Buttons-->
<div class="mdl-card mdl-cell mdl-cell--10-col mdl-cell--5-col-desktop music">
<button class="mdl-button mdl-js-button mdl-button--raised music-button" id="jazz" data-name="jazz" style="background-color: #ffb308;">
jazz
</button>
<button class="mdl-button mdl-js-button mdl-button--raised music-button" id="christmas" data-name="christmas-cafe" style="background-color: #ffb308;">
Christmas cafe
</button>
</div>
<div class="mdl-card mdl-cell mdl-cell--10-col mdl-cell--5-col-desktop music">
<button class="mdl-button mdl-js-button mdl-button--raised music-button" id="bossa" data-name="italian-bossa" style="background-color: #ffb308;">
Italian bossa
</button>
<button class="mdl-button mdl-js-button mdl-button--raised music-button" id="Instrumental" data-name="ibizachill" style="background-color: #ffb308;">
Instrumental
</button>
</div>
<!--Embedded video screen-->
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-cell--12-col-desktop" id="youtube">
<iframe
id="player"
type="text/html"
width="400"
height="300"
frameborder="0"
allow="autoplay">
</iframe>
</div>
</div>
<!--FOOTER-->
<footer class="mdl-mini-footer">Disclaimer: Drink responsibly. If you choose to enjoy a quarantini or three during a work-related Zoom meeting (and we wholeheartedly encourage day drinking), keep your fly zipped at all times. Quarantinis accepts no responsibility for anything you might say or do while you think you're off camera or on mute.
</footer>
</main>
</div>
</body>
</html>