Initial commit
This commit is contained in:
Alex
commit
bc474aa23a
GPG Key ID:
F92BA85F61F4C173
62
css/main.css
Normal file
62
css/main.css
Normal file
@ -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%);
|
||||
}
|
||||
}
|
||||
64
css/main.less
Normal file
64
css/main.less
Normal file
@ -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%);
|
||||
}
|
||||
}
|
||||
BIN
img/bg.jpg
Normal file
BIN
img/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 376 KiB |
34
index.html
Normal file
34
index.html
Normal file
@ -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>
|
||||
7
js/main.js
Normal file
7
js/main.js
Normal file
@ -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
Block a user