diff --git a/__resource.lua b/__resource.lua index f52e974f..64f8f083 100644 --- a/__resource.lua +++ b/__resource.lua @@ -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' \ No newline at end of file diff --git a/html/css/app.css b/html/css/app.css index 36470206..f075f982 100644 --- a/html/css/app.css +++ b/html/css/app.css @@ -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; } \ No newline at end of file diff --git a/html/img/fleeca.png b/html/img/fleeca.png new file mode 100644 index 00000000..fffdfd03 Binary files /dev/null and b/html/img/fleeca.png differ diff --git a/html/pdown.ttf b/html/pdown.ttf deleted file mode 100644 index 69c76cf3..00000000 Binary files a/html/pdown.ttf and /dev/null differ diff --git a/html/roboto.ttf b/html/roboto.ttf new file mode 100644 index 00000000..7d9a6c4c Binary files /dev/null and b/html/roboto.ttf differ diff --git a/html/ui.html b/html/ui.html index 340c5eba..15c4cb0c 100644 --- a/html/ui.html +++ b/html/ui.html @@ -2,21 +2,28 @@ - -
+
+ +
+ Bonjour,
+ Merci d'utiliser nos bornes Fleeca Bank +
+
diff --git a/html/ui_de.html b/html/ui_de.html index d6e246bf..e14331b4 100644 --- a/html/ui_de.html +++ b/html/ui_de.html @@ -2,18 +2,24 @@ - -
+
+ +
+ Hallo,
+ Vielen Dank für die Nutzung unserer Fleece Bank Terminals +
diff --git a/html/ui_en.html b/html/ui_en.html index 575c85a1..9e0a7756 100644 --- a/html/ui_en.html +++ b/html/ui_en.html @@ -2,21 +2,27 @@ - -
+
+ +
+ Hi,
+ Thank you for using our Fleece Bank terminals +
+