diff --git a/__resource.lua b/__resource.lua index 628fd5a4..30f6e4a8 100644 --- a/__resource.lua +++ b/__resource.lua @@ -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' } diff --git a/html/css/app.css b/html/css/app.css index af32745a..83dde9a3 100644 --- a/html/css/app.css +++ b/html/css/app.css @@ -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; } \ 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 112567b7..ffbc3637 100644 --- a/html/ui.html +++ b/html/ui.html @@ -2,22 +2,29 @@ - -
+
+ +
+ Bonjour,
+ Merci d'utiliser nos bornes Fleeca Bank +
+
diff --git a/html/ui_de.html b/html/ui_de.html index 9057d83e..bf2f7646 100644 --- a/html/ui_de.html +++ b/html/ui_de.html @@ -2,19 +2,25 @@ - -
+
+ +
+ Hallo,
+ Vielen Dank für die Nutzung unserer Fleece Bank Terminals +
diff --git a/html/ui_en.html b/html/ui_en.html index 3579575e..47740e8c 100644 --- a/html/ui_en.html +++ b/html/ui_en.html @@ -2,22 +2,28 @@ - -
+
+ +
+ Hi,
+ Thank you for using our Fleece Bank terminals +
+