login page layout
This commit is contained in:
ThePetrovich
parent
522202b89e
commit
14132dfeb6
4 changed files with 68 additions and 66 deletions
|
|
@ -6,6 +6,11 @@
|
||||||
<link rel="stylesheet" href="%sveltekit.assets%/css/bootstrap.min.css">
|
<link rel="stylesheet" href="%sveltekit.assets%/css/bootstrap.min.css">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
<div style="display: contents">%sveltekit.body%</div>
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
|
|
||||||
|
|
@ -29,75 +29,63 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="login-container">
|
|
||||||
<div class="login-card">
|
|
||||||
<h2 class="mb-4">Login</h2>
|
|
||||||
|
|
||||||
{#if error}
|
|
||||||
<div class="alert alert-danger">{error}</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<form on:submit|preventDefault={handleLogin}>
|
<main class="container pt-3">
|
||||||
<div class="mb-3">
|
<div class="text-center mt-5 mb-4">
|
||||||
<label for="username" class="form-label">Username</label>
|
<img src="/logo-lg.svg" alt="ООО ЯКС" width="300" class="rounded-3" />
|
||||||
<input
|
<h2 class="text-center mt-4 mb-5">Стратосферные полеты | ООО ЯКС</h2>
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="username"
|
|
||||||
bind:value={username}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="mb-3">
|
|
||||||
<label for="password" class="form-label">Password</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
class="form-control"
|
|
||||||
id="password"
|
|
||||||
bind:value={password}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
class="btn btn-primary w-100"
|
|
||||||
disabled={isLoading}
|
|
||||||
>
|
|
||||||
{#if isLoading}
|
|
||||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
|
||||||
Logging in...
|
|
||||||
{:else}
|
|
||||||
Login
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-6 col-lg-4 offset-md-3 offset-lg-4">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h5 class="card-title">Вход в учетную запись</h5>
|
||||||
|
|
||||||
<style>
|
{#if error}
|
||||||
.login-container {
|
<div class="alert alert-danger mb-4" role="alert">{error}</div>
|
||||||
display: flex;
|
{/if}
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: calc(100vh - 44px); /* Account for navbar height */
|
|
||||||
padding: 2rem;
|
|
||||||
background-color: #f8f9fa;
|
|
||||||
}
|
|
||||||
|
|
||||||
.login-card {
|
<form on:submit|preventDefault={handleLogin} class="mt-4">
|
||||||
width: 100%;
|
<div class="form-floating mb-3">
|
||||||
max-width: 400px;
|
<input
|
||||||
padding: 2rem;
|
type="text"
|
||||||
background: white;
|
class="form-control"
|
||||||
border-radius: 8px;
|
id="username"
|
||||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
placeholder="Имя пользователя"
|
||||||
}
|
bind:value={username}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label for="username">Имя пользователя</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-floating mb-3">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
class="form-control"
|
||||||
|
id="password"
|
||||||
|
placeholder="Пароль"
|
||||||
|
bind:value={password}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<label for="password">Пароль</label>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
class="btn btn-primary w-100"
|
||||||
|
disabled={isLoading}
|
||||||
|
>
|
||||||
|
{#if isLoading}
|
||||||
|
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||||
|
Вход...
|
||||||
|
{:else}
|
||||||
|
Войти
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
<a href="/predict" class="btn btn-secondary mt-3 w-100">Назад</a>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
.form-control {
|
|
||||||
padding: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0.75rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
1
src/routes/login/+page.ts
Normal file
1
src/routes/login/+page.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export const ssr =false;
|
||||||
8
static/logo-lg.svg
Normal file
8
static/logo-lg.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg width="128" height="55" viewBox="0 0 128 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M127.629 26.5648H120.266C120.289 25.5875 120.164 24.7239 119.891 23.9739C119.618 23.2126 119.209 22.5649 118.664 22.0308C118.129 21.4967 117.476 21.0933 116.703 20.8206C115.931 20.5365 115.061 20.3945 114.095 20.3945C112.232 20.3945 110.522 20.8604 108.965 21.7922C107.408 22.724 106.096 24.0762 105.027 25.8489C103.959 27.6102 103.221 29.7409 102.812 32.2408C102.414 34.6498 102.437 36.6668 102.88 38.2918C103.323 39.9168 104.107 41.144 105.232 41.9735C106.368 42.7917 107.783 43.2008 109.476 43.2008C110.522 43.2008 111.516 43.0701 112.459 42.8088C113.402 42.536 114.26 42.1497 115.033 41.6497C115.817 41.1383 116.499 40.519 117.078 39.7918C117.669 39.0645 118.129 38.2407 118.459 37.3202H125.874C125.408 38.9225 124.68 40.4679 123.692 41.9565C122.715 43.4451 121.504 44.7746 120.061 45.945C118.618 47.1041 116.976 48.0245 115.135 48.7063C113.294 49.3882 111.277 49.7291 109.084 49.7291C105.914 49.7291 103.192 49.0018 100.92 47.5473C98.6583 46.0928 97.0276 43.9962 96.0277 41.2576C95.0277 38.5191 94.8402 35.218 95.4652 31.3545C96.0902 27.6159 97.3117 24.4455 99.1299 21.8433C100.959 19.2297 103.181 17.2468 105.795 15.8946C108.419 14.5423 111.226 13.8662 114.215 13.8662C116.294 13.8662 118.175 14.1503 119.857 14.7185C121.538 15.2866 122.97 16.1162 124.152 17.207C125.345 18.2866 126.243 19.6104 126.845 21.1786C127.447 22.7467 127.709 24.5421 127.629 26.5648Z" fill="#1E1E25"/>
|
||||||
|
<path d="M85.1998 49.2518L76.4557 34.3715H73.933L71.4615 49.2518H64.0809L69.8763 14.3435H77.2568L74.9386 28.2864H76.4216L90.3304 14.3435H99.5177L83.2226 30.5363L94.353 49.2518H85.1998Z" fill="#1E1E25"/>
|
||||||
|
<path d="M58.0299 49.2518H50.6494L55.4391 20.3774H50.4619C49.0415 20.3774 47.8256 20.5877 46.8143 21.0081C45.8143 21.4172 45.0132 22.0195 44.4109 22.8149C43.82 23.6103 43.428 24.5876 43.2348 25.7466C43.053 26.8944 43.1268 27.8546 43.4564 28.6273C43.7973 29.4 44.3995 29.9795 45.2632 30.3659C46.1381 30.7522 47.2802 30.9454 48.6892 30.9454H56.7004L55.7118 36.8771H46.4904C43.82 36.8771 41.6098 36.4339 39.8599 35.5476C38.1213 34.6612 36.8883 33.3885 36.1611 31.7295C35.4338 30.0591 35.2577 28.0648 35.6327 25.7466C36.0304 23.4399 36.8599 21.4342 38.1213 19.7297C39.394 18.0139 41.0417 16.69 43.0643 15.7582C45.087 14.8151 47.4165 14.3435 50.0528 14.3435H63.8082L58.0299 49.2518ZM41.8201 33.3658H49.7801L38.6497 49.2518H30.5192L41.8201 33.3658Z" fill="#1E1E25"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3903 21.7039C5.78668 34.0449 11.4416 47.2087 21.9106 54.1434C12.048 51.1317 2.7851 43.9135 0.832447 34.2409C-2.19369 19.2507 9.53957 4.23493 27.0394 0.702149C35.6391 -1.03391 43.7457 1.00909 50.4165 4.62037C42.6151 2.24532 34.2901 2.97345 27.1391 6.20747C26.0164 5.16499 24.5125 4.52753 22.8596 4.52753C19.3853 4.52753 16.5689 7.34398 16.5689 10.8183C16.5689 11.7004 16.7504 12.5401 17.0782 13.302C14.7667 15.7231 12.8274 18.5389 11.3903 21.7039Z" fill="#008DD2"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.8595 17.109C26.3338 17.109 29.1502 14.2926 29.1502 10.8183C29.1502 10.1536 29.0472 9.51302 28.8561 8.91161C31.1779 7.85429 33.6924 7.08033 36.3547 6.64694C43.6811 5.45428 50.7637 7.06258 56.3383 10.6377C43.5445 5.75535 28.5474 12.1054 22.6323 25.0127C17.6132 35.9648 20.7246 48.165 29.4457 54.9259C21.1528 51.7528 14.8535 44.7886 13.4101 35.922C12.2177 28.5968 14.5801 21.452 19.3047 16.0091C20.316 16.703 21.5404 17.109 22.8595 17.109Z" fill="#009846"/>
|
||||||
|
<circle cx="22.8595" cy="10.8183" r="3.96366" transform="rotate(-0.650663 22.8595 10.8183)" fill="#C42526"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.5 KiB |
Loading…
Add table
Add a link
Reference in a new issue