EpikCord · smokeynoom · Oct 30, 2022 · Oct 30, 2022 · Nov 1, 2022 · Nov 1, 2022
diff --git a/pages/EpikCord_Logo.png b/pages/EpikCord_Logo.png
diff --git a/pages/index.html b/pages/index.html
@@ -0,0 +1,75 @@
+<!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">
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" type="image/x-icon" href="EpikCord_Logo.png">
+    <title>Guide</title>
+</head>
+<body>
+
+    <nav>
+        <ul>
+            <li><a href="#what">What is EpikCord?</a></li>
+            <li><a href="#guide">How to use EpikCord?</a></li>
+            <li><a href="https://discord.gg/FHg5BvaDuv" target="https://discord.gg/FHg5BvaDuv">Discord</a></li>
+        </ul>
+    </nav>
+
+    <img src="EpikCord_logo.png" alt="Logo of EpikCord.py" width="10%" height="10%" class="topright">
+
+    <h1 class="center">Complete guide on how to use EpikCord.py</h1>
+
+    <h4 class="center">Welcome to the EpikCord.py Guide</h4>
+
+    <p class="what">
+        If you don't know what EpikCord.py is, it is an Open Source Discord Bot Project.
+        <br><br>
+        It is an API Wrapper for Discord Bots.
+    </p>
+
+    <p class="contribute">
+        Read the <a href="https://gist.github.com/TheUntraceable/28ff8096a40e757124ea2c878a4c76ae">rules</a> for the server <br><br>
+        If you want to contribute, click <a href="https://github.com/EpikCord/EpikCord.py/blob/master/CONTRIBUTING.md" target="https://github.com/EpikCord/EpikCord.py/blob/master/CONTRIBUTING.md">here</a> to know more
+    </p>
+
+    <p class="guide">
+        This is a guide on how to use EpikCord.py as there is no real documentation as of right now
+        <br><br>
+        If you have any doubts, feel free to ask it on our discord(link given above)
+        <br><br>
+        The most basic discord bot uses the following code:-
+
+        <div class="codeblock">
+            from EpikCord import Client, Intents # Import what we will need <br>
+            client = Client("TOKEN", Intents().all) # Create a Client instance, where token is the token for your Discord Bot, and lazily use all intents <br>
+            <br>
+            @client.event # The decorator that registers event handlers. <br>
+            async def message_create(message): # EpikCord will pass in a parameter with type Message which represents the message sent <br>
+                if message.content == "!hello": # If the message is !hello <br>
+                    await message.channel.send(content="Hello!") # Say hello back otherwise that's rude. <br>
+                    <br>
+            client.login() # Make the client login to Discord.
+        </div>
+
+        <br><br>
+
+        &nbsp; &nbsp; &nbsp; &nbsp; 
+        To implement slash commands, you can use
+        <div class="codeblock">
+            from EpikCord import Client, Intents # Again, what we need.
+            client = Client("TOKEN", Intents().all) # Create a Client instance, where token is the token for your Discord Bot, and lazily use all intents
+            <br>
+            @client.command(<br>
+                name = "ping", # Name the command "ping" and make discord render the command name as "ping"<br>
+                description = "Sometimes reply with 'Pong!'" # Make description for the command for users to read for help <br>
+            ) <br>
+            async def ping(interaction): # EpikCord will pass in a parameter which the type can be ApplicationCommandInteraction, MessageComponentInteraction, AutoCompleteInteraction or ModalInteraction <br>
+            await interaction.reply(content = "Pong!") # Reply to the interaction. All interactions must be acknowledged somehow. Reply is one of them. <br>
+            <br>
+        client.login() # Login to Discord <br>
+    </p>
+</body>
+</html>
diff --git a/pages/index.js b/pages/index.js
@@ -1,3 +1,5 @@
+// Importing
+
 import Image from 'next/image';
 import Head from "../components/head"
 import Navbar from "../components/navbar"
@@ -7,6 +9,8 @@ import styles from "../styles/Home.module.css"
 const messageCommandBotCode = `from EpikCord import Client, Intents # Import what we will need\nclient = Client("TOKEN", Intents().all) # Create a Client instance, where token is the token for your Discord Bot, and lazily use all intents\n\[email protected] # The decorator that registers event handlers.\nasync def message_create(message): # EpikCord will pass in a parameter with type Message which represents the message sent\n    if message.content == "!hello": # If the message is !hello\n        await message.channel.send(content="Hello!") # Say hello back otherwise that's rude.\n\nclient.login() # Make the client login to Discord.`
 const slashCommandBotCode = `from EpikCord import Client, Intents # Again, what we need.\nclient = Client("TOKEN", Intents().all) # Create a Client instance, where token is the token for your Discord Bot, and lazily use all intents\n\[email protected](\n    name = "ping", # Name the command "ping" and make discord render the command name as "ping"\n    description = "Sometimes reply with 'Pong!'" # Make description for the command for users to read for help\n)\nasync def ping(interaction): # EpikCord will pass in a parameter which the type can be ApplicationCommandInteraction, MessageComponentInteraction, AutoCompleteInteraction or ModalInteraction\n    await interaction.reply(content = "Pong!") # Reply to the interaction. All interactions must be acknowledged somehow. Reply is one of them.\n\nclient.login() # Login to Discord`
 
+// Exporting
+
 export default function Home() {
     return (
         <html>

diff --git a/pages/style.css b/pages/style.css
@@ -0,0 +1,81 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
+
+* {
+    font-family: 'Open Sans';
+    background-color: darkslategray;
+}
+
+.topright {
+    float: right;
+}
+
+h1 {
+    color: #CC4100;
+}
+
+.center {
+    text-align: center;
+}
+
+p {
+    color: #69A2B0;
+    margin-left: 25px;
+}
+
+h4 {
+    color: #CC4100;
+}
+
+a {
+    text-decoration: none;
+    color: coral;
+}
+
+nav {
+    text-align: center;
+    flex: 1;
+}
+
+nav ul {
+    list-style-type: none;
+}
+
+nav ul li {
+    display: inline-block;
+    margin-right: 20px;
+}
+
+nav ul li a:hover {
+    color: lime;
+    font-weight: bolder;
+}
+
+a:hover {
+    color: lime;
+    font-weight: bolder;
+}
+
+.codeblock {
+    background-color: rgb(131, 50, 50);
+    flex-wrap: wrap;
+    color: limegreen;
+    margin-left: 25px;
+    padding: 10px;
+}
+
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px grey;
+    border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: white;
+    border-radius: 10px;
+}