-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
137 lines (124 loc) · 5.78 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
<!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" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Dinner Genie</title>
<style>
body {
background-color: #2e1678;
}
</style>
<link rel="stylesheet" href="./assets/css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon-32x32.png" />
<script src="https://kit.fontawesome.com/0e0d24c254.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header" class="container">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="col-span-1">
<img id="“logo”" src="./assets/images/dinnergenie.png" alt="“Dinner" Genie logo.“ />
</div>
<div>
<img id="“tagline”" src="./assets/images/MakeWishes.png" alt="“Make" Your Dinner Wishes Come True!“ />
</div>
</div>
</div>
<div id="main" class="container">
<div class="grid grid-cols-1 md:grid-cols-2">
<div class="col-span-1 flex items-center justify-center bg-cover bg-center"
style="background-image: url('./assets/images/textbox.png')">
<p><span class="tooltip fa-sharp fa-solid fa-wand-magic-sparkles"
title="Press ADD after each ingredient. Press SUBMIT after entering all three."></span></p>
<div>
<input
class="w-4/5 flex-auto px-2 py-2 leading-tight text-gray-700 bg-gray-100 rounded-md border border-gray-400 focus:outline-none focus:bg-white focus:border-blue-500"
id="user-input" id="user-input" placeholder="Type Ingredient Here" />
<button
class="bg-pink-400 flex-auto text-white font-bold py-1 px-1 rounded active:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-300 hover:bg-pink-600"
id="add">
add
</button>
<br />
</div>
<div id="warning"></div>
<div class="bg-amber-400 text-white font-bold rounded-md hover:bg-amber-600 focus:ring focus:ring-amber-200 static inset-x-0 bottom-0" id="badges"><br /></div>
<div>
<button id="wand-btn">
<i
class="fa-sharp fa-solid fa-wand-magic-sparkles bg-violet-400 w-3/4 flex-auto text-white font-bold py-1 px-1 rounded active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 hover:bg-pink-600">
Submit</i>
</button>
</div>
</div>
<div>
<img id="“tagline”" src="./assets/images/genie.png" alt="“Genie" holding a dinner plate.“ />
</div>
</div>
</div>
<div id="recipes" class="container">
<div class="grid grid-cols-1 md:grid-cols-3">
<div id="recipe-1" class="col-span-1 bg-cover bg-center"
style="background-image: url('./assets/images/recipecolumn.png')">
<div class="recipe-content"></div>
<img id="“logo”" src="./assets/images/wish1.png" alt="Wish 1" Genie.“ />
</div>
<div id="recipe-2" class="col-span-1 bg-cover bg-center"
style="background-image: url('./assets/images/recipecolumn.png')">
<div class="recipe-content"></div>
<img id="“logo”" src="./assets/images/wish2.png" alt="“Wish 2" Genie.“ />
</div>
<div id="recipe-3" class="col-span-1 bg-cover bg-center"
style="background-image: url('./assets/images/recipecolumn.png')">
<div class="recipe-content"></div>
<img id="“logo”" src="./assets/images/wish3.png" alt="Wish 3" Genie.“ />
</div>
</div>
</div>
<div id="lamp" class="container">
<div class="grid grid-cols-1 md:grid-cols-1">
<div>
<img id="“tagline”" class="getRandomCocktail" src="./assets/images/lamp.png" alt="“Lamp" says triple click for a
surprise.“ />
</div>
</div>
</div>
<div class="flex items-center justify-center"></div>
<div id="cocktailModal"
class="hidden fixed top-20 left-20 w-fit h-fit bg-opacity-50 bg-purple-300 z-50 p-4 m-4 border-8 border-x-orange-500 border-y-orange-700 flex items-center justify-center">
<div>
<div class="bg-amber-400 p-4 max-w-lg mx-auto">
<div>
<img src="./assets/images/cocktail.png" alt="Surprise Cocktail Pairing" />
</div>
<h2 class="text-xl text-center text-bold" id="cocktailName"></h2>
<h3>Ingredients:</h3>
<ul class="list-style-type: decimal;" id="ingredientsList"></ul>
<h3>Instructions:</h3>
<p id="instructions" class="mb"><br /></p>
<button
class="bg-pink-400 flex-auto text-white font-bold py-1 px-1 rounded active:bg-pink-700 focus:outline-none focus:ring focus:ring-pink-300 hover:bg-pink-600"
id="closeModal">
Close
</button>
</div>
</div>
</div>
<div id="footer" class="bg-cover bg-center py-24" style="background-image: url('./assets/images/footer.png');">
<nav class="text-center">
<a href="#top" class="inline-block bg-indigo-500 text-white font-bold px-6 py-3 rounded-lg hover:bg-indigo-800 mt-8">Back to Top</a>
<p class="inline-block bg-indigo-500 text-white font-bold px-6 py-3 rounded-lg mt-8">
© 2023 Dinner Genie Inc. All rights reserved.</p>
<a href="https://github.com/LandyWandy/Dinner-Genie" class="inline-block bg-indigo-500 text-white font-bold px-6 py-3 rounded-lg hover:bg-indigo-800 mt-8">Github</a>
</nav>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./assets/js/script.js"></script>
</body>
</html>