diff --git a/pandora_console/images/check-white.svg b/pandora_console/images/check-white.svg
new file mode 100644
index 0000000000..e7863cf1ba
--- /dev/null
+++ b/pandora_console/images/check-white.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>F1630B1D-C694-489C-8C8F-E98AF57D4F04</title>
+ <g id="Welcome-wizard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Pandora-FMS---Welcome-Wizard-2023---1a-Welcome-wizard" transform="translate(-905, -629)" fill="#FFFFFF">
+ <g id="Popup" transform="translate(460, 200)">
+ <g id="Content" transform="translate(20, 96)">
+ <g id="Form" transform="translate(0, 292)">
+ <g id="Principal-por-defecto" transform="translate(305, 26)">
+ <g id="Group-2" transform="translate(38, 11)">
+ <g id="check" transform="translate(82, 4)">
+ <path d="M6,12 C5.5,12 5,11.8 4.6,11.4 L0.6,7.4 C-0.2,6.6 -0.2,5.4 0.6,4.6 C1.4,3.8 2.7,3.8 3.4,4.6 L6,7.2 L12.6,0.6 C13.4,-0.2 14.6,-0.2 15.4,0.6 C16.2,1.4 16.2,2.6 15.4,3.4 L7.4,11.4 C7,11.8 6.5,12 6,12 Z"></path>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/pandora_console/images/welcome-wizard-image.png b/pandora_console/images/welcome-wizard-image.png
new file mode 100644
index 0000000000..aba9647c54
Binary files /dev/null and b/pandora_console/images/welcome-wizard-image.png differ
diff --git a/pandora_console/include/class/WelcomeWindow.class.php b/pandora_console/include/class/WelcomeWindow.class.php
index 4c72046548..378a194e32 100644
--- a/pandora_console/include/class/WelcomeWindow.class.php
+++ b/pandora_console/include/class/WelcomeWindow.class.php
@@ -156,11 +156,14 @@ class WelcomeWindow extends Wizard
modal: {
title: "<?php echo __('Welcome to').' '.io_safe_output(get_product_name()); ?>",
cancel: '<?php echo __('Do not show anymore'); ?>',
- ok: '<?php echo __('Close'); ?>'
+ ok: '<?php echo __('Close wizard'); ?>',
+ overlay: true,
+ overlayExtraClass: 'welcome-overlay',
},
onshow: {
page: '<?php echo $this->ajaxController; ?>',
method: 'loadWelcomeWindow',
+ width: 1000,
},
oncancel: {
page: '<?php echo $this->ajaxController; ?>',
@@ -178,6 +181,34 @@ class WelcomeWindow extends Wizard
}
})
}
+ },
+ onload: () => {
+ $(document).ready(function () {
+ var buttonpane = $("div[aria-describedby='welcome_modal_window'] .ui-dialog-buttonpane.ui-widget-content.ui-helper-clearfix");
+ $(buttonpane).append(`
+ <div class="welcome-wizard-buttons">
+ <label>
+ <input type="checkbox" class="welcome-wizard-do-not-show" value="1" />
+ <?php echo __('Do not show anymore'); ?>
+ </label>
+ <button class="close-wizard-button"><?php echo __('Close wizard'); ?></button>
+ </div>
+ `);
+
+ var closeWizard = $("button.close-wizard-button");
+
+ $(closeWizard).click(function (e) {
+ var close = $("div[aria-describedby='welcome_modal_window'] button.sub.ok.submit-next.ui-button");
+ var cancel = $("div[aria-describedby='welcome_modal_window'] button.sub.upd.submit-cancel.ui-button");
+ var checkbox = $("div[aria-describedby='welcome_modal_window'] .welcome-wizard-do-not-show:checked").length;
+
+ if (checkbox === 1) {
+ $(cancel).click();
+ } else {
+ $(close).click()
+ }
+ });
+ });
}
});
@@ -412,11 +443,11 @@ class WelcomeWindow extends Wizard
$inputs[] = [
'wrapper' => 'div',
'block_id' => 'div_diagnosis',
- 'class' => 'flex-row flex-items-center w98p ',
+ 'class' => 'flex-row flex-items-center ',
'direct' => 1,
'block_content' => [
[
- 'label' => __('Post-installation status diagnostic'),
+ 'label' => __('This is your post-installation status diagnostic:'),
'arguments' => [
'class' => 'first_lbl',
'name' => 'lbl_diagnosis',
@@ -434,7 +465,7 @@ class WelcomeWindow extends Wizard
'direct' => 1,
'block_content' => [
[
- 'label' => __('Warp Update registration'),
+ 'label' => '<span class="status"></span>'.__('Warp Update registration'),
'arguments' => [
'class' => 'first_lbl',
'name' => 'lbl_update_manager',
@@ -443,7 +474,7 @@ class WelcomeWindow extends Wizard
],
[
'arguments' => [
- 'label' => '',
+ 'label' => __('Cancel'),
'type' => 'button',
'attributes' => [
'class' => (empty($btn_update_manager_class) === false) ? $btn_update_manager_class : 'invisible_important',
@@ -462,7 +493,7 @@ class WelcomeWindow extends Wizard
'direct' => 1,
'block_content' => [
[
- 'label' => __('Default mail to send alerts'),
+ 'label' => '<span class="status"></span>'.__('Default mail to send alerts'),
'arguments' => [
'class' => 'first_lbl',
'name' => 'lbl_create_agent',
@@ -471,7 +502,7 @@ class WelcomeWindow extends Wizard
],
[
'arguments' => [
- 'label' => '',
+ 'label' => __('Cancel'),
'type' => 'button',
'attributes' => [
'class' => (empty($btn_configure_mail_class) === false) ? $btn_configure_mail_class : 'invisible_important',
@@ -490,7 +521,7 @@ class WelcomeWindow extends Wizard
'direct' => 1,
'block_content' => [
[
- 'label' => __('All servers running'),
+ 'label' => '<span class="status"></span>'.__('All servers running'),
'arguments' => [
'class' => 'first_lbl',
'name' => 'lbl_servers_up',
@@ -499,7 +530,7 @@ class WelcomeWindow extends Wizard
],
[
'arguments' => [
- 'label' => '',
+ 'label' => __('Cancel'),
'type' => 'button',
'attributes' => [
'class' => (empty($btn_servers_up_class) === false) ? $btn_servers_up_class : 'invisible_important',
@@ -518,7 +549,7 @@ class WelcomeWindow extends Wizard
'direct' => 1,
'block_content' => [
[
- 'label' => __('Enterprise licence valid'),
+ 'label' => '<span class="status"></span>'.__('Enterprise licence valid'),
'arguments' => [
'class' => 'first_lbl',
'name' => 'lbl_license_valid',
@@ -527,7 +558,7 @@ class WelcomeWindow extends Wizard
],
[
'arguments' => [
- 'label' => '',
+ 'label' => __('Cancel'),
'type' => 'button',
'attributes' => [
'class' => (empty($btn_license_valid_class) === false) ? $btn_license_valid_class : 'invisible_important',
@@ -567,7 +598,7 @@ class WelcomeWindow extends Wizard
$inputs[] = [
'wrapper' => 'div',
'block_id' => 'div_task_todo',
- 'class' => 'flex-row flex-items-center w98p',
+ 'class' => 'flex-row flex-items-center',
'direct' => 1,
'block_content' => [
[
@@ -591,7 +622,7 @@ class WelcomeWindow extends Wizard
$inputs[] = [
'wrapper' => 'div',
'block_id' => 'div_wizard_agent',
- 'class' => 'flex space-between w98p',
+ 'class' => 'flex space-between',
'direct' => 1,
'block_content' => [
[
@@ -599,7 +630,7 @@ class WelcomeWindow extends Wizard
'type' => 'select',
'fields' => $fields,
'name' => 'task_to_perform',
- 'selected' => '',
+ 'selected' => 'check_net',
'return' => true,
'nothing' => \__('Please select one'),
'nothing_value' => '',
@@ -630,6 +661,24 @@ class WelcomeWindow extends Wizard
$output .= $this->loadJS($flag_task);
echo $output;
+
+ echo '
+ <div class="welcome-wizard-right-content">
+ <ul class="welcome-circles">
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ <li></li>
+ </ul>
+ <img src="images/welcome-wizard-image.png" />
+ </div>
+ ';
?>
<div id="dialog_goliat" class="invisible">
<?php
diff --git a/pandora_console/include/javascript/pandora_ui.js b/pandora_console/include/javascript/pandora_ui.js
index cd71ef51c3..49e7062f04 100644
--- a/pandora_console/include/javascript/pandora_ui.js
+++ b/pandora_console/include/javascript/pandora_ui.js
@@ -105,7 +105,16 @@ function load_modal(settings) {
}
if (settings.modal.overlay === true) {
- $("body").append("<div id='modal_overlay'class='ui-widget-overlay'></div>");
+ var extraClass = "";
+ if (typeof settings.modal.overlayExtraClass !== "undefined") {
+ extraClass = " " + settings.modal.overlayExtraClass;
+ }
+
+ $("body").append(
+ "<div id='modal_overlay'class='ui-widget-overlay" +
+ extraClass +
+ "'></div>"
+ );
}
if (settings.beforeClose == undefined) {
diff --git a/pandora_console/include/styles/new_installation_welcome_window.css b/pandora_console/include/styles/new_installation_welcome_window.css
index 6d354b0c33..e4c16ca29c 100644
--- a/pandora_console/include/styles/new_installation_welcome_window.css
+++ b/pandora_console/include/styles/new_installation_welcome_window.css
@@ -80,7 +80,7 @@
}
#welcome_form li.hole {
- margin-bottom: 0.8em;
+ margin-bottom: 10px;
}
#welcome_form li.extra {
@@ -98,17 +98,410 @@
font-weight: bold;
}
-button.buttonButton.onlyIcon.fail,
-button.submitButton.onlyIcon.fail {
- mask: url(../../images/fail@svg.svg) no-repeat center / contain;
- -webkit-mask: url(../../images/fail@svg.svg) no-repeat center / contain;
-}
-
.select2-container .select2-container--default .select2-container--open {
z-index: 2000;
}
-#div_wizard_agent > .select2 {
- width: 75% !important;
- max-width: 75% !important;
+.ui-widget-overlay.welcome-overlay {
+ background-color: rgba(19, 23, 39, 0.8) !important;
+ opacity: 1 !important;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"] {
+ background-color: #131727;
+ border-radius: 8px !important;
+ border: 0;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"] * {
+ color: #fff;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .ui-dialog-titlebar {
+ margin: 0;
+ padding-top: 25px;
+ padding-bottom: 0px;
+ padding-left: 20px;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .ui-dialog-title {
+ font-size: 40px;
+ line-height: 48px;
+ margin: 0;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .ui-dialog-titlebar-close {
+ background-color: #95a3bf !important;
+ right: 20px !important;
+}
+
+div#welcome_modal_window {
+ padding: 0px 0px 0px 20px;
+ display: flex !important;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: flex-end;
+ justify-content: space-between;
+}
+
+div#welcome_modal_window[style=""] {
+ display: none !important;
+}
+
+div#welcome_modal_window .wizard * {
+ font-weight: bold;
+}
+
+div#welcome_modal_window .wizard li#li-div_diagnosis,
+div#welcome_modal_window .wizard li#li-div_task_todo,
+div#welcome_modal_window .wizard li#li-div_wizard_agent {
+ padding-left: 0;
+}
+
+div#welcome_modal_window .wizard li#li-div_diagnosis label {
+ font-size: 17px;
+ line-height: 20px;
+ color: #c1ccdc;
+ padding: 20px 0px;
+ font-weight: normal;
+}
+
+div#welcome_modal_window
+ .wizard
+ li:not(:nth-child(1)):not(:nth-last-child(1)):not(:nth-last-child(2)) {
+ padding: 14px 15px;
+ box-sizing: border-box;
+ background-color: rgba(0, 0, 0, 0.2);
+ border: 1px solid #c1ccdc;
+ border-radius: 6px;
+ width: 480px;
+ height: 50px;
+}
+
+div#welcome_modal_window
+ .wizard
+ li:not(:nth-child(1)):not(:nth-last-child(1)):not(:nth-last-child(2))
+ label {
+ font-size: 17px;
+ line-height: 20px;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+
+div#welcome_modal_window
+ .wizard
+ li:not(:nth-child(1)):not(:nth-last-child(1)):not(:nth-last-child(2))
+ label {
+ font-size: 17px;
+ line-height: 20px;
+ font-weight: normal;
+}
+
+div#welcome_modal_window .wizard .status {
+ background-color: #c1ccdc;
+ opacity: 0.2;
+ display: block;
+ width: 20px;
+ height: 20px;
+ margin-right: 15px;
+ border-radius: 14px / 7px;
+}
+
+div#welcome_modal_window .wizard li.row_green .status {
+ background-color: #82b92e;
+ opacity: 1;
+}
+
+div#welcome_modal_window .wizard .fail.onlyIcon.buttonButton {
+ background-color: unset;
+ width: unset !important;
+}
+
+div#welcome_modal_window .wizard .fail.onlyIcon.buttonButton span {
+ color: #26b1b5;
+ font-size: 15px;
+ line-height: 20px;
+}
+
+div#welcome_modal_window .wizard .fail.onlyIcon.buttonButton:hover span {
+ color: #3bdce1;
+}
+
+div#welcome_modal_window .wizard #li-div_task_todo {
+ padding-bottom: 2px;
+}
+
+div#welcome_modal_window .wizard #li-div_task_todo label {
+ font-size: 13px;
+ line-height: 16px;
+ color: #c1ccdc;
+}
+
+div#welcome_modal_window .wizard #li-div_wizard_agent {
+ width: 480px;
+}
+
+div#welcome_modal_window .wizard #li-div_wizard_agent > div {
+ width: 100%;
+}
+
+div#welcome_modal_window .wizard #li-div_wizard_agent .select2-selection {
+ background-color: #f6f7fb !important;
+ border: 1px solid #c0ccdc !important;
+ border-radius: 6px !important;
+ width: 290px;
+ height: 42px !important;
+ font-weight: normal !important;
+}
+
+div#welcome_modal_window .wizard #li-div_wizard_agent .select2 {
+ width: 290px !important;
+}
+
+div#welcome_modal_window
+ .wizard
+ #li-div_wizard_agent
+ .select2-selection
+ .select2-selection__rendered {
+ font-weight: normal !important;
+ line-height: 38px !important;
+}
+
+div#welcome_modal_window .wizard #button-go_wizard {
+ background-color: #82b92e;
+ border: 0;
+ border-radius: 8px;
+ padding-top: 11px;
+ padding-bottom: 11px;
+ padding-left: 38px;
+ height: 42px;
+ width: 175px;
+}
+
+div#welcome_modal_window .wizard #button-go_wizard:hover {
+ background-color: #8ac531;
+}
+
+div#welcome_modal_window .wizard #button-go_wizard span {
+ font-size: 15px;
+ line-height: 20px;
+ text-wrap: nowrap;
+}
+
+div#welcome_modal_window .wizard #button-go_wizard div.next {
+ mask: url(../../images/check-white.svg) no-repeat center / contain;
+ -webkit-mask: url(../../images/check-white.svg) no-repeat center / contain;
+ background-color: #fff !important;
+ height: 12px;
+ margin-left: 12px;
+ margin-right: 20px;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .ui-dialog-buttonpane.ui-widget-content {
+ background-color: #131727;
+ padding: 10px 10px 10px 20px !important;
+ margin: 0;
+ border-top: 1px solid #8190ad;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .ui-dialog-buttonpane.ui-widget-content
+ .ui-dialog-buttonset {
+ justify-content: space-between;
+ display: none;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .welcome-wizard-buttons,
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .welcome-wizard-buttons
+ label {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: nowrap;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .welcome-wizard-buttons
+ label {
+ font-size: 15px;
+ line-height: 18px;
+ cursor: pointer;
+ font-weight: normal;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .welcome-wizard-buttons
+ label
+ input[type="checkbox"] {
+ margin-right: 10px;
+ width: 20px;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .ui-dialog-buttonpane.ui-widget-content
+ .ui-dialog-buttonset {
+ justify-content: space-between;
+ display: none;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .ui-dialog-buttonpane.ui-widget-content
+ button {
+ background-color: #313b62;
+ box-shadow: none;
+ border: 0;
+ border-radius: 8px;
+ height: 42px;
+ width: unset;
+ padding: 10px 20px;
+ font-size: 15px;
+ line-height: 20px;
+ font-weight: bold;
+ margin: 0;
+}
+
+div.ui-widget.ui-widget-content[aria-describedby="welcome_modal_window"]
+ .ui-dialog-buttonpane.ui-widget-content
+ button:hover {
+ background-color: #384372;
+}
+
+.welcome-wizard-right-content {
+ background-image: linear-gradient(225deg, #731dd8 0%, #2eb9b8 100%);
+ border-radius: 100px 0 0;
+ width: 432px;
+ height: 375px;
+ margin-bottom: 8px;
+}
+
+.welcome-wizard-right-content img {
+ width: 348px;
+ height: 260px;
+ position: absolute;
+ right: 43px;
+ bottom: 65px;
+ filter: drop-shadow(0 0 10px #0000005b);
+}
+
+/* Background bubbles */
+.welcome-circles {
+ overflow: hidden;
+ position: absolute;
+ right: 0;
+ position: absolute;
+ bottom: 8px;
+ width: 430px;
+ height: 373px;
+ overflow: hidden;
+ border-top-left-radius: 100px;
+}
+
+.welcome-circles li {
+ position: absolute;
+ display: block;
+ list-style: none;
+ width: 20px;
+ height: 20px;
+ background: rgba(255, 255, 255, 0.2);
+ animation: animate 10s linear infinite;
+ bottom: -150px;
+}
+
+.welcome-circles li:nth-child(1) {
+ left: 25%;
+ width: 10px;
+ height: 10px;
+ animation-delay: 0s;
+}
+
+.welcome-circles li:nth-child(2) {
+ left: 10%;
+ width: 20px;
+ height: 20px;
+ animation-delay: 2s;
+ animation-duration: 12s;
+}
+
+.welcome-circles li:nth-child(3) {
+ left: 70%;
+ width: 15px;
+ height: 15px;
+ animation-delay: 4s;
+}
+
+.welcome-circles li:nth-child(4) {
+ left: 40%;
+ width: 60px;
+ height: 60px;
+ animation-delay: 3s;
+ animation-duration: 6s;
+}
+
+.welcome-circles li:nth-child(5) {
+ left: 65%;
+ width: 15px;
+ height: 15px;
+ animation-delay: 0s;
+}
+
+.welcome-circles li:nth-child(6) {
+ left: 75%;
+ width: 30px;
+ height: 30px;
+ animation-delay: 3s;
+}
+
+.welcome-circles li:nth-child(7) {
+ left: 35%;
+ width: 50px;
+ height: 50px;
+ animation-delay: 7s;
+}
+
+.welcome-circles li:nth-child(8) {
+ left: 50%;
+ width: 25px;
+ height: 25px;
+ animation-delay: 15s;
+ animation-duration: 45s;
+}
+
+.welcome-circles li:nth-child(9) {
+ left: 20%;
+ width: 15px;
+ height: 15px;
+ animation-delay: 2s;
+ animation-duration: 35s;
+}
+
+.welcome-circles li:nth-child(10) {
+ left: 85%;
+ width: 50px;
+ height: 50px;
+ animation-delay: 0s;
+ animation-duration: 11s;
+}
+
+@keyframes animate {
+ 0% {
+ transform: translateY(0) rotate(0deg);
+ opacity: 1;
+ border-radius: 0;
+ }
+ 100% {
+ transform: translateY(-1000px) rotate(720deg);
+ opacity: 0;
+ border-radius: 50%;
+ }
}