From c2b506f8bf9930b4421980227dcb8bdc4a2299bc Mon Sep 17 00:00:00 2001 From: arnaucube Date: Mon, 11 May 2020 16:29:32 +0200 Subject: [PATCH] Initial UI layout structure --- .gitignore | 1 + css/dark-theme.css | 20 ++++++ css/style.css | 111 +++++++++++++++++++++++++++++ css/utils.css | 35 +++++++++ index.html | 172 +++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 61 ++++++++++++++++ package.json | 17 +++++ 7 files changed, 417 insertions(+) create mode 100644 .gitignore create mode 100644 css/dark-theme.css create mode 100644 css/style.css create mode 100644 css/utils.css create mode 100644 index.html create mode 100644 package-lock.json create mode 100644 package.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/css/dark-theme.css b/css/dark-theme.css new file mode 100644 index 0000000..05ce12a --- /dev/null +++ b/css/dark-theme.css @@ -0,0 +1,20 @@ +.dark-theme { + background: #232729; + color: #d9d9d9; +} +.dark-theme + .card, + .list-group-item, + input, + .nav-link { + background: none!important; + border-color: #3b4145; +} +.dark-theme input { + color: #FF00B9; +} +.dark-theme input:focus { + color: #FF00B9; + box-shadow: 0px 0px 5px #FF00B9!important; + border: none; +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..6d33a33 --- /dev/null +++ b/css/style.css @@ -0,0 +1,111 @@ +/* +main color: #FF00B9 +*/ + +.mainBox { + max-width: 900px; + margin-left: auto; + margin-right: auto; +} +a, a:link, a:visited, a:hover { + color: #FF00B9!important; + text-decoration: none!important; +} +a:hover { + color: #FF00B9!important; + text-decoration: none!important; +} +.btn { + cursor: pointer; +} + +hr { + height: 2px!important; + + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc66ff+0,FF00B9+98 */ + background: #cc66ff; /* Old browsers */ + background: -moz-linear-gradient(left, #cc66ff 0%, #FF00B9 98%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, #cc66ff 0%,#FF00B9 98%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, #cc66ff 0%,#FF00B9 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc66ff', endColorstr='#FF00B9',GradientType=1 ); /* IE6-9 */ +} + +.color_primary { + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc66ff+0,FF00B9+98 */ +background: #cc66ff; /* Old browsers */ +background: -moz-linear-gradient(left, #cc66ff 0%, #FF00B9 98%); /* FF3.6-15 */ +background: -webkit-linear-gradient(left, #cc66ff 0%,#FF00B9 98%); /* Chrome10-25,Safari5.1-6 */ +background: linear-gradient(to right, #cc66ff 0%,#FF00B9 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ +filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc66ff', endColorstr='#FF00B9',GradientType=1 ); /* IE6-9 */ + + color: #000000!important; + font-weight: bold!important; +} + +.color_primary-o { + border: 1px solid #FF00B9!important; + color: #FF00B9!important; + background: rgba(0,0,0,0)!important; + +} + + +.color_input { + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc66ff+0,FF00B9+98 */ + background: #78a9ac; /* Old browsers */ + background: -moz-linear-gradient(left, #78a9ac 0%, #78a9ac 98%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, #78a9ac 0%,#78a9ac 98%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, #78a9ac 0%,#78a9ac 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#78a9ac', endColorstr='#78a9ac',GradientType=1 ); /* IE6-9 */ + + color: #000000!important; +} + +.invisible { + display: none!important; +} + +.disable-selection { + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer */ + -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ + -webkit-user-select: none; /* Chrome, Safari, and Opera */ + -webkit-touch-callout: none; /* Disable Android and iOS callouts*/ +} + +#qrcode > img { + border: 8px solid #ffffff; +} + +.upload-btn-wrapper { + position: relative; + overflow: hidden; + display: inline-block; +} + +.upload-btn-wrapper input[type=file] { + font-size: 100px; + position: absolute; + left: 0; + top: 0; + opacity: 0; +} + +.balanceBox { + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#cc66ff+0,FF00B9+98 */ + background: #cc66ff; /* Old browsers */ + background: -moz-linear-gradient(left, #cc66ff 0%, #FF00B9 98%); /* FF3.6-15 */ + background: -webkit-linear-gradient(left, #cc66ff 0%,#FF00B9 98%); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient(to right, #cc66ff 0%,#FF00B9 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc66ff', endColorstr='#FF00B9',GradientType=1 ); /* IE6-9 */ + + color: #ffffff!important; + text-align: center; + + border-radius: 5px; + padding: 10px; + /* box-shadow: 0px 0px 30px grey; */ +} +.balanceBox > h3 { + font-weight: 900; +} diff --git a/css/utils.css b/css/utils.css new file mode 100644 index 0000000..f7980d8 --- /dev/null +++ b/css/utils.css @@ -0,0 +1,35 @@ + +/* switch button */ +.onoffswitch { + position: relative; width: 46px; + -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; +} +.onoffswitch-checkbox { + display: none; +} +.onoffswitch-label { + display: block; overflow: hidden; cursor: pointer; + height: 20px; padding: 0; line-height: 20px; + border: 2px solid #FFFFFF; border-radius: 20px; + background-color: #9E9E9E; + transition: background-color 0.3s ease-in; + margin-bottom: 0; +} +.onoffswitch-label:before { + content: ""; + display: block; width: 20px; margin: 0px; + background: #FFFFFF; + position: absolute; top: 0; bottom: 0; + right: 24px; + border: 2px solid #FFFFFF; border-radius: 20px; + transition: all 0.3s ease-in 0s; +} +.onoffswitch-checkbox:checked + .onoffswitch-label { + background-color: #FF00B9; +} +.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before { + border-color: #FF00B9; +} +.onoffswitch-checkbox:checked + .onoffswitch-label:before { + right: 0px; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..86939e6 --- /dev/null +++ b/index.html @@ -0,0 +1,172 @@ + + + + + + miksi-app + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ +
+ +

miksi

+ From Esperanto, miksi (miks·i): to mingle, to blend, to mix, to shuffle +
+ Ethereum trustless zk-mixer. +


+ +
+
+
+
Deposit
+
+ Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit. +

+ +


+
+
+
Withdraw
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. +

+ +
+ +
+ +
+
+

+
Stats
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum + +
+ +
+ +
Info
+
+ Spec & core code: https://github.com/miksi-labs/miksi-core +
+ What is a mixer? +


+
Config
+
+ Theme: +
+ + +
+
+

+ +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..3f83d85 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,61 @@ +{ + "name": "miksi-app", + "version": "0.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "axios": { + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz", + "integrity": "sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==", + "requires": { + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + } + }, + "bootstrap": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.4.1.tgz", + "integrity": "sha512-tbx5cHubwE6e2ZG7nqM3g/FZ5PQEDMWmMGNrCUBVRPHXTJaH7CBDdsLeu3eCh3B1tzAxTnAbtmrzvWEvT2NNEA==" + }, + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "requires": { + "debug": "=3.1.0" + } + }, + "is-buffer": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz", + "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A==" + }, + "jquery": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz", + "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg==" + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + }, + "toastr": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/toastr/-/toastr-2.1.4.tgz", + "integrity": "sha1-i0O+ZPudDEFIcURvLbjoyk6V8YE=", + "requires": { + "jquery": ">=1.12.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..167701a --- /dev/null +++ b/package.json @@ -0,0 +1,17 @@ +{ + "name": "miksi-app", + "version": "0.0.1", + "description": "", + "main": "index.js", + "scripts": { + "predeploy": "npm install", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "axios": "^0.18.0", + "bootstrap": "^4.2.1", + "toastr": "^2.1.4" + } +}