5 |
6 | # Compatible devices
7 | The Macro Deck Web Client is compatible with almost all browsers that support the newest JavaScript features.
8 |
9 |
10 | # Third party licenses
11 | This app uses some awesome 3rd party libraries:
12 | - [URLSearchParams Polyfill (MIT license)](https://github.com/jerrybendy/url-search-params-polyfill)
13 | - [Bootstrap (MIT license)](https://github.com/twbs/bootstrap)
14 | - [NoSleep.js (MIT license)](https://github.com/richtr/NoSleep.js/)
15 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {"name":"Macro Deck","icons":[{"src":"/images/favicon/android-chrome-36x36.png","sizes":"36x36","type":"image\/png","density":"0.75"},{"src":"/images/favicon/android-chrome-48x48.png","sizes":"48x48","type":"image\/png","density":"1.0"},{"src":"/images/favicon/android-chrome-72x72.png","sizes":"72x72","type":"image\/png","density":"1.5"},{"src":"/images/favicon/android-chrome-96x96.png","sizes":"96x96","type":"image\/png","density":"2.0"},{"src":"/images/favicon/android-chrome-144x144.png","sizes":"144x144","type":"image\/png","density":"3.0"},{"src":"/images/favicon/android-chrome-192x192.png","sizes":"192x192","type":"image\/png","density":"4.0"}]}
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Manuel Mayer
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/js/cookiealert.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Bootstrap Cookie Alert by Wruczek
3 | * https://github.com/Wruczek/Bootstrap-Cookie-Alert
4 | * Released under MIT license
5 | */
6 | (function () {
7 |
8 | var acceptCookies = document.querySelector(".acceptcookies");
9 |
10 |
11 | // Show the alert if we cant find the "acceptCookies" cookie
12 | if (!getCookie("acceptCookies")) {
13 | $('#cookiealert-modal').modal('show');
14 | }
15 |
16 | // When clicking on the agree button, create a 1 year
17 | // cookie to remember user's choice and close the banner
18 | acceptCookies.addEventListener("click", function () {
19 | setCookie("acceptCookies", true, 365);
20 | $('#cookiealert-modal').modal('hide')
21 |
22 | // dispatch the accept event
23 | window.dispatchEvent(new Event("cookieAlertAccept"))
24 | });
25 |
26 | // Cookie functions from w3schools
27 | function setCookie(cname, cvalue, exdays) {
28 | var d = new Date();
29 | d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
30 | var expires = "expires=" + d.toUTCString();
31 | document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
32 | }
33 |
34 | function getCookie(cname) {
35 | var name = cname + "=";
36 | var decodedCookie = decodeURIComponent(document.cookie);
37 | var ca = decodedCookie.split(';');
38 | for (var i = 0; i < ca.length; i++) {
39 | var c = ca[i];
40 | while (c.charAt(0) === ' ') {
41 | c = c.substring(1);
42 | }
43 | if (c.indexOf(name) === 0) {
44 | return c.substring(name.length, c.length);
45 | }
46 | }
47 | return "";
48 | }
49 | })();
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 10px;
3 | }
4 |
5 |
6 |
7 |
8 | .bg-dark p, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark label, .bg-dark .text-w {
9 | color: white !important;
10 | }
11 |
12 | p, h1, h2, h3, h4, h5, h6, label , .text-w
13 | {
14 | color: black;
15 | }
16 |
17 | .pressed {
18 | transform: scale(0.9);
19 | }
20 |
21 | .release-transition {
22 | transition: all .3s linear;
23 | }
24 |
25 | .blockBox {
26 | padding: 0;
27 | }
28 |
29 | .bg-dark {
30 | background-color: #2d2d2d!important;
31 | }
32 |
33 | .btn-secondary{
34 | background-color: #eeeeee !important;
35 | }
36 |
37 | .bg-dark .btn-secondary {
38 | background-color: #232323!important;
39 | }
40 |
41 | .action-button {
42 | height: 100%;
43 | width: 100%;
44 | padding: 0;
45 | background-size: 100% 100%;
46 | background-repeat: no-repeat;
47 | }
48 |
49 | .btn:hover {
50 | background-color: #232323!important;
51 | }
52 |
53 | .btn:active {
54 | outline: none!important;
55 | box-shadow: none!important;
56 | }
57 |
58 | .btn:focus {
59 | outline: none!important;
60 | box-shadow: none!important;
61 | }
62 |
63 | .button-container {
64 | margin: auto;
65 | position: absolute;
66 | top: 50%;
67 | left: 50%;
68 | transform: translate(-50%, -50%);
69 | }
70 |
71 |
72 | .connect-container {
73 | margin: auto;
74 | height: auto;
75 | }
76 |
77 | .recent-connection-item {
78 | background-color: #fff;
79 | padding: 10px 10px 10px 10px;
80 | margin: 10px 10px 10px 10px;
81 | border: 1px solid rgb(90, 90, 90);
82 | border-left: 4px solid rgb(31, 95, 161);
83 | border-radius: 6px;
84 | max-width: 600px;
85 | margin: auto;
86 | }
87 |
88 |
89 | .bg-dark .recent-connection-item {
90 | background-color: #353535;
91 | }
92 |
93 |
94 | .recent-connection-item:hover {
95 | cursor: pointer;
96 | background-color: #ccc;
97 | }
98 |
99 | .bg-dark .recent-connection-item:hover {
100 | background-color: #454545;
101 | }
102 |
103 | .form-connect {
104 | width: 100%;
105 | max-width: 390px;
106 | padding: 0;
107 | margin: 0 auto;
108 | }
109 | .form-connect .checkbox {
110 | font-weight: 400;
111 | }
112 | .form-connect .form-control {
113 | position: relative;
114 | box-sizing: border-box;
115 | height: auto;
116 | padding: 10px;
117 | font-size: 16px;
118 | }
119 | .form-connect .form-control:focus {
120 | z-index: 2;
121 | }
122 |
123 |
124 | .label {
125 | height: 100%;
126 | width: 100%;
127 | padding: 0;
128 | background-size: 100% 100%;
129 | background-repeat: no-repeat;
130 | border-radius: 1.0rem;
131 | }
132 |
133 | .loader-container {
134 | height: 100%;
135 | width: 100%;
136 | padding: 0;
137 | position: absolute;
138 | top: 0;
139 | left: 0;
140 | backdrop-filter: blur(6px);
141 | }
142 |
143 | .button-done {
144 | background-color: #007bff;
145 | -webkit-animation: fadeOut;
146 | animation: fadeOut;
147 | opacity: 0;
148 | -webkit-animation-duration: 3s;
149 | animation-duration: 3s
150 | }
151 |
152 | @-webkit-keyframes fadeOut {
153 | from {
154 | opacity: 1;
155 | }
156 | to {
157 | opacity: 0;
158 | }
159 | }
160 | @keyframes fadeOut {
161 | from {
162 | opacity: 1;
163 | }
164 | to {
165 | opacity: 0;
166 | }
167 | }
168 |
169 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 | 
93 |
94 |