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

Improved styles

Browse source
This commit is contained in:
Vaclav Siml 2023-02-23 22:01:55 +01:00
parent 6b77021ebf
commit 2f151ef0e9
2 changed files with 174 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
ui/index.html
View file

@ -5,43 +5,44 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Document</title> <title>UI</title>
</head> </head>
<body> <body>
<script src ="Vars.js"> <script src ="Vars.js">
</script> <!--Loadne Vars.js--> </script> <!--Loadne Vars.js-->
<div class="container"> <div class="hlavnidiv">
<div class="container">
<button class="move" type="button" id="sdvx3-button" onclick="vers=3;sdvx()"> <button class="move" type="button" id="sdvx3-button" onclick="vers=3;sdvx()">
<img src="JPGS/sound-voltex-iii-gravity-wars-1.png" alt=""> <img src="JPGS/sound-voltex-iii-gravity-wars-1.png" alt="">
<h1 class="sex">Sound Voltex III: Gravity Wars</h1> <h1 class="sex">Sound Voltex III: Gravity Wars</h1>
</button> <!--SDVX3--> </button> <!--SDVX3-->
<button class="move" type="button" id="sdvx4-button" onclick="vers=4;sdvx()"> <button class="move" type="button" id="sdvx4-button" onclick="vers=4;sdvx()">
<img src="JPGS/maxresdefault3.jpg" alt=""> <img src="JPGS/maxresdefault3.jpg" alt="">
<h1 class="sex">SDVX4</h1> <h1 class="sex">SDVX4</h1>
</button> <!--SDVX4--> </button> <!--SDVX4-->
<button class="move" type="button" id="sdvx5-button" onclick="vers=5;sdvx()"> <button class="move" type="button" id="sdvx5-button" onclick="vers=5;sdvx()">
<img src="JPGS/SDVX5scaled.jpg" alt=""> <img src="JPGS/SDVX5scaled.jpg" alt="">
<h1 class="sex">SDVX5</h1> <h1 class="sex">SDVX5</h1>
</button> </button>
<button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()"> <button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()">
<img src="" alt=""> <img src="" alt="">
<h1 class="sex">SDVX6</h1> <h1 class="sex">SDVX6</h1>
</button> <!--SDVX5--> </button> <!--SDVX5-->
<button class="move" type="button" id="sdvx7-button" onclick="vers=5;sdvx()"> <button class="move" type="button" id="sdvx7-button" onclick="vers=5;sdvx()">
<img src="" alt=""> <img src="" alt="">
<h1 class="sex">GAME1</h1> <h1 class="sex">GAME1</h1>
</button> <!--SDVX5--> </button> <!--SDVX5-->
<button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()"> <button class="move" type="button" id="sdvx6-button" onclick="vers=5;sdvx()">
<img src="" alt=""> <img src="" alt="">
<h1 class="sex">GAME2</h1> <h1 class="sex">GAME2</h1>
</button> <!--SDVX5--> </button> <!--SDVX5-->
</div>
</div> </div>
<script> <script>
const prvnihra = [...document.querySelectorAll("button")] const prvnihra = [...document.querySelectorAll("button")]
// for (i = 0; i < prvnihra.length; i++) { // for (i = 0; i < prvnihra.length; i++) {
@ -92,33 +93,33 @@
const { execFile, exec } = require('child_process'); const { execFile, exec } = require('child_process');
function sdvx(){ function sdvx(){
console.log("promenna",vers); console.log("promenna",vers);
switch (vers) { switch (vers) {
case 3: case 3:
execFile(AsphyxiaPath); execFile(AsphyxiaPath);
execFile(SDVX3Path); execFile(SDVX3Path);
setTimeout(function(){ setTimeout(function(){
exec("taskkill /im " + browser) exec("taskkill /im " + browser)
},1200) },1200)
//console.log(vers); //console.log(vers);
break; break;
case 4: case 4:
execFile(AsphyxiaPath); execFile(AsphyxiaPath);
execFile(SDVX4Path); execFile(SDVX4Path);
setTimeout(function(){ setTimeout(function(){
exec("taskkill /im " + browser) exec("taskkill /im " + browser)
},1200) },1200)
break; break;
case 5: case 5:
execFile(AsphyxiaPath); execFile(AsphyxiaPath);
execFile(SDVX5Path); execFile(SDVX5Path);
setTimeout(function(){ setTimeout(function(){
exec("taskkill /im " + browser) exec("taskkill /im " + browser)
},1200) },1200)
break; break;
default: default:
break; break;
} }
} }
</script> </script>
</body> </body>

212
ui/style.css
View file

@ -1,28 +1,35 @@
.container{ .container {
display: grid; display: grid;
height: 85vw; grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2, 1fr);
grid-template-rows: repeat(2,1fr); grid-gap: 15px;
grid-gap: 15px; margin-top: 10px;
margin-top: 10px; height: 100vh;
width: 100vw;
} padding: 2rem;
body{
min-height: 100vh;
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;
} }
body {
margin: 0;
overflow: hidden;
}
* { * {
box-sizing: border-box; /* ulehci zivot */ box-sizing: border-box;
} /* ulehci zivot */
.move{ }
.move {
display: flex; display: flex;
color:rgb(15, 12, 12, 0.88); color: rgb(15, 12, 12, 0.88);
border: 3px solid black; border: 3px solid black;
font-family:Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@ -31,12 +38,13 @@ body{
} }
.sex{ .sex {
opacity: 0; opacity: 0;
margin-bottom: 110px; bottom: 110px;
z-index: 1; z-index: 1;
transition: opacity 1s, margin-bottom 0.8s; transition: opacity 1s, bottom 0.8s;
position: relative;
} }
@ -44,83 +52,109 @@ body{
#sdvx3-button{ #sdvx3-button {
position: relative; position: relative;
border-radius: 15px; border-radius: 15px;
} }
#sdvx3-button img {
content: ""; #sdvx3-button img {
object-fit: cover; content: "";
opacity: 0.8; object-fit: cover;
position: absolute;
top: 0; position: absolute;
left: 0; top: 0;
right: 0; left: 0;
bottom: 0; right: 0;
width: 100%; bottom: 0;
height: 100%; width: 100%;
z-index: 0; height: 100%;
border-radius: 10px; z-index: 0;
} border-radius: 10px;
#sdvx4-button{ }
#sdvx4-button {
position: relative; position: relative;
border-radius: 15px; border-radius: 15px;
} }
#sdvx4-button img{
content: "";
object-fit: cover; #sdvx4-button img {
opacity: 0.8; content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
border-radius: 15px;
} object-fit: cover;
#sdvx5-button{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 0;
border-radius: 15px;
}
#sdvx5-button {
position: relative; position: relative;
border-radius: 15px; border-radius: 15px;
} }
#sdvx5-button img{
content: "";
object-fit: cover; #sdvx5-button img {
opacity: 0.8; content: "";
position: absolute;
top: 0; object-fit: cover;
left: 0;
right: 0; position: absolute;
bottom: 0; top: 0;
width: 100%; left: 0;
height: 100%; right: 0;
z-index: 0; bottom: 0;
border-radius: 15px; width: 100%;
height: 100%;
z-index: 0;
border-radius: 15px;
}
@keyframes blik {
0% {
box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
} }
@keyframes blik {
0% { 50% {
box-shadow: 0 0 0 3px rgba(255, 254, 254,0); box-shadow: 0 0 0 3px rgba(255, 254, 254, 1);
}
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; 100% {
animation-iteration-count: infinite; box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
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;
} }
}
.move:focus {
outline: none;
animation-iteration-count: infinite;
animation-name: blik;
animation-duration: 1.4s;
}
.move:focus h1 {
transition: opacity 1s, bottom 0.8s;
z-index: 1;
opacity: 1;
bottom: 80px;
position: relative;
}
.move:focus img {
transition: opacity 0.6s;
opacity: 0.7;
}
.move img {
opacity: 1;
}
.hlavnidiv {
aspect-ratio: 3/4;
background-image: url("JPGS/BACKGROUND GOOD.png");
background-size: cover;
}