2022-07-24 08:49:29 +03:00
<!DOCTYPE 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 > Selmer Bot Web Dashboard</ title >
2022-07-27 11:28:50 +03:00
< span id = "IMPORTS" >
2022-08-12 14:18:33 -07:00
< link rel = "shortcut icon" href = "https://github.com/ION606/selmer-bot-website/blob/main/assets/favicon.ico?raw=true" type = "image/x-icon" >
2022-07-27 11:28:50 +03:00
< 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 >
2022-07-24 08:49:29 +03:00
< style >
html { width : 100 % ; height : 100 % ; margin : 0 ; padding : 0 ; }
body {
/* background-color: rgb(4, 4, 85); */
background-color : rgb ( 38 , 39 , 49 );
width : 100 % ; height : 100 % ; margin : 0 ; padding : 0 ;
color : white ;
}
2022-07-27 11:28:50 +03:00
. navbar . nav-item {
margin-right : 25 px ;
margin-left : 25 px ;
}
2022-07-24 08:49:29 +03:00
# right {
float : right ;
margin-right : 50 px ;
}
2022-07-27 11:28:50 +03:00
# right {
float : right ;
margin-right : 50 px ;
2022-07-24 08:49:29 +03:00
}
h1 {
2022-07-27 11:28:50 +03:00
/* color: rgb(0, 74, 235); */
/* outline-style: dotted; */
2022-07-24 08:49:29 +03:00
text-align : center ;
margin-right : 1 % ;
margin-left : 1 % ;
}
h2 {
color : rgb ( 255 , 255 , 255 );
text-align : center ;
}
p {
color : white ;
margin-left : 1 % ;
}
h3 {
margin-left : 1 % ;
2022-07-27 11:28:50 +03:00
}
. desctext {
color : white ;
margin-top : 20 px ;
background-color : rgb ( 1 , 69 , 196 , 0.1 );
padding : 10 px ;
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 12 px 7 px rgba ( 252 , 200 , 28 , 0.2 );
}
</ style >
<!-- BUTTONS HERE -->
< style >
. logoutbtn {
margin-top : 14 px ;
scale : 1.2 ;
border-radius : 10 % ;
}
. logoutbtn : hover {
cursor : pointer ;
color : red ;
}
2022-08-12 10:29:57 -07:00
. loginbtn {
margin-top : 14 px ;
scale : 1.2 ;
border-radius : 10 % ;
}
. loginbtn : hover {
color : #377aea ;
}
2022-07-27 11:28:50 +03:00
. fivedollarbtn {
color : #00f2f2 ;
font-size : 23 px ;
border : 1 px solid #2fffe0 ;
border-radius : 10 px ;
padding : 10 px 30 px ;
letter-spacing : 1 px ;
cursor : pointer
}
. fivedollarbtn : hover {
color : #000000 ;
background-color : #00f2f2 ;
}
. tendollarbtn {
color : #30f200 ;
font-size : 23 px ;
border : 1 px solid #50f801 ;
border-radius : 10 px ;
padding : 10 px 30 px ;
letter-spacing : 1 px ;
cursor : pointer
}
. tendollarbtn : hover {
color : #000000 ;
background-color : #30f200 ;
}
h1 {
font-family : 'Share Tech Mono' , monospace ;
2022-07-24 08:49:29 +03:00
}
</ style >
< script >
window . onload = () => {
if ( ! window . localStorage . getItem ( 'serverInfo' )) {
document . getElementById ( 'guildslink' ). href = '' ;
document . getElementById ( 'guildslink' ). style = 'cursor: no-drop;' ;
2022-08-12 10:29:57 -07:00
//The user is logged out
document . getElementById ( 'loginbtn' ). style . display = 'block'
document . getElementById ( 'logoutbtn' ). style . display = "none" ;
2022-07-24 08:49:29 +03:00
}
}
2022-07-27 11:28:50 +03:00
2022-07-24 08:49:29 +03:00
function logout () {
window . localStorage . clear ();
window . location . href = 'index.html' ;
}
2022-07-27 11:28:50 +03:00
2022-08-12 10:29:57 -07:00
//Get the redirect link <!-- NOTE: "response_type=token" ALWAYS!!! http://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=http%3A%2F%2Fwww.selmerbot.com%2F&response_type=token&scope=identify%20guilds' ;
}
}
2022-07-27 11:28:50 +03:00
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' );
}
}
}
2022-07-24 08:49:29 +03:00
</ script >
</ head >
< body >
2022-07-27 11:28:50 +03:00
<!-- Nav Bar -->
< nav class = "navbar navbar-expand-sm bg-black" >
< 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 >
< 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 >
2022-08-12 10:29:57 -07:00
< li class = "nav-item" >
< a href = "calendar.html" id = "callink" class = "nav-link" >< i class = "fa-solid fa-calendar" alt = "Calendar" style = "scale: 2; color: lightgrey;" ></ i ></ a >
</ li >
2022-07-27 11:28:50 +03:00
< 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 >
< 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 onclick = "logout()" id = "logoutbtn" class = "logoutbtn" >< i class = "fa-solid fa-arrow-right-from-bracket" alt = "Log Out" ></ i ></ button >
2022-08-12 10:29:57 -07:00
< button onclick = "window.location = getAPIRedirect()" id = "loginbtn" class = "loginbtn" style = "display: none;" >< i class = "fa-solid fa-arrow-right-from-bracket" alt = "Log In" ></ i ></ button >
2022-07-27 11:28:50 +03:00
</ span >
</ div >
</ nav >
<!-- NAVBAR END -->
2022-07-24 08:49:29 +03:00
<!-- Main Page -->
2022-07-27 11:28:50 +03:00
< 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 >
< h1 style = "font-size: 70px;" > FEATURES</ h1 >
<!-- <div id="features" class="row pb-4 pt-5" style="text-align: center; font-family: Lucida Console;">
<h2 style="color: gold; font-size: 60px; text-align: center; font-family: Lucida Console;">AI</h2>
</div> -->
< div id = "AI1" class = "row pb-md-5 mt-md-5" >
< h2 style = "color: gold; font-size: 60px; text-align: center; font-family: Lucida Console; margin-bottom: 60px;" > AI</ h2 >
< 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 >
2022-07-24 08:49:29 +03:00
</ body >
</ html >
