Update index.html

index.html

@@ -7,12 +7,15 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         :root {
-            --primary: #6c5ce7;
-            --secondary: #a29bfe;
-            --dark: #2d3436;
-            --light: #f5f6fa;
-            --accent: #fd79a8;
+            --primary: #ff6b35;
+            --secondary: #ff9e1b;
+            --dark: #121212;
+            --light: #1e1e1e;
+            --text: #e0e0e0;
+            --accent: #ff9e1b;
             --code-bg: #2d2d2d;
+            --card-bg: #252525;
+            --border: #333;
         }
         
         * {
@@ -23,8 +26,8 @@
         }
         
         body {
-            background-color: var(--light);
-            color: var(--dark);
+            background-color: var(--dark);
+            color: var(--text);
             line-height: 1.6;
         }
         
@@ -39,7 +42,7 @@
             color: white;
             padding: 2rem 0;
             border-radius: 0 0 20px 20px;
-            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
             margin-bottom: 2rem;
             text-align: center;
         }
@@ -59,26 +62,38 @@
         
         .badge {
             display: inline-block;
-            background-color: var(--accent);
-            color: white;
+            background-color: var(--dark);
+            color: var(--accent);
             padding: 0.3rem 0.8rem;
             border-radius: 20px;
             font-size: 0.8rem;
             margin-top: 1rem;
             font-weight: bold;
+            border: 1px solid var(--accent);
+        }
+        
+        .version {
+            display: inline-block;
+            background-color: var(--accent);
+            color: var(--dark);
+            padding: 0.3rem 0.8rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            margin-left: 0.5rem;
+            font-weight: bold;
         }
         
         .card {
-            background: white;
+            background: var(--card-bg);
             border-radius: 10px;
             padding: 2rem;
             margin-bottom: 2rem;
-            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
             border-left: 4px solid var(--primary);
         }
         
         .card h2 {
-            color: var(--primary);
+            color: var(--accent);
             margin-bottom: 1rem;
             display: flex;
             align-items: center;
@@ -86,10 +101,11 @@
         
         .card h2 i {
             margin-right: 10px;
+            color: var(--primary);
         }
         
         .section-title {
-            color: var(--dark);
+            color: var(--accent);
             margin: 2rem 0 1rem;
             font-size: 1.8rem;
             position: relative;
@@ -125,6 +141,7 @@
             overflow-x: auto;
             margin: 1rem 0;
             box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
+            border: 1px solid var(--border);
         }
         
         pre code {
@@ -136,26 +153,32 @@
             width: 100%;
             border-collapse: collapse;
             margin: 1rem 0;
+            border: 1px solid var(--border);
         }
         
         th, td {
             padding: 12px 15px;
             text-align: left;
-            border-bottom: 1px solid #ddd;
+            border-bottom: 1px solid var(--border);
         }
         
         th {
             background-color: var(--primary);
-            color: white;
+            color: var(--dark);
+            font-weight: bold;
         }
         
         tr:nth-child(even) {
-            background-color: #f2f2f2;
+            background-color: rgba(255, 107, 53, 0.05);
+        }
+        
+        tr:hover {
+            background-color: rgba(255, 107, 53, 0.1);
         }
         
         .note {
-            background-color: #fff8e1;
-            border-left: 4px solid #ffc107;
+            background-color: rgba(255, 107, 53, 0.1);
+            border-left: 4px solid var(--primary);
             padding: 1rem;
             margin: 1rem 0;
             border-radius: 0 4px 4px 0;
@@ -164,21 +187,31 @@
         .note-title {
             font-weight: bold;
             margin-bottom: 0.5rem;
-            color: #ff9800;
+            color: var(--accent);
             display: flex;
             align-items: center;
         }
         
         .note-title i {
             margin-right: 8px;
+            color: var(--primary);
         }
         
         footer {
             text-align: center;
             margin-top: 3rem;
             padding: 2rem 0;
-            color: #666;
-            border-top: 1px solid #eee;
+            color: #888;
+            border-top: 1px solid var(--border);
+        }
+        
+        .example-script {
+            margin-top: 2rem;
+        }
+        
+        .example-script h3 {
+            color: var(--accent);
+            margin-bottom: 0.5rem;
         }
         
         @media (max-width: 768px) {
@@ -200,7 +233,7 @@
 <body>
     <header>
         <div class="container">
-            <h1>ReikerNx Bot SDK</h1>
+            <h1>ReikerNx Bot SDK <span class="version">v1.0.0</span></h1>
             <p>A lightweight Node.js wrapper to manage your bot's direct messages and group messages easily.</p>
             <span class="badge">Node.js</span>
         </div>
@@ -210,8 +243,10 @@
         <section id="installation">
             <h2 class="section-title">Installation</h2>
             <div class="card">
-                <p>Just copy the file into your project and require it:</p>
-                <pre><code>const nexusBot = require('reikernx');</code></pre>
+                <p>Install the package using npm:</p>
+                <pre><code>npm install reikernx</code></pre>
+                <p>Then require it in your project:</p>
+                <pre><code>const nexus = require('reikernx');</code></pre>
             </div>
         </section>
         
@@ -219,7 +254,7 @@
             <h2 class="section-title">Setup</h2>
             <div class="card">
                 <p>Before using any function, you must configure your bot:</p>
-                <pre><code>nexusBot.setup({
+                <pre><code>nexus.setup({
   botUsername: 'your_bot_username',
   password: 'your_bot_password'
 });</code></pre>
@@ -250,7 +285,7 @@
                         <tr>
                             <td><code>text</code></td>
                             <td>string</td>
-                            <td>Message text</td>
+                            <td>Message text or media URL</td>
                         </tr>
                         <tr>
                             <td><code>isMedia</code></td>
@@ -260,13 +295,13 @@
                         <tr>
                             <td><code>replyto</code></td>
                             <td>string (optional)</td>
-                            <td>Message ID you are replying to</td>
+                            <td>Message ID you are replying to (currently not supported for media)</td>
                         </tr>
                     </tbody>
                 </table>
                 
                 <p>Example:</p>
-                <pre><code>await nexusBot.sendDM({
+                <pre><code>await nexus.sendDM({
   to: 'username123',
   text: 'Hello!',
   isMedia: false
@@ -305,7 +340,7 @@
                 </table>
                 
                 <p>Example:</p>
-                <pre><code>await nexusBot.sendGroup({
+                <pre><code>await nexus.sendGroup({
   to: 'groupchatid',
   text: 'Hey everyone!'
 });</code></pre>
@@ -381,15 +416,61 @@
                         <tr>
                             <td><code>recipient</code></td>
                             <td>string</td>
-                            <td>Same as to</td>
+                            <td>Same as to (use this for replies)</td>
                         </tr>
                     </tbody>
                 </table>
                 
-                <p>Example:</p>
-                <pre><code>nexusBot.listenMessages((msg) => {
-  console.log('New message received:', msg);
+                <div class="example-script">
+                    <h3>Example Script Usage:</h3>
+                    <pre><code>nexus.setup({
+  botUsername: 'yourusername',
+  password: 'yourpassword'
+});
+
+nexus.listenMessages(async (msg) => {
+  const text = msg.text.trim().toLowerCase();
+
+  // !ping in group
+  if (msg.type === 'group' && text === '!ping') {
+    await nexus.sendGroup({
+      to: msg.recipient, // group id
+      text: 'Hello'
+    });
+    console.log(`Replied Hello to group ${msg.recipient}`);
+  }
+
+  // !pic in DM
+  if (msg.type === 'dm' && text === '!pic') {
+    await nexus.sendDM({
+      to: msg.recipient, // username
+      text: 'https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png',
+      isMedia: true
+    });
+    console.log(`Sent picture to DM ${msg.recipient}`);
+  }
+
+  // !reply in both DM or group
+  if (text === '!reply') {
+    if (msg.type === 'group') {
+      await nexus.sendGroup({
+        to: msg.recipient,
+        text: 'This is a reply to your message!',
+        replyto: msg.id
+      });
+      console.log(`Replied to group message ${msg.id}`);
+    }
+    if (msg.type === 'dm') {
+      await nexus.sendDM({
+        to: msg.recipient,
+        text: 'This is a reply to your message!',
+        replyto: msg.id
+      });
+      console.log(`Replied to DM message ${msg.id}`);
+    }
+  }
 });</code></pre>
+                </div>
             </div>
         </section>
         
@@ -402,6 +483,7 @@
                         <li>Messages are polled every second.</li>
                         <li>Duplicate messages are prevented using a local timestamps.json file.</li>
                         <li>All functions require the bot to be configured first via setup().</li>
+                        <li>Media messages cannot be replied to at this time.</li>
                         <li>Errors will be thrown if setup is missing or incomplete.</li>
                     </ul>
                 </div>