-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
73 lines (66 loc) · 8.03 KB
/
index.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
<!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 Reviews</title>
<!-- Favicons -->
<link rel="icon" href="img/favicon.ico">
</head>
<style type="text/css">
body,li,p,td,th,ul{font-size:10pt;color:#333;font-family:Arial,Helvetica,sans-serif}body,h1,h2,h3,h4,h5,h6,li,p,td,th,ul{font-family:Arial,Helvetica,sans-serif}#footer,#restaurant-cuisine,#restaurants-list,nav{text-align:center}#footer,nav h1 a{text-transform:uppercase}#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;text-transform:uppercase}#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:80px;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;text-transform:uppercase;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;text-transform:uppercase;width:90%}#restaurant-container,#reviews-container{border-bottom:1px solid #d9d9d9;border-top:1px solid #fff;padding:140px 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}#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: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>
<p class="screen-reader-only"><a href="#maincontent">Skip to content</a></p>
<header>
<nav role="navigation">
<h1><a href="/">Restaurant Reviews</a></h1>
</nav>
</header>
<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">
<button onclick="myFunction()" style="width: 100%;padding: 10px 5px 10px 5px;cursor: pointer;">Show/Hide map</button>
<section id="map-container" role="application" style="display: none;">
<div id="map"></div>
</section>
<section>
<div class="filter-options">
<h2>Filter Results</h2>
<label for="neighborhoods-select" class="screen-reader-only">Filter list by neighbourhood</label>
<select id="neighborhoods-select" name="neighborhoods" onchange="updateRestaurants()">
<option value="all">All Neighborhoods</option>
</select>
<label for="cuisines-select" class="screen-reader-only">Filter list by cuisine</label>
<select id="cuisines-select" name="cuisines" onchange="updateRestaurants()">
<option value="all">All Cuisines</option>
</select>
</div>
<ul id="restaurants-list"></ul>
</section>
</main>
<footer id="footer">
<p>Copyright (c) 2017 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.</p>
</footer>
<script type="application/javascript" charset="utf-8" src="js/dbhelper.js"></script>
<script type="application/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNTaorK4hq-zbVIsO9q5ReIWflKv5CZ8Q&libraries=places&callback=initMap"></script>
</body>
</html>