content.html

<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-dark sticky-top contrastColor">

  <a class="navbar-brand" href="#">AnnaLügt</a>

  <button id="navbar-toggler" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-333"
    aria-controls="navbarSupportedContent-333" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent-333">

    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="statistics.php">Statistics</a>
      </li>
    </ul>

    <ul class="navbar-nav mr-right mt-2 mt-lg-0">
      <li class="nav-item">
        <a id="logoutButton" class="nav-link" href="index.php">Logout</a>
      </li>
    </ul>

  </div>
</nav>
<!--/.Navbar -->


<div class="jumbotron text-center backColor">
    <input class="btn btn-dark" type="button" id="addAttrButton" value="Add Category" data-toggle="modal" data-target="#newCategory">
    <input class="btn btn-dark" type="button" id="addActButton" value="Add Activity" data-toggle="modal" data-target="#newActivity">
    <div class="row justify-content-md-center" id="attributesBox"></div>
</div>


<div id="newCategory" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content backColor">
      <div class="modal-header">
        <h5 class="modal-title text-white">New Category</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form>
            <div class="form-group">
              <input type="text" class="form-control text-light bg-dark" id="newCategoryName" placeholder="name">
            </div>
            <div class="form-group">
              <input type="text" class="form-control text-light bg-dark" id="newCategoryDescription" placeholder="description">
            </div>
            <div class="form-group">
                <select class="form-control text-light bg-dark" id="newCategoryFormat">
                </select>
            </div>
          </form>
      </div>
      <div class="modal-footer">
        <button id="saveNewCategory" type="button" class="btn btn-dark">Save category</button>
        <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="newActivity" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content backColor">
      <div class="modal-header">
        <h5 class="modal-title text-white">New Activity</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form>
            <div class="form-group">
              <input type="text" class="form-control text-light bg-dark" id="newActivityName" placeholder="name">
            </div>
          </form>
      </div>
      <div class="modal-footer">
        <button id="saveNewActivity" type="button" class="btn btn-dark">Save activity</button>
        <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="editCategory" class="modal" tabindex="-1" role="dialog" attrId="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content backColor">
      <div class="modal-header">
        <h5 class="modal-title text-white">Edit Category</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <form>
            <div class="form-group">
              <input type="text" class="form-control text-light bg-dark" id="editCategoryName" placeholder="name">
            </div>
            <div class="form-group">
              <input type="text" class="form-control text-light bg-dark" id="editCategoryDescription" placeholder="description">
            </div>
            <div class="form-group">
                <select class="form-control text-light bg-dark" id="editCategoryFormat">
                </select>
            </div>
          </form>
      </div>
      <div class="modal-footer">
        <button id="saveEditCategory" type="button" class="btn btn-dark">Save category</button>
        <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div id="removeCategory" class="modal" tabindex="-1" role="dialog" attrId="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content backColor">
      <div class="modal-header">
        <h5 id="removeCategoryTitle" class="modal-title text-white">Remove Category: </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-footer">
        <button id="executeRemoveCategory" type="button" class="btn btn-dark">Remove category</button>
        <button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>