Skip to content

Commit 119a995

Browse files
Musiker15Musiker15
committed
Update v1.7.5
* New Notification UI
1 parent a12bf73 commit 119a995

File tree

5 files changed

+94
-112
lines changed

5 files changed

+94
-112
lines changed

‎html/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>MSK Notify</title>
6-
<link rel="stylesheet" href="style.css">
7-
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
6+
<title>MSK Notification</title>
7+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
8+
<link rel="stylesheet" href="styles.css">
89
</head>
9-
<body>
10-
<div class="container mapOff">
11-
</div>
10+
11+
<body style="background-color: transparent;">
12+
<div class="d-grid notify-wrapper"></div>
13+
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
14+
<script src="script.js"></script>
1215
</body>
13-
<script src="script.js" type="text/javascript"></script>
1416
</html>

‎html/notification.mp3

26.9 KB
Binary file not shown.

‎html/script.js

Lines changed: 37 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
window.addEventListener('message', (event) => {
2-
if (event.data.map == true) {
3-
$('.container').removeClass('mapOff').addClass('mapOn');
4-
} else {
5-
$('.container').removeClass('mapOn').addClass('mapOff');
2+
if (event.data.action == 'notify') {
3+
notification(event.data.title, event.data.message, event.data.type, event.data.time);
64
}
7-
8-
notification(event.data.message, event.data.duration, event.data.type);
95
})
106

7+
const icons = {
8+
"general" : "fas fa-warehouse",
9+
"info" : "fas fa-info-circle",
10+
"success" : "fas fa-check-circle",
11+
"error" : "fas fa-exclamation-circle",
12+
"warning" : "fas fa-exclamation-triangle"
13+
}
14+
15+
const colours = {
16+
"general" : "#FFFFFF",
17+
"info" : "#75D6FF",
18+
"success" : "#76EE62",
19+
"error" : "#FF4A4A",
20+
"warning" : "#FFCB11"
21+
}
22+
1123
const colors = {
1224
"~r~": "red",
1325
"~b~": "#378cbf",
@@ -30,7 +42,10 @@ const replaceColors = (str, obj) => {
3042
return strToReplace
3143
}
3244

33-
notification = (message, duration, type) => {
45+
var sound = new Audio('notification.mp3');
46+
sound.volume = 0.25;
47+
48+
notification = (title, message, type, time) => {
3449
for (color in colors) {
3550
if (message.includes(color)) {
3651
let obj = {};
@@ -43,14 +58,24 @@ notification = (message, duration, type) => {
4358
}
4459

4560
const notification = $(`
46-
<div class="notify" id="${type}">
47-
<p>${message}</p>
61+
<div class="notify-div wrapper" style="border-left: 0.5vh solid ${colours[type]}; ">
62+
<div class="notify-icon-box" style="border: 0.2vh solid ${colours[type]};">
63+
<i class="${icons[type]} fa-ms notify-icon" style="color: ${colours[type]}"></i>
64+
</div>
65+
66+
<div class="notify-text-box">
67+
<p style="color:${colours[type]}; font-size: 2vh; font-weight: 500; margin-bottom: 0vh; margin-top: 1vh;">${title}</p>
68+
<p style="margin-top: 0; color: rgba(247, 247, 247, 0.75);">${message}</p>
69+
</div>
4870
</div>
49-
`).appendTo(`.container`);
71+
`).appendTo(`.notify-wrapper`);
72+
73+
notification.fadeIn("slow");
74+
sound.play();
5075

5176
setTimeout(() => {
52-
notification.fadeOut(700);
53-
}, duration);
77+
notification.fadeOut("slow");
78+
}, time);
5479

5580
return notification;
5681
}

‎html/style.css

Lines changed: 0 additions & 93 deletions
This file was deleted.

‎html/styles.css

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,800;1,800&display=swap');
2+
3+
.notify-wrapper {
4+
position: absolute;
5+
right: 0vh;
6+
top: 0vh;
7+
margin-right: 2vh;
8+
font-size: 1.8vh;
9+
font-family: 'Montserrat', sans-serif;
10+
}
11+
12+
.notify-div{
13+
box-sizing: border-box;
14+
display: flex;
15+
align-items: center;
16+
padding-left: 2vh;
17+
padding-right: 2vh;
18+
margin-top: 2vh;
19+
width: 44vh;
20+
min-height: 8vh;
21+
22+
background: linear-gradient(93.25deg, #4F4F4F 0%, #0C0C0C 100%);
23+
border-left: 0.44vh solid #FFCB11;
24+
box-shadow: 0vh 0.8vh 0.7 -0.2vh rgba(0, 0, 0, 0.35);
25+
border-radius: 1.34vh;
26+
}
27+
28+
.notify-icon-box{
29+
box-sizing: border-box;
30+
padding: 1.2vh;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
background: #353535;
35+
box-shadow: 0vh 0.4vh 0.4vh rgba(0, 0, 0, 0.47);
36+
border-radius: 0.8vh;
37+
transform: rotate(-45deg);
38+
}
39+
40+
.notify-icon-box i{
41+
transform: rotate(45deg);
42+
font-size: 2.3vh;
43+
}
44+
45+
.notify-text-box{
46+
margin-left: 2.5vh;
47+
align-self: baseline;
48+
}

0 commit comments

Comments
 (0)