Merge pull request #90 from Spandan-Mishra/theme/galaxy

Added Galaxy theme

README.md

@@ -119,6 +119,10 @@ args: {
 
   ![Card](https://afraid-ninnetta-github-cards.koyeb.app/jokes-card?theme=lemonade)
 
+- #### `Galaxy` Theme Card
+
+  ![Card](https://afraid-ninnetta-github-cards.koyeb.app/jokes-card?theme=galaxy)
+
 - #### `Pattern_1` Theme Card
 
   ![Card](https://afraid-ninnetta-github-cards.koyeb.app/jokes-card?theme=pattern_1)
@@ -170,4 +174,4 @@ You can also create cards in HTML and CSS! Check out the `src/cards/motivational
 
 ## Additional Information
 
-For more information, visit [https://afraid-ninnetta-github-cards.koyeb.app/](https://afraid-ninnetta-github-cards.koyeb.app/).
+For more information, visit [https://afraid-ninnetta-github-cards.koyeb.app/](https://afraid-ninnetta-github-cards.koyeb.app/).

package.json

@@ -23,4 +23,4 @@
     "satori": "^0.11.2",
     "satori-html": "^0.3.2"
   }
-}
+}

src/gradients.js

@@ -6,7 +6,8 @@ const GradientConstants = {
     DARK_2: "dark_2",
     LIGHT: "light",
     RGB: "rgb",
-    LEMONADE: "lemonade"
+    LEMONADE: "lemonade",
+    GALAXY: "galaxy"
 };
 
 const generateGradient = async (grad_name, ctx, canvas, w) => {
@@ -51,8 +52,35 @@ const generateGradient = async (grad_name, ctx, canvas, w) => {
             background.addColorStop(0.49, "rgba(238, 219, 92, 1)"); 
             background.addColorStop(1, "rgba(249, 245, 75, 1)");
             return background;
+
+        case GradientConstants.GALAXY:
+            background = ctx.createLinearGradient(
+                w / 2 - canvas.height >= 0 ? w / 2 - canvas.height : 0,
+                canvas.height / 2,
+                w / 2 + canvas.height,
+                canvas.height >= 290 ? canvas.height - 290 : 0
+            );
+
+            background.addColorStop(0, "rgba(40, 40, 100, 1)");
+            background.addColorStop(0.3, "rgba(70, 30, 100, 1)");
+            background.addColorStop(0.6, "rgba(0, 0, 0, 1)");
+            background.addColorStop(1, "rgba(20, 20, 50, 1)");
 
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, w, canvas.height);
 
+            for(let i = 0; i < 250; i++) {
+                let xPos = Math.random() * w;
+                let yPos = Math.random() * canvas.height;
+                let alpha = 0.5 + Math.random() * 0.5;
+                let size = Math.random() * 2;
+
+                ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
+                ctx.fillRect(xPos, yPos, size, size);
+            }
+
+            ctx.fillStyle = `rgba(255, 255, 255, 0)`;
+            ctx.fillRect(0, 0, w, canvas.height);
     }
 };
 module.exports.GradientConstants = GradientConstants;

src/help.js

@@ -117,6 +117,16 @@ router.get("/", (req, res) => {
         `${baseurl}/motivational-quotes-card?theme=neon_horizon`,
       ],
     },
+    "galaxy": {
+      info: "Galaxy theme",
+      example: [
+        `${baseurl}/jokes-card?theme=galaxy`,
+        `${baseurl}/programming-quotes-card?theme=galaxy`,
+        `${baseurl}/programming-facts-card?theme=galaxy`,
+        `${baseurl}/motivational-quotes-card?theme=galaxy`,
+        `${baseurl}/random-facts-card?theme=galaxy`,
+      ],
+    },
     "custom": {
       info: "Custom theme",
       args: {
@@ -301,4 +311,4 @@ router.get("/", (req, res) => {
   res.json({themes,cards});
 });
 
-module.exports = router;
+module.exports = router;

src/themes.js

@@ -11,6 +11,7 @@ const THEMES = [
     "pattern_3",
     "rgb",
     "lemonade",
+    "galaxy",
     "custom" // It should be in the last position always, add your theme name above this
 ];
 
@@ -98,6 +99,13 @@ const create_theme = async (ctx, canvas, theme, W) => {
             theme_obj.font_color = "#222";
             theme_obj.shadow = false;
             break;
+        case "galaxy":
+            theme_obj.background = await generateGradient(GradientConstants.GALAXY, ctx, canvas, W);
+            theme_obj.card_bg = "#000"; 
+            theme_obj.font_color = "#F0F0F0"; 
+            theme_obj.shadow = true; 
+            theme_obj.shadowColor = "#8800FF"; 
+            break;
 
     }