diff --git a/static/css/matemat.css b/static/css/matemat.css
index a554c6d..708dea5 100644
--- a/static/css/matemat.css
+++ b/static/css/matemat.css
@@ -49,4 +49,127 @@
display: inline-block;
margin-right: 40px;
}
-}
\ No newline at end of file
+}
+
+#depositlist {
+ display: inline;
+}
+
+#deposit-wrapper {
+ display: none;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: rgba(0,0,0,.75);
+ z-index: 100;
+}
+
+#deposit-input {
+ display: grid;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ margin: auto;
+ width: 320px;
+ height: 540px;
+ grid-template-columns: 100px 100px 100px;
+ grid-template-rows: 100px 100px 100px 100px 100px;
+ column-gap: 10px;
+ row-gap: 10px;
+}
+
+#deposit-wrapper.show {
+ display: block;
+}
+
+.fakelink {
+ cursor: pointer;
+ color: blue;
+}
+
+#deposit-amount {
+ grid-column-start: 1;
+ grid-column-end: 4;
+ text-align: right;
+ grid-row: 1;
+ font-size: 50px;
+ line-heigt: 100px;
+ padding: 10px 0;
+ font-family: monospace;
+ background: #ffffff;
+}
+
+.numpad {
+ background: #f0f0f0;
+ text-decoration: none;
+ font-size: 50px;
+ font-family: sans-serif;
+ line-height: 100px;
+ text-align: center;
+}
+
+#numpad-1 {
+ grid-column: 1;
+ grid-row: 2;
+}
+
+#numpad-2 {
+ grid-column: 2;
+ grid-row: 2;
+}
+
+#numpad-3 {
+ grid-column: 3;
+ grid-row: 2;
+}
+
+#numpad-4 {
+ grid-column: 1;
+ grid-row: 3;
+}
+
+#numpad-5 {
+ grid-column: 2;
+ grid-row: 3;
+}
+
+#numpad-6 {
+ grid-column: 3;
+ grid-row: 3;
+}
+
+#numpad-7 {
+ grid-column: 1;
+ grid-row: 4;
+}
+
+#numpad-8 {
+ grid-column: 2;
+ grid-row: 4;
+}
+
+#numpad-9 {
+ grid-column: 3;
+ grid-row: 4;
+}
+
+#numpad-del {
+ grid-column: 1;
+ grid-row: 5;
+ background: #f06060;
+}
+
+#numpad-0 {
+ grid-column: 2;
+ grid-row: 5;
+}
+
+#numpad-ok {
+ grid-column: 3;
+ grid-row: 5;
+ background: #60f060;
+}
diff --git a/static/js/depositlist.js b/static/js/depositlist.js
new file mode 100644
index 0000000..e6b4a1f
--- /dev/null
+++ b/static/js/depositlist.js
@@ -0,0 +1,45 @@
+Number.prototype.pad = function(size) {
+ var s = String(this);
+ while (s.length < (size || 2)) {s = "0" + s;}
+ return s;
+}
+
+let deposit = '0';
+let button = document.createElement('div');
+let input = document.getElementById('deposit-wrapper');
+let amount = document.getElementById('deposit-amount');
+button.classList.add('thumblist-item');
+button.classList.add('fakelink');
+button.innerText = 'Deposit';
+button.onclick = (ev) => {
+ deposit = '0';
+ amount.innerText = (Math.floor(parseInt(deposit) / 100)) + '.' + (parseInt(deposit) % 100).pad();
+ input.classList.add('show');
+};
+deposit_key = (k) => {
+ if (k == 'ok') {
+ window.location.href = '/deposit?n=' + parseInt(deposit);
+ deposit = '0';
+ input.classList.remove('show');
+ } else if (k == 'del') {
+ if (deposit == '0') {
+ input.classList.remove('show');
+ }
+ deposit = deposit.substr(0, deposit.length - 1);
+ if (deposit.length == 0) {
+ deposit = '0';
+ }
+ amount.innerText = (Math.floor(parseInt(deposit) / 100)) + '.' + (parseInt(deposit) % 100).pad();
+ } else {
+ if (deposit == '0') {
+ deposit = k;
+ } else {
+ deposit += k;
+ }
+ amount.innerText = (Math.floor(parseInt(deposit) / 100)) + '.' + (parseInt(deposit) % 100).pad();
+ }
+};
+
+let list = document.getElementById('depositlist');
+list.innerHTML = '';
+list.appendChild(button);
diff --git a/templates/productlist.html b/templates/productlist.html
index fbbc038..f79ecef 100644
--- a/templates/productlist.html
+++ b/templates/productlist.html
@@ -11,13 +11,28 @@
{# Show the users current balance #}
Your balance: {{ authuser.balance|chf }}
+ {# Logout link #}
+