344 lines
6.9 KiB
Svelte
344 lines
6.9 KiB
Svelte
<script>
|
||
import Header from '../Header.svelte';
|
||
import { handleLogin } from '$lib/login';
|
||
import { onMount } from 'svelte';
|
||
import { fly, blur } from 'svelte/transition';
|
||
import { cubicOut, backInOut } from 'svelte/easing';
|
||
|
||
async function listener(event){
|
||
|
||
if(enterError.length !== 0){
|
||
enterError = ""
|
||
}
|
||
}
|
||
|
||
let username = '';
|
||
let password = '';
|
||
let enterError = '';
|
||
let passwordError = "длжо";
|
||
async function login() {
|
||
switch (true) {
|
||
case username.length === 0 && password.length !== 0:
|
||
document.getElementById('username').placeholder = 'ничего не забыл?';
|
||
document.getElementById('password').placeholder = '';
|
||
|
||
console.log('ЖОПА1');
|
||
break;
|
||
|
||
case username.length !== 0 && password.length === 0:
|
||
document.getElementById('username').placeholder = '';
|
||
document.getElementById('password').placeholder = 'ничего не забыл?';
|
||
console.log('ЖОПА2');
|
||
|
||
break;
|
||
|
||
case username.length === 0 && password.length === 0:
|
||
document.getElementById('password').placeholder = 'ничего не забыл?';
|
||
document.getElementById('username').placeholder = 'ничего не забыл?';
|
||
console.log('ЖОПА3');
|
||
break;
|
||
|
||
default:
|
||
document.getElementById('password').placeholder = '';
|
||
document.getElementById('username').placeholder = '';
|
||
enterError = await handleLogin(username, password);
|
||
break;
|
||
}
|
||
}
|
||
|
||
let hi = ' ';
|
||
let greeting = ' ';
|
||
|
||
let greetings = [
|
||
'Рад видеть тебя снова',
|
||
'Как прошел день?',
|
||
'Как настроение?',
|
||
'Come in'
|
||
];
|
||
greeting = greetings[Math.floor(Math.random() * greetings.length)];
|
||
|
||
let His = ['Привет!', 'Дарова!', 'Хай!', 'Приветствую!'];
|
||
hi = His[Math.floor(Math.random() * (His.length - 0))];
|
||
|
||
let loadingPage = false;
|
||
|
||
onMount(() => {
|
||
loadingPage = !loadingPage;
|
||
});
|
||
</script>
|
||
|
||
{#if loadingPage === true}
|
||
<body>
|
||
<div class="loginField">
|
||
<div class="loginMainDiv">
|
||
<div class="loginDiv" transition:fly={{ y: -1920, duration: 1000, backInOut }}>
|
||
<div class="noiseGif">
|
||
<div class="marginDiv">
|
||
|
||
<div class="greetingsDiv">
|
||
<h1 id="hi" transition:blur={{
|
||
y: -30, duration: 1900, easing: cubicOut }}>{hi}</h1>
|
||
<h2 id="greetings" transition:blur={{
|
||
y: -30, duration: 2000, easing: cubicOut }}>
|
||
{greeting}</h2>
|
||
</div>
|
||
|
||
<div class="bigGroup">
|
||
<div class="group">
|
||
<h3>никнейм или почта</h3>
|
||
<input placeholder=" " type="text" id="username" on:input={listener} bind:value={username} />
|
||
</div>
|
||
|
||
<div class="group">
|
||
<h3>пароль</h3>
|
||
<input placeholder=" " type="password" id="password" on:input={listener} bind:value={password} />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="enterDiv">
|
||
<button class="enterButt" on:click={login}>Войти</button>
|
||
{#if enterError !== ''}
|
||
<h3 class="enterError"
|
||
transition:fly={{ y: 200, duration: 300, backInOut }}>{enterError}</h3>
|
||
{/if}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="regDiv" transition:fly={{ y: -1920, duration: 800, backInOut }}>
|
||
<div class="noiseGif">
|
||
<div class="regregDiv">
|
||
<h2 class="reg1">Нет аккаунта? Лох!</h2>
|
||
<button class="reg2" on:click={() => (window.location.href = '/register')}
|
||
>Перестать был лохом</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="previewField">
|
||
<h3>не жопа</h3>
|
||
</div>
|
||
</body>
|
||
{/if}
|
||
|
||
<style lang="scss">
|
||
|
||
// .passwordError{
|
||
// z-index: 1;
|
||
// position: absolute;
|
||
// color: var(--disable);
|
||
// border: 1px solid white;
|
||
// bottom: 29.5%;
|
||
// }
|
||
// не рабочая . переделать как нибудь <h3 class="passwordError">{passwordError}</h3>
|
||
|
||
.greetingsDiv{
|
||
height: 30%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 35px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.enterDiv{
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 20%;
|
||
}
|
||
.enterButt{
|
||
height: 60%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.enterError{
|
||
margin-bottom: 1%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.reg1,
|
||
.reg2{
|
||
height: 40%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
input::placeholder {
|
||
color: var(--disable);
|
||
transition: opacity 1s ease;
|
||
opacity: 1;
|
||
}
|
||
|
||
#greetings,
|
||
#hi {
|
||
transition: opacity 1s ease;
|
||
}
|
||
|
||
.group > * {
|
||
margin-top: 1%;
|
||
margin-bottom: 1%;
|
||
}
|
||
|
||
.group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
}
|
||
.bigGroup{
|
||
height: 40%;
|
||
}
|
||
|
||
.regregDiv {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.loginMainDiv {
|
||
width: 60%;
|
||
height: 90%;
|
||
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
.regDiv {
|
||
width: 100%;
|
||
height: 32%;
|
||
}
|
||
.loginDiv {
|
||
width: 100%;
|
||
height: 66%;
|
||
}
|
||
|
||
.loginDiv,
|
||
.regDiv {
|
||
border: 1px solid transparent;
|
||
background:
|
||
linear-gradient(#101010, #101010) padding-box,
|
||
var(--gradient) border-box;
|
||
border-radius: 15px;
|
||
background-repeat: no-repeat;
|
||
background-attachment: fixed;
|
||
}
|
||
|
||
.previewField {
|
||
height: 100%;
|
||
width: 50%;
|
||
}
|
||
|
||
.loginField {
|
||
height: 100%;
|
||
width: 50%;
|
||
outline: 1px dotted red;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.enterError {
|
||
color: var(--disable);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.marginDiv {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
width: 90%;
|
||
height: 100%;
|
||
padding-left: 5%;
|
||
padding-right: 5%;
|
||
|
||
}
|
||
|
||
.marginDiv > * {
|
||
//border: 1px solid white;
|
||
}
|
||
|
||
input {
|
||
border: 1px solid transparent;
|
||
background:
|
||
linear-gradient(#101010, #101010) padding-box,
|
||
var(--gradient) border-box;
|
||
border-radius: 10px;
|
||
width: 100%;
|
||
height: 2em;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
box-shadow:
|
||
4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
|
||
-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
|
||
outline: none;
|
||
}
|
||
|
||
input:focus {
|
||
transition: 0.5s ease-in;
|
||
box-shadow: 0 0 transparent;
|
||
}
|
||
input:not(:focus) {
|
||
transition: 0.5s ease-in-out;
|
||
box-shadow:
|
||
4px 4px 15px rgba($color: #5e2a83, $alpha: 0.38),
|
||
-4px -4px 15px rgba($color: #3d53fe, $alpha: 0.38);
|
||
}
|
||
|
||
button {
|
||
text-shadow: 0 0 20px white;
|
||
font-size: 36px;
|
||
background: transparent;
|
||
border: 0;
|
||
height: 10%;
|
||
margin-bottom: 1%;
|
||
}
|
||
|
||
button {
|
||
cursor: pointer;
|
||
}
|
||
|
||
h1,
|
||
h2,
|
||
h3,
|
||
input,
|
||
button {
|
||
color: var(--fontColor);
|
||
}
|
||
|
||
h1 {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-shadow: 0 0 20px white;
|
||
font-size: 5vh;
|
||
}
|
||
|
||
h2 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
text-shadow: 0 0 20px white;
|
||
font-weight: 500;
|
||
font-size: 3.5vh;
|
||
}
|
||
h3 {
|
||
font-weight: 100;
|
||
font-size: 3vh;
|
||
}
|
||
|
||
body {
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
</style>
|