Compare commits
2 Commits
63ec0ebaa8
...
0d61dd1725
| Author | SHA1 | Date | |
|---|---|---|---|
| 0d61dd1725 | |||
| d7147b6c81 |
43
manage.html
43
manage.html
@@ -6,27 +6,16 @@
|
||||
<title>Safebox</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Switzer:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
|
||||
<link rel="stylesheet" href="style.css?t=1" />
|
||||
<link rel="stylesheet" href="style.css?t=5" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<div>
|
||||
<div class="sidebar-top">
|
||||
<div id="logo" class="logo">
|
||||
<img src="/img/logo.png" alt="Safebox"/>
|
||||
<span>Safebox</span>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<div class="menu-item" style="margin-bottom:20px">
|
||||
<img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN" />
|
||||
<div class="menu-label">
|
||||
<span id="vpnBtn">VPN</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="vpnToggle">
|
||||
<span class="slider-text"><span class="switch-label">OFF</span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div class="menu-item"><i class="fas fa-th"></i><span>Applications</span></div>
|
||||
<div class="menu-item"><i class="fas fa-hdd"></i><span>Disk Management</span></div>
|
||||
@@ -46,24 +35,29 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="yellow-row">
|
||||
<div id="pro_off">
|
||||
<div class="yellow-box">
|
||||
<div id="pro_off">
|
||||
<h4>Safebox Pro</h4>
|
||||
<p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
|
||||
<a href="" class="details">Read details</a><br><br>
|
||||
<img src="/img/upgrade.png" alt="Upgrade now" width="100%"/>
|
||||
</p>
|
||||
</div>
|
||||
<div id="pro_on" class="hidden">
|
||||
<h4>Login</h4>
|
||||
<p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
|
||||
<a href="" class="details">Read details</a><br><br>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pro_on" class="hidden">
|
||||
<div class="grey-box">
|
||||
<h4><img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN" /> Remote access</h4>
|
||||
<p>It allows you to connect your installed apps to a custom domain (your own or one registered through us), so you can securely log in from any browser, anywhere in the world.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="yellow-corner">
|
||||
<img src="img/yellow_corner.png" alt=""/>
|
||||
<div class="vpn-item">
|
||||
<span id="vpnBtn">VPN</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox" id="vpnToggle" onclick="return false">
|
||||
<span class="slider-text"><span class="switch-label">OFF</span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="main" >
|
||||
@@ -351,6 +345,9 @@
|
||||
}
|
||||
|
||||
vpnToggle.addEventListener("change", updateStatus);
|
||||
vpnToggle.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// Alapállapot beállítása
|
||||
updateStatus();
|
||||
|
||||
33
style.css
33
style.css
@@ -1,5 +1,5 @@
|
||||
:root {
|
||||
--highlight-color: #F9DB54;
|
||||
--highlight-color: #FFB806;
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -96,16 +96,24 @@
|
||||
background-color: #101214;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/*height: 100vh;*/
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
margin: 20px;
|
||||
border-radius: 20px;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.sidebar-top {
|
||||
padding: 20px 0;
|
||||
overflow-y: auto;
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* ez teszi középre függőlegesen a menüt */
|
||||
}
|
||||
|
||||
.logo {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
@@ -121,6 +129,8 @@
|
||||
.menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; /* középre igazít függőlegesen */
|
||||
flex-grow: 1;
|
||||
gap: 5px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
@@ -277,13 +287,14 @@
|
||||
}
|
||||
|
||||
.yellow-row {
|
||||
flex-shrink: 0;
|
||||
max-width:250px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
padding: 0px 20px 20px 20px;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
@@ -306,6 +317,20 @@
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.grey-box {
|
||||
border: 2px solid #41464f;
|
||||
border-radius: 20px 20px 0px 20px;
|
||||
color: #999;
|
||||
text-align: left;
|
||||
margin: 0px;
|
||||
padding: 10px 18px;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
.grey-box h4 {
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
padding: 30px;
|
||||
|
||||
Reference in New Issue
Block a user