<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:fragment="head">
    <title th:text="${title}">Title</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous" />

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css" rel="stylesheet" integrity="sha384-w+8Gqjk9Cuo6XH9HKHG5t5I1VR4YBNdPt/29vwgfZR485eoEJZ8rJRbm3TR32P6k" crossorigin="anonymous" />
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style> .error {
            color: red;
            }

            .table-head {
            text-align: center;
            }

            .footer-nav {
            margin: 2em 0;
            }

            .title {
            text-align: center;
            margin-top: 1em;
            margin-bottom: 1em;
            margin-left: auto;
            margin-right: auto;
            }

            .bottom-element {
            margin-bottom: 3em;
            }

            .no-data {
            font-style: italic;
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
            margin: 3em 0 3em 0;
            }

            .index-button {
            margin: 1em 1em;
            }

            .profile-list-item-buttons {
            margin: 0 0 2em 2em;
            }

            .add-item {
            margin: 1em 0 1em 0;
            }

            .instrument-name {
            font-size: 1.5em;
            font-weight: bold;
            }

            .stopwatch {
            display: inline-block;
            background-color: white;
            border: 1px solid #eee;
            padding: 5px;
            margin: 5px;
            }

            .stopwatch span {
            font-weight: bold;
            display: block;
            }

            .stopwatch a {
              padding-right: 5px;
              text-decoration: none;
            }

            #account-form {
            max-width:600px;
            margin-top: 1em;
            margin-bottom:1em;
            }

            #login-form {
            margin-top: 1em;
            margin-bottom:1em;
            }

            #timerContainer {
              font-family: 'Source Sans Pro', sans-serif;
              font-weight: 300;
              width:700px;
              margin:20px auto;
              min-height: 60px;
              border-top:0px;
            }
            .timer, .reset {
              float:left;
              width: 54%;
              padding: 20px 0;
              font-size: 24px;
              text-align:center;
              color: #fff;
              background: #A90000;
              cursor: pointer
            }
            .reset {
              background: #550000;
              color: white;
              width:14.9%;
              border-left: 1px solid #990000;
            }
            .reset:hover {
              background: #CC0000;
            }
            .lighter {
              background: #CC0000
            }

    </style>

</head>

<body>
<nav th:fragment="profileNav" class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item-active">
                <a class="nav-link" th:href="@{/profile/}">Profile <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/instrument/}">Add an Instrument <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/profile/logout}">Log Out</a>
            </li>
        </ul>
    </div>
</nav>

<nav th:fragment="generalNav" class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" th:href="@{/profile/}">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/profile/logout}">Log Out</a>
            </li>
        </ul>
    </div>
</nav>

<nav th:fragment="loginNav" class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" th:href="@{/welcome/login}">Log in</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/welcome/newAccount}">Create Account</a>
            </li>
        </ul>
    </div>
</nav>

<h2 th:fragment="appName" class="appName">PracticeTrack</h2>

<nav th:fragment="navigation">
    <a th:href="@{'/welcome/login'}">Login Page</a> |
    <a th:href="@{'/welcome/newAccount'}">Create Account</a>
</nav>

<div th:fragment="footer-nav" class="footer-nav">
    <a th:href="@{/profile/}">Back to Profile </a>  |  <a th:href="@{/profile/logout}"> Log Out</a>
</div>

</body>
</html>
{'avg_line_length': 34.896907216494846, 'max_line_length': 221, 'alphanum_fraction': 0.548301329394387, 'licenses': ['MIT'], 'repository_name': 'rdubois46/Capstone-PracticeTrack', 'path': 'capstone-practice-track/src/main/resources/templates/fragments.html', 'size': 6770, 'lang': 'HTML'}