mirror of
https://github.com/danbulant/arcade-machine
synced 2026-05-19 04:18:51 +00:00
Improved styles
This commit is contained in:
Vaclav Siml
parent
6b77021ebf
commit
2f151ef0e9
2 changed files with 174 additions and 139 deletions
|
|
@ -5,43 +5,44 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Document</title>
|
||||
<title>UI</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src ="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()">
|
||||
<img src="JPGS/sound-voltex-iii-gravity-wars-1.png" alt="">
|
||||
<h1 class="sex">Sound Voltex III: Gravity Wars</h1>
|
||||
</button> <!--SDVX3-->
|
||||
<button class="move" type="button" id="sdvx4-button" onclick="vers=4;sdvx()">
|
||||
</button> <!--SDVX3-->
|
||||
<button class="move" type="button" id="sdvx4-button" onclick="vers=4;sdvx()">
|
||||
<img src="JPGS/maxresdefault3.jpg" alt="">
|
||||
<h1 class="sex">SDVX4</h1>
|
||||
</button> <!--SDVX4-->
|
||||
<button class="move" type="button" id="sdvx5-button" onclick="vers=5;sdvx()">
|
||||
<h1 class="sex">SDVX4</h1>
|
||||
</button> <!--SDVX4-->
|
||||
<button class="move" type="button" id="sdvx5-button" onclick="vers=5;sdvx()">
|
||||
<img src="JPGS/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="sdvx7-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-->
|
||||
|
||||
<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="sdvx7-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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const prvnihra = [...document.querySelectorAll("button")]
|
||||
// for (i = 0; i < prvnihra.length; i++) {
|
||||
|
|
@ -92,33 +93,33 @@
|
|||
const { execFile, exec } = require('child_process');
|
||||
function sdvx(){
|
||||
console.log("promenna",vers);
|
||||
switch (vers) {
|
||||
case 3:
|
||||
switch (vers) {
|
||||
case 3:
|
||||
|
||||
execFile(AsphyxiaPath);
|
||||
execFile(SDVX3Path);
|
||||
execFile(AsphyxiaPath);
|
||||
execFile(SDVX3Path);
|
||||
setTimeout(function(){
|
||||
exec("taskkill /im " + browser)
|
||||
},1200)
|
||||
//console.log(vers);
|
||||
break;
|
||||
case 4:
|
||||
execFile(AsphyxiaPath);
|
||||
execFile(SDVX4Path);
|
||||
//console.log(vers);
|
||||
break;
|
||||
case 4:
|
||||
execFile(AsphyxiaPath);
|
||||
execFile(SDVX4Path);
|
||||
setTimeout(function(){
|
||||
exec("taskkill /im " + browser)
|
||||
},1200)
|
||||
break;
|
||||
case 5:
|
||||
execFile(AsphyxiaPath);
|
||||
execFile(SDVX5Path);
|
||||
break;
|
||||
case 5:
|
||||
execFile(AsphyxiaPath);
|
||||
execFile(SDVX5Path);
|
||||
setTimeout(function(){
|
||||
exec("taskkill /im " + browser)
|
||||
},1200)
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
232
ui/style.css
232
ui/style.css
|
|
@ -1,126 +1,160 @@
|
|||
.container{
|
||||
.container {
|
||||
display: grid;
|
||||
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: 90vw;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-gap: 15px;
|
||||
margin-top: 10px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: 2rem;
|
||||
margin: 0 auto;
|
||||
/*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 */
|
||||
}
|
||||
.move{
|
||||
box-sizing: border-box;
|
||||
/* ulehci zivot */
|
||||
}
|
||||
|
||||
.move {
|
||||
display: flex;
|
||||
color:rgb(15, 12, 12, 0.88);
|
||||
color: rgb(15, 12, 12, 0.88);
|
||||
border: 3px solid black;
|
||||
font-family:Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sex{
|
||||
|
||||
.sex {
|
||||
|
||||
opacity: 0;
|
||||
margin-bottom: 110px;
|
||||
bottom: 110px;
|
||||
z-index: 1;
|
||||
transition: opacity 1s, margin-bottom 0.8s;
|
||||
transition: opacity 1s, bottom 0.8s;
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#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{
|
||||
#sdvx3-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{
|
||||
}
|
||||
|
||||
#sdvx3-button img {
|
||||
content: "";
|
||||
object-fit: cover;
|
||||
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
@keyframes blik {
|
||||
0% {
|
||||
box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
|
||||
}
|
||||
#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;
|
||||
}
|
||||
@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;
|
||||
}
|
||||
|
||||
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, 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;
|
||||
}
|
||||
Loading…
Reference in a new issue