Gnarwhal/achievements_project
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Revamped UI...ish

Browse source
This commit is contained in:
Gnarwhal 2021-02-05 20:19:11 -05:00
parent 13736d0ef9
commit 40a0e4046a
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
26 changed files with 2053 additions and 621 deletions
Download patch file Download diff file Expand all files Collapse all files

86
frontend/webpage/templates/achievements_page.html.template
View file

@ -1,40 +1,54 @@
<div class="list-page-search">
<label for="achievement-search">Search</label>
<input id="achievement-search" type="text" placeholder="Name, Keyword, etc..." achievement-name="achievement-search" />
</div>
<div class="list-page-partitions">
<div class="list-page-filter-partition">
<p class="page-subheader-text">Filters</p>
<div class="page-subheader-separator"></div>
<div id="from-games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">From Games Owned</p>
</div>
<div id="in-progress-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">In Progress</p>
</div>
<div id="completed-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">Completed</p>
</div>
<div class="page-subsection">
<div class="list-page-search page-subsection-chunk">
<label for="achievement-search">Search</label>
<input id="achievement-search" type="text" placeholder="Name, Keyword, etc..." name="achievement-search"/>
</div>
<div class="list-page-list-partition">
<div class="list-page-list">
<div class="list-page-header">
<p class="list-page-entry-icon"></p>
<p class="list-page-entry-text achievement-name">Name</p>
<p class="list-page-entry-text achievement-description">Description</p>
<p class="list-page-entry-text achievement-stages">Stages</p>
</div>
<template data-template="achievements-page-list: List<Basic>">
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_achievement.png" alt="Achievement Thumbnail"></img>
<p class="list-page-entry-text achievement-name">${achievement-name}</p>
<p class="list-page-entry-text achievement-description">${achievement-description}</p>
<p class="list-page-entry-text achievement-stages">${stages}</p>
<div class="list-page-partitions">
<div class="list-page-filter-partition">
<div class="page-subsection-wrapper">
<div class="page-subheader">
<p class="page-subheader-text">Filters</p>
<div class="page-subheader-separator"></div>
</div>
</template>
<div class="list-page-filter-chunk page-subsection-chunk">
<div class="page-subsection-wrapper">
<div id="from-games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">From Games Owned</p>
</div>
<div id="in-progress-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">In Progress</p>
</div>
<div id="completed-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">Completed</p>
</div>
</div>
</div>
</div>
</div>
<div class="list-page-list-partition page-subsection-wrapper">
<div class="page-subsection-chunk">
<div class="list-page-list">
<div class="list-page-header">
<p class="list-page-entry-icon"></p>
<p class="list-page-entry-text achievement-name">Name</p>
<p class="list-page-entry-text achievement-description">Description</p>
<p class="list-page-entry-text achievement-stages">Stages</p>
</div>
<template data-template="achievements-page-list: List<Basic>">
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_achievement.png" alt="Achievement Thumbnail"></img>
<div class="list-page-entry-text-section">
<p class="list-page-entry-text achievement-name">${achievement-name}</p>
<p class="list-page-entry-text achievement-description">${achievement-description}</p>
<p class="list-page-entry-text achievement-stages">${stages}</p>
</div>
</div>
</template>
</div>
</div>
</div>
</div>
</div>
</div>

106
frontend/webpage/templates/games_page.html.template
View file

@ -1,52 +1,64 @@
<div class="list-page-search">
<label for="game-search">Search</label>
<input id="game-search" type="text" placeholder="Name, Keyword, etc..." game-name="game-search" />
</div>
<div class="list-page-partitions">
<div class="list-page-filter-partition">
<p class="page-subheader-text">Filters</p>
<div class="page-subheader-separator"></div>
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">Games Owned</p>
</div>
<div class="page-subsection">
<div class="list-page-search page-subsection-chunk">
<label for="game-search">Search</label>
<input id="game-search" type="text" placeholder="Name, Keyword, etc..." game-name="game-search" name="game-search"/>
</div>
<div class="list-page-list-partition">
<div class="list-page-list">
<div class="list-page-header">
<p class="list-page-entry-icon"></p>
<p class="list-page-entry-text game-name">Name</p>
<p class="list-page-entry-text game-description">Description</p>
<div class="list-page-partitions">
<div class="list-page-filter-partition">
<div class="page-subsection-wrapper">
<div class="page-subheader">
<p class="page-subheader-text">Filters</p>
<div class="page-subheader-separator"></div>
</div>
<div class="list-page-filter-chunk page-subsection-chunk">
<div class="page-subsection-wrapper">
<div id="games-owned-filter" class="list-page-filter">
<div class="list-page-filter-checkbox"></div>
<p class="list-page-filter-name">Games Owned</p>
</div>
</div>
</div>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-list-partition page-subsection-wrapper">
<div class="page-subsection-chunk">
<div class="list-page-list">
<div class="list-page-header">
<p class="list-page-entry-icon"></p>
<p class="list-page-entry-text game-name">Name</p>
<p class="list-page-entry-text game-description">Description</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="list-page-entry">
<img class="list-page-entry-icon" src="res/dummy_game.png" alt="Achievement Icon.png" />
<p class="list-page-entry-text game-name">Latin</p>
<p class="list-page-entry-text game-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</div>

211
frontend/webpage/templates/profile_page.html.template
View file

@ -1,37 +1,37 @@
<div id="profile-section-1">
<div id="profile-info">
<img id="profile-info-pfp" src="res/temp_pfp.png" alt="User's Profile Pictuer" />
<div class="page-subheader-separator"></div>
<p id="profile-info-name">Jane Doe</p>
<div id="profile-info" class="page-subsection">
<div class="page-subsection-wrapper">
<div class="page-subheader">
<p id="profile-info-name" class="page-subheader-text">Jane Doe</p>
<div class="page-subheader-separator"></div>
</div>
<div id="profile-info-pfp-border" class="page-subsection-chunk">
<div id="profile-info-pfp-vignette">
<img id="profile-info-pfp-img" src="res/guest_pfp.png" alt="User's Profile Pictuer" />
</div>
</div>
</div>
</div>
<div id="profile-platforms">
<p class="page-subheader-text">Platforms</p>
<div class="page-subheader-separator"></div>
<div class="profile-list">
<div class="profile-entry accented">
<div class="profile-entry-left">
<div id="profile-platforms" class="page-subsection">
<div class="page-subsection-wrapper">
<div class="page-subheader">
<p class="page-subheader-text">Platforms</p>
<div class="page-subheader-separator"></div>
</div>
<div class="profile-list page-subsection-chunk">
<div class="profile-entry accented top">
<img class="profile-entry-icon" src="res/steam.png" alt="Steam Logo" />
<p class="profile-entry-text">Steam</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text platform-name">Steam</p>
<p class="profile-entry-text accented">Connected</p>
</div>
</div>
<div class="profile-entry">
<div class="profile-entry-left">
<div class="profile-entry">
<img class="profile-entry-icon" src="res/xbox.png" alt="Xbox Logo" />
<p class="profile-entry-text">Xbox Live</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text platform-name">Xbox Live</p>
<p class="profile-entry-text accented">Connected</p>
</div>
</div>
<div class="profile-entry">
<div class="profile-entry-left">
<div class="profile-entry">
<img class="profile-entry-icon" src="res/psn.png" alt="PSN Logo" />
<p class="profile-entry-text">PSN</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text platform-name">PSN</p>
<p class="profile-entry-text accented">Connected</p>
</div>
</div>
@ -39,109 +39,130 @@
</div>
</div>
<div id="profile-section-2">
<div id="profile-games">
<p class="page-subheader-text link">Games</p>
<div class="page-subheader-separator"></div>
<div class="profile-list">
<div class="profile-entry game">
<div class="profile-entry-left">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text">Latin</p>
</div>
<div id="profile-games" class="page-subsection">
<div class="page-subsection-wrapper">
<div class="page-subheader">
<p class="page-subheader-text link">Games</p>
<div class="page-subheader-separator"></div>
</div>
<div class="profile-entry game">
<div class="profile-entry-left">
<div class="profile-list page-subsection-chunk">
<div class="profile-entry game top">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text">Latin</p>
<p class="profile-entry-text game-name">Latin</p>
</div>
</div>
<div class="profile-entry game">
<div class="profile-entry-left">
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text">Latin</p>
<p class="profile-entry-text game-name">Latin</p>
</div>
</div>
<div class="profile-entry game">
<div class="profile-entry-left">
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text">Latin</p>
<p class="profile-entry-text game-name">Latin</p>
</div>
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text game-name">Latin</p>
</div>
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text game-name">Latin</p>
</div>
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text game-name">Latin</p>
</div>
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text game-name">Latin</p>
</div>
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text game-name">Latin</p>
</div>
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text game-name">Latin</p>
</div>
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text game-name">Latin</p>
</div>
<div class="profile-entry game">
<img class="profile-entry-icon" src="res/dummy_game.png" alt="Some Game Icon" />
<p class="profile-entry-text game-name">Latin</p>
</div>
</div>
</div>
</div>
<div id="profile-achievements">
<p class="page-subheader-text link">Achievements</p>
<div class="page-subheader-separator"></div>
<div class="profile-list">
<div class="profile-entry accented">
<div class="profile-entry-left">
<div id="profile-achievements" class="page-subsection">
<div class="page-subsection-wrapper">
<div class="page-subheader">
<p class="page-subheader-text link">Achievements</p>
<div class="page-subheader-separator"></div>
</div>
<div class="profile-list page-subsection-chunk">
<div class="profile-entry accented top">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text">Lorem Ipsum</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
</div>
<div class="profile-entry accented">
<div class="profile-entry-left">
<div class="profile-entry accented">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text">Lorem Ipsum</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
</div>
<div class="profile-entry accented">
<div class="profile-entry-left">
<div class="profile-entry accented">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text">Lorem Ipsum</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
</div>
<div class="profile-entry">
<div class="profile-entry-left">
<div class="profile-entry accented">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text">Lorem Ipsum</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
</div>
<div class="profile-entry">
<div class="profile-entry-left">
<div class="profile-entry accented">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text">Lorem Ipsum</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
</div>
<div class="profile-entry">
<div class="profile-entry-left">
<div class="profile-entry accented">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text">Lorem Ipsum</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
</div>
<div class="profile-entry">
<div class="profile-entry-left">
<div class="profile-entry accented">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text">Lorem Ipsum</p>
</div>
<div class="profile-entry-right">
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
</div>
<div class="profile-entry">
<div class="profile-entry-left">
<div class="profile-entry">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text">Lorem Ipsum</p>
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
<div class="profile-entry-right">
<div class="profile-entry">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
<div class="profile-entry">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
<div class="profile-entry">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
<div class="profile-entry">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
<div class="profile-entry">
<img class="profile-entry-icon" src="res/dummy_achievement.png" alt="Some Achievement Icon" />
<p class="profile-entry-text achievement-name">Lorem Ipsum</p>
<p class="profile-entry-text accented">Completed</p>
</div>
</div>