2022-11-12 22:16:03 +00:00
<!DOCTYPE html>
< html lang = "en" >
2022-11-21 03:50:54 +00:00
< 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" / >
< title > Food Journal< / title >
2022-11-12 22:16:03 +00:00
2022-11-21 22:37:37 +00:00
<!-- Add Favicon -->
2022-12-01 00:18:18 +00:00
< link rel = "icon" type = "image/x-icon" href = "./assets/images/favicon.ico" >
2022-11-21 22:37:37 +00:00
2022-11-30 00:17:26 +00:00
<!-- Review Card Custom Element -->
2022-11-21 22:37:37 +00:00
< script src = "assets/scripts/ReviewCard.js" type = "module" > < / script >
2022-11-22 01:27:18 +00:00
2022-11-21 22:37:37 +00:00
<!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config -->
<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
< link rel = "stylesheet" href = "./static/ReviewDetails.css" / >
< link rel = "stylesheet" href = "./static/Form.css" / >
< script src = "assets/scripts/ReviewDetails.js" type = "module" > < / script >
2022-11-22 01:27:18 +00:00
< / head >
< body >
2022-11-21 22:37:37 +00:00
< header >
2022-11-21 08:56:54 +00:00
< div class = "top-bar" >
2022-11-22 00:12:17 +00:00
< img src = "./assets/images/Logo.png" alt = "logo" / >
2022-11-21 08:56:54 +00:00
< h1 > Food Journal < / h1 >
2022-11-22 00:12:17 +00:00
< img src = "./assets/images/Logo.png" alt = "logo" / >
2022-11-21 08:56:54 +00:00
< / div >
< / header >
2022-11-21 00:27:27 +00:00
2022-11-22 00:07:20 +00:00
< main >
2022-11-22 01:03:10 +00:00
< div class = "journal-form" id = "review-details" >
2022-11-22 00:07:20 +00:00
< form >
< fieldset class = "meal-name" >
2022-11-27 01:38:19 +00:00
< h1 id = "d-meal-name" style = "font-family: Century Gothic;" > < / h1 >
2022-11-22 00:07:20 +00:00
< h1 id = "d-restaurant" style = "font-family: Century Gothic; font-size: 30px;" > < / h1 >
< / fieldset >
2022-11-21 08:56:54 +00:00
2022-11-22 00:07:20 +00:00
< fieldset class = "meal-pics" >
<!-- image source -->
2022-11-27 01:38:19 +00:00
< img width = 40% height = 40% id = "d-meal-img" style = "margin-left: auto; margin-right: auto; display: block;" / >
2022-11-22 00:07:20 +00:00
< / fieldset >
< fieldset class = "stars-and-comments" style = "text-align: center;" >
< img width = 30% height = 30% id = "d-rating" style = "margin-left: auto; margin-right: auto; display: block;" / >
< p id = "d-comments" > < / p >
< / fieldset >
2022-11-21 00:27:27 +00:00
2022-11-22 00:07:20 +00:00
< fieldset class = "meal-tags" >
< div class = "tag-container" id = "d-tags" style = "justify-content: center;" > < / div >
< / fieldset >
2022-11-21 06:22:31 +00:00
2022-11-22 00:07:20 +00:00
< / form >
< / div >
<!-- - Navigation Buttons -->
2022-11-22 01:03:10 +00:00
< div style = "display: flex; justify-content: center;" >
2022-11-24 10:13:41 +00:00
< img src = "./assets/images/home_button_for_interface.png" style = "margin: 20px 10px 20px 10px;" id = "home-btn" title = "Home Page" onclick = "window.location.assign('./index.html')" height = "50" width = "50" / >
< img src = "./assets/images/edit_button_for_interface.png" style = "margin: 20px 10px 20px 10px;" id = "update-btn" title = "Edit Review" height = "50" width = "50" / >
< img src = "./assets/images/delete_icon_for_interface.png" style = "margin: 20px 10px 20px 10px;" id = "delete-btn" title = "Delete Review" class = "danger" height = "50" width = "50" / >
2022-11-22 00:07:20 +00:00
< / div >
2022-11-21 03:50:54 +00:00
< / main >
2022-11-21 00:27:27 +00:00
2022-11-21 21:52:44 +00:00
< div class = "journal-form hidden" id = "update-form" >
< h1 > Update Entry< / h1 >
< form id = "new-food-entry" >
< fieldset >
< legend > PICTURE:< / legend >
< select id = "select" name = "select" >
< option value = "file" > File Upload< / option >
2022-11-30 23:59:43 +00:00
< option value = "photo" > Take a Photo< / option >
2022-11-21 21:52:44 +00:00
< / select >
2022-11-30 23:59:43 +00:00
< input type = "file" accept = "image/*" id = "mealImg" name = "mealImg" >
2022-11-21 21:52:44 +00:00
< / fieldset >
2022-12-02 04:05:24 +00:00
< fieldset >
2022-11-30 23:59:43 +00:00
< video id = "player" width = "320" height = "240" autoplay hidden > < / video >
< canvas id = "photoCanvas" width = "320" height = "240" hidden > < / canvas >
< button type = "button" id = "photoButton" hidden > Take Photo< / button >
< / fieldset >
2022-11-21 21:52:44 +00:00
< fieldset >
< legend > MEAL NAME:< / legend >
< label for = "Name: " > < input type = "text" id = "mealName" name = "mealName" required > < / label >
< / fieldset >
< fieldset >
< legend > RESTAURANT NAME:< / legend >
< label for = "Name:" > < input type = "text" id = "restaurant" name = "restaurant" required > < / label >
< / fieldset >
2022-11-21 03:50:54 +00:00
2022-11-21 21:52:44 +00:00
< fieldset >
< legend > RATING:< / legend >
< div style = "display: flex; justify-content: flex-start; align-items: center;" >
< div class = "rating" >
< input type = "radio" id = "s5" name = "rating" value = "5" / > < label for = "s5" id = "s5-select" > 5 stars < / label >
< input type = "radio" id = "s4" name = "rating" value = "4" / > < label for = "s4" id = "s4-select" > 4 stars < / label >
< input type = "radio" id = "s3" name = "rating" value = "3" / > < label for = "s3" id = "s3-select" > 3 stars < / label >
< input type = "radio" id = "s2" name = "rating" value = "2" / > < label for = "s2" id = "s2-select" > 2 stars < / label >
< input type = "radio" id = "s1" name = "rating" value = "1" / > < label for = "s1" id = "s1-select" > 1 star < / label >
< / div >
< / div >
< / fieldset >
< fieldset >
< legend > COMMENTS:< / legend >
< textarea name = "comments" id = "comments" rows = "5" style = "resize: none; width: 100%;" > < / textarea >
< / fieldset >
2022-11-21 00:27:27 +00:00
2022-11-21 21:52:44 +00:00
< fieldset >
< legend > TAGS: (ex. cuisine, distance, cost, etc)< / legend >
< input type = "text" id = "tag-form" name = "tag-form" >
< div class = 'tag-container' id = "tag-container-form" >
< / div >
< button type = "button" id = "tag-add-btn" > + < / button >
< / fieldset >
2022-11-22 01:03:10 +00:00
< button type = "submit" id = "save-btn" value = "Submit" > Save< / button >
< input type = "button" value = "Cancel" id = "home-btn" onclick = "window.location.assign('./index.html')" >
2022-11-21 03:50:54 +00:00
< / form >
< / div >
< / body >
2022-11-12 22:16:03 +00:00
< / html >
