Skip to content
Snippets Groups Projects
Select Git revision
  • 4f60c2f241e96eb2974cb8f7084a73b2ca8638d4
  • main default protected
  • Gabes-testing-branch
  • 81-as-a-child-i-want-a-very-flashy-and-modern-looking-webpage-that-will-draw-me-in-and-keep-me
  • locationApporvalFormValidationUpdate
  • 74-as-a-user-i-want-to-see-a-page-of-local-authorities-so-that-i-can-easily-source-contact-details
  • businesses
  • 77-as-a-user-i-want-to-be-able-to-use-the-application-on-any-device-e-g-iphone-ipad-laptop
  • 69-as-a-user-i-would-like-a-town-specific-page-which-shows-all-trails-for-that-town-so-that-i-can
  • 80-as-a-convenience-enthusiast-i-want-a-drop-down-menu-to-be-able-to-quickly-scan-qr-codes-i-find
  • 82-as-a-site-admininstrator-i-want-to-be-able-to-review-submited-trail-checkpoints-by-bussiness
  • 68-as-a-user-i-would-like-to-see-a-map-containing-all-landmarks-for-a-trail-and-a-suggested-path
  • 70-as-a-repeat-trail-visitor-i-want-to-be-able-to-create-an-account-so-i-can-save-and-review-my
  • towns
  • DTFrontEnd
  • 52-as-a-user-i-would-like-to-see-a-map-of-the-landmarks-so-that-i-can-figure-out-where-to-go
  • 73-as-a-qr-scanning-connoisseur-i-want-to-unlock-stickers-after-scanning-a-qr-code-to-feel-a-sense
  • QRCodes
  • consumers
  • foreignkeys
  • cleanup
21 results

userProfile.html

    • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    userProfile.html 2.73 KiB 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title th:text="'VZLA Profile Page of ' + ${user.getName()}"></title>
    <link rel="stylesheet" th:href="@{/css/userProfile.css}">
<!--    <link rel="stylesheet" th:href="@{/css/templatingstyle.css}">-->
</head>
<body>

<header>
    <ul class="footerBar">
        <li class="footerButton"><b>Home</b></li>
        <li class="footerButton"><b>About</b></li>
        <li class="footerButton"><b>Map</b></li>
        <li class="footerButton"><b>Facilities</b></li>
        <li class="footerButton"><b>Search</b></li>
    </ul>
</header>

<main>
    <!--PICTURE - DATA - BADGES -->
    <div class="userInfo">
        <img th:src="@{${user.getImgPath()}}"
             th:alt="${user.getName()}"
             id="userPicture"
        >
        <h1 th:text="${user.getName()}"></h1>
        <!--TODO add some progression info here?-->
    </div>
    <section class="rewards"> <!--Reward lists, badges on top, stickers (larger) on the bottom-->
        <article id="badgesBar">
            <h2>Your Badges: </h2> <!--Shows first earned badges, followed by greyed out badges-->
            <div id="allBadgesContainer"  class="centerFlex">
                <img class="badgeImg"  th:each="badge : ${badges}" th:src="@{'..' + ${badge.getImgPath()}}"
                     th:id="'img' + ${badge.getId()}" th:alt="${badge.getName()}" >
            </div>
        </article>
        <article class="dragonProgression">
            <h1>The Dragon Trail</h1>
            <div class="dragonContainer">
                <div class="dragonFill">
                    <img th:src="@{/images/rewards/dragonFilled.png}"
                         alt="Filled Dragon" id="FilledDragon" class="dragonImg">
                </div>
                <div class="dragonOut">
                    <img th:src="@{/images/rewards/dragonOutline.png}"
                         alt="Outline Dragon" id="OutlineDragon" class="dragonImg">
                </div>
            </div>
            <h2>40%</h2>
        </article>
        <article id="stickersBox"> <!--Need a controller to show earned stickers -->
            <h2> STICKERS! </h2>
            <div class="stickersContainer">
                <img class="stickerImg"  th:each="sticker : ${stickers}" th:src="@{'../' + ${sticker.getImgPath()}}"
                     th:id="'img' + ${sticker.getId()}" th:alt="${sticker.getName()}" >
            </div>
        </article>
    </section>


</main>

<footer>

</footer>



    </body>
</html>

<!--TODO finished doing the tooltips, need to add some more changes to them for sure
    TODO afterwards probably need to implement thymeleaf so it shows badges based on the list
    TODO implement some placeholder pictures as well for the badges and for the stickers -->