Initial commit
This commit is contained in:
commit
bc474aa23a
|
@ -0,0 +1,62 @@
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0px;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("../img/bg.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
color: #EEEEEE;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
body div.main {
|
||||||
|
width: 90%;
|
||||||
|
min-width: 600px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: rgba(20, 20, 20, 0.9);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
body div.main div {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
body div.main div.text {
|
||||||
|
margin-right: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
body div.main div.img {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
body div.main div img {
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
animation-name: showcase;
|
||||||
|
animation-duration: 18s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
@keyframes showcase {
|
||||||
|
0% {
|
||||||
|
transform: translateX(110%);
|
||||||
|
}
|
||||||
|
6%,
|
||||||
|
27% {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
34%,
|
||||||
|
100% {
|
||||||
|
transform: translateX(-110%);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,64 @@
|
||||||
|
@bg: rgba(20,20,20,0.9); // Red Green Blue Alpha (Transparency)
|
||||||
|
@text-color: #EEEEEE;
|
||||||
|
@font-size: 14px;
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
margin: 0px;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("../img/bg.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
color: @text-color;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
div.main {
|
||||||
|
width: 90%;
|
||||||
|
min-width: 600px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: @bg;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
border-radius: 10px;
|
||||||
|
div {
|
||||||
|
flex: 1;
|
||||||
|
&.text {
|
||||||
|
margin-right: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
&.img {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border-radius: 10px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
|
||||||
|
animation-name: showcase;
|
||||||
|
animation-duration: 18s;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes showcase {
|
||||||
|
0% {
|
||||||
|
transform: translateX(110%);
|
||||||
|
}
|
||||||
|
6%,27% {
|
||||||
|
transform: translateX(0%);
|
||||||
|
}
|
||||||
|
34%,100% {
|
||||||
|
transform: translateX(-110%);
|
||||||
|
}
|
||||||
|
}
|
Binary file not shown.
After Width: | Height: | Size: 376 KiB |
|
@ -0,0 +1,34 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<div class="text">
|
||||||
|
<h1>Welcome to <b>cherry's Metrostroi Server!</b></h1>
|
||||||
|
<p>This server does <u>not</u> require driving exams.</p>
|
||||||
|
<ul>
|
||||||
|
<li>Admins are always right</li>
|
||||||
|
<li>No griefing, trolling, spamming etc.</li>
|
||||||
|
<li>Only drive on the right side</li>
|
||||||
|
<li>Only use trains with active UAVA</li>
|
||||||
|
<li>Building custom trains is only allowed with admin permission</li>
|
||||||
|
<li>No advertisements</li>
|
||||||
|
<li>No insults</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="img">
|
||||||
|
<img style="animation-delay: -18s" src="img/1.jpg">
|
||||||
|
<img style="animation-delay: -12s"src="img/2.jpg">
|
||||||
|
<img style="animation-delay: -6s"src="img/3.jpg">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="userinfo">
|
||||||
|
<p>You are now joining on <b id="map">## MAPNAME ##</b> running <b id="gamemode">## GAMEMODE ##</b>.</p>
|
||||||
|
<p id="status">## STATUS ##</p>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
|
@ -0,0 +1,7 @@
|
||||||
|
function GameDetails( servername, serverurl, mapname, maxplayers, steamid, gamemode ) {
|
||||||
|
$( "#map" ).text(mapname);
|
||||||
|
$( "#gamemode" ).text(gamemode);
|
||||||
|
}
|
||||||
|
function SetStatusChanged(status) {
|
||||||
|
$( "#status" ).text(status);
|
||||||
|
}
|
Loading…
Reference in New Issue