diff --git a/pandora_console/images/Cube.png b/pandora_console/images/Cube.png
new file mode 100644
index 0000000000..99986400b7
Binary files /dev/null and b/pandora_console/images/Cube.png differ
diff --git a/pandora_console/images/Engranaje.png b/pandora_console/images/Engranaje.png
new file mode 100644
index 0000000000..b98ef389ec
Binary files /dev/null and b/pandora_console/images/Engranaje.png differ
diff --git a/pandora_console/images/Warp-Update-bg.png b/pandora_console/images/Warp-Update-bg.png
new file mode 100644
index 0000000000..2550a2b6b1
Binary files /dev/null and b/pandora_console/images/Warp-Update-bg.png differ
diff --git a/pandora_console/update_manager_client/resources/images/Cube.png b/pandora_console/update_manager_client/resources/images/Cube.png
new file mode 100644
index 0000000000..99986400b7
Binary files /dev/null and b/pandora_console/update_manager_client/resources/images/Cube.png differ
diff --git a/pandora_console/update_manager_client/resources/images/Engranaje.png b/pandora_console/update_manager_client/resources/images/Engranaje.png
new file mode 100644
index 0000000000..b98ef389ec
Binary files /dev/null and b/pandora_console/update_manager_client/resources/images/Engranaje.png differ
diff --git a/pandora_console/update_manager_client/resources/images/Warp-Update-bg.png b/pandora_console/update_manager_client/resources/images/Warp-Update-bg.png
new file mode 100644
index 0000000000..2550a2b6b1
Binary files /dev/null and b/pandora_console/update_manager_client/resources/images/Warp-Update-bg.png differ
diff --git a/pandora_console/update_manager_client/resources/styles/um.css b/pandora_console/update_manager_client/resources/styles/um.css
index d0208bd468..fea49ed746 100644
--- a/pandora_console/update_manager_client/resources/styles/um.css
+++ b/pandora_console/update_manager_client/resources/styles/um.css
@@ -40,15 +40,68 @@ a.update_manager_button:after {
}
#box_online {
- background-image: url("../images/update_manager_background.jpg");
- background-position: top right;
- background-repeat: no-repeat;
- background-color: #fff;
padding: 40px 50px;
border: 1px solid #f3f3f3;
border-radius: 5px;
min-height: 400px;
- background-size: contain;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+}
+
+#box_online .wu-bg {
+ position: relative;
+ width: 720px;
+ height: 684px;
+ background-image: url("../images/Warp-Update-bg.png");
+ background-position: center center;
+ background-size: auto;
+ background-repeat: no-repeat;
+ margin: 0px !important;
+ display: flex;
+ align-items: center;
+}
+#box_online .wu-gear {
+ animation-timing-function: linear;
+ animation-duration: 5s;
+ animation-iteration-count: infinite;
+ width: 202px;
+ margin: auto;
+ animation-name: ani;
+}
+@keyframes ani {
+ to {
+ transform: rotateZ(360deg);
+ }
+}
+
+#box_online .wu-box {
+ animation-timing-function: linear;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ width: 69px;
+ left: 325px;
+ z-index: 2;
+ position: absolute;
+ animation-name: ani2;
+}
+@keyframes ani2 {
+ 0% {
+ opacity: 0;
+ transform: translateY(-250px) translateX(0px);
+ }
+ 60% {
+ opacity: 1;
+ transform: translateY(0px) translateX(0px);
+ }
+ 90% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
}
#box_online #pkg_version {
diff --git a/pandora_console/update_manager_client/views/online.php b/pandora_console/update_manager_client/views/online.php
index 2ba4787dd4..d588fa8e6e 100644
--- a/pandora_console/update_manager_client/views/online.php
+++ b/pandora_console/update_manager_client/views/online.php
@@ -36,171 +36,178 @@
<div id="box_online">
- <span class="loading" style="font-size: 18pt; display: none;">
- <img src="images/wait.gif">
- </span>
+ <div>
+ <span class="loading" style="font-size: 18pt; display: none;">
+ <img src="images/wait.gif">
+ </span>
- <p style="font-weight: 600;"><?php echo __('The latest version of package installed is').':'; ?></p>
- <div id="pkg_version"><?php echo $version; ?></div>
+ <p style="font-weight: 600;"><?php echo __('The latest version of package installed is').':'; ?></p>
+ <div id="pkg_version"><?php echo $version; ?></div>
- <div class="content">
- <?php
- if (empty($error) !== true) {
- ?>
- <h2>
- <?php echo $error; ?>
- </h2>
+ <div class="content">
<?php
- } else {
- // Updates.
- ?>
- <div id="um-loading">
- <p id="loading-msg"></p>
- </div>
- <div id="um-updates">
- </div>
- <div id="um-buttons" style="display:none;">
- <button id="um-next"><?php echo __('Update to next version'); ?></button>
- <button id="um-last"><?php echo __('Update to latest version'); ?></button>
- </div>
-
- <div id="um-result"></div>
- <div id="um-progress">
- <h3 id="um-progress-version"></h3>
- <div class="um-progress-bar-container general">
- <span id="um-progress-general-label">0 %</span>
- <div id="um-progress-general" class="um-progress-bar general"></div>
+ if (empty($error) !== true) {
+ ?>
+ <h2>
+ <?php echo $error; ?>
+ </h2>
+ <?php
+ } else {
+ // Updates.
+ ?>
+ <div id="um-loading">
+ <p id="loading-msg"></p>
+ </div>
+ <div id="um-updates">
+ </div>
+ <div id="um-buttons" style="display:none;">
+ <button id="um-next"><?php echo __('Update to next version'); ?></button>
+ <button id="um-last"><?php echo __('Update to latest version'); ?></button>
</div>
- <h5 id="um-progress-description"></h5>
- <div class="um-progress-bar-container task">
- <span id="um-progress-task-label">0 %</span>
- <div id="um-progress-task" class="um-progress-bar task"></div>
+ <div id="um-result"></div>
+ <div id="um-progress">
+ <h3 id="um-progress-version"></h3>
+ <div class="um-progress-bar-container general">
+ <span id="um-progress-general-label">0 %</span>
+ <div id="um-progress-general" class="um-progress-bar general"></div>
+ </div>
+
+ <h5 id="um-progress-description"></h5>
+ <div class="um-progress-bar-container task">
+ <span id="um-progress-task-label">0 %</span>
+ <div id="um-progress-task" class="um-progress-bar task"></div>
+ </div>
+ </div>
+ <div id="um-update-details">
+ <div id="um-update-details-header"></div>
+ <div id="um-update-details-content"></div>
</div>
- </div>
- <div id="um-update-details">
- <div id="um-update-details-header"></div>
- <div id="um-update-details-content"></div>
- </div>
- <script type="text/javascript">
- var texts = {
- 'updatingTo': "<?php echo __('Updating to'); ?> ",
- 'preventExitMsg': "<?php echo __('Do you really want to leave our brilliant application?'); ?>",
- 'alreadyUpdated': "<?php echo __('There are no updates available'); ?>",
- 'searchingUpdates': "<?php echo __('Searching for updates...'); ?>",
- 'updateText': "<?php echo __('Package'); ?>",
- 'updated': "<?php echo __('Successfully updated.'); ?>",
- }
-
- var clientMode = '<?php echo $mode; ?>';
- var ajaxPage = '<?php echo $ajaxPage; ?>';
-
- window.onload = function() {
- var bsearch = document.getElementById('um-search');
- var bnext = document.getElementById('um-next');
- var blast = document.getElementById('um-last');
- var result = document.getElementById('um-result');
-
- <?php
- if (isset($running) === true && $running === true) {
- ?>
- showProgress('<?php echo $ajax; ?>', '<?php echo $authCode; ?>');
- <?php
- } else {
- ?>
- // Search.
- searchUpdates('<?php echo $ajax; ?>', '<?php echo $authCode; ?>');
- <?php
+ <script type="text/javascript">
+ var texts = {
+ 'updatingTo': "<?php echo __('Updating to'); ?> ",
+ 'preventExitMsg': "<?php echo __('Do you really want to leave our brilliant application?'); ?>",
+ 'alreadyUpdated': "<?php echo __('There are no updates available'); ?>",
+ 'searchingUpdates': "<?php echo __('Searching for updates...'); ?>",
+ 'updateText': "<?php echo __('Package'); ?>",
+ 'updated': "<?php echo __('Successfully updated.'); ?>",
}
- ?>
- bnext.addEventListener('click', function() {
- blast.setAttribute('disable', true);
- result.innerHTML = '';
- umConfirm({
- message: "<?php echo __('This action will upgrade this console to version '); ?> "+nextUpdateVersion+". <?php echo __('Are you sure?'); ?>",
- title: "<?php echo __('Update to'); ?> "+nextUpdateVersion,
- onAccept: function() {
- updateNext({
- url: '<?php echo $ajax; ?>',
- auth: '<?php echo $authCode; ?>',
- success: function(d) {
- umUINextUpdate(d.version);
+ var clientMode = '<?php echo $mode; ?>';
+ var ajaxPage = '<?php echo $ajaxPage; ?>';
- if (d.messages == null) {
- result.innerHTML = umSuccessMsg(
- texts.updated
- );
- } else {
- result.innerHTML = umErrorMsg(
- d.messages
- );
- }
- },
- error: function(e, r) {
- if (typeof r != "undefined" ) {
- result.innerHTML = umErrorMsg(
- '<?php echo __('Failed to update to '); ?>' + nextUpdateVersion+' '+r
- );
- } else {
- result.innerHTML = umErrorMsg(
- '<?php echo __('Failed to update to '); ?>' + nextUpdateVersion+' RC'+e
- );
- }
- },
- });
- }
+ window.onload = function() {
+ var bsearch = document.getElementById('um-search');
+ var bnext = document.getElementById('um-next');
+ var blast = document.getElementById('um-last');
+ var result = document.getElementById('um-result');
+
+ <?php
+ if (isset($running) === true && $running === true) {
+ ?>
+ showProgress('<?php echo $ajax; ?>', '<?php echo $authCode; ?>');
+ <?php
+ } else {
+ ?>
+ // Search.
+ searchUpdates('<?php echo $ajax; ?>', '<?php echo $authCode; ?>');
+ <?php
+ }
+ ?>
+
+ bnext.addEventListener('click', function() {
+ blast.setAttribute('disable', true);
+ result.innerHTML = '';
+ umConfirm({
+ message: "<?php echo __('This action will upgrade this console to version '); ?> "+nextUpdateVersion+". <?php echo __('Are you sure?'); ?>",
+ title: "<?php echo __('Update to'); ?> "+nextUpdateVersion,
+ onAccept: function() {
+ updateNext({
+ url: '<?php echo $ajax; ?>',
+ auth: '<?php echo $authCode; ?>',
+ success: function(d) {
+ umUINextUpdate(d.version);
+
+ if (d.messages == null) {
+ result.innerHTML = umSuccessMsg(
+ texts.updated
+ );
+ } else {
+ result.innerHTML = umErrorMsg(
+ d.messages
+ );
+ }
+ },
+ error: function(e, r) {
+ if (typeof r != "undefined" ) {
+ result.innerHTML = umErrorMsg(
+ '<?php echo __('Failed to update to '); ?>' + nextUpdateVersion+' '+r
+ );
+ } else {
+ result.innerHTML = umErrorMsg(
+ '<?php echo __('Failed to update to '); ?>' + nextUpdateVersion+' RC'+e
+ );
+ }
+ },
+ });
+ }
+ });
+
+ blast.setAttribute('disable', false);
});
- blast.setAttribute('disable', false);
- });
+ blast.addEventListener('click', function() {
+ blast.setAttribute('disable', true);
+ result.innerHTML = '';
+ umConfirm({
+ message: "<?php echo __('This action will upgrade this console to version '); ?> "+lastUpdateVersion+". <?php echo __('Are you sure?'); ?>",
+ title: "<?php echo __('Update to'); ?> "+lastUpdateVersion,
+ onAccept: function() {
+ updateLatest({
+ url: '<?php echo $ajax; ?>',
+ auth: '<?php echo $authCode; ?>',
+ success: function(d) {
+ umUINextUpdate(d.version);
- blast.addEventListener('click', function() {
- blast.setAttribute('disable', true);
- result.innerHTML = '';
- umConfirm({
- message: "<?php echo __('This action will upgrade this console to version '); ?> "+lastUpdateVersion+". <?php echo __('Are you sure?'); ?>",
- title: "<?php echo __('Update to'); ?> "+lastUpdateVersion,
- onAccept: function() {
- updateLatest({
- url: '<?php echo $ajax; ?>',
- auth: '<?php echo $authCode; ?>',
- success: function(d) {
- umUINextUpdate(d.version);
+ if (d.messages == null) {
+ result.innerHTML = umSuccessMsg(
+ texts.updated
+ );
+ } else {
+ result.innerHTML = umErrorMsg(
+ d.messages
+ );
+ }
+ },
+ error: function(e, r) {
+ if (typeof r != "undefined" ) {
+ result.innerHTML = umErrorMsg(r);
+ } else {
+ result.innerHTML = umErrorMsg(
+ '<?php echo __('Failed to update:'); ?> RC'+e
+ );
+ }
+ },
+ });
+ }
+ });
- if (d.messages == null) {
- result.innerHTML = umSuccessMsg(
- texts.updated
- );
- } else {
- result.innerHTML = umErrorMsg(
- d.messages
- );
- }
- },
- error: function(e, r) {
- if (typeof r != "undefined" ) {
- result.innerHTML = umErrorMsg(r);
- } else {
- result.innerHTML = umErrorMsg(
- '<?php echo __('Failed to update:'); ?> RC'+e
- );
- }
- },
- });
- }
+ blast.setAttribute('disable', false);
});
- blast.setAttribute('disable', false);
- });
-
- }
- </script>
- <?php
- }
- ?>
+ }
+ </script>
+ <?php
+ }
+ ?>
+ </div>
</div>
+
+ <div class="wu-bg">
+ <img class="wu-box" src="images/Cube.png">
+ <img class="wu-gear" src="images/Engranaje.png">
+ </div>
</div>