layout changes
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
2025-05-30 15:56:43 +00:00
parent 99b248577e
commit 4de1511546
2 changed files with 43 additions and 15 deletions

View File

@@ -111,10 +111,14 @@ function check_vpn() {
if (data=="2") { if (data=="2") {
$('#vpn_off').hide(); $('#vpn_off').hide();
$('#vpn_on').show(); $('#vpn_on').show();
$('#pro_off').hide();
$('#pro_on').show();
} }
else { else {
$('#vpn_on').hide(); $('#vpn_on').hide();
$('#vpn_off').show(); $('#vpn_off').show();
$('#pro_on').hide();
$('#pro_off').show();
} }
setTimeout(check_vpn, 10000); setTimeout(check_vpn, 10000);
}); });

View File

@@ -129,21 +129,43 @@
color: orange; color: orange;
border: 1px solid orange; border: 1px solid orange;
} }
.left-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin: 20px 0;
cursor: pointer;
}
.left-buttons button {
min-width: 120px;
padding: 5px 5px;
background: none;
border: 1px solid var(--button-border);
border-radius: 10px;
cursor: pointer;
color: var(--text-color);
}
.container-frame {
border: 1px solid;
border-radius: 10px;
padding: 0px;
margin: 5px;
height: 98vh;
}
.container { .container {
clear:both; clear:both;
float:none; float:none;
border: 1px solid;
border-radius: 10px;
padding-bottom: 10px; padding-bottom: 10px;
margin: 5px; margin: 5px;
height: 88vh;
} }
.leftside { .leftside {
float:left; float:left;
width:20%; width:10%;
} }
.rightside { .rightside {
float:right; float:right;
width:80%; width:90%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 88vh; height: 88vh;
@@ -157,8 +179,8 @@
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
gap: 40px; gap: 40px;
min-width: 92%; min-width: 96%;
max-width: 92%; max-width: 96%;
margin: 0 auto; margin: 0 auto;
border-radius: 10px; border-radius: 10px;
box-sizing: border-box; box-sizing: border-box;
@@ -188,7 +210,7 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 97%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@@ -514,6 +536,7 @@
</head> </head>
<body> <body>
<div class="container-frame">
<div class="container"> <div class="container">
<div class="leftside"> <div class="leftside">
<div class="logo"> <div class="logo">
@@ -531,17 +554,14 @@
<span id="vpn_on" class="hidden green"><b>ON</b></span> <span id="vpn_on" class="hidden green"><b>ON</b></span>
<span id="vpn_off" class="hidden red"><b>OFF</b></span> <span id="vpn_off" class="hidden red"><b>OFF</b></span>
</div> </div>
<div class="buttons"> <div class="left-buttons">
<button id="servicesBtn">Services</button> <button id="servicesBtn">Services</button>
</div> </div>
<div class="settings">Settings</div> <div class="settings">Settings</div>
<div class="buttons"> <div class="left-buttons">
<button id="updatesBtn">Updates</button>
</div>
<div class="buttons">
<button id="repositoriesBtn">Repositories</button> <button id="repositoriesBtn">Repositories</button>
</div> </div>
<div class="buttons"> <div class="left-buttons">
<button id="systemservicesBtn">System services</button> <button id="systemservicesBtn">System services</button>
</div> </div>
<br> <br>
@@ -558,6 +578,7 @@
<div class="buttons"> <div class="buttons">
<button id="myAppsBtn">My Apps</button> <button id="myAppsBtn">My Apps</button>
<button id="installAppsBtn">Install Apps</button> <button id="installAppsBtn">Install Apps</button>
<button id="updatesBtn">Updates</button>
<button id="backupBtn">Backup</button> <button id="backupBtn">Backup</button>
<button id="diskBtn">Disk Management</button> <button id="diskBtn">Disk Management</button>
<button id="monitorBtn">Monitor</button> <button id="monitorBtn">Monitor</button>
@@ -585,7 +606,8 @@
<div class="footer-center"> <div class="footer-center">
<p>Want to access your services remotely?</p> <p>Want to access your services remotely?</p>
<p><strong><a href="#">Go Pro!</a></strong></p> <p class="hidden" id="pro_off"><strong><a href="#">Get Pro!</a></strong></p>
<p class="hidden" id="pro_on"><strong><a href="#">Pro settings</a></strong></p>
</div> </div>
<div class="footer-social"> <div class="footer-social">
@@ -594,6 +616,8 @@
</div> </div>
</footer> </footer>
</div>
<script> <script>
const toggle = document.getElementById('themeToggle'); const toggle = document.getElementById('themeToggle');
toggle.addEventListener('click', () => { toggle.addEventListener('click', () => {
@@ -803,6 +827,6 @@
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="common.js?t=8"></script> <script src="common.js?t=9"></script>
</body> </body>
</html> </html>