mikhailov.aa/leaflet_svelte
1
Fork 0
Code Issues 10 Pull requests 1 Projects 1 Releases Activity

login page layout

Browse source
This commit is contained in:
ThePetrovich 2025-04-05 23:11:56 +08:00
parent 522202b89e
commit 14132dfeb6
4 changed files with 68 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/app.html
View file

@ -6,6 +6,11 @@
<link rel="stylesheet" href="%sveltekit.assets%/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
<style>
body {
background-color: #f5f5f5;
}
</style>
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>

120
src/routes/login/+page.svelte
View file

@ -29,75 +29,63 @@
}
</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}>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input
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>
<main class="container pt-3">
<div class="text-center mt-5 mb-4">
<img src="/logo-lg.svg" alt="ООО ЯКС" width="300" class="rounded-3" />
<h2 class="text-center mt-4 mb-5">Стратосферные полеты | ООО ЯКС</h2>
</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>
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - 44px); /* Account for navbar height */
padding: 2rem;
background-color: #f8f9fa;
}
{#if error}
<div class="alert alert-danger mb-4" role="alert">{error}</div>
{/if}
.login-card {
width: 100%;
max-width: 400px;
padding: 2rem;
background: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
<form on:submit|preventDefault={handleLogin} class="mt-4">
<div class="form-floating mb-3">
<input
type="text"
class="form-control"
id="username"
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
View file

@ -0,0 +1 @@
export const ssr =false;