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

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

42
ui/style.css
View file

@ -11,7 +11,9 @@ body{
min-height: 100vh;
max-width: 90vw;
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 */
@ -30,13 +32,18 @@ body{
}
.sex{
opacity: 0;
margin-bottom: 110px;
z-index: 1;
opacity: 0.91;
transition: opacity 1s, margin-bottom 0.8s;
}
.sex:focus{
border:10px solid red;
}
#sdvx3-button{
position: relative;
border-radius: 15px;
@ -93,4 +100,27 @@ body{
height: 100%;
z-index: 0;
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;
}