diff --git a/frontend/unlogged_user/logowanie/rejestracja/css/register_form.css b/frontend/unlogged_user/logowanie/rejestracja/css/register_form.css
new file mode 100644
index 0000000..2a65def
--- /dev/null
+++ b/frontend/unlogged_user/logowanie/rejestracja/css/register_form.css
@@ -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%;
+ }
\ No newline at end of file
diff --git a/frontend/unlogged_user/logowanie/rejestracja/index.html b/frontend/unlogged_user/logowanie/rejestracja/index.html
index 6a5d8da..7b700a6 100644
--- a/frontend/unlogged_user/logowanie/rejestracja/index.html
+++ b/frontend/unlogged_user/logowanie/rejestracja/index.html
@@ -1,5 +1,5 @@
-
+
+
diff --git a/frontend/unlogged_user/logowanie/rejestracja/myscript.js b/frontend/unlogged_user/logowanie/rejestracja/myscript.js
index f1185e5..c00e1f6 100644
--- a/frontend/unlogged_user/logowanie/rejestracja/myscript.js
+++ b/frontend/unlogged_user/logowanie/rejestracja/myscript.js
@@ -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', {
diff --git a/frontend/unlogged_user/logowanie/rejestracja/style.css b/frontend/unlogged_user/logowanie/rejestracja/style.css
index 78922f1..f735252 100644
--- a/frontend/unlogged_user/logowanie/rejestracja/style.css
+++ b/frontend/unlogged_user/logowanie/rejestracja/style.css
@@ -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;
}
\ No newline at end of file
diff --git a/frontend/unlogged_user/logowanie/rejestracja/toggle.js b/frontend/unlogged_user/logowanie/rejestracja/toggle.js
new file mode 100644
index 0000000..04e3992
--- /dev/null
+++ b/frontend/unlogged_user/logowanie/rejestracja/toggle.js
@@ -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");
+});
\ No newline at end of file
diff --git a/frontend/unlogged_user/logowanie/style.css b/frontend/unlogged_user/logowanie/style.css
index b6189b5..b39766d 100644
--- a/frontend/unlogged_user/logowanie/style.css
+++ b/frontend/unlogged_user/logowanie/style.css
@@ -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%;
-}
\ No newline at end of file
+ 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;
+}
+
diff --git a/frontend/unlogged_user/ranking/style.css b/frontend/unlogged_user/ranking/style.css
index f15795c..1578aee 100644
--- a/frontend/unlogged_user/ranking/style.css
+++ b/frontend/unlogged_user/ranking/style.css
@@ -1,4 +1,5 @@
@import "../../_global/header.css";
+@import "../../_global/style.css";
body {
margin: 0;