views/popups.pug

#load-save.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog
    .modal-content
      .modal-header
        button.close(type="button" data-dismiss="modal" aria-hidden="true") ×
        h3.modal-title Load and save editor text
      .modal-body
        div
          ul.nav.nav-tabs(role="tablist")
            li.active(role="presentation"): a(href="#load-examples" role="tab" data-toggle="tab") Examples
            li(role="presentation"): a(href="#load-browser-local" role="tab" data-toggle="tab") Browser-local storage
            li(role="presentation"): a(href="#load-file-system" role="tab" data-toggle="tab") File system
          div.tab-content
            #load-examples.tab-pane.active(role="tabpanel")
              h4 Load from examples:
              ul.examples.small-v-scrollable
                li.template: a(href="#")
            #load-browser-local.tab-pane(role="tabpanel")
              h4 Load from browser-local storage:
              ul.local-storage.small-v-scrollable
                li.template: a(href="#")
              .form-group
                input.save-name(type="text" size="20")
                button.btn.save-button(type="button") Save to browser-local storage
            #load-file-system.tab-pane(role="tabpanel")
              label.btn.btn-default.btn-file Load from a local file
                input.local-file(style="display:none" type="file")
              label.btn.btn-default.btn-file(style="margin-left: 5px;") Save to file
                input.save-file(style="display:none" type="button")
      .modal-footer
        button.btn.btn-default(type="button" data-dismiss="modal") Close

#alert.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog
    .modal-content
      .modal-header
        button.close(type="button" data-dismiss="modal" aria-hidden="true") ×
        h3.modal-title Something alert worthy
      .modal-body
      .modal-footer
        button.btn.btn-default(type="button" data-dismiss="modal") Close

#yes-no.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog
    .modal-content
      .modal-header
        button.close(type="button" data-dismiss="modal" aria-hidden="true") ×
        h3.modal-title Well, do you or not?
      .modal-body
      .modal-footer
        button.btn.no(type="button" data-dismiss="modal") No
        button.btn.yes(type="button" data-dismiss="modal") Yes

#settings.modal.fade.gl_keep(tabindex="-1" role="dialog")
  .modal-dialog
    .modal-content
      .modal-header
        button.close(type="button" data-dismiss="modal" aria-hidden="true") ×
        h3.modal-title Compiler Explorer Settings
      .modal-body
        .well.well-sm
          | These settings control how Compiler Explorer acts for you. They are not
          | preserved as part of shared URLs, and are persisted locally using browser
          | local storage.
        .well.well-sm
          h4 Editor
          .form-group(role="group")
            .checkbox
              label
                input.autoCloseBrackets(type="checkbox")
                | Automatically insert matching brackets and parentheses
            div
              .checkbox
                label
                  input.compileOnChange(type="checkbox")
                  | Compile automatically when source changes
              div Delay before compiling: 
                b 0.25s 
                .slider.slider-horizontal.delay
                b  3s
            .checkbox
              label
                input.hoverShowSource(type="checkbox")
                | Highlight linked code lines on hover
            .checkbox
              label
                input.hoverShowAsmDoc(type="checkbox")
                | Show asm description on hover
            label
              | Tab width:
              select.tabWidth

        .well.well-sm
          h4 Compilation
          .form-group(role="group")
            .checkbox
              label
                input.colourise(type="checkbox")
                | Colourise lines to show how the source maps to the output
            label
              | Colour scheme:
              select.colourScheme
      .modal-footer
        button.btn.btn-default(type="button" data-dismiss="modal") Close

#notifications