mirror of
https://github.com/ION606/selmer-bot-website.git
synced 2026-06-05 23:46:14 +00:00
a-box31
ade281602f
This is a test to use the hamburger menu and be able to show Selmer Bot on mobile and tablet screens. It is not fully functional yet as it has to media query for specific size values better.
471 lines
24 KiB
HTML
471 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<!-- MAKE SURE THE PERSON CAN'T CHANGE THE SERVER NUMBER AND ACCESS RANDOM SERVERS -->
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- Discord embed start -->
|
|
<title>Website Name</title>
|
|
<meta content="Selmer Bot Web Dashboard" property="og:title" />
|
|
<meta content="A web dashboard for Selmer Bot (still in Beta)" property="og:description" />
|
|
<meta content="https://www.selmerbot.com" property="og:url" />
|
|
<meta content="https://raw.githubusercontent.com/ION606/selmer-bot-website/main/assets/favicon.ico" property="og:image" />
|
|
<meta content="#050089" data-react-helmet="true" name="theme-color" />
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<!-- Discord embed end -->
|
|
|
|
<title>Selmer Bot Web Dashboard</title>
|
|
|
|
<link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico?raw=true" type="image/x-icon">
|
|
<script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script>
|
|
|
|
<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=Rajdhani:wght@300&display=swap" rel="stylesheet">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="/CSS/index.css">
|
|
|
|
<!-- <script type="text/javascript" src="main.js"></script> -->
|
|
|
|
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> (no github icon so...) -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<script>
|
|
function generateRandomString() {
|
|
let randomString = '';
|
|
const randomNumber = Math.floor(Math.random() * 10);
|
|
|
|
for (let i = 0; i < 20 + randomNumber; i++) {
|
|
randomString += String.fromCharCode(33 + Math.floor(Math.random() * 94));
|
|
}
|
|
|
|
return randomString;
|
|
}
|
|
|
|
window.onload = () => {
|
|
// createBody();
|
|
|
|
const fragment = new URLSearchParams(window.location.hash.slice(1));
|
|
const [accessToken, tokenType, state] = [fragment.get('access_token'), fragment.get('token_type'), fragment.get('state')];
|
|
|
|
if (!accessToken && !window.localStorage.getItem('sessionId')) {
|
|
const randomString = generateRandomString();
|
|
localStorage.setItem('oauth-state', randomString);
|
|
document.getElementById('guildslink').href = '';
|
|
document.getElementById('guildslink').style = 'cursor: no-drop;';
|
|
|
|
// $(".custom-alert").slideUp(0);
|
|
// document.getElementById('login').href += `&state=${encodeURIComponent(btoa(randomString))}`;
|
|
// return document.getElementById('login').style.display = 'block';
|
|
} else if (!accessToken && window.localStorage.getItem('sessionId')) {
|
|
//The user is already logged in
|
|
document.getElementById('loginbtn').style.display = 'none'
|
|
document.getElementById('logoutbtn').style.display = "block";
|
|
}
|
|
|
|
if (localStorage.getItem('oauth-state') !== atob(decodeURIComponent(state))) {
|
|
console.log('You may have been click-jacked!');
|
|
}
|
|
|
|
fetch('https://discord.com/api/users/@me', {
|
|
headers: {
|
|
authorization: `${tokenType} ${accessToken}`,
|
|
},
|
|
})
|
|
.then(result => result.json())
|
|
.then(response => {
|
|
// document.getElementById('TEMP').innerText = response.toString();
|
|
// console.log(response);
|
|
const { id, username, discriminator } = response;
|
|
window.sessionStorage.setItem('Id', id);
|
|
// console.log(guilds);
|
|
// document.getElementById('info').innerText += ` ${username}#${discriminator}`;
|
|
|
|
// window.location = `http://:53134/user?id=${id}`;
|
|
})
|
|
.catch(console.error);
|
|
|
|
//Guilds section
|
|
fetch('https://discord.com/api/users/@me/guilds', {
|
|
// method: 'POST',
|
|
headers: {
|
|
authorization: `${tokenType} ${accessToken}`,
|
|
}
|
|
}).then(response => {
|
|
response.json().then((result) => {
|
|
const owned = result.filter((inp) => { return (inp.owner); });
|
|
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('post', 'https://www.selmerbot.com/user/', true);
|
|
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
xhr.setRequestHeader('guilds', JSON.stringify(owned));
|
|
xhr.setRequestHeader('userId', window.sessionStorage.getItem('Id'));
|
|
|
|
xhr.onloadend = (e) => {
|
|
//No need
|
|
window.localStorage.removeItem("Id");
|
|
window.localStorage.setItem('sessionId', xhr.response);
|
|
|
|
document.getElementById('alertrow').style = "";
|
|
window.location.href = "/";
|
|
|
|
//Too far down, user can't see it
|
|
// $(".custom-alert").slideDown(500);
|
|
|
|
// window.setTimeout(function() {
|
|
// $(".custom-alert").slideUp(500, function() {
|
|
// $(this).remove();
|
|
// window.location.href = "index.html";
|
|
// });
|
|
// }, 5000);
|
|
}
|
|
|
|
xhr.send(JSON.stringify(owned));
|
|
}).then((r) => {
|
|
|
|
});
|
|
})
|
|
.catch(console.error);
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
//Get the redirect link <!-- NOTE: "response_type=token" ALWAYS!!! https://www.selmerbot.com/ -->
|
|
function getAPIRedirect() {
|
|
if (window.location.href.indexOf('localhost') != -1) {
|
|
return 'https://discord.com/api/oauth2/authorize?client_id=926551095352901632&redirect_uri=http%3A%2F%2Flocalhost%3A53134%2F&response_type=token&scope=identify%20guilds';
|
|
} else {
|
|
// return "https://discord.com/api/oauth2/authorize?client_id=944046902415093760&redirect_uri=https%3A%2F%2Fselmer-bot-website.herokuapp.com%2F&response_type=token&scope=identify%20guilds"
|
|
return 'https://discord.com/api/oauth2/authorize?client_id=944046902415093760&redirect_uri=https%3A%2F%2Fwww.selmerbot.com%2F&response_type=token&scope=identify%20guilds';
|
|
}
|
|
}
|
|
|
|
function logout() {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('post', 'https://www.selmerbot.com/logout/', true);
|
|
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
|
|
xhr.setRequestHeader('sessionid', window.localStorage.getItem('sessionId'));
|
|
|
|
xhr.onloadend = (e) => {
|
|
window.localStorage.clear();
|
|
window.sessionStorage.clear();
|
|
window.location.href = '/';
|
|
}
|
|
xhr.send();
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
// function createBody() {
|
|
// var temp = document.getElementById("mainTemplate");
|
|
// var clon = temp.content.cloneNode(true);
|
|
// document.body.appendChild(clon);
|
|
// }
|
|
</script>
|
|
</head>
|
|
|
|
|
|
|
|
<body>
|
|
|
|
<div class="box-area">
|
|
|
|
<header>
|
|
<div class="main-header">
|
|
<nav class="navigation">
|
|
|
|
<div class="logo">
|
|
<a class="navbar-brand" href="/">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
|
|
</a>
|
|
<a href="#"><h1 class="brand-name brand-name-large">Selmer Bot<h1></a>
|
|
</div>
|
|
|
|
<a href="#" class="toggle-button">
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
</a>
|
|
|
|
<div class="navbar-links">
|
|
<ul>
|
|
<li>
|
|
<a href="myGuilds" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="calendar" id="callink" class="nav-link"><i class="fa-solid fa-calendar" alt="Calendar" style="scale: 2; color: lightgrey;"></i></a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="https://docs.selmerbot.com" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="premium" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="team" class="nav-link"><i class="fa-solid fa-user-gear" style="scale: 2; color: rgb(12, 216, 5);" alt="AUTHOR"></i></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div class="banner-area">
|
|
<h2>this is banner</h2>
|
|
</div>
|
|
</header>
|
|
|
|
|
|
<!-- Page Content -->
|
|
<section class="content-area">
|
|
|
|
<div class="row custom-alert" style="display: none;" id="alertrow">
|
|
<div class="alert alert-warning alert-dismissible" id="banner" style="text-align: center" role="alert">
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
<strong class="mx-auto">Logged In Successfully!</strong> <!-- This alert box could indicate a successful or positive action. -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div style="text-align: center; align-content: center;">
|
|
|
|
<!- <h2 style="color:wheat">Based off a real Professor of Logic!</h2> ->
|
|
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="outline-style: dashed; border-radius: 50%; outline-color: green;">
|
|
</div> -->
|
|
|
|
|
|
<!-- Adds margins to the page -->
|
|
<div class="container">
|
|
|
|
<div id="music" class="row pb-md-5 mt-md-5">
|
|
<div class="col-xxl-4 col-xl-4 col-lg-5 col-md-12">
|
|
<img class="img-responsive" style="border-style: dashed; border-color:rgb(11, 189, 189);" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio1.png?raw=true">
|
|
<!-- <img class="img-responsive overlay-content" style="border-style: dashed; border-color:rgb(11, 189, 189); transform: rotate(25deg); margin-bottom: 20%; margin-left: 45%;" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio2.png?raw=true"> -->
|
|
</div>
|
|
|
|
<div class="col-xxl-4 col-xl-4 col-lg-5 col-md-6">
|
|
<div class="container desctext">
|
|
<p style="white-space: pre-line;">
|
|
Play your favorite songs with easy-to-use controls!
|
|
</p>
|
|
|
|
<b>Features: </b>
|
|
<ul>
|
|
<li>
|
|
Easy Controls
|
|
</li>
|
|
<li>
|
|
Audio Queue
|
|
</li>
|
|
<li>
|
|
Stopping, pausing and unpausing!
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="anime" class="mx-auto container pt-lg-5 mt-lg-5 mt-sm-0 pt-sm-0">
|
|
<div id="features" class="row">
|
|
<div class="col-xxl-4 col-xl-5 col-lg-12 col-md-12 order-xl-first order-lg-last p-lg-0 pt-lg-4">
|
|
<div class="container desctext" style="width: 440px; background-color: rgba(77, 206, 3, 0.322); height: 300px;">
|
|
<p style="white-space: pre-line;">
|
|
Get details about your favorite Anime and Manga!
|
|
</p>
|
|
|
|
<b>Features: </b>
|
|
<ul>
|
|
<li>
|
|
Three different styles: <b>Fancy, Summary, and Stats</b>
|
|
</li>
|
|
<li>
|
|
Get info on the newsest releases
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
<i>I've actually mispelled anime/manga names several times and found some amazing new mangas</i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="animecarousel" class="carousel slide col-xxl-4 col-xl-4 col-lg-5 col-md-12" data-bs-ride="carousel" style="width: 650px; position: relative; margin: auto; height: 650px;">
|
|
<div class="carousel-inner" style="background-color: #36393f; height: 650px;">
|
|
<div class="carousel-item active" style="position: relative">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Anime1.png?raw=true" alt="Shop1" class="d-block carousel-img">
|
|
</div>
|
|
|
|
<div class="carousel-item" style="position: relative">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Anime2.png?raw=true" alt="Shop2" class="d-block carousel-img" style="margin:auto; margin-top: 15px;">
|
|
</div>
|
|
|
|
<div class="carousel-item" style="position: relative; text-align: center;">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Anime3.png?raw=true" alt="Shop2" class="d-block carousel-img" style="margin:auto; margin-top: 30px;">
|
|
<!-- <h2 style="margin-top: 70px; color: white; font-family: Goudy Old Style;">Reach up to Rank 101!</h2> -->
|
|
</div>
|
|
</div>
|
|
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#animecarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon"></span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#animecarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="shop" class="container pt-5 pb-5">
|
|
<div id="features" class="row pt-5">
|
|
<div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
|
|
<div id="shopcarousel" class="carousel slide" data-bs-ride="carousel" style="width: 500px; height: 300px;">
|
|
<div class="carousel-inner" style="background-color: #36393f; height: 300px;">
|
|
<div class="carousel-item active">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/shop1.png?raw=true" alt="Shop1" class="d-block carousel-img w-100">
|
|
</div>
|
|
|
|
<div class="carousel-item">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/work.png?raw=true" alt="Work1" class="d-block carousel-img" style="margin:auto; margin-top: 15px;">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/balance.png?raw=true" alt="Balance1" class="d-block carousel-img" style="margin:auto">
|
|
</div>
|
|
|
|
<div class="carousel-item" style="text-align: center;">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/rank.png?raw=true" alt="Rank1" class="d-block carousel-img w-100" style="margin:auto; margin-top: 30px;">
|
|
<h2 style="margin-top: 70px; color: white; font-family: Goudy Old Style;">Reach up to Rank 101!</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#shopcarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon"></span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#shopcarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <span class="col" style="float: right"> -->
|
|
<div class="desctext pt-1" style="width: 450px; height: 200px; background-color: rgba(243, 159, 3, 0.322);">
|
|
<p style="white-space: pre-line;">
|
|
Use the shop and even add custom items!
|
|
</p>
|
|
|
|
<b>Features: </b>
|
|
<ul>
|
|
<li>
|
|
Customizable Items
|
|
</li>
|
|
<li>
|
|
Selling and Buying among server members
|
|
</li>
|
|
<li>
|
|
Earning XP and currency through work and games!
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- </span> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="games" class="container pt-5">
|
|
<div class="row pt-5">
|
|
<div class="col pt-5">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/adb98105f825c4f9f75681c4ac513c72f184ea37/assets/tmonitor.png?raw=true" class="ps-lg-5 ps-sm-5" style="position: absolute; margin-top: 50px; scale: 1.5;">
|
|
|
|
<div id="gamescarousel" class="carousel slide p-md-0" data-bs-ride="carousel" style="width: 600px; height: 300px;">
|
|
<div class="carousel-inner" style="background-color: #36393f; height: 300px; border-style: none;">
|
|
<div class="carousel-item active">
|
|
<div class="row">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/ttcplayed.jpeg?raw=true" alt="ttc1" class="d-block carousel-img col-sm-6" style="margin-top: 20px;">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/tttwon.jpeg?raw=true" alt="ttc2" class="d-block carousel-img col-sm-6" style="margin-top: 20px;">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-item" style="position: relative">
|
|
<div class="row">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/trivia1.png?raw=true" alt="ttc1" class="d-block carousel-img" style="margin-top: 20px;">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/triviafail.png?raw=true" alt="ttc1" class="d-block carousel-img" style="scale: 0.8">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carousel-item" style="position: relative; text-align: center;">
|
|
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/triviapass.png?raw=true" alt="ttc1" class="d-block carousel-img" style="margin: auto; margin-top: 20px;">
|
|
</div>
|
|
</div>
|
|
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#gamescarousel" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon"></span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#gamescarousel" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- <div style="margin-top: 200px;"></div> -->
|
|
|
|
<span class="container desctext col-xl-1" style="width: 500px; background-color: rgba(243, 3, 3, 0.322); float: right; margin-top: 200px">
|
|
<p style="white-space: pre-line;">
|
|
Play games and win XP and Selmer Coins!
|
|
</p>
|
|
|
|
<b>Features: </b>
|
|
<ul>
|
|
<li>
|
|
Sever games
|
|
</li>
|
|
<li>
|
|
Play by yourself or others
|
|
</li>
|
|
<li>
|
|
Use the currency in the item shop!
|
|
</li>
|
|
</ul>
|
|
|
|
<b>Games: </b>
|
|
<ul>
|
|
<li>
|
|
Trivia
|
|
</li>
|
|
<li>
|
|
Tic Tac Toe
|
|
</li>
|
|
</ul>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div style="margin-top: 500px;"></div> -->
|
|
<!-- <img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/AI1.png?raw=true"> -->
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <script type="module" src="./main.js", type="application/json"></script> -->
|
|
<footer class="footer-area">
|
|
<!-- Footer -->
|
|
<ul style="text-align: center;" class="row">
|
|
<li style="display: inline; vertical-align: text-top;">
|
|
<a href="https://github.com/ION606/selmerBot"><i class="fa fa-github" style="font-size:72px; color: #000000;" alt="Github Repository"></i></a>
|
|
<span style="margin-left: 40px;"></span>
|
|
<a href="https://discord.com/oauth2/authorize?client_id=944046902415093760&scope=applications.commands+bot&permissions=549755289087"><img src="https://cdn-icons-png.flaticon.com/512/5968/5968756.png" style="width: 72px; height: 72px; margin-bottom: 40px;" alt="Discord Invite Link"></a>
|
|
</li>
|
|
</ul>
|
|
</footer>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|