forked from udacity/mws-restaurant-stage-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrestaurant.html
134 lines (127 loc) · 7.93 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
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="theme-color" content="#f3f3f3">
<link rel="manifest" href="/manifest.webmanifest">
<!--
relying on browser behavior for determining fave icon is discouraged: https://www.w3.org/2005/10/howto-favicon
media type: https://stackoverflow.com/a/28300054/781824
-->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- Normalize.css for better cross-browser consistency -->
<link rel="stylesheet" src="https://normalize-css.googlecode.com/svn/trunk/normalize.css">
<!-- Main CSS file -->
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<!-- Lighthouse performance recommendation -->
<link rel="preconnect" href="http://localhost:1337">
<title>Restaurant Info - Restaurant Reviews</title>
</head>
<body class="inside">
<div style="height: 0; width: 0; visibility: hidden;">
<!-- SVG is free to use/modify, here's the origin: https://en.m.wikipedia.org/wiki/File:Emblem-star.svg -->
<svg id="fave-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"><style>.fave-icon__highlight, .fave-icon__star { fill-opacity: inherit; } .fave-icon__star { stroke: currentColor; stroke-width: inherit; }</style><defs><linearGradient id="b"><stop offset="0" stop-color="#e6cf00"/><stop offset="1" stop-color="#fde94a"/></linearGradient><linearGradient id="a"><stop offset="0" stop-color="#fcf9fb"/><stop offset="1" stop-color="#fcf9fb" stop-opacity="0"/></linearGradient><linearGradient x1="14.66" y1="7.024" x2="24.031" y2="34.826" id="d" xlink:href="#a" gradientUnits="userSpaceOnUse"/><radialGradient cx="24" cy="22" r="22" fx="24" fy="22" id="c" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(-3.8 6.8)"/></defs><path class="fave-icon__star" stroke-opacity="1" d="M37.31 41.5l-13.28-6.674-13.295 6.645L13.29 27.37l-10.738-10 14.859-2.043L24.069 2.5l6.628 12.84 14.854 2.074-10.762 9.978L37.311 41.5z" fill="url(#c)" stroke="#c4a000"/><path class="fave-icon__highlight" stroke-width="1" stroke-opacity="1" d="M17.732 15.79l6.332-12.203 6.305 12.208L44.44 17.76l-3.62 3.36c-16.437-3.687-9.455 7.221-27.568 9.244l.568-3.18-10.16-9.466 14.072-1.928z" opacity=".8" fill="url(#d)"/><path stroke-width="1" stroke-opacity="1" d="M35.974 39.713l-11.946-6.004-11.945 5.97 2.28-12.67-9.585-8.939 13.278-1.822 6.007-11.57 5.982 11.578 13.278 1.857-9.61 8.922 2.26 12.678z" opacity=".69" fill="none" stroke="#fff"/></svg>
</div>
<!-- Beginning header -->
<header class="header">
<!-- Beginning nav -->
<nav class="main-nav">
<!-- We skip to container instead of the h1, b/c the h1 causes the page to scroll to it,
if the viewport is > 768px, the h1 will tuck underneath the nav/breadcrumb, so the
user won't even be able to see it. -->
<a href="#restaurant-container" class="sr-only sr-only--focusable">Skip to main content</a>
<h1><a href="/" class="header__title__link">Restaurant Reviews</a></h1>
</nav>
<!-- End nav -->
<!-- Beginning breadcrumb -->
<nav id="breadcrumb" >
<span class="breadcrumb__list-item"><a href="/" class="breadcrumb__list-item__link">Home</a></span>
</nav>
<!-- End breadcrumb -->
</header>
<!-- End header -->
<!-- Beginning main -->
<main id="maincontent">
<!-- Beginning restaurant -->
<section id="restaurant-container" class="restaurant-container" tabindex="-1">
<h2 id="restaurant-name"></h2>
<button id="restaurant-fave" class="parent-fave-icon parent-fave-icon--notloaded">
<svg class="fave-icon fave-icon--notloaded" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<use xlink:href="#fave-icon" />
</svg>
</button>
<!-- maintain aspect ratio of img, credit:
@link https://codeburst.io/keeping-aspect-ratio-with-html-and-no-padding-tricks-40705656808b -->
<div class="restaurant-img-sizer">
<svg viewBox="0 0 4 3"></svg>
<img alt="" id="restaurant-img">
</div>
<div id="restaurant-cuisine"></div>
<div id="restaurant-address"></div>
<table id="restaurant-hours"></table>
</section>
<!-- end restaurant -->
<!-- Beginning map -->
<section id="map-container" role="application" aria-label="Map marking restaurant location, generated by Mapbox">
<a href="#reviews-container" class="sr-only sr-only--focusable">Skip to Reviews</a>
<div id="map" aria-live="polite"></div>
</section>
<!-- End map -->
<!-- Beginning reviews -->
<section id="reviews-container" tabindex="-1">
<form id="review-form" method="POST" action="http://localhost:1337/reviews/">
<fieldset class="review-form__fieldset">
<legend>Write your own review</legend>
<div class="review-form__field-label-pair">
<label class="review-form__label" for="write-review-name">Name:</label>
<!-- non-empty pattern from: https://stackoverflow.com/questions/13766015/is-it-possible-to-configure-a-required-field-to-ignore-white-space?lq=1#comment48114359_17323588 -->
<input class="review-form__field" type="text" id="write-review-name" name="name" placeholder="Your name here" pattern="\S(.*\S)" required>
</div>
<div class="review-form__field-label-pair">
<label class="review-form__label" for="write-review-rating">Rating: </label>
<input class="review-form__field" type="range" id="write-review-rating" name="rating" min="1" max="5" list="write-review-rating-ticks" required>
<datalist id="write-review-rating-ticks">
<option value="1" label="1">
<option value="2" label="2">
<option value="3" label="3">
<option value="4" label="4">
<option value="5" label="5">
</datalist>
</div>
<div class="review-form__field-label-pair">
<label class="review-form__label" for="write-review-comments">Review: </label>
<textarea class="review-form__field review-form__field--textarea" id="write-review-comments" name="comments" rows="7" required></textarea>
</div>
<button id="write-review-submit" class="review-form__submit" type="submit">Submit review</button>
</fieldset>
</form>
<h2>Reviews</h2>
<div id="reviews-list"></div>
</section>
<!-- End reviews -->
</main>
<!-- End main -->
<!-- Beginning footer -->
<footer id="footer">
Copyright © 2018 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
</footer>
<!-- End footer -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<!-- Beginning scripts -->
<script src="/node_modules/idb/lib/idb.js"></script>
<!-- Database helpers -->
<script src="js/dbhelper.js"></script>
<!-- Main javascript file -->
<script src="js/restaurant_info.js"></script>
<!-- :focus-visible polyfill dependency which older browsers may not support, and IE11 has limited support -->
<!-- Right now nothing would work in IE11 due to ES6+, so let's keep it out for now.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Element.prototype.classList"></script>
-->
<!-- non high-fidelity polyfill for :focus-ring -->
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
<script src="js/register-sw.js"></script>
</body>
</html>