diff --git a/.vscode/dictionaries/project-words.txt b/.vscode/dictionaries/project-words.txt index 8f4070e..fab50b0 100755 --- a/.vscode/dictionaries/project-words.txt +++ b/.vscode/dictionaries/project-words.txt @@ -23,6 +23,7 @@ jsonify kmeans linalg lucide +matras Organja orgenja Peina @@ -30,6 +31,7 @@ prerender Reddy roboto Rushi +sanyukat shadcn signup sitemapindex diff --git a/abcd.code-workspace b/abcd.code-workspace index 3955a1e..d136661 100644 --- a/abcd.code-workspace +++ b/abcd.code-workspace @@ -73,9 +73,25 @@ "javascript": "javascriptreact" }, "eslint.options": { - "extensions": [".js", ".jsx", ".md", ".mdx", ".ts", ".tsx", ".astro"] - }, - "eslint.validate": ["mdx", "markdown", "javascript", "javascriptreact", "typescript", "typescriptreact", "astro"], + "extensions": [ + ".js", + ".jsx", + ".md", + ".mdx", + ".ts", + ".tsx", + ".astro" + ] + }, + "eslint.validate": [ + "mdx", + "markdown", + "javascript", + "javascriptreact", + "typescript", + "typescriptreact", + "astro" + ], "explorer.compactFolders": false, "explorer.confirmDelete": false, "explorer.confirmDragAndDrop": false, @@ -103,7 +119,10 @@ }, "git.autofetch": true, "git.branchPrefix": "feature/", - "git.branchProtection": ["develop", "main"], + "git.branchProtection": [ + "develop", + "main" + ], "git.branchRandomName.enable": true, "git.confirmSync": false, "git.enableCommitSigning": false, @@ -114,7 +133,9 @@ "js/ts.implicitProjectConfig.checkJs": true, "peacock.affectSideBarBorder": true, "peacock.color": "#abcd00", - "prettier.documentSelectors": ["**/*.astro"], + "prettier.documentSelectors": [ + "**/*.astro" + ], "prettier.printWidth": 120, "prettier.quoteProps": "consistent", "prettier.singleQuote": false, @@ -153,11 +174,11 @@ "titleBar.activeBackground": "#abcd00", "titleBar.activeForeground": "#15202b", "titleBar.inactiveBackground": "#abcd0099", - "titleBar.inactiveForeground": "#15202b99", - "tab.activeBorder": "#d5ff01" + "titleBar.inactiveForeground": "#15202b99" }, "files.exclude": { - "**/.git": false + "**/.git": false, + "**/.git/": true }, "workbench.editor.pinnedTabSizing": "compact", "workbench.editor.pinnedTabsOnSeparateRow": true, @@ -171,4 +192,4 @@ ".githooks/**": true } } -} +} \ No newline at end of file diff --git a/docs/pages.md b/docs/pages.md index 8048816..174be0e 100644 --- a/docs/pages.md +++ b/docs/pages.md @@ -21,42 +21,91 @@ This document describes the functionality and purpose of each page in the applic ### Interactive Learning Pages -#### Barahkhadi Page (/pages/barahkhadi/index.astro) +#### Alphabets Section -![Barahkhadi page](../src/assets/screenshots/barahkhadi.png) +##### Alphabets Explorer Page (/pages/alphabets/index.astro) -- Grid display of Hindi consonants organized in traditional groups -- Quick view popover showing barahkhadi variations for each consonant -- Interactive buttons to show/hide variations -- Clickable consonants leading to detailed pages -- Responsive layout with consonant groups +![Alphabets Explorer page](../src/assets/screenshots/alphabets/index.png) + +- Main hub showing all available alphabet categories +- Cards with category icons, titles and descriptions +- Navigation to specialized playground and board pages for each category +- Animated card interactions and hover effects + +##### Alphabet Playground (/pages/alphabets/[alphabet]/playground.astro) + +![Alphabet playground page](../src/assets/screenshots/alphabets/playground.png) + +- Interactive keyboard-driven learning experience +- Displays letters, emojis, and spelling animations based on key presses +- Dynamic color changes for visual engagement +- Category-specific content loaded based on URL parameter +- Includes help component explaining keyboard interaction + +##### Alphabet Board (/pages/alphabets/[alphabet]/board.astro) + +![Alphabet board page](../src/assets/screenshots/alphabets/board.png) + +- Complete display of all letters in selected alphabet category +- Grid layout with letter cards showing detailed information +- Organized reference view for all category items +- Back navigation to main alphabets explorer + +#### Varnmala Section + +##### Varnmala Hub Page (/pages/varnmala/index.astro) -#### Varnmala Page (/pages/varnmala.astro) +![Varnmala hub page](../src/assets/screenshots/varnmala/index.png) -![Varnmala page](../src/assets/screenshots/varnmala.png) +- Main hub for all alphabet learning activities +- Navigation to specialized practice pages +- Overview of available learning modes + +##### Alphabet Display (/pages/varnmala/alphabet.astro) + +![Alphabet display page](../src/assets/screenshots/varnmala/alphabets.png) - Displays Hindi and English alphabets - Uses Alphabet component to render letter lists - Includes help section explaining the concept -#### Typing Page (/pages/typing.astro) +##### Typing Practice (/pages/varnmala/typing.astro) -![Typing practice page](../src/assets/screenshots/typing.png) +![Typing practice page](../src/assets/screenshots/varnmala/typing.png) - Interactive typing practice - Shows letters, emojis, and spelling animations - Responds to keyboard input (A-Z) - Includes visual feedback -#### Reader Page (/pages/reader.astro) +##### Reader (/pages/varnmala/reader.astro) -![Reader page](../src/assets/screenshots/reader.png) +![Reader page](../src/assets/screenshots/varnmala/reader.png) - Text-to-speech functionality - Multiple speaker options (Mudra, Rutvi) - Audio control for alphabet pronunciation - Emoji display with letters +##### English Practice (/pages/varnmala/english.astro) + +![English practice page](../src/assets/screenshots/varnmala/english.png) + +- English alphabet practice +- Color-changing letter display +- Keyboard interaction +- Visual feedback + +#### Barahkhadi Page (/pages/barahkhadi/index.astro) + +![Barahkhadi page](../src/assets/screenshots/barahkhadi.png) + +- Grid display of Hindi consonants organized in traditional groups +- Quick view popover showing barahkhadi variations for each consonant +- Interactive buttons to show/hide variations +- Clickable consonants leading to detailed pages +- Responsive layout with consonant groups + #### Panel Page (/pages/panel.astro) ![3D Panel page](../src/assets/screenshots/panel.png) @@ -66,15 +115,6 @@ This document describes the functionality and purpose of each page in the applic - Custom HTML element (letter-panel) - Interactive letter display -#### English Page (/pages/hindi.astro) - -![English practice page](../src/assets/screenshots/english.png) - -- English alphabet practice -- Color-changing letter display -- Keyboard interaction -- Visual feedback - #### Record Page (/pages/record.astro) ![Audio recording page](../src/assets/screenshots/record.png) diff --git a/public/assets/images/alphabets/general/apple.jpg b/public/assets/images/alphabets/general/apple.jpg new file mode 100644 index 0000000..d9c3f95 Binary files /dev/null and b/public/assets/images/alphabets/general/apple.jpg differ diff --git a/public/map/images/andaman.webp b/public/map/images/andaman.webp new file mode 100644 index 0000000..36bb23a Binary files /dev/null and b/public/map/images/andaman.webp differ diff --git a/public/map/images/andhra.jpg b/public/map/images/andhra.jpg deleted file mode 100644 index 80795d2..0000000 Binary files a/public/map/images/andhra.jpg and /dev/null differ diff --git a/public/map/images/andhra.webp b/public/map/images/andhra.webp new file mode 100644 index 0000000..19998a2 Binary files /dev/null and b/public/map/images/andhra.webp differ diff --git a/public/map/images/arunachal.jpeg b/public/map/images/arunachal.jpeg deleted file mode 100644 index b8c5b23..0000000 Binary files a/public/map/images/arunachal.jpeg and /dev/null differ diff --git a/public/map/images/arunachal.webp b/public/map/images/arunachal.webp new file mode 100644 index 0000000..9870f41 Binary files /dev/null and b/public/map/images/arunachal.webp differ diff --git a/public/map/images/assam.jpg b/public/map/images/assam.jpg deleted file mode 100644 index 4c5a649..0000000 Binary files a/public/map/images/assam.jpg and /dev/null differ diff --git a/public/map/images/assam.webp b/public/map/images/assam.webp new file mode 100644 index 0000000..3bac374 Binary files /dev/null and b/public/map/images/assam.webp differ diff --git a/public/map/images/bihar.jpeg b/public/map/images/bihar.jpeg deleted file mode 100644 index a8972f3..0000000 Binary files a/public/map/images/bihar.jpeg and /dev/null differ diff --git a/public/map/images/bihar.webp b/public/map/images/bihar.webp new file mode 100644 index 0000000..4be92a0 Binary files /dev/null and b/public/map/images/bihar.webp differ diff --git a/public/map/images/chandigarh.webp b/public/map/images/chandigarh.webp new file mode 100644 index 0000000..edec3f8 Binary files /dev/null and b/public/map/images/chandigarh.webp differ diff --git a/public/map/images/chhatisgarh.jpg b/public/map/images/chhatisgarh.jpg deleted file mode 100644 index 86e29fb..0000000 Binary files a/public/map/images/chhatisgarh.jpg and /dev/null differ diff --git a/public/map/images/chhatisgarh.webp b/public/map/images/chhatisgarh.webp new file mode 100644 index 0000000..6ee7867 Binary files /dev/null and b/public/map/images/chhatisgarh.webp differ diff --git a/public/map/images/dadar.webp b/public/map/images/dadar.webp new file mode 100644 index 0000000..db8f95a Binary files /dev/null and b/public/map/images/dadar.webp differ diff --git a/public/map/images/delhi.jpg b/public/map/images/delhi.jpg deleted file mode 100644 index 4281da4..0000000 Binary files a/public/map/images/delhi.jpg and /dev/null differ diff --git a/public/map/images/delhi.webp b/public/map/images/delhi.webp new file mode 100644 index 0000000..f9e7b63 Binary files /dev/null and b/public/map/images/delhi.webp differ diff --git a/public/map/images/goa.jpg b/public/map/images/goa.jpg deleted file mode 100644 index 5656cc6..0000000 Binary files a/public/map/images/goa.jpg and /dev/null differ diff --git a/public/map/images/goa.webp b/public/map/images/goa.webp new file mode 100644 index 0000000..ca1ee8f Binary files /dev/null and b/public/map/images/goa.webp differ diff --git a/public/map/images/gujrat.jpg b/public/map/images/gujrat.jpg deleted file mode 100644 index 4e13a05..0000000 Binary files a/public/map/images/gujrat.jpg and /dev/null differ diff --git a/public/map/images/gujrat.webp b/public/map/images/gujrat.webp new file mode 100644 index 0000000..397c915 Binary files /dev/null and b/public/map/images/gujrat.webp differ diff --git a/public/map/images/harayana.webp b/public/map/images/harayana.webp new file mode 100644 index 0000000..a2d6393 Binary files /dev/null and b/public/map/images/harayana.webp differ diff --git a/public/map/images/haryana.jpeg b/public/map/images/haryana.jpeg deleted file mode 100644 index 8b103de..0000000 Binary files a/public/map/images/haryana.jpeg and /dev/null differ diff --git a/public/map/images/himachal.jpg b/public/map/images/himachal.jpg deleted file mode 100644 index 11e6ddd..0000000 Binary files a/public/map/images/himachal.jpg and /dev/null differ diff --git a/public/map/images/himachal.webp b/public/map/images/himachal.webp new file mode 100644 index 0000000..800a7c3 Binary files /dev/null and b/public/map/images/himachal.webp differ diff --git a/public/map/images/jharkhand.jpg b/public/map/images/jharkhand.jpg deleted file mode 100644 index 44f6efd..0000000 Binary files a/public/map/images/jharkhand.jpg and /dev/null differ diff --git a/public/map/images/jharkhand.webp b/public/map/images/jharkhand.webp new file mode 100644 index 0000000..c81a8c1 Binary files /dev/null and b/public/map/images/jharkhand.webp differ diff --git a/public/map/images/karnataka.jpg b/public/map/images/karnataka.jpg deleted file mode 100644 index 38033ed..0000000 Binary files a/public/map/images/karnataka.jpg and /dev/null differ diff --git a/public/map/images/karnataka.webp b/public/map/images/karnataka.webp new file mode 100644 index 0000000..b694925 Binary files /dev/null and b/public/map/images/karnataka.webp differ diff --git a/public/map/images/kashmir.jpeg b/public/map/images/kashmir.jpeg deleted file mode 100644 index 148f508..0000000 Binary files a/public/map/images/kashmir.jpeg and /dev/null differ diff --git a/public/map/images/kashmir.webp b/public/map/images/kashmir.webp new file mode 100644 index 0000000..dba2525 Binary files /dev/null and b/public/map/images/kashmir.webp differ diff --git a/public/map/images/kerala.jpg b/public/map/images/kerala.jpg deleted file mode 100644 index 7868262..0000000 Binary files a/public/map/images/kerala.jpg and /dev/null differ diff --git a/public/map/images/kerala.webp b/public/map/images/kerala.webp new file mode 100644 index 0000000..3c166a0 Binary files /dev/null and b/public/map/images/kerala.webp differ diff --git a/public/map/images/ladakh.jpg b/public/map/images/ladakh.jpg deleted file mode 100644 index 76eb3ba..0000000 Binary files a/public/map/images/ladakh.jpg and /dev/null differ diff --git a/public/map/images/ladakh.webp b/public/map/images/ladakh.webp new file mode 100644 index 0000000..e3de312 Binary files /dev/null and b/public/map/images/ladakh.webp differ diff --git a/public/map/images/lakshadweep.webp b/public/map/images/lakshadweep.webp new file mode 100644 index 0000000..7a96b2c Binary files /dev/null and b/public/map/images/lakshadweep.webp differ diff --git a/public/map/images/madhyapradesh.jpg b/public/map/images/madhyapradesh.jpg deleted file mode 100644 index 6764034..0000000 Binary files a/public/map/images/madhyapradesh.jpg and /dev/null differ diff --git a/public/map/images/madhyapradesh.webp b/public/map/images/madhyapradesh.webp new file mode 100644 index 0000000..b052b0e Binary files /dev/null and b/public/map/images/madhyapradesh.webp differ diff --git a/public/map/images/maharashtra.jpg b/public/map/images/maharashtra.jpg deleted file mode 100644 index 779fda3..0000000 Binary files a/public/map/images/maharashtra.jpg and /dev/null differ diff --git a/public/map/images/maharashtra.webp b/public/map/images/maharashtra.webp new file mode 100644 index 0000000..ae581bd Binary files /dev/null and b/public/map/images/maharashtra.webp differ diff --git a/public/map/images/manipur.jpeg b/public/map/images/manipur.jpeg deleted file mode 100644 index 0d266bb..0000000 Binary files a/public/map/images/manipur.jpeg and /dev/null differ diff --git a/public/map/images/manipur.webp b/public/map/images/manipur.webp new file mode 100644 index 0000000..910aa26 Binary files /dev/null and b/public/map/images/manipur.webp differ diff --git a/public/map/images/meghalaya.jpeg b/public/map/images/meghalaya.jpeg deleted file mode 100644 index c46b568..0000000 Binary files a/public/map/images/meghalaya.jpeg and /dev/null differ diff --git a/public/map/images/meghalaya.webp b/public/map/images/meghalaya.webp new file mode 100644 index 0000000..8f3fbc3 Binary files /dev/null and b/public/map/images/meghalaya.webp differ diff --git a/public/map/images/mizoram.jpg b/public/map/images/mizoram.jpg deleted file mode 100644 index bc3a1fd..0000000 Binary files a/public/map/images/mizoram.jpg and /dev/null differ diff --git a/public/map/images/mizoram.webp b/public/map/images/mizoram.webp new file mode 100644 index 0000000..35c3112 Binary files /dev/null and b/public/map/images/mizoram.webp differ diff --git a/public/map/images/nagaland.jpeg b/public/map/images/nagaland.jpeg deleted file mode 100644 index f3a94e6..0000000 Binary files a/public/map/images/nagaland.jpeg and /dev/null differ diff --git a/public/map/images/nagaland.webp b/public/map/images/nagaland.webp new file mode 100644 index 0000000..e184ef6 Binary files /dev/null and b/public/map/images/nagaland.webp differ diff --git a/public/map/images/odisha.jpg b/public/map/images/odisha.jpg deleted file mode 100644 index 02d77f8..0000000 Binary files a/public/map/images/odisha.jpg and /dev/null differ diff --git a/public/map/images/odisha.webp b/public/map/images/odisha.webp new file mode 100644 index 0000000..46d60b0 Binary files /dev/null and b/public/map/images/odisha.webp differ diff --git a/public/map/images/puducherry.webp b/public/map/images/puducherry.webp new file mode 100644 index 0000000..cbb1ab1 Binary files /dev/null and b/public/map/images/puducherry.webp differ diff --git a/public/map/images/punjab.jpg b/public/map/images/punjab.jpg deleted file mode 100644 index 0063ccf..0000000 Binary files a/public/map/images/punjab.jpg and /dev/null differ diff --git a/public/map/images/punjab.webp b/public/map/images/punjab.webp new file mode 100644 index 0000000..bbbd0fd Binary files /dev/null and b/public/map/images/punjab.webp differ diff --git a/public/map/images/rajasthan.jpg b/public/map/images/rajasthan.jpg deleted file mode 100644 index 050f51a..0000000 Binary files a/public/map/images/rajasthan.jpg and /dev/null differ diff --git a/public/map/images/rajasthan.webp b/public/map/images/rajasthan.webp new file mode 100644 index 0000000..52d2bfa Binary files /dev/null and b/public/map/images/rajasthan.webp differ diff --git a/public/map/images/sikkim.jpg b/public/map/images/sikkim.jpg deleted file mode 100644 index c87bcf9..0000000 Binary files a/public/map/images/sikkim.jpg and /dev/null differ diff --git a/public/map/images/sikkim.webp b/public/map/images/sikkim.webp new file mode 100644 index 0000000..f3dec06 Binary files /dev/null and b/public/map/images/sikkim.webp differ diff --git a/public/map/images/tamilnadu.jpeg b/public/map/images/tamilnadu.jpeg deleted file mode 100644 index e658678..0000000 Binary files a/public/map/images/tamilnadu.jpeg and /dev/null differ diff --git a/public/map/images/tamilnadu.webp b/public/map/images/tamilnadu.webp new file mode 100644 index 0000000..018252c Binary files /dev/null and b/public/map/images/tamilnadu.webp differ diff --git a/public/map/images/telangana.jpg b/public/map/images/telangana.jpg deleted file mode 100644 index a4d49a9..0000000 Binary files a/public/map/images/telangana.jpg and /dev/null differ diff --git a/public/map/images/telangana.webp b/public/map/images/telangana.webp new file mode 100644 index 0000000..450f309 Binary files /dev/null and b/public/map/images/telangana.webp differ diff --git a/public/map/images/tripura.jpg b/public/map/images/tripura.jpg deleted file mode 100644 index 295b748..0000000 Binary files a/public/map/images/tripura.jpg and /dev/null differ diff --git a/public/map/images/tripura.webp b/public/map/images/tripura.webp new file mode 100644 index 0000000..b2ecb75 Binary files /dev/null and b/public/map/images/tripura.webp differ diff --git a/public/map/images/uttarakhand.jpeg b/public/map/images/uttarakhand.jpeg deleted file mode 100644 index 83f64fa..0000000 Binary files a/public/map/images/uttarakhand.jpeg and /dev/null differ diff --git a/public/map/images/uttarakhand.webp b/public/map/images/uttarakhand.webp new file mode 100644 index 0000000..1d90d51 Binary files /dev/null and b/public/map/images/uttarakhand.webp differ diff --git a/public/map/images/uttarpradesh.jpg b/public/map/images/uttarpradesh.jpg deleted file mode 100644 index de05cee..0000000 Binary files a/public/map/images/uttarpradesh.jpg and /dev/null differ diff --git a/public/map/images/uttarpradesh.webp b/public/map/images/uttarpradesh.webp new file mode 100644 index 0000000..c96ecab Binary files /dev/null and b/public/map/images/uttarpradesh.webp differ diff --git a/public/map/images/westbengal.jpg b/public/map/images/westbengal.jpg deleted file mode 100644 index 44f6efd..0000000 Binary files a/public/map/images/westbengal.jpg and /dev/null differ diff --git a/public/map/images/westbengal.webp b/public/map/images/westbengal.webp new file mode 100644 index 0000000..8d66219 Binary files /dev/null and b/public/map/images/westbengal.webp differ diff --git a/public/mocks/cross.json b/public/mocks/cross.json new file mode 100644 index 0000000..710123d --- /dev/null +++ b/public/mocks/cross.json @@ -0,0 +1,17 @@ +[ + { + "easy": ["CAT", "DOG", "SUN", "MOON", "STAR"], + "medium": ["APPLE", "GRAPE", "ORANGE", "BERRIES"], + "hard": ["WALRUS", "GIRAFFE", "PENGUIN", "DOLPHIN"] + }, + { + "easy": ["HAT", "CAR", "BALL", "SHOE", "LAMP"], + "medium": ["CHERRY", "COCONUT", "PLUM", "MELON", "PEACH"], + "hard": ["OCTOPUS", "JACKAL", "WALRUS", "PEACOCK"] + }, + { + "easy": ["RED", "BLUE", "GREEN", "YELLOW", "PURPLE"], + "medium": ["BLACK", "WHITE", "BROWN", "ORANGE", "PINK"], + "hard": ["MAGENTA", "CYAN", "VIOLET", "MAROON"] + } +] diff --git a/src/assets/json/state.json b/src/assets/json/state.json index dcf7742..50e16b8 100644 --- a/src/assets/json/state.json +++ b/src/assets/json/state.json @@ -6,7 +6,7 @@ "dance": "Kuchipudi", "festival": "Sankranti", "description": "Kuchipudi is one of the eight major Indian classical dances and originated in Andhra Pradesh.", - "image": "andhra.jpg", + "image": "andhra.webp", "svg": "Andhra.svg", "wikiLink": "https://en.wikipedia.org/wiki/Andhra_Pradesh", "official_website": "https://www.ap.gov.in", @@ -20,10 +20,10 @@ "dance": "Bihu Dance", "festival": "Bihu", "description": "The Bihu dance is an energetic and vibrant folk dance performed during the Bihu festival in Assam.", - "image": "assam.jpg", + "image": "assam.webp", "svg": "Assam.svg", "wikiLink": "https://en.wikipedia.org/wiki/Assam", - "official_website": "https://www.assam.gov.in", + "official_website": "https://assam.gov.in", "isActive": true }, { @@ -33,10 +33,10 @@ "dance": "Yak Dance", "festival": "Losar, Reh", "description": "The Yak dance is a traditional dance form performed during major festivals in Arunachal Pradesh.", - "image": "arunachal.jpeg", + "image": "arunachal.webp", "svg": "ArunachalPradesh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Arunachal_Pradesh", - "official_website": "https://www.arunachalpradesh.gov.in", + "official_website": "https://arunachalpradesh.gov.in", "isActive": true, "alternate_dance": "Bari Dance" }, @@ -47,7 +47,7 @@ "dance": "Perini Shiva Thandavam", "festival": "Bonalu", "description": "Perini Shiva Thandavam is a dance dedicated to Lord Shiva, performed in Telangana.", - "image": "telangana.jpg", + "image": "telangana.webp", "svg": "Telangana.svg", "wikiLink": "https://en.wikipedia.org/wiki/Telangana", "official_website": "https://www.telangana.gov.in", @@ -60,7 +60,7 @@ "dance": "Panthi Dance", "festival": "Bastar Dussehra", "description": "Panthi Dance is a traditional dance performed by the Satnami community of Chhattisgarh.", - "image": "chhatisgarh.jpg", + "image": "chhatisgarh.webp", "svg": "Chhatisgarh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Chhattisgarh", "official_website": "https://www.cgstate.gov.in", @@ -74,7 +74,7 @@ "dance": "Kathak", "festival": "Republic Day Parade", "description": "Delhi, the capital of India, hosts Kathak performances and cultural events during national celebrations.", - "image": "delhi.jpg", + "image": "delhi.webp", "svg": "Delhi.svg", "wikiLink": "https://en.wikipedia.org/wiki/Delhi", "official_website": "https://delhi.gov.in", @@ -87,10 +87,10 @@ "dance": "Tarpa Dance", "festival": "Nariyal Poornima", "description": "Tarpa Dance is a tribal dance performed in Dadra and Nagar Haveli and Daman and Diu, especially during harvest festivals.", - "image": "dadra_daman.jpg", + "image": "dadar.webp", "svg": "DadraNagarHaveliDamanDiu.svg", "wikiLink": "https://en.wikipedia.org/wiki/Dadra_and_Nagar_Haveli_and_Daman_and_Diu", - "official_website": "https://dddh.gov.in", + "official_website": "https://ddd.gov.in", "isActive": true }, { @@ -100,7 +100,7 @@ "dance": "Dekhnni", "festival": "Carnival", "description": "Dekhnni is a semi-classical Goan dance form that blends Indian and Western influences.", - "image": "goa.jpg", + "image": "goa.webp", "svg": "Goa.svg", "wikiLink": "https://en.wikipedia.org/wiki/Goa", "official_website": "https://www.goa.gov.in", @@ -113,7 +113,7 @@ "dance": "Garba", "festival": "Navratri", "description": "Garba is a popular folk dance of Gujarat performed during the Navratri festival.", - "image": "gujrat.jpg", + "image": "gujrat.webp", "svg": "Gujrat.svg", "wikiLink": "https://en.wikipedia.org/wiki/Gujarat", "official_website": "https://gujaratindia.gov.in", @@ -126,7 +126,7 @@ "dance": "Kathakali", "festival": "Onam", "description": "Kathakali is a classical Indian dance form known for its elaborate costumes and expressive gestures.", - "image": "kerala.jpg", + "image": "kerala.webp", "svg": "Kerala.svg", "wikiLink": "https://en.wikipedia.org/wiki/Kerala", "official_website": "https://kerala.gov.in", @@ -140,10 +140,10 @@ "dance": "Yakshagana", "festival": "Dasara", "description": "Yakshagana is a traditional theatre form that combines dance, music, and dialogue in Karnataka.", - "image": "karnataka.jpg", + "image": "karnataka.webp", "svg": "Karnataka.svg", "wikiLink": "https://en.wikipedia.org/wiki/Karnataka", - "official_website": "https://www.karnataka.gov.in", + "official_website": "https://karnataka.gov.in/english", "isActive": true }, { @@ -153,10 +153,10 @@ "dance": "Lavani", "festival": "Ganesh Chaturthi", "description": "Lavani is a popular folk dance form of Maharashtra, known for its rhythm and vibrant performance.", - "image": "maharashtra.jpg", + "image": "maharashtra.webp", "svg": "Maharashtra.svg", "wikiLink": "https://en.wikipedia.org/wiki/Maharashtra", - "official_website": "https://www.maharashtra.gov.in", + "official_website": "http://www.maharashtra.gov.in/", "isActive": true }, { @@ -166,7 +166,7 @@ "dance": "Matki Dance", "festival": "Lokrang Festival", "description": "Matki Dance is a traditional folk dance performed by women during celebrations in Madhya Pradesh.", - "image": "madhyapradesh.jpg", + "image": "madhyapradesh.webp", "svg": "MadhyaPradesh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Madhya_Pradesh", "official_website": "https://www.mp.gov.in", @@ -180,7 +180,7 @@ "dance": "Odissi", "festival": "Rath Yatra", "description": "Odissi is one of the eight classical dance forms of India, originating from Odisha.", - "image": "odisha.jpg", + "image": "odisha.webp", "svg": "Odisha.svg", "wikiLink": "https://en.wikipedia.org/wiki/Odisha", "official_website": "https://www.odisha.gov.in", @@ -193,7 +193,7 @@ "dance": "Chhau Dance", "festival": "Durga Puja", "description": "Chhau Dance is a semi-classical dance form performed during festivals in West Bengal.", - "image": "westbengal.jpg", + "image": "westbengal.webp", "svg": "WestBengal.svg", "wikiLink": "https://en.wikipedia.org/wiki/West_Bengal", "official_website": "https://wb.gov.in", @@ -203,10 +203,10 @@ "id": "jharkhand", "state_id": 11, "name": "Jharkhand", - "dance": "Chhau Dance", + "dance": "Jhumair", "festival": "Sarhul", - "description": "Chhau is a semi-classical dance performed during festivals in Jharkhand.", - "image": "jharkhand.jpg", + "description": "Jhumair is a semi-classical dance performed during festivals in Jharkhand.", + "image": "jharkhand.webp", "svg": "Jharkhand.svg", "wikiLink": "https://en.wikipedia.org/wiki/Jharkhand", "official_website": "https://www.jharkhand.gov.in", @@ -220,7 +220,7 @@ "dance": "Jat-Jatin", "festival": "Chhath Puja", "description": "Jat-Jatin is a popular folk dance of Bihar that represents rural life and relationships.", - "image": "bihar.jpeg", + "image": "bihar.webp", "svg": "Bihar.svg", "wikiLink": "https://en.wikipedia.org/wiki/Bihar", "official_website": "https://state.bihar.gov.in", @@ -234,7 +234,7 @@ "dance": "Kathak", "festival": "Diwali", "description": "Kathak is one of the eight major classical dance forms of India, originating from Uttar Pradesh.", - "image": "uttarpradesh.jpg", + "image": "uttarpradesh.webp", "svg": "UttarPradesh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Uttar_Pradesh", "official_website": "https://up.gov.in", @@ -247,7 +247,7 @@ "dance": "Chang Lo", "festival": "Hornbill Festival", "description": "Chang Lo is a traditional dance performed by the Chang tribe during celebrations in Nagaland.", - "image": "nagaland.jpeg", + "image": "nagaland.webp", "svg": "Nagaland.svg", "wikiLink": "https://en.wikipedia.org/wiki/Nagaland", "official_website": "https://www.nagaland.gov.in", @@ -260,7 +260,7 @@ "dance": "Manipuri Dance", "festival": "Yaoshang", "description": "Manipuri Dance is a classical dance form of Manipur, emphasizing graceful movements and expressions.", - "image": "manipur.jpeg", + "image": "manipur.webp", "svg": "Manipur.svg", "wikiLink": "https://en.wikipedia.org/wiki/Manipur", "official_website": "https://manipur.gov.in", @@ -273,7 +273,7 @@ "dance": "Nongkrem Dance", "festival": "Shad Suk Mynsiem", "description": "Nongkrem Dance is a religious dance performed by the Khasi tribe in Meghalaya.", - "image": "meghalaya.jpeg", + "image": "meghalaya.webp", "svg": "Meghalaya.svg", "wikiLink": "https://en.wikipedia.org/wiki/Meghalaya", "official_website": "https://www.meghalaya.gov.in", @@ -286,7 +286,7 @@ "dance": "Cheraw Dance", "festival": "Chapchar Kut", "description": "Cheraw Dance, also known as the Bamboo Dance, is a traditional dance of Mizoram.", - "image": "mizoram.jpg", + "image": "mizoram.webp", "svg": "Mizoram.svg", "wikiLink": "https://en.wikipedia.org/wiki/Mizoram", "official_website": "https://mizoram.gov.in", @@ -299,10 +299,10 @@ "dance": "Ghoomar", "festival": "Teej", "description": "Ghoomar is a traditional folk dance performed by women in Rajasthan, known for its swirling movements.", - "image": "rajasthan.jpg", + "image": "rajasthan.webp", "svg": "Rajasthan.svg", "wikiLink": "https://en.wikipedia.org/wiki/Rajasthan", - "official_website": "https://www.rajasthan.gov.in", + "official_website": "https://rajasthan.gov.in/", "isActive": true }, { @@ -312,7 +312,7 @@ "dance": "Singhi Cham", "festival": "Losar", "description": "Singhi Cham is a mask dance performed during Buddhist festivals in Sikkim.", - "image": "sikkim.jpg", + "image": "sikkim.webp", "svg": "Sikkim.svg", "wikiLink": "https://en.wikipedia.org/wiki/Sikkim", "official_website": "https://sikkim.gov.in", @@ -325,7 +325,7 @@ "dance": "Bharatanatyam", "festival": "Pongal", "description": "Bharatanatyam is one of the oldest classical dance forms of India, originating in Tamil Nadu.", - "image": "tamilnadu.jpeg", + "image": "tamilnadu.webp", "svg": "TamilNadu.svg", "wikiLink": "https://en.wikipedia.org/wiki/Tamil_Nadu", "official_website": "https://www.tn.gov.in", @@ -338,7 +338,7 @@ "dance": "Hojagiri Dance", "festival": "Kharchi Puja", "description": "Hojagiri Dance is a traditional dance performed by the Reang community of Tripura.", - "image": "tripura.jpg", + "image": "tripura.webp", "svg": "Tripura.svg", "wikiLink": "https://en.wikipedia.org/wiki/Tripura", "official_website": "https://tripura.gov.in", @@ -351,7 +351,7 @@ "dance": "Phag Dance", "festival": "Lohri", "description": "Phag Dance is a folk dance that celebrates the harvest season in Haryana.", - "image": "haryana.jpeg", + "image": "harayana.webp", "svg": "Harayana.svg", "wikiLink": "https://en.wikipedia.org/wiki/Haryana", "official_website": "https://haryana.gov.in", @@ -365,7 +365,7 @@ "dance": "Bhangra", "festival": "Lohri", "description": "Bhangra is a lively and energetic folk dance of Punjab, traditionally performed during harvest celebrations.", - "image": "punjab.jpg", + "image": "punjab.webp", "svg": "Punjab.svg", "wikiLink": "https://en.wikipedia.org/wiki/Punjab,_India", "official_website": "https://punjab.gov.in", @@ -378,10 +378,10 @@ "dance": "Chholiya Dance", "festival": "Kumbh Mela", "description": "Chholiya Dance is a traditional folk dance of Uttarakhand, performed during weddings and celebrations.", - "image": "uttarakhand.jpeg", + "image": "uttarakhand.webp", "svg": "Uttarakhand.svg", "wikiLink": "https://en.wikipedia.org/wiki/Uttarakhand", - "official_website": "https://uttarakhand.gov.in", + "official_website": "https://uk.gov.in/", "isActive": true }, { @@ -391,7 +391,7 @@ "dance": "Nati", "festival": "Kullu Dussehra", "description": "Nati is a traditional folk dance of Himachal Pradesh, performed during festivals and celebrations.", - "image": "himachal.jpg", + "image": "himachal.webp", "svg": "HimachalPradesh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Himachal_Pradesh", "official_website": "https://himachal.nic.in", @@ -405,7 +405,7 @@ "dance": "Rouf", "festival": "Lohri, Navroz", "description": "Rouf is a traditional Kashmiri dance performed during festivals and special occasions.", - "image": "kashmir.jpeg", + "image": "kashmir.webp", "svg": "Kashmir.svg", "wikiLink": "https://en.wikipedia.org/wiki/Jammu_and_Kashmir", "official_website": "https://jk.gov.in", @@ -419,10 +419,10 @@ "dance": "Nicobarese Dance", "festival": "Island Tourism Festival", "description": "Nicobarese Dance is performed by the Nicobarese tribe during festive occasions in the Andaman and Nicobar Islands.", - "image": "andaman.jpg", + "image": "andaman.webp", "svg": "AndamanAndNicobar.svg", "wikiLink": "https://en.wikipedia.org/wiki/Andaman_and_Nicobar_Islands", - "official_website": "https://www.andaman.gov.in", + "official_website": "https://andaman.gov.in/", "isActive": true }, { @@ -432,7 +432,7 @@ "dance": "Gidda and Bhangra", "festival": "Rose Festival", "description": "Chandigarh celebrates its rich culture with performances of Gidda and Bhangra during various festivals.", - "image": "chandigarh.jpg", + "image": "chandigarh.webp", "svg": "Chandigarh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Chandigarh", "official_website": "https://chandigarh.gov.in", @@ -445,7 +445,7 @@ "dance": "Lava Dance", "festival": "Minicoy Fest", "description": "Lava Dance is a traditional dance performed by the people of Lakshadweep during joyous occasions.", - "image": "lakshadweep.jpg", + "image": "lakshadweep.webp", "svg": "Lakshadweep.svg", "wikiLink": "https://en.wikipedia.org/wiki/Lakshadweep", "official_website": "https://lakshadweep.gov.in", @@ -458,10 +458,10 @@ "dance": "Cham Dance", "festival": "Hemis Festival", "description": "Cham Dance is a mask dance performed during Buddhist festivals in Ladakh.", - "image": "ladakh.jpg", + "image": "ladakh.webp", "svg": "Ladakh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Ladakh", - "official_website": "https://ladakh.nic.in", + "official_website": "https://nicladakh.nic.in", "isActive": true }, { @@ -471,10 +471,10 @@ "dance": "Garadi Dance", "festival": "Pondicherry Heritage Festival", "description": "Garadi Dance is a traditional dance form of Puducherry, performed during temple festivals.", - "image": "puducherry.jpg", + "image": "puducherry.webp", "svg": "Pondicherry.svg", "wikiLink": "https://en.wikipedia.org/wiki/Puducherry", "official_website": "https://www.py.gov.in", "isActive": true } -] +] \ No newline at end of file diff --git a/src/assets/screenshots/alphabets/board.png b/src/assets/screenshots/alphabets/board.png new file mode 100644 index 0000000..3bc3d98 Binary files /dev/null and b/src/assets/screenshots/alphabets/board.png differ diff --git a/src/assets/screenshots/alphabets/index.png b/src/assets/screenshots/alphabets/index.png new file mode 100644 index 0000000..61b0d11 Binary files /dev/null and b/src/assets/screenshots/alphabets/index.png differ diff --git a/src/assets/screenshots/alphabets/playground.png b/src/assets/screenshots/alphabets/playground.png new file mode 100644 index 0000000..20fb2c7 Binary files /dev/null and b/src/assets/screenshots/alphabets/playground.png differ diff --git a/src/assets/screenshots/varnmala/alphabets.png b/src/assets/screenshots/varnmala/alphabets.png new file mode 100644 index 0000000..963c1ec Binary files /dev/null and b/src/assets/screenshots/varnmala/alphabets.png differ diff --git a/src/assets/screenshots/varnmala/english.png b/src/assets/screenshots/varnmala/english.png new file mode 100644 index 0000000..b6cfa53 Binary files /dev/null and b/src/assets/screenshots/varnmala/english.png differ diff --git a/src/assets/screenshots/varnmala/index.png b/src/assets/screenshots/varnmala/index.png new file mode 100644 index 0000000..4713e07 Binary files /dev/null and b/src/assets/screenshots/varnmala/index.png differ diff --git a/src/assets/screenshots/varnmala/reader.png b/src/assets/screenshots/varnmala/reader.png new file mode 100644 index 0000000..625f89a Binary files /dev/null and b/src/assets/screenshots/varnmala/reader.png differ diff --git a/src/assets/screenshots/varnmala/typing.png b/src/assets/screenshots/varnmala/typing.png new file mode 100644 index 0000000..304c95c Binary files /dev/null and b/src/assets/screenshots/varnmala/typing.png differ diff --git a/src/assets/styles/about.css b/src/assets/styles/about.css index d42f679..c9dce34 100644 --- a/src/assets/styles/about.css +++ b/src/assets/styles/about.css @@ -2,8 +2,8 @@ display: block; padding: 1rem; - > .moto { + & .moto { color: #3a8657; - font-size: 3rem; + font-size: 2rem; } } diff --git a/src/assets/styles/alphabets/[alphabet]/board.css b/src/assets/styles/alphabets/[alphabet]/board.css new file mode 100644 index 0000000..f831cd6 --- /dev/null +++ b/src/assets/styles/alphabets/[alphabet]/board.css @@ -0,0 +1,136 @@ +.container__alphabets { + display: flex; + flex-direction: column; + width: 100%; + height: calc(100vh - 4rem); + overflow-y: scroll; + gap: 1rem; + align-items: flex-start; + justify-content: flex-start; + padding: 1rem; + + & .head { + display: flex; + gap: 1rem; + align-items: center; + width: 100%; + justify-content: space-between; + padding: 1rem; + border-radius: 0.5rem; + font-weight: 600; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + + & .back { + margin-bottom: 0 !important; + } + } + + & .flip__all__button { + background-color: var(--background); + border: none; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + font-weight: 200; + margin: 1rem 0; + cursor: pointer; + transition: all 0.3s ease; + align-self: flex-end; + } + + & .flip__all__button:hover { + transform: translateY(-2px); + } + + & .flip__all__button.active { + transform: scale(0.95); + background-color: color-mix(in srgb, var(--primary) 70%, black 30%); + } + + & .container__alphabet { + display: grid; + gap: 2rem; + container-type: inline-size; + container-name: layout; + font-family: "atkinson"; + position: relative; + max-width: 2000px; + margin-inline: auto; + width: 100%; + } + + & .container__alphabet::before { + content: ''; + position: absolute; + inset: 0; + background: radial-gradient(circle at 50% 0%, + color-mix(in srgb, var(--primary) 5%, transparent), + transparent 70%); + pointer-events: none; + z-index: -1; + } + + & .container__alphabet .list { + display: grid; + gap: 2rem; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); + padding: 1rem; + position: relative; + } + + /* Animation for list items */ + & .container__alphabet .list>* { + opacity: 0; + transform: translateY(20px); + animation: slideUp 0.6s ease forwards; + } + + & .container__alphabet .list>*:nth-child(1n) { + animation-delay: 0.1s; + } + + & .container__alphabet .list>*:nth-child(2n) { + animation-delay: 0.2s; + } + + & .container__alphabet .list>*:nth-child(3n) { + animation-delay: 0.3s; + } + + & .container__alphabet .list>*:nth-child(4n) { + animation-delay: 0.4s; + } + + @keyframes slideUp { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } + } + + @container layout (width <=1200px) { + .container__alphabet { + padding: 1.5rem; + } + + .container__alphabet .list { + gap: 1.5rem; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); + } + } + + @container layout (width <=768px) { + .container__alphabet { + padding: 1rem; + } + + .container__alphabet .list { + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); + } + } +} \ No newline at end of file diff --git a/src/assets/styles/alphabets/[alphabet]/playground.css b/src/assets/styles/alphabets/[alphabet]/playground.css new file mode 100644 index 0000000..74c09c8 --- /dev/null +++ b/src/assets/styles/alphabets/[alphabet]/playground.css @@ -0,0 +1,154 @@ +:root { + --letter__txt--2: blueviolet; + --spelling__txt--3: palevioletred; + --steps: 10; + --steps-desc: 30; +} + +.container__typing { + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: 35% auto auto; + grid-template-areas: + "letter content__display" + "spelling spelling" + "description description"; + grid-auto-flow: row; + height: calc(100vh - 10rem); + width: auto; + font-size: clamp(0.8rem, 1vw, 1.2rem); + place-items: center; + will-change: contents; + + & .letter { + grid-area: letter; + font-size: clamp(10em, 20vw, 25em); + color: var(--letter__txt--2); + padding: 0; + transition: color 0.5s ease-in; + text-align: center; + line-height: 1; + width: 100%; + } + + & .content__display { + grid-area: content__display; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + overflow: hidden; + padding: 1rem; + } + + & .content__spelling { + font-size: 5.5rem; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + font-weight: bold; + text-align: center; + } + + & .emoji { + font-size: clamp(6em, 15vw, 18em); + } + + & .image__container { + width: 100%; + height: 100%; + display: none; + justify-content: center; + align-items: center; + overflow: hidden; + } + + & .image__container img { + max-width: 100%; + max-height: 100%; + object-fit: contain; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + & .animation { + animation: + typing 1.5s steps(var(--steps, 10)) forwards, + blink 0.5s step-end infinite alternate; + width: 0; + overflow: hidden; + white-space: nowrap; + } + + & .spelling { + grid-area: spelling; + grid-column: 1/3; + grid-row: 2/3; + width: 0; + max-width: fit-content; + white-space: nowrap; + overflow: hidden; + border-right: 3px solid; + font-family: monospace; + font-size: clamp(4em, 10vw, 12em); + transition: all 0.5s ease-in-out; + color: var(--spelling__txt--3); + margin: 0 auto; + } + + & .spelling:not(.animation) { + width: auto; + } + + & .description { + grid-area: description; + width: 100%; + text-align: center; + font-family: monospace; + font-size: clamp(1.5em, 3vw, 2em); + padding: 1rem; + margin-top: 2rem; + color: var(--spelling__txt--3); + min-height: 2em; + overflow: hidden; + } + + & .description.animation { + width: 0; + display: inline-block; + max-width: fit-content; + margin: 0 auto; + border-right: 3px solid; + animation: + typing 2s steps(var(--steps-desc, 30)) forwards, + blink 0.5s step-end infinite alternate; + } + + & .description:not(.animation) { + width: auto; + border-right: none; + } + + & .description:empty { + border-right: none; + } +} + +@keyframes typing { + from { + width: 0; + } + + to { + width: 100%; + } +} + +@keyframes blink { + 50% { + border-color: transparent; + } +} \ No newline at end of file diff --git a/src/assets/styles/alphabets/index.css b/src/assets/styles/alphabets/index.css new file mode 100644 index 0000000..79e2e4f --- /dev/null +++ b/src/assets/styles/alphabets/index.css @@ -0,0 +1,135 @@ +.container__alphabets { + padding: 2rem 1.5rem; + max-width: 1400px; + margin: 0 auto; + + & .alphabets__header { + text-align: center; + margin-bottom: 2rem; + } + + & .alphabets__header h1 { + font-size: clamp(2.5rem, 5vw, 4rem); + font-weight: 800; + background: linear-gradient(135deg, var(--primary), var(--primary-light)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + margin-bottom: 1rem; + } + + & .subtitle { + color: var(--secondary); + font-size: 1.1rem; + max-width: 600px; + margin: 0 auto; + } + + & .list__alphabets { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1rem; + padding: 0; + list-style: none; + } + + & .card { + opacity: 0; + animation: fadeInUp 0.4s ease forwards; + } + + & .card__link { + display: block; + text-decoration: none; + background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%)); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 2rem; + transition: all 0.3s ease; + height: 100%; + overflow: hidden; + } + + & .card__link:hover { + transform: translateY(-5px); + box-shadow: + 0 20px 30px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(var(--primary-rgb, 44, 62, 80), 0.1); + } + + & .card__content { + position: relative; + } + + & .category__title { + font-size: 1.5rem; + font-weight: 700; + color: var(--text); + margin: 0 0 1rem 0; + transition: color 0.3s ease; + } + + & .category__description { + color: var(--secondary); + font-size: 0.95rem; + line-height: 1.6; + margin: 0; + } + + & .card__arrow { + position: absolute; + top: 0; + right: 0; + font-size: 1.5rem; + color: var(--primary); + opacity: 0; + transition: all 0.3s ease; + transform: translateX(-10px); + } + + & .card__link:hover .category__title { + background: linear-gradient(135deg, var(--primary), var(--primary-light)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } + + & .card__link:hover .card__arrow { + opacity: 1; + transform: translateX(0); + } +} + + +@keyframes fadeInUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +@media (max-width: 768px) { + .container__alphabets { + padding: 1rem; + + & .list__alphabets { + grid-template-columns: 1fr; + gap: 1rem; + } + + & .card__link { + padding: 1.5rem; + } + + & .card__actions { + flex-direction: column; + gap: 0.5rem; + } + + & .btn { + width: 100%; + font-size: 1.1rem; + padding: 0.75rem 1rem; + } + } +} \ No newline at end of file diff --git a/src/assets/styles/crossword.css b/src/assets/styles/crossword.css new file mode 100644 index 0000000..ee9652d --- /dev/null +++ b/src/assets/styles/crossword.css @@ -0,0 +1,654 @@ +:root { + /* Color Palette */ + --primary-color: #6366f1; + --secondary-color: #06b6d4; + --accent1-color: #f87171; + --accent2-color: #60a5fa; + --accent3-color: #fbbf24; + --accent4-color: #34d399; + --accent5-color: #ec4899; + --accent6-color: #818cf8; + --accent7-color: #f97316; + --accent8-color: #38bdf8; + + /* Text & Background */ + --text-color: #1e293b; + --text-light: #64748b; + --bg-color: #f8fafc; + --bg-dark: #0f172a; + + /* Effects */ + --border-radius: 16px; + --box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); + --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + /* Stats */ + --stats-button-bg: #e2e8f0; + --stats-button-text: #334155; + --stats-button-border: #cbd5e1; + --stats-button-hover: #818cf8; +} + +/* Main Layout */ +.puzzle-container { + position: relative; + width: 100%; + max-width: 800px; + margin: 0 auto; + min-height: 100vh; +} + +/* Settings Components */ +.settings-trigger { + position: fixed; + top: 82px; + right: 32px; + width: 60px; + height: 60px; + border-radius: 50%; + background: var(--primary-color); + border: none; + cursor: pointer; + box-shadow: var(--box-shadow); + transition: var(--transition); + z-index: 1000; + display: flex; + align-items: center; + justify-content: center; + + svg { + width: 28px; + height: 28px; + color: white; + } + + &:hover { + background: var(--accent6-color); + transform: scale(1.05) rotate(45deg); + } + + &.active { + transform: scale(1) rotate(180deg); + background: var(--accent1-color); + } +} + +/* Default Slide-in Settings Panel (Desktop) */ +.settings-panel { + position: fixed; + top: 180px; + right: -320px; + width: 220px; + background: #ffffff; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow); + padding: 10px; + z-index: 999; + transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); + border-image: linear-gradient(45deg, var(--primary-color), var(--accent2-color), var(--accent4-color)) 1; + + * { + color: var(--text-color); + } + + .controls-group { + display: flex; + flex-direction: column; + gap: 16px; + } + + &:not(.active) { + opacity: 0; + pointer-events: none; + transform: translateX(0); + } + + &.active { + opacity: 1; + pointer-events: auto; + transform: translateX(-340px); + } +} + +/* Control Buttons */ +.control-btn { + background: var(--primary-color); + color: white; + border: none; + border-radius: var(--border-radius); + padding: 14px 24px; + cursor: pointer; + transition: var(--transition); + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + font-weight: 600; + font-size: 1rem; + letter-spacing: 0.01em; + + &:hover { + background: var(--accent6-color); + transform: translateY(-3px); + } + + &:active { + transform: translateY(0); + } + + &#newPuzzleBtn { + background: var(--secondary-color); + &:hover { background: var(--accent7-color); } + } + + &#resetBtn { + background: var(--accent4-color); + &:hover { background: var(--accent6-color); } + } + + &#solutionBtn { + background: var(--accent1-color); + &:hover { background: var(--accent5-color); } + } + + &#clearBtn { + background: var(--accent5-color); + &:hover { background: var(--accent1-color); } + &::before { content: "🗑️"; margin-right: 8px; } + } + + &#themeToggle { + background: var(--accent6-color); + &:hover { background: var(--primary-color); } + } +} + +/* Puzzle Grid */ +.grid { + display: grid; + gap: 12px; + padding: 28px; + border-radius: var(--border-radius); + box-shadow: var(--box-shadow), 0 0 0 15px rgba(99, 102, 241, 0.08); + margin: 0 auto; + width: 100%; + max-width: 600px; + aspect-ratio: 1; + border: 6px solid #f1f5f9; + + .cell { + aspect-ratio: 1; + display: flex; + justify-content: center; + align-items: center; + background: #f8fafc; + border: 3px solid #e2e8f0; + border-radius: 12px; + font-size: 24px; + font-weight: bold; + color: var(--text-color); + transition: var(--transition); + cursor: pointer; + + &:hover { + transform: translateY(-3px); + background: #eef2ff; + border-color: var(--primary-color); + } + + &.selected { + background: var(--primary-color); + color: white; + transform: scale(1.08); + box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4); + animation: pulse 1.5s infinite alternate; + } + + &[class*="word-color-"] { + color: white !important; + border-color: transparent !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + } + + &.word-color-1 { background-color: var(--accent7-color); } + &.word-color-2 { background-color: var(--secondary-color); } + &.word-color-3 { background-color: var(--accent1-color); } + &.word-color-4 { background-color: var(--accent4-color); } + &.word-color-5 { background-color: var(--accent5-color); } + &.word-color-6 { background-color: var(--accent6-color); } + &.word-color-7 { background-color: var(--accent3-color); } + &.word-color-8 { background-color: var(--accent8-color); } + } +} + +/* Word List & Details */ +details { + width: 100%; + border-radius: var(--border-radius); + background-color: rgba(99, 102, 241, 0.08); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); + margin: 20px 0; + border-left: 4px solid var(--primary-color); + + /* Default open state styles */ + background-color: rgba(99, 102, 241, 0.05); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); + + summary { + padding: 16px 24px; + cursor: pointer; + font-weight: 600; + display: flex; + align-items: center; + gap: 12px; + position: relative; + border-bottom: 2px solid rgba(99, 102, 241, 0.1); + margin-bottom: 12px; + + /* Custom arrow SVG using pseudo-element */ + &::after { + content: ""; + position: absolute; + right: 24px; + width: 20px; + height: 20px; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + transition: var(--transition); + transform: rotate(180deg); /* Arrow points up when open */ + } + + /* Remove default arrow */ + &::-webkit-details-marker { + display: none; + } + } + + /* Closed state styles */ + &:not([open]) { + background-color: rgba(99, 102, 241, 0.08); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); + + summary { + border-bottom: none; + margin-bottom: 0; + + &::after { + transform: rotate(0deg); /* Arrow points down when closed */ + } + } + } +} + +.word-list { + display: flex; + flex-wrap: wrap; + gap: 12px; + padding: 16px; + + .word { + padding: 8px 16px; + border-radius: 25px; + font-weight: 600; + color: white; + transition: var(--transition); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + background-color: var(--accent6-color); + + &.found { + text-decoration: line-through; + opacity: 0.7; + transform: scale(0.97); + } + } +} + +/* Stats Components */ +.stats-container { + display: flex; + gap: 24px; + margin: 32px 0; + justify-content: center; + + .stats-button { + background: linear-gradient(135deg, var(--primary-color), var(--accent6-color)); + border: 2px solid transparent; + border-radius: var(--border-radius); + padding: 14px 28px; + font-weight: 600; + transition: var(--transition); + color: white; + position: relative; + overflow: hidden; + + &:hover { + transform: translateY(-2px); + box-shadow: var(--box-shadow); + background: linear-gradient(135deg, var(--accent2-color), var(--accent8-color)); + } + + &:nth-child(1) { background: var(--accent4-color); } + &:nth-child(2) { background: var(--secondary-color); } + &:nth-child(3) { background: linear-gradient(135deg, var(--accent5-color), var(--accent3-color)); } + &:nth-child(4) { background: linear-gradient(135deg, var(--accent2-color), var(--accent8-color)); } + } +} + +/* Animations */ +/*@keyframes pulse { + 0% { transform: scale(1.08); } + 100% { transform: scale(1.14); } +} + +@keyframes darkPulse { + 0% { transform: scale(1.08); } + 100% { transform: scale(1.14); } +}*/ + +/* Settings backdrop for mobile */ +.settings-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(15, 23, 42, 0.7); + /*backdrop-filter: blur(3px);*/ + z-index: 998; + opacity: 0; + visibility: hidden; + /*transition: all 0.3s ease;*/ + display: none; /* Hidden by default in desktop mode */ + + &.active { + opacity: 1; + visibility: visible; + } +} + +/* Responsive Styles */ +@media (max-width: 768px) { + /* Show settings backdrop in mobile */ + /*.settings-backdrop { + display: block; + } + */ + /* Pop-up settings in mobile view (removed slide animation) */ + .settings-panel { + position: fixed; + top: 50%; + left: 50%; + right: auto; + /*transform: translate(-50%, -50%) scale(0.9);*/ + width: 280px; + padding: 16px; + opacity: 0; + visibility: hidden; + pointer-events: none; + border: 2px solid var(--primary-color); + /* Pop-up animation for mobile */ + /*transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;*/ + + .settings-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 14px; + padding-bottom: 10px; + border-bottom: 2px solid var(--accent2-color); + } + + .settings-title { + font-weight: 700; + font-size: 1.1rem; + color: var(--primary-color); + } + + .close-settings { + background: transparent; + border: none; + cursor: pointer; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + + &:hover { + background: rgba(99, 102, 241, 0.1); + } + + svg { + width: 20px; + height: 20px; + color: var(--accent1-color); + } + } + + .controls-group { + gap: 12px; + } + + &.active { + opacity: 1; + visibility: visible; + pointer-events: auto; + transform: translate(-50%, -50%) scale(1); + } + } + + .grid { + padding: 18px; + max-width: 100%; + gap: 8px; + + .cell { + font-size: 1.3rem; + border-width: 2px; + border-radius: 10px; + } + } + + .settings-trigger { + top: 70px; + right: 25px; + width: 50px; + height: 50px; + + svg { + width: 24px; + height: 24px; + } + } + + .control-btn { + padding: 12px 16px; + font-size: 0.9rem; + } + + .stats-container { + flex-wrap: wrap; + justify-content: center; + gap: 16px; + } + + .stats-button { + min-width: 80px; + padding: 12px 20px; + font-size: 0.9rem; + } +} + +@media (max-width: 480px) { + .settings-trigger { + top: 72px; + right: 12px; + width: 45px; + height: 45px; + } + + .settings-panel { + width: 85%; + max-width: 260px; + padding: 14px; + } + + .stats-container { + flex-wrap: wrap; + justify-content: center; + gap: 10px; + } + + .stats-button { + padding: 10px 16px; + font-size: 0.85rem; + min-width: 70px; + } + + .control-btn { + padding: 10px 14px; + font-size: 0.85rem; + } + + details summary { + padding: 12px 16px; + + &::after { + right: 16px; + width: 16px; + height: 16px; + } + } + + .word-list { + gap: 8px; + padding: 12px; + + .word { + padding: 6px 12px; + font-size: 0.9rem; + } + } + + .grid { + padding: 12px; + gap: 6px; + + .cell { + font-size: 1.4rem; + border-width: 2px; + border-radius: 8px; + } + } +} + +@media (max-width: 360px) { + .grid { + padding: 8px; + gap: 4px; + + .cell { + font-size: 1.3rem; + border-width: 1px; + border-radius: 6px; + } + } + + .settings-trigger { + top: 72px; + right: 10px; + width: 40px; + height: 40px; + + svg { + width: 20px; + height: 20px; + } + } + + .settings-panel { + width: 90%; + max-width: 240px; + padding: 12px; + } + + .control-btn { + padding: 8px 12px; + font-size: 0.8rem; + } + + .stats-button { + padding: 8px 12px; + font-size: 0.8rem; + min-width: 65px; + } + + .word-list .word { + padding: 5px 10px; + font-size: 0.8rem; + } +} + +/* Dark Theme */ +.puzzle-container[data-theme="dark"] { + --primary-color: #a78bfa; + --secondary-color: #2dd4bf; + --text-color: #f8fafc; + --stats-button-bg: #1e293b; + --stats-button-text: #e2e8f0; + --stats-button-border: #334155; + --stats-button-hover: #a78bfa; + + .grid { + background: #1e293b; + border-color: #334155; + + .cell { + background: #334155; + border-color: #475569; + color: #f1f5f9; + + &:hover { background: var(--accent1-color); } + &.selected { + background: var(--primary-color); + box-shadow: 0 8px 20px rgba(167, 139, 250, 0.4); + animation: darkPulse 1.5s infinite alternate; + } + } + } + + details { + background-color: rgba(167, 139, 250, 0.15); + border-left-color: var(--primary-color); + + summary::after { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + } + } + + .settings-panel { + background: #1e293b; + + @media (min-width: 769px) { + border-image: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent4-color)) 1; + } + + @media (max-width: 768px) { + border-color: var(--primary-color); + + .settings-title { + color: var(--primary-color); + } + + .close-settings svg { + color: var(--accent1-color); + } + } + } + + .settings-backdrop { + background: rgba(0, 0, 0, 0.7); + } +} \ No newline at end of file diff --git a/src/assets/styles/dialog.css b/src/assets/styles/dialog.css index fe42cc0..3d950db 100644 --- a/src/assets/styles/dialog.css +++ b/src/assets/styles/dialog.css @@ -119,3 +119,13 @@ dialog[closing]::backdrop { background: rgba(0, 0, 0, 0); } } + +@keyframes fadeOut { + from { + background: rgba(0, 0, 0, 0.5); + } + + to { + background: rgba(0, 0, 0, 0); + } +} diff --git a/src/assets/styles/english.css b/src/assets/styles/english.css deleted file mode 100644 index 9a2e65c..0000000 --- a/src/assets/styles/english.css +++ /dev/null @@ -1,97 +0,0 @@ -.container__hindi { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - width: auto; - font-size: 1rem; - place-items: center; - will-change: contents; -} - -.letter { - font-size: min(100vw, 100vh); - line-height: 1; - text-align: center; - margin: 0; - padding: 0; - color: var(--letter__txt--2); - transition: color 0.5s ease-in; -} - -/* Controls styles */ -.controls { - position: relative; - background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%); - padding: 1rem; - z-index: 100; - display: flex; - justify-content: space-around; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - color: var(--text); -} - -.control-group { - display: flex; - align-items: center; - gap: 1rem; - accent-color: var(--primary); -} - -.control-group label { - font-weight: bold; - color: var(--text); -} - -.control-group select, -.control-group button { - padding: 0.5rem; - border-radius: 4px; - border: 1px solid var(--border); - background-color: var(--background); - color: var(--text); -} - -.control-group button { - cursor: pointer; - transition: all 0.3s; -} - -.control-group button:hover, -.control-group select:hover { - background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%); - border-color: var(--primary); -} - -/* Background styles */ -.bg-gradient1 { - background: linear-gradient(45deg, #ff6b6b, #4ecdc4); -} - -.bg-gradient2 { - background: linear-gradient(45deg, #a8e6cf, #dcedc1); -} - -.bg-pattern1 { - background-image: repeating-linear-gradient(45deg, - rgba(0, 0, 0, 0.1) 0px, - rgba(0, 0, 0, 0.1) 2px, - transparent 2px, - transparent 4px); -} - -.no-background { - background: none !important; -} - -@keyframes letterPop { - 0% { - transform: scale(0.8); - opacity: 0.5; - } - - 100% { - transform: scale(1); - opacity: 1; - } -} \ No newline at end of file diff --git a/src/assets/styles/header.css b/src/assets/styles/header.css index 0c0ad15..40c845b 100644 --- a/src/assets/styles/header.css +++ b/src/assets/styles/header.css @@ -10,14 +10,15 @@ border-bottom: 1px solid var(--border); height: var(--header-h); padding: 0 1.5rem; - display: flex; + display: grid; + grid-template-columns: 1fr auto 1fr; align-items: center; - justify-content: space-between; .header__brand { display: flex; align-items: center; gap: 0.75rem; + justify-self: start; .logo { width: 2rem; @@ -33,6 +34,7 @@ .caption { text-align: center; + justify-self: center; h1 { font-size: 1.25rem; @@ -48,14 +50,27 @@ display: flex; gap: 1rem; align-items: center; + justify-self: end; justify-content: flex-end; } } +[slot="header-right"] { + display: flex; + align-items: center; + max-width: 33vw; + flex-wrap: nowrap; + justify-content: flex-end; +} + +.controls { + flex-shrink: 0; +} + .switch { background-color: black; height: 2rem; width: 2rem; border-radius: 50%; cursor: pointer; -} +} \ No newline at end of file diff --git a/src/assets/styles/letter.css b/src/assets/styles/letter.css deleted file mode 100644 index f0b9f31..0000000 --- a/src/assets/styles/letter.css +++ /dev/null @@ -1,103 +0,0 @@ -.controls { - position: relative; - background-color: rgba(255, 255, 255, 0.95); - padding: 1rem; - z-index: 100; - display: flex; - justify-content: space-around; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); - color: black; -} - -.control-group { - display: flex; - align-items: center; - gap: 1rem; - accent-color: purple; - - label { - font-weight: bold; - } - - select, - button { - padding: 0.5rem; - border-radius: 4px; - border: 1px solid #ccc; - } - - button { - cursor: pointer; - background: #fff; - transition: background-color 0.3s; - } - - button:hover { - background: #f0f0f0; - } -} - -.section__board { - display: grid; - grid-auto-flow: row; - grid-gap: 4px; - margin-block: 1rem; - - & .letter__part { - min-height: 100vh; - display: grid; - place-items: center; - grid-auto-rows: max-content; - - & mark { - color: grey; - font-size: 1rem; - } - - .letter__big { - font-size: 56svmin; - font-weight: bold; - transition: all 0.3s; - animation: letterPop 0.3s ease-out; - } - } - - & .meaning__part { - padding: 1rem; - background-color: rgb(43 26 26); - display: grid; - grid-template-columns: 5rem 30% max-content; - grid-gap: 4px; - grid-auto-flow: column; - - & .meaning-content { - max-width: 800px; - margin: 0 auto; - line-height: 1.6; - } - } -} - -/* Gradient backgrounds */ -.bg-gradient1 { - background: linear-gradient(45deg, #ff6b6b, #4ecdc4); -} - -.bg-gradient2 { - background: linear-gradient(45deg, #a8e6cf, #dcedc1); -} - -.no-background { - background-image: none; - background-color: initial; -} - -.bg-pattern1 { - background-image: repeating-linear-gradient( - 45deg, - rgba(0, 0, 0, 0.1) 0px, - rgba(0, 0, 0, 0.1) 2px, - transparent 2px, - transparent 4px - ); -} diff --git a/src/assets/styles/map/map.css b/src/assets/styles/map/map.css index 2adce2b..ba13f1e 100644 --- a/src/assets/styles/map/map.css +++ b/src/assets/styles/map/map.css @@ -9,10 +9,9 @@ position: relative; & svg { - width: 100%; - height: auto; max-width: 100%; } + .tooltip { position: absolute; background-color: rgba(0, 0, 0, 0.8); @@ -23,6 +22,7 @@ pointer-events: none; z-index: 500; display: none; + transform: translate(-300%, -200%); } & path { @@ -37,4 +37,4 @@ fill: #ffa500; transform: scale(1); } -} +} \ No newline at end of file diff --git a/src/assets/styles/map/popup.css b/src/assets/styles/map/popup.css index e7d835f..b8453f4 100644 --- a/src/assets/styles/map/popup.css +++ b/src/assets/styles/map/popup.css @@ -31,7 +31,7 @@ &__image { width: 100%; height: auto; - max-height: 200px; + max-height: 220px; object-fit: cover; border-radius: 8px; margin: 10px 0; diff --git a/src/assets/styles/map/state.css b/src/assets/styles/map/state.css index f5cacce..ce4d033 100644 --- a/src/assets/styles/map/state.css +++ b/src/assets/styles/map/state.css @@ -11,16 +11,6 @@ --spacing-unit: 1rem; } -/* Main Content Wrapper */ -main { - max-width: 1400px; - margin: 0 auto; - padding: calc(var(--spacing-unit) * 2); - display: flex; - flex-direction: column; - gap: calc(var(--spacing-unit) * 3); -} - /* Header Container */ .container_header { text-align: center; @@ -28,14 +18,14 @@ main { background-color: var(--primary-bg); border-radius: 8px; box-shadow: var(--shadow-md); +} - h1 { - font-size: 2.5rem; - color: var(--primary-text); - font-weight: 700; - letter-spacing: -0.5px; - margin: 0; - } +.container_header h1 { + font-size: 2.5rem; + color: var(--primary-text); + font-weight: 700; + letter-spacing: -0.5px; + margin: 0; } /* Main Container */ @@ -51,23 +41,23 @@ main { /* SVG Container (Left Side) */ #state-svg-container { flex: 0.8; - padding: calc(var(--spacing-unit) * 2); + padding: calc(var(--spacing-unit) * 1); background-color: var(--secondary-bg); border-radius: 8px; box-shadow: var(--shadow-md); +} - h3 { - margin-bottom: calc(var(--spacing-unit) * 1.5); - color: var(--primary-text); - font-size: 1.5rem; - text-align: center; - } +#state-svg-container h3 { + margin-bottom: calc(var(--spacing-unit) * 1.5); + color: var(--primary-text); + font-size: 1.5rem; + text-align: center; +} - #state-svg { - width: 100%; - height: auto; - min-height: 300px; - } +#state-svg { + width: 100%; + height: auto; + min-height: 300px; } /* Right Content */ @@ -76,31 +66,31 @@ main { display: flex; flex-direction: column; gap: calc(var(--spacing-unit) * 2); +} - img { - width: 100%; - height: auto; - object-fit: cover; - border-radius: 8px; - box-shadow: var(--shadow-md); - } +.right-content img { + width: 100%; + height: auto; + object-fit: cover; + border-radius: 8px; + box-shadow: var(--shadow-md); +} - .content-text { - display: flex; - flex-direction: column; - gap: calc(var(--spacing-unit) * 1.5); - - a { - color: var(--accent-color); - text-decoration: none; - font-weight: 500; - margin-top: var(--spacing-unit); - - &:hover { - text-decoration: underline; - } - } - } +.content-text { + display: flex; + flex-direction: column; + gap: calc(var(--spacing-unit) * 1.5); +} + +.content-text a { + color: var(--accent-color); + text-decoration: none; + font-weight: 500; + margin-top: var(--spacing-unit); +} + +.content-text a:hover { + text-decoration: underline; } /* Info Table */ @@ -111,37 +101,62 @@ main { border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-md); +} - th, - td { - padding: calc(var(--spacing-unit) * 1.2); - border: 1px solid var(--border-color); - color: rgba(46, 41, 55, 0.911); - } +.info-table th, .info-table td { + padding: calc(var(--spacing-unit) * 1.2); + border: 1px solid var(--border-color); + color: rgba(46, 41, 55, 0.911); +} - th { - background: var(--accent-color); - color: black; - text-align: left; - font-size: 1.3rem; - letter-spacing: 0.5px; - } +.info-table th { + background: var(--accent-color); + color: rgb(10, 10, 10); /* Change header text color to white */ + text-align: left; + font-size: 1.4rem; + letter-spacing: 0.5px; +} - tr { - &:nth-child(even) { - background-color: var(--secondary-bg); - } - &:hover { - background-color: color-mix(in srgb, var(--secondary-bg) 80%, var(--accent-color) 20%); - transition: background-color 0.2s ease; - } - } +/* Style for the official website link */ +.info-table th a { + color: white; /* Change link color to white */ + text-decoration: none; + font-weight: 500; + font-size: 1.2rem; +} - td:first-child { - font-weight: 600; - color: var(--primary-text); - width: 30%; - } +.info-table th a:hover { + text-decoration: underline; /* Add underline on hover */ + opacity: 0.8; +} + +.info-table tr:nth-child(even) { + background-color: var(--secondary-bg); +} + +.info-table tr:hover { + background-color: color-mix(in srgb, var(--secondary-bg) 80%, var(--accent-color) 20%); + transition: background-color 0.2s ease; +} + +.info-table td:first-child { + font-weight: 600; + color: var(--primary-text); + width: 30%; +} + +/* Quick Facts Link */ +.info-table .quick-facts-link { + color: #d24d4d; + font-weight: 500; + text-decoration: none; + margin-left: 10px; + display: inline-block; +} + +.info-table .quick-facts-link:hover { + text-decoration: underline; + opacity: 0.8; } /* Error State */ @@ -161,12 +176,11 @@ main { font-size: 2rem; } - #state-svg-container, - .right-content { + #state-svg-container, .right-content { flex: 1; } .info-table { font-size: 0.9rem; } -} +} \ No newline at end of file diff --git a/src/assets/styles/typing.css b/src/assets/styles/typing.css deleted file mode 100644 index 469c14f..0000000 --- a/src/assets/styles/typing.css +++ /dev/null @@ -1,64 +0,0 @@ -/* following :root block added by css color collector */ -:root { - --letter__txt--2: blueviolet; - --spelling__txt--3: palevioletred; - --steps: 10; -} - -.container__typing { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: 40% auto; - grid-template-areas: "letter emoji" "spelling spelling"; - grid-auto-flow: row; - height: 100vh; - width: auto; - font-size: clamp(0.8rem, 1vw, 1.2rem); - place-items: center; - will-change: contents; - - & .letter { - grid-area: letter; - font-size: clamp(10em, 20vw, 25em); - color: var(--letter__txt--2); - padding-left: 10vh; - transition: color 0.5s ease-in; - } - - & .emoji { - grid-area: emoji; - font-size: clamp(6em, 15vw, 18em); - } - - & .animation { - animation: - typing 1s steps(var(--steps, 10)), - blink 0.5s step-end infinite alternate; - } - - & .spelling { - grid-area: spelling; - grid-column: 1/3; - grid-row: 2/3; - width: clamp(6ch, 50vw, 12ch); - white-space: nowrap; - overflow: hidden; - border-right: 3px solid; - font-family: monospace; - font-size: clamp(4em, 10vw, 12em); - transition: all 0.5s ease-in-out; - color: var(--spelling__txt--3); - } -} - -@keyframes typing { - from { - width: 0; - } -} - -@keyframes blink { - 50% { - border-color: transparent; - } -} diff --git a/src/assets/styles/varnmala.css b/src/assets/styles/varnmala/alphabet.css similarity index 96% rename from src/assets/styles/varnmala.css rename to src/assets/styles/varnmala/alphabet.css index 3b2b1aa..4216eba 100644 --- a/src/assets/styles/varnmala.css +++ b/src/assets/styles/varnmala/alphabet.css @@ -30,9 +30,10 @@ color: var(--background); } -.container__varnmala { +.container__alphabets { + #english, & #hindi { scroll-margin-top: calc(var(--header-height) + 80px); } -} +} \ No newline at end of file diff --git a/src/assets/styles/barahkhadi/consonant.css b/src/assets/styles/varnmala/barahkhadi/consonant.css similarity index 100% rename from src/assets/styles/barahkhadi/consonant.css rename to src/assets/styles/varnmala/barahkhadi/consonant.css diff --git a/src/assets/styles/barahkhadi/index.css b/src/assets/styles/varnmala/barahkhadi/index.css similarity index 99% rename from src/assets/styles/barahkhadi/index.css rename to src/assets/styles/varnmala/barahkhadi/index.css index 9b35e2e..60a2484 100644 --- a/src/assets/styles/barahkhadi/index.css +++ b/src/assets/styles/varnmala/barahkhadi/index.css @@ -1,6 +1,6 @@ .container__barahkhadi { padding: 1rem; - height: 100%; + height: calc(100vh - 5rem); overflow-y: auto; & .consonants__rows { diff --git a/src/assets/styles/varnmala/english.css b/src/assets/styles/varnmala/english.css new file mode 100644 index 0000000..d9433b5 --- /dev/null +++ b/src/assets/styles/varnmala/english.css @@ -0,0 +1,179 @@ +.container__hindi { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + width: auto; + font-size: 1rem; + place-items: center; + will-change: contents; +} + +.letter { + font-size: min(100vw, 100vh); + line-height: 1; + text-align: center; + margin: 0; + padding: 0; + color: var(--letter__txt--2); + transition: color 0.5s ease-in; +} + +.control-group button:hover, +.control-group select:hover { + background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%); + border-color: var(--primary); + transform: translateY(-1px); +} + +/* Container styles */ +.container__english { + & .letter { + font-size: min(100vw, 100vh); + line-height: 1; + text-align: center; + margin: 0; + padding: 0; + color: var(--letter__txt--2); + transition: color 0.5s ease-in; + } + + /* Background styles */ + & .bg-gradient1 { + background: linear-gradient(45deg, #ff6b6b, #4ecdc4); + } + + & .bg-gradient2 { + background: linear-gradient(45deg, #a8e6cf, #dcedc1); + } + + & .bg-pattern1 { + background-image: repeating-linear-gradient(45deg, + rgba(0, 0, 0, 0.1) 0px, + rgba(0, 0, 0, 0.1) 2px, + transparent 2px, + transparent 4px); + } + + & .no-background { + background: none !important; + } +} + +@keyframes letterPop { + 0% { + transform: scale(0.8); + opacity: 0.5; + } + + .bg-gradient2 { + background: linear-gradient(45deg, #a8e6cf, #dcedc1); + } +} + +/* Controls styles */ +.controls { + background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%); + padding: 0.5rem 0.7rem; + z-index: 100; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + width: auto; + font-size: 1rem; + place-items: center; + will-change: contents; +} + +.letter { + font-size: min(100vw, 100vh); + line-height: 1; + text-align: center; + margin: 0; + padding: 0; + color: var(--letter__txt--2); + transition: color 0.5s ease-in; +} + +.control-group button:hover, +.control-group select:hover { + background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%); + border-color: var(--primary); + transform: translateY(-1px); +} + +/* Container styles */ +.container__english { + & .letter { + font-size: min(100vw, 100vh); + line-height: 1; + text-align: center; + margin: 0; + padding: 0; + color: var(--letter__txt--2); + transition: color 0.5s ease-in; + } + + /* Background styles */ + & .bg-gradient1 { + background: linear-gradient(45deg, #ff6b6b, #4ecdc4); + } + + /* Background styles */ + .bg-gradient1 { + background: linear-gradient(45deg, #ff6b6b, #4ecdc4); + } + + .bg-gradient2 { + background: linear-gradient(45deg, #a8e6cf, #dcedc1); + } + + .bg-pattern1 { + background-image: repeating-linear-gradient(45deg, + rgba(0, 0, 0, 0.1) 0px, + rgba(0, 0, 0, 0.1) 2px, + transparent 2px, + transparent 4px); + } + + .no-background { + background: none !important; + } + + @keyframes letterPop { + 0% { + transform: scale(0.8); + opacity: 0.5; + } + + 100% { + transform: scale(1); + opacity: 1; + } + } + + .bg-pattern1 { + background-image: repeating-linear-gradient(45deg, + rgba(0, 0, 0, 0.1) 0px, + rgba(0, 0, 0, 0.1) 2px, + transparent 2px, + transparent 4px); + } + + .no-background { + background: none !important; + } + + @keyframes letterPop { + 0% { + transform: scale(0.8); + opacity: 0.5; + } + + 100% { + transform: scale(1); + opacity: 1; + } + } +} diff --git a/src/assets/styles/varnmala/index.css b/src/assets/styles/varnmala/index.css new file mode 100644 index 0000000..cc6ba7f --- /dev/null +++ b/src/assets/styles/varnmala/index.css @@ -0,0 +1,106 @@ +.container__varnmala { + padding: 2rem; + max-width: 1200px; + margin: 0 auto; + + & .list__alphabets { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + padding: 0; + list-style: none; + } + + & .card { + opacity: 0; + animation: fadeInUp 0.6s ease forwards; + transform: translateY(20px); + } + + & .card__link { + display: block; + text-decoration: none; + background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%)); + border-radius: 1rem; + border: 1px solid var(--border); + padding: 2rem; + transition: all 0.3s ease; + height: 100%; + } + + & .card__link:hover { + transform: translateY(-5px); + box-shadow: + 0 20px 30px rgba(0, 0, 0, 0.1), + 0 0 0 1px rgba(var(--primary-rgb, 44, 62, 80), 0.1); + } + + & .card__content { + position: relative; + } + + & .category__title { + font-size: 1.5rem; + font-weight: 700; + color: var(--text); + margin: 0 0 1rem 0; + transition: color 0.3s ease; + } + + & .category__description { + color: var(--secondary); + font-size: 0.95rem; + line-height: 1.6; + margin: 0; + } + + & .card__arrow { + position: absolute; + top: 0; + right: 0; + font-size: 1.5rem; + color: var(--primary); + opacity: 0; + transition: all 0.3s ease; + transform: translateX(-10px); + } + + & .card__link:hover .category__title { + background: linear-gradient(135deg, var(--primary), var(--primary-light)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } + + & .card__link:hover .card__arrow { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +@media (max-width: 768px) { + .container__varnmala { + padding: 1rem; + } + + .list__alphabets { + grid-template-columns: 1fr; + gap: 1rem; + } + + .card__link { + padding: 1.5rem; + } +} \ No newline at end of file diff --git a/src/assets/styles/reader.css b/src/assets/styles/varnmala/reader.css similarity index 95% rename from src/assets/styles/reader.css rename to src/assets/styles/varnmala/reader.css index 45376a9..fb43614 100644 --- a/src/assets/styles/reader.css +++ b/src/assets/styles/varnmala/reader.css @@ -4,23 +4,22 @@ } #container__reader { - font-size: min(40rem, 45vw); + font-size: min(40rem, 35vw); display: grid; place-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); place-content: center; color: var(--main__txt); - height: 100vh; outline: none; text-transform: uppercase; transform: rotate(0deg); transition: all 0.3s ease-in-out; will-change: contents; text-align: center; - min-height: 60vh; line-height: 1; padding: 1rem; gap: 0.5rem; + overflow: hidden; } .hide { diff --git a/src/components/LetterCard.astro b/src/components/LetterCard.astro new file mode 100644 index 0000000..e343678 --- /dev/null +++ b/src/components/LetterCard.astro @@ -0,0 +1,291 @@ +--- +import { type AlphabetEntry } from "@/types/alphabet.ts"; + +interface Props { + item: AlphabetEntry; + category: string; +} + +const { item, category } = Astro.props; +--- + +
+
+
+
+
+ ASCII: {item.code} +
+

{item.letter}

+
+
+

{item.text}

+

{item.description}

+
+
+
+
+ { + item.image ? ( + {item.letter} + ) : item.emoji ? ( +

{item.emoji}

+ ) : ( +

{item.text}

+ ) + } +
+
+
+ + + diff --git a/src/components/Popup.astro b/src/components/Popup.astro index 8e9db3d..f1a2570 100644 --- a/src/components/Popup.astro +++ b/src/components/Popup.astro @@ -99,7 +99,7 @@ const stateName = popupStateName.textContent; if (stateName) { const stateUrl = stateName.replace(/\s+/g, "").toLowerCase(); - window.location.href = `/mapPages/${stateUrl}`; + window.location.href = `/map/${stateUrl}`; } }); diff --git a/src/components/Puzzle.astro b/src/components/Puzzle.astro new file mode 100644 index 0000000..684dddb --- /dev/null +++ b/src/components/Puzzle.astro @@ -0,0 +1,565 @@ +
+ + + + +
+
+ + + + +
+
+ +
+ Word List +
+
+ +
+
+ Clicks: 0 +
+
+ Found: 0/ +
+ + + +
+ +
+
+ + diff --git a/src/components/ppp.astro b/src/components/ppp.astro new file mode 100644 index 0000000..c91161b --- /dev/null +++ b/src/components/ppp.astro @@ -0,0 +1,339 @@ +
+ + + + +
+
+ + + + +
+
+ +
+ Word List +
+
+ +
+
+ Clicks: 0 +
+
+ Found: 0/ +
+ + + +
+ +
+
+ + + \ No newline at end of file diff --git a/src/components/ui/backButton.astro b/src/components/ui/backButton.astro new file mode 100644 index 0000000..4b768c3 --- /dev/null +++ b/src/components/ui/backButton.astro @@ -0,0 +1,14 @@ + + + diff --git a/src/data/alphabets.json b/src/data/alphabets.json new file mode 100644 index 0000000..8f76141 --- /dev/null +++ b/src/data/alphabets.json @@ -0,0 +1,1344 @@ +{ + "general": { + "description": "General knowledge about the English alphabet", + "icon": "🔤", + "data": [ + { + "id": 1, + "letter": "A", + "code": 65, + "text": "Apple", + "description": "", + "emoji" : "🍎" + }, + { + "id": 2, + "letter": "B", + "code": 66, + "text": "Bat", + "emoji" : "🦇", + "description": "" + }, + { + "id": 3, + "letter": "C", + "code": 67, + "text": "Cat", + "emoji" : "🐱", + "description": "" + }, + { + "id": 4, + "letter": "D", + "code": 68, + "text": "Dog", + "emoji" : "🐶", + "description": "" + }, + { + "id": 5, + "letter": "E", + "code": 69, + "text": "Elephant", + "emoji" : "🐘", + "description": "" + }, + { + "id": 6, + "letter": "F", + "code": 70, + "text": "Fish", + "emoji" : "🐟", + "description": "" + }, + { + "id": 7, + "letter": "G", + "code": 71, + "text": "Goat", + "emoji" : "🐐", + "description": "" + }, + { + "id": 8, + "letter": "H", + "code": 72, + "text": "Hat", + "emoji" : "🎩", + "description": "" + }, + { + "id": 9, + "letter": "I", + "code": 73, + "text": "Ice", + "emoji" : "🧊", + "description": "" + }, + { + "id": 10, + "letter": "J", + "code": 74, + "text": "Jug", + "emoji" : "🏺", + "description": "" + }, + { + "id": 11, + "letter": "K", + "code": 75, + "text": "Kite", + "emoji" : "🪁", + "description": "" + }, + { + "id": 12, + "letter": "L", + "code": 76, + "text": "Lamp", + "emoji" : "💡", + "description": "" + }, + { + "id": 13, + "letter": "M", + "code": 77, + "text": "Moon", + "emoji" : "🌙", + "description": "" + }, + { + "id": 14, + "letter": "N", + "code": 78, + "text": "Nest", + "emoji" : "🐣", + "description": "" + }, + { + "id": 15, + "letter": "O", + "code": 79, + "text": "Orange", + "emoji" : "🍊", + "description": "" + }, + { + "id": 16, + "letter": "P", + "code": 80, + "text": "Pen", + "emoji" : "🖊️", + "description": "" + }, + { + "id": 17, + "letter": "Q", + "code": 81, + "text": "Queen", + "emoji" : "👑", + "description": "" + }, + { + "id": 18, + "letter": "R", + "code": 82, + "text": "Rat", + "emoji" : "🐀", + "description": "" + }, + { + "id": 19, + "letter": "S", + "code": 83, + "text": "Sun", + "emoji" : "☀️", + "description": "" + }, + { + "id": 20, + "letter": "T", + "code": 84, + "text": "Tree", + "emoji" : "🌳", + "description": "" + }, + { + "id": 21, + "letter": "U", + "code": 85, + "text": "Umbrella", + "emoji" : "☂️", + "description": "" + }, + { + "id": 22, + "letter": "V", + "code": 86, + "text": "Van", + "emoji" : "🚐", + "description": "" + }, + { + "id": 23, + "letter": "W", + "code": 87, + "text": "Watch", + "emoji" : "⌚", + "description": "" + }, + { + "id": 24, + "letter": "X", + "code": 88, + "text": "xerox", + "emoji" : "🖨️", + "description": "" + }, + { + "id": 25, + "letter": "Y", + "code": 89, + "text": "Yacht", + "emoji" : "⛵", + "description": "" + }, + { + "id": 26, + "letter": "Z", + "code": 90, + "text": "Zebra", + "emoji" : "🦓", + "description": "" + } + ] + }, + "nato": { + "description": "NATO phonetic alphabet", + "icon": "🎖️", + "data": [ + { + "id": 1, + "letter": "A", + "code": 65, + "text": "Alpha", + "description": "First letter of NATO phonetic alphabet" + }, + { + "id": 2, + "letter": "B", + "code": 66, + "text": "Bravo", + "description": "Second letter of NATO phonetic alphabet" + }, + { + "id": 3, + "letter": "C", + "code": 67, + "text": "Charlie", + "description": "Third letter of NATO phonetic alphabet" + }, + { + "id": 4, + "letter": "D", + "code": 68, + "text": "Delta", + "description": "Fourth letter of NATO phonetic alphabet" + }, + { + "id": 5, + "letter": "E", + "code": 69, + "text": "Echo", + "description": "Fifth letter of NATO phonetic alphabet" + }, + { + "id": 6, + "letter": "F", + "code": 70, + "text": "Foxtrot", + "description": "Sixth letter of NATO phonetic alphabet" + }, + { + "id": 7, + "letter": "G", + "code": 71, + "text": "Golf", + "description": "Seventh letter of NATO phonetic alphabet" + }, + { + "id": 8, + "letter": "H", + "code": 72, + "text": "Hotel", + "description": "Eighth letter of NATO phonetic alphabet" + }, + { + "id": 9, + "letter": "I", + "code": 73, + "text": "India", + "description": "Ninth letter of NATO phonetic alphabet" + }, + { + "id": 10, + "letter": "J", + "code": 74, + "text": "Juliet", + "description": "Tenth letter of NATO phonetic alphabet" + }, + { + "id": 11, + "letter": "K", + "code": 75, + "text": "Kilo", + "description": "Eleventh letter of NATO phonetic alphabet" + }, + { + "id": 12, + "letter": "L", + "code": 76, + "text": "Lima", + "description": "Twelfth letter of NATO phonetic alphabet" + }, + { + "id": 13, + "letter": "M", + "code": 77, + "text": "Mike", + "description": "Thirteenth letter of NATO phonetic alphabet" + }, + { + "id": 14, + "letter": "N", + "code": 78, + "text": "November", + "description": "Fourteenth letter of NATO phonetic alphabet" + }, + { + "id": 15, + "letter": "O", + "code": 79, + "text": "Oscar", + "description": "Fifteenth letter of NATO phonetic alphabet" + }, + { + "id": 16, + "letter": "P", + "code": 80, + "text": "Papa", + "description": "Sixteenth letter of NATO phonetic alphabet" + }, + { + "id": 17, + "letter": "Q", + "code": 81, + "text": "Quebec", + "description": "Seventeenth letter of NATO phonetic alphabet" + }, + { + "id": 18, + "letter": "R", + "code": 82, + "text": "Romeo", + "description": "Eighteenth letter of NATO phonetic alphabet" + }, + { + "id": 19, + "letter": "S", + "code": 83, + "text": "Sierra", + "description": "Nineteenth letter of NATO phonetic alphabet" + }, + { + "id": 20, + "letter": "T", + "code": 84, + "text": "Tango", + "description": "Twentieth letter of NATO phonetic alphabet" + }, + { + "id": 21, + "letter": "U", + "code": 85, + "text": "Uniform", + "description": "Twenty-first letter of NATO phonetic alphabet" + }, + { + "id": 22, + "letter": "V", + "code": 86, + "text": "Victor", + "description": "Twenty-second letter of NATO phonetic alphabet" + }, + { + "id": 23, + "letter": "W", + "code": 87, + "text": "Whiskey", + "description": "Twenty-third letter of NATO phonetic alphabet" + }, + { + "id": 24, + "letter": "X", + "code": 88, + "text": "X-ray", + "description": "Twenty-fourth letter of NATO phonetic alphabet" + }, + { + "id": 25, + "letter": "Y", + "code": 89, + "text": "Yankee", + "description": "Twenty-fifth letter of NATO phonetic alphabet" + }, + { + "id": 26, + "letter": "Z", + "code": 90, + "text": "Zulu", + "description": "Twenty-sixth letter of NATO phonetic alphabet" + } + ] + }, + "braille": { + "description": "Braille alphabet", + "icon": "⠿", + "data": [ + { + "id": 1, + "letter": "A", + "code": 65, + "text": "⠁", + "description": "Braille pattern dots-1" + }, + { + "id": 2, + "letter": "B", + "code": 66, + "text": "⠃", + "description": "Braille pattern dots-1-2" + }, + { + "id": 3, + "letter": "C", + "code": 67, + "text": "⠉", + "description": "Braille pattern dots-1-4" + }, + { + "id": 4, + "letter": "D", + "code": 68, + "text": "⠙", + "description": "Braille pattern dots-1-4-5" + }, + { + "id": 5, + "letter": "E", + "code": 69, + "text": "⠑", + "description": "Braille pattern dots-1-5" + }, + { + "id": 6, + "letter": "F", + "code": 70, + "text": "⠋", + "description": "Braille pattern dots-1-2-4" + }, + { + "id": 7, + "letter": "G", + "code": 71, + "text": "⠛", + "description": "Braille pattern dots-1-2-4-5" + }, + { + "id": 8, + "letter": "H", + "code": 72, + "text": "⠓", + "description": "Braille pattern dots-1-2-5" + }, + { + "id": 9, + "letter": "I", + "code": 73, + "text": "⠊", + "description": "Braille pattern dots-2-4" + }, + { + "id": 10, + "letter": "J", + "code": 74, + "text": "⠚", + "description": "Braille pattern dots-2-4-5" + }, + { + "id": 11, + "letter": "K", + "code": 75, + "text": "⠅", + "description": "Braille pattern dots-1-3" + }, + { + "id": 12, + "letter": "L", + "code": 76, + "text": "⠇", + "description": "Braille pattern dots-1-2-3" + }, + { + "id": 13, + "letter": "M", + "code": 77, + "text": "⠍", + "description": "Braille pattern dots-1-3-4" + }, + { + "id": 14, + "letter": "N", + "code": 78, + "text": "⠝", + "description": "Braille pattern dots-1-3-4-5" + }, + { + "id": 15, + "letter": "O", + "code": 79, + "text": "⠕", + "description": "Braille pattern dots-1-3-5" + }, + { + "id": 16, + "letter": "P", + "code": 80, + "text": "⠏", + "description": "Braille pattern dots-1-2-3-4" + }, + { + "id": 17, + "letter": "Q", + "code": 81, + "text": "⠟", + "description": "Braille pattern dots-1-2-3-4-5" + }, + { + "id": 18, + "letter": "R", + "code": 82, + "text": "⠗", + "description": "Braille pattern dots-1-2-3-5" + }, + { + "id": 19, + "letter": "S", + "code": 83, + "text": "⠎", + "description": "Braille pattern dots-2-3-4" + }, + { + "id": 20, + "letter": "T", + "code": 84, + "text": "⠞", + "description": "Braille pattern dots-2-3-4-5" + }, + { + "id": 21, + "letter": "U", + "code": 85, + "text": "⠥", + "description": "Braille pattern dots-1-3-6" + }, + { + "id": 22, + "letter": "V", + "code": 86, + "text": "⠧", + "description": "Braille pattern dots-1-2-3-6" + }, + { + "id": 23, + "letter": "W", + "code": 87, + "text": "⠺", + "description": "Braille pattern dots-2-4-5-6" + }, + { + "id": 24, + "letter": "X", + "code": 88, + "text": "⠭", + "description": "Braille pattern dots-1-3-4-6" + }, + { + "id": 25, + "letter": "Y", + "code": 89, + "text": "⠽", + "description": "Braille pattern dots-1-3-4-5-6" + }, + { + "id": 26, + "letter": "Z", + "code": 90, + "text": "⠵", + "description": "Braille pattern dots-1-3-5-6" + } + ] + }, + "fruits": { + "description": "Fruits of the English alphabet", + "icon": "🍎", + "data": [ + { + "id": 1, + "letter": "A", + "code": 65, + "text": "Apple", + "description": "Common red or green fruit" + }, + { + "id": 2, + "letter": "B", + "code": 66, + "text": "Banana", + "description": "Yellow curved tropical fruit" + }, + { + "id": 3, + "letter": "C", + "code": 67, + "text": "Cherry", + "description": "Small red stone fruit" + }, + { + "id": 4, + "letter": "D", + "code": 68, + "text": "Date", + "description": "Sweet brown fruit from palm trees" + }, + { + "id": 5, + "letter": "E", + "code": 69, + "text": "Elderberry", + "description": "Small dark purple berries" + }, + { + "id": 6, + "letter": "F", + "code": 70, + "text": "Fig", + "description": "Sweet Mediterranean fruit" + }, + { + "id": 7, + "letter": "G", + "code": 71, + "text": "Grape", + "description": "Small round fruit growing in clusters" + }, + { + "id": 8, + "letter": "H", + "code": 72, + "text": "Honeydew", + "description": "Sweet green melon variety" + }, + { + "id": 9, + "letter": "I", + "code": 73, + "text": "Ice Apple", + "description": "Translucent fruit from palm trees" + }, + { + "id": 10, + "letter": "J", + "code": 74, + "text": "Jackfruit", + "description": "Large tropical fruit" + }, + { + "id": 11, + "letter": "K", + "code": 75, + "text": "Kiwi", + "description": "Brown fuzzy fruit with green flesh" + }, + { + "id": 12, + "letter": "L", + "code": 76, + "text": "Lemon", + "description": "Sour yellow citrus fruit" + }, + { + "id": 13, + "letter": "M", + "code": 77, + "text": "Mango", + "description": "Sweet tropical stone fruit" + }, + { + "id": 14, + "letter": "N", + "code": 78, + "text": "Nectarine", + "description": "Smooth-skinned peach variety" + }, + { + "id": 15, + "letter": "O", + "code": 79, + "text": "Orange", + "description": "Round citrus fruit" + }, + { + "id": 16, + "letter": "P", + "code": 80, + "text": "Pear", + "description": "Sweet bell-shaped fruit" + }, + { + "id": 17, + "letter": "Q", + "code": 81, + "text": "Quince", + "description": "Hard acidic fruit used in preserves" + }, + { + "id": 18, + "letter": "R", + "code": 82, + "text": "Raspberry", + "description": "Small red aggregate fruit" + }, + { + "id": 19, + "letter": "S", + "code": 83, + "text": "Strawberry", + "description": "Red heart-shaped berry" + }, + { + "id": 20, + "letter": "T", + "code": 84, + "text": "Tangerine", + "description": "Small orange citrus fruit" + }, + { + "id": 21, + "letter": "U", + "code": 85, + "text": "Ugli Fruit", + "description": "Citrus fruit hybrid from Jamaica" + }, + { + "id": 22, + "letter": "V", + "code": 86, + "text": "Voavanga", + "description": "African fruit also known as Spanish tamarind" + }, + { + "id": 23, + "letter": "W", + "code": 87, + "text": "Watermelon", + "description": "Large sweet fruit with green rind and red flesh" + }, + { + "id": 24, + "letter": "X", + "code": 88, + "text": "Ximenia", + "description": "Small orange-colored wild fruit" + }, + { + "id": 25, + "letter": "Y", + "code": 89, + "text": "Yellow Watermelon", + "description": "Watermelon variety with yellow flesh" + }, + { + "id": 26, + "letter": "Z", + "code": 90, + "text": "Ziziphus", + "description": "Small fruit also known as jujube" + } + ] + }, + "animals": { + "description": "Animals of the English alphabet", + "icon": "🦁", + "data": [ + { + "id": 1, + "letter": "A", + "code": 65, + "text": "Antelope", + "description": "Swift-moving hoofed mammal" + }, + { + "id": 2, + "letter": "B", + "code": 66, + "text": "Bear", + "description": "Large omnivorous mammal" + }, + { + "id": 3, + "letter": "C", + "code": 67, + "text": "Cat", + "description": "Small domesticated feline" + }, + { + "id": 4, + "letter": "D", + "code": 68, + "text": "Dog", + "description": "Domesticated canine" + }, + { + "id": 5, + "letter": "E", + "code": 69, + "text": "Elephant", + "description": "Large mammal with trunk" + }, + { + "id": 6, + "letter": "F", + "code": 70, + "text": "Fox", + "description": "Small wild canine" + }, + { + "id": 7, + "letter": "G", + "code": 71, + "text": "Giraffe", + "description": "Long-necked African mammal" + }, + { + "id": 8, + "letter": "H", + "code": 72, + "text": "Hippo", + "description": "Large semi-aquatic African mammal" + }, + { + "id": 9, + "letter": "I", + "code": 73, + "text": "Iguana", + "description": "Large tropical lizard" + }, + { + "id": 10, + "letter": "J", + "code": 74, + "text": "Jaguar", + "description": "Large spotted wild cat" + }, + { + "id": 11, + "letter": "K", + "code": 75, + "text": "Kangaroo", + "description": "Marsupial that hops" + }, + { + "id": 12, + "letter": "L", + "code": 76, + "text": "Lion", + "description": "Large African wild cat" + }, + { + "id": 13, + "letter": "M", + "code": 77, + "text": "Monkey", + "description": "Primate with tail" + }, + { + "id": 14, + "letter": "N", + "code": 78, + "text": "Narwhal", + "description": "Arctic whale with long tusk" + }, + { + "id": 15, + "letter": "O", + "code": 79, + "text": "Octopus", + "description": "Eight-armed sea creature" + }, + { + "id": 16, + "letter": "P", + "code": 80, + "text": "Penguin", + "description": "Flightless aquatic bird" + }, + { + "id": 17, + "letter": "Q", + "code": 81, + "text": "Quail", + "description": "Small ground-dwelling bird" + }, + { + "id": 18, + "letter": "R", + "code": 82, + "text": "Rabbit", + "description": "Small mammal with long ears" + }, + { + "id": 19, + "letter": "S", + "code": 83, + "text": "Snake", + "description": "Legless reptile" + }, + { + "id": 20, + "letter": "T", + "code": 84, + "text": "Tiger", + "description": "Large striped wild cat" + }, + { + "id": 21, + "letter": "U", + "code": 85, + "text": "Uakari", + "description": "Red-faced monkey species" + }, + { + "id": 22, + "letter": "V", + "code": 86, + "text": "Vulture", + "description": "Scavenging bird of prey" + }, + { + "id": 23, + "letter": "W", + "code": 87, + "text": "Wolf", + "description": "Wild canine that hunts in packs" + }, + { + "id": 24, + "letter": "X", + "code": 88, + "text": "X-Ray Fish", + "description": "Transparent fish species" + }, + { + "id": 25, + "letter": "Y", + "code": 89, + "text": "Yak", + "description": "Long-haired mountain bovine" + }, + { + "id": 26, + "letter": "Z", + "code": 90, + "text": "Zebra", + "description": "Striped African equine" + } + ] + }, + "countries": { + "description": "Countries of the English alphabet", + "icon": "🌍", + "data": [ + { + "id": 1, + "letter": "A", + "code": 65, + "text": "Australia", + "description": "Continent and country in Southern Hemisphere" + }, + { + "id": 2, + "letter": "B", + "code": 66, + "text": "Brazil", + "description": "Largest country in South America" + }, + { + "id": 3, + "letter": "C", + "code": 67, + "text": "Canada", + "description": "Second largest country by total area" + }, + { + "id": 4, + "letter": "D", + "code": 68, + "text": "Denmark", + "description": "Nordic country in Europe" + }, + { + "id": 5, + "letter": "E", + "code": 69, + "text": "Egypt", + "description": "North African country with ancient pyramids" + }, + { + "id": 6, + "letter": "F", + "code": 70, + "text": "France", + "description": "Western European country" + }, + { + "id": 7, + "letter": "G", + "code": 71, + "text": "Germany", + "description": "Central European country" + }, + { + "id": 8, + "letter": "H", + "code": 72, + "text": "Hungary", + "description": "Central European country" + }, + { + "id": 9, + "letter": "I", + "code": 73, + "text": "India", + "description": "South Asian country" + }, + { + "id": 10, + "letter": "J", + "code": 74, + "text": "Japan", + "description": "East Asian island country" + }, + { + "id": 11, + "letter": "K", + "code": 75, + "text": "Kenya", + "description": "East African country" + }, + { + "id": 12, + "letter": "L", + "code": 76, + "text": "Lithuania", + "description": "Baltic country in Northern Europe" + }, + { + "id": 13, + "letter": "M", + "code": 77, + "text": "Mexico", + "description": "North American country" + }, + { + "id": 14, + "letter": "N", + "code": 78, + "text": "Norway", + "description": "Nordic country with fjords" + }, + { + "id": 15, + "letter": "O", + "code": 79, + "text": "Oman", + "description": "Middle Eastern country" + }, + { + "id": 16, + "letter": "P", + "code": 80, + "text": "Portugal", + "description": "Southern European country" + }, + { + "id": 17, + "letter": "Q", + "code": 81, + "text": "Qatar", + "description": "Middle Eastern peninsula country" + }, + { + "id": 18, + "letter": "R", + "code": 82, + "text": "Russia", + "description": "Largest country by land area" + }, + { + "id": 19, + "letter": "S", + "code": 83, + "text": "Spain", + "description": "Southern European country" + }, + { + "id": 20, + "letter": "T", + "code": 84, + "text": "Turkey", + "description": "Transcontinental country" + }, + { + "id": 21, + "letter": "U", + "code": 85, + "text": "Uganda", + "description": "East African country" + }, + { + "id": 22, + "letter": "V", + "code": 86, + "text": "Vietnam", + "description": "Southeast Asian country" + }, + { + "id": 23, + "letter": "W", + "code": 87, + "text": "Wales", + "description": "Country part of United Kingdom" + }, + { + "id": 24, + "letter": "X", + "code": 88, + "text": "Xianggang", + "description": "Alternative name for Hong Kong" + }, + { + "id": 25, + "letter": "Y", + "code": 89, + "text": "Yemen", + "description": "Middle Eastern country" + }, + { + "id": 26, + "letter": "Z", + "code": 90, + "text": "Zimbabwe", + "description": "Southern African country" + } + ] + }, + "Indian": { + "description": "Mythological Indian culture Alphabets", + "icon": "🕉️", + "data": [ + { + "id": 1, + "letter": "A", + "code": 65, + "text": "Aryabhatta", + "description": "Ancient Indian mathematician and astronomer who calculated Pi" + }, + { + "id": 2, + "letter": "B", + "code": 66, + "text": "Brahma", + "description": "Creator deity in Hinduism" + }, + { + "id": 3, + "letter": "C", + "code": 67, + "text": "Chanakya", + "description": "Ancient Indian teacher, philosopher, and royal advisor" + }, + { + "id": 4, + "letter": "D", + "code": 68, + "text": "Durga", + "description": "Hindu goddess of war, strength and protection" + }, + { + "id": 5, + "letter": "E", + "code": 69, + "text": "Eklavya", + "description": "Skilled archer from the Mahabharata" + }, + { + "id": 6, + "letter": "F", + "code": 70, + "text": "Fauna", + "description": "Sacred animals in Indian mythology like Garuda and Nandi" + }, + { + "id": 7, + "letter": "G", + "code": 71, + "text": "Ganesha", + "description": "Elephant-headed deity known as remover of obstacles" + }, + { + "id": 8, + "letter": "H", + "code": 72, + "text": "Hanuman", + "description": "Monkey deity known for strength, devotion and service" + }, + { + "id": 9, + "letter": "I", + "code": 73, + "text": "Indra", + "description": "King of the gods and deity of lightning and thunder" + }, + { + "id": 10, + "letter": "J", + "code": 74, + "text": "Jatayu", + "description": "Divine eagle who fought Ravana in the Ramayana" + }, + { + "id": 11, + "letter": "K", + "code": 75, + "text": "Krishna", + "description": "Divine incarnation of Vishnu and key figure in Bhagavad Gita" + }, + { + "id": 12, + "letter": "L", + "code": 76, + "text": "Lakshmi", + "description": "Goddess of wealth, fortune and prosperity" + }, + { + "id": 13, + "letter": "M", + "code": 77, + "text": "Mahabharata", + "description": "Ancient Sanskrit epic about the Kurukshetra War" + }, + { + "id": 14, + "letter": "N", + "code": 78, + "text": "Narada", + "description": "Divine sage famous for carrying news and gossip" + }, + { + "id": 15, + "letter": "O", + "code": 79, + "text": "Om", + "description": "Sacred sound and spiritual symbol in Indian religions" + }, + { + "id": 16, + "letter": "P", + "code": 80, + "text": "Parvati", + "description": "Goddess of fertility, love and devotion" + }, + { + "id": 17, + "letter": "Q", + "code": 81, + "text": "Qutub Minar", + "description": "Historic minaret built by Qutb-ud-Din Aibak in Delhi" + }, + { + "id": 18, + "letter": "R", + "code": 82, + "text": "Rama", + "description": "Seventh avatar of Vishnu and protagonist of the Ramayana" + }, + { + "id": 19, + "letter": "S", + "code": 83, + "text": "Shiva", + "description": "One of the principal deities, known as the destroyer" + }, + { + "id": 20, + "letter": "T", + "code": 84, + "text": "Tulsidas", + "description": "Author who wrote the epic Ramcharitmanas" + }, + { + "id": 21, + "letter": "U", + "code": 85, + "text": "Urvashi", + "description": "Beautiful apsara (celestial nymph) created from Vishnu's thigh" + }, + { + "id": 22, + "letter": "V", + "code": 86, + "text": "Vishnu", + "description": "Preserver deity with ten avatars including Rama and Krishna" + }, + { + "id": 23, + "letter": "W", + "code": 87, + "text": "Wayang", + "description": "Puppetry art form influenced by Indian epics and mythology" + }, + { + "id": 24, + "letter": "X", + "code": 88, + "text": "Xerxes", + "description": "Persian king who encountered Indian warriors and philosophers" + }, + { + "id": 25, + "letter": "Y", + "code": 89, + "text": "Yama", + "description": "God of death and justice who judges souls" + }, + { + "id": 26, + "letter": "Z", + "code": 90, + "text": "Zodiac", + "description": "Vedic astrology (Jyotish) with its unique zodiac system" + } + ] + } +} \ No newline at end of file diff --git a/src/data/crossword-data.json b/src/data/crossword-data.json new file mode 100644 index 0000000..bfeb5fa --- /dev/null +++ b/src/data/crossword-data.json @@ -0,0 +1,42 @@ +{ + "categories": [ + "cities", + "animals", + "countries" + ], + "words": { + "cities": [ + { + "name": "jaipur" + }, + { + "name": "delhi" + }, + { + "name": "mumbai" + } + ], + "animals": [ + { + "name": "tiger" + }, + { + "name": "lion" + }, + { + "name": "zebra" + } + ], + "countries": [ + { + "name": "india" + }, + { + "name": "china" + }, + { + "name": "japan" + } + ] + } +} \ No newline at end of file diff --git a/src/layouts/Navigation.astro b/src/layouts/Navigation.astro index 433a8ff..1b1a209 100644 --- a/src/layouts/Navigation.astro +++ b/src/layouts/Navigation.astro @@ -55,7 +55,7 @@ const DefaultIcon = ({ text }: { text: string }) => { .map((p) => { const gradientUrl = `url(#gradient-${p.name ?? p.title})`; return ( -
  • +
  • {p.icon ? ( diff --git a/src/pages/alphabets/[alphabet]/board.astro b/src/pages/alphabets/[alphabet]/board.astro new file mode 100644 index 0000000..54b1a99 --- /dev/null +++ b/src/pages/alphabets/[alphabet]/board.astro @@ -0,0 +1,70 @@ +--- +import "@/assets/styles/alphabets/[alphabet]/board.css"; + +import LetterCard from "@/components/LetterCard.astro"; + +import rawAlphabetData from "@/data/alphabets.json"; +import BaseLayout from "@/layouts/Base"; +import { type AlphabetsData } from "@/types/alphabet.ts"; + +import BackButton from "@/components/ui/backButton.astro"; + +const alphabetData = rawAlphabetData as AlphabetsData; + +export async function getStaticPaths() { + const alphabetData = rawAlphabetData as AlphabetsData; + const categories = Object.keys(alphabetData); + + return categories.map((category) => ({ + params: { alphabet: category } + })); +} + +const { alphabet } = Astro.params; + +const data = alphabetData[alphabet as keyof AlphabetsData].data; +--- + + +
    +
    + + +
    +
    +
    + { + data && + Object.values(data).map((d) => { + return ; + }) + } +
    +
    +
    + + +     diff --git a/src/pages/alphabets/[alphabet]/playground.astro b/src/pages/alphabets/[alphabet]/playground.astro new file mode 100644 index 0000000..e406f00 --- /dev/null +++ b/src/pages/alphabets/[alphabet]/playground.astro @@ -0,0 +1,162 @@ +--- +import "@/assets/styles/alphabets/[alphabet]/playground.css"; + +import Help from "@/components/Help.astro"; +import BaseLayout from "@/layouts/Base"; +import rawAlphabetData from "@/data/alphabets.json"; +import BackButton from "@/components/ui/backButton.astro"; + +import { type AlphabetsData } from "@/types/alphabet"; +const alphabetData = rawAlphabetData as AlphabetsData; + +export async function getStaticPaths() { + const alphabetData = rawAlphabetData as AlphabetsData; + const categories = Object.keys(alphabetData); + return categories.map((category) => ({ + params: { alphabet: category } + })); +} + +const { alphabet } = Astro.params; +const currentCategory = alphabetData[alphabet as keyof AlphabetsData]; +--- + + + + + + + +
    +
    A
    +
    +
    {currentCategory.icon}
    +
    +
    +
    +
    +
    + + +     diff --git a/src/pages/alphabets/index.astro b/src/pages/alphabets/index.astro new file mode 100644 index 0000000..042fbf7 --- /dev/null +++ b/src/pages/alphabets/index.astro @@ -0,0 +1,110 @@ +--- +import "@/assets/styles/alphabets/index.css"; +import rawAlphabetData from "@/data/alphabets.json"; +import BaseLayout from "@/layouts/Base"; + +import type { AlphabetsData } from "@/types/alphabet"; +const alphabetData = rawAlphabetData as AlphabetsData; + +const categories = Object.keys(alphabetData); +const getCategoryDescription = (category: string) => alphabetData[category as keyof AlphabetsData].description; +--- + + +
    +
    +

    Alphabet Categories

    +

    Choose a category to discover different alphabet representations

    +
    +     +
    + + + diff --git a/src/pages/crossword.astro b/src/pages/crossword.astro new file mode 100644 index 0000000..dcee4bf --- /dev/null +++ b/src/pages/crossword.astro @@ -0,0 +1,27 @@ +--- +import "@/assets/styles/crossword.css"; +import Help from "@/components/Help.astro"; +import WordSearchPuzzle from "@/components/Puzzle.astro"; +import crosswordData from "@/data/crossword-data.json"; +import BaseLayout from "@/layouts/Base"; + +const categories = crosswordData.categories; +let selectedCategory = null; +let words: any = []; + +const selectCategory = (category: string) => { + selectedCategory = category; + words = (crosswordData as any).words[category] || []; +}; +--- + + + + + + + + diff --git a/src/pages/english.astro b/src/pages/english.astro deleted file mode 100644 index 6d62eb0..0000000 --- a/src/pages/english.astro +++ /dev/null @@ -1,108 +0,0 @@ ---- -import BaseLayout from "@/layouts/Base"; -import "@/assets/styles/english.css"; -import Help from "@/components/Help.astro"; ---- - - - - - -
    -
    - - - -
    - -
    - - - -
    -
    -
    -
    A
    -
    - -     diff --git a/src/pages/mapPages/[...state].astro b/src/pages/map/[...state].astro similarity index 69% rename from src/pages/mapPages/[...state].astro rename to src/pages/map/[...state].astro index fd7cebf..1ab4075 100644 --- a/src/pages/mapPages/[...state].astro +++ b/src/pages/map/[...state].astro @@ -28,22 +28,38 @@ const { name, dance, festival, image, svg, wikiLink, description } = stateInfo; {`${dance}
    - + + + - + + + + +
    Quick Facts
    + Quick Facts + {stateInfo.official_website && ( + <> +
    + + Visit the official website of {name} + + + )} +
    Dance Form{dance}
    Origin{name}, India
    Festival{festival}
    Description

    {description}

    +
    Description +

    {description}

    Read more about {dance} on Wikipedia -
    - - Read more about {dance} on Wikipedia - +
    diff --git a/src/pages/map.astro b/src/pages/map/index.astro similarity index 100% rename from src/pages/map.astro rename to src/pages/map/index.astro diff --git a/src/pages/typing.astro b/src/pages/typing.astro deleted file mode 100644 index 86d0528..0000000 --- a/src/pages/typing.astro +++ /dev/null @@ -1,94 +0,0 @@ ---- -import "@/assets/styles/typing.css"; -import Help from "@/components/Help.astro"; -import BaseLayout from "@/layouts/Base"; ---- - - - - - -
    -
    A
    -
    🎸
    -
    Apple
    -
    - -     diff --git a/src/pages/varnmala.astro b/src/pages/varnmala/alphabet.astro similarity index 78% rename from src/pages/varnmala.astro rename to src/pages/varnmala/alphabet.astro index 522947c..bdf60c1 100644 --- a/src/pages/varnmala.astro +++ b/src/pages/varnmala/alphabet.astro @@ -1,8 +1,11 @@ --- -import Alphabet from "@/components/Alphabet.astro"; -import "@/assets/styles/varnmala.css"; -import Help from "@/components/Help.astro"; +import "@/assets/styles/varnmala/alphabet.css"; import BaseLayout from "@/layouts/Base"; + +import AlphabetComponent from "@/components/Alphabet.astro"; +import Help from "@/components/Help.astro"; +import BackButton from "@/components/ui/backButton.astro"; + import { varnmala_english, varnmala_hindi } from "@/utils/common"; --- @@ -17,13 +20,14 @@ import { varnmala_english, varnmala_hindi } from "@/utils/common"; description="Varnmala is a collection of alphabets in Hindi and English. It is used to teach kids the basics of language." /> + -
    +
    - +
    - +
    +
    + diff --git a/src/pages/varnmala/index.astro b/src/pages/varnmala/index.astro new file mode 100644 index 0000000..3a7d81a --- /dev/null +++ b/src/pages/varnmala/index.astro @@ -0,0 +1,47 @@ +--- +import "@/assets/styles/varnmala/index.css"; +import BaseLayout from "@/layouts/Base"; + +const sections = [ + { + title: "Alphabet", + description: "Learn the basic alphabet characters", + href: "alphabet" + }, + { + title: "English", + description: "Learn English alphabets", + href: "english" + }, + { + title: "Reader", + description: "Practice reading alphabets with audio support", + href: "reader" + }, + { + title: "Barahkhadi", + description: "Learn the basic barahkhadi characters", + href: "barahkhadi" + } +]; +--- + + +
    + +
    +     diff --git a/src/pages/reader.astro b/src/pages/varnmala/reader.astro similarity index 96% rename from src/pages/reader.astro rename to src/pages/varnmala/reader.astro index 08d8c5a..e42cc28 100644 --- a/src/pages/reader.astro +++ b/src/pages/varnmala/reader.astro @@ -1,7 +1,9 @@ --- -import "@/assets/styles/reader.css"; +import "@/assets/styles/varnmala/reader.css"; import Help from "@/components/Help.astro"; import BaseLayout from "@/layouts/Base"; + +import BackButton from "@/components/ui/backButton.astro"; --- @@ -19,9 +21,10 @@ import BaseLayout from "@/layouts/Base"; description="Press any letter key (A-Z) to display it with a related emoji. Toggle the speaker buttons to change voices, and use the audio button to mute/unmute sounds." /> + +
    - a - 🍎 + a🍎
    diff --git a/src/types/alphabet.ts b/src/types/alphabet.ts index 3cc44d5..82bfdf9 100644 --- a/src/types/alphabet.ts +++ b/src/types/alphabet.ts @@ -2,3 +2,28 @@ export type LetterEntity = { letter: string; code: string | number; }; + +export interface AlphabetEntry { + id: number; + letter: string; + code: number; + text: string; + description: string; + emoji?: string; + image?: string; +} + +export interface AlphabetCategory { + description: string; + icon: string; + data: AlphabetEntry[]; +} + +export interface AlphabetsData { + general: AlphabetCategory; + nato: AlphabetCategory; + braille: AlphabetCategory; + fruits: AlphabetCategory; + animals: AlphabetCategory; + countries: AlphabetCategory; +} diff --git a/src/utils/common.ts b/src/utils/common.ts index f6d12f8..c80208c 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -5,7 +5,9 @@ export const hindiVowels = Array.from({ length: 16 }, (_, i) => ({ key: 2309 + i, value: String.fromCodePoint(2309 + i) })); -const extraHindiVowelKey = [2317, 2321]; +const extraHindiVowelKey = [2317, 2321]; // 'ऍ' , 'ऑ' + +// String.fromCodePoint(2384); // 'ॐ' export const hindiVowelList = hindiVowels.filter((v) => !extraHindiVowelKey.includes(v.key)); // Consonants @@ -19,9 +21,24 @@ const additionalConsonants = [ String.fromCharCode(2332, 2381, 2334) ]; -export const hindiConsonants = Array.from({ length: 37 }, (_, i) => String.fromCodePoint(2325 + i)).concat( - additionalConsonants -); +export const hindiConsonants = [ + // क-row + 2325, 2326, 2327, 2328, 2329, + // च-row + 2330, 2331, 2332, 2333, 2334, + // ट-row + 2335, 2336, 2337, 2338, 2339, + // त-row + 2340, 2341, 2342, 2343, 2344, + // प-row + 2346, 2347, 2348, 2349, 2350, + // य-row + 2351, 2352, 2354, 2357, + // श-row + 2358, 2359, 2360, 2361 +] + .map((code) => String.fromCharCode(code)) + .concat(additionalConsonants); export const matras = { aa: String.fromCharCode(2366), @@ -33,27 +50,28 @@ export const matras = { aie: String.fromCharCode(2376), au: String.fromCharCode(2379), aau: String.fromCharCode(2380), - an: String.fromCharCode(2385), + an: String.fromCharCode(2306), ah: String.fromCharCode(2307), - ru: String.fromCharCode(2371), + ru: String.fromCharCode(2371) }; export const barahkhadi = (code: number) => { console.log({ code }); const sanyukat = Object.values(matras); const list = [String.fromCharCode(code)]; - console.log(list.concat(sanyukat)); return list.concat(sanyukat); }; // exclude 2345 ' 2353 / 2355 / 2356 -export const extraLetters = [2345, 2353, 2356]; +export const extraLetters = [2345, 2353, 2356]; // 'ऩ', 'ऱ', 'ऴ' export const varnmala = Array.from(Array(37), (_, i) => ({ code: 2325 + i, letter: String.fromCharCode(2325 + i) })); export const varnmala_english = Array.from(Array(26), (_, i) => ({ code: 65 + i, letter: String.fromCharCode(65 + i) })); -export const varnmala_hindi = varnmala.filter((v) => !extraLetters.includes(v.code)); +export const varnmala_hindi = varnmala + .filter((v) => !extraLetters.includes(v.code)) + .concat(additionalConsonants.map((v, i) => ({ code: 2325 + i, letter: v }))); export const isAlphabet = (key: number) => (65 <= key && key <= 90) || (key >= 97 && key <= 122); diff --git a/src/utils/constants.ts b/src/utils/constants.ts index a3d3ecb..d2c1b0e 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -30,35 +30,17 @@ export const NavbarLinks: LinkProps[] = [ path: "/panel", isActive: true }, - { - name: "Reader", - title: "Reader", - path: "/reader", - isActive: true - }, - { - name: "Barahkhadi", - title: "Barahkhadi", - path: "/barahkhadi", - isActive: true - }, { name: "Record", title: "Record", path: "/record", icon: RecordIcon, - isActive: true - }, - { - name: "English", - title: "English", - path: "/english", - isActive: true + isActive: false }, { - name: "Typing", - title: "Typing", - path: "/typing", + name: "Alphabets", + title: "Alphabets", + path: "/alphabets", isActive: true }, { @@ -68,9 +50,9 @@ export const NavbarLinks: LinkProps[] = [ isActive: true }, { - name: "Vedic", - title: "Vedic", - path: "/vedic", + name: "Crossword", + title: "English Cross words", + path: "/crossword", isActive: true }, {