dan/arcade-machine
1
0
Fork 0
mirror of https://github.com/danbulant/arcade-machine synced 2026-07-05 11:00:36 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Changed background

Browse source 
Added Animations to everything
This commit is contained in:
KryvasCZ 2023-02-23 18:31:21 +02:00
parent a577ed41eb
commit 3d826f6380
4 changed files with 40 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
ui/BACKGROUND GOOD.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 219 KiB

BIN
ui/gray background for UI with gradient and tiny bit of metallic.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.8 MiB

8
ui/index.html
View file

@ -53,21 +53,21 @@
<script> <script>
var i = 0; var i = 0;
document.addEventListener("keydown",function(sex2){ document.addEventListener("keydown",function(sex2){
if (sex2.code === "ArrowRight"){ if (sex2.code === "KeyD"){
if(i>=prvnihra.length - 1) i = -1; if(i>=prvnihra.length - 1) i = -1;
i++; i++;
prvnihra[i].focus(); prvnihra[i].focus();
console.log("prava", i); console.log("right", i);
console.log("array je", prvnihra.length); console.log("array je", prvnihra.length);
} }
}) })
document.addEventListener("keydown",function(sex3){ document.addEventListener("keydown",function(sex3){
if(sex3.code === "ArrowUp"){ if(sex3.code === "KeyA"){
if(i<=0) i=prvnihra.length if(i<=0) i=prvnihra.length
i--; i--;
prvnihra[i].focus() prvnihra[i].focus()
console.log("leva", i); console.log("left", i);
} }
if (sex3.code === "KeyE"){ if (sex3.code === "KeyE"){
console.log(document.activeElement); console.log(document.activeElement);

40
ui/style.css
View file

@ -11,7 +11,9 @@ body{
min-height: 100vh; min-height: 100vh;
max-width: 90vw; max-width: 90vw;
margin: 0 auto; margin: 0 auto;
background-color: rgb(56, 55, 55, 1); /*background-color: rgb(56, 55, 55, 1);*/
background-image: url(BACKGROUND\ GOOD.png);
background-size: cover;
} }
* { * {
box-sizing: border-box; /* ulehci zivot */ box-sizing: border-box; /* ulehci zivot */
@ -30,13 +32,18 @@ body{
} }
.sex{ .sex{
opacity: 0;
margin-bottom: 110px;
z-index: 1; z-index: 1;
opacity: 0.91; transition: opacity 1s, margin-bottom 0.8s;
} }
.sex:focus{
border:10px solid red;
}
#sdvx3-button{ #sdvx3-button{
position: relative; position: relative;
border-radius: 15px; border-radius: 15px;
@ -94,3 +101,26 @@ body{
z-index: 0; z-index: 0;
border-radius: 15px; border-radius: 15px;
} }
@keyframes blik {
0% {
box-shadow: 0 0 0 3px rgba(255, 254, 254,0);
}
50% {
box-shadow: 0 0 0 3px rgba(255, 254, 254,1);
}
100% {
box-shadow: 0 0 0 3px rgba(255, 254, 254,0);
}
}
.move:focus {
outline: none;
animation-iteration-count: infinite;
animation-name: blik;
animation-duration: 1.4s;
}
.move:focus h1{
transition: opacity 1s, margin-bottom 0.8s;
z-index: 1;
opacity: 1;
margin-bottom: 80px;
}