-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
129 lines (113 loc) · 8.27 KB
/
Copy pathindex.html
File metadata and controls
129 lines (113 loc) · 8.27 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/style/style.css" />
<title>wikifood_kenya</title>
</head>
<body>
<main class="w-screen h-screen bg-[#f1f3f5]">
<div class="flex flex-1 w-full h-full relative">
<div class="border-r border-b-gray-500 flex flex-col gap-y-8">
<div class="flex items-center justify-center border-b border-b-gray-500 py-2">
<p class="text-2xl font-bold">WIKIFOOD KENYA</p>
</div>
<div class="w-full flex flex-col gap-y-10 px-4">
<div class="flex flex-col gap-y-2">
<label for="prepared_query" class="text-gray-900 font-bold text-lg">Prepared queries : </label>
<select name="prepared_query" id="prepared_query"
class="p-2 rounded-lg outline-none focus-within:outline-purple-600">
<option value="none" selected>
Select a prepared query here...
</option>
<option value="show_all_classes" id="show_all_classes">Show all classes</option>
<option value="show_all_subclasses" id="show_all_subclasses">Show all subclasses</option>
<option value="show_all_instances" id="show_all_instances">Show all instances</option>
<option value="list_all_food_asc">
Show all food in ascending order
</option>
<option value="list_all_food_desc">
Show all food in descending order
</option>
</select>
</div>
<div class="flex flex-col gap-y-2">
<label for="user_sparql_query" class="text-gray-900 font-bold text-lg">SPARQL QUERY : </label>
<textarea class="rounded-lg p-2 outline-none focus-within:outline-purple-600"
name="sparql_query" id="user_sparql_query" cols="30" rows="10"
placeholder="Enter your SPARQL QUERY here..."></textarea>
<button onclick="executeCustomUsersSparqlQuery()"
class="px-6 py-2 font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-purple-800 rounded-lg hover:bg-purple-800 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-80">
Submit query
</button>
</div>
<!-- Add Food Section -->
<div class="flex flex-col gap-y-2 ">
<h2 class="text-gray-900 font-bold text-lg">Add Food Form</h2>
<form id="addFoodForm">
<label for="foodName">Food Name:</label>
<input type="text" id="foodName" name="foodName"
class="block w-full p-2 border rounded outline-none focus-within:outline-purple-600"
required>
<label for="foodDescription">Description:</label>
<textarea id="foodDescription" name="foodDescription"
class="block w-full p-2 border rounded outline-none focus-within:outline-purple-600"
required></textarea>
<label for="foodImage">Image URL:</label>
<input type="url" id="foodImage" name="foodImage"
class="block w-full p-2 border rounded outline-none focus-within:outline-purple-600">
<div class="flex gap-4">
<button type="submit"
class="mt-4 px-4 py-2 bg-purple-800 transition-all duration-300 text-white rounded hover:bg-purple-900 outline-none focus-within:outline-purple-600">Add
Food</button>
<button type="button" onclick="toggleModal()"
class="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700 outline-none focus-within:outline-red-600 transition-all duration-300">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<div class="bg-[#f1f3f5] h-full relative overflow-y-hidden">
<div class="px-[3%] flex items-end justify-end border-b border-b-gray-500 py-2">
<a href="https://github.com/sudo-001/wikifood_kenya" class="mx-2 text-gray-600 transition-colors duration-300 transform hover:text-purple-500 dark:hover:text-gray-300" target="_blank" aria-label="Github">
<svg class="w-8 h-8 fill-gray-900 hover:fill-purple-900" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
</path>
</svg>
</a>
</div>
<div class="w-full py-4 px-6 flex gap-x-4">
<button id="list_all"
class="rounded-lg px-8 py-2 border text-purple-800 border-purple-800 hover:bg-purple-800 hover:text-white transition-all">
List All
</button>
<button id="list_foods"
class="rounded-lg px-8 py-2 border text-purple-800 border-purple-800 hover:bg-purple-800 hover:text-white transition-all">
List Foods
</button>
<button id="list_dishs"
class="rounded-lg px-8 py-2 border text-purple-800 border-purple-800 hover:bg-purple-800 hover:text-white transition-all">
List Dishs
</button>
</div>
<!-- Card section -->
<div id="foodContainer" class="p-8 h-full pb-40 overflow-y-scroll grid grid-cols-5 gap-x-4 gap-y-4">
</div>
</div>
</div>
</main>
<<div id="modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center">
<div class="bg-white rounded-lg p-5 shadow-lg relative max-w-2xl w-full mx-4">
<button id="closeModal" class="absolute top-2 right-2 text-3xl text-gray-800 border rounded-full py-1 px-2 hover:text-gray-600">×</button>
<h2 id="modalTitle" class="text-2xl font-bold mb-2"></h2>
<img id="modalImage" src="" alt="" class="w-full h-80 object-cover rounded-lg">
<p id="modalDescription" class="mt-2 text-gray-700"></p>
<p id="modalIngredients" class="mt-2 text-gray-600"></p>
<p id="modalComponents" class="mt-2 text-gray-600"></p>
</div>
</div>
<script src="./src/script/script.js"></script>
</body>
</html>