style: pełny ekran rejestracji i logowania

frontend/_global/style.css

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

frontend/unlogged_user/_main page/pojedynczy_turniej/drabinka/css/bookmarks.css

@@ -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;
+}

frontend/unlogged_user/_main page/pojedynczy_turniej/drabinka/index.html

@@ -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-->

frontend/unlogged_user/_main page/pojedynczy_turniej/drabinka/style.css

@@ -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;
+}

frontend/unlogged_user/_main page/pojedynczy_turniej/style.css

@@ -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 {

frontend/unlogged_user/_main page/pojedynczy_turniej/zapisy/index.html

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

frontend/unlogged_user/_main page/pojedynczy_turniej/zapisy/style.css

@@ -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;
+}

frontend/unlogged_user/_main page/style.css

@@ -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 {

frontend/unlogged_user/kontakt/style.css

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

frontend/unlogged_user/logowanie/index.html

@@ -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">
+            <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>
 
                 <!-- 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>
+            </div>
-                <br>
+
+            <div class="login_footer">
                 <span> Nie masz konta? <a href="rejestracja/index.html">Zajerestruj się</a></span>
             </div>
         </div>

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%;
+    }

frontend/unlogged_user/logowanie/rejestracja/index.html

@@ -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">
+                <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()">
-                    Zajerestruj
+                    ZAREJESTRUJ
                 </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>
             </div>
+
         </div>
 
     </div>
     <script type="text/javascript" src="myscript.js"></script>
+    <script type="text/javascript" src="toggle.js"></script>
 
 </body>
 

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', {

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 {
+* {
+    /* border: 2px solid red; */
+    box-sizing: border-box;
+    text-align: center;
+}
+
+    /*layer 1*/
+    .container {
         display: flex;
         height: 100vh;
         justify-content: center;
         align-items: center;
-}
+    }
 
-.form {
+        /*Layer 2*/
+        .form {
             width: 50%;
-    height: 40%;
+            height: 60%;
             background-color: #EBEBEB;
             display: flex;
-    ;
+            flex-wrap: wrap;
+
             justify-content: 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%;
+                    display: inline-block;
+                    border: 1px solid;
+                    border-radius: 28px;
+                    margin: 3% 25% 5% 25%;
+
+                    /*Inside*/
+                    padding: 15px 15px;
                     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;
+                }
+
+/*##### 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;
 }

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");
+});

frontend/unlogged_user/logowanie/style.css

@@ -1,41 +1,22 @@
-/* * {
+@import "../../_global/style.css";
-    border: 2px solid red;
-    padding: 0;
-    margin: 0;
-} */
-
-input {
-    text-align: left;
-}
 
+/*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 {
+/*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 {
     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;
+    /*Outside*/
-    border-radius: 28px;
+    width: 50%;
     display: inline-block;
     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;
-    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;
+}
+

frontend/unlogged_user/ranking/style.css

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