ADD core drabinki z bazą wizualizacji

ADD collapsible dla widoku całej drabinki
ADD podział style.css na collapsible.css dla zwijania drabinki, li.css dla tworzenia drabinki i round.css do przejść między poziomami drabinki

frontend/drabinka/css/collapsible.css

@@ -0,0 +1,42 @@
+/*COLLAPSIBLE*/
+
+/*Wersja zwinięta*/
+.collapsible {
+    background-color: #777;
+    color: white;
+    cursor: pointer;
+    padding: 18px;
+    /*szerokość zwiniętego boxa*/
+    width: 100%;
+    border: none;
+    text-align: left;
+    outline: none;
+    font-size: 15px;
+}
+
+.active, .collapsible:hover {
+    background-color: #555;
+}
+
+.collapsible:after {
+    content: '\002B';
+    color: white;
+    font-weight: bold;
+    float: right;
+    margin-left: 5px;
+}
+
+.active:after {
+    content: "\2212";
+}
+
+/*Wersja rozwinięta*/
+.content {
+    padding: 0 18px;
+    max-height: 0;
+    /*szerokość drabinki*/
+    width: 75%;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: #f1f1f1;
+}

frontend/drabinka/css/li.css

@@ -0,0 +1,36 @@
+li.game {
+    padding-left: 20px;
+}
+
+li.game.winner {
+    font-weight: bold;
+}
+
+/*Tekst wewnątrz boxa*/
+li.game span {
+    float: right;
+    margin-right: 10px;
+}
+
+/*Górna linia drabinki*/
+li.game-top {
+    border-bottom: 1px solid #aaa;
+}
+
+/*Róznica wysokości między rundami*/
+li.game-spacer {
+    border-right: 1px solid #aaa;
+    min-height: 40px;
+}
+
+/*Dolna linia drabinki*/
+li.game-bottom {
+    border-top: 1px solid #aaa;
+}
+
+/*Box drużyny*/
+li.teambox {
+    border-radius: 25px;
+    background-color: #FFFFFF;
+    padding: 10px;
+}

frontend/drabinka/css/round.css

@@ -0,0 +1,22 @@
+
+.round {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 200px;
+    list-style: none;
+    padding: 0;
+}
+
+.round .spacer {
+    flex-grow: 1;
+}
+
+.round .spacer:first-child,
+.round .spacer:last-child {
+    flex-grow: .5;
+}
+
+.round .game-spacer {
+    flex-grow: 1;
+}

frontend/drabinka/css/style.css

@@ -1,7 +1,19 @@
+@import "li.css";
+@import "collapsible.css";
+@import "round.css";
+
+
 /*
  *  Flex Layout Specifics
 */
 
+body {
+  background-color: #C0C0C0;
+  font-family: sans-serif;
+  font-size: small;
+  padding: 10px;
+  line-height: 1.4em;
+}
 
 img {
   width: 150px;
@@ -43,7 +55,7 @@ header {
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-between;
-  background-color: #0f64f2;
+  background-color: #065FD4;
   margin: auto;
   padding-top: 10px;
   padding-bottom: 10px;
@@ -52,8 +64,6 @@ header {
 
 }
 
-
-
 header>p {
   text-align: center;
   line-height: 0;
@@ -78,28 +88,6 @@ header>p {
   align-items: center;
 }
 
-.round {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 200px;
-  list-style: none;
-  padding: 0;
-}
-
-.round .spacer {
-  flex-grow: 1;
-}
-
-.round .spacer:first-child,
-.round .spacer:last-child {
-  flex-grow: .5;
-}
-
-.round .game-spacer {
-  flex-grow: 1;
-}
-
 /*
  *  Flex Layout Specifics
 */
@@ -108,60 +96,3 @@ main {
   flex-direction: row;
 }
 
-.round {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 200px;
-  list-style: none;
-  padding: 0;
-}
-
-.round .spacer {
-  flex-grow: 1;
-}
-
-.round .spacer:first-child,
-.round .spacer:last-child {
-  flex-grow: .5;
-}
-
-.round .game-spacer {
-  flex-grow: 1;
-}
-
-/*
- *  General Styles
-*/
-body {
-  font-family: sans-serif;
-  font-size: small;
-  padding: 10px;
-  line-height: 1.4em;
-}
-
-li.game {
-  padding-left: 20px;
-}
-
-li.game.winner {
-  font-weight: bold;
-}
-
-li.game span {
-  float: right;
-  margin-right: 5px;
-}
-
-li.game-top {
-  border-bottom: 1px solid #aaa;
-}
-
-li.game-spacer {
-  border-right: 1px solid #aaa;
-  min-height: 40px;
-}
-
-li.game-bottom {
-  border-top: 1px solid #aaa;
-}

frontend/drabinka/index.html

@@ -5,14 +5,17 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Padel Tournaments System</title>
-    <link rel="stylesheet" href="style.css">
+
-    <script src="https://cdn.jsdelivr.net/npm/less@4"></script>
+    <link rel="stylesheet" href="css/style.css">
+
+<!--    TODO Zakomentowałem, bo może useless-->
+<!--    <script src="https://cdn.jsdelivr.net/npm/less@4"></script>-->
 </head>
 
 <body>
     <header>
-        <img src="../logo_padel.jpeg">
+        <a href="../index.html"><img src="../logo_padel.jpeg" alt=""></a>
         <a href="#">Wiadomości</a>
         <a href="#">Kalendarz turniejów</a>
         <a href="#">Ranking</a>
@@ -23,111 +26,184 @@
     </header>
     <div class="container">
         <h1>Padel tournament</h1>
+
+        <button type="button" class="collapsible">Drabinka Główna</button>
+        <div class="content">
             <main id="tournament">
+    <!--            ROUND 1-->
                 <ul class="round round-1">
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Jan <span>79</span></li>
+                    <li class="game game-top teambox winner ">
+                        Jan <span>21</span><br> Paweł <span>37</span>
+                    </li>
+
+
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Piotrek <span>48</span></li>
+                    <li class="game game-bottom teambox">
+                        Piotrek <span>48</span><br> Artur <span>11</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Czarek <span>84</span></li>
+                    <li class="game game-top teambox winner">
+                        Czarek <span>84</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Kasia <span>72</span></li>
+                    <li class="game game-bottom teambox">
+                        Kasia <span>72</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top ">Jerzy <span>55</span></li>
+                    <li class="game game-top teambox">
+                        Jerzy <span>55</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom winner">Andrzej <span>68</span></li>
+                    <li class="game game-bottom teambox winner">
+                        Andrzej <span>68</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Mateusz <span>64</span></li>
+                    <li class="game game-top teambox winner">
+                        Mateusz <span>64</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Lukasz <span>44</span></li>
+
+                    <li class="game game-bottom teambox">
+                        Lukasz <span>44</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Arek <span>54</span></li>
+                    <li class="game game-top teambox winner">
+                        Arek <span>54</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Marek <span>52</span></li>
+                    <li class="game game-bottom teambox">
+                        Marek <span>52</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Alfred <span>65</span></li>
+                    <li class="game game-top teambox winner">
+                        Alfred <span>65</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Amir <span>54</span></li>
+                    <li class="game game-bottom teambox">
+                        Amir <span>54</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Ambrozy <span>67</span></li>
+                    <li class="game game-top teambox winner">
+                        Ambrozy <span>67</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Fabian <span>63</span></li>
+                    <li class="game game-bottom teambox">
+                        Fabian <span>63</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Fryderyk <span>73</span></li>
+                    <li class="game game-top teambox winner">
+                        Fryderyk <span>73</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Gracjan <span>61</span></li>
+                    <li class="game game-bottom teambox">
+                        Gracjan <span>61</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
                 </ul>
+    <!--            ROUND 2-->
                 <ul class="round round-2">
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Jan <span>82</span></li>
+                    <li class="game game-top teambox winner">
+                        Jan <span>82</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Czarek <span>56</span></li>
+                    <li class="game game-bottom teambox">
+                        Czarek <span>56</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Andrzej <span>74</span></li>
+                    <li class="game game-top teambox winner">
+                        Andrzej <span>74</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Mateusz <span>57</span></li>
+                    <li class="game game-bottom teambox">
+                        Mateusz <span>57</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top ">Arek <span>48</span></li>
+                    <li class="game game-top teambox">
+                        Arek <span>48</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom winner">Alfred <span>70</span></li>
+                    <li class="game game-bottom teambox winner">
+                        Alfred <span>70</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top ">Ambrozy <span>50</span></li>
+                    <li class="game game-top teambox">
+                        Ambrozy <span>50</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom winner">Fryderyk <span>66</span></li>
+                    <li class="game game-bottom teambox winner">
+                        Fryderyk <span>66</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
                 </ul>
+<!--                ROUND 3-->
                 <ul class="round round-3">
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Jan <span>77</span></li>
+                    <li class="game game-top teambox winner">
+                        Jan <span>77</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Andrzej <span>69</span></li>
+                    <li class="game game-bottom teambox">
+                        Andrzej <span>69</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top ">Alfred <span>61</span></li>
+                    <li class="game game-top teambox">
+                        Alfred <span>61</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom winner">Fryderyk <span>71</span></li>
+                    <li class="game game-bottom teambox winner">
+                        Fryderyk <span>71</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
                 </ul>
+<!--                ROUND 4-->
                 <ul class="round round-4">
                     <li class="spacer">&nbsp;</li>
 
-                <li class="game game-top winner">Jan <span>85</span></li>
+                    <li class="game game-top teambox winner">
+                        Jan <span>85</span>
+                    </li>
                     <li class="game game-spacer">&nbsp;</li>
-                <li class="game game-bottom ">Frederyk <span>63</span></li>
+                    <li class="game game-bottom teambox">
+                        Frederyk <span>63</span>
+                    </li>
 
                     <li class="spacer">&nbsp;</li>
                 </ul>
-    </div>
             </main>
+        </div>
+    </div>
+
+    <script type="text/javascript" src="./myscript.js"></script>
 </body>
 
 </html>

frontend/drabinka/myscript.js

@@ -0,0 +1,14 @@
+var coll = document.getElementsByClassName("collapsible");
+var i;
+
+for (i = 0; i < coll.length; i++) {
+    coll[i].addEventListener("click", function() {
+        this.classList.toggle("active");
+        var content = this.nextElementSibling;
+        if (content.style.maxHeight){
+            content.style.maxHeight = null;
+        } else {
+            content.style.maxHeight = content.scrollHeight + "px";
+        }
+    });
+}

frontend/index.html

@@ -5,18 +5,18 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Strona główna</title>
+    <title>Padel Tournaments System</title>
     <link href="style.css" rel="stylesheet">
 </head>
 
 <body>
     <header>
-        <img src="logo_padel.jpeg">
+        <a href="./index.html"><img src="logo_padel.jpeg"></a>
-        <a href="#">Wiadomości</a>
+<!--        <a href="#">Wiadomości</a>-->
         <a href="#">Kalendarz turniejów</a>
         <a href="#">Ranking</a>
         <a href="#">Wyniki</a>
-        <a href="#">Kontakt</a>
+<!--        <a href="#">Kontakt</a>-->
         <form action="logowanie/index.html">
             <input class="loginn" type="submit" value="Logowanie" />
         </form>

frontend/logowanie/index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Paddle tournament system</title>
+    <title>Padel Tournaments System</title>
     <link href="style.css" rel="stylesheet">
 </head>
 

frontend/panel_organizatora/index.html

@@ -1,16 +1,14 @@
 <html>
 
 <head>
-    <title>Todo App</title>
+    <title>Padel Tournaments System</title>
     <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
 </head>
 
-<!-- komentarz -->
-
 <body>
     <header>
-        <img src="../logo_padel.jpeg">
+        <a href="../index.html"><img src="../logo_padel.jpeg"></a>
         <a href="#">Wiadomości</a>
         <a href="#">Kalendarz turniejów</a>
         <a href="#">Ranking</a>
@@ -42,11 +40,11 @@
                 }
 
                 button.edit {
-                    padding: 10;
+                    padding: 10px;
                 }
 
                 button.delete {
-                    padding: 10;
+                    padding: 10px;
                 }
 
                 button {

frontend/rejestracja/index.html

@@ -5,10 +5,9 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Paddle tournament system</title>
+    <title>Padel Tournaments System</title>
     <link href="style.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
-
 </head>
 
 <body>
@@ -43,15 +42,14 @@
                 <input placeholder="Potwierdź hasło" type="password" id="password2" name="password">
                 <i class="bi bi-eye-slash" id="togglePassword2"></i>
 
-
-                <center>
                 <form action="#">
                     <input class="myButton" type="submit" value="Zarejestruj" id="regsubmit" />
                 </form>
-                </center>
+
                 <br>
                 <a href="#">Zapomniałeś hasła?</a>
                 <br>
+
                 <span> Masz już konto? <a href="../logowanie/index.html">Zaloguj się</a></span>
             </div>
         </div>

frontend/rejestracja/myscript.js

@@ -17,18 +17,18 @@ form.addEventListener('submit', function (e) {
     e.preventDefault();
 });
 
-<<<<<<< HEAD
+// <<<<<<< HEAD
 // var token = "";
 // // document.getElementById("loginButton").addEventListener("click", function () {
 // //     document.getElementById("login").style.display = "block";
 // // });
-=======
+// // =======
-//REST API
+// //REST API
-var token = "";
+// var token = "";
-document.getElementById("loginButton").addEventListener("click", function () {
+// document.getElementById("loginButton").addEventListener("click", function () {
-    document.getElementById("login").style.display = "block";
+//     document.getElementById("login").style.display = "block";
-});
+// });
->>>>>>> b44b5f1fc14af7c8da4ca602072af953974b49af
+// >>>>>>> b44b5f1fc14af7c8da4ca602072af953974b49af
 
 // // document.getElementById("regButton").addEventListener("click", function () {
 // //     document.getElementById("reg").style.display = "block";

frontend/zalogowany_organizator/index.html

@@ -5,13 +5,13 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Strona główna</title>
+    <title>Padel Tournaments System</title>
     <link href="style.css" rel="stylesheet">
 </head>
 
 <body>
     <header>
-        <img src="../logo_padel.jpeg">
+        <a href="../index.html"><img src="../logo_padel.jpeg"></a>
         <a href="#">Wiadomości</a>
         <a href="#">Kalendarz turniejów</a>
         <a href="#">Ranking</a>