forked from udacity/mws-restaurant-stage-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrestaurant.html
129 lines (123 loc) · 15.4 KB
/
restaurant.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#003175">
<meta name="description" content="Reviews of the best restaurants if New York">
<link rel="manifest" href="/manifest.json">
<link src="//normalize-css.googlecode.com/svn/trunk/normalize.css">
<style>
@charset "utf-8";:root{--primary-color:#003175}*{box-sizing:border-box}html{font-size:15px}body,p{font-family:Arial,Helvetica,sans-serif;font-size:1rem;color:#333;line-height:1.5}body{background-color:#fdfdfd;margin:0;position:relative;max-width:100%}li,ul{font-family:Arial,Helvetica,sans-serif;font-size:1rem;color:#333}a{color:var(--primary-color);text-decoration:none}a.hidden{position:absolute;left:-999px}h1,h2,h3{font-family:Arial,Helvetica,sans-serif;margin:0 0 20px}aside,footer,header,nav,section{display:block}#maincontent{background-color:#f3f3f3;min-height:100%}#footer{background-color:#222;color:#ccc;font-size:.9rem;letter-spacing:1px;padding:25px;text-align:center;text-transform:uppercase}#footer a{color:#fff}nav{display:flex;align-items:center;justify-content:center;width:100%;height:80px;background-color:#252831;text-align:center}nav h1{margin:auto}nav h1 a{color:#fff;font-size:1.1rem;font-weight:200;letter-spacing:10px;text-transform:uppercase}#breadcrumb{padding:10px 40px 16px;list-style:none;background-color:#eee;font-size:1.05rem;margin:0;width:calc(50%)}#breadcrumb li{display:inline}#breadcrumb li a{color:var(--primary-color);text-decoration:none}#map{height:400px;width:100%;background-color:#ccc}button{background-color:var(--primary-color);border-bottom:3px solid #eee;color:#fff;display:inline-block;font-size:.8rem;padding:8px 30px 10px;text-align:center;text-decoration:none;text-transform:uppercase}.inside header{position:fixed;top:0;width:100%;z-index:1000}.inside #map-container{background:#00f none repeat scroll 0 0;height:87%;position:fixed;right:0;top:80px;width:50%;z-index:1001}.inside #map{background-color:#ccc;height:100%;width:100%}.inside #footer{bottom:0;width:50%}#restaurant-name{color:var(--primary-color);font-family:Arial,sans-serif;font-size:1.2rem;font-weight:200;letter-spacing:0;margin:15px 0 30px;text-transform:uppercase;line-height:1.1}#restaurant-address{font-size:1rem;margin:10px 0}#restaurant-cuisine{background-color:#333;color:#ddd;font-size:1rem;font-weight:300;letter-spacing:10px;margin:0 0 20px;padding:2px 0;text-align:center;text-transform:uppercase}#restaurant-container,#reviews-container{position:relative;border-bottom:1px solid #d9d9d9;border-top:1px solid #fff;padding:140px 40px 30px;width:50%}#reviews-container{padding:30px 40px}#reviews-container h3{color:var(--primary-color);font-size:1.5rem;font-weight:300;letter-spacing:-1px;padding-bottom:1px}#reviews-container form{display:flex;flex-wrap:wrap}#reviews-container form fieldset{width:100%}#reviews-container form .form--row{width:100%;margin:10px 0}#reviews-container form input,#reviews-container form textarea{padding:5px;min-width:100px}#reviews-container form textarea{width:100%;height:100px}#reviews-list{margin:0;padding:0}.starability-basic{display:block;position:relative;width:150px;min-height:60px;padding:0;border:none}.starability-basic>input{position:absolute;margin-right:-100%;opacity:0}.starability-basic>label{position:relative;display:inline-block;float:left;width:30px;height:30px;font-size:.1em;color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=);background-repeat:no-repeat;background-position:0 -30px}.starability-basic>label::before{content:'';position:absolute;display:block;height:30px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=);background-position:0 30px;opacity:0}.starability-basic>label:nth-of-type(5)::before{width:120px;left:-120px}.starability-basic>label:nth-of-type(4)::before{width:90px;left:-90px}.starability-basic>label:nth-of-type(3)::before{width:60px;left:-60px}.starability-basic>label:nth-of-type(2)::before{width:30px;left:-30px}.starability-basic>label:nth-of-type(1)::before{width:0;left:0}@media screen and (-webkit-min-device-pixel-ratio:2),screen and (min-resolution:192dpi){.starability-basic>label{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAB4CAMAAACZ62E6AAABAlBMVEUAAACZmZmampr2vSObm5v/yiufn5+ampr1viP1viSZmZn2viOZmZmampqampr2viSampqampqcnJz5vyScnJz3wSf/wyn/xiujo6Oqqqr/0C/1vSOampr2viP2viOampr2viP2vST2viOampqampqampr1vyP3viSampr2vyT4vyX3viSbm5ubm5v5wCT8xSmgoKCampqampr3vyb2wiWenp72viOampqZmZmampr2viP2viP1viSampqbm5v2vyT3viObm5v4vyadnZ34wSSbm5v2viSZmZn2viP2vST2viP2viT1viOZmZn2viT2viX3viT3vyb2vyOZmZn1vSOZmZlNN+fKAAAAVHRSTlMA9uz4PQwS8O7r5+fTw4yMelw2MB0dFRELBgbS+/Hfu7uxqKWdg4N7ZmZMPi8pKRgPs0w7Nhb14drKw6Gck21tXkNDIyMZ1rDLycTBtaqVknlfV0sGP8ZwAAADW0lEQVRYw9zWvYqDQBSG4TPDoCAqKhYKQgoVLFaIgZCkiCBBUqVazv3fyu4aEXWdM85Uy779A+LP58AfTQgw73AwtxFiZIwbxMbUfuB3H4b49YNfZrbGodoI52+cm9hH9sbZwwAXOFbo2zjDsSzWxnecuuvaM8MpdtbEPs7y9azF5phZWrjERaWOPdpLbB81cICrgv3W4mvMLbU6RmFQeA5u5HhFEEbHLdWLsMxvHJXxW16Goh+ZqPyny1Az5j79SsCJoWHsBNAxQ9sNF26bWFuMC8v1LY+mmeTadjaqtaNnnXoxWBcde1nNWnzdb68xrOqvu22/MTzuPutujpJ122NvluSb8tTWk85CclDZQwLS0oa2TQpEKacsJy0kSJaQOKJxROKKxhWJ7zS+k9ijsUdim8Y2ZWNUFBP4pMKfOv8onX9WrsI5gd3VVLXtatxcuU0znGUHCUAS2DgrS6mT6hTzrXEjfIZj5Dk2xKkihqm4wKlQfQRqalhUP9UHo3FIPAG/Et44JVLsDDf0JHmB3OEByOwZES8hSAsviGjBdh3ylh6plmMnW4IyAUVJWcE/76vTell1EIaiMBwIAcWBA9GC0lIdKFXQQUsHVVCklN7ojf3+z3JOxYqK2TH555+K6CJJQtRbr9XtDmCnjH0AX9Va8J+liIMvDtRsCk2pEs6hKVexR2g7KuDihwt5a9MfprY0fkLXU9ZmFLpoJolN6GXKWWfZx0tHCocwKJSxC22ItYUEjmBUJHFjfYz1xQxlfaLiZsBExq2IPtbkNbLtOwwuGgjTLkH43mYtSzam7+1Bsr3nm5uExBQUozEh9V7N7uvmwZcqdpm0C6vJW63bZEuXtbrV2zpDzhrpYLBWMnY1mjV7JWFtMio7zbWniWFxvHnWm1yGxXmOPXP+L3YV2ysjnNhaZNeMcHPvuL27BMnVMaujljBAYyje4niH4g2ONyh+4PiB4gOODyjWcKxh1gZBNoJjEY4R/BLhF4IDEQ4QPBoEoyxH4+bxrUsHyxwxQlg0WHXqYifVLmo67cKY/UtaXFxBV26TLjuHrkp8BPJTMij1xQejdkgO24nf7dBOCRcbzQuNOR9Qs64GzzrfQa8It2oFAA6Zrga9xEeq1KHmLUHIiCAWInsg1x/MLqkMsItF8QAAAABJRU5ErkJggg==);background-size:30px auto}}@media (max-width:665px){.inside header{position:relative}.inside #map-container{position:relative;height:300px;top:auto}.inside #restaurant-container{padding:30px 40px}.inside aside,.inside section{width:100%!important}.inside #breadcrumb,.inside #footer{width:100%}}
</style>
<link rel="preload" src="https://normalize-css.googlecode.com/svn/trunk/normalize.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" src="https://normalize-css.googlecode.com/svn/trunk/normalize.css"></noscript>
<!-- Main CSS file -->
<link rel="preload" href="css/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/styles.css"></noscript>
<link rel="preload" href="css/media-queries.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/media-queries.css"></noscript>
<link rel="preload" href="css/snackbar.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/snackbar.min.css"></noscript>
<link rel="preload" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""></noscript>
<script>!function(n){"use strict";n.loadCSS||(n.loadCSS=function(){});var o=loadCSS.relpreload={};if(o.support=function(){var e;try{e=n.document.createElement("link").relList.supports("preload")}catch(t){e=!1}return function(){return e}}(),o.bindMediaToggle=function(t){var e=t.media||"all";function a(){t.media=e}t.addEventListener?t.addEventListener("load",a):t.attachEvent&&t.attachEvent("onload",a),setTimeout(function(){t.rel="stylesheet",t.media="only x"}),setTimeout(a,3e3)},o.poly=function(){if(!o.support())for(var t=n.document.getElementsByTagName("link"),e=0;e<t.length;e++){var a=t[e];"preload"!==a.rel||"style"!==a.getAttribute("as")||a.getAttribute("data-loadcss")||(a.setAttribute("data-loadcss",!0),o.bindMediaToggle(a))}},!o.support()){o.poly();var t=n.setInterval(o.poly,500);n.addEventListener?n.addEventListener("load",function(){o.poly(),n.clearInterval(t)}):n.attachEvent&&n.attachEvent("onload",function(){o.poly(),n.clearInterval(t)})}"undefined"!=typeof exports?exports.loadCSS=loadCSS:n.loadCSS=loadCSS}("undefined"!=typeof global?global:this);</script>
<link rel="preconnect" href="http://localhost:1337">
<title>Restaurant Info</title>
</head>
<body class="inside">
<a class="hidden" href="#maincontent">Skip to main content</a>
<!-- Beginning header -->
<header>
<!-- Beginning nav -->
<nav>
<h1><a href="/">Restaurant Reviews</a></h1>
</nav>
<!-- Beginning breadcrumb -->
<ul id="breadcrumb" role="navigation" aria-label="Breadcrumb">
<li><a href="/">Home</a></li>
</ul>
<!-- End breadcrumb -->
<!-- End nav -->
</header>
<!-- End header -->
<!-- Beginning map -->
<aside id="map-container" aria-hidden="true">
<div id="map" aria-label="Map" role="application"></div>
</aside>
<!-- Beginning main -->
<main id="maincontent">
<!-- End map -->
<div>
<!-- Beginning restaurant -->
<section id="restaurant-container">
<h2 id="restaurant-name" tabindex="0"></h2>
<picture id="restaurant-img-picture" tabindex="0"></picture>
<p id="restaurant-cuisine" tabindex="0"></p>
<p id="restaurant-address" tabindex="0"></p>
<table id="restaurant-hours" tabindex="0"></table>
<form id="fav--form" style="margin-top: 10px;">
<input id="toggle--fav" type="checkbox" name="is_favourite" value="true">
<label for="toggle--fav">Mark as favourite</label>
</form>
</section>
<!-- end restaurant -->
<!-- Beginning reviews -->
<section id="reviews-container">
<h3>Reviews</h3>
<form action="http://localhost:1337/reviews/" method="post" id="review--form">
<fieldset>
<legend>Add a review</legend>
<div class="form--row">
<label for="name">Your name:</label><br>
<input id="name" type="text" name="name" required>
</div>
<div class="form--row">
<fieldset class="starability-basic">
<legend>Default star rating:</legend>
<input type="radio" id="rate1" name="rating" value="1" required>
<label for="rate1" title="Terrible">1 star</label>
<input type="radio" id="rate2" name="rating" value="2" required>
<label for="rate2" title="Not good">2 stars</label>
<input type="radio" id="rate3" name="rating" value="3" required>
<label for="rate3" title="Average">3 stars</label>
<input type="radio" id="rate4" name="rating" value="4" required>
<label for="rate4" title="Very good">4 stars</label>
<input type="radio" id="rate5" name="rating" value="5" required>
<label for="rate5" title="Amazing">5 stars</label>
</fieldset>
</div>
<div class="form--row">
<label for="review">Enter your review:</label><br>
<textarea id="review" name="comments"></textarea>
</div>
<input id="restaurant_id" type="hidden" name="restaurant_id" value="">
<div class="form--row">
<button type="submit">Post</button>
</div>
</fieldset>
</form>
<ul id="reviews-list"></ul>
</section>
<!-- End reviews -->
</div>
<div id="offline--state" hidden role="alert">You are offline</div>
</main>
<!-- End main -->
<!-- Beginning footer -->
<footer id="footer">
Copyright (c) 2017 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
</footer>
<!-- End footer -->
<script defer src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<!-- Beginning scripts -->
<!-- Database helpers -->
<script src="js/idb.js"></script>
<script src="js/dbhelper.js"></script>
<!-- Main javascript file -->
<script src="js/common.js"></script>
<script src="js/restaurant_info.js"></script>
<!-- Google Maps -->
<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_tKbW6A5pQ-eupxI56myUnHLqYCzOjKo&libraries=places&callback=initMap"></script> -->
<!-- End scripts -->
</body>
</html>