imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Crisis averted

Browse Source 
Also changed the styling for Login
This commit is contained in:
Colin Kallemein 2024-05-03 20:47:37 +02:00
parent 4d4df7cd99
commit b4797365f5
4 changed files with 132 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
package-lock.json generated
View File

@ -1867,13 +1867,13 @@
} }
}, },
"node_modules/@vitest/expect": { "node_modules/@vitest/expect": {
"version": "1.5.3", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.5.3.tgz", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
"integrity": "sha512-y+waPz31pOFr3rD7vWTbwiLe5+MgsMm40jTZbQE8p8/qXyBX3CQsIXRx9XK12IbY7q/t5a5aM/ckt33b4PxK2g==", "integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/spy": "1.5.3", "@vitest/spy": "1.6.0",
"@vitest/utils": "1.5.3", "@vitest/utils": "1.6.0",
"chai": "^4.3.10" "chai": "^4.3.10"
}, },
"funding": { "funding": {
@ -1881,12 +1881,12 @@
} }
}, },
"node_modules/@vitest/runner": { "node_modules/@vitest/runner": {
"version": "1.5.3", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.5.3.tgz", "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
"integrity": "sha512-7PlfuReN8692IKQIdCxwir1AOaP5THfNkp0Uc4BKr2na+9lALNit7ub9l3/R7MP8aV61+mHKRGiqEKRIwu6iiQ==", "integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/utils": "1.5.3", "@vitest/utils": "1.6.0",
"p-limit": "^5.0.0", "p-limit": "^5.0.0",
"pathe": "^1.1.1" "pathe": "^1.1.1"
}, },
@ -1922,9 +1922,9 @@
} }
}, },
"node_modules/@vitest/snapshot": { "node_modules/@vitest/snapshot": {
"version": "1.5.3", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.5.3.tgz", "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
"integrity": "sha512-K3mvIsjyKYBhNIDujMD2gfQEzddLe51nNOAf45yKRt/QFJcUIeTQd2trRvv6M6oCBHNVnZwFWbQ4yj96ibiDsA==", "integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"magic-string": "^0.30.5", "magic-string": "^0.30.5",
@ -1936,9 +1936,9 @@
} }
}, },
"node_modules/@vitest/spy": { "node_modules/@vitest/spy": {
"version": "1.5.3", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.5.3.tgz", "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
"integrity": "sha512-Llj7Jgs6lbnL55WoshJUUacdJfjU2honvGcAJBxhra5TPEzTJH8ZuhI3p/JwqqfnTr4PmP7nDmOXP53MS7GJlg==", "integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"tinyspy": "^2.2.0" "tinyspy": "^2.2.0"
@ -1948,9 +1948,9 @@
} }
}, },
"node_modules/@vitest/utils": { "node_modules/@vitest/utils": {
"version": "1.5.3", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.5.3.tgz", "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
"integrity": "sha512-rE9DTN1BRhzkzqNQO+kw8ZgfeEBCLXiHJwetk668shmNBpSagQxneT5eSqEBLP+cqSiAeecvQmbpFfdMyLcIQA==", "integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"diff-sequences": "^29.6.3", "diff-sequences": "^29.6.3",
@ -3039,9 +3039,9 @@
} }
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.4.755", "version": "1.4.756",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.755.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.756.tgz",
"integrity": "sha512-9nop+3jZxSHIxe1EzEUcjDXzK+3qOv3fY5w0sE88nIZUntbv1aXWmoxGWlklX5XSO4txCpLssWkUSh8RQPovBg==", "integrity": "sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw==",
"dev": true "dev": true
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
@ -6011,9 +6011,9 @@
} }
}, },
"node_modules/vite-node": { "node_modules/vite-node": {
"version": "1.5.3", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.5.3.tgz", "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
"integrity": "sha512-axFo00qiCpU/JLd8N1gu9iEYL3xTbMbMrbe5nDp9GL0nb6gurIdZLkkFogZXWnE8Oyy5kfSLwNVIcVsnhE7lgQ==", "integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"cac": "^6.7.14", "cac": "^6.7.14",
@ -6105,16 +6105,16 @@
} }
}, },
"node_modules/vitest": { "node_modules/vitest": {
"version": "1.5.3", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.5.3.tgz", "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
"integrity": "sha512-2oM7nLXylw3mQlW6GXnRriw+7YvZFk/YNV8AxIC3Z3MfFbuziLGWP9GPxxu/7nRlXhqyxBikpamr+lEEj1sUEw==", "integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/expect": "1.5.3", "@vitest/expect": "1.6.0",
"@vitest/runner": "1.5.3", "@vitest/runner": "1.6.0",
"@vitest/snapshot": "1.5.3", "@vitest/snapshot": "1.6.0",
"@vitest/spy": "1.5.3", "@vitest/spy": "1.6.0",
"@vitest/utils": "1.5.3", "@vitest/utils": "1.6.0",
"acorn-walk": "^8.3.2", "acorn-walk": "^8.3.2",
"chai": "^4.3.10", "chai": "^4.3.10",
"debug": "^4.3.4", "debug": "^4.3.4",
@ -6128,7 +6128,7 @@
"tinybench": "^2.5.1", "tinybench": "^2.5.1",
"tinypool": "^0.8.3", "tinypool": "^0.8.3",
"vite": "^5.0.0", "vite": "^5.0.0",
"vite-node": "1.5.3", "vite-node": "1.6.0",
"why-is-node-running": "^2.2.2" "why-is-node-running": "^2.2.2"
}, },
"bin": { "bin": {
@ -6143,8 +6143,8 @@
"peerDependencies": { "peerDependencies": {
"@edge-runtime/vm": "*", "@edge-runtime/vm": "*",
"@types/node": "^18.0.0 || >=20.0.0", "@types/node": "^18.0.0 || >=20.0.0",
"@vitest/browser": "1.5.3", "@vitest/browser": "1.6.0",
"@vitest/ui": "1.5.3", "@vitest/ui": "1.6.0",
"happy-dom": "*", "happy-dom": "*",
"jsdom": "*" "jsdom": "*"
}, },

72
src/assets/login.scss
View File

@ -12,18 +12,21 @@
height: 100vh; height: 100vh;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
flex-direction: column; flex-direction: column;
position: relative;
.content-elements {
margin: 5rem 0;
width: inherit;
display: flex;
flex-direction: column;
gap: 1.5rem;
.login-form { .login-form {
position: absolute; width: inherit;
bottom: 9rem;
width: 100%;
form { form {
display: grid; display: grid;
gap: 1.5rem; gap: 1rem;
width: inherit; width: inherit;
.form-field { .form-field {
@ -31,19 +34,25 @@
flex-direction: column; flex-direction: column;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
border-radius: 3px; border-radius: 3px;
width: 30%; min-width: 25rem;
margin: 0 auto; margin: 0 auto;
label { label {
color: #000; color: #000;
background-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5);
padding: 0.15rem 0.5rem; padding: 0.25rem 0.5rem;
font-weight: 600;
font-size: 0.875rem;
} }
input { input {
background-color: transparent; background-color: transparent;
border: none; border: none;
padding: 0.25rem 0.25rem; padding: 0.3rem 0.25rem;
font-size: 16px; font-size: 0.875rem;
&:focus-visible {
outline: none;
}
} }
} }
} }
@ -51,51 +60,40 @@
.row-buttons { .row-buttons {
display: flex; display: flex;
justify-content: center;
gap: 0.5rem; gap: 0.5rem;
position: absolute;
bottom: 5rem;
.button { .button {
padding: 1rem 0; padding: 0.875rem 0;
min-width: 6rem; min-width: 6.25rem;
text-align: center; text-align: center;
position: relative; position: relative;
font-size: 10px; font-size: 0.875rem;
&.button-1 { p {
background-image: url('/assets/Button_1.png'); margin: auto;
}
&.button-2 {
background-image: url('/assets/Button_2.png');
}
&.button-3 {
background-image: url('/assets/Button_3.png');
}
&.button-4 {
background-image: url('/assets/Button_4.png');
} }
background-color: transparent; img {
background-position: center; position: absolute;
background-repeat: no-repeat; top: 0;
background-size: 100%; left: 0;
border: none; width: 100%;
cursor: pointer; z-index: -1;
overflow: hidden; }
outline: none;
color:white;
&:hover { &:hover {
filter: brightness(60%); filter: brightness(60%);
cursor: pointer;
}
} }
} }
} }
} }
.main-title { .main-title {
position: absolute; margin-top: 7rem;
text-align: center; text-align: center;
top: 40%;
font-size: 3rem; font-size: 3rem;
color: #FFF; color: #FFF;
text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray; text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;

5
src/assets/main.scss
View File

@ -15,6 +15,11 @@ p, a, li, label {
color: #FFF; color: #FFF;
} }
button {
background-color: transparent;
border: none;
}
a { a {
text-decoration: none; text-decoration: none;
} }

15
src/components/screens/Login.vue
View File

@ -4,12 +4,14 @@
<div class="content-wrapper"> <div class="content-wrapper">
<h1 class="main-title">NEW QUEST</h1> <h1 class="main-title">NEW QUEST</h1>
<div class="content-elements">
<div class="login-form"> <div class="login-form">
<form method="post"> <form method="post">
<div class="form-field"> <div class="form-field">
<label for="username">Username</label> <label for="username">Username</label>
<input v-model="username" type="text" name="username" required> <input v-model="username" type="text" name="username" required>
</div> </div>
<div class="form-field"> <div class="form-field">
<label for="password">Password</label> <label for="password">Password</label>
<input v-model="password" type="password" name="password" required> <input v-model="password" type="password" name="password" required>
@ -19,16 +21,23 @@
<div class="row-buttons"> <div class="row-buttons">
<button class="button button-1" id="submit" @click="submit"> <button class="button button-1" id="submit" @click="submit">
LOGIN <p>LOGIN</p>
<img src="/assets/Button_1.png" />
</button> </button>
<button class="button button-2" @click="register"> <button class="button button-2" @click="register">
REGISTER <p>REGISTER</p>
<img src="/assets/Button_2.png" />
</button> </button>
<button class="button button-3"> <button class="button button-3">
CREDITS <p>CREDITS</p>
<img src="/assets/Button_3.png" />
</button> </button>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>