#12200 snow effect added

This commit is contained in:
Jorge Rincon 2023-11-15 17:07:47 +01:00
parent c7a746ea41
commit 811363cbec
3 changed files with 500 additions and 3 deletions

View File

@ -170,10 +170,11 @@ class GeneralTacticalView
$name = '';
}
// 👋
if (empty($name) === true) {
$message = __('Welcome back! 👋');
$message = __('Welcome back! 🎅');
} else {
$message = __('Welcome back %s! 👋', $name);
$message = __('Welcome back %s! 🎅', $name);
}
return html_print_div(

View File

@ -12792,3 +12792,481 @@ tr.shown td.details-control {
position: relative;
top: -92px;
}
@-moz-keyframes nieve {
from {
top: -40px;
}
to {
top: 101%;
}
}
@-webkit-keyframes nieve {
from {
top: -40px;
}
to {
top: 2000px;
}
}
@keyframes nieve {
from {
top: -40px;
}
to {
top: 2000px;
}
}
@-moz-keyframes horiz2 {
20% {
transform: translateX(0);
}
50% {
transform: translateX(150px);
}
80% {
transform: translateX(0);
}
}
@-webkit-keyframes horiz2 {
20% {
transform: translateX(0);
}
50% {
transform: translateX(150px);
}
80% {
transform: translateX(0);
}
}
@keyframes horiz2 {
20% {
transform: translateX(0);
}
50% {
transform: translateX(-70px);
}
80% {
transform: translateX(0);
}
}
@-moz-keyframes horiz {
20% {
transform: translateX(0);
}
50% {
transform: translateX(150px);
}
80% {
transform: translateX(0);
}
}
@-webkit-keyframes horiz {
20% {
transform: translateX(0);
}
50% {
transform: translateX(150px);
}
80% {
transform: translateX(0);
}
}
@keyframes horiz {
20% {
transform: translateX(0);
}
50% {
transform: translateX(150px);
}
80% {
transform: translateX(0);
}
}
#container-snow > div {
position: fixed;
-webkit-animation: ease-in infinite normal;
-moz-animation: ease-in infinite normal;
animation: ease-in infinite normal;
}
#container-snow > div {
z-index: 9999999999999;
width: 15px;
height: 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background-color: #e8ede5;
-webkit-animation-name: nieve, horiz;
-moz-animation-name: nieve, horiz;
animation-name: nieve, horiz;
}
#container-snow > div:nth-of-type(odd) {
width: 5px;
height: 5px;
-webkit-animation-name: nieve, horiz2;
-moz-animation-name: nieve, horiz2;
animation-name: nieve, horiz2;
}
#container-snow > div:nth-of-type(1) {
left: 40px;
-webkit-animation-duration: 5.5s;
-moz-animation-duration: 5.5s;
animation-duration: 5.5s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(2) {
left: 120px;
-webkit-animation-duration: 7s;
-moz-animation-duration: 7s;
animation-duration: 7s;
}
#container-snow > div:nth-of-type(3) {
left: 200px;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
animation-duration: 8s;
}
#container-snow > div:nth-of-type(4) {
left: 20%;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
animation-duration: 6s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(5) {
left: 30%;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
animation-duration: 9s;
}
#container-snow > div:nth-of-type(6) {
left: 40%;
-webkit-animation-duration: 7.2s;
-moz-animation-duration: 7.2s;
animation-duration: 7.2s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(7) {
left: 50%;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
}
#container-snow > div:nth-of-type(8) {
left: 60%;
-webkit-animation-duration: 6.4s;
-moz-animation-duration: 6.4s;
animation-duration: 6.4s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(9) {
left: 70%;
-webkit-animation-duration: 10s;
-moz-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
animation-delay: 1.4s;
}
#container-snow > div:nth-of-type(10) {
left: 80%;
-webkit-animation-duration: 8s;
-moz-animation-duration: 8s;
animation-duration: 8s;
}
#container-snow > div:nth-of-type(11) {
left: 90%;
-webkit-animation-duration: 7.1s;
-moz-animation-duration: 7.1s;
animation-duration: 7.1s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
#container-snow > div:nth-of-type(12) {
left: 99%;
-webkit-animation-duration: 6.6s;
-moz-animation-duration: 6.6s;
animation-duration: 6.6s;
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#container-snow > div:nth-of-type(13) {
left: 10px;
-webkit-animation-duration: 10.2s;
-moz-animation-duration: 10.2s;
animation-duration: 10.2s;
}
#container-snow > div:nth-of-type(14) {
left: 180px;
-webkit-animation-duration: 12s;
-moz-animation-duration: 12s;
animation-duration: 12s;
}
#container-snow > div:nth-of-type(15) {
left: 213px;
-webkit-animation-duration: 7.3s;
-moz-animation-duration: 7.3s;
animation-duration: 7.3s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#container-snow > div:nth-of-type(16) {
left: 23%;
-webkit-animation-duration: 9.2s;
-moz-animation-duration: 9.2s;
animation-duration: 9.2s;
}
#container-snow > div:nth-of-type(17) {
left: 38%;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
animation-duration: 5s;
}
#container-snow > div:nth-of-type(18) {
left: 45%;
-webkit-animation-duration: 15s;
-moz-animation-duration: 15s;
animation-duration: 15s;
}
#container-snow > div:nth-of-type(19) {
left: 58%;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
animation-duration: 5s;
}
#container-snow > div:nth-of-type(20) {
left: 64%;
-webkit-animation-duration: 12s;
-moz-animation-duration: 12s;
animation-duration: 12s;
}
#container-snow > div:nth-of-type(21) {
left: 76%;
-webkit-animation-duration: 5.6s;
-moz-animation-duration: 5.6s;
animation-duration: 5.6s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(22) {
left: 86%;
-webkit-animation-duration: 8.5s;
-moz-animation-duration: 8.5s;
animation-duration: 8.5s;
}
#container-snow > div:nth-of-type(23) {
left: 83%;
-webkit-animation-duration: 14.4s;
-moz-animation-duration: 14.4s;
animation-duration: 14.4s;
}
#container-snow > div:nth-of-type(24) {
left: 95%;
-webkit-animation-duration: 12s;
-moz-animation-duration: 12s;
animation-duration: 12s;
}
#container-snow > div:nth-of-type(25) {
left: 55px;
-webkit-animation-duration: 8.7s;
-moz-animation-duration: 8.7s;
animation-duration: 8.7s;
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
animation-delay: 1.2s;
}
#container-snow > div:nth-of-type(26) {
left: 133px;
-webkit-animation-duration: 5.2s;
-moz-animation-duration: 5.2s;
animation-duration: 5.2s;
}
#container-snow > div:nth-of-type(27) {
left: 215px;
-webkit-animation-duration: 10.4s;
-moz-animation-duration: 10.4s;
animation-duration: 10.4s;
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}
#container-snow > div:nth-of-type(28) {
left: 26%;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
animation-duration: 9s;
}
#container-snow > div:nth-of-type(29) {
left: 33%;
-webkit-animation-duration: 12s;
-moz-animation-duration: 12s;
animation-duration: 12s;
}
#container-snow > div:nth-of-type(30) {
left: 49%;
-webkit-animation-duration: 9.4s;
-moz-animation-duration: 9.4s;
animation-duration: 9.4s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(31) {
left: 55%;
-webkit-animation-duration: 9.1s;
-moz-animation-duration: 9.1s;
animation-duration: 9.1s;
}
#container-snow > div:nth-of-type(32) {
left: 68%;
-webkit-animation-duration: 9.6s;
-moz-animation-duration: 9.6s;
animation-duration: 9.6s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#container-snow > div:nth-of-type(33) {
left: 73%;
-webkit-animation-duration: 12.4s;
-moz-animation-duration: 12.4s;
animation-duration: 12.4s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(34) {
left: 85%;
-webkit-animation-duration: 9s;
-moz-animation-duration: 9s;
animation-duration: 9s;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#container-snow > div:nth-of-type(35) {
left: 93%;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
animation-duration: 5s;
}
#container-snow > div:nth-of-type(36) {
left: 99%;
-webkit-animation-duration: 10.6s;
-moz-animation-duration: 10.6s;
animation-duration: 10.6s;
}
#container-snow > div:nth-of-type(37) {
left: 15px;
-webkit-animation-duration: 9.6s;
-moz-animation-duration: 9.6s;
animation-duration: 9.6s;
}
#container-snow > div:nth-of-type(38) {
left: 99px;
-webkit-animation-duration: 7.5s;
-moz-animation-duration: 7.5s;
animation-duration: 7.5s;
}
#container-snow > div:nth-of-type(39) {
left: 260px;
-webkit-animation-duration: 11s;
-moz-animation-duration: 11s;
animation-duration: 11s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(40) {
left: 28%;
-webkit-animation-duration: 19s;
-moz-animation-duration: 19s;
animation-duration: 19s;
}
#container-snow > div:nth-of-type(41) {
left: 35%;
-webkit-animation-duration: 14s;
-moz-animation-duration: 14s;
animation-duration: 14s;
}
#container-snow > div:nth-of-type(42) {
left: 43%;
-webkit-animation-duration: 5.6s;
-moz-animation-duration: 5.6s;
animation-duration: 5.6s;
}
#container-snow > div:nth-of-type(43) {
left: 53%;
-webkit-animation-duration: 8.8s;
-moz-animation-duration: 8.8s;
animation-duration: 8.8s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#container-snow > div:nth-of-type(44) {
left: 66%;
-webkit-animation-duration: 16s;
-moz-animation-duration: 16s;
animation-duration: 16s;
}
#container-snow > div:nth-of-type(45) {
left: 78%;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
animation-duration: 6s;
}
#container-snow > div:nth-of-type(46) {
left: 88%;
-webkit-animation-duration: 9.5s;
-moz-animation-duration: 9.5s;
animation-duration: 9.5s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#container-snow > div:nth-of-type(47) {
left: 94%;
-webkit-animation-duration: 7.6s;
-moz-animation-duration: 7.6s;
animation-duration: 7.6s;
}
#container-snow > div:nth-of-type(48) {
left: 96%;
-webkit-animation-duration: 8.2s;
-moz-animation-duration: 8.2s;
animation-duration: 8.2s;
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}
@media (max-width: 600px) {
#container-snow > div:nth-of-type(24) ~ * {
display: none;
}
}
@media (max-width: 800px) {
#container-snow > div:nth-of-type(36) ~ * {
display: none;
}
}

View File

@ -1198,8 +1198,18 @@ if ($config['pure'] == 0) {
// Menu container prepared to autohide menu.
$menuCollapsed = (isset($_SESSION['menu_type']) === true && $_SESSION['menu_type'] !== 'classic');
$menuTypeClass = ($menuCollapsed === true) ? 'collapsed' : 'classic';
// Snow.
$string = '<div id="container-snow" class="tpl-snow">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>';
// Container.
echo '<div id="container">';
echo '<div id="container">'.$string;
// Notifications content wrapper
echo '<div id="notification-content" class="invisible"/></div>';
@ -1667,4 +1677,12 @@ require 'include/php_to_js_values.php';
$("#"+this.id+" > .subIcon.cog").addClass("rotation");
});
});
// Snow animations.
$(document).ready(function() {
setTimeout(() => {
$("#container-snow").addClass('invisible') ;
}, 30000);
});
</script>