booking.html

<ons-page>
  <ons-toolbar modifier="opacity">
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="ion-navicon-round" fixed-width="false"></ons-icon></ons-toolbar-button>
    </div>
    <div class="center">Booking</div>
  </ons-toolbar>

  <div class="app-page opacity-bar">
    <div class="app-hero app-hero-image">
      <h2>Book a table with us!</h2>
      <div class="app-hero-overlay"></div>
      <img src="images/book.png" class="app-hero-bg">
    </div>

    <div class="app-page-content app-page-booking" ng-controller="bookingController">
      
      <div class="title-line">
        <span class="left-border"><i></i></span>
        <p class="title-line"><strong>We Are Open</strong></p>
        <span class="right-border"><i></i></span>
      </div>

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item>
          <div class="app-open-desc">
            <ons-icon icon="ion-android-clock"></ons-icon>
            Monday <span class="label label-danger">Closed</span>
          </div>
        </ons-list-item>
        <ons-list-item>
          <div class="app-open-desc">
            <ons-icon icon="ion-android-clock"></ons-icon>
            Tuesday-Thursday <span class="label label-default">10:00 - 21:00</span>
          </div>
        </ons-list-item>
        <ons-list-item>
          <div class="app-open-desc">
            <ons-icon icon="ion-android-clock"></ons-icon>
            Friday-Sunday <span class="label label-default">9:00 - 23:00</span>
          </div>
        </ons-list-item>
      </ons-list>

      <div class="title-line margintop30">
        <span class="left-border"><i></i></span>
        <p class="title-line"><strong>Book a Table</strong></p>
        <span class="right-border"><i></i></span>
      </div>

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item>
          <input type="text" class="text-input text-input--transparent" placeholder="Full Name">
        </ons-list-item>
        <ons-list-item>
          <input type="email" class="text-input text-input--transparent" placeholder="Email">
        </ons-list-item>
        <ons-list-item>
          <input type="tel" class="text-input text-input--transparent" placeholder="Phone">
        </ons-list-item>
        <ons-list-item ng-click="chooseDate()">
          <div class="app-open-desc" style="color:#999999">
            <ons-icon icon="ion-calendar"></ons-icon>
            {{ bookdate }}
          </div>
        </ons-list-item>
        <ons-list-item ng-click="chooseTime()">
          <div class="app-open-desc" style="color:#999999">
            <ons-icon icon="ion-android-clock"></ons-icon>
            {{ booktime }}
          </div>
        </ons-list-item>
        <ons-list-item>
          <textarea class="textarea textarea--transparent" placeholder="Message" style="width: 100%; height: 100px;"></textarea>
        </ons-list-item>

      </ons-list>

      <div class="request-button">
        <ons-button modifier="large" style="margin: 0 auto;">
          Request Booking
        </ons-button>
      </div>

    </div>

  </div>

</ons-page>