page-setup.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Photo Printer</title>
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/page-setup.css">
    <link rel="stylesheet" href="/css/print.css">
  </head>
  <body>
    <div class="column">
      <!-- Options -->
      <ul class="options options-paper">
        <li>Paper Options</li>
        <li>
          Paper Size
          <select class="option-input" name="paper-size">
          </select>
        </li>
        <li>
          Paper Orientation
          <select class="option-input" name="paper-orientation">
            <option value="landscape">Landscape</option>
            <option value="portrait">Portrait</option>
          </select>
        </li>
      </ul>

      <ul class="options options-images">
        <li>Image Options</li>
        <li>
          Image Size
          <select class="option-input" name="image-size">
            <option value="3x2">3&quot; x 2&quot;</option>
            <option value="5x3.75">5&quot; x 3.75&quot;</option>
            <option value="6x4">6&quot; x 4&quot;</option>
            <option value="6x4.5">6&quot; x 4.5&quot;</option>
            <option value="custom_in">Custom (in)</option>
            <option value="custom_cm">Custom (cm)</option>
          </select>
          <div class="custom-image-size option-input"><input type="number" name="width" class="small-number-input" value="">x<input type="number" name="height" class="small-number-input" value="">
        </li>
        <li>
          Number of images
          <input type="number" name="image-count" class="small-number-input option-input" value="4">
        </li>
        <li>
          Image Padding
          <input type="number" name="image-padding" class="small-number-input option-input" value="5">
        </li>
        <li>
          Rotate Placeholder
          <input class="option-input" type="radio" name="rotate-image" value="rotate-placeholder">
        </li>
        <li>
          Rotate Image
          <input class="option-input" type="radio" name="rotate-image" value="rotate-image" checked>
        </li>
      </ul>

      <ul class="options">
        <li class="options-select">
          <button type="button" name="apply">Apply</button>
          <button type="button" name="print">Print</button>
          <button type="button" name="help">Help</button>
        </li>
      </ul>

    </div><div class="preview">
      <div class="print-page"></div>
    </div>
    <style id="print-media" media="page">

    </style>
    <script src="js/analytics.js" type="text/javascript"></script>
    <script type="text/javascript"></script>
    <script src="js/jquery.js"></script>
    <script src="js/print.js"></script>
  </body>
</html>