-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·55 lines (46 loc) · 7.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="images/favicon.ico" type="image/x-icon"/>
<style>@charset "utf-8";*,:after,:before{box-sizing:border-box}body,p,td,th{font-family:Tahoma,Helvetica,sans-serif;font-size:12pt;color:#333;line-height:1.5}body{background-color:#fdfdfd;margin:0;position:relative}li,ul{font-family:Tahoma,Helvetica,sans-serif;font-size:12pt;color:#333}a{color:#77d574;text-decoration:none}a:focus,a:hover{color:#66c363;text-decoration:none}a img{border:0 #fff}h1,h2,h3,h4,h5,h6{font-family:Tahoma,Helvetica,sans-serif;margin:0 0 20px}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}embed,img,object,video{max-width:100%}table{border-spacing:0;width:100%}#main-content{background-color:#f3f3f3;min-height:100%}#footer,nav h1 a{color:#fff;text-transform:uppercase}#footer,nav{background-color:#252831;text-align:center}#footer{font-size:9pt;letter-spacing:1px;padding:25px}#footer a{padding:16px 0}nav{width:100%;height:80px}nav h1{margin:auto;line-height:80px}nav h1 a{font-size:12pt;font-weight:200;letter-spacing:5px;padding:12px 0}.breadcrumb-nav{width:100%;height:auto;background-color:transparent;text-align:left}.skip-map{position:fixed;top:-99px;z-index:1001;color:#000;background-color:#00d3c5;padding:5px 10px;font-size:14px;left:10px}.skip-map:focus{top:10px;color:#000;box-shadow:0 0 3px 3px #fff}#breadcrumb{padding:10px 40px 16px;list-style:none;background-color:#eee;font-size:17px;margin:0;width:100%}#breadcrumb li{display:inline}#breadcrumb li+li:before{padding:8px;color:#000;content:"/\00a0"}#breadcrumb li a{color:#64481d;text-decoration:none;padding:12px}#breadcrumb li a:hover{color:#01447e;text-decoration:underline}#map{height:400px;width:100%;background-color:#ccc}#map-container h2{position:absolute;top:-999px;left:0}.filter-options{width:100%;background-color:#01605a;align-items:center;display:flex;flex-wrap:wrap}.filter-options h2{color:#fff;font-size:1.125rem;font-weight:400;margin:9px 11px}.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;flex-basis:100%}#restaurants-list li a:focus,.filter-options select:focus{outline:0;box-shadow:0 0 3px 3px #ff0}.filter-options label{display:none}#restaurants-list{background-color:#f3f3f3;list-style:outside none none;margin:auto;padding:30px 15px 60px;text-align:center;display:flex;flex-wrap:wrap;max-width:1400px;justify-content:center}#restaurants-list li{background-color:#fff;font-family:Arial,sans-serif;margin:15px;min-height:380px;padding:0 30px 25px;text-align:left;flex-basis:calc(100% - 30px);border-radius:6% 0 6% 0;-webkit-border-radius:6% 0 6% 0;-moz-border-radius:6% 0 6% 0;display:flex;flex-direction:column;justify-content:space-between;max-width:450px}#restaurants-list .restaurant-img{background-color:#ccc;display:block;margin-top:26px;max-width:100%;min-width:100%;border-radius:19px;-webkit-border-radius:19px;-moz-border-radius:19px}#restaurant-name,#restaurants-list li h3{font-family:Arial,sans-serif;font-weight:200;letter-spacing:0;text-transform:uppercase;color:#105f0d;font-size:20pt;margin:15px 0 30px;line-height:1.1}#restaurants-list li h3{color:#01605a;font-size:14pt;line-height:1.3;margin:20px 0 10px}#restaurants-list p{margin:0;font-size:12pt}#restaurants-list li a{background-color:#01605a;color:#fff;display:inline-block;font-size:11pt;margin:15px 0 0;padding:10px 30px;text-align:center;text-decoration:none;text-transform:uppercase;width:100%}#restaurants-list li a:hover{background-color:#004440}.inside header{position:fixed;top:0;width:100%;z-index:1000}.inside #map-container{background:#00f 0 0;height:50vh;width:100%;margin-top:131px}.inside #map{background-color:#ccc;height:100%;width:100%}#restaurant-img{width:100%}#restaurant-address{margin-bottom:22px}#restaurant-cuisine{background-color:#333;color:#ddd;font-size:12pt;font-weight:300;letter-spacing:10px;margin:0 0 20px;padding:2px 0;text-align:center;text-transform:uppercase;width:100%}#restaurant-container h3{margin-bottom:12px}#restaurant-container,#reviews-container{border-bottom:1px solid #d9d9d9;border-top:1px solid #fff;padding:40px 30px;width:100%;margin:auto;max-width:450px}#reviews-container{padding:30px 40px;max-width:1400px}#reviews-container h3{color:#105f0d;font-size:24pt;font-weight:300;letter-spacing:-1px;padding-bottom:1pt}#reviews-list{margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center}#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:100%;border-radius:27px 0 27px 0;-webkit-border-radius:27px 0 27px 0;-moz-border-radius:27px 0 27px 0;flex-basis:100%}#reviews-list .header-review{display:flex;flex-wrap:wrap;width:100%;background:#444;padding-top:9px}#reviews-list .header-review p{flex-grow:1;color:#fff;font-size:12pt}#reviews-list .header-review p:nth-child(2){color:#e0e0e0;font-size:13px;margin-top:4px;text-align:right}#reviews-list .rating-review{display:inline-block;margin-top:12px;background:#105f0d;padding:5px 11px;font-size:14px;color:#fff;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px}#reviews-list li p{margin:0 20px 10px}#restaurant-hours tr:nth-child(even){background-color:#fff}#restaurant-hours td,#restaurant-hours th{color:#333;margin:0;padding:5px 10px;font-size:14px;text-align:left}#restaurant-hours th{color:#105f0d}@media screen and (min-width:700px){nav h1 a{font-size:14pt;letter-spacing:10px}#restaurants-list li{flex-basis:calc(50% - 30px)}.filter-options select{flex-basis:auto;flex-grow:1}#header-content{display:flex;flex-direction:row-reverse}#restaurant-container{margin-top:100px}#map-container{flex-grow:1}.inside #map-container{height:auto}}@media screen and (min-width:992px){#restaurants-list li{flex-basis:calc(33.3333% - 30px)}#reviews-list li{margin:0 20px 30px;flex-basis:calc(50% - 40px)}}</style>
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#6f6f71"/>
<meta charset="utf-8">
<title>Restaurant Reviews</title>
</head>
<body>
<header>
<nav>
<h1><a href="/">Restaurant Reviews</a></h1>
</nav>
<a href="#skip-map" class="skip-map">Skip Map</a>
</header>
<main id="main-content">
<section id="map-container">
<h2>Google Map</h2>
<div id="map" ></div>
</section>
<section>
<div class="filter-options" id="skip-map" tabindex="-1">
<h2>Filter Results</h2>
<select id="neighborhoods-select" aria-label="Choose Neighborhood" name="neighborhoods" onchange="updateRestaurants()">
<option value="all">All Neighborhoods</option>
</select>
<select id="cuisines-select" aria-label="Choose Cuisine" name="cuisines" onchange="updateRestaurants()">
<option value="all">All Cuisines</option>
</select>
</div>
<ul id="restaurants-list"></ul>
</section>
</main>
<script src="js/idb.js"></script>
<script src="js/register_sw.js"></script>
<script charset="utf-8" src="js/dbhelper.js"></script>
<script charset="utf-8" src="js/main.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9JRIIcW6Coghb6k5G19wvmiE5grI_L_0&libraries=places&callback=initMap"></script>
<footer id="footer">
Copyright (c) 2017 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
</footer>
</body>
</html>