calibration_modals_fr.html

<!-- Calibration Dialogs -->
<!-- will need french version for client, prioritize ccCalibration -->

<style type="text/css">
  /* Modals CSS - Include in modals HTML? */
  .modal-backdrop {
    z-index: 2040;
  }
  .modal {
    z-index: 2050;
  }
  .ccmodal {
    z-index: 3050;
  }

  #creditCardBody {
    min-height: 500px;
  }

  #flex {
      background-image:url('http://scaler.jordanslaman.com/img/300dpi_card.png');
      background-size: cover;
      background-repeat: no-repeat;
      height: 212.66666667px;
      width: 337px;
      padding: 0px;
      border: 1px blue dashed;
  }
  #flex h3 {
      text-align:center;
      margin: 0;
  }
  #ppi {
      color:white;
  }



</style>

<!-- Main Calibration Modal - Should auto-populate like dpi.lv, but is currently unimplemented. -->
<div class="modal fade" id="calibrateModal" tabindex="-1" role="dialog" aria-labelledby="Calibration">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="Calibration">Calibration</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <p>In order to use the scaling feature you must first calibrate your display.</p>

            <p>You can use a credit card, or if you already know some things about your screen you can type them in here: </p>
          </div>


          <!-- This will eventually attempt to autofill -->
          <form>

            <div class="form-group row">
              <div class="col-md-4">
                <label for="dimension" class="control-label">Screen Size (in)</label>
                <input type="text" class="form-control" id="dimension" placeholder="13.3">
              </div>

              <div class="col-md-4">
                <label for="horizontal" class="control-label">Horizontal (px)</label>
                <input type="text" class="form-control" id="horizontal" placeholder="2560"></input>
              </div>
              <div class="col-md-4">
                <label for="horizontal" class="control-label">Vertical (px)</label>
                <input type="text" class="form-control" id="vertical" placeholder="1600"></input>
              </div>
            </div>

            <div class="form-group row">
              <div class="col-md-8">
                <button type="button" class="btn btn-primary" style="margin-top:25px;" data-toggle="modal" data-target="#creditCardModal">I don't know these, but I have a credit card.</button>
              </div>

              <div class="col-md-4">
                <label for="ppi" class="control-label">PPI</label>
                <input type="text" class="form-control" id="ppi" placeholder="227"></input>
              </div>
            </div>

          </form>

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save PPI</button>
      </div>
    </div>
  </div>
</div>

<!-- Credit Card Calibration Modal French-->
<div class="modal fade ccmodal" id="creditCardModal" tabindex="-1" role="dialog" aria-labelledby="Calibration avec carte de crédit" data-backdrop="false">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="Calibration avec carte de crédit">Calibration avec carte de crédit</h4>
      </div>
      <div class="modal-body" id="creditCardBody">
        <div class="row">
            <ol>
              <li>Placez une vraie carte sur la carte affichée a l'écran.</li>
              <li>Placez votre curseur sur le coin droit et redimensionnez la carte à l'écran jusqu'à ce qu'elle soit de même dimension que votre carte. Tentez d'être le plus précis possible.</li>
              <li>Cliquez sauvegarder pour calibrer l'écran et passez à l'étape suivante.</li>
            </ol>
        </div>
          <div id="flex"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="ccSave">Sauvegarder</button>
      </div>
    </div>
  </div>
</div>