etcher/lib/gui/app/pages/main/templates/main.tpl.html

<div class="page-main row around-xs">
  <div class="col-xs" ng-controller="ImageSelectionController as image">
    <div class="box text-center relative" os-dropzone="image.selectImageByPath($file)">

      <div class="center-block">
        <svg-icon path="main.selection.getImageLogo() || '../../assets/image.svg'"></svg-icon>
      </div>

      <div class="space-vertical-large">
        <div ng-hide="main.selection.hasImage()">
          <button
            class="button button-primary button-brick"
            tabindex="{{ main.selection.hasImage() ? -1 : 1 }}"
            ng-click="image.openImageSelector()">Select image</button>

          <p class="step-footer">
            {{ ::image.mainSupportedExtensions.join(', ') }}, and
            <span class="step-footer-underline"
              uib-tooltip="{{ image.extraSupportedExtensions.join(', ') }}">others</span>
          </p>
        </div>
        <div ng-if="main.selection.hasImage()">
          <div class="step-selection-text">
            <span
              ng-click="main.showSelectedImageDetails()"
              class="step-image step-name"
              ng-bind="main.selection.getImageName() || image.getImageBasename() | middleEllipses:20"
              uib-tooltip="{{ image.getImageBasename() }}"></span>
            <span class="step-image step-size">{{ main.selection.getImageSize() | closestUnit }}</span>
          </div>

          <button class="button button-link step-footer"
            tabindex="1"
            ng-click="image.reselectImage()"
            ng-hide="main.state.isFlashing()">Change</button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs" ng-controller="DriveSelectionController as drive">
    <div class="box text-center relative">
      <div class="step-border-left" ng-disabled="main.shouldDriveStepBeDisabled()"></div>
      <div class="step-border-right" ng-disabled="main.shouldFlashStepBeDisabled()"></div>

      <div class="center-block">
        <svg-icon path="'../../assets/drive.svg'"
          disabled="main.shouldDriveStepBeDisabled()"></svg-icon>
      </div>

      <div class="space-vertical-large">
        <div ng-hide="main.selection.hasDrive()">

          <div>
            <button class="button button-primary button-brick"
              tabindex="{{ main.selection.hasDrive() ? -1 : 2 }}"
              ng-disabled="main.shouldDriveStepBeDisabled()"
              ng-click="drive.openDriveSelector()">Select drive</button>
          </div>

        </div>
        <div ng-show="main.selection.hasDrive()">

          <div class="step-selection-text"
            ng-class="{
              'text-disabled': main.shouldDriveStepBeDisabled()
            }">
            <span class="drive-step step-name"
              uib-tooltip="{{ main.selection.getDrive().description }} ({{ main.selection.getDrive().displayName }})">
              <!-- middleEllipses errors on undefined, therefore fallback to empty string -->
              {{ (main.selection.getDrive().description || "") | middleEllipses:11 }}
            </span>
            <span class="step-drive step-size">{{ main.selection.getDrive().size | closestUnit }}</span>
            <span class="step-drive step-warning glyphicon glyphicon-exclamation-sign"
              uib-tooltip="{{ main.constraints.getDriveImageCompatibilityStatuses(main.selection.getDrive(), main.selection.getImage())[0].message }}"
              ng-show="main.constraints.hasDriveImageCompatibilityStatus(main.selection.getDrive(), main.selection.getImage())"></span>
          </div>
          <button class="button button-link step-footer"
            tabindex="{{ main.selection.hasDrive() ? 2 : -1 }}"
            ng-click="drive.reselectDrive()"
            ng-hide="main.state.isFlashing()">Change</button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-xs" ng-controller="FlashController as flash">
    <div class="box text-center">
      <div class="center-block">
        <svg-icon path="'../../assets/flash.svg'"
          disabled="main.shouldFlashStepBeDisabled()"></svg-icon>
      </div>

      <div class="space-vertical-large">
        <progress-button class="button-brick"
          tabindex="3"
          percentage="main.state.getFlashState().percentage"
          striped="{{ main.state.getFlashState().type == 'check' }}"
          ng-attr-active="{{ main.state.isFlashing() }}"
          ng-click="flash.flashImageToDrive(main.selection.getImage(), main.selection.getDrive())"
          ng-disabled="main.shouldFlashStepBeDisabled() || main.state.getLastFlashErrorCode()">
            <span ng-bind="flash.getProgressButtonLabel()"></span>
        </progress-button>

        <p class="step-footer step-footer-split" ng-show="main.state.getFlashState().speed && main.state.getFlashState().percentage != 100">
          <span ng-bind="main.state.getFlashState().speed.toFixed(2) + ' MB/s'"></span>
          <span>ETA: {{ main.state.getFlashState().eta | secondsToDate | amDateFormat:'m[m]ss[s]' }}</span>
        </p>
      </div>
    </div>
  </div>
</div>