mirror
/
cyberpanel
mirror of https://github.com/usmannasir/cyberpanel.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Branding: replace logos, add Lottie loaders, wire up animations; update templates and loading states

This commit is contained in:
jabirMahmoud 2025-09-29 20:46:55 +02:00
parent 32a3fb7b67
commit 7907b34c61
10 changed files with 82 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
baseTemplate/templates/baseTemplate/index.html
View File

@ -40,6 +40,11 @@
<link rel="stylesheet" type="text/css" href="{% static 'baseTemplate/custom-js/pnotify.custom.min.css' %}?v={{ CP_VERSION }}">
<script src="{% static 'baseTemplate/custom-js/pnotify.custom.min.js' %}?v={{ CP_VERSION }}"></script>
<!-- Add Lottie Player CDN -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<!-- OR use the web version -->
<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<!-- Modern Design System -->
<style>
/* CSS Variables for Theme */
@ -960,7 +965,7 @@
</button>
<div class="logo">
<div class="logo-icon">
<img src="https://cyberpanel.net/wp-content/uploads/2025/04/cyberpanel-logo-icon_only.png" alt="CyberPanel Logo">
<img src="https://upscale.host/wp-content/uploads/2025/09/upscale-icon.png" alt="CyberPanel Logo">
</div>
<div class="logo-text">
<div class="brand">CyberPanel</div>
@ -995,7 +1000,7 @@
<div id="sidebar">
<div class="sidebar-logo">
<div class="logo-icon">
<img src="https://cyberpanel.net/wp-content/uploads/2025/04/cyberpanel-logo-icon_only.png" alt="CyberPanel Logo">
<img src="https://upscale.host/wp-content/uploads/2025/09/upscale-icon.png" alt="CyberPanel Logo">
</div>
<div class="logo-text">
<div class="brand">CyberPanel</div>

9
filemanager/templates/filemanager/indexModern.html
View File

@ -1122,7 +1122,14 @@
<div class="fm-view-container">
<!-- Loading State -->
<div class="fm-loading" ng-show="isLoading">
<div class="fm-spinner"></div>
<lottie-player
src="/static/animations/loader-filemanager.json"
background="transparent"
speed="1"
style="width: 80px; height: 80px;"
loop
autoplay>
</lottie-player>
<p>{% trans "Loading files..." %}</p>
</div>

17
loginSystem/templates/loginSystem/login.html
View File

@ -231,11 +231,14 @@
<body>
<div id="loading">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<lottie-player
src="/static/animations/loader-main.json"
background="transparent"
speed="1"
style="width: 200px; height: 200px; margin: 0 auto;"
loop
autoplay>
</lottie-player>
</div>
<div class>
@ -291,9 +294,9 @@
<div class="login-wrapper">
<form id="loginForm" action="/" class="col-md-8 col-md-offset-2">
<h1 class="text-transform-upr text-center panel-body text-bold"
style="padding-bottom: 0px; color: #33CCCC;">
style="padding-bottom: 0px; color: #593dac;">
<img class="center-block text-center my-20" src="{% static 'baseTemplate/cyber-panel-logo.svg' %}">
CyberPanel
CPanel
</h1>
<h4 class="text-muted text-center mb-10">Web Hosting Control Panel</h4>
<div class="">

1
static/animations/loader-filemanager.json Normal file
View File

File diff suppressed because one or more lines are too long

1
static/animations/loader-main.json.json Normal file
View File

File diff suppressed because one or more lines are too long

1
static/animations/loader-progress.json Normal file
View File

File diff suppressed because one or more lines are too long

1
static/animations/loader-spinner.json Normal file
View File

File diff suppressed because one or more lines are too long

37
static/baseTemplate/assets/elements/lottie-loaders.css Normal file
View File

@ -0,0 +1,37 @@
/* Lottie Loader Styles */
.lottie-loader {
display: inline-block;
vertical-align: middle;
}
.lottie-loader-small {
width: 20px;
height: 20px;
}
.lottie-loader-medium {
width: 50px;
height: 50px;
}
.lottie-loader-large {
width: 100px;
height: 100px;
}
.lottie-loader-fullscreen {
width: 200px;
height: 200px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
}
/* Hide original spinners when Lottie is active */
.lottie-active .loading-spinner,
.lottie-active .fm-spinner,
.lottie-active .fa-spinner {
display: none !important;
}

51
static/images/cyber-panel-logo.svg
View File

@ -1,41 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
<g>
<g>
<g>
<path fill="#B5D8F2" d="M29.999,15.916c0.864,0,1.731,0.084,2.59,0.244l-9.428-9.427c-0.087-0.086-0.154-0.188-0.211-0.295
L1.095,28.292c-0.943,0.945-0.943,2.478,0,3.426l3.633,3.621c0.032-0.036,0.063-0.078,0.102-0.119l15.222-15.213
C22.708,17.366,26.239,15.916,29.999,15.916z"/>
</g>
<g>
<path fill="#61D2B4" d="M34.723,14.808l2.766-2.123c0.541-0.428,1.098-0.635,1.694-0.635c0.899,0,1.741,0.515,2.146,1.311
c0.007,0.016,0.014,0.033,0.021,0.047c0.243,0.506,0.517,1.541-0.383,2.71c-0.005,0.006-0.01,0.017-0.016,0.025l-2.159,2.737
l1.218,1.215c3.249,3.279,4.688,8.016,3.849,12.55l9.564-9.567c0.045-0.048,0.094-0.083,0.148-0.12L31.713,1.1
c-0.46-0.456-1.068-0.711-1.712-0.711S28.747,0.644,28.29,1.1l-3.684,3.687c0.113,0.051,0.217,0.114,0.302,0.205L34.723,14.808z"
/>
</g>
<g>
<path fill="#61D2B4" d="M25.216,45.24l-2.725,2.096c-0.386,0.291-0.926,0.623-1.692,0.623c-0.004,0-0.005,0-0.007,0
c-0.003,0-0.005,0-0.007,0c-0.039,0-0.079,0-0.123-0.01c-0.829-0.045-1.608-0.549-1.981-1.27c-0.006-0.02-0.02-0.045-0.025-0.063
c-0.433-0.893-0.298-1.875,0.387-2.758l2.114-2.68l-1.304-1.303c-3.24-3.329-4.608-7.923-3.752-12.433l-9.528,9.519
c-0.038,0.043-0.082,0.071-0.125,0.105l21.84,21.839c0.458,0.456,1.067,0.703,1.711,0.703s1.252-0.247,1.712-0.703l3.636-3.64
c-0.131-0.058-0.255-0.141-0.363-0.251L25.216,45.24z"/>
</g>
<g>
<path fill="#B5D8F2" d="M58.904,28.292l-3.611-3.612c-0.038,0.048-0.077,0.102-0.121,0.144l-15.25,15.242
c-2.66,2.643-6.19,4.103-9.951,4.103c-0.863,0-1.731-0.087-2.592-0.246l9.354,9.347c0.108,0.109,0.188,0.231,0.249,0.364
l21.923-21.915C59.848,30.771,59.848,29.237,58.904,28.292z"/>
</g>
</g>
<g>
<path fill="#F5D10A" d="M39.402,14.922l-8.952,11.357l0.343,0.465c0.464,0.639,1.924,2.747,4.738,6.851
c0.168,0.243,0.222,1.063-0.24,1.418L21.302,45.752c-0.223,0.166-0.351,0.229-0.502,0.229c-0.004,0-0.005-0.01-0.007-0.01
c-0.003,0-0.003,0.01-0.007,0.01c-0.145-0.01-0.292-0.104-0.349-0.213c-0.047-0.094-0.142-0.293,0.158-0.685l8.935-11.333
l-5.062-7.282c-0.322-0.457-0.214-1.129,0.239-1.476l14.001-10.753c0.24-0.189,0.37-0.214,0.475-0.214
c0.163,0,0.317,0.098,0.386,0.233C39.664,14.459,39.614,14.639,39.402,14.922z"/>
</g>
</g>
</svg>
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<defs>
<image width="616" height="591" id="img1" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiID8+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPg0KPHN2ZyB3aWR0aD0iNjE2cHQiIGhlaWdodD0iNTkxcHQiIHZpZXdCb3g9IjAgMCA2MTYgNTkxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQo8ZyBpZD0iI2ZmZmZmZmZmIj4NCjwvZz4NCjxnIGlkPSIjNTgzZGFjZmYiPg0KPHBhdGggZmlsbD0iIzU4M2RhYyIgb3BhY2l0eT0iMS4wMCIgZD0iIE0gMjM3LjQ4IDg4Ljg3IEMgMjUwLjkyIDg2Ljk5IDI2NS4xNiA4OC4yOSAyNzcuMjUgOTQuODIgQyAyOTYuMDkgMTA0LjczIDMwOC4xMyAxMjUuMDUgMzEwLjQ5IDE0NS44OSBDIDMxMC41NSAyMDQuMjYgMzEwLjQ1IDI2Mi42NCAzMTAuNTMgMzIxLjAxIEMgMzEwLjk2IDMyNy40NyAzMTAuMjggMzM0LjYzIDMwNS43MSAzMzkuNjMgQyAzMDAuNzMgMzQ1LjQzIDI5Mi4yNCAzNDguMzIgMjg0Ljg2IDM0NS45NiBDIDI3Ni41MiAzNDMuNzcgMjY5Ljk2IDMzNS43NyAyNzAuMDMgMzI3LjA1IEMgMjY5Ljk3IDI2OC4wMCAyNzAuMDIgMjA4Ljk0IDI3MC4wMCAxNDkuODggQyAyNjkuNzcgMTQzLjc4IDI2Ni41MSAxMzguMDUgMjYyLjMzIDEzMy43NCBDIDI1Ni43MCAxMjcuOTggMjQ3Ljc4IDEyNy42NCAyNDAuNDQgMTI5LjYyIEMgMjMzLjExIDEzMS42MCAyMjYuNzYgMTM4LjA1IDIyNi4wMSAxNDUuNzQgQyAyMjUuNzAgMjAyLjUwIDIyNS40MCAyNTkuMjYgMjI1LjUxIDMxNi4wMyBDIDIyNS42MSAzMjQuMDMgMjI0Ljk4IDMzMi4xNyAyMjYuOTMgMzQwLjAxIEMgMjMwLjA4IDM1My41MCAyMzcuOTEgMzY1LjYwIDI0OC4wNCAzNzQuOTIgQyAyNjkuMDEgMzk0LjcwIDMwNC4wOCAzOTcuMzcgMzI3LjU1IDM4MC41MCBDIDMzNy4yNSAzNzMuNzEgMzQ0LjAyIDM2My42MSAzNDkuMzAgMzUzLjE5IEMgMzUyLjczIDM0NC44MSAzNTYuNzggMzM2LjI3IDM1Ni43NSAzMjcuMDIgQyAzNTYuNzcgMjY1LjI4IDM1Ni43MiAyMDMuNTQgMzU2Ljc3IDE0MS44MCBDIDM1OS4xMiAxMjguMTggMzY2LjY5IDExNS45OCAzNzUuODEgMTA1LjgxIEMgMzg1LjMyIDk2LjA1IDM5OC4zNiA4OS41MSA0MTIuMDQgODguNjYgQyA0MzAuMTEgODYuOTkgNDQ4Ljk2IDkyLjI2IDQ2Mi43NSAxMDQuMjYgQyA0NzEuNzAgMTEyLjY2IDQ3OC41OCAxMjMuNDMgNDgxLjg1IDEzNS4yOSBDIDQ4NC42NSAxNjAuMTAgNDgzLjY1IDE4NS4xMiA0ODQuMjIgMjEwLjAzIEMgNDg0LjM2IDIzMy4wMiA0ODMuODggMjU2LjAxIDQ4My45NSAyNzkuMDAgQyA0ODMuODEgMzAxLjk5IDQ4My4xMCAzMjQuOTkgNDgzLjA2IDM0Ny45OSBDIDQ4My4yNCAzNTcuNzkgNDgxLjI2IDM2Ny40OCA0NzkuMTIgMzc3LjAwIEMgNDcxLjYyIDQwNy4wOSA0NTguMzEgNDM2LjI3IDQzNy40MSA0NTkuNDQgQyA0MjQuNTggNDczLjg5IDQwOS4yOSA0ODYuMTUgMzkyLjE4IDQ5NS4xOCBDIDM3My43OSA1MDUuNTggMzUzLjIyIDUxMS42OCAzMzIuNDcgNTE1LjI4IEMgMzA3LjM2IDUxOS4wOSAyODEuNzQgNTE5LjMyIDI1Ni41MiA1MTYuMjMgQyAyMjQuODcgNTEyLjI1IDE5My42OCA1MDEuMjUgMTY4LjA1IDQ4MS45NiBDIDE2Mi44NiA0NzcuODUgMTU3LjQ1IDQ3My45NiAxNTMuMDAgNDY5LjAxIEMgMTM0LjgwIDQ1Mi4zMCAxMjEuNTUgNDMwLjgzIDExMi4xNSA0MDguMTIgQyAxMDUuNTEgMzkxLjEwIDEwMC42NiAzNzMuMjUgOTkuMDYgMzU1LjAxIEMgOTguNTcgMjkyLjY5IDk4LjIyIDIzMC4zNyA5OC4wMiAxNjguMDUgQyA5OC4xMCAxNjMuNzMgOTcuNTQgMTU5LjIxIDk5LjE4IDE1NS4xMCBDIDEwMS4xNiAxNDkuNjUgMTA1LjM0IDE0NC44NCAxMTAuOTcgMTQzLjAzIEMgMTE3LjA3IDE0MC41MiAxMjQuMzUgMTQxLjQ1IDEyOS42OCAxNDUuMzEgQyAxMzUuODMgMTQ5LjI1IDEzOC43MiAxNTYuODMgMTM4LjUyIDE2My45MiBDIDEzOC42NCAyMjUuOTYgMTM5LjEyIDI4OC4wMCAxMzkuNDggMzUwLjA0IEMgMTQwLjEyIDM2Mi4zMyAxNDMuNDAgMzc0LjI5IDE0Ny4wNSAzODUuOTggQyAxNTMuNDIgNDAzLjQzIDE2Mi40MCA0MjAuMjEgMTc1LjEyIDQzMy44OCBDIDE4OC4yMSA0NDkuMjkgMjA1Ljg5IDQ2MC4xNyAyMjQuNjkgNDY3LjI0IEMgMjQ0LjM1IDQ3NC4xMiAyNjUuMTcgNDc3LjczIDI4Ni4wMCA0NzcuODYgQyAzMDguOTggNDc4LjIwIDMzMi4zOSA0NzYuMTAgMzU0LjA1IDQ2Ny45NyBDIDM3MC45NiA0NjIuMjEgMzg2LjQ1IDQ1Mi42OSAzOTkuNjcgNDQwLjcxIEMgNDE3LjM4IDQyMi44NSA0MzAuNjcgNDAwLjUwIDQzNy4zNiAzNzYuMjEgQyA0NDAuMjQgMzY2LjczIDQ0Mi43NiAzNTYuOTYgNDQyLjU2IDM0Ni45OCBDIDQ0Mi45MyAyOTQuMzIgNDQzLjkyIDI0MS42NiA0NDMuNzUgMTg4Ljk5IEMgNDQzLjc3IDE3NS42OSA0NDMuODEgMTYyLjM4IDQ0My4zNiAxNDkuMDkgQyA0NDIuNjkgMTQyLjc0IDQzOS4xMiAxMzYuNjcgNDMzLjcyIDEzMy4yMCBDIDQyNy45MyAxMjguODUgNDIwLjIzIDEyOC4xMSA0MTMuMjkgMTI5LjMyIEMgNDA2LjEzIDEzMS4yOCA0MDAuOTEgMTM3LjQzIDM5OC4xMSAxNDQuMDYgQyAzOTcuNDIgMTQ1LjU5IDM5Ny4yMSAxNDcuMjggMzk3LjIzIDE0OC45NCBDIDM5Ny4yOCAyMDUuOTYgMzk3LjI0IDI2Mi45OCAzOTcuMjYgMzIwLjAwIEMgMzk4LjMyIDM0NS4wMCAzODguODIgMzY5LjQ0IDM3NC43MCAzODkuNzIgQyAzNTcuOTQgNDEzLjcyIDMzMC4xMyA0MjkuNDUgMzAwLjkzIDQzMS41NSBDIDI3NC45NyA0MzQuMjUgMjQ4LjAzIDQyNi41MiAyMjcuNTkgNDEwLjI3IEMgMjEzLjc1IDM5OS42NCAyMDIuMjQgMzg1Ljg3IDE5NC45MyAzNjkuOTggQyAxODguNTcgMzU3LjMwIDE4NS4wOCAzNDMuMjIgMTg1LjA1IDMyOS4wMiBDIDE4NC44MiAyNjYuMzkgMTg1LjIyIDIwMy43NyAxODUuNTEgMTQxLjE1IEMgMTg3LjIxIDEyNi40MSAxOTUuMjYgMTEzLjAyIDIwNS45OCAxMDMuMDIgQyAyMTQuNjkgOTUuMTYgMjI1Ljg2IDkwLjMxIDIzNy40OCA4OC44NyBaIiAvPg0KPC9nPg0KPC9zdmc+DQo="/>
</defs>
<style>
</style>
<g>
<use id="upscale" href="#img1" transform="matrix(.136,0,0,.136,-11,-11)"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

12
websiteFunctions/static/websiteFunctions/websiteFunctions.js
View File

@ -1771,7 +1771,7 @@ app.controller('WPsiteHome', function ($scope, $http, $timeout, $compile, $windo
$scope.currentStatus = response.data.currentStatus;
// Update status displays with progress
var statusHtml = '<i class="fas fa-spinner fa-pulse"></i> ' + response.data.currentStatus;
var statusHtml = '<lottie-player src="/static/animations/loader-spinner.json" background="transparent" speed="1" style="width: 20px; height: 20px; display: inline-block;" loop autoplay></lottie-player> ' + response.data.currentStatus;
if (response.data.installationProgress) {
statusHtml += ' (' + response.data.installationProgress + '%)';
}
@ -2331,7 +2331,7 @@ app.controller('RestoreWPBackup', function ($scope, $http, $timeout, $window) {
$scope.currentStatus = response.data.currentStatus;
// Update status displays with progress
var statusHtml = '<i class="fas fa-spinner fa-pulse"></i> ' + response.data.currentStatus;
var statusHtml = '<lottie-player src="/static/animations/loader-spinner.json" background="transparent" speed="1" style="width: 20px; height: 20px; display: inline-block;" loop autoplay></lottie-player> ' + response.data.currentStatus;
if (response.data.installationProgress) {
statusHtml += ' (' + response.data.installationProgress + '%)';
}
@ -4664,7 +4664,7 @@ app.controller('WPsiteHome', function ($scope, $http, $timeout, $compile, $windo
$scope.currentStatus = response.data.currentStatus;
// Update status displays with progress
var statusHtml = '<i class="fas fa-spinner fa-pulse"></i> ' + response.data.currentStatus;
var statusHtml = '<lottie-player src="/static/animations/loader-spinner.json" background="transparent" speed="1" style="width: 20px; height: 20px; display: inline-block;" loop autoplay></lottie-player> ' + response.data.currentStatus;
if (response.data.installationProgress) {
statusHtml += ' (' + response.data.installationProgress + '%)';
}
@ -5429,7 +5429,7 @@ app.controller('RestoreWPBackup', function ($scope, $http, $timeout, $window) {
$scope.currentStatus = response.data.currentStatus;
// Update status displays with progress
var statusHtml = '<i class="fas fa-spinner fa-pulse"></i> ' + response.data.currentStatus;
var statusHtml = '<lottie-player src="/static/animations/loader-spinner.json" background="transparent" speed="1" style="width: 20px; height: 20px; display: inline-block;" loop autoplay></lottie-player> ' + response.data.currentStatus;
if (response.data.installationProgress) {
statusHtml += ' (' + response.data.installationProgress + '%)';
}
@ -8433,7 +8433,7 @@ app.controller('WPsiteHome', function ($scope, $http, $timeout, $compile, $windo
$scope.currentStatus = response.data.currentStatus;
// Update status displays with progress
var statusHtml = '<i class="fas fa-spinner fa-pulse"></i> ' + response.data.currentStatus;
var statusHtml = '<lottie-player src="/static/animations/loader-spinner.json" background="transparent" speed="1" style="width: 20px; height: 20px; display: inline-block;" loop autoplay></lottie-player> ' + response.data.currentStatus;
if (response.data.installationProgress) {
statusHtml += ' (' + response.data.installationProgress + '%)';
}
@ -9317,7 +9317,7 @@ app.controller('RestoreWPBackup', function ($scope, $http, $timeout, $window) {
$scope.currentStatus = response.data.currentStatus;
// Update status displays with progress
var statusHtml = '<i class="fas fa-spinner fa-pulse"></i> ' + response.data.currentStatus;
var statusHtml = '<lottie-player src="/static/animations/loader-spinner.json" background="transparent" speed="1" style="width: 20px; height: 20px; display: inline-block;" loop autoplay></lottie-player> ' + response.data.currentStatus;
if (response.data.installationProgress) {
statusHtml += ' (' + response.data.installationProgress + '%)';
}