sensivity 2.5.28 → 2.5.29
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.
- package/package.json +1 -1
- package/public/assets/logo.png +0 -0
- package/public/css/style.css +193 -109
- package/public/index.html +5 -5
- package/public/js/app.js +47 -6
- package/public/js/config_schema.js +8 -2
package/package.json
CHANGED
|
Binary file
|
package/public/css/style.css
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--bg: #
|
|
3
|
-
--bg2: #
|
|
4
|
-
--bg3: #
|
|
5
|
-
--bg4: #
|
|
6
|
-
--bg5: #
|
|
7
|
-
--sidebar: #
|
|
8
|
-
--sidebar2: #
|
|
9
|
-
--border: #
|
|
10
|
-
--border2: #
|
|
11
|
-
--accent: #
|
|
12
|
-
--accent2: #
|
|
13
|
-
--accent-dim: rgba(
|
|
2
|
+
--bg: #020403;
|
|
3
|
+
--bg2: #080a09;
|
|
4
|
+
--bg3: #101310;
|
|
5
|
+
--bg4: #171b18;
|
|
6
|
+
--bg5: #202620;
|
|
7
|
+
--sidebar: #141815;
|
|
8
|
+
--sidebar2: #0d100e;
|
|
9
|
+
--border: #252b27;
|
|
10
|
+
--border2: #2c3a30;
|
|
11
|
+
--accent: #31ff7a;
|
|
12
|
+
--accent2: #14b85a;
|
|
13
|
+
--accent-dim: rgba(49, 255, 122, .2);
|
|
14
14
|
--gold: var(--accent);
|
|
15
|
-
--gold-dim: rgba(
|
|
15
|
+
--gold-dim: rgba(49, 255, 122, .16);
|
|
16
16
|
--text: #f2f2f6;
|
|
17
|
-
--text2: #
|
|
18
|
-
--text3: #
|
|
17
|
+
--text2: #aab5ad;
|
|
18
|
+
--text3: #68726b;
|
|
19
19
|
--danger: #f15d62;
|
|
20
20
|
--green: #52e37c;
|
|
21
21
|
--panel-w: min(1120px, 92vw);
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
html, body { min-height: 100%; }
|
|
30
30
|
|
|
31
31
|
body {
|
|
32
|
+
position: relative;
|
|
32
33
|
font-family: var(--font);
|
|
33
34
|
color: var(--text);
|
|
34
35
|
height: 100dvh;
|
|
@@ -42,10 +43,9 @@ body {
|
|
|
42
43
|
justify-content: center;
|
|
43
44
|
padding: 18px;
|
|
44
45
|
background:
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
linear-gradient(
|
|
48
|
-
#063345;
|
|
46
|
+
radial-gradient(circle at 50% 42%, rgba(49, 255, 122, .12), transparent 33%),
|
|
47
|
+
radial-gradient(circle at 18% 18%, rgba(49, 255, 122, .06), transparent 24%),
|
|
48
|
+
linear-gradient(180deg, #050705, #010201 72%);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
body::before,
|
|
@@ -57,30 +57,55 @@ body::after {
|
|
|
57
57
|
z-index: -1;
|
|
58
58
|
}
|
|
59
59
|
body::before {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
60
|
+
content: 'SENSIVITY\A BEST PRIVATE';
|
|
61
|
+
z-index: 0;
|
|
62
|
+
display: flex;
|
|
63
|
+
align-items: flex-start;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
padding-top: 20px;
|
|
66
|
+
white-space: pre;
|
|
67
|
+
text-align: center;
|
|
68
|
+
color: rgba(49, 255, 122, .15);
|
|
69
|
+
font-size: clamp(44px, 9.5vw, 128px);
|
|
70
|
+
line-height: .88;
|
|
71
|
+
font-weight: 950;
|
|
72
|
+
letter-spacing: 0;
|
|
73
|
+
text-shadow:
|
|
74
|
+
0 0 28px rgba(49, 255, 122, .3),
|
|
75
|
+
0 0 94px rgba(49, 255, 122, .2);
|
|
64
76
|
}
|
|
65
77
|
body::after {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
78
|
+
z-index: 0;
|
|
79
|
+
background-image:
|
|
80
|
+
radial-gradient(circle, rgba(49, 255, 122, .72) 0 1px, transparent 2px),
|
|
81
|
+
radial-gradient(circle, rgba(49, 255, 122, .35) 0 1px, transparent 2px),
|
|
82
|
+
radial-gradient(circle, rgba(255,255,255,.18) 0 1px, transparent 2px);
|
|
83
|
+
background-size: 78px 78px, 126px 126px, 210px 210px;
|
|
84
|
+
background-position: 0 0, 32px 42px, 80px 120px;
|
|
85
|
+
opacity: .72;
|
|
86
|
+
animation: sensivityParticles 13s linear infinite;
|
|
87
|
+
mask-image: radial-gradient(ellipse at center, #000 0 58%, transparent 82%);
|
|
70
88
|
}
|
|
71
89
|
|
|
72
90
|
::-webkit-scrollbar { width: 4px; height: 4px; }
|
|
73
91
|
::-webkit-scrollbar-track { background: transparent; }
|
|
74
|
-
::-webkit-scrollbar-thumb { background: #
|
|
92
|
+
::-webkit-scrollbar-thumb { background: #2b3c30; border-radius: 2px; }
|
|
93
|
+
|
|
94
|
+
@keyframes sensivityParticles {
|
|
95
|
+
from { background-position: 0 0, 32px 42px, 80px 120px; }
|
|
96
|
+
to { background-position: 96px -240px, -72px -180px, 180px -120px; }
|
|
97
|
+
}
|
|
75
98
|
|
|
76
99
|
#app {
|
|
100
|
+
position: relative;
|
|
101
|
+
z-index: 1;
|
|
77
102
|
width: var(--panel-w);
|
|
78
103
|
height: var(--panel-h);
|
|
79
104
|
min-height: 520px;
|
|
80
105
|
display: flex;
|
|
81
106
|
overflow: hidden;
|
|
82
|
-
background: rgba(
|
|
83
|
-
border: 1px solid rgba(
|
|
107
|
+
background: rgba(8, 10, 9, .96);
|
|
108
|
+
border: 1px solid rgba(47, 66, 53, .68);
|
|
84
109
|
border-radius: var(--radius);
|
|
85
110
|
box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
|
|
86
111
|
}
|
|
@@ -89,7 +114,7 @@ body::after {
|
|
|
89
114
|
width: 210px;
|
|
90
115
|
flex: 0 0 210px;
|
|
91
116
|
background: linear-gradient(180deg, var(--sidebar), var(--sidebar2));
|
|
92
|
-
border-right: 1px solid #
|
|
117
|
+
border-right: 1px solid #242c27;
|
|
93
118
|
display: flex;
|
|
94
119
|
flex-direction: column;
|
|
95
120
|
overflow: hidden;
|
|
@@ -99,11 +124,23 @@ body::after {
|
|
|
99
124
|
height: 70px;
|
|
100
125
|
display: flex;
|
|
101
126
|
align-items: center;
|
|
102
|
-
|
|
127
|
+
gap: 12px;
|
|
128
|
+
padding: 0 22px;
|
|
103
129
|
color: #f9f9ff;
|
|
104
|
-
font-size:
|
|
130
|
+
font-size: 20px;
|
|
105
131
|
font-weight: 900;
|
|
106
|
-
letter-spacing:
|
|
132
|
+
letter-spacing: 0;
|
|
133
|
+
}
|
|
134
|
+
.brand img {
|
|
135
|
+
width: 34px;
|
|
136
|
+
height: 34px;
|
|
137
|
+
object-fit: contain;
|
|
138
|
+
filter: drop-shadow(0 0 12px rgba(49, 255, 122, .28));
|
|
139
|
+
}
|
|
140
|
+
.brand span {
|
|
141
|
+
min-width: 0;
|
|
142
|
+
overflow: hidden;
|
|
143
|
+
text-overflow: ellipsis;
|
|
107
144
|
}
|
|
108
145
|
|
|
109
146
|
.nav-scroll {
|
|
@@ -119,7 +156,7 @@ body::after {
|
|
|
119
156
|
font-size: 12px;
|
|
120
157
|
line-height: 1;
|
|
121
158
|
font-weight: 900;
|
|
122
|
-
letter-spacing:
|
|
159
|
+
letter-spacing: 0;
|
|
123
160
|
}
|
|
124
161
|
|
|
125
162
|
.tab-btn {
|
|
@@ -165,7 +202,7 @@ body::after {
|
|
|
165
202
|
width: 4px;
|
|
166
203
|
border-radius: 3px 0 0 3px;
|
|
167
204
|
background: var(--accent);
|
|
168
|
-
box-shadow: 0 0 16px rgba(
|
|
205
|
+
box-shadow: 0 0 16px rgba(49, 255, 122, .72);
|
|
169
206
|
}
|
|
170
207
|
|
|
171
208
|
#content {
|
|
@@ -174,7 +211,7 @@ body::after {
|
|
|
174
211
|
display: flex;
|
|
175
212
|
flex-direction: column;
|
|
176
213
|
overflow: hidden;
|
|
177
|
-
background: rgba(
|
|
214
|
+
background: rgba(10, 12, 11, .94);
|
|
178
215
|
}
|
|
179
216
|
|
|
180
217
|
#topbar {
|
|
@@ -184,8 +221,8 @@ body::after {
|
|
|
184
221
|
align-items: center;
|
|
185
222
|
gap: 18px;
|
|
186
223
|
padding: 0 22px;
|
|
187
|
-
border-bottom: 1px solid #
|
|
188
|
-
background: #
|
|
224
|
+
border-bottom: 1px solid #242b26;
|
|
225
|
+
background: #0d100e;
|
|
189
226
|
}
|
|
190
227
|
|
|
191
228
|
.top-title {
|
|
@@ -218,7 +255,7 @@ body::after {
|
|
|
218
255
|
font-size: 11px;
|
|
219
256
|
font-weight: 800;
|
|
220
257
|
text-transform: uppercase;
|
|
221
|
-
letter-spacing:
|
|
258
|
+
letter-spacing: 0;
|
|
222
259
|
}
|
|
223
260
|
|
|
224
261
|
.sub-tabs {
|
|
@@ -244,8 +281,8 @@ body::after {
|
|
|
244
281
|
}
|
|
245
282
|
.sub-tab.active {
|
|
246
283
|
color: #fff;
|
|
247
|
-
border-color: rgba(
|
|
248
|
-
background: rgba(
|
|
284
|
+
border-color: rgba(49, 255, 122, .34);
|
|
285
|
+
background: rgba(49, 255, 122, .08);
|
|
249
286
|
}
|
|
250
287
|
.profile-dot {
|
|
251
288
|
width: 36px;
|
|
@@ -254,14 +291,26 @@ body::after {
|
|
|
254
291
|
border-radius: 50%;
|
|
255
292
|
display: grid;
|
|
256
293
|
place-items: center;
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
294
|
+
background: #050705;
|
|
295
|
+
border: 1px solid rgba(49, 255, 122, .28);
|
|
296
|
+
box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 18px rgba(49, 255, 122, .12);
|
|
297
|
+
}
|
|
298
|
+
.profile-dot img {
|
|
299
|
+
width: 23px;
|
|
300
|
+
height: 23px;
|
|
301
|
+
object-fit: contain;
|
|
261
302
|
}
|
|
262
303
|
|
|
263
|
-
#
|
|
304
|
+
#workspace {
|
|
264
305
|
flex: 1;
|
|
306
|
+
min-height: 0;
|
|
307
|
+
display: flex;
|
|
308
|
+
overflow: hidden;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
#pages {
|
|
312
|
+
flex: 1 1 auto;
|
|
313
|
+
min-width: 0;
|
|
265
314
|
overflow-y: auto;
|
|
266
315
|
overflow-x: hidden;
|
|
267
316
|
padding: 20px;
|
|
@@ -272,26 +321,39 @@ body::after {
|
|
|
272
321
|
align-content: start;
|
|
273
322
|
}
|
|
274
323
|
|
|
275
|
-
#
|
|
276
|
-
|
|
324
|
+
#esp-preview-shell {
|
|
325
|
+
display: none;
|
|
326
|
+
flex: 0 0 372px;
|
|
327
|
+
min-width: 0;
|
|
328
|
+
padding: 20px 20px 20px 0;
|
|
329
|
+
overflow: hidden;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
#workspace.has-preview #pages {
|
|
333
|
+
flex-basis: calc(100% - 372px);
|
|
334
|
+
grid-template-columns: 1fr;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
#workspace.has-preview #esp-preview-shell {
|
|
338
|
+
display: block;
|
|
277
339
|
}
|
|
278
340
|
|
|
279
341
|
.child {
|
|
280
342
|
min-width: 0;
|
|
281
343
|
background: rgba(21, 21, 27, .72);
|
|
282
|
-
border: 1px solid rgba(
|
|
283
|
-
border-top-color: rgba(
|
|
344
|
+
border: 1px solid rgba(43, 55, 47, .78);
|
|
345
|
+
border-top-color: rgba(49, 255, 122, .72);
|
|
284
346
|
border-radius: 8px;
|
|
285
347
|
padding: 18px 18px 16px;
|
|
286
348
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .018);
|
|
287
349
|
}
|
|
288
|
-
.child:hover { border-color: rgba(
|
|
350
|
+
.child:hover { border-color: rgba(68, 93, 76, .9); border-top-color: rgba(49, 255, 122, .95); }
|
|
289
351
|
.child h3 {
|
|
290
352
|
font-size: 12px;
|
|
291
353
|
color: #6f6b79;
|
|
292
354
|
margin-bottom: 16px;
|
|
293
355
|
font-weight: 900;
|
|
294
|
-
letter-spacing:
|
|
356
|
+
letter-spacing: 0;
|
|
295
357
|
}
|
|
296
358
|
.empty-state {
|
|
297
359
|
grid-column: 1 / -1;
|
|
@@ -352,9 +414,9 @@ body::after {
|
|
|
352
414
|
transition: transform .18s ease, background .18s ease;
|
|
353
415
|
}
|
|
354
416
|
.tgl input:checked + .track {
|
|
355
|
-
background: #
|
|
356
|
-
border-color: rgba(
|
|
357
|
-
box-shadow: 0 0 12px rgba(
|
|
417
|
+
background: #102318;
|
|
418
|
+
border-color: rgba(49, 255, 122, .56);
|
|
419
|
+
box-shadow: 0 0 12px rgba(49, 255, 122, .26);
|
|
358
420
|
}
|
|
359
421
|
.tgl input:checked + .track .knob { transform: translate(14px, -50%); background: var(--accent); }
|
|
360
422
|
|
|
@@ -386,10 +448,10 @@ body::after {
|
|
|
386
448
|
width: 16px;
|
|
387
449
|
height: 16px;
|
|
388
450
|
border-radius: 50%;
|
|
389
|
-
background: #
|
|
451
|
+
background: #516558;
|
|
390
452
|
border: 0;
|
|
391
453
|
cursor: pointer;
|
|
392
|
-
box-shadow: 0 0 0 3px rgba(
|
|
454
|
+
box-shadow: 0 0 0 3px rgba(49, 255, 122, .1);
|
|
393
455
|
}
|
|
394
456
|
.rng input[type=range]:active::-webkit-slider-thumb { background: var(--accent); }
|
|
395
457
|
|
|
@@ -409,7 +471,7 @@ body::after {
|
|
|
409
471
|
}
|
|
410
472
|
.ctrl select { color: #787485; cursor: pointer; }
|
|
411
473
|
.ctrl input:focus,
|
|
412
|
-
.ctrl select:focus { border-color: rgba(
|
|
474
|
+
.ctrl select:focus { border-color: rgba(49, 255, 122, .7); }
|
|
413
475
|
|
|
414
476
|
.color-actions {
|
|
415
477
|
display: flex;
|
|
@@ -426,7 +488,7 @@ body::after {
|
|
|
426
488
|
position: relative;
|
|
427
489
|
overflow: hidden;
|
|
428
490
|
display: inline-block;
|
|
429
|
-
box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 14px rgba(
|
|
491
|
+
box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 14px rgba(49, 255, 122, .14);
|
|
430
492
|
}
|
|
431
493
|
.clr-btn input[type=color] { opacity: 0; position: absolute; inset: -4px; cursor: pointer; }
|
|
432
494
|
.clr-btn .swatch { width: 100%; height: 100%; display: block; }
|
|
@@ -444,10 +506,12 @@ body::after {
|
|
|
444
506
|
.key-btn.listening {
|
|
445
507
|
color: #fff;
|
|
446
508
|
border-color: var(--accent);
|
|
447
|
-
box-shadow: 0 0 16px rgba(
|
|
509
|
+
box-shadow: 0 0 16px rgba(49, 255, 122, .32);
|
|
448
510
|
}
|
|
449
511
|
|
|
450
512
|
#statusbar {
|
|
513
|
+
position: relative;
|
|
514
|
+
z-index: 1;
|
|
451
515
|
width: var(--panel-w);
|
|
452
516
|
min-height: 42px;
|
|
453
517
|
display: flex;
|
|
@@ -455,9 +519,9 @@ body::after {
|
|
|
455
519
|
gap: 10px;
|
|
456
520
|
margin-top: 8px;
|
|
457
521
|
padding: 0 14px;
|
|
458
|
-
border: 1px solid rgba(
|
|
522
|
+
border: 1px solid rgba(47, 66, 53, .68);
|
|
459
523
|
border-radius: var(--radius);
|
|
460
|
-
background: rgba(
|
|
524
|
+
background: rgba(8, 10, 9, .94);
|
|
461
525
|
color: #716f80;
|
|
462
526
|
font-size: 12px;
|
|
463
527
|
}
|
|
@@ -479,13 +543,13 @@ body::after {
|
|
|
479
543
|
color: #fff;
|
|
480
544
|
cursor: pointer;
|
|
481
545
|
font: 900 12px var(--font);
|
|
482
|
-
box-shadow: 0 0 16px rgba(
|
|
546
|
+
box-shadow: 0 0 16px rgba(49, 255, 122, .22);
|
|
483
547
|
}
|
|
484
548
|
#statusbar .s-btn:hover { filter: brightness(1.1); }
|
|
485
549
|
#statusbar .s-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
|
|
486
550
|
#statusbar .s-btn.stop { background: var(--danger); box-shadow: 0 0 16px rgba(241, 93, 98, .24); }
|
|
487
551
|
#statusbar .kill-btn {
|
|
488
|
-
background: #
|
|
552
|
+
background: #151916;
|
|
489
553
|
color: #aaa5b8;
|
|
490
554
|
box-shadow: none;
|
|
491
555
|
}
|
|
@@ -504,12 +568,12 @@ body::after {
|
|
|
504
568
|
padding: 34px 28px;
|
|
505
569
|
text-align: center;
|
|
506
570
|
background: #141419;
|
|
507
|
-
border: 1px solid rgba(
|
|
571
|
+
border: 1px solid rgba(49, 255, 122, .28);
|
|
508
572
|
border-top-color: var(--accent);
|
|
509
573
|
border-radius: 8px;
|
|
510
574
|
box-shadow: 0 24px 70px rgba(0,0,0,.5);
|
|
511
575
|
}
|
|
512
|
-
#license-box .logo-icon { width:
|
|
576
|
+
#license-box .logo-icon { width: 56px; height: 56px; margin: 0 auto 14px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(49, 255, 122, .24)); }
|
|
513
577
|
#license-box h1 { font-size: 23px; font-weight: 900; margin-bottom: 4px; }
|
|
514
578
|
#license-box h1 span { color: var(--accent); }
|
|
515
579
|
#license-box .subtitle { color: var(--text3); font-size: 12px; margin-bottom: 20px; font-weight: 800; }
|
|
@@ -526,7 +590,7 @@ body::after {
|
|
|
526
590
|
margin-bottom: 12px;
|
|
527
591
|
text-align: center;
|
|
528
592
|
}
|
|
529
|
-
#license-box input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(
|
|
593
|
+
#license-box input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(49, 255, 122, .14); }
|
|
530
594
|
#license-box button {
|
|
531
595
|
width: 100%;
|
|
532
596
|
height: 40px;
|
|
@@ -555,7 +619,7 @@ body::after {
|
|
|
555
619
|
#qr-box {
|
|
556
620
|
width: min(340px, calc(100vw - 30px));
|
|
557
621
|
background: #141419;
|
|
558
|
-
border: 1px solid rgba(
|
|
622
|
+
border: 1px solid rgba(49, 255, 122, .3);
|
|
559
623
|
border-radius: 8px;
|
|
560
624
|
padding: 22px;
|
|
561
625
|
text-align: center;
|
|
@@ -563,22 +627,33 @@ body::after {
|
|
|
563
627
|
}
|
|
564
628
|
#qr-box img { width: min(240px, 74vw) !important; height: auto !important; border-radius: 4px !important; }
|
|
565
629
|
|
|
566
|
-
.esp-preview-
|
|
567
|
-
|
|
568
|
-
grid-row: 1 / span 2;
|
|
569
|
-
position: sticky;
|
|
570
|
-
top: 0;
|
|
630
|
+
.esp-preview-panel {
|
|
631
|
+
height: 100%;
|
|
571
632
|
min-height: 430px;
|
|
633
|
+
background: rgba(13, 16, 14, .86);
|
|
634
|
+
border: 1px solid rgba(43, 55, 47, .78);
|
|
635
|
+
border-top-color: rgba(49, 255, 122, .78);
|
|
636
|
+
border-radius: 8px;
|
|
637
|
+
padding: 18px;
|
|
638
|
+
box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 18px 42px rgba(0,0,0,.18);
|
|
639
|
+
}
|
|
640
|
+
.esp-preview-panel h3 {
|
|
641
|
+
font-size: 12px;
|
|
642
|
+
color: #819086;
|
|
643
|
+
margin-bottom: 16px;
|
|
644
|
+
font-weight: 900;
|
|
645
|
+
letter-spacing: 0;
|
|
572
646
|
}
|
|
573
647
|
.esp-stage {
|
|
574
|
-
height:
|
|
648
|
+
height: calc(100% - 32px);
|
|
649
|
+
min-height: 360px;
|
|
575
650
|
position: relative;
|
|
576
651
|
overflow: hidden;
|
|
577
652
|
border-radius: 6px;
|
|
578
653
|
background:
|
|
579
|
-
linear-gradient(180deg, rgba(
|
|
580
|
-
radial-gradient(circle at 72% 42%, rgba(
|
|
581
|
-
border: 1px solid #
|
|
654
|
+
linear-gradient(180deg, rgba(22, 27, 24, .9) 0 54%, rgba(12, 23, 15, .94) 54%),
|
|
655
|
+
radial-gradient(circle at 72% 42%, rgba(49, 255, 122, .13), transparent 28%);
|
|
656
|
+
border: 1px solid #202922;
|
|
582
657
|
}
|
|
583
658
|
.esp-grid-bg {
|
|
584
659
|
position: absolute;
|
|
@@ -629,6 +704,7 @@ body::after {
|
|
|
629
704
|
inset: 18px 16px 12px;
|
|
630
705
|
border: var(--esp-thick) dashed var(--esp-color);
|
|
631
706
|
filter: drop-shadow(0 0 7px var(--esp-color));
|
|
707
|
+
z-index: 3;
|
|
632
708
|
}
|
|
633
709
|
.esp-box.solid { border-style: solid; }
|
|
634
710
|
.esp-box.corner { border: 0; }
|
|
@@ -657,14 +733,17 @@ body::after {
|
|
|
657
733
|
border: 2px solid var(--esp-color);
|
|
658
734
|
border-radius: 50%;
|
|
659
735
|
filter: drop-shadow(0 0 8px var(--esp-color));
|
|
736
|
+
z-index: 6;
|
|
660
737
|
}
|
|
661
738
|
.esp-skeleton {
|
|
662
739
|
position: absolute;
|
|
663
740
|
left: 50%;
|
|
664
|
-
top:
|
|
665
|
-
width:
|
|
666
|
-
height:
|
|
741
|
+
top: 60px;
|
|
742
|
+
width: 58px;
|
|
743
|
+
height: 102px;
|
|
667
744
|
transform: translateX(-50%);
|
|
745
|
+
z-index: 5;
|
|
746
|
+
pointer-events: none;
|
|
668
747
|
}
|
|
669
748
|
.esp-skeleton span {
|
|
670
749
|
position: absolute;
|
|
@@ -672,11 +751,11 @@ body::after {
|
|
|
672
751
|
box-shadow: 0 0 8px var(--esp-color);
|
|
673
752
|
}
|
|
674
753
|
.esp-skeleton.dashed span { background: repeating-linear-gradient(180deg, var(--esp-color) 0 7px, transparent 7px 11px); }
|
|
675
|
-
.esp-skeleton .spine { left: 50%; top: 0; width: var(--esp-thick); height:
|
|
676
|
-
.esp-skeleton .arms { left: 12px; top:
|
|
677
|
-
.esp-skeleton .leg { bottom: 0; width: var(--esp-thick); height:
|
|
678
|
-
.esp-skeleton .leg.left { left:
|
|
679
|
-
.esp-skeleton .leg.right { left:
|
|
754
|
+
.esp-skeleton .spine { left: 50%; top: 0; width: var(--esp-thick); height: 60px; transform: translateX(-50%); }
|
|
755
|
+
.esp-skeleton .arms { left: 12px; top: 24px; width: 34px; height: var(--esp-thick); transform: rotate(8deg); }
|
|
756
|
+
.esp-skeleton .leg { bottom: 0; width: var(--esp-thick); height: 46px; transform-origin: top; }
|
|
757
|
+
.esp-skeleton .leg.left { left: 27px; transform: rotate(17deg); }
|
|
758
|
+
.esp-skeleton .leg.right { left: 30px; transform: rotate(-17deg); }
|
|
680
759
|
.esp-bar {
|
|
681
760
|
position: absolute;
|
|
682
761
|
top: 20px;
|
|
@@ -686,6 +765,7 @@ body::after {
|
|
|
686
765
|
border-radius: 999px;
|
|
687
766
|
overflow: hidden;
|
|
688
767
|
box-shadow: 0 0 0 1px rgba(255,255,255,.08);
|
|
768
|
+
z-index: 4;
|
|
689
769
|
}
|
|
690
770
|
.esp-bar.health { left: 5px; }
|
|
691
771
|
.esp-bar.armor { right: 5px; }
|
|
@@ -706,6 +786,7 @@ body::after {
|
|
|
706
786
|
font-weight: 900;
|
|
707
787
|
white-space: nowrap;
|
|
708
788
|
text-shadow: 0 1px 4px #000, 0 0 8px var(--esp-color);
|
|
789
|
+
z-index: 7;
|
|
709
790
|
}
|
|
710
791
|
.esp-text.top { left: 50%; top: 0; transform: translate(-50%, -100%); }
|
|
711
792
|
.esp-text.bottom { left: 50%; bottom: -2px; transform: translate(-50%, 100%); }
|
|
@@ -721,6 +802,7 @@ body::after {
|
|
|
721
802
|
background: var(--esp-color);
|
|
722
803
|
box-shadow: 0 0 8px var(--esp-color);
|
|
723
804
|
transform-origin: top;
|
|
805
|
+
z-index: 2;
|
|
724
806
|
}
|
|
725
807
|
.esp-line.place-0 { bottom: 0; top: auto; transform: translateX(-50%) rotate(0deg); }
|
|
726
808
|
.esp-line.place-1 { top: 50%; transform: translate(-50%, -4px) rotate(0deg); }
|
|
@@ -735,6 +817,7 @@ body::after {
|
|
|
735
817
|
transform: rotate(-19deg);
|
|
736
818
|
transform-origin: left center;
|
|
737
819
|
box-shadow: 0 0 8px var(--esp-color);
|
|
820
|
+
z-index: 2;
|
|
738
821
|
}
|
|
739
822
|
.esp-offscreen {
|
|
740
823
|
position: absolute;
|
|
@@ -779,18 +862,8 @@ body::after {
|
|
|
779
862
|
font-size: 0;
|
|
780
863
|
letter-spacing: 0;
|
|
781
864
|
}
|
|
782
|
-
.brand
|
|
783
|
-
|
|
784
|
-
display: grid;
|
|
785
|
-
place-items: center;
|
|
786
|
-
width: 34px;
|
|
787
|
-
height: 34px;
|
|
788
|
-
border-radius: 50%;
|
|
789
|
-
color: #16161d;
|
|
790
|
-
background: #f3f2f7;
|
|
791
|
-
font-size: 18px;
|
|
792
|
-
font-weight: 900;
|
|
793
|
-
}
|
|
865
|
+
.brand img { width: 34px; height: 34px; }
|
|
866
|
+
.brand span { display: none; }
|
|
794
867
|
.nav-scroll { padding: 6px; }
|
|
795
868
|
.nav-heading {
|
|
796
869
|
display: none;
|
|
@@ -826,12 +899,26 @@ body::after {
|
|
|
826
899
|
padding: 7px 9px;
|
|
827
900
|
font-size: 11px;
|
|
828
901
|
}
|
|
829
|
-
#
|
|
830
|
-
|
|
902
|
+
#workspace {
|
|
903
|
+
overflow-y: auto;
|
|
904
|
+
flex-direction: column;
|
|
905
|
+
}
|
|
906
|
+
#pages {
|
|
907
|
+
flex: 0 0 auto;
|
|
908
|
+
overflow: visible;
|
|
831
909
|
grid-template-columns: 1fr;
|
|
832
910
|
gap: 12px;
|
|
833
911
|
padding: 12px;
|
|
834
912
|
}
|
|
913
|
+
#workspace.has-preview #pages {
|
|
914
|
+
flex-basis: auto;
|
|
915
|
+
}
|
|
916
|
+
#esp-preview-shell {
|
|
917
|
+
order: -1;
|
|
918
|
+
flex: 0 0 auto;
|
|
919
|
+
padding: 12px 12px 0;
|
|
920
|
+
overflow: visible;
|
|
921
|
+
}
|
|
835
922
|
.child {
|
|
836
923
|
padding: 15px 14px;
|
|
837
924
|
}
|
|
@@ -853,11 +940,11 @@ body::after {
|
|
|
853
940
|
max-width: 142px;
|
|
854
941
|
font-size: 12px;
|
|
855
942
|
}
|
|
856
|
-
.esp-preview-
|
|
857
|
-
|
|
858
|
-
|
|
943
|
+
.esp-preview-panel {
|
|
944
|
+
min-height: 360px;
|
|
945
|
+
height: auto;
|
|
859
946
|
}
|
|
860
|
-
.esp-stage { height:
|
|
947
|
+
.esp-stage { height: 300px; min-height: 300px; }
|
|
861
948
|
#statusbar {
|
|
862
949
|
position: fixed;
|
|
863
950
|
left: 0;
|
|
@@ -900,9 +987,6 @@ body::after {
|
|
|
900
987
|
.rng { grid-template-columns: 38px 1fr; gap: 8px; }
|
|
901
988
|
.color-row { align-items: flex-start; }
|
|
902
989
|
.color-actions { flex-shrink: 0; }
|
|
903
|
-
.esp-stage { height:
|
|
904
|
-
.esp-preview-
|
|
905
|
-
grid-column: auto;
|
|
906
|
-
position: static;
|
|
907
|
-
}
|
|
990
|
+
.esp-stage { height: 280px; min-height: 280px; }
|
|
991
|
+
.esp-preview-panel { min-height: 334px; }
|
|
908
992
|
}
|
package/public/index.html
CHANGED
|
@@ -12,10 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
<div id="license-overlay">
|
|
14
14
|
<div id="license-box">
|
|
15
|
-
<
|
|
16
|
-
<path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
|
|
17
|
-
<path d="M9 12l2 2 4-4"/>
|
|
18
|
-
</svg>
|
|
15
|
+
<img class="logo-icon" src="/assets/logo.png" alt="Sensivity">
|
|
19
16
|
<h1>Sensivity <span>License</span></h1>
|
|
20
17
|
<p class="subtitle">Enter your key to unlock</p>
|
|
21
18
|
<input type="text" id="license-key" placeholder="SENSIVITY-XXXX-XXXX-XXXX-XXXX-XXXXXXXX" onkeydown="if(event.key==='Enter')submitLicense()">
|
|
@@ -28,7 +25,10 @@
|
|
|
28
25
|
<div id="sidebar"></div>
|
|
29
26
|
<div id="content">
|
|
30
27
|
<div id="topbar"></div>
|
|
31
|
-
<div id="
|
|
28
|
+
<div id="workspace">
|
|
29
|
+
<div id="pages"></div>
|
|
30
|
+
<aside id="esp-preview-shell"></aside>
|
|
31
|
+
</div>
|
|
32
32
|
</div>
|
|
33
33
|
</div>
|
|
34
34
|
<div id="statusbar">
|
package/public/js/app.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
const SOCKET = (typeof io !== 'undefined') ? io() : null;
|
|
2
2
|
let state = {}, currentSection = 0, currentSub = 0;
|
|
3
3
|
let licenseAccepted = false, cheatRunning = false, listeningKeybind = null;
|
|
4
|
+
let espSyncTimer = null;
|
|
4
5
|
|
|
5
6
|
const SECTION_GROUPS = [
|
|
6
7
|
{ label: 'AIMBOT', ids: ['aim'] },
|
|
@@ -48,7 +49,7 @@ function renderSidebar() {
|
|
|
48
49
|
}).join('');
|
|
49
50
|
|
|
50
51
|
el.innerHTML = `
|
|
51
|
-
<div class="brand">SENSIVITY</div>
|
|
52
|
+
<div class="brand"><img src="/assets/logo.png" alt="Sensivity"><span>SENSIVITY</span></div>
|
|
52
53
|
<div class="nav-scroll">${grouped}</div>`;
|
|
53
54
|
}
|
|
54
55
|
|
|
@@ -67,21 +68,24 @@ function renderTopbar() {
|
|
|
67
68
|
<div class="sub-tabs">
|
|
68
69
|
${subs.map((x, i) => `<button class="sub-tab${i === currentSub ? ' active' : ''}" onclick="setSub(${i})">${x.label}</button>`).join('')}
|
|
69
70
|
</div>
|
|
70
|
-
<div class="profile-dot"
|
|
71
|
+
<div class="profile-dot"><img src="/assets/logo.png" alt=""></div>`;
|
|
71
72
|
}
|
|
72
73
|
|
|
73
74
|
function renderPage() {
|
|
74
75
|
const sub = currentSubData();
|
|
75
76
|
const pg = document.getElementById('pages');
|
|
77
|
+
const showPreview = shouldShowEspPreview();
|
|
78
|
+
const workspace = document.getElementById('workspace');
|
|
79
|
+
if (workspace) workspace.classList.toggle('has-preview', showPreview);
|
|
76
80
|
if (!sub || !sub.children || !sub.children.length) {
|
|
77
81
|
pg.innerHTML = '<div class="child empty-state">No settings</div>';
|
|
82
|
+
renderEspPreviewShell(false);
|
|
78
83
|
return;
|
|
79
84
|
}
|
|
80
85
|
|
|
81
86
|
const children = sub.children.map(ch => `<div class="child"><h3>${ch.label}</h3>${(ch.controls || []).map(ctrl).join('')}</div>`).join('');
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
pg.innerHTML = preview + children;
|
|
87
|
+
pg.innerHTML = children;
|
|
88
|
+
renderEspPreviewShell(showPreview);
|
|
85
89
|
}
|
|
86
90
|
|
|
87
91
|
function prettyLabel(key) {
|
|
@@ -116,7 +120,12 @@ function set(k, t, v) {
|
|
|
116
120
|
state[k] = state[k] || { value: false, color: [1, 1, 1, 1] };
|
|
117
121
|
if (typeof v === 'object') state[k] = v;
|
|
118
122
|
} else state[k] = v;
|
|
123
|
+
if (shouldAutoEnablePlayerEsp(k, t, state[k])) {
|
|
124
|
+
state['Enable ESP'] = true;
|
|
125
|
+
emit('Enable ESP', 'checkbox', true);
|
|
126
|
+
}
|
|
119
127
|
emit(k, t, state[k]);
|
|
128
|
+
queuePlayerEspSync(k);
|
|
120
129
|
rerender();
|
|
121
130
|
}
|
|
122
131
|
|
|
@@ -125,6 +134,7 @@ function sliderUp(k, t, el) {
|
|
|
125
134
|
state[k] = v;
|
|
126
135
|
el.previousElementSibling.textContent = t === 'slider_int' ? v : v.toFixed(1);
|
|
127
136
|
emit(k, t, v);
|
|
137
|
+
queuePlayerEspSync(k);
|
|
128
138
|
if (shouldShowEspPreview()) updateEspPreview();
|
|
129
139
|
}
|
|
130
140
|
|
|
@@ -134,6 +144,7 @@ function colorUp(k, hex) {
|
|
|
134
144
|
cur.color = [r, g, b, cur.color[3] || 1];
|
|
135
145
|
state[k] = cur;
|
|
136
146
|
emit(k, 'color_checkbox', cur);
|
|
147
|
+
queuePlayerEspSync(k);
|
|
137
148
|
rerender();
|
|
138
149
|
}
|
|
139
150
|
|
|
@@ -141,6 +152,30 @@ function emit(k, t, v) {
|
|
|
141
152
|
if (SOCKET && SOCKET.connected) SOCKET.emit('setConfig', { key: k, type: t, value: v });
|
|
142
153
|
}
|
|
143
154
|
|
|
155
|
+
function visualPlayerControls() {
|
|
156
|
+
const visuals = SCHEMA.sections.find(s => s.id === 'visuals');
|
|
157
|
+
const player = visuals && (visuals.subs || []).find(sub => sub.id === 'vplayer');
|
|
158
|
+
if (!player) return [];
|
|
159
|
+
return (player.children || []).flatMap(ch => ch.controls || []);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
function shouldAutoEnablePlayerEsp(key, type, value) {
|
|
163
|
+
if (key === 'Enable ESP' || type !== 'color_checkbox') return false;
|
|
164
|
+
if (!visualPlayerControls().some(c => c.key === key)) return false;
|
|
165
|
+
return !!(value && value.value) && !state['Enable ESP'];
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
function queuePlayerEspSync(changedKey) {
|
|
169
|
+
const controls = visualPlayerControls();
|
|
170
|
+
if (!controls.some(c => c.key === changedKey)) return;
|
|
171
|
+
clearTimeout(espSyncTimer);
|
|
172
|
+
espSyncTimer = setTimeout(() => {
|
|
173
|
+
controls.forEach(c => {
|
|
174
|
+
if (state[c.key] !== undefined) emit(c.key, c.type, state[c.key]);
|
|
175
|
+
});
|
|
176
|
+
}, 35);
|
|
177
|
+
}
|
|
178
|
+
|
|
144
179
|
function setSection(i) {
|
|
145
180
|
currentSection = i;
|
|
146
181
|
currentSub = 0;
|
|
@@ -244,7 +279,13 @@ function shouldShowEspPreview() {
|
|
|
244
279
|
}
|
|
245
280
|
|
|
246
281
|
function renderEspPreviewCard() {
|
|
247
|
-
return `<div class="
|
|
282
|
+
return `<div class="esp-preview-panel"><h3>Live Preview</h3><div class="esp-stage" id="esp-stage">${espPreviewMarkup()}</div></div>`;
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
function renderEspPreviewShell(showPreview) {
|
|
286
|
+
const shell = document.getElementById('esp-preview-shell');
|
|
287
|
+
if (!shell) return;
|
|
288
|
+
shell.innerHTML = showPreview ? renderEspPreviewCard() : '';
|
|
248
289
|
}
|
|
249
290
|
|
|
250
291
|
function updateEspPreview() {
|
|
@@ -191,7 +191,7 @@ const SCHEMA = {
|
|
|
191
191
|
label: 'Player',
|
|
192
192
|
children: [
|
|
193
193
|
{ id: 'espMain', label: 'ESP Settings', controls: [
|
|
194
|
-
{ key: 'Enable ESP', type: 'checkbox', def: false },
|
|
194
|
+
{ key: 'Enable ESP', type: 'checkbox', def: false, bind: true },
|
|
195
195
|
{ key: 'ESP Distance', type: 'slider_int', def: 0, min: 0, max: 3000 },
|
|
196
196
|
{ key: 'ESP Show Local Player', type: 'checkbox', def: false },
|
|
197
197
|
{ key: 'ESP Ignore Invisible', type: 'checkbox', def: false },
|
|
@@ -343,7 +343,13 @@ const SCHEMA = {
|
|
|
343
343
|
subs: [{
|
|
344
344
|
id: 'wmain',
|
|
345
345
|
label: 'Teleport',
|
|
346
|
-
children: [
|
|
346
|
+
children: [
|
|
347
|
+
{ id: 'worldTeleport', label: 'World Teleport', controls: [
|
|
348
|
+
{ key: 'Enable Freecam', type: 'checkbox', def: false, bind: true },
|
|
349
|
+
{ key: 'Freecam Speed', type: 'slider_float', def: 100, min: 1, max: 1000, step: 1 },
|
|
350
|
+
{ key: 'Freecam Teleport', type: 'checkbox', def: false, bind: true },
|
|
351
|
+
]},
|
|
352
|
+
]
|
|
347
353
|
}]
|
|
348
354
|
},
|
|
349
355
|
{
|