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

<div class="line-bot row">
  <div class="col-xs-12 col-md-6">
    <button class="btn-expand pull-left" data-ng-click="itemsExpanded = !itemsExpanded"><span class="glyphicon glyphicon-plus" data-ng-class="{'glyphicon-minus': itemsExpanded}" tooltip="Show/Hide items details" tooltip-placement="right"></span></button>
    <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
    <div class="ellipsis">
      <a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
    </div>
  </div>
  <div class="col-xs-12 col-md-6 text-right" data-ng-show="tx.time">
    <time>{{tx.time * 1000 | date:'medium'}}</time>
  </div>
</div>
<div class="row line-mid">
  <div class="col-md-5">
    <div class="row" data-ng-show="tx.isCoinBase">
      <div class="col-md-12 transaction-vin-vout" data-ng-repeat="vin in tx.vin">
        <div class="ellipsis">
          <span>No Inputs (Newly Generated Coins)</span>
        </div>
      </div>
    </div>
    <div class="row" data-ng-show="!tx.isCoinBase">
      <div data-ng-repeat="vin in tx.vinSimple" data-ng-show="!itemsExpanded">
        <div class="col-md-12 transaction-vin-vout">
          <div class="text-muted pull-right btc-value" data-ng-class="{'text-danger': $root.currentAddr == vin.addr}"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
          <div class="ellipsis">
            <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
            <span class="text-muted" title="Current Bitcoin Address" data-ng-show="vin.addr == $root.currentAddr">{{vin.addr}}</span>
            <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr && vin.addr != $root.currentAddr">{{vin.addr}}</a>
          </div>
          <div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
          <div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
          <div data-ng-show="vin.doubleSpendTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spend attempt detected. From tx:
              <a href="/tx/{{vin.doubleSpendTxID}}">{{vin.doubleSpendTxID}},{{vin.doubleSpendIndex}}</a>
          </div>
        </div>
      </div>
      <div data-ng-repeat="vin in tx.vin" data-ng-show="itemsExpanded">
        <div class="col-md-12 transaction-vin-vout">
          <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vin.value)}}</small></div>
          <div class="ellipsis">
            <a class="glyphicon glyphicon-chevron-right" href="/#!/tx/{{vin.txid}}" title="Outpoint: {{vin.txid}},{{vin.vout}}"></a>&nbsp;&nbsp;
            <span data-ng-show="vin.notAddr">{{vin.addr}}</span>
            <a href="/address/{{vin.addr}}" data-ng-show="!vin.notAddr">{{vin.addr}}</a>
          </div>
          <div data-ng-show="vin.unconfirmedInput" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> (Input unconfirmed)</div>
          <div data-ng-show="vin.dbError" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Incoherence in levelDB detected, please resync</div>
          <div data-ng-show="vin.doubleSpendTxID" class="text-danger"> <span class="glyphicon glyphicon-warning-sign"></span> Double spend attempt detected. From tx:
              <a href="/tx/{{vin.doubleSpendTxID}}">{{vin.doubleSpendTxID}},{{vin.doubleSpendIndex}}</a>
          </div>

        </div>
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-body" style="word-wrap:break-word">
              <small>
                <strong>scriptSig</strong>
                {{vin.scriptSig.asm}}
              </small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-1 text-center hidden-xs hidden-sm">
    <span class="glyphicon glyphicon-chevron-right text-primary"></span>
  </div>
  <div class="col-xs-12 text-center hidden-md hidden-lg">
    <span class="glyphicon glyphicon-chevron-down text-primary"></span>
  </div>
  <div class="col-md-6">
    <div class="row">
      <div data-ng-repeat="vout in tx.voutSimple" data-ng-show="!itemsExpanded">
        <div class="col-md-12 transaction-vin-vout">
          <div class="text-muted pull-right btc-value" data-ng-class="{'text-success': $root.currentAddr == vout.addr}">

          <small>
            {{$root.currency.getConvertion(vout.value)}}
            <span class="text-danger" data-ng-show="vout.isSpend" tooltip="Output is spend" tooltip-placement="left">(S)</span>
            <span class="text-success" data-ng-show="!vout.isSpend"  tooltip="Output is unspend" tooltip-placement="left">(U)</span>
          </small>
          </div>

          <div class="ellipsis">
            <span data-ng-show="vout.notAddr">{{vout.addr}}</span>
            <span class="text-muted" title="Current Bitcoin Address" data-ng-show="address == $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{vout.addr}}</span>
            <a href="/address/{{address}}"  data-ng-show="!vout.notAddr && address != $root.currentAddr" data-ng-repeat="address in vout.addr.split(',')">{{address}}</a>
          </div>


        </div>
      </div>
      <div data-ng-repeat="vout in tx.vout" data-ng-show="itemsExpanded">
        <div class="col-md-12 transaction-vin-vout">
          <div class="text-muted pull-right btc-value"><small>{{$root.currency.getConvertion(vout.value)}}
            <span class="text-success" data-ng-show="!vout.spendTxId"  tooltip="Output is unspend" tooltip-placement="left">(U)</span>
            <a class="glyphicon glyphicon-chevron-right" data-ng-show="vout.spendTxId" href="/#!/tx/{{vout.spendTxId}}" title="Spent at: {{vout.spendTxId}},{{vout.spendIndex}}"></a>&nbsp;&nbsp;
 

          </small>

          </div>
          <div class="ellipsis">
            <a href="/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses">{{address}}</a>
          </div>
        </div>
        <div class="col-md-12">
          <div class="panel panel-default">
            <div class="panel-body" style="word-wrap:break-word">
              <small>
                <p>
                  <strong>Type</strong>
                  {{vout.scriptPubKey.type}}
                </p>
                <p>
                  <strong>scriptPubKey</strong>
                  {{vout.scriptPubKey.asm}}
                </p>
              </small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="panel panel-default" data-ng-show="itemsExpanded && tx.blockhash">
  <div class="panel-body" style="word-wrap:break-word">
    <small>
      <strong>BlockHash</strong>
      <a href="/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
      <button class="btn-copy" clip-copy="tx.blockhash"></button>
    </small>
  </div>
</div>
<div class="line-top row">
  <div class="col-xs-12 col-sm-4 col-md-4">
    <span data-ng-show="!tx.isCoinBase &&  !isNaN(parseFloat(tx.fees))" class="txvalues txvalues-default">Fees: {{$root.currency.getConvertion(tx.fees)}} </span>
  </div>
  <div class="col-xs-12 col-sm-8 col-md-8 text-right">
    <span data-ng-show="tx.confirmations" class="txvalues txvalues-success">{{tx.confirmations}} Confirmations</span>
    <span data-ng-show="!tx.confirmations" class="txvalues txvalues-danger">Unconfirmed Transaction!</span>
    <span class="txvalues txvalues-primary">{{$root.currency.getConvertion(tx.valueOut)}}</span>
  </div>
</div>