main.ts

//These first 3 lines will be deprecated by the final release
import 'reflect-metadata'
import 'zone.js'
import "angular2/angular2";


import {bootstrap} from "angular2/platform/browser";
import {Component} from "angular2/core";

@Component({
	selector:`app`,
	template:` <style>

    html, body { width: 100%; height: 100%; background-color: #CED9DE;}
    * { outline: none; }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .app {
      background-color: white;
      min-width: 600px;
      max-width: 800px;
      width: 100%;
      height: 600px;
      display: flex;
    }

    .app, .contact-list-container {
      border-radius: 10px;
    }

    .contact-list-container {
      width: 40%;
      background-color: #EDF4F7;
      padding: 10px;
      overflow-y: hidden;
      display: flex;
      flex-direction: column;
    }

    .contact-list {
      overflow-y: auto;
    }

    .contact-details-container {
      display: flex;
      flex-direction: column;
      width: 60%;
      overflow-y: auto;
    }

    .contact-details, .contact-details-new {
      flex-grow: 1;
      padding: 10px;
      display: flex;

    }

    .contact-edit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #E9EFF2;
      padding: 10px;
    }

    .contact-details-new {
      display: none;
    }

    .btn-file {
      font-size: 10px;
      padding: 0 10px;
    }

    th h2, th h5 { margin: 0; }
    table > thead > tr > th.middle { vertical-align: middle; }
    table { border: none; }

    tr td:first-child, tr th:first-child {
      align-self: flex-end;
      text-align: right;
      font-weight: bold;
      width: 40%;
    }

    tr td {
      width: 60%;
    }

    th img {
      max-width: 80px;
    }

  </style>


  <main class="app">

    <section class="contact-list-container">
      <h4><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Contacts</h4>

      <div class="contact-list">
        <h4 class="small">A</h4>
        <div class="list-group">
          <button type="button" class="list-group-item active">Adam Apple</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
        </div>

        <h4 class="small">B</h4>
        <div class="list-group">
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
        </div>

        <h4 class="small">C</h4>
        <div class="list-group">
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
          <button type="button" class="list-group-item">Contact Name</button>
        </div>
      </div>

    </section>

    <section class="contact-details-container">

      <div class="contact-details">

        <table class="table">
          <thead>
            <tr>
              <th>
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAMAAAC/MqoPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ZDQzNmVmYi1kNTZiLTQxOGMtYmRjYy1lMDdlZmY4YmY0YjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEFDMDhFODg4RkM5MTFFNThFQ0RDNkExRjQyRkM2NEMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEFDMDhFODc4RkM5MTFFNThFQ0RDNkExRjQyRkM2NEMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MGZlMGJkOS0xNmFmLTQ3Y2UtYjJmZi00NGUzYWZjYjM3MzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N2Q0MzZlZmItZDU2Yi00MThjLWJkY2MtZTA3ZWZmOGJmNGI5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" />
              </th>
              <th class="middle">
                <h2>Adam Apple</h2>
                <h5>company name</h5>
              </th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>home</td>
              <td>555-555-5555</td>
            </tr>
            <tr>
              <td>address</td>
              <td>
                <p>
                  1355 Market Street, Suite 900<br>
                  San Francisco, CA 94103<br>
                </p>
              </td>
            </tr>
            <tr>
              <td>email</td>
              <td>[email protected]</td>
            </tr>
          </tbody>
        </table>

      </div>

      <div class="contact-details-new">
        <table class="table">
          <thead>
            <tr>
              <th>
                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAMAAAC/MqoPAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo3ZDQzNmVmYi1kNTZiLTQxOGMtYmRjYy1lMDdlZmY4YmY0YjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NEFGM0U5ODk5MTYzMTFFNThFQ0RDNkExRjQyRkM2NEMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NEFGM0U5ODg5MTYzMTFFNThFQ0RDNkExRjQyRkM2NEMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MGZlMGJkOS0xNmFmLTQ3Y2UtYjJmZi00NGUzYWZjYjM3MzQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6N2Q0MzZlZmItZDU2Yi00MThjLWJkY2MtZTA3ZWZmOGJmNGI5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ehkkTwAAADNQTFRFrLGyur2+oqip0dHRqa6vs7i4y8zMzs/Px8nJwcPEvsDBpaussLW1t7u7xMbG1NTUnqWmmk47ggAAAoJJREFUeNrs2t2OmzAQBlB+A4Fkzfs/bdWumiqCbDetxFj2+S65OxjssT3NVm0adHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHT0szOMyzylz0zzMg6V0G/X3+o/ma634unr0qfjTG1XMn29pi/Sn44/jd59Cf818k2Z9LFPf89SIL37SN/KpSuNPkwp5Wc/g772KWVoP2XUL9+np7ksevfGsKe2rGlueIOehqLo25jhJ3/Wur68YW/Kom/z84alHZu2nUOH/bxC9jHNT/f18XA8XPHXwrYvw+c0P43Pj9sD+r20ndvt5/7s/uqVnP/Fn7lbatN8VKs1+w1seUcV46tXEvKz53AsuS/2mlro+0W/HvqtXvpaL32rlz741x/pqqEv5Zc0r9IXX8i+yj3mjCoD+r6YG2qh764nLlsl9P3mZayEvj+wnLY66AdHtWMd9DHw+qXJ7D9P/VAF/ajbYNwqoB9eul+3CujdJVYeRw+Xh9Hj5VH0DORR9Et4/1QUfQld1SLpt4NK5vw22Qj6QWtNH9Ae3WTxuUfII+hrbJNkJL3NYsxD6FNUt1g4fYhpH8mB3oZ1hobTP2K65HKgzyEnz1nQo7qB86M39dLXeukbOjo6emH05jk10bMJOjo6Ojo6Ovq/p32OGh4dHR0dHR0dHR0dHR09H7oriBqPKtDR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dH/Oz8EGADEtzL+a4+0hAAAAABJRU5ErkJggg==" /><br>
                <button class="btn btn-default btn-file">Select File</button> <!-- I assume you are going to use Angular for file prompt -->
              </th>
              <th class="middle">
                <input type="text" class="form-control" id="name" placeholder="Full Name">
                <input type="text" class="form-control" id="company" placeholder="Company">
              </th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>home</td>
              <td>
                <input type="text" class="form-control" id="name" placeholder="Home Phone">
              </td>
            </tr>
            <tr>
              <td>address</td>
              <td>
                <input type="text" class="form-control" id="address1" placeholder="Address Line 1">
                <input type="text" class="form-control" id="address2" placeholder="Address Line 2">
              </td>
            </tr>
            <tr>
              <td>email</td>
              <td>
                <input type="email" class="form-control" id="email" placeholder="Email">
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="contact-edit">
        <button class="btn btn-default btn-edit"><span class="glyphicon glyphicon-plus"></span></button>
        <button class="btn btn-default">Edit</button>
      </div>

    </section>

  </main>
`
})
class App{}


bootstrap(App);