forked from isayani/cocktail-music-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
148 lines (132 loc) · 7.17 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
<!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">
<title>Mix & Match: Cocktail and Music Generator</title>
<link rel="stylesheet" href="./assets/css/reset.css">
<!-- Font-Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap">
<!-- Tailwind CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- Landing Page -->
<main class="md:container md:mx-auto h-screen w-screen text-center flex justify-center content-center items-center">
<div class="ageModal space-y-2 sm:p-2 space-y-4 w-1/2">
<h1
id="landingHeader"
class="italic text-white font-bold text-3xl text-center sm:text-5xl md:text-6xl">
Mix & Match
</h1>
<p class="text-white text-lg italic sm:text-xl">
Let us decide the details of your evening, so you can relax. Click
below for a streamlined recommendation of unique cocktail recipe and
music video to match. Enjoy effortlessly, and drink responsibly.
</p>
<!-- Button trigger modal -->
<button
id="mixmatch"
class="mmbutton text-white rounded shadow-md hover:bg-orange-700 hover:shadow-lg focus:bg-orange-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-orange-700 active:shadow-lg transition duration-150 ease-in-out font-bold p-1 px-2 text-xl sm:p-3 sm:text-4xl md:px-8"
data-ripple-light="true"
data-bs-toggle="modal"
data-bs-target="#ageModal">
MATCH MY MIX!
</button>
<!-- Modal -->
<div
class="modal fade fixed top-0 left-0 hidden w-full h-full outline-none overflow-x-hidden overflow-y-auto"
id="ageModal"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="ageModalLabel"
aria-hidden="true">
<div
class="modal-dialog relative w-auto pointer-events-none flex sm:flex-row">
<img class="w-full max-w-sm sm:h-auto sm:w-48 hide" src="./assets/images/Art-deco-cocktail-design .jpg" alt="Art Deco Martini Cocktail Graphic">
<div
class="modal-content border-none shadow-lg relative flex flex-col w-full pointer-events-auto cream bg-clip-padding outline-none text-current">
<div
class="modal-header flex flex-shrink-0 items-center justify-between p-4">
</div>
<div class="modal-body relative p-4">
<h5
class="mt-8 pb-2 text-xl font-medium leading-normal text-gray-800"
id="ageModalLabel">
You must be 21+ to enter.
</h5>
<!-- Date picker -->
<div class="flex items-center justify-center">
<div
class="datepicker relative form-floating mb-3 xl:w-96"
data-mdb-toggle-button="false">
<input
id="dateInput"
type="text"
class="mb-3 form-control block w-full px-3 py-1.5 text-base font-normal text-black-700 bg-white bg-clip-padding border border-solid border-emerald-900 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-emerald-800 focus:outline"
placeholder="Enter your birthday"
data-mdb-toggle="datepicker"/>
<label for="floatingInput" class="text-gray-700"
>Enter your birthday</label>
<button type="button"
id="verifyBtn"
class="inline-block px-6 py-2.5 text-white font-medium text-xs leading-tight uppercase rounded transition duration-150 ease-in-out ml-1" data-bs-dismiss="modal">Verify</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Input Card -->
<div id="alcToggle" class="inputCard h-screen flex items-center justify-center p-12 py-6">
<div class="flex flex-col items-center cream shadow-md md:flex-row md:max-w-xl dark:border-gray-700 dark:bg-gray-800">
<!-- Type of Alcohol Container -->
<div class="mx-auto md:mx-0 flex flex-col justify-between p-4 leading-normal ml-7">
<p class="mt-2 max-w-[20rem] text-lg text-gray-700 dark:text-gray-400 mb-2 text-center">Choose Your Alcohol Type:</p>
<div class="relative inline-flex">
<!-- Down Arrow Selection Icon -->
<svg
class="w-2 h-2 absolute top-0 right-0 m-4 pointer-events-none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 412 232">
<path
d="M206 171.144L42.678 7.822c-9.763-9.763-25.592-9.763-35.355 0-9.763 9.764-9.763 25.592 0 35.355l181 181c4.88 4.882 11.279 7.323 17.677 7.323s12.796-2.441 17.678-7.322l181-181c9.763-9.764 9.763-25.592 0-35.355-9.763-9.763-25.592-9.763-35.355 0L206 171.144z"
fill="#648299"
fill-rule="nonzero"/>
</svg>
<!-- Alcohol Choices From JS file -->
<select class="border border-gray-300 rounded text-gray-400 h-10 pl-5 pr-40 bg-white hover:border-gray-400 focus:outline-none appearance-none" id="userInput">
<option disabled selected hidden>Type of Alcohol</option>
<option>Vodka</option>
<option>Whiskey</option>
<option>Wine</option>
<option>Absinthe</option>
<option>Gin</option>
<option>Rum</option>
<option>Tequila</option>
<option>Scotch</option>
<option>Bourbon</option>
<option>Brandy</option>
</select>
</div>
<button class="flex flex-col text-white py-2 px-4 rounded items-center mt-2" id="submit">Match My Mix!</button>
</div>
<img class="w-full max-w-sm md:h-auto md:w-48" src="./assets/images/fc9d8f7f3ccee71121535ef224062ec8.jpg" alt="Art Deco Cocktail Drink and Mixer">
</div>
</div>
</main>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Tailwind Elements -->
<script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
<!-- Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>