forked from udacity/mws-restaurant-stage-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrestaurant.html
89 lines (79 loc) · 13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width= device-width, initial-scale=1">
<meta name="theme-color" content="#3367D6">
<meta name="description">
<link rel="icon" href="/img/logo.png" sizes="16x16 32x32" type="image/png">
<!-- Normalize.css for better cross-browser consistency -->
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="manifest" href="/manifest.json">
<!-- Main CSS file -->
<!-- <link rel="stylesheet" href="css/styles.css" type="text/css"> -->
<style type="text/css">
body,td,th,p{font-family:Arial, Helvetica, sans-serif;font-size:10pt;color:#333;line-height:1.5}body{background-color:#fdfdfd;margin:0;position:relative}ul,li{font-family:Arial, Helvetica, sans-serif;font-size:10pt;color:#333}a{color:orange;text-decoration:none}a:hover,a:focus{color:#3397db;text-decoration:none}a img{border:none 0px #fff}h1,h2,h3,h4,h5,h6{font-family:Arial, Helvetica, sans-serif;margin:0 0 20px}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}#maincontent{background-color:#f3f3f3;min-height:100%}#footer{background-color:#444;color:#aaa;font-size:8pt;letter-spacing:1px;padding:25px 0px;text-align:center;text-transform:uppercase;width:100%}nav{width:100%;background-color:#252831;text-align:center}nav h1{margin:auto}nav h1 a{color:#fff;font-size:14pt;font-weight:100;letter-spacing:10px;text-transform:uppercase}#breadcrumb{padding:126px 40px 16px;list-style:none;background-color:#eee;font-size:17px;margin:0;width:calc(50% - 80px)}#breadcrumb li{display:inline}#breadcrumb li+li:before{padding:8px;color:black;content:"/\00a0"}#breadcrumb li a{color:#0275d8;text-decoration:none}#breadcrumb li a:hover{color:#01447e;text-decoration:underline}#map-container{height:300px}#map{height:100%;width:100%;background-color:#ccc}.filter-options{width:100%;min-height:50px;padding:15px 0;background-color:#007dbb;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.filter-options h2{color:#ffffff;font-size:1rem;font-weight:normal;line-height:1;margin:0 20px}.filter-options select{background-color:#ffffff;border:1px solid #fff;font-family:Arial,sans-serif;font-size:11pt;height:35px;letter-spacing:0;margin:10px;padding:0 10px;width:200px}#restaurants-list{background-color:#f3f3f3;list-style:outside none none;margin:0 auto;padding:30px 15px 60px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:1200px}#restaurants-list li{font-family:Arial,sans-serif;min-height:380px;text-align:left;width:33%;padding-bottom:30px}.restaurant-item{margin:0 15px 30px;border:2px solid #ccc;background-color:#fff;padding:20px;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.restaurant-item p:last-of-type{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}#restaurants-list .restaurant-img{background-color:#ccc;display:block;margin:0;max-width:100%;min-width:100%}#restaurants-list li h3{color:#f18200;font-family:Arial,sans-serif;font-size:14pt;font-weight:200;letter-spacing:0;line-height:1.3;margin:20px 0 10px;text-transform:uppercase}#restaurants-list p{margin:0;font-size:11pt}#restaurants-list li a{background-color:orange;border-bottom:3px solid #eee;color:#fff;display:inline-block;font-size:10pt;margin:15px 0 0;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{height:calc(100% - 110px);position:fixed;right:0;top:110px;width:50%}.inside #map{background-color:#ccc;height:100%;width:100%}.inside #footer{bottom:0;position:absolute}#restaurant-name{color:#f18200;font-family:Arial,sans-serif;font-size:20pt;font-weight:200;letter-spacing:0;margin:15px 0 30px;text-transform:uppercase;line-height:1.1}#restaurant-img{width:90%}#restaurant-address{font-size:12pt;margin:10px 0px}#restaurant-cuisine{background-color:#333;color:#ddd;font-size:12pt;font-weight:300;letter-spacing:10px;margin:0 0 5px;padding:2px 0;text-align:center;text-transform:uppercase;width:90%}#restaurant-container,#reviews-container{border-bottom:1px solid #d9d9d9;border-top:1px solid #fff;width:calc((100% /2) - 60px)}#restaurant-container{padding:0px 30px 80px}#reviews-container{padding:30px 30px 80px}#reviews-container h3{color:#f58500;font-size:24pt;font-weight:300;letter-spacing:-1px;padding-bottom:1pt}#reviews-list{margin:0;padding:0}#reviews-list li{background-color:#fff;border:2px solid #f3f3f3;display:block;list-style-type:none;margin:0 0 30px;overflow:hidden;position:relative;width:85%}#restaurant-hours td{color:#666}nav{padding:40px 0px}#restaurant-name{width:95%;float:left}#favorite{width:5%;float:right;height:29px;margin:15px 0 30px;border:none;cursor:pointer;background-color:transparent;background:url("img/favorite.svg") no-repeat center center;background-size:100%}#favorite.is_favorite{background-color:transparent;background:url("img/is_favorite.svg") no-repeat center center;background-size:100%}#favorite.is_favorite:hover{background-color:transparent;background:url("img/favorite.svg") no-repeat center center;background-size:100%}#favorite.is_not_favorite{background-color:transparent;background:url("img/favorite.svg") no-repeat center center;background-size:100%}#favorite.is_not_favorite:hover{background-color:transparent;background:url("img/is_favorite.svg") no-repeat center center;background-size:100%}#restaurant-cuisine,#restaurant-img,#restaurant-address,#restaurant-hours{width:100%}#reviews-list li{width:initial}#reviews-list li{border-top-left-radius:30px;border-bottom-right-radius:30px}.reviewHeader{padding:15px 20px;height:25px;background-color:#333333}.reviewName{float:left;color:#ffffff;margin:auto}p.reviewName,#breadcrumb li{font-size:13pt}.reviewDate{float:right;color:#c8c8c8;margin:auto}td,th,p{font-size:11pt}.reviewRating{clear:both;color:#ffffff;background-color:#ffa500;padding:5px 13px;margin:15px 20px;border-radius:3px;display:inline-block}p.reviewRating{text-transform:uppercase}.reviewBody{padding:0 20px 20px;margin:0 0 10px;color:#757575}#restaurant-address{color:#ffffff;background-color:#ffa500;padding:5px 13px;margin:0 0 20px;display:block;width:initial}table#restaurant-hours{background:white;border:1px solid #C1C3D1;border-radius:3px;border-collapse:collapse;height:320px;width:100%}table#restaurant-hours tr{border-bottom:1px solid #C1C3D1;color:#666B85;font-size:16px;font-weight:normal;text-shadow:0 1px 1px rgba(255,255,255,0.1)}table#restaurant-hours tr:last-child{border-bottom:none}table#restaurant-hours tr:nth-child(odd) td{background:#EBEBEB}table#restaurant-hours td{padding:10px;text-align:left;vertical-align:middle}table#restaurant-hours tr td:first-child{border-right:1px solid #C1C3D1}.skip-link{position:absolute;top:-1000px;left:-1000px;overflow:hidden}a.skip-link:active,a.skip-link:focus,a.skip-link:hover{position:relative;left:0;top:0;overflow:visible}#formDiv{margin-bottom:30px}#formDiv h4{color:#f58500;font-size:18pt;font-weight:300;letter-spacing:-1px;padding-bottom:1pt}#formDiv form{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}#formDiv input{width:calc((100% - 94px)/2);border:1px solid #c1c3d1;border-radius:4px;padding:12px 20px}#formDiv input:first-of-type{margin-right:10px}#formDiv textarea{width:100%;resize:none;margin:10px 0;height:130px;border:1px solid #c1c3d1;border-radius:4px;padding:12px 20px}#formDiv button{background-color:orange;border:none;cursor:pointer;color:#fff;display:inline-block;font-size:10pt;margin:auto;padding:8px 30px 10px;text-align:center;text-decoration:none;text-transform:uppercase}#formDiv button:hover{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,0.24),0 2px 10px 0 rgba(0,0,0,0.19);box-shadow:0 4px 8px 0 rgba(0,0,0,0.24),0 2px 10px 0 rgba(0,0,0,0.19)}@media screen and (max-width: 1000px){#restaurants-list li{width:50%}#restaurant-name{width:94%}#favorite{width:6%}}@media screen and (max-width: 827px){#restaurant-container{padding:0px 20px 30px}#reviews-container{padding:30px 20px 65px}#restaurant-container,#reviews-container{width:calc((100% /2) - 40px)}#restaurant-name{width:93%}#favorite{width:7%}}@media screen and (max-width: 800px) and (min-width: 713px){#breadcrumb li{font-size:18px}#restaurant-name{font-size:19pt}#restaurant-name{width:94%}#favorite{width:6%}}@media screen and (max-width: 713px){#breadcrumb{width:calc(100% - 40px);font-size:22px;padding:10px 20px 16px}#breadcrumb li{font-size:22px}.inside #map-container,#map-container{height:300px;width:100%}#restaurant-container{padding:0px 20px 30px;width:calc((100% - 40px))}#reviews-container{padding:30px 20px 65px;width:calc((100% - 40px))}#reviews-list li{width:unset}#restaurant-cuisine{width:100%}#restaurant-img{width:100%}.inside #maincontent{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:110px}.inside #map-container{position:static}#restaurant-container{padding-top:0}#restaurant-name{width:96%}#favorite{width:4%}}@media screen and (max-width: 650px){#restaurants-list li{width:100%}#restaurant-name{width:95%}#favorite{width:5%}}@media screen and (max-width: 577px){.filter-options select{width:-webkit-min-content;width:-moz-min-content;width:min-content}}@media screen and (max-width: 480px){.filter-options{height:76px;padding:10px 0}.filter-options h2{margin-top:10px}#restaurant-name{width:93%}#favorite{width:7%}}@media screen and (max-width: 450px){nav h1 a{font-size:13pt;margin:0 10px}#breadcrumb{padding-top:5px;padding-bottom:11px}#breadcrumb li{font-size:21px}#footer{font-size:7pt;padding:18px 0px}.inside #maincontent{margin-top:110px}#reviews-container{padding:30px 20px 49px}}@media screen and (max-width: 425px){nav h1{margin:0 20px}nav{padding:20px 0px}#breadcrumb{padding-top:5px;padding-bottom:5px}#breadcrumb li{font-size:20px}.inside #maincontent{margin-top:100px}}@media screen and (max-width: 360px){#breadcrumb{text-align:center;width:100%;padding:5px 0px}#restaurant-name{width:91%}#favorite{width:9%}#formDiv input{width:100%}#formDiv input:first-of-type{margin-right:0;margin-bottom:10px}}@media screen and (max-width: 350px){.filter-options{height:130px}.filter-options select{width:-webkit-fill-available;width:-moz-available;margin:10px 20px}nav h1{margin:auto}}
</style>
<title>Restaurant Info</title>
</head>
<body class="inside">
<!-- Beginning header -->
<header>
<!-- Beginning nav -->
<nav>
<h1><a href="/">Restaurant Reviews</a></h1>
</nav>
</header>
<!-- End header -->
<!-- Beginning main -->
<main id="maincontent" role="main">
<!-- Beginning breadcrumb -->
<ul id="breadcrumb" aria-label="Breadcrumb" role="navigation">
<li><a href="/">Home</a></li>
</ul>
<!-- End breadcrumb -->
<!-- End nav -->
<!-- Beginning map -->
<section id="map-container" role="application" aria-label="Google map">
<a href="#restaurant-container" class="skip-link">skip the map</a>
<div id="map"></div>
</section>
<!-- End map -->
<!-- Beginning restaurant -->
<section id="restaurant-container" tabindex="-1">
<h2 id="restaurant-name"></h2>
<button id="favorite" aria-label="favorite"></button>
<img id="restaurant-img">
<p id="restaurant-cuisine"></p>
<p id="restaurant-address"></p>
<table id="restaurant-hours"></table>
</section>
<!-- end restaurant -->
<!-- Beginning reviews -->
<section id="reviews-container">
<ul id="reviews-list"></ul>
<div id="formDiv">
<h4>Add your review</h4>
<form id="form" name="reviewForm" onsubmit="review();return false">
<input type="text" name="name" placeholder="Name" aria-label="Name" required>
<input type="text" name="rating" placeholder="Rating: from 1 to 5" aria-label="Rating: from 1 to 5" required pattern="[1-5]">
<textarea name="comments" placeholder="How was your visit?" aria-label="How was your visit?" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
</section>
<!-- End reviews -->
</main>
<!-- End main -->
<!-- Beginning footer -->
<footer id="footer">
Copyright (c) 2017 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
</footer>
<!-- End footer -->
<!-- 'js/dbhelper.js', 'js/restaurant_info.js' -->
<script type="application/javascript" charset="utf-8" src="js/restaurant_info.js"></script>
<!-- Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBxcv426vnVa-jJpL5T5567JakNW1d-7Jw&libraries=places&callback=initMap"></script>
<!-- 'js/indexController.js', 'js/idb-library.js', 'js/idb-script.js' -->
<script type="text/javascript" src="js/offline-script.js"></script>
</body>
</html>