seat_chart.html

<header class="seats-header">
  <h1>Reserve a Seat</h1>
</header>

<section id="seats">

  <div class="seating-chart">
    <h3>- First Class -</h3>
    <ol class="first-class">
      <li class="row">
        <ol>
          <li><a class="available" data-features="tv,power" data-seat="1a" href="#">A</a></li>
          <li><a data-seat="1b" data-seat="1b" href="#">B</a></li>
          <li><a data-seat="1c" data-seat="1c" href="#">C</a></li>
          <li><a data-seat="1d" data-seat="1d" href="#">D</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-features="power" data-seat="2a" href="#">A</a></li>
          <li><a class="available" data-features="tv" data-seat="2b" href="#">B</a></li>
          <li><a class="available" data-features="power" data-seat="2c" href="#">C</a></li>
          <li><a data-seat="2d" data-seat="2d" href="#">D</a></li>
        </ol>
      </li>
    </ol>

    <h3>- Economy Class -</h3>
    <ol class="economy-class">
      <li class="row">
        <ol>
          <li><a class="available" data-seat="3a" href="#">A</a></li>
          <li><a data-seat="3b" href="#">B</a></li>
          <li><a data-seat="3c" href="#">C</a></li>
          <li><a class="available" data-seat="3d" data-features="power" href="#">D</a></li>
          <li><a class="available" data-seat="3e" data-features="tv" href="#">E</a></li>
          <li><a class="available" data-seat="3f" data-features="power" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a data-seat="4a" href="#">A</a></li>
          <li><a data-seat="4b" href="#">B</a></li>
          <li><a data-seat="4c" href="#">C</a></li>
          <li><a class="available" data-seat="4d" href="#">D</a></li>
          <li><a class="available" data-seat="4e" href="#">E</a></li>
          <li><a class="available" data-seat="4f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-seat="5a" href="#">A</a></li>
          <li><a class="available" data-seat="5b" href="#">B</a></li>
          <li><a data-seat="5c" href="#">C</a></li>
          <li><a data-seat="5d" href="#">D</a></li>
          <li><a data-seat="5e" href="#">E</a></li>
          <li><a data-seat="5f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-seat="6a" href="#">A</a></li>
          <li><a data-seat="6b" href="#">B</a></li>
          <li><a data-seat="6c" href="#">C</a></li>
          <li><a data-seat="6d" href="#">D</a></li>
          <li><a data-seat="6e" href="#">E</a></li>
          <li><a data-seat="6f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-seat="7a" href="#">A</a></li>
          <li><a class="available" data-seat="7b" href="#">B</a></li>
          <li><a class="selected" data-seat="7c" href="#">C</a></li>
          <li><a data-seat="7d" href="#">D</a></li>
          <li><a data-seat="7e" href="#">E</a></li>
          <li><a class="available" data-seat="7f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a data-seat="8a" href="#">A</a></li>
          <li><a data-seat="8b" href="#">B</a></li>
          <li><a class="available" data-seat="8c" href="#">C</a></li>
          <li><a class="available" data-seat="8d" href="#">D</a></li>
          <li><a data-seat="8e" href="#">E</a></li>
          <li><a data-seat="8f" href="#">F</a></li>
        </ol>
      </li>
    </ol>
  </div>
  
  <div id="flight-navigation">
    <ul>
      <li><a href="/flights/815?direction=prev" rel="prev">View Earlier Flight</a></li>
      <li><a href="/flights/815?direction=next" rel="next">View Later Flight</a></li>
    </ul>
  </div>
  
  <div id="highlights">
    <h3>Highlight Seats</h3>
    <ul>
      <li><input type="checkbox" value="highlight_power" name="power">Power Port</input></li>
      <li><input type="checkbox" value="highlight_tv" name="tv">Overhead TV</input></li>
    </ul>
  </div>

  <aside>
    <div id="confirm-first-class" style="display:none; width:300px">
    </div>

    <div id="notify-me">
      <form action="/notify_me">
        <label for="phone">Insert your Phone Number</label>
        <input type="text" name="phone" id="phone"></input>
      </form>
    </div>

    <div id="confirm-seat" style="display:none">
      <h2>About This Seat</h2>
      <table>
        <tr>
          <td>Seat</td>
          <td id="seatSelected"></td>
        </tr>
      </table>
    </div>

    <div id="flight-stats" style="display:none">
      <h2>About This Flight</h2>
      <table>
        <tr>
          <td>Meal</td>
          <td class="meal"></td>
        </tr>
        <tr>
          <td>Airplane Model</td>
          <td class="model"></td>
        </tr>
        <tr>
          <td>% on Time</td>
          <td class="on-time"></td>
        </tr>
      </table>
    </div>

    <div id="reservations" style="display:none">
      <h2>Your Reservations</h2>
      <table>
        <tr>
          <td>Confirmation #</td>
          <td id="confirmation-number"></td>
        </tr>
      </table>
    </div>
  </aside>
</section>