walnut_launchpad.html/templates/files.html

<div class="row">
  <ol class="breadcrumb">
    <li><a href="">Home</a></li>
  </ol>
  <div class="text-center">
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default"><i class="fa fa-bars" aria-hidden="true"></i></button>
      <button type="button" class="btn btn-default"><i class="fa fa-th" aria-hidden="true"></i></button>
      <button type="button" class="btn btn-default"><i class="fa fa-film" aria-hidden="true"></i></button>
    </div>
  </div>
</div>
<div class="row">
  <div ng-hide="vm.share_active || vm.device_active" class="flex-row list-of-devices">
    <div class="shares" ng-click="vm.select_shares()">
      <i class="fa fa-folder-o fa-5x" aria-hidden="true"></i>
      <p>Shares</p>
    </div>
    <div class="from-computer" ng-click="vm.select_computer_device()">
      <i class="fa fa-laptop fa-5x" aria-hidden="true"></i>
      <p>Jane's Macbook</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="jumbotron jumbo">
    <i class="fa fa-times pull-right js-close-hero" aria-hidden="true"></i>
    <h1 class="text-center">All of your files in one place!</h1>
    <p>With daplie you can access any file on any device from any where. Even when a device is off or offline you can schedule file to be pulled or pushed</p>
    <p class="text-center"><button type="button" name="button" class="btn btn-default js-close-hero">Okay</button></p>
  </div>
</div>
<div class="row" ng-show="vm.device_selected">
  <div class="users-selected-device">
    <i class="fa fa-times pull-right js-close-hero" aria-hidden="true"></i>
    <table class="table" ng-show="vm.shared_selected">
      <!--
      <thead>
        <tr>
          <th>Artist</th>
          <th>Date</th>
          <th>Sync</th>
        </tr>
      </thead>
      -->
      <tbody>
        <tr ng-repeat="shared_artist in vm.shared_artists">
          <td class="select-an-artist" ng-click="vm.get_artist(shared_artist)">{{ shared_artist }}</td>
          <td>December 23, 2016</td>
          <td><i class="fa fa-exchange js-sync-icon" aria-hidden="true"></i></td>
        </tr>
      </tbody>
    </table>
    <table class="table" ng-show="vm.computer_selected">
      <!-- <thead>
        <tr>
          <th>Artist</th>
          <th>Date</th>
          <th>Sync</th>
        </tr>
      </thead>
      -->
      <tbody>
        <tr ng-repeat="artist in vm.artists">
          <td class="select-an-artist" ng-click="vm.get_artist(artist)">{{ artist }}</td>
          <td>June 13, 2017</td>
          <td><i class="fa fa-exchange js-sync-icon" aria-hidden="true"></i></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="row">
  <div class="display-selected-artist" ng-show="vm.artist_information">
    <div class="col-md-4">
      <div class="text-center">
        <h3>{{ vm.artist_selected }}</h3>
        <div class="image-placeholder">
          <i class="fa fa-users fa-2x" aria-hidden="true"></i>
        </div>
        <p>15MB</p>
        <p>July 15, 2017</p>
      </div>
    </div>
    <div class="col-md-4">
      <div class="text-center">
        <h4>Syncing</h4>
        <p><i class="fa fa-laptop"></i> Jane's Macbook at ~/Music/{{ vm.artist_selected }}</p>
        <p><i class="fa fa-mobile"></i> Jane's iPhone at ~/iTunes/{{ vm.artist_selected }}</p>
        <br>
        <p><a href="">Push to another device</a></p>
      </div>
    </div>
    <div class="col-md-4">
      <i class="fa fa-times pull-right js-close-artist-info" aria-hidden="true"></i>
      <div class="text-center">
        <h4>Sharing with</h4>
        <p>
          <i class="fa fa-user" aria-hidden="true"></i> AJ as
          <select class="" name="">
            <option value="">owner</option>
            <option value="">viewer</option>
          </select>
        </p>
        <p>
          <i class="fa fa-user" aria-hidden="true"></i> Hannah as
          <select class="" name="">
            <option value="">viewer</option>
            <option value="">owner</option>
          </select>
        </p>
        <p>
          <i class="fa fa-users" aria-hidden="true"></i> Family as
          <select class="" name="">
            <option value="">viewer</option>
            <option value="">owner</option>
          </select>
        </p>
        <p>
          <input type="text" class="form-control" placeholder="share with contact by name or email">
        </p>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="file-footer">
    <i class="fa fa-times pull-right js-close-file-uploader" aria-hidden="true"></i>
    <p>Take back your files 1 of 3 complete</p>
    <div class="files-to-sync">
      <div class="button-container-row">
        <i class="fa fa-check-square-o is-syncd" aria-hidden="true"></i>
        <a href="">
          <button type="button" name="button" class="btn btn-default side-menu-button"><i class="fa fa-folder-o fa-2x" aria-hidden="true"></i></button>
          <p class="button-title">Create a share</p>
        </a>
      </div>
      <div class="button-container-row">
        <a href="">
          <button type="button" name="button" class="btn btn-default side-menu-button"><i class="fa fa-laptop fa-2x" aria-hidden="true"></i></button>
          <p class="button-title">Sync a computer</p>
        </a>
      </div>
      <div class="button-container-row">
        <a href="">
          <button type="button" name="button" class="btn btn-default side-menu-button"><i class="fa fa-tablet fa-2x" aria-hidden="true"></i></button>
          <p class="button-title">Sync a mobile device</p>
        </a>
      </div>
    </div>
  </div>
</div>