forked from Simnation/Main
ed
This commit is contained in:
Nordi98
parent
369af59fc9
commit
664fa04d1a
40 changed files with 0 additions and 7379 deletions
2
resources/[notify]/okokNotify/.gitattributes
vendored
2
resources/[notify]/okokNotify/.gitattributes
vendored
|
|
@ -1,2 +0,0 @@
|
|||
# Auto detect text files and perform LF normalization
|
||||
* text=auto
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
Hi, thank you for buying my script, I'm very grateful!
|
||||
|
||||
To display a notification you should call it like below:
|
||||
|
||||
# Client side
|
||||
|
||||
exports['okokNotify']:Alert("Title", "Message", Time, 'type')
|
||||
|
||||
# Server side
|
||||
|
||||
TriggerClientEvent('okokNotify:Alert', source, "Title", "Message", Time, 'type')
|
||||
|
||||
|
||||
[Time] - 1000 = 1 second | 5000 = 5 seconds
|
||||
|
||||
Types:
|
||||
- success (green)
|
||||
- info (blue)
|
||||
- warning (yellow)
|
||||
- error (red)
|
||||
- phone (orange)
|
||||
- neutral (grey)
|
||||
|
||||
How to add new colors:
|
||||
|
||||
1. Open styles.css and add the following to the last line.
|
||||
|
||||
/* Example Notification */
|
||||
|
||||
.example-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f11c";
|
||||
color: #color_code;
|
||||
}
|
||||
|
||||
.example {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #color_code;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.example-border {
|
||||
border-left: 4px solid #color_code;
|
||||
}
|
||||
|
||||
To know the content code navigate to https://fontawesome.com/v5.15/icons?d=gallery&p=2, select an icon and copy it's code.
|
||||
|
||||
2. Open scripts.js and add the following to the line 76.
|
||||
|
||||
else if (event.data.type == 'type') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600"
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('type-icon')
|
||||
$(`.wrapper-${number}`).addClass('type type-border')
|
||||
sound.play();
|
||||
}
|
||||
|
||||
Don't forget to change the type to the same name as you choose for "example".
|
||||
|
||||
If you need help contact me on discord: https://discord.gg/Knw8UyqxbQ
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
function Alert(title, message, time, type)
|
||||
SendNUIMessage({
|
||||
action = 'open',
|
||||
title = title,
|
||||
type = type,
|
||||
message = message,
|
||||
time = time,
|
||||
})
|
||||
end
|
||||
|
||||
RegisterNetEvent('okokNotify:Alert')
|
||||
AddEventHandler('okokNotify:Alert', function(title, message, time, type)
|
||||
Alert(title, message, time, type)
|
||||
end)
|
||||
|
||||
-- Example Commands - Delete them
|
||||
|
||||
RegisterCommand('success', function()
|
||||
exports['okokNotify']:Alert("SUCCESS", "You have sent <span style='color:#47cf73'>420€</span> to Tommy!", 5000, 'success')
|
||||
end)
|
||||
|
||||
RegisterCommand('info', function()
|
||||
exports['okokNotify']:Alert("INFO", "The Casino has opened!", 5000, 'info')
|
||||
end)
|
||||
|
||||
RegisterCommand('error', function()
|
||||
exports['okokNotify']:Alert("ERROR", "Please try again later!", 5000, 'error')
|
||||
end)
|
||||
|
||||
RegisterCommand('warning', function()
|
||||
exports['okokNotify']:Alert("WARNING", "You are getting nervous!", 5000, 'warning')
|
||||
end)
|
||||
|
||||
RegisterCommand('phone', function()
|
||||
exports['okokNotify']:Alert("SMS", "<span style='color:#f38847'>Tommy: </span> Where are you?", 5000, 'phonemessage')
|
||||
end)
|
||||
|
||||
RegisterCommand('longtext', function()
|
||||
exports['okokNotify']:Alert("LONG MESSAGE", "Lorem ipsum dolor sit amet, consectetur adipiscing elit e pluribus unum.", 5000, 'neutral')
|
||||
end)
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
fx_version 'adamant'
|
||||
|
||||
game 'gta5'
|
||||
|
||||
author 'okok' -- Discord: okok#3488
|
||||
description 'okokNotify'
|
||||
version '1.0'
|
||||
|
||||
ui_page 'html/ui.html'
|
||||
|
||||
client_scripts {
|
||||
'client.lua',
|
||||
}
|
||||
|
||||
files {
|
||||
'html/*.*'
|
||||
}
|
||||
|
||||
export 'Alert'
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
$(function () {
|
||||
var sound = new Audio('sound.mp3');
|
||||
sound.volume = 0.2;
|
||||
window.addEventListener('message', function (event) {
|
||||
if (event.data.action == 'open') {
|
||||
var number = Math.floor((Math.random() * 1000) + 1);
|
||||
$('.toast').append(`
|
||||
<div class="wrapper-${number}">
|
||||
<div class="notification_main-${number}">
|
||||
<div class="title-${number}"></div>
|
||||
<div class="text-${number}">
|
||||
${event.data.message}
|
||||
</div>
|
||||
</div>
|
||||
</div>`)
|
||||
$(`.wrapper-${number}`).css({
|
||||
"margin-bottom": "10px",
|
||||
"width": "275px",
|
||||
"margin": "0 0 8px -180px",
|
||||
"border-radius": "10px"
|
||||
})
|
||||
$('.notification_main-'+number).addClass('main')
|
||||
$('.text-'+number).css({
|
||||
"font-size": "14px"
|
||||
})
|
||||
|
||||
if (event.data.type == 'success') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600"
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('success-icon')
|
||||
$(`.wrapper-${number}`).addClass('success success-border')
|
||||
|
||||
} else if (event.data.type == 'info') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600"
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('info-icon')
|
||||
$(`.wrapper-${number}`).addClass('info info-border')
|
||||
} else if (event.data.type == 'error') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600"
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('error-icon')
|
||||
$(`.wrapper-${number}`).addClass('error error-border')
|
||||
sound.play();
|
||||
|
||||
} else if (event.data.type == 'warning') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600"
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('warning-icon')
|
||||
$(`.wrapper-${number}`).addClass('warning warning-border')
|
||||
sound.play();
|
||||
} else if (event.data.type == 'phonemessage') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600"
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('phonemessage-icon')
|
||||
$(`.wrapper-${number}`).addClass('phonemessage phonemessage-border')
|
||||
} else if (event.data.type == 'neutral') {
|
||||
$(`.title-${number}`).html(event.data.title).css({
|
||||
"font-size": "16px",
|
||||
"font-weight": "600"
|
||||
})
|
||||
$(`.notification_main-${number}`).addClass('neutral-icon')
|
||||
$(`.wrapper-${number}`).addClass('neutral neutral-border')
|
||||
|
||||
}
|
||||
anime({
|
||||
targets: `.wrapper-${number}`,
|
||||
translateX: -50,
|
||||
duration: 750,
|
||||
easing: 'spring(1, 70, 100, 10)',
|
||||
})
|
||||
setTimeout(function () {
|
||||
anime({
|
||||
targets: `.wrapper-${number}`,
|
||||
translateX: 500,
|
||||
duration: 750,
|
||||
easing: 'spring(1, 80, 100, 0)'
|
||||
})
|
||||
setTimeout(function () {
|
||||
$(`.wrapper-${number}`).remove()
|
||||
}, 750)
|
||||
}, event.data.time)
|
||||
}
|
||||
})
|
||||
})
|
||||
Binary file not shown.
|
|
@ -1,139 +0,0 @@
|
|||
body {
|
||||
margin-top: 100px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toast {
|
||||
width: 100px;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
background-color: #1e1e1e;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: 12px 16px 12px 56px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main::before {
|
||||
font-size: 24px;
|
||||
top: calc(50% - 12px);
|
||||
left: -40px;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* Success Notification*/
|
||||
|
||||
.success-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f058";
|
||||
color: #47cf73;
|
||||
}
|
||||
|
||||
.success {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.success-border {
|
||||
border-left: 4px solid #47cf73;
|
||||
}
|
||||
|
||||
/* Info Notification*/
|
||||
|
||||
.info-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #2f83ff;
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.info-border {
|
||||
border-left: 4px solid #2f83ff;
|
||||
}
|
||||
|
||||
/* Warning Notification */
|
||||
|
||||
.warning-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f071";
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.warning-border {
|
||||
border-left: 4px solid #ffc107;
|
||||
}
|
||||
|
||||
/* Error Notification */
|
||||
|
||||
|
||||
.error-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f06a";
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.error-border {
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
|
||||
/* SMS Notification */
|
||||
|
||||
.phonemessage-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f7cd";
|
||||
color: #f38847;
|
||||
}
|
||||
|
||||
.phonemessage {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.phonemessage-border {
|
||||
border-left: 4px solid #f38847;
|
||||
}
|
||||
|
||||
/* Long Text Notification */
|
||||
|
||||
.neutral-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f11c";
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.neutral {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.neutral-border {
|
||||
border-left: 4px solid #6c757d;
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" integrity="sha512-jQqzj2vHVxA/yCojT8pVZjKGOe9UmoYvnOuM/2sQ110vxiajBU+4WkyRs1ODMmd4AfntwUEV4J+VfM6DkfjLRg==" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="toast"></div>
|
||||
|
||||
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
||||
<script src="scripts.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,166 +0,0 @@
|
|||
Hi, thank you for buying my script, I'm very grateful!
|
||||
|
||||
If you need help contact me on discord: okok#3488
|
||||
Discord server: https://discord.gg/FauTgGRUku
|
||||
|
||||
# To display a text UI
|
||||
|
||||
exports['okokTextUI']:Open('[Key] Message', 'color', 'position')
|
||||
|
||||
Colors:
|
||||
- lightblue;
|
||||
- lightgreen;
|
||||
- lightred;
|
||||
- lightgrey;
|
||||
- darkblue;
|
||||
- darkgreen;
|
||||
- darkred;
|
||||
- darkgrey.
|
||||
|
||||
Positions:
|
||||
- right;
|
||||
- left.
|
||||
|
||||
To make the text bold: exports['okokTextUI']:Open('<b>[Key] Message</b>', 'color', 'position')
|
||||
To insert multiple lines/commands in a text UI: exports['okokTextUI']:Open('[Key] Message 1<br>[Key] Message 2', 'color', 'position')
|
||||
|
||||
NOTE: 'color' and 'position' should be placed between ''
|
||||
|
||||
# To hide a text UI
|
||||
|
||||
exports['okokTextUI']:Close()
|
||||
|
||||
How to add new colors:
|
||||
|
||||
1. Open styles.css and add the following to the last line.
|
||||
|
||||
/* Example Notification */
|
||||
|
||||
.example-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f11c";
|
||||
color: #color_code;
|
||||
}
|
||||
|
||||
.example {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #color_code;
|
||||
padding: 5px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.example-border {
|
||||
border-left: 4px solid #color_code;
|
||||
}
|
||||
|
||||
/* Example */
|
||||
|
||||
.examplecolor-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #color_code;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.examplecolor {
|
||||
background-color: rgba(240, 240, 240, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.examplecolor-border {
|
||||
border-left: 4px solid #color_code;
|
||||
}
|
||||
|
||||
If you want to set if the background color is light or dark, simply change the background-color on .examplecolor:
|
||||
- background-color: rgba(240, 240, 240, 1); /* LIGHT BACKGROUND */
|
||||
- background-color: rgba(20, 20, 20, 1); /* DARK BACKGROUND */
|
||||
|
||||
|
||||
2. Open scripts.js and add the following to the line 64.
|
||||
|
||||
else if (event.data.color == 'examplecolor') { // Example Color
|
||||
removeClass();
|
||||
$('#main').addClass('examplecolor-icon');
|
||||
$('#wrapper').addClass('examplecolor examplecolor-border');
|
||||
}
|
||||
|
||||
3. In order to make esx_doorlock functional change the code of the function started in the line 69 (client.lua) and do the following:
|
||||
|
||||
```
|
||||
Citizen.CreateThread(function()
|
||||
local inZone = false
|
||||
local locked = true
|
||||
local hasAuth = false
|
||||
local shown = false
|
||||
local size, displayText = 1, _U('unlocked')
|
||||
local color
|
||||
|
||||
while true do
|
||||
Citizen.Wait(0)
|
||||
local letSleep = true
|
||||
inZone = false
|
||||
for k,v in ipairs(Config.DoorList) do
|
||||
if v.distanceToPlayer and v.distanceToPlayer < 50 then
|
||||
letSleep = false
|
||||
|
||||
if v.doors then
|
||||
for k2,v2 in ipairs(v.doors) do
|
||||
FreezeEntityPosition(v2.object, v.locked)
|
||||
end
|
||||
else
|
||||
FreezeEntityPosition(v.object, v.locked)
|
||||
end
|
||||
end
|
||||
|
||||
if v.distanceToPlayer and v.distanceToPlayer < v.maxDistance then
|
||||
inZone = true
|
||||
|
||||
|
||||
if v.size then
|
||||
size = v.size
|
||||
end
|
||||
if v.locked then
|
||||
locked = true
|
||||
else
|
||||
locked = false
|
||||
end
|
||||
if v.isAuthorized then
|
||||
hasAuth = true
|
||||
elseif not v.isAuthorized then
|
||||
hasAuth = false
|
||||
end
|
||||
|
||||
if IsControlJustReleased(0, 38) then
|
||||
if v.isAuthorized then
|
||||
v.locked = not v.locked
|
||||
locked = v.locked
|
||||
TriggerServerEvent('esx_doorlock:updateState', k, v.locked) -- broadcast new state of the door to everyone
|
||||
shown = false
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
if inZone and not shown then
|
||||
shown = true
|
||||
if locked and hasAuth then
|
||||
exports['okokTextUI']:Open('[E] Locked', 'lightred', 'left')
|
||||
elseif not locked and hasAuth then
|
||||
exports['okokTextUI']:Open('[E] Unlocked', 'lightgreen', 'left')
|
||||
elseif locked then
|
||||
exports['okokTextUI']:Open('Locked', 'lightred', 'left')
|
||||
else
|
||||
exports['okokTextUI']:Open('Unlocked', 'lightgreen', 'left')
|
||||
end
|
||||
elseif not inZone and shown then
|
||||
exports['okokTextUI']:Close()
|
||||
shown = false
|
||||
end
|
||||
|
||||
if letSleep then
|
||||
Citizen.Wait(500)
|
||||
end
|
||||
end
|
||||
end)
|
||||
```
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
function Open(message, color, position)
|
||||
SendNUIMessage({
|
||||
action = 'open',
|
||||
message = message,
|
||||
color = color,
|
||||
position = position,
|
||||
})
|
||||
end
|
||||
|
||||
function Close()
|
||||
SendNUIMessage({
|
||||
action = 'close'
|
||||
})
|
||||
end
|
||||
|
||||
RegisterNetEvent('okokTextUI:Open')
|
||||
AddEventHandler('okokTextUI:Open', function(message, color, position)
|
||||
SendNUIMessage({
|
||||
action = 'open',
|
||||
message = message,
|
||||
color = color,
|
||||
position = position,
|
||||
})
|
||||
end)
|
||||
|
||||
RegisterNetEvent('okokTextUI:Close')
|
||||
AddEventHandler('okokTextUI:Close', function()
|
||||
SendNUIMessage({
|
||||
action = 'close'
|
||||
})
|
||||
end)
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
fx_version 'adamant'
|
||||
|
||||
game 'gta5'
|
||||
|
||||
author 'okok' -- Discord: okok#3488
|
||||
description 'okokTextUI'
|
||||
version '1.0'
|
||||
|
||||
ui_page 'web/ui.html'
|
||||
|
||||
client_scripts {
|
||||
'client.lua',
|
||||
}
|
||||
|
||||
files {
|
||||
'web/*.*'
|
||||
}
|
||||
|
||||
export 'Open'
|
||||
export 'Close'
|
||||
|
|
@ -1,89 +0,0 @@
|
|||
played_sound = false
|
||||
position = ''
|
||||
|
||||
function removeClass() {
|
||||
$("#main").removeClass();
|
||||
$("#wrapper").removeClass();
|
||||
}
|
||||
|
||||
window.addEventListener('message', function(event) {
|
||||
var sound = new Audio('sound.mp3');
|
||||
sound.volume = 0.2;
|
||||
|
||||
if (event.data.action == 'open') {
|
||||
position = event.data.position;
|
||||
message = event.data.message;
|
||||
|
||||
$('#message').html(message);
|
||||
|
||||
if (position == 'right') {
|
||||
$('#ui').css('left', '');
|
||||
$('#ui').css('right', '1%');
|
||||
$('#ui').removeClass('hideright');
|
||||
$('#ui').addClass('showright');
|
||||
}
|
||||
if (position == 'left') {
|
||||
$('#ui').css('right', '');
|
||||
$('#ui').css('left', '1%');
|
||||
$('#ui').removeClass('hideleft');
|
||||
$('#ui').addClass('showleft');
|
||||
}
|
||||
|
||||
if (event.data.color == 'lightblue') { // Light Blue
|
||||
removeClass();
|
||||
$('#main').addClass('lightblue-icon');
|
||||
$('#wrapper').addClass('lightblue lightblue-border');
|
||||
} else if (event.data.color == 'lightgreen') { // Light Green
|
||||
removeClass();
|
||||
$('#main').addClass('lightgreen-icon');
|
||||
$('#wrapper').addClass('lightgreen lightgreen-border');
|
||||
} else if (event.data.color == 'lightred') { // Light Red
|
||||
removeClass();
|
||||
$('#main').addClass('lightred-icon');
|
||||
$('#wrapper').addClass('lightred lightred-border');
|
||||
} else if (event.data.color == 'lightgrey') { // Light Red
|
||||
removeClass();
|
||||
$('#main').addClass('lightgrey-icon');
|
||||
$('#wrapper').addClass('lightgrey lightgrey-border');
|
||||
} else if (event.data.color == 'darkblue') { // Dark Blue
|
||||
removeClass();
|
||||
$('#main').addClass('darkblue-icon');
|
||||
$('#wrapper').addClass('darkblue darkblue-border');
|
||||
} else if (event.data.color == 'darkgreen') { // Dark Green
|
||||
removeClass();
|
||||
$('#main').addClass('darkgreen-icon');
|
||||
$('#wrapper').addClass('darkgreen darkgreen-border');
|
||||
} else if (event.data.color == 'darkred') { // Dark Red
|
||||
removeClass();
|
||||
$('#main').addClass('darkred-icon');
|
||||
$('#wrapper').addClass('darkred darkred-border');
|
||||
} else if (event.data.color == 'darkgrey') { // Dark Grey
|
||||
removeClass();
|
||||
$('#main').addClass('darkgrey-icon');
|
||||
$('#wrapper').addClass('darkgrey darkgrey-border');
|
||||
}
|
||||
|
||||
if (played_sound == false) {
|
||||
played_sound = true;
|
||||
}
|
||||
|
||||
} else if (event.data.action == 'close') {
|
||||
|
||||
if (position == 'right') {
|
||||
$('#ui').removeClass('hideleft');
|
||||
$('#ui').removeClass('showleft');
|
||||
$('#ui').removeClass('showright');
|
||||
$('#ui').addClass('hideright');
|
||||
}
|
||||
|
||||
if (position == 'left') {
|
||||
$('#ui').removeClass('hideright');
|
||||
$('#ui').removeClass('showright');
|
||||
$('#ui').removeClass('showleft');
|
||||
$('#ui').addClass('hideleft');
|
||||
}
|
||||
}
|
||||
|
||||
played_sound = false;
|
||||
})
|
||||
|
||||
Binary file not shown.
|
|
@ -1,268 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');
|
||||
|
||||
html, body{
|
||||
font-family: 'Poppins', sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes showright {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
80%, 100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.showright {
|
||||
animation: showright 1s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes hideright {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(-5%);
|
||||
}
|
||||
80%, 100% {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
.hideright {
|
||||
animation: hideright 1s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes showleft {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
80%, 100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
}
|
||||
|
||||
.showleft {
|
||||
animation: showleft 1s ease forwards;
|
||||
}
|
||||
|
||||
@keyframes hideleft {
|
||||
0% {
|
||||
transform: translateX(0px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(5%);
|
||||
}
|
||||
80%, 100% {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.hideleft {
|
||||
animation: hideleft 1s ease forwards;
|
||||
}
|
||||
|
||||
|
||||
#ui {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
min-width: 275px;
|
||||
margin: 0 0 8px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin: 12px 16px 12px 56px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main::before {
|
||||
font-size: 24px;
|
||||
top: calc(50% - 12px);
|
||||
left: -40px;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#message {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Light Blue */
|
||||
|
||||
.lightblue-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #234799;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.lightblue {
|
||||
background-color: rgba(240, 240, 240, 0.85);
|
||||
color: #234799;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.lightblue-border {
|
||||
border-left: 4px solid #234799;
|
||||
}
|
||||
|
||||
/* Light Green */
|
||||
|
||||
.lightgreen-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #20ab4d;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.lightgreen {
|
||||
background-color: rgba(240, 240, 240, 0.85);
|
||||
color: #20ab4d;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.lightgreen-border {
|
||||
border-left: 4px solid #20ab4d;
|
||||
}
|
||||
|
||||
/* Light Red */
|
||||
|
||||
.lightred-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #dc3545;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.lightred {
|
||||
background-color: rgba(240, 240, 240, 0.85);
|
||||
color: #dc3545;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.lightred-border {
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
|
||||
/* Light Grey */
|
||||
|
||||
.lightgrey-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #646464;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.lightgrey {
|
||||
background-color: rgba(240, 240, 240, 0.85);
|
||||
color: #646464;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.lightgrey-border {
|
||||
border-left: 4px solid #646464;
|
||||
}
|
||||
|
||||
/* Dark Blue */
|
||||
|
||||
.darkblue-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #2f83ff;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.darkblue {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.darkblue-border {
|
||||
border-left: 4px solid #2f83ff;
|
||||
}
|
||||
|
||||
/* Dark Green */
|
||||
|
||||
.darkgreen-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #47cf73;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.darkgreen {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.darkgreen-border {
|
||||
border-left: 4px solid #47cf73;
|
||||
}
|
||||
|
||||
/* Dark Red */
|
||||
|
||||
.darkred-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #dc3545;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.darkred {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.darkred-border {
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
|
||||
/* Dark Grey */
|
||||
|
||||
.darkgrey-icon::before {
|
||||
font-family: "Font Awesome 5 Free";
|
||||
content: "\f05a";
|
||||
color: #969696;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.darkgrey {
|
||||
background-color: rgba(20, 20, 20, 0.85);
|
||||
color: #fff;
|
||||
padding: 5px 5px 5px 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.darkgrey-border {
|
||||
border-left: 4px solid #969696;
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css" integrity="sha512-jQqzj2vHVxA/yCojT8pVZjKGOe9UmoYvnOuM/2sQ110vxiajBU+4WkyRs1ODMmd4AfntwUEV4J+VfM6DkfjLRg==" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="ui">
|
||||
<div id="wrapper">
|
||||
<div id="main">
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
||||
<script src="scripts.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue