-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (195 loc) · 10.4 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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!-- starting html code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- linking style.css to document -->
<link rel="stylesheet" href="style.css">
<!-- giving a favicon for the document -->
<link rel="icon" type="image/x-icon" href="./assets/favicon.ico">
<title>Spice Vibe</title>
</head>
<!-- starting body code -->
<body>
<!-- adding video as a background for the website -->
<video autoplay muted loop id="home" poster="./assets/background-img.png">
<source src="./assets/background-vid.mp4" type="video/mp4">
</video>
<!-- a parent div for whole website -->
<div class="parent">
<!-- syntax for navbar -->
<nav>
<div class="navbar">
<span id="nav-head"><a id="home-btn">Home</a></span>
<span id="nav-head"><a id="explore-btn">Explore</a></span>
<span id="nav-head"><a href="./about.html">About</a></span>
</div>
</nav>
<!-- a div blur, for the blur effect on background -->
<div class="blur">
<!-- main div for the first part of the website -->
<div class="main">
<!-- syntax for the main part of website -->
<div class="heading">
<span id="logo">Spice Vibe</span>
<span id="byline">A symphony of Flavours</span>
</div>
<div class="middle">
<span id="button-line">Ready to find a Meal?</span>
</div>
<!-- a div buttons, for navigation -->
<div class="buttons">
<button id="search-meal" onclick="location.href='#meal-search-info'">Spice In!</button>
<button id="meal-of-day" onclick="location.href='#meals'">Explore a Meal</button>
</div>
</div>
<!-- a div meals for searching and generating random meals -->
<div id="meals">
<!-- div for random meal generator -->
<div class="meal-gen-random">
<!-- div for heading -->
<div class="meal-gen-header">
<span id="meal-gen-header-1">Make yourself this delicious meal!</span>
<span id="meal-gen-header-2">Here's a Recipe for you!</span>
<span id="meal-gen-header-info">Click on the meal to generate its recipe!</span>
</div>
<!-- div for the randomly generated meal, code will be pushed from javascript to HTML for updating -->
<div class="meal-gen-food">
<div class="meal-gen-food-border">
<div class="meal-loading" id="meal-loading"><img src="./assets/loading.gif" alt=""></div>
<div class="meal-gen-food-img">
<img src="" alt="" id="meal-random-img">
</div>
<div class="meal-gen-food-dish">
<span id="meal-gen-food-name"></span>
</div>
</div>
<!-- div for a button for generating a new random meal -->
<div class="meal-gen-button"><button id="gen-meal"><img src="./assets/redo-icon.png" alt=""
id="redo-icon">Generate New</button></div>
</div>
</div>
<!-- div for generating meal based on search -->
<div class="meal-gen-category">
<!-- div for search area of the website -->
<div class="meal-search-area">
<span id="meal-search-info">Search for your desired category!</span>
<!-- div, input and button for searching the category of meals -->
<div class="meal-search-button">
<input type="text" id="search-input" placeholder="Search for Category" />
<button id="search-btn">
<img src="./assets/search-icon.png" alt="" id="search-icon">
</button>
</div>
<!-- information for the user to guide them -->
<span id="meal-search-info2">Search to get results!</span>
</div>
<center><span id="meal-search-info3"></span><center>
<!-- div for meal results, in here the meals will come up and will be pushed from JavaScript -->
<div class="meal-results-area">
</div>
</div>
</div>
<div class="cat-image">
<img src="./assets/cat-cooking.gif" alt="" id="cat-cook">
</div>
</div>
<!-- div for modal which will appear when clicked on a meal -->
<div id="modal">
<div class="modal-inner">
<!-- close button for the modal, so user can go back -->
<div class="modal-close-btn">
<button id="modal-close"><img src="./assets/close-icon.png" alt="" id="close-icon">Close</button>
</div>
<!-- div for content inside the modal -->
<div class="modal-content">
<!-- loading div, for loading effect such that it will load when clicked on the generate meal button -->
<div class="meal-loading for-search" id="meal-loading"><img src="./assets/loading.gif" alt=""></div>
<!-- div for left part of the modal (image) -->
<div class="modal-content-left">
<img src="" alt="" id="modal-meal-img">
</div>
<!-- div for right part of the modal (dish name, ingredients, steps, etc.) -->
<div class="modal-content-right">
<div class="modal-right-inner">
<!-- div in which all content will be updated according to the meal, from JavaScript -->
<div class="modal-inner-content">
<span id="modal-meal-name"></span>
<!-- here ingredients will be updated -->
<div class="ingredients">
<span id="modal-meal-ingredients">Ingredients :-</span>
<div class="ingredients-content">
<ul id="ul-ingredients">
<li id="li-ingredient">
<img src="" alt="" id="ingredient-img">
<span id="ingredient-name"></span>
</li>
</ul>
</div>
</div>
<!-- here instructions will be updated -->
<div class="instructions">
<span id="modal-meal-instructions">Instructions :- </span>
<div class="instructions-content">
<ul id="ul-instructions">
<li id="li-instructions">
</li>
</ul>
<!-- here a youtube video will be linked to the recipe -->
<div class="youtube">
<a href="" target="_blank" id="youtube-link">
<span id="youtube-watch">Click Here to Watch a <img
src="./assets/youtube-icon.png" alt="" id="youtube-img"> Video
for the recipe.</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer of the webpage -->
<footer>
<!-- div for top part of the footer -->
<div class="top-footer">
<div class="footer-logo">
<span id="f-logo">Spice Vibe</span>
<span id="f-byline">A symphony of Flavours</span>
</div>
<!-- div for side options to navigate across the site -->
<div class="f-sideOpt">
<span id="red-Home"><a id="footer-home">Home</a></span>
<span id="red-Explore"><a id="footer-explore">Explore</a></span>
<span id="red-MealDay"><a id="footer-random">Random Meal</a></span>
</div>
</div>
<!-- div for bottom part of the footer -->
<div class="bottom-footer">
<hr>
<span id="made-by">Made with ❤️ by Aayush</span>
<!-- div for icons of my socials -->
<div class="footer-icons">
<a href="https://www.linkedin.com/in/aayusharora-ok" target="_blank">
<img src="./assets/linkedin-icon.png" alt="">
</a>
<a href="https://github.com/aayushwrld" target="_blank">
<img src="./assets/github-icon.png" alt="">
</a>
<a href="https://www.instagram.com/aayushkyu/" target="_blank">
<img src="./assets/instagram-icon.png" alt="">
</a>
</div>
<!-- credits for content from Meal DB -->
<span id="creds">Data from <a href="https://www.themealdb.com/" target="_blank"><u>The Meal DB API</u></a></span>
</div>
<br>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>