dellosmusic
Version:
Dellos Music Bot - Discord Music Bot
334 lines (316 loc) • 10.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard - Servers</title>
<link rel="shortcut icon" href="/logo.gif" type="image/gif" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
rel="stylesheet"
/>
<style>
@font-face {
font-family: "Euclid Circular B Medium";
src: url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.eot");
src: url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.eot?#iefix")
format("embedded-opentype"),
url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.woff2")
format("woff2"),
url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.woff")
format("woff"),
url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.ttf")
format("truetype"),
url("https://db.onlinewebfonts.com/t/721c73bcd2e49f3a621991089838b503.svg#Euclid Circular B Medium")
format("svg");
font-display: swap;
}
body {
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
color: #fff;
overflow-x: hidden;
font-family: "Euclid Circular B Medium", Poppins;
}
@media (min-width: 991.98px) {
main {
padding-left: 240px;
}
}
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
padding: 100px 0 0; /* Height of navbar */
width: 240px;
}
.circle1,
.circle2,
.circle3 {
background: linear-gradient(
to right bottom,
rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.1)
);
position: absolute;
border-radius: 50%;
z-index: -100;
}
.circle1 {
top: 5%;
right: 5%;
height: 10rem;
width: 10rem;
}
.circle2 {
top: 10%;
left: 10%;
border-radius: 50%;
height: 8rem;
width: 8rem;
}
.circle3 {
bottom: 10%;
left: 5%;
border-radius: 50%;
height: 6rem;
width: 6rem;
}
@media (max-width: 991.98px) {
.sidebar {
width: 100%;
z-index: 100;
}
}
.sidebar .active {
border-radius: 5px;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: 0.5rem;
overflow-x: hidden;
overflow-y: auto;
}
#servers img {
border-radius: 50%;
border: 2px solid white;
margin: 10px;
cursor: pointer;
}
.hide {
display: none;
}
.footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.footer p {
margin: 0;
line-height: 26px;
font-size: 15px;
color: #fff;
}
.footer p a {
background: linear-gradient(to right, #8a2387, #e94057, #f27121);
color: transparent;
-webkit-background-clip: text;
background-clip: text;
text-decoration: none;
}
.footer p a:hover {
color: white;
}
</style>
</head>
<body>
<section class="main">
<!--Main Navigation-->
<header>
<!-- Sidebar -->
<nav id="sidebarMenu" class="collapse d-lg-block sidebar collapse">
<div class="position-sticky">
<div class="list-group list-group-flush mx-3 mt-4">
<a
href="/dashboard"
class="list-group-item list-group-item-action py-2 ripple"
style="
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
"
aria-current="true"
>
<i class="fas fa-tachometer-alt fa-fw me-3"></i
><span>Main Dashboard</span>
</a>
<br />
<a
href="/servers"
class="list-group-item list-group-item-action py-2 ripple active"
style="
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
"
>
<i class="fas fa-server fa-fw me-3"></i
><span>Manage Servers</span>
</a>
<br />
<a
href="/logout"
class="list-group-item list-group-item-action py-2 ripple"
style="
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
"
>
<i class="fas fa-sign-out-alt fa-fw me-3"></i
><span>Logout</span>
</a>
</div>
</div>
</nav>
<!-- Sidebar -->
<!-- Navbar -->
<nav
id="main-navbar"
class="navbar navbar-expand-lg navbar-light fixed-top"
>
<!-- Container wrapper -->
<div class="container-fluid">
<!-- Toggle button -->
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#sidebarMenu"
aria-controls="sidebarMenu"
aria-expanded="false"
aria-label="Toggle navigation"
onclick="function re(){ let r = $('#sidebarMenu'); if(r.hasClass('collapse'))r.removeClass('collapse');else r.addClass('collapse')}re()"
>
<i class="fas fa-bars"></i>
</button>
<!-- Brand -->
<a class="navbar-brand text-white" href="/">
<img src="/logo.gif" height="40" alt="" loading="lazy" />
Dashboard - Servers
</a>
<div>
<h1 class="server-name"></h1>
</div>
</div>
</nav>
<!-- Navbar -->
</header>
<!--Main Navigation-->
<!--Main layout-->
<main style="margin-top: 58px">
<div class="container pt-4">
<!--Section: Main-->
<section>
<h1>Select A Server To Manage</h1>
<div id="servers" class="flex"></div>
</section>
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="copyright-text">
<p>
©
<a href="//github.com/SudhanPlayz/Discord-MusicBot"
>Discord Music Bot</a
>. All rights reserved. Made by
<a href="//github.com/SudhanPlayz">Sudhan</a> and its
<a
href="//github.com/SudhanPlayz/Discord-MusicBot/graphs/contributors"
>contributors</a
>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Footer -->
</div>
</main>
<!--Main layout-->
</section>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"
></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
</body>
<script>
$(document).ready(() => {
$.get("/api/user", (data) => {
data.user.guilds.forEach((Guild) => {
if (!Guild.hasPerms) return;
$("#servers").append(`
<img class="server-${Guild.id}" onclick="window.location = '/servers/${
Guild.id
}'" width="60" height="60" src="${
Guild.icon
? `https://cdn.discordapp.com/icons/${Guild.id}/${Guild.icon}.png`
: "https://www.webcolorsonline.com/images/error.png"
}" alt="${Guild.name}">
`); //yes ofcource im an IDIOT
$(`.server-${Guild.id}`).hover(() => {
$(".server-name").text(Guild.name);
});
});
});
});
</script>
</html>