| 1 | <!DOCTYPE html>
|
|---|
| 2 | <html lang="en">
|
|---|
| 3 | <head>
|
|---|
| 4 | <meta charset="UTF-8">
|
|---|
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|---|
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|---|
| 7 | <title>User Profile</title>
|
|---|
| 8 |
|
|---|
| 9 | <!-- Bootstrap CSS -->
|
|---|
| 10 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
|
|---|
| 11 | integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
|
|---|
| 12 | crossorigin="anonymous">
|
|---|
| 13 |
|
|---|
| 14 | <!-- Add any additional styling or CSS links here -->
|
|---|
| 15 | <style>
|
|---|
| 16 | body {
|
|---|
| 17 | background-color: #f8f9fa;
|
|---|
| 18 | }
|
|---|
| 19 |
|
|---|
| 20 | .profile-container {
|
|---|
| 21 | max-width: 400px;
|
|---|
| 22 | margin: auto;
|
|---|
| 23 | background-color: #fff;
|
|---|
| 24 | padding: 20px;
|
|---|
| 25 | margin-top: 50px;
|
|---|
| 26 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|---|
| 27 | border-radius: 8px;
|
|---|
| 28 | }
|
|---|
| 29 |
|
|---|
| 30 | .profile-heading {
|
|---|
| 31 | text-align: center;
|
|---|
| 32 | margin-bottom: 20px;
|
|---|
| 33 | }
|
|---|
| 34 |
|
|---|
| 35 | .profile-label {
|
|---|
| 36 | font-weight: bold;
|
|---|
| 37 | }
|
|---|
| 38 |
|
|---|
| 39 | .profile-value {
|
|---|
| 40 | display: block;
|
|---|
| 41 | margin-top: 5px;
|
|---|
| 42 | }
|
|---|
| 43 | </style>
|
|---|
| 44 | </head>
|
|---|
| 45 | <body>
|
|---|
| 46 | <div th:replace="appBar"></div>
|
|---|
| 47 |
|
|---|
| 48 | <div class="profile-container">
|
|---|
| 49 |
|
|---|
| 50 | <div class="profile-heading">
|
|---|
| 51 | <h1>Profile</h1>
|
|---|
| 52 | </div>
|
|---|
| 53 |
|
|---|
| 54 | <div class="form-group">
|
|---|
| 55 | <label class="profile-label" for="name">Name:</label>
|
|---|
| 56 | <span id="name" class="profile-value" th:text="${session.user.getName()}"></span>
|
|---|
| 57 | </div>
|
|---|
| 58 |
|
|---|
| 59 | <div class="form-group">
|
|---|
| 60 | <label class="profile-label" for="age">Age:</label>
|
|---|
| 61 | <span id="age" class="profile-value" th:text="${session.user.getAge()}"></span>
|
|---|
| 62 | </div>
|
|---|
| 63 |
|
|---|
| 64 | <div class="form-group">
|
|---|
| 65 | <label class="profile-label" for="height">Height (cm):</label>
|
|---|
| 66 | <span id="height" class="profile-value" th:text="${session.user.getHeight()}"></span>
|
|---|
| 67 | </div>
|
|---|
| 68 |
|
|---|
| 69 | <div class="form-group">
|
|---|
| 70 | <label class="profile-label" for="weight">Weight (kg):</label>
|
|---|
| 71 | <span id="weight" class="profile-value" th:text="${session.user.getWeight()}"></span>
|
|---|
| 72 | </div>
|
|---|
| 73 | </div>
|
|---|
| 74 |
|
|---|
| 75 | <!-- Bootstrap JS and Popper.js (required for Bootstrap) -->
|
|---|
| 76 | <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
|
|---|
| 77 | integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
|
|---|
| 78 | crossorigin="anonymous"></script>
|
|---|
| 79 | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
|
|---|
| 80 | integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
|
|---|
| 81 | crossorigin="anonymous"></script>
|
|---|
| 82 | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
|
|---|
| 83 | integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
|
|---|
| 84 | crossorigin="anonymous"></script>
|
|---|
| 85 |
|
|---|
| 86 | </body>
|
|---|
| 87 | </html>
|
|---|
