web20opensource.github.io/restaurant.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
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<!-- Test more in mobile-->
<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">

  <link rel="manifest" href="manifest.json">

  <!-- Main CSS file -->
  <link rel="stylesheet" href="/css/styles.css" type="text/css">
  <link rel="stylesheet" href="/css/mqueries.css">
  <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 Info</title>
</head>

<body class="inside">
  <!-- Beginning header -->
  <header>
    <!-- Beginning nav -->
    <h1 id="mainReviewHeader">Details and reviews</h1>
    <nav role="navigation" aria-label="Breadcrumb">
      <!-- Beginning breadcrumb -->
      <ol id="breadcrumb">
        <li><a href="/">Restaurant Reviews</a></li>
      </ol>
    </nav>
    <!-- End breadcrumb -->
    <!-- End nav -->
  </header>
  <!-- End header -->

  <!-- Beginning main -->
  <main id="maincontent" role="main">
    <!-- Beginning restaurant -->
    <section id="restaurant-container">
      <h2 id="restaurant-name"></h2>
      <figure>
       <!-- TODO: add srcset to support different image sizes and resolution device widths-->
      	<img id="restaurant-img" srcset="">
       <figcaption id="rest-fig-caption"></figcaption>
      </figure>
      <p id="restaurant-cuisine"></p>
      <p id="restaurant-address"></p>
      <table id="restaurant-hours"></table>
    </section>
    <!-- end restaurant -->
    <!-- Beginning reviews -->
    <section id="reviews-container">
      <form method="POST" action="/reviews/" id="addReviewForm">
        <label for="userName">Your name: </label><input name="userName" placeholder="Your name" value="" type="text"  required pattern="[A-Za-z ]+"><br/>
        <label for="rating">Your rating: </label><input name="rating" placeholder="scale: [1-worst]  to [5-best]" value="" type="text"  required pattern="[1-5]"><br/>
        <label for="commments">Comments: </label><textarea rows="3" cols="20"  name="commments" placeholder="optional comments" pattern="[A-Za-z ]+"></textarea><br/>
        <input type="submit" value="Add Review" id="addNewReview" autofocus />
      </form>
    </section>
    <!-- Begin map -->
    <section id="map-container" aria-label="restaurant's location" role="application">
      <div id="map">
      <div>
    </section>
    <!-- TODO: Improve map accesability and navigation using keyboard-->
    <!-- End map -->

    <!-- End reviews -->
    <!-- Beginning footer -->
  </main>

  <footer id="footer">
      Copyright (c) 2018 <a href="/"><strong>Restaurant Reviews</strong></a> All Rights Reserved.
  </footer>
  <!-- End main -->
  <!-- End footer -->
  <!-- Main javascript file -->
  <script type="application/javascript" charset="utf-8" src="https://code.jquery.com/jquery-3.3.1.min.js" defer></script>
  <script type="application/javascript" charset="utf-8" src="/js/idb.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/indexDBCache.js" defer></script>
  <script type="text/javascript" src="/js/dbhelper.js" defer></script>
  <script type="application/javascript" charset="utf-8" src="/js/handleOffline.js"></script>
  <script type="text/javascript" src="/js/restaurant_info.js" defer></script>
  <!-- Google Maps -->
 <!--  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_tKbW6A5pQ-eupxI56myUnHLqYCzOjKo&libraries=places&callback=initMap"></script> -->
  <!-- End scripts -->
  <span id="network-aware"></span>
</body>

</html>