декор реги, анимация на ошибки, ошибки на все случаи жизни, начало popup окна для кода
This commit is contained in:
parent
22acbaf438
commit
a0275c8776
3 changed files with 413 additions and 264 deletions
|
|
@ -16,6 +16,53 @@ export async function UserCheck(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function checkName(username) {
|
||||||
|
const response = await fetch('http://localhost:8000/api/users/check_existing_username', {
|
||||||
|
method:'POST',
|
||||||
|
credentials:"include",
|
||||||
|
headers:{
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
"username": username
|
||||||
|
})
|
||||||
|
})
|
||||||
|
if(response.status === 200){
|
||||||
|
}
|
||||||
|
else if(response.status === 409){
|
||||||
|
let data = "ник занят"
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
else if(response.status === 422){
|
||||||
|
let data = await response.json();
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function checkMail(mail) {
|
||||||
|
const response = await fetch('http://localhost:8000/api/users/check_existing_email', {
|
||||||
|
method:'POST',
|
||||||
|
credentials:"include",
|
||||||
|
headers:{
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
"email": mail
|
||||||
|
})
|
||||||
|
})
|
||||||
|
if(response.status === 200){
|
||||||
|
}
|
||||||
|
else if(response.status === 409){
|
||||||
|
let data = "почта занята"
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
else if(response.status === 422){
|
||||||
|
let data = "не похоже на почту"
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export async function handleRegister(username,password,email,date_of_birth){
|
export async function handleRegister(username,password,email,date_of_birth){
|
||||||
const response = await fetch('http://localhost:8000/api/users/register',{
|
const response = await fetch('http://localhost:8000/api/users/register',{
|
||||||
method:'POST',
|
method:'POST',
|
||||||
|
|
@ -31,13 +78,16 @@ export async function UserCheck(){
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
if(!response.ok){
|
if(response.status === 201){
|
||||||
console.log(response.status)
|
|
||||||
}
|
|
||||||
else{
|
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
console.log(data)
|
||||||
return data;
|
return data;
|
||||||
}
|
}
|
||||||
|
else if(response.status === 422){
|
||||||
|
console.log(response.status)
|
||||||
|
let data = "Validation Error"
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -49,10 +49,8 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
background-color: rgba(255, 255, 255, 0.3);
|
||||||
background-color: rgba(255, 255, 255, 0.3);
|
border: 0;
|
||||||
border: 0;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -78,10 +76,7 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
div, h3 {
|
|
||||||
font-weight: 600;
|
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
|
|
||||||
}
|
|
||||||
.headerClass > * {
|
.headerClass > * {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,287 +1,391 @@
|
||||||
<script>
|
<script>
|
||||||
import Header from './../Header.svelte';
|
import Header from './../Header.svelte';
|
||||||
import {handleRegister} from '$lib/userFunction.js'
|
import { handleRegister, checkName, checkMail } from '$lib/userFunction.js';
|
||||||
let name,mail,password,password2,dateDay,dateMonth,dateYear;
|
import { onMount } from 'svelte';
|
||||||
|
import { fly } from 'svelte/transition';
|
||||||
|
import { cubicOut } from 'svelte/easing';
|
||||||
|
let days = [];
|
||||||
|
for (let i = 1; i <= 31; i++) {
|
||||||
|
let day = i.toString().padStart(2, '0');
|
||||||
|
days.push(day);
|
||||||
|
}
|
||||||
|
|
||||||
async function SendData(){
|
const now = new Date();
|
||||||
let date = `${dateYear}-${dateMonth}-${dateDay}`;
|
const legalyear = now.getFullYear();
|
||||||
console.log("Имя:", name, "Эл. почта:", mail, "Пароль:", password, "Повтор пароля:", password2, "Дата рождения:", date);
|
let years = [];
|
||||||
|
for (let i = legalyear - 16; i > legalyear - 100; i--) years.push(i);
|
||||||
|
|
||||||
let jopa = await handleRegister(name,password,mail,date)
|
let name, mail, password, password2, dateDay, dateMonth, dateYear;
|
||||||
console.log(jopa)
|
name = '';
|
||||||
}
|
mail = '';
|
||||||
let days = []
|
password = '';
|
||||||
for(let i = 1;i <= 31;i++){
|
password2 = '';
|
||||||
let day = i.toString().padStart(2,'0');
|
|
||||||
days.push(day)
|
|
||||||
}
|
|
||||||
|
|
||||||
const now = new Date();
|
let nameError, mailError, passwordError, password2Error;
|
||||||
const legalyear = now.getFullYear();
|
nameError = '';
|
||||||
let years = []
|
mailError = '';
|
||||||
for(let i = legalyear - 16;i > legalyear - 100;i--)
|
passwordError = '';
|
||||||
years.push(i);
|
password2Error = '';
|
||||||
|
|
||||||
|
async function SendData() {
|
||||||
|
console.log(`name=${nameError} mail=${mailError} password=${passwordError} password2=${password2Error}`)
|
||||||
|
if ((name === '' )|| (name === undefined))
|
||||||
|
nameError = 'пустой ник';
|
||||||
|
|
||||||
function lisenerName(){
|
if ((mail === '') || (mail === undefined))
|
||||||
let nname = document.getElementById('name');
|
mailError = 'введи почту';
|
||||||
console.log(name)
|
|
||||||
nname.textContent = name;
|
|
||||||
}
|
|
||||||
|
|
||||||
function lisenerEmail(){
|
if ((password === '') || (password2 === '')
|
||||||
let eemail = document.getElementById('email');
|
&& (password === undefined) || (password2 === undefined))
|
||||||
console.log(mail)
|
passwordError = 'акк без пароля?';
|
||||||
eemail.textContent = mail;
|
|
||||||
}
|
if ((password.length <= 8) || (passwordError === undefined))
|
||||||
|
passwordError = 'минимум 8 символов';
|
||||||
|
|
||||||
|
if ((password != "") && (password2 == ""))
|
||||||
|
password2Error = "забыл повторить"
|
||||||
|
if ((password2 != "") && (password == ""))
|
||||||
|
passwordError = "забыл повторить"
|
||||||
|
|
||||||
|
if ((nameError === '' )|| (nameError === undefined) &&
|
||||||
|
(mailError === '' )|| (mailError === undefined) &&
|
||||||
|
(passwordError === '' )|| (passwordError === undefined) &&
|
||||||
|
(password2Error === '') ||( password2Error === undefined)) {
|
||||||
|
let date = `${dateYear}-${dateMonth}-${dateDay}`;
|
||||||
|
let reg = await handleRegister(name, password, mail, date);
|
||||||
|
console.log(reg);
|
||||||
|
console.log("отправлено")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function lisenerName() {
|
||||||
|
if (name != '') {
|
||||||
|
let error = await checkName(name);
|
||||||
|
console.log(error);
|
||||||
|
nameError = error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function lisenerEmail() {
|
||||||
|
if (mail == '') {
|
||||||
|
mailError = '';
|
||||||
|
} else {
|
||||||
|
let error = await checkMail(mail);
|
||||||
|
console.log(error);
|
||||||
|
mailError = error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function lisenerPassword() {
|
||||||
|
if((password === "") && (password2 != ""))
|
||||||
|
{ passwordError = ""; password2Error = "" }
|
||||||
|
else if((password2 === "") && (password != ""))
|
||||||
|
{ passwordError = ""; password2Error = "" }
|
||||||
|
else if (password != password2)
|
||||||
|
passwordError = 'пароли не совпадают';
|
||||||
|
|
||||||
|
else passwordError = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
let VisiblePopUp = false;
|
||||||
|
function toggleVisibility() {
|
||||||
|
VisiblePopUp = !VisiblePopUp;
|
||||||
|
console.log('переключил');
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<button on:click={toggleVisibility}>Показать модальное окно</button>
|
||||||
|
{#if VisiblePopUp}
|
||||||
|
<div class="codeDiv"></div>
|
||||||
|
{/if}
|
||||||
<body>
|
<body>
|
||||||
<div class="mainDiv">
|
<div class="mainDiv">
|
||||||
<div class="jopa1">
|
<div class="jopa1">
|
||||||
<div class="marginDiv">
|
<div class="marginDiv">
|
||||||
<h1>Регистрация</h1>
|
<form on:submit|preventDefault={SendData}>
|
||||||
|
<h1>Регистрация</h1>
|
||||||
|
<div class="group">
|
||||||
|
<div class="groupname">
|
||||||
|
<h3>имя</h3>
|
||||||
|
{#if nameError && nameError !== ''}
|
||||||
|
<h3 id="name" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
|
||||||
|
{nameError}
|
||||||
|
</h3>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<input on:blur={lisenerName} type="text" maxlength="100" bind:value={name} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<form on:submit|preventDefault={SendData}>
|
<div class="group">
|
||||||
|
<div class="groupname">
|
||||||
|
<h3>эл почта</h3>
|
||||||
|
{#if mailError && mailError !== ''}
|
||||||
|
<h3 id="mail" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
|
||||||
|
{mailError}
|
||||||
|
</h3>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<input on:blur={lisenerEmail} type="email" maxlength="100" bind:value={mail} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="groupname">
|
<div class="groupname">
|
||||||
<h3>имя</h3>
|
<h3>пароль</h3>
|
||||||
<h3 id="name"></h3></div>
|
{#if passwordError && passwordError !== ''}
|
||||||
<input on:blur={lisenerName} type="text" maxlength="100" bind:value={name}>
|
<h3 id="password" transition:fly={{ y: -30, duration: 300, easing: cubicOut }}>
|
||||||
</div>
|
{passwordError}
|
||||||
|
</h3>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
maxlength="100"
|
||||||
|
bind:value={password}
|
||||||
|
on:blur={lisenerPassword}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="groupname">
|
<div class="groupname">
|
||||||
<h3>эл почта</h3>
|
<h3>повтори пароль</h3>
|
||||||
<h3 id="email"></h3></div>
|
{#if password2Error && password2Error !== ''}
|
||||||
<input on:blur={lisenerEmail} type="email" maxlength="100" bind:value={mail}>
|
<h3 id="password2">{password2Error}</h3>
|
||||||
</div>
|
{/if}
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
maxlength="100"
|
||||||
|
bind:value={password2}
|
||||||
|
on:blur={lisenerPassword}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="group">
|
||||||
|
<h3>Дата рождения</h3>
|
||||||
|
<div class="birthday">
|
||||||
|
<select id="dayDropDown" bind:value={dateDay}>
|
||||||
|
{#each days as day}
|
||||||
|
<option value={day}>{day}</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
|
||||||
<div class="group">
|
<select id="monthDropDown" bind:value={dateMonth}>
|
||||||
<div class="groupname">
|
<option value="01">Январь</option>
|
||||||
<h3>пароль</h3>
|
<option value="02">Февраль</option>
|
||||||
<h3 id="password"></h3></div>
|
<option value="03">Март</option>
|
||||||
<input type="password" maxlength="100" bind:value={password}>
|
<option value="04">Апрель</option>
|
||||||
</div>
|
<option value="05">Май</option>
|
||||||
|
<option value="06">Июнь</option>
|
||||||
|
<option value="07">Июль</option>
|
||||||
|
<option value="08">Август</option>
|
||||||
|
<option value="09">Сентябрь</option>
|
||||||
|
<option value="10">Октябрь</option>
|
||||||
|
<option value="11">Ноябрь</option>
|
||||||
|
<option value="12">Декабрь</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
<div class="group">
|
<select id="yearDropDown" bind:value={dateYear}>
|
||||||
<div class="groupname">
|
{#each years as year}
|
||||||
<h3>повтори пароль</h3>
|
<option value={year}>{year}</option>
|
||||||
<h3 id="password2"></h3></div>
|
{/each}
|
||||||
<input type="password" maxlength="100" bind:value={password2}>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="group">
|
|
||||||
<h3>Дата рождения</h3>
|
|
||||||
<div class="birthday">
|
|
||||||
|
|
||||||
<select id="dayDropDown" bind:value={dateDay}>
|
|
||||||
{#each days as day}
|
|
||||||
<option value="{day}">{day}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select id="monthDropDown" bind:value={dateMonth}>
|
|
||||||
<option value="01">Январь</option>
|
|
||||||
<option value="02">Февраль</option>
|
|
||||||
<option value="03">Март</option>
|
|
||||||
<option value="04">Апрель</option>
|
|
||||||
<option value="05">Май</option>
|
|
||||||
<option value="06">Июнь</option>
|
|
||||||
<option value="07">Июль</option>
|
|
||||||
<option value="08">Август</option>
|
|
||||||
<option value="09">Сентябрь</option>
|
|
||||||
<option value="10">Октябрь</option>
|
|
||||||
<option value="11">Ноябрь</option>
|
|
||||||
<option value="12">Декабрь</option>
|
|
||||||
</select>
|
|
||||||
|
|
||||||
<select id="yearDropDown" bind:value={dateYear}>
|
|
||||||
{#each years as year}
|
|
||||||
<option value="{year}">{year}</option>
|
|
||||||
{/each}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="submitDiv">
|
|
||||||
<button type="submit">Зарегаться</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<button type="submit">Зарегаться</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
.codeDiv {
|
||||||
|
width: 30vw;
|
||||||
|
aspect-ratio: 1/1.3;
|
||||||
|
background: #3d53fe;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
font-family: Comfortaa;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 100%;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
form{
|
#name,
|
||||||
display: flex;
|
#mail,
|
||||||
flex-direction: column;
|
#password,
|
||||||
height: 100%;
|
#password2 {
|
||||||
justify-content: space-around;
|
color: var(--disable);
|
||||||
}
|
font-weight: 700;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
#name, #email{
|
.animate-slide-up {
|
||||||
margin-left: 50px;
|
opacity: 1;
|
||||||
color: var(--disable);
|
transform: translateY(0);
|
||||||
font-weight: 700;
|
}
|
||||||
}
|
|
||||||
.groupname{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.group{
|
.groupname {
|
||||||
margin-top: 0px;
|
display: flex;
|
||||||
margin-bottom: 5px;
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.marginDiv {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 30px;
|
||||||
|
}
|
||||||
|
.birthday {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
*{
|
.jopa1 {
|
||||||
margin-top:5px;
|
width: 100%;
|
||||||
margin-bottom: 5px;
|
height: 100%;
|
||||||
font-family: Comfortaa;
|
display: flex;
|
||||||
}
|
box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
.marginDiv{
|
.jopa1::before {
|
||||||
|
content: '';
|
||||||
|
background-image: url(../noise.gif);
|
||||||
|
opacity: 0.011;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
display: flex;
|
.mainDiv {
|
||||||
flex-direction: column;
|
border: 1px solid transparent;
|
||||||
width: 100%;
|
background:
|
||||||
margin: 40px;
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
}
|
var(--gradient) border-box;
|
||||||
|
border-radius: 15px;
|
||||||
|
|
||||||
.birthday{
|
aspect-ratio: 1 / 1.4;
|
||||||
display: flex;
|
height: calc(100% - 200px);
|
||||||
flex-direction:row;
|
position: absolute;
|
||||||
justify-content: space-around;
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
input,
|
||||||
|
select {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background:
|
||||||
|
linear-gradient(#101010, #101010) padding-box,
|
||||||
|
var(--gradient) border-box;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 1.8em;
|
||||||
|
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;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.jopa1{
|
input:focus,
|
||||||
width: 100%;
|
select:focus {
|
||||||
height: 100%;
|
transition: 0.5s ease-in;
|
||||||
display: flex;
|
box-shadow: 0 0 transparent;
|
||||||
box-shadow: 4px 4px 11px rgba($color: #000000, $alpha: 0.4);
|
}
|
||||||
border-radius: 15px;
|
input:not(:focus),
|
||||||
}
|
select: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);
|
||||||
|
}
|
||||||
|
|
||||||
.jopa1::before{
|
#dayDropDown {
|
||||||
content: "";
|
width: 2.5em;
|
||||||
background-image: url(../noise.gif); opacity: 0.011;
|
}
|
||||||
width: 100%; height: 100%;
|
#monthDropDown {
|
||||||
position: absolute; top: 50%; left: 50%;
|
width: 8em;
|
||||||
transform: translate(-50%,-50%);
|
}
|
||||||
pointer-events: none;
|
#yearDropDown {
|
||||||
border-radius: 15px;
|
width: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
select {
|
||||||
|
min-width: 50px;
|
||||||
|
width: 8rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 300;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
option {
|
||||||
|
background-color: var(--bg);
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.mainDiv{
|
button[type='submit'] {
|
||||||
border: 1px solid transparent;
|
text-shadow: 0 0 20px white;
|
||||||
background: linear-gradient(#101010,#101010) padding-box,
|
font-size: 36px;
|
||||||
var(--gradient) border-box;
|
background: transparent;
|
||||||
border-radius: 15px;
|
border: 0;
|
||||||
|
height: 10%;
|
||||||
aspect-ratio: 1 / 1.6;
|
}
|
||||||
height: calc(100% - 100px);
|
button[type='submit'],
|
||||||
position: absolute;
|
select,
|
||||||
top: 50%;
|
option {
|
||||||
left: 50%;
|
cursor: pointer;
|
||||||
transform: translate(-50%,-50%);
|
}
|
||||||
}
|
|
||||||
|
|
||||||
input,select{
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background: linear-gradient(#101010,#101010) padding-box,
|
|
||||||
var(--gradient) border-box;
|
|
||||||
border-radius: 10px;
|
|
||||||
width: 100%;
|
|
||||||
height: 1.8em;
|
|
||||||
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, select:focus{
|
|
||||||
transition: 0.5s ease-in;
|
|
||||||
box-shadow: 0 0 transparent;
|
|
||||||
}
|
|
||||||
input:not(:focus),select:not(:focus){
|
|
||||||
transition: 0.5s ease;
|
|
||||||
box-shadow: 4px 4px 15px rgba($color: #5E2A83, $alpha: 0.38),
|
|
||||||
-4px -4px 15px rgba($color: #3D53FE, $alpha: 0.38);
|
|
||||||
}
|
|
||||||
|
|
||||||
#dayDropDown{
|
|
||||||
width: 2.5em;
|
|
||||||
}
|
|
||||||
#monthDropDown{
|
|
||||||
width: 8em;
|
|
||||||
}
|
|
||||||
#yearDropDown{
|
|
||||||
width: 4em;
|
|
||||||
}
|
|
||||||
|
|
||||||
select{
|
|
||||||
min-width: 50px;
|
|
||||||
width: 8rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 300;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
option{
|
|
||||||
background-color: var(--bg);
|
|
||||||
border: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
button[type=submit]{
|
|
||||||
text-shadow: 0 0 20px white;
|
|
||||||
font-size: 36px;
|
|
||||||
background: transparent;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
.submitDiv{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
button[type=submit],select,option{
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6,p,input,select,button[type=submit]{
|
|
||||||
color: var(--fontColor);
|
|
||||||
}
|
|
||||||
h1{
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
text-shadow: 0 0 20px white;
|
|
||||||
font-size: 48px;
|
|
||||||
|
|
||||||
}
|
|
||||||
h3{
|
|
||||||
font-weight: 100;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
button[type='submit'] {
|
||||||
|
color: var(--fontColor);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-shadow: 0 0 20px white;
|
||||||
|
font-size: 48px;
|
||||||
|
height: 10%;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Add table
Reference in a new issue