API tools faq
paste
Advertisement
noburudesu

Working 10:49pm

noburudesu
Jun 22nd, 2023
47
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.11 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. S18 Group 9
  3. Members:
  4. - DOLON, John Michael
  5. - FETALVERO, Kenshin
  6. - GABINI, Brian
  7. - TUMALAD, Shawne
  8. -->
  9.  
  10. <!doctype html>
  11. <html lang="en">
  12.  
  13. <head>
  14. <title>Burger King</title>
  15.  
  16. <!-- Meta data -->
  17. <meta charset="utf-8">
  18. <meta name="viewport" content="width=device-width, initial-scale=1">
  19.  
  20. <!-- CDNs for Bootstrap -->
  21. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
  22. integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  23. <script src="https://code.jquery.com/jquery-3.7.0.min.js" type="text/javascript"> </script>
  24.  
  25. <!-- links the stylesheet to this html file -->
  26. <link rel="stylesheet" href="css/css.css">
  27. </head>
  28.  
  29. <body>
  30. <!-- CDNs for Bootstrap -->
  31. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
  32. integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
  33. crossorigin="anonymous"></script>
  34. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
  35. integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
  36. crossorigin="anonymous"></script>
  37. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
  38. integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
  39. crossorigin="anonymous"></script>
  40.  
  41. <!-- script for js functionality -->
  42. <!-- <script type="text/javascript" src="./js/script.js"></script> -->
  43.  
  44. <script>
  45. $(document).ready(function () {
  46. // Your jQuery code goes here
  47. // For example:
  48. const USERNAME = "Brian Gabini";
  49. const USERPFP = "./images/user-pfp.jpg";
  50. const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  51.  
  52. var currDate = new Date();
  53.  
  54. var currDateString = monthNames[currDate.getMonth()] + " " + currDate.getDate() + ", " + currDate.getFullYear();
  55.  
  56. // form submission for the review
  57. $('#submit-review').click(function () {
  58. // testing
  59. var review_container = $('#review-container');
  60.  
  61. var userReviewText = $('#floatingTextarea2').val();
  62.  
  63. var userReviewTitle = $('#review-title').val();
  64.  
  65. // get the rating
  66. var rating = $('input[name="rating"]:checked').val();
  67. var remainingRating = 5 - rating;
  68.  
  69. // create a loop to create the stars
  70. var starString = "";
  71.  
  72. /* for (var i = 0; i < rating; i++) {
  73. starString += "★";
  74. }
  75.  
  76. for (var i = 0; i < remainingRating; i++) {
  77. starString += "✩";
  78. } */
  79.  
  80. // var star = $('<span></span>').addClass('star-cb-group me-2');
  81.  
  82. for (var i = 0; i < rating; i++) {
  83. starString += "★";
  84. }
  85.  
  86. for (var i = 0; i < remainingRating; i++) {
  87. starString += "✩";
  88. }
  89.  
  90. // elements for the picture part
  91. var outerMostDiv = $('<div></div>').addClass('row mb-5');
  92. var outerDiv1 = $('<div></div>').addClass('col-md-2 mb-3 pt-3');
  93. var innerDiv1 = $('<div></div>').addClass('container');
  94. var innerDiv1Child1 = $('<div></div>').addClass('row mb-3 justify-content-center');
  95. var userPFP = $('<img>').addClass('rounded-circle').attr('src', USERPFP);
  96. $(userPFP).css('width', '100px');
  97. $(userPFP).css('height', '75px');
  98. var innerDiv1Child2 = $('<div></div>').addClass('row justify-content-center text-center');
  99. var userName = $('<h6></h6>').text(USERNAME);
  100.  
  101. var outerDiv2 = $('<div><div>').addClass('col-md-10');
  102. var outerDiv2Child1 = $('<h6></h6>').text(starString + ' • Reviewed on ' + currDateString);
  103. var outerDiv2Child2 = $('<h4></h4>').text(userReviewTitle);
  104. $(outerDiv2Child2).css('font-weight', '600');
  105. var outerDiv2Child3 = $('<p></p>').text(userReviewText);
  106. var outerDiv2Child4 = $('<p></p>').text('👍 91 people found this review helpful • 👍👎');
  107.  
  108. $(innerDiv1Child1).append(userPFP);
  109. $(innerDiv1Child2).append(userName);
  110. $(innerDiv1).append(innerDiv1Child1);
  111. $(innerDiv1).append(innerDiv1Child2);
  112. $(outerDiv1).append(innerDiv1);
  113.  
  114. $(outerDiv2).append(outerDiv2Child1);
  115. $(outerDiv2).append(outerDiv2Child2);
  116. $(outerDiv2).append(outerDiv2Child3);
  117. $(outerDiv2).append(outerDiv2Child4);
  118.  
  119. $(outerMostDiv).append(outerDiv1);
  120. $(outerMostDiv).append(outerDiv2);
  121.  
  122. $(review_container).append(outerMostDiv);
  123.  
  124. // reset input fields after submission
  125. $('#floatingTextarea2').val('');
  126. $('#review-title').val('');
  127. $('input[name="rating"]:checked').prop('checked', false);
  128.  
  129. });
  130. });
  131. </script>
  132.  
  133. <!-- navigation bar -->
  134. <nav class="navbar navbar-expand-lg ">
  135. <div class="container-fluid">
  136. <a class="logo" href="#" style="padding-right: 10%;">Palatable</a>
  137. <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  138. data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
  139. aria-label="Toggle navigation">
  140. <span class="navbar-toggler-icon"></span>
  141. </button>
  142. <div class="container-fluid collapse navbar-collapse" id="navbarSupportedContent">
  143. <form class="d-flex w-auto" role="search">
  144. <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  145. <button class="btn btn-outline-danger" type="submit"><svg xmlns="http://www.w3.org/2000/svg"
  146. width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  147. <path
  148. d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
  149. </svg></button>
  150. </form>
  151.  
  152. <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  153. <li class="nav-item">
  154. <a class="nav-link" aria-current="page" href="login.html">Log in</a>
  155. </li>
  156. <li class="nav-item">
  157. <a class="nav-link" href="signup.html">Sign up</a>
  158. </li>
  159. </ul>
  160. </div>
  161. </div>
  162. </nav>
  163.  
  164. <!-- absolute positioned background header -->
  165. <img class="establishment-header position-absolute" src="./images/burger-king-header.jpg"
  166. alt="Establishment Header">
  167.  
  168. <div class="container" style="margin-top: 80px">
  169. <div class="row ">
  170. <!-- Establishment info -->
  171. <div class="col">
  172. <div>
  173. <span class="fw-bold fs-1" style="color: white;">Burger King</span>
  174. <br>
  175. <span class="fs-5" style="color: white;">★★★✩✩ 10 Reviews</span>
  176. <br>
  177. <span class="fs-5" style="color: white;" A>₱₱₱ - Burgers</span>
  178. <br>
  179. <span class="fs-5" style="color: white;" A>Open 10 AM - 12 PM</span>
  180. </div>
  181. </div>
  182. <div class="col position-relative d-flex justify-content-end">
  183. <!-- Image button here -->
  184. <div>
  185. <a href="#">
  186. <button class="btn btn-primary">See all 12 photos</button>
  187. </a>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192.  
  193. <div class="container" style="margin-top: 40px">
  194. <div class="row ">
  195. <!-- Review Button -->
  196. <div class="col">
  197. <button class="btn btn-warning fs-5" data-bs-toggle="modal" data-bs-target="#write-review-modal">✩ Write
  198. a Review</button>
  199.  
  200. <!-- Modal -->
  201. <div class="modal fade" id="write-review-modal" tabindex="-1" aria-labelledby="modalLabel"
  202. aria-hidden="true">
  203. <div class="modal-dialog">
  204. <div class="modal-content">
  205. <div class="modal-header">
  206. <h1 class="modal-title fs-5" id="modalLabel">Write a Review for Burger King</h1>
  207. <button type="button" class="btn-close" data-bs-dismiss="modal"
  208. aria-label="Close"></button>
  209. </div>
  210. <div class="modal-body">
  211. <form action="" style="max-width: 600px;">
  212. <div class="my-3">
  213. <input id="review-title" class="form-control w-100" type="text"
  214. placeholder="Title" required>
  215. </div>
  216.  
  217. <div class="border p-3 my-3 rounded">
  218. <div class="container d-flex">
  219. <span class="star-cb-group me-2">
  220. <input type="radio" id="rating-5" name="rating" value="5" />
  221. <label for="rating-5">5</label>
  222. <input type="A" id="rating-4" name="rating" value="4" />
  223. <label for="rating-4">4</label>
  224. <input type="radio" id="rating-3" name="rating" value="3" />
  225. <label for="rating-3">3</label>
  226. <input type="radio" id="rating-2" name="rating" value="2" />
  227. <label for="rating-2">2</label>
  228. <input type="radio" id="rating-1" name="rating" value="1" />
  229. <label for="rating-1">1</label>
  230. <input type="radio" id="rating-0" name="rating" value="0"
  231. class="star-cb-clear" />
  232. <label for="rating-0">0</label>
  233. </span>
  234. <h6>Select your rating</h6>
  235. </div>
  236.  
  237.  
  238. <div class="form-floating">
  239. <textarea class="form-control border-0" id="floatingTextarea2"
  240. style="height: 200px" required></textarea>
  241. <label for="floatingTextarea2">Tell us about your experience!</label>
  242. </div>
  243. </div>
  244.  
  245. <div class="mb-3">
  246. <label for="formFileMultiple" class="form-label">Attach Photos</label>
  247. <input class="form-control" type="file" id="formFileMultiple" multiple>
  248. </div>
  249.  
  250. <input id="submit-review" class="submit-button btn btn-primary" type="button"
  251. style="width: 200px;" value="Post Review" data-bs-dismiss="modal">
  252. </form>
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257. </div>
  258. <!-- Establishment Details -->
  259. <div class="col position-relative d-flex justify-content-end">
  260. <div style="border: 2px solid rgb(214, 214, 214); padding: 5px 50px 5px 5px;">
  261. <p class="fs-5">✆ 0917 977 1014</p>
  262. <span class="fs-5" style="color: blue">Directions</span>
  263. <br>
  264. <span class="fs-5">Taft Avenue</span>
  265. </div>
  266. </div>
  267. </div>
  268. <div class="row">
  269. <!-- Establishment Map and Hours -->
  270. <div class="col" style="margin-top: 3%">
  271. <span class="fw-bold fs-4">Location & Hours</span>
  272. </div>
  273. <div class="container">
  274. <div class="row">
  275. <div class="col"> <!--Map here-->
  276. <img width="100%" height="400" src="./images/burger-king-header.jpg" alt="Establishment Header">
  277. </div>
  278. <!-- Day-->
  279. <div class="col-1">
  280. <span class="fs-4">Mon</span>
  281. <br>
  282. <span class="fs-4">Tue</span>
  283. <br>
  284. <span class="fs-4">Wed</span>
  285. <br>
  286. <span class="fs-4">Thu</span>
  287. <br>
  288. <span class="fs-4">Fri</span>
  289. <br>
  290. <span class="fs-4">Sat</span>
  291. <br>
  292. <span class="fs-4">Sun</span>
  293. </div>
  294. <!-- Hours -->
  295. <div class="col">
  296. <span class="fs-4">10:00 AM - 10:00 PM</span>
  297. <br>
  298. <span class="fs-4">10:00 AM - 10:00 PM</span>
  299. <br>
  300. <span class="fs-4">10:00 AM - 10:00 PM</span>
  301. <br>
  302. <span class="fs-4">10:00 AM - 10:00 PM</span>
  303. <br>
  304. <span class="fs-4">10:00 AM - 10:00 PM</span>
  305. <br>
  306. <span class="fs-4">10:00 AM - 10:00 PM</span>
  307. <br>
  308. <span class="fs-4">10:00 AM - 10:00 PM</span>
  309. </div>
  310. </div>
  311. </div>
  312. </div>
  313. </div>
  314.  
  315. <!-- Reviews section -->
  316.  
  317. <div id="" class="container" style="margin-top: 3%">
  318. <div class="row">
  319.  
  320. <!-- Sidebar -->
  321. <div class="col-md-3">
  322. <h4>SORT</h4>
  323. <h5><a style="color: black;" href="#"> Most Upvotes ▽</a></h5>
  324.  
  325. </div>
  326. <div id="review-container" class="col-md-9">
  327. <h3 class="mb-3">Reviews</h3>
  328.  
  329. <!-- Review #1 -->
  330. <div class="row mb-5">
  331. <div class="col-md-2 mb-3 pt-3">
  332. <div class="container">
  333. <div class="row mb-3 justify-content-center">
  334. <img src="./images/shrek-image.jpg" alt="" style="width: 100px; height: 75px;"
  335. class="rounded-circle">
  336. </div>
  337. <div class="row justify-content-center text-center">
  338. <h6> Ken Adams </h6>
  339. </div>
  340.  
  341. </div>
  342. </div>
  343. <div class="col-md-10">
  344. <h6>⭐⭐⭐⭐⭐ • Reviewed on January 1, 2019</h6>
  345. <h4 style="font-weight: 600;"> Whopper!! </h4>
  346. <p>My friends and I love burger king!! The fries, whoppers and burgers were delicious and worth
  347. it!!
  348. You'd never get tired of it!! Its a bit expensive but won't regret it.
  349. </p>
  350. <p>👍 91 people found this review helpful • 👍👎</p>
  351. </div>
  352. </div>
  353.  
  354. <!-- Review #2 -->
  355. <div class="row mb-5">
  356. <div class="col-md-2 mb-3 pt-3">
  357. <div class="container">
  358. <div class="row mb-3 justify-content-center">
  359. <img src="./images/allisonburgers-image.jpg" alt="" style="width: 100px; height: 75px;"
  360. class="rounded-circle">
  361. </div>
  362. <div class="row justify-content-center text-center">
  363. <h6> Allison Burgers </h6>
  364. </div>
  365.  
  366. </div>
  367. </div>
  368. <div class="col-md-10">
  369. <h6>⭐⭐⭐⭐⭐ • Reviewed on January 1, 2019</h6>
  370. <h4 style="font-weight: 600;"> BK is BK anywhere in the world </h4>
  371. <p>Burgers were about the same as in the US. Been years since I I have been at one in the US but
  372. about the same. Tasty fresh and flame broiled. Delivery must be difficult as traffic is
  373. horrible. Eat in and relax. We did it at 1:30am HAha. cheers!!!</p>
  374. <p>👍 109 people found this review helpful • 👍👎</p>
  375. </div>
  376. </div>
  377.  
  378. </div>
  379. </div>
  380. </div>
  381.  
  382. </body>
  383.  
  384. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!