szybkie commity

assets/css/baza.css

@@ -94,7 +94,8 @@ button {
     padding-right: .5rem;
 }
 
-button:hover {
+button:hover,
+input[type="submit"]:hover {
     cursor: pointer;
     color: var(--colorText);
     background-color: var(--colorOverlay0);
@@ -105,7 +106,8 @@ button:hover {
     );
 }
 
-button:active {
+button:active,
+input[type="submit"]:active {
     background-color: var(--colorSurface1);
     background: linear-gradient(180deg,
         var(--colorSurface1) 0%,

assets/css/liczby.css

@@ -86,8 +86,32 @@ a:hover {
 
 
 
+/* Formsy */
+fieldset {
+    border: none;
+}
+
+legend {
+    font-size: 1rem;
+    font-weight: bold;
+}
+
+input[type="submit"] {
+    text-align: center;
+    font-size: 1.5rem;
+    padding: .3rem;
+    margin: auto;
+    display: block;
+}
+
+input[type="number"] {
+    width: 100%;
+    font-size: 22pt;
+}
+
+
 /* Animacje */
-.wsun {
+.wsun, .dwsun .okno {
     animation: Wsun 0.6s ease-in;
 }
 
@@ -102,16 +126,19 @@ a:hover {
     }
 }
 
-.wysun {
+.wysun, .dwysun .okno {
     animation: Wysun 1.5s ease-in;
+    display: none;
 }
 
 @keyframes Wysun {
     0% {
+        display: initial;
         bottom: 0;
         opacity: 1;
     }
     100% {
+        display: initial;
         bottom: -40%;
         opacity: 0;
     }
@@ -132,13 +159,16 @@ a:hover {
 
 .dwysun {
     animation: DWysun 0.6s ease-in;
+    display: none;
 }
 
 @keyframes DWysun {
     0% {
+        display: initial;
         opacity: 1;
     }
     100% {
+        display: initial;
         opacity: 0;
     }
 }
@@ -154,13 +184,21 @@ a:hover {
     background-color: rgba(30, 30, 46, 0.9);
     width: 100vw;
     height: calc(100vh - 3rem);
+    display: flex;
 }
 
 .okno {
     padding: .5rem;
+    padding-bottom: 1rem;
+    border: .4rem solid var(--colorSurface1);
+    border-right-color: var(--colorSurface0);
+    border-bottom-color: var(--colorSurface0);
     background: var(--colorMantle);
     margin: auto;
     width: 40rem;
-    height: 20rem;
 }
 
+.okno h2 {
+    margin-top: .3rem;
+    margin-left: .3rem;
+}

liczby.html

@@ -27,15 +27,40 @@
             <hr>
 
             <h4>Źródło liczby</h4>
-            <input type="radio" id="l-manual"><label for="l-manual">Asystent (wprowadzone manualnie)</label>
-            <input type="radio" id="l-auto"><label for="l-auto">Komputer (generowane automatycznie)</label>
+            <fieldset>
+                <input type="radio" id="l-manual" name="losowosc" value="czlowiek"><label for="l-manual">Asystent (wprowadzone manualnie)</label>
+                <input type="radio" id="l-auto" name="losowosc" value="komputer"><label for="l-auto">Komputer (generowane automatycznie)</label>
+            </fieldset>
             <br>
             <br>
 
             <h4>Zasady zakładu</h4>
-            <label for="kwota">Kwota zakładu:</label><input type="range" id="kwota" min="500" step="500" max="100000">
+            <fieldset>
+                <label for="kwota">Kwota zakładu:</label><input type="range" id="kwota" min="500" step="500" max="100000">
+            </fieldset>
 
-            <input type="submit">
+            <br>
+            <br>
+            <input type="submit" value="Zagraj">
+        </form>
+    </div>
+
+    <div id="liczba" class="dialog dukryj">
+        <form class="okno">
+            <h2>Liczba</h2>
+            <hr>
+            Upewnij się, że osoba grająca nie widzi ekranu i wprowadź liczbę z zakresu 1-1000:
+            <br>
+            <br>
+
+            <fieldset>
+                <legend>Liczba:</legend>
+                <input type="number" id="liczba" min="1" max="1000" placeholder="Przykładowa liczba: 684" required>
+            </fieldset>
+
+            <br>
+            <br>
+            <input type="submit" value="Zapisz liczbę">
         </form>
     </div>
 </body>