public
/
autodoc

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="stylesheet" href="css/bootstrap.min.css" />
  <link rel="stylesheet" href="css/autodoc.css" />
  <link rel="stylesheet" href="css/slick.css" />
  <link rel="stylesheet" type="text/css" href="css/slick-theme.css" />
  <script defer src="js/fontawesome-all.min.js"></script>
  <title>AutoDoc</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">AutoDoc</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto" id="autodoc_navbar">
        <li class="nav-item active">
          <a class="nav-link" href="#home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#document">Document</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#upload">Upload</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#tags">Tags</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#search">Search</a>
        </li>
        <!--
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
-->
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Quick Search" aria-label="Search" />
      </form>
      <div>
        <button type="button" class="autodoc_ajax_off btn btn-secondary disabled">
          <i class="fas fa-signal"></i>
        </button>
        <button type="button" class="autodoc_ajax_on d-none btn btn-primary disabled">
          <i class="fas fa-sync fa-spin"></i>
        </button>
      </div>
    </div>
  </nav>

  <div class="container" id="autodoc_tab">
    <!-- Home -->
    <div class="container d-none" id="autodoc_tab_home">
      <span class="lead">Current Documents</span>
      <!-- template -->
      <div class="d-none" id="autodoc_template_home">
        <div class="row autodoc_template_home_row"></div>
        <div class="row">
          <div class="col autodoc_template_home_col text-center">
            <table class="table table-borderless table-sm small">
              <tr>
                <td colspan="2" class="text-center autodoc_img">
                  <img class="autodoc_template_home_img img-thumbnail rounded" src="" />
                </td>
              </tr>
              <tr>
                <td class="text-left">Pages:</td>
                <td class="text-right">
                  <span class="autodoc_template_home_pages">undefined</span>

                </td>
              </tr>
              <tr>
                <td class="text-left">Owner:</td>
                <td class="text-right">
                  <span class="autodoc_template_home_owner">undefined</span>
                </td>
              </tr>
              <tr>
                <td class="text-left">
                  Created:
                </td>
                <td class="text-right">
                  <span class="autodoc_template_home_created">undefined</span>
                </td>
              </tr>
              <tr>
                <td class="text-left">
                  Name:
                </td>
                <td class="text-right">
                  <span class="autodoc_template_home_name">n/a</span>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <span class="badge badge-pill badge-secondary autodoc_template_home_tag"></span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="modal fade" id="autodoc_home_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header row">
              <div class="col-2 align-self-begin">
                <h5 class="modal-title">Document</h5>
              </div>
              <div class="col-4 align-self-center">
                <div class="btn-group" role="group" aria-label="Basic example">
                  <button type="Button" class="btn btn-sm btn-light" disabled>
                    <i class="fas fa-file-image"></i>
                  </button>
                  <button type="button" class="btn btn-sm btn-light autodoc_home_modal_size">S</button>
                  <button type="button" class="btn btn-sm btn-light autodoc_home_modal_size">M</button>
                  <button type="button" class="btn btn-sm btn-light autodoc_home_modal_size">L</button>
                  <button type="button" class="btn btn-sm btn-light autodoc_home_modal_size active">XL</button>
                </div>
              </div>
            </div>
            <div class="modal-body autodoc_home_modal_body">
              <div class="row">
                <div id="autodoc_home_modal_left" class="col-1 autodoc_valign text-light bg-secondary autodoc_noselect"
                  style="opacity: 0.15;">
                  <i class="fas fa-3x fa-chevron-circle-left"></i>
                </div>
                <div class="col">
                  <img class="img-fluid" id="autodoc_home_modal_img" />
                  <div class="text-center">Page
                    <span class="autodoc_home_modal_page"></span>
                    /
                    <span class="autodoc_home_modal_pages"></span>
                  </div>
                </div>
                <div id="autodoc_home_modal_right" class="col-1 autodoc_valign text-light bg-secondary autodoc_noselect"
                  style="opacity: 0.15;">
                  <i class="fas fa-3x fa-chevron-circle-right"></i>
                </div>
              </div>
            </div>
            <div class="modal-footer autodoc_home_modal_footer">
              <table class="table table-striped table-sm">
                <tr>
                  <th scope="row">Name</th>
                  <td>
                    <span class="autodoc_home_modal_name"></span>
                    <input type="text" class="d-none autodoc_home_modal_name">
                  </td>
                </tr>
                <tr>
                  <th scope="row">Created</th>
                  <td class="autodoc_home_modal_created"></td>
                </tr>
                <tr>
                  <th scope="row">Languages</th>
                  <td class="autodoc_home_modal_languages"></td>
                </tr>
                <tr>
                  <th scope="row">Creator</th>
                  <td class="autodoc_home_modal_owner"></td>
                </tr>
                <tr>
                  <th scope="row">Pages</th>
                  <td class="autodoc_home_modal_pages"></td>
                </tr>
                <tr>
                  <th scope="row">
                    Tags
                    <button type="button"
                      class="autodoc_home_modal_tags_show btn btn-outline-primary btn-sm">Add</button>
                    <input type="text" class="d-none form-control typeahead autodoc_home_modal_tags_add"
                      autocomplete="off" data-provide="typeahead">
                  </th>
                  <td class="autodoc_home_modal_tags">
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
      <div id="autodoc_home_body">
      </div>
    </div>

    <!-- Document -->
    <div class="container d-none" id="autodoc_tab_document">
      <div class="autodoc_document_template d-none">
        <div class="autodoc_document_template_carousel">
          <div class="text-center">
            <img class="img-thumbnail rounded" />
          </div>
        </div>
      </div>
      <div class="autodoc_document_empty">
        <span class="lead">Document are shown here. Go to 'home' and select a document.</span>
      </div>
      <div class="autodoc_document_body d-none">

        <div class="row">
          <div class="col">
            <span class="lead">Document</span>
          </div>
        </div>
        <div class="row">
          <div class="col-4">
            <table class="table table-condensed">
              <tr>
                <th scope="row">Name</th>
                <td>
                  <span class="autodoc_document_name"></span>
                  <input type="text" class="d-none autodoc_document_name">
                </td>
                <td>
                  <button type="button" class="btn btn-sm btn-outline-primary">Edit</button>
                </td>
              </tr>
              <tr>
                <th scope="row">Created</th>
                <td colspan="2" class="autodoc_document_created"></td>
              </tr>
              <tr>
                <th scope="row">Languages</th>
                <td colspan="2" class="autodoc_document_languages"></td>
              </tr>
              <tr>
                <th scope="row">Creator</th>
                <td colspan="2" class="autodoc_document_owner"></td>
              </tr>
              <tr>
                <th scope="row">Pages</th>
                <td colspan="2" class="autodoc_document_pages"></td>
              </tr>
              <tr>
                <th scope="row">
                  Tags
                </th>
                <td class="autodoc_document_tags">
                  <span class="autodoc_document_tags_template badge d-none"></span>
                </td>
                <td>
                  <button type="button" class="autodoc_document_tags_show btn btn-outline-primary btn-sm">Add</button>
                  <input type="text" class="d-none form-control typeahead autodoc_document_tags_add" autocomplete="off"
                    data-provide="typeahead">
                </td>
              </tr>
            </table>
          </div>
          <div class="col-8">
            <div class="autodoc_document_carousel">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <img class="autodoc_document_image img-fluid" />
          </div>
        </div>
        <div class="row">
          <div class="col">
            <button type="button" class="autodoc_document_btn_primary btn btn-sm btn-outline-primary">
              Make primary page</button>
          </div>
        </div>
      </div>

      <!-- Upload -->
      <div class="container d-none" id="autodoc_tab_upload">
        <div class="d-none autodoc_template_progress">
          <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated text-dark"></div>
          </div>
        </div>
        <span class="lead">upload</span>
        <div class="row">
          <div class="col">

            <div class="lead">Upload Zone</div>

            <div class="text-center autodoc_upload_zone">
              Drag & Drop files (png, jpeg, pdf) into this zone to attach them to a single new document<br />
              Files can be uploaded at once or separately. A long as the page is not refreshed or the new document
              button
              is pushed, they will all be attached to the same document
            </div>


          </div>

          <div class="col">
            <div class="lead">Upload Status</div>
            <div class="autodoc_upload_status"></div>
          </div>
        </div>

      </div>
    </div>

    <!-- Tags -->
    <div class="container d-none" id="autodoc_tab_tags">
      <span class="lead">Manage Tags</span>
      <div class="row">
        <div class="col-6">
          <table class="table table-borderless">
            <tr>
              <th>1. Tag Name</th>
              <td>
                <select class="custom-select autodoc_tag_list">
                  <option disabled selected>Choose tag to edit</option>
                  <option value="">New tag...</option>
                </select>
                <input type="hidden" class="autodoc_tag_id" value="">
                <input type="text" placeholder="Tag name" class="autodoc_tag_text d-none">
              </td>
            </tr>
            <tr>
              <th>2. Color</th>
              <td>
                <div class="btn-group" role="group">
                  <button type="button" class="btn btn-primary autodoc_tag_color active"
                    data="autodoc_tag_color_primary">
                    <span class="autodoc_tag_btn_on">
                      <i class="fas fa-check"></i>
                    </span>
                    <span class="autodoc_tag_btn_off d-none">
                      <i class="fas fa-times"></i>
                    </span>
                  </button>
                  <button type="button" class="btn btn-secondary autodoc_tag_color" data="autodoc_tag_color_secondary">
                    <span class="autodoc_tag_btn_on d-none">
                      <i class="fas fa-check"></i>
                    </span>
                    <span class="autodoc_tag_btn_off">
                      <i class="fas fa-times"></i>
                    </span>
                  </button>
                  <button type="button" class="btn btn-success autodoc_tag_color" data="autodoc_tag_color_success">
                    <span class="autodoc_tag_btn_on d-none">
                      <i class="fas fa-check"></i>
                    </span>
                    <span class="autodoc_tag_btn_off">
                      <i class="fas fa-times"></i>
                    </span>
                  </button>
                  <button type="button" class="btn btn-danger autodoc_tag_color" data="autodoc_tag_color_danger">
                    <span class="autodoc_tag_btn_on d-none">
                      <i class="fas fa-check"></i>
                    </span>
                    <span class="autodoc_tag_btn_off">
                      <i class="fas fa-times"></i>
                    </span>
                  </button>
                  <button type="button" class="btn btn-warning autodoc_tag_color" data="autodoc_tag_color_warning">
                    <span class="autodoc_tag_btn_on d-none">
                      <i class="fas fa-check"></i>
                    </span>
                    <span class="autodoc_tag_btn_off">
                      <i class="fas fa-times"></i>
                    </span>
                  </button>
                  <button type="button" class="btn btn-info autodoc_tag_color" data="autodoc_tag_color_info">
                    <span class="autodoc_tag_btn_on d-none">
                      <i class="fas fa-check"></i>
                    </span>
                    <span class="autodoc_tag_btn_off">
                      <i class="fas fa-times"></i>
                    </span>
                  </button>
                  <button type="button" class="btn btn-light autodoc_tag_color" data="autodoc_tag_color_light">
                    <span class="autodoc_tag_btn_on d-none">
                      <i class="fas fa-check"></i>
                    </span>
                    <span class="autodoc_tag_btn_off">
                      <i class="fas fa-times"></i>
                    </span>
                  </button>
                  <button type="button" class="btn btn-dark autodoc_tag_color" data="autodoc_tag_color_dark">
                    <span class="autodoc_tag_btn_on d-none">
                      <i class="fas fa-check"></i>
                    </span>
                    <span class="autodoc_tag_btn_off">
                      <i class="fas fa-times"></i>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr>
              <th>3. Preview</th>
              <td>
                <span id="autodoc_tag_result" class="badge badge-primary"></span>
              </td>
            </tr>
            <tr>
              <th>4. Confirm</th>
              <td>
                <button type="button" class="autodoc_tag_add btn btn-outline-primary">Add/Update Tag</button>
                <button type="button" class="autodoc_tag_delete btn btn-outline-danger">Delete Tag</button>
              </td>
            </tr>
          </table>

        </div>
      </div>
      <div class="col">

      </div>
    </div>

    <!-- Search -->
    <div class="container d-none" id="autodoc_tab_search">
      <span class="lead">search</span>
    </div>
  </div>

  <footer class="fixed-bottom page-footer font-small bg-dark">
    <div class="container footer-copyright text-center text-muted py-3">
      AutoDoc v1.0 &copy; Pascal Gloor 2019
    </div>
  </footer>

  <script src="js/jquery.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/tooltip.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/bs-custom-file-input.min.js"></script>
  <script src="js/slick.min.js"></script>
  <script src="js/autodoc.js"></script>
</body>

</html>