Crisis averted
Also changed the styling for Login
This commit is contained in:
parent
4d4df7cd99
commit
b4797365f5
70
package-lock.json
generated
70
package-lock.json
generated
@ -1867,13 +1867,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/expect": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.5.3.tgz",
|
||||
"integrity": "sha512-y+waPz31pOFr3rD7vWTbwiLe5+MgsMm40jTZbQE8p8/qXyBX3CQsIXRx9XK12IbY7q/t5a5aM/ckt33b4PxK2g==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-1.6.0.tgz",
|
||||
"integrity": "sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@vitest/spy": "1.5.3",
|
||||
"@vitest/utils": "1.5.3",
|
||||
"@vitest/spy": "1.6.0",
|
||||
"@vitest/utils": "1.6.0",
|
||||
"chai": "^4.3.10"
|
||||
},
|
||||
"funding": {
|
||||
@ -1881,12 +1881,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/runner": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.5.3.tgz",
|
||||
"integrity": "sha512-7PlfuReN8692IKQIdCxwir1AOaP5THfNkp0Uc4BKr2na+9lALNit7ub9l3/R7MP8aV61+mHKRGiqEKRIwu6iiQ==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-1.6.0.tgz",
|
||||
"integrity": "sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@vitest/utils": "1.5.3",
|
||||
"@vitest/utils": "1.6.0",
|
||||
"p-limit": "^5.0.0",
|
||||
"pathe": "^1.1.1"
|
||||
},
|
||||
@ -1922,9 +1922,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/snapshot": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.5.3.tgz",
|
||||
"integrity": "sha512-K3mvIsjyKYBhNIDujMD2gfQEzddLe51nNOAf45yKRt/QFJcUIeTQd2trRvv6M6oCBHNVnZwFWbQ4yj96ibiDsA==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-1.6.0.tgz",
|
||||
"integrity": "sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"magic-string": "^0.30.5",
|
||||
@ -1936,9 +1936,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/spy": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.5.3.tgz",
|
||||
"integrity": "sha512-Llj7Jgs6lbnL55WoshJUUacdJfjU2honvGcAJBxhra5TPEzTJH8ZuhI3p/JwqqfnTr4PmP7nDmOXP53MS7GJlg==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-1.6.0.tgz",
|
||||
"integrity": "sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"tinyspy": "^2.2.0"
|
||||
@ -1948,9 +1948,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/utils": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.5.3.tgz",
|
||||
"integrity": "sha512-rE9DTN1BRhzkzqNQO+kw8ZgfeEBCLXiHJwetk668shmNBpSagQxneT5eSqEBLP+cqSiAeecvQmbpFfdMyLcIQA==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-1.6.0.tgz",
|
||||
"integrity": "sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"diff-sequences": "^29.6.3",
|
||||
@ -3039,9 +3039,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.755",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.755.tgz",
|
||||
"integrity": "sha512-9nop+3jZxSHIxe1EzEUcjDXzK+3qOv3fY5w0sE88nIZUntbv1aXWmoxGWlklX5XSO4txCpLssWkUSh8RQPovBg==",
|
||||
"version": "1.4.756",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.756.tgz",
|
||||
"integrity": "sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
@ -6011,9 +6011,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite-node": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.5.3.tgz",
|
||||
"integrity": "sha512-axFo00qiCpU/JLd8N1gu9iEYL3xTbMbMrbe5nDp9GL0nb6gurIdZLkkFogZXWnE8Oyy5kfSLwNVIcVsnhE7lgQ==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/vite-node/-/vite-node-1.6.0.tgz",
|
||||
"integrity": "sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"cac": "^6.7.14",
|
||||
@ -6105,16 +6105,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vitest": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.5.3.tgz",
|
||||
"integrity": "sha512-2oM7nLXylw3mQlW6GXnRriw+7YvZFk/YNV8AxIC3Z3MfFbuziLGWP9GPxxu/7nRlXhqyxBikpamr+lEEj1sUEw==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
|
||||
"integrity": "sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@vitest/expect": "1.5.3",
|
||||
"@vitest/runner": "1.5.3",
|
||||
"@vitest/snapshot": "1.5.3",
|
||||
"@vitest/spy": "1.5.3",
|
||||
"@vitest/utils": "1.5.3",
|
||||
"@vitest/expect": "1.6.0",
|
||||
"@vitest/runner": "1.6.0",
|
||||
"@vitest/snapshot": "1.6.0",
|
||||
"@vitest/spy": "1.6.0",
|
||||
"@vitest/utils": "1.6.0",
|
||||
"acorn-walk": "^8.3.2",
|
||||
"chai": "^4.3.10",
|
||||
"debug": "^4.3.4",
|
||||
@ -6128,7 +6128,7 @@
|
||||
"tinybench": "^2.5.1",
|
||||
"tinypool": "^0.8.3",
|
||||
"vite": "^5.0.0",
|
||||
"vite-node": "1.5.3",
|
||||
"vite-node": "1.6.0",
|
||||
"why-is-node-running": "^2.2.2"
|
||||
},
|
||||
"bin": {
|
||||
@ -6143,8 +6143,8 @@
|
||||
"peerDependencies": {
|
||||
"@edge-runtime/vm": "*",
|
||||
"@types/node": "^18.0.0 || >=20.0.0",
|
||||
"@vitest/browser": "1.5.3",
|
||||
"@vitest/ui": "1.5.3",
|
||||
"@vitest/browser": "1.6.0",
|
||||
"@vitest/ui": "1.6.0",
|
||||
"happy-dom": "*",
|
||||
"jsdom": "*"
|
||||
},
|
||||
|
||||
@ -12,90 +12,88 @@
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.login-form {
|
||||
position: absolute;
|
||||
bottom: 9rem;
|
||||
width: 100%;
|
||||
|
||||
form {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
.content-elements {
|
||||
margin: 5rem 0;
|
||||
width: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
.login-form {
|
||||
width: inherit;
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
border-radius: 3px;
|
||||
width: 30%;
|
||||
margin: 0 auto;
|
||||
form {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
width: inherit;
|
||||
|
||||
label {
|
||||
color: #000;
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 0.15rem 0.5rem;
|
||||
}
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0.25rem 0.25rem;
|
||||
font-size: 16px;
|
||||
border-radius: 3px;
|
||||
min-width: 25rem;
|
||||
margin: 0 auto;
|
||||
|
||||
label {
|
||||
color: #000;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0.3rem 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
position: absolute;
|
||||
bottom: 5rem;
|
||||
.row-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
|
||||
.button {
|
||||
padding: 1rem 0;
|
||||
min-width: 6rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 10px;
|
||||
.button {
|
||||
padding: 0.875rem 0;
|
||||
min-width: 6.25rem;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&.button-1 {
|
||||
background-image: url('/assets/Button_1.png');
|
||||
}
|
||||
&.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');
|
||||
}
|
||||
p {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
color:white;
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
filter: brightness(60%);
|
||||
&:hover {
|
||||
filter: brightness(60%);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
position: absolute;
|
||||
margin-top: 7rem;
|
||||
text-align: center;
|
||||
top: 40%;
|
||||
font-size: 3rem;
|
||||
color: #FFF;
|
||||
text-shadow: -1px -1px 0 gray, 1px -1px 0 gray, -1px 1px 0 gray, 1px 1px 0 gray;
|
||||
|
||||
@ -15,6 +15,11 @@ p, a, li, label {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@ -4,30 +4,39 @@
|
||||
<div class="content-wrapper">
|
||||
<h1 class="main-title">NEW QUEST</h1>
|
||||
|
||||
<div class="login-form">
|
||||
<form method="post">
|
||||
<div class="form-field">
|
||||
<label for="username">Username</label>
|
||||
<input v-model="username" type="text" name="username" required>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="password">Password</label>
|
||||
<input v-model="password" type="password" name="password" required>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="content-elements">
|
||||
<div class="login-form">
|
||||
<form method="post">
|
||||
<div class="form-field">
|
||||
<label for="username">Username</label>
|
||||
<input v-model="username" type="text" name="username" required>
|
||||
</div>
|
||||
|
||||
<div class="row-buttons">
|
||||
<button class="button button-1" id="submit" @click="submit">
|
||||
LOGIN
|
||||
</button>
|
||||
<button class="button button-2" @click="register">
|
||||
REGISTER
|
||||
</button>
|
||||
<button class="button button-3">
|
||||
CREDITS
|
||||
</button>
|
||||
<div class="form-field">
|
||||
<label for="password">Password</label>
|
||||
<input v-model="password" type="password" name="password" required>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="row-buttons">
|
||||
<button class="button button-1" id="submit" @click="submit">
|
||||
<p>LOGIN</p>
|
||||
<img src="/assets/Button_1.png" />
|
||||
</button>
|
||||
|
||||
<button class="button button-2" @click="register">
|
||||
<p>REGISTER</p>
|
||||
<img src="/assets/Button_2.png" />
|
||||
</button>
|
||||
|
||||
<button class="button button-3">
|
||||
<p>CREDITS</p>
|
||||
<img src="/assets/Button_3.png" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user