-
Notifications
You must be signed in to change notification settings - Fork 1
/
restaurant.html
147 lines (138 loc) · 11.7 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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="theme-color" content="#3397DB">
<link rel="manifest" href="/manifest.json">
<!-- CSS Stylesheets -->
<link rel="stylesheet" src="https://normalize-css.googlecode.com/svn/trunk/normalize.css" />
<!-- Website title -->
<title>Restaurant Info</title>
<!-- Favicons -->
<link rel="icon" href="img/favicon.ico">
</head>
<style type="text/css">
div#connectionStatus {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #673ab7;
color: #fff;
font-size: 16px;
z-index: 100000;
padding: 8px;
text-align: center;
}
body,h1,h2,h3,h4,h5,h6,li,p,td,th,ul{font-family:Arial,Helvetica,sans-serif}#footer,#restaurant-cuisine,#restaurant-name,#restaurants-list li h2,nav h1 a{text-transform:uppercase}body,li,p,td,th,ul{font-size:10pt;color:#333}#footer,#restaurant-cuisine,#restaurants-list,nav{text-align:center}#breadcrumb li a,a,a:focus,a:hover{text-decoration:none}#map,.inside header,header,nav{width:100%}body,p,td,th{line-height:1.5}body{background-color:#fdfdfd;margin:0;position:relative}.screen-reader-only{position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}#footer,#footer p{font-size:8pt;letter-spacing:1px}a{color:#8bc34a}a:focus,a:hover{color:#cddc39}a img{border:0 #fff}h1,h2,h3,h4,h5,h6{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;padding:25px}#footer p{color:#ccc;padding-left:5%;padding-right:5%}nav{height:auto;background-color:#252831}nav h1{margin:auto;padding-top:2%;padding-bottom:2%}nav h1 a{color:#fff;font-size:14pt;font-weight:200;letter-spacing:10px}#breadcrumb{padding:10px 40px 16px;list-style:none;background-color:#eee;font-size:17px;margin:0;position:relative}#breadcrumb li{display:inline}#breadcrumb li+li:before{padding:8px;color:#000;content:"/\00a0"}#breadcrumb li a{color:#3f51b5}#breadcrumb li a:hover{color:#01447e;text-decoration:underline}#map{height:400px;background-color:#ccc}.filter-options{width:100%;height:auto;padding-top:1%;padding-bottom:1%;background-color:#3397DB;align-items:center}.filter-options h2{color:#252831;font-size:1rem;font-weight:400;line-height:1;margin:0 10px}#restaurant-name,#restaurants-list li h2{font-family:Arial,sans-serif;font-weight:200;letter-spacing:0}.filter-options select{background-color:#fff;border:1px solid #fff;font-family:Arial,sans-serif;font-size:11pt;height:35px;letter-spacing:0;margin:10px;padding:0 10px;width:200px}.filter-options select:focus,.filter-options select:hover{border:1px solid #0275d8;background-color:#eee}#restaurants-list{background-color:#f3f3f3;list-style:none;margin:0;padding:30px 15px 60px}#restaurants-list li{background-color:#fff;border:2px solid #ccc;border-radius:25px;font-family:Arial,sans-serif;margin:2% 2.5%;min-height:380px;padding:25px 30px;text-align:left;width:40%;display:inline-block}#restaurants-list .restaurant-img{background-color:#ccc;display:block;margin:0;max-width:100%;min-height:248px;min-width:100%}#restaurants-list li a,#reviews-list li p:nth-child(3){color:#fff;display:inline-block;text-transform:uppercase}#restaurants-list li h2{color:#673AB7;font-size:14pt;line-height:1.3;margin:20px 0 10px}#restaurants-list p{margin:0;font-size:11pt}#restaurants-list li a{background-color:#3f51b5;border-bottom:3px solid #eee;font-size:10pt;margin:15px 0 0;padding:8px 30px 10px;text-align:center;text-decoration:none}#restaurants-list li a:focus,#restaurants-list li a:hover{background-color:#3f51b5d6;color:#fff;border:3px solid}.inside header{position:fixed;top:0;z-index:1000}.inside #map-container{background:#00f;height:87%;position:fixed;right:0;top:110px;width:50%}.inside #map{background-color:#ccc;height:100%;width:100%}.inside #footer{bottom:0;position:absolute;width:45%}#restaurant-name{color:#673AB7;font-size:20pt;margin:15px 0 30px;line-height:1.1}#restaurant-img{width:90%;border-top-left-radius:50px;border-bottom-right-radius:50px}#restaurant-address{font-size:12pt;margin:10px 0}#restaurant-cuisine{background-color:#333;color:#ddd;font-size:12pt;font-weight:300;letter-spacing:10px;margin:0 0 20px;padding:2px 0;width:90%}#restaurant-container,#reviews-container{border-bottom:1px solid #d9d9d9;border-top:1px solid #fff;padding:160px 40px 30px;max-width:50%}#reviews-container{padding:30px 40px 80px}#reviews-container h3{color:#673AB7;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%;border-bottom-right-radius:20px;border-top-left-radius:20px;padding-bottom:3%}#reviews-list li p{margin:0 0 10px;padding-left:3%;padding-right:3%;font-size:11pt}#reviews-list li p:first-child{background-color:#333;color:#fff;padding-top:2%;padding-bottom:2%;font-size:14pt}#reviews-list li p:nth-child(2){color:#ddd;font-size:10pt;position:absolute;top:4px;right:0;padding-top:2%;padding-bottom:2%}#reviews-list li p:nth-child(3){background-color:#673AB7;font-size:12pt;margin:10px 10px 10px 15px;padding:8px 12px;border-radius:5px;letter-spacing:2px}input#review_form-name,select#review_form-rating{width:54%;height:40px;border:1px solid #673ab7;margin-bottom:10px}#review_form{margin:3% 0 4%}select#review_form-rating{font-size:18px}textarea#review_form-comments{width:54%;height:100px;border-color:#673ab7;margin-bottom:10px}h2#review_form-head{margin-bottom:0}button#review_form-submit{background-color:#8bc34a;font-size:12pt;padding:12px 30px;border-radius:5px;letter-spacing:2px;color:#0a0a0a}button#review_form-submit:hover{background-color:#cddc39}.label-container{font-size:20px;font-weight:600;padding:0 0 10px}#restaurant-hours td{color:#666}@media screen and (max-width:1310px){#restaurants-list li{margin:2% 1.5%}}@media screen and (max-width:1024px){#restaurants-list li{margin:2% 1%}.inside #footer{width:100%;position:relative}}@media screen and (max-width:768px){#maincontent,#restaurant-img{max-width:100%}#footer,#restaurant-cuisine,#restaurant-img,#reviews-list li{width:100%}#restaurants-list li{width:80%;margin-left:auto;margin-right:auto}.inside #map-container{height:450px;position:relative;width:100%;top:115px}#restaurant-container,#reviews-container{max-width:100%;margin-left:auto;margin-right:auto;background-color:#f3f3f3}#footer{padding-left:0;padding-right:0}#reviews-container{padding:30px 40px}}@media screen and (max-width:500px){input#review_form-name,select#review_form-rating,textarea#review_form-comments{width:100%}}@media screen and (max-width:450px){nav h1{padding-top:4%;padding-bottom:4%}.filter-options select{width:96%;margin-left:2%;margin-right:2%}.filter-options h2{margin:10px}}
</style>
<body class="inside">
<!-- Connection message -->
<div class="connection-Status" id="connectionStatus">
You seem to be having an issue with your connection! You review will be uploaded once your connected again!
</div>
<p class="screen-reader-only"><a href="#maincontent">Skip to content</a></p>
<!-- Beginning header -->
<header>
<!-- Beginning nav -->
<nav role="navigation">
<h1><a href="/">Restaurant Reviews</a></h1>
<!-- Beginning breadcrumb -->
<ul id="breadcrumb" aria-label="Breadcrumb" role="navigation">
<li><button onclick="myFunction()" style="cursor: pointer;border: none;background-color: transparent;color: #3f51b5;">Show/Hide map</button></li>
<li><a href="/">Home</a></li>
</ul>
<!-- End breadcrumb -->
</nav>
<!-- End nav -->
</header>
<!-- End header -->
<!-- Beginning main -->
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("map-container");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<main id="maincontent">
<!-- Beginning map -->
<section id="map-container" role="application" style="display: none;">
<div id="map"></div>
</section>
<!-- End map -->
<!-- Beginning restaurant -->
<section id="restaurant-container">
<h2 id="restaurant-name"></h2>
<img id="restaurant-img">
<p id="restaurant-cuisine"></p>
<!-- Favourites -->
<div id="restaurant-isFavorite-container">
<label for="restaurant-isFavorite">Favorite Restaurant</label>
<input type="checkbox" name="restaurant-isFavorite" id="restaurant-isFavorite">
</div>
<address id="restaurant-address"></address>
<table id="restaurant-hours" aria-label="Opening Times"> </table>
</section>
<!-- end restaurant -->
<!-- Beginning reviews -->
<section id="reviews-container" aria-label="Restaurant Reviews">
<ul id="reviews-list"></ul>
<!-- Review Forms -->
<div class="review_form">
<h2 id="review_form-head">Add a Review</h2>
<form id="review_form" action="#" method="POST">
<div class="label-container">
<label class="review_form_label" for="review_form-name">Name</label>
</div>
<div class="input-container">
<input type="text" name="name" id="review_form-name" maxlength="50" />
</div>
<div class="label-container">
<label class="review_form_label" for="review_form-rating">Rating</label>
</div>
<div class="input-container">
<select name="rating" id="review_form-rating">
<!-- Review options based on the google maps reviewing design -->
<option value="1">1 - Hated it!</option>
<option value="2">2 - Disliked it</option>
<option value="3">3 - It's ok</option>
<option value="4">4 - Liked it</option>
<option value="5">5 - Loved it</option>
</select>
</div>
<div class="label-container">
<label class="review_form_label" for="review_form-comments">Share details of your own experience at this place</label>
</div>
<div class="text-container">
<textarea name="comments" id="review_form-comments"></textarea>
</div>
</form>
<button type="submit" id="review_form-submit">Post</button>
</div>
</section>
<!-- End reviews -->
</main>
<!-- End main -->
<!-- Beginning footer -->
<footer id="footer">
<p>Copyright (c) 2017 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.</p>
</footer>
<!-- End footer -->
<!-- Beginning scripts -->
<!-- Database helpers -->
<script type="text/javascript" src="js/dbhelper.js"></script>
<!-- Main javascript files -->
<script type="text/javascript" src="js/restaurant_info.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!-- Google Maps -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNTaorK4hq-zbVIsO9q5ReIWflKv5CZ8Q&libraries=places&callback=initMap"></script>
<!-- service worker scripts -->
</body>
</html>