Revamped UI...ish
This commit is contained in:
parent
13736d0ef9
commit
40a0e4046a
GPG key ID:
0989A73D8C421174
26 changed files with 2053 additions and 621 deletions
|
|
@ -23,9 +23,11 @@
|
|||
<div id="content-body">
|
||||
<template data-template="content-body: List<Basic>">
|
||||
<div id="${page}-page" class="page">
|
||||
<div class="page-header">
|
||||
<p class="page-header-text">${title}</p>
|
||||
<div class="page-header-separator"></div>
|
||||
<div class="page-subsection">
|
||||
<div class="page-header">
|
||||
<p class="page-header-text">${title}</p>
|
||||
<div class="page-header-separator"></div>
|
||||
</div>
|
||||
</div>
|
||||
<template data-template="extern-${page}-page: Extern"></template>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -21,16 +21,17 @@
|
|||
<div class="page-subheader-separator"></div>
|
||||
</div>
|
||||
<div id="login-form">
|
||||
<p id="error-message">Egg</p>
|
||||
<input id="email" class="login-field" type="text" placeholder="Email"></input>
|
||||
<input id="username" class="login-field" type="text" placeholder="Username"></input>
|
||||
<input id="password" class="login-field" type="password" placeholder="Password"></input>
|
||||
<input id="confirm" class="login-field" type="password" placeholder="Confirm your password"></input>
|
||||
<div id="login-buttons">
|
||||
<div id="create-user-button" class="ap-button login">Create Account ></div>
|
||||
<div id="login-button" class="ap-button login">Login</div>
|
||||
<p id="error-message" class="form-row top multiline">Egg</p>
|
||||
<input id="email" class="login-field form-row" type="text" placeholder="Email"></input>
|
||||
<input id="username" class="login-field form-row" type="text" placeholder="Username"></input>
|
||||
<input id="password" class="login-field form-row" type="password" placeholder="Password"></input>
|
||||
<input id="confirm" class="login-field form-row" type="password" placeholder="Confirm your password"></input>
|
||||
<div id="button-row" class="form-row">
|
||||
<div id="create-user-button" class="ap-button login">Create Account</div>
|
||||
<div id="guest-login-button" class="ap-button login">Continue as Guest</div>
|
||||
</div>
|
||||
<p id="warning">WARNING! The security of this project is questionable at best. Please refrain from using any truly sensitive data.</p>
|
||||
<div id="login-button" class="ap-button login form-row">Login</div>
|
||||
<p id="warning" class="form-row multiline">WARNING! The security of this project is questionable at best. Please refrain from using any truly sensitive data.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
BIN
frontend/webpage/res/guest_pfp.png
Normal file
BIN
frontend/webpage/res/guest_pfp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
|
|
@ -8,6 +8,7 @@ window.addEventListener("load", (loadEvent) => {
|
|||
|
||||
const createUser = document.querySelector("#create-user-button");
|
||||
const login = document.querySelector("#login-button");
|
||||
const guest = document.querySelector("#guest-login-button");
|
||||
|
||||
const header = document.querySelector("#login-header-text");
|
||||
const error = document.querySelector("#error-message");
|
||||
|
|
@ -31,11 +32,7 @@ window.addEventListener("load", (loadEvent) => {
|
|||
if (!frozen) {
|
||||
fields.username.style.display = "block";
|
||||
fields.confirm.style.display = "block";
|
||||
header.textContent = "Create User";
|
||||
login.style.flexGrow = "0";
|
||||
login.textContent = "< Login";
|
||||
createUser.style.flexGrow = "1";
|
||||
createUser.textContent = "Create User";
|
||||
header.textContent = "Create Account";
|
||||
|
||||
createUser.removeEventListener("click", switchToCreateAction);
|
||||
createUser.addEventListener("click", createUserAction);
|
||||
|
|
@ -65,10 +62,11 @@ window.addEventListener("load", (loadEvent) => {
|
|||
body: JSON.stringify({ email: fields.email.value, username: fields.username.value, password: fields.password.value })
|
||||
})
|
||||
.then(async response => ({ status: response.status, data: await response.json() }))
|
||||
.then(response => {
|
||||
.then(response =>{
|
||||
const data = response.data;
|
||||
if (response.status === 200) {
|
||||
window.sessionStorage.setItem('sessionKey', data.key);
|
||||
window.sessionStorage.setItem('id', data.id );
|
||||
window.location.href = "/";
|
||||
} else if (response.status === 500) {
|
||||
raiseError([], "Internal server error :(");
|
||||
|
|
@ -76,6 +74,9 @@ window.addEventListener("load", (loadEvent) => {
|
|||
if (data.code === 1) {
|
||||
raiseError([ "email" ], "A user with that email is already registered");
|
||||
fields.email.value = '';
|
||||
} else if (data.code === 2) {
|
||||
raiseError([ "email" ], "Invalid email address");
|
||||
fields.email.value = '';
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -93,10 +94,6 @@ window.addEventListener("load", (loadEvent) => {
|
|||
fields.username.style.display = "none";
|
||||
fields.confirm.style.display = "none";
|
||||
header.textContent = "Login";
|
||||
login.style.flexGrow = "1"
|
||||
login.textContent = "Login";
|
||||
createUser.style.flexGrow = "0";
|
||||
createUser.textContent = "Create User >";
|
||||
|
||||
createUser.removeEventListener("click", createUserAction);
|
||||
createUser.addEventListener("click", switchToCreateAction);
|
||||
|
|
@ -125,7 +122,9 @@ window.addEventListener("load", (loadEvent) => {
|
|||
.then(response => {
|
||||
const data = response.data;
|
||||
if (response.status === 200) {
|
||||
console.log(data);
|
||||
window.sessionStorage.setItem('sessionKey', data.key);
|
||||
window.sessionStorage.setItem('id', data.id );
|
||||
window.location.href = "/";
|
||||
} else if (response.status === 500) {
|
||||
raiseError([], "Internal server error :(");
|
||||
|
|
@ -142,4 +141,37 @@ window.addEventListener("load", (loadEvent) => {
|
|||
}
|
||||
};
|
||||
login.addEventListener("click", loginAction);
|
||||
|
||||
guest.addEventListener("click", (clickEvent) => {
|
||||
if (!frozen) {
|
||||
frozen = true;
|
||||
fetch('https://localhost:4730/login?guest=true', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: "{}"
|
||||
})
|
||||
.then(async response => ({ status: response.status, data: await response.json() }))
|
||||
.then(response => {
|
||||
const data = response.data;
|
||||
if (response.status === 200) {
|
||||
console.log(data);
|
||||
window.sessionStorage.setItem('sessionKey', data.key);
|
||||
window.sessionStorage.setItem('id', data.id );
|
||||
window.location.href = "/";
|
||||
} else if (response.status === 500) {
|
||||
raiseError([], "Internal server error :(");
|
||||
} else {
|
||||
raiseError([ "email", "password" ], "Email or password is incorrect");
|
||||
fields.password.value = '';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
raiseError([], "Unknown error :(");
|
||||
}).then(() => frozen = false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
:root {
|
||||
--shadow-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
html, body {
|
||||
background-color: var(--background-dark);
|
||||
|
||||
|
|
@ -27,7 +31,7 @@ html, body {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0px 0px 5px 10px var(--shadow-color);
|
||||
}
|
||||
|
||||
.navbar-section {
|
||||
|
|
@ -67,20 +71,17 @@ html, body {
|
|||
}
|
||||
|
||||
.ap-button {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 12px 16px;
|
||||
|
||||
color: var(--foreground);
|
||||
background-color: var(--accent-value2);
|
||||
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
|
||||
border-radius: 4px;
|
||||
|
||||
cursor: default;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition-property: background-color;
|
||||
transition-duration: 0.15s;
|
||||
}
|
||||
|
|
@ -112,33 +113,61 @@ html, body {
|
|||
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 0px 64px;
|
||||
padding: 32px;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
min-height: 100%;
|
||||
|
||||
background-color: var(--background);
|
||||
box-shadow: 0px 0px 5px 10px rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0px 0px 5px 10px var(--shadow-color);
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-subsection {
|
||||
box-sizing: border-box;
|
||||
margin: 32px;
|
||||
padding: 16px;
|
||||
|
||||
background-color: var(--background-dark);
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
box-shadow: inset 0px 0px 8px 8px var(--shadow-color);
|
||||
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.page-subsection-wrapper {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-subsection-chunk {
|
||||
box-shadow: 0px 0px 8px 8px var(--shadow-color);
|
||||
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 64px 0px;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.page-subheader {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.page-header-text,
|
||||
.page-subheader-text {
|
||||
width: max-content;
|
||||
|
||||
margin: 0;
|
||||
margin-bottom: 0.25em;
|
||||
margin: 0 0 0.25em;
|
||||
|
||||
color: var(--foreground);
|
||||
|
||||
|
|
@ -157,11 +186,11 @@ html, body {
|
|||
}
|
||||
|
||||
.page-header-text {
|
||||
font-size: 64px;
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.page-subheader-text {
|
||||
font-size: 48px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.page-header-separator,
|
||||
|
|
@ -175,9 +204,7 @@ html, body {
|
|||
.list-page-search {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 0px 64px 32px;
|
||||
|
||||
width: 100%;
|
||||
margin: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -197,8 +224,6 @@ html, body {
|
|||
|
||||
.list-page-search > label {
|
||||
background-color: var(--accent-value2);
|
||||
|
||||
border-radius: 8px 0px 0px 8px;
|
||||
}
|
||||
|
||||
.list-page-search > label:hover {
|
||||
|
|
@ -216,7 +241,6 @@ html, body {
|
|||
background-color: var(--distinction);
|
||||
|
||||
border: 0;
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
|
|
@ -235,8 +259,6 @@ html, body {
|
|||
.list-page-partitions {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 32px 64px;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
|
|
@ -251,9 +273,11 @@ html, body {
|
|||
max-width: 640px;
|
||||
}
|
||||
|
||||
.list-page-filter {
|
||||
margin-top: 16px;
|
||||
.list-page-filter-chunk {
|
||||
background-color: var(--distinction);
|
||||
}
|
||||
|
||||
.list-page-filter {
|
||||
box-sizing: border-box;
|
||||
|
||||
width: 100%;
|
||||
|
|
@ -269,9 +293,9 @@ html, body {
|
|||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
background-color: var(--background);
|
||||
background-color: var(--foreground);
|
||||
|
||||
border: 3px solid var(--distinction);
|
||||
border: 3px solid var(--foreground-dark);
|
||||
border-radius: 8px;
|
||||
|
||||
transition-property: background-color, border-color;
|
||||
|
|
@ -279,7 +303,7 @@ html, body {
|
|||
}
|
||||
|
||||
.list-page-filter:hover > .list-page-filter-checkbox {
|
||||
background-color: var(--background);
|
||||
background-color: var(--foreground);
|
||||
border-color: var(--selected-accent1);
|
||||
}
|
||||
|
||||
|
|
@ -307,8 +331,6 @@ html, body {
|
|||
.list-page-list-partition {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding-left: 64px;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ html, body {
|
|||
}
|
||||
|
||||
#profile-page {
|
||||
max-width: 1920px;
|
||||
max-width: 1600px;
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -67,43 +67,54 @@ html, body {
|
|||
}
|
||||
|
||||
#profile-info {
|
||||
box-sizing: border-box;
|
||||
|
||||
width: max-content;
|
||||
width: 50%;
|
||||
height: max-content;
|
||||
|
||||
max-width: 50%;
|
||||
|
||||
padding: 0px 64px;
|
||||
padding-bottom: 128px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
#profile-info-pfp {
|
||||
#profile-info-pfp-border {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 24px;
|
||||
background-color: var(--distinction);
|
||||
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
height: max-content;
|
||||
|
||||
margin-bottom: 1.25em;
|
||||
box-shadow: 0px 0px 8px 8px var(--shadow-color);
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#profile-info-name {
|
||||
margin: 0;
|
||||
#profile-info-pfp-vignette {
|
||||
box-shadow: inset 0px 0px 50px 30px var(--shadow-color);
|
||||
|
||||
padding: 16px 0px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
font-size: 42px;
|
||||
#profile-info-pfp-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
|
||||
color: var(--foreground);
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.profile-list {
|
||||
margin-top: 1.25em;
|
||||
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
|
||||
border-radius: 8px;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
box-shadow: 0px 0px 8px 8px var(--shadow-color);
|
||||
}
|
||||
|
||||
.profile-entry {
|
||||
|
|
@ -117,13 +128,9 @@ html, body {
|
|||
align-items: center;
|
||||
|
||||
background-color: var(--distinction);
|
||||
|
||||
border-bottom: 1px solid var(--background);
|
||||
}
|
||||
|
||||
.profile-entry.accented {
|
||||
border-bottom: 1px solid var(--accent-value0);
|
||||
|
||||
background-color: var(--accent-value1);
|
||||
}
|
||||
|
||||
|
|
@ -147,15 +154,40 @@ html, body {
|
|||
|
||||
.profile-entry-icon {
|
||||
width: 64px;
|
||||
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.profile-entry-text {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin: 0;
|
||||
padding: 0px 16px;
|
||||
|
||||
height: 100%;
|
||||
line-height: 64px;
|
||||
|
||||
color: var(--foreground);
|
||||
|
||||
font-size: 24px;
|
||||
|
||||
border-top: 1px solid var(--background);
|
||||
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.top > .profile-entry-text {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.accented > .profile-entry-text {
|
||||
border-color: var(--accent-value0);
|
||||
}
|
||||
|
||||
.profile-entry-text.platform-name,
|
||||
.profile-entry-text.game-name,
|
||||
.profile-entry-text.achievement-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.profile-entry-text.accented {
|
||||
|
|
@ -167,12 +199,6 @@ html, body {
|
|||
}
|
||||
|
||||
#profile-platforms {
|
||||
box-sizing: border-box;
|
||||
|
||||
height: max-content;
|
||||
|
||||
padding: 0px 64px;
|
||||
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
|
|
@ -188,18 +214,8 @@ html, body {
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#profile-games {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 64px 64px;
|
||||
|
||||
#profile-games,
|
||||
#profile-achievements {
|
||||
width: 50%;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
#profile-achievements {
|
||||
box-sizing: border-box;
|
||||
padding: 0px 64px 64px;
|
||||
|
||||
width: 50%;
|
||||
height: max-content;
|
||||
}
|
||||
|
|
@ -34,33 +34,36 @@
|
|||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
margin: var(--element-spacing) var(--form-spacing) 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: calc(100% - var(--form-spacing) * 2);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.form-row.top {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.form-row.multiline {
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
#error-message {
|
||||
display: none;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
margin: 0 var(--form-spacing) var(--element-spacing);
|
||||
width: calc(100% - (var(--form-spacing) * 2));
|
||||
line-height: 40px;
|
||||
|
||||
color: var(--error);
|
||||
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.login-field {
|
||||
box-sizing: border-box;
|
||||
|
||||
margin: 0 var(--form-spacing) var(--element-spacing);
|
||||
border: 0;
|
||||
padding: 8px;
|
||||
|
||||
width: calc(100% - (var(--form-spacing) * 2));
|
||||
height: max-content;
|
||||
|
||||
font-size: 20px;
|
||||
|
||||
padding: 0 var(--element-spacing);
|
||||
font-size: 18px;
|
||||
border-radius: 4px;
|
||||
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
|
@ -68,41 +71,34 @@
|
|||
background-color: var(--error);
|
||||
}
|
||||
|
||||
.ap-button.login {
|
||||
height: 40px;
|
||||
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#username,
|
||||
#confirm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#login-buttons {
|
||||
margin: 0 calc(var(--form-spacing) - (var(--element-spacing) / 2));
|
||||
width: calc(100% - (var(--form-spacing) * 2) + var(--element-spacing));
|
||||
height: max-content;
|
||||
|
||||
#button-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ap-button.login {
|
||||
margin: 0 calc(var(--element-spacing) / 2);
|
||||
flex-basis: max-content;
|
||||
}
|
||||
|
||||
#create-user-button {
|
||||
flex-grow: 0;
|
||||
#create-user-button,
|
||||
#guest-login-button {
|
||||
width: calc(50% - var(--element-spacing) / 2);
|
||||
}
|
||||
|
||||
#login-button {
|
||||
flex-grow: 1;
|
||||
width: calc(100% - var(--form-spacing * 2))
|
||||
}
|
||||
|
||||
#warning {
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: 0 var(--form-spacing);
|
||||
|
||||
color: var(--foreground);
|
||||
|
||||
font-size: 24px;
|
||||
}
|
||||
|
|
@ -1,16 +1,20 @@
|
|||
:root {
|
||||
--background-dark: #111115;
|
||||
--background: #22222A;
|
||||
--background-dark: #111117;
|
||||
--background: #22222A;
|
||||
--foreground-dark: #AAAAAA;
|
||||
--foreground: #EEEEEE;
|
||||
--distinction: #44444F;
|
||||
--foreground: #EEEEEE;
|
||||
--distinction: #44444C;
|
||||
|
||||
--accent-value0: #500000;
|
||||
--accent-value1: #800000;
|
||||
--accent-value2: #A00000;
|
||||
--accent-value3: #D02020;
|
||||
--accent-value4: #FA7575;
|
||||
--accent-hue: 0;
|
||||
|
||||
--selected-accent0: #0066CC;
|
||||
--accent-value0: hsl(var(--accent-hue), 100%, 16%);
|
||||
--accent-value1: hsl(var(--accent-hue), 100%, 25%);
|
||||
--accent-value2: hsl(var(--accent-hue), 100%, 31%);
|
||||
--accent-value3: hsl(var(--accent-hue), 73%, 47%);
|
||||
--accent-value4: hsl(var(--accent-hue), 83%, 57%);
|
||||
--accent-value5: hsl(var(--accent-hue), 93%, 72%);
|
||||
--accent-pure: hsl(var(--accent-hue), 100%, 50%);
|
||||
|
||||
--selected-accent0: #2266CC;
|
||||
--selected-accent1: #3388FF;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue