Inspinia Tabs

by Wentz Wu

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-md-12 col-sm-12">
      <div class="camera">
        camera
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-sm12">
      <div class="tabs-container">
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">Video</a></li>
          <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">Picture</a></li>
        </ul>
        <div class="tab-content">
          <div id="tab-1" class="tab-pane active">
            <div class="panel-body">
              <button id="record" class="btn btn-primary">Record</button>
              <button id="stop" class="btn btn-white" disabled="">Stop</button>
              <ul>
                <li>Hide the "Stop" button when not taking videos or when the page is loaded</li>
                <li>When recording, Hie the "Stop" button and show the "Record" button.</li>
                <li>When recording, hide the "Capture" button in the Picture tab.</li>
                <li>The camera can take (1) one picutre, (2) one video or (3) one picture and one video.</li>
              </ul>
            </div>
          </div>
          <div id="tab-2" class="tab-pane">
            <div class="panel-body">
              <button id="imgCapture" class="btn btn-primary">Capture</button>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <hr>        
        <div class="col-md-12 col-sm-12">
        <button id="record" class="btn btn-primary">Save</button>
        <ul>
        <li>Click the "Save" button to upload both picture and video to backend server.</li>
        <li>Show a progress bar or spinner when uploading.</li>
        </ul>
        
  ...

CSS

.camera {
  display: inline-block;
  border: solid red 1px;
  height: 150px;
  width: 48%;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 1em;
}