mirror of
https://github.com/esx-framework/esx_core.git
synced 2026-08-31 10:18:54 +00:00
Merge pull request #18 from benjaminbra/new_ui
Change the ui to make it better looking
This commit is contained in:
Samuel
+5
-4
@@ -31,10 +31,11 @@ client_scripts {
|
||||
ui_page 'html/ui.html'
|
||||
|
||||
files {
|
||||
'html/ui.html',
|
||||
'html/pdown.ttf',
|
||||
'html/css/app.css',
|
||||
'html/scripts/app.js'
|
||||
'html/ui.html',
|
||||
'html/roboto.ttf',
|
||||
'html/img/fleeca.png',
|
||||
'html/css/app.css',
|
||||
'html/scripts/app.js'
|
||||
}
|
||||
|
||||
dependency 'es_extended'
|
||||
+70
-11
@@ -1,9 +1,12 @@
|
||||
@font-face {
|
||||
font-family: pcdown;
|
||||
src: url('pdown.ttf');
|
||||
font-family: roboto;
|
||||
src: url('../roboto.ttf');
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: roboto;
|
||||
}
|
||||
|
||||
@@ -13,19 +16,51 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#menu {
|
||||
#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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 500px;
|
||||
height: 150px;
|
||||
margin-top: -75px;
|
||||
margin-left: -250px;
|
||||
margin: -150px auto 0;
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
#menu div {
|
||||
@@ -33,6 +68,30 @@ body {
|
||||
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;
|
||||
@@ -46,13 +105,13 @@ body {
|
||||
}
|
||||
|
||||
#withdraw_btn {
|
||||
width: 250px;
|
||||
width : 250px;
|
||||
height: 50px;
|
||||
font-size: 2em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#withdraw_amount {
|
||||
width: 250px;
|
||||
height: 50px;
|
||||
font-size: 2em;
|
||||
width : 250px;
|
||||
height : 50px;
|
||||
font-size: 2em;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
Binary file not shown.
+11
-4
@@ -2,21 +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>
|
||||
<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é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>
|
||||
|
||||
+10
-4
@@ -2,18 +2,24 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
+11
-5
@@ -2,21 +2,27 @@
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user