added Houses theme

max1mde · Nov 15, 2024 · 12cf162 · 12cf162
1 parent 081ce9c
commit 12cf162
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 0 deletions.
diff --git a/src/common/Card.js b/src/common/Card.js
@@ -224,6 +224,93 @@ class Card {
       </g>
     `,
 
+
+      houses: `
+      <defs>
+        <!-- Gradients for walls -->
+        <linearGradient id="wallGradient1" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#e1e1e1"/>
+            <stop offset="100%" stop-color="#bdbdbd"/>
+        </linearGradient>
+        <linearGradient id="wallGradient2" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#f2d9d0"/>
+            <stop offset="100%" stop-color="#e6beb4"/>
+        </linearGradient>
+        <linearGradient id="wallGradient3" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#cce5ff"/>
+            <stop offset="100%" stop-color="#99ccff"/>
+        </linearGradient>
+        <!-- Window gradient -->
+        <linearGradient id="windowGradient" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stop-color="#d3f1ff"/>
+            <stop offset="100%" stop-color="#92cde0"/>
+        </linearGradient>
+    </defs>
+
+    <!-- Background -->
+    <rect x="0" y="0" width="100%" height="100%" fill="#87ceeb" /> <!-- Sky -->
+
+    <!-- Clouds -->
+    <g class="clouds">
+        <path d="M50,60 Q30,40 70,40 Q90,20 120,40 Q150,20 180,40 Q200,40 180,60 Z" fill="white" opacity="0.9" />
+        <path d="M350,80 Q320,50 370,50 Q390,30 420,50 Q450,30 470,50 Q490,50 470,80 Z" fill="white" opacity="0.9" />
+        <path d="M200,50 Q180,30 220,30 Q240,10 270,30 Q290,10 320,30 Q340,30 320,50 Z" fill="white" opacity="0.9" />
+    </g>
+
+    <!-- Houses -->
+    <g class="city-houses">
+        <!-- House 1 -->
+        <g class="house" transform="translate(0, 180)">
+            <rect x="0" y="0" width="100" height="120" fill="url(#wallGradient1)" /> <!-- Walls -->
+            <rect x="0" y="0" width="100" height="10" fill="#6d6d6d" /> <!-- Flat Roof -->
+            <rect x="35" y="70" width="30" height="50" fill="#603e2e" rx="5" /> <!-- Door -->
+            <rect x="10" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 1 -->
+            <rect x="65" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 2 -->
+        </g>
+
+        <!-- House 2 -->
+        <g class="house" transform="translate(100, 180)">
+            <rect x="0" y="0" width="100" height="120" fill="url(#wallGradient2)" /> <!-- Walls -->
+            <rect x="0" y="0" width="100" height="10" fill="#6d6d6d" /> <!-- Flat Roof -->
+            <rect x="40" y="70" width="20" height="50" fill="#603e2e" rx="5" /> <!-- Door -->
+            <rect x="10" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 1 -->
+            <rect x="65" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 2 -->
+        </g>
+
+        <!-- House 3 -->
+        <g class="house" transform="translate(200, 180)">
+            <rect x="0" y="0" width="100" height="120" fill="url(#wallGradient3)" /> <!-- Walls -->
+            <rect x="0" y="0" width="100" height="10" fill="#6d6d6d" /> <!-- Flat Roof -->
+            <rect x="35" y="70" width="30" height="50" fill="#603e2e" rx="5" /> <!-- Door -->
+            <rect x="10" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 1 -->
+            <rect x="65" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 2 -->
+        </g>
+
+        <!-- House 4 -->
+        <g class="house" transform="translate(300, 180)">
+            <rect x="0" y="0" width="100" height="120" fill="#ffcccb" /> <!-- Walls -->
+            <rect x="0" y="0" width="100" height="10" fill="#6d6d6d" /> <!-- Flat Roof -->
+            <rect x="35" y="70" width="30" height="50" fill="#603e2e" rx="5" /> <!-- Door -->
+            <rect x="10" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 1 -->
+            <rect x="65" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 2 -->
+        </g>
+
+        <!-- House 5 -->
+        <g class="house" transform="translate(400, 180)">
+            <rect x="0" y="0" width="100" height="120" fill="#ffffcc" /> <!-- Walls -->
+            <rect x="0" y="0" width="100" height="10" fill="#6d6d6d" /> <!-- Flat Roof -->
+            <rect x="35" y="70" width="30" height="50" fill="#603e2e" rx="5" /> <!-- Door -->
+            <rect x="10" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 1 -->
+            <rect x="65" y="20" width="25" height="25" fill="url(#windowGradient)" /> <!-- Window 2 -->
+        </g>
+    </g>
+
+    <!-- Street -->
+    <rect x="0" y="300" width="100%" height="100" fill="#333" />
+    <line x1="0" y1="350" x2="500" y2="350" stroke="#fff" stroke-width="4" stroke-dasharray="20 10" />
+      `,
+
+
       city: `
       <defs>
          <mask id="${maskId}" x="0" y="0" width="${this.width}" height="99%">
@@ -234,6 +321,8 @@ class Card {
           <stop offset="100%" stop-color="#050036"/>
         </linearGradient>
       </defs>
+      
+      
 
       <g class="parallax-background" mask="url(#${maskId})">
         <!-- Sky Layer with Gradient -->

diff --git a/test.svg b/test.svg
diff --git a/themes/index.js b/themes/index.js
@@ -34,6 +34,7 @@ export const themes = {
     bg_color: "ffffff",
     border_color: "ffffff",
   },
+
 };
 
 export default themes;