inkstitch/print/templates/ui.html

    <div class="ui">
        <p class="header">{{ _('Ink/Stitch Print Preview') }}</p>
        <div class="buttons">
          <button class="print">{{ _('Print') }}</button>
          <button class="settings">{{ _('Settings') }}</button>
          <button class="close">{{ _('Close') }}</button>
        </div>
        <div id="errors">
          {{ _('⚠ lost connection to Ink/Stitch') }}
        </div>
    </div>

    <div id="settings-ui">
      <p id="close-settings">X</p>
      <h1>{{ _('Settings') }}</h1>
      
      <div id="tabs">
        <button class="tab active">{{ _('Page Setup') }}</button>
        <button class="tab" id="branding-tab">{{ _('Branding') }}</button>
        <button class="tab">{{ _('Estimated Time') }}</button>
        <button class="tab">{{ _('Design') }}</button>
      </div>

      <div id="fieldsets-ui">

        <fieldset id="ui-page-setup">
          <fieldset>
          <legend>{{ _('Page Setup') }}</legend>
          <p class="select-container">
            <label for="printing-size">{{ _('Printing Size') }}:</label>
              <select id="printing-size" data-field-name="paper-size">
                <option value="letter" selected="selected">Letter</option>
                <option value="a4">A4</option>
              </select>
          </p>
        </fieldset>
        <fieldset>
          <legend>{{ _('Print Layouts') }}</legend>
          <p><input type="checkbox" class="view" id="client-overview" data-field-name="client-overview" /><label for="client-overview">{{ _('Client Overview') }}</label></p>
          <p><input type="checkbox" class="view" id="client-detailedview" data-field-name="client-detailedview" /><label for="client-detailedview">{{ _('Client Detailed View') }}</label></p>
          <p><input type="checkbox" class="view" id="operator-overview" data-field-name="operator-overview" CHECKED /><label for="operator-overview">{{ _('Operator Overview') }}</label></p>
          <p><input type="checkbox" class="view" id="operator-detailedview" data-field-name="operator-detailedview" CHECKED /><label for="operator-detailedview">{{ _('Operator Detailed View') }}</label></p>
          <p style="text-indent: 1.5em;">{{ _('Thumbnail size') }}: <input type="range" min="15" max="110" value="15" step="5" id="operator-detailedview-thumbnail-size" data-field-name="operator-detailedview-thumbnail-size" style="vertical-align: middle;"> <span id="display-thumbnail-size">15mm</span></p>
        </fieldset>
        <button class="save-settings" title="{{ _("Includes these Page Setup, estimated time settings and also the icon.") }}">{{ _("Save as defaults") }}</button>
      </fieldset>

      <fieldset id="ui-branding" class="ui-tab">
        <fieldset>
          <legend>{{ _('Logo') }}</legend>
          <figure class="brandlogo brandlogo-ui">
            <label class="logo-legend">
              {{ ('Choose File') }}
              <img src="{{ logo.src or "resources/inkstitch-logo.svg" }}" alt="{{ logo.title }}" title="{{ logo.title }}" data-field-name="logo" class="logo-ui">
              <input type=file class="logo-picker" />
            </label>
          </figure>
        </fieldset>
        <fieldset id="edit-footer">
          <legend>{{ _('Footer: Operator contact information') }}</legend>
          <div id="tool-bar">
            <button id="tb-bold" class="tb-button ff-serif edit-only" title="Bold"><b>B</b></button>
            <button id="tb-italic" class="tb-button ff-serif edit-only" title="Italic"><i>I</i></button>
            <button id="tb-underline" class="tb-button ff-serif edit-only" title="Underline"><u>U</u></button>
            <button id="tb-remove" class="tb-button ff-serif edit-only" title="Remove formatting"><u style="vertical-align: super; font-size: 60%;">A</u><span style="vertical-align: sub; font-size: 80%;">A</span></button>
            <button id="tb-hyperlink" class="tb-button edit-only" title="Hyperlink">☍</button>
            <button id="tb-mail" class="tb-button edit-only" title="E-Mail">✉</button>
            <button id="tb-reset" class="tb-button" title="Reset text">↺</button>
            <p id="edit-mode"><input type="checkbox" id="switch-mode" name="switch-mode" /> <label for="switch-mode">{{ ('Show HTML') }}</label></p>
            <div id="footer-url">
              <p>{{ _("Enter URL") }}: <input type="text" id="footer-link" name="footer-link" value="https://" /></p>
              <p><button id="url-ok">{{ _("OK") }}</button> <button id="url-cancel">{{ _("Cancel") }}</button></p>
            </div>
            <div id="footer-email">
              <p>{{ _("Enter E-Mail") }}: <input type="text" id="footer-mail" name="footer-mail" value="@" /></p>
              <p><button id="mail-ok">{{ _("OK") }}</button> <button id="mail-cancel">{{ _("Cancel") }}</button></p>
            </div>
            <div id="footer-info-original">{{ _("Proudly generated with") }} <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></div>
            <div id="footer-reset">
              <p>{{ _("This will reset your custom text to the default.") }}</p>
              <p>{{ _("All changes will be lost.") }}</p>
              <p><button id="reset-ok">{{ _("OK") }}</button> <button id="reset-cancel">{{ _("Cancel") }}</button></p>
            </div>
          </div>
          <div id="footer-info-text" contenteditable="true"><div>{{ _("Proudly generated with") }} <a href="http://inkstitch.org/" target="_blank">Ink/Stitch</a></div></div>
          <p class="notice--warning"><b>Note</b>: If you are using Firefox, use visible URLs. Links will not be printed to PDF with this browser.</p>
        </fieldset>
        <button class="save-settings" title="{{ _('Includes these Page Setup, estimated time settings and also the icon.') }}">{{ _("Save as defaults") }}</button>
      </fieldset>

      <fieldset id="ui-time" class="ui-tab">
        <legend>{{ _('Estimated Time') }}</legend>
        <fieldset>
          <legend>{{ _('Machine Settings') }}</legend>
          <p>
            <input class="view" type="number" id="machine-speed" data-field-name="machine-speed" min="0" value="700" title="{{ _('Average Machine Speed') }}" /> 
            <label for="machine-speed">{{ _('stitches per minute ') }}</label>
          </p>
        </fieldset>
        <fieldset>
          <legend>{{ _('Time Factors') }}</legend>
          <p>
              <input type="number" id="time-additional" data-field-name="time-additional" min="0" value="0" />
              <label for="time-additional" title="{{ _('Includes average time for preparing the machine, thread breaks and/or bobbin changes, etc.') }}">{{ _('seconds to add to total time*') }}</label>
          </p>
          <p>
            <input type="number" id="time-color-change" data-field-name="time-color-change" min="0" value="10" />
            <label for="time-color-change" title="{{ _('This will be added to the total time.') }}">{{ _('seconds needed for a color change*') }}</label></p>
          <p>
            <input type="number" id="time-trims" data-field-name="time-trims" min="0" value="10" />
            <label for="time-trims">{{ _('seconds needed for trim') }}</label></p>
        </fieldset>
        <fieldset>
          <legend>{{ _('Display Time On') }}</legend>
          <p>
            <p><input type="checkbox" class="time-display" id="time-clo" data-field-name="time-clo" /><label for="time-clo">{{ _('Client Overview') }}</label></p>
            <p><input type="checkbox" class="time-display" id="time-cld" data-field-name="time-cld" /><label for="time-cld">{{ _('Client Detailed View') }}</label></p>
            <p><input type="checkbox" class="time-display" id="time-opo" data-field-name="time-opo" CHECKED /><label for="time-opo">{{ _('Operator Overview') }}</label></p>
            <p><input type="checkbox" class="time-display" id="time-opd" data-field-name="time-opd" CHECKED /><label for="time-opd">{{ _('Operator Detailed View') }}</label></p>
          </p>
        </fieldset>
        <button class="save-settings" title="{{ _('Includes page setup, estimated time and also the branding.') }}">{{ _("Save as defaults") }}</button>
      </fieldset>

      <fieldset id="ui-design" class="ui-tab">
        <legend>{{ _('Design') }}</legend>
        <p class="select-container"><label for="thread-palette">{{ _('Thread Palette') }}:</label>
          <select id="thread-palette" data-field-name="thread-palette">
            {% if selected_palette is none %}
              <option value="" selected>{{ _('None') }}</option>
            {% endif %}
            {% for palette in palettes %}
              <option value="{{ palette }}" {{ "selected" if palette == selected_palette.name else "" }}>{{ palette }}</option>
            {% endfor %}
          </select>
        </p>
      </fieldset>

    </div><!-- END FIELDSETS-UI -->

  </div><!-- END SETTINGS-UI-->

    <div id="modal-background" class="modal"></div>
    <div id="modal-content" class="modal">
        <p>
          {{ _("Changing the thread palette will cause thread names and catalog numbers to be recalculated based on the new palette.  Any changes you have made to color or thread names will be lost.  Are you sure?") }}
        </p>
        <p>
          <button id="modal-yes">{{ _("Yes") }}</button>
          <button id="modal-no">{{ _("No") }}</button>
        </p>
    </div>