Merge pull request #59 from akanshSirohi/neon-theme-example

Neon Theme
akanshSirohi · Oct 8, 2024 · 77a91af · 77a91af
2 parents 9e8ccde + 7ab7639
commit 77a91af
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/src/cards/motivational-quote.js b/src/cards/motivational-quote.js
@@ -1,7 +1,12 @@
 const express = require("express");
 const router = express.Router();
 const fs = require("fs").promises;
-const { generateCard, CARD_AGE, generateHTMLCard, Languages } = require("../card-generator");
+const {
+  generateCard,
+  CARD_AGE,
+  generateHTMLCard,
+  Languages,
+} = require("../card-generator");
 const { parseOptions } = require("../options-parser");
 
 const DATA_FILE_PATH = "./src/data/motivational_quotes.json";
@@ -27,20 +32,38 @@ router.get("/", handleTheme, handleOptions, async (req, res) => {
     let quote_card;
 
     // Custom theme moderation
-    if(req.theme === "skeleton") {
+    if (req.theme === "skeleton") {
       const html_content = `
         <div style="display: flex; flex-direction: column; border: 1px solid #000; padding: 20px; width: 400px; margin: 0 auto; text-align: center;align-items:center;border-radius:10px;">
           <span style="font-size: 20px; font-weight: bold;">${random_quote.quote}</span>
           <span style="font-size: 16px;color: #888; margin-top:10px;">- ${random_quote.author}</span>
         </div>
       `;
+
+      // Generate card using custom HTML
+      quote_card = await generateHTMLCard(html_content, Languages.ENGLISH);
+    } else if (req.theme === "neon") {
+      const html_content = `
+      <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #1e1e1e; color: #ffffff; border: 2px solid #3a3a3a; padding: 25px; width: 420px; text-align: center; border-radius: 12px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); font-family: 'Roboto', sans-serif;">
+        <div style="display: flex; justify-content: center; flex-direction: column; align-items: center;">
+          <span style="font-size: 16px; font-weight: bold; color: #ffffff; background: linear-gradient(90deg, #00ff9d, #00e4ff);padding:10px;">"${random_quote.quote}"</span>
+          <span style="font-size: 14px; color: #bbbbbb; margin-top: 12px;">- ${random_quote.author}</span>
+        </div>
+        <div style="display: flex; width: 100%; height: 2px; background: linear-gradient(90deg, #00ff9d, #00e4ff); margin-top: 15px;"></div>
+      </div>
+    `;
       // Generate card using custom HTML
       quote_card = await generateHTMLCard(html_content, Languages.ENGLISH);
-    }else{
+    } else {
       const quote_content = `${random_quote.quote}\n\n- ${random_quote.author}`;
-      quote_card = await generateCard(quote_content, req.theme, req.options, Languages.ENGLISH);
+      quote_card = await generateCard(
+        quote_content,
+        req.theme,
+        req.options,
+        Languages.ENGLISH
+      );
     }
-    
+
     res.writeHead(200, {
       "Content-Type": "image/svg+xml",
       "Cache-Control": `public, max-age=${CARD_AGE}`,

diff --git a/src/help.js b/src/help.js
@@ -132,9 +132,9 @@ router.get("/", (req, res) => {
       info: "Random motivational quotes card",
       api: {
         args: {
-        theme: "Theme of card. All themes. Default: dark_2  [Optional]",
+          theme: "Theme of card. All themes. Default: dark_2  [Optional]. Additional themes: skeleton, neon",
         },
-        example: [`${baseurl}/motivational-quotes-card`],
+        example: [`${baseurl}/motivational-quotes-card`, `${baseurl}/motivational-quotes-card?theme=neon`, `${baseurl}/motivational-quotes-card?theme=skeleton`],
       },
     },
     "word-of-the-day-card": {