web20opensource.github.io/index.html at master · web20opensource/web20opensource.github.io · GitHub

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
<!DOCTYPE html>
<!--  TODO:
  # Improve as much as possible the app to be able to implement and give the accesible users the chance to enjoy and use this useful app
  # Implement aria attributes where needed
  # Be friendly with bling and deaf people.
 -->
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta description="Udacity Google Scholarship Nano Degree Mobile Web Specialist"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">


  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="/css/styles.css">
  <link rel="stylesheet" href="/css/mqueries.css">


  <!-- TODO: More search friendly and best SEO practices-->

  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
  <link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
  <title>Restaurant Reviews</title>
</head>

<body>
  <div class="container">
    <header>
      <!-- TODO: add a logo -->
      <nav role="navigation">
        <h1><a href="/">Restaurant Reviews</a></h1>
      </nav>
    </header>

    <main id="maincontent" role="main">
      <section id="search">
        <div class="filter-options">
          <h2>Filter Results</h2>
          <!-- improve label styles-->
          <label>Neighborhood:</label>
          <select id="neighborhoods-select" name="neighborhoods" aria-label="select a neighborhood">
            <option value="all">All Neighborhoods</option>
          </select>
          <label>Cuisine:</label>
          <select id="cuisines-select" name="cuisines" aria-label="select a cuisine">
            <option value="all">All Cuisines</option>
          </select>
          <a href="#results" class="skip-link" aria-label="the next tab will take you to the map and locations of th restaurants. You can skip to the list of results doing click here."> Go to list of results </a>
        </div>
      </section>
      <!-- TODO: Improve map accesability and navigation using keyboard-->
      <section id="map-container" role="application" aria-labelledby="map">
        <div id="map">Map of restaurants by area</div>
      </section>
      <section id="results">
       <ul id="restaurants-list"></ul>
      </section>
      <button id="installAnUpdate">Install me!</button>
    </main>
    <script type="application/javascript" charset="utf-8" src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" defer></script>
    <script type="application/javascript" charset="utf-8" src="/js/idb.js" defer></script>
    <script type="application/javascript" charset="utf-8" src="/js/handleOffline.js" ></script>
    <script type="application/javascript" charset="utf-8" src="/js/indexDBCache.js" defer></script>
    <script type="application/javascript" charset="utf-8" src="/js/dbhelper.js" defer></script>
    <script type="application/javascript" charset="utf-8" src="/js/main.js" defer></script>

    <!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places&callback=initMap"></script> -->


    <footer id="footer">
      Copyright  (c) 2018<br/>
      <a href="/"><strong>Restaurant Reviews</strong></a> <br/>
      All Rights Reserved.
    </footer>
  </div>
  <span id="network-aware"></span>
</body>

</html>