Compare commits
2 Commits
63ec0ebaa8
...
0d61dd1725
| Author | SHA1 | Date | |
|---|---|---|---|
| 0d61dd1725 | |||
| d7147b6c81 |
35
manage.html
35
manage.html
@@ -6,27 +6,16 @@
|
|||||||
<title>Safebox</title>
|
<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://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="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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<div>
|
<div class="sidebar-top">
|
||||||
<div id="logo" class="logo">
|
<div id="logo" class="logo">
|
||||||
<img src="/img/logo.png" alt="Safebox"/>
|
<img src="/img/logo.png" alt="Safebox"/>
|
||||||
<span>Safebox</span>
|
<span>Safebox</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="menu">
|
<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-th"></i><span>Applications</span></div>
|
||||||
<div class="menu-item"><i class="fas fa-hdd"></i><span>Disk Management</span></div>
|
<div class="menu-item"><i class="fas fa-hdd"></i><span>Disk Management</span></div>
|
||||||
@@ -46,23 +35,28 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="yellow-row">
|
<div class="yellow-row">
|
||||||
<div class="yellow-box">
|
|
||||||
<div id="pro_off">
|
<div id="pro_off">
|
||||||
|
<div class="yellow-box">
|
||||||
<h4>Safebox Pro</h4>
|
<h4>Safebox Pro</h4>
|
||||||
<p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
|
<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>
|
<a href="" class="details">Read details</a><br><br>
|
||||||
<img src="/img/upgrade.png" alt="Upgrade now" width="100%"/>
|
<img src="/img/upgrade.png" alt="Upgrade now" width="100%"/>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div id="pro_on" class="hidden">
|
<div id="pro_on" class="hidden">
|
||||||
<h4>Login</h4>
|
<div class="grey-box">
|
||||||
<p>Enjoy benefits and unlock more feature such as remote access, geo-redundant backups etc. <br><br>
|
<h4><img src="/img/globe.png" data-src="/img/globe.png" data-hover="/img/globe.png" alt="VPN" /> Remote access</h4>
|
||||||
<a href="" class="details">Read details</a><br><br>
|
<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>
|
</p>
|
||||||
|
<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 class="yellow-corner">
|
|
||||||
<img src="img/yellow_corner.png" alt=""/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -351,6 +345,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
vpnToggle.addEventListener("change", updateStatus);
|
vpnToggle.addEventListener("change", updateStatus);
|
||||||
|
vpnToggle.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
});
|
||||||
|
|
||||||
// Alapállapot beállítása
|
// Alapállapot beállítása
|
||||||
updateStatus();
|
updateStatus();
|
||||||
|
|||||||
33
style.css
33
style.css
@@ -1,5 +1,5 @@
|
|||||||
:root {
|
:root {
|
||||||
--highlight-color: #F9DB54;
|
--highlight-color: #FFB806;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@@ -96,16 +96,24 @@
|
|||||||
background-color: #101214;
|
background-color: #101214;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
/*height: 100vh;*/
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 20px 0;
|
|
||||||
margin: 20px;
|
margin: 20px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
transition: width 0.3s;
|
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 {
|
.logo {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 40px;
|
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -121,6 +129,8 @@
|
|||||||
.menu {
|
.menu {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
justify-content: center; /* középre igazít függőlegesen */
|
||||||
|
flex-grow: 1;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
@@ -277,13 +287,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.yellow-row {
|
.yellow-row {
|
||||||
|
flex-shrink: 0;
|
||||||
max-width:250px;
|
max-width:250px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 20px;
|
padding: 0px 20px 20px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yellow-box {
|
.yellow-box {
|
||||||
@@ -306,6 +317,20 @@
|
|||||||
align-items: flex-end;
|
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 {
|
.main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
|
|||||||
Reference in New Issue
Block a user