forked from udacity/mws-restaurant-stage-1
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
53 lines (52 loc) · 8.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#9c27b0">
<link rel="manifest" href="./manifest.json">
<link rel="shortcut icon" type="image/png" href="/icons/favicon.png"/>
<title>Restaurant Reviews</title>
<style>
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
body,p,td,th{font-family:Arial,Helvetica,sans-serif;font-size:10pt;color:#333;line-height:1.5}body{background-color:#fdfdfd;margin:0;position:relative}li,ul{font-family:Arial,Helvetica,sans-serif;font-size:10pt;color:#333}a{color:#fff8f3;text-decoration:none}a:focus,a:hover{color:#3397db;text-decoration:none}a img{border:none 0 #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:#9c27b0;color:#fff8f3;font-size:8pt;letter-spacing:1px;padding:25px;text-align:center;text-transform:uppercase}#footer a{color:#fff}nav{width:100%;text-align:center;display:flex;flex-direction:column}nav h1{height:80px;width:100%;margin:0;justify-self:center;background-color:#7b1fa2}nav h1 a{color:#fff;font-size:14pt;font-weight:200;letter-spacing:10px;text-transform:uppercase}#breadcrumb{padding:10px 40px 16px;list-style:none;background-color:#eee;font-size:17px;margin:0;display:flex}#breadcrumb li{display:inline}#breadcrumb li+li:before{padding:8px;color:#000;content:'/\00a0'}#breadcrumb li a{color:#47068c;text-decoration:none}#breadcrumb li a:hover{color:#01447e;text-decoration:underline}#map{height:400px;width:100%;background-color:#ccc}.filter-options{width:100%;padding:20px 0;background-color:#7b1fa2;align-items:center;display:flex;flex-direction:row}.options{margin-top:10px;margin-left:10px;display:flex}@media screen and (max-width:500px){.filter-options{flex-direction:column}.options{display:flex;flex-direction:column;text-align:center;align-items:center}.filter-options .options select{width:80%}}.filter-options h2{color:#fff;font-size:1rem;font-weight:400;line-height:1;margin:0 20px}.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}@media screen and (max-width:600px){.filter-options{margin-bottom:20px}.filter-options select{width:100px}}@media screen and (max-width:400px){.filter-options select:last-child{align-self:flex-end}}#restaurants-list{background-color:#f3f3f3;list-style:outside none none;margin:0;padding:30px 15px 60px;text-align:center;display:flex;flex-wrap:wrap;justify-items:center;align-items:center;justify-content:center}#restaurants-list li{background-color:#fff;border:2px solid #ccc;font-family:Arial,sans-serif;margin:15px;min-height:380px;padding:0 30px 25px;text-align:left;width:270px}@media screen and (max-width:900px){#restaurants-list li{flex-grow:1}}#restaurants-list .restaurant-img{background-color:#ccc;display:block;margin:0;max-width:100%;min-height:248px;min-width:100%}#restaurants-list li h1{color:#9c27b0;font-family:Arial,sans-serif;font-size:1.2rem;font-weight:200;letter-spacing:0;line-height:1.3;margin:20px 0 10px;text-transform:uppercase}#restaurants-list p{margin:0;font-size:1rem}#restaurants-list li a{background-color:#7c4dff;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;width:100%;z-index:999}.inside #map{height:600px}.inside #footer{bottom:0;position:absolute;width:100%;padding:20px 0}#restaurant-name{color:#9c27b0;font-family:Arial,sans-serif;font-size:22px;font-weight:200;letter-spacing:0;text-transform:uppercase;line-height:1.1;text-align:center;margin-top:10px}#restaurant-img{width:800px;max-width:100%}#restaurant-address{font-size:1.2rem}#restaurant-cuisine{background-color:#333;color:#ddd;font-size:12pt;font-weight:300;letter-spacing:10px;text-align:center;text-transform:uppercase;width:100%}#restaurant-container,#reviews-container{border-bottom:1px solid #d9d9d9;border-top:1px solid #fff;display:flex;flex-direction:column;align-items:center}#reviews-container h2{color:#9c27b0;font-size:24pt;font-weight:300;letter-spacing:-1px;padding-bottom:1pt}#reviews-list{margin:0;padding:0;display:flex;flex-direction:column;align-items:center;list-style:none;margin-bottom:30px;width:100%}#reviews-list li{background:#fff;border-radius:5px;color:#666;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:all .3s cubic-bezier(.25,.8,.25,1);width:80%;margin:10px 0;padding:10px}#reviews-list li:last-child{margin-bottom:40px}#reviews-list li:hover{box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}#reviews-list li p:not(:last-child){color:#fff8f3;background-color:#7b1fa2;margin:0;text-align:center;font-size:20px}#reviews-list li p:last-child{font-size:15px;line-height:33px;font-weight:400}#restaurant-hours{background:#fff;border-radius:2px;color:#666;padding:10px;box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);transition:all .3s cubic-bezier(.25,.8,.25,1);width:70%}#restaurant-hours:hover{box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22)}
</style>
</head>
<body>
<header>
<nav role="navigation">
<h1><a href="/">Restaurant Reviews</a></h1>
</nav>
</header>
<main id="maincontent">
<section id="map-container">
<div id="map"></div>
</section>
<section>
<div class="filter-options">
<h2>Filter Results</h2>
<div class="options">
<div class="neighborhoods-selections">
<label style="color:white" for="neighborhoods-select">choose neighborhoods</label>
<select id="neighborhoods-select" name="neighborhoods" onchange="updateRestaurants()">
<option value="all">All Neighborhoods</option>
</select>
</div>
<div class="cuisines-selections">
<label style="color:white" for="cuisines-select">choose cuisines</label>
<select id="cuisines-select" name="cuisines" onchange="updateRestaurants()">
<option value="all">All Cuisines</option>
</select>
</div>
</div>
</div>
<ul id="restaurants-list"></ul>
</section>
</main>
<footer id="footer">
Copyright (c) 2017 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
</footer>
<script src="/dist/mainIndex.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBucMk0R348mlbdtMUC_G6pkY-AGEiOS90&libraries=places&callback=initMap"></script>
</body>
</html>