Created the Premium page with Bootstrap and Stripe integration

This commit is contained in:
ION606
2022-07-27 11:28:50 +03:00
parent 7209719a0e
commit 60f5e5626c
7 changed files with 438 additions and 148 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 448 KiB

+109 -78
View File
@@ -9,6 +9,17 @@
<link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon">
<script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script>
<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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=Rajdhani:wght@300&family=Share+Tech+Mono&display=swap" rel="stylesheet">
<style> <style>
html { width:100%; height:100%; margin:0; padding:0; } html { width:100%; height:100%; margin:0; padding:0; }
@@ -24,23 +35,6 @@
.hide { display: none; } .hide { display: none; }
.jumpButton {
/* color: #ffffff; */
font-size: 15px;
border: 1px solid #000000;
width: 200px;
height: 40px;
cursor: pointer;
align-self: center;
background-color: rgb(2, 2, 192);
}
.jumpButton:hover {
color: #2d63c8;
/* background-color: #ffffff; */
}
.loadingscreen { .loadingscreen {
height: 90vh; height: 90vh;
background-color: bisque; background-color: bisque;
@@ -48,12 +42,17 @@
} }
.navbar { .navbar {
background-color: rgb(69, 11, 102); background-color: rgb(0, 0, 0);
height: 50px; /* height: 50px;
border-width: 1px; border-width: 1px;
border-style: double; border-style: double; */
} }
.navbar .nav-item {
margin-right: 25px;
margin-left: 25px;
}
#right { #right {
float: right; float: right;
margin-right: 50px; margin-right: 50px;
@@ -61,23 +60,22 @@
.box { .box {
font-size: 20px; font-size: 20px;
height: 20px; height: 40px;
width: auto; width: auto;
margin-bottom: 15px; margin-bottom: 15px;
margin-right: 70px; padding: 3px;
padding: 5px;
border: 1px solid black; border: 1px solid black;
clear: both; clear: both;
align-content: center; align-content: center;
float: right; margin-right: 30px;
margin-right: 25px; margin-left: 30px;
} }
.statusdiv { .statusdiv {
border-style: dashed; border-style: dashed;
border-color: rgb(247, 189, 0); border-color: rgb(247, 189, 0);
width: 130px; width: 140px;
height: 100px; height: 120px;
margin-top: 20px; margin-top: 20px;
float: right; float: right;
margin-right: 50px; margin-right: 50px;
@@ -98,7 +96,7 @@
.buttonsmainbar { .buttonsmainbar {
background-color: green; background-color: green;
width: 200px; width: 200px;
height: 40px; height: 60px;
} }
.btnmain { .btnmain {
@@ -109,7 +107,7 @@
background-color: #42424b; background-color: #42424b;
width: 11%; width: 11%;
position: fixed; position: fixed;
top: 53px; top: 75px;
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@@ -119,23 +117,6 @@
border-style: solid; border-style: solid;
} }
.btnside {
color: #ffffff;
background-color: #42424b;
font-size: 19px;
/* border: 2px solid #000000; */
outline: none;
border: none;
width: 100%;
height: 50px;
cursor: pointer;
}
.btnside:hover {
color: #ffffff;
background-color: #377aea;
}
.wc { .wc {
align-content: center; align-content: center;
align-self: center; align-self: center;
@@ -152,9 +133,27 @@
letter-spacing: 1px; letter-spacing: 1px;
} }
</style>
/* SUBMIT BUTTON START */ <!-- Buttons -->
.submitButton{ <style>
.jumpButton {
/* color: #ffffff; */
font-size: 15px;
border: 1px solid #000000;
width: 200px;
height: 40px;
cursor: pointer;
align-self: center;
background-color: rgb(2, 2, 192);
}
.jumpButton:hover {
color: #2d63c8;
/* background-color: #ffffff; */
}
/* SUBMIT BUTTON START */
.submitButton{
position: relative; position: relative;
background-color: black; background-color: black;
border-radius: 4em; border-radius: 4em;
@@ -214,8 +213,27 @@
color: red; color: red;
} }
</style> #sevradio br {
margin-top: 10px;
}
.btnside {
color: #ffffff;
background-color: #42424b;
font-size: 19px;
/* border: 2px solid #000000; */
outline: none;
border: none;
width: 100%;
height: 50px;
cursor: pointer;
}
.btnside:hover {
color: #ffffff;
background-color: #377aea;
}
</style>
<script> <script>
//Maybe pre-load the channels in the server into local storage for accessing when chosing the welcome/logging channels? //Maybe pre-load the channels in the server into local storage for accessing when chosing the welcome/logging channels?
@@ -341,31 +359,42 @@
</script> </script>
</head> </head>
<body id="body"> <body>
<!-- <center> --> <nav class="navbar navbar-expand-sm navbar-fixed-top">
<div class="navbar"> <div class="container-fluid mx-auto">
<span style="padding-left: 50px;"></span> <a class="navbar-brand" href="index.html">
<a href="index.html" style="color: white"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2; margin-top: 20px;"></i></a> <img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
</a>
<span style="padding-left:50px;"> <!-- <li class="nav-item">
<a href="myGuilds.html"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></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>
</li> -->
<ul class="navbar-nav">
<li class="nav-item">
<a href="myGuilds.html" 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 class="nav-item">
<a href="https://github.com/ION606/selmerBot/wiki" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
</li>
<li class="nav-item">
<a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
</li>
</ul>
<!-- <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>
<span class="ms-auto" style="margin-right: 1%;">
<!-- <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="window.location = getAPIRedirect()" id="loginbtn" class="loginbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log In"></i></button>
</span> </span>
<span style="padding-left:50px;"></span>
<a href="https://github.com/ION606/selmerBot/wiki" target="_blank"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
<span style="padding-left:50px;"></span>
<a href="premium.html"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
<!-- <button>Home</button> -->
<span id="right">
<button onclick="logout()" class="logoutbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
</span>
</div> </div>
</nav>
<!-- </center> -->
<div class="statusdiv"> <div class="statusdiv">
<h1 style="color: white; margin-bottom: 10px; margin-top: 10px;">STATUS</h1> <h2 style="color: white; margin-bottom: 10px; margin-top: 10px;">STATUS</h2>
<div id="savstat" class="box saved">SAVED</div> <div id="savstat" class="box saved">SAVED</div>
</div> </div>
@@ -404,19 +433,21 @@
<label for="lc">Logging Channel Name:</label> <label for="lc">Logging Channel Name:</label>
<input type="text" id="lc" name="lc"><br><br> <input type="text" id="lc" name="lc"><br><br>
<p>Log Severity</p> <div id="sevradio">
<label for="ls-none">None</label> <p style="margin-bottom: 0px; text-underline-offset: 2px;"><u>Log Severity</u></p>
<input type="radio" id="ls-none" name="ls"><br><br>
<label for="ls-low">Low</label> <label for="ls-none" style="margin-top: 0px;">None</label>
<input type="radio" id="ls-low" name="ls"><br><br> <input type="radio" id="ls-none" name="ls"><br>
<label for="ls-meduim">Medium</label> <label for="ls-low">Low</label>
<input type="radio" id="ls-meduim" name="ls"><br><br> <input type="radio" id="ls-low" name="ls"><br>
<label for="ls-high">High</label> <label for="ls-meduim">Medium</label>
<input type="radio" id="ls-high" name="ls"><br><br> <input type="radio" id="ls-meduim" name="ls"><br>
<label for="ls-high">High</label>
<input type="radio" id="ls-high" name="ls"><br><br>
</div>
<input type="submit" value="Submit", class="submitButton" onclick="sendData(event, { 'inp': 'logs' })"> <input type="submit" value="Submit", class="submitButton" onclick="sendData(event, { 'inp': 'logs' })">
</form> </form>
+50 -19
View File
@@ -8,6 +8,10 @@
<link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon">
<script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script> <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"> <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://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
@@ -62,6 +66,12 @@
transition-delay: 0.3s; transition-delay: 0.3s;
} }
nav {
background-color: rgb(0, 0, 0);
/* color: blue; */
/* text-align: center; */
}
.navbar .nav-item { .navbar .nav-item {
margin-right: 25px; margin-right: 25px;
margin-left: 25px; margin-left: 25px;
@@ -104,7 +114,7 @@
margin-top: 20px; margin-top: 20px;
margin-bottom: 100px; margin-bottom: 100px;
background: #faf9f9; background: #faf9f9;
border:1px dashed rgb(255, 166, 0); border:1px solid rgb(94, 104, 104);
} }
@@ -139,6 +149,14 @@
.item{ .item{
position: relative; position: relative;
} }
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
top: 0;
}
</style> </style>
<!-- <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> (no github icon so...) -->
@@ -267,10 +285,9 @@
<body> <body>
<!-- Nav Bar --> <!-- Nav Bar -->
<nav class="navbar navbar-expand-sm bg-black"> <nav class="navbar navbar-expand-sm navbar-fixed-top">
<div class="container-fluid"> <div class="container-fluid mx-auto">
<a class="navbar-brand" href="index.html"> <a class="navbar-brand" href="index.html">
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;"> <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>
@@ -279,20 +296,21 @@
<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>
</li> --> </li> -->
<ul class="navbar-nav"> <ul class="navbar-nav">
<li class="nav-item"> <li class="nav-item">
<a href="myGuilds.html" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a> <a href="myGuilds.html" 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>
<li class="nav-item"> <li class="nav-item">
<a href="https://github.com/ION606/selmerBot/wiki" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a> <a href="https://github.com/ION606/selmerBot/wiki" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
</li> </li>
<li class="nav-item">
<a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
</li>
</ul>
<li class="nav-item">
<a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
</li>
</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>
<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>
@@ -303,6 +321,19 @@
<!-- NAVBAR END --> <!-- NAVBAR END -->
<!-- Header Begin -->
<!-- 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://www.pgsindia.co.in/wp-content/uploads/2016/01/animated-web-design-slideshow-background.gif'); background-size: cover; background-repeat: no-repeat;">
<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>
</div>
<div style="text-align: center;">
<h1 style="-webkit-text-stroke: 2px rgb(255, 255, 255);">Music, Games, an Economy System, and More!</h1>
</div>
</div>
<!-- Header 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">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button> <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
@@ -310,12 +341,12 @@
</div> </div>
</div> </div>
<div style="text-align: center; align-content: center;"> <!-- <div style="text-align: center; align-content: center;">
<h2 style="color:wheat">Based off a real Professor of Logic!</h2> <!- <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;"> <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> </div> -->
<!-- Adds margins to the page --> <!-- Adds margins to the page -->
@@ -387,7 +418,7 @@
<div class="carousel-item" style="position: relative; text-align: center;"> <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;"> <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> <!-- <h2 style="margin-top: 70px; color: white; font-family: Goudy Old Style;">Reach up to Rank 101!</h2> -->
</div> </div>
</div> </div>
+1 -1
View File
@@ -168,7 +168,7 @@ app.get('/', async ({ query }, response) => {
client_secret: clientSecret, client_secret: clientSecret,
code, code,
grant_type: 'authorization_code', grant_type: 'authorization_code',
redirect_uri: `http://localhost`, redirect_uri: `https://selmer-bot-website.herokuapp.com`,
scope: 'identify', scope: 'identify',
}), }),
headers: { headers: {
+22
View File
@@ -16,6 +16,7 @@
"mongodb": "^4.8.0", "mongodb": "^4.8.0",
"nginx": "^1.0.8", "nginx": "^1.0.8",
"node-fetch": "^3.2.9", "node-fetch": "^3.2.9",
"stripe": "^9.15.0",
"undici": "^5.8.0" "undici": "^5.8.0"
} }
}, },
@@ -1200,6 +1201,18 @@
"node": ">= 0.8" "node": ">= 0.8"
} }
}, },
"node_modules/stripe": {
"version": "9.15.0",
"resolved": "https://registry.npmjs.org/stripe/-/stripe-9.15.0.tgz",
"integrity": "sha512-0Irs+6mNpZKhiXS/aieweXZEcOrJtUjPU0fIzEzrRg9VF9wyXWdUELWJbkxDhuyYMMKrrjA6c2YNtccBZX6tew==",
"dependencies": {
"@types/node": ">=8.1.0",
"qs": "^6.10.3"
},
"engines": {
"node": "^8.1 || >=10.*"
}
},
"node_modules/supports-color": { "node_modules/supports-color": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -2164,6 +2177,15 @@
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==" "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
}, },
"stripe": {
"version": "9.15.0",
"resolved": "https://registry.npmjs.org/stripe/-/stripe-9.15.0.tgz",
"integrity": "sha512-0Irs+6mNpZKhiXS/aieweXZEcOrJtUjPU0fIzEzrRg9VF9wyXWdUELWJbkxDhuyYMMKrrjA6c2YNtccBZX6tew==",
"requires": {
"@types/node": ">=8.1.0",
"qs": "^6.10.3"
}
},
"supports-color": { "supports-color": {
"version": "7.2.0", "version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+1
View File
@@ -16,6 +16,7 @@
"mongodb": "^4.8.0", "mongodb": "^4.8.0",
"nginx": "^1.0.8", "nginx": "^1.0.8",
"node-fetch": "^3.2.9", "node-fetch": "^3.2.9",
"stripe": "^9.15.0",
"undici": "^5.8.0" "undici": "^5.8.0"
}, },
"type": "module" "type": "module"
+246 -41
View File
@@ -6,8 +6,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selmer Bot Web Dashboard</title> <title>Selmer Bot Web Dashboard</title>
<link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon"> <span id="IMPORTS">
<script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script> <link rel="shortcut icon" href="https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico" type="image/x-icon">
<script src="https://kit.fontawesome.com/728e740903.js" crossorigin="anonymous"></script>
<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>
<script src="https://js.stripe.com/v3/"></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=Cinzel&family=Rajdhani:wght@300&family=Rouge+Script&family=Share+Tech+Mono&display=swap" rel="stylesheet">
</span>
<style> <style>
html { width:100%; height:100%; margin:0; padding:0; } html { width:100%; height:100%; margin:0; padding:0; }
@@ -17,11 +31,14 @@
width:100%; height:100%; margin:0; padding:0; width:100%; height:100%; margin:0; padding:0;
color: white; color: white;
} }
.navbar { .navbar .nav-item {
background-color: rgb(69, 11, 102); margin-right: 25px;
height: 50px; margin-left: 25px;
border-width: 1px; }
border-style: double;
#right {
float: right;
margin-right: 50px;
} }
#right { #right {
@@ -29,20 +46,10 @@
margin-right: 50px; margin-right: 50px;
} }
.logoutbtn {
margin-top: 14px;
scale: 1.7;
}
.logoutbtn:hover {
cursor: pointer;
color: red;
}
h1 { h1 {
color: rgb(0, 74, 235); /* color: rgb(0, 74, 235); */
outline-style: dotted; /* outline-style: dotted; */
text-align: center; text-align: center;
margin-right: 1%; margin-right: 1%;
margin-left: 1%; margin-left: 1%;
@@ -60,6 +67,77 @@
h3 { h3 {
margin-left: 1%; margin-left: 1%;
}
.desctext {
color: white;
margin-top: 20px;
background-color: rgb(1, 69, 196, 0.1);
padding: 10px;
border-radius: 10%;
border-style: groove;
border-color: rgb(255, 255, 255, 0.6);
width: auto;
}
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
top: 0;
}
.picon {
border-radius: 50%;
background-color: rgba(255, 204, 51, 0.2);
box-shadow: 0 0 12px 7px rgba(252, 200, 28, 0.2);
}
</style>
<!-- BUTTONS HERE -->
<style>
.logoutbtn {
margin-top: 14px;
scale: 1.2;
border-radius: 10%;
}
.logoutbtn:hover {
cursor: pointer;
color: red;
}
.fivedollarbtn {
color: #00f2f2;
font-size: 23px;
border: 1px solid #2fffe0;
border-radius: 10px;
padding: 10px 30px;
letter-spacing: 1px;
cursor: pointer
}
.fivedollarbtn:hover {
color: #000000;
background-color: #00f2f2;
}
.tendollarbtn {
color: #30f200;
font-size: 23px;
border: 1px solid #50f801;
border-radius: 10px;
padding: 10px 30px;
letter-spacing: 1px;
cursor: pointer
}
.tendollarbtn:hover {
color: #000000;
background-color: #30f200;
}
h1 {
font-family: 'Share Tech Mono', monospace;
} }
</style> </style>
@@ -71,43 +149,170 @@
document.getElementById('guildslink').style = 'cursor: no-drop;'; document.getElementById('guildslink').style = 'cursor: no-drop;';
} }
} }
function logout() { function logout() {
window.localStorage.clear(); window.localStorage.clear();
window.location.href = 'index.html'; window.location.href = 'index.html';
} }
function pay(url, qrurl = null, qr = false) {
//$5 - https://buy.stripe.com/7sIfZW2Er0aZ1by000 - https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment5.png?raw=true
//$10 - https://buy.stripe.com/14kfZWcf19Lz7zWfYZ - https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment10.png?raw=true
if (qr) {
window.open(qrurl,'MyWindow','width=266.667px,height=351.667px');
} else {
try {
window.open(url, target="_blank");
} catch (err) {
console.error(err);
window.open(qrurl,'Something went wrong :( try this instead!','width=266.667px,height=351.667px');
}
}
}
</script> </script>
</head> </head>
<body> <body>
<div class="navbar"> <!-- Nav Bar -->
<span style="padding-left: 50px;"></span> <nav class="navbar navbar-expand-sm bg-black">
<a href="index.html" style="color: white"><i class="fa-solid fa-house-chimney", alt="Home" style="scale: 2; margin-top: 20px;"></i></a> <div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Selmer-icon.png?raw=true" alt="Selmer Icon" style="width: 50px;">
</a>
<span style="padding-left:50px;"> <ul class="navbar-nav">
<a href="myGuilds.html" id="guildslink"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a> <li class="nav-item">
</span> <a href="myGuilds.html" id="guildslink" class="nav-link"><i class="fa-solid fa-server" alt="Servers" style="scale: 2; color: rgb(11, 189, 189);"></i></a>
</li>
<span style="padding-left:50px;"></span> <li class="nav-item">
<a href="https://github.com/ION606/selmerBot/wiki" target="_blank"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a> <a href="https://github.com/ION606/selmerBot/wiki" target="_blank" class="nav-link"><i class="fa-solid fa-book" style="scale: 2; color: white;" alt="WIKI"></i></a>
</li>
<span style="padding-left:50px;"></span> <li class="nav-item">
<a href="premium.html"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a> <a href="premium.html" class="nav-link"><i class="fa-solid fa-crown" style="scale: 2; color: gold;" alt="PREMIUM"></i></a>
</li>
</ul>
<div class="container"><h1 style="font-family: 'Rajdhani', sans-serif; text-align: left;">Selmer Bot Web Dashboard</h1></div>
<span class="ms-auto" style="margin-right: 1%;">
<!-- <button id="login" class="loginbtn" onclick="window.location = getAPIRedirect()">Log Into Dashboard</button> -->
<button onclick="logout()" id="logoutbtn" class="logoutbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
</span>
</div>
</nav>
<!-- NAVBAR END -->
<!-- <button>Home</button> -->
<span id="right">
<button onclick="logout()" class="logoutbtn"><i class="fa-solid fa-arrow-right-from-bracket" alt="Log Out"></i></button>
</span>
</div>
<!-- Main Page --> <!-- Main Page -->
<h1>SELMER BOT PREMIUM</h1> <div class="container">
<div id="titlediv" style="margin-top: 30px; margin-bottom: 150px;">
<h1 style="font-family: 'Cinzel', serif;">SELMER BOT PREMIUM <span class="picon"><i class="fa-solid fa-crown"></i></span></h1>
<h1 style="font-family: 'Rouge Script', cursive;">It's only logical!</h1>
</div>
<h2> <h1 style="font-size: 70px;">FEATURES</h1>
<u>Experience All Selmer Bot has to offer!</u> <!-- <div id="features" class="row pb-4 pt-5" style="text-align: center; font-family: Lucida Console;">
</h2> <h2 style="color: gold; font-size: 60px; text-align: center; font-family: Lucida Console;">AI</h2>
</div> -->
<h2 style="font-size: 50px; margin: 20px; text-align: left; color: gold;">AI</h2> <div id="AI1" class="row pb-md-5 mt-md-5">
<h3>Chat with Selmer Bot!</h3> <h2 style="color: gold; font-size: 60px; text-align: center; font-family: Lucida Console; margin-bottom: 60px;">AI</h2>
<img src = ''> <div class="col-xxl-4 col-xl-4 col-lg-5 col-md-12">
<img class="img-responsive" style="border-style: groove; border-color:rgb(11, 189, 189);" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/AI1.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" style="width: 500px; font-family: Lucida Console;">
<p style="white-space: pre-line;">
<b>Chat with Selmer Bot using State-of-the-Art AI!</b>
<p>
Talk with Selmer Bot about anything!
From the weather to sports to the meaning of life,
Selmer Bot will make sure you won't get bored!
</p>
<i>He can even (poorly) help with your homework!</i>
</p>
</div>
</div>
</div>
<div id="AI2" class="row pb-5 mt-md-5 pt-5">
<div class="col-xxl-5 col-xl-6 col-lg-12 col-md-12 order-xl-first order-md-last order-sm-last">
<div class="container desctext" style="width: 500px; font-family: Lucida Console; background-color: rgba(255, 196, 0, 0.384);">
<p style="white-space: pre-line;">
<b>The AI also comes with real-world data!</b>
<p>
Get semi-accurate weather reports,
the best burger places in town and even what the best
milkshake flavor is!
</p>
</p>
</div>
</div>
<div class="col-xxl-6 col-xl-6 col-lg-12 col-md-12">
<img class="img-responsive" style="border-style: groove; border-color:rgb(255, 153, 0);" src="https://github.com/ION606/selmer-bot-website/blob/main/assets/Features/AI_weather.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>
<div class="row pt-5" style="margin-top: 70px; margin-bottom: 0px;"><h1 style="font-size: 50px;">GET THE PREMIUM MONTHLY PLAN</h1></div>
<div id="paymentbuttons" class="row pt-5 pb-5">
<div id="fivedollar" class="col-6">
<button type="button" class="btn fivedollarbtn float-end" onclick="pay('https://buy.stripe.com/7sIfZW2Er0aZ1by000', 'https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment5.png?raw=true')">
Basic Tier - $5
</button>
</div>
<div id="tendollar" class="col-6">
<button type="button" class="btn tendollarbtn float-start" onclick="pay('https://buy.stripe.com/14kfZWcf19Lz7zWfYZ', 'https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment10.png?raw=true')">
Special Tier - $10
</button>
</div>
</div>
<div class="row pt-5" id="paymentbuttonQR">
<h2>Want to pay from your phone? Use our QR codes instead!</h2>
<div class="col-6 pt-3">
<button class="btn-lg btn-primary float-end" type="button" data-bs-toggle="collapse" data-bs-target="#fivedollarQR" aria-expanded="false" aria-controls="fivedollarQR">
Basic Tier - $5
</button>
</div>
<div class="col-6 pt-3">
<button class="btn-lg btn-primary float-start" type="button" data-bs-toggle="collapse" data-bs-target="#tendollarQR" aria-expanded="false" aria-controls="tendollarQR">
Special Tier - $10
</button>
</div>
</div>
<div class="row pt-3" id="paymentQRImg">
<div class="col-6">
<div class="collapse multi-collapse float-end" id="fivedollarQR">
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment5.png?raw=true" style="width: 266.667px; height: 351.667px">
</div>
</div>
<div class="col-6">
<div class="collapse multi-collapse float-start" id="tendollarQR">
<img src="https://github.com/ION606/selmer-bot-website/blob/main/assets/stripe_payment10.png?raw=true" style="width: 266.667px; height: 351.667px">
</div>
</div>
</div>
</div>
<!-- Footer -->
<ul style="margin-top: 150px; 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>
<div style="text-align: center; margin-bottom: 20px;"><i>Disclaimer: Selmer Bot uses OpenAI integration for the chat AI. The conversation data is stored for the duration of the conversation to help provide context and is then deleted.</i></div>
</body> </body>
</html> </html>