style: pełny ekran rejestracji i logowania

This commit is contained in:
Lewy 2022-06-14 19:43:35 +02:00
parent 7342d627fc
commit 136fdc17d5
17 changed files with 560 additions and 131 deletions

View File

@ -0,0 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
/*FONTS*/
@font-face {
font-family: 'Montserrat', sans-serif;
}

View File

@ -0,0 +1,37 @@
/*##################*/
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
/*background-color: #0B4D39;*/
}
li a {
display: block;
float: left;
text-align: center;
font-size: 1.2em;
width: 130px;
text-decoration: none;
color: black;
background-color: white;
padding: 10px 15px;
margin: 0px 1px 1px 0px;
border: 1px solid black;
border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 2px 3px gray;
-moz-box-shadow: 0px 2px 3px gray;
-webkit-box-shadow: 0px 2px 3px gray;
}
li a:hover {
color: black;
background: #AFAFAF;
border: 1px solid black;
}

View File

@ -28,6 +28,16 @@
<div class="container">
<div class="bookmarks">
<nav>
<ul>
<li><a href="../index.html">Informacje</a></li>
<li><a href="../zapisy/index.html">Zapisy</a></li>
<li><a href="../drabinka/index.html">Drabinka</a></li>
</ul>
</nav>
</div>
<button type="button" class="collapsible">Drabinka Główna</button>
<!-- Zawartość collapsu-->

View File

@ -2,6 +2,7 @@
@import "css/collapsible.css";
@import "css/round.css";
@import "../../../../_global/header.css";
@import "css/bookmarks.css";
body {
@ -35,3 +36,14 @@ main {
display: flex;
flex-direction: row;
}
.bookmarks {
/*Alignment*/
margin: auto;
width: 50%;
height: 5vh;
/*Others*/
justify-content: center;
align-items: center;
}

View File

@ -1,6 +1,7 @@
@import "../../../_global/header.css";
@import "css/tournament_detail_header.css";
@import "css/bookmarks.css";
@import "../../../_global/style.css";
/*0 layer*/
body {

View File

@ -41,9 +41,9 @@
<!-- OPEN-->
<button type="button" class="collapsible">Zapisani na turniej - OPEN</button>
<div class="collapsibleContent">
<main id="tournament7">
Siemanko
</main>
<div class="participant">
To ja
</div>
</div>
<!-- MIKST-->

View File

@ -3,6 +3,7 @@
@import "css/round.css";
@import "../../../../_global/header.css";
@import "bookmarks.css";
@import "../../../../_global/style.css";
body {
@ -15,7 +16,7 @@ body {
display: flex;
flex-direction: column;
align-items: center;
flex-flow: row wrap;
/*flex-flow: row wrap;*/
height: 100%;
width: 100%;
@ -57,3 +58,24 @@ main {
justify-content: center;
align-items: center;
}
.bookmarks {
/*Alignment*/
margin: auto;
width: 50%;
height: 5vh;
/*Others*/
justify-content: center;
align-items: center;
}
.participant {
height: 10vh;
width: 50%;
background-color: #0f64f2;
color: #CF2323;
border: 1px solid black;
}

View File

@ -1,6 +1,7 @@
@import "../../_global/header.css";
@import "pojedynczy_turniej/css/single_tournament.css";
@import "pojedynczy_turniej/css/settings.css";
@import "../../_global/style.css";
/*main*/
body {

View File

@ -1,4 +1,5 @@
@import "../../_global/header.css";
@import "../../_global/style.css";
body {
margin: 0;

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
@ -12,20 +12,25 @@
<body>
<div class="container">
<div class="form">
<div class="login">
<h2>Logowanie</h2>
<input placeholder="Tutaj wpisz email lub nick" id="loginusername">
<div class="login_header">
<img src="../../_global/logo.svg" alt="">
</div>
<input placeholder="Tutaj wpisz hasło" id="loginpassword">
<div class="loginBox">
<h2>Logowanie</h2>
<input class="login_input" placeholder="Tutaj wpisz email lub nick" id="loginusername">
<input class="password_input" placeholder="Tutaj wpisz hasło" id="loginpassword" type="password">
<br>
<!-- trzeba dać cssy buttonowi bo zmieniłem z form na button -->
<button class="myButton" id="loginsubmit" onclick="login()">
Zaloguj
ZALOGUJ
</button>
<br>
<a href="#">Zapomniałeś hasła?</a>
<br>
</div>
<div class="login_footer">
<span> Nie masz konta? <a href="rejestracja/index.html">Zajerestruj się</a></span>
</div>
</div>

View File

@ -0,0 +1,165 @@
/*Imię i Nazwisko*/
/*Layer 4*/
.imieBox {
position: relative;
/*flex-wrap: nowrap;*/
height: 10%;
margin-bottom: 4%;
text-align: left;
}
/*Layer 5*/
.nameForm {
width: 50%;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 2%;
float: right;
text-align: left;
}
.surnameForm {
width: 50%;
margin: 0;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 2%;
float: right;
text-align: left;
}
/*Login*/
/*Layer 4*/
.loginBox {
width: 100%;
height: 10%;
position: relative;
}
/*Layer 5*/
.personImg {
position: absolute;
top: 50%;
transform: translateY(-50%);
/*float: left;*/
left: 1%
}
.loginForm {
padding-top: 1%;
padding-bottom: 1%;
margin: 0;
width: 100%;
float: right;
text-align: left;
padding-left: 7%;
}
/*Email*/
/*Layer 4*/
.emailBox {
width: 100%;
height: 10%;
position: relative;
}
/*Layer 5*/
.emailImg {
position: absolute;
top: 50%;
transform: translateY(-50%);
/*float: left;*/
left: 1%;
}
.emailForm {
padding-top: 1%;
padding-bottom: 1%;
margin: 0;
width: 100%;
float: right;
text-align: left;
padding-left: 7%;
}
/*Phone*/
/*Layer 4*/
.phoneBox {
width: 100%;
height: 10%;
position: relative;
}
/*Layer 5*/
.phoneImg {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 1%
/*float: left;*/
}
.phoneForm {
padding-top: 1%;
padding-bottom: 1%;
margin: 0;
width: 100%;
float: right;
text-align: left;
padding-left: 7%;
}
/*Password*/
/*Layer 4*/
.passBox {
width: 100%;
height: 10%;
flex-wrap: nowrap;
position: relative;
}
/*Layer 5*/
.passImg {
position: absolute;
top: 50%;
transform: translateY(-50%);
float: left;
left: 1%;
}
.passForm {
/*Align*/
padding-top: 1%;
padding-bottom: 1%;
margin: 0;
width: 100%;
float: left;
text-align: left;
padding-left: 7%;
}
.eye {
position: absolute;
right: 3%;
top: 15%;
}

View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
@ -14,50 +14,77 @@
<div class="container">
<div class="form">
<div class="register">
<div class="reg_header">
<img class="logoImg" src="../../../_global/logo.svg" alt="">
</div>
<div class="registerBox">
<h2>Rejestracja</h2>
<input placeholder="Imię" id="regname">
<span class="icon-dice"></span>
<input placeholder="Nazwisko" id="regsurname">
<br>
<div class="imieBox">
<label>
<input class="nameForm" placeholder="Imię" id="regname">
<input class="surnameForm" placeholder="Nazwisko" id="regsurname">
</label>
</div>
<img src="src/person.svg">
<input placeholder="Login" id="regusername">
<br>
<div class="loginBox">
<img class="personImg" src="src/person.svg" alt="">
<label>
<input class="loginForm" placeholder="Login" id="regusername">
</label>
</div>
<img src="src/mail.svg">
<input placeholder="Email" id="regmail">
<br>
<div class="emailBox">
<img class="emailImg" src="src/mail.svg" alt="">
<label>
<input class="emailForm" placeholder="Email" id="regmail">
</label>
</div>
<img src="src/phone.svg">
<input placeholder="Telefon" id="regphone">
<br>
<div class="phoneBox">
<img class="phoneImg" src="src/phone.svg" alt="">
<label>
<input class="phoneForm" placeholder="Telefon" id="regphone">
</label>
</div>
<img src="src/lock.svg">
<input placeholder="Hasło" type="password" id="regpassword" name="password">
<i class="bi bi-eye-slash" id="togglePassword"></i>
<br>
<div class="passBox">
<img class="passImg" src="src/lock.svg" alt="">
<img src="src/lock.svg">
<input placeholder="Potwierdź hasło" type="password" id="password2" name="password">
<i class="bi bi-eye-slash" id="togglePassword2"></i>
<label>
<input class="passForm" placeholder="Hasło" type="password" id="regpassword" name="password">
</label>
<div class="bi bi-eye-slash eye" id="togglePassword"></div>
</div>
<div class="passBox">
<img class="passImg" src="src/lock.svg" alt="">
<label>
<input class="passForm" placeholder="Hasło" type="password" id="regpassword2" name="password">
</label>
<div class="bi bi-eye-slash eye" id="togglePassword2"></div>
</div>
<button class="myButton" id="regsubmit" onclick="register()">
Zajerestruj
ZAREJESTRUJ
</button>
<br>
<a href="#">Zapomniałeś hasła?</a>
<br>
</div>
<div class="reg_footer">
<span> Masz już konto? <a href="../index.html">Zaloguj się</a></span>
</div>
</div>
</div>
<script type="text/javascript" src="myscript.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</body>

View File

@ -1,16 +1,3 @@
//Password toggle
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#regpassword");
togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// toggle the icon
this.classList.toggle("bi-eye");
});
function register() {
fetch('https://dragonmaster.pl/inz/user/create', {

View File

@ -1,61 +1,120 @@
@import "../../../_global/style.css";
@import "css/register_form.css";
/*Layer 0*/
html {
background-image: url(src/mezczyzna_padel.jpg);
background-attachment: fixed;
background-size: cover;
font-family: Montserrat, serif;
}
.container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
* {
/* border: 2px solid red; */
box-sizing: border-box;
text-align: center;
}
.form {
width: 50%;
height: 40%;
background-color: #EBEBEB;
display: flex;
;
justify-content: center;
align-items: center;
/*layer 1*/
.container {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
/*Layer 2*/
.form {
width: 50%;
height: 60%;
background-color: #EBEBEB;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-radius: 2%;
/*padding-top: 1%;*/
}
/*Layer 3*/
.reg_header {
height: 15%;
width: 100%;
/*padding-left: 50%;*/
/*margin-top: 0;*/
background-color: #ffffff;
}
.registerBox {
width: 60%;
height: 60%;
display: flex;
flex-direction: column;
}
.reg_footer {
height: 10%;
width: 100%;
padding-top: 2%;
text-align: center;
background-color: #ffffff;
}
/*Elements*/
.logoImg {
margin: 1% auto;
width: 20%;
}
.myButton {
/*Outside*/
width: 50%;
display: inline-block;
border: 1px solid;
border-radius: 28px;
margin: 3% 25% 5% 25%;
/*Inside*/
padding: 15px 15px;
align-content: center;
/*text*/
font-family: Montserrat, serif;
font-style: normal;
font-size: 18px;
color: #ffffff;
font-weight: 600;
/*Visual*/
background-color: #007C36;
cursor: pointer;
}
/*##### LINKS TODO WITH HEADER #####*/
/* unvisited link */
a:link {
color: #000000;
}
.myButton {
background-color: #14A6F9;
border-radius: 28px;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
padding: 5px 15px;
width: 50%;
align-content: center;
/* visited link */
a:visited {
color: #000000;
}
/* -----
SVG Icons - svgicons.sparkk.fr
----- */
.svg-icon {
width: 1em;
height: 1em;
/*background-color: #EBEBEB;*/
/* mouse over link */
a:hover {
color: #818181;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
fill: #4691f6;
}
.svg-icon circle {
stroke: #4691f6;
stroke-width: 1;
}
form i {
margin-left: -30px;
cursor: pointer;
/* selected link */
a:active {
color: #000000;
}

View File

@ -0,0 +1,26 @@
//Password toggle
const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#regpassword");
togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);
// toggle the icon
this.classList.toggle("bi-eye");
});
//Repeat password toggle
const togglePassword2 = document.querySelector("#togglePassword2");
const password2 = document.querySelector("#regpassword2");
togglePassword2.addEventListener("click", function () {
// toggle the type attribute
const type = password2.getAttribute("type") === "password" ? "text" : "password";
password2.setAttribute("type", type);
// toggle the icon
this.classList.toggle("bi-eye");
});

View File

@ -1,41 +1,22 @@
/* * {
border: 2px solid red;
padding: 0;
margin: 0;
} */
input {
text-align: left;
}
@import "../../_global/style.css";
/*Layer 0*/
html {
background-image: url(tlo_logowanie.png);
background-attachment: fixed;
background-size: cover;
font-family: Montserrat, serif;
}
* {
/* border: 2px solid red; */
/*border: 2px solid red;*/
box-sizing: border-box;
text-align: center;
}
.form {
width: 50%;
height: 40%;
background-color: #EBEBEB;
display: flex;
;
justify-content: center;
align-items: center;
}
.login {
width: 40%;
display: flex;
flex-direction: column;
}
/*Layer 1*/
.container {
display: flex;
height: 100vh;
@ -43,16 +24,104 @@ html {
align-items: center;
}
/*Layer 2*/
.form {
width: 40%;
height: 40%;
background-color: #EBEBEB;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-radius: 2%;
}
/*Layer 3*/
.login_header {
height: 20%;
width: 100%;
background-color: #ffffff;
}
.loginBox {
width: 40%;
display: flex;
flex-direction: column;
}
.login_footer {
height: 10%;
width: 100%;
padding-top: 1%;
background-color: #ffffff;
}
/*Elements*/
.myButton {
background-color: #14A6F9;
border-radius: 28px;
/*Outside*/
width: 50%;
display: inline-block;
cursor: pointer;
color: #ffffff;
font-family: Arial;
font-size: 12px;
border-radius: 28px;
border: 1px solid;
margin: auto;
/*Inside*/
background-color: #007C36;
padding: 5px 15px;
width: 50%;
text-align: center;
/*Text*/
font-family: Montserrat, serif;
font-style: normal;
font-size: 18px;
color: #ffffff;
font-weight: 600;
}
.login_input {
text-align: left;
padding-top: 2%;
padding-bottom: 2%;
}
.password_input {
text-align: left;
padding-top: 2%;
padding-bottom: 2%;
}
.logoImg {
margin: 1% auto;
width: 25%;
}
/*##### LINKS TODO WITH HEADER #####*/
/* unvisited link */
a:link {
color: #000000;
}
/* visited link */
a:visited {
color: #000000;
}
/* mouse over link */
a:hover {
color: #818181;
}
/* selected link */
a:active {
color: #000000;
}

View File

@ -1,4 +1,5 @@
@import "../../_global/header.css";
@import "../../_global/style.css";
body {
margin: 0;