From c27f0d8f26a752b98dc5dae8b2cd871fff6d7f74 Mon Sep 17 00:00:00 2001
From: KryvasCZ <kryvas199@gmail.com>
Date: Thu, 23 Feb 2023 16:22:12 +0200
Subject: [PATCH] Changed background img to new img class so that opacity only
 works on img and not header Added templates for GAME1, GAME2 hitting arrow at
 the end of selection now returns it back to first position

---
 ui/index.html |  20 +++++++-
 ui/style.css  | 124 +++++++++++++++++++++++++++-----------------------
 2 files changed, 86 insertions(+), 58 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index 1cd8380..43850b5 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -12,17 +12,31 @@
 </script> <!--Loadne Vars.js-->
 <div class="container">
     <button class="move" type="button" id="sdvx3-button"  onclick="vers=3;sdvx()">
+        <img src="sound-voltex-iii-gravity-wars-1.png" alt="">
         <h1 class="sex">SDVX3</h1>    
     </button> <!--SDVX3--> 
     <button class="move" type="button" id="sdvx4-button" onclick="vers=4;sdvx()">
+        <img src="maxresdefault3.jpg" alt="">
         <h1 class="sex">SDVX4</h1>  
     </button> <!--SDVX4--> 
     <button class="move" type="button" id="sdvx5-button" onclick="vers=5;sdvx()">
+        <img src="SDVX5scaled.jpg" alt="">
         <h1 class="sex">SDVX5</h1>  
     </button>
     <button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()">
+        <img src="" alt="">
         <h1 class="sex">SDVX6</h1>  
     </button> <!--SDVX5--> 
+    <button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()">
+        <img src="" alt="">
+        <h1 class="sex">GAME1</h1>  
+    </button> <!--SDVX5--> 
+    <button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()">
+        <img src="" alt="">
+        <h1 class="sex">GAME2</h1>  
+    </button> <!--SDVX5--> 
+   
+    
 </div>
 
 
@@ -39,7 +53,8 @@
 <script>
     var i = 0;
     document.addEventListener("keydown",function(sex2){
-            if (sex2.code === "ArrowRight" && i<prvnihra.length - 1){
+            if (sex2.code === "ArrowRight"){
+            if(i>=prvnihra.length - 1) i = -1;    
             i++;
             prvnihra[i].focus();
             console.log("prava", i);
@@ -48,7 +63,8 @@
             
         })
     document.addEventListener("keydown",function(sex3){
-        if(sex3.code === "ArrowUp" && i>=1){
+        if(sex3.code === "ArrowUp"){
+            if(i<=0) i=prvnihra.length
             i--;
             prvnihra[i].focus()
             console.log("leva", i);
diff --git a/ui/style.css b/ui/style.css
index ee2e937..825bd7b 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -1,16 +1,17 @@
 .container{
     display: grid;
-    height: 100vw;
+    height: 85vw;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
    grid-gap: 15px;
    margin-top: 10px;
-
+   
 }
 body{
     min-height: 100vh;
-    max-width: 85vw;
+    max-width: 90vw;
     margin: 0 auto;
+    background-color: rgb(56, 55, 55, 1);
 }
 * {
     box-sizing: border-box; /* ulehci zivot */
@@ -23,62 +24,73 @@ body{
     justify-content: flex-end;
     align-items: center;
     flex-direction: column;
+    border-radius: 15px;
+    
+
 }
 
 .sex{
+    z-index: 1;
+    opacity: 0.91;
 }
-#sdvx3-button{
-position: relative;    
-    
-}
-#sdvx3-button::after{
-    content: "";
-    background-image: url(sound-voltex-iii-gravity-wars-1.png);   
-    background-size: cover;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-}
-#sdvx4-button{
-   position: relative;
-}
-#sdvx4-button::after{
-    content: "";
-    background-image: url(maxresdefault3.jpg);   
-    background-size: cover;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0
-}  
-#sdvx5-button{
-    position: relative;
-}
-#sdvx5-button::after{
-    content: "";
-    background-image: url(SDVX5scaled.jpg);   
-    background-size: cover;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-}  
+
 .sex:focus{
     border:10px solid red;
-}
\ No newline at end of file
+}
+#sdvx3-button{
+    position: relative;    
+    border-radius: 15px;
+    }
+    #sdvx3-button img {
+        content: "";
+        object-fit: cover;
+        opacity: 0.8;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        border-radius: 10px;
+    }
+#sdvx4-button{
+    position: relative;
+    border-radius: 15px;
+    }
+    #sdvx4-button img{
+         content: "";
+          
+        object-fit: cover;
+        opacity: 0.8;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        border-radius: 15px;
+        
+    }  
+#sdvx5-button{
+    position: relative;
+    border-radius: 15px;
+    }
+    #sdvx5-button img{
+        content: "";
+           
+        object-fit: cover;
+        opacity: 0.8;
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+        border-radius: 15px;
+    }  
\ No newline at end of file