insight-ui-zcash/public/views/transaction/tx.html

  <div class="line-bot">
    <a href="/#!/tx/{{tx.txid}}">{{tx.txid}}</a>
    <span class="pull-right">{{tx.time * 1000 | date:'medium'}}</span>
  </div>

  <div class="row">
    <div class="col-md-5">
      <div class="ellipsis row" data-ng-show="tx.isCoinBase" data-ng-repeat="vin in tx.vin">
        <div class="col-md-10">
          <p class="ellipsis">No Inputs (Newly Generated Coins)</p>
        </div>
        <p class="text-muted pull-right"> <small>{{vin.reward}} BTC</small></p>
      </div>

      <div data-ng-show="!tx.isCoinBase">
        <ul class="list-unstyled" data-ng-repeat="vin in tx.vinSimple" data-ng-show="!inputsExpanded">
          <li class="row">
            <div class="col-md-8">
              <div class="ellipsis">
                <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>  
              </div>
            </div>
            <p class="text-right text-muted"><small>{{vin.value}} BTC</small></p>
        </ul>

        <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="inputsExpanded">
          <li class="row expanded-tx">
            <a class="col-md-1 glyphicon glyphicon-arrow-right" href="/#!/tx/{{vin.txid}}" alt="Outpoint: {{vin.txid}},{{vin.vout}}" tooltip="Outpoint: {{vin.txid}},{{vin.vout}}"  tooltip-placement="right" >
            </a>
            <div class="col-md-8">
              <div class="ellipsis">
                <span data-ng-show="!vin.addr">Address could not be parsed</span>
                <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>
              </div>
              <div style="word-wrap:break-word">
                <small><strong>scriptSig</strong>{{vin.scriptSig.asm}}</small>
              </div>
            </div>
            <p class="text-right text-muted"><small>{{vin.value}} BTC</small></p>
        </ul>

        <div class="text-center">
          <a class="text-small" data-ng-click="inputsExpanded = !inputsExpanded">
            <span data-ng-show="inputsExpanded">
              <span class="glyphicon glyphicon-chevron-up"></span> Collapse Inputs
            </span>
            <span data-ng-show="!inputsExpanded">
              <span class="glyphicon glyphicon-chevron-down"></span> Expand Inputs
            </span>
          </a>
        </div>
      </div>
    </div>

    <div class="col-md-1 text-center">
      <span class="glyphicon glyphicon-arrow-right lead">&nbsp;</span>
    </div>

    <div class="col-md-6">
      <div class="row">
        <div data-ng-repeat="vout in tx.voutSimple" data-ng-show="!outputsExpanded">
          <div class="col-md-9">
            <div class="ellipsis">
              <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
            </div>
          </div>
          <div class="col-md-3">
            <p class="text-right text-muted"> <small>{{vout.value}} BTC</small></p>
          </div>
        </div>
        <div data-ng-repeat="vout in tx.vout" data-ng-show="outputsExpanded">
          <div class="col-md-9 expanded-tx">
            <div class="ellipsis">
              <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
            </div>
            <small><strong>type</strong> {{vout.scriptPubKey.type}}</small> 
            <div>
              <small><strong>scriptPubKey</strong> {{vout.scriptPubKey.asm}}</small>
            </div>
          </div>
          <div class="col-md-3">
            <p class="text-right text-muted"> <small>{{vout.value}} BTC</small></p>
          </div>
        </div>
 
      </div>
      <div class="text-center">
        <a class="text-small" data-ng-click="outputsExpanded = !outputsExpanded">
          <span data-ng-show="outputsExpanded">
            <span class="glyphicon glyphicon-chevron-up"></span> Collapse Outputs 
          </span>
          <span data-ng-show="!outputsExpanded">
            <span class="glyphicon glyphicon-chevron-down"></span> Expand Outputs 
          </span>
        </a>
      </div>
    </div>
  </div>

  <div class="line-top">
    <div class="m5v">
      <div class="pull-right">
        <button data-ng-show="tx.confirmations" type="button" class="btn btn-success">
          {{tx.confirmations}} Confirmations
        </button>
        <button data-ng-show="!tx.confirmations"  type="button" class="btn btn-danger">
          Unconfirmed Transaction!
        </button>
        <button type="button" class="btn btn-primary">{{tx.valueOut}} BTC</button>
      </div>
      <small data-ng-show="!tx.isCoinBase" class="text-muted">Feeds: {{tx.feeds}}</small>
    </div>
  </div>