-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
472 lines (430 loc) · 16.6 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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bridge</title>
<!-- Montserrat font included (similar to Futura) -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Montserrat', sans-serif;
background-color: #ffffff;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background-color: #0096D6; /* Main color */
padding: 15px;
text-align: center;
color: white;
display: flex;
align-items: center;
justify-content: space-between;
}
nav a {
margin: 0 15px;
color: white;
text-decoration: none;
font-weight: bold;
}
.logo {
height: 60px; /* Adjust the height as needed */
}
.container {
padding: 20px;
text-align: center;
max-width: 1200px;
margin: 20px auto;
}
.section {
background-color: #0096D6; /* Main color */
padding: 20px;
margin-bottom: 20px;
border-radius: 10px;
color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 15px;
background-color: #0096D6; /* Main color */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
}
button:hover {
background-color: #007bb3; /* Darker shade for hover effect */
}
.result-card {
background-color: #fff;
color: #000;
border-radius: 5px;
margin: 10px;
padding: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.result-card h3 {
margin-top: 0;
}
.hide {
display: none;
}
input[type="text"], input[type="file"], input[type="password"] {
padding: 10px;
margin: 10px 0;
border-radius: 5px;
border: 1px solid #0096D6; /* Main color */
font-family: 'Montserrat', sans-serif;
}
video {
width: 100%;
max-width: 600px;
border: 2px solid #0096D6;
border-radius: 10px;
margin-top: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
th {
padding: 12px;
background-color: #0096D6; /* Blue header */
color: white;
text-align: center; /* Center align table headings */
}
td {
padding: 12px;
background-color: white; /* White background for data cells */
color: black; /* Black text for inventory data */
}
table, th, td {
border: 1px solid #0096D6; /* Blue borders */
}
</style>
</head>
<body>
<!-- Login Page -->
<div class="container" id="loginPage">
<div class="section">
<h2>Login</h2>
<input type="text" id="username" placeholder="Enter Username">
<input type="password" id="password" placeholder="Enter Password">
<button onclick="login()">Login</button>
</div>
</div>
<!-- Navbar with Logo -->
<nav id="navBar" class="hide">
<div>
<img src="BridgeLogo.png" alt="Bridge Logo" class="logo">
</div>
<div>
<a href="#home">Home</a>
<a href="#user">User</a>
<a href="#ngo">NGO Dashboard</a>
</div>
</nav>
<!-- Home Section -->
<div class="container hide" id="home">
<div class="section">
<h1>Welcome to Bridge</h1>
<p>Search for food, hygiene products, and medical supplies in your area or manage NGO inventory.</p>
<!-- Allow Location Button -->
<button onclick="getCurrentLocation()">Allow Location</button>
<p id="locationStatus"></p> <!-- Status of location access -->
</div>
</div>
<!-- User Section: Display Closest Food Banks -->
<div class="container hide" id="user">
<div class="section">
<h2>Closest Food Banks</h2>
<div id="foodBanksResults">
<!-- Food banks will be listed here with distances -->
</div>
</div>
</div>
<!-- NGO Dashboard Section -->
<div class="container hide" id="ngo">
<div class="section">
<h2>Are you an NGO?</h2>
<p>Select "Verify NGO" to proceed with managing inventory for your NGO.</p>
<button onclick="showVerifyNGO()">Verify NGO</button>
<!-- Verification Section -->
<div class="hide" id="verifyNGOSection">
<h3>Verify Your NGO</h3>
<input type="text" id="verifyNGOName" placeholder="Enter NGO Name...">
<button onclick="verifyNGO()">Submit</button>
<!-- Display Inventory and Add Inventory Buttons -->
<div id="inventoryButtons" class="hide">
<button onclick="displayInventory()">Display Current Inventory</button>
<button onclick="showAddInventory()">Add Inventory</button>
</div>
<!-- Add NGO Section (Only appears if NGO not found) -->
<div id="addNGOSection" class="hide">
<h3>Add New NGO</h3>
<input type="text" id="addNGOName" placeholder="Enter New NGO Name...">
<button onclick="addNGO()">Add NGO</button>
</div>
</div>
</div>
<!-- Add Inventory Section -->
<div id="addInventorySection" class="hide">
<h3>Add Inventory</h3>
<p>Choose how you want to add inventory:</p>
<button onclick="showUpload()">Upload CSV File</button>
<button onclick="detectWithVision()">Use Camera (OpenCV Simulation)</button>
<div id="uploadSection" class="hide">
<input type="file" id="ngoFileInput" class="file-upload">
<button onclick="uploadInventory()">Upload</button>
</div>
<video id="videoStream" class="hide" autoplay></video> <!-- Hidden by default -->
</div>
<!-- Inventory Data Table -->
<div class="section hide" id="inventoryTableSection">
<h2>Inventory Data</h2>
<table>
<thead>
<tr>
<th>Inventory Number</th>
<th>Product</th>
<th>Quantity</th>
<th>Expiration Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Apples</td>
<td>70</td>
<td>June 12</td>
</tr>
<tr>
<td>2</td>
<td>Oranges</td>
<td>57</td>
<td>July 11</td>
</tr>
<tr>
<td>3</td>
<td>Bananas</td>
<td>78</td>
<td>June 17</td>
</tr>
<tr>
<td>4</td>
<td>Carrots</td>
<td>99</td>
<td>June 29</td>
</tr>
<tr>
<td>5</td>
<td>Apples</td>
<td>70</td>
<td>June 13</td>
</tr>
<tr>
<td>6</td>
<td>Diapers</td>
<td>121</td>
<td>N/A</td>
</tr>
<tr>
<td>7</td>
<td>Flashlights</td>
<td>60</td>
<td>N/A</td>
</tr>
<tr>
<td>8</td>
<td>Batteries</td>
<td>97</td>
<td>N/A</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// LOGIN FUNCTIONALITY
function login() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (username && password) {
document.getElementById("loginPage").style.display = "none"; // Hide login page
document.getElementById("navBar").classList.remove("hide");
document.getElementById("home").classList.remove("hide");
document.getElementById("user").classList.remove("hide");
document.getElementById("ngo").classList.remove("hide");
} else {
alert("Please enter both username and password.");
}
}
// NGO Section Functions
function showVerifyNGO() {
document.getElementById("verifyNGOSection").classList.remove("hide");
}
function verifyNGO() {
const ngoName = document.getElementById("verifyNGOName").value.trim();
if (ngoName === "") {
alert("Please enter the NGO name.");
return;
}
const existingNGO = ngoDatabase.find(ngo => ngo.name.toLowerCase() === ngoName.toLowerCase());
if (existingNGO) {
alert(`NGO ${ngoName} has been verified!`);
document.getElementById("inventoryButtons").classList.remove("hide"); // Show inventory buttons
document.getElementById("addNGOSection").classList.add("hide"); // Hide add NGO option
} else {
alert(`NGO not found. Please add it.`);
document.getElementById("addNGOSection").classList.remove("hide"); // Show add NGO option
document.getElementById("inventoryButtons").classList.add("hide"); // Hide inventory buttons until added
}
}
// Function to add a new NGO
function addNGO() {
const newNGOName = document.getElementById("addNGOName").value.trim();
if (newNGOName === "") {
alert("Please enter a name for the new NGO.");
return;
}
// Simulate adding the new NGO to the mock database
ngoDatabase.push({ name: newNGOName });
alert(`NGO ${newNGOName} has been added!`);
// Hide the add NGO section and show inventory options
document.getElementById("addNGOSection").classList.add("hide");
document.getElementById("inventoryButtons").classList.remove("hide");
}
// Display Inventory
function displayInventory() {
document.getElementById("inventoryTableSection").classList.remove("hide"); // Show inventory table
}
// Show Add Inventory Section
function showAddInventory() {
document.getElementById("addInventorySection").classList.remove("hide");
}
// Show Upload Section
function showUpload() {
document.getElementById("uploadSection").classList.remove("hide");
}
// Simulate Upload Inventory
function uploadInventory() {
const fileInput = document.getElementById("ngoFileInput");
const file = fileInput.files[0];
if (file) {
alert("Inventory uploaded successfully!");
} else {
alert("Please upload a CSV file.");
}
}
// Simulate Camera Access
function detectWithVision() {
const videoStream = document.getElementById("videoStream");
videoStream.classList.remove("hide"); // Show video element
// Access the user's camera
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
videoStream.srcObject = stream; // Show the video stream in the video element
})
.catch(function(err) {
alert("Error accessing the camera: " + err);
});
} else {
alert("Camera is not supported by this browser.");
}
}
// Mock NGO database
const ngoDatabase = [
{ name: "City Food Bank" },
{ name: "Hope House Food Bank" }
];
// Geolocation functionality for food bank distances
function getCurrentLocation() {
const status = document.getElementById("locationStatus");
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
status.innerHTML = "Getting location...";
} else {
status.innerHTML = "Geolocation is not supported by this browser.";
}
}
// Function to calculate the distance between two lat/lng coordinates using the Haversine formula
function calculateDistance(lat1, lng1, lat2, lng2) {
const R = 6371; // Radius of the Earth in kilometers
const dLat = degreesToRadians(lat2 - lat1);
const dLng = degreesToRadians(lng2 - lng1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(degreesToRadians(lat1)) * Math.cos(degreesToRadians(lat2)) *
Math.sin(dLng / 2) * Math.sin(dLng / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const distance = R * c; // Distance in kilometers
return distance * 0.621371; // Convert to miles
}
// Convert degrees to radians
function degreesToRadians(degrees) {
return degrees * (Math.PI / 180);
}
// Function to display the 4 closest food banks
function displayClosestFoodBanks(lat, lng) {
const foodBanks = [
{ name: "Playa Bowls", address: "1952 N High St", lat: 40.0026, lng: -83.0085 },
{ name: "Buckeye Food Alliance", address: "30 W Woodruff Ave", lat: 40.0040, lng: -83.0082 },
{ name: "Neighborhood Services Inc.", address: "1950 N 4th St Suite J/K", lat: 40.0063, lng: -82.9962 },
{ name: "Nnemap Food Pantry", address: "677 E 11th Ave", lat: 39.9921, lng: -82.9862 },
{ name: "Clintonville Beechwold CRC Food", address: "14 W Lakeview Ave", lat: 40.0221, lng: -83.0153 },
{ name: "Clintonville Beechwold CRC East", address: "3222 N High St", lat: 40.0363, lng: -83.0158 },
{ name: "St. Stephen's Community House", address: "1500 E 17th Ave", lat: 40.0007, lng: -82.9749 },
{ name: "Columbus Urban League", address: "788 Mt Vernon Ave", lat: 39.9705, lng: -82.9807 },
{ name: "Communities In Schools - Columbus - Food Distribution", address: "510 E N Broadway St", lat: 40.0252, lng: -83.0054 }
];
const foodBanksWithDistances = foodBanks.map(foodBank => {
const distance = calculateDistance(lat, lng, foodBank.lat, foodBank.lng);
return { ...foodBank, distance };
});
// Sort by distance and take the 4 closest
const closestFoodBanks = foodBanksWithDistances.sort((a, b) => a.distance - b.distance).slice(0, 4);
// Display results
const foodBanksResults = document.getElementById("foodBanksResults");
foodBanksResults.innerHTML = ""; // Clear previous results
closestFoodBanks.forEach((foodBank, index) => {
const card = document.createElement("div");
card.className = "result-card";
card.innerHTML = `<h3>${index + 1}. ${foodBank.name}</h3><p>Address: ${foodBank.address}</p><p>Distance: ${foodBank.distance.toFixed(2)} miles</p>`;
foodBanksResults.appendChild(card);
});
}
// Show the user's position and calculate distances to food banks
function showPosition(position) {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
document.getElementById("locationStatus").innerHTML = `Latitude: ${lat} <br>Longitude: ${lng}`;
displayClosestFoodBanks(lat, lng); // Update with current location
}
// Handle errors if location permission is denied or not available
function showError(error) {
const status = document.getElementById("locationStatus");
switch(error.code) {
case error.PERMISSION_DENIED:
status.innerHTML = "User denied the request for Geolocation.";
break;
case error.POSITION_UNAVAILABLE:
status.innerHTML = "Location information is unavailable.";
break;
case error.TIMEOUT:
status.innerHTML = "The request to get user location timed out.";
break;
case error.UNKNOWN_ERROR:
status.innerHTML = "An unknown error occurred.";
break;
}
}
</script>
</body>
</html>