-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (129 loc) · 6.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Recipe Share</title>
<link rel="stylesheet" href="css/style.css">
<style>
body {
background-color: rgba(116, 0, 0, 0.062);
background-image: url("https://quickstartcareer.com/wp-content/uploads/2021/07/cooking-1.jpg");
background-repeat: no-repeat;
background-size: cover;
color: white;
font-family: Arial, sans-serif;
}
header {
text-align: center;
text-decoration: underline;
font-family: "Times New Roman", serif;
}
nav ul {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: 0;
background-color: black;
}
nav li {
margin: 0 10px;
}
nav a {
color: white;
text-decoration: none;
}
/* Simple loading animation */
#loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
animation: fadeOut 3s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
#loading img {
width: 100px;
height: 100px;
}
/* Add margin and styling for text sections */
main {
margin: 20px; /* Adjust margin as needed */
background-color: rgba(0, 0, 0, 0.3); /* Add a subtle background color */
padding: 20px; /* Add padding for spacing */
border-radius: 10px; /* Add rounded corners for a smoother finish */
}
h2 {
font-family: "Arial", sans-serif;
}
</style>
</head>
<body>
<div id="loading">
<img src="https://th.bing.com/th/id/R.cc0f2d417585c1572df8896c130958f8?rik=JgmsMeB%2bCoqzkg&riu=http%3a%2f%2fmedia.giphy.com%2fmedia%2fA5ugHVbuFL3uo%2fgiphy.gif&ehk=Ic%2f2YZyRa1PJFzaka8e6WG3FwaiIaDl%2fzX9XhhuGW9A%3d&risl=&pid=ImgRaw&r=0" alt="Loading...">
</div>
<div id="wrapper">
<nav>
<ul>
<li><a href="cook book.html">Home</a></li>
<li><a href="recipes.php">Recipes</a></li>
<li><a href="addrecipe.php">Add Recipe</a></li>
<li><a href="Teaminfo.html">Team-info</a></li>
</ul>
</nav>
<header>
<h1>Recipe Share</h1>
</header>
<main>
<h2>Problem Statement</h2>
<p>Despite many cooking enthusiasts and a vast number of recipes available online, there is a need for a centralized and user-friendly platform that encourages active recipe sharing and culinary exploration. The few existing platforms for sharing recipes sometimes fall short of giving users a comprehensive culinary experience. They lack elements that encourage user customization and access to essential nutritional data. Users are thus left in need of a more capable and interesting platform for their culinary research. In light of these limitations, RecipeShare aims to bridge these gaps by offering a platform that not only provides a wide variety of recipes but also prioritizes user customization. By doing so, RecipeShare aims to create a lively and exciting environment where foodies of all skill levels can share, learn about, and celebrate their love for cooking and eating.</p>
</main>
<main>
<h2>User goals:</h2>
<ul>
<li>As a user, I need an intuitive and visually appealing user experience that facilitates the discovery of recipes, their sharing, and modification in a way that is enjoyable for all culinary skill levels.</li>
<li>As a user, I should be able to get tips and tricks to improve existing recipes.</li>
<li>As a user, I need cooking tips, tricks, or instructions that help me to improve my existing recipes.</li>
<li>As a user, I should be able to get feedback and rating for my recipes.</li>
</ul>
</main>
<main>
<h2>Actions</h2>
<ul>
<li>User should be able to register/login to the website</li>
<li>User should be able to upload the recipes on the website. The user can enter different things like title, ingredient list, detailed instructions like cooking time.</li>
<li>User should be able to search the recipe.</li>
<li>User should be able to categorize the recipes like breakfast, lunch, dinner.</li>
<li>User should be able to give feedback on existing recipes.</li>
<li>User should be able to share their favorite recipes on social media platform.</li>
</ul>
</main>
<main>
<h2>Potential Obstacles</h2>
<ul>
<li>User data need to be handled safely in an end-to-end encrypted environment.</li>
<li>As the users grow day by day, we should make sure that our website must be able to handle it and shouldn't affect the website's performance.</li>
<li>Since there are many recipe sharing websites, we should be way more creative and provide additional features to be unique and more captivating.</li>
<li>Plagiarism is one of the main constraints for this recipe sharing website. Even if the recipe is unique, pictures used for the respective dish may be owned by someone else. So, we should be careful with plagiarism and check it more often.</li>
<li>The main constraint to this website will be the User Engagement. If the users don't post the recipes regularly, the website fails to reach its goal. And also, the website must reach a wider audience to make it engaging as the recipes increase.</li>
</ul>
</main>
<footer>
<p>© 2023- Fall CS-615 project</p>
</footer>
</div>
</body>
</html>