mbkauthe 1.3.5 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,9 +2,8 @@
2
2
  <div class="showmessageWindow">
3
3
  <h1></h1>
4
4
  <p></p>
5
- <a href="" target="_blank" class="error-code"></a>
6
- <button class="btn btn-save full" style="font-size: 20px; margin-top: 10px;"
7
- onclick="hideMessage()">Okay</button>
5
+ <!--a href="" target="_blank" class="error-code"></a-->
6
+ <button class="btn btn-save full" onclick="hideMessage()">Okay</button>
8
7
  </div>
9
8
  </div>
10
9
  <script>
@@ -12,13 +11,17 @@
12
11
  function showMessage(message, heading, errorCode) {
13
12
  document.querySelector(".showmessageWindow h1").innerText = heading;
14
13
  document.querySelector(".showmessageWindow p").innerHTML = message;
14
+
15
+ /* Disable for now
15
16
  if (errorCode) {
16
17
  document.querySelector(".showmessageWindow .error-code").style.display = "block";
17
18
  document.querySelector(".showmessageWindow .error-code").innerText = `Error Code: ${errorCode}`;
18
19
  } else {
19
20
  document.querySelector(".showmessageWindow .error-code").style.display = "none";
20
21
  }
22
+
21
23
  document.querySelector(".showmessageWindow .error-code").href = `https://mbktechstudio.com/ErrorCode/#${errorCode}`;
24
+ */
22
25
  document
23
26
  .querySelector(".showMessageblurWindow")
24
27
  .classList
@@ -47,20 +50,21 @@
47
50
  left: 0;
48
51
  width: 100%;
49
52
  height: 100%;
50
- background: rgba(0, 0, 0, 0.5);
53
+ background: rgba(0, 0, 0, 0.7);
51
54
  display: none;
52
55
  justify-content: center;
53
56
  align-items: center;
54
- z-index: 1000;
57
+ z-index: 10000;
55
58
  backdrop-filter: blur(10px);
56
59
  }
57
60
 
58
61
  .showMessageblurWindow.active {
59
62
  display: flex;
63
+ animation: fadeIn 0.3s ease-in-out;
60
64
  }
61
65
 
62
66
  .showMessageblurWindow.fade-out {
63
- animation: fadeOut 0.5s ease-in-out forwards;
67
+ animation: fadeOut 0.3s ease-in-out forwards;
64
68
  }
65
69
 
66
70
  body.blur-active {
@@ -72,99 +76,130 @@
72
76
  flex-direction: column;
73
77
  align-items: center;
74
78
  justify-content: center;
75
- font-family: 'Roboto', sans-serif;
76
- background: rgba(0, 0, 0, 0.6);
77
- padding: 20px 30px;
78
- border-radius: 15px;
79
+ background: rgba(10, 20, 20, 0.95);
80
+ backdrop-filter: blur(10px);
81
+ padding: 2rem 2.5rem;
82
+ border-radius: 8px;
79
83
  max-width: 90%;
80
84
  width: 600px;
81
85
  position: relative;
82
- color: #fff;
83
- border: 2px solid #007bff;
84
- animation: fadeIn 0.5s ease-in-out;
86
+ color: #e0f7fa;
87
+ border: 1px solid rgba(0, 184, 148, 0.2);
88
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
89
+ animation: slideIn 0.3s ease-out;
85
90
  }
86
91
 
87
92
  .showmessageWindow h1 {
88
- font-family: 'Roboto', sans-serif;
89
93
  margin-top: 0;
90
- font-size: 30px;
94
+ font-size: 1.8rem;
91
95
  text-align: center;
92
- color: #fff;
93
- text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
94
- margin-bottom: 10px;
96
+ color: #eaf6fb;
97
+ margin-bottom: 1rem;
98
+ font-weight: 700;
95
99
  }
96
100
 
97
101
  .showmessageWindow p {
98
- font-family: 'Roboto', sans-serif;
99
- font-size: 18px;
102
+ font-size: 1.1rem;
103
+ text-align: center;
104
+ color: #b2dfdb;
105
+ margin-bottom: 1rem;
106
+ line-height: 1.6;
107
+ }
108
+
109
+ .showmessageWindow .error-code {
110
+ font-size: 0.95rem;
100
111
  text-align: center;
101
- color: #ddd;
112
+ color: #ffd166;
113
+ font-weight: 600;
114
+ margin: 0.75rem auto;
115
+ padding: 0.5rem 1rem;
116
+ background: rgba(255, 209, 102, 0.1);
117
+ border: 1px solid #ffd166;
118
+ border-radius: 8px;
119
+ display: inline-block;
120
+ transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
121
+ text-decoration: none;
122
+ }
123
+
124
+ .showmessageWindow .error-code:hover {
125
+ background: rgba(255, 209, 102, 0.2);
126
+ color: #ffd166;
127
+ transform: translateY(-2px);
128
+ box-shadow: 0 4px 10px rgba(255, 209, 102, 0.2);
102
129
  }
103
130
 
104
- .showmessageWindow .close-btn {
105
- position: absolute;
106
- top: 10px;
107
- right: 10px;
108
- background: none;
109
- border: none;
110
- font-size: 30px;
131
+ .showmessageWindow .btn-save {
132
+ width: 100%;
133
+ padding: 8px;
134
+ border-radius: 8px;
135
+ background: #00b894;
136
+ color: #101c1c;
137
+ font-weight: 700;
138
+ font-size: 1.2rem;
139
+ border: .1rem solid #00b894;
111
140
  cursor: pointer;
112
- color: #bbb;
113
- transition: color 0.3s;
141
+ transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
142
+ box-shadow: 0 4px 20px rgba(33, 150, 243, 0.15);
114
143
  }
115
144
 
116
- .showmessageWindow .close-btn:hover {
117
- color: #fff;
145
+ .showmessageWindow .btn-save:hover {
146
+ background: #101c1c;
147
+ color: #00b894;
148
+ box-shadow: 0 6px 20px rgba(0, 184, 148, 0.3);
118
149
  }
119
150
 
151
+
120
152
  @keyframes fadeIn {
121
153
  from {
122
154
  opacity: 0;
123
- transform: scale(0.9);
124
155
  }
125
-
126
156
  to {
127
157
  opacity: 1;
128
- transform: scale(1);
129
158
  }
130
159
  }
131
160
 
132
- .showmessageWindow .error-code {
133
- font-family: 'Roboto', sans-serif;
134
- font-size: 16px;
135
- text-align: center;
136
- color: #ff4d4d;
137
- font-weight: 700;
138
- margin: 10px auto;
139
- padding: 5px 10px;
140
- background: rgba(255, 77, 77, 0.1);
141
- border: 1px solid #ff4d4d;
142
- border-radius: 5px;
143
- display: inline-block;
144
- transition: all 0.3s ease-in;
161
+ @keyframes fadeOut {
162
+ from {
163
+ opacity: 1;
164
+ }
165
+ to {
166
+ opacity: 0;
167
+ }
145
168
  }
146
169
 
147
- .showmessageWindow .error-code:hover {
148
- background: rgba(255, 77, 77, 0.2);
149
- color: #007bff;
150
- text-decoration: none;
151
- transition: all 0.3s ease-out;
170
+ @keyframes slideIn {
171
+ from {
172
+ opacity: 0;
173
+ transform: translateY(-20px);
174
+ }
175
+ to {
176
+ opacity: 1;
177
+ transform: translateY(0);
178
+ }
152
179
  }
153
180
 
181
+ @media (max-width: 768px) {
182
+ .showmessageWindow {
183
+ padding: 1.5rem 2rem;
184
+ width: 90%;
185
+ }
154
186
 
155
- .showmessageWindow .btn-save {
156
- width: 100%;
187
+ .showmessageWindow h1 {
188
+ font-size: 1.5rem;
189
+ }
190
+
191
+ .showmessageWindow p {
192
+ font-size: 1rem;
193
+ }
157
194
  }
158
195
 
159
- @keyframes fadeOut {
160
- from {
161
- opacity: 1;
162
- transform: scale(1);
196
+ @media (max-width: 576px) {
197
+ .showmessageWindow {
198
+ padding: 1.25rem 1.5rem;
163
199
  }
164
200
 
165
- to {
166
- opacity: 0;
167
- transform: scale(0.9);
201
+ .showmessageWindow h1 {
202
+ font-size: 1.3rem;
168
203
  }
169
204
  }
170
205
  </style>