dellosmusic
Version:
Dellos Music Bot - Discord Music Bot
432 lines (410 loc) • 14.3 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 - Server</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;
}
.card {
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);
z-index: 2;
}
@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 {
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;
}
#song-info span {
color: #5867dd;
text-decoration: none;
cursor: pointer;
}
#song-info span:hover {
color: #34bfa3;
}
.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"
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 - Manage Server
</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: Manage Server -->
<section>
<h1>Manage Server</h1>
<div class="row">
<div class="col-xl-3 col-sm-6 col-12 mb-4">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between px-md-1">
<div>
<h3 class="text-danger" id="songInQueue">0</h3>
<p class="mb-0">Songs In Queue</p>
</div>
<div class="align-self-center">
<i class="fas fa-music text-danger fa-3x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12 mb-4">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between px-md-1">
<div>
<h3 class="text-success" id="songLoop"></h3>
<p class="mb-0">Song Loop</p>
</div>
<div class="align-self-center">
<i class="fas fa-redo text-success fa-3x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12 mb-4">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between px-md-1">
<div>
<h3 class="text-warning" id="queueLoop"></h3>
<p class="mb-0">Queue Loop</p>
</div>
<div class="align-self-center">
<i class="fas fa-sync text-warning fa-3x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12 mb-4">
<div class="card">
<div class="card-body">
<div class="d-flex justify-content-between px-md-1">
<div>
<h3 class="text-info" id="prefix">></h3>
<p class="mb-0">Prefix</p>
</div>
<div class="align-self-center">
<i class="fas fa-robot text-info fa-3x"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container text-center" id="song-info">
<h1>Song Info</h1>
<p>Now Playing: <span id="now-playing"></span></p>
<br />
<p>Duration</p>
<p id="duration"></p>
</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) => {
let Guild = data.user.guilds.find(
(x) => x.id == window.location.pathname.split("/")[2]
);
if (!Guild.inGuild) {
$.get("/api/info", (data) => {
window.location = `https://discord.com/oauth2/authorize?client_id=${
data.ClientID
}&permissions=${data.Permissions}&scope=bot%20${data.Scopes.join(
"%20"
)}&redirect_uri=${data.Website}${
data.CallbackURL
}&response_type=code`;
});
}
$(".server-name").text(Guild.name);
});
var socket = io();
socket.emit("server", window.location.pathname.split("/")[2]);
socket.on("server", (data) => {
$("#songInQueue").text(data.queue);
$("#songLoop").text(data.songsLoop);
$("#queueLoop").text(data.queueLoop);
$("#prefix").text(data.prefix);
$("#now-playing").text(
data.nowPlaying ? data.nowPlaying.title : "Nothing playing"
);
if (data.position)
$("#duration").html(
`${data.position}<span> ${data.bar} </span>${data.maxDuration}`
);
else
$("#duration").html(
`<span> Nothing is playing right now, Add some songs in discord? </span>`
);
});
});
</script>
</html>