dan/arcade-machine
1
0
Fork 0
mirror of https://github.com/danbulant/arcade-machine synced 2026-06-18 14:01:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed background img to new img class so that opacity only works on img and not header

Browse source 
Added templates for GAME1, GAME2
hitting arrow at the end of selection now returns it back to first position
This commit is contained in:
KryvasCZ 2023-02-23 16:22:12 +02:00
parent 8238365b04
commit c27f0d8f26
2 changed files with 86 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ui/index.html
View file

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

124
ui/style.css
View file

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