API tools faq
paste
Advertisement
noburudesu

Untitled

noburudesu
Jun 22nd, 2023
55
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.93 KB | Source Code | 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.  
  51. // var for review photos
  52.  
  53. // var for review text
  54.  
  55.  
  56.  
  57. // form submission for the review
  58. $('#submit-review').click(function () {
  59. // testing
  60. var review_container = $('#review-container');
  61.  
  62. var userReviewText = $('#floatingTextarea2').val();
  63.  
  64. // elements for the picture part
  65. var outerMostDiv = $('<div></div>').addClass('row mb-5');
  66. var outerDiv1 = $('<div></div>').addClass('col-md-2 mb-3 pt-3');
  67. var innerDiv1 = $('<div></div>').addClass('container');
  68. var innerDiv1Child1 = $('<div></div>').addClass('row mb-3 justify-content-center');
  69. var userPFP = $('<img>').addClass('rounded-circle').attr('src', USERPFP);
  70. $(userPFP).css('width', '100px');
  71. $(userPFP).css('height', '75px');
  72. var innerDiv1Child2 = $('<div></div>').addClass('row justify-content-center text-center');
  73. var userName = $('<h6></h6>').text(USERNAME);
  74.  
  75. var outerDiv2 = $('<div><div>').addClass('col-md-10');
  76. var outerDiv2Child1 = $('<h6></h6>').text('⭐⭐⭐⭐⭐ • Reviewed on January 1, 2019');
  77. var outerDiv2Child2 = $('<h4></h4>').text('Whopper!!');
  78. $(outerDiv2Child2).css('font-weight', '600');
  79. var outerDiv2Child3 = $('<h4></h4>').text('Good food and accommodating staff');
  80. var outerDiv2Child4 = $('<p></p>').text('Review here');
  81. var outerDiv2Child5 = $('<p></p>').text('👍 91 people found this review helpful • 👍👎');
  82.  
  83. $(innerDiv1Child1).append(userPFP);
  84. $(innerDiv1Child2).append(userName);
  85. $(innerDiv1).append(innerDiv1Child1);
  86. $(innerDiv1).append(innerDiv1Child2);
  87. $(outerDiv1).append(innerDiv1);
  88.  
  89. $(outerDiv2).append(outerDiv2Child1);
  90. $(outerDiv2).append(outerDiv2Child2);
  91. $(outerDiv2).append(outerDiv2Child3);
  92. $(outerDiv2).append(outerDiv2Child4);
  93. $(outerDiv2).append(outerDiv2Child5);
  94.  
  95. $(outerMostDiv).append(outerDiv1);
  96. $(outerMostDiv).append(outerDiv2);
  97.  
  98. $(review_container).append(outerMostDiv);
  99. });
  100. });
  101. </script>
  102.  
  103. <!-- navigation bar -->
  104. <nav class="navbar navbar-expand-lg ">
  105. <div class="container-fluid">
  106. <a class="logo" href="#" style="padding-right: 10%;">Palatable</a>
  107. <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  108. data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
  109. aria-label="Toggle navigation">
  110. <span class="navbar-toggler-icon"></span>
  111. </button>
  112. <div class="container-fluid collapse navbar-collapse" id="navbarSupportedContent">
  113. <form class="d-flex w-auto" role="search">
  114. <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  115. <button class="btn btn-outline-danger" type="submit"><svg xmlns="http://www.w3.org/2000/svg"
  116. width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  117. <path
  118. 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" />
  119. </svg></button>
  120. </form>
  121.  
  122. <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  123. <li class="nav-item">
  124. <a class="nav-link" aria-current="page" href="login.html">Log in</a>
  125. </li>
  126. <li class="nav-item">
  127. <a class="nav-link" href="signup.html">Sign up</a>
  128. </li>
  129. </ul>
  130. </div>
  131. </div>
  132. </nav>
  133.  
  134. <!-- absolute positioned background header -->
  135. <img class="establishment-header position-absolute" src="./images/burger-king-header.jpg"
  136. alt="Establishment Header">
  137.  
  138. <div class="container" style="margin-top: 80px">
  139. <div class="row ">
  140. <!-- Establishment info -->
  141. <div class="col">
  142. <div>
  143. <span class="fw-bold fs-1" style="color: white;">Burger King</span>
  144. <br>
  145. <span class="fs-5" style="color: white;">★★★✩✩ 10 Reviews</span>
  146. <br>
  147. <span class="fs-5" style="color: white;" A>₱₱₱ - Burgers</span>
  148. <br>
  149. <span class="fs-5" style="color: white;" A>Open 10 AM - 12 PM</span>
  150. </div>
  151. </div>
  152. <div class="col position-relative d-flex justify-content-end">
  153. <!-- Image button here -->
  154. <div>
  155. <a href="#">
  156. <button class="btn btn-primary">See all 12 photos</button>
  157. </a>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162.  
  163. <div class="container" style="margin-top: 40px">
  164. <div class="row ">
  165. <!-- Review Button -->
  166. <div class="col">
  167. <button class="btn btn-warning fs-5" data-bs-toggle="modal" data-bs-target="#write-review-modal">✩ Write
  168. a Review</button>
  169.  
  170. <!-- Modal -->
  171. <div class="modal fade" id="write-review-modal" tabindex="-1" aria-labelledby="modalLabel"
  172. aria-hidden="true">
  173. <div class="modal-dialog">
  174. <div class="modal-content">
  175. <div class="modal-header">
  176. <h1 class="modal-title fs-5" id="modalLabel">Write a Review for Burger King</h1>
  177. <button type="button" class="btn-close" data-bs-dismiss="modal"
  178. aria-label="Close"></button>
  179. </div>
  180. <div class="modal-body">
  181. <form action="" style="max-width: 600px;">
  182. <div class="my-3">
  183. <input class="form-control w-100" type="text" placeholder="Title">
  184. </div>
  185.  
  186. <div class="border p-3 my-3 rounded">
  187. <div class="container d-flex">
  188. <span class="star-cb-group me-2">
  189. <input type="radio" id="rating-5" name="rating-5" value="5" />
  190. <label for="rating-5">5</label>
  191. <input type="radio" id="rating-4" name="rating-4" value="4" />
  192. <label for="rating-4">4</label>
  193. <input type="radio" id="rating-3" name="rating-3" value="3" />
  194. <label for="rating-3">3</label>
  195. <input type="radio" id="rating-2" name="rating-2" value="2" />
  196. <label for="rating-2">2</label>
  197. <input type="radio" id="rating-1" name="rating-1" value="1" />
  198. <label for="rating-1">1</label>
  199. <input type="radio" id="rating-0" name="rating-0" value="0"
  200. class="star-cb-clear" />
  201. <label for="rating-0">0</label>
  202. </span>
  203. <h6>Select your rating</h6>
  204. </div>
  205.  
  206.  
  207. <div class="form-floating">
  208. <textarea class="form-control border-0" id="floatingTextarea2"
  209. style="height: 200px"></textarea>
  210. <label for="floatingTextarea2">Tell us about your experience!</label>
  211. </div>
  212. </div>
  213.  
  214. <div class="mb-3">
  215. <label for="formFileMultiple" class="form-label">Attach Photos</label>
  216. <input class="form-control" type="file" id="formFileMultiple" multiple>
  217. </div>
  218.  
  219. <input id="submit-review" class="submit-button btn btn-primary" type="submit"
  220. style="width: 200px;" value="Post Review" data-bs-dismiss="modal">
  221. </form>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. <!-- Establishment Details -->
  228. <div class="col position-relative d-flex justify-content-end">
  229. <div style="border: 2px solid rgb(214, 214, 214); padding: 5px 50px 5px 5px;">
  230. <p class="fs-5">✆ 0917 977 1014</p>
  231. <span class="fs-5" style="color: blue">Directions</span>
  232. <br>
  233. <span class="fs-5">Taft Avenue</span>
  234. </div>
  235. </div>
  236. </div>
  237. <div class="row">
  238. <!-- Establishment Map and Hours -->
  239. <div class="col" style="margin-top: 3%">
  240. <span class="fw-bold fs-4">Location & Hours</span>
  241. </div>
  242. <div class="container">
  243. <div class="row">
  244. <div class="col"> <!--Map here-->
  245. <img width="100%" height="400" src="./images/burger-king-header.jpg" alt="Establishment Header">
  246. </div>
  247. <!-- Day-->
  248. <div class="col-1">
  249. <span class="fs-4">Mon</span>
  250. <br>
  251. <span class="fs-4">Tue</span>
  252. <br>
  253. <span class="fs-4">Wed</span>
  254. <br>
  255. <span class="fs-4">Thu</span>
  256. <br>
  257. <span class="fs-4">Fri</span>
  258. <br>
  259. <span class="fs-4">Sat</span>
  260. <br>
  261. <span class="fs-4">Sun</span>
  262. </div>
  263. <!-- Hours -->
  264. <div class="col">
  265. <span class="fs-4">10:00 AM - 10:00 PM</span>
  266. <br>
  267. <span class="fs-4">10:00 AM - 10:00 PM</span>
  268. <br>
  269. <span class="fs-4">10:00 AM - 10:00 PM</span>
  270. <br>
  271. <span class="fs-4">10:00 AM - 10:00 PM</span>
  272. <br>
  273. <span class="fs-4">10:00 AM - 10:00 PM</span>
  274. <br>
  275. <span class="fs-4">10:00 AM - 10:00 PM</span>
  276. <br>
  277. <span class="fs-4">10:00 AM - 10:00 PM</span>
  278. </div>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283.  
  284. <!-- Reviews section -->
  285. <div id="" class="container" style="margin-top: 3%">
  286. <div class="row">
  287.  
  288. <!-- Sidebar -->
  289. <div class="col-md-3">
  290. <h4>SORT</h4>
  291. <h5><a style="color: black;" href="#"> Most Upvotes ▽</a></h5>
  292.  
  293. </div>
  294. <div id="review-container" class="col-md-9">
  295. <h3 class="mb-3">Reviews</h3>
  296.  
  297. <!-- Review #1 -->
  298. <div class="row mb-5">
  299. <div class="col-md-2 mb-3 pt-3">
  300. <div class="container">
  301. <div class="row mb-3 justify-content-center">
  302. <img src="./images/shrek-image.jpg" alt="" style="width: 100px; height: 75px;"
  303. class="rounded-circle">
  304. </div>
  305. <div class="row justify-content-center text-center">
  306. <h6> Ken Adams </h6>
  307. </div>
  308.  
  309. </div>
  310. </div>
  311. <div class="col-md-10">
  312. <h6>⭐⭐⭐⭐⭐ • Reviewed on January 1, 2019</h6>
  313. <h4 style="font-weight: 600;"> Whopper!! </h4>
  314. <h4> Good food and accommodating staff </h4>
  315. <p>My friends and I love burger king!! The fries, whoppers and burgers were delicious and worth
  316. it!!
  317. You'd never get tired of it!! Its a bit expensive but won't regret it.
  318. </p>
  319. <p>👍 91 people found this review helpful • 👍👎</p>
  320. </div>
  321. </div>
  322.  
  323. <!-- Review #2 -->
  324. <div class="row mb-5">
  325. <div class="col-md-2 mb-3 pt-3">
  326. <div class="container">
  327. <div class="row mb-3 justify-content-center">
  328. <img src="./images/allisonburgers-image.jpg" alt="" style="width: 100px; height: 75px;"
  329. class="rounded-circle">
  330. </div>
  331. <div class="row justify-content-center text-center">
  332. <h6> Allison Burgers </h6>
  333. </div>
  334.  
  335. </div>
  336. </div>
  337. <div class="col-md-10">
  338. <h6>⭐⭐⭐⭐⭐ • Reviewed on January 1, 2019</h6>
  339. <h4 style="font-weight: 600;"> BK is BK anywhere in the world </h4>
  340. <p>Burgers were about the same as in the US. Been years since I I have been at one in the US but
  341. about the same. Tasty fresh and flame broiled. Delivery must be difficult as traffic is
  342. horrible. Eat in and relax. We did it at 1:30am HAha. cheers!!!</p>
  343. <p>👍 109 people found this review helpful • 👍👎</p>
  344. </div>
  345. </div>
  346.  
  347. </div>
  348. </div>
  349. </div>
  350.  
  351. </body>
  352.  
  353. </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!