8 Commits

Author SHA1 Message Date
a-box31 0a0a0d3cdb Banner Responsiveness
Added the description to the banner and made the banner work for smaller screen sizes.
2022-12-25 02:37:23 -05:00
a-box31 6de8db0780 Fixing The Overflow Issue
Changed default attribute in html from overflow being shown to hidden.
2022-12-23 05:06:22 -05:00
a-box31 ade281602f Hamburger Test
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.
2022-11-29 16:41:09 -05:00
a-box31 f75ddfe6e2 better scroll bars
Added theme to the scroll bar and scroll thumb. Looks better to scroll.
2022-11-29 13:14:59 -05:00
a-box31 d7a70a92c0 Adding content to navigation
Added the website title and logo to the page making it work with the navigation. The rest of the icons must be added as well as a hamburger menu for smaller page sizes.
2022-11-29 12:42:47 -05:00
a-box31 881e070c87 Fixed Footer
Last push created an issue with the footer of the page. Layering Error Fixed.
2022-11-25 19:08:30 -05:00
a-box31 0ef0c8e1fe Mark1 navigation
creating a better and functional navigation tab. Added layered scrolling with relative positioning of elements in the DOM.
2022-11-25 12:23:31 -05:00
a-box31 56c01d6a8a background resizing
Incorrect background image sizing. Should leave with to be auto.
2022-11-24 22:32:33 -05:00
4 changed files with 766 additions and 42 deletions
+265 -25
View File
@@ -1,16 +1,198 @@
html { width:100%; height:100%; margin:0; padding:0; } /* General styles for the page */
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
width:100%;
height:100%;
margin:0;
padding:0;
overflow-x: hidden;
}
body { body {
background-color: rgb(41, 42, 48); background-color: rgb(41, 42, 48);
/* background-color: rgb(1, 1, 59); */ /* background-color: rgb(1, 1, 59); */
width:100%; height:100%; margin:0; padding:0; height:100%; margin:0; padding:0;
} }
/* Better Scroll Bar */
body::-webkit-scrollbar {
width: .7rem;
height: .7rem;
}
body::-webkit-scrollbar-track {
background-color: rgb(50,50,50);
}
body::-webkit-scrollbar-thumb {
background-color: rgb(60,60,60);
border-radius: 10px;
}
/* header portion */
.main-header {
margin: 0 auto;
background-color: black;
height: 100px;
width: 100%;
z-index: 12;
position: fixed;
top: 0;
}
header {
text-align: center;
}
.brand-name {
/* class for band name: should be centered wherever it is */
text-align: center;
/* heading elements like h1 all have margins: let the margins be 0 */
margin: 0;
font-size: 1em;
/* changing the everything tag's font set on the heading to be different */
font-family: Rajdhani, sans-serif, poppins;
/*
Since heading are by default bolded, the font-weight can be changed to
normalize the bolded text
*/
font-weight: normal;
/* All band names should be white */
color: white;
}
.band-name-large {
font-size: 2em;
}
.logo {
width: 50%;
float: left;
line-height: 100px;
display: flex;
align-items: center;
margin-left: 5%
}
.logo a {
text-decoration: none;
font-size: 30px;
font-family: poppins, sans-serif;
color: #fff;
letter-spacing: 5px;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.toggle-button {
position: absolute;
top: 3rem;
right: 3rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 22px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
color: #fff;
padding: 2rem;
display: block;
}
.navbar-links li:hover {
background-color: rgba(255, 255, 255, 0.5)
}
.navbar-links ul {
margin:0;
padding:0;
display: flex;
}
.banner-area {
width: 100%;
height: 500px;
position: fixed;
top: 100px;
background-image: url('https://github.com/ION606/selmer-bot-website/blob/main/assets/Header%20BK.gif?raw=true');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.banner-area h2 {
padding: 5%;
font-size: 50px;
font-family: sans-serif, poppins;
text-transform: uppercase;
color: #fff;
}
.content-area {
padding-top: 5px;
width: 100vw;
height: auto;
margin-top: 100px;
position: relative;
top: 450px;
background-color: rgb(41, 42, 48);
}
.content-container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
footer {
background-color: rgb(41, 42, 48);
}
.footer-area {
padding-top: 30px;
width: 100%;
position: relative;
top: 450px;
background-color: rgb(41, 42, 48);
}
/* I have no clue */
.loginbtn { .loginbtn {
margin-top: 14px; margin-top: 14px;
scale: 1.2; scale: 1.2;
border-radius: 10%; border-radius: 10%;
} }
.loginbtn:hover { .loginbtn:hover {
color: #377aea; color: #377aea;
} }
@@ -44,22 +226,6 @@ body {
transition-delay: 0.3s; transition-delay: 0.3s;
} }
nav {
background-color: rgb(0, 0, 0);
/* color: blue; */
/* text-align: center; */
}
.navbar .nav-item {
margin-right: 25px;
margin-left: 25px;
}
#right {
float: right;
margin-right: 50px;
}
.logoutbtn { .logoutbtn {
margin-top: 14px; margin-top: 14px;
scale: 1.2; scale: 1.2;
@@ -72,6 +238,7 @@ nav {
color: red; color: red;
} }
.desctext { .desctext {
/* float:left; */ /* float:left; */
color: white; color: white;
@@ -83,6 +250,7 @@ nav {
width: auto; width: auto;
} }
/************************* /*************************
CAROUSEL CAROUSEL
*************************/ *************************/
@@ -93,7 +261,6 @@ nav {
margin-bottom: 100px; margin-bottom: 100px;
background: #faf9f9; background: #faf9f9;
border:1px solid rgb(94, 104, 104); border:1px solid rgb(94, 104, 104);
} }
.carousel-control.right, .carousel-control.right,
@@ -124,14 +291,87 @@ nav {
text-shadow: none; text-shadow: none;
} }
.item{ .item {
position: relative; position: relative;
} }
.navbar-fixed-top {
/* FIT TO SMALLER SCREEN */
@media (max-width: 800px) {
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-links ul {
flex-direction: column;
width: 100%;
}
.navbar-links li {
border-top: 1px solid rgba(255, 255, 255, .3);
text-align: center;
}
.navbar-links li a {
padding: 0.5rem 1rem;
}
.navbar-links.active {
display: flex;
}
.brand-name {
/* class for band name: should be centered wherever it is */
text-align: center;
/* heading elements like h1 all have margins: let the margins be 0 */
margin: 0;
font-size: .8em;
/* changing the everything tag's font set on the heading to be different */
font-family: Rajdhani, sans-serif, poppins;
/*
Since heading are by default bolded, the font-weight can be changed to
normalize the bolded text
*/
font-weight: normal;
/* All band names should be white */
color: white;
}
.banner-area {
width: 100%;
height: 500px;
position: fixed; position: fixed;
right: 0; top: 100px;
left: 0; background-image: url('https://github.com/ION606/selmer-bot-website/blob/main/assets/Header%20BK.gif?raw=true');
z-index: 1030; background-size: cover;
top: 0; background-repeat: no-repeat;
background-position: center center;
display: flex;
flex-direction: column;
}
.banner-area h2 {
padding: 8%;
font-size: 40px;
font-family: sans-serif, poppins;
text-transform: uppercase;
color: #fff;
justify-content: space-between;
align-content: center;
}
} }
+8 -8
View File
@@ -177,9 +177,7 @@
<!-- Nav Bar --> <!-- Nav Bar -->
<nav class="navbar navbar-expand-sm navbar-fixed-top"> <nav class="navbar navbar-expand-sm navbar-fixed-top">
<div class="container-fluid mx-auto"> <div class="container-fluid mx-auto">
<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>
<!-- <li class="nav-item"> <!-- <li class="nav-item">
<a href="index.html" style="color: white" class="nav-link"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2;"></i></a> <a href="index.html" style="color: white" class="nav-link"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2;"></i></a>
@@ -207,7 +205,8 @@
</ul> </ul>
<!-- <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button> --> <!-- <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button> -->
<div class="container" style="font-family: 'Rajdhani', sans-serif; color: white;"><h1>Selmer Bot Web Dashboard</h1></div> <div class="container"><h1>Selmer Bot Web Dashboard</h1></div>
<span class="ms-auto" style="margin-right: 1%;"> <span class="ms-auto" style="margin-right: 1%;">
<!-- <button id="login" class="loginbtn" onclick="window.location = getAPIRedirect()">Log Into Dashboard</button> --> <!-- <button id="login" class="loginbtn" onclick="window.location = getAPIRedirect()">Log Into Dashboard</button> -->
<button onclick="logout()" id="logoutbtn" class="logoutbtn" style="display: none;"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button> <button onclick="logout()" id="logoutbtn" class="logoutbtn" style="display: none;"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
@@ -215,12 +214,13 @@
</span> </span>
</div> </div>
</nav> </nav>
<!-- NAVBAR END --> <!-- NAVBAR END -->
<!-- Header Begin -->
<!-- Banner Begins -->
<!-- https://livewire.thewire.in/wp-content/uploads/2018/09/ekg-line-ekg-monitor-ekg-machine-heart-health-blue-ecg-monitor-shows-the-heart-beat-the-heart-stops-for-three-seconds-and-starts-again_nelyjny6x__F0000.png --> <!-- https://livewire.thewire.in/wp-content/uploads/2018/09/ekg-line-ekg-monitor-ekg-machine-heart-health-blue-ecg-monitor-shows-the-heart-beat-the-heart-stops-for-three-seconds-and-starts-again_nelyjny6x__F0000.png -->
<div class="row w-100 h-100" style="background-image: url('https://github.com/ION606/selmer-bot-website/blob/main/assets/Header%20BK.gif?raw=true'); background-size: cover; background-repeat: no-repeat;"> <div class="row h-100 banner">
<div class="row w-100" style="color: rgb(10, 169, 243); text-align: center"> <div class="row w-100" style="color: rgb(10, 169, 243); text-align: center">
<h1 style="margin-top: 100px; -webkit-text-stroke: 2px rgb(255, 255, 255);">WELCOME TO THE SELMER BOT DASHBOARD</h1> <h1 style="margin-top: 100px; -webkit-text-stroke: 2px rgb(255, 255, 255);">WELCOME TO THE SELMER BOT DASHBOARD</h1>
</div> </div>
@@ -229,7 +229,7 @@
</div> </div>
</div> </div>
<!-- Header End --> <!-- Banner End -->
<div class="row custom-alert" style="display: none;" id="alertrow"> <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"> <div class="alert alert-warning alert-dismissible" id="banner" style="text-align: center" role="alert">
+484
View File
@@ -0,0 +1,484 @@
<!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);
// }
const toggleButton = document.getElementsByClassName('toggle-button')[0];
const navbarLinks = document.getElementsByClassName('navbar-links')[0];
if (toggleButton){
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
}
</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>WELCOME TO THE SELMER BOT DASHBOARD</h2>
<h2>Music, Games, an Economy System, and More!</h2>
</div>
</header>
<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>
<!-- Page Content -->
<section class="content-area">
<!-- 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" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/Audio1.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>
+1 -1
View File
@@ -21,7 +21,6 @@ const mongouri = process.env.mongouri;
const client = new MongoClient(mongouri, { useNewUrlParser: true, useUnifiedTopology: true, serverApi: ServerApiVersion.v1 }); const client = new MongoClient(mongouri, { useNewUrlParser: true, useUnifiedTopology: true, serverApi: ServerApiVersion.v1 });
const connection = client.connect(); const connection = client.connect();
const bot = new Client({ const bot = new Client({
intents: [ intents: [
Intents.FLAGS.GUILDS, Intents.FLAGS.GUILDS,
@@ -629,3 +628,4 @@ app.get("*",(req,res) => {
}) })
app.listen(port, () => console.log(`App listening on port ${port}`)); app.listen(port, () => console.log(`App listening on port ${port}`));