<!DOCTYPE html>
<html>
<head>
<title>Barra Lateral</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
body {
background-color: #333;
color: #fff;
}
.btn-spacing {
margin-bottom: 10px;
}
.btn-secondary {
background-color: #008080; /* Altere para a cor desejada */
border-color: #008080; /* Altere para a cor desejada */
}
.sidebar {
width: 100%;
height: auto;
background-color: #222;
padding: 15px;
}
.sidebar ul {
list-style: none;
padding-left: 0;
display: none;
}
.sidebar ul li {
margin-bottom: 10px;
}
.content {
padding: 15px;
}
.hide-sidebar {
display: none;
}
.menu-buttons {
display: flex;
flex-wrap: wrap;
}
.menu-buttons .btn {
margin-right: 10px;
}
.active {
background-color: #4CAF50 !important;
color: #fff !important;
}
.inactive {
background-color: #FF0000 !important;
color: #fff !important;
}
.toggle-sidebar-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 15px;
z-index: 9999;
}
.dashboard-button {
margin-right: 10px;
}
.menu-container {
display: flex;
align-items: center;
}
.dashboard-menu-container {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#menu-toggle").click(function(){
$("#menu").slideToggle();
$(this).toggleClass("active");
$("#new-menu").slideUp();
$("#new-menu-toggle").removeClass("active");
$("#button-1-links").slideUp();
$("#button-1").removeClass("active");
$("#button-2-links").slideUp();
$("#button-2").removeClass("active");
$("#button-3-links").slideUp();
$("#button-3").removeClass("active");
$("#toggle-sidebar").removeClass("active");
});
$("#new-menu-toggle").click(function(){
$("#new-menu").slideToggle();
$(this).toggleClass("active");
$("#menu").slideUp();
$("#menu-toggle").removeClass("active");
$("#button-1-links").slideUp();
$("#button-1").removeClass("active");
$("#button-2-links").slideUp();
$("#button-2").removeClass("active");
$("#button-3-links").slideUp();
$("#button-3").removeClass("active");
$("#toggle-sidebar").removeClass("active");
});
$("#button-1").click(function(){
$("#button-1-links").slideToggle();
$(this).toggleClass("active");
$("#menu").slideUp();
$("#menu-toggle").removeClass("active");
$("#new-menu").slideUp();
$("#new-menu-toggle").removeClass("active");
$("#button-2-links").slideUp();
$("#button-2").removeClass("active");
$("#button-3-links").slideUp();
$("#button-3").removeClass("active");
$("#toggle-sidebar").removeClass("active");
});
$("#toggle-sidebar").click(function(){
$(".sidebar").animate({width:'toggle'}, 200);
$(".content").toggleClass("col-xs-12 col-xs-9");
$(this).toggleClass("active");
});
});
</script>
</head>
<body>
<div class="sidebar">
<div class="menu-buttons">
<button id="menu-toggle" class="btn btn-primary">CONTAS SSH</button>
<button id="new-menu-toggle" class="btn btn-primary">REVENDAS</button>
<button id="button-1" class="btn btn-primary">SERVIDORES</button>
<button id="button-2" class="btn btn-primary">CONFIGURAÇÕES</button>
</div>
<ul id="menu" class="list-unstyled">
<li><a href="#">Criar Conta SSH</a></li>
<li><a href="#">Criar Teste SSH</a></li>
<li><a href="#">SSH Online</a></li>
<li><a href="#">Listar SSH</a></li>
</ul>
<ul id="new-menu" class="list-unstyled">
<li><a href="#">Novo Revendedor</a></li>
<li><a href="#">Revendedores</a></li>
<li><a href="#">Adicionar Servidor</a></li>
<li><a href="#">Alterar Revenda</a></li>
</ul>
<ul id="button-1-links" class="list-unstyled">
<li><a href="#">Novo Servidor</a></li>
<li><a href="#">Listar Servidores</a></li>
</ul>
</div>
<div class="content col-xs-9 col-xs-offset-3">
<!-- Main content -->
</div>
<div>
<div class="container"> <!-- /!/!/! HEADER -->
<h1>Bem-vindo, $_SESSIONusername ?>!</h1> <!-- !/!/ MAIN - Operation/Variable center xD -->
<p>Obrigado por fazer login.</p>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary btn-block btn-spacing">Criar Conta SSH</button>
</div>
<div class="col-md-6">
<button class="btn btn-primary btn-block btn-spacing">Criar Teste SSH</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-secondary btn-block btn-spacing">X Online</button>
</div>
<div class="col-md-6">
<button class="btn btn-secondary btn-block btn-spacing">X Contas SSH</button>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-danger btn-block btn-spacing">X Servidores</button>
</div>
<div class="col-md-6">
<button class="btn btn-danger btn-block btn-spacing">X Contas SSH Susp.</button>
</div>
</div>
<div class="row"> <!-- !/!/ FOOTER -->
<h1><center>---------------------</center></h1>
</div>
</div>
</div>
<div class="toggle-sidebar-container">
<div class="dashboard-menu-container">
<button id="dashboard-button" class="btn btn-danger dashboard-button">DASHBOARD</button>
<div class="menu-container">
<button id="toggle-sidebar" class="btn btn-primary">MENU</button>
<button id="button-3" class="btn btn-danger dashboard-button">SAIR</button>
</div>
</div>
</div>
</body>
</html>
------------------------
-Criar Conta ssh
ALERT Não utilize caracteres especiais (@!#$%&*¨.;:) e nem espaços no usuário e senha!!! ALERT
*Servidor - Lista
*$nomeServ - $ip - $n Conexões
*Quem será o Dono? (Crie uma revenda caso não exista nenhuma!) - Lista
*$nomeRevenda
*Usuario - 1linha - Etiqueta->Digite o Login...
*Senha - 1linha - etiqueta->randomnumber6d
*Validade em Dias - Seletor numerico 1+1
- Criar(verde) - Limpar(vermelho) -
