bugfix/RZB-250099 – Full State Name Support and Popup UI Enhancement

.vscode/dictionaries/project-words.txt

@@ -23,6 +23,7 @@ Deepavali
 dhaga
 Dhaivat
 dogri
+DPDP
 Dussehra
 ensurepip
 fontsource
@@ -40,6 +41,7 @@ Jaati
 Jayanti
 jsonify
 Jyeshtha
+Karnataka
 Kartika
 kmeans
 Kolkata

abcd.code-workspace

@@ -146,6 +146,7 @@
     "prettier.trailingComma": "none",
     "scss.lint.emptyRules": "ignore",
     "search.exclude": {
+      ".github/**": true,
       "dist/**": true,
       "package-lock.json": true
     },

package.json

@@ -27,43 +27,69 @@
   "contributors": [
     {
       "name": "Keshav Mohta",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "xkeshav",
+      "role": "UI Engineer"
     },
     {
       "name": "Aditya Kumar Singh",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "adityasingh-7",
+      "role": "UI Engineer"
     },
     {
       "name": "Vansh Raj",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "ciphrox",
+      "role": "UI Engineer"
     },
     {
       "name": "Vamil Porwal",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "vamilP",
+      "role": "UI Engineer"
     },
     {
       "name": "Ayush Tyagi",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "ayu-ty",
+      "role": "UI Engineer"
     },
     {
       "name": "Azmat Raza",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "azmat01",
+      "role": "UI Engineer"
     },
     {
       "name": "Chhavi Sharma",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "chhaviS04",
+      "role": "UI Engineer"
     },
     {
       "name": "Prakash Raj",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "1046prt",
+      "role": "UI Engineer"
     },
     {
-      "name": "Rupesh",
-      "email": "[email protected]"
+      "name": "Rupesh Rathore",
+      "email": "[email protected]",
+      "github": "rupesh-rathore",
+      "role": "UI Engineer"
     },
     {
       "name": "Suresh Chelani",
-      "email": "[email protected]"
+      "email": "[email protected]",
+      "github": "suresh-chelani",
+      "role": "UI Engineer"
+    },
+    {
+      "name": "Harsh Saini",
+      "email": "[email protected]",
+      "github": "harsh01234s",
+      "role": "UX Engineer"
     }
   ],
   "keywords": [

public/data/zodiacs.json

@@ -1,9 +1,27 @@
 [
-  {},
+  {
+    "name": {
+      "english": "Mesha (Aries)",
+      "hindi": "मेष"
+    },
+    "dates": {
+      "english": "April 14 - May 14",
+      "hindi": "14 अप्रैल - 14 मई"
+    },
+    "image": "1.jpeg",
+    "description": {
+      "english": "Mesha is symbolized by the Ram. Individuals born under this sign are known for their courage, determination, and leadership qualities.",
+      "hindi": "मेष को मेढ़े द्वारा दर्शाया जाता है। इस राशि के जातक अपने साहस, दृढ़ संकल्प और नेतृत्व गुणों के लिए जाने जाते हैं।"
+    },
+    "points": {
+      "english": ["Corresponding Letters: A,L,E", "Ruled by Mars (Mangal) - planet of energy", "Fire sign - passionate and dynamic personality", "Natural leaders with a competitive spirit", "Can be impulsive and impatient", "Best suited for entrepreneurship, sports and military", "Health concerns: Headaches and fevers", "Compatible with Leo and Sagittarius"],
+      "hindi": ["संबंधित अक्षर: अ, ल, ई", "मंगल ग्रह द्वारा शासित - ऊर्जा का ग्रह", "अग्नि तत्व - भावुक और गतिशील व्यक्तित्व", "प्रतिस्पर्धी भावना के साथ प्राकृतिक नेता", "आवेगी और अधीर हो सकते हैं", "उद्यमिता, खेल और सेना के लिए सबसे उपयुक्त", "स्वास्थ्य संबंधी चिंताएँ: सिरदर्द और बुखार", "सिंह और धनु राशि के साथ अच्छी संगतता"]
+    }
+  },
   {
     "name": {
       "english": "Vrishabha (Taurus)",
-      "hindi": "वृषभ (वृषभ राशि)"
+      "hindi": "वृषभ"
     },
     "dates": {
       "english": "May 15 - June 14",
@@ -22,7 +40,7 @@
   {
     "name": {
       "english": "Mithuna (Gemini)",
-      "hindi": "मिथुन (मिथुन राशि)"
+      "hindi": "मिथुन"
     },
     "dates": {
       "english": "June 15 - July 14",
@@ -41,7 +59,7 @@
   {
     "name": {
       "english": "Karka (Cancer)",
-      "hindi": "कर्क (कर्क राशि)"
+      "hindi": "कर्क"
     },
     "dates": {
       "english": "July 15 - August 14",
@@ -60,7 +78,7 @@
   {
     "name": {
       "english": "Simha (Leo)",
-      "hindi": "सिंह (सिंह राशि)"
+      "hindi": "सिंह"
     },
     "dates": {
       "english": "August 15 - September 15",
@@ -79,7 +97,7 @@
   {
     "name": {
       "english": "Kanya (Virgo)",
-      "hindi": "कन्या (कन्या राशि)"
+      "hindi": "कन्या"
     },
     "dates": {
       "english": "September 16 - October 15",
@@ -98,7 +116,7 @@
   {
     "name": {
       "english": "Tula (Libra)",
-      "hindi": "तुला (तुला राशि)"
+      "hindi": "तुला"
     },
     "dates": {
       "english": "October 16 - November 14",
@@ -117,7 +135,7 @@
   {
     "name": {
       "english": "Vrishchika (Scorpio)",
-      "hindi": "वृश्चिक (वृश्चिक राशि)"
+      "hindi": "वृश्चिक"
     },
     "dates": {
       "english": "November 15 - December 14",
@@ -136,7 +154,7 @@
   {
     "name": {
       "english": "Dhanu (Sagittarius)",
-      "hindi": "धनु (धनु राशि)"
+      "hindi": "धनु"
     },
     "dates": {
       "english": "December 15 - January 13",
@@ -155,7 +173,7 @@
   {
     "name": {
       "english": "Makara (Capricorn)",
-      "hindi": "मकर (मकर राशि)"
+      "hindi": "मकर"
     },
     "dates": {
       "english": "January 14 - February 11",
@@ -174,7 +192,7 @@
   {
     "name": {
       "english": "Kumbha (Aquarius)",
-      "hindi": "कुंभ (कुंभ राशि)"
+      "hindi": "कुंभ"
     },
     "dates": {
       "english": "February 12 - March 12",
@@ -193,7 +211,7 @@
   {
     "name": {
       "english": "Meena (Pisces)",
-      "hindi": "मीन (मीन राशि)"
+      "hindi": "मीन"
     },
     "dates": {
       "english": "March 13 - April 13",

src/assets/styles/MobileSplash.css

@@ -1,5 +1,4 @@
 .container_splash {
-  container-type: inline-size;
   display: none;
 }
 

src/assets/styles/canvas.css

@@ -1,3 +1,7 @@
+:root {
+  --shade: light-dark(#fff, #25354fcc);
+  --box: light-dark(#f5deb3, #0f172acc);
+}
 /* Global Styles for the Canvas Generator */
 .canvas-generator {
   min-height: 100vh;
@@ -19,7 +23,7 @@
 }
 
 .canvas-generator .input-area {
-  background: rgba(37, 53, 79, 0.8);
+  background: var(--shade);
   padding: 2rem;
   border-radius: 20px;
   border: 2px solid #334155;
@@ -33,7 +37,7 @@
   border-radius: 12px;
   font-size: 1.2rem;
   width: 100%;
-  background: rgba(15, 23, 42, 0.8);
+  background: var(--box);
   color: #e2e8f0;
   transition: border-color 0.3s ease;
   outline: none;
@@ -63,14 +67,14 @@
   cursor: pointer;
   transition: background 0.3s ease;
   border: none;
-  background: #1e40af;
+  background: light-dark(#383535, #1e40af);
   color: white;
   flex: 1;
   min-width: 120px;
 }
 
 .canvas-generator .action-button:hover {
-  background: #2563eb;
+  background: light-dark(#000, #2563eb);
 }
 
 .canvas-generator .checkbox-wrapper {
@@ -97,9 +101,8 @@
 }
 
 .canvas-generator .input-label {
-  color: #e2e8f0;
+  color: light-dark(#000, #e2e8f0);
   font-size: 1.2rem;
-  font-weight: bold;
 }
 
 /* Color Options */
@@ -118,8 +121,8 @@
   padding: 0.8rem;
   border: 2px solid #334155;
   border-radius: 12px;
-  background: rgba(15, 23, 42, 0.8);
-  color: #e2e8f0;
+  background: var(--box);
+  color: #334155;
   font-size: 1rem;
   cursor: pointer;
 }
@@ -131,7 +134,7 @@
 .canvas-generator label {
   display: block;
   margin-bottom: 0.5rem;
-  color: #e2e8f0;
+  color: light-dark(#000, #e2e8f0);
   font-size: 1rem;
 }
 
@@ -140,7 +143,7 @@
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 1rem;
-  background: rgba(37, 53, 79, 0.8);
+  background: var(--shade);
   border: 2px solid #334155;
   padding: 2rem;
   border-radius: 20px;

src/assets/styles/common.css

@@ -10,3 +10,46 @@
   padding: 1rem;
   outline-offset: 0.5rem;
 }
+
+/* Utilities */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.link__active,
+.text__active {
+  color: hsl(from blue 80 10 10);
+}
+
+.content {
+  min-height: 100vh;
+}
+
+.layout {
+  height: fit-content;
+  max-height: 100dvh;
+}
+
+.txt__center {
+  text-align: center;
+}
+
+.hide {
+  content-visibility: hidden;
+}
+
+::disabled {
+  pointer-events: none;
+}
+
+.no__link {
+  text-decoration: none;
+}