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="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> <button type="button" class="collapsible">Drabinka Główna</button>
<!-- Zawartość collapsu--> <!-- Zawartość collapsu-->

View File

@ -2,6 +2,7 @@
@import "css/collapsible.css"; @import "css/collapsible.css";
@import "css/round.css"; @import "css/round.css";
@import "../../../../_global/header.css"; @import "../../../../_global/header.css";
@import "css/bookmarks.css";
body { body {
@ -35,3 +36,14 @@ main {
display: flex; display: flex;
flex-direction: row; 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 "../../../_global/header.css";
@import "css/tournament_detail_header.css"; @import "css/tournament_detail_header.css";
@import "css/bookmarks.css"; @import "css/bookmarks.css";
@import "../../../_global/style.css";
/*0 layer*/ /*0 layer*/
body { body {

View File

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

View File

@ -3,6 +3,7 @@
@import "css/round.css"; @import "css/round.css";
@import "../../../../_global/header.css"; @import "../../../../_global/header.css";
@import "bookmarks.css"; @import "bookmarks.css";
@import "../../../../_global/style.css";
body { body {
@ -15,7 +16,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
flex-flow: row wrap; /*flex-flow: row wrap;*/
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -57,3 +58,24 @@ main {
justify-content: center; justify-content: center;
align-items: 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 "../../_global/header.css";
@import "pojedynczy_turniej/css/single_tournament.css"; @import "pojedynczy_turniej/css/single_tournament.css";
@import "pojedynczy_turniej/css/settings.css"; @import "pojedynczy_turniej/css/settings.css";
@import "../../_global/style.css";
/*main*/ /*main*/
body { body {

View File

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

View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -12,20 +12,25 @@
<body> <body>
<div class="container"> <div class="container">
<div class="form"> <div class="form">
<div class="login"> <div class="login_header">
<h2>Logowanie</h2> <img src="../../_global/logo.svg" alt="">
<input placeholder="Tutaj wpisz email lub nick" id="loginusername"> </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> <br>
<!-- trzeba dać cssy buttonowi bo zmieniłem z form na button --> <!-- trzeba dać cssy buttonowi bo zmieniłem z form na button -->
<button class="myButton" id="loginsubmit" onclick="login()"> <button class="myButton" id="loginsubmit" onclick="login()">
Zaloguj ZALOGUJ
</button> </button>
<br>
<a href="#">Zapomniałeś hasła?</a> </div>
<br>
<div class="login_footer">
<span> Nie masz konta? <a href="rejestracja/index.html">Zajerestruj się</a></span> <span> Nie masz konta? <a href="rejestracja/index.html">Zajerestruj się</a></span>
</div> </div>
</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> <!DOCTYPE html>
<html lang="en"> <html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@ -14,50 +14,77 @@
<div class="container"> <div class="container">
<div class="form"> <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> <h2>Rejestracja</h2>
<input placeholder="Imię" id="regname"> <div class="imieBox">
<span class="icon-dice"></span> <label>
<input placeholder="Nazwisko" id="regsurname"> <input class="nameForm" placeholder="Imię" id="regname">
<br> <input class="surnameForm" placeholder="Nazwisko" id="regsurname">
</label>
</div>
<img src="src/person.svg"> <div class="loginBox">
<input placeholder="Login" id="regusername"> <img class="personImg" src="src/person.svg" alt="">
<br> <label>
<input class="loginForm" placeholder="Login" id="regusername">
</label>
</div>
<img src="src/mail.svg"> <div class="emailBox">
<input placeholder="Email" id="regmail"> <img class="emailImg" src="src/mail.svg" alt="">
<br> <label>
<input class="emailForm" placeholder="Email" id="regmail">
</label>
</div>
<img src="src/phone.svg"> <div class="phoneBox">
<input placeholder="Telefon" id="regphone"> <img class="phoneImg" src="src/phone.svg" alt="">
<br> <label>
<input class="phoneForm" placeholder="Telefon" id="regphone">
</label>
</div>
<img src="src/lock.svg"> <div class="passBox">
<input placeholder="Hasło" type="password" id="regpassword" name="password"> <img class="passImg" src="src/lock.svg" alt="">
<i class="bi bi-eye-slash" id="togglePassword"></i>
<br>
<img src="src/lock.svg"> <label>
<input placeholder="Potwierdź hasło" type="password" id="password2" name="password"> <input class="passForm" placeholder="Hasło" type="password" id="regpassword" name="password">
<i class="bi bi-eye-slash" id="togglePassword2"></i> </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()"> <button class="myButton" id="regsubmit" onclick="register()">
Zajerestruj ZAREJESTRUJ
</button> </button>
<br> </div>
<a href="#">Zapomniałeś hasła?</a>
<br>
<div class="reg_footer">
<span> Masz już konto? <a href="../index.html">Zaloguj się</a></span> <span> Masz już konto? <a href="../index.html">Zaloguj się</a></span>
</div> </div>
</div> </div>
</div> </div>
<script type="text/javascript" src="myscript.js"></script> <script type="text/javascript" src="myscript.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</body> </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() { function register() {
fetch('https://dragonmaster.pl/inz/user/create', { 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 { html {
background-image: url(src/mezczyzna_padel.jpg); background-image: url(src/mezczyzna_padel.jpg);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
font-family: Montserrat, serif;
} }
.container { * {
/* border: 2px solid red; */
box-sizing: border-box;
text-align: center;
}
/*layer 1*/
.container {
display: flex; display: flex;
height: 100vh; height: 100vh;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.form { /*Layer 2*/
.form {
width: 50%; width: 50%;
height: 40%; height: 60%;
background-color: #EBEBEB; background-color: #EBEBEB;
display: flex; display: flex;
; flex-wrap: wrap;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
}
.myButton { border-radius: 2%;
background-color: #14A6F9; /*padding-top: 1%;*/
border-radius: 28px; }
display: inline-block;
cursor: pointer; /*Layer 3*/
color: #ffffff; .reg_header {
font-family: Arial; height: 15%;
font-size: 12px; width: 100%;
padding: 5px 15px;
/*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%; width: 50%;
display: inline-block;
border: 1px solid;
border-radius: 28px;
margin: 3% 25% 5% 25%;
/*Inside*/
padding: 15px 15px;
align-content: center; align-content: center;
}
/* ----- /*text*/
SVG Icons - svgicons.sparkk.fr font-family: Montserrat, serif;
----- */ font-style: normal;
font-size: 18px;
color: #ffffff;
font-weight: 600;
.svg-icon { /*Visual*/
width: 1em; background-color: #007C36;
height: 1em;
/*background-color: #EBEBEB;*/
}
.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; cursor: pointer;
}
/*##### 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

@ -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 @@
/* * { @import "../../_global/style.css";
border: 2px solid red;
padding: 0;
margin: 0;
} */
input {
text-align: left;
}
/*Layer 0*/
html { html {
background-image: url(tlo_logowanie.png); background-image: url(tlo_logowanie.png);
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
font-family: Montserrat, serif;
} }
* { * {
/* border: 2px solid red; */ /*border: 2px solid red;*/
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
} }
.form { /*Layer 1*/
width: 50%;
height: 40%;
background-color: #EBEBEB;
display: flex;
;
justify-content: center;
align-items: center;
}
.login {
width: 40%;
display: flex;
flex-direction: column;
}
.container { .container {
display: flex; display: flex;
height: 100vh; height: 100vh;
@ -43,16 +24,104 @@ html {
align-items: center; 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 { .myButton {
background-color: #14A6F9; /*Outside*/
border-radius: 28px; width: 50%;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
color: #ffffff; border-radius: 28px;
font-family: Arial; border: 1px solid;
font-size: 12px; margin: auto;
/*Inside*/
background-color: #007C36;
padding: 5px 15px; 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/header.css";
@import "../../_global/style.css";
body { body {
margin: 0; margin: 0;