starred/esx_core-esx-framework
1
0
Fork 0
mirror of https://github.com/esx-framework/esx_core.git synced 2026-09-04 08:13:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change the ui to make it better looking

Browse Source
This commit is contained in:
Benjamin Brasseur
2018-06-08 21:26:22 +02:00
parent 758b240881
commit 2cad01aa4c
8 changed files with 126 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__resource.lua
+2 -1
View File
@@ -27,8 +27,9 @@ ui_page 'html/ui.html'
files {
'html/ui.html',
'html/pdown.ttf',
'html/roboto.ttf',
'html/img/cursor.png',
'html/img/fleeca.png',
'html/css/app.css',
'html/scripts/app.js'
}
html/css/app.css
+92 -29
View File
@@ -1,49 +1,112 @@
@font-face {
font-family: pcdown;
src: url('pdown.ttf');
font-family: roboto;
src: url('../roboto.ttf');
}
body {
font-family: roboto;
width: 100%;
height: 100%;
overflow: hidden;
font-family: roboto;
}
#cursor {
position: absolute;
z-index: 999999;
display: none;
display: none;
}
#container{
position: absolute;
background: linear-gradient(#0c3b97,#3458ae);
height: 500px;
width: 600px;
top: 50%;
left: 50%;
margin: -250px 0 0 -300px;
cursor: default;
}
#header{
position: absolute;
display: block;
width: 100%;
height: 75px;
background: linear-gradient(#f5f5f5,#adadad);
}
#logo{
height: 55px;
margin: 10px;
}
#welcome-text{
font-size: 25px;
position: absolute;
top: 100px;
left: 50%;
width: 450px;
margin: 0 0 0 -225px;
color: white;
}
#menu {
position: relative;
top: 90%;
}
#menu {
position: absolute;
top: 50%;
left: 50%;
}
#menu {
display : flex;
flex-direction: column;
width : 500px;
height : 150px;
margin-top : -75px;
margin-left: -250px;
display: flex;
flex-direction: column;
height: 150px;
margin: -150px auto 0;
width: 500px;
}
#menu div {
display: flex;
flex-direction: row;
display: flex;
flex-direction: row;
}
input{
margin: 0 20px 0 0;
background: linear-gradient(#00408e,#02306b);
border-radius: 5px;
border: 1px solid #4f89d4;
color: white;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
button{
background: #ffffff;
border-radius: 5px;
}
button:hover{
cursor: pointer;
}
#deposit_btn {
width : 250px;
height: 50px;
font-size: 2em;
width : 250px;
height: 50px;
font-size: 2em;
}
#deposit_amount {
width : 250px;
height : 50px;
font-size: 2em;
width : 250px;
height : 50px;
font-size: 2em;
}
#withdraw_btn {
width : 250px;
height: 50px;
font-size: 2em;
width : 250px;
height: 50px;
font-size: 2em;
}
#withdraw_amount {
width : 250px;
height : 50px;
font-size: 2em;
width : 250px;
height : 50px;
font-size: 2em;
}
html/img/fleeca.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

html/pdown.ttf
BIN
View File
Binary file not shown.
html/roboto.ttf
BIN
View File
Binary file not shown.
html/ui.html
+11 -4
View File
@@ -2,22 +2,29 @@
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/app.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Catamaran:400,700" rel="stylesheet">
</head>
<body>
<img id="cursor" src="img/cursor.png">
<div id="container">
<div id="container">
<div id="header">
<img id="logo" src="img/fleeca.png"/>
</div>
<div id="welcome-text">
Bonjour, <br/>
Merci d'utiliser nos bornes Fleeca Bank
</div>
<div id="menu">
<div>
<input type="text" id="deposit_amount"/>
<input type="number" id="deposit_amount"/>
<button id="deposit_btn">D&eacute;poser</button>
</div>
<br><br>
<div>
<input type="text" id="withdraw_amount"/>
<input type="number" id="withdraw_amount"/>
<button id="withdraw_btn">Retirer</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
html/ui_de.html
+10 -4
View File
@@ -2,19 +2,25 @@
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/app.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Catamaran:400,700" rel="stylesheet">
</head>
<body>
<img id="cursor" src="img/cursor.png">
<div id="container">
<div id="container">
<div id="header">
<img id="logo" src="img/fleeca.png"/>
</div>
<div id="welcome-text">
Hallo, <br/>
Vielen Dank für die Nutzung unserer Fleece Bank Terminals
</div>
<div id="menu">
<div>
<input type="text" id="deposit_amount"/>
<input type="number" id="deposit_amount"/>
<button id="deposit_btn">Einzahlen</button>
</div>
<br><br>
<div>
<input type="text" id="withdraw_amount"/>
<input type="number" id="withdraw_amount"/>
<button id="withdraw_btn">Abheben</button>
</div>
</div>
html/ui_en.html
+11 -5
View File
@@ -2,22 +2,28 @@
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/app.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Catamaran:400,700" rel="stylesheet">
</head>
<body>
<img id="cursor" src="img/cursor.png">
<div id="container">
<div id="container">
<div id="header">
<img id="logo" src="img/fleeca.png"/>
</div>
<div id="welcome-text">
Hi, <br/>
Thank you for using our Fleece Bank terminals
</div>
<div id="menu">
<div>
<input type="text" id="deposit_amount"/>
<input type="number" id="deposit_amount"/>
<button id="deposit_btn">Deposit</button>
</div>
<br><br>
<div>
<input type="text" id="withdraw_amount"/>
<input type="number" id="withdraw_amount"/>
<button id="withdraw_btn">Withdraw</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>