Repository: diwasatreya/DiscordBot-Website
Branch: main
Commit: b67b86a3625f
Files: 9
Total size: 33.4 KB

Directory structure:
gitextract_ktswr2ox/

├── .replit
├── README.md
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
├── config.json
├── index.js
├── package.json
├── replit.nix
└── views/
    └── index.ejs

================================================
FILE CONTENTS
================================================

================================================
FILE: .replit
================================================
entrypoint = "index.js"

hidden = [".config"]

[interpreter]
command = [
    "prybar-nodejs",
    "-q",
    "--ps1",
    "\u0001\u001b[33m\u0002\u0001\u001b[00m\u0002 ",
    "-i"
]

[[hints]]
regex = "Error \\[ERR_REQUIRE_ESM\\]"
message = "We see that you are using require(...) inside your code. We currently do not support this syntax. Please use 'import' instead when using external modules. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)"

[nix]
channel = "stable-22_05"

[env]
XDG_CONFIG_HOME = "/home/runner/.config"
PATH = "/home/runner/$REPL_SLUG/.config/npm/node_global/bin:/home/runner/$REPL_SLUG/node_modules/.bin"
npm_config_prefix = "/home/runner/$REPL_SLUG/.config/npm/node_global"

[gitHubImport]
requiredFiles = [".replit", "replit.nix", ".config"]

[packager]
language = "nodejs"

  [packager.features]
  packageSearch = true
  guessImports = true
  enabledForHosting = false

[unitTest]
language = "nodejs"

[debugger]
support = true

  [debugger.interactive]
  transport = "localhost:0"
  startCommand = [ "dap-node" ]

    [debugger.interactive.initializeMessage]
    command = "initialize"
    type = "request"

      [debugger.interactive.initializeMessage.arguments]
      clientID = "replit"
      clientName = "replit.com"
      columnsStartAt1 = true
      linesStartAt1 = true
      locale = "en-us"
      pathFormat = "path"
      supportsInvalidatedEvent = true
      supportsProgressReporting = true
      supportsRunInTerminalRequest = true
      supportsVariablePaging = true
      supportsVariableType = true

    [debugger.interactive.launchMessage]
    command = "launch"
    type = "request"
    
      [debugger.interactive.launchMessage.arguments]  
      args = []
      console = "externalTerminal"
      cwd = "."
      environment = []
      pauseForSourceMap = false
      program = "./index.js"
      request = "launch"
      sourceMaps = true
      stopOnEntry = false
      type = "pwa-node"

[languages]

[languages.javascript]
pattern = "**/{*.js,*.jsx,*.ts,*.tsx}"

[languages.javascript.languageServer]
start = "typescript-language-server --stdio"


================================================
FILE: README.md
================================================
![image](https://user-images.githubusercontent.com/74746579/194707352-752e27cf-a5ee-4c7f-ba56-ef2772b1d977.png)


<div align="center">
  <br>

  <h3> Star the Project + Follow me on github </h3>

 <img src="https://user-images.githubusercontent.com/74746579/168328818-6995ed8d-915d-4083-9279-3d94e1d150c5.png" alt="help to star">
 </div>
           

# Information

- Watch the video carefully for instalizaion
- You can read the `README.md` file for configration
- This code can be made any anyone who is poor in coding
- If any coding help need then open the issue [ Dont ask coding help of this code in server ]
- Last thing make sure to star & fork this repo


### Replit
[![image](https://camo.githubusercontent.com/807ef293459e367b2769d7b590e00f31e35d6b2e1c7bc4f570e37abbc3650f3c/68747470733a2f2f7265706c2e69742f62616467652f6769746875622f5a65726f446973636f72642f4769766561776179426f74)](https://repl.it/github/diwasatreya/DiscordBot-Website)

## Configration

- No need to add any token of discord just fill the `config.json`
```js
{
  "port": "", // server port
  "name": "", // bot name
  "description": "", // short bot description
  "invite": "", // bot invite link
  "support": "", // bot support server
  "pfp": "", // bot profile link
  "feature1": "", // bot feature 1
  "feature2": "", // ""   "" ""  2
  "feature3": "", // ""   "" ""  3
  "feature4": ""  // ""   "" ""  4
}
```
- Footer: Goto `/views/index.ejs` line 419

### Profile Picture
- If you want image in circle then add `style="border-radius:50%"` in `/views/index.ejs` line  126


### URL ShortCut
- Goto `index.js` line 23 there you will code of url shortner.
- EX: yourdomain.com/discord then it will redirect you to your server
- If you want to add more the use this code
```js
app.get('/name after domain', async (req, res) => {
    res.redirect(`link to go`)
});
```

### Website Preview

![image](image.png)
![image](image_2.png)


#### More Code Info
- This is `nodejs` code. It can be run in html code also for that open issue & ask help. If you are developer you know how to do it.

### Need help?
If you need help! Feel free to join our [Support server](https://aromaxdev.xyz/discord)


================================================
FILE: assets/css/style.css
================================================
/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 diwasatreya
 * github: diwasatreya
 * youtube: Diwas Atreya
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  --ultramarine-blue: hsl(222, 100%, 55%);
  --silver-metallic: hsl(240, 4%, 71%);
  --fiery-rose_12: hsla(354, 86%, 65%, 0.12);
  --eerie-black-1: hsl(0, 0%, 13%);
  --eerie-black-2: hsl(0, 0%, 12%);
  --smokey-black: hsl(40, 100%, 2%);
  --silver-sand: hsl(240, 4%, 76%);
  --ocean-green: hsl(161, 50%, 57%);
  --fiery-rose: hsl(354, 86%, 65%);
  --alice-blue: hsl(214, 32%, 91%);
  --davys-gray: hsl(0, 0%, 34%);
  --blue-ryb: hsl(222, 100%, 45%);
  --white_50: hsla(0, 0%, 100%, 0.5);
  --white: hsl(0, 0%, 100%);
  --onyx-1: hsl(0, 0%, 23%);
  --onyx-2: hsl(0, 0%, 20%);

  /**
   * typography
   */

  --ff-poppins: 'Poppins', sans-serif;
  --ff-open-sans: 'Open Sans', sans-serif;

  --fs-1: calc(2.3rem + 2.1vw);
  --fs-2: calc(2.1rem + 0.9vw);
  --fs-3: calc(2rem + 0.3vw);
  --fs-4: 2rem;
  --fs-5: 1.8rem;
  --fs-6: 1.5rem;
  --fs-7: 1.4rem;
  --fs-8: 1.3rem;
  --fs-9: 1.2rem;

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  /**
   * spacing
   */

  --section-padding: 120px;

  /**
   * shadow
   */

  --shadow: 0 10px 30px hsla(0, 0%, 0%, 0.1);

  /**
   * radius
   */

  --radius-pill: 500px;
  --radius-circle: 50%;
  --radius-5: 5px;
  --radius-8: 8px;
  --radius-16: 16px;

  /**
   * transition
   */

  --transition: 0.25s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a,
img,
span,
button,
ion-icon { display: block; }

a {
  color: inherit;
  text-decoration: none;
}

img { height: auto; }

input,
button {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
}

input,
table { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

html {
  font-family: var(--ff-open-sans);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--smokey-black);
  color: var(--silver-sand);
  font-size: 1.6rem;
  line-height: 1.75;
}

body.active { overflow-y: hidden; }

:focus-visible { outline-offset: 4px; }

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }

::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }

::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container { padding-inline: 15px; }

.h1,
.h2,
.h3 {
  color: var(--white);
  font-family: var(--ff-poppins);
  line-height: 1.2;
}

.h1 {
  font-size: var(--fs-1);
  font-weight: var(--fw-800);
}

.h2 { font-size: var(--fs-2); }

.h3 { font-size: var(--fs-5); }

.btn-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.btn {
  max-width: max-content;
  padding: var(--padding-y, 13px) 28px;
  font-family: var(--ff-poppins);
  font-weight: var(--fw-500);
}

.btn-primary {
  color: var(--white);
  background-color: var(--ultramarine-blue);
  font-size: var(--fs-6);
  border-radius: var(--radius-pill);
  transition: var(--transition);
}

.btn-primary:is(:hover, :focus) { background-color: var(--blue-ryb); }

.w-100 { width: 100%; }

.section { padding-block: var(--section-padding); }

.section-title { margin-block-end: 24px; }

.text-center { text-align: center; }

.grid-list {
  display: grid;
  gap: 30px;
}

.bg-gray { background-color: var(--eerie-black-1); }

.btn-link {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--white);
  font-family: var(--ff-poppins);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
}

.btn-link > * { transition: var(--transition); }

.btn-link:is(:hover, :focus) { color: var(--ultramarine-blue); }

.btn-link:is(:hover, :focus) ion-icon { transform: translateX(5px); }





/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header .btn-group { display: none; }

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 28px;
  background-color: var(--smokey-black);
  transition: var(--transition);
  z-index: 4;
}

.header.active {
  background-color: var(--eerie-black-1);
  padding-block: 18px;
  box-shadow: var(--shadow);
}

.header .container,
.navbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-open-btn {
  color: var(--white_50);
  font-size: 30px;
  transition: var(--transition);
}

.nav-open-btn:is(:hover, :focus) { color: var(--ultramarine-blue); }

.navbar {
  position: fixed;
  background-color: var(--eerie-black-1);
  color: var(--alice-blue);
  top: 0;
  right: -400px;
  max-width: 400px;
  width: 100%;
  height: 100vh;
  padding: 40px 16px;
  z-index: 2;
  visibility: hidden;
  transition: 0.25s var(--cubic-in);
}

.navbar.active {
  visibility: visible;
  transform: translateX(-400px);
  transition: 0.5s var(--cubic-out);
}

.navbar-top { margin-block-end: 30px; }

.nav-close-btn {
  background-color: var(--fiery-rose_12);
  color: var(--fiery-rose);
  font-size: 20px;
  padding: 5px;
  border-radius: var(--radius-circle);
}

.nav-close-btn ion-icon { --ionicon-stroke-width: 45px; }

.navbar-link {
  font-family: var(--ff-poppins);
  font-size: var(--fs-6);
  padding: 8px 16px;
  transition: var(--transition);
}

.navbar-link:is(:hover, :focus) { color: var(--ultramarine-blue); }

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--smokey-black);
  transition: var(--transition);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.overlay.active {
  pointer-events: all;
  opacity: 0.75;
  visibility: visible;
}





/*-----------------------------------*\
  #HERO
\*-----------------------------------*/

.hero { padding-block-start: calc(var(--section-padding) + 50px); }

.hero .container {
  display: grid;
  gap: 70px;
}

.hero-text {
  font-size: var(--fs-4);
  margin-block: 10px 50px;
}

.play-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-7);
  font-family: var(--ff-poppins);
  font-weight: var(--fw-500);
  transition: var(--transition);
}

.play-btn .icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px solid var(--white);
  border-radius: var(--radius-circle);
  transition: var(--transition);
}

.play-btn .span {
  color: var(--silver-metallic);
  transition: var(--transition);
}

.play-btn:is(:hover, :focus) .span { color: var(--white); }

.play-btn:is(:hover, :focus) .icon {
  background-color: var(--white);
  color: var(--ultramarine-blue);
}





/*-----------------------------------*\
  #PROMO
\*-----------------------------------*/

.promo .section-text {
  padding-inline: 8px;
  margin-block-end: 50px;
}

.promo-card {
  border-radius: var(--radius-5);
  padding: 40px 25px;
}

.promo-card .card-icon {
  background-color: var(--onyx-1);
  color: var(--white);
  width: max-content;
  font-size: 24px;
  padding: 20px;
  border-radius: var(--radius-circle);
  margin-block-end: 20px;
}

.promo-card .card-icon ion-icon { --ionicon-stroke-width: 50px; }

.promo-card .card-text {
  color: var(--alice-blue);
  margin-block: 20px 16px;
}





/*-----------------------------------*\
  #STATS
\*-----------------------------------*/

.stats .container {
  display: grid;
  gap: 50px;
}

.stats .section-text:last-of-type { margin-block: 16px; }

.stats-list {
  display: grid;
  gap: 15px;
}

.stats-card {
  padding: 17px;
  border-radius: var(--radius-5);
}

.stats-card .card-title {
  font-size: var(--fs-3);
  margin-block-end: 10px;
}

.stats-card .card-text {
  font-size: var(--fs-7);
  color: var(--alice-blue);
}





/*-----------------------------------*\
  #MARKET
\*-----------------------------------*/

.market .section-text { margin-block-end: 24px; }

.table-container {
  overflow-x: auto;
  padding-block-end: 15px;
}

.table-container::-webkit-scrollbar { height: 10px; }

.table-container::-webkit-scrollbar-track { background-color: var(--eerie-black-2); }

.table-container::-webkit-scrollbar-thumb { background-color: var(--davys-gray); }

.table-container::-webkit-scrollbar-button { width: 15px; }

.market-table {
  background-color: var(--eerie-black-2);
  border-collapse: collapse;
}

.table-head { background-color: var(--onyx-2); }

.table-heading {
  color: var(--white);
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
  text-align: left;
  padding: 16px 30px;
}

.table-body .table-row:not(:last-child) { border-block-end: 1px dashed var(--davys-gray); }

.table-data { padding: 12px 30px; }

.table-data.wrapper {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.table-data.wrapper img { width: 30px; }

.table-data .coin-name {
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  margin-block-end: 5px;
}

.table-data .span { font-size: var(--fs-8); }

.table-data:not(.wrapper) {
  vertical-align: top;
  font-size: var(--fs-7);
}

.table-data .wrapper-flex {
  display: flex;
  align-items: center;
  gap: 5px;
}

.table-data .icon { font-size: 12px; }

.table-data .icon.red { color: var(--fiery-rose); }

.table-data .icon.green { color: var(--ocean-green); }





/*-----------------------------------*\
  #CTA
\*-----------------------------------*/

.cta .btn-primary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-inline: auto;
  margin-block-start: 30px;
}





/*-----------------------------------*\
  #INSTRUCTION
\*-----------------------------------*/

.instruction .section-text { margin-block-end: 50px; }

.instruction-card {
  padding: 30px;
  border-radius: var(--radius-8);
}

.instruction-card .card-icon {
  background-color: var(--smokey-black);
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  margin-block-end: 15px;
}





/*-----------------------------------*\
  #APP
\*-----------------------------------*/

.app-card {
  padding: 25px;
  border-radius: var(--radius-16);
  display: grid;
  gap: 50px;
}

.app-card .section-text { margin-block-end: 25px; }

.app-card .btn-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--ultramarine-blue);
  --padding-y: 10px;
}

.app-card .btn-primary ion-icon { font-size: 25px; }

.app-card :is(.btn-text, .btn-title) { font-family: var(--ff-open-sans); }

.app-card .btn-text {
  font-size: var(--fs-9);
  font-weight: var(--fw-400);
  line-height: 1;
}

.app-card .btn-primary:is(:hover, :focus) { background-color: transparent; }

.app-card .btn-title { font-weight: var(--fw-600); }





/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  text-align: center;
  color: var(--alice-blue);
}

.footer .logo {
  max-width: max-content;
  margin-inline: auto;
  margin-block-end: 30px;
}

.footer-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 30px;
  margin-block: 54px 50px;
}

.footer-link {
  color: var(--white);
  font-weight: var(--fw-600);
  padding-block-end: 4px;
  border-block-end: 2px solid transparent;
  transition: var(--transition);
}

.footer-link:is(:hover, :focus) { border-color: var(--ultramarine-blue); }

.social-list-title {
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  margin-block-end: 24px;
}

.social-list {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-link {
  background-color: var(--eerie-black-1);
  color: var(--white);
  font-size: 18px;
  padding: 16px;
  border-radius: var(--radius-circle);
  transition: var(--transition);
}

.social-link:is(:hover, :focus) { background-color: var(--ultramarine-blue); }

.footer-bottom {
  border-block-start: 1px solid var(--eerie-black-2);
  padding-block: 16px;
}

.copyright {
  line-height: 1.3;
  margin-block-end: 16px;
}

.footer-bottom-list {
  display: flex;
  justify-content: center;
  gap: 20px;
}





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for large than 575px screen
 */

@media (min-width: 575px) {

  /**
   * REUSED STYLE
   */

  .container {
    max-width: 540px;
    width: 100%;
    margin-inline: auto;
  }



  /**
   * APP
   */

  .app-card .card-banner {
    max-width: max-content;
    margin-inline: auto;
  }

}





/**
 * responsive for large than 768px screen
 */

@media (min-width: 768px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 720px; }

  .grid-list { grid-template-columns: 1fr 1fr; }



  /**
   * HEADER
   */

  .header .btn-group {
    display: flex;
    margin-inline: auto 30px;
  }

  .ghost-btn {
    color: var(--alice-blue);
    font-size: var(--fs-6);
    transition: var(--transition);
  }

  .ghost-btn:is(:hover, :focus) { color: var(--ultramarine-blue); }

  .header .btn-primary { border-radius: var(--radius-5); }



  /**
   * STATS
   */

  .stats-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }


  /**
   * APP
   */

  .app-card { padding: 50px; }



  /**
   * FOOTER
   */

  .footer-bottom { padding-block: 26px; }

  .footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .copyright { margin-block-end: 0; }

}





/**
 * responsive for large than 992px screen
 */

@media (min-width: 992px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 960px; }

  .grid-list { grid-template-columns: repeat(3, 1fr); }

  :is(.section-title, .section-text).text-center { margin-inline: auto; }

  .section-text.text-center { max-width: 60ch; }

  .section-title.text-center { max-width: 30ch; }



  /**
   * HERO
   */

  .hero .container {
    grid-template-columns: 0.8fr 1fr;
    align-items: center;
    gap: 25px;
  }



  /**
   * STATS
   */

  .stats .container {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }



  /**
   * INSTRUCTION
   */

  .instruction .grid-list { grid-template-columns: repeat(4, 1fr); }



  /**
   * APP
   */

  .app-card {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }



  /**
   * FOOTER
   */

  .footer-top .container { max-width: 580px; }

  .footer-list { column-gap: 60px; }

}





/**
 * responsive for large than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 1140px; }



  /**
   * HEADER
   */

  .nav-open-btn,
  .navbar-top { display: none; }

  .navbar {
    all: unset;
    display: block;
    margin-inline: auto;
  }

  .navbar-list { display: flex; }

  .navbar-link { font-weight: var(--fw-600); }

  .header .btn-group { margin-inline: 0; }



  /**
   * APP
   */

  .app-card { padding-inline: 80px; }

}


/* Thanks to codewithsadee for the code layout */

================================================
FILE: assets/js/script.js
================================================
'use strict';



/**
 * add event on element
 */

const addEventOnElem = function (elem, type, callback) {
  if (elem.length > 1) {
    for (let i = 0; i < elem.length; i++) {
      elem[i].addEventListener(type, callback);
    }
  } else {
    elem.addEventListener(type, callback);
  }
}



/**
 * navbar toggle
 */

const navbar = document.querySelector("[data-navbar]");
const navTogglers = document.querySelectorAll("[data-nav-toggler]");
const overlay = document.querySelector("[data-overlay]");

const toggleNavbar = function () {
  navbar.classList.toggle("active");
  overlay.classList.toggle("active");
  document.body.classList.toggle("active");
}

addEventOnElem(navTogglers, "click", toggleNavbar);



/**
 * active header when window scroll down to 100px
 */

const header = document.querySelector("[data-header]");

const activeElemOnScroll = function () {
  if (window.scrollY > 100) {
    header.classList.add("active");
  } else {
    header.classList.remove("active");
  }
}

addEventOnElem(window, "scroll", activeElemOnScroll);

================================================
FILE: config.json
================================================
{
  "port": "8000",
  "name": "Recluse Bot",
  "description": "Recluse is the only Discord bot you'll ever need. It has powerfull latest features which can manage discord server. It contains latest discord features like buttons, forms, menu, etc",
  "invite": "https://discord.com/oauth2/authorize?scope=bot+applications.commands&client_id=235148962103951360&permissions=37088600",
  "support": "https://discord.gg/whJeF4mDAX",
  "pfp": "https://cdn.discordapp.com/attachments/1027603800153919600/1028236433439338496/1665221033192.png",
  "feature1": "Music, It can play different kind of music from different platforms like spotify, apple, etc.",
  "feature2": "Moderation, It has many moderation command with latest discord fetures like timeout.",
  "feature3": "Anime, It contain anime commands where you can get information of chatacters, find images.",
  "feature4": "Ticket, It is very easy to pull the ticket and close it. It has buttons to make more easy to use."
}

================================================
FILE: index.js
================================================
const express = require('express')
const app = express()
app.set('view engine', 'ejs');
app.set('views', __dirname + '/views',);
const { name, description, invite, support, pfp, feature1, feature2, feature3, feature4 } = require("./config.json")
const port = 8000
app.listen(port, () => {
  console.log(`Website is working `)
})

app.use(express.static("assets"));
// 35.186.245.55

app.get('/', (req, res) => {
 
        res.render("index", {name: name, description: description, invite: invite, support: support, pfp: pfp, f1: feature1, f2: feature2, f3: feature3, f4: feature4});

});



// SOCIAL LINKS [Diwas Atreya]
app.get('/discord', async (req, res) => {
    res.redirect(support)
});

app.get('/server', async (req, res) => {
    res.redirect(support)
});

app.get('/youtube', async (req, res) => {
    res.redirect(`https://www.youtube.com/c/Kp18Gamer`)
});

app.get('/invite', async (req, res) => {
    res.redirect(invite)
});

app.get('/github', async (req, res) => {
    res.redirect(`https://github.com/diwasatreya`)
});

app.get('/git', async (req, res) => {
    res.redirect(`https://github.com/diwasatreya`)
});

app.get('/instagram', async (req, res) => {
    res.redirect(`https://www.instagram.com/atreyadiwas/`)
});

app.get('/ig', async (req, res) => {
    res.redirect(`https://www.instagram.com/atreyadiwas/`)
});

app.get('/twitter', async (req, res) => {
    res.redirect(`https://www.instagram.com/atreyadiwas/`)
});

app.get('/reddit', async (req, res) => {
    res.redirect(`https://www.reddit.com/r/programmingwithmemes`)
});


================================================
FILE: package.json
================================================
{
  "name": "Discord Bot Website",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@types/node": "^18.0.6",
    "ejs": "^3.1.8",
    "express": "^4.18.1",
    "node-fetch": "^3.2.6"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  }
}


================================================
FILE: replit.nix
================================================
{ pkgs }: {
	deps = [
		pkgs.nodejs-16_x
        pkgs.nodePackages.typescript-language-server
        pkgs.yarn
        pkgs.replitPackages.jest
	];
}


================================================
FILE: views/index.ejs
================================================
<!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">

  <!-- 
    - primary meta tags
  -->
  <title><%= name %></title>
  <meta name="title" content="<%= description %>">
  <meta name="description" content="Github: diwasatreya">

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="<%= pfp %>" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="/css/style.css">

  <!-- 
    - google font link
  -->
  <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=Open+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&display=swap"
    rel="stylesheet">

  <!-- 
    - preload images
  -->
  <link rel="preload" as="image" href="/images/hero-banner.png">

</head>

<body>

  <!-- 
    - #HEADER
  -->

  <header class="header" data-header>
    <div class="container">

      <a href="#" class="logo"><h1 style="color:#FFFFFF;" ><%= name %></h1>
      
      </a>

      <nav class="navbar" data-navbar>

        <div class="navbar-top">

          <a href="#" class="logo"><h2><%= name %></h2>
        
          </a>

          <button class="nav-close-btn" aria-label="close menu" data-nav-toggler>
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>

        </div>

        <ul class="navbar-list">

          <li>
            <a href="#" class="navbar-link">Home</a>
          </li>

          <li>
            <a href="#service" class="navbar-link">Services</a>
          </li>

          <li>
            <a href="#stat" class="navbar-link">Stats</a>
          </li>

          <li>
            <a href="#feature" class="navbar-link">Features</a>
          </li>

          <li>
            <a href="/server" class="navbar-link">Server</a>
          </li>

        </ul>

      </nav>

      <div class="btn-group">
      

        <a href="<%= invite %>" class="btn btn-primary">Invite Bot</a>
      </div>

      <button class="nav-open-btn" aria-label="open menu" data-nav-toggler>
        <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
      </button>

      <div class="overlay" data-overlay data-nav-toggler></div>

    </div>
  </header>





  <main>
    <article>

      <!-- 
        - #HERO
      -->

      <section class="hero" aria-label="home">
        <div class="container">

 <div class="hero-banner">
            <figure class="hero-banner">
              <img src="<%= pfp %>" width="799" height="823" alt="hero banner" class="w-100">
            </figure>
          </div>
          <div class="hero-content">

            <h1 class="h1 hero-title">Perfect Discord Bot</h1>

            <p class="hero-text">
              <%= description %>
            </p>

            <div class="btn-group">
              <a href="/invite" class="btn btn-primary">Invite Bot</a>

              <a href="#" class="play-btn">
                <div class="icon">
                  <ion-icon name="logo-discord" aria-hidden="true"></ion-icon>
                </div>

                <span class="span"><a href="/server">Support Server</a></span>
              </a>
            </div>

          </div>

         

        </div>
      </section>





      <!-- 
        - #PROMO
      -->

      <section class="section promo" aria-label="promo">
        <div class="container" id="service">

          <h2 class="h2 section-title text-center">What Bot Offers?</h2>

          <p class="section-text text-center">
          It was made under Discord TOS & this bot follows all the policies of Discord
          </p>

          <ul class="grid-list">

            <li>
              <div class="promo-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="code-slash-outline" aria-hidden="true"></ion-icon>
                </div>

                <h3 class="h3 card-title">Slash Command</h3>

                <p class="card-text">
                 Recently we have moved to slash command. / is used in very command of this bot
                </p>

                <a href="https://discord.com/blog/slash-commands-are-here" class="btn-link">
                  <span class="span">Explore More</span>

                  <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
                </a>

              </div>
            </li>

            <li>
              <div class="promo-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="cog-outline" aria-hidden="true"></ion-icon>
                </div>

                <h3 class="h3 card-title">Discord Buttons</h3>

                <p class="card-text">
                 To make bot more reliable we have add buttons in this bot which makes you work easier
                </p>

                <a href="https://discordjs.guide/interactions/buttons.html#building-and-sending-buttons" class="btn-link">
                  <span class="span">Explore More</span>

                  <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
                </a>

              </div>
            </li>

            <li>
              <div class="promo-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="shield-checkmark-outline" aria-hidden="true"></ion-icon>
                </div>

                <h3 class="h3 card-title">Trusted Security</h3>

                <p class="card-text">
                  All the data of the user are kept in safe place. In case to remove the data you can contact as any time
                </p>

                <a href="https://www.mongodb.com/" class="btn-link">
                  <span class="span">Explore More</span>

                  <ion-icon name="arrow-forward" aria-hidden="true"></ion-icon>
                </a>

              </div>
            </li>

          </ul>

        </div>
      </section>





      <!-- 
        - #STATS
      -->

      <section class="stats" aria-label="statistics">
        <div class="container" id="stat">

          <div class="stats-content">

            <h2 class="h2 section-title">Our Bot is in all over the Worldwide Coverage</h2>

            <p class="section-text">
             Our developers worked very hard on this bot & we archive many things. Thanks to all the servers and users for using this bot
            </p>

            <p class="section-text">
             This bot was choosed by many servers they like the features of this bot. We have got many positive reviews on our bot
            </p>

            <ul class="stats-list">

              <li>
                <div class="stats-card bg-gray">

                  <h3 class="h3 card-title">150k+</h3>

                  <p class="card-text">
                    Total Users
                  </p>

                </div>
              </li>

              <li>
                <div class="stats-card bg-gray">

                  <h3 class="h3 card-title">45k</h3>

                  <p class="card-text">
                  Total Servers
                  </p>

                </div>
              </li>

              <li>
                <div class="stats-card bg-gray">

                  <h3 class="h3 card-title">16k+</h3>

                  <p class="card-text">
                    Total Votes
                  </p>

                </div>
              </li>

            </ul>

          </div>

          <figure class="stats-banner">
            <img src="/images/stats-banner.png" width="797" height="454" alt="map" class="w-100">
          </figure>

        </div>
      </section>







      <!-- 
        - #INSTRUCTION
      -->

      <section class="section instruction" aria-label="instruction">
        <div class="container" id="feature">

          <h2 class="h2 section-title text-center">Features of Bot</h2>

          <p class="section-text text-center">
           <%= name %> has many features but here are some main features of this bot.
          </p>

          <ul class="grid-list">

            <li>
              <div class="instruction-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="musical-notes-sharp"></ion-icon>
                </div>

                <p class="card-text">
                <%= f1 %>
                </p>

              </div>
            </li>

            <li>
              <div class="instruction-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="hammer-sharp"></ion-icon>
                </div>

                <p class="card-text">
                 <%= f2 %>
                </p>

              </div>
            </li>

            <li>
              <div class="instruction-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="happy-outline"></ion-icon>
                </div>

                <p class="card-text">
                 <%= f3 %>
                </p>

              </div>
            </li>

            <li>
              <div class="instruction-card bg-gray">

                <div class="card-icon">
                  <ion-icon name="ticket-sharp"></ion-icon>
                </div>

                <p class="card-text">
                  <%= f4 %>
                </p>

              </div>
            </li>

          </ul>

        </div>
      </section>








  <!-- 
    - #FOOTER
  -->

  <footer class="footer">

  

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          Copyright diwasatreya 2022. All rights reserved.
        </p>

        <ul class="footer-bottom-list">

          <li>
            <a href="#" class="footer-bottom-link">Support</a>
          </li>

          <li>
            <a href="#" class="footer-bottom-link">Privacy Policy</a>
          </li>

        </ul>

      </div>
    </div>

  </footer>


<!-- Github: diwasatreya -->


  <!-- 
    - custom js link
  -->
  <script src="/js/script.js" defer></script>

  <!-- 
    - ionicon-link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

</body>

</html>