mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-04-24 07:27:10 -05:00
styles: various style changes
This commit is contained in:
ash
parent
80fc58d81c
commit
0fe9aabaae
|
|
@ -1,7 +1,11 @@
|
|||
.wrapper {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
header {
|
||||
margin: 35px 0;
|
||||
}
|
||||
|
||||
.account-form-wrapper {
|
||||
margin: auto;
|
||||
|
|
@ -9,34 +13,19 @@
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.account-form-wrapper .logotype {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: -6px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.account-form-wrapper .logotype svg {
|
||||
width: 140px;
|
||||
}
|
||||
.account-form-wrapper .logotype svg text {
|
||||
font-size: 20px;
|
||||
transform: translate(593px, 495px);
|
||||
}
|
||||
|
||||
form.account {
|
||||
display: block;
|
||||
padding: 40px 48px;
|
||||
background-color: #292E53;
|
||||
background-color: #292e53;
|
||||
color: var(--text-secondary);
|
||||
border-radius: 12px;
|
||||
width: 360px;
|
||||
max-width: calc(90vw - 96px);
|
||||
width: min(480px, 90vw);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
form.account h2 {
|
||||
margin: 0;
|
||||
color: var(--text)
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
form.account p {
|
||||
|
|
@ -53,7 +42,7 @@ form.account input {
|
|||
display: block;
|
||||
font-family: Poppins, Arial, Helvetica, sans-serif;
|
||||
font-size: 1rem;
|
||||
background-color: #353C6A;
|
||||
background-color: #353c6a;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
|
|
@ -62,7 +51,7 @@ form.account input {
|
|||
}
|
||||
|
||||
form.account input:focus {
|
||||
background-color: #4B5595;
|
||||
background-color: #4b5595;
|
||||
outline: none;
|
||||
transition: 150ms;
|
||||
}
|
||||
|
|
@ -84,7 +73,7 @@ form.account button {
|
|||
font-size: 1rem;
|
||||
color: var(--text);
|
||||
padding: 12px 30px;
|
||||
background: #353C6A;
|
||||
background: #353c6a;
|
||||
margin-top: 18px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
|
@ -99,7 +88,7 @@ form.account button[type="submit"] {
|
|||
form.account a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-secondary);
|
||||
text-align: right;
|
||||
margin: 6px 0;
|
||||
width: fit-content;
|
||||
|
|
@ -114,19 +103,23 @@ form.account a.pwdreset {
|
|||
}
|
||||
|
||||
form.account a.register {
|
||||
margin:auto;
|
||||
margin: auto;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
form.account.register div:last-child {
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
@keyframes banner-notice {
|
||||
0% {top: -150px}
|
||||
20% {top: 35px}
|
||||
80% {top: 35px}
|
||||
100% {top: -150px}
|
||||
0% {
|
||||
top: -150px;
|
||||
}
|
||||
20% {
|
||||
top: 35px;
|
||||
}
|
||||
80% {
|
||||
top: 35px;
|
||||
}
|
||||
100% {
|
||||
top: -150px;
|
||||
}
|
||||
}
|
||||
.banner-notice {
|
||||
display: flex;
|
||||
|
|
@ -142,5 +135,35 @@ form.account.register div:last-child {
|
|||
z-index: 3;
|
||||
}
|
||||
.banner-notice.error div {
|
||||
background: #A9375B;
|
||||
}
|
||||
background: #a9375b;
|
||||
}
|
||||
|
||||
form.account.register {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: min(780px, 90vw);
|
||||
column-gap: 24px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
form.account.register div.h-captcha {
|
||||
grid-column: 1 / span 2;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
form.account.register p,
|
||||
form.account.register div.email,
|
||||
form.account.register div.buttons {
|
||||
grid-column: 1 / span 2;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
form.account.register {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
form.account.register div.h-captcha,
|
||||
form.account.register p,
|
||||
form.account.register div.email,
|
||||
form.account.register div.buttons {
|
||||
grid-column: unset;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,13 +28,25 @@ router.get('/', async (request, response) => {
|
|||
return response.redirect('/account/login');
|
||||
}
|
||||
|
||||
const { upgrade_success } = request.query;
|
||||
console.log(upgrade_success);
|
||||
const stripe = {};
|
||||
if (upgrade_success === 'true') {
|
||||
stripe.showNotice = true;
|
||||
stripe.success = true;
|
||||
} else if (upgrade_success === 'false') {
|
||||
stripe.showNotice = true;
|
||||
stripe.error = true;
|
||||
}
|
||||
|
||||
// Setup the data to be sent to the handlebars renderer
|
||||
const renderData = {
|
||||
layout: 'main',
|
||||
locale: util.getLocale(request.locale.region, request.locale.language),
|
||||
localeString: request.locale.toString(),
|
||||
linked: request.cookies.linked,
|
||||
error: request.cookies.error
|
||||
error: request.cookies.error,
|
||||
stripe: stripe
|
||||
};
|
||||
|
||||
// Reset message cookies
|
||||
|
|
|
|||
|
|
@ -52,8 +52,9 @@
|
|||
</div>
|
||||
|
||||
<div class="setting-card">
|
||||
<h2 class="header">Servers</h2>
|
||||
<fieldset {{#if isTester}}{{else}}disabled{{/if}}>
|
||||
<h2 class="header">Beta access</h2>
|
||||
{{#if isTester}}
|
||||
<fieldset>
|
||||
<form class="server-selection" id="server">
|
||||
<input type="radio" id="prod" name="server_selection" value="prod" checked="{{ eq account.server_access_level 'prod'}}">
|
||||
<label for="prod">
|
||||
|
|
@ -77,15 +78,14 @@
|
|||
</form>
|
||||
</fieldset>
|
||||
{{#if discordUser}}
|
||||
{{#if isTester }}
|
||||
<p>Connected as {{ discordUser.username }}#{{ discordUser.discriminator }}</p>
|
||||
<p>Connected to Discord as {{ discordUser.username }}#{{ discordUser.discriminator }}</p>
|
||||
<button class="button secondary" id="remove-discord-connection">Remove Discord account</button>
|
||||
{{else}}
|
||||
<p>Beta servers are exclusive to testers. To become a tester, check us out on <a href="https://www.patreon.com/PretendoNetwork" target="_blank">Patreon</a> and link your Discord account to your Patreon and PNID accounts</p>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<p>Beta servers are exclusive to testers. If you're already a tester, connect your Discord account <a href="{{ discordAuthURL }}">here</a>.</p>
|
||||
<p>To gain access to the developer chats, run /command in the server.</p>
|
||||
{{/if}}
|
||||
{{else}}
|
||||
<p>Beta servers are exclusive to testers. To upgrade to a higher tier, click <a href="/account/upgrade">here</a>.</p>
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
<h2 class="section-header" id="security">Sign in and security</h2>
|
||||
|
|
@ -154,4 +154,22 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if stripe.showNotice}}
|
||||
{{#if stripe.success}}
|
||||
<div class="banner-notice success">
|
||||
<div>
|
||||
<p>Account upgraded successfully</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if stripe.error}}
|
||||
<div class="banner-notice error">
|
||||
<div>
|
||||
<p>Account upgrade failed</p>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
<script src="/assets/js/account.js"></script>
|
||||
|
|
@ -1,32 +1,10 @@
|
|||
<link rel="stylesheet" href="/assets/css/login.css" />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="account-form-wrapper">
|
||||
<a class="logotype" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
||||
<g id="XMLID_6_" transform="translate(8.222 1.418)">
|
||||
<path id="XMLID_15_"
|
||||
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
|
||||
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
|
||||
<path id="XMLID_14_"
|
||||
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
|
||||
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
|
||||
<path id="XMLID_9_"
|
||||
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
|
||||
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
|
||||
</g>
|
||||
</g>
|
||||
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
|
||||
font-family="Poppins-Bold, Poppins" font-weight="700">
|
||||
<tspan x="0" y="0">Pretendo</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
{{> header}}
|
||||
|
||||
<div class="account-form-wrapper">
|
||||
<form action="/account/login" method="post" class="account">
|
||||
<h2>Sign in</h2>
|
||||
<p>Enter your account details below</p>
|
||||
|
|
|
|||
|
|
@ -2,36 +2,14 @@
|
|||
<link rel="stylesheet" href="/assets/css/login.css" />
|
||||
|
||||
<div class="wrapper">
|
||||
<div class="account-form-wrapper">
|
||||
<a class="logotype" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="39.876">
|
||||
<g id="logo_type" data-name="logo type" transform="translate(-553 -467)">
|
||||
<g id="logo" transform="translate(553 467)">
|
||||
<rect id="XMLID_158_" width="39.876" height="39.876" fill="#9d6ff3" opacity="0" />
|
||||
<g id="XMLID_6_" transform="translate(8.222 1.418)">
|
||||
<path id="XMLID_15_"
|
||||
d="M69.149,28.312c-1.051.553-.129,2.139.922,1.585a12.365,12.365,0,0,1,8.794-.571,10.829,10.829,0,0,1,6.342,4.166c.645,1,2.231.074,1.585-.922C83.308,27.169,74.7,25.436,69.149,28.312Z"
|
||||
transform="translate(-64.246 -23.389)" fill="#9d6ff3" />
|
||||
<path id="XMLID_14_"
|
||||
d="M82.64,14.608A15.565,15.565,0,0,0,73.5,8.45a17.535,17.535,0,0,0-12.647.9c-1.051.553-.129,2.139.922,1.585,3.411-1.788,7.6-1.714,11.209-.719,3.1.848,6.268,2.544,8.038,5.309C81.681,16.543,83.267,15.622,82.64,14.608Z"
|
||||
transform="translate(-57.476 -7.693)" fill="#9d6ff3" />
|
||||
<path id="XMLID_9_"
|
||||
d="M55.68,47.8a10.719,10.719,0,0,0-6.71,2.3H45.983A1.336,1.336,0,0,0,44.6,51.376V75.84a1.431,1.431,0,0,0,1.383,1.383h3.023a1.367,1.367,0,0,0,1.309-1.383V68.392A10.993,10.993,0,1,0,55.68,47.8Zm0,17.182a6.213,6.213,0,1,1,6.213-6.213A6.216,6.216,0,0,1,55.68,64.982Z"
|
||||
transform="translate(-44.6 -40.406)" fill="#9d6ff3" />
|
||||
</g>
|
||||
</g>
|
||||
<text id="Pretendo" transform="translate(593 492)" fill="#fff" font-size="17"
|
||||
font-family="Poppins-Bold, Poppins" font-weight="700">
|
||||
<tspan x="0" y="0">Pretendo</tspan>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
{{> header}}
|
||||
|
||||
<div class="account-form-wrapper">
|
||||
<form action="/account/register" method="post" class="account register">
|
||||
<h2>Register</h2>
|
||||
<p>Enter your account details below</p>
|
||||
<div>
|
||||
<div class="email">
|
||||
<label for="email">Email</label>
|
||||
<input name="email" id="email" type="email" value="{{ email }}" required>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user