forked from udacity/mws-restaurant-stage-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
restaurant.html
160 lines (140 loc) · 6.16 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#333333">
<!-- Main CSS file -->
<link rel="stylesheet" href="css/styles.css">
<link rel="manifest" href="/manifest.json">
<title>Restaurant Info</title>
</head>
<body class="inside">
<!-- Beginning header -->
<header>
<!-- Beginning nav -->
<nav>
<h1><a href="/">Restaurant Reviews</a></h1>
</nav>
<!-- Beginning breadcrumb -->
<ol id="breadcrumb" aria-label="Breadcrumbs">
<li><a href="/">Home</a></li>
</ol>
<!-- End breadcrumb -->
<!-- End nav -->
</header>
<!-- End header -->
<!-- Beginning main -->
<main id="maincontent">
<!-- Beginning map -->
<section id="map-container">
<div id="map" role="application" aria-label="Map of restaurants"></div>
</section>
<!-- End map -->
<!-- Beginning restaurant -->
<section id="restaurant-container">
<h2 id="restaurant-name"></h2>
<img id="restaurant-img">
<p id="restaurant-cuisine"></p>
<p id="restaurant-address"></p>
<table id="restaurant-hours"></table>
<!-- favorite this restaurant -->
<div id="restaurant-favorite">
<input type="checkbox" id="heart-toggle" class="visuallyhidden"/>
<label for="heart-toggle">
<div>Like Us?</div>
<svg viewBox="-10 -10 500 500" id="svg-heart" >
<path d="M0 200 v-200 h200
a100,100 90 0,1 0,200
a100,100 90 0,1 -200,0
z"/>
<title>Favorite</title>
<use xlink:href="#svg-heart" />
</svg>
</label>
</div>
</section>
<!-- end restaurant -->
<!-- Beginning reviews -->
<section id="reviews-container">
<ul id="reviews-list">
<!-- placeholder for generated list -->
</ul>
</section>
<!-- End reviews -->
<!-- Add reviews -->
<form id="review-form">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" placeholder="First Last" autocapitalize="words" autocomplete="on" pattern="[A-Z][A-Za-z' -]+" minlength="3" maxlength="50" required>
<fieldset id="review-radios">
<legend>How would you rate us?</legend>
<input class="visuallyhidden" value="0" id="star0" type="radio" name="rating" checked>
<label for="star0">
<span class="visuallyhidden">0 Stars</span>
<svg viewBox="0 0 512 512">
<g stroke-width="70" stroke-linecap="square">
<path d="M91.5,442.5 L409.366489,124.633512"></path>
<path d="M90.9861965,124.986197 L409.184248,443.184248"></path>
</g>
</svg>
</label>
<input class="visuallyhidden" type="radio" id="star1" name="rating" value="1" required>
<label for="star1">
<span class="visuallyhidden">1 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input class="visuallyhidden" type="radio" id="star2" name="rating" value="2" required>
<label for="star2">
<span class="visuallyhidden">2 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input class="visuallyhidden" type="radio" id="star3" name="rating" value="3" required>
<label for="star3">
<span class="visuallyhidden">3 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input class="visuallyhidden" type="radio" id="star4" name="rating" value="4" required>
<label for="star4">
<span class="visuallyhidden">4 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
<input class="visuallyhidden" type="radio" id="star5" name="rating" value="5" required>
<label for="star5">
<span class="visuallyhidden">5 Star</span>
<svg viewBox="0 0 512 512">
<path d="M512 198.525l-176.89-25.704-79.11-160.291-79.108 160.291-176.892 25.704 128 124.769-30.216 176.176 158.216-83.179 158.216 83.179-30.217-176.176 128.001-124.769z"></path>
</svg>
</label>
</fieldset>
<label for="comments">What did you think?</label>
<textarea name="comments" id="comments" placeholder="So long, and thanks for all the fish." cols="35" rows="5" minlength="2" maxlength="300" autocapitalize="sentences" wrap="hard" spellcheck required></textarea>
<button id="review-submit" type="submit">Add Review</button>
</form>
</main>
<!-- End main -->
<!-- Beginning footer -->
<footer id="footer">
Copyright © 2018 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
</footer>
<!-- End footer -->
<!-- Beginning scripts -->
<script src="js/register.js"></script>
<!-- IndexedDB -->
<script src="js/idb.js"></script>
<!-- Database helpers -->
<script src="js/dbhelper.js"></script>
<!-- Main javascript file -->
<script src="js/restaurant_info.js"></script>
<!-- Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQRGhtax0u-RPTIxs_jghnucw9sJ-8Acw&libraries=places&callback=initMap"></script>
<!-- End scripts -->
</body>
</html>