diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 00000000..6f01b085 --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,36 @@ +--- +applyTo: "**" +--- + +# Project general coding standards + +## Naming Conventions + +- Use PascalCase for component names, interfaces, and type aliases +- Use camelCase for variables, functions, and methods +- Prefix private class members with underscore (\_) +- Use ALL_CAPS for constants + +## Error Handling + +- Use try/catch blocks for async operations +- Implement proper error boundaries in React components +- Always log errors with contextual information + +## Code Structure + +- Organize files by feature rather than type +- Keep components small and focused on a single responsibility +- Use TypeScript for type safety and better developer experience + +## Documentation + +- Maintain a README.md with project setup and usage instructions +- Use inline comments sparingly, only for complex logic + +## Version Control + +- Use Git for version control +- Write clear and concise commit messages +- Use feature branches for new features and bug fixes +- Rebase branches before merging diff --git a/.github/instructions/astro.instructions.md b/.github/instructions/astro.instructions.md new file mode 100644 index 00000000..45fa2cf5 --- /dev/null +++ b/.github/instructions/astro.instructions.md @@ -0,0 +1,25 @@ +--- +applyTo: "**/*.astro" +--- + +## Project coding standards for Astro + +Apply the [general coding guidelines](./general-coding.instructions.md) to all code. + +## Astro Guidelines + +- Use Astro components for reusable UI elements +- Prefer using Astro's built-in components and features +- Use TypeScript for Astro components when possible +- Follow the Astro file structure conventions +- Use Astro's slot system for component composition +- Keep Astro components small and focused +- Use CSS modules or scoped styles for component styling +- Use Astro's built-in image optimization features +- Use Astro's built-in routing system for navigation +- Use Astro's built-in Markdown support for content + +- Use Astro's built-in data fetching capabilities for dynamic content +- Use Astro's built-in state management features when necessary + +- Follow Astro's best practices for performance optimization diff --git a/.github/instructions/css.instructions.md b/.github/instructions/css.instructions.md new file mode 100644 index 00000000..6e352c5a --- /dev/null +++ b/.github/instructions/css.instructions.md @@ -0,0 +1,31 @@ +--- +applyTo: "**/*.css" +--- + +## Project coding standards for CSS + +Apply the [general coding guidelines](./general-coding.instructions.md) to all code. + +- Use BEM (Block Element Modifier) methodology for class naming +- Use lowercase and hyphens for class names (e.g., `.block__element--modifier`) +- Use meaningful class names that describe the purpose of the element +- Use shorthand properties where applicable (e.g., `margin: 0 auto;` instead of `margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;`) +- Use CSS variables for colors and common values to ensure consistency +- Use comments to explain complex styles or layout decisions +- Use media queries for responsive design, keeping them close to the relevant styles +- Avoid using IDs for styling; prefer classes +- Use grid in place of flex wherever possible for layout instead of floats +- Use `box-sizing: border-box;` to simplify box model calculations +- Use css scroll snap properties for scrollable sections +- writ css in nested structure to improve readability +- Use `rem` or `em` units for font sizes and spacing to ensure scalability +- Use `@import` for modular CSS files, but prefer CSS preprocessors like SASS or LESS for better organization +- Use `:root` for defining global CSS variables +- Use `transition` and `transform` for animations instead of JavaScript where possible +- Use `:hover`, `:focus`, and `:active` pseudo-classes for interactive elements +- Use `@media` queries for responsive design, keeping them close to the relevant styles +- Use `@supports` for feature queries to ensure compatibility with older browsers +- Use `@keyframes` for custom animations, keeping them modular and reusable +- Use `@font-face` for custom fonts, ensuring proper fallbacks +- Use `@layer` for CSS layering to control specificity and avoid conflicts +- Use `@apply` for utility classes in Tailwind CSS or similar frameworks diff --git a/.github/instructions/general-coding.instructions.md b/.github/instructions/general-coding.instructions.md new file mode 100644 index 00000000..9b4d60bb --- /dev/null +++ b/.github/instructions/general-coding.instructions.md @@ -0,0 +1,19 @@ +--- +applyTo: "**" +--- + +# Project general coding standards + +## Naming Conventions + +- Use PascalCase for component names, interfaces, and type aliases +- Use camelCase for variables, functions, and methods +- Prefix private class members with underscore (\_) +- Use ALL_CAPS for constants + +## Error Handling + +- Use try/catch blocks for async operations +- Implement proper error boundaries in React components +- Always log errors with contextual information +- Use custom error classes for specific error types diff --git a/.github/instructions/react.instructions.md b/.github/instructions/react.instructions.md new file mode 100644 index 00000000..7649d86e --- /dev/null +++ b/.github/instructions/react.instructions.md @@ -0,0 +1,23 @@ +--- +applyTo: "**/*.ts,**/*.tsx" +--- + +# Project coding standards for TypeScript and React + +Apply the [general coding guidelines](./general-coding.instructions.md) to all code. + +## TypeScript Guidelines + +- Use TypeScript for all new code +- Follow functional programming principles where possible +- Use interfaces for data structures and type definitions +- Prefer immutable data (const, readonly) +- Use optional chaining (?.) and nullish coalescing (??) operators + +## React Guidelines + +- Use functional components with hooks +- Follow the React hooks rules (no conditional hooks) +- Use React.FC type for components with children +- Keep components small and focused +- Use CSS modules for component styling diff --git a/.gitignore b/.gitignore index abeaedd7..2736ed59 100755 --- a/.gitignore +++ b/.gitignore @@ -31,4 +31,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* pnpm-debug.log* -/.astro/astro/** \ No newline at end of file +/.astro/astro/** + +*.code-workspace diff --git a/.vscode/dictionaries/project-words.txt b/.vscode/dictionaries/project-words.txt index ebf18568..b16ee2fb 100755 --- a/.vscode/dictionaries/project-words.txt +++ b/.vscode/dictionaries/project-words.txt @@ -1,17 +1,27 @@ +abcdkbd argmax argmin +Ashadha +Ashvina astro astrojs astype audiorec audiorecorder avgrah +Barahkhadi +Bhadrapada bincount +Chaitra clsx cmdk +Colour +colours controlslist datetime +Deepavali dhaga +Dussehra ensurepip fontsource frontmatter @@ -19,35 +29,80 @@ getbuffer GSTIN heroicons hidenseek +Holi hookform imread imwrite Jaati +Jayanti jsonify +Jyeshtha +Kartika kmeans linalg lucide +Magha +Margashirsha matras +nameform nodownload Organja orgenja +paksha +panchang +parixan +Pausha Peina +Phalguna prerender Reddy roboto Rushi sanyukat shadcn +Shravana signup sitemapindex skimage sportrop streamlit +sunsign +sunsigns tailwindcss threadzip Threazip +tithi +Vaishakha +varnmala vaul venv Verdana +Vijayadashami waitlist werkzeug +अक्टूबर +अगस्त +अप्रैल +आश्विन +आषाढ़ +कन्या +कर्क +कार्तिक +चैत्र +जनवरी +जुलाई +ज्येष्ठ +तुला +दिसम्बर +नवम्बर +फ़रवरी +फाल्गुन +भाद्रपद +मार्गशीर्ष +मार्च +मिथुन +वृश्चिक +वृषभ +वैशाख +श्रावण +सितम्बर diff --git a/.vscode/mcp.json b/.vscode/mcp.json new file mode 100644 index 00000000..e919966b --- /dev/null +++ b/.vscode/mcp.json @@ -0,0 +1,7 @@ +{ + "servers": { + "my-mcp-server-9d062339": { + "url": "https://api.githubcopilot.com/mcp/" + } + } +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 6eb6b90c..eb0ca7f7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -46,5 +46,26 @@ "css.lint.unknownAtRules": "ignore", "css.lint.unknownProperties": "ignore", "css.hover.documentation": true, - "css.hover.references": true + "css.hover.references": true, + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#e98cf9", + "activityBar.background": "#e98cf9", + "activityBar.foreground": "#15202b", + "activityBar.inactiveForeground": "#15202b99", + "activityBarBadge.background": "#fdf9e1", + "activityBarBadge.foreground": "#15202b", + "commandCenter.border": "#15202b99", + "sash.hoverBorder": "#e98cf9", + "statusBar.background": "#e05bf7", + "statusBar.foreground": "#15202b", + "statusBarItem.hoverBackground": "#d72af5", + "statusBarItem.remoteBackground": "#e05bf7", + "statusBarItem.remoteForeground": "#15202b", + "titleBar.activeBackground": "#e05bf7", + "titleBar.activeForeground": "#15202b", + "titleBar.inactiveBackground": "#e05bf799", + "titleBar.inactiveForeground": "#15202b99", + "sideBar.border": "#e98cf9", + "tab.activeBorder": "#e98cf9" + } } diff --git a/abcd.code-workspace b/abcd.code-workspace index a7e462e4..f190f507 100644 --- a/abcd.code-workspace +++ b/abcd.code-workspace @@ -41,7 +41,7 @@ }, "css.lint.unknownAtRules": "ignore", "debug.javascript.codelens.npmScripts": "never", - "diffEditor.ignoreTrimWhitespace": true, + "diffEditor.ignoreTrimWhitespace": false, "editor.accessibilitySupport": "off", "editor.bracketPairColorization.enabled": true, "editor.codeActionsOnSave": { @@ -60,7 +60,7 @@ "editor.inlayHints.enabled": "offUnlessPressed", "editor.insertSpaces": true, "editor.linkedEditing": true, - "editor.minimap.enabled": false, + "editor.minimap.enabled": true, "editor.minimap.renderCharacters": false, "editor.minimap.size": "fill", "editor.multiCursorModifier": "alt", @@ -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": "#6A3B98", - "prettier.documentSelectors": ["**/*.astro"], + "prettier.documentSelectors": [ + "**/*.astro" + ], "prettier.printWidth": 120, "prettier.quoteProps": "consistent", "prettier.singleQuote": false, @@ -171,6 +192,9 @@ "files.readonlyInclude": { ".githooks/**": true }, - "typescript.preferences.preferGoToSourceDefinition": true + "typescript.preferences.preferGoToSourceDefinition": true, + "[xml]": { + "editor.defaultFormatter": "redhat.vscode-xml" + } } -} +} \ No newline at end of file diff --git a/src/assets/icons/style.css b/docs/.nojekyll similarity index 100% rename from src/assets/icons/style.css rename to docs/.nojekyll diff --git a/docs/README.md b/docs/README.md old mode 100644 new mode 100755 index 1cf84809..55e94973 --- a/docs/README.md +++ b/docs/README.md @@ -1,45 +1,115 @@ -# Docs - -This is alternative location to save your document for a repository. - -## Files Structure +# ABCD KBD + +A Interactive game for kids ; building in Astro + +main codebase for [abcdkbd.com](https://www.abcdkbd.com) + +## The tech Stacks + +- Astro js +- Shadcn for component +- tailwind for styling +- Zustand for state management +- TypeScript for type safety +- Zod for form type safe form validation + +### How To Start + +### pre-requisite + +- Node v 18 or higher +- open vscode and open startup.vscode-workspace file + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +```text +. +├── astro.config.mjs +├── astro-i18next.config.mjs +├── CHANGELOG.MD +├── components.json +├── docs +│   ├── README.md +│   └── pages.md # Documentation for all pages and their functionality +├── jsconfig.json +├── LICENSE +├── package.json +├── package-lock.json +├── postcss.config.js +├── public +│   ├── 192x192.png +│   ├── 512x512.png +│   ├── android-chrome-192x192.png +│   ├── android-chrome-512x512.png +│   ├── apple-touch-icon.png +│   ├── favicon.svg +│   ├── logo-white.svg +│   ├── manifest.webmanifest +│   ├── profile-placeholder.jpg +│   ├── robots.txt +│   ├── sitemap-index.html +├── README.md +├── src +│   ├── assets +│   ├── components +│   ├── content +│   ├── env.d.ts +│   ├── hooks +│   ├── icons +│   ├── layouts +│   ├── libs +│   ├── locales +│   ├── mocks +│   ├── models +│   ├── pages +│   ├── postcss.config.cjs +│   ├── site.config.ts +│   ├── types.ts +│   └── utils +├── tailwind.config.ts +├── todo.md +├── tsconfig.eslint.json +├── tsconfig.json +└── .code-workspace +``` -below are files and folder information in this template repository, you can remove files/folder as per your need. +and src -### inside .vscode folder +## Installation -- `extensions.json` --> recommended vs code extensions. -- `cspell.json` --> used by code spell checker extension. -- `dictionaries/` ---> project specific words can be stored under the files, it is used by code spell checker. -- `javascriptreact.json` --> custom react snippets with keyboard shortcuts for useState `us` and basic component file structure `rfc` -- `pkg.json` --> just a javascript snippet which generate package.json code in any js file and you can use to generate _package.json_ -- `settings.json` --> basic vs code settings; you can use it in your user settings +```bash +npm install +``` -### inside .github folder +### Development -having basic health files and +To start the development server, run: -- `workflows/` --> folder have one GitHub Action which validate markdown files on push +```bash +npm run dev +``` -Apart from that there are few files on project root +### test and lint -- `package.json` --> a sample package.json which need to modify as per your project requirement +run -- `.markdownlint.json` --> file require for markdownlint extension +```sh +npm run lint +``` -- `.template-code-workspace` --> file have few basic and useful vs code settings; you can change as per your project requirement. -- `.editorconfig` --> config regarding files to use tab/space or end of file etc. -- `.prettierrc` --> required config for vscode-prettier extension +### Deployment -### How to run +run in local -although this is just a template repository but added package.json and one file just for fun. +```sh +npm run lint +npm run build +``` -run below command in terminal +and then check with -```bash -> npm install -> npm run start +```sh +npm run preview ``` - -and see the output in terminal. diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 00000000..0c1242ac --- /dev/null +++ b/docs/index.html @@ -0,0 +1,22 @@ + + + + + Document + + + + + + +
+ + + + + diff --git a/docs/pages.md b/guide/pages.md similarity index 100% rename from docs/pages.md rename to guide/pages.md diff --git a/guide/style-guide.md b/guide/style-guide.md new file mode 100644 index 00000000..1cf84809 --- /dev/null +++ b/guide/style-guide.md @@ -0,0 +1,45 @@ +# Docs + +This is alternative location to save your document for a repository. + +## Files Structure + +below are files and folder information in this template repository, you can remove files/folder as per your need. + +### inside .vscode folder + +- `extensions.json` --> recommended vs code extensions. +- `cspell.json` --> used by code spell checker extension. +- `dictionaries/` ---> project specific words can be stored under the files, it is used by code spell checker. +- `javascriptreact.json` --> custom react snippets with keyboard shortcuts for useState `us` and basic component file structure `rfc` +- `pkg.json` --> just a javascript snippet which generate package.json code in any js file and you can use to generate _package.json_ +- `settings.json` --> basic vs code settings; you can use it in your user settings + +### inside .github folder + +having basic health files and + +- `workflows/` --> folder have one GitHub Action which validate markdown files on push + +Apart from that there are few files on project root + +- `package.json` --> a sample package.json which need to modify as per your project requirement + +- `.markdownlint.json` --> file require for markdownlint extension + +- `.template-code-workspace` --> file have few basic and useful vs code settings; you can change as per your project requirement. +- `.editorconfig` --> config regarding files to use tab/space or end of file etc. +- `.prettierrc` --> required config for vscode-prettier extension + +### How to run + +although this is just a template repository but added package.json and one file just for fun. + +run below command in terminal + +```bash +> npm install +> npm run start +``` + +and see the output in terminal. diff --git a/docs/todo.md b/guide/todo.md similarity index 100% rename from docs/todo.md rename to guide/todo.md diff --git a/public/assets/images/background/apple.jpg b/public/assets/images/background/apple.jpg new file mode 100644 index 00000000..937196b0 Binary files /dev/null and b/public/assets/images/background/apple.jpg differ diff --git a/public/assets/images/background/banana.jpg b/public/assets/images/background/banana.jpg new file mode 100644 index 00000000..590e502c Binary files /dev/null and b/public/assets/images/background/banana.jpg differ diff --git a/public/assets/images/background/blank.jpg b/public/assets/images/background/blank.jpg new file mode 100644 index 00000000..b0c2f1c5 Binary files /dev/null and b/public/assets/images/background/blank.jpg differ diff --git a/public/assets/images/background/cat.jpg b/public/assets/images/background/cat.jpg new file mode 100644 index 00000000..05cdda24 Binary files /dev/null and b/public/assets/images/background/cat.jpg differ diff --git a/public/assets/images/background/dog.jpg b/public/assets/images/background/dog.jpg new file mode 100644 index 00000000..9e0eebdd Binary files /dev/null and b/public/assets/images/background/dog.jpg differ diff --git a/public/assets/images/background/elephant.jpg b/public/assets/images/background/elephant.jpg new file mode 100644 index 00000000..7fd8be6a Binary files /dev/null and b/public/assets/images/background/elephant.jpg differ diff --git a/public/assets/images/background/fish.jpg b/public/assets/images/background/fish.jpg new file mode 100644 index 00000000..51c76ba1 Binary files /dev/null and b/public/assets/images/background/fish.jpg differ diff --git a/public/assets/images/background/grapes.jpg b/public/assets/images/background/grapes.jpg new file mode 100644 index 00000000..4d28a90a Binary files /dev/null and b/public/assets/images/background/grapes.jpg differ diff --git a/public/assets/images/background/horse.jpg b/public/assets/images/background/horse.jpg new file mode 100644 index 00000000..3bbd38d8 Binary files /dev/null and b/public/assets/images/background/horse.jpg differ diff --git a/public/assets/images/background/ice-cream.jpg b/public/assets/images/background/ice-cream.jpg new file mode 100644 index 00000000..6c3f7b1d Binary files /dev/null and b/public/assets/images/background/ice-cream.jpg differ diff --git a/public/assets/images/background/jug.jpg b/public/assets/images/background/jug.jpg new file mode 100644 index 00000000..28f2b69c Binary files /dev/null and b/public/assets/images/background/jug.jpg differ diff --git a/public/assets/images/background/kiwi.jpg b/public/assets/images/background/kiwi.jpg new file mode 100644 index 00000000..bc92f46a Binary files /dev/null and b/public/assets/images/background/kiwi.jpg differ diff --git a/public/assets/images/background/lemon.jpg b/public/assets/images/background/lemon.jpg new file mode 100644 index 00000000..535c7686 Binary files /dev/null and b/public/assets/images/background/lemon.jpg differ diff --git a/public/assets/images/background/moon.jpg b/public/assets/images/background/moon.jpg new file mode 100644 index 00000000..8a49cc08 Binary files /dev/null and b/public/assets/images/background/moon.jpg differ diff --git a/public/assets/images/background/night.jpg b/public/assets/images/background/night.jpg new file mode 100644 index 00000000..ca6a2859 Binary files /dev/null and b/public/assets/images/background/night.jpg differ diff --git a/public/assets/images/background/orange.jpg b/public/assets/images/background/orange.jpg new file mode 100644 index 00000000..02ad227c Binary files /dev/null and b/public/assets/images/background/orange.jpg differ diff --git a/public/assets/images/background/pineapple.jpg b/public/assets/images/background/pineapple.jpg new file mode 100644 index 00000000..63e4e258 Binary files /dev/null and b/public/assets/images/background/pineapple.jpg differ diff --git a/public/assets/images/background/queen.jpg b/public/assets/images/background/queen.jpg new file mode 100644 index 00000000..2015d32c Binary files /dev/null and b/public/assets/images/background/queen.jpg differ diff --git a/public/assets/images/background/rose.jpg b/public/assets/images/background/rose.jpg new file mode 100644 index 00000000..f3ee8772 Binary files /dev/null and b/public/assets/images/background/rose.jpg differ diff --git a/public/assets/images/background/strawberry.jpg b/public/assets/images/background/strawberry.jpg new file mode 100644 index 00000000..132efa6f Binary files /dev/null and b/public/assets/images/background/strawberry.jpg differ diff --git a/public/assets/images/background/tomato.jpg b/public/assets/images/background/tomato.jpg new file mode 100644 index 00000000..24308025 Binary files /dev/null and b/public/assets/images/background/tomato.jpg differ diff --git a/public/assets/images/background/umbrella.jpg b/public/assets/images/background/umbrella.jpg new file mode 100644 index 00000000..0a7e6601 Binary files /dev/null and b/public/assets/images/background/umbrella.jpg differ diff --git a/public/assets/images/background/van.jpg b/public/assets/images/background/van.jpg new file mode 100644 index 00000000..ce83a47c Binary files /dev/null and b/public/assets/images/background/van.jpg differ diff --git a/public/assets/images/background/watch.jpg b/public/assets/images/background/watch.jpg new file mode 100644 index 00000000..80101399 Binary files /dev/null and b/public/assets/images/background/watch.jpg differ diff --git a/public/assets/images/background/watermelon.jpg b/public/assets/images/background/watermelon.jpg new file mode 100644 index 00000000..a9b3eab3 Binary files /dev/null and b/public/assets/images/background/watermelon.jpg differ diff --git a/public/assets/images/background/xmas.jpg b/public/assets/images/background/xmas.jpg new file mode 100644 index 00000000..81f964e3 Binary files /dev/null and b/public/assets/images/background/xmas.jpg differ diff --git a/public/assets/images/background/yacht.jpg b/public/assets/images/background/yacht.jpg new file mode 100644 index 00000000..c3ae7ac6 Binary files /dev/null and b/public/assets/images/background/yacht.jpg differ diff --git a/public/assets/images/background/zero.jpg b/public/assets/images/background/zero.jpg new file mode 100644 index 00000000..b96a8a36 Binary files /dev/null and b/public/assets/images/background/zero.jpg differ diff --git a/public/icons/download.svg b/public/icons/floral.svg similarity index 100% rename from public/icons/download.svg rename to public/icons/floral.svg diff --git a/public/map/images/gujrat.webp b/public/map/images/gujarat.webp similarity index 100% rename from public/map/images/gujrat.webp rename to public/map/images/gujarat.webp diff --git a/public/map/svg/Goa.svg b/public/map/svg/Goa.svg index bd60cc2b..e105bc72 100644 --- a/public/map/svg/Goa.svg +++ b/public/map/svg/Goa.svg @@ -1,5 +1,5 @@ + viewBox="0 1220 500 170" xmlns="http://www.w3.org/2000/svg"> - - \ No newline at end of file diff --git a/public/map/svg/states/AndamanandNicobarIslands.svg b/public/map/svg/states/AndamanandNicobarIslands.svg new file mode 100644 index 00000000..9c6b9b6b --- /dev/null +++ b/public/map/svg/states/AndamanandNicobarIslands.svg @@ -0,0 +1,2 @@ + +Nicobar IslandsNorth and Middle AndamanSouth Andaman \ No newline at end of file diff --git a/public/map/svg/states/AndhraPradesh.svg b/public/map/svg/states/AndhraPradesh.svg new file mode 100644 index 00000000..8c476a2f --- /dev/null +++ b/public/map/svg/states/AndhraPradesh.svg @@ -0,0 +1,2 @@ + +AnantapurChittoorEast GodavariGunturKrishnaKurnoolNellorePrakasamSrikakulamVisakhapatnamVizianagaramWest GodavariY.S.R. \ No newline at end of file diff --git a/public/map/svg/states/ArunachalPradesh.svg b/public/map/svg/states/ArunachalPradesh.svg new file mode 100644 index 00000000..5671a975 --- /dev/null +++ b/public/map/svg/states/ArunachalPradesh.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +AnjawChanglangDibang ValleyEast KamengEast SiangKurung KumeyLohitLongdingLower DibangValleyLowerSubansiriNamsaiPapumPareTawangTirapUpper SiangUpper SubansiriWest KamengWest Siang \ No newline at end of file diff --git a/public/map/svg/states/Assam.svg b/public/map/svg/states/Assam.svg new file mode 100644 index 00000000..0229184b --- /dev/null +++ b/public/map/svg/states/Assam.svg @@ -0,0 +1,2 @@ + +BaksaBarpetaBonga.CacharChirangDarrangDhemajiDhubriDibrugarhDima HasaoGoalparaGolaghatHailakandiJorhatKamrupKamrup MetropolitanKarbi AnglongKarimganjKokrajharLakhimpurMorigaonNagaonNalbariSivasagarSonitpurTinsukiaUdalguri \ No newline at end of file diff --git a/public/map/svg/states/Bihar.svg b/public/map/svg/states/Bihar.svg new file mode 100644 index 00000000..b9912099 --- /dev/null +++ b/public/map/svg/states/Bihar.svg @@ -0,0 +1,2 @@ + +ArariaArwalAurangabadBankaBegusaraiBhagalpurBhojpurBuxarDarbhangaGayaGopalganjJamuiJeha.KaimurKatiharKhagariaKishanganjLakhisaraiMadhepuraMadhubaniMungerMuzaffarpurNalandaNawadaPashchimChamparanPatnaPurbaChamparanPurniaRohtasSaharsaSamastipurSaranShei.SheoharSitamarhiSiwanSupaulVaishali \ No newline at end of file diff --git a/public/map/svg/states/Chhattisgarh.svg b/public/map/svg/states/Chhattisgarh.svg new file mode 100644 index 00000000..248c1212 --- /dev/null +++ b/public/map/svg/states/Chhattisgarh.svg @@ -0,0 +1,2 @@ + +BalodBaloda BazarBalrampurBastarBemetaraBijapurBilaspurDantew.DhamtariDurgGariabandJanjgir-C.JashpurKabeerdhamKondagaonKorbaKoriyaMahasamundMungeliNarayanpurRaigarhRaipurRajnandgaonSukmaSurajpurSurgujaUttar Bastar Kanker \ No newline at end of file diff --git a/public/map/svg/states/DadraandNagarHaveliandDamanandDiu.svg b/public/map/svg/states/DadraandNagarHaveliandDamanandDiu.svg new file mode 100644 index 00000000..d2a15e0e --- /dev/null +++ b/public/map/svg/states/DadraandNagarHaveliandDamanandDiu.svg @@ -0,0 +1,10 @@ + + + + + + + \ No newline at end of file diff --git a/public/map/svg/states/Delhi.svg b/public/map/svg/states/Delhi.svg new file mode 100644 index 00000000..65a0a1f2 --- /dev/null +++ b/public/map/svg/states/Delhi.svg @@ -0,0 +1 @@ +West \ No newline at end of file diff --git a/public/map/svg/states/Goa.svg b/public/map/svg/states/Goa.svg new file mode 100644 index 00000000..6b86f9fa --- /dev/null +++ b/public/map/svg/states/Goa.svg @@ -0,0 +1,2 @@ + +North GoaSouth Goa \ No newline at end of file diff --git a/public/map/svg/states/Gujarat.svg b/public/map/svg/states/Gujarat.svg new file mode 100644 index 00000000..56ac259a --- /dev/null +++ b/public/map/svg/states/Gujarat.svg @@ -0,0 +1,2 @@ + +AhmadabadAmreliAnandAravalliBanas KanthaBharuchBhavnagarBotadChhota UdaipurDahodDevbhumi DwarkaGand.Gir SomnathJamnagarJunagadhKachchhKhedaMahesanaMahisagarMorbiNarmadaNavsariPanch M.PatanPorbandarRajkotSabar KanthaSuratSurendranagarTapiThe DangsVadodaraValsad \ No newline at end of file diff --git a/public/map/svg/states/Haryana.svg b/public/map/svg/states/Haryana.svg new file mode 100644 index 00000000..1733cba9 --- /dev/null +++ b/public/map/svg/states/Haryana.svg @@ -0,0 +1,2 @@ + +AmbalaBhiwaniFaridabadFatehabadGurgaonHisarJhajjarJindKaithalKarnalKurukshetraMahendragarhMewatPalwalPanchkulaPanipatRewariRohtakSirsaSonipatYamunanagar \ No newline at end of file diff --git a/public/map/svg/states/HimachalPradesh.svg b/public/map/svg/states/HimachalPradesh.svg new file mode 100644 index 00000000..f6114dcc --- /dev/null +++ b/public/map/svg/states/HimachalPradesh.svg @@ -0,0 +1,2 @@ + +BilaspurChambaHamirpurKangraKinnaurKulluLahul & SpitiMandiShimlaSirmaurSolanUna \ No newline at end of file diff --git a/public/map/svg/states/JammuandKashmir.svg b/public/map/svg/states/JammuandKashmir.svg new file mode 100644 index 00000000..4e6da96b --- /dev/null +++ b/public/map/svg/states/JammuandKashmir.svg @@ -0,0 +1,2 @@ + +AnantnagBadgamBandiporeBaramullaDodaGanderbalJammuKargilKathuaKishtwarKulgamKupwaraLeh (Ladakh)PoonchPulw.RajouriRambanReasiSambaShupiyanSrinagarUdhampur \ No newline at end of file diff --git a/public/map/svg/states/Jharkhand.svg b/public/map/svg/states/Jharkhand.svg new file mode 100644 index 00000000..fdb6f0a1 --- /dev/null +++ b/public/map/svg/states/Jharkhand.svg @@ -0,0 +1,2 @@ + +BokaroChatraDeogharDhanbadDumkaGarhwaGiridihGoddaGumlaHazaribaghJamtaraKhuntiKodarmaLateharLohard.PakurPalamuPashchimiSinghbhumPurbi SinghbhumRamgarhRanchiSahibganjSaraikela-kharsawanSimdega \ No newline at end of file diff --git a/public/map/svg/states/Karnataka.svg b/public/map/svg/states/Karnataka.svg new file mode 100644 index 00000000..9f34c179 --- /dev/null +++ b/public/map/svg/states/Karnataka.svg @@ -0,0 +1,2 @@ + +BagalkotBangaloreB.R.BelgaumBellaryBidarBijapurChamrajnagarChikballapuraChikmagalurChitradurgaD.KannadaDavanagereDhar.GadagGulbargaHassanHaveriKodaguKolarKoppalMandyaMysoreRaichurRamanagaraShimogaTumkurUdupiUttara KannadaYadgir \ No newline at end of file diff --git a/public/map/svg/states/Kerala.svg b/public/map/svg/states/Kerala.svg new file mode 100644 index 00000000..890948df --- /dev/null +++ b/public/map/svg/states/Kerala.svg @@ -0,0 +1,2 @@ + +AlappuzhaErnakulamIdukkiKannurKasaragodKollamKott.KozhikodeMalappuramPalakkadPathanamthittaThiruvananthapuramThrissurWayanad \ No newline at end of file diff --git a/public/map/svg/states/Ladakh.svg b/public/map/svg/states/Ladakh.svg new file mode 100644 index 00000000..278ca13a --- /dev/null +++ b/public/map/svg/states/Ladakh.svg @@ -0,0 +1,8 @@ + + + Ladakh \ No newline at end of file diff --git a/public/map/svg/states/Lakshadweep.svg b/public/map/svg/states/Lakshadweep.svg new file mode 100644 index 00000000..ab210b85 --- /dev/null +++ b/public/map/svg/states/Lakshadweep.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/map/svg/states/MadhyaPradesh.svg b/public/map/svg/states/MadhyaPradesh.svg new file mode 100644 index 00000000..3f2c6ef6 --- /dev/null +++ b/public/map/svg/states/MadhyaPradesh.svg @@ -0,0 +1,2 @@ + +Agar M.AlirajpurAnuppurAshokn.BalaghatBarwaniBetulBhindBhopalBurhanpurChhatarpurChhindwaraDamohDatiaDewasDharDindoriE.NimarGunaGwaliorHardaHoshangabadIndoreJabalpurJhabuaKatniMandlaMandsaurMorenaNarsimhapurNeemuchPannaRaisenRajgarhRatlamRewaSagarSatnaSehoreSeoniShahdolShajapurSheopurShivpuriSidhiSingrauliTikamgarhUjjainUmariaVidishaW.Nimar \ No newline at end of file diff --git a/public/map/svg/states/Maharashtra.svg b/public/map/svg/states/Maharashtra.svg new file mode 100644 index 00000000..bee6d19f --- /dev/null +++ b/public/map/svg/states/Maharashtra.svg @@ -0,0 +1,2 @@ + +AhmadnagarAkolaAmravatiAurangabadBhandaraBidBuldanaChandrapurDhuleGarhchiroliGondiyaHingoliJalgaonJalnaKolhapurLaturMumbai CityMumbai SuburbanNagpurNandedNandurbarNashikOsmanabadPalgharParbhaniPuneRaigarhRatnagiriSangliSataraSindhudurgSolapurThaneWardhaWashimYavatmal \ No newline at end of file diff --git a/public/map/svg/states/Manipur.svg b/public/map/svg/states/Manipur.svg new file mode 100644 index 00000000..8693a79b --- /dev/null +++ b/public/map/svg/states/Manipur.svg @@ -0,0 +1,2 @@ + +BishnupurChandelChurachandpurImphal E.Imphal W.SenapatiTamenglongThoubalUkhrul \ No newline at end of file diff --git a/public/map/svg/states/Meghalaya.svg b/public/map/svg/states/Meghalaya.svg new file mode 100644 index 00000000..e1a2ce01 --- /dev/null +++ b/public/map/svg/states/Meghalaya.svg @@ -0,0 +1,2 @@ + +East Garo HillsEast Khasi HillsJaintia HillsN.Garo HillsRi BhoiSouth Garo HillsS.West Garo HillsS.West Khasi HillsWest Garo HillsWest Khasi Hills \ No newline at end of file diff --git a/public/map/svg/states/Mizoram.svg b/public/map/svg/states/Mizoram.svg new file mode 100644 index 00000000..48fab6c2 --- /dev/null +++ b/public/map/svg/states/Mizoram.svg @@ -0,0 +1,3 @@ + + +AizawlChamphaiKolasibLawangtlaiLungleiMamitSaihaSerchhip \ No newline at end of file diff --git a/public/map/svg/states/Nagaland.svg b/public/map/svg/states/Nagaland.svg new file mode 100644 index 00000000..d116eff7 --- /dev/null +++ b/public/map/svg/states/Nagaland.svg @@ -0,0 +1,2 @@ + +DimapurKiphireKohimaLonglengMokokchungMonPerenPhekTuensangWokhaZunheboto \ No newline at end of file diff --git a/public/map/svg/states/Odisha.svg b/public/map/svg/states/Odisha.svg new file mode 100644 index 00000000..f1748e0c --- /dev/null +++ b/public/map/svg/states/Odisha.svg @@ -0,0 +1,2 @@ + +AnugulBalangirBaleshwarBargarhBaudaBhadrakCuttackDebagarhDhenkanalGajapatiGanjamJagatsinghapurJajapurJharsugudaKalahandiKandhamalKendraparaKendujharKhordhaKoraputMalkangiriMayurbhanjNabarangapurNayagarhNuapadaPuriRayagadaSambalpurSubarn.Sundargarh \ No newline at end of file diff --git a/public/map/svg/states/Puducherry.svg b/public/map/svg/states/Puducherry.svg new file mode 100644 index 00000000..55041472 --- /dev/null +++ b/public/map/svg/states/Puducherry.svg @@ -0,0 +1,3 @@ + + +Puducherry \ No newline at end of file diff --git a/public/map/svg/states/Punjab.svg b/public/map/svg/states/Punjab.svg new file mode 100644 index 00000000..38502f6a --- /dev/null +++ b/public/map/svg/states/Punjab.svg @@ -0,0 +1,2 @@ + +AmritsarBarnalaBathindaFaridkotF.SahibFazilkaFirozpurGurdaspurHoshiarpurJalandharKapurthalaLudhianaMansaMogaMuktsarPathankotPatialaRupnagarSahibzada AjitSingh NagarSangrurS.B.S.NagarTarn Taran \ No newline at end of file diff --git a/public/map/svg/states/Rajasthan.svg b/public/map/svg/states/Rajasthan.svg new file mode 100644 index 00000000..7d014a54 --- /dev/null +++ b/public/map/svg/states/Rajasthan.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + +Ajmer +AlwarBanswaraBaranBarmerBharatpurBhilwaraBikanerBundiChitta.ChuruDausaDhaulpurDungarpurGanganagarHanumangarhJaipurJaisalmerJalorJhalawarJhunjhununJodhpurKarauliKotaNagaurPaliPratapgarhRajsam.Sawai MadhopurSikarSirohiTonkUdaipur \ No newline at end of file diff --git a/public/map/svg/states/Sikkim.svg b/public/map/svg/states/Sikkim.svg new file mode 100644 index 00000000..c1dfddd1 --- /dev/null +++ b/public/map/svg/states/Sikkim.svg @@ -0,0 +1,2 @@ + +East SikkimNorth SikkimSouth SikkimWest Sikkim \ No newline at end of file diff --git a/public/map/svg/states/TamilNadu.svg b/public/map/svg/states/TamilNadu.svg new file mode 100644 index 00000000..3eb13885 --- /dev/null +++ b/public/map/svg/states/TamilNadu.svg @@ -0,0 +1,2 @@ + +AriyalurChennaiCoimbatoreCuddaloreDharmapuriDindigulErodeKancheepuramKanniyakumariKarurKrishnagiriMaduraiNagappattinamNamakkalPeram.PudukkottaiRamanathapuramSalemSivagangaThanjavurThe NilgirisTheniThiruvallurThiruvarurThoothukkudiTiruchirap.TirunelveliTiruppurTiruvannamalaiVelloreViluppuramVirudunagar \ No newline at end of file diff --git a/public/map/svg/states/Telangana.svg b/public/map/svg/states/Telangana.svg new file mode 100644 index 00000000..1066e9ff --- /dev/null +++ b/public/map/svg/states/Telangana.svg @@ -0,0 +1,2 @@ + +AnantapurChittoorEast GodavariGunturKrishnaKurnoolNellorePrakasamSrikakulamVisakhapatnamVizianagaramW.GodavariY.S.R.AdilabadKarimnagarKhammamMahbubnagarMedakNalgondaNizamabadRanga ReddyWarangal \ No newline at end of file diff --git a/public/map/svg/states/Tripura.svg b/public/map/svg/states/Tripura.svg new file mode 100644 index 00000000..72d25d3b --- /dev/null +++ b/public/map/svg/states/Tripura.svg @@ -0,0 +1,2 @@ + +DhalaiGomatiKhowaiNorth TripuraSipahijalaSouth TripuraUnokotiW.Tripura \ No newline at end of file diff --git a/public/map/svg/states/UttarPradesh.svg b/public/map/svg/states/UttarPradesh.svg new file mode 100644 index 00000000..ed9479ff --- /dev/null +++ b/public/map/svg/states/UttarPradesh.svg @@ -0,0 +1,2 @@ + +AgraAligarhAllahabadAmbed.AmethiAmro.AuraiyaAzamgarhBaghpatBahraichBalliaBalrampurBandaBarabankiBareillyBastiBijnorBudaunBuland.ChandauliChitrakootDeoriaEtahEtaw.Faiz.Farruk.FatehpurFirozabadG.Buddha NagarGhaziabadGhazipurGondaGorakh.HamirpurHapurHardoiHathrasJalaunJaunpurJhansiKann.K.DehatK.NagarKasganjKaush.KushinagarLakhimpur KheriLalitpurLucknowMaharajganjMahobaMainpuriMathuraMauMeerutMirzapurMoradabadMuzaffarnagarPilibhitPratapgarhRae B.RampurSaharanpurSambhalSant K.SantShahjahanpurShamliShravastiSiddharth NagarSitapurSonbhadraSultan.UnnaoVara. \ No newline at end of file diff --git a/public/map/svg/states/Uttarakhand.svg b/public/map/svg/states/Uttarakhand.svg new file mode 100644 index 00000000..a82b4488 --- /dev/null +++ b/public/map/svg/states/Uttarakhand.svg @@ -0,0 +1,2 @@ + +AlmoraBageshwarChamoliChampawatDehradunGarhwalHardwarNainitalPithoragarhRudrap.Tehri GarhwalU.Singh NagarUttarkashi \ No newline at end of file diff --git a/public/map/svg/states/WestBengal.svg b/public/map/svg/states/WestBengal.svg new file mode 100644 index 00000000..721dc1aa --- /dev/null +++ b/public/map/svg/states/WestBengal.svg @@ -0,0 +1,2 @@ + +AlipurduarBankuraBarddhamanBirbhumDakshin DinajpurDarjilingHaoraHugliJalpaiguriKoch BiharKolkataMaldahMurshidabadNadiaN. 24 ParganasPashchim.M.Purba M.PuruliyaS. 24 ParganasUttar Dinajpur \ No newline at end of file diff --git a/src/assets/icons/back.svg b/src/assets/icons/back.svg index 7b14223d..200947af 100644 --- a/src/assets/icons/back.svg +++ b/src/assets/icons/back.svg @@ -1,13 +1,12 @@ - - \ No newline at end of file + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" +> + Back icon + + \ No newline at end of file diff --git a/src/assets/icons/canvas-icon.svg b/src/assets/icons/canvas-icon.svg new file mode 100644 index 00000000..24968457 --- /dev/null +++ b/src/assets/icons/canvas-icon.svg @@ -0,0 +1,17 @@ + + canvas + + + + \ No newline at end of file diff --git a/src/assets/icons/circle.svg b/src/assets/icons/circle.svg index 24cfab6b..d673542b 100644 --- a/src/assets/icons/circle.svg +++ b/src/assets/icons/circle.svg @@ -1,22 +1,22 @@ - - - A - - \ No newline at end of file + + + A + + \ No newline at end of file diff --git a/src/assets/icons/color1.svg b/src/assets/icons/color1.svg new file mode 100644 index 00000000..b385eb09 --- /dev/null +++ b/src/assets/icons/color1.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/color2.svg b/src/assets/icons/color2.svg new file mode 100644 index 00000000..4c37c309 --- /dev/null +++ b/src/assets/icons/color2.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/color3.svg b/src/assets/icons/color3.svg new file mode 100644 index 00000000..a85f48fc --- /dev/null +++ b/src/assets/icons/color3.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/color4.svg b/src/assets/icons/color4.svg new file mode 100644 index 00000000..f54bbe8f --- /dev/null +++ b/src/assets/icons/color4.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/copy.svg b/src/assets/icons/copy.svg index d9a4b3b4..647513ed 100644 --- a/src/assets/icons/copy.svg +++ b/src/assets/icons/copy.svg @@ -1,4 +1,5 @@ - + - + \ No newline at end of file diff --git a/src/assets/icons/download.svg b/src/assets/icons/download.svg new file mode 100644 index 00000000..a010a1fd --- /dev/null +++ b/src/assets/icons/download.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/grid-game-icon.svg b/src/assets/icons/grid-game-icon.svg new file mode 100644 index 00000000..dcf6ca74 --- /dev/null +++ b/src/assets/icons/grid-game-icon.svg @@ -0,0 +1,10 @@ + + grid + + + + \ No newline at end of file diff --git a/src/assets/icons/ham.svg b/src/assets/icons/ham.svg index 787bba68..d70eaced 100644 --- a/src/assets/icons/ham.svg +++ b/src/assets/icons/ham.svg @@ -1,6 +1,6 @@ + fill="current" viewBox="0 0 100 80"> Hamburger Menu diff --git a/src/assets/icons/image.svg b/src/assets/icons/image.svg new file mode 100644 index 00000000..1f41239e --- /dev/null +++ b/src/assets/icons/image.svg @@ -0,0 +1,4 @@ + +Image + + \ No newline at end of file diff --git a/src/assets/icons/keyboard-game-icon.svg b/src/assets/icons/keyboard-game-icon.svg new file mode 100644 index 00000000..e27750de --- /dev/null +++ b/src/assets/icons/keyboard-game-icon.svg @@ -0,0 +1,19 @@ + + keyboard + + + + + + + + + \ No newline at end of file diff --git a/src/assets/icons/queue.svg b/src/assets/icons/queue.svg new file mode 100644 index 00000000..ab36c061 --- /dev/null +++ b/src/assets/icons/queue.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/assets/icons/quote-icon.svg b/src/assets/icons/quote-icon.svg new file mode 100644 index 00000000..4554c617 --- /dev/null +++ b/src/assets/icons/quote-icon.svg @@ -0,0 +1,12 @@ + + Quote + + + + + + \ No newline at end of file diff --git a/src/assets/icons/reset.svg b/src/assets/icons/reset.svg new file mode 100644 index 00000000..5d61d757 --- /dev/null +++ b/src/assets/icons/reset.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/icons/stack.svg b/src/assets/icons/stack.svg new file mode 100644 index 00000000..981a073c --- /dev/null +++ b/src/assets/icons/stack.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/json/state.json b/src/assets/json/state.json index b4582f32..c0f042c0 100644 --- a/src/assets/json/state.json +++ b/src/assets/json/state.json @@ -11,7 +11,25 @@ "wikiLink": "https://en.wikipedia.org/wiki/Andhra_Pradesh", "official_website": "https://www.ap.gov.in", "isActive": true, - "alternate_dance": "Kuchipudi Dance" + "alternate_dance": "Kuchipudi Dance", + "famous_quote": "Sankranti Subhakankshalu", + "famous_person": "Potti Sreeramulu", + "famous_food": "Pulihora", + "famous_place": "Tirupati", + "famous_dress": "Dhoti and Saree", + "famous_language": "Telugu", + "famous_sport": "Kabaddi", + "state_color": "", + "state_animal": "", + "state_flower": "Jasmine", + "surface_area": 162968, + "districts_count": 26, + "largest_city": "Visakhapatnam", + "capital": "Amaravati", + "population": 53903393, + "literacy_rate": 67.35, + "languages": ["Telugu", "Urdu", "Hindi"], + "major_rivers": ["Krishna", "Godavari", "Penna", "Vamsadhara"] }, { "id": "assam", @@ -24,7 +42,26 @@ "svg": "Assam.svg", "wikiLink": "https://en.wikipedia.org/wiki/Assam", "official_website": "https://assam.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Bagurumba", + "famous_quote": "Joi Aai Axom", + "famous_person": "Bhupen Hazarika", + "famous_food": "Masor Tenga", + "famous_place": "Kaziranga National Park", + "famous_dress": "Mekhela Chador", + "famous_language": "Assamese", + "famous_sport": "Dhopkhel", + "state_color": "", + "state_animal": "One-horned rhinoceros", + "state_flower": "Foxtail Orchid", + "surface_area": 78438, + "districts_count": 35, + "largest_city": "Guwahati", + "capital": "Dispur", + "population": 31205576, + "literacy_rate": 72.19, + "languages": ["Assamese", "Boro", "Bengali", "Meitei"], + "major_rivers": ["Brahmaputra", "Barak", "Subansiri", "Manas"] }, { "id": "arunachalpradesh", @@ -38,7 +75,58 @@ "wikiLink": "https://en.wikipedia.org/wiki/Arunachal_Pradesh", "official_website": "https://arunachalpradesh.gov.in", "isActive": true, - "alternate_dance": "Bari Dance" + "alternate_dance": "Bari Dance", + "famous_quote": "Land of the Dawn-Lit Mountains", + "famous_person": "Tsangyang Gyatso", + "famous_food": "Thukpa", + "famous_place": "Tawang Monastery", + "famous_dress": "Hand-woven garments with geometric patterns", + "famous_language": "Nyishi", + "famous_sport": "Archery", + "state_color": "", + "state_animal": "Mithun", + "state_flower": "Foxtail orchid", + "surface_area": 83743, + "districts_count": 28, + "largest_city": "Itanagar", + "capital": "Itanagar", + "population": 1383727, + "literacy_rate": 65.38, + "languages": ["Nyishi", "Apatani", "Bokar", "Galo", "Tagin", "Adi"], + "major_rivers": ["Kameng", "Subansiri", "Siang", "Dibang", "Lohit"] + }, + { + "id": "bihar", + "state_id": 4, + "name": "Bihar", + "dance": "Jat-Jatin", + "festival": "Chhath Puja", + "description": "Jat-Jatin is a popular folk dance of North Bihar, especially in the Mithila and Koshi regions.", + "image": "bihar.webp", + "svg": "Bihar.svg", + "wikiLink": "https://en.wikipedia.org/wiki/Bihar", + "official_website": "https://state.bihar.gov.in/", + "isActive": true, + "alternate_dance": "Bidesia", + "famous_quote": "Bihar is not just a state; it is a civilization that has shaped India's past, present, and future.", + "famous_person": "Aryabhata", + "famous_food": "Litti Chokha", + "famous_place": "Mahabodhi Temple", + "famous_dress": "Dhoti-Kurta and Saree", + "famous_language": "Hindi", + "famous_sport": "Kabaddi", + "state_color": "", + "state_animal": "Gaur", + "state_flower": "Kachnar", + "state_tree": "Peepal tree", + "surface_area": 94163, + "districts_count": 38, + "largest_city": "Patna", + "capital": "Patna", + "population": 104099452, + "literacy_rate": 61.8, + "languages": ["Hindi", "Bhojpuri", "Maithili", "Magahi"], + "major_rivers": ["Ganges", "Son", "Gandak", "Kosi"] }, { "id": "telangana", @@ -51,21 +139,124 @@ "svg": "Telangana.svg", "wikiLink": "https://en.wikipedia.org/wiki/Telangana", "official_website": "https://www.telangana.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Perini Sivatandavam", + "famous_quote": "Telangana's formation symbolizes the triumph of unity, resilience, and aspirations.", + "famous_person": "PV Narasimha Rao", + "famous_food": "Hyderabadi Biryani", + "famous_place": "Charminar", + "famous_dress": "Langa Voni", + "famous_language": "Telugu", + "famous_sport": "Kabaddi", + "state_color": "Green", + "state_animal": "Spotted deer (Jinka)", + "state_flower": "Tangedu Puvvu (Senna auriculata)", + "surface_area": "112,077 km²", + "districts_count": 33, + "largest_city": "Hyderabad", + "capital": "Hyderabad", + "population": "35,190,000", + "literacy_rate": "66.54%", + "languages": ["Telugu", "Urdu"], + "major_rivers": ["Godavari", "Krishna", "Musi", "Bhima", "Manjira"] + }, + { + "id": "gujarat", + "state_id": 7, + "name": "Gujarat", + "dance": "Garba", + "festival": "Navratri", + "description": "Garba is a traditional folk dance from Gujarat, performed during the Navratri festival.", + "image": "gujarat.webp", + "svg": "Gujarat.svg", + "wikiLink": "https://en.wikipedia.org/wiki/Gujarat", + "official_website": "https://gujaratindia.gov.in", + "isActive": true, + "alternate_dance": "Dandiya Raas", + "famous_quote": "Jai Jai Garvi Gujarat", + "famous_person": "Mahatma Gandhi", + "famous_food": "Dhokla", + "famous_place": "Statue of Unity", + "famous_dress": "Chaniya Choli and Kediyu", + "famous_language": "Gujarati", + "famous_sport": "Cricket", + "state_color": "Saffron", + "state_animal": "Asiatic Lion", + "state_flower": "Marigold", + "state_tree": "Banyan", + "surface_area": 196024, + "districts_count": 33, + "largest_city": "Ahmedabad", + "capital": "Gandhinagar", + "population": 63872399, + "literacy_rate": 78.03, + "languages": ["Gujarati", "Hindi", "English"], + "major_rivers": ["Narmada", "Tapi", "Sabarmati", "Mahi"] }, { "id": "chhattisgarh", "state_id": 5, "name": "Chhattisgarh", - "dance": "Panthi Dance", + "dance": "Raut Nacha", "festival": "Bastar Dussehra", - "description": "Panthi Dance is a traditional dance performed by the Satnami community of Chhattisgarh.", + "description": "Raut Nacha is a traditional folk dance of Chhattisgarh, performed by the Yadav community, which is a depiction of the mythological battle between King Kansa and Lord Krishna.", "image": "chhatisgarh.webp", "svg": "Chhatisgarh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Chhattisgarh", "official_website": "https://www.cgstate.gov.in", "isActive": true, - "alternate_dance": "Raut Nacha" + "alternate_dance": "Panthi Dance", + "famous_quote": "Chhattisgarhiya Sable Badhiya", + "famous_person": "Pandit Sundarlal Sharma", + "famous_food": "Chila", + "famous_place": "Chitrakote Falls", + "famous_dress": "Lugda saree with a Polkha blouse", + "famous_language": "Chhattisgarhi", + "famous_sport": "Kabaddi", + "state_color": "", + "state_animal": "Wild water buffalo", + "state_flower": "French marigold", + "state_tree": "Sal", + "surface_area": 135192, + "districts_count": 33, + "largest_city": "Raipur", + "capital": "Raipur", + "population": 25540196, + "literacy_rate": 70.28, + "languages": ["Chhattisgarhi", "Hindi"], + "major_rivers": ["Mahanadi", "Indravati", "Arpa", "Pairi", "Hasdo", "Shivnath"] + }, + { + "id": "goa", + "state_id": 6, + "name": "Goa", + "dance": "Fugdi", + "festival": "Goa Carnival", + "description": "Fugdi is a traditional folk dance performed by women in Goa during festivals like Ganesh Chaturthi.", + "image": "goa.webp", + "svg": "Goa.svg", + "wikiLink": "https://en.wikipedia.org/wiki/Goa", + "official_website": "https://www.goa.gov.in/", + "isActive": true, + "alternate_dance": "Dekhni", + "famous_quote": "Goa is India's version of paradise.", + "famous_person": "Mario Miranda", + "famous_food": "Bebinca", + "famous_place": "Baga Beach", + "famous_dress": "Pano Bhaju", + "famous_language": "Konkani", + "famous_sport": "Football", + "state_color": "", + "state_animal": "Gaur", + "state_flower": "Jasmine", + "surface_area": 3702, + "districts_count": 2, + "largest_city": "Vasco da Gama", + "capital": "Panaji", + "population": 1458545, + "literacy_rate": 88.7, + "languages": ["Konkani", "Marathi", "English", "Hindi"], + "major_rivers": ["Mandovi", "Zuari", "Terekhol", "Chapor"] }, { "id": "delhi", @@ -78,7 +269,27 @@ "svg": "Delhi.svg", "wikiLink": "https://en.wikipedia.org/wiki/Delhi", "official_website": "https://delhi.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Kathak", + "famous_quote": "Dilli dilwalon ki", + "famous_person": "Sheikh Abdullah", + "famous_food": "Chaat", + "famous_place": "India Gate", + "famous_dress": "Kurta–pyjama and saree with shawl", + "famous_language": "Hindi", + "famous_sport": "Cricket", + "state_color": "Blue", + "state_animal": "Blackbuck", + "state_flower": "Lotus", + "state_tree": "Amaltas", + "surface_area": 1483, + "districts_count": 11, + "largest_city": "Delhi (the NCT itself)", + "capital": "New Delhi", + "population": 16753235, + "literacy_rate": 86.21, + "languages": ["Hindi", "English", "Punjabi", "Urdu"], + "major_rivers": ["Yamuna", "Hindon"] }, { "id": "dadraandnagarhavelianddamananddiu", @@ -86,38 +297,31 @@ "name": "Dadra and Nagar Haveli and Daman and Diu", "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.", + "description": "This union territory is known for its blend of tribal heritage and Portuguese colonial architecture, scenic beaches, and vibrant traditional dances like Tarpa and Mando.", "image": "dadar.webp", "svg": "DadraNagarHaveliDamanDiu.svg", "wikiLink": "https://en.wikipedia.org/wiki/Dadra_and_Nagar_Haveli_and_Daman_and_Diu", "official_website": "https://ddd.gov.in", - "isActive": true - }, - { - "id": "goa", - "state_id": 6, - "name": "Goa", - "dance": "Dekhnni", - "festival": "Carnival", - "description": "Dekhnni is a semi-classical Goan dance form that blends Indian and Western influences.", - "image": "goa.webp", - "svg": "Goa.svg", - "wikiLink": "https://en.wikipedia.org/wiki/Goa", - "official_website": "https://www.goa.gov.in", - "isActive": true - }, - { - "id": "gujarat", - "state_id": 7, - "name": "Gujarat", - "dance": "Garba", - "festival": "Navratri", - "description": "Garba is a popular folk dance of Gujarat performed during the Navratri festival.", - "image": "gujrat.webp", - "svg": "Gujrat.svg", - "wikiLink": "https://en.wikipedia.org/wiki/Gujarat", - "official_website": "https://gujaratindia.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Mando and Verdigao Dance", + "famous_quote": "", + "famous_person": "Jaikishan (of Shankar–Jaikishan music duo)", + "famous_food": "Ubadiyu", + "famous_place": "Diu Fort", + "famous_dress": "Ghaghra-blouse-odhani for women; dhoti or pajama with kurta/shirt for men", + "famous_language": "Gujarati", + "famous_sport": "Cricket", + "state_color": "", + "state_animal": "", + "state_flower": "", + "surface_area": 603, + "districts_count": 3, + "largest_city": "Silvassa", + "capital": "Daman", + "population": 585764, + "literacy_rate": 87.8, + "languages": ["Gujarati", "Hindi", "Marathi", "English"], + "major_rivers": ["Daman Ganga"] }, { "id": "kerala", @@ -125,13 +329,31 @@ "name": "Kerala", "dance": "Kathakali", "festival": "Onam", - "description": "Kathakali is a classical Indian dance form known for its elaborate costumes and expressive gestures.", + "description": "Kathakali is a classical dance-drama known for its vivid makeup, colorful costumes, and expressive storytelling.", "image": "kerala.webp", "svg": "Kerala.svg", "wikiLink": "https://en.wikipedia.org/wiki/Kerala", "official_website": "https://kerala.gov.in", "isActive": true, - "alternate_dance": "Mohiniyattam" + "alternate_dance": "Mohiniyattam", + "famous_quote": "God’s Own Country", + "famous_person": "E. Sreedharan", + "famous_food": "Sadya, Kerala Parotta with Beef Fry", + "famous_place": "Alleppey Backwaters", + "famous_dress": "Mundu, Kasavu Saree", + "famous_language": "Malayalam", + "famous_sport": "Boat Racing", + "state_color": "N/A", + "state_animal": "Indian Elephant", + "state_flower": "Golden Shower", + "surface_area": 38863, + "districts_count": 14, + "largest_city": "Kochi", + "capital": "Thiruvananthapuram", + "population": 35699443, + "literacy_rate": 94.0, + "languages": ["Malayalam", "Tamil", "English"], + "major_rivers": ["Periyar", "Bharathapuzha", "Pamba", "Chaliyar"] }, { "id": "karnataka", @@ -139,12 +361,31 @@ "name": "Karnataka", "dance": "Yakshagana", "festival": "Dasara", - "description": "Yakshagana is a traditional theatre form that combines dance, music, and dialogue in Karnataka.", + "description": "Yakshagana is a unique dance-theatre performance from coastal Karnataka, blending music, dance, and storytelling. Dollu Kunitha is a vigorous drum-based folk dance performed by men in traditional attire.", "image": "karnataka.webp", "svg": "Karnataka.svg", "wikiLink": "https://en.wikipedia.org/wiki/Karnataka", "official_website": "https://karnataka.gov.in/english", - "isActive": true + "isActive": true, + "alternate_dance": "Dollu Kunitha", + "famous_quote": "One State, Many Worlds", + "famous_person": "Sir M. Visvesvaraya", + "famous_food": "Bisi Bele Bath, Mysore Pak", + "famous_place": "Hampi", + "famous_dress": "Panche, Ilkal Saree", + "famous_language": "Kannada", + "famous_sport": "Kabaddi", + "state_color": "Red and Yellow", + "state_animal": "Indian Elephant", + "state_flower": "Lotus", + "surface_area": 191791, + "districts_count": 31, + "largest_city": "Bengaluru", + "capital": "Bengaluru", + "population": 67562686, + "literacy_rate": 75.36, + "languages": ["Kannada", "Tulu", "Konkani", "Urdu", "English"], + "major_rivers": ["Krishna", "Cauvery (Kaveri)", "Tungabhadra", "Sharavathi"] }, { "id": "maharashtra", @@ -152,12 +393,31 @@ "name": "Maharashtra", "dance": "Lavani", "festival": "Ganesh Chaturthi", - "description": "Lavani is a popular folk dance form of Maharashtra, known for its rhythm and vibrant performance.", + "description": "Lavani is a traditional folk dance known for its powerful rhythm and expressive storytelling. Koli Dance is performed by the fisherfolk of coastal Maharashtra, reflecting their lifestyle.", "image": "maharashtra.webp", "svg": "Maharashtra.svg", "wikiLink": "https://en.wikipedia.org/wiki/Maharashtra", "official_website": "http://www.maharashtra.gov.in/", - "isActive": true + "isActive": true, + "alternate_dance": "Koli Dance", + "famous_quote": "Jai Maharashtra", + "famous_person": "Dr. B. R. Ambedkar", + "famous_food": "Vada Pav, Puran Poli, Misal Pav", + "famous_place": "Ajanta and Ellora Caves", + "famous_dress": "Nauvari Saree (women), Dhoti-Kurta with Pheta (men)", + "famous_language": "Marathi", + "famous_sport": "Kabaddi", + "state_color": "Saffron", + "state_animal": "Indian Giant Squirrel", + "state_flower": "Jarul (Pride of India)", + "surface_area": 307713, + "districts_count": 36, + "largest_city": "Mumbai", + "capital": "Mumbai", + "population": 123144223, + "literacy_rate": 82.34, + "languages": ["Marathi", "Hindi", "English", "Konkani"], + "major_rivers": ["Godavari", "Krishna", "Bhima", "Tapi"] }, { "id": "madhyapradesh", @@ -165,13 +425,31 @@ "name": "Madhya Pradesh", "dance": "Matki Dance", "festival": "Lokrang Festival", - "description": "Matki Dance is a traditional folk dance performed by women during celebrations in Madhya Pradesh.", + "description": "Matki Dance is a graceful folk dance where women balance earthen pots (matkis) on their heads while performing rhythmic movements.", "image": "madhyapradesh.webp", "svg": "MadhyaPradesh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Madhya_Pradesh", "official_website": "https://www.mp.gov.in", "isActive": true, - "alternate_dance": "Tertali Dance" + "alternate_dance": "Tertali Dance", + "famous_quote": "The Heart of Incredible India", + "famous_person": "Rani Ahilyabai Holkar", + "famous_food": "Poha-Jalebi, Bhutte ka Kees, Dal Bafla", + "famous_place": "Khajuraho Temples", + "famous_dress": "Lugda and blouse with Odhni", + "famous_language": "Hindi", + "famous_sport": "Malkhamb", + "state_color": "N/A", + "state_animal": "Barasingha", + "state_flower": "White Lily", + "surface_area": 308350, + "districts_count": 55, + "largest_city": "Indore", + "capital": "Bhopal", + "population": 86484569, + "literacy_rate": 70.63, + "languages": ["Hindi", "Bundeli", "Malvi", "Nimadi", "Gondi"], + "major_rivers": ["Narmada", "Tapi", "Chambal", "Betwa", "Son"] }, { "id": "odisha", @@ -179,12 +457,31 @@ "name": "Odisha", "dance": "Odissi", "festival": "Rath Yatra", - "description": "Odissi is one of the eight classical dance forms of India, originating from Odisha.", + "description": "Odissi is one of India’s eight classical dance forms, deeply rooted in temple rituals and sculptures. Ghumura Dance is a warrior tribal dance with drums and symbolic masks.", "image": "odisha.webp", "svg": "Odisha.svg", "wikiLink": "https://en.wikipedia.org/wiki/Odisha", "official_website": "https://www.odisha.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Ghumura Dance", + "famous_quote": "Jai Jagannath", + "famous_person": "Biju Patnaik", + "famous_food": "Dahi Pakhala, Dalma, Rasgulla", + "famous_place": "Konark Sun Temple", + "famous_dress": "Sambalpuri Saree, Dhoti & Kurta", + "famous_language": "Odia", + "famous_sport": "Hockey", + "state_color": "N/A", + "state_animal": "Sambar Deer", + "state_flower": "Ashoka Flower", + "surface_area": 155707, + "districts_count": 30, + "largest_city": "Bhubaneswar", + "capital": "Bhubaneswar", + "population": 46356334, + "literacy_rate": 72.87, + "languages": ["Odia", "Hindi", "English", "Sambalpuri", "Santali"], + "major_rivers": ["Mahanadi", "Brahmani", "Baitarani", "Rushikulya"] }, { "id": "westbengal", @@ -192,12 +489,31 @@ "name": "West Bengal", "dance": "Chhau Dance", "festival": "Durga Puja", - "description": "Chhau Dance is a semi-classical dance form performed during festivals in West Bengal.", + "description": "Chhau Dance is a traditional masked dance combining martial arts, acrobatics, and storytelling, performed especially in the Purulia district.", "image": "westbengal.webp", "svg": "WestBengal.svg", "wikiLink": "https://en.wikipedia.org/wiki/West_Bengal", "official_website": "https://wb.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Gambhira Dance", + "famous_quote": "What Bengal thinks today, India thinks tomorrow", + "famous_person": "Rabindranath Tagore", + "famous_food": "Rosogolla, Shorshe Ilish", + "famous_place": "Sundarbans", + "famous_dress": "Dhoti and Kurta, Saree", + "famous_language": "Bengali", + "famous_sport": "Football", + "state_color": "N/A", + "state_animal": "Fishing Cat", + "state_flower": "Night-flowering Jasmine (Shiuli)", + "surface_area": 88752, + "districts_count": 23, + "largest_city": "Kolkata", + "capital": "Kolkata", + "population": 101174280, + "literacy_rate": 77.08, + "languages": ["Bengali", "Hindi", "English", "Nepali", "Urdu"], + "major_rivers": ["Ganges", "Hooghly", "Teesta", "Subarnarekha"] }, { "id": "jharkhand", @@ -205,27 +521,31 @@ "name": "Jharkhand", "dance": "Jhumair", "festival": "Sarhul", - "description": "Jhumair is a semi-classical dance performed during festivals in Jharkhand.", + "description": "Jhumair is a folk dance performed during harvests and festivals, accompanied by traditional instruments.", "image": "jharkhand.webp", "svg": "Jharkhand.svg", "wikiLink": "https://en.wikipedia.org/wiki/Jharkhand", "official_website": "https://www.jharkhand.gov.in", "isActive": true, - "alternate_dance": "Santhali Dance" - }, - { - "id": "bihar", - "state_id": 4, - "name": "Bihar", - "dance": "Jat-Jatin", - "festival": "Chhath Puja", - "description": "Jat-Jatin is a popular folk dance of Bihar that represents rural life and relationships.", - "image": "bihar.webp", - "svg": "Bihar.svg", - "wikiLink": "https://en.wikipedia.org/wiki/Bihar", - "official_website": "https://state.bihar.gov.in", - "isActive": true, - "alternate_dance": "Bihar Folk Dance" + "alternate_dance": "Santhali Dance", + "famous_quote": "The Land of Forests", + "famous_person": "Birsa Munda", + "famous_food": "Thekua, Dhuska", + "famous_place": "Netarhat", + "famous_dress": "Saree or Tribal Dress", + "famous_language": "Hindi", + "famous_sport": "Archery", + "state_color": "N/A", + "state_animal": "Elephant", + "state_flower": "Palash", + "surface_area": 79714, + "districts_count": 24, + "largest_city": "Jamshedpur", + "capital": "Ranchi", + "population": 38471377, + "literacy_rate": 67.63, + "languages": ["Hindi", "Nagpuri", "Santhali", "Khortha", "Kurukh"], + "major_rivers": ["Damodar", "Subarnarekha", "Koel", "Barakar"] }, { "id": "uttarpradesh", @@ -233,12 +553,31 @@ "name": "Uttar Pradesh", "dance": "Kathak", "festival": "Diwali", - "description": "Kathak is one of the eight major classical dance forms of India, originating from Uttar Pradesh.", + "description": "Kathak, one of India's eight classical dance forms, originated in the temples of North India. Raslila, a devotional folk dance, narrates the life of Lord Krishna and is popular in Mathura-Vrindavan.", "image": "uttarpradesh.webp", "svg": "UttarPradesh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Uttar_Pradesh", "official_website": "https://up.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Raslila", + "famous_quote": "Heartland of India", + "famous_person": "Dr. B. R. Ambedkar", + "famous_food": "Tunday Kababi, Bedai, Petha", + "famous_place": "Varanasi", + "famous_dress": "Kurta-Pyjama with Dupatta (men), Saree or Salwar Kameez (women)", + "famous_language": "Hindi", + "famous_sport": "Wrestling", + "state_color": "N/A", + "state_animal": "Swamp Deer (Barasingha)", + "state_flower": "Palash (Flame of the Forest)", + "surface_area": 243286, + "districts_count": 75, + "largest_city": "Kanpur", + "capital": "Lucknow", + "population": 241066874, + "literacy_rate": 73.0, + "languages": ["Hindi", "Urdu", "Awadhi", "Bhojpuri", "English"], + "major_rivers": ["Ganga", "Yamuna", "Ghaghra", "Gomti", "Sarayu"] }, { "id": "nagaland", @@ -246,12 +585,31 @@ "name": "Nagaland", "dance": "Chang Lo", "festival": "Hornbill Festival", - "description": "Chang Lo is a traditional dance performed by the Chang tribe during celebrations in Nagaland.", + "description": "Chang Lo is performed by the Chang tribe, reflecting bravery and joy during celebrations. Zeliang Dance is another well-known tribal war dance.", "image": "nagaland.webp", "svg": "Nagaland.svg", "wikiLink": "https://en.wikipedia.org/wiki/Nagaland", "official_website": "https://www.nagaland.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Zeliang Dance", + "famous_quote": "Land of Festivals", + "famous_person": "Neiphiu Rio", + "famous_food": "Smoked Pork with Bamboo Shoot", + "famous_place": "Kohima War Cemetery", + "famous_dress": "Traditional tribal attire with beadwork and headgear (varies by tribe)", + "famous_language": "Nagamese", + "famous_sport": "Wrestling", + "state_color": "N/A", + "state_animal": "Mithun (Gayal)", + "state_flower": "Rhododendron", + "surface_area": 16579, + "districts_count": 16, + "largest_city": "Dimapur", + "capital": "Kohima", + "population": 2249695, + "literacy_rate": 80.11, + "languages": ["Nagamese", "English", "Ao", "Konyak", "Lotha"], + "major_rivers": ["Doyang", "Dhansiri", "Tizu", "Zungki"] }, { "id": "manipur", @@ -259,12 +617,31 @@ "name": "Manipur", "dance": "Manipuri Dance", "festival": "Yaoshang", - "description": "Manipuri Dance is a classical dance form of Manipur, emphasizing graceful movements and expressions.", + "description": "Manipuri Dance is one of India’s eight classical dance forms, known for its devotional themes and graceful hand and body movements. Thang Ta is a traditional Manipuri martial art/dance using swords and spears.", "image": "manipur.webp", "svg": "Manipur.svg", "wikiLink": "https://en.wikipedia.org/wiki/Manipur", "official_website": "https://manipur.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Thang Ta", + "famous_quote": "The Jewel of India", + "famous_person": "Mary Kom", + "famous_food": "Eromba", + "famous_place": "Loktak Lake", + "famous_dress": "Phanek and Innaphi", + "famous_language": "Meitei (Manipuri)", + "famous_sport": "Polo", + "state_color": "N/A", + "state_animal": "Sangai", + "state_flower": "Shirui Lily", + "surface_area": 22327, + "districts_count": 16, + "largest_city": "Imphal", + "capital": "Imphal", + "population": 2855794, + "literacy_rate": 79.85, + "languages": ["Meitei", "English", "Hindi", "Tangkhul", "Thadou"], + "major_rivers": ["Imphal River", "Iril River", "Thoubal River"] }, { "id": "meghalaya", @@ -272,12 +649,31 @@ "name": "Meghalaya", "dance": "Nongkrem Dance", "festival": "Shad Suk Mynsiem", - "description": "Nongkrem Dance is a religious dance performed by the Khasi tribe in Meghalaya.", + "description": "Nongkrem Dance is a thanksgiving ritual performed by the Khasi tribe to honor the goddess Ka Blei Synshar. Shad Suk Mynsiem, although a festival, also features a ritual dance performed by men and women in traditional attire.", "image": "meghalaya.webp", "svg": "Meghalaya.svg", "wikiLink": "https://en.wikipedia.org/wiki/Meghalaya", "official_website": "https://www.meghalaya.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Shad Suk Mynsiem Dance", + "famous_quote": "Abode of Clouds", + "famous_person": "Mukul Sangma", + "famous_food": "Jadoh", + "famous_place": "Cherrapunji", + "famous_dress": "Jainsem and Dhara, Jymphong", + "famous_language": "Khasi", + "famous_sport": "Archery", + "state_color": "N/A", + "state_animal": "Clouded Leopard", + "state_flower": "Lady's Slipper Orchid", + "surface_area": 22429, + "districts_count": 12, + "largest_city": "Shillong", + "capital": "Shillong", + "population": 3366710, + "literacy_rate": 75.48, + "languages": ["Khasi", "Garo", "English", "Hindi"], + "major_rivers": ["Umiam", "Myntdu", "Kynshi", "Simsang"] }, { "id": "mizoram", @@ -285,12 +681,31 @@ "name": "Mizoram", "dance": "Cheraw Dance", "festival": "Chapchar Kut", - "description": "Cheraw Dance, also known as the Bamboo Dance, is a traditional dance of Mizoram.", + "description": "Cheraw Dance, also known as the Bamboo Dance, involves dancers stepping between moving bamboo sticks — it’s one of India’s most iconic tribal dances. Khuallam is another group dance performed during social gatherings.", "image": "mizoram.webp", "svg": "Mizoram.svg", "wikiLink": "https://en.wikipedia.org/wiki/Mizoram", "official_website": "https://mizoram.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Khuallam", + "famous_quote": "Land of the Hill People", + "famous_person": "Lal Thanhawla", + "famous_food": "Bai", + "famous_place": "Phawngpui", + "famous_dress": "Puan, Shirt with Puanchei", + "famous_language": "Mizo", + "famous_sport": "Football", + "state_color": "N/A", + "state_animal": "Serow", + "state_flower": "Red Vanda (Renanthera imschootiana)", + "surface_area": 21081, + "districts_count": 11, + "largest_city": "Aizawl", + "capital": "Aizawl", + "population": 1091014, + "literacy_rate": 91.58, + "languages": ["Mizo", "English", "Hindi"], + "major_rivers": ["Tlawng", "Tuirial", "Chhimtuipui", "Serchhip"] }, { "id": "rajasthan", @@ -303,7 +718,25 @@ "svg": "Rajasthan.svg", "wikiLink": "https://en.wikipedia.org/wiki/Rajasthan", "official_website": "https://rajasthan.gov.in/", - "isActive": true + "isActive": true, + "famous_quote": "Padharo mhare desh", + "famous_person": "Maharana Pratap", + "famous_food": "Dal Baati Churma", + "famous_place": "Hawa Mahal", + "famous_dress": "Ghagra-Choli", + "famous_language": "Rajasthani", + "famous_sport": "Polo", + "state_color": "Pink", + "state_animal": "Camel", + "state_flower": "Rohida", + "surface_area": 342239, + "districts_count": 41, + "largest_city": "Jaipur", + "capital": "Jaipur", + "population": 68548437, + "literacy_rate": 66.11, + "languages": ["Rajasthani", "Hindi", "Marwari", "Mewari"], + "major_rivers": ["Chambal", "Luni", "Banas", "Mahi"] }, { "id": "sikkim", @@ -311,12 +744,31 @@ "name": "Sikkim", "dance": "Singhi Cham", "festival": "Losar", - "description": "Singhi Cham is a mask dance performed during Buddhist festivals in Sikkim.", + "description": "Singhi Cham is a masked Buddhist dance that depicts the mythical snow lion, symbolizing strength and protection. Performed in monasteries during festivals like Pang Lhabsol.", "image": "sikkim.webp", "svg": "Sikkim.svg", "wikiLink": "https://en.wikipedia.org/wiki/Sikkim", "official_website": "https://sikkim.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Maruni Dance", + "famous_quote": "The Land of Mystic Splendor", + "famous_person": "Baichung Bhutia", + "famous_food": "Phagshapa", + "famous_place": "Tsomgo Lake", + "famous_dress": "Bakhu (both men and women)", + "famous_language": "Nepali", + "famous_sport": "Football", + "state_color": "N/A", + "state_animal": "Red Panda", + "state_flower": "Noble Orchid (Dendrobium nobile)", + "surface_area": 7096, + "districts_count": 6, + "largest_city": "Gangtok", + "capital": "Gangtok", + "population": 610577, + "literacy_rate": 81.42, + "languages": ["Nepali", "Bhutia", "Lepcha", "English", "Hindi"], + "major_rivers": ["Teesta", "Rangit"] }, { "id": "tamilnadu", @@ -324,12 +776,31 @@ "name": "Tamil Nadu", "dance": "Bharatanatyam", "festival": "Pongal", - "description": "Bharatanatyam is one of the oldest classical dance forms of India, originating in Tamil Nadu.", + "description": "Bharatanatyam is one of the oldest and most revered classical dance forms of India, originating from the temples of Tamil Nadu.", "image": "tamilnadu.webp", "svg": "TamilNadu.svg", "wikiLink": "https://en.wikipedia.org/wiki/Tamil_Nadu", "official_website": "https://www.tn.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Karagattam", + "famous_quote": "Land of Temples", + "famous_person": "Dr. A.P.J. Abdul Kalam", + "famous_food": "Sambar, Dosa, Idli", + "famous_place": "Meenakshi Temple (Madurai)", + "famous_dress": "Veshti (men), Saree (women)", + "famous_language": "Tamil", + "famous_sport": "Kabaddi", + "state_color": "N/A", + "state_animal": "Nilgiri Tahr", + "state_flower": "Gloriosa Lily", + "surface_area": 130058, + "districts_count": 38, + "largest_city": "Chennai", + "capital": "Chennai", + "population": 72147030, + "literacy_rate": 80.33, + "languages": ["Tamil", "Telugu", "Urdu", "Malayalam", "English"], + "major_rivers": ["Kaveri", "Vaigai", "Palar", "Thamirabarani"] }, { "id": "tripura", @@ -337,12 +808,31 @@ "name": "Tripura", "dance": "Hojagiri Dance", "festival": "Kharchi Puja", - "description": "Hojagiri Dance is a traditional dance performed by the Reang community of Tripura.", + "description": "Hojagiri is a traditional dance performed by the Reang (Bru) women of Tripura, known for its incredible balance and movement on clay pots.", "image": "tripura.webp", "svg": "Tripura.svg", "wikiLink": "https://en.wikipedia.org/wiki/Tripura", "official_website": "https://tripura.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Garia Dance", + "famous_quote": "The Queen of the Hills", + "famous_person": "Sachin Dev Burman", + "famous_food": "Mui Borok", + "famous_place": "Ujjayanta Palace", + "famous_dress": "Rignai and Risa (women), Rikutu Gamcha (men)", + "famous_language": "Kokborok", + "famous_sport": "Football", + "state_color": "N/A", + "state_animal": "Phayre's Langur", + "state_flower": "Mesua Ferrea (Nagkesar)", + "surface_area": 10491, + "districts_count": 8, + "largest_city": "Agartala", + "capital": "Agartala", + "population": 4169794, + "literacy_rate": 87.22, + "languages": ["Bengali", "Kokborok", "Hindi", "English"], + "major_rivers": ["Gomati", "Manu", "Khowai", "Dhalai"] }, { "id": "haryana", @@ -350,13 +840,31 @@ "name": "Haryana", "dance": "Phag Dance", "festival": "Lohri", - "description": "Phag Dance is a folk dance that celebrates the harvest season in Haryana.", + "description": "Phag Dance is a vibrant folk dance performed during the spring season to celebrate the harvest, especially around Holi.", "image": "harayana.webp", "svg": "Harayana.svg", "wikiLink": "https://en.wikipedia.org/wiki/Haryana", "official_website": "https://haryana.gov.in", "isActive": true, - "alternate_dance": "Dhamal Dance" + "alternate_dance": "Dhamal Dance", + "famous_quote": "Jatland of India", + "famous_person": "Kalpana Chawla", + "famous_food": "Bajre ki Khichdi", + "famous_place": "Kurukshetra", + "famous_dress": "Dhoti-Kurta with Pagri (men), Ghagra-Choli with Orhni (women)", + "famous_language": "Haryanvi", + "famous_sport": "Wrestling", + "state_color": "N/A", + "state_animal": "Blackbuck", + "state_flower": "Lotus", + "surface_area": 44212, + "districts_count": 22, + "largest_city": "Faridabad", + "capital": "Chandigarh", + "population": 28900000, + "literacy_rate": 76.64, + "languages": ["Haryanvi", "Hindi", "Punjabi", "English"], + "major_rivers": ["Yamuna", "Ghaggar", "Sarasvati", "Markanda", "Tangri"] }, { "id": "punjab", @@ -364,12 +872,31 @@ "name": "Punjab", "dance": "Bhangra", "festival": "Lohri", - "description": "Bhangra is a lively and energetic folk dance of Punjab, traditionally performed during harvest celebrations.", + "description": "Bhangra is a lively and energetic folk dance of Punjab, traditionally performed during the harvest festival of Baisakhi and other celebrations.", "image": "punjab.webp", "svg": "Punjab.svg", "wikiLink": "https://en.wikipedia.org/wiki/Punjab,_India", "official_website": "https://punjab.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Giddha", + "famous_quote": "Sadda Punjab", + "famous_person": "Bhagat Singh", + "famous_food": "Makki di Roti & Sarson da Saag", + "famous_place": "Golden Temple (Amritsar)", + "famous_dress": "Kurta-Pajama with Turban (men), Salwar-Kameez with Phulkari Dupatta (women)", + "famous_language": "Punjabi", + "famous_sport": "Kabaddi", + "state_color": "N/A", + "state_animal": "Blackbuck", + "state_flower": "Gladiolus", + "surface_area": 50362, + "districts_count": 23, + "largest_city": "Ludhiana", + "capital": "Chandigarh", + "population": 27743338, + "literacy_rate": 76.68, + "languages": ["Punjabi", "Hindi", "English"], + "major_rivers": ["Sutlej", "Beas", "Ravi"] }, { "id": "uttarakhand", @@ -377,12 +904,31 @@ "name": "Uttarakhand", "dance": "Chholiya Dance", "festival": "Kumbh Mela", - "description": "Chholiya Dance is a traditional folk dance of Uttarakhand, performed during weddings and celebrations.", + "description": "Chholiya is a traditional folk dance of the Kumaon region in Uttarakhand, performed with swords and shields, often during marriage processions and festivals.", "image": "uttarakhand.webp", "svg": "Uttarakhand.svg", "wikiLink": "https://en.wikipedia.org/wiki/Uttarakhand", "official_website": "https://uk.gov.in/", - "isActive": true + "isActive": true, + "alternate_dance": "Barada Nati", + "famous_quote": "Devbhumi (Land of the Gods)", + "famous_person": "Narendra Singh Negi", + "famous_food": "Aloo Ke Gutke", + "famous_place": "Char Dham (Yamunotri, Gangotri, Kedarnath, Badrinath)", + "famous_dress": "Kurta with Pyjama and Waistcoat (men), Ghagra-Choli or Saree with Pichora (women)", + "famous_language": "Garhwali", + "famous_sport": "Mountaineering", + "state_color": "N/A", + "state_animal": "Musk Deer", + "state_flower": "Brahma Kamal", + "surface_area": 53483, + "districts_count": 13, + "largest_city": "Dehradun", + "capital": "Dehradun, Gairsain", + "population": 11250000, + "literacy_rate": 78.82, + "languages": ["Hindi", "Garhwali", "Kumaoni", "Jaunsari", "English"], + "major_rivers": ["Ganga", "Yamuna", "Alaknanda", "Bhagirathi"] }, { "id": "himachalpradesh", @@ -390,13 +936,31 @@ "name": "Himachal Pradesh", "dance": "Nati", "festival": "Kullu Dussehra", - "description": "Nati is a traditional folk dance of Himachal Pradesh, performed during festivals and celebrations.", + "description": "Nati is a traditional folk dance of Himachal Pradesh, known for its rhythmic moves and colorful attire, typically performed during festivals and local fairs.", "image": "himachal.webp", "svg": "HimachalPradesh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Himachal_Pradesh", "official_website": "https://himachal.nic.in", "isActive": true, - "alternate_dance": "Lahauli Dance" + "alternate_dance": "Lahauli Dance", + "famous_quote": "Dev Bhoomi (Land of the Gods)", + "famous_person": "Y. S. Parmar", + "famous_food": "Chana Madra", + "famous_place": "Shimla", + "famous_dress": "Churidar Pyjama with Waistcoat and Himachali Cap (men), Ghagra-Choli with Dupatta (women)", + "famous_language": "Pahari", + "famous_sport": "Cricket", + "state_color": "N/A", + "state_animal": "Snow Leopard", + "state_flower": "Pink Rhododendron", + "surface_area": 55673, + "districts_count": 12, + "largest_city": "Shimla", + "capital": "Shimla (Summer), Dharamshala (Winter)", + "population": 7300000, + "literacy_rate": 83.78, + "languages": ["Hindi", "Pahari", "Punjabi", "Kinnauri"], + "major_rivers": ["Sutlej", "Beas", "Chenab", "Ravi", "Yamuna"] }, { "id": "jammuandkashmir", @@ -404,13 +968,31 @@ "name": "Jammu and Kashmir", "dance": "Rouf", "festival": "Lohri, Navroz", - "description": "Rouf is a traditional Kashmiri dance performed during festivals and special occasions.", + "description": "Rouf is a traditional Kashmiri dance performed by women during festivals, especially Ramzan and Eid, known for its graceful footwork.", "image": "kashmir.webp", "svg": "Kashmir.svg", "wikiLink": "https://en.wikipedia.org/wiki/Jammu_and_Kashmir", "official_website": "https://jk.gov.in", "isActive": true, - "alternate_dance": "Bhand Pather" + "alternate_dance": "Bhand Pather", + "famous_quote": "Paradise on Earth", + "famous_person": "Sheikh Abdullah", + "famous_food": "Rogan Josh", + "famous_place": "Dal Lake", + "famous_dress": "Pheran", + "famous_language": "Kashmiri", + "famous_sport": "Winter Sports", + "state_color": "N/A", + "state_animal": "Hangul", + "state_flower": "Lotus", + "surface_area": 55538, + "districts_count": 20, + "largest_city": "Srinagar", + "capital": "Srinagar (Summer), Jammu (Winter)", + "population": 13600000, + "literacy_rate": 68.74, + "languages": ["Kashmiri", "Urdu", "Dogri", "Hindi", "English"], + "major_rivers": ["Jhelum", "Chenab", "Tawi", "Ravi"] }, { "id": "andamanandnicobarislands", @@ -423,58 +1005,153 @@ "svg": "AndamanAndNicobar.svg", "wikiLink": "https://en.wikipedia.org/wiki/Andaman_and_Nicobar_Islands", "official_website": "https://andaman.gov.in/", - "isActive": true + "isActive": true, + "alternate_dance": "Tribal Folk Dance", + "famous_quote": "Emerald Islands of India", + "famous_person": "Veer Savarkar", + "famous_food": "Fish Curry and Coconut Prawn Curry", + "famous_place": "Cellular Jail", + "famous_dress": "Lungi and Shirt (men), Saree or Tribal Attire (women)", + "famous_language": "Hindi", + "famous_sport": "Water Sports", + "state_color": "N/A", + "state_animal": "Dugong (Sea Cow)", + "state_flower": "Andaman Pyinma (Lagerstroemia hypoleuca)", + "surface_area": 8249, + "districts_count": 3, + "largest_city": "Port Blair", + "capital": "Port Blair", + "population": 380520, + "literacy_rate": 86.27, + "languages": ["Hindi", "Tamil", "Telugu", "Bengali", "Nicobarese", "English"], + "major_rivers": ["Kalpong River", "Galathea River"] }, { "id": "chandigarh", "state_id": 30, "name": "Chandigarh", - "dance": "Gidda and Bhangra", + "dance": "Bhangra", "festival": "Rose Festival", - "description": "Chandigarh celebrates its rich culture with performances of Gidda and Bhangra during various festivals.", + "description": "Bhangra is a lively folk dance of Punjab and is widely performed in Chandigarh during celebrations and festivals.", "image": "chandigarh.webp", "svg": "Chandigarh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Chandigarh", "official_website": "https://chandigarh.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Giddha", + "famous_quote": "The City Beautiful", + "famous_person": "Le Corbusier", + "famous_food": "Chole Bhature", + "famous_place": "Rock Garden of Chandigarh", + "famous_dress": "Kurta-Pajama with Nehru Jacket (men), Salwar-Kameez with Dupatta (women)", + "famous_language": "Hindi", + "famous_sport": "Cricket", + "state_color": "N/A", + "state_animal": "Indian Grey Mongoose", + "state_flower": "Dahlia", + "surface_area": 114, + "districts_count": 1, + "largest_city": "Chandigarh", + "capital": "Chandigarh", + "population": 1158473, + "literacy_rate": 86.05, + "languages": ["Hindi", "Punjabi", "English"], + "major_rivers": [] }, { "id": "lakshadweep", "state_id": 34, "name": "Lakshadweep", "dance": "Lava Dance", - "festival": "Minicoy Fest", - "description": "Lava Dance is a traditional dance performed by the people of Lakshadweep during joyous occasions.", + "festival": "Eid-ul-Fitr", + "description": "Lava dance is a popular folk dance of Lakshadweep performed by men during festive occasions, showcasing martial rhythm and group coordination.", "image": "lakshadweep.webp", "svg": "Lakshadweep.svg", "wikiLink": "https://en.wikipedia.org/wiki/Lakshadweep", "official_website": "https://lakshadweep.gov.in", - "isActive": true + "isActive": true, + "alternate_dance": "Kolkali", + "famous_quote": "Jewel of the Arabian Sea", + "famous_person": "Mohammed Faizal P. P.", + "famous_food": "Tuna Curry", + "famous_place": "Minicoy Island", + "famous_dress": "Lungi and Shirt (men), Burqa and Hijab (women)", + "famous_language": "Malayalam", + "famous_sport": "Football", + "state_color": "N/A", + "state_animal": "Butterflyfish", + "state_flower": "Bougainvillea", + "surface_area": 32.62, + "districts_count": 1, + "largest_city": "Kavaratti", + "capital": "Kavaratti", + "population": 64473, + "literacy_rate": 91.85, + "languages": ["Malayalam", "Jeseri", "Dhawari", "English"], + "major_rivers": [] }, { "id": "ladakh", "state_id": 35, "name": "Ladakh", - "dance": "Cham Dance", - "festival": "Hemis Festival", - "description": "Cham Dance is a mask dance performed during Buddhist festivals in Ladakh.", + "dance": "Shondol", + "festival": "Losar", + "description": "Shondol is a traditional royal dance performed by women in Ladakh during festivals and important cultural events.", "image": "ladakh.webp", "svg": "Ladakh.svg", "wikiLink": "https://en.wikipedia.org/wiki/Ladakh", "official_website": "https://nicladakh.nic.in", - "isActive": true + "isActive": true, + "alternate_dance": "Lharna", + "famous_quote": "Land of High Passes", + "famous_person": "Sonam Wangchuk", + "famous_food": "Skyu", + "famous_place": "Pangong Lake", + "famous_dress": "Goncha (for men), Sulma (for women)", + "famous_language": "Ladakhi", + "famous_sport": "Ice Hockey", + "state_color": "N/A", + "state_animal": "Snow Leopard", + "state_flower": "Blue Poppy", + "surface_area": 59146, + "districts_count": 2, + "largest_city": "Leh", + "capital": "Leh (Administrative), Kargil (Joint Capital)", + "population": 274289, + "literacy_rate": 77.2, + "languages": ["Ladakhi", "Balti", "Urdu", "Hindi", "English"], + "major_rivers": ["Indus", "Zanskar", "Shyok"] }, { "id": "puducherry", "state_id": 36, "name": "Puducherry", - "dance": "Garadi Dance", - "festival": "Pondicherry Heritage Festival", - "description": "Garadi Dance is a traditional dance form of Puducherry, performed during temple festivals.", + "dance": "Garadi", + "festival": "Bastille Day", + "description": "Garadi is a prominent folk dance of Puducherry, celebrated during local festivals and dramatizing episodes from the Hindu epic Ramayana.", "image": "puducherry.webp", "svg": "Pondicherry.svg", "wikiLink": "https://en.wikipedia.org/wiki/Puducherry", - "official_website": "https://www.py.gov.in", - "isActive": true + "official_website": "https://puducherry.gov.in", + "isActive": true, + "alternate_dance": "Bharatanatyam", + "famous_quote": "The French Riviera of the East", + "famous_person": "Sri Aurobindo", + "famous_food": "Khowsuey", + "famous_place": "Sri Aurobindo Ashram", + "famous_dress": "Dhoti and sari", + "famous_language": "Tamil", + "famous_sport": "Cricket", + "state_color": "N/A", + "state_animal": "Indian palm squirrel", + "state_flower": "Cannonball tree flower", + "surface_area": 483, + "districts_count": 4, + "largest_city": "Puducherry", + "capital": "Puducherry", + "population": 1394467, + "literacy_rate": 86.55, + "languages": ["Tamil", "French", "English", "Telugu", "Malayalam"], + "major_rivers": ["Sankaraparani", "Pennaiyar", "Arasalar"] } ] diff --git a/src/assets/json/vedic.json b/src/assets/json/vedic.json index 2a3a984d..6355a786 100644 --- a/src/assets/json/vedic.json +++ b/src/assets/json/vedic.json @@ -1,76 +1,124 @@ { + "-comment": "'seconds' field is only used for unit conversion and is not displaayed in Vedic Time Journey.", "time_units": [ + { + "name": "त्रुटि", + "seconds": 0.0000003086, + "firstEquivalent": "Base unit of measurement", + "secondEquivalent": "308.6 Nanoseconds", + "thirdEquivalent": "0.0000003086 Seconds" + }, + { + "name": "रेणु", + "seconds": 0.000018516, + "firstEquivalent": "60 त्रुटि", + "secondEquivalent": "18.516 Microseconds", + "thirdEquivalent": "0.000018516 Seconds" + }, + { + "name": "लव", + "seconds": 0.00111096, + "firstEquivalent": "60 रेणु", + "secondEquivalent": "3600 त्रुटि", + "thirdEquivalent": "1,110.96 MicroSeconds" + }, + { + "name": "निमेष - Blink of an eye", + "seconds": 0.0889, + "firstEquivalent": "80.02 लव", + "secondEquivalent": "4,801.2 रेणु", + "thirdEquivalent": "88.9 Milliseconds" + }, { "name": "क्षण", - "seconds": 1, - "minutes": 0.01667, - "years": 0.0000000317 + "seconds": 1.28, + "firstEquivalent": "14.3982 निमेष", + "secondEquivalent": "1,152.14 लव", + "thirdEquivalent": "1.28 Seconds" }, { "name": "पल", - "seconds": 24, - "minutes": 0.4, - "years": 0.00000076 + "seconds": 23.99, + "firstEquivalent": "18.742 क्षण", + "secondEquivalent": "269.70 निमेष", + "thirdEquivalent": "21,572 लव" }, { "name": "घटी", - "seconds": 1440, - "minutes": 24, - "years": 0.000027 + "seconds": 1439.4, + "firstEquivalent": "60 पल", + "secondEquivalent": "1,124.52 क्षण", + "thirdEquivalent": "16,182 निमेष" }, { "name": "प्रहर", "seconds": 10800, - "minutes": 180, - "years": 0.000342 + "firstEquivalent": "7.5 घट", + "secondEquivalent": "450 पल", + "thirdEquivalent": "एक दिन का आठवां हिसा" }, { "name": "दिन", "seconds": 86400, - "minutes": 1440, - "years": 0.00274 + "firstEquivalent": "8 प्रहर", + "secondEquivalent": "60 घटी", + "thirdEquivalent": "3600 पल" + }, + { + "name": "तिथि", + "seconds": 86400, + "firstEquivalent": "8 प्रहर", + "secondEquivalent": "1 दिन (19 घंटे - 26 घंटे)", + "thirdEquivalent": "Time for 12° increase of longitudinal angle between Moon and Sun" }, { "name": "पक्ष", "seconds": 1296000, - "minutes": 21600, - "years": 0.0317 + "firstEquivalent": "15 दिन", + "secondEquivalent": "120 प्रहर", + "thirdEquivalent": "900 घटी" }, { "name": "मास", "seconds": 2592000, - "minutes": 43200, - "years": 0.0635 + "firstEquivalent": "2 पक्ष", + "secondEquivalent": "30 दिन / ~30 तिथि", + "thirdEquivalent": "240 प्रहर" }, { "name": "ऋतु", "seconds": 5184000, - "minutes": 86400, - "years": 0.127 + "firstEquivalent": "2 मास", + "secondEquivalent": "4 पक्ष", + "thirdEquivalent": "~60 दिन" }, { "name": "अयन", "seconds": 15552000, - "minutes": 259200, - "years": 0.381 + "firstEquivalent": "3 ऋतु", + "secondEquivalent": "6 मास", + "thirdEquivalent": "8 पक्ष" }, { "name": "वर्ष", "seconds": 31104000, - "minutes": 518400, - "years": 1 + "firstEquivalent": "2 अयन", + "secondEquivalent": "6 ऋतु", + "thirdEquivalent": "360 दिन / 354.36707 तिथि" }, { "name": "युग", - "seconds": 1209600000, - "minutes": 20160000, - "years": 38880 + "seconds": 13436928000000, + "firstEquivalent": "4,32,000 मनुष्य वर्ष (कलियुग)", + "secondEquivalent": "8,64,000 अयन", + "thirdEquivalent": "4 युग-(सत्ययुग, त्रेतायुग, द्वापरयुग, कलियुग)" }, { "name": "कल्प", - "seconds": 31104000000000, - "minutes": 518400000000, - "years": 1000000000 + "seconds": 134369280000000000, + "firstEquivalent": "10,000 कलियुग", + "secondEquivalent": "4,320,000,000 मनुष्य वर्ष", + "thirdEquivalent": "~1 प्रलय" } ] } diff --git a/src/assets/styles/CardIndex.css b/src/assets/styles/CardIndex.css new file mode 100644 index 00000000..76677ce3 --- /dev/null +++ b/src/assets/styles/CardIndex.css @@ -0,0 +1,129 @@ +.selection-container { + display: flex; + flex-direction: column; + align-items: center; + min-height: calc(100vh - var(--header-h, 4rem) - var(--footer-h, 4rem)); + padding-top: 0rem; + padding-bottom: 2rem; + padding-left: 2rem; + padding-right: 2rem; + color: var(--text, #e0e0e0); + font-family: "Roboto", sans-serif; +} + +.selection-title { + font-size: 2.8rem; + font-weight: 700; + color: var(--primary, #4a90e2); + margin-bottom: 3rem; + text-align: center; + letter-spacing: 0.05em; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +.selection-buttons-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2.5rem; + width: 100%; + max-width: 900px; + justify-content: center; +} + +.selection-card { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + text-decoration: none; + background-color: var(--card-bg, light-dark(#ffffff, #2b2b40)); + padding: 2.5rem; + border-radius: 20px; + border: 2px solid var(--card-border, #444460); + transition: all 0.3s ease; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); + cursor: pointer; +} + +.selection-card:hover { + background-color: var(--card-hover-bg, light-dark(#ffffff, #3c3c5a)); + transform: translateY(-8px) scale(1.02); + box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4); + border-color: var(--primary, #4a90e2); +} + +.card-icon { + width: 64px; + height: 64px; + margin-bottom: 1.5rem; +} + +.card-icon svg { + width: 100%; + height: 100%; +} + +.card-title { + font-size: 2rem; + font-weight: 600; + color: var(--text, #e0e0e0); + margin-bottom: 0.75rem; +} + +.card-description { + font-size: 1.1rem; + color: var(--secondary, #cfcfcf); + line-height: 1.5; + max-width: 250px; +} + +@media (max-width: 950px) { + .selection-title { + font-size: 2.2rem; + margin-bottom: 2.5rem; + } + + .selection-buttons-grid { + grid-template-columns: 1fr; + gap: 2rem; + max-width: 400px; + } + + .selection-card { + padding: 2rem; + } + + .card-title { + font-size: 1.8rem; + } + + .card-description { + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .selection-container { + padding: 1rem; + } + + .selection-title { + font-size: 1.8rem; + margin-bottom: 2rem; + } + + .selection-card { + padding: 1.5rem; + border-radius: 15px; + } + + .card-icon { + width: 50px; + height: 50px; + margin-bottom: 1rem; + } + + .card-title { + font-size: 1.5rem; + } +} diff --git a/src/assets/styles/CardQueue.css b/src/assets/styles/CardQueue.css new file mode 100644 index 00000000..91bb22ec --- /dev/null +++ b/src/assets/styles/CardQueue.css @@ -0,0 +1,420 @@ +@charset "UTF-8"; + +:root { + --t: 0.6s; + --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +@property --current { + syntax: ""; + initial-value: 0; + inherits: true; +} + +* { + margin: 0; + box-sizing: border-box; +} + +.alphabet-main-wrapper { + width: 100%; + min-height: 100vh; + padding: 2rem; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; +} + +.alphabet-container { + position: relative; + min-height: 600px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2rem; + color: #f1f5f9; +} + +.alphabet-container::before { + display: none; +} + +.alphabet-header { + text-align: center; + z-index: 100; +} + +.alphabet-title { + font-size: 2.5rem; + font-weight: 700; + background: linear-gradient(135deg, #818cf8, #6a7fe0, #3d60eb); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 10px; + text-shadow: 0 4px 20px rgba(129, 140, 248, 0.3); +} + +.content-area { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + width: 100%; + max-width: 800px; +} + +.image-container { + position: relative; + width: 500px; + height: 400px; + perspective: 1200px; + transform-style: preserve-3d; + display: flex; + align-items: center; + justify-content: center; +} + +.alphabet-item { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + gap: 1rem; + + transition: + transform var(--t) var(--ease), + opacity var(--t) var(--ease), + z-index 0s var(--t); + + transform: translateZ(-100px) scale(0.8); + opacity: 0.5; + z-index: 1; +} + +.alphabet-item.active { + transform: translateZ(0) scale(1); + opacity: 1; + z-index: 100; +} + +.alphabet-item.next { + transform: translateX(120px) translateZ(-80px) rotateY(-25deg) scale(0.85); + opacity: 0.7; + z-index: 50; +} + +.alphabet-item.prev { + transform: translateX(-120px) translateZ(-80px) rotateY(25deg) scale(0.85); + opacity: 0.7; + z-index: 50; +} + +.alphabet-item.far { + transform: translateZ(-150px) scale(0.6); + opacity: 0.3; + z-index: 10; +} + +.item-image { + width: 450px; + height: 300px; + object-fit: cover; + object-position: center; + border-radius: 1rem; + border: 3px solid rgba(129, 140, 248, 0.4); + backdrop-filter: blur(10px); + transition: all var(--t) var(--ease); + flex-shrink: 0; + box-shadow: + 0 10px 30px rgba(0, 0, 0, 0.3), + 0 4px 15px rgba(129, 140, 248, 0.2); +} + +.alphabet-item.active .item-image { + border-color: rgba(129, 140, 248, 0.8); + box-shadow: + 0 15px 40px rgba(0, 0, 0, 0.4), + 0 8px 25px rgba(129, 140, 248, 0.3); +} + +.text-content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 0.5rem; + width: 100%; + max-width: 400px; + flex-shrink: 0; +} + +.letter { + font-size: 3rem; + font-weight: 900; + text-transform: uppercase; + text-shadow: 0 4px 20px rgba(129, 140, 248, 0.3); + background: linear-gradient(145deg, #3b4ad1 0%, #6b7bff 50%, #0c33f8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 0; + line-height: 1; + transition: all var(--t) var(--ease); + min-height: 3rem; +} + +.item-desc { + font-size: 1.5rem; + text-transform: uppercase; + color: light-dark(#000000, #ffffff); + font-weight: 600; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); + transition: all var(--t) var(--ease); + margin: 0; + line-height: 1.2; + min-height: 2rem; +} + +.alphabet-item:not(.active) .text-content { + display: none; +} + +.nav-buttons { + display: flex; + gap: 5rem; + justify-content: center; + align-items: center; + z-index: 200; +} + +.nav-button { + position: relative; + border: none; + width: 4rem; + height: 4rem; + border-radius: 50%; + background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(165, 180, 252, 0.1)); + color: #4f5ff0; + font-size: 1rem; + font-weight: 900; + transition: all 0.3s ease-out; + cursor: pointer; + border: 2px solid rgba(129, 140, 248, 0.3); + backdrop-filter: blur(10px); + box-shadow: + 0 4px 15px rgba(129, 140, 248, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.nav-button::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 12px; + height: 12px; + border: solid 3px currentColor; + border-width: 0 3px 3px 0; + transform: translate(-50%, -50%) rotate(135deg); + transition: transform 0.3s ease-out; +} + +.nav-button.next-button::before { + transform: translate(-50%, -50%) rotate(-45deg); +} + +.nav-button:hover, +.nav-button:focus { + background: linear-gradient(135deg, rgba(129, 140, 248, 0.4), rgba(165, 180, 252, 0.2)); + color: #6f84eb; + border-color: rgba(129, 140, 248, 0.6); + box-shadow: + 0 6px 25px rgba(129, 140, 248, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + transform: translateY(-2px) scale(1.05); +} + +.nav-button:active { + transform: translateY(0) scale(0.95); +} + +.keyboard-hint { + position: absolute; + bottom: 5px; + top: 100%; + left: 50%; + transform: translateX(-50%); + color: light-dark(#000000, #ffffff); + font-size: 0.875rem; + text-align: center; + z-index: 1000; + transition: opacity 0s ease-out; + padding: 0.5rem 1rem; + backdrop-filter: blur(10px); +} + +.alphabet-container.transitioning { + pointer-events: none; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .alphabet-main-wrapper { + padding: 2rem 1rem; + } + + .alphabet-title { + font-size: 2rem; + } + + .image-container { + width: 400px; + height: 380px; + } + + .item-image { + width: 360px; + height: 260px; + } +} + +@media (max-width: 768px) { + .alphabet-main-wrapper { + padding: 1.5rem 1rem; + } + + .alphabet-title { + font-size: 1.75rem; + } + + .image-container { + width: 300px; + height: 360px; + } + + .item-image { + width: 260px; + height: 240px; + } + + .letter { + font-size: 2.5rem; + min-height: 2.5rem; + } + + .item-desc { + font-size: 1.25rem; + min-height: 1.8rem; + } + + .nav-button { + width: 3.5rem; + height: 3.5rem; + } + + .nav-buttons { + gap: 3rem; + } + + .alphabet-item.next { + transform: translateX(80px) translateZ(-60px) rotateY(-20deg) scale(0.8); + } + + .alphabet-item.prev { + transform: translateX(-80px) translateZ(-60px) rotateY(20deg) scale(0.8); + } +} + +@media (max-width: 480px) { + .alphabet-main-wrapper { + padding: 1rem 0.5rem; + } + + .alphabet-title { + font-size: 1.5rem; + } + + .image-container { + width: 280px; + height: 340px; + } + + .item-image { + width: 240px; + height: 200px; + } + + .letter { + font-size: 2rem; + min-height: 2rem; + } + + .item-desc { + font-size: 1.1rem; + min-height: 1.5rem; + } + + .nav-button { + width: 3rem; + height: 3rem; + } + + .nav-buttons { + gap: 2rem; + } + + .alphabet-item.next { + transform: translateX(60px) translateZ(-40px) rotateY(-15deg) scale(0.75); + } + + .alphabet-item.prev { + transform: translateX(-60px) translateZ(-40px) rotateY(15deg) scale(0.75); + } +} + +@media (prefers-reduced-motion: reduce) { + :root { + --t: 0.2s; + --ease: ease; + } + + .alphabet-item, + .nav-button { + transition-duration: 0.2s; + } +} + +.nav-button:focus-visible { + outline: 2px solid #818cf8; + outline-offset: 2px; +} + +.alphabet-item:focus { + outline: none; +} + +.alphabet-item:focus-visible { + outline: none; +} diff --git a/src/assets/styles/CardSlider.css b/src/assets/styles/CardSlider.css new file mode 100644 index 00000000..b77d0932 --- /dev/null +++ b/src/assets/styles/CardSlider.css @@ -0,0 +1,306 @@ +:root { + --item-width: 400px; + --item-height: 400px; + --item-gap: 40px; + --active-scale: 1.05; + --transition-duration: 0.3s; + --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); + --scrollbar-height: 6px; + --nav-button-size: 48px; + --active-border: 4px solid #3b82f6; +} + +.gallery-page { + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + overflow-x: hidden; +} + +.gallery-wrapper { + width: 100%; + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.gallery-container { + width: 100%; + max-width: 70rem; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.gallery-header { + text-align: center; +} + +.gallery-title { + font-size: 2.5rem; + font-weight: 700; + background: linear-gradient(135deg, #818cf8, #6a7fe0, #3d60eb); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 0; + text-shadow: 0 4px 20px rgba(129, 140, 248, 0.3); +} + +.gallery-controls { + display: flex; + align-items: center; + gap: 20px; + position: relative; + gap: 1%; + margin-left: -4rem; + margin-right: -4rem; +} + +.gallery-scroller { + width: 100%; + height: calc(var(--item-height) + 200px); + overflow-x: auto; + overflow-y: hidden; + scroll-behavior: smooth; + padding: 2rem 0; + -webkit-overflow-scrolling: touch; + cursor: grab; + flex-grow: 1; +} + +.gallery-scroller:active { + cursor: grabbing; +} + +.gallery-track { + display: inline-flex; + gap: var(--item-gap); + padding: 0 calc((100% - var(--item-width)) / 2); + height: 100%; +} + +.nav-button { + width: var(--nav-button-size); + height: var(--nav-button-size); + margin-bottom: 12%; + border-radius: 50%; + background: rgba(129, 140, 248, 0.2); + border: none; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.2s ease; + flex-shrink: 0; + outline: none; +} + +.nav-button:hover { + background: rgba(129, 140, 248, 0.4); + transform: scale(1.1); +} + +.nav-button:focus-visible { + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); +} + +.nav-button svg { + fill: #3b82f6; + width: 24px; + height: 24px; +} + +.nav-button:disabled { + opacity: 0.3; + cursor: not-allowed; +} + +.gallery-item-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + height: 100%; +} + +.gallery-item { + width: var(--item-width); + height: var(--item-height); + flex: 0 0 auto; + border-radius: 0.75rem; + overflow: hidden; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); + transform: scale(1); + transition: all var(--transition-duration) var(--ease-out); + cursor: pointer; + position: relative; + border: 2px solid transparent; +} + +.gallery-item.active { + transform: scale(var(--active-scale)); + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); + z-index: 10; + border: var(--active-border); + outline: none; +} + +.gallery-item:focus-visible { + outline: 3px solid #3b82f6; + outline-offset: 3px; +} + +.item-image-container { + width: 100%; + height: 100%; + overflow: hidden; +} + +.item-image { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s var(--ease-out); +} + +.gallery-item.active .item-image { + transform: scale(1.05); +} + +.item-details { + width: 100%; + max-width: var(--item-width); + opacity: 0; + transform: translateY(20px); + transition: all var(--transition-duration) var(--ease-out); + text-align: center; + padding: 0 1rem; + pointer-events: none; +} + +.gallery-item.active + .item-details { + opacity: 1; + transform: translateY(0); +} + +.letter { + font-size: 2.5rem; + font-weight: 900; + color: #1e40af; + margin: 0; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.item-desc { + font-size: 1.5rem; + color: #4b5563; + margin: 0.5rem 0 0; + font-weight: 600; +} + +.gallery-scroller::-webkit-scrollbar { + height: var(--scrollbar-height); +} + +.gallery-scroller::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.05); + border-radius: calc(var(--scrollbar-height) / 2); + margin: 0 calc((100% - var(--item-width)) / 2); +} + +.gallery-scroller::-webkit-scrollbar-thumb { + background: rgba(129, 140, 248, 0.6); + border-radius: calc(var(--scrollbar-height) / 2); +} + +.gallery-scroller::-webkit-scrollbar-thumb:hover { + background: rgba(129, 140, 248, 0.8); +} + +.gallery-scroller { + scrollbar-width: thin; + scrollbar-color: rgba(129, 140, 248, 0.6) rgba(0, 0, 0, 0.05); +} + +/* Responsive adjustments */ +@media (max-width: 1600px) { + :root { + --item-width: 360px; + --item-height: 360px; + } +} + +@media (max-width: 1200px) { + :root { + --item-width: 320px; + --item-height: 320px; + --item-gap: 30px; + --nav-button-size: 40px; + } + .gallery-page { + margin-left: 15%; + } +} + +@media (max-width: 900px) { + :root { + --item-width: 280px; + --item-height: 280px; + --item-gap: 25px; + } + + .gallery-title { + font-size: 2rem; + } + + .gallery-page { + margin-left: 15%; + } + + .letter { + font-size: 2rem; + } + + .item-desc { + font-size: 1.25rem; + } +} + +@media (max-width: 600px) { + :root { + --item-width: 240px; + --item-height: 240px; + --item-gap: 20px; + --scrollbar-height: 4px; + --nav-button-size: 36px; + } + + .gallery-page { + margin-left: 15%; + } + + .gallery-wrapper { + padding: 1.5rem; + } + + .gallery-title { + font-size: 1.75rem; + } + + .letter { + font-size: 1.75rem; + } + + .item-desc { + font-size: 1.1rem; + } + + .nav-button svg { + width: 20px; + height: 20px; + } +} diff --git a/src/assets/styles/CardStack.css b/src/assets/styles/CardStack.css new file mode 100644 index 00000000..325c540e --- /dev/null +++ b/src/assets/styles/CardStack.css @@ -0,0 +1,444 @@ +@charset "UTF-8"; +:root { + --t: 0.8s; + --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +@property --p { + syntax: ""; + initial-value: 0; + inherits: true; +} + +@property --v { + syntax: ""; + initial-value: 0; + inherits: true; +} + +.alphabet-page { + flex: 1; + display: flex; + flex-direction: column; + min-height: 100vh; + overflow: hidden; +} + +.alphabet-wrapper { + width: 100%; + height: 100vh; + padding: 2rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; +} + +.alphabet-container { + position: relative; + width: 100%; + max-width: 1200px; + height: 100%; + min-height: 600px; + margin-top: -5rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 2rem; + color: #f1f5f9; + font: + 1em poppins, + sans-serif; + counter-reset: k calc(1 + var(--k)) n var(--n); + + --p: var(--k); + --abs-p: abs(var(--k) - var(--p)); + --end: clamp(0, var(--abs-p) - 1, 1); + --dir: calc((1 - 2 * var(--end)) * sign(var(--k) - var(--p))); + --fwd: calc(0.5 * (1 + var(--dir))); + --v: var(--k); + --abs-v: abs(var(--v) - var(--p)); + --prg: calc(var(--abs-v) / (1 - var(--end) + var(--end) * (var(--n) - 1))); + transition: + --p 0s var(--t), + --v var(--t); +} + +.alphabet-header { + text-align: center; + z-index: 100; + margin: 2% 0; + margin-top: 30px; +} + +.alphabet-title { + font-size: 2.5rem; + font-weight: 700; + background: linear-gradient(135deg, #818cf8, #6a7fe0, #3d60eb); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + margin: 10px; + text-shadow: 0 4px 20px rgba(129, 140, 248, 0.3); +} + +.content-area { + position: relative; + margin-top: 2rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + flex: 1; + width: 100%; + max-width: 800px; +} + +.image-container { + position: relative; + width: 600px; + height: 400px; + perspective: 1200px; + transform-style: preserve-3d; + display: flex; + align-items: center; + justify-content: center; +} + +.alphabet-item { + --abs-top: abs(var(--k) - var(--i)); + --not-top: min(1, var(--abs-top)); + --top: calc(1 - var(--not-top)); + --val-mov: ((1 - var(--fwd)) * var(--p) + var(--fwd) * var(--k) - var(--i)); + --abs-mov: abs(var(--val-mov)); + --not-mov: min(1, var(--abs-mov)); + --mov: calc(1 - var(--not-mov)); + --sin: sin(var(--prg) * 0.5turn); + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 1rem; + z-index: mod(calc(var(--n) - 1 + var(--i) - var(--k)), var(--n)); + transition: z-index var(--t) cubic-bezier(1, -0.9, 0, 1.9); +} + +.alphabet-item:not(.active) .text-content { + display: none; +} + +.item-image { + width: 600px; + height: 400px; + object-fit: cover; + object-position: center; + border-radius: 1rem; + border: 2px solid light-dark(transparent, rgba(129, 140, 248, 0.4)); + backdrop-filter: blur(10px); + translate: calc(-100% * var(--mov) * sqrt(var(--sin))); + rotate: calc((1 - var(--sin)) * var(--a)); + will-change: transform, opacity; +} + +.text-content { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + gap: 0.5rem; + width: 100%; + max-width: 400px; + translate: 0 0; + opacity: var(--top); + transition: opacity calc(0.5 * var(--t)) calc(var(--top) * 0.5 * var(--t)); + position: absolute; + bottom: -120px; +} + +.letter { + font-size: 3rem; + font-weight: 900; + text-transform: uppercase; + text-shadow: 0 4px 20px rgba(129, 140, 248, 0.3); + background: linear-gradient(145deg, #3b4ad1 0%, #6b7bff 50%, #0c33f8 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + line-height: 1; +} + +.item-desc { + font-size: 1.5rem; + text-transform: uppercase; + color: light-dark(#000000, #ffffff); + font-weight: 600; + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); + line-height: 1.2; +} + +.nav-buttons { + display: flex; + gap: 5rem; + justify-content: center; + align-items: center; + z-index: 200; + margin-top: 2rem; + width: 100%; + position: relative; +} + +.nav-button { + position: relative; + border: none; + width: 3.5rem; + height: 3.5rem; + margin-top: 6%; + border-radius: 50%; + background: linear-gradient(135deg, rgba(129, 140, 248, 0.2), rgba(165, 180, 252, 0.1)); + color: #4f5ff0; + font-size: 1rem; + font-weight: 900; + transition: all 0.3s ease-out; + cursor: pointer; + border: 2px solid rgba(129, 140, 248, 0.3); + backdrop-filter: blur(10px); + box-shadow: + 0 4px 15px rgba(129, 140, 248, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.nav-button::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: 12px; + height: 12px; + border: solid 3px currentColor; + border-width: 0 3px 3px 0; + transform: translate(-50%, -50%) rotate(135deg); + transition: transform 0.3s ease-out; +} + +.nav-button.next-button::before { + transform: translate(-50%, -50%) rotate(-45deg); +} + +.nav-button:hover, +.nav-button:focus { + background: linear-gradient(135deg, rgba(129, 140, 248, 0.4), rgba(165, 180, 252, 0.2)); + color: #6f84eb; + border-color: rgba(129, 140, 248, 0.6); + box-shadow: + 0 6px 25px rgba(129, 140, 248, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + transform: translateY(-2px) scale(1.05); +} + +.nav-button:active { + transform: translateY(0) scale(0.95); +} + +.keyboard-hint { + position: absolute; + bottom: -2.5rem; + left: 50%; + transform: translateX(-50%); + color: light-dark(#000000, #ffffff); + font-size: 0.875rem; + text-align: center; + z-index: 1000; + padding: 0.5rem 1rem; + background: transparent; + border-radius: 20px; + width: auto; + max-width: 90%; + white-space: nowrap; +} + +.sr-only { + position: absolute; + width: 5px; + height: 10px; + padding: 10px; + margin: -10px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +@supports not (scale: Abs(-2)) { + .alphabet-container { + --abs-p: max(var(--k) - var(--p), var(--p) - var(--k)); + --abs-v: max(var(--v) - var(--p), var(--p) - var(--v)); + } + + .alphabet-item { + --abs-top: max(var(--k) - var(--i), var(--i) - var(--k)); + --abs-mov: max(var(--val-mov), -1 * var(--val-mov)); + } +} + +@supports not (scale: Sign(-2)) { + .alphabet-container { + --dir: clamp(-1, (var(--k) - var(--p)) * 100000, 1); + } +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .alphabet-wrapper { + padding: 10rem 1rem; + justify-content: flex-start; + } + + .alphabet-title { + font-size: 2rem; + } + + .image-container { + width: 400px; + height: 380px; + } + + .item-image { + width: 360px; + height: 260px; + } + + .text-content { + bottom: -60px; + } + + .nav-buttons { + gap: 3rem; + margin-top: 1.5rem; + } + + .nav-button { + width: 3rem; + height: 3rem; + } +} + +@media (max-width: 768px) { + .alphabet-wrapper { + padding: 1.5rem 1rem; + margin-top: 10rem; + justify-content: flex-start; + } + + .alphabet-title { + font-size: 1.75rem; + } + + .image-container { + width: 300px; + height: 360px; + } + + .item-image { + width: 260px; + height: 240px; + } + + .letter { + font-size: 2.5rem; + } + + .item-desc { + font-size: 1.25rem; + } + + .text-content { + bottom: -50px; + } + + .nav-buttons { + gap: 2rem; + margin-top: 1rem; + } + + .nav-button { + width: 2.8rem; + height: 2.8rem; + } + + .nav-button::before { + width: 10px; + height: 10px; + border-width: 0 2px 2px 0; + } + + .keyboard-hint { + font-size: 0.75rem; + white-space: normal; + padding: 0.5rem; + bottom: 10px; + } +} + +@media (max-width: 480px) { + .alphabet-wrapper { + padding: 1rem 0.5rem; + justify-content: flex-start; + } + + .alphabet-title { + font-size: 1.5rem; + } + + .image-container { + width: 280px; + height: 340px; + } + + .item-image { + width: 240px; + height: 200px; + } + + .letter { + font-size: 2rem; + } + + .item-desc { + font-size: 1.1rem; + } + + .text-content { + bottom: -40px; + } + + .nav-buttons { + gap: 1.5rem; + margin-top: 0.5rem; + } + + .nav-button { + width: 2.5rem; + height: 2.5rem; + } + + .nav-button::before { + width: 10px; + height: 10px; + border-width: 0 2px 2px 0; + } + + .keyboard-hint { + font-size: 0.65rem; + padding: 0.4rem 0.8rem; + bottom: 5px; + } +} diff --git a/src/assets/styles/DrawPage.css b/src/assets/styles/DrawPage.css new file mode 100644 index 00000000..62c945b4 --- /dev/null +++ b/src/assets/styles/DrawPage.css @@ -0,0 +1,342 @@ +:root { + --keyboard-bg: white; + --keyboard-alt-bg: #f0f0f0; + --font-normal: "Arial", sans-serif; + --font-fancy: "Brush Script MT", cursive; +} + +.controls-container { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.controls { + display: flex; + gap: 0.5rem; +} + +.control-group { + display: flex; + gap: 0.25rem; +} + +.control-item { + display: flex; + align-items: center; + position: relative; +} + +.control-button { + display: flex; + justify-content: center; + align-items: center; + width: 3.2rem; + height: 3.2rem; + border-radius: 50%; + cursor: pointer; + border: 1px solid #3b82f6; + transition: all 0.2s var(--ease); + box-shadow: 0 1px 3px var(--shadow-sm); + font-size: 1.25rem; + color: #3b82f6; + font-weight: 600; + background-color: transparent; + position: relative; + overflow: hidden; +} + +.control-button:hover { + transform: translateY(-2px) scale(1.05); + box-shadow: 0 6px 12px var(--shadow-lg); + border-color: #2563eb; +} + +.control-button.active { + background-color: #3b82f6; + color: white; +} + +.control-button.active:hover { + transform: translateY(-2px) scale(1.05); + box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4); + background-color: #2563eb; +} + +.control-button:focus { + outline: none; +} + +.control-button.keyboard-focus { + outline: 2px solid white; + outline-offset: 2px; + border-radius: 50px; +} + +.reset-button { + margin-left: 0; +} + +.reset-button:hover { + transition: all 0.3s ease; +} + +.font-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: opacity 0.2s ease; + font-size: 1.25rem; +} + +.font-icon { + opacity: 1; + font-family: Arial, sans-serif; +} + +.font-toggle.active .font-icon { + opacity: 1; +} + +.font-toggle.active { + opacity: 1; +} + +.img-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: opacity 0.2s ease; + width: 1.25rem; + height: 1.25rem; +} + +.img-icon { + opacity: 1; +} + +.img-toggle.active .img-icon { + opacity: 1; +} + +.color-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: opacity 0.2s ease; + font-size: 1.25rem; + font-weight: bold; +} + +.color-icon { + opacity: 1; +} + +.color-toggle.active .color-icon { + opacity: 1; +} + +.bg-icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transition: opacity 0.2s ease; + font-size: 1.25rem; +} + +.bg-icon { + opacity: 1; +} + +.bg-toggle.active .bg-icon { + opacity: 1; +} + +.control-item::after, +.reset-button::after { + content: attr(data-tooltip); + position: absolute; + bottom: -2.5rem; + left: 50%; + transform: translateX(-50%); + background: transparent; + color: light-dark(black, white); + padding: 0.25rem 0.5rem; + border-radius: 0.25rem; + font-size: 0.75rem; + font-weight: 500; + opacity: 0; + transition: all 0.2s var(--ease); + white-space: nowrap; + pointer-events: none; + z-index: 10; +} + +.control-item:hover::after, +.reset-button:hover::after { + opacity: 1; + bottom: -2rem; +} + +.hidden { + display: none; +} + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +@media (max-width: 1024px) { + .controls { + position: absolute; + right: 0.6rem !important; + top: 0; + margin-top: 11rem !important; + flex-direction: column; + gap: 0.5rem; + padding: 0.5rem 0; + z-index: 100; + background: transparent; + align-items: flex-end; + } + + .control-group { + flex-direction: column; + gap: 0.25rem; + align-items: flex-end; + } + + .control-button { + width: 2.8rem; + height: 2.8rem; + font-size: 1.1rem; + } + + .img-icon, + .img-icon-alt { + width: 1.1rem; + height: 1.1rem; + } + + .font-icon, + .font-icon-alt, + .color-icon, + .color-icon-alt, + .bg-icon, + .bg-icon-alt { + font-size: 1.1rem; + } + + .control-item::after, + .reset-button::after { + display: none; + } +} + +@media (max-width: 768px) { + .controls { + right: 0; + padding: 0.4rem; + gap: 0.4rem; + } + + .control-button { + width: 2.5rem; + height: 2.5rem; + font-size: 1rem; + } + + .img-icon, + .img-icon-alt { + width: 1rem; + height: 1rem; + } + + .font-icon, + .font-icon-alt, + .color-icon, + .color-icon-alt, + .bg-icon, + .bg-icon-alt { + font-size: 1rem; + } +} + +@media (max-width: 690px) { + .controls { + right: 0; + padding: 0.3rem; + gap: 0.3rem; + } + + .control-button { + width: 2.2rem; + height: 2.2rem; + font-size: 0.9rem; + } + + .img-icon, + .img-icon-alt { + width: 0.9rem; + height: 0.9rem; + } + + .font-icon, + .font-icon-alt, + .color-icon, + .color-icon-alt, + .bg-icon, + .bg-icon-alt { + font-size: 0.9rem; + } +} + +@media (max-width: 480px) { + .controls { + right: 0; + padding: 0.25rem; + gap: 0.25rem; + } + + .control-button { + width: 2rem; + height: 2rem; + font-size: 0.8rem; + } + + .img-icon, + .img-icon-alt { + width: 0.8rem; + height: 0.8rem; + } + + .font-icon, + .font-icon-alt, + .color-icon, + .color-icon-alt, + .bg-icon, + .bg-icon-alt { + font-size: 0.8rem; + } +} + +.controls { + z-index: 100; +} + +*:focus { + outline: none; + box-shadow: none; +} diff --git a/src/assets/styles/Keyboard.css b/src/assets/styles/Keyboard.css new file mode 100644 index 00000000..99d549fb --- /dev/null +++ b/src/assets/styles/Keyboard.css @@ -0,0 +1,90 @@ +.virtual-keyboard { + display: none; + position: fixed; + bottom: 0; + left: 0; + right: 0; + width: 100vw; + background: #0f172a; + padding: 0.25rem 0.25rem; + border-top: 1px solid var(--light-border); + z-index: 1000; + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); + box-sizing: border-box; +} + +.keyboard-row { + display: flex; + width: 100%; + flex-wrap: wrap; + justify-content: center; + gap: 0.25rem; + margin-bottom: 0.25rem; +} + +.keyboard-key { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 4px; + padding: 0.35rem 0; + font-size: 0.65rem; + font-weight: 500; + color: #374151; + cursor: pointer; + transition: transform 0.1s ease; + text-transform: uppercase; + flex: 1 1 7%; + min-width: 28px; + text-align: center; +} + +.keyboard-key:hover { + background: #e2e8f0; + transform: scale(1.03); +} + +.keyboard-key:active { + background: #cbd5e1; + transform: scale(0.95); +} + +.keyboard-key[data-key="SPACE"] { + flex: 3 1 25%; +} + +.keyboard-key[data-key="ENTER"], +.keyboard-key[data-key="BACKSPACE"] { + flex: 2 1 20%; +} + +@media (max-width: 1024px) { + .virtual-keyboard { + display: block; + } + + .keyboard-key { + font-size: 0.6rem; + padding: 0.3rem 0; + } + + .keyboard-row { + gap: 0.2rem; + margin-bottom: 0.2rem; + } +} + +@media (max-width: 480px) { + .keyboard-key { + font-size: 0.55rem; + padding: 0.25rem 0; + } + + .keyboard-key[data-key="SPACE"] { + flex: 3 1 30%; + } + + .keyboard-key[data-key="ENTER"], + .keyboard-key[data-key="BACKSPACE"] { + flex: 2 1 22%; + } +} diff --git a/src/assets/styles/alphabet.css b/src/assets/styles/alphabet.css index b0087fb4..1fb0a856 100644 --- a/src/assets/styles/alphabet.css +++ b/src/assets/styles/alphabet.css @@ -1,6 +1,6 @@ :root { /*color-scheme: light dark;*/ - --text: light-dark(blue, yellow); + --text: light-dark(white, yellow); --base: color(rgb(68, 137, 166)); } @@ -24,7 +24,8 @@ & .list { display: grid; grid-gap: 1.5rem; - grid-template-columns: repeat(5, minmax(20rem, 1fr)); + grid-template-columns: repeat(5, 1fr); + /* grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); */ margin-block: 2rem; & .letter { @@ -97,3 +98,16 @@ } } } + +.five-column-grid-container { + display: grid; + grid-template-columns: repeat(5, 1fr); + gap: 1rem; +} + +.tv { + background-color: #f0f0f0; + padding: 1rem; + border: 1px solid #ccc; + border-radius: 0.5rem; +} diff --git a/src/assets/styles/alphabets/[alphabet]/playground.css b/src/assets/styles/alphabets/[alphabet]/playground.css index f00b95af..c662d3e5 100644 --- a/src/assets/styles/alphabets/[alphabet]/playground.css +++ b/src/assets/styles/alphabets/[alphabet]/playground.css @@ -5,6 +5,19 @@ --steps-desc: 30; } +.tv { + margin-top: 3rem; +} + +.title_header { + margin-bottom: 4rem; + text-align: center; + font-size: 1.5rem; + font-weight: 700; + letter-spacing: 0.025em; + color: #9ca3af; +} + .container__typing { display: grid; grid-template-columns: repeat(2, 1fr); @@ -38,8 +51,8 @@ align-items: center; width: 100%; height: 100%; - overflow: hidden; padding: 1rem; + position: relative; } & .content__spelling { @@ -55,6 +68,20 @@ & .emoji { font-size: clamp(6em, 15vw, 18em); + display: flex; + justify-content: center; + align-items: center; + width: auto; + height: auto; + padding: 0; + margin: 0; + box-sizing: border-box; + transform: scale(1); + transition: transform 0.3s ease; + } + + & .emoji:hover { + transform: scale(1.1); } & .image__container { @@ -63,7 +90,6 @@ display: none; justify-content: center; align-items: center; - overflow: hidden; } & .image__container img { diff --git a/src/assets/styles/alphabets/index.css b/src/assets/styles/alphabets/index.css index baffe766..7f483a01 100644 --- a/src/assets/styles/alphabets/index.css +++ b/src/assets/styles/alphabets/index.css @@ -1,9 +1,9 @@ .container__alphabets { - padding: 2rem 1.5rem; - max-width: 1400px; + padding: 2rem clamp(1rem, 5vw, 3rem); + max-width: 80vw; margin: 0 auto; - height: calc(100vh - 10rem); - overflow: scroll; + min-height: 100vh; + overflow: visible; & .alphabets__header { text-align: center; @@ -11,13 +11,13 @@ } & .alphabets__header h1 { - font-size: clamp(2.5rem, 5vw, 4rem); + font-size: clamp(2.5rem, 4vw, 3rem); font-weight: 800; + padding-bottom: 0.5rem; background: linear-gradient(135deg, var(--primary), var(--primary-light)); -webkit-background-clip: text; background-clip: text; color: transparent; - margin-bottom: 1rem; } & .subtitle { @@ -29,10 +29,12 @@ & .list__alphabets { display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 1rem; - padding: 0; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; + padding: 0 clamp(1rem, 3vw, 2rem); list-style: none; + margin: 0 auto; + max-width: 1200px; } & .card { @@ -109,11 +111,20 @@ } } +@media (max-width: 1024px) { + .container__alphabets { + & .list__alphabets { + grid-template-columns: repeat(2, 1fr); + } + } +} + @media (max-width: 768px) { .container__alphabets { - padding: 1rem; + padding: 1rem clamp(0.75rem, 3vw, 1.5rem); & .list__alphabets { + padding: 0 clamp(0.5rem, 2vw, 1rem); grid-template-columns: 1fr; gap: 1rem; } @@ -134,3 +145,13 @@ } } } + +@media (max-width: 480px) { + .container__alphabets { + padding: 0.75rem clamp(0.5rem, 2vw, 1rem); + + & .list__alphabets { + padding: 0 0.5rem; + } + } +} diff --git a/src/assets/styles/canvas.css b/src/assets/styles/canvas.css index 0621a2ff..ccef3097 100644 --- a/src/assets/styles/canvas.css +++ b/src/assets/styles/canvas.css @@ -2,10 +2,11 @@ .canvas-generator { min-height: 100vh; width: 100%; - padding: 1rem; + padding: 0; + margin: 0; + max-width: none; font-family: "Comic Sans MS", "Chalkboard SE", sans-serif; box-sizing: border-box; - margin-top: -40px; } /* Controls Section */ diff --git a/src/assets/styles/capital.css b/src/assets/styles/capital.css index 17e1a113..31403e06 100644 --- a/src/assets/styles/capital.css +++ b/src/assets/styles/capital.css @@ -2,83 +2,89 @@ --primary-blue: #2c3e50; --soft-white: #f8f9fa; --gold-accent: #ffd700; - --soft-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); - --hover-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); + --coral-accent: #ff6b6b; + --soft-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + --hover-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - /* Card color options */ - --card-color-1: #3498db; - --card-color-2: #2ecc71; - --card-color-3: #e74c3c; - --card-color-4: #9b59b6; - --card-color-5: #f39c12; - --card-color-6: #1abc9c; - --card-color-7: #d35400; - --card-color-8: #8e44ad; + /* Vibrant card colors */ + --card-color-1: #ff3e6d; + --card-color-2: #00f5d4; + --card-color-3: #4cc9f0; + --card-color-4: #7209b7; + --card-color-5: #f72585; + --card-color-6: #4361ee; + --card-color-7: #f77f00; + --card-color-8: #06ffa5; + + /* Color scheme dependent colors */ + --border-primary: light-dark(#667eea, #00f5d4); + --border-secondary: light-dark(rgba(255, 255, 255, 0.3), rgba(0, 245, 212, 0.2)); } -/* Base styles with mobile-first approach */ +/* Base Styles */ .geographical-mosaic { width: 100%; max-width: 1400px; margin: 0 auto; padding: 1rem; box-sizing: border-box; + font-family: "Courier New", Courier, monospace; + letter-spacing: 1px; + color: light-dark(#ffffff, #000000); + min-height: 100vh; + justify-content: center; } -.hero-section { +/* Header Styles */ +.head { + display: relative; + padding-top: 10px; + height: 50px; + font-size: 25px; + color: light-dark(#667eea, #ffffff); + background: light-dark(var(--header-gradient-light), var(--header-gradient-dark)); + border: 2px solid light-dark(#667eea, #06ffa5); + border-radius: 0.5rem; + align-items: center; + justify-content: center; + font-weight: bold; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); position: relative; - text-align: center; - margin-bottom: 1.5rem; - padding: 3rem 1rem; - border-radius: 1rem; - background: var(--primary-blue); overflow: hidden; - box-shadow: var(--soft-shadow); -} - -.hero-section .hero-content { - position: relative; - z-index: 1; -} - -.hero-section .main-title { - font-size: 2rem; - margin-bottom: 1rem; - color: white; - font-weight: 800; - letter-spacing: -0.5px; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.hero-section .hero-subtitle { - font-size: 1rem; - color: rgba(255, 255, 255, 0.85); - max-width: 100%; - margin: 0 auto; - line-height: 1.5; - padding: 0 0.5rem; } +/* Search Controls */ .controls-bar { display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 0 0.5rem; + justify-content: flex-start; margin-bottom: 1.5rem; - gap: 1rem; - width: 100%; } .search-container { display: flex; align-items: center; width: 100%; - border: 2px solid var(--primary-blue); + height: 50px; + max-width: 500px; border-radius: 0.5rem; - background: var(--soft-white); + color: light-dark(#667eea, #ffffff); + border: 2px solid light-dark(#667eea, #06ffa5); padding: 0.5rem; + margin-top: 10px; + position: relative; + overflow: hidden; +} + +.search-container::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent); } .search-container #searchBar { @@ -86,81 +92,108 @@ border: none; outline: none; font-size: 1rem; - color: black; + color: light-dark(#000000, #ffffff); background: transparent; padding: 0.4rem 0.5rem; + font-family: inherit; + font-weight: bold; } -.search-container .search-icon { +.search-icon { font-size: 1.2rem; - margin-left: 0.25rem; - color: var(--primary-blue); + margin-right: 0.5rem; + color: light-dark(#667eea, #06ffa5); } -.search-container .clear-button { - font-size: 1.2rem; +.clear-button { + font-size: 1.5rem; padding: 0 0.5rem; background: none; border: none; - color: #999; + color: light-dark(#667eea, #06ffa5); cursor: pointer; transition: var(--transition-smooth); margin-left: 0.25rem; + user-select: none; +} + +.clear-button:hover { + color: #ff3e6d; + transform: scale(1.1); +} + +/* Hide default search cancel button */ +input[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + appearance: none; + display: none; } +/* Location Sections */ .location-container { display: grid; - gap: 2rem; + gap: 3rem; } -.location-container .section-header { - display: flex; - flex-direction: column; - gap: 0.75rem; - margin-bottom: 1.5rem; - padding-bottom: 0.75rem; - border-bottom: 2px solid var(--gold-accent); +.location-section { + width: 100%; } -.location-container .section-title { +.section-header { display: flex; align-items: center; - gap: 0.5rem; - font-size: 1.5rem; - font-weight: 700; - color: light-dark(black, white); -} - -.location-container .icon { - font-size: 1.3rem; + justify-content: space-between; + margin-bottom: 1.5rem; } -.location-container .stats-badge { - background: var(--primary-blue); - color: white; +.location-section h2 { + font-size: 1.8rem; + font-weight: 700; + margin: 0; + border-bottom: 3px solid light-dark(#ff3e6d, #e54b90); + padding-bottom: 0.5rem; + flex-grow: 1; + text-shadow: light-dark(0 1px 3px rgba(0, 0, 0, 0.3), none); + background: light-dark(#667eea, #06ffa5); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.count-badge { + border: 2px solid light-dark(#667eea, #06ffa5); + color: light-dark(#667eea, #ffffff); padding: 0.4rem 1rem; - border-radius: 2rem; - font-weight: 600; - box-shadow: var(--soft-shadow); - color: light-dark(black, white); - align-self: flex-start; + border-radius: 25px; + font-size: 1rem; + font-weight: bold; + margin-left: 1rem; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); + position: relative; + overflow: hidden; } +/* Location Grid */ .location-grid { display: grid; - grid-template-columns: repeat(1, 1fr); gap: 1.5rem; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + align-items: start; } -/* Base location card styles */ +/* Location Cards */ .location-card { - position: relative; - border-radius: 0.75rem; - overflow: hidden; + border-radius: 15px; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); + border: 1px solid var(--border-secondary); transition: var(--transition-smooth); - box-shadow: var(--soft-shadow); - border: 1px solid rgba(255, 255, 255, 0.15); - animation: fadeIn 0.6s ease forwards; + overflow: hidden; + cursor: pointer; + min-height: 10px; + display: flex; + flex-direction: column; + position: relative; } .location-card::before { @@ -168,306 +201,282 @@ position: absolute; top: 0; left: 0; - width: 100%; - height: 100%; - z-index: 1; -} - -.location-card:hover { - transform: translateY(-3px); - box-shadow: var(--hover-shadow); + right: 0; + bottom: 0; + opacity: 0; + transition: var(--transition-smooth); + pointer-events: none; } -.location-card .card-inner { - padding: 1.5rem; - position: relative; - z-index: 2; - min-height: 150px; +.location-card:hover::before { + opacity: 1; } -.location-card .location-name { - font-size: 1.4rem; - margin-bottom: 1rem; - font-weight: 800; - position: relative; - padding-bottom: 0.4rem; +/* Card Color Variations */ +[class*="color-card-color-"] { + border-left: 6px solid var(--card-color); + box-shadow: 0 8px 25px rgba(var(--card-color-rgb), 0.15); } -.location-card .location-name::after { +[class*="color-card-color-"]::after { content: ""; position: absolute; - bottom: 0; + top: 0; left: 0; - width: 30px; - height: 2px; - background: currentColor; - opacity: 0.3; + width: 6px; + height: 100%; + background: linear-gradient(180deg, var(--card-color), rgba(var(--card-color-rgb), 0.6)); } -.location-card .location-details { - display: flex; - flex-direction: column; - gap: 0.5rem; - padding: 0.75rem 0; - border-top: 1px solid rgba(255, 255, 255, 0.1); +.color-card-color-1 { + --card-color: var(--card-color-1); + --card-color-rgb: 255, 62, 109; } - -.location-card .location-details .label { - font-style: italic; - color: light-dark(rgb(14, 62, 125), yellow); +.color-card-color-2 { + --card-color: var(--card-color-2); + --card-color-rgb: 0, 245, 212; +} +.color-card-color-3 { + --card-color: var(--card-color-3); + --card-color-rgb: 76, 201, 240; +} +.color-card-color-4 { + --card-color: var(--card-color-4); + --card-color-rgb: 114, 9, 183; +} +.color-card-color-5 { + --card-color: var(--card-color-5); + --card-color-rgb: 247, 37, 133; +} +.color-card-color-6 { + --card-color: var(--card-color-6); + --card-color-rgb: 67, 97, 238; +} +.color-card-color-7 { + --card-color: var(--card-color-7); + --card-color-rgb: 247, 127, 0; +} +.color-card-color-8 { + --card-color: var(--card-color-8); + --card-color-rgb: 6, 255, 165; } -/* Random card color variations */ -.location-card.color-card-color-1 { - background-color: var(--card-color-1); - color: white; +/* Card Details */ +.location-card details { + padding: 1.2rem; + height: 100%; + display: flex; + flex-direction: column; + flex: 1; + position: relative; + z-index: 1; } -.location-card.color-card-color-2 { - background-color: var(--card-color-2); - color: white; +.location-card summary { + font-weight: bold; + font-size: 1.3rem; + cursor: pointer; + list-style: none; + text-transform: capitalize; + font-variant: small-caps; + margin-bottom: 0.8rem; + line-height: 1.3; + word-wrap: break-word; + display: block; + position: relative; + padding-left: 1.5rem; + color: light-dark(#e80883, #ffffff); } -.location-card.color-card-color-3 { - background-color: var(--card-color-3); - color: white; +.location-card summary::before { + content: "▶"; + position: absolute; + left: 0; + top: 0; + font-size: 1rem; + transition: var(--transition-smooth); + background: linear-gradient(45deg, light-dark(#20c997, #4cc9f0)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } -.location-card.color-card-color-4 { - background-color: var(--card-color-4); - color: white; +.location-card details[open] summary::before { + content: "▼"; + font-size: 1rem; + color: light-dark(#ff3e6d, #06ffa5); + transform: scale(1.2); + background: linear-gradient(45deg, light-dark(#ff3e6d, #06ffa5)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } -.location-card.color-card-color-5 { - background-color: var(--card-color-5); - color: white; +.location-card p { + margin: 0; + font-family: Tahoma, sans-serif; + font-style: italic; + font-weight: 700; + font-size: 1rem; + color: light-dark(#333333, #57a4df); + line-height: 1.4; + word-wrap: break-word; + padding-left: 1.5rem; + text-transform: capitalize; + font-variant: small-caps; } -.location-card.color-card-color-6 { - background-color: var(--card-color-6); - color: white; +.location-card:hover { + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); + transform: translateY(-8px) scale(1.02); } -.location-card.color-card-color-7 { - background-color: var(--card-color-7); - color: white; +/* No Results */ +.no-results { + text-align: center; + color: light-dark(#667eea, #06ffa5); + font-size: 1.2rem; + margin: 2rem 0; + padding: 2rem; + border-radius: 15px; + display: none; + font-weight: 500; + border: 1px solid light-dark(#667eea, #06ffa5); + backdrop-filter: blur(10px); + text-shadow: light-dark(0 1px 3px rgba(0, 0, 0, 0.3), none); +} + +.highlight { + color: light-dark(#4b90be, rgb(237, 136, 153)); + font-weight: bold; + position: relative; + overflow: hidden; } -.location-card.color-card-color-8 { - background-color: var(--card-color-8); - color: white; +/* Focus Styles */ +*:focus { + outline: none !important; + box-shadow: none !important; } -/* Remove the previous nth-child color selectors */ -.location-card:nth-child(8n + 1), -.location-card:nth-child(8n + 2), -.location-card:nth-child(8n + 3), -.location-card:nth-child(8n + 4), -.location-card:nth-child(8n + 5), -.location-card:nth-child(8n + 6), -.location-card:nth-child(8n + 7), -.location-card:nth-child(8n + 8) { - background-color: transparent; - color: inherit; +.search-container #searchBar:focus { + box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3); } -dialog#helpModal { - border: none; - border-radius: 10px; - box-shadow: var(--soft-shadow); - padding: 1.5rem; - max-width: 500px; - width: 90%; - text-align: center; - font-family: "Inter", sans-serif; +.location-card summary:focus { + outline: 2px solid var(--border-primary); + outline-offset: 2px; } -dialog#helpModal .modal-content h2 { - margin-top: 0; - font-size: 1.5rem; - color: var(--primary-blue); +.clear-button:focus { + outline: 2px solid var(--border-primary); + outline-offset: 2px; } -dialog#helpModal .modal-close { - margin-top: 1.25rem; - padding: 0.6rem 1.25rem; - border: none; - border-radius: 50px; - background: var(--primary-blue); - color: white; - font-size: 0.9rem; - cursor: pointer; - transition: - background 0.3s ease, - transform 0.3s ease; +/* Animations */ +@keyframes shimmer { + 0% { + left: -100%; + } + 100% { + left: 100%; + } } -dialog#helpModal .modal-close:hover { - background: var(--gold-accent); - transform: translateY(-2px); +@keyframes badge-shine { + 0% { + left: -100%; + } + 100% { + left: 100%; + } } -/* Improved animation for smoother appearance */ -@keyframes fadeIn { +@keyframes fadeInUp { from { opacity: 0; - transform: translateY(15px); + transform: translateY(30px); } - to { opacity: 1; transform: translateY(0); } } -/* Media queries for responsive design */ -@media (min-width: 480px) { - .geographical-mosaic { - padding: 1.25rem; - } - - .hero-section { - padding: 3.5rem 1.5rem; - } - - .hero-section .main-title { - font-size: 2.5rem; - } - - .hero-section .hero-subtitle { - font-size: 1.1rem; - } - - .search-container #searchBar { - font-size: 1.2rem; - } +.location-card { + animation: fadeInUp 0.6s ease forwards; } -@media (min-width: 640px) { - .geographical-mosaic { - padding: 1.5rem; - } +/* Staggered animation delay for cards */ +.location-card:nth-child(1) { + animation-delay: 0.1s; +} +.location-card:nth-child(2) { + animation-delay: 0.2s; +} +.location-card:nth-child(3) { + animation-delay: 0.3s; +} +.location-card:nth-child(4) { + animation-delay: 0.4s; +} +.location-card:nth-child(5) { + animation-delay: 0.5s; +} +.location-card:nth-child(6) { + animation-delay: 0.6s; +} +/* Responsive Design */ +@media (max-width: 768px) { .location-grid { - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } - .hero-section .main-title { - font-size: 2.8rem; + .section-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; } - .hero-section .hero-subtitle { - font-size: 1.2rem; + .count-badge { + margin-left: 0; + align-self: flex-end; } - .search-container #searchBar { - font-size: 1.3rem; + .location-section h2 { + font-size: 1.5rem; } } -@media (min-width: 768px) { +@media (max-width: 480px) { .geographical-mosaic { - padding: 1.75rem; - } - - .hero-section { - padding: 4rem 2rem; - margin-bottom: 2rem; - } - - .hero-section .main-title { - font-size: 3rem; - margin-bottom: 1.25rem; - } - - .hero-section .hero-subtitle { - font-size: 1.3rem; - max-width: 80%; - } - - .controls-bar { - flex-direction: row; - justify-content: flex-start; - padding: 0 1rem; - } - - .search-container { - width: 400px; - padding: 0.6rem; - } - - .search-container #searchBar { - font-size: 1.4rem; - padding: 0.4rem 0.8rem; - } - - .location-container .section-header { - flex-direction: row; - justify-content: space-between; - align-items: center; - margin-bottom: 2rem; + padding: 0.5rem; } - .location-container .section-title { - font-size: 1.8rem; - } - - .location-card .location-details { - flex-direction: row; - justify-content: space-between; - align-items: center; - } -} - -@media (min-width: 1024px) { - .geographical-mosaic { - padding: 2rem; + .location-grid { + grid-template-columns: 1fr; + gap: 1rem; } - .hero-section { - padding: 5rem 2rem; + .location-card { + min-height: 100px; } - .hero-section .main-title { - font-size: 3.5rem; + .location-card summary { + font-size: 1rem; } - .hero-section .hero-subtitle { - font-size: 1.5rem; - max-width: 800px; + .location-card p { + font-size: 0.9rem; } .search-container { - width: 500px; - padding: 0.8rem; - } - - .search-container #searchBar { - font-size: 1.75rem; - padding: 0.5rem 1rem; - } - - .location-container .section-title { - font-size: 2.25rem; - } - - .location-grid { - grid-template-columns: repeat(3, 1fr); - } - - .location-card .card-inner { - padding: 2rem; - min-height: 180px; - } - - .location-card .location-name { - font-size: 1.7rem; - margin-bottom: 1.5rem; + max-width: 100%; } } -@media (min-width: 1280px) { - .location-grid { - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - } +/* Smooth scrolling */ +html { + scroll-behavior: smooth; } diff --git a/src/assets/styles/card.css b/src/assets/styles/card.css index 58c8fae0..034cbf24 100644 --- a/src/assets/styles/card.css +++ b/src/assets/styles/card.css @@ -1,409 +1,267 @@ :root { - --highlight-bg: #ffb6c1; - --highlight-text: #000; - --accent: #f0a93b; + /* Color Variables */ + --primary-600: #4f46e5; + --primary-500: #6366f1; + --accent-500: #f59e0b; + --accent-400: #fbbf24; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-700: #374151; + --gray-800: #1f2937; + --white: #ffffff; + --black: #000000; + + /* Light Mode Defaults */ + --card-bg: var(--white); + --card-border: var(--gray-200); + --card-header-bg: var(--gray-100); + --text-primary: var(--gray-800); + --text-secondary: #6b7280; + --text-on-primary: var(--gray-800); + + /* Surname colors */ + --surname-bg: rgba(0, 0, 0, 0.05); + --surname-hover-bg: rgba(0, 0, 0, 0.08); + --surname-card-bg: rgba(0, 0, 0, 0.03); + --surname-card-hover: rgba(0, 0, 0, 0.05); + + /* UI Variables */ + --border-radius: 0.5rem; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); + --transition: all 0.2s ease; +} + +[data-theme="dark"], +.dark-mode { + /* Dark Mode Overrides */ + --card-bg: #1a1a1a; + --card-border: #333333; + --card-header-bg: #2a2a2a; + --text-primary: #e0e0e0; + --text-secondary: #9e9e9e; + --text-on-primary: #ffffff; + + /* Surname colors */ + --surname-bg: rgba(255, 255, 255, 0.1); + --surname-hover-bg: rgba(255, 255, 255, 0.2); + --surname-card-bg: rgba(255, 255, 255, 0.05); + --surname-card-hover: rgba(255, 255, 255, 0.1); } @media (prefers-color-scheme: dark) { - :root { - --highlight-bg: #db7093; - --highlight-text: #fff; + :root:not([data-theme="light"]) { + --card-bg: #1a1a1a; + --card-border: #333333; + --card-header-bg: #2a2a2a; + --text-primary: #e0e0e0; + --text-secondary: #9e9e9e; + --text-on-primary: #ffffff; + + --surname-bg: rgba(255, 255, 255, 0.1); + --surname-hover-bg: rgba(255, 255, 255, 0.2); + --surname-card-bg: rgba(255, 255, 255, 0.05); + --surname-card-hover: rgba(255, 255, 255, 0.1); } } -.container__card { - background: var(--background); - min-height: 100vh; - position: relative; +/* Card Container - Grid layout remains unchanged */ +.card-container { display: grid; - grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); - gap: 2rem; - padding: 2rem; + grid-template-columns: repeat(4, minmax(220px, 1fr)); + gap: 1.25rem; + padding: 1.25rem; + max-width: 1600px; margin: 0 auto; +} - & .card { - background: var(--background); - border: 1px solid var(--border); - border-radius: 1rem; - box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: center; - transition: all 0.3s ease; - cursor: pointer; - overflow: hidden; - padding: 1.5rem; - box-sizing: border-box; - position: relative; - z-index: 1; - transition: - max-height 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), - padding 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), - margin 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); - overflow: hidden; - color: var(--text); - grid-column: auto; - } - - & .card::before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4px; - background: var(--primary); - } - - & .card:hover { - transform: translateY(-5px); - box-shadow: 0 12px 32px rgba(67, 83, 52, 0.15); - background: color-mix(in srgb, var(--primary) 10%, transparent); - transition: all 0.3s ease; - } - - & .card-header { - display: none; - width: 100%; - } - - & .open .card-header { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - } - - & .card-info { - width: 100%; - display: flex; - align-items: flex-start; - flex-direction: column; - text-align: center; - gap: 15px; - padding: 1rem; - } - - & .open .card-info { - flex-direction: row; - justify-content: space-around; - align-items: center; - } - - & .card-info h2 { - margin: 0 0 5px; - font-size: 1.2em; - word-wrap: break-word; - color: var(--text); - } - - & .card-info p { - display: flex; - align-items: center; - gap: 0.8rem; - padding: 0.8rem; - margin: 0.5rem 0; - background: color-mix(in srgb, var(--primary) 5%, transparent); - border-radius: 8px; - font-size: 1rem; - color: var(--text); - } - - & .card-body { - display: none; - padding-top: 20px; - color: var(--text); - } - - & .back { - background: #f0a93b url("/icons/arrow.svg") center/60% no-repeat; - filter: invert(1); - transform: rotate(-135deg); - width: 2.2rem; - height: 2.2rem; - padding: 0.25rem 0.75rem; - border-radius: 8px; - } - - & .card.open::before { - display: none; - } - - & .card.open { - grid-column: 1 / -1; - width: 100%; - height: auto; - border-radius: 20px; - margin: 20px auto; - max-width: 90%; - background: color-mix(in srgb, var(--primary) 10%, transparent); - overflow: visible; - padding-bottom: 20px; - margin-bottom: 1em; - border: var(--primary) 4px solid; - border-top: 2px solid #f0e68c; - } - - & .card.open .card-body { - display: block; - background: color-mix(in srgb, var(--primary) 10%, transparent); - border-radius: 20px; - animation: fadeIn 0.3s ease-in; - } - - @keyframes fadeIn { - from { - opacity: 0; - transform: translateY(-10px); - } - - to { - opacity: 1; - transform: translateY(0); - } - } - - & .surname-section { - position: relative; - padding-top: 20px; - } +/* Card Styles - White in light mode, dark gray in dark mode */ +.card { + background: var(--card-bg); + border: 1px solid var(--card-border); + border-radius: var(--border-radius); + box-shadow: var(--shadow-sm); + transition: var(--transition); + overflow: hidden; + color: var(--text-primary); + display: flex; + flex-direction: column; +} - & .surname-heading { - text-align: center; - margin-bottom: 20px; - color: var(--accent); - } +.card-header { + background: var(--card-header-bg); + padding: 0.75rem 1rem; + color: var(--text-primary); + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid var(--card-border); +} - & .surname-container { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 20px; - } +/* Rest of the card styles remain exactly the same */ +.card-info { + display: flex; + flex-direction: column; + gap: 0.4rem; + flex-grow: 1; +} - & .surname-card { - position: relative; - background: color-mix(in srgb, var(--background) 50%, transparent); - border: 1px solid var(--border); - border-radius: 12px; - padding: 1.2rem; - margin: 0.8rem 0; - box-shadow: 0 2px 12px rgba(67, 83, 52, 0.08); - width: 200px; - transition: all 0.3s; - color: var(--text); - display: flex; - flex-direction: column; - align-items: flex-start; - } +.info-group { + display: flex; + align-items: center; + gap: 0.4rem; +} - & .surname-card p { - font-size: 1em; - margin: 0.2em 0; - display: flex; - align-items: center; - gap: 0.3rem; - } +.value { + font-size: 0.9rem; + font-weight: 500; +} - & .surname-card p strong { - font-weight: 600; - min-width: auto; - } +.value::before { + content: attr(data-icon); + margin-right: 0.4rem; + font-size: 0.9em; +} - & .copy-button { - width: 2.2rem; - height: 2.2rem; - background: var(--primary) url("/icons/copy-icon.svg") center/60% no-repeat; - color: var(--background); - border: none; - border-radius: 50%; - padding: 0.4em; - font-weight: 500; - cursor: pointer; - transition: all 0.3s ease; - font-size: 0.8rem; - box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); - } +.card-actions { + display: flex; + gap: 0.5rem; + align-items: center; + margin-left: 0.5rem; + flex-shrink: 0; +} - & .copy-button:hover { - background: url("/icons/copy-icon.svg") center/60% no-repeat; - border-radius: 50%; - } +.surname-count { + display: flex; + align-items: center; + gap: 0.3rem; + background: var(--surname-bg); + padding: 0.35rem 0.7rem; + border-radius: var(--border-radius); + font-size: 0.8rem; + font-weight: 500; + border: none; + cursor: pointer; + transition: var(--transition); + color: var(--text-primary); +} - & .copied-tooltip { - position: absolute; - background-color: #333; - color: #fff; - padding: 3px 6px; - border-radius: 4px; - font-size: 12px; - top: -20px; - right: 0; - white-space: nowrap; - z-index: 10; - } +.surname-count:hover { + background: var(--surname-hover-bg); + color: var(--text-primary); +} - & .card p { - font-size: 1.1em; - } +.copy-button { + background: var(--accent-500); + color: var(--black); + border: none; + border-radius: var(--border-radius); + width: 1.8rem; + height: 1.8rem; + display: grid; + place-items: center; + cursor: pointer; + transition: var(--transition); + font-size: 0.9rem; +} - & .card p span { - font-weight: 500; - } +.copy-button:hover { + background: var(--accent-400); +} - & .search-container { - width: 100%; - padding: 1em 1em; - margin-bottom: 1em; - display: flex; - justify-content: flex-start; - background: var(--primary); - color: var(--background); - backdrop-filter: blur(10px); - } +.card-body { + max-height: 0; + overflow: hidden; + transition: max-height 0.3s ease-out; + background: var(--card-bg); +} - & .search-wrapper { - position: relative; - width: 100%; - max-width: 600px; - } +.card.expanded .card-body { + max-height: 500px; + padding: 0.75rem 1rem; + border-top: 1px solid var(--card-border); +} - & .search-icon { - position: absolute; - left: 1rem; - top: 50%; - transform: translateY(-50%); - font-size: 1.2rem; - opacity: 0.7; - pointer-events: none; - } +.surnames-title { + font-size: 0.95rem; + margin-bottom: 0.5rem; + text-align: center; + color: var(--text-primary); + opacity: 0.9; +} - & .search-bar { - width: 100%; - padding: 1rem 3rem; - font-size: 1rem; - border: 1px solid var(--border); - border-radius: 12px; - background: var(--background); - color: var(--text); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); - transition: all 0.3s ease; - } +.surname-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); + gap: 0.5rem; +} - & .search-bar:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); - } +.surname-card { + background: var(--surname-card-bg); + border-radius: calc(var(--border-radius) - 0.1rem); + padding: 0.5rem; + transition: var(--transition); +} - & .highlight { - background: var(--highlight-bg); - color: var(--highlight-text); - padding: 0.25em 0.75em; - border-radius: 0.5em; - transition: - background 0.3s ease, - color 0.3s ease; - } +.surname-card:hover { + background: var(--surname-card-hover); } -.icon { +.surname-card p { + margin: 0; + font-size: 0.85rem; + display: flex; + align-items: center; + gap: 0.3rem; +} +.copy-button { position: relative; } -.icon:hover::after { - content: attr(data-name); +.copied-tooltip { position: absolute; - top: -1.5em; + bottom: 100%; left: 50%; transform: translateX(-50%); - background: #333; - color: #fff; - padding: 2px 4px; + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 4px 8px; border-radius: 4px; - font-size: 0.8rem; + font-size: 12px; white-space: nowrap; + margin-bottom: 5px; z-index: 10; } -@media screen and (max-width: 768px) { - .container__family { - & .surname-card { - padding: 0.8em; - } - - & .copy-button { - top: 0.5em; - right: 0.5em; - padding: 0.4em 0.8em; - font-size: 0.9em; - } - - & .search-container { - padding: 1em 0.5em; - } - - & .search-bar { - font-size: 0.9rem; - padding: 0.8em 2.5em; - } +/* Responsive breakpoints remain exactly the same */ +@media (max-width: 1200px) { + .card-container { + grid-template-columns: repeat(3, minmax(220px, 1fr)); } } -@media screen and (max-width: 469px) { - .container__family { - & .surname-card { - padding: 0.8em; - } +@media (max-width: 900px) { + .card-container { + grid-template-columns: repeat(2, minmax(220px, 1fr)); } } -@media screen and (max-width: 495px) { - .container__family { - & .card-container { - grid-template-columns: 1fr; - } - - & .card { - margin-bottom: 2.5em; - } - - & .card.open { - width: calc(100% - 2em); - margin: 1em; - } - - & .surname-card > p { - text-align: left; - } - - & .surname-card span { - text-align: left; - font-weight: 600; - } - - & .surname-card .surname-head { - text-align: left; - font-weight: 600; - font-size: 1.5em; - color: #111111; - } - - & .surname-card:hover { - transform: translateY(-5px); - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); - } - - & .surname-card h3 { - margin: 0 0 10px 0; - font-size: 1.2em; - } - - & .surname-card p { - margin: 5px 0; - font-size: 0.9em; - } +@media (max-width: 600px) { + .card-container { + grid-template-columns: 1fr; + padding: 1rem; + } + + .card-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .card-actions { + width: 100%; + justify-content: flex-end; + margin-left: 0; + margin-top: 0.5rem; } } diff --git a/src/assets/styles/crossword.css b/src/assets/styles/crossword.css index 774349e9..27580dbe 100644 --- a/src/assets/styles/crossword.css +++ b/src/assets/styles/crossword.css @@ -27,6 +27,12 @@ --stats-button-text: #334155; --stats-button-border: #cbd5e1; --stats-button-hover: #818cf8; + + /* Custom Word and Button Colors */ + --word-font-color: #0f172a; + --word-found-color: #9ca3af; + --stats-button-clicked: #4ade80; + --stats-button-found: #facc15; } /* Main Layout */ @@ -87,6 +93,9 @@ transform: translateY(-3px); background: #eef2ff; border-color: var(--primary-color); + box-shadow: + 0 0 16px 4px var(--primary-color), + 0 8px 20px rgba(99, 102, 241, 0.15); } .grid__puzzle .cell.selected { @@ -139,12 +148,10 @@ 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); background-color: rgba(99, 102, 241, 0.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05); + margin: 20px 0; + border-left: 4px solid var(--primary-color); } details summary { @@ -157,30 +164,26 @@ details summary { position: relative; border-bottom: 2px solid rgba(99, 102, 241, 0.1); margin-bottom: 12px; + font-size: 2.5vw; } details summary::after { content: ""; position: absolute; right: 24px; - width: 20px; - height: 20px; + width: 30px; + height: 30px; 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); + transform: rotate(360deg); } details summary::-webkit-details-marker { display: none; } -details:not([open]) { - background-color: rgba(99, 102, 241, 0.08); - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); -} - details:not([open]) summary { border-bottom: none; margin-bottom: 0; @@ -202,10 +205,10 @@ details:not([open]) summary::after { padding: 8px 16px; border-radius: 25px; font-weight: 600; - color: white; + color: rgb(255, 255, 255); + background-color: rgb(62, 24, 255); transition: var(--transition); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); - background-color: var(--accent6-color); } .word-list .word.found { @@ -217,7 +220,7 @@ details:not([open]) summary::after { /* Stats Components */ .stats-container { display: flex; - gap: 24px; + gap: 14px; margin: 32px 0; justify-content: center; flex-wrap: wrap; @@ -245,10 +248,11 @@ details:not([open]) summary::after { .stats-button:nth-child(1) { background: var(--accent4-color); + background: linear-gradient(135deg, var(--primary-color), var(--accent6-color)); } .stats-button:nth-child(2) { - background: var(--secondary-color); + background: linear-gradient(135deg, var(--accent1-color), var(--accent7-color)); } .stats-button:nth-child(3) { @@ -259,9 +263,18 @@ details:not([open]) summary::after { background: linear-gradient(135deg, var(--accent2-color), var(--accent8-color)); } -/* Responsive Styles */ +/* New States */ +.stats-button.clicked { + background-color: var(--stats-button-clicked); + color: white; +} + +.stats-button.found { + background-color: var(--stats-button-found); + color: #1f2937; +} -/* Tablet */ +/* Responsive Styles */ @media (max-width: 1024px) { .grid__puzzle { gap: 6px; @@ -277,23 +290,23 @@ details:not([open]) summary::after { } .stats-button { - font-size: 0.85rem; + font-size: 3vh; padding: 11px 18px; min-width: 70px; } .word-list { gap: 10px; - padding: 14px; + padding: 10px 14px; + margin-top: 5px; } .word-list .word { font-size: 0.9rem; - padding: 7px 14px; + padding: 5px 14px; } } -/* Small tablets & large phones */ @media (max-width: 768px) { .grid__puzzle { gap: 4px; @@ -309,31 +322,68 @@ details:not([open]) summary::after { } .stats-button { - font-size: 0.8rem; + font-size: 3vh; padding: 10px 16px; + display: flex; + align-items: center; + gap: 6px; } } -/* Mobile phones */ @media (max-width: 480px) { .grid__puzzle { - gap: 4px; - padding: 10px; + gap: 3px; + padding: 3px; grid-template-columns: repeat(auto-fit, minmax(20px, 1fr)); } .grid__puzzle .cell { font-size: 6vw; - border-width: 1px; - border-radius: none; - min-width: 20px; - min-height: 20px; + border-width: 2px; + min-width: 25px; + min-height: 25px; + } + + .stats-container { + flex-wrap: wrap; + gap: 10px; + justify-content: center; + align-items: center; } .stats-button { - font-size: 0.75rem; + font-size: 4vw; padding: 8px 14px; - min-width: 60px; + min-width: 80px; + color: black; + color: rgb(255, 255, 255); + background: var(--accent2-color); + display: flex; + align-items: center; + gap: 6px; + } + + #solutionBtn { + background: none; + border: none; + max-width: 45px; + max-height: 45px; + cursor: pointer; + transition: all 0.3s ease; + display: flex; + align-items: center; + } + + .stats-button .bulb-icon, + .stats-button svg { + max-width: 22px !important; + max-height: 22px !important; + display: inline-block; + vertical-align: middle; } -} \ No newline at end of file + details summary { + font-size: 6vw; + padding: 12px 16px; + } +} diff --git a/src/assets/styles/footer.css b/src/assets/styles/footer.css index c7bd7a2d..a45a66ab 100644 --- a/src/assets/styles/footer.css +++ b/src/assets/styles/footer.css @@ -12,3 +12,9 @@ .footer__nav--item { @apply underline underline-offset-2 hover:text-blue-500 dark:hover:text-blue-400; } + +@media (max-width: 768px) { + .container__footer { + display: none; + } +} diff --git a/src/assets/styles/games.css b/src/assets/styles/games.css index f3c668e0..e3a63450 100644 --- a/src/assets/styles/games.css +++ b/src/assets/styles/games.css @@ -17,11 +17,15 @@ --transition: all 0.3s ease; /* Common styles for game components */ - --primary-bg: #1a1a1a; + --primary-bg: #2b2b40; --default-bg: #0b1f54; --accent-color: #4a90e2; --text-color: #ffffff; --modal-bg: rgba(0, 0, 0, 0.8); + + /* Variables for card border */ + --card-border: #444460; + --card-border-hover: var(--accent-color); } /* Layout Grid System */ @@ -29,12 +33,45 @@ display: grid; grid-template-rows: auto 1fr; min-height: 100vh; - padding: 2rem; + padding: 0rem; place-items: start center; width: 100%; box-sizing: border-box; } +.selection-title { + font-size: 2.8rem; + font-weight: 700; + color: light-dark(black, white); + margin-bottom: 3rem; + text-align: center; + letter-spacing: 0.05em; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* Styles for the header content (back button and title) */ +.header-content { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 0 2rem; + margin-bottom: 3rem; +} + +/* Add a title style for the page */ +.game-page-title { + font-size: 2.8rem; + font-weight: 700; + color: #4a90e2; + margin: 1; + flex-grow: 1; + text-align: center; + letter-spacing: 0.05em; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); +} + +/* Navigation */ .game-wrapper { flex-direction: row; display: flex; @@ -50,7 +87,6 @@ display: grid; place-items: center; width: 100%; - margin-top: 2rem; } .game-cards { @@ -67,47 +103,68 @@ justify-content: flex-end; } -/* Navigation */ -.back { - display: flex; - grid-auto-flow: column; - gap: 0.5rem; - align-items: center; - text-decoration: none; - font-weight: 500; - transition: var(--transition); -} - -.back svg { - width: 24px; - height: 24px; -} - /* Game Card Styles */ .game-card { - background: var(--primary-bg); - border-radius: 0.5rem; + background-color: var(--card-bg, light-dark(#ffffff, #2b2b40)); + border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - transition: transform 0.2s ease; + transition: + transform 0.2s ease, + border-color 0.3s ease; cursor: pointer; text-decoration: none; - color: var(--text-color); - display: block; + color: light-dark(black, white); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + height: 270px; + justify-content: flex-start; + border: 2px solid var(--card-border); } .game-card:hover { transform: translateY(-4px); + background-color: var(--card-hover-bg, light-dark(#ffffff, #3c3c5a)); + border-color: var(--card-border-hover); +} + +.game-card-content { + display: flex; + flex-direction: column; + align-items: center; + width: 100%; + padding-top: 1rem; +} + +.game-card-icon { + width: 64px; + height: 64px; + margin-bottom: 1.5rem; + display: flex; + justify-content: center; + align-items: center; +} + +.game-card-icon svg { + width: 100%; + height: 100%; + stroke: currentColor; + display: block; } -.game-card h2 { +.game-card-title { margin: 0 0 0.5rem 0; font-size: 1.5rem; + color: light-dark(black, white); } -.game-card p { +.game-card-description { margin: 0; opacity: 0.8; + font-size: 1rem; + color: var(--secondary, #cfcfcf); } /* Draw Container Styles */ @@ -154,6 +211,22 @@ .game-cards { grid-template-columns: 1fr; } + + .selection-container { + padding-top: 2rem; + } + + .header-content { + flex-direction: column; + align-items: flex-start; + padding: 0 1rem; + } + + .game-page-title { + text-align: left; + margin-top: 1rem; + flex-grow: unset; + } } @media (max-width: 480px) { @@ -165,6 +238,7 @@ @media (max-width: 640px) { .game-card { padding: 1rem; + height: 220px; } .game-card h2 { diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css index f86f324b..144abb8f 100644 --- a/src/assets/styles/globals.css +++ b/src/assets/styles/globals.css @@ -12,7 +12,8 @@ --background: #0f172a; --text: #f1f5f9; --border: #1e293b; - + --card: rgba(37, 53, 79, 0.8); + --card-bg: rgba(37, 53, 79, 0.8); --header-h: 4rem; --footer-h: 4rem; --sidebar-w: 16rem; @@ -25,6 +26,7 @@ --background: #0f172a; --text: #f1f5f9; --border: #1e293b; + --card-bg: rgba(37, 53, 79, 0.8); } [data-theme="light"] { @@ -34,6 +36,7 @@ --background: #ffffff; --text: #0f172a; --border: #e2e8f0; + --card-bg: rgba(255, 255, 255, 0.8); } html { @@ -170,6 +173,12 @@ min-height: 100vh; } + @media (max-width: 768px) { + .content { + height: 10vh; + } + } + .layout { height: fit-content; max-height: 100dvh; diff --git a/src/assets/styles/glossary/colour.css b/src/assets/styles/glossary/colour.css new file mode 100644 index 00000000..ccaa4a40 --- /dev/null +++ b/src/assets/styles/glossary/colour.css @@ -0,0 +1,165 @@ +#back-btn { + position: fixed; /* Changed to fixed */ + top: 10px; + left: 10px; + background-color: #f0f0f0; + border: 1px solid #ccc; + padding: 8px 16px; + border-radius: 5px; + cursor: pointer; + z-index: 1000; /* Added z-index */ +} +.colours-grid .flip__card { + width: 100%; + height: 100%; + perspective: 1000px; + min-height: 220px; /* Adjusted min-height */ +} + +.colours-grid .flip__card .card-content-front { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + text-align: center; + padding: 1rem; +} + +.colours-grid .flip__card .text { + /* For the Colour Name on the front */ + font-size: 3.5rem; + font-weight: 700; + color: var(--text); + margin: 0; + transition: color 0.3s ease; +} + +.colours-grid .flip__card .card { + background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%)); + border-radius: 1.25rem; + box-shadow: + 0 4px 15px rgba(0, 0, 0, 0.05), + 0 1px 2px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + border: 1px solid var(--border); + backdrop-filter: blur(10px); + width: 100%; + height: 100%; +} + +.colours-grid .flip__card .card:hover .card__glow { + opacity: 1; +} + +.colours-grid .flip__card .card.card__front:hover .text { + background: none; + -webkit-background-clip: initial; + background-clip: initial; + color: var(--primary); +} + +.colours-grid .flip__card .flip__card__inner { + width: 100%; + height: 100%; + text-align: left; + transition: transform 0.8s; + transform-style: preserve-3d; +} + +.colours-grid .flip__card .card__front, +.colours-grid .flip__card .card__back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.colours-grid .flip__card .card__back { + padding: 0; + transform: rotateY(180deg); + /* The background is now fully set by the inline style in the template. + Ensure no other background properties here conflict. */ +} + +.colours-grid .flip__card.flipped .flip__card__inner { + transform: rotateY(180deg); +} + +.colours-grid .flip__card .flip__button { + position: absolute; + top: 0.75rem; + right: 0.75rem; + z-index: 10; +} + +.colours-grid .flip__card .flip__button__text { + font-size: 0.875rem; + color: var(--secondary); + padding: 0.35rem 0.75rem; + background: color-mix(in srgb, var(--background) 97%, var(--text) 3%); + border-radius: 2rem; + cursor: pointer; + transition: all 0.3s ease; + border: 1px solid var(--border); + text-align: left; +} + +.colours-grid .flip__card .flip__button__text:hover { + background: var(--primary); + color: var(--text-on-primary, #fff); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.is-hidden { + display: none !important; +} + +.colours-grid .flip__card .card__glow { + position: absolute; + inset: 0; + background: radial-gradient( + circle at var(--mouse-x, 50%) var(--mouse-y, 50%), + color-mix(in srgb, var(--primary) 10%, transparent) 0%, + transparent 60% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +@media (max-width: 768px) { + .colours-grid .flip__card .text { + font-size: 1.25rem; + } +} + +.colours-grid.grid-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1rem; + padding: 1rem; +} + +/* Added CSS for the corner triangle */ +.corner-triangle { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + border-top: 70px solid var(--triangle-color); /* Increased size */ + border-right: 70px solid transparent; /* Increased size */ + z-index: 1; +} diff --git a/src/assets/styles/glossary/flags.css b/src/assets/styles/glossary/flags.css new file mode 100644 index 00000000..f5ea35f3 --- /dev/null +++ b/src/assets/styles/glossary/flags.css @@ -0,0 +1,228 @@ +/* Card structure and flip animation styles (scoped to .flags-grid) */ +.flags-grid .flip__card { + width: 100%; + height: 100%; + perspective: 1000px; + min-height: 250px; +} + +.flags-grid .flip__card .image { + object-fit: cover; + width: 100%; + height: 100%; + background-color: var(--border); +} + +/* Specific style for flag images on the back */ +.flags-grid .flip__card .flag-image { + object-fit: contain !important; + background-color: transparent !important; + border: 1px solid #eee; + max-width: 100%; + max-height: 100%; +} + +.flags-grid .flip__card .character { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + font-size: 4rem; + margin: 0; + line-height: 1; + color: var(--primary) !important; + background: none !important; + -webkit-background-clip: initial !important; + background-clip: initial !important; + text-shadow: none !important; + text-align: center; +} + +.flags-grid .flip__card .flipped__text { + display: flex; + justify-content: center; + align-items: center; + height: 100%; + font-size: 1.5rem; + font-weight: 800; + margin: 0; + line-height: 1; + color: var(--text); + text-shadow: var(--character-shadow); + text-align: center; + padding: 1rem; +} + +.flags-grid .flip__card .card { + background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%)); + border-radius: 1.25rem; + padding: 1.75rem; + box-shadow: + 0 4px 15px rgba(0, 0, 0, 0.05), + 0 1px 2px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: column; + gap: 1.25rem; + position: relative; + overflow: hidden; + border: 1px solid var(--border); + backdrop-filter: blur(10px); + width: 100%; + height: 100%; +} + +.flags-grid .flip__card .card:hover .card__glow { + opacity: 1; +} + +.flags-grid .flip__card .card:hover .text { + background: linear-gradient(135deg, var(--primary), var(--primary-light)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.flags-grid .flip__card .flip__card__inner { + width: 100%; + height: 100%; + text-align: left; + transition: transform 0.8s; + transform-style: preserve-3d; +} + +.flags-grid .flip__card .card__front, +.flags-grid .flip__card .card__back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + top: 0; + left: 0; +} + +.flags-grid .flip__card .card__back { + padding: 0.5rem; + transform: rotateY(180deg); + display: flex; + justify-content: center; + align-items: center; + background-color: #f0f0f0; +} + +.flags-grid .flip__card.flipped .flip__card__inner { + transform: rotateY(180deg); +} + +.flags-grid .flip__card .letter__header { + display: flex; + justify-content: flex-start; + align-items: flex-start; + position: relative; + min-height: 50px; +} + +.flags-grid .flip__card .flip__button { + position: absolute; + top: 0.75rem; + right: 0.75rem; + z-index: 10; +} + +.flags-grid .flip__card .flip__button__text { + font-size: 0.875rem; + color: var(--secondary); + padding: 0.35rem 0.75rem; + background: color-mix(in srgb, var(--background) 97%, var(--text) 3%); + border-radius: 2rem; + cursor: pointer; + transition: all 0.3s ease; + border: 1px solid var(--border); + text-align: left; +} + +.flags-grid .flip__card .flip__button__text:hover { + background: var(--primary); + color: var(--text-on-primary, #fff); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.flags-grid .flip__card .letter__content { + display: flex; + flex-direction: column; + gap: 0.25rem; + z-index: 1; + text-align: left; +} + +.flags-grid .flip__card .text { + font-size: 1.25rem; + font-weight: 700; + color: var(--text); + margin: 0; + transition: color 0.3s ease; + text-align: left; +} + +.flags-grid .flip__card .description { + font-size: 0.8rem; + color: var(--secondary); + margin: 0; + line-height: 1.4; + opacity: 0.9; + text-align: left; +} + +.flags-grid .flip__card .card__glow { + position: absolute; + inset: 0; + background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), + color-mix(in srgb, var(--primary) 10%, transparent) 0%, + transparent 60%); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +@media (max-width: 768px) { + .flags-grid .flip__card .character { + font-size: 3rem; + } + + .flags-grid .flip__card .text { + font-size: 1.1rem; + } + + .flags-grid .flip__card .description { + font-size: 0.75rem; + } + + .flags-grid .flip__card .flipped__text { + font-size: 1.2rem; + } +} + +/* Grid layout for the flags page */ +.flags-grid.grid-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 1.5rem; + padding: 1rem; +} + +.is-hidden { + display: none !important; +} + +.flags-grid .flip__card .flip__button__text.rotate-symbol-label { + font-size: 1.1em; + line-height: 1; +} + + +.flags-grid .card__back .character { + font-family: "Noto Color Emoji", sans-serif; + font-size: clamp(6rem, 15vw, 8rem); +} \ No newline at end of file diff --git a/src/assets/styles/glossary/index.css b/src/assets/styles/glossary/index.css new file mode 100644 index 00000000..cfd2237b --- /dev/null +++ b/src/assets/styles/glossary/index.css @@ -0,0 +1,77 @@ +.card__inner { + background: var(--background); + border: 2px solid var(--border); + border-radius: 1rem; + padding: clamp(1rem, 3vw, 1.25rem); + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: clamp(0.75rem, 2vw, 1rem); + transition: all 0.2s ease; +} + +.category__icon { + font-size: clamp(2rem, 4vw, 2.5rem); + margin-bottom: clamp(0.25rem, 2vw, 0.5rem); + line-height: 1; +} + +.category__title { + font-size: clamp(1.25rem, 3vw, 1.5rem); + margin-bottom: 0.75rem; +} + +.category__description { + font-size: clamp(0.9rem, 2vw, 0.95rem); + line-height: 1.6; + flex-grow: 1; +} + +.btn { + display: flex; + align-items: center; + justify-content: center; + padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 2vw, 2rem); + border-radius: 0.75rem; + font-weight: 600; + font-size: clamp(0.9rem, 2vw, 1.1rem); + transition: all 0.2s ease; + text-decoration: none; + flex: 1; + min-width: 119px; +} + +.card__actions { + display: flex; + margin-top: auto; +} + +@media (max-width: 768px) { + .btn { + width: 100%; + } +} + +.btn-playground { + background: var(--primary); + color: var(--background); +} + +.card:hover .card__inner { + transform: translateY(-3px); + border-color: var(--primary); +} + +.btn:hover { + transform: translateY(-2px); +} + +.btn-playground:hover { + background: var(--primary-light); +} + +.icon { + font-size: 1.2em; + margin-right: 0.5em; +} diff --git a/src/assets/styles/glossary/waqt.css b/src/assets/styles/glossary/waqt.css new file mode 100644 index 00000000..10eeb030 --- /dev/null +++ b/src/assets/styles/glossary/waqt.css @@ -0,0 +1,222 @@ +.back { + left: 0; + top: 1rem; + margin-bottom: 5px; + display: flex; + align-items: center; + gap: 0.1rem; + text-decoration: none; + color: light-dark(black, white); + font-weight: 500; + font-size: 1.1rem; + transition: color 0.3s ease; +} + +.back svg { + width: 24px; + height: 24px; + stroke: currentColor; +} +.waqt-grid .flip__card { + width: 100%; + height: 100%; + perspective: 1000px; + min-height: 250px; +} + +.waqt-grid .flip__card .card-content-front, +.waqt-grid .flip__card .card-content-back { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100%; + text-align: center; + padding: 1.5rem; + box-sizing: border-box; +} + +.waqt-grid .flip__card .waqt-icon { + font-size: 3rem; + margin-bottom: 0.75rem; +} + +.waqt-grid .flip__card .text { + font-size: 1.75rem; + font-weight: 600; + color: var(--text); + margin: 0; + transition: color 0.3s ease; +} + +.waqt-grid .flip__card .card-content-back .hindi-term { + font-size: 1.5rem; + font-weight: bold; + color: var(--primary); + margin-bottom: 0.5rem; +} + +.waqt-grid .flip__card .card-content-back .description { + font-size: 0.95rem; + color: var(--text); + line-height: 1.6; +} + +.waqt-grid .flip__card .card { + background: linear-gradient(145deg, var(--background), color-mix(in srgb, var(--background) 97%, var(--text) 3%)); + border-radius: 1.25rem; + box-shadow: + 0 4px 15px rgba(0, 0, 0, 0.05), + 0 1px 2px rgba(0, 0, 0, 0.1); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + border: 1px solid var(--border); + backdrop-filter: blur(10px); + width: 100%; + height: 100%; +} + +.waqt-grid .flip__card .card:hover .card__glow { + opacity: 1; +} + +.waqt-grid .flip__card .card.card__front:hover .text { + color: var(--primary); +} +.waqt-grid .flip__card .card.card__front:hover .waqt-icon { + transform: scale(1.1); + transition: transform 0.3s ease; +} + +.waqt-grid .flip__card .flip__card__inner { + width: 100%; + height: 100%; + text-align: left; + transition: transform 0.8s; + transform-style: preserve-3d; +} + +.waqt-grid .flip__card .card__front, +.waqt-grid .flip__card .card__back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + top: 0; + left: 0; + display: flex; + justify-content: center; + align-items: center; +} + +.waqt-grid .flip__card .card__back { + transform: rotateY(180deg); +} + +.waqt-grid .flip__card.flipped .flip__card__inner { + transform: rotateY(180deg); +} + +.waqt-grid .flip__card .flip__button { + position: absolute; + top: 0.75rem; + right: 0.75rem; + z-index: 10; +} + +.waqt-grid .flip__card .flip__button__text { + font-size: 0.875rem; + color: var(--secondary); + padding: 0.35rem 0.75rem; + background: color-mix(in srgb, var(--background) 97%, var(--text) 3%); + border-radius: 2rem; + cursor: pointer; + transition: all 0.3s ease; + border: 1px solid var(--border); + text-align: left; +} + +.waqt-grid .flip__card .flip__button__text:hover { + background: var(--primary); + color: var(--text-on-primary, #fff); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.is-hidden { + display: none !important; +} + +.waqt-grid .flip__card .card__glow { + position: absolute; + inset: 0; + background: radial-gradient( + circle at var(--mouse-x, 50%) var(--mouse-y, 50%), + color-mix(in srgb, var(--primary) 10%, transparent) 0%, + transparent 60% + ); + opacity: 0; + transition: opacity 0.3s ease; + pointer-events: none; +} + +@media (max-width: 768px) { + .waqt-grid .flip__card .text { + font-size: 1.25rem; + } + .waqt-grid .flip__card .waqt-icon { + font-size: 2.5rem; + } + .waqt-grid .flip__card .card-content-back .hindi-term { + font-size: 1.2rem; + } + .waqt-grid .flip__card .card-content-back .description { + font-size: 0.85rem; + } + .waqt-grid .flip__card { + min-height: 220px; + } +} + +.waqt-grid.grid-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.5rem; /* Increased gap slightly */ + padding: 1rem; +} + +.page-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 2rem; + padding: 0 1rem; +} + +.page-header .page-main-title { + margin-bottom: 0; + text-align: center; + flex-grow: 1; +} +.flip__all__button { + padding: 0.5rem 1rem; + border: 1px solid var(--primary); + background-color: var(--background); + color: var(--primary); + border-radius: 0.5rem; + cursor: pointer; + transition: all 0.2s ease-in-out; + font-weight: 500; +} + +.flip__all__button:hover, +.flip__all__button.active { + background-color: var(--primary); + color: var(--text-on-primary, #fff); + box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 40%, transparent); +} diff --git a/src/assets/styles/kannada.css b/src/assets/styles/indic.css similarity index 53% rename from src/assets/styles/kannada.css rename to src/assets/styles/indic.css index e223f9b0..b25d7ab3 100644 --- a/src/assets/styles/kannada.css +++ b/src/assets/styles/indic.css @@ -7,7 +7,20 @@ --text-primary: #f8fafc; --text-secondary: #94a3b8; } - +.main-header { + position: sticky; + top: 0; + border-radius: 0.75rem; + z-index: 100; + background: light-dark(white, var(--navy-blue)); + padding-top: 1rem; + padding-bottom: 1rem; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); +} +.main-header.scrolled-header { + padding-top: 2rem; + padding-bottom: 0.5rem; /* Reduced padding-top */ +} .language-letters-container { max-width: 1400px; margin: 1px auto; @@ -15,7 +28,7 @@ /*background: var(--deep-blue);*/ border-radius: 1.5rem; position: relative; - overflow: hidden; + /*overflow: hidden;*/ /*box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);*/ &::before { @@ -50,7 +63,9 @@ display: block; margin-bottom: 0.8rem; font-size: 1.1rem; - color: #2dd4bf; + background-image: linear-gradient(135deg, #69ff97 10%, #00e4ff 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; @@ -58,16 +73,20 @@ transition: color 0.3s ease; &.active { - color: #60a5fa; + background-image: linear-gradient(135deg, #72edf2 10%, #5151e5 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } } - & select { width: 100%; - padding: 1rem 2.5rem 1rem 1.5rem; - font-size: 1.1rem; + padding: 0.7rem 1.39rem 0.7rem 0.89rem; + font-size: 1.3rem; + text-transform: capitalize; + font-variant: small-caps; + letter-spacing: 2px; border: 2px solid rgba(125, 211, 252, 0.3); - border-radius: 12px; + border-radius: 0.75rem; background: linear-gradient(145deg, #1d4ed8, #123085); color: light-dark (black, white); cursor: pointer; @@ -80,7 +99,6 @@ background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.5em; - &:hover { border-color: #7dd3fc; transform: translateY(-1px); @@ -88,19 +106,19 @@ 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } - &:focus { outline: none; border-color: #2dd4bf; box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.3); } - & option { - padding: 1rem; - background: #1e293b; - color: #f8fafc; + padding: 0.5rem 1.25rem 0.5rem 0.75rem; + font-variant: small-caps; + text-transform: capitalize; + letter-spacing: 2px; + background: light-dark(white, #1e293b); + color: light-dark (black, white); border-bottom: 1px solid rgba(125, 211, 252, 0.1); - &:checked { background: rgba(29, 78, 216, 0.5); font-weight: 600; @@ -109,61 +127,69 @@ } } -.toggle-button-wrapper { +.toggle-button { + background: light-dark (var(--navy-blue), var(--text-primary)); + border: 1px solid rgba(125, 211, 252, 0.3); + border-radius: 0.75rem; + width: 48px; + height: 48px; display: flex; align-items: center; justify-content: center; - margin: 0 1rem; -} - -.toggle-button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - background: var(--navy-blue); - border: 1px solid #123085; - padding: 0.75rem 1.5rem; - border-radius: 0.75rem; cursor: pointer; - overflow: hidden; - min-width: 200px; - transition: background 0.3s ease; + transition: all 0.3s ease; + color: light-dark (black, white); + font-size: 1.5rem; + margin: 0 0.5rem; + align-self: center; + position: relative; + margin-top: 40px; + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); - & .toggle-slider { - position: absolute; - top: 0; - bottom: 0; - left: 0; - width: 50%; - background: #123085; - /*background: #2dd4bf;*/ - border-radius: 0.75rem; - transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1); - z-index: 0; + &:hover { + background: light-dark (var(--navy-blue), var(--text-primary)); + transform: scale(1.1); + border-color: #7dd3fc; + box-shadow: + 0 10px 15px -3px rgba(0, 0, 0, 0.1), + 0 4px 6px -2px rgba(0, 0, 0, 0.05); } - & span { - position: relative; - z-index: 1; - font-size: 1.25rem; - color: white; - transition: - transform 0.3s ease, - color 0.3s ease; + &:active { + transform: scale(0.95); + } - &.active { - color: white; - transform: scale(1.1); - } + &.toggled { + transform: rotate(180deg); + background: linear-gradient(to right, var(--sky-blue), var(--teal-accent)); + color: var(--navy-blue); } - &.toggled .toggle-slider { - left: 50%; + &.toggled svg { + fill: var(--navy-blue); } } +.toggle-button.swapping { + transform: rotate(180deg); + transition: transform 0.3s ease; +} + +.toggle-button i { + font-size: 1.5rem; + transition: transform 0.2s ease; +} + +.toggle-button:hover i { + transform: scale(1.1); +} + +.toggle-button:active i { + transform: scale(0.9); +} + .language-letters-grid { display: grid; gap: 1rem; @@ -200,7 +226,7 @@ width: 100%; padding: 1rem 0.5rem; border-radius: 0.75rem; - background: var(--navy-blue); + background: light-dark(white, var(--navy-blue)); border: 1px solid rgba(125, 211, 252, 0.1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; @@ -248,16 +274,21 @@ } & .language-letter-top { - font-size: 2.25rem; + font-size: 71px; font-weight: 600; - color: white; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5); + background-size: 600%; + animation: anime 16s linear infinite; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } & .language-letter-bottom { - font-size: 1.75rem; + font-size: 50px; font-weight: 500; - color: var(--text-secondary); + background-image: radial-gradient(circle farthest-corner at 10% 20%, var(--sky-blue) 1%, var(--teal-accent) 90%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; opacity: 0.9; } @@ -278,53 +309,17 @@ } } } - -.language-letter-kannada, -.language-letter-hindi { - width: 100%; - height: 50%; - display: flex; - align-items: center; - justify-content: center; - transition: - transform 0.3s ease, - color 0.3s ease, - order 0.01s ease; -} - -.language-letter-kannada { - font-size: 2rem; - font-weight: 600; - color: var(--text-primary); - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.language-letter-hindi { - font-size: 1.7rem; - /* Increased from 1.25rem */ - font-weight: 700; - color: var(--text-secondary); - opacity: 0.9; -} - -.language-letter-card.reverse { - & .language-letter-kannada { - order: 2; - transform: scale(1.6); - /* Adjusted scale to match increased font size */ - font-size: 2rem; - color: var(--text-secondary); +@keyframes anime { + 0% { + background-position: 0% 50%; } - - & .language-letter-hindi { - order: 1; - transform: scale(1.6); - /* Increased scale */ - font-size: 2rem; - color: var(--text-primary); + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; } } - /* English text styling */ .english-text { font-family: sans-serif; @@ -348,15 +343,26 @@ .language-letters-grid { grid-template-columns: repeat(3, 1fr); } + .toggle-container { + gap: 1rem; + & select { + width: 100%; + font-size: 1rem; + padding: 0.8rem 2rem 0.8rem 1rem; + } + } } @media (max-width: 640px) { + .main-header { + position: relative; + } .toggle-container { flex-direction: column; gap: 1rem; - + align-items: center; & .dropdown-wrapper { - width: 100%; + width: 80%; min-width: auto; } @@ -371,4 +377,93 @@ .language-letters-grid { grid-template-columns: repeat(2, 1fr); } -} \ No newline at end of file +} + +/* Add this CSS to your existing styles */ +.letter-popup { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.8); + z-index: 1000; + justify-content: center; + align-items: center; +} +.outer { + background: conic-gradient(from var(--gradient-angle), #1ba8e9, #1619b9, #800f86, #ff057c, #800f86, #1619b9, #1ba8e9); + animation: rotation 20s linear infinite; + border-radius: 1rem; + padding: 0.5rem; + width: 650px; + aspect-ratio: 1/1; + max-width: 90%; + position: relative; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); + justify-content: center; + align-items: center; +} +.outer::after { + content: ""; + position: absolute; + inset: 0; + background: conic-gradient(from var(--gradient-angle), #1ba8e9, #1619b9, #800f86, #ff057c, #800f86, #1619b9, #1ba8e9); + animation: rotation 20s linear infinite; + filter: blur(4rem); + z-index: -1; +} +.middle { + background: light-dark(white, var(--deep-blue)); + border-radius: 1rem; + padding: 0.5rem; + aspect-ratio: 1/1; + max-width: 100%; + position: relative; + display: flex; + justify-content: center; + align-items: center; +} +.popup-content { + background: conic-gradient(from var(--gradient-angle), #1ba8e9, #1619b9, #800f86, #ff057c, #800f86, #1619b9, #1ba8e9); + animation: rotation 20s linear infinite; + border-radius: 1rem; + aspect-ratio: 1/1; + width: 650px; + max-width: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.close-button { + position: absolute; + top: 10px; + right: 15px; + background: none; + border: none; + color: var(--text-secondary); + font-size: 2rem; + cursor: pointer; + transition: color 0.3s ease; +} +.popup-letter { + font-size: 25rem; + font-weight: bold; + text-align: center; + color: light-dark(white, var(--deep-blue)); + text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Optional: for better visibility */ +} +@property --gradient-angle { + syntax: ""; + initial-value: 0deg; + inherits: false; +} +@keyframes rotation { + 0% { + --gradient-angle: 0deg; + } + 100% { + --gradient-angle: 360deg; + } +} diff --git a/src/assets/styles/map/district.css b/src/assets/styles/map/district.css new file mode 100644 index 00000000..1b50f605 --- /dev/null +++ b/src/assets/styles/map/district.css @@ -0,0 +1,274 @@ +.map-container { + position: relative; + width: 100%; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + margin: 0 auto; + padding: 5px; +} + +.view-controls { + position: absolute; + top: 0px; + display: flex; + gap: 10px; + z-index: 100; +} + +.zoom-controls { + position: absolute; + right: -7px; + top: 80px; + display: flex; + flex-direction: column; + gap: 8px; + z-index: 100; +} + +.zoom-button { + background-color: var(--card-bg); + color: var(--text); + border: 2px solid var(--primary-light); + width: 36px; + height: 36px; + border-radius: 50%; + text-align: center; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + font-size: 20px; + font-weight: bold; +} + +.zoom-button:hover { + transform: scale(1.1); + background-color: #cfe3fde7; +} + +.view-button { + background-color: var(--card-bg); + color: var(--text); + border: 3px solid var(--primary-light); + padding: 8px 16px; + border-radius: 16px; + font-family: "Comic Sans MS", cursive, sans-serif; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + font-size: 18px; +} + +.view-button:hover { + transform: scale(1.05); + opacity: 90%; + background-color: #cfe3fde7; +} + +.view-button.active { + background-color: var(--primary-light); +} + +.district { + position: relative; + width: 30rem; + height: 0; + padding-bottom: 75%; /* 4:3 Aspect Ratio */ + margin-top: 4rem; + overflow: hidden; + cursor: grab; +} + +.district.grabbing { + cursor: grabbing; +} + +.district svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: contain; + transform-origin: center; + transition: transform 0.1s ease; + user-select: none; +} + +.district path { + transition: fill 0.3s ease; + fill: #e0f2f1; +} + +.district path:hover { + fill: orange; + stroke: #333; + stroke-width: 1px; +} + +.district text { + font-size: 16px; + pointer-events: none; +} + +.district-tooltip { + position: absolute; + background-color: var(--card-bg); + color: var(--text); + padding: 12px 16px; + border-radius: 16px; + font-size: 16px; + font-weight: bold; + font-family: "Comic Sans MS", cursive, sans-serif; + pointer-events: none; + opacity: 0; + transition: all 0.3s ease; + z-index: 1000; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + border: 3px solid var(--primary-light); + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); + max-width: 200px; + text-align: center; + transform: scale(0.95); + transform-origin: bottom center; +} + +.district-tooltip.visible { + opacity: 1; + transform: scale(1); +} + +/* Add a little arrow for tooltip */ +.district-tooltip::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + border-width: 10px 10px 0; + border-style: solid; + border-color: var(--card-bg) transparent transparent; +} + +.district-tooltip.visible { + opacity: 1; +} + +@media (min-width: 1450px) { + .district { + width: 50rem; + } +} +/* Responsive styles */ +@media (max-width: 1200px) { + .map-container { + padding: 25px; + } + .district { + padding-bottom: 70%; + margin-top: 5rem; + width: 22rem; + } + .zoom-controls { + right: -15px; + top: 100px; + } + .view-button { + font-size: 15px; + } +} + +.title { + font-size: 1.2rem; +} + +@media (max-width: 992px) { + .map-container { + padding: 20px; + } + .district { + padding-bottom: 65%; + margin-top: 5rem; + width: 18rem; + } + .view-controls { + top: 15px; + } + .zoom-controls { + right: -15px; + top: 95px; + } + .view-button { + padding: 6px 12px; + font-size: 12px; + } + .zoom-button { + width: 32px; + height: 32px; + font-size: 18px; + } +} + +@media (max-width: 768px) { + .map-container { + padding: 15px; + } + .district { + padding-bottom: 60%; + margin-top: 3.5rem; + width: 20rem; + } + .view-controls { + top: 10px; + flex-direction: row; + gap: 5px; + } + .zoom-controls { + right: -15px; + top: 70px; + } + .view-button { + padding: 5px 10px; + font-size: 11px; + } + .zoom-button { + width: 28px; + height: 28px; + font-size: 16px; + } +} + +@media (max-width: 480px) { + .map-container { + padding: 10px; + } + .district { + padding-bottom: 55%; + margin-top: 4rem; + width: 15rem; + } + .view-controls { + top: 5px; + gap: 3px; + } + .zoom-controls { + right: 20px; + top: 80px; + } + .view-button { + padding: 4px 8px; + font-size: 10px; + } + .zoom-button { + width: 24px; + height: 24px; + font-size: 14px; + } +} + +.district path { + stroke: transparent; + stroke-width: 1px; + transition: all 0.3s ease; +} diff --git a/src/assets/styles/map/map.css b/src/assets/styles/map/map.css index 42bf2a24..b1766a45 100644 --- a/src/assets/styles/map/map.css +++ b/src/assets/styles/map/map.css @@ -1,3 +1,115 @@ +:root { + --tiles: rgba(37, 53, 79, 0.8); +} + +:root[data-theme="dark"] { + --tiles: rgba(37, 53, 79, 0.8); +} + +:root[data-theme="light"] { + --tiles: #0f172a; +} + +.explore-container { + margin: 0 auto; + padding: 2rem; + display: flex; + flex-direction: column; + gap: 3rem; + color: var(--text); +} + +.explore-header { + margin-bottom: 2rem; +} + +.explore-header h1 { + font-size: 1.5rem; + font-weight: bold; + color: var(--text); +} + +.explore-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; +} + +.explore-card { + width: 17rem; + height: auto; + display: block; + text-decoration: none; + color: #ffffff; + background: var(--background); + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + transition: box-shadow 0.2s ease; + border-top-left-radius: 10%; + border-top-right-radius: 10%; +} + +.explore-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.card-image { + width: 100%; + aspect-ratio: 16/9; + overflow: hidden; + border-top-left-radius: 10%; + border-top-right-radius: 10%; +} + +.card-image img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.card-content { + padding: 1.5rem; + background: var(--tiles); +} + +.card-header { + display: flex; + align-items: center; + gap: 0.75rem; + margin-bottom: 0.75rem; +} + +.category-dot { + width: 8px; + height: 8px; + border-radius: 50%; +} + +.card-header h2 { + font-size: 1.125rem; + font-weight: 600; + color: #ffffff; + margin: 0; +} + +.card-content p { + font-size: 0.875rem; + color: #ffffff; + margin: 0; + line-height: 1.5; +} + +@media (max-width: 768px) { + .explore-container { + padding: 1rem; + } + + .explore-grid { + grid-template-columns: 1fr; + } +} + .container__map { display: flex; justify-content: center; @@ -5,7 +117,7 @@ flex-direction: column; width: 100%; max-width: 1200px; - margin: 40px auto; + margin: 0px auto; position: relative; & svg { @@ -22,7 +134,22 @@ pointer-events: none; z-index: 500; display: none; - transform: translate(-300%, -200%); + transform: translate(-15vw, -20vh); + margin-top: -10px; + } + + @media screen and (min-width: 768px) { + .tooltip { + transform: translate(-50%, -120%); + margin-top: -15px; + } + } + + @media screen and (min-width: 1200px) { + .tooltip { + transform: translate(-15vw, -20vh); + margin-top: -20px; + } } & path { diff --git a/src/assets/styles/map/popup.css b/src/assets/styles/map/popup.css index b8453f4b..f8123e87 100644 --- a/src/assets/styles/map/popup.css +++ b/src/assets/styles/map/popup.css @@ -83,65 +83,115 @@ } /* Responsive Adjustments */ + @media (max-width: 1024px) { + max-width: 350px; + padding: 18px; + + &__name { + font-size: 1.6rem; + } + + &__info { + font-size: 1.2rem; + } + + &__image { + max-height: 180px; + } + } + @media (max-width: 768px) { - width: 50%; - height: 50%; + width: 80%; + max-width: 300px; padding: 15px; margin: 0 auto; &__name { - font-size: 1rem; + font-size: 1.4rem; + margin-bottom: 8px; } &__info { - font-size: 1rem; + font-size: 1.1rem; + margin: 8px 0; } &__image { - max-height: 100px; + max-height: 150px; + margin: 8px 0; } &__buttons { - flex-direction: column; - gap: 10px; + flex-direction: row; + gap: 8px; + margin-top: 12px; } &__button { - width: 50%; - font-size: 1rem; - padding: 10px; + padding: 8px 12px; + font-size: 1.1rem; } } @media (max-width: 480px) { - width: 95%; + width: 90%; + max-width: 280px; padding: 12px; + border-radius: 8px; &__name { - font-size: 1.4rem; + font-size: 1.2rem; + margin-bottom: 6px; } &__info { - font-size: 1.1rem; + font-size: 1rem; + margin: 6px 0; } &__image { max-height: 120px; + margin: 6px 0; } &__close { - font-size: 1.6rem; - top: 8px; - right: 12px; + font-size: 1.4rem; + top: 6px; + right: 10px; } &__buttons { - gap: 8px; + flex-direction: column; + gap: 6px; + margin-top: 10px; } &__button { + width: 100%; font-size: 1rem; - padding: 10px; + padding: 8px; + } + } + + @media (max-width: 320px) { + width: 95%; + padding: 10px; + + &__name { + font-size: 1.1rem; + } + + &__info { + font-size: 0.9rem; + } + + &__image { + max-height: 100px; + } + + &__button { + font-size: 0.9rem; + padding: 6px; } } } diff --git a/src/assets/styles/map/state.css b/src/assets/styles/map/state.css index d65c62c9..039e3d97 100644 --- a/src/assets/styles/map/state.css +++ b/src/assets/styles/map/state.css @@ -30,35 +30,42 @@ /* Main Container */ .main-container { - display: flex; - gap: calc(var(--spacing-unit) * 2); + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + align-items: start; + background-color: var(--background); padding: calc(var(--spacing-unit) * 2); - background-color: var(--primary-bg); border-radius: 8px; box-shadow: var(--shadow-md); } +.state-page { + padding: 10px; + margin: 0 auto; + background-color: var(--background); + color: var(--text); +} + #state-svg-container { flex: 0.8; - /*padding: calc(var(--spacing-unit) * 1);*/ - background-color: var(--secondary-bg); - border-radius: 8px; - box-shadow: var(--shadow-md); display: flex; flex-direction: column; + align-items: flex-start; + color: var(--text); + font-size: 1.5rem; } #state-svg-container h3 { - /*margin-bottom: calc(var(--spacing-unit) * 1);*/ - color: var(--primary-text); + color: var(--text); font-size: 1.5rem; text-align: center; } #state-svg { width: 100%; - height: 50%; /* Change from min-height to height */ - flex-grow: 1; /* Allow it to grow and fill available space */ + height: 50%; + flex-grow: 1; display: flex; align-items: center; justify-content: center; @@ -67,9 +74,9 @@ #state-svg svg { max-width: 100%; max-height: 100%; - object-fit: contain; /* Ensure the SVG fits within the container */ + object-fit: contain; } -/* Right Content */ + .right-content { flex: 1.2; display: flex; @@ -77,121 +84,416 @@ gap: calc(var(--spacing-unit) * 2); } -.right-content img { +.state-image-container { + position: relative; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); + border: 8px solid var(--card); + background-color: var(--card-bg); +} + +.state-image-container img { width: 100%; height: auto; - object-fit: cover; - border-radius: 8px; - box-shadow: var(--shadow-md); + display: block; +} + +.info-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + margin-bottom: 30px; +} + +.info-card { + background: var(--card-bg); + padding: 15px; + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + cursor: pointer; + border: 3px solid var(--primary); + transition: all 0.3s ease; } -.content-text { +.info-card:hover { + background-color: #cfe3fde7; + transform: scale(1.02); + border-color: var(--primary); +} + +.info-card h4 { + color: var(--text); + margin: 0 0 10px 0; + font-size: 1.1rem; +} + +.info-card p { + margin: 0; + color: var(--secondary); + font-size: 0.9rem; +} + +.quick-facts { + background: var(--card-bg); + padding: 20px; + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border: 3px solid var(--primary); +} + +.quick-facts h4 { + color: var(--text); + margin: 0 0 15px 0; + font-size: 1.1rem; +} + +.description { + font-size: 0.9rem; + line-height: 1.5; + color: var(--secondary); +} + +.read-more { + background: none; + border: none; + color: var(--primary); + cursor: pointer; + padding: 0; + margin-left: 0.25rem; + font-weight: 500; +} + +.read-more:hover { + color: var(--primary-light); +} + +.links { display: flex; - flex-direction: column; - gap: calc(var(--spacing-unit) * 1.5); + gap: 15px; + margin-top: 15px; } -.content-text a { - color: var(--accent-color); +.link-button { + display: inline-block; + padding: 10px 20px; + background: var(--primary); + color: #ffffff; text-decoration: none; - font-weight: 500; - margin-top: var(--spacing-unit); + border-radius: 25px; + font-size: 0.9rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; +} + +.link-button:hover { + background: var(--primary-light); + transform: scale(1.05); +} + +.back-button-container { + margin-bottom: 20px; +} + +.back-button { + background-color: var(--primary); + color: var(--text); + border: none; + padding: 12px 20px; + border-radius: 25px; + cursor: pointer; + font-size: 1.1rem; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; +} + +.back-button:hover { + background-color: var(--primary-light); + transform: scale(1.05); } -.content-text a:hover { - text-decoration: underline; +/* Theme-specific styles */ +:global([data-theme="light"]) { + --card-bg: rgba(255, 255, 255, 0.8); + --card-border: #e2e8f0; + --hover-bg: #f8fafc; } -/* Info Table */ -.info-table { +:global([data-theme="dark"]) { + --card-bg: rgba(37, 53, 79, 0.8); + --card-border: #334155; + --hover-bg: #2d3748; +} + +/* IndiaMap Styles */ +.container__map { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; width: 100%; - border-collapse: separate; - border-spacing: 0; - border-radius: 8px; - overflow: hidden; - box-shadow: var(--shadow-md); + max-width: 1200px; + margin: 0px auto; + position: relative; } -.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); +.container__map svg { + max-width: 100%; } -.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; +.tooltip, +#state-tooltip { + position: absolute; + background-color: rgba(0, 0, 0, 0.8); + color: white; + padding: 8px 12px; + border-radius: 4px; + font-size: 14px; + pointer-events: none; + z-index: 500; + display: none; + transform: translate(-15vw, -20vh); + margin-top: -10px; } -/* 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; +@media screen and (min-width: 768px) { + + .tooltip, + #state-tooltip { + transform: translate(-50%, -120%); + margin-top: -15px; + } } -.info-table th a:hover { - text-decoration: underline; /* Add underline on hover */ - opacity: 0.8; +@media screen and (min-width: 1200px) { + + .tooltip, + #state-tooltip { + transform: translate(-15vw, -20vh); + margin-top: -20px; + } } -.info-table tr:nth-child(even) { - background-color: var(--secondary-bg); +.container__map path { + fill: #aee38a; + cursor: pointer; + transition: + fill 0.5s ease, + transform 0.5s ease; } -.info-table tr:hover { - background-color: color-mix(in srgb, var(--secondary-bg) 80%, var(--accent-color) 20%); - transition: background-color 0.2s ease; +.container__map path:hover { + fill: #ffa500; + transform: scale(1); } -.info-table td:first-child { - font-weight: 600; - color: var(--primary-text); - width: 30%; +/* Fun facts, statistics, tags, etc. */ +.fun-facts { + margin-top: 20px; + padding: 15px; + background: var(--card-bg); + border-radius: 15px; + border: 3px solid var(--primary); } -/* Quick Facts Link */ -.info-table .quick-facts-link { - color: #d24d4d; - font-weight: 500; - text-decoration: none; - margin-left: 10px; - display: inline-block; +.fun-fact-item { + display: flex; + align-items: center; + gap: 10px; + margin: 10px 0; } -.info-table .quick-facts-link:hover { - text-decoration: underline; - opacity: 0.8; +.emoji { + font-size: 1.8rem; +} + +.fun-fact-item p { + margin: 0; + font-size: 1.2rem; + color: var(--text); } -/* Error State */ -.error { - color: #dc2626; +.statistics-section { + width: 100%; + background: var(--card-bg); + padding: 20px; + border-radius: 15px; + margin: 20px 0; + border: 3px solid var(--primary); +} + +.statistics-section h3 { + color: var(--text); + margin-bottom: 20px; + font-size: 1.5rem; text-align: center; - padding: var(--spacing-unit); } -/* Responsive Design */ -@media (max-width: 968px) { +.stats-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 15px; + margin-bottom: 20px; +} + +.stat-card { + background: var(--background); + padding: 15px; + border-radius: 10px; + border: 0.1px solid gray; + display: flex; + align-items: center; + gap: 15px; + transition: transform 0.3s ease; +} + +.stat-card:hover { + transform: translateY(-5px); +} + +.stat-icon { + font-size: 2rem; +} + +.stat-info h4 { + margin: 0; + color: var(--text); + font-size: 1rem; +} + +.stat-info p { + margin: 5px 0 0; + color: var(--secondary); + font-size: 1.1rem; + font-weight: bold; +} + +.additional-info { + margin-top: 20px; +} + +.info-section { + margin-bottom: 20px; +} + +.info-section h4 { + color: var(--text); + margin-bottom: 10px; +} + +.tag-container { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.tag { + background: var(--primary); + color: #ffffff; + padding: 5px 15px; + border-radius: 20px; + font-size: 0.9rem; + transition: transform 0.2s ease; +} + +.tag:hover { + transform: scale(1.05); +} + +/* Responsive styles */ +@media (max-width: 1200px) { .main-container { - flex-direction: column; + gap: 20px; + } + + .info-grid { + gap: 15px; + } +} + +@media (max-width: 921px) { + .main-container { + grid-template-columns: 1fr; } +} - .container_header h1 { - font-size: 2rem; +@media (max-width: 992px) { + .info-grid { + grid-template-columns: repeat(2, 1fr); } - #state-svg-container, - .right-content { - flex: 1; + .info-card h4 { + font-size: 1rem; } - .info-table { - font-size: 0.9rem; + .info-card p { + font-size: 0.85rem; } } + +@media (max-width: 768px) { + .main-container { + grid-template-columns: 1fr; + } + + .info-grid { + grid-template-columns: repeat(2, 1fr); + gap: 12px; + } + + .info-card { + padding: 12px; + } + + .quick-facts { + padding: 15px; + } + + .links { + flex-direction: column; + gap: 10px; + } + + .link-button { + text-align: center; + } + + .stats-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 480px) { + .main-container { + padding: 0.4rem; + } + + .info-grid { + grid-template-columns: 1fr; + } + + .back-button { + padding: 10px 16px; + font-size: 1rem; + } + + .info-card { + padding: 10px; + } + + .info-card h4 { + font-size: 0.95rem; + } + + .info-card p { + font-size: 0.8rem; + } + + .quick-facts h4 { + font-size: 1rem; + } + + .description { + font-size: 0.85rem; + } +} \ No newline at end of file diff --git a/src/assets/styles/math.css b/src/assets/styles/math.css index a5715372..d44debb9 100644 --- a/src/assets/styles/math.css +++ b/src/assets/styles/math.css @@ -1,5 +1,4 @@ :root { - /* Enhanced color palette with gradients */ --color-background: #f9f7ff; --color-primary: #6a5acd; --color-primary-light: #8b7ddd; @@ -11,14 +10,12 @@ --color-error: #e74c3c; --color-text: #2c3e50; - /* Operation Colors */ --color-add: #2ecc71; --color-subtract: #e74c3c; --color-multiply: #3498db; --color-divide: #f39c12; --color-refresh: #9b59b6; - /* Container shadows and effects */ --box-shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.08); --box-shadow-md: 0 6px 15px rgba(0, 0, 0, 0.1); --box-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12); @@ -37,7 +34,6 @@ padding: 1rem; text-align: center; color: var(--color-text); - /*padding-top: 90px; Space for fixed header*/ } /*.header { @@ -70,11 +66,16 @@ border-radius: var(--border-radius-xl); box-shadow: var(--box-shadow-md); transition: all 0.3s ease; + display: inline-flex; + align-items: center; } -.score:hover { - transform: translateY(-3px); - box-shadow: var(--box-shadow-lg); +.score::before { + /* ADDED: Star icon */ + content: "⭐"; + margin-right: 0.75rem; + font-size: 1.8rem; + line-height: 1; } .operator-container { @@ -97,6 +98,11 @@ box-shadow: var(--box-shadow-md); } +.operator-btn span { + font-size: 5.8rem; + line-height: 1; +} + .operator-btn:hover { transform: scale(1.1) translateY(-5px); box-shadow: var(--box-shadow-lg); @@ -124,16 +130,25 @@ .operator-btn.next { font-size: 2.5rem; - background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); + background: linear-gradient(135deg, var(--color-success)); + color: white; + width: auto; + height: auto; padding: 0.5rem 1.5rem; border-radius: var(--border-radius-xl); - height: auto; - width: auto; } -.operator-btn.next:hover { - transform: scale(1.05) translateY(-3px); - background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light)); +.operator-btn.next:hover:not(:disabled) { + transform: scale(1.05) translateY(-2px); + box-shadow: var(--box-shadow-lg); +} + +.operator-btn.next:disabled { + background: linear-gradient(135deg, #adb5bd, #ced4da); + color: #6c757d; + cursor: not-allowed; + box-shadow: var(--box-shadow-sm); + transform: none; } .math-form { @@ -183,6 +198,16 @@ font-size: 5rem; color: var(--color-secondary); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); + /* display: inline-flex; + align-items: center; + justify-content: center; */ + /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + padding: 0; + margin: 0; */ } .answer-wrapper { @@ -259,6 +284,44 @@ } } +/* Fullscreen Celebration Styles */ +.fullscreen-celebration { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: hidden; + z-index: 2000; + pointer-events: none; + display: none; +} + +.fullscreen-celebration.active { + display: block; +} + +.emoji-particle { + position: absolute; + font-size: 2rem; + animation: floatUpAndFade 3s ease-out forwards; + will-change: transform, opacity; +} + +@keyframes floatUpAndFade { + 0% { + transform: translateY(0) scale(0.5) rotate(0deg); + opacity: 1; + } + 50% { + opacity: 0.9; + } + 100% { + transform: translateY(-100vh) scale(1.2) rotate(360deg); + opacity: 0; + } +} + /* Responsive Adjustments */ @media (max-width: 1200px) { .number { @@ -332,18 +395,32 @@ @media (max-width: 480px) { .number { - width: 120px; - height: 110px; - font-size: 3.5rem; + width: 100px; + height: 90px; + font-size: 3rem; } .operator { - font-size: 2.8rem; + font-size: 2.5rem; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + padding: 0; + margin: 0; } .answer-wrapper { flex-direction: column; align-items: center; + gap: 0.25rem; + width: 100%; + } + + .output { + width: 100px; + height: 90px; + font-size: 2.8rem; } .result-indicator { @@ -354,18 +431,25 @@ } .operator-container { - gap: 0.75rem; + gap: 0.5rem; } .operator-btn { - width: 60px; - height: 60px; - font-size: 1.75rem; + width: 55px; + height: 55px; + font-size: 1.5rem; + } + + .operator-btn span { + font-size: 2.2rem; } .header { padding: 0.5rem 1rem; } + .number-group { + gap: 0.5rem; + } .score, .operator-btn.next { diff --git a/src/assets/styles/nameform.css b/src/assets/styles/nameform.css new file mode 100644 index 00000000..7bfa552c --- /dev/null +++ b/src/assets/styles/nameform.css @@ -0,0 +1,116 @@ +.dialog-header { + border-radius: 1rem 1rem 0 0; +} + +.dialog-content { + background-color: wheat; + border-radius: 0 0 1rem 1rem; +} + +.help { + display: flex; + justify-content: center; + align-items: center; + font-size: 1.5rem; + font-weight: 600; + padding: 1.5rem; + width: 2rem; + height: 2rem; + color: var(--primary); + border-radius: 50%; + border: 1.5px solid var(--primary); + cursor: pointer; +} + +form { + width: auto; +} + +label { + color: #911168; + font-size: 1.2rem; + margin-bottom: 0.5rem; +} + +input { + padding: 0.5rem; + background-color: white; + color: black; + width: 100%; + border: 1px solid grey; + + &.input__name { + padding-inline: 0.5rem; + font-size: 1rem; + color: hsl(from black 20 40 10); + letter-spacing: 0.5ch; + } + + &:focus { + border-width: 2px; + } +} + +.button__group { + display: flex; + flex-direction: column; + gap: 8px; +} + +button { + background-color: white; + border-radius: 8px; + border-style: none; + box-sizing: border-box; + color: #040000; + cursor: pointer; + display: inline-block; + font-size: 1rem; + font-weight: 500; + height: 40px; + line-height: 20px; + list-style: none; + margin: 0; + outline: none; + padding: 10px 16px; + position: relative; + text-align: center; + text-decoration: none; + transition: color 100ms; + vertical-align: baseline; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; + + &.confirm { + background-color: rgb(199 203 223); + } + + &.cancel { + background-color: rgb(245, 245, 245); + } + + &:hover, + &:focus { + background-color: #f082ac; + } +} + +.close { + outline: 2px solid grey; + font-size: 1rem; + width: 32px; + height: 33px; + color: black; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; +} + +output { + background-color: yellow; + color: green; + padding-inline: 4px; + font-style: italic; +} diff --git a/src/assets/styles/numbers/index.css b/src/assets/styles/numbers/index.css new file mode 100644 index 00000000..cfd2237b --- /dev/null +++ b/src/assets/styles/numbers/index.css @@ -0,0 +1,77 @@ +.card__inner { + background: var(--background); + border: 2px solid var(--border); + border-radius: 1rem; + padding: clamp(1rem, 3vw, 1.25rem); + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + gap: clamp(0.75rem, 2vw, 1rem); + transition: all 0.2s ease; +} + +.category__icon { + font-size: clamp(2rem, 4vw, 2.5rem); + margin-bottom: clamp(0.25rem, 2vw, 0.5rem); + line-height: 1; +} + +.category__title { + font-size: clamp(1.25rem, 3vw, 1.5rem); + margin-bottom: 0.75rem; +} + +.category__description { + font-size: clamp(0.9rem, 2vw, 0.95rem); + line-height: 1.6; + flex-grow: 1; +} + +.btn { + display: flex; + align-items: center; + justify-content: center; + padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 2vw, 2rem); + border-radius: 0.75rem; + font-weight: 600; + font-size: clamp(0.9rem, 2vw, 1.1rem); + transition: all 0.2s ease; + text-decoration: none; + flex: 1; + min-width: 119px; +} + +.card__actions { + display: flex; + margin-top: auto; +} + +@media (max-width: 768px) { + .btn { + width: 100%; + } +} + +.btn-playground { + background: var(--primary); + color: var(--background); +} + +.card:hover .card__inner { + transform: translateY(-3px); + border-color: var(--primary); +} + +.btn:hover { + transform: translateY(-2px); +} + +.btn-playground:hover { + background: var(--primary-light); +} + +.icon { + font-size: 1.2em; + margin-right: 0.5em; +} diff --git a/src/assets/styles/panel.css b/src/assets/styles/panel.css index ca2d8c47..faec70a0 100644 --- a/src/assets/styles/panel.css +++ b/src/assets/styles/panel.css @@ -5,8 +5,8 @@ --text: #f8fafc; --primary: #3b82f6; --shadow: rgba(0, 0, 0, 0.2); - --panel-width: 15rem; - --panel-height: 10rem; + --panel-width: 20rem; + --panel-height: 15rem; --color-1: linear-gradient(135deg, #3b82f6, #2563eb); --color-2: linear-gradient(135deg, #8b5cf6, #6d28d9); --color-3: linear-gradient(135deg, #ec4899, #db2777); @@ -17,6 +17,14 @@ --color-8: linear-gradient(135deg, #6366f1, #4f46e5); --color-9: linear-gradient(135deg, #0ea5e9, #0284c7); --color-10: linear-gradient(135deg, #14b8a6, #0d9488); + --metal-2: linear-gradient(145deg, #f5f5dc 0%, #f5f5dc 50%, #f5f5dc 100%); + --text-light: #e0e0e0; + --text-dark: #1a1a1a; + --accent-color: #f5f5dc; + --purple-accent: #444460; + --border-radius: 8px; + --popover-bg-dark: rgba(25, 25, 30, 0.98); + --transition-speed: 0.3s; } [data-theme="light"] { @@ -88,7 +96,7 @@ display: flex; align-items: center; gap: 1rem; - color: var(--text); + color: #ffffff; } & input[type="range"] { @@ -111,6 +119,7 @@ } .container__panel { + margin-top: 2rem; background: var(--bg); padding: 0 2rem 2rem; min-height: calc(100vh - 10rem); @@ -119,6 +128,7 @@ gap: 2rem; overflow: hidden; position: relative; + padding-top: 10rem; & .scene { width: var(--panel-width); @@ -151,7 +161,7 @@ display: flex; align-items: center; justify-content: center; - font-size: 3rem; + font-size: 7rem; color: white; background: var(--surface); border-radius: 0.5rem; @@ -204,7 +214,7 @@ } & .panel__cell.front { - font-size: 10rem; + font-size: 12rem; background-color: black; transition: transform 0.6s, @@ -252,3 +262,137 @@ --ry: 360deg; } } + +/* Styles for the header-right section and the settings button/popover */ +.settings-button-container { + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +.settings-button { + background: light-dark(#ffffff, #0f172a); + border: 1px solid #3b82f6; + color: var(--text-light); + padding: 0.6rem; + width: 50px; + height: 50px; + min-width: 40px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + transition: all var(--transition-speed) ease; + cursor: pointer; + margin-top: 0; + font-size: 16px; +} + +.settings-button:hover { + transform: scale(1.05); + color: var(--text-dark); +} + +.settings-button:active { + transform: scale(0.98); +} + +.settings-button .settings-icon { + width: 1.4em; + height: 1.4em; + color: #3b82f6; + fill: currentColor; + transition: fill var(--transition-speed) ease; + flex-shrink: 0; +} + +.panel-tools-popover { + position: absolute; + top: 100%; + right: 0; + width: 320px; + max-height: 80vh; + overflow-y: auto; + background: light-dark(#000000, #444460); + border-radius: var(--border-radius); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); + padding: 1.5rem; + z-index: 1000; + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: + opacity var(--transition-speed) ease, + transform var(--transition-speed) ease, + visibility var(--transition-speed) ease; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); +} + +.panel-tools-popover.open { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.gradient-text { + background: var(--metal-2); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + text-align: center; + margin-bottom: 1.5rem; + font-weight: bold; +} + +/* Adjustments for panel__options inside the popover */ +.panel-tools-popover .panel__options { + background: transparent; + box-shadow: none; + flex-direction: column; + gap: 1.5rem; + margin-left: 0; + padding: 0; + align-items: flex-start; +} + +.panel-tools-popover .panel__options .controls { + flex-direction: column; + width: 100%; +} + +.panel-tools-popover .panel__options label .icon { + width: 100%; +} + +.panel-tools-popover .panel__options .range__option { + width: 100%; + justify-content: space-between; +} + +.panel-tools-popover .panel__options input[type="range"] { + flex-grow: 1; +} + +/* === Responsiveness === */ +@media (max-width: 768px) { + /* Header-right slot for mobile */ + [slot="header-right"] { + justify-content: flex-end; + width: 100%; + padding-right: 1rem; + padding-top: 0.5rem; + gap: 0.5rem; + } + + /* Popover positioning for smaller screens */ + .panel-tools-popover { + right: 1rem; + left: auto; + width: calc(100vw - 2rem); + max-width: 350px; + transform: translateY(10px); + } +} diff --git a/src/assets/styles/quote-designer.css b/src/assets/styles/quote-designer.css new file mode 100644 index 00000000..df3920bf --- /dev/null +++ b/src/assets/styles/quote-designer.css @@ -0,0 +1,815 @@ +:root { + --metal-1: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 100%); + --metal-2: linear-gradient(145deg, #f5f5dc 0%, #f5f5dc 50%, #f5f5dc 100%); + --metal-3: linear-gradient(145deg, #404040 0%, #2a2a2a 100%); + --text-light: #e0e0e0; + --text-dark: #1a1a1a; + --accent-color: #f5f5dc; + --purple-accent: #444460; + --border-radius: 8px; + --transition-speed: 0.3s; + /* Static Background Colors for this page */ + --bg-color-1: #1f2833; + --bg-color-2: #2c3e50; + --bg-color-3: #0b0c10; + --popover-bg-dark: rgba(25, 25, 30, 0.98); + --section-border-color: rgba(90, 90, 90, 0.6); + --section-bg-color: rgba(0, 0, 0, 0.15); + --text-medium-grey: #b0b0b0; + --text-darker-grey: #8a8a8a; +} + +html { + scroll-behavior: smooth; + height: auto; +} + +body { + background: linear-gradient(135deg, var(--bg-color-3) 0%, var(--bg-color-1) 50%, var(--bg-color-2) 100%); + color: light-dark(black, white); + font-family: "Roboto", sans-serif; + min-height: 100vh; + line-height: 1.6; + container-type: unset; + container-name: unset; +} + +body::before { + content: none; +} + +/* === Utility Classes === */ +.gradient-text { + background: var(--metal-2); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + text-align: center; + margin-bottom: 1.5rem; + font-weight: bold; +} + +.word-count { + font-size: 0.8rem; + text-align: right; + color: var(--text-darker-grey); + margin-top: 0.25rem; + min-height: 1.2em; +} + +.word-count.error { + color: #ff6666; + font-weight: bold; +} + +/* === Input & Button Styles === */ +.metallic-input, +.metallic-select, +.metallic-textarea, +select#fontFamily { + width: 100%; + padding: 0.8rem 1rem; + margin-bottom: 1rem; + background: rgba(255, 255, 255, 0.08); + border: 1px solid var(--accent-color); + color: var(--text-light); + font-family: inherit; + border-radius: var(--border-radius); + transition: all var(--transition-speed) ease; + font-size: 1rem; + -webkit-appearance: none; + appearance: none; +} + +/* Custom arrow for select */ +select#fontFamily { + background-image: url('data:image/svg+xml;utf8,'); + background-repeat: no-repeat; + background-position: right 1rem center; + padding-right: 3rem; + cursor: pointer; +} + +/* style dropdown options */ +select option { + background: #2a2a2a; + color: var(--text-light); + padding: 5px 10px; +} + +/* Styling for options within specific selects */ +select#fontFamily option { + background: #333; + color: #f0f0f0; +} + +.metallic-input:focus, +.metallic-select:focus, +.metallic-textarea:focus, +select#fontFamily:focus { + outline: none; + box-shadow: 0 0 8px rgba(var(--accent-color), 0.6); + background: rgba(255, 255, 255, 0.12); +} + +textarea.metallic-input, +textarea.metallic-textarea { + resize: vertical; + min-height: 60px; +} + +.color-input { + padding: 0.3rem; + height: 40px; + cursor: pointer; + border: none; + background: transparent; + width: 200px; +} + +.file-input { + padding: 0.5rem; +} + +.file-input::file-selector-button { + background: var(--metal-3); + border: 1px solid var(--accent-color); + padding: 0.5rem 1rem; + border-radius: var(--border-radius); + color: var(--text-light); + cursor: pointer; + transition: background var(--transition-speed) ease; + margin-right: 1rem; +} + +.file-input::file-selector-button:hover { + background: var(--accent-color); + color: var(--text-dark); +} + +.metallic-button { + background: light-dark(#ffffff, #0f172a); + border: 1px solid #1e293b; + padding: 0.8rem 1.5rem; + border-radius: var(--border-radius); + position: relative; + overflow: hidden; + width: 100%; + transition: all var(--transition-speed) ease; + cursor: pointer; + text-align: center; + font-size: 1rem; + display: inline-flex; + justify-content: center; + align-items: center; +} + +.metallic-button:disabled { + opacity: 0.6; + cursor: not-allowed; + border-color: #666; +} + +.metallic-button:disabled .btn-gradient { + background: linear-gradient(145deg, #777 0%, #555 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; +} + +.metallic-button:hover:not(:disabled) { + box-shadow: 0 0 10px rgba(var(--accent-color), 0.6); + transform: translateY(-2px); +} + +.metallic-button:active:not(:disabled) { + transform: translateY(0); +} + +.metallic-button .btn-gradient { + background: var(--metal-2); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + font-weight: bold; + display: inline-block; +} + +.small-btn { + padding: 0.5rem 1rem; + font-size: 0.9rem; + margin-top: 0.5rem; +} + +/* Loading Spinner */ +.loading-spinner { + display: inline-block; + width: 1.2em; + height: 1.2em; + border: 3px solid rgba(var(--accent-color), 0.6); + border-radius: 50%; + border-top-color: var(--accent-color); + animation: spin 1s ease-in-out infinite; + margin-left: 0.5em; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +/* === Layouts === */ + +/* header-right slot styling */ +[slot="header-right"] { + display: flex; + gap: 1rem; + align-items: center; + margin-left: auto; + padding-right: 1.5rem; + position: relative; +} + +.header-controls { + display: flex; + justify-content: space-between; + align-items: center; + gap: 1rem; + padding: 1.5rem; + padding-top: 0rem; + width: 100%; +} + +/* New style for the right-aligned buttons group */ +.right-header-buttons { + display: flex; + align-items: center; + gap: 0.7rem; /* Gap between buttons */ +} + +.design-container { + display: grid; + grid-template-columns: 1fr; + gap: 1.5rem; + padding: 1.5rem; + padding-top: 0rem; +} + +.preview-panel { + display: flex; + justify-content: center; + align-items: center; + min-height: calc(100vh - 3rem - var(--header-h, 0) - var(--footer-h, 0)); +} + +.preview-container { + background-color: transparent; + border: 3px solid light-dark(#171717, #27334b); + border-radius: var(--border-radius); + padding: 1rem; + box-shadow: inset 0px 0px 0 16px light-dark(#e2dfd2, #0f172a); + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); +} + +/* Aspect Ratio Wrapper */ +#aspectRatioWrapper { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + transition: all var(--transition-speed) ease; + overflow: hidden; + position: relative; +} + +#aspectRatioWrapper.aspect-ratio-square { + width: auto; + height: 100%; + aspect-ratio: 1 / 1; + max-width: 100%; +} + +#aspectRatioWrapper.aspect-ratio-landscape { + width: 100%; + height: auto; + aspect-ratio: 16 / 9; + max-height: 100%; +} + +#aspectRatioWrapper.aspect-ratio-portrait { + width: auto; + height: 100%; + aspect-ratio: 9 / 16; + max-width: 100%; +} + +#quotePreview { + transition: all var(--transition-speed) ease; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + padding: 2rem; + background-size: cover; + background-position: center; + background-repeat: no-repeat; + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + +.header-icon { + width: 1.6em; + height: 1.6em; + fill: light-dark(#000000, #ffffff); + transition: fill var(--transition-speed) ease; + flex-shrink: 0; +} + +/* Base styles for header tools button */ +.header-tools-btn { + display: flex; + align-items: center; + gap: 0.1em; + padding: 0.5rem 1rem; + font-size: 0.9rem; + width: auto; + margin-top: 0; + transition: all var(--transition-speed) ease; +} + +.header-tools-btn .button-text { + max-width: 0; + overflow: hidden; + white-space: nowrap; + transition: + max-width 0.3s ease-out, + opacity 0.3s ease-out; + opacity: 0; + color: light-dark(#000000, #ffffff); + font-weight: bold; +} + +.header-tools-btn:hover .button-text, +.header-tools-btn.active-popover-trigger .button-text { + max-width: 100px; + opacity: 1; + margin-left: 0.5em; + color: light-dark(#000000, #ffffff); +} + +/* Style for the active popover trigger button */ +.header-tools-btn.active-popover-trigger { + background: light-dark(#808080, #21213b); + border-color: var(--accent-color); + box-shadow: 0 0 10px rgba(var(--accent-color), 0.6); +} + +.header-tools-btn.active-popover-trigger .header-icon, +.header-tools-btn.active-popover-trigger .button-text-initial { + fill: var(--text-dark); + color: light-dark(#000000, #ffffff); +} + +/* Style for initial text in new buttons */ +.popover-trigger-btn .button-text-initial, +.header-tools-btn .button-text-initial { + display: flex; + justify-content: center; + align-items: center; + width: 1.2em; + height: 1.2em; + font-size: 1.3em; + font-weight: bold; + color: light-dark(#000000, #ffffff); + transition: color var(--transition-speed) ease; +} + +.popover-trigger-btn:hover .button-text-initial { + color: light-dark(#000000, #ffffff); +} + +.control-group { + margin-bottom: 1.5rem; +} + +.control-group:last-child { + margin-bottom: 0.5rem; +} + +.control-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; + color: var(--text-medium-grey); + font-size: 0.9rem; +} + +.metallic-slider { + width: 100%; + height: 8px; + background: #555; + border-radius: 4px; + margin: 1rem 0 0.5rem 0; + cursor: pointer; + -webkit-appearance: none; + appearance: none; +} + +.metallic-slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 20px; + height: 20px; + background: var(--metal-2); + border-radius: 50%; + cursor: pointer; + border: 2px solid var(--text-dark); +} + +.metallic-slider::-moz-range-thumb { + width: 18px; + height: 18px; + background: var(--metal-2); + border-radius: 50%; + cursor: pointer; + border: 2px solid var(--text-dark); +} + +#fontSizeValue { + font-weight: bold; + color: var(--text-light); +} + +/* Alignment & Formatting Buttons */ +.alignment-controls, +.text-format-controls { + display: flex; + justify-content: space-between; + gap: 0.5rem; +} + +.alignment-btn, +.format-btn { + background: rgba(255, 255, 255, 0.1); + border: 1px solid var(--accent-color); + color: var(--text-medium-grey); + padding: 0.6rem 0; + border-radius: var(--border-radius); + flex-grow: 1; + margin: 0; + transition: all var(--transition-speed) ease; + cursor: pointer; + font-size: 0.9rem; +} + +.format-btn { + flex-grow: 0; + padding: 0.6rem 2rem; + font-weight: bold; +} + +.format-btn[data-format="italic"] { + font-style: italic; +} + +.format-btn[data-format="underline"] { + text-decoration: underline; +} + +.format-btn[data-format="bold"] { + font-weight: bold; +} + +.alignment-btn.active, +.format-btn.active { + background: var(--accent-color); + color: var(--text-dark); + font-weight: bold; +} + +.alignment-btn:hover:not(.active), +.format-btn:hover:not(.active) { + background: rgba(var(--accent-color), 0.2); + color: var(--text-light); +} + +/* Quote Preview Specific Styles */ +#quotePreview .quote-text { + width: 100%; + font-weight: normal; + font-style: normal; + color: light-dark(#000000, #ffffff); + text-decoration: none; + transition: all var(--transition-speed) ease; +} + +#quotePreview .quote-text.bold { + font-weight: bold; +} + +#quotePreview .quote-text.italic { + font-style: italic !important; +} + +#quotePreview .quote-text.underline { + text-decoration: underline; +} + +#quotePreview .author-name { + width: 100%; + margin-top: 1rem; + font-size: 0.9em; + font-style: italic; + color: light-dark(#000000, #ffffff); + opacity: 0.9; + transition: all var(--transition-speed) ease; +} + +/* Background Image Selector */ +.background-image-selector { + margin-bottom: 1rem; +} + +.background-image-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); + gap: 0.5rem; + margin-bottom: 1rem; +} + +.background-image-option { + border: 3px solid transparent; + border-radius: var(--border-radius); + overflow: hidden; + cursor: pointer; + transition: all var(--transition-speed) ease; + aspect-ratio: 1 / 1; + position: relative; +} + +.background-image-option img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.background-image-option.active { + border-color: var(--accent-color); + box-shadow: 0 0 8px rgba(var(--accent-color), 0.6); +} + +.background-image-option:hover:not(.active) { + transform: scale(1.05); +} + +.popover-details { + border: none; + border-radius: 0; + margin-bottom: 0; + background: transparent; +} + +.popover-details summary { + padding: 0.8rem 1rem; + font-weight: bold; + color: var(--accent-color); + cursor: pointer; + outline: none; + list-style: none; + position: relative; + border-bottom: 1px solid transparent; + transition: border-bottom var(--transition-speed) ease; +} + +.popover-details[open] summary { + border-bottom-color: var(--section-border-color); +} + +.popover-details summary::-webkit-details-marker { + display: none; +} + +.popover-details summary::after { + content: "+"; + position: absolute; + right: 1rem; + font-size: 1.2em; + transition: transform var(--transition-speed) ease; +} + +.popover-details[open] summary::after { + transform: rotate(45deg); +} + +.popover-details[open] > div { + padding: 0 1rem 1rem 1rem; + margin-top: 0.5rem; +} + +/* Collapsible Sections */ +.control-section { + border: 1px solid var(--section-border-color); + border-radius: var(--border-radius); + margin-bottom: 1rem; + background: var(--section-bg-color); +} + +.control-section summary { + padding: 0.8rem 1rem; + font-weight: bold; + color: var(--accent-color); + cursor: pointer; + outline: none; + list-style: none; + position: relative; + border-bottom: 1px solid transparent; + transition: border-bottom var(--transition-speed) ease; +} + +.control-section[open] summary { + border-bottom-color: var(--section-border-color); +} + +.control-section summary::-webkit-details-marker { + display: none; +} + +.control-section summary::after { + content: "+"; + position: absolute; + right: 1rem; + font-size: 1.2em; + transition: transform var(--transition-speed) ease; +} + +.control-section[open] summary::after { + transform: rotate(45deg); +} + +.control-section[open] > div { + padding: 0 1rem 1rem 1rem; + margin-top: 0.5rem; +} + +/* Aspect Ratio Controls */ +.aspect-ratio-controls { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1rem; +} + +.aspect-ratio-controls label { + display: inline-flex; + align-items: center; + gap: 0.3rem; + font-weight: normal; + color: var(--text-medium-grey); + font-size: 0.9rem; + cursor: pointer; +} + +.aspect-ratio-controls input[type="radio"] { + accent-color: var(--accent-color); + cursor: pointer; +} + +/* Popover Styles */ +.header-tools-wrapper { + position: relative; + display: flex; + gap: 0.5rem; + align-items: center; + margin-left: auto; + padding-right: 1.5rem; + position: relative; +} + +/* General Popover styling */ +.design-tools-popover { + position: absolute; + width: 320px; + max-height: 80vh; + overflow-y: auto; + background: var(--popover-bg-dark); + border: 1px solid var(--accent-color); + border-radius: var(--border-radius); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); + padding: 1.5rem; + z-index: 1000; + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: + opacity 0.3s ease, + transform 0.3s ease, + visibility 0.3s ease; +} + +.design-tools-popover.open { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +/* Specific Popover Positioning */ +#editTextPopover { + top: 90px; + right: 395px; +} + +#backgroundPopover { + top: 90px; + right: 327px; +} + +#textStylePopover { + top: 90px; + right: 258px; +} + +#layoutPopover { + top: 90px; + right: 190px; +} + +/* === Responsiveness === */ +@media (max-width: 768px) { + .design-container { + grid-template-columns: 1fr; + padding: 1rem; + gap: 1rem; + } + + .preview-panel { + min-height: 35vh; + order: 1; + } + + #quotePreview { + padding: 1rem; + } + + select#fontFamily { + background-position: right 0.5rem center; + padding-right: 2.5rem; + } + + /* Popover positioning for smaller screens */ + .design-tools-popover { + right: 1rem; + left: auto; + width: calc(100vw - 2rem); + max-width: 350px; + transform: translateY(10px); + } + + #editTextPopover, + #backgroundPopover, + #textStylePopover, + #layoutPopover { + top: 60px; + right: 1rem; + } + + /* Header-right slot for mobile */ + [slot="header-right"] { + justify-content: flex-end; + width: 100%; + padding-right: 1rem; + padding-top: 0.5rem; + gap: 0.5rem; + } + + /* Header tools button size for mobile */ + .header-tools-btn { + margin-top: 0; + padding: 0.5rem 0.8rem; + font-size: 0.8rem; + gap: 0.25em; + } + + .header-tools-btn .button-text { + max-width: 0; + opacity: 0; + margin-left: 0; + } +} diff --git a/src/assets/styles/sample.css b/src/assets/styles/sample.css deleted file mode 100644 index 6cd0e5a6..00000000 --- a/src/assets/styles/sample.css +++ /dev/null @@ -1,64 +0,0 @@ -.container__sample { - box-sizing: border-box; - padding: 1rem; - margin: auto; - font-size: 1.35rem; - line-height: 1.5; - - & :where(h2, h3) { - padding-block: 1rem; - } - - > p { - margin-block: 1.5rem; - } - - h2 { - font-size: 2rem; - } - - h3 { - font-size: 1.75rem; - } - - ul { - list-style: auto; - padding: 1rem; - - li > p { - margin: 0.25rem; - } - } - - a { - color: rgb(103, 103, 201); - } - - section { - ul { - list-style-type: none; - - & li { - margin-inline: 1rem; - - &:nth-child(2) { - &::before { - content: "\272D"; - } - } - - &::before { - content: "\26BE"; - /* baseball U+26BE */ - } - - &:nth-child(3)::before { - content: "\27F0"; - /* Second item: Star */ - font-size: large; - color: rgb(149, 124, 33); - } - } - } - } -} diff --git a/src/assets/styles/scroll.css b/src/assets/styles/scroll.css deleted file mode 100644 index 633976b8..00000000 --- a/src/assets/styles/scroll.css +++ /dev/null @@ -1,46 +0,0 @@ -section { - margin: 1rem; -} - -.container__scroll { - height: 40vh; - overflow-y: scroll; - border: 2px solid seashell; - scroll-timeline: --squareTimeline y; - /* Firefox supports the older "vertical" syntax */ - scroll-timeline: --squareTimeline vertical; - position: relative; - display: flex; - justify-content: center; - background-color: aliceblue; - overflow: scroll; - /* just for display */ -} - -#square { - background-color: deeppink; - width: 100px; - height: 100px; - animation-name: rotateAnimation; - animation-duration: 1ms; - /* Firefox requires this to apply the animation */ - animation-timeline: --squareTimeline; - position: absolute; - bottom: 0; - margin-inline-start: 1rem; -} - -#stretcher { - height: 1000px; - background-color: #dedede; -} - -@keyframes rotateAnimation { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} diff --git a/src/assets/styles/setting.css b/src/assets/styles/setting.css index 8e7b5328..fa134090 100644 --- a/src/assets/styles/setting.css +++ b/src/assets/styles/setting.css @@ -11,7 +11,7 @@ justify-items: end; justify-content: center; top: 4rem; - right: 1rem; + right: 1.5rem; width: max-content; height: 3.5rem; border-radius: 10%; @@ -31,6 +31,18 @@ }*/ } + @media (max-width: 480px) { + .setting__trigger { + font-size: 0.6rem; + /* Adjust font size for smaller screens */ + width: 2.5rem; + /* Adjust width for smaller screens */ + height: 2.5rem; + /* Adjust height for smaller screens */ + margin-top: 12px; + } + } + .setting__panel { position: fixed; position-anchor: --setting; @@ -74,6 +86,7 @@ font-size: 1.5rem; letter-spacing: 0.01em; touch-action: pinch-zoom; + border-radius: 9px; &:hover:not(.close) { background-color: color(xyz 0.02 0.01 0.02); @@ -83,8 +96,8 @@ &.close { width: 2rem; height: 3rem; - outline: 1px dashed green; justify-self: end; + border-radius: 6px; &:hover { font-size: 30px; @@ -126,8 +139,9 @@ justify-content: center; :where(button, select) { - background-color: rgb(211, 89, 222); + background: linear-gradient(90deg, rgb(17, 255, 247) 0%, rgb(39, 96, 241) 100%); transform: scaleZ(1) rotate(5deg); + border-radius: 7px; } } diff --git a/src/assets/styles/snapping.css b/src/assets/styles/snapping.css new file mode 100644 index 00000000..04d70476 --- /dev/null +++ b/src/assets/styles/snapping.css @@ -0,0 +1,47 @@ +.container__snapping { + display: flex; + align-items: center; + justify-content: space-between; + flex-flow: column nowrap; + font-family: monospace; + + section { + display: flex; + margin: 1em auto; + outline: 1px dashed lightgray; + flex: none; + overflow: auto; + + &.mandatory-scroll-snapping { + scroll-snap-type: x mandatory; + } + + &.proximity-scroll-snapping { + scroll-snap-type: x proximity; + } + + &.x { + width: 50%; + height: 128px; + flex-flow: row nowrap; + overflow-y: hidden; + + div { + font-size: 64px; + width: 100%; + height: 128px; + text-align: center; + scroll-snap-align: center; + flex: none; + + &:nth-child(even) { + background-color: #d942c7; + } + + &:nth-child(odd) { + background-color: #abbb55; + } + } + } + } +} diff --git a/src/assets/styles/societree.css b/src/assets/styles/societree.css index 481b9d43..ba333569 100644 --- a/src/assets/styles/societree.css +++ b/src/assets/styles/societree.css @@ -1,360 +1,482 @@ +:root { + /* Color Variables */ + --primary-600: #4f46e5; + --primary-500: #6366f1; + --accent-500: #f59e0b; + --accent-400: #fbbf24; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-700: #374151; + --gray-800: #1f2937; + --white: #ffffff; + --black: #000000; + --success-500: #10b981; + --success-600: #059669; + + /* Light mode defaults */ + --card-bg: var(--white); + --card-border: var(--gray-200); + --text-primary: var(--gray-800); + --text-secondary: #6b7280; + --background: var(--white); + --background-color: color-mix(in srgb, var(--background) 97%, var(--text-primary) 3%); + --clan-header-bg: var(--gray-200); + --clan-header-text: var(--gray-800); + --header-gradient: linear-gradient(to right, var(--primary-600), var(--primary-500)); + + --border-radius: 0.5rem; + --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); + --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); + --transition: all 0.2s ease; +} + +/* Dark mode overrides - matching capital.css background */ +[data-theme="dark"], +.dark-mode { + --card-bg: #1a1a1a; + --card-border: #333333; + --text-primary: #e0e0e0; + --text-secondary: #9e9e9e; + --background: #121212; + --background-color: color-mix(in srgb, var(--background) 97%, var(--text-primary) 3%); + --clan-header-bg: #1e1e1e; + --clan-header-text: #ffffff; + --header-gradient: linear-gradient(to right, #3a3a3a, #2a2a2a); +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --card-bg: #1a1a1a; + --card-border: #333333; + --text-primary: #e0e0e0; + --text-secondary: #9e9e9e; + --background: #121212; + --background-color: color-mix(in srgb, var(--background) 97%, var(--text-primary) 3%); + --clan-header-bg: #1e1e1e; + --clan-header-text: #ffffff; + --header-gradient: linear-gradient(to right, #3a3a3a, #2a2a2a); + } +} + +/* Base Styles */ +body { + background-color: var(--background-color); + color: var(--text-primary); + transition: var(--transition); +} + +/* Main Container */ .container__clan { display: block; scroll-behavior: smooth; margin: 0 auto; padding: 2rem; container: clan / inline-size; + background-color: var(--background-color); + min-height: 100vh; +} - .clan__header { - text-align: center; - margin-bottom: 3rem; - background: linear-gradient(135deg, #1a365d, #2c5282); - padding: 2rem; - border-radius: 1rem; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - - .clan__legend { - display: flex; - border: 2px solid rgb(241, 230, 230); - border-radius: 0.5rem; - position: relative; - width: max-content; - - .legend { - font-size: large; - color: greenyellow; - - &::before { - content: attr(data-icon); - } - } - - dl { - display: flex; - align-items: anchor-center; - gap: 10px; - padding: 0.5rem; - cursor: pointer; - - &:not(:last-child) { - border-right: 3px solid #babad6; - } - - &:hover { - background-color: crimson; - } - } - } - - .clan__title { - font-size: 2.5rem; - margin-bottom: 2rem; - color: #ffffff; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); - } - - .clan__search { - margin-bottom: 2rem; - - .clan__search-wrapper { - display: flex; - align-items: center; - background: rgba(255, 255, 255, 0.15); - border: 2px solid rgba(255, 255, 255, 0.2); - border-radius: 0.5rem; - padding: 0.75rem 1rem; - backdrop-filter: blur(10px); - transition: all 0.3s ease; - max-width: 600px; - margin: 0 auto; - } - - .clan__search-wrapper:focus-within { - background: rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.3); - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); - } - - .clan__search-icon { - font-size: 1.25rem; - margin-right: 0.5rem; - color: #ffffff; - } - - .clan__search-input { - width: 100%; - background: none; - border: none; - color: #ffffff; - font-size: 1rem; - outline: none; - } - - .clan__search-input::placeholder { - color: rgba(255, 255, 255, 0.7); - } - } - - .clan__content { - display: flex; - gap: 2rem; - max-width: 1400px; - margin: 0 auto; - } - - .clan__section { - flex: 1; - } +/* Header Section */ +.clan__header { + text-align: center; + margin-bottom: 3rem; + background: var(--clan-header-bg); + padding: 2.5rem; + border-radius: var(--border-radius); + box-shadow: var(--shadow-md); + color: var(--clan-header-text); + transition: var(--transition); } -@container clan (max-width: 768px) { - .clan__legend { - flex-direction: column; - right: 1rem; +.clan__title { + font-size: 2.5rem; + margin-bottom: 1.5rem; + color: var(--clan-header-text); +} - dl { - &:not(:last-child) { - border-right: none; - border-bottom: 3px solid #babad6; - } - } - } +/* Search and Legend Wrapper */ +.clan__search-legend-wrapper { + display: flex; + flex-direction: column; + gap: 1.5rem; + width: 100%; + max-width: 900px; + margin: 0 auto 2rem; +} - .clan__header { - padding: 1.5rem; - } +/* Search Section */ +.clan__search { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + margin-bottom: 0; + width: 100%; +} - .clan__title { - font-size: 2rem; - } +.clan__search-wrapper { + display: flex; + align-items: center; + background: color-mix(in srgb, var(--background) 90%, var(--text-primary) 10%); + border: 2px solid #000; /* Changed to black border */ + border-radius: var(--border-radius); + padding: 0.75rem 1.25rem; + transition: var(--transition); + width: 100%; + flex-grow: 1; +} - .clan__search-wrapper { - margin: 0 1rem; - } +[data-theme="dark"] .clan__search-wrapper, +.dark-mode .clan__search-wrapper { + background: color-mix(in srgb, var(--background) 90%, var(--text-primary) 10%); +} - .clan__content { - flex-direction: column; - } +.clan__search-wrapper:focus-within { + background: color-mix(in srgb, var(--background) 85%, var(--text-primary) 15%); + border-color: var(--primary-500); + box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); } -.highlight { - background: rgba(255, 255, 255, 0.2); - padding: 0.2rem 0.4rem; - border-radius: 0.25rem; +.clan__search-icon { + font-size: 1.25rem; + margin-right: 0.75rem; + color: var(--text-secondary); } -/* card style */ +.clan__search-input { + width: 100%; + background: none; + border: none; + color: var(--text-primary); + font-size: 1.1rem; + outline: none; +} -:root { - --glass-bg: rgba(255, 255, 255, 0.1); - --glass-border: rgba(255, 255, 255, 0.2); - --text-light: #ffffff; - --border-radius-sm: 0.5rem; - --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1); - --transition: all 0.3s ease; -} - -.card-container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); - gap: 2rem; - padding: 0 2rem; - max-width: 1400px; - margin: 0 auto; +.clan__search-input::placeholder { + color: var(--text-secondary); } -.card { - border-radius: var(--border-radius-sm); +/* Download Button */ +.download-button { + background: linear-gradient(to right, var(--accent-500), var(--accent-400)); + color: var(--black); + border: none; + border-radius: var(--border-radius); + padding: 0.85rem 1.75rem; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); - overflow: hidden; - background: linear-gradient(135deg, var(--card-color, #4a90e2), rgba(74, 144, 226, 0.8)); - cursor: pointer; + display: flex; + align-items: center; + gap: 0.75rem; + white-space: nowrap; } -.card:hover { - transform: translateY(-4px); - box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); +.download-button:hover { + background: linear-gradient(to right, var(--accent-400), var(--accent-500)); + box-shadow: var(--shadow-md); + transform: translateY(-1px); } -.card-header { +/* Legend Section */ +.clan__legend { display: flex; - justify-content: space-between; - align-items: center; - padding: 1.5rem; - background: rgba(255, 255, 255, 0.1); - margin-bottom: 1rem; -} - -.card-info { - display: grid; + justify-content: flex-start; gap: 1rem; + margin-top: 2rem; + padding: 0 0.5rem; } -.info-group { +.clan__legend dl { display: flex; align-items: center; - gap: 0.5rem; -} - -.value { - color: var(--text-light); - font-weight: bold; - font-size: 1.75rem; - - &::before { - content: attr(data-icon); - } + gap: 0.75rem; + cursor: pointer; + padding: 0.75rem 1.5rem; + border-radius: var(--border-radius); + background: color-mix(in srgb, var(--background) 90%, var(--text-primary) 10%); + transition: var(--transition); + border: 1px solid var(--card-border); + box-shadow: var(--shadow-sm); } -.card-actions { - display: flex; - align-items: center; - gap: 1rem; +[data-theme="dark"] .clan__legend dl, +.dark-mode .clan__legend dl { + background: color-mix(in srgb, var(--background) 90%, var(--text-primary) 10%); } -.surname-count { +.clan__legend .legend { + font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem; - background: rgba(255, 255, 255, 0.1); - padding: 0.5rem 1rem; - border-radius: var(--border-radius-sm); - color: var(--text-light); - font-weight: bold; } -.surname-count .count { - font-size: 1.25rem; +.clan__legend dl[title="Gotra"] .legend::before { + content: "🧬"; + display: inline-block; } -.card-body { - background: var(--glass-bg); - margin: 0 1.5rem 1.5rem; - border-radius: var(--border-radius-sm); - height: 100%; - overflow-y: scroll; - transition: max-height 0.3s ease-out; +.clan__legend dl[title="Kul devi"] .legend::before { + content: "🪔"; + display: inline-block; } -.card.expanded .card-body { - max-height: 500px; +.clan__legend dl[title="Jaati"] .legend::before { + content: "🌳"; + display: inline-block; } -.surname-container { - display: grid; - gap: 0.75rem; +.clan__legend dl:hover { + background: color-mix(in srgb, var(--background) 85%, var(--text-primary) 15%); + transform: translateY(-2px); + box-shadow: var(--shadow-md); } -.surname-card { - background: rgba(255, 255, 255, 0.1); - border-radius: var(--border-radius-sm); - padding: 0.75rem; - transition: var(--transition); - transform: translateX(0); +[data-theme="dark"] .clan__legend dl:hover, +.dark-mode .clan__legend dl:hover { + background: color-mix(in srgb, var(--background) 85%, var(--text-primary) 15%); } -.surname-card:hover { - transform: translateX(5px); - background: rgba(255, 255, 255, 0.15); +.clan__legend dl.active { + background: var(--accent-500); + color: var(--black); + box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5); } -.surname-card p { +.clan__legend dd { margin: 0; - color: var(--text-light); - font-size: 1.5rem; + font-weight: 600; + font-size: 1.05rem; + text-transform: uppercase; + letter-spacing: 0.5px; +} - &::before { - content: attr(data-icon); - } +/* Content Section */ +.clan__content { + max-width: 1400px; + margin: 0 auto; + background-color: var(--card-bg); + border-radius: var(--border-radius); + box-shadow: var(--shadow-sm); + padding: 2rem; } .highlight { - background: rgba(255, 255, 255, 0.2); - padding: 0.2rem 0.4rem; - border-radius: 0.25rem; + background: var(--accent-400); + color: var(--black); + padding: 0.1em 0.3em; + border-radius: 0.25em; + font-weight: 600; } -.copy-button { - background: none; - border: none; - color: var(--text-light); - cursor: pointer; - padding: 0.5rem; - border-radius: 50%; - transition: var(--transition); -} +/* Container Queries */ +@container clan (max-width: 768px) { + .clan__header { + padding: 1.5rem; + } -.copy-button:hover { - background: rgba(255, 255, 255, 0.1); -} + .clan__title { + font-size: 1.8rem; + margin-bottom: 1rem; + } -.copied-tooltip { - position: absolute; - background: rgba(0, 0, 0, 0.8); - color: var(--text-light); - padding: 0.5rem 1rem; - border-radius: var(--border-radius-sm); - font-size: 0.875rem; - animation: fadeInOut 1.5s ease-in-out; -} + .clan__search { + flex-direction: column; + gap: 1rem; + } -@keyframes fadeInOut { - 0% { - opacity: 0; - transform: translateY(10px); + .clan__search-wrapper { + padding: 0.6rem 1rem; } - 20% { - opacity: 1; - transform: translateY(0); + .clan__search-icon { + font-size: 1.1rem; + margin-right: 0.5rem; } - 80% { - opacity: 1; - transform: translateY(0); + .clan__search-input { + font-size: 1rem; } - 100% { - opacity: 0; - transform: translateY(-10px); + .download-button { + width: 100%; + justify-content: center; + padding: 0.65rem; + font-size: 1rem; } -} -.error-message { - color: #ff6b6b; - text-align: center; - padding: 2rem; - background: rgba(255, 107, 107, 0.1); - border-radius: var(--border-radius-sm); - margin: 1rem; + .clan__legend { + flex-direction: row; + flex-wrap: wrap; + gap: 0.75rem; + margin-top: 1.5rem; + } + + .clan__legend dl { + padding: 0.5rem 0.8rem; + flex: 1 1 100px; + justify-content: center; + } + + .clan__legend .legend { + font-size: 1rem; + gap: 0.3rem; + } + + .clan__legend dd { + font-size: 0.8rem; + letter-spacing: 0.3px; + } + + .clan__content { + padding: 1.5rem; + } } -@media (max-width: 768px) { - .card-container { - grid-template-columns: 1fr; +@media (max-width: 480px) { + #main.main { + padding: 0; + background-color: var(--background-color); + height: 100%; + } + + .container__clan { + padding: 1.2rem; + height: auto; + background-color: var(--background-color); + } + + .clan__header { + padding: 1.25rem 0.75rem; + margin-bottom: 2rem; + border-radius: var(--border-radius); + box-shadow: var(--shadow-md); + } + + .clan__title { + font-size: 1rem; + } + + .clan__search { + margin-bottom: 1.5rem; + font-size: 0.6rem; + } + + .clan__content { padding: 1rem; - gap: 1rem; } + .clan__search-wrapper { + padding: 0.4rem 0.5rem; + width: auto; + max-width: 70%; + font-size: 0.85rem; + } + + .download-button { + padding: 0.4rem 0.7rem; + font-size: 0.6rem; + min-width: unset; + white-space: nowrap; + width: 80px; + height: 43px; + } + + .clan__search { + flex-direction: row; + gap: 0.5rem; + align-items: center; + border-color: #000; + } + + .clan__legend { + gap: 0.5rem; + } + + .clan__legend dl { + padding: 0.4rem 0.6rem; + flex: 1 1 80px; + } + + .clan__legend dd { + font-size: 0.75rem; + } +} + +/* Print Styles */ +@media print { + .clan__search, + .clan__legend { + display: none; + } + + .container__clan { + padding: 0; + background: none; + } + .caption { + display: none; + } .card-header { - padding: 1rem; + border-bottom: 1px solid #000; + display: flex; + justify-content: center; + align-items: center; } - .card-body { - margin: 0 1rem 1rem; + .header { + border-bottom: none !important; + } + + .clan__header { + padding: 0; + margin-bottom: 0; + background: none !important; + box-shadow: none !important; + margin-top: 6rem; + } + + .clan__title { + font-size: 2.2rem !important; + position: absolute; + top: 1.5rem; + left: 0; + right: 0; + margin: 0 auto; + text-align: center; + background: none !important; } - .value { - font-size: 1.25rem; + .logo, + .header__brand { + display: none; + } + .header__brand span { + display: none; } - .surname-count { - padding: 0.5rem; + /* Ensure cards don't break awkwardly */ + .card { + break-inside: avoid; + page-break-inside: avoid; } - .surname-count .count { - font-size: 1rem; + /* Force card body to be visible */ + .card-body { + display: block !important; + max-height: none !important; + overflow: visible !important; + opacity: 1 !important; + visibility: visible !important; + } + + /* Hide expand/collapse button if you want cleaner print */ + .surname-count, + .copy-button { + display: none !important; } } diff --git a/src/assets/styles/varnmala/alphabet.css b/src/assets/styles/varnmala/alphabet.css index 13109696..83ddf303 100644 --- a/src/assets/styles/varnmala/alphabet.css +++ b/src/assets/styles/varnmala/alphabet.css @@ -1,3 +1,16 @@ +:root[data-theme="light"] { + --background: #ffffff; + --background-alt: #f3f4f6; + --background-hover: #e5e7eb; + + --text: #111827; + --text-secondary: #374151; + + --primary: #4f46e5; + --text-on-primary: #ffffff; /* This is correctly defined for white text on primary background */ + --border: #d1d5db; +} + .tabs { z-index: 10; width: fit-content; @@ -5,7 +18,9 @@ border-radius: 1rem; background: var(--background); display: flex; + align-items: center; /* Added for better vertical alignment of tab content */ gap: 1rem; + padding: 0.5rem; /* Added some padding around the tabs */ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } @@ -17,17 +32,21 @@ position: relative; background: var(--background-alt); border-radius: 0.5rem; + color: var(--text-secondary); /* Added default text color for tabs */ + cursor: pointer; /* Added for better UX */ + white-space: nowrap; /* Prevent text inside tab from wrapping */ &:hover { background: var(--background-hover); + color: var(--text); /* Added text color change on hover */ } } .tab.active { - color: var(--primary); + /* color: var(--primary); */ /* Original - this would be overridden by the next color property */ border-bottom-color: var(--primary); background: var(--primary); - color: var(--background); + color: var(--text-on-primary); /* CORRECTED: Use text-on-primary for visibility */ } .container__alphabets { @@ -36,3 +55,54 @@ scroll-margin-top: calc(var(--header-height) + 80px); } } + +/* Mobile View Adjustments */ +@media (max-width: 767px) { + .tabs { + gap: 0.2rem; + padding: 0.2rem; + flex-shrink: 1; + } + + .tab { + padding: 0.3rem 0.6rem; + font-size: 0.85rem; + border-radius: 0.25rem; + } + + /* Styles for the Help Icon in mobile view */ + + .your-help-icon-selector { + font-size: 1.1rem; + + width: 22px; + height: 22px; + + padding: 0.25rem; + + display: inline-flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } +} + +@media (max-width: 480px) { + .tabs { + gap: 0.1rem; + padding: 0.1rem; + } + .tab { + padding: 0.2rem 0.4rem; + font-size: 0.75rem; + } + + .your-help-icon-selector { + font-size: 1rem; + + width: 18px; + height: 18px; + + padding: 0.2rem; + } +} diff --git a/src/assets/styles/varnmala/barahkhadi/consonant.css b/src/assets/styles/varnmala/barahkhadi/consonant.css index 78237e37..68d77899 100644 --- a/src/assets/styles/varnmala/barahkhadi/consonant.css +++ b/src/assets/styles/varnmala/barahkhadi/consonant.css @@ -22,7 +22,7 @@ & .combinations__grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(5, 1fr); gap: 1rem; padding: 1rem; max-height: calc(100vh - 12rem); @@ -60,8 +60,8 @@ } } - @container (max-width: 480px) { - .combinations-grid { + @media (max-width: 480px) { + & .combinations__grid { grid-template-columns: 1fr; } } diff --git a/src/assets/styles/varnmala/barahkhadi/index.css b/src/assets/styles/varnmala/barahkhadi/index.css index f1d82993..f117b85d 100644 --- a/src/assets/styles/varnmala/barahkhadi/index.css +++ b/src/assets/styles/varnmala/barahkhadi/index.css @@ -9,15 +9,15 @@ } & .consonant__row { - padding: 1rem; + padding: 0.5rem; background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%); border-radius: 0.5rem; } & .consonants__grid { display: grid; - gap: 1.25rem; - grid-template-columns: repeat(auto-fit, 250px); + gap: 0.25rem; + grid-template-columns: repeat(5, 1fr); justify-content: center; } @@ -99,7 +99,7 @@ left: 0; width: 100%; height: 100%; - padding: 0.75rem; + padding: 0.1rem; background: var(--background); border: 1px solid var(--border); border-radius: 0.5rem; @@ -132,17 +132,22 @@ width: 100%; max-height: 100%; overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; } & .variation { font-size: 1.5rem; - padding: 0.4rem; + padding: 0.2rem; text-align: center; background: color-mix(in srgb, var(--text) 5%, var(--background) 95%); - border-radius: 4px; + border-radius: 2px; color: var(--text); border: 1px solid var(--border); } + & .variations__grid::-webkit-scrollbar { + display: none; + } & .group__row { padding: 1rem; @@ -152,14 +157,14 @@ & .row__grid { display: grid; - gap: 1.25rem; - grid-template-columns: repeat(auto-fit, 250px); + gap: 1.4rem; + grid-template-columns: repeat(auto-fit, 220px); justify-content: center; } & .letter__card { - width: 250px; - height: 250px; + width: 210px; + height: 220px; position: relative; background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%); border-radius: 0.5rem; diff --git a/src/assets/styles/varnmala/greek-alphabet.css b/src/assets/styles/varnmala/greek-alphabet.css new file mode 100644 index 00000000..1339a726 --- /dev/null +++ b/src/assets/styles/varnmala/greek-alphabet.css @@ -0,0 +1,96 @@ +.alphabet-page-container { + padding: 1rem 1.5rem; + max-width: 1300px; + margin: 0 auto; + font-family: var(--font-family-sans, sans-serif); +} + +.page-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border); +} + +.page-header .page-main-title { + margin: 0; + font-size: clamp(1.8rem, 4vw, 2.5rem); + color: var(--text-heading, var(--text, #333)); + font-weight: 700; + flex-grow: 1; + text-align: center; +} + +.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%); +} + +.grid-container.alphabet-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); /* Adjust minmax as per LetterCard size */ + gap: 1.75rem; + padding-top: 1.5rem; +} + +@media (max-width: 1024px) { + .grid-container.alphabet-grid { + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: 1.5rem; + } +} + +@media (max-width: 768px) { + .page-header { + flex-direction: column; + align-items: stretch; + } + .page-header .page-main-title { + order: -1; + width: 100%; + margin-bottom: 1rem; + text-align: center; + } + .flip__all__button { + width: auto; + align-self: center; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + } + + .page-header .back-button-container { + align-self: center; + } + .grid-container.alphabet-grid { + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 1.25rem; + } +} + +@media (max-width: 480px) { + .alphabet-page-container { + padding: 1rem 1rem; + } + .grid-container.alphabet-grid { + grid-template-columns: 1fr; + gap: 1rem; + } +} diff --git a/src/assets/styles/varnmala/index.css b/src/assets/styles/varnmala/index.css index bcd2b582..800797ae 100644 --- a/src/assets/styles/varnmala/index.css +++ b/src/assets/styles/varnmala/index.css @@ -11,6 +11,16 @@ list-style: none; } + & .alphabets__header h1 { + font-size: clamp(2.5rem, 4vw, 3rem); + font-weight: 800; + padding-bottom: 2rem; + background: linear-gradient(135deg, var(--primary), var(--primary-light)); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + } + & .card { opacity: 0; animation: fadeInUp 0.6s ease forwards; diff --git a/src/assets/styles/varnmala/months.css b/src/assets/styles/varnmala/months.css new file mode 100644 index 00000000..96e55fdd --- /dev/null +++ b/src/assets/styles/varnmala/months.css @@ -0,0 +1,495 @@ +.container__months-page { + max-width: 1200px; + margin: 0 auto; + padding: 2rem 1.5rem; + background-color: var(--background); + color: var(--text); +} + +.page-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border); +} + +.page-header h1 { + flex-grow: 1; + font-size: clamp(1.8rem, 5vw, 2.5rem); + color: var(--text); + margin: 0; +} + +.months-toggle-buttons { + display: flex; + justify-content: center; + margin-bottom: 1.5rem; + gap: 1rem; +} + +.toggle-button { + padding: 0.75rem 1.5rem; + font-size: 1rem; + font-weight: 500; + border: 2px solid transparent; + border-bottom: none; + background-color: var(--background-alt, transparent); + color: var(--text-secondary, var(--text)); + border-radius: 0.5rem 0.5rem 0 0; + cursor: pointer; + transition: + background-color 0.2s ease, + color 0.2s ease, + border-color 0.2s ease; + margin-bottom: -2px; + position: relative; +} + +.toggle-button:hover:not([disabled]) { + color: var(--primary); + background-color: var(--background-hover, color-mix(in srgb, var(--background) 85%, var(--primary) 15%)); +} + +.toggle-button.active { + background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%); + color: var(--primary); + border-color: var(--border); + border-bottom-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%); + font-weight: 600; +} + +.toggle-button[disabled] { + color: color-mix(in srgb, var(--text) 50%, transparent); + cursor: not-allowed; + background-color: transparent; +} + +.months-content-pane { + display: none; + padding: 2rem 1.5rem; + background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%); + border-radius: 0 0 0.5rem 0.5rem; + border: 2px solid var(--border); + border-top: none; + min-height: 400px; +} + +.months-content-pane.active { + display: block; + animation: fadeInPane 0.4s ease-out; +} + +@keyframes fadeInPane { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.months-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.1px 1rem; + justify-content: center; + perspective: 1500px; +} + +.month-card { + min-height: 250px; + height: auto; + position: relative; + cursor: default; + margin: 4px; +} + +.month-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transform-style: preserve-3d; + border-radius: 0.5rem; +} + +.month-card-inner.is-flipped { + transform: rotateY(180deg); +} + +.month-card-front { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + border-radius: 0.5rem; + box-shadow: 0 2px 4px color-mix(in srgb, var(--text) 10%, transparent); + border: 1px solid var(--border); + background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%); + color: var(--text); + overflow: hidden; + + display: flex; +} + +.card-flip-action-btn { + position: absolute; + top: 8px; + right: 8px; + padding: 0.3rem 0.6rem; + font-size: 0.75rem; + font-weight: 500; + background-color: var(--primary-light, color-mix(in srgb, var(--primary) 70%, white 30%)); + color: var(--primary-text, var(--text-on-primary, var(--background))); + border: 1px solid var(--primary, #007bff); + border-radius: 15px; + cursor: pointer; + z-index: 20; + transition: + background-color 0.2s ease, + transform 0.2s ease; +} + +.card-flip-action-btn:hover { + background-color: var(--primary, #1b6fc8); + color: var(--background); + transform: translateY(-1px); +} + +.month-card-front-content { + flex-grow: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 1rem; + box-sizing: border-box; + width: 100%; +} + +.month-card-back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + border-radius: 0.5rem; + + padding: 50px 1rem 1rem 1rem; + box-shadow: 0 2px 6px color-mix(in srgb, var(--text) 15%, transparent); + border: 1px solid var(--border); + background-color: color-mix(in srgb, var(--primary) 20%, var(--background) 80%); + color: var(--text); + overflow: hidden; + transform: rotateY(180deg); + box-sizing: border-box; +} + +.month-card-back-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + flex-grow: 1; + box-sizing: border-box; +} + +.hindu-ordinal-text-on-back { + font-size: 1.7rem; + color: var(white, var(--background)); + margin: 0; + font-weight: 600; + line-height: 1.4; + text-align: center; + padding: 0 0.5rem; +} + +.calendar-on-card-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 5px; + text-align: center; + width: 100%; + max-width: 260px; + margin: auto; + padding: 12px; + border-radius: 12px; + background-color: #cceeff; + box-shadow: + 0 4px 8px rgba(0, 0, 0, 0.1), + inset 0 0 5px rgba(255, 255, 255, 0.5); + border: 2px solid #aaddff; +} + +.calendar-on-card-grid .calendar-day { + padding: 6px 3px; + border-radius: 8px; + background-color: #ffffff; + color: #33475b; + min-height: 28px; + line-height: 28px; + font-size: 0.8rem; + font-weight: 600; + border: 1px solid #bee0f5; + transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.07); +} + +.calendar-on-card-grid .calendar-day:hover:not(.empty):not(.calendar-header) { + background-color: #ffeb99; + transform: scale(1.1) translateY(-2px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + color: #5c4033; +} + +.calendar-on-card-grid .calendar-header { + font-weight: 700; + background-color: #3d99e4; + color: #f5f2f1; + font-size: 0.7rem; + padding: 4px 0; + margin-bottom: 5px; + border-radius: 6px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + + min-height: auto; + line-height: normal; + border: none; +} + +.calendar-on-card-grid .calendar-day.empty { + background-color: #e9f5ff; + border-color: #d0e0f0; + box-shadow: none; + opacity: 0.8; +} + +.calendar-on-card-grid .calendar-day.current-day { + background-color: #ff6b6b; + color: #ffffff; + font-weight: 700; + border: 2px solid #e05050; + transform: scale(1.2); + box-shadow: 0 0 12px rgba(255, 107, 107, 0.8); + z-index: 1; +} +.calendar-on-card-grid .calendar-day.current-day::before { + content: none; +} + +.calendar-on-card-grid .calendar-day.holiday-day { + background-color: #99e699; + color: #226622; + font-weight: 700; + border: 2px dashed #66cc66; + position: relative; +} +.calendar-on-card-grid .calendar-day.holiday-day::after { + content: "🎈"; + position: absolute; + top: -5px; + right: -3px; + font-size: 0.85rem; + line-height: 1; + transform: rotate(15deg); +} + +.calendar-on-card-grid .calendar-day.holiday-day.current-day { + background-color: #ff8c8c; + border-style: solid; + border-color: #e05050; +} +.calendar-on-card-grid .calendar-day.holiday-day.current-day::after { + color: #e05050; + transform: rotate(0deg); +} + +@media (max-width: 768px) { + .month-card { + min-height: 300px; + } + .calendar-on-card-grid { + gap: 4px; + padding: 10px; + max-width: 230px; + border-radius: 10px; + } + .calendar-on-card-grid .calendar-day { + min-height: 26px; + line-height: 26px; + font-size: 0.75rem; + border-radius: 6px; + } + .calendar-on-card-grid .calendar-header { + font-size: 0.65rem; + border-radius: 5px; + } + .calendar-on-card-grid .calendar-day.holiday-day::after { + font-size: 0.75rem; + top: -4px; + right: -2px; + } +} + +@media (max-width: 480px) { + .month-card { + min-height: 280px; + } + .calendar-on-card-grid { + max-width: 100%; + padding: 8px; + gap: 3px; + border-radius: 8px; + } + .calendar-on-card-grid .calendar-day { + min-height: 24px; + line-height: 24px; + font-size: 0.7rem; + border-radius: 5px; + } + .calendar-on-card-grid .calendar-header { + font-size: 0.6rem; + border-radius: 4px; + } + .calendar-on-card-grid .calendar-day.holiday-day::after { + font-size: 0.7rem; + top: -3px; + right: -1px; + } +} + +.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%); +} + +.month-card .card { + max-height: 260px; +} +.flip__card { + width: 100%; + height: 100%; + perspective: 1000px; + min-height: 380px; +} +.flip__card { + min-height: 300px; +} +.month-card .card { + padding: 1rem; +} +.month-card .character { + font-size: clamp(1rem, 5vw, 2.5rem); +} +.month-card .text { + font-size: clamp(1rem, 2.5vw, 1.5rem); +} +.month-card .flipped__text { + font-size: clamp(1.2rem, 2.5vw, 1.6rem); +} +.calendar-on-card-grid { + max-width: 220px; + padding: 6px; + font-size: 0.65rem; +} +.calendar-on-card-grid .calendar-day { + min-height: 22px; + line-height: 22px; + min-height: 18px; + line-height: 18px; + font-size: 0.6rem; + padding: 0; +} + +/* Page Header adjustments */ +@media (max-width: 768px) { + .months-page-container .page-header { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; /* Add some space between stacked items */ + } + .months-page-container .page-main-title { + font-size: 1.8rem; /* Adjust title size */ + } + .months-page-container .flip__all__button { + align-self: flex-start; /* Align button to the start when stacked */ + margin-top: 0.5rem; + } +} + +/* Toggle Buttons adjustments */ +.months-toggle-buttons { + display: flex; + justify-content: center; + margin-bottom: 1.5rem; + gap: 1rem; +} + +.months-toggle-buttons .toggle-button { + padding: 0.6rem 1.2rem; + font-size: 0.9rem; +} + +@media (max-width: 480px) { + .months-toggle-buttons { + flex-direction: column; /* Stack buttons vertically */ + align-items: stretch; /* Make buttons full width */ + gap: 0.5rem; + } + .months-toggle-buttons .toggle-button { + width: 100%; + text-align: center; + } +} +@media (max-width: 1024px) { + .months-grid { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Adjust for tablets */ + } +} + +@media (max-width: 768px) { + .months-grid { + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + /* Or switch to 2 columns */ + /* grid-template-columns: repeat(2, 1fr); */ + } +} + +@media (max-width: 600px) { + /* More aggressive for smaller tablets / large phones */ + .months-grid { + grid-template-columns: 1fr; /* Single column for small mobile */ + } +} + +/* Ensure container has some padding */ +.months-page-container { + padding-left: 1rem; + padding-right: 1rem; +} diff --git a/src/assets/styles/varnmala/number.css b/src/assets/styles/varnmala/number.css index 6f5117e1..8541d4b1 100644 --- a/src/assets/styles/varnmala/number.css +++ b/src/assets/styles/varnmala/number.css @@ -1,3 +1,11 @@ +.page-header .page-main-title { + margin: 0; + font-size: clamp(1.8rem, 4vw, 2.5rem); + color: var(--text-heading, var(--text, #333)); + font-weight: 700; + flex-grow: 1; + text-align: center; +} .container__numbers { padding: 1rem; height: calc(100vh - 5rem); diff --git a/src/assets/styles/varnmala/reader.css b/src/assets/styles/varnmala/reader.css index 9acc69c1..07fea9ea 100644 --- a/src/assets/styles/varnmala/reader.css +++ b/src/assets/styles/varnmala/reader.css @@ -36,7 +36,7 @@ .mute-button { font-size: 1.5; border: 1px solid #6767d3; - /*background-color: var(--mute-button__bg);*/ + cursor: pointer; width: min(3em, 15vw); height: min(3em, 15vw); @@ -54,7 +54,7 @@ content: "\1F507"; } -.speaker { +/* .speaker { padding-inline: 1rem; display: flex; flex-basis: fit-content; @@ -74,6 +74,154 @@ .speaker span.active { background-color: var(--primary); color: white; +} */ + +/* .voices-dropdown { + position: relative; + display: inline-block; + margin-left: 1rem; +} + +.voices-btn { + background-color: #ffc107; + color: #333; + border: none; + padding: 10px 18px; + font-size: 1rem; + font-weight: bold; + border-radius: 25px; + cursor: pointer; + transition: + background-color 0.2s ease, + transform 0.15s ease; + display: flex; + align-items: center; + gap: 8px; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.voices-btn:hover { + background-color: #ffca2c; + transform: scale(1.03); +} + +.voices-btn:active { + transform: scale(0.98); +} + +.voices-options { + display: none; + position: absolute; + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + background-color: #fff; + border: 3px solid #ffc107; + border-radius: 15px; + min-width: 180px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); + z-index: 100; + padding: 8px 0; + overflow: hidden; +} + +.voices-options.show { + display: block; + animation: fadeInDropdown 0.2s ease-out; +} */ + +.voices-dropdown { + position: relative; + display: inline-block; +} + +.voices-btn { + background-color: transparent; + color: #708bae; + border: 1px solid #353dab; + padding: 8px 16px; + font-size: 1rem; + cursor: pointer; + border-radius: 5px; + transition: + background-color 0.3s ease, + color 0.3s ease, + border-color 0.3s ease; /* Smooth transitions */ + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +.voices-btn:hover { + background-color: #708bae; + color: #333; + border-color: #353dab; +} + +.voices-options { + position: absolute; + top: 100%; + right: 0; + background-color: #f9f9f9; /* Light background for options */ + border: 1px solid #ccc; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + z-index: 10; + min-width: 150px; + display: none; + overflow: hidden; + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; +} + +.voices-options.show { + display: block; +} + +.voice-option { + padding: 10px 15px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.2s ease; + color: #333; +} + +.voice-option:hover { + background-color: #f0f0f0; +} + +.voice-option.active { + background-color: #e0e0e0; + font-weight: bold; +} +@keyframes fadeInDropdown { + from { + opacity: 0; + transform: translateX(-50%) translateY(-10px); + } + to { + opacity: 1; + transform: translateX(-50%) translateY(0); + } +} + +.voice-option { + padding: 12px 20px; + color: #444; + cursor: pointer; + transition: + background-color 0.2s ease, + color 0.2s ease; + font-size: 0.95rem; + text-align: center; +} + +.voice-option:hover { + background-color: #fff5e0; + color: #222; +} + +.voice-option.active { + background-color: #ffc107; + color: #333; + font-weight: bold; } @media screen and (max-width: 768px) { diff --git a/src/assets/styles/varnmala/english.css b/src/assets/styles/varnmala/speak.css similarity index 68% rename from src/assets/styles/varnmala/english.css rename to src/assets/styles/varnmala/speak.css index 3645aa7e..76528c6a 100644 --- a/src/assets/styles/varnmala/english.css +++ b/src/assets/styles/varnmala/speak.css @@ -65,6 +65,25 @@ transform: translateY(-1px); } +.mute-button { + font-size: 1.5; + border: 1px solid #6767d3; + + cursor: pointer; + width: min(3em, 15vw); + height: min(3em, 15vw); + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; +} +.mute-button-audio::before { + content: "\1F508"; +} + +.mute-button-audio.mute::before { + content: "\1F507"; +} /* Container styles */ .container__english { & .letter { @@ -95,10 +114,37 @@ transparent 4px ); } - - & .no-background { - background: none !important; + &.bg-gradient3 { + background: linear-gradient(135deg, #667eea, #764ba2); + } + &.bg-gradient4 { + background: linear-gradient(135deg, #2af598, #009efd); } + &.bg-gradient5 { + background: linear-gradient(135deg, #f83600, #f9d423); + } + &.bg-pattern2 { + background-image: repeating-linear-gradient( + 45deg, + transparent, + transparent 10px, + rgba(0, 0, 0, 0.05) 10px, + rgba(0, 0, 0, 0.05) 20px + ); + } + &.bg-pattern3 { + background-image: repeating-radial-gradient( + circle, + transparent, + transparent 10px, + rgba(0, 0, 0, 0.05) 10px, + rgba(0, 0, 0, 0.05) 20px + ); + } +} + +& .no-background { + background: none !important; } @keyframes letterPop { diff --git a/src/assets/styles/varnmala/sunsign.css b/src/assets/styles/varnmala/sunsign.css new file mode 100644 index 00000000..7bad8133 --- /dev/null +++ b/src/assets/styles/varnmala/sunsign.css @@ -0,0 +1,95 @@ +.sun-sign-page-container { + padding: 1rem 1.5rem; + max-width: 1300px; + margin: 0 auto; + font-family: var(--font-family-sans, sans-serif); +} + +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 2rem; + padding-bottom: 1rem; + border-bottom: 1px solid var(--border, #e0e0e0); + flex-wrap: wrap; + gap: 1rem; +} + +.page-header .page-main-title { + margin: 0; + font-size: clamp(1.8rem, 4vw, 2.5rem); + color: var(--text-heading, var(--text, #333)); + font-weight: 700; + flex-grow: 1; +} + +.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%); +} + +.sun-signs-grid { + display: grid; + + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + gap: 1.75rem; +} + +@media (max-width: 1024px) { + .sun-signs-grid { + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 1.5rem; + } +} + +@media (max-width: 768px) { + .page-header { + flex-direction: column; + align-items: flex-start; + } + .page-header .page-main-title { + font-size: clamp(1.5rem, 5vw, 2rem); + width: 100%; + text-align: left; + } + .flip__all__button { + align-self: flex-start; + width: auto; + margin-top: 0.5rem; + } + .sun-signs-grid { + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: 1.25rem; + } +} + +@media (max-width: 480px) { + .sun-sign-page-container { + padding: 1rem 1rem; + } + .sun-signs-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + .flip__all__button { + width: 100%; + text-align: center; + } +} diff --git a/src/assets/styles/vedic.css b/src/assets/styles/vedic.css index ffb18579..e76016ca 100644 --- a/src/assets/styles/vedic.css +++ b/src/assets/styles/vedic.css @@ -1,149 +1,631 @@ +:root { + --unit-bg-1: #1b2735; + --unit-bg-2: #090a0f; + --unit-st1: #9d00ff; + --unit-st2: #00f5d0; + --unit-st3: #fee440; + --unit-st4: #f15bb5; + --unit-st5: #00bbf9; + --unit-title-shadow-1: rgba(179, 73, 138, 0.8); + --unit-title-card-shadow-2: rgba(142, 36, 170, 0.6); + --unit-card-h3: rgba(142, 36, 170, 0.6); + --unit-card-details: white; +} + +[data-theme="dark"] { + --unit-bg-1: #1b2735; + --unit-bg-2: #090a0f; + --unit-st1: #9d00ff; + --unit-st2: #00f5d0; + --unit-st3: #fee440; + --unit-st4: #f15bb5; + --unit-st5: #00bbf9; + --unit-title-shadow-1: rgba(179, 73, 138, 0.8); + --unit-title-card-shadow-2: rgba(142, 36, 170, 0.6); + --unit-card-h3: rgba(142, 36, 170, 0.6); + --unit-card-details: white; +} + +[data-theme="light"] { + --unit-bg-1: #e0f7fa; + --unit-bg-2: #b2ebf2; + --unit-st1: #ff7043; + --unit-st2: #66bb6a; + --unit-st3: #ffee58; + --unit-st4: #5c6bc0; + --unit-st5: #ec407a; + --unit-title-shadow-1: #1a237e; + --unit-title-card-shadow-2: rgba(92, 107, 192, 0.4); + --unit-card-h3: #1a237e; + --unit-card-details: #37474f; +} .container__vedic { min-height: 100vh; padding: 3rem 1.5rem; +} +.vedic__layout { + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-direction: column; + gap: 2rem; +} - & .vedic__layout { - max-width: 1200px; - margin: 0 auto; - display: grid; - align-items: center; - gap: 2rem; - grid-template-columns: 1fr 1.2fr; +/* Tab Styles */ +.tab-buttons { + display: flex; + justify-content: center; + margin-bottom: 2rem; + gap: 1rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.tab-button { + background-color: var(--background); + border: 2px solid var(--border); + color: var(--text); + padding: 0.8rem 1.5rem; + font-size: 1.1rem; + font-weight: 600; + border-radius: 0.75rem; + cursor: pointer; + transition: all 0.3s ease; + flex: 1; + text-align: center; +} + +.tab-button:hover { + background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%); +} + +.tab-button.active { + background: linear-gradient(-45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5); + background-size: 400% 400%; + animation: gradient 10s infinite; + color: var(--background); +} + +.tab-content { + display: none; +} + +.tab-content.active { + display: block; +} + +.tab-content { + height: 110vh; +} + +/* Tithi Header Styles */ +.tithi-header { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + margin-bottom: 2rem; + width: 100%; +} + +.tithi-title-wrapper { + align-items: center; + justify-content: space-between; + width: 100%; + max-width: 600px; +} + +.tithi-title { + color: var(--text); + font-size: 2rem; + font-weight: 600; + margin: 1rem; +} + +.date-display { + width: 100%; + max-width: 900px; +} + +.date-format { + padding: 1rem; + margin-bottom: 1rem; + border-radius: 0.75rem; + border: 1px solid var(--border); + background-color: var(--background); + border-left: 4px solid color-mix(in srgb, var(--primary) 60%, transparent 40%); + text-align: center; + font-size: 1.8rem; + word-spacing: 6px; +} +.disclaimer { + max-width: 900px; + margin: 2rem auto; + padding: 1.25rem 1.5rem; + border-radius: 0.75rem; + background-color: color-mix(in srgb, var(--background) 92%, var(--text) 8%); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); + font-size: 1rem; + line-height: 1.7; + color: grey; + position: relative; +} + +.disclaimer p { + margin: 0; +} + +.disclaimer strong { + color: color-mix(in srgb, var(--primary) 80%, var(--text) 20%); +} + +/* Add a subtle fade-in animation */ +@keyframes gentleAppear { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); } +} + +.disclaimer { + animation: gentleAppear 0.6s ease-out forwards; +} - & .converter__card, - & .units__card { - height: fit-content; - border-radius: 1rem; - padding: 2rem; - border: 2px solid var(--border); - background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%); +/* Responsive adjustments */ +@media (max-width: 768px) { + .disclaimer { + margin: 1.5rem; + padding: 1rem; + font-size: 0.9rem; } +} - & .converter__form { - display: flex; - flex-direction: column; - gap: 2rem; +@media (max-width: 480px) { + .disclaimer { + margin: 1rem 0.5rem; + padding: 0.8rem; + font-size: 0.85rem; } +} +/* Converter Horizontal Layout */ +.converter__horizontal { + display: flex; + align-items: flex-end; + gap: 1rem; + width: 100%; + padding: 1.5rem; + border-radius: 1rem; + margin-bottom: 2.5rem; + border: 2px solid var(--border); + background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%); +} - & .form__group { - display: flex; - flex-direction: column; - gap: 0.75rem; +.converter__title { + color: var(--text); + font-size: 1.8rem; + font-weight: 600; + margin-bottom: 2.5rem; + text-align: center; + position: relative; + /* Not sticky anymore if container scrolls, but good for z-index */ + z-index: 2; + padding: 0 2rem; + /* Add padding to title to prevent it from hugging the edge */ +} + +.form__group { + display: flex; + flex-direction: column; + gap: 0.5rem; + flex: 1; +} + +.form__group label { + color: var(--text); + font-size: 1.25rem; + font-weight: 500; + padding: 0.5rem; +} + +input, +select { + width: 100%; + padding: 1rem; + border-radius: 0.75rem; + border: 1px solid var(--border); + background-color: var(--background); + color: var(--text); + font-size: 1.25rem; +} + +input:focus, +select:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); +} + +.swap-button { + width: 50px; + height: 50px; + border-radius: 0.75rem; + background-color: var(--background); + border: 2px solid var(--border); + display: flex; + margin-bottom: 4px; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + flex-shrink: 0; + transform: rotate(90deg); +} + +.swap-button:hover { + background-color: color-mix(in srgb, var(--background) 90%, var(--text) 10%); +} + +.swap-button.active { + background: linear-gradient(45deg, #ffa63d, #ff3d77, #338aff, #3cf0c5); + background-size: 400% 400%; + animation: gradient 10s infinite; +} + +.swap-icon { + width: 20px; + height: 20px; + fill: var(--text); + transition: transform 0.3s ease; +} + +.swap-button.active .swap-icon { + fill: var(--background); + transform: rotate(180deg); +} + +.animated__result { + width: 100%; + padding: 1.5rem; + border-radius: 0.75rem; + background: conic-gradient(from 0deg at 50% 50%, #000080, #00bfff, #4682b4, #000080); +} + +.result__display { + width: 99%; + margin-left: 0.5%; + padding: 1.5rem; + border-radius: 0.75rem; + background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%); + color: var(--text); + text-align: center; + font-size: 2rem; + font-weight: 500; + display: none; +} + +/* Units Reference Card */ +/* Add these styles to vedic.css */ +.units__timeline-container { + position: relative; + height: 100vh; + overflow-x: hidden; + overflow-y: auto; + -webkit-perspective: 1px; + perspective: 1px; + background-image: radial-gradient(ellipse at bottom, var(--unit-bg-1) 0%, var(--unit-bg-2) 100%); + padding: 0; + width: 100%; + border-radius: 1rem; + border: 2px solid var(--border); +} + +.units__parallax-layer { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; +} + +.units__parallax-layer--base { + -webkit-transform: translateZ(0); + transform: translateZ(0); +} + +.units__parallax-layer--back { + -webkit-transform: translateZ(-2px) scale(3); + transform: translateZ(-2px) scale(3); +} + +.units__parallax-layer--back2 { + -webkit-transform: translateZ(-6px) scale(5); + transform: translateZ(-6px) scale(5); +} + +.units__parallax-layer--back3 { + -webkit-transform: translateZ(-12px) scale(6); + transform: translateZ(-12px) scale(6); +} + +.units__starfield { + position: absolute; + top: -250%; + left: 0; + height: 500%; + width: 100%; + background-size: 200px 200px; + background-image: radial-gradient(2px 2px at 40px 60px, var(--unit-st1), rgba(0, 0, 0, 0)), + radial-gradient(2px 2px at 20px 50px, var(--unit-st2), rgba(0, 0, 0, 0)), + radial-gradient(2px 2px at 30px 100px, var(--unit-st3), rgba(0, 0, 0, 0)), + radial-gradient(2px 2px at 110px 90px, var(--unit-st4), rgba(0, 0, 0, 0)), + radial-gradient(2px 2px at 190px 150px, var(--unit-st5), rgba(0, 0, 0, 0)); + background-repeat: repeat; +} + +.units__starfield span:nth-child(2) { + transform: rotate(45deg); +} +.units__starfield span:nth-child(3) { + transform: rotate(69deg); +} +.units__starfield span:nth-child(4) { + transform: rotate(123deg); +} + +.timeline-wrapper { + position: relative; + z-index: 10; + padding-top: 100px; + padding-bottom: 100px; +} + +.units__title { + margin-top: 11rem; + position: relative; + z-index: 10; + text-shadow: + 0 0 20px var(--unit-title-shadow-1), + 0 0 40px var(--unit-title-card-shadow-2); + filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); + color: white; + font-size: clamp(3rem, 7.5vw, 9rem); + font-weight: 600; + margin-bottom: 10rem; + text-align: center; + animation: fadeInScale 2s ease-out forwards; + transform: scale(0.8); +} +@keyframes fadeInScale { + to { + opacity: 1; + transform: scale(1); + } +} +.timeline-wrapper { + display: flex; + flex-direction: column; + /* Changed to vertical column */ + align-items: center; + /* Horizontally center items in the column */ + padding: 0; + /* Let individual nodes handle spacing with transforms/margins */ + position: relative; + gap: 80px; + padding-bottom: 2rem; + /* Add some padding at bottom */ + /* Remove min-height: 800px */ +} + +.timeline-node { + position: relative; + flex-shrink: 0; + width: 400px; + display: flex; + flex-direction: column; + align-items: center; + transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); + z-index: 1; + margin: 0; +} + +.timeline-card { + background-color: #11111120; + backdrop-filter: blur(5px); + border-radius: 1.25rem; + padding: 1.5rem; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + border: 1px solid rgba(0, 0, 0, 0.05); + min-height: 160px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: center; + transition: + transform 0.3s ease-in-out, + box-shadow 0.3s ease-in-out, + background-color 0.3s ease; + position: relative; +} + +.timeline-card:hover { + transform: scale(1.05) translateY(-5px); + box-shadow: 0 10px 30px var(--unit-title-card-shadow-2); +} +.unit__header { + margin-bottom: 0.75rem; +} + +.unit__header h3 { + color: var(--unit-card-h3); + font-size: 3.5rem; + font-weight: 700; + margin: 0; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); +} + +.unit__details { + display: flex; + flex-direction: column; + gap: 0.6rem; + color: var(--text); + font-size: 1.5rem; +} + +.unit__value { + display: flex; + align-items: center; + justify-content: center; + gap: 0.6rem; + font-weight: 500; +} +/* Animations */ +@keyframes gradient { + 0% { + background-position: 0% 50%; } - & .form__group label { - color: var(--text); - font-size: 1.125rem; - font-weight: 500; + 50% { + background-position: 100% 50%; } - & input, - & select { - width: 100%; - padding: 1rem; - border-radius: 0.75rem; - border: 1px solid var(--border); - background-color: var(--background); - color: var(--text); - font-size: 1.125rem; + 100% { + background-position: 0% 50%; } +} - & input:focus, - & select:focus { - outline: none; - border-color: var(--primary); - box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); +@keyframes timelineGradientVertical { + 0% { + background-position: 50% 0%; } - & .convert__button { - width: 100%; - padding: 1rem; - border-radius: 0.75rem; - background-color: var(--primary); - color: var(--background); - font-size: 1.125rem; - font-weight: 500; - border: none; - cursor: pointer; - transition: opacity 0.2s; + 100% { + background-position: 50% 200%; } +} - & .convert__button:hover { - opacity: 0.9; +@keyframes anime { + 0% { + background-position: 0% 50%; } - & .result__display { - display: none; - padding: 1.5rem; - border-radius: 0.75rem; - background-color: color-mix(in srgb, var(--background) 95%, var(--text) 5%); - color: var(--text); - text-align: center; - font-size: 1.25rem; - font-weight: 500; + 50% { + background-position: 100% 50%; } - & .units__title { - color: var(--text); - font-size: 1.5rem; - font-weight: 600; - margin-bottom: 1.5rem; + 100% { + background-position: 0% 50%; + } +} + +/* Responsive */ +@media (max-width: 768px) { + .container__vedic { + padding: 1.5rem; } - & .units__grid { - display: grid; + .converter__horizontal { + flex-direction: column; + align-items: stretch; gap: 1rem; - max-height: 600px; - overflow-y: auto; - padding-right: 0.5rem; } - & .unit__item { - padding: 1.25rem; - border-radius: 0.75rem; - border: 1px solid var(--border); - background-color: var(--background); + .swap-button { + margin: 0.5rem 0; + align-self: center; } - & .unit__header { - display: flex; - justify-content: space-between; - align-items: baseline; + .tithi-title { + font-size: 1.8rem; } - & .unit__header h3 { - color: var(--primary); - font-size: 1.25rem; - font-weight: 500; + .date-format { + font-size: 1.62rem; } - & .approx { - color: var(--text); - opacity: 0.6; - font-size: 0.875rem; + .units__timeline-container { + height: 60vh; + padding: 0 1rem 1rem 1rem; + /* Adjust padding for smaller screens (removed top) */ + max-height: 800px; } - & .unit__details { - margin-top: 0.75rem; - display: grid; - gap: 0.375rem; - color: var(--text); + .units__title { + padding: 0 1rem; } - - & .unit__value { - display: flex; + .timeline-wrapper { + /* Add padding-top for mobile */ + padding-top: 1.5rem; + /* Compensate for the removed margin-bottom on title */ + flex-direction: column; align-items: center; - gap: 0.5rem; + gap: 60px; + min-height: auto; + } + .timeline-node { + width: 90%; + max-width: 280px; + transform: none !important; + align-self: auto; + } + .timeline-card { + min-height: 120px; + padding: 1rem; } - & .icon { - opacity: 0.6; + .unit__header h3 { + font-size: 2rem; } - @media (max-width: 768px) { - & .vedic__layout { - grid-template-columns: 1fr; - } + .unit__details { + font-size: 1.2rem; + gap: 0.4rem; } + + .unit__value .icon { + font-size: 1.1em; + } +} +@media (max-width: 480px) { + .date-format { + font-size: 1.2rem; + } + + .units__title { + margin-top: 5rem; + margin-bottom: 5rem; + font-size: 3rem; + } + .unit__header h3 { + font-size: 1.5rem; + } + + .unit__details { + font-size: 0.9rem; + gap: 0.4rem; + } +} +/* Custom scrollbar */ +.units__timeline-container::-webkit-scrollbar { + width: 8px; +} + +.units__timeline-container::-webkit-scrollbar-track { + background: var(--unit-bg-2); + border-radius: 4px; +} + +.units__timeline-container::-webkit-scrollbar-thumb { + background: var(--unit-card-h3); + border-radius: 4px; +} + +.units__timeline-container::-webkit-scrollbar-thumb:hover { + background: color-mix(in srgb, var(--unit-title-card-shadow-2) 80%, black 20%); } diff --git a/src/components/Back.astro b/src/components/Back.astro new file mode 100644 index 00000000..cffda28f --- /dev/null +++ b/src/components/Back.astro @@ -0,0 +1,19 @@ +--- +import BackIcon from "@/assets/icons/back.svg"; +--- + + + + + + diff --git a/src/components/ui/backButton.astro b/src/components/BackButton.astro similarity index 100% rename from src/components/ui/backButton.astro rename to src/components/BackButton.astro diff --git a/src/components/canvasDialogue.astro b/src/components/CanvasGenerator.astro similarity index 100% rename from src/components/canvasDialogue.astro rename to src/components/CanvasGenerator.astro diff --git a/src/components/Capital.astro b/src/components/Capital.astro new file mode 100644 index 00000000..c42c4bde --- /dev/null +++ b/src/components/Capital.astro @@ -0,0 +1,266 @@ +--- +export interface Props { + stateList: any[]; + utList: any[]; +} +import "@/assets/styles/capital.css"; +import Back from "@/components/Back.astro"; +const { stateList, utList } = Astro.props; + +function getColorClass(index: number) { + const colorClasses = [ + "card-color-1", + "card-color-2", + "card-color-3", + "card-color-4", + "card-color-5", + "card-color-6", + "card-color-7", + "card-color-8" + ]; + return colorClasses[index % colorClasses.length]; +} +--- + +
+ + +
+ +
+ +
+
+
+

State List

+ 28 States +
+
+ { + stateList.map((state, index) => ( +
+
+ {state.name} +

{state.capital}

+
+
+ )) + } +
+
No states found matching your search.
+
+ +
+
+

Union Territory List

+ 8 UTs +
+
+ { + utList.map((ut, index) => ( +
+
+ {ut.name} +

{ut.capital}

+
+
+ )) + } +
+
No union territories found matching your search.
+
+
+
+ + diff --git a/src/components/Capitals.astro b/src/components/Capitals.astro deleted file mode 100644 index 631c5054..00000000 --- a/src/components/Capitals.astro +++ /dev/null @@ -1,153 +0,0 @@ ---- -export interface Props { - stateList: any[]; - utList: any[]; -} - -import "@/assets/styles/capital.css"; - -const { stateList, utList } = Astro.props; - -// Create a function to generate a color class based on index -function getColorClass(index: number) { - const colorClasses = [ - "card-color-1", - "card-color-2", - "card-color-3", - "card-color-4", - "card-color-5", - "card-color-6", - "card-color-7", - "card-color-8" - ]; - return colorClasses[index % colorClasses.length]; -} ---- - -
- -
-
-

Explore India's Administrative Landscape

-

Discover the diverse tapestry of states and union territories

-
-
- - -
-
- 🔍 - - -
-
- - -
-
-
-

- 🏛️ States of India -

-
- {stateList.length} Total States -
-
- -
- { - stateList.map((state, index) => ( -
-
-

{state.name}

-
- Capital - {state.capital} -
-
-
-
- )) - } -
-
- -
-
-

- 🏝️ Union Territories -

-
- {utList.length} Total UTs -
-
- -
- { - utList.map((ut, index) => ( -
-
-

{ut.name}

-
- Capital - {ut.capital} -
-
-
-
- )) - } -
-
-
-
- - diff --git a/src/components/Card.astro b/src/components/Card.astro index b1914ec8..1132ef6f 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -34,9 +34,7 @@ interface Branch { surnames: Surname[]; } -const { placeholder = "Search...", initialData = [] } = Astro.props; - -// Server-side data processing +const { initialData = [] } = Astro.props; const processedData = initialData.map((branch, index) => ({ ...branch, color: colors[index % colors.length] @@ -47,7 +45,13 @@ const processedData = initialData.map((branch, index) => ({ { processedData.length > 0 ? ( processedData.map((branch, index) => ( -
+
@@ -67,16 +71,17 @@ const processedData = initialData.map((branch, index) => ({
-
+
+
-
+ - - - diff --git a/src/components/ui/CustomCircle.astro b/src/components/CustomCircle.astro similarity index 100% rename from src/components/ui/CustomCircle.astro rename to src/components/CustomCircle.astro diff --git a/src/components/DrawKeyboard.astro b/src/components/DrawKeyboard.astro index 304ffe00..932f27b4 100644 --- a/src/components/DrawKeyboard.astro +++ b/src/components/DrawKeyboard.astro @@ -1,22 +1,35 @@ --- import { alphabetMapper } from "@/mappers/alphabet"; -import { IMAGE_DIR, colorBox, fontBox, numberBox } from "@/utils/constants"; +import { IMAGE_DIR, colorBox, fontBox, numberBox, fontColor } from "@/utils/constants"; +import Keyboard from "@/components/Keyboard.astro"; ---
-
-
- -
- -

Press any key

-
+
+
+

Press any key

+
+ +
-
+
+
+
+
+ +
+ + diff --git a/src/components/Help.astro b/src/components/Help.astro index d675cf38..fce577e1 100644 --- a/src/components/Help.astro +++ b/src/components/Help.astro @@ -28,7 +28,13 @@ const { title, description } = Astro.props; font-style: italic; } -
?
+ + + + + +
?
+

{title}

@@ -54,6 +60,26 @@ const { title, description } = Astro.props; diff --git a/src/components/HideSeekGrid.astro b/src/components/HideSeekGrid.astro index 710acede..ed4ae7b3 100644 --- a/src/components/HideSeekGrid.astro +++ b/src/components/HideSeekGrid.astro @@ -32,7 +32,7 @@ const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i) gap: 1rem; width: 100%; padding: 1rem; - background: #092745; + background: light-dark(#f8eeec, #87807c); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 1.5rem; box-shadow: var(--shadow-sm); @@ -45,6 +45,7 @@ const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i) } .grid__item { + color: light-dark(#000000, #ffffff); --hue: calc(360 / 26 * var(--letter-index, 0)); --letter-color: hsl(var(--hue) 85% 60%); @@ -61,20 +62,20 @@ const letters = Array.from({ length: 26 }, (_, i) => String.fromCharCode(65 + i) transition: var(--transition); } - .grid__item:hover { + .grid__item.active { background-color: var(--letter-color); color: var(--text-light); - transform: translateY(-2px) rotateY(10deg); - box-shadow: var(--shadow-md); } - .grid__item.active { - background-color: var(--letter-color); - color: var(--text-light); + .grid__item:hover:not(.active) { + color: light-dark(#808080, #5f5f5f); + transform: translateY(-2px) rotateY(10deg); + box-shadow: var(--shadow-md); } .grid__item:not(.active) { - background-color: var(--default-bg); + color: light-dark(#ffffff, #232025); + background-color: light-dark(#ffffff, #232025); } @media (max-width: 768px) { diff --git a/src/components/HideSeekKbd.astro b/src/components/HideSeekKbd.astro index d00eebf6..ec280890 100644 --- a/src/components/HideSeekKbd.astro +++ b/src/components/HideSeekKbd.astro @@ -2,6 +2,7 @@ import { getLetterIndex } from "@/utils/index"; const letterRows = [ + ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], ["A", "S", "D", "F", "G", "H", "J", "K", "L"], ["Z", "X", "C", "V", "B", "N", "M"] @@ -26,7 +27,6 @@ const letterRows = [ :root { --primary-bg: #1a1a1a; --default-bg: #0b1f54; - --accent-color: #4a90e2; --text-color: #ffffff; --modal-bg: rgba(0, 0, 0, 0.8); } @@ -34,9 +34,10 @@ const letterRows = [ .container__keyboard { display: flex; flex-direction: column; - gap: 0.5rem; - padding: 1rem; - background: var(--primary-bg); + gap: 1.2rem; + padding: 3rem; + margin-top: 3rem; + background: light-dark(#f8eeec, #87807c); border-radius: 0.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } @@ -44,78 +45,130 @@ const letterRows = [ .keyboard-row { display: flex; justify-content: center; - gap: 0.5rem; + gap: 1.2rem; } .keyboard-item { - width: 5rem; - height: 5rem; + width: 5.5rem; + height: 5.5rem; display: flex; align-items: center; justify-content: center; - background-color: var(--default-bg); - color: var(--text-color); + background-color: light-dark(#ffffff, #232025); + color: light-dark(black, white); border-radius: 0.25rem; cursor: pointer; transition: all 0.2s ease; font-weight: bold; user-select: none; + font-size: 1.7rem; } .keyboard-item:hover { - background: var(--accent-color); + background: light-dark(#808080, #5f5f5f); transform: translateY(-2px); } .keyboard-item.active { - background: var(--accent-color); - transform: scale(1.1); + transform: scale(1.05); + } + + .keyboard-item.active:hover { + background-color: light-dark(grey, #0b1f54); } @media (max-width: 640px) { + .container__keyboard { + gap: 0.8rem; + padding: 1.5rem; + } + + .keyboard-row { + gap: 0.8rem; + } + .letter-box, .keyboard-item { width: 2rem; height: 2rem; - font-size: 0.875rem; + font-size: 1rem; } } diff --git a/src/components/IndicLetters.astro b/src/components/IndicLetters.astro new file mode 100644 index 00000000..2cfb4731 --- /dev/null +++ b/src/components/IndicLetters.astro @@ -0,0 +1,244 @@ +--- +import { + englishVowels, + englishConsonants, + allAlphabet, + letterPairs, + languages, + languages2, + selectedLanguage1, + selectedLanguage2, + getLetterForLanguage +} from "@/utils/languageLetters.ts"; +import BackIcon from "@/components/Back.astro"; +import "@/assets/styles/indic.css"; +--- + +
+
+ +
+
+ + +
+ + +
+ + +
+
+
+ +
+

VOWELS

+ { + letterPairs + .filter((pair) => pair.type === "vowel") + .map((pair, index) => ( +
+
{getLetterForLanguage(pair, selectedLanguage1)}
+
{getLetterForLanguage(pair, selectedLanguage2)}
+
+ )) + } + +
+ +

CONSONANTS

+ { + letterPairs + .filter((pair) => pair.type === "consonant") + .map((pair, index) => ( +
+
{getLetterForLanguage(pair, selectedLanguage1)}
+
{getLetterForLanguage(pair, selectedLanguage2)}
+
+ )) + } +
+ +
+
+ +
+
+
ॐ
+
+
+
+
+
+ diff --git a/src/components/Keyboard.astro b/src/components/Keyboard.astro new file mode 100644 index 00000000..95b0aa8a --- /dev/null +++ b/src/components/Keyboard.astro @@ -0,0 +1,39 @@ +--- +import "@/assets/styles/Keyboard.css"; +const rows = [ + ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"], + ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"], + ["A", "S", "D", "F", "G", "H", "J", "K", "L"], + ["Z", "X", "C", "V", "B", "N", "M"], + ["SPACE", "ENTER", "BACKSPACE"] +]; +--- + +
+ { + rows.map((row) => ( +
+ {row.map((key) => ( + + ))} +
+ )) + } +
+ + diff --git a/src/components/LetterAnimation.astro b/src/components/LetterAnimation.astro new file mode 100644 index 00000000..989f0d48 --- /dev/null +++ b/src/components/LetterAnimation.astro @@ -0,0 +1,525 @@ +--- +interface LetterPath { + d: string; + animationDelay: string; +} +interface LetterData { + paths: LetterPath[]; + instructions: string[]; +} +interface LetterMap { + [letter: string]: LetterData; +} + +export interface Props { + currentLetter?: string; +} + +const { currentLetter: propLetter = "A" } = Astro.props; + +const letterMap: LetterMap = { + A: { + paths: [ + { d: "M50,170 L100,30", animationDelay: "0s" }, + { d: "M100,30 L150,170", animationDelay: "1s" }, + { d: "M70,120 L130,120", animationDelay: "2s" } + ], + instructions: [ + "Draw a slant line up from bottom left to the top.", + "Draw a slant line down from top to bottom right.", + "Draw a line across the middle." + ] + }, + B: { + paths: [ + { d: "M60,30 L60,170", animationDelay: "0s" }, + { d: "M60,30 Q130,55 60,100", animationDelay: "1s" }, + { d: "M60,100 Q130,140 60,170", animationDelay: "2s" } + ], + instructions: ["Draw a straight line down.", "Curve from top to middle.", "Curve from middle to bottom."] + }, + C: { + paths: [{ d: "M140,50 Q70,30 70,100 Q70,170 140,150", animationDelay: "0s" }], + instructions: ["Start at the top right, curve left and down, ending at bottom right."] + }, + D: { + paths: [ + { d: "M60,30 L60,170", animationDelay: "0s" }, + { d: "M60,30 Q150,100 60,170", animationDelay: "1s" } + ], + instructions: ["Draw a straight line down.", "Curve from top to bottom."] + }, + E: { + paths: [ + { d: "M130,30 L60,30 L60,170 L130,170", animationDelay: "0s" }, + { d: "M60,100 L120,100", animationDelay: "1.5s" } + ], + instructions: ["Draw top, left, and bottom lines.", "Draw the middle line."] + }, + F: { + paths: [ + { d: "M130,30 L60,30 L60,170", animationDelay: "0s" }, + { d: "M60,100 L120,100", animationDelay: "1.5s" } + ], + instructions: ["Draw top and left lines.", "Draw the middle line."] + }, + G: { + paths: [{ d: "M140,50 Q70,30 70,100 Q70,170 140,150 Q130,120 110,120", animationDelay: "0s" }], + instructions: ["Curve from top right to bottom right, then a short line inward."] + }, + H: { + paths: [ + { d: "M60,30 L60,170", animationDelay: "0s" }, + { d: "M140,30 L140,170", animationDelay: "1s" }, + { d: "M60,100 L140,100", animationDelay: "2s" } + ], + instructions: ["Draw the left line.", "Draw the right line.", "Draw the middle line."] + }, + I: { + paths: [ + { d: "M100,30 L100,170", animationDelay: "0s" }, + { d: "M80,30 L120,30", animationDelay: "1s" }, + { d: "M80,170 L120,170", animationDelay: "2s" } + ], + instructions: ["Draw the vertical line.", "Draw the top line.", "Draw the bottom line."] + }, + J: { + paths: [{ d: "M140,30 L140,140 Q140,170 100,170 Q60,170 60,140", animationDelay: "0s" }], + instructions: ["Draw the top line and curve down to the left."] + }, + K: { + paths: [ + { d: "M60,30 L60,170", animationDelay: "0s" }, + { d: "M60,100 L140,30", animationDelay: "1s" }, + { d: "M60,100 L140,170", animationDelay: "2s" } + ], + instructions: ["Draw the vertical line.", "Draw the upper diagonal.", "Draw the lower diagonal."] + }, + L: { + paths: [{ d: "M60,30 L60,170 L130,170", animationDelay: "0s" }], + instructions: ["Draw the vertical and bottom lines."] + }, + M: { + paths: [{ d: "M60,170 L60,30 L100,100 L140,30 L140,170", animationDelay: "0s" }], + instructions: ["Draw up, down to middle, up, and down again."] + }, + N: { + paths: [{ d: "M60,170 L60,30 L140,170 L140,30", animationDelay: "0s" }], + instructions: ["Draw up, diagonal down, and up again."] + }, + O: { + paths: [{ d: "M100,30 Q60,30 60,100 Q60,170 100,170 Q140,170 140,100 Q140,30 100,30", animationDelay: "0s" }], + instructions: ["Draw a big oval."] + }, + P: { + paths: [ + { d: "M60,170 L60,30", animationDelay: "0s" }, + { d: "M60,30 Q130,55 60,100", animationDelay: "1s" } + ], + instructions: ["Draw a straight line up.", "Curve from top to middle."] + }, + Q: { + paths: [ + { d: "M100,30 Q60,30 60,100 Q60,170 100,170 Q140,170 140,100 Q140,30 100,30", animationDelay: "0s" }, + { d: "M120,140 L150,170", animationDelay: "1.5s" } + ], + instructions: ["Draw a big oval.", "Draw a small diagonal line at the bottom right."] + }, + R: { + paths: [ + { d: "M60,170 L60,30", animationDelay: "0s" }, + { d: "M60,30 Q130,55 60,100", animationDelay: "1s" }, + { d: "M60,100 L140,170", animationDelay: "2s" } + ], + instructions: ["Draw a straight line up.", "Curve from top to middle.", "Draw a diagonal down."] + }, + S: { + paths: [ + { d: "M140,50 C140,30 60,30 60,70", animationDelay: "0s" }, + { d: "M60,70 C60,110 140,110 140,150", animationDelay: "1s" }, + { d: "M140,150 C140,170 60,170 60,130", animationDelay: "2s" } + ], + instructions: ["Start at the top right, curve to the left.", "Curve to the right.", "Curve to the left to finish."] + }, + T: { + paths: [ + { d: "M60,30 L140,30", animationDelay: "0s" }, + { d: "M100,30 L100,170", animationDelay: "1s" } + ], + instructions: ["Draw the top line.", "Draw the vertical line."] + }, + U: { + paths: [{ d: "M60,30 L60,140 Q60,170 100,170 Q140,170 140,140 L140,30", animationDelay: "0s" }], + instructions: ["Draw down, curve at the bottom, and up."] + }, + V: { + paths: [{ d: "M60,30 L100,170 L140,30", animationDelay: "0s" }], + instructions: ["Draw down to the bottom and up again."] + }, + W: { + paths: [{ d: "M60,30 L80,170 L100,100 L120,170 L140,30", animationDelay: "0s" }], + instructions: ["Draw down, up, down, and up again."] + }, + X: { + paths: [ + { d: "M60,30 L140,170", animationDelay: "0s" }, + { d: "M140,30 L60,170", animationDelay: "1s" } + ], + instructions: ["Draw one diagonal.", "Draw the other diagonal."] + }, + Y: { + paths: [ + { d: "M60,30 L100,100 L140,30", animationDelay: "0s" }, + { d: "M100,100 L100,170", animationDelay: "1s" } + ], + instructions: ["Draw the upper branches.", "Draw the vertical line."] + }, + Z: { + paths: [{ d: "M60,30 L140,30 L60,170 L140,170", animationDelay: "0s" }], + instructions: ["Draw the top, diagonal, and bottom lines."] + } +}; + +const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""); +let validatedLetter = propLetter.toUpperCase(); +if (!letterMap[validatedLetter]) validatedLetter = "A"; +const currentLetter = validatedLetter; +const letterData = letterMap[currentLetter]; +--- + +
+
+ + { + letterData.paths.map((path) => ( + + )) + } + +
+ +
+ + + +
+ +
+ { + alphabet.map((l) => ( + + )) + } +
+ +
+

+
    +
    +
    + + + + + diff --git a/src/components/LetterCard.astro b/src/components/LetterCard.astro index 805094c3..cdd9e262 100644 --- a/src/components/LetterCard.astro +++ b/src/components/LetterCard.astro @@ -91,7 +91,7 @@ const { item, category } = Astro.props; font-size: clamp(3rem, 6vw, 5rem); font-weight: 800; margin: 0; - line-height: 1; + line-height: 1.2; /* Adjusted line-height */ background: linear-gradient( 135deg, var(--character-gradient-start, var(--primary)) 0%, @@ -101,7 +101,7 @@ const { item, category } = Astro.props; background-clip: text; color: transparent; text-shadow: var(--character-shadow); - text-align: left; + text-align: center; /* Adjusted text-align */ } & .flipped__text { @@ -117,6 +117,7 @@ const { item, category } = Astro.props; margin: 0; line-height: 1; text-align: center; + font-family: monospace; } & .card { @@ -297,3 +298,63 @@ const { item, category } = Astro.props; }); }); + + diff --git a/src/components/mathForm.astro b/src/components/MathForm.astro similarity index 57% rename from src/components/mathForm.astro rename to src/components/MathForm.astro index 9b158244..f0a787ef 100644 --- a/src/components/mathForm.astro +++ b/src/components/MathForm.astro @@ -49,21 +49,30 @@ import "@/assets/styles/math.css";
    Score: 0
    + + {/* ADD THIS: Fullscreen Celebration Container */} +
    + {} + {} +
    + + diff --git a/src/components/MonthCard.astro b/src/components/MonthCard.astro new file mode 100644 index 00000000..4544c9fb --- /dev/null +++ b/src/components/MonthCard.astro @@ -0,0 +1,571 @@ +--- +// Define TypeScript interfaces for month data +interface EnglishMonth { + type: "english"; + name: string; + hindi: string; + monthIndex: number; +} + +interface IndianMonth { + type: "indian"; + name: string; + dates: string; + monthIndex: number; + displayName: string; + hinduOrdinalText: string; +} + +export type MonthEntry = EnglishMonth | IndianMonth; + +interface Holiday { + day: number; + month: number; + year: number; + name: string; +} + +interface Props { + item: MonthEntry; + currentYear: number; + nationalHolidaysData: Holiday[]; + parsedToday: Date; +} + +const { item, currentYear, nationalHolidaysData, parsedToday } = Astro.props; + +// Helper function to generate calendar HTML +function isHoliday(day: number, month: number, year: number, holidays: Holiday[]): Holiday | undefined { + return holidays.find((h) => h.day === day && h.month === month && h.year === year); +} + +function generateCalendarDaysHTML(monthIndex: number, year: number, holidays: Holiday[], todayDate: Date): string { + let html = ""; + const daysOfWeek = ["S", "M", "T", "W", "Th", "F", "S"]; + daysOfWeek.forEach((day) => { + html += `
    ${day}
    `; + }); + + const firstDayOfMonth = new Date(year, monthIndex, 1); + const startingDay = firstDayOfMonth.getDay(); + const daysInMonth = new Date(year, monthIndex + 1, 0).getDate(); + + for (let i = 0; i < startingDay; i++) { + html += '
    '; + } + + for (let day = 1; day <= daysInMonth; day++) { + let dayClass = "calendar-day"; + const holidayInfo = isHoliday(day, monthIndex, year, holidays); + + if (year === todayDate.getFullYear() && monthIndex === todayDate.getMonth() && day === todayDate.getDate()) { + dayClass += " current-day"; + } + if (holidayInfo) { + dayClass += " holiday-day"; + } + + html += `
    ${day}
    `; + } + return html; +} +--- + +
    +
    +
    +
    + Flip Card +
    +
    + {item.type === "english" &&

    {item.name}

    } + {item.type === "indian" &&

    {item.name}

    } +
    +
    + { + item.type === "english" && ( + <> +

    {item.hindi}

    + + ) + } + { + item.type === "indian" && ( + <> +

    {item.displayName}

    + + ) + } +
    +
    +
    +
    +
    + Flip Card +
    +
    + {} + { + item.type === "english" && ( + <> +
    + + ) + } + { + item.type === "indian" && ( + <> +

    {item.hinduOrdinalText}

    + {/*

    {item.hinduOrdinalText}

    +

    {item.dates}

    */} + + ) + } +
    +
    +
    +
    +
    + + + + + + diff --git a/src/components/NameForm.astro b/src/components/NameForm.astro index 0167176e..7135a540 100644 --- a/src/components/NameForm.astro +++ b/src/components/NameForm.astro @@ -1,115 +1,8 @@ --- import "@/assets/styles/dialog.css"; +import "@/assets/styles/nameform.css"; --- -
    🃏
    diff --git a/src/components/Popup.astro b/src/components/Popup.astro index f1a25701..bc8a3903 100644 --- a/src/components/Popup.astro +++ b/src/components/Popup.astro @@ -5,7 +5,7 @@ State Image
    State Information
    - +
    @@ -17,7 +17,7 @@ const popupStateImage = document.querySelector(".state-popup__image") as HTMLImageElement; const seeMoreButton = document.querySelector(".state-popup__button--more") as HTMLElement; const closePopup = document.querySelector(".state-popup__close") as HTMLElement; - const copyButton = document.querySelector(".state-popup__button--copy") as HTMLElement; + //const copyButton = document.querySelector(".state-popup__button--copy") as HTMLElement; function showPopup(event: MouseEvent, stateInfo: any) { // Update popup content @@ -79,21 +79,21 @@ popup.style.opacity = "0"; }); - copyButton?.addEventListener("click", () => { - const stateName = popupStateName.textContent; - const stateInfo = popupStateInfo.textContent; - if (stateName && stateInfo) { - navigator.clipboard - .writeText(`${stateName} - ${stateInfo}`) - .then(() => { - alert("State information copied to clipboard!"); - }) - .catch((err) => { - console.error("Failed to copy text: ", err); - alert("Failed to copy to clipboard"); - }); - } - }); + //copyButton?.addEventListener("click", () => { + // const stateName = popupStateName.textContent; + // const stateInfo = popupStateInfo.textContent; + // if (stateName && stateInfo) { + // navigator.clipboard + // .writeText(`${stateName} - ${stateInfo}`) + // .then(() => { + // alert("State information copied to clipboard!"); + // }) + // .catch((err) => { + // console.error("Failed to copy text: ", err); + // alert("Failed to copy to clipboard"); + // }); + // } + //}); seeMoreButton?.addEventListener("click", () => { const stateName = popupStateName.textContent; diff --git a/src/components/Puzzle.astro b/src/components/Puzzle.astro index a93da7dc..27bb00bf 100644 --- a/src/components/Puzzle.astro +++ b/src/components/Puzzle.astro @@ -16,7 +16,64 @@ import Settings from "@/components/Settings.astro";
    Found: 0/
    - +
    @@ -434,7 +491,7 @@ import Settings from "@/components/Settings.astro"; // Add event listener for the Confirm Selection button //document.getElementById("confirmSelectionBtn").addEventListener("click", handleConfirmSelection); - // Mouse events for drag selectionPsetting + // Mouse events for drag selection setting gridElement.addEventListener("mousedown", handleDragStart); gridElement.addEventListener("mousemove", handleDragMove); document.addEventListener("mouseup", handleDragEnd); @@ -445,10 +502,14 @@ import Settings from "@/components/Settings.astro"; handleDragStart(e); }); - gridElement.addEventListener("touchmove", (e) => { - e.preventDefault(); - handleDragMove(e); - }); + gridElement.addEventListener( + "touchmove", + (e) => { + e.preventDefault(); + handleDragMove(e); + }, + { passive: false } + ); // insures responsive touch handling gridElement.addEventListener("touchend", (e) => { e.preventDefault(); diff --git a/src/components/StateList.astro b/src/components/StateList.astro index 6930b6b7..62013790 100644 --- a/src/components/StateList.astro +++ b/src/components/StateList.astro @@ -1,5 +1,5 @@ --- -import { locations } from "../libs/location"; +import { locations } from "@/libs/location"; const { type = "state" } = Astro.props; const list = type === "state" ? locations.filter((loc) => loc.isState) : locations.filter((loc) => !loc.isState); diff --git a/src/components/SunSignCards.astro b/src/components/SunSignCards.astro new file mode 100644 index 00000000..9e9b569a --- /dev/null +++ b/src/components/SunSignCards.astro @@ -0,0 +1,402 @@ +--- +export interface SunSignEntry { + id: string; + name: string; + symbol: string; + dates: string; + emoji?: string; + firstLetters?: string; // Original, kept for data integrity if needed elsewhere + parsedHindiLetters?: string; // New property for processed Hindi letters + parsedEnglishLetters?: string; // New property for processed English letters +} + +interface Props { + item: SunSignEntry; +} + +const { item } = Astro.props; +--- + +
    +
    +
    +
    + Flip Card +
    +
    + {} +

    {item.symbol}

    +
    +
    + {} +

    {item.name}

    +
    +
    +
    +
    +
    + Flip Card +
    +
    + {/*

    {item.name}

    */} + { + /* {item.image && {item.name}} + {item.emoji && !item.image &&

    {item.emoji}

    } */ + } +

    Date Range: {item.dates}

    + + {/* Remove old display of combined firstLetters */} + { + /* {item.firstLetters && ( +

    First Letters: {item.firstLetters}

    + )} */ + } + + {/* New display for separated Hindi and English first letters */} + { + (item.parsedHindiLetters && item.parsedHindiLetters.length > 0) || + (item.parsedEnglishLetters && item.parsedEnglishLetters.length > 0) ? ( + <> +

    + First Letters: +

    + {item.parsedHindiLetters && item.parsedHindiLetters.length > 0 && ( +

    {item.parsedHindiLetters}

    + )} + {item.parsedEnglishLetters && item.parsedEnglishLetters.length > 0 && ( +

    {item.parsedEnglishLetters}

    + )} + + ) : null + } +
    +
    +
    +
    + + + + diff --git a/src/components/ThemeProvider.astro b/src/components/ThemeProvider.astro index 9948ba7a..23a2a89a 100644 --- a/src/components/ThemeProvider.astro +++ b/src/components/ThemeProvider.astro @@ -1,41 +1,46 @@ diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro index 4bca5014..183a0c24 100644 --- a/src/components/ThemeToggle.astro +++ b/src/components/ThemeToggle.astro @@ -9,6 +9,7 @@ import MoonIcon from "@/assets/icons/moon.svg"; width: 20px; } + + + +
    +
    + + + +
    +
    + + + +
    +
    +

    - {quote}

    + + + diff --git a/src/data/alphabets.json b/src/data/alphabets.json index 54a1a6e0..210e7359 100644 --- a/src/data/alphabets.json +++ b/src/data/alphabets.json @@ -213,6 +213,213 @@ } ] }, + + "greek": { + "icon": "🔤", + "description": "Explore the letters of the ancient and modern Greek alphabet.", + "data": [ + { + "letter": "A", + "text": "Alpha (Α α)", + "description": "First letter of the Greek alphabet. Sound: 'a' as in father.", + "code": 913, + "emoji": "Α" + }, + { + "letter": "B", + "text": "Beta (Β β)", + "description": "Second letter of the Greek alphabet. Sound: 'v' as in vase (Modern Greek).", + "code": 914, + "emoji": "Β" + }, + { + "letter": "G", + "text": "Gamma (Γ γ)", + "description": "Third letter of the Greek alphabet. Sound: 'g' as in go, or 'y' as in yes.", + "code": 915, + "emoji": "Γ" + }, + { + "letter": "D", + "text": "Delta (Δ δ)", + "description": "Fourth letter of the Greek alphabet. Sound: 'th' as in then (Modern Greek).", + "code": 916, + "emoji": "Δ" + }, + { + "letter": "E", + "text": "Epsilon (Ε ε)", + "description": "Fifth letter of the Greek alphabet. Sound: 'e' as in met.", + "code": 917, + "emoji": "Ε" + }, + { + "letter": "Z", + "text": "Zeta (Ζ ζ)", + "description": "Sixth letter of the Greek alphabet. Sound: 'z' as in zoo.", + "code": 918, + "emoji": "Ζ" + }, + { + "letter": "H", + "text": "Eta (Η η)", + "description": "Seventh letter of the Greek alphabet. Sound: 'i' as in machine.", + "code": 919, + "emoji": "Η" + }, + { + "letter": "Q", + "text": "Theta (Θ θ)", + "description": "Eighth letter of the Greek alphabet. Sound: 'th' as in thin.", + "code": 920, + "emoji": "Θ" + }, + { + "letter": "I", + "text": "Iota (Ι ι)", + "description": "Ninth letter of the Greek alphabet. Sound: 'i' as in machine.", + "code": 921, + "emoji": "Ι" + }, + { + "letter": "K", + "text": "Kappa (Κ κ)", + "description": "Tenth letter of the Greek alphabet. Sound: 'k' as in kite.", + "code": 922, + "emoji": "Κ" + }, + { + "letter": "L", + "text": "Lambda (Λ λ)", + "description": "Eleventh letter of the Greek alphabet. Sound: 'l' as in lamp.", + "code": 923, + "emoji": "Λ" + }, + { + "letter": "M", + "text": "Mu (Μ μ)", + "description": "Twelfth letter of the Greek alphabet. Sound: 'm' as in map.", + "code": 924, + "emoji": "Μ" + }, + { + "letter": "N", + "text": "Nu (Ν ν)", + "description": "Thirteenth letter of the Greek alphabet. Sound: 'n' as in net.", + "code": 925, + "emoji": "Ν" + }, + { + "letter": "X", + "text": "Xi (Ξ ξ)", + "description": "Fourteenth letter of the Greek alphabet. Sound: 'x' as in axe.", + "code": 926, + "emoji": "Ξ" + }, + { + "letter": "O", + "text": "Omicron (Ο ο)", + "description": "Fifteenth letter of the Greek alphabet. Sound: 'o' as in pot.", + "code": 927, + "emoji": "Ο" + }, + { + "letter": "P", + "text": "Pi (Π π)", + "description": "Sixteenth letter of the Greek alphabet. Sound: 'p' as in pen.", + "code": 928, + "emoji": "Π" + }, + { + "letter": "R", + "text": "Rho (Ρ ρ)", + "description": "Seventeenth letter of the Greek alphabet. Sound: 'r' as in run (often rolled).", + "code": 929, + "emoji": "Ρ" + }, + { + "letter": "S", + "text": "Sigma (Σ σ/ς)", + "description": "Eighteenth letter of the Greek alphabet. Sound: 's' as in sun.", + "code": 931, + "emoji": "Σ" + }, + { + "letter": "T", + "text": "Tau (Τ τ)", + "description": "Nineteenth letter of the Greek alphabet. Sound: 't' as in tap.", + "code": 932, + "emoji": "Τ" + }, + { + "letter": "U", + "text": "Upsilon (Υ υ)", + "description": "Twentieth letter of the Greek alphabet. Sound: 'i' as in machine (Modern Greek).", + "code": 933, + "emoji": "Υ" + }, + { + "letter": "F", + "text": "Phi (Φ φ)", + "description": "Twenty-first letter of the Greek alphabet. Sound: 'f' as in fan.", + "code": 934, + "emoji": "Φ" + }, + { + "letter": "C", + "text": "Chi (Χ χ)", + "description": "Twenty-second letter of the Greek alphabet. Sound: 'ch' as in Scottish loch, or 'h' as in huge.", + "code": 935, + "emoji": "Χ" + }, + { + "letter": "Y", + "text": "Psi (Ψ ψ)", + "description": "Twenty-third letter of the Greek alphabet. Sound: 'ps' as in psychology.", + "code": 936, + "emoji": "Ψ" + }, + { + "letter": "W", + "text": "Omega (Ω ω)", + "description": "Twenty-fourth letter of the Greek alphabet. Sound: 'o' as in go.", + "code": 937, + "emoji": "Ω" + } + ] + }, + "geek": { + "icon": "🔤", + "description": "Discover common 'leet speak' and other geeky character representations.", + "data": [ + { "letter": "A", "text": "4, @, /-\\", "description": "Common representations for A." }, + { "letter": "B", "text": "8, |3, ß", "description": "Common representations for B." }, + { "letter": "C", "text": "(, <, [, {", "description": "Common representations for C." }, + { "letter": "D", "text": "|), |>, Ð, ð", "description": "Common representations for D." }, + { "letter": "E", "text": "3, £, €", "description": "Common representations for E." }, + { "letter": "F", "text": "|=, ph, ƒ", "description": "Common representations for F." }, + { "letter": "G", "text": "6, 9, (_+", "description": "Common representations for G." }, + { "letter": "H", "text": "#, |-|, H", "description": "Common representations for H." }, + { "letter": "I", "text": "1, !, |, ][", "description": "Common representations for I." }, + { "letter": "J", "text": "_|, ;|, _/", "description": "Common representations for J." }, + { "letter": "K", "text": "|<, /<, |{", "description": "Common representations for K." }, + { "letter": "L", "text": "1, |_, £, |", "description": "Common representations for L." }, + { "letter": "M", "text": "|\\/|, /\\/\\, (V)", "description": "Common representations for M." }, + { "letter": "N", "text": "|\\|, /\\/, |V", "description": "Common representations for N." }, + { "letter": "O", "text": "0, (), <>", "description": "Common representations for O." }, + { "letter": "P", "text": "|*, |D, |>", "description": "Common representations for P." }, + { "letter": "Q", "text": "(_,)", "description": "Common representations for Q." }, + { "letter": "R", "text": "|2, |?, ®", "description": "Common representations for R." }, + { "letter": "S", "text": "5, $, §", "description": "Common representations for S." }, + { "letter": "T", "text": "7, +, ']['", "description": "Common representations for T." }, + { "letter": "U", "text": "|_|, (_), V", "description": "Common representations for U." }, + { "letter": "V", "text": "\\/, |/", "description": "Common representations for V." }, + { "letter": "W", "text": "\\/\\/, VV, \\^/", "description": "Common representations for W." }, + { "letter": "X", "text": "><, %", "description": "Common representations for X." }, + { "letter": "Y", "text": "j, `/, ¥", "description": "Common representations for Y." }, + { "letter": "Z", "text": "2, 7_, >_", "description": "Common representations for Z." } + ] + }, "nato": { "description": "NATO phonetic alphabet", "icon": "🎖️", @@ -1341,183 +1548,484 @@ } ] }, - "Hindi Numbers": { - "description": "Hindi numbers from 1 to 10", - "icon": "🔢", + "hindi": { + "icon": "🕉️", + "description": "Learn the Hindi alphabet, including Swar (vowels) and Vyanjan (consonants).", + "data": { + "vowels": [ + { "letter": "अ", "code": "0905", "meaning": "अदरक (Ginger)", "emoji": "🫚", "unicode": "U+1F95D" }, + { "letter": "आ", "code": "0906", "meaning": "आम (Mango)", "emoji": "🥭", "unicode": "U+1F96D" }, + { "letter": "इ", "code": "0907", "meaning": "इमली (Tamarind)", "emoji": "🥔", "unicode": "U+1F330" }, + { "letter": "ई", "code": "0908", "meaning": "ईख (Sugarcane)", "emoji": "🎋", "unicode": "U+1F36C" }, + { "letter": "उ", "code": "0909", "meaning": "उल्लू (Owl)", "emoji": "🦉", "unicode": "U+1F989" }, + { "letter": "ऊ", "code": "090A", "meaning": "ऊँट (Camel)", "emoji": "🐫", "unicode": "U+1F42B" }, + { "letter": "ऋ", "code": "090B", "meaning": "ऋषि (Sage)", "emoji": "🧘‍♂️", "unicode": "U+1F9D8" }, + { "letter": "ए", "code": "090F", "meaning": "एड़ी (Heel)", "emoji": "🦶", "unicode": "U+1F9B6" }, + { "letter": "ऐ", "code": "0910", "meaning": "ऐनक (Glasses)", "emoji": "👓", "unicode": "U+1F453" }, + { "letter": "ओ", "code": "0913", "meaning": "ओखली (Mortar)", "emoji": "🪨", "unicode": "U+1FAA8" }, + { "letter": "औ", "code": "0914", "meaning": "औरत (Woman)", "emoji": "👩", "unicode": "U+1F469" } + ], + "consonants": [ + { "letter": "क", "code": "0915", "meaning": "कबूतर (pigeon)", "emoji": "🐦", "unicode": "U+1F426" }, + { "letter": "ख", "code": "0916", "meaning": "खरगोश (rabbit)", "emoji": "🐇", "unicode": "U+1F407" }, + { "letter": "ग", "code": "0917", "meaning": "गमला (flower pot)", "emoji": "🪴", "unicode": "U+1F33C" }, + { "letter": "घ", "code": "0918", "meaning": "घोड़ा (horse)", "emoji": "🐎", "unicode": "U+1F40E" }, + { "letter": "च", "code": "091A", "meaning": "चम्मच (spoon)", "emoji": "🥄", "unicode": "U+1F944" }, + { "letter": "छ", "code": "091B", "meaning": "छतरी (umbrella)", "emoji": "☂️", "unicode": "U+2602" }, + { "letter": "ज", "code": "091C", "meaning": "जहाज़ (ship)", "emoji": "🚢", "unicode": "U+1F6A2" }, + { "letter": "झ", "code": "091D", "meaning": "झंडा (flag)", "emoji": "🏁", "unicode": "U+1F3C1" }, + { "letter": "ट", "code": "091F", "meaning": "टमाटर (tomato)", "emoji": "🍅", "unicode": "U+1F345" }, + { "letter": "ठ", "code": "0920", "meaning":"ठठेरा (brass smith)", "emoji": "🔨", "unicode": "U+1F44F" }, + { "letter": "ड", "code": "0921", "meaning": "डमरू (Shiva's drum)", "emoji": "🥁", "unicode": "U+1F941" }, + { "letter": "ढ", "code": "0922", "meaning": "ढोलक (drum)", "emoji": "🪘", "unicode": "U+1FA98" }, + { "letter": "ण", "code": "0923", "meaning": "ण (none)", "emoji": "♨️", "unicode": "U+2668" }, + { "letter": "त", "code": "0924", "meaning": "तरबूज (watermelon)", "emoji": "🍉", "unicode": "U+1F349" }, + { "letter": "थ", "code": "0925", "meaning": "थाली (plate)", "emoji": "🍽️", "unicode": "U+1F37D" }, + { "letter": "द", "code": "0926", "meaning": "दिवा (lamp)", "emoji": "🪔", "unicode": "U+1FA94" }, + { "letter": "ध", "code": "0927", "meaning": "धनुष (bow)", "emoji": "🏹", "unicode": "U+1F3F9" }, + { "letter": "न", "code": "0928", "meaning": "नाग (snake)", "emoji": "🐍", "unicode": "U+1F40D" }, + { "letter": "प", "code": "092A", "meaning": "पतंग (kite)", "emoji": "🪁", "unicode": "U+1FA81" }, + { "letter": "फ", "code": "092B", "meaning": "फल (fruit)", "emoji": "🍎", "unicode": "U+1F34E" }, + { "letter": "ब", "code": "092C", "meaning": "बकरी (goat)", "emoji": "🐐", "unicode": "U+1F410" }, + { "letter": "भ", "code": "092D", "meaning": "भैंस (buffalo)", "emoji": "🐃", "unicode": "U+1F403" }, + { "letter": "म", "code": "092E", "meaning": "मक्खी (fly)", "emoji": "🪰", "unicode": "U+1FAB0" }, + { "letter": "य", "code": "092F", "meaning": "यज्ञ (fire ritual)", "emoji": "🔥", "unicode": "U+1F525" }, + { "letter": "र", "code": "0930", "meaning": "रंग (color)", "emoji": "🎨", "unicode": "U+1F3A8" }, + { "letter": "ल", "code": "0932", "meaning": "लट्टू (top)", "emoji": "🪀", "unicode": "U+1FA80" }, + { "letter": "व", "code": "0935", "meaning": "वृक्ष (tree)", "emoji": "🌳", "unicode": "U+1F333" }, + { "letter": "श", "code": "0936", "meaning": "शंख (conch)", "emoji": "🐚", "unicode": "U+1F41A" }, + { "letter": "ष", "code": "0937", "meaning": "षट्कोण (hexagon)", "emoji": "⬡", "unicode": "U+1F981" }, + { "letter": "स", "code": "0938", "meaning": "सांप (snake)", "emoji": "🐍", "unicode": "U+1F40D" }, + { "letter": "ह", "code": "0939", "meaning": "हाथी (elephant)", "emoji": "🐘", "unicode": "U+1F418" }, + { + "letter": "क्ष", + "code": "0915+094D+0937", + "meaning": "क्षत्रिय (warrior)", + "emoji": "⚔️", + "unicode": "U+2694" + }, + { + "letter": "त्र", + "code": "0924+094D+0930", + "meaning": "त्रिशूल (trident)", + "emoji": "🔱", + "unicode": "U+1F531" + }, + { + "letter": "ज्ञ", + "code": "091C+094D+091E", + "meaning": "ज्ञान (knowledge)", + "emoji": "📚", + "unicode": "U+1F4DA" + } + ] + } + }, + "morse-alphabet": { + "icon": "⚫➖", + "description": "Learn the International Morse Code for the English alphabet.", + "data": [ + { "id": 1, "letter": "A", "emoji": "•−", "text": "Morse for A" }, + { "id": 2, "letter": "B", "emoji": "−•••", "text": "Morse for B" }, + { "id": 3, "letter": "C", "emoji": "−•−•", "text": "Morse for C" }, + { "id": 4, "letter": "D", "emoji": "−••", "text": "Morse for D" }, + { "id": 5, "letter": "E", "emoji": "•", "text": "Morse for E" }, + { "id": 6, "letter": "F", "emoji": "••−•", "text": "Morse for F" }, + { "id": 7, "letter": "G", "emoji": "−−•", "text": "Morse for G" }, + { "id": 8, "letter": "H", "emoji": "••••", "text": "Morse for H" }, + { "id": 9, "letter": "I", "emoji": "••", "text": "Morse for I" }, + { "id": 10, "letter": "J", "emoji": "•−−−", "text": "Morse for J" }, + { "id": 11, "letter": "K", "emoji": "−•−", "text": "Morse for K" }, + { "id": 12, "letter": "L", "emoji": "•−••", "text": "Morse for L" }, + { "id": 13, "letter": "M", "emoji": "−−", "text": "Morse for M" }, + { "id": 14, "letter": "N", "emoji": "−•", "text": "Morse for N" }, + { "id": 15, "letter": "O", "emoji": "−−−", "text": "Morse for O" }, + { "id": 16, "letter": "P", "emoji": "•−−•", "text": "Morse for P" }, + { "id": 17, "letter": "Q", "emoji": "−−•−", "text": "Morse for Q" }, + { "id": 18, "letter": "R", "emoji": "•−•", "text": "Morse for R" }, + { "id": 19, "letter": "S", "emoji": "•••", "text": "Morse for S" }, + { "id": 20, "letter": "T", "emoji": "−", "text": "Morse for T" }, + { "id": 21, "letter": "U", "emoji": "••−", "text": "Morse for U" }, + { "id": 22, "letter": "V", "emoji": "•••−", "text": "Morse for V" }, + { "id": 23, "letter": "W", "emoji": "•−−", "text": "Morse for W" }, + { "id": 24, "letter": "X", "emoji": "−••−", "text": "Morse for X" }, + { "id": 25, "letter": "Y", "emoji": "−•−−", "text": "Morse for Y" }, + { "id": 26, "letter": "Z", "emoji": "−−••", "text": "Morse for Z" } + ] + }, + "colors": { + "description": "Colors of the English alphabet with their hex codes.", + "icon": "🎨", "data": [ - { - "id": 0, - "letter": "०", - "code": 48, - "emoji": " ", - "text": "शून्य", - "description": "Zero" - }, { "id": 1, - "letter": "१", - "code": 49, - "emoji": "⠁", - "text": "एक", - "description": "One" + "letter": "A", + "code": 65, + "text": "Amber", + "description": "A honey-yellow color.", + "colorCode": "#FFBF00" }, { "id": 2, - "letter": "२", - "code": 50, - "emoji": "⠃", - "text": "दो", - "description": "Two" + "letter": "B", + "code": 66, + "text": "Blue", + "description": "The color of the sky and sea.", + "colorCode": "#0000FF" }, { "id": 3, - "letter": "३", - "code": 51, - "emoji": "⠇", - "text": "तीन", - "description": "Three" + "letter": "C", + "code": 67, + "text": "Cyan", + "description": "A greenish-blue color.", + "colorCode": "#00FFFF" }, { "id": 4, - "letter": "४", - "code": 52, - "emoji": "⠏", - "text": "चार", - "description": "Four" + "letter": "D", + "code": 68, + "text": "Denim", + "description": "A sturdy cotton twill fabric, typically blue.", + "colorCode": "#1560BD" }, { "id": 5, - "letter": "५", - "code": 53, - "emoji": "⠟", - "text": "पांच", - "description": "Five" + "letter": "E", + "code": 69, + "text": "Emerald", + "description": "A bright green color.", + "colorCode": "#50C878" }, { "id": 6, - "letter": "६", - "code": 54, - "emoji": "⠿", - "text": "छह", - "description": "Six" + "letter": "F", + "code": 70, + "text": "Fuchsia", + "description": "A vivid purplish-red color.", + "colorCode": "#FF00FF" }, { "id": 7, - "letter": "७", - "code": 55, - "emoji": "⡿ ", - "text": "सात", - "description": "Seven" + "letter": "G", + "code": 71, + "text": "Green", + "description": "The color of living grass and leaves.", + "colorCode": "#008000" }, { "id": 8, - "letter": "८", - "code": 56, - "emoji": "⣿", - "text": "आठ", - "description": "Eight" + "letter": "H", + "code": 72, + "text": "Heliotrope", + "description": "A pink-purple tint.", + "colorCode": "#DF73FF" }, { "id": 9, - "letter": "९", - "code": 57, - "emoji": "⣿⠁", - "text": "नौ", - "description": "Nine" + "letter": "I", + "code": 73, + "text": "Indigo", + "description": "A deep and rich color close to the color wheel blue.", + "colorCode": "#4B0082" }, { "id": 10, - "letter": "१०", - "code": 58, - "emoji": "⣿⠃", - "text": "दस", - "description": "Ten" + "letter": "J", + "code": 74, + "text": "Jade", + "description": "A light green color.", + "colorCode": "#00A86B" + }, + { + "id": 11, + "letter": "K", + "code": 75, + "text": "Khaki", + "description": "A light brownish-yellow color.", + "colorCode": "#C3B091" + }, + { + "id": 12, + "letter": "L", + "code": 76, + "text": "Lavender", + "description": "A light purple color.", + "colorCode": "#E6E6FA" + }, + { + "id": 13, + "letter": "M", + "code": 77, + "text": "Magenta", + "description": "A purplish-pink color.", + "colorCode": "#FF00FF" + }, + { + "id": 14, + "letter": "N", + "code": 78, + "text": "Navy", + "description": "A very dark blue color.", + "colorCode": "#000080" + }, + { + "id": 15, + "letter": "O", + "code": 79, + "text": "Orange", + "description": "A bright, warm color.", + "colorCode": "#FFA500" + }, + { + "id": 16, + "letter": "P", + "code": 80, + "text": "Purple", + "description": "A color intermediate between blue and red.", + "colorCode": "#800080" + }, + { + "id": 17, + "letter": "Q", + "code": 81, + "text": "Quartz", + "description": "A greyish-white color.", + "colorCode": "#51484F" + }, + { + "id": 18, + "letter": "R", + "code": 82, + "text": "Red", + "description": "The color of blood, or a ruby.", + "colorCode": "#FF0000" + }, + { + "id": 19, + "letter": "S", + "code": 83, + "text": "Silver", + "description": "A precious shiny grayish-white color.", + "colorCode": "#C0C0C0" + }, + { + "id": 20, + "letter": "T", + "code": 84, + "text": "Teal", + "description": "A medium to dark greenish-blue color.", + "colorCode": "#008080" + }, + { + "id": 21, + "letter": "U", + "code": 85, + "text": "Ultramarine", + "description": "A deep blue color pigment.", + "colorCode": "#120A8F" + }, + { + "id": 22, + "letter": "V", + "code": 86, + "text": "Violet", + "description": "A bluish-purple color.", + "colorCode": "#EE82EE" + }, + { + "id": 23, + "letter": "W", + "code": 87, + "text": "White", + "description": "The color of milk or fresh snow.", + "colorCode": "#FFFFFF" + }, + { + "id": 24, + "letter": "X", + "code": 88, + "text": "Xanadu", + "description": "A grayish-green color.", + "colorCode": "#738678" + }, + { + "id": 25, + "letter": "Y", + "code": 89, + "text": "Yellow", + "description": "The color of ripe lemons or egg yolks.", + "colorCode": "#FFFF00" + }, + { + "id": 26, + "letter": "Z", + "code": 90, + "text": "Zaffre", + "description": "A deep blue pigment.", + "colorCode": "#0014A8" } ] }, - "Roman Numerals": { - "description": "Roman numerals from 1 to 10", - "icon": "Ⅰ", + "birds": { + "description": "A list of birds from A to Z.", + "icon": "🐦", "data": [ { "id": 1, - "letter": "I", - "code": 49, - "emoji": "⠁", - "text": "1", - "description": "One" + "letter": "A", + "text": "Albatross", + "description": "A large seabird known for its long wingspan." }, { "id": 2, - "letter": "II", - "code": 50, - "emoji": "⠃", - "text": "2", - "description": "Two" + "letter": "B", + "text": "Bluebird", + "description": "A small thrush known for its bright blue plumage." }, { "id": 3, - "letter": "III", - "code": 51, - "emoji": "⠇", - "text": "3", - "description": "Three" + "letter": "C", + "text": "Crow", + "description": "A small songbird in the finch family, often kept as a pet." }, { "id": 4, - "letter": "IV", - "code": 52, - "emoji": "⠏", - "text": "4", - "description": "Four" + "letter": "D", + "text": "Dove", + "description": "A stocky bird with a short neck and legs, related to pigeons." }, { "id": 5, - "letter": "V", - "code": 53, - "emoji": "⠟", - "text": "5", - "description": "Five" + "letter": "E", + "text": "Eagle", + "description": "A large bird of prey with a heavy head and beak." }, { "id": 6, - "letter": "VI", - "code": 54, - "emoji": "⠿", - "text": "6", - "description": "Six" + "letter": "F", + "text": "Flamingo", + "description": "A large wading bird known for its pink feathers and long legs." }, { "id": 7, - "letter": "VII", - "code": 55, - "emoji": "⡿ ", - "text": "7", - "description": "Seven" + "letter": "G", + "text": "Goose", + "description": "A large waterbird with a long neck and webbed feet." }, { "id": 8, - "letter": "VIII", - "code": 56, - "emoji": "⣿", - "text": "8", - "description": "Eight" + "letter": "H", + "text": "Hummingbird", + "description": "A small bird capable of hovering in mid-air by rapidly flapping its wings." }, { "id": 9, - "letter": "IX", - "code": 57, - "emoji": "⣿⠁", - "text": "9", - "description": "Nine" + "letter": "I", + "text": "Ibis", + "description": "A long-legged wading bird with a long, down-curved bill." }, { "id": 10, + "letter": "J", + "text": "Jay", + "description": "A noisy, brightly colored bird of the crow family." + }, + { + "id": 11, + "letter": "K", + "text": "Kiwi", + "description": "A flightless bird native to New Zealand." + }, + { + "id": 12, + "letter": "L", + "text": "Lark", + "description": "A small ground-dwelling bird, known for its melodious song." + }, + { + "id": 13, + "letter": "M", + "text": "Macaw", + "description": "A large, long-tailed parrot with brightly colored plumage." + }, + { + "id": 14, + "letter": "N", + "text": "Nightingale", + "description": "A small thrush famous for its powerful and beautiful song." + }, + { + "id": 15, + "letter": "O", + "text": "Ostrich", + "description": "A large flightless bird native to Africa." + }, + { + "id": 16, + "letter": "P", + "text": "Penguin", + "description": "A flightless aquatic bird found in the Southern Hemisphere." + }, + { + "id": 17, + "letter": "Q", + "text": "Quail", + "description": "A small, short-tailed game bird." + }, + { + "id": 18, + "letter": "R", + "text": "Robin", + "description": "A small insectivorous songbird with a reddish-orange breast." + }, + { + "id": 19, + "letter": "S", + "text": "Sparrow", + "description": "A small bird with a stout bill, typically with brown and grey plumage." + }, + { + "id": 20, + "letter": "T", + "text": "Toucan", + "description": "A tropical bird known for its large, colorful bill." + }, + { + "id": 21, + "letter": "U", + "text": "Umbrella bird", + "description": "A tropical bird with a large crest on its head." + }, + { + "id": 22, + "letter": "V", + "text": "Vulture", + "description": "A large bird of prey that scavenges on carrion." + }, + { + "id": 23, + "letter": "W", + "text": "Woodpecker", + "description": "A bird that pecks at tree trunks to find insects." + }, + { + "id": 24, "letter": "X", - "code": 58, - "emoji": "⣿⠃", - "text": "10", - "description": "Ten" + "text": "Xenops", + "description": "A small rainforest bird in the ovenbird family." + }, + { + "id": 25, + "letter": "Y", + "text": "Yellow hammer", + "description": "A passerine bird in the bunting family." + }, + { + "id": 26, + "letter": "Z", + "text": "Zebra Finch", + "description": "A common finch of Central Australia." } ] } diff --git a/src/data/categories.json b/src/data/categories.json new file mode 100644 index 00000000..eb9da102 --- /dev/null +++ b/src/data/categories.json @@ -0,0 +1,12 @@ +{ + "categories": { + "dance": { + "id": "dance", + "title": "Explore Dances of India", + "description": "Discover the rich cultural heritage of Indian classical and folk dances", + "route": "dance", + "image": "https://static.vecteezy.com/system/resources/thumbnails/041/053/132/small/ai-generated-beautiful-ballerina-in-long-dress-dancing-ai-generative-free-photo.jpeg", + "color": "#3B82F6" + } + } +} diff --git a/src/data/glossary.json b/src/data/glossary.json new file mode 100644 index 00000000..c96fa284 --- /dev/null +++ b/src/data/glossary.json @@ -0,0 +1,401 @@ +{ + "flags": { + "title": "Country Flags", + "data": [ + { "id": "usa", "countryCode": "US", "text": "United States", "description": "Capital: Washington, D.C." }, + { "id": "canada", "countryCode": "CA", "text": "Canada", "description": "Capital: Ottawa" }, + { "id": "india", "countryCode": "IN", "text": "India", "description": "Capital: New Delhi" }, + { "id": "japan", "countryCode": "JP", "text": "Japan", "description": "Capital: Tokyo" }, + { "id": "brazil", "countryCode": "BR", "text": "Brazil", "description": "Capital: Brasília" }, + { "id": "australia", "countryCode": "AU", "text": "Australia", "description": "Capital: Canberra" }, + { "id": "germany", "countryCode": "DE", "text": "Germany", "description": "Capital: Berlin" }, + { + "id": "southafrica", + "countryCode": "ZA", + "text": "South Africa", + "description": "Capitals: Pretoria, Cape Town, Bloemfontein" + }, + { "id": "france", "countryCode": "FR", "text": "France", "description": "Capital: Paris" }, + { "id": "unitedkingdom", "countryCode": "GB", "text": "United Kingdom", "description": "Capital: London" }, + { "id": "china", "countryCode": "CN", "text": "China", "description": "Capital: Beijing" }, + { "id": "italy", "countryCode": "IT", "text": "Italy", "description": "Capital: Rome" } + ] + }, + "colours": { + "title": "Colours", + "data": [ + { "id": "black", "letter": "⬛", "fullName": "Black (काला)", "cssColor": "black" }, + { "id": "white", "letter": "⬜", "fullName": "White (सफ़ेद)", "cssColor": "white" }, + { "id": "red", "letter": "🟥", "fullName": "Red (लाल)", "cssColor": "red" }, + { "id": "green", "letter": "🟩", "fullName": "Green (हरा)", "cssColor": "green" }, + { "id": "yellow", "letter": "🟨", "fullName": "Yellow (पीला)", "cssColor": "yellow" }, + { "id": "blue", "letter": "🟦", "fullName": "Blue (नीला)", "cssColor": "blue" }, + { "id": "brown", "letter": "🟫", "fullName": "Brown (भूरा)", "cssColor": "brown" }, + { "id": "orange", "letter": "🟧", "fullName": "Orange (नारंगी)", "cssColor": "orange" }, + { "id": "pink", "letter": "💖", "fullName": "Pink (गुलाबी)", "cssColor": "pink" }, + { "id": "purple", "letter": "🟪", "fullName": "Purple (बैंगनी)", "cssColor": "purple" }, + { "id": "gray", "letter": "🩶", "fullName": "Gray (स्लेटी)", "cssColor": "gray" } + ] + }, + "days": { + "title": "Days of the Week", + "data": [ + { "id": "sunday", "letter": "Sun", "fullName": "Sunday (रविवार)" }, + { "id": "monday", "letter": "Mon", "fullName": "Monday (सोमवार)" }, + { "id": "tuesday", "letter": "Tue", "fullName": "Tuesday (मंगलवार)" }, + { "id": "wednesday", "letter": "Wed", "fullName": "Wednesday (बुधवार)" }, + { "id": "thursday", "letter": "Thu", "fullName": "Thursday (गुरुवार)" }, + { "id": "friday", "letter": "Fri", "fullName": "Friday (शुक्रवार)" }, + { "id": "saturday", "letter": "Sat", "fullName": "Saturday (शनिवार)" } + ] + }, + "months": { + "title": "Months", + "indian": [ + { + "type": "indian", + "name": "चैत्र ", + "dates": "March 21 - April 20", + "monthIndex": 2, + "displayName": "Chaitra", + "hinduOrdinalText": "First Hindu Month" + }, + { + "type": "indian", + "name": "वैशाख ", + "dates": "April 21 - May 21", + "monthIndex": 3, + "displayName": "Vaishakha", + "hinduOrdinalText": "Second Hindu Month" + }, + { + "type": "indian", + "name": "ज्येष्ठ ", + "dates": "May 22 - June 21", + "monthIndex": 4, + "displayName": "Jyeshtha", + "hinduOrdinalText": "Third Hindu Month" + }, + { + "type": "indian", + "name": "आषाढ़ ", + "dates": "June 22 - July 22", + "monthIndex": 5, + "displayName": "Ashadha", + "hinduOrdinalText": "Fourth Hindu Month" + }, + { + "type": "indian", + "name": "श्रावण ", + "dates": "July 23 - August 22", + "monthIndex": 6, + "displayName": "Shravana", + "hinduOrdinalText": "Fifth Hindu Month" + }, + { + "type": "indian", + "name": "भाद्रपद ", + "dates": "August 23 - September 22", + "monthIndex": 7, + "displayName": "Bhadrapada", + "hinduOrdinalText": "Sixth Hindu Month" + }, + { + "type": "indian", + "name": "आश्विन ", + "dates": "September 23 - October 22", + "monthIndex": 8, + "displayName": "Ashvina", + "hinduOrdinalText": "Seventh Hindu Month" + }, + { + "type": "indian", + "name": "कार्तिक ", + "dates": "October 23 - November 21", + "monthIndex": 9, + "displayName": "Kartika", + "hinduOrdinalText": "Eighth Hindu Month" + }, + { + "type": "indian", + "name": "मार्गशीर्ष ", + "dates": "November 22 - December 21", + "monthIndex": 10, + "displayName": "Margashirsha", + "hinduOrdinalText": "Ninth Hindu Month" + }, + { + "type": "indian", + "name": "पौष", + "dates": "December 22 - January 20", + "monthIndex": 11, + "displayName": "Pausha", + "hinduOrdinalText": "Tenth Hindu Month" + }, + { + "type": "indian", + "name": "माघ ", + "dates": "January 21 - February 19", + "monthIndex": 0, + "displayName": "Magha", + "hinduOrdinalText": "Eleventh Hindu Month" + }, + { + "type": "indian", + "name": "फाल्गुन ", + "dates": "February 20 - March 20", + "monthIndex": 1, + "displayName": "Phalguna", + "hinduOrdinalText": "Twelfth Hindu Month" + } + ], + "holidays": [ + { "day": 1, "month": 0, "year": 2025, "name": "New Year's Day" }, + { "day": 26, "month": 0, "year": 2025, "name": "Republic Day" }, + { "day": 18, "month": 3, "year": 2025, "name": "Good Friday" }, + { "day": 1, "month": 4, "year": 2025, "name": "May Day / Labour Day" }, + { "day": 15, "month": 7, "year": 2025, "name": "Independence Day" }, + { "day": 2, "month": 10, "year": 2025, "name": "Mahatma Gandhi Jayanti" }, + { "day": 14, "month": 11, "year": 2025, "name": "Children's Day" }, + { "day": 25, "month": 11, "year": 2025, "name": "Christmas Day" } + ] + }, + "shapes": { + "title": "Geometric Shapes", + "data": [ + { + "id": "circle", + "letter": "●", + "text": "Circle", + "description": "A perfectly round shape with no corners or edges. All points on the edge are equidistant from the center." + }, + { + "id": "square", + "letter": "■", + "text": "Square", + "description": "A quadrilateral with 4 equal sides and 4 right (90-degree) angles." + }, + { + "id": "triangle", + "letter": "▲", + "text": "Triangle", + "description": "A polygon with 3 sides and 3 angles (vertices)." + }, + { + "id": "rectangle", + "letter": "▭", + "text": "Rectangle", + "description": "A quadrilateral with 4 right angles. Opposite sides are equal in length and parallel." + }, + { "id": "pentagon", "letter": "⬠", "text": "Pentagon", "description": "A polygon with 5 sides and 5 angles." }, + { "id": "hexagon", "letter": "⬢", "text": "Hexagon", "description": "A polygon with 6 sides and 6 angles." }, + { + "id": "oval", + "letter": "⬬", + "text": "Oval", + "description": "An elongated circle, like an egg shape. A regular oval is an ellipse." + }, + { + "id": "star", + "letter": "★", + "text": "Star", + "description": "A pointed shape, typically with 5 or 6 points, formed by connecting vertices of a polygon." + }, + { + "id": "rhombus", + "letter": "◆", + "text": "Rhombus", + "description": "A quadrilateral with all 4 sides of equal length. Opposite angles are equal." + } + ] + }, + "waqt": { + "title": "Waqt (Times of Day)", + "data": [ + { + "id": "dawn", + "englishTerm": "Dawn", + "hindiTranslation": "भोर (Bhor), सुबह (Subah)", + "description": "The first light of day before sunrise; early morning twilight.", + "icon": "🌄" + }, + { + "id": "sunrise", + "englishTerm": "Sunrise", + "hindiTranslation": "सूर्योदय (Sooryoday), भोर (Bhor)", + "description": "The moment the sun appears above the horizon.", + "icon": "🌅" + }, + { + "id": "morning", + "englishTerm": "Morning", + "hindiTranslation": "सुबह (Subah), प्रातः (Praatah)", + "description": "The early part of the day, from dawn until around noon.", + "icon": "🌅" + }, + { + "id": "noon", + "englishTerm": "Noon", + "hindiTranslation": "दोपहर (Dopehar)", + "description": "Midday, exactly 12:00 PM, or broadly the middle of the day.", + "icon": "🕛" + }, + { + "id": "afternoon", + "englishTerm": "Afternoon", + "hindiTranslation": "दोपहर बाद (Dopehar Baad), अपराह्न (Apraahn)", + "description": "The time after noon until late afternoon/early evening.", + "icon": "☀️" + }, + { + "id": "evening", + "englishTerm": "Evening", + "hindiTranslation": "शाम (Shaam)", + "description": "The period from late afternoon until nightfall/dusk.", + "icon": "🌇" + }, + { + "id": "twilight", + "englishTerm": "Twilight", + "hindiTranslation": "सांझ (Saanjh), गोधूलि बेला (Godhuli Bela)", + "description": "Dim light period either just before sunrise or just after sunset.", + "icon": "🌥️" + }, + { + "id": "dusk", + "englishTerm": "Dusk", + "hindiTranslation": "गोधूलि (Godhuli), शाम (Shaam)", + "description": "The darker stage of twilight immediately after sunset.", + "icon": "🌆" + }, + { + "id": "sunset", + "englishTerm": "Sunset", + "hindiTranslation": "सूर्यास्त (Sooryaast), शाम (Shaam)", + "description": "The moment the sun disappears below the horizon.", + "icon": "🌇" + }, + { + "id": "night", + "englishTerm": "Night", + "hindiTranslation": "रात (Raat), रात्रि (Raatri)", + "description": "The period of darkness from sunset to sunrise.", + "icon": "🌙" + }, + { + "id": "midnight", + "englishTerm": "Midnight", + "hindiTranslation": "मध्यरात्रि (Madhyaraatri), आधी रात (Aadhi Raat)", + "description": "Exactly 12:00 AM, the middle of the night.", + "icon": "🌃" + }, + { + "id": "late-night", + "englishTerm": "Late Night", + "hindiTranslation": "रात गहराना (Raat Gahraana), देर रात (Der Raat)", + "description": "The deep part of the night, usually well after midnight.", + "icon": "🌌" + } + ] + }, + "seasons": { + "title": "Seasons", + "data": [ + { "id": "spring", "letter": "🌸", "fullName": "Spring (वसन्त)" }, + { "id": "summer", "letter": "☀️", "fullName": "Summer (ग्रीष्म)" }, + { "id": "monsoon", "letter": "🌧️", "fullName": "Monsoon (वर्षा)" }, + { "id": "autumn", "letter": "🍂", "fullName": "Autumn (शरद)" }, + { "id": "pre_winter", "letter": "🌬️", "fullName": "Pre-Winter (हेमन्त)" }, + { "id": "winter", "letter": "❄️", "fullName": "Winter (शिशिर/शीत)" } + ] + }, + "sunsign": { + "title": "Sun Signs", + "data": [ + { + "id": "aries", + "name": "Aries (मेष)", + "symbol": "♈︎", + "dates": "March 21 - April 19", + "firstLetters": "A (अ), L (ल), E (ए), I (इ)" + }, + { + "id": "taurus", + "name": "Taurus (वृषभ)", + "symbol": "♉︎", + "dates": "April 20 - May 20", + "firstLetters": "B (ब), V (व), U (उ), Va (वा), Vi (वी), Vo (वो)" + }, + { + "id": "gemini", + "name": "Gemini (मिथुन)", + "symbol": "♊︎", + "dates": "May 21 - June 20", + "firstLetters": "K (क), Chh (छ), Gh (घ), Ka (का), Ki (की), Ku (कु)" + }, + { + "id": "cancer", + "name": "Cancer (कर्क)", + "symbol": "♋︎", + "dates": "June 21 - July 22", + "firstLetters": "D (ड), H (ह), Da (डा), De (डे), Do (डो)" + }, + { + "id": "leo", + "name": "Leo (सिंह)", + "symbol": "♌︎", + "dates": "July 23 - August 22", + "firstLetters": "M (म), T (ट), Ma (मा), Me (मे), Mu (मु)" + }, + { + "id": "virgo", + "name": "Virgo (कन्या)", + "symbol": "♍︎", + "dates": "August 23 - September 22", + "firstLetters": "P (प), Th (ठ), N (ण), Pa (पा), Pi (पी), Pu (पु)" + }, + { + "id": "libra", + "name": "Libra (तुला)", + "symbol": "♎︎", + "dates": "September 23 - October 22", + "firstLetters": "R (र), T (त), Ra (रा), Ri (री), Ru (रु)" + }, + { + "id": "scorpio", + "name": "Scorpio (वृश्चिक)", + "symbol": "♏︎", + "dates": "October 23 - November 21", + "firstLetters": "N (न), Y (य), Na (ना), Ni (नी), Nu (नू), Ne (ने)" + }, + { + "id": "sagittarius", + "name": "Sagittarius (धनु)", + "symbol": "♐︎", + "dates": "November 22 - December 21", + "firstLetters": "Bh (भ), Dh (ध), Ph (फ), F (फ), Ye (ये), Yo (यो)" + }, + { + "id": "capricorn", + "name": "Capricorn (मकर)", + "symbol": "♑︎", + "dates": "December 22 - January 19", + "firstLetters": "Kh (ख), J (ज), Bho (भो), Ja (जा), Ji (जी)" + }, + { + "id": "aquarius", + "name": "Aquarius (कुंभ)", + "symbol": "♒︎", + "dates": "January 20 - February 18", + "firstLetters": "G (ग), S (स), Sh (श), Go (गो), Sa (सा), Si (सी), Su (सू)" + }, + { + "id": "pisces", + "name": "Pisces (मीन)", + "symbol": "♓︎", + "dates": "February 19 - March 20", + "firstLetters": "D (द), Ch (च), Z (ज़), Th (थ), De (दे), Do (दो), Cha (चा), Chi (ची)" + } + ] + } +} diff --git a/src/data/numbers.json b/src/data/numbers.json new file mode 100644 index 00000000..06825d82 --- /dev/null +++ b/src/data/numbers.json @@ -0,0 +1,103 @@ +{ + "sections": [ + { + "id": "english-numbers", + "title": "English Numbers", + "description": "Learn about numbers in English and their multiplication tables.", + "href": "/numbers/english", + "icon": "🔢" + }, + { + "id": "hindi-numbers", + "title": "Hindi Numbers", + "description": "Learn Devanagari numerals and their names.", + "href": "/numbers/hindi", + "icon": "🔢" + }, + { + "id": "roman-numerals", + "title": "Roman Numerals", + "description": "Learn to read and write Roman numerals.", + "href": "/numbers/roman", + "icon": "🏛️" + }, + { + "id": "morse-code-numbers", + "title": "Morse Code Numbers", + "description": "Learn to read and write Morse code for numbers.", + "href": "/numbers/morse", + "icon": "📡" + } + ], + "english": { + "title": "English Numbers", + "data": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] + }, + "hindi": { + "title": "Hindi Numbers", + "data": [ + { "id": 0, "letter": "०", "code": 48, "emoji": " ", "text": "शून्य", "description": "Zero" }, + { "id": 1, "letter": "१", "code": 49, "emoji": "⠁", "text": "एक", "description": "One" }, + { "id": 2, "letter": "२", "code": 50, "emoji": "⠃", "text": "दो", "description": "Two" }, + { "id": 3, "letter": "३", "code": 51, "emoji": "⠇", "text": "तीन", "description": "Three" }, + { "id": 4, "letter": "४", "code": 52, "emoji": "⠏", "text": "चार", "description": "Four" }, + { "id": 5, "letter": "५", "code": 53, "emoji": "⠟", "text": "पांच", "description": "Five" }, + { "id": 6, "letter": "६", "code": 54, "emoji": "⠿", "text": "छह", "description": "Six" }, + { "id": 7, "letter": "७", "code": 55, "emoji": "⡿ ", "text": "सात", "description": "Seven" }, + { "id": 8, "letter": "८", "code": 56, "emoji": "⣿", "text": "आठ", "description": "Eight" }, + { "id": 9, "letter": "९", "code": 57, "emoji": "⣿⠁", "text": "नौ", "description": "Nine" }, + { "id": 10, "letter": "१०", "code": 58, "emoji": "⣿⠃", "text": "दस", "description": "Ten" } + ] + }, + "morse": { + "title": "Morse Code Numbers", + "data": [ + { "id": 0, "letter": "0", "text": "0", "description": "Zero", "code": 0, "emoji": "−−−−−" }, + { "id": 1, "letter": "1", "text": "1", "description": "One", "code": 1, "emoji": "•−−−−" }, + { "id": 2, "letter": "2", "text": "2", "description": "Two", "code": 2, "emoji": "••−−−" }, + { "id": 3, "letter": "3", "text": "3", "description": "Three", "code": 3, "emoji": "•••−−" }, + { "id": 4, "letter": "4", "text": "4", "description": "Four", "code": 4, "emoji": "••••−" }, + { "id": 5, "letter": "5", "text": "5", "description": "Five", "code": 5, "emoji": "•••••" }, + { "id": 6, "letter": "6", "text": "6", "description": "Six", "code": 6, "emoji": "−••••" }, + { "id": 7, "letter": "7", "text": "7", "description": "Seven", "code": 7, "emoji": "−−•••" }, + { "id": 8, "letter": "8", "text": "8", "description": "Eight", "code": 8, "emoji": "−−−••" }, + { "id": 9, "letter": "9", "text": "9", "description": "Nine", "code": 9, "emoji": "−−−−•" } + ] + }, + "roman": { + "title": "Roman Numerals", + "data": [ + { "id": 0, "letter": "N", "text": "0", "description": "Null (Zero)", "code": 0, "emoji": "" }, + { "id": 1, "letter": "I", "text": "1", "description": "One", "code": 1, "emoji": "⠁" }, + { "id": 2, "letter": "II", "text": "2", "description": "Two", "code": 2, "emoji": "⠃" }, + { "id": 3, "letter": "III", "text": "3", "description": "Three", "code": 3, "emoji": "⠉" }, + { "id": 4, "letter": "IV", "text": "4", "description": "Four", "code": 4, "emoji": "⠙" }, + { "id": 5, "letter": "V", "text": "5", "description": "Five", "code": 5, "emoji": "⠑" }, + { "id": 6, "letter": "VI", "text": "6", "description": "Six", "code": 6, "emoji": "⠋" }, + { "id": 7, "letter": "VII", "text": "7", "description": "Seven", "code": 7, "emoji": "⠛" }, + { "id": 8, "letter": "VIII", "text": "8", "description": "Eight", "code": 8, "emoji": "⠓" }, + { "id": 9, "letter": "IX", "text": "9", "description": "Nine", "code": 9, "emoji": "⠊" }, + { "id": 10, "letter": "X", "text": "10", "description": "Ten", "code": 10, "emoji": "⠚" }, + { "id": 11, "letter": "XI", "text": "11", "description": "Eleven", "code": 11, "emoji": "⠁⠁" }, + { "id": 20, "letter": "XX", "text": "20", "description": "Twenty", "code": 20, "emoji": "⠃⠚" }, + { "id": 30, "letter": "XXX", "text": "30", "description": "Thirty", "code": 30, "emoji": "⠉⠚" }, + { "id": 40, "letter": "XL", "text": "40", "description": "Forty", "code": 40, "emoji": "" }, + { "id": 50, "letter": "L", "text": "50", "description": "Fifty", "code": 50, "emoji": "⠇" }, + { "id": 60, "letter": "LX", "text": "60", "description": "Sixty", "code": 60, "emoji": "" }, + { "id": 70, "letter": "LXX", "text": "70", "description": "Seventy", "code": 70, "emoji": "" }, + { "id": 80, "letter": "LXXX", "text": "80", "description": "Eighty", "code": 80, "emoji": "" }, + { "id": 90, "letter": "XC", "text": "90", "description": "Ninety", "code": 90, "emoji": "" }, + { "id": 100, "letter": "C", "text": "100", "description": "One Hundred", "code": 100, "emoji": "⠋" }, + { "id": 200, "letter": "CC", "text": "200", "description": "Two Hundred", "code": 200, "emoji": "" }, + { "id": 300, "letter": "CCC", "text": "300", "description": "Three Hundred", "code": 300, "emoji": "" }, + { "id": 400, "letter": "CD", "text": "400", "description": "Four Hundred", "code": 400, "emoji": "" }, + { "id": 500, "letter": "D", "text": "500", "description": "Five Hundred", "code": 500, "emoji": "⠙" }, + { "id": 600, "letter": "DC", "text": "600", "description": "Six Hundred", "code": 600, "emoji": "" }, + { "id": 700, "letter": "DCC", "text": "700", "description": "Seven Hundred", "code": 700, "emoji": "" }, + { "id": 800, "letter": "DCCC", "text": "800", "description": "Eight Hundred", "code": 800, "emoji": "" }, + { "id": 900, "letter": "CM", "text": "900", "description": "Nine Hundred", "code": 900, "emoji": "" }, + { "id": 1000, "letter": "M", "text": "1000", "description": "One Thousand", "code": 1000, "emoji": "⠍" }, + { "id": 1001, "letter": "MI", "text": "1001", "description": "One Thousand One", "code": 1001, "emoji": "" } + ] + } +} diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index d91d162e..9036ad98 100755 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -11,7 +11,7 @@ const { } = Astro.props; --- - + diff --git a/src/layouts/common/Menu.astro b/src/layouts/common/Menu.astro index b5ad414e..78c67ed5 100644 --- a/src/layouts/common/Menu.astro +++ b/src/layouts/common/Menu.astro @@ -11,30 +11,20 @@ import { NavbarLinks } from "@/utils/constants"; +
    + - - + flipAllButton.classList.add("active"); + setTimeout(() => { + flipAllButton.classList.remove("active"); + }, 300); + }); + diff --git a/src/pages/alphabets/[alphabet]/playground.astro b/src/pages/alphabets/[alphabet]/playground.astro index 93ed5002..a74f940a 100644 --- a/src/pages/alphabets/[alphabet]/playground.astro +++ b/src/pages/alphabets/[alphabet]/playground.astro @@ -4,7 +4,7 @@ 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 BackButton from "@/components/BackButton.astro"; import { type AlphabetsData } from "@/types/alphabet"; const alphabetData = rawAlphabetData as AlphabetsData; @@ -31,7 +31,10 @@ const currentCategory = alphabetData[alphabet as keyof AlphabetsData]; /> - + + +

    Press key to see the magic

    +
    A
    @@ -49,161 +52,130 @@ const currentCategory = alphabetData[alphabet as keyof AlphabetsData]; const spellDiv = document.getElementById("spelling"); const descriptionDiv = document.getElementById("description"); + // For Hindi, use vowels + consonants if present + let dataArray = []; + if (category === "hindi" && alphabetData.vowels && alphabetData.consonants) { + dataArray = [...alphabetData.vowels, ...alphabetData.consonants]; + } else { + dataArray = alphabetData; + } + let currentIndex = 0; + const drawLetter = (letter, color = "pink") => { letterDiv.innerHTML = letter; letterDiv.style.color = color; }; - const numberMappings = { - "Hindi Numbers": { - "0": "०", - "1": "१", - "2": "२", - "3": "३", - "4": "४", - "5": "५", - "6": "६", - "7": "७", - "8": "८", - "9": "९", - "10": "१०" - }, - "Roman Numerals": { - "1": "I", - "2": "II", - "3": "III", - "4": "IV", - "5": "V", - "6": "VI", - "7": "VII", - "8": "VIII", - "9": "IX", - "0": "X" - } - }; - - const findInfoByInput = (input) => { - if (numberMappings[category] && input >= "0" && input <= "9") { - const mappedChar = numberMappings[category][input]; - return alphabetData.find((item) => item.letter === mappedChar); - } - - return alphabetData.find((item) => item.letter.toUpperCase() === input.toUpperCase() || item.letter === input); - }; + const drawInfo = (info, color) => { + if (!info) return; + drawLetter(info.letter, color); - const drawInfo = (input, color) => { - const info = findInfoByInput(input); - - if (info) { - drawLetter(info.letter, color); - - spellDiv.style.fontSize = ""; - spellDiv.style.marginTop = ""; - spellDiv.style.display = "block"; - - spellDiv.innerHTML = info.text; - spellDiv.style.color = color; - - document.documentElement.style.setProperty("--steps", info.text.length * 2); - - // Animation handling for spelling - if (category !== "braille") { - spellDiv.classList.remove("animation"); - void spellDiv.offsetWidth; - spellDiv.classList.add("animation"); - spellDiv.style.borderRight = "3px solid"; - } else { - // Skip animation for braille - spellDiv.classList.remove("animation"); - spellDiv.style.borderRight = "none"; - } + spellDiv.style.fontSize = ""; + spellDiv.style.marginTop = ""; + spellDiv.style.display = "block"; + spellDiv.innerHTML = info.text || ""; + spellDiv.style.color = color; - if (info.description && info.description.trim() !== "") { - descriptionDiv.innerHTML = info.description; - descriptionDiv.style.color = color; - descriptionDiv.style.display = "block"; - document.documentElement.style.setProperty("--steps-desc", info.description.length * 2); + document.documentElement.style.setProperty("--steps", (info.text || info.meaning || "").length * 2); - // Animation handling for description - descriptionDiv.classList.remove("animation"); - void descriptionDiv.offsetWidth; - descriptionDiv.classList.add("animation"); - } else { - descriptionDiv.classList.remove("animation"); - descriptionDiv.innerHTML = ""; - descriptionDiv.style.display = "none"; - } + // Animation handling for spelling + spellDiv.classList.remove("animation"); + void spellDiv.offsetWidth; + spellDiv.classList.add("animation"); + spellDiv.style.borderRight = "3px solid"; + + if (info.description && info.description.trim() !== "") { + descriptionDiv.innerHTML = info.description; + descriptionDiv.style.color = color; + descriptionDiv.style.display = "block"; + document.documentElement.style.setProperty("--steps-desc", info.description.length * 2); + + // Animation handling for description + descriptionDiv.classList.remove("animation"); + void descriptionDiv.offsetWidth; + descriptionDiv.classList.add("animation"); + } else if (info.meaning) { + descriptionDiv.innerHTML = info.meaning; + descriptionDiv.style.color = color; + descriptionDiv.style.display = "block"; + descriptionDiv.classList.remove("animation"); + void descriptionDiv.offsetWidth; + descriptionDiv.classList.add("animation"); + } else { + descriptionDiv.classList.remove("animation"); + descriptionDiv.innerHTML = ""; + descriptionDiv.style.display = "none"; + } - if (info.image) { - const img = new Image(); - img.onload = function () { - emojiDiv.style.display = "none"; - imageContainer.style.display = "flex"; - imageContainer.innerHTML = ""; - imageContainer.appendChild(img); - - img.style.width = "auto"; - img.style.height = "auto"; - img.style.maxWidth = "100%"; - img.style.maxHeight = "100%"; - }; - - img.src = `/assets/images/alphabets/${category}/${info.image}`; - img.alt = info.text; - } else if (info.emoji) { - emojiDiv.innerHTML = info.emoji; - emojiDiv.style.display = "block"; - imageContainer.style.display = "none"; - } else { - // Move spelling to the content display area + if (info.image) { + const img = new Image(); + img.onload = function () { emojiDiv.style.display = "none"; imageContainer.style.display = "flex"; - imageContainer.innerHTML = `
    ${info.text}
    `; - - const contentSpelling = imageContainer.querySelector(".content__spelling"); - contentSpelling.style.color = color; - - // Hide original spelling div - spellDiv.style.display = "none"; - } + imageContainer.innerHTML = ""; + imageContainer.appendChild(img); + + img.style.width = "auto"; + img.style.height = "auto"; + img.style.maxWidth = "100%"; + img.style.maxHeight = "100%"; + }; + + img.src = `/assets/images/alphabets/${category}/${info.image}`; + img.alt = info.text || info.meaning || ""; + } else if (info.emoji) { + emojiDiv.innerHTML = info.emoji; + emojiDiv.style.display = "block"; + imageContainer.style.display = "none"; + } else { + emojiDiv.style.display = "none"; + imageContainer.style.display = "flex"; + imageContainer.innerHTML = `
    ${info.text || info.meaning || ""}
    `; + + const contentSpelling = imageContainer.querySelector(".content__spelling"); + contentSpelling.style.color = color; + + spellDiv.style.display = "none"; } }; window.addEventListener("DOMContentLoaded", () => { - spellDiv.classList.remove("animation"); - descriptionDiv.classList.remove("animation"); - - if (category === "Hindi Numbers" || category === "Roman Numerals") { - const firstNumber = category === "Hindi Numbers" ? "१" : "I"; - const info = alphabetData.find((item) => item.letter === firstNumber); - if (info) { - drawLetter(info.letter, "#FF6B6B"); - spellDiv.innerHTML = info.text; - descriptionDiv.innerHTML = info.description || ""; - if (info.emoji) { - emojiDiv.innerHTML = info.emoji; - } - } + // Show the first letter on load + if (dataArray.length > 0) { + drawInfo(dataArray[0], "#FF6B6B"); } }); const colorBox = ["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEEAD", "#D4A5A5", "#9B59B6", "#3498DB"]; const random = (arr) => arr[Math.floor(Math.random() * arr.length)]; - const isAlphabet = (keyCode) => keyCode >= 65 && keyCode <= 90; - const isNumber = (keyCode) => keyCode >= 48 && keyCode <= 57; document.addEventListener( "keydown", (e) => { - e.preventDefault(); - const color = random(colorBox); - const { key, keyCode } = e; - - if (isAlphabet(keyCode)) { - const keyCapital = key.toUpperCase(); - drawInfo(keyCapital, color); - } else if (isNumber(keyCode)) { - drawInfo(key, color); + // Only use arrow keys for Hindi (or similar) categories + if (category === "hindi") { + if (e.key === "ArrowRight") { + e.preventDefault(); + currentIndex = (currentIndex + 1) % dataArray.length; + drawInfo(dataArray[currentIndex], random(colorBox)); + } else if (e.key === "ArrowLeft") { + e.preventDefault(); + currentIndex = (currentIndex - 1 + dataArray.length) % dataArray.length; + drawInfo(dataArray[currentIndex], random(colorBox)); + } + } else { + // Default behavior for other alphabets (A-Z, 0-9) + const { key, keyCode } = e; + const isAlphabet = keyCode >= 65 && keyCode <= 90; + const isNumber = keyCode >= 48 && keyCode <= 57; + if (isAlphabet) { + const keyCapital = key.toUpperCase(); + const info = alphabetData.find((item) => item.letter.toUpperCase() === keyCapital || item.letter === key); + if (info) drawInfo(info, random(colorBox)); + } else if (isNumber) { + const info = alphabetData.find((item) => item.letter === key); + if (info) drawInfo(info, random(colorBox)); + } } }, false diff --git a/src/pages/alphabets/hindi/board.astro b/src/pages/alphabets/hindi/board.astro new file mode 100644 index 00000000..238411b9 --- /dev/null +++ b/src/pages/alphabets/hindi/board.astro @@ -0,0 +1,160 @@ +--- +import BaseLayout from "@/layouts/Base"; +import LetterCard from "@/components/LetterCard.astro"; +import BackButton from "@/components/BackButton.astro"; +import "@/assets/styles/varnmala/greek-alphabet.css"; + +const vowels = [ + { letter: "अ", code: "0905", meaning: "अदरक (Ginger)", emoji: "🫚", unicode: "U+1F95D" }, + { letter: "आ", code: "0906", meaning: "आम (Mango)", emoji: "🥭", unicode: "U+1F96D" }, + { letter: "इ", code: "0907", meaning: "इमली (Tamarind)", emoji: "🥔", unicode: "U+1F330" }, + { letter: "ई", code: "0908", meaning: "ईख (Sugarcane)", emoji: "🎋", unicode: "U+1F36C" }, + { letter: "उ", code: "0909", meaning: "उल्लू (Owl)", emoji: "🦉", unicode: "U+1F989" }, + { letter: "ऊ", code: "090A", meaning: "ऊँट (Camel)", emoji: "🐫", unicode: "U+1F42B" }, + { letter: "ऋ", code: "090B", meaning: "ऋषि (Sage)", emoji: "🧘‍♂️", unicode: "U+1F9D8" }, + { letter: "ए", code: "090F", meaning: "एड़ी (Heel)", emoji: "🦶", unicode: "U+1F9B6" }, + { letter: "ऐ", code: "0910", meaning: "ऐनक (Glasses)", emoji: "👓", unicode: "U+1F453" }, + { letter: "ओ", code: "0913", meaning: "ओखली (Mortar)", emoji: "🪨", unicode: "U+1FAA8" }, + { letter: "औ", code: "0914", meaning: "औरत (Woman)", emoji: "👩", unicode: "U+1F469" } +]; +const consonants = [ + { letter: "क", code: "0915", meaning: "कबूतर (pigeon)", emoji: "🐦", unicode: "U+1F426" }, + { letter: "ख", code: "0916", meaning: "खरगोश (rabbit)", emoji: "🐇", unicode: "U+1F407" }, + { letter: "ग", code: "0917", meaning: "गमला (flower pot)", emoji: "🪴", unicode: "U+1F33C" }, + { letter: "घ", code: "0918", meaning: "घोड़ा (horse)", emoji: "🐎", unicode: "U+1F40E" }, + { letter: "च", code: "091A", meaning: "चम्मच (spoon)", emoji: "🥄", unicode: "U+1F944" }, + { letter: "छ", code: "091B", meaning: "छतरी (umbrella)", emoji: "☂️", unicode: "U+2602" }, + { letter: "ज", code: "091C", meaning: "जहाज़ (ship)", emoji: "🚢", unicode: "U+1F6A2" }, + { letter: "झ", code: "091D", meaning: "झंडा (flag)", emoji: "🏁", unicode: "U+1F3C1" }, + { letter: "ट", code: "091F", meaning: "टमाटर (tomato)", emoji: "🍅", unicode: "U+1F345" }, + { letter: "ठ", code: "0920", meaning: "ठठेरा (brass smith)", emoji: "🔨", unicode: "U+1F44F" }, + { letter: "ड", code: "0921", meaning: "डमरू (Shiva's drum)", emoji: "🥁", unicode: "U+1F941" }, + { letter: "ढ", code: "0922", meaning: "ढोलक (drum)", emoji: "🪘", unicode: "U+1FA98" }, + { letter: "ण", code: "0923", meaning: "ण (none)", emoji: "♨️", unicode: "U+2668" }, + { letter: "त", code: "0924", meaning: "तरबूज (watermelon)", emoji: "🍉", unicode: "U+1F349" }, + { letter: "थ", code: "0925", meaning: "थाली (plate)", emoji: "🍽️", unicode: "U+1F37D" }, + { letter: "द", code: "0926", meaning: "दिवा (lamp)", emoji: "🪔", unicode: "U+1FA94" }, + { letter: "ध", code: "0927", meaning: "धनुष (bow)", emoji: "🏹", unicode: "U+1F3F9" }, + { letter: "न", code: "0928", meaning: "नाग (snake)", emoji: "🐍", unicode: "U+1F40D" }, + { letter: "प", code: "092A", meaning: "पतंग (kite)", emoji: "🪁", unicode: "U+1FA81" }, + { letter: "फ", code: "092B", meaning: "फल (fruit)", emoji: "🍎", unicode: "U+1F34E" }, + { letter: "ब", code: "092C", meaning: "बकरी (goat)", emoji: "🐐", unicode: "U+1F410" }, + { letter: "भ", code: "092D", meaning: "भैंस (buffalo)", emoji: "🐃", unicode: "U+1F403" }, + { letter: "म", code: "092E", meaning: "मक्खी (fly)", emoji: "🪰", unicode: "U+1FAB0" }, + { letter: "य", code: "092F", meaning: "यज्ञ (fire ritual)", emoji: "🔥", unicode: "U+1F525" }, + { letter: "र", code: "0930", meaning: "रंग (color)", emoji: "🎨", unicode: "U+1F3A8" }, + { letter: "ल", code: "0932", meaning: "लट्टू (top)", emoji: "🪀", unicode: "U+1FA80" }, + { letter: "व", code: "0935", meaning: "वृक्ष (tree)", emoji: "🌳", unicode: "U+1F333" }, + { letter: "श", code: "0936", meaning: "शंख (conch)", emoji: "🐚", unicode: "U+1F41A" }, + { letter: "ष", code: "0937", meaning: "षट्कोण (hexagon)", emoji: "⬡", unicode: "U+1F981" }, + { letter: "स", code: "0938", meaning: "सांप (snake)", emoji: "🐍", unicode: "U+1F40D" }, + { letter: "ह", code: "0939", meaning: "हाथी (elephant)", emoji: "🐘", unicode: "U+1F418" }, + { letter: "क्ष", code: "0915+094D+0937", meaning: "क्षत्रिय (warrior)", emoji: "⚔️", unicode: "U+2694" }, + { letter: "त्र", code: "0924+094D+0930", meaning: "त्रिशूल (trident)", emoji: "🔱", unicode: "U+1F531" }, + { letter: "ज्ञ", code: "091C+094D+091E", meaning: "ज्ञान (knowledge)", emoji: "📚", unicode: "U+1F4DA" } +]; + +const pageTitle = "Hindi Alphabets (हिन्दी वर्णमाला)"; +const category = "hindi"; +--- + + + +
    +
    +

    {pageTitle}

    + +
    + +
    + +
    + +
    +
    + { + vowels.map((entry, idx) => ( + + )) + } +
    +
    + +
    + +
    + +
    +
    + { + consonants.map((entry, idx) => ( + + )) + } +
    +
    +
    +     + + diff --git a/src/pages/alphabets/index.astro b/src/pages/alphabets/index.astro index 042fbf7e..78b5d0b5 100644 --- a/src/pages/alphabets/index.astro +++ b/src/pages/alphabets/index.astro @@ -1,4 +1,5 @@ --- +import Back from "@/components/Back.astro"; import "@/assets/styles/alphabets/index.css"; import rawAlphabetData from "@/data/alphabets.json"; import BaseLayout from "@/layouts/Base"; @@ -11,6 +12,7 @@ const getCategoryDescription = (category: string) => alphabetData[category as ke --- +

    Alphabet Categories

    @@ -49,31 +51,59 @@ const getCategoryDescription = (category: string) => alphabetData[category as ke background: var(--background); border: 2px solid var(--border); border-radius: 1rem; - padding: 1.25rem; + padding: clamp(1rem, 3vw, 1.25rem); height: 100%; display: flex; flex-direction: column; justify-content: space-between; - gap: 1rem; + gap: clamp(0.75rem, 2vw, 1rem); transition: all 0.2s ease; } .category__icon { - font-size: 2.5rem; - margin-bottom: 0.5rem; + font-size: clamp(2rem, 4vw, 2.5rem); + margin-bottom: clamp(0.25rem, 2vw, 0.5rem); + } + + .category__title { + font-size: clamp(1.25rem, 3vw, 1.5rem); + margin-bottom: 0.75rem; + } + + .category__description { + font-size: clamp(0.9rem, 2vw, 0.95rem); + line-height: 1.6; } .btn { - display: inline-flex; + display: flex; align-items: center; justify-content: center; - gap: 0.5rem; - padding: 0.75rem 1rem; + padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 2vw, 2rem); border-radius: 0.75rem; font-weight: 600; - font-size: 1.1rem; + font-size: clamp(0.9rem, 2vw, 1.1rem); transition: all 0.2s ease; text-decoration: none; + flex: 1; + min-width: 119px; + } + + .card__actions { + display: flex; + gap: 0.4rem; + flex-wrap: wrap; + } + + @media (max-width: 768px) { + .card__actions { + flex-direction: column; + gap: 0.75rem; + } + + .btn { + width: 100%; + } } .btn-playground { diff --git a/src/pages/canvas/index.astro b/src/pages/canvas/index.astro new file mode 100644 index 00000000..2bab54d7 --- /dev/null +++ b/src/pages/canvas/index.astro @@ -0,0 +1,35 @@ +--- +import Back from "@/components/Back.astro"; +import BaseLayout from "@/layouts/Base"; +import CanvasIcon from "@/assets/icons/canvas-icon.svg"; +import QuoteIcon from "@/assets/icons/quote-icon.svg"; +import "@/assets/styles/CardIndex.css"; + +const meta = { + title: "Canvas", + description: "Choose between the Canvas Image Generator and the Quote Designer." +}; +--- + + + +
    +

    Select a creative mode

    +
    + +
    + +
    +

    Text Designer

    +

    Create unique images with custom text and time.

    +     + +
    + +
    +

    Quote Designer

    +

    Design beautiful and shareable quotes with ease.

    +     +
    +
    +     diff --git a/src/pages/canvas/quote.astro b/src/pages/canvas/quote.astro new file mode 100644 index 00000000..f1c8a0c2 --- /dev/null +++ b/src/pages/canvas/quote.astro @@ -0,0 +1,722 @@ +--- +import Base from "@/layouts/Base"; +import BackButton from "@/components/BackButton.astro"; +import Help from "@/components/Help.astro"; +import DownloadIcon from "@/assets/icons/download.svg"; +import ResetIcon from "@/assets/icons/reset.svg"; +import "@/assets/styles/quote-designer.css"; + +const pageTitle = "Quote Designer"; +const pageDescription = "Design beautiful quotes with our advanced tool."; + +const pageMeta = { + title: pageTitle, + description: pageDescription +}; +--- + + + +
    + +     + +
    + +
    + + + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + diff --git a/src/pages/canvas.astro b/src/pages/canvas/text.astro similarity index 79% rename from src/pages/canvas.astro rename to src/pages/canvas/text.astro index d4c6c329..4a59d4db 100644 --- a/src/pages/canvas.astro +++ b/src/pages/canvas/text.astro @@ -1,7 +1,8 @@ --- -import BaseLayout from "@/layouts/Base"; -import CanvasGenerator from "@/components/canvasDialogue.astro"; +import BackButton from "@/components/BackButton.astro"; +import CanvasGenerator from "@/components/CanvasGenerator.astro"; import Help from "@/components/Help.astro"; +import BaseLayout from "@/layouts/Base"; const meta = { title: "Canvas Image Generator", @@ -10,6 +11,7 @@ const meta = { --- + !loc.isState); - + diff --git a/src/pages/cards/index.astro b/src/pages/cards/index.astro new file mode 100644 index 00000000..13939e39 --- /dev/null +++ b/src/pages/cards/index.astro @@ -0,0 +1,42 @@ +--- +import BackIcon from "@/components/Back.astro"; +import Stack from "@/assets/icons/stack.svg"; +import Queue from "@/assets/icons/queue.svg"; +import BaseLayout from "@/layouts/Base"; +import "@/assets/styles/CardIndex.css"; + +const meta = { + title: "Alphabet Explorer: Learn with Motion", + description: "Choose your display mode to explore the world of cards" +}; +--- + + + +
    +

    Explore Display Modes

    +
    + +
    + +
    +

    Stack Display

    +

    Craft Your Alphabet Tower

    +     + +
    + +
    +

    Queue Display

    +

    Customize Your Alphabet Flow

    +     + +
    + +
    +

    Slider Display

    +

    Customize Your Alphabet Flow

    +     +
    +
    +     diff --git a/src/pages/cards/queue.astro b/src/pages/cards/queue.astro new file mode 100644 index 00000000..b1d802fc --- /dev/null +++ b/src/pages/cards/queue.astro @@ -0,0 +1,364 @@ +--- +import { alphabetMapper } from "@/mappers/alphabet"; +import { IMAGE_DIR } from "@/utils/constants"; +import BaseLayout from "@/layouts/Base"; +import BackButton from "@/components/BackButton.astro"; +import Help from "@/components/Help.astro"; +import "@/assets/styles/CardQueue.css"; + +const pageTitle = "Queue | Interactive Alphabet"; +const pageDescription = + "Explore the interactive alphabet with images and descriptions for each letter in a queue format."; + +const pageMeta = { + title: pageTitle, + description: pageDescription +}; + +interface AlphabetItem { + key: string; + value: string; + desc: string; +} + +const items: Record = alphabetMapper.reduce( + (acc, { key, value }) => { + acc[key.toUpperCase()] = { + key: key.toUpperCase(), + value, + desc: `${value} representing the letter ${key.toUpperCase()}` + }; + return acc; + }, + {} as Record +); + +const entries = Object.entries(items); +const count = entries.length; + +function randomAngle(max: number, min: number): number { + return +(min + (max - min) * Math.random()).toFixed(2); +} + +let currentIndex = 0; +--- + + + +
    + +     + +
    +
    +
    +

    Interactive Alphabet

    +
    + +
    +
    + { + entries.map(([key, item], i) => { + const angle = randomAngle(15, -15); + return ( + + ); + }) + } +
    +
    + + +
    + +
    Use arrow keys or press any letter key to navigate
    +
    +     + diff --git a/src/pages/cards/slider.astro b/src/pages/cards/slider.astro new file mode 100644 index 00000000..59669c4f --- /dev/null +++ b/src/pages/cards/slider.astro @@ -0,0 +1,198 @@ +--- +import { alphabetMapper } from "@/mappers/alphabet"; +import { IMAGE_DIR } from "@/utils/constants"; +import Base from "@/layouts/Base"; +import BackButton from "@/components/BackButton.astro"; +import Help from "@/components/Help.astro"; +import "@/assets/styles/CardSlider.css"; + +const pageTitle = "Slider | Interactive Alphabet"; +const pageDescription = "Explore the alphabet through interactive images. Click or use arrow keys to slide."; + +const pageMeta = { + title: pageTitle, + description: pageDescription +}; + +interface AlphabetItem { + key: string; + value: string; + desc: string; +} + +const items: Record = alphabetMapper.reduce( + (acc, { key, value }) => { + acc[key.toUpperCase()] = { + key: key.toUpperCase(), + value, + desc: `${value} representing the letter ${key.toUpperCase()}` + }; + return acc; + }, + {} as Record +); + +const entries = Object.entries(items); +--- + + + +
    + +     + + +
    +
    +
    +
    +

    Interactive Alphabet

    +
    + +
    + + + + + +
    +
    +
    +
    + + + diff --git a/src/pages/cards/stack.astro b/src/pages/cards/stack.astro new file mode 100644 index 00000000..9fed1dcb --- /dev/null +++ b/src/pages/cards/stack.astro @@ -0,0 +1,304 @@ +--- +import { alphabetMapper } from "@/mappers/alphabet"; +import { IMAGE_DIR } from "@/utils/constants"; +import Base from "@/layouts/Base"; +import BackButton from "@/components/BackButton.astro"; +import Help from "@/components/Help.astro"; +import "@/assets/styles/CardStack.css"; + +const pageTitle = "Stack | Interactive Alphabet"; +const pageDescription = + "Explore the interactive alphabet with images and descriptions for each letter in a stack display format."; + +const pageMeta = { + title: pageTitle, + description: pageDescription +}; + +interface AlphabetItem { + key: string; + value: string; + desc: string; +} + +const items: Record = alphabetMapper.reduce( + (acc, { key, value }) => { + acc[key.toUpperCase()] = { + key: key.toUpperCase(), + value, + desc: `${value} representing the letter ${key.toUpperCase()}` + }; + return acc; + }, + {} as Record +); + +const entries = Object.entries(items); +const count = entries.length; + +function randomAngle(max: number, min: number): number { + return +(min + (max - min) * Math.random()).toFixed(2); +} + +let currentIndex = 0; +--- + + + +
    + +     + +
    +
    +
    +
    +

    Interactive Alphabet

    +
    + +
    +
    + { + entries.map(([key, item], i) => { + const angle = randomAngle(15, -15); + return ( + + ); + }) + } +
    +
    + + +
    + +
    Use arrow keys or swipe your screen to navigate
    +
    +
    + + + diff --git a/src/pages/clan.astro b/src/pages/clan.astro index 65d6004f..7e56aef1 100644 --- a/src/pages/clan.astro +++ b/src/pages/clan.astro @@ -3,6 +3,7 @@ import "@/assets/styles/societree.css"; import Card from "@/components/Card.astro"; import BaseLayout from "@/layouts/Base"; import clanJson from "public/assets/json/family.json"; +import Back from "@/components/Back.astro"; interface Surname { hi: string; @@ -30,7 +31,6 @@ interface Branch { surnames: Surname[]; } -// Type guard to validate Branch structure function isBranch(data: any): data is Branch { return ( data && @@ -52,20 +52,14 @@ function isBranch(data: any): data is Branch { ); } -// Filter and validate clan data const validClanData = Array.isArray(clanJson) ? clanJson.filter(isBranch) : []; --- +

    Discover Your Heritage and Family Connections

    -
    - -
    🔍 @@ -76,6 +70,9 @@ const validClanData = Array.isArray(clanJson) ? clanJson.filter(isBranch) : []; placeholder="Search by Gotra, Deity, or Caste..." />
    +
    @@ -108,85 +105,50 @@ const validClanData = Array.isArray(clanJson) ? clanJson.filter(isBranch) : []; return text.replace(regex, `$1`); } - // Wait for the DOM to be fully loaded - window.addEventListener("load", () => { - const searchInput = document.getElementById("searchInput") as HTMLInputElement; - - if (!searchInput) { - console.error("Search input not found"); - return; - } - - // Set up search functionality - searchInput.addEventListener("input", (event: Event) => { - const query = (event.target as HTMLInputElement).value.toLowerCase().trim(); - const cards = document.querySelectorAll(".card") as NodeListOf; + document.addEventListener("DOMContentLoaded", () => { + const searchInput = document.getElementById("searchInput") as HTMLInputElement | null; + const downloadBtn = document.getElementById("downloadPdf") as HTMLButtonElement | null; + const cards = document.querySelectorAll(".card"); - if (!cards.length) { - console.error("No cards found"); - return; - } + // Search functionality + searchInput?.addEventListener("input", (e: Event) => { + const target = e.target as HTMLInputElement | null; + const query = target?.value?.toLowerCase().trim() ?? ""; cards.forEach((card) => { - // Get all searchable text from the card - const gotraEl = card.querySelector(".info-group:nth-child(1) .value") as HTMLElement; - const deityEl = card.querySelector(".info-group:nth-child(2) .value") as HTMLElement; - const casteEl = card.querySelector(".info-group:nth-child(3) .value") as HTMLElement; + const gotra = (card.dataset.gotra ?? "").toLowerCase(); + const deity = (card.dataset.deity ?? "").toLowerCase(); + const caste = (card.dataset.caste ?? "").toLowerCase(); - // Get both Hindi and English versions - const gotraHi = gotraEl?.getAttribute("data-hi")?.toLowerCase() || ""; - const gotraEn = gotraEl?.getAttribute("data-en")?.toLowerCase() || ""; - const deityHi = deityEl?.getAttribute("data-hi")?.toLowerCase() || ""; - const deityEn = deityEl?.getAttribute("data-en")?.toLowerCase() || ""; - const casteHi = casteEl?.getAttribute("data-hi")?.toLowerCase() || ""; - const casteEn = casteEl?.getAttribute("data-en")?.toLowerCase() || ""; + const hasMatch = gotra.includes(query) || deity.includes(query) || caste.includes(query); - // Get all surnames (both Hindi and English) - const surnameElements = card.querySelectorAll(".surname-card p") as NodeListOf; - const surnames = Array.from(surnameElements) - .map((el) => { - const hi = el.getAttribute("data-hi")?.toLowerCase() || ""; - const en = el.getAttribute("data-en")?.toLowerCase() || ""; - return `${hi} ${en}`; - }) - .join(" "); - - // Check if any field contains the search query - const hasMatch = - gotraHi.includes(query) || - gotraEn.includes(query) || - deityHi.includes(query) || - deityEn.includes(query) || - casteHi.includes(query) || - casteEn.includes(query) || - surnames.includes(query); - - // Show/hide card based on match card.style.display = hasMatch ? "block" : "none"; - // If there's a match, highlight the matching text if (hasMatch) { - // Highlight in main fields - if (gotraEl) { - const gotraText = gotraEl.textContent || ""; - gotraEl.innerHTML = highlightText(gotraText, query); - } - if (deityEl) { - const deityText = deityEl.textContent || ""; - deityEl.innerHTML = highlightText(deityText, query); - } - if (casteEl) { - const casteText = casteEl.textContent || ""; - casteEl.innerHTML = highlightText(casteText, query); - } - - // Highlight in surnames - surnameElements.forEach((el) => { - const surnameText = el.textContent || ""; - el.innerHTML = highlightText(surnameText, query); + // Highlight matching text + const values = card.querySelectorAll(".value"); + values.forEach((el) => { + const text = el.textContent ?? ""; + el.innerHTML = highlightText(text, query); }); } }); }); + + // PDF download + downloadBtn?.addEventListener("click", () => { + // Expand all cards for printing + cards.forEach((card) => { + card.classList.add("expanded"); + const btn = card.querySelector(".surname-count"); + const body = card.querySelector(".card-body"); + btn?.setAttribute("aria-expanded", "true"); + body?.setAttribute("aria-hidden", "false"); + }); + + setTimeout(() => { + window.print(); + }, 500); + }); }); diff --git a/src/pages/crossword.astro b/src/pages/crossword.astro index 3858a087..629e0675 100644 --- a/src/pages/crossword.astro +++ b/src/pages/crossword.astro @@ -1,11 +1,13 @@ --- import "@/assets/styles/crossword.css"; +import Back from "@/components/Back.astro"; import Help from "@/components/Help.astro"; import WordSearchPuzzle from "@/components/Puzzle.astro"; import BaseLayout from "@/layouts/Base"; --- + + + -
    -
    - - - -
    -
    - - - - - -
    +
    +
    + + + + +
    + + + +
    + + + +
    +
    - - diff --git a/src/pages/glossary/colours.astro b/src/pages/glossary/colours.astro new file mode 100644 index 00000000..e7e7f80e --- /dev/null +++ b/src/pages/glossary/colours.astro @@ -0,0 +1,166 @@ +--- +import BaseLayout from "@/layouts/Base"; +import BackButton from "@/components/BackButton.astro"; +import "@/assets/styles/varnmala/greek-alphabet.css"; // General styles +import "@/assets/styles/glossary/colour.css"; // Import the specific styles for this page +import glossaryData from "@/data/glossary.json"; + +const pageTitle = glossaryData.colours.title; +const coloursData = glossaryData.colours.data; + +// Helper function to parse English and Hindi names (only English part will be used for front) +function parseNames(fullName: string): { english: string; hindi: string } { + const match = fullName.match(/^(.*?) \((.*?)\)$/); + if (match && match.length === 3) { + return { english: match[1].trim(), hindi: match[2].trim() }; + } + // Fallback if parsing fails, attempt to extract English part + const englishOnlyMatch = fullName.match(/^([a-zA-Z\s]+)/); + if (englishOnlyMatch) { + return { english: englishOnlyMatch[1].trim(), hindi: "" }; + } + return { english: fullName, hindi: "" }; +} +--- + + + +
    +
    +

    {pageTitle}

    + +
    + +
    + { + coloursData.map((entry) => { + const names = parseNames(entry.fullName); + return ( +
    +
    +
    +
    + {/* Modified flip button content */} + + Flip Card + + {" "} + {/* ↻ symbol */} +
    +
    +

    {names.english}

    +
    +
    +
    {/* Added triangle */} +
    +
    +
    + {/* Modified flip button content */} + + Flip Card + + {" "} + {/* ↻ symbol */} +
    +
    +
    +
    + ); + }) + } +
    +
    +     + + diff --git a/src/pages/glossary/days.astro b/src/pages/glossary/days.astro new file mode 100644 index 00000000..c5e9a642 --- /dev/null +++ b/src/pages/glossary/days.astro @@ -0,0 +1,45 @@ +--- +import "@/assets/styles/varnmala/greek-alphabet.css"; // Import the CSS styles +import BackButton from "@/components/BackButton.astro"; +import LetterCard from "@/components/LetterCard.astro"; +import glossaryData from "@/data/glossary.json"; +import BaseLayout from "@/layouts/Base"; + +const pageTitle = glossaryData.days.title; +const category = "days"; +const daysData = glossaryData.days.data; + +// Helper function to parse English and Hindi names +function parseDayNames(fullName: string): { english: string; hindi: string } { + const match = fullName.match(/^(.*?) \((.*?)\)$/); + if (match && match.length === 3) { + return { english: match[1].trim(), hindi: match[2].trim() }; + } + return { english: fullName, hindi: "" }; +} +--- + + + +
    +
    +

    {pageTitle}

    + +
    + +
    + { + daysData.map((entry) => { + const names = parseDayNames(entry.fullName); + const letterCardItem = { + id: entry.id, + letter: entry.letter, // e.g., "S" - for the main front display + text: names.hindi, // English name for the front + description: names.english + }; + return ; + }) + } +
    +
    +     diff --git a/src/pages/glossary/flags.astro b/src/pages/glossary/flags.astro new file mode 100644 index 00000000..578d2121 --- /dev/null +++ b/src/pages/glossary/flags.astro @@ -0,0 +1,160 @@ +--- +import BaseLayout from "@/layouts/Base"; +import BackButton from "@/components/BackButton.astro"; +import "@/assets/styles/varnmala/greek-alphabet.css"; +import "@/assets/styles/glossary/flags.css"; +import glossaryData from "@/data/glossary.json"; + +const pageTitle = glossaryData.flags.title; +const flagsData = glossaryData.flags.data; + +const getFlagEmoji = (countryCode: string = "IN") => { + const codePoints = countryCode + .toUpperCase() + .split("") + .map((char) => 127397 + char.charCodeAt(0)); + return String.fromCodePoint(...codePoints); +}; +--- + + + +
    +
    +

    {pageTitle}

    + +
    + +
    + { + flagsData.map((entry) => { + const flagEmoji = getFlagEmoji(entry.countryCode); + return ( +
    +
    +
    +
    + + Flip Card + + +
    +
    +

    {flagEmoji}

    +
    +
    +

    {entry.text}

    +

    {entry.description}

    +
    +
    +
    +
    +
    + + Flip Card + + +
    +

    {flagEmoji}

    +
    +
    +
    + ); + }) + } +
    +
    +     + + diff --git a/src/pages/glossary/index.astro b/src/pages/glossary/index.astro new file mode 100644 index 00000000..8b89d347 --- /dev/null +++ b/src/pages/glossary/index.astro @@ -0,0 +1,105 @@ +--- +import "@/assets/styles/alphabets/index.css"; +import "@/assets/styles/glossary/index.css"; +import Back from "@/components/Back.astro"; +import BaseLayout from "@/layouts/Base"; + +const pageTitle = "Glossary"; + +interface GlossarySection { + id: string; + title: string; + description: string; + href: string; + icon: string; +} + +const glossarySections: GlossarySection[] = [ + { + id: "months", + title: "Months ", + description: "Learn about the twelve months, their names, and order.", + href: "/glossary/months", + icon: "📅" + }, + { + id: "sunsigns", + title: "Sun Signs", + description: "Explore the twelve zodiac sun signs and their characteristics.", + href: "/glossary/sunsign", + icon: "☀️" + }, + { + id: "flags", + title: "Country Flags", + description: "Discover flags from various countries around the world.", + href: "/glossary/flags", + icon: "🚩" + }, + { + id: "shapes", + title: "Geometric Shapes", + description: "Learn to identify different common geometric shapes.", + href: "/glossary/shapes", + icon: "💠" + }, + { + id: "days", + title: "Days", + description: "Learn about the seven days of the week, their names, and order.", + href: "/glossary/days", + icon: "📅" + }, + { + id: "seasons", + title: "Seasons", + description: "Explore the four seasons and their characteristics.", + href: "/glossary/seasons", + icon: "🌸" + }, + { + id: "colours", + title: "Colours", + description: "Learn about different colours and their names.", + href: "/glossary/colours", + icon: "🎨" + }, + { + id: "waqt", + title: "Waqt (Times of Day)", + description: "Learn about different times of the day and their Hindi names.", + href: "/glossary/waqt", + icon: "🕰️" + } +]; +--- + + + +
    +
    +

    {pageTitle}

    +
    +
      + { + glossarySections.map((section, index) => ( +
    • +
      +
      + {section.icon &&
      {section.icon}
      } +

      {section.title}

      +

      {section.description}

      +
      +
      + + 📚 + Explore + +
      +
      +
      • + )) + } +
    +
    +     diff --git a/src/pages/glossary/months.astro b/src/pages/glossary/months.astro new file mode 100644 index 00000000..da6013bc --- /dev/null +++ b/src/pages/glossary/months.astro @@ -0,0 +1,93 @@ +--- +import "@/assets/styles/varnmala/months.css"; +import BackButton from "@/components/BackButton.astro"; +import MonthCard, { type MonthEntry } from "@/components/MonthCard.astro"; +import glossaryData from "@/data/glossary.json"; +import BaseLayout from "@/layouts/Base"; + +const pageTitle = glossaryData.months.title; +const today = new Date(); +const currentYear = today.getFullYear(); + +// Function to dynamically generate month names +const getMonths = (language: string) => { + const monthIndexes = [...Array(12).keys()]; + const options = { + month: "long", + timeZone: "UTC" + } as const; + const applyFormat = new Intl.DateTimeFormat(language, options).format; + return monthIndexes.map((m) => applyFormat(new Date(Date.UTC(2000, m)))); +}; + +const englishMonthNames = getMonths("en"); +const hindiMonthNames = getMonths("hi"); + +const englishMonthsData: MonthEntry[] = englishMonthNames.map((name, index) => ({ + type: "english", + name: name, + hindi: hindiMonthNames[index], + monthIndex: index +})); + +const indianMonthsData = glossaryData.months.indian as MonthEntry[]; +const nationalHolidaysData = glossaryData.months.holidays; +--- + + + +
    +
    + {} +

    {pageTitle}

    + +
    + +
    + + +
    + +
    +
    + { + englishMonthsData.map((month) => ( + + )) + } +
    +
    + +
    +
    + { + indianMonthsData.map((month) => ( + + )) + } +
    +
    +
    +     diff --git a/src/pages/glossary/seasons.astro b/src/pages/glossary/seasons.astro new file mode 100644 index 00000000..09e4838b --- /dev/null +++ b/src/pages/glossary/seasons.astro @@ -0,0 +1,59 @@ +--- +import "@/assets/styles/varnmala/greek-alphabet.css"; // Import the CSS styles +import BackButton from "@/components/BackButton.astro"; +import LetterCard from "@/components/LetterCard.astro"; +import glossaryData from "@/data/glossary.json"; +import BaseLayout from "@/layouts/Base"; + +// Define the type for our season data entries +export interface SeasonEntry { + id: string; + letter: string; // First letter of the season or a representative emoji + fullName: string; +} + +const pageTitle = glossaryData.seasons.title; +const category = "seasons"; +const seasonsData: SeasonEntry[] = glossaryData.seasons.data; + +// Helper function to parse English and Hindi names +function parseNames(fullName: string): { english: string; hindi: string } { + const match = fullName.match(/^(.*?) \((.*?)\)$/); + if (match && match.length === 3) { + return { english: match[1].trim(), hindi: match[2].trim() }; + } + // Fallback if no Hindi name is found in parentheses + const hindiMatch = fullName.match(/([\u0900-\u097F]+)/); // Basic Hindi Unicode range + if (hindiMatch) { + const hindi = hindiMatch[0].trim(); + const english = fullName.replace(hindi, "").trim(); + return { english, hindi }; + } + return { english: fullName, hindi: "" }; // Absolute fallback +} +--- + + + +
    +
    +

    {pageTitle}

    + +
    + +
    + { + seasonsData.map((entry) => { + const names = parseNames(entry.fullName); + const letterCardItem = { + id: entry.id, + letter: entry.letter, + text: names.english, // English name for the front + description: names.hindi // Hindi name for the back + }; + return ; + }) + } +
    +
    +     diff --git a/src/pages/glossary/shapes.astro b/src/pages/glossary/shapes.astro new file mode 100644 index 00000000..53aef0fb --- /dev/null +++ b/src/pages/glossary/shapes.astro @@ -0,0 +1,36 @@ +--- +import "@/assets/styles/varnmala/greek-alphabet.css"; // Imported the CSS styles +import BackButton from "@/components/BackButton.astro"; +import LetterCard from "@/components/LetterCard.astro"; +import glossaryData from "@/data/glossary.json"; +import BaseLayout from "@/layouts/Base"; + +const pageTitle = glossaryData.shapes.title; +const category = "shapes"; +const shapesData = glossaryData.shapes.data; +--- + + + +
    +
    +

    {pageTitle}

    + +
    + +
    + { + shapesData.map((entry) => { + // Prepare the item for LetterCard, ensuring text and description are non-optional + const letterCardItem = { + ...entry, // Spread all properties from the entry + text: entry.text || "", + description: entry.description || "", + emoji: entry.letter // Use letter as emoji + }; + return ; + }) + } +
    +
    +     diff --git a/src/pages/glossary/sunsign.astro b/src/pages/glossary/sunsign.astro new file mode 100644 index 00000000..2d124e54 --- /dev/null +++ b/src/pages/glossary/sunsign.astro @@ -0,0 +1,58 @@ +--- +import "@/assets/styles/varnmala/index.css"; +import "@/assets/styles/varnmala/sunsign.css"; +import BackButton from "@/components/BackButton.astro"; +import SunSignCard, { type SunSignEntry } from "@/components/SunSignCards.astro"; +import glossaryData from "@/data/glossary.json"; +import BaseLayout from "@/layouts/Base"; + +const pageTitle = glossaryData.sunsign.title; + +// Original data is now imported from the JSON file +const sunSignsDataRaw: Omit[] = glossaryData.sunsign.data; + +// Process data to include parsedHindiLetters and parsedEnglishLetters +const processedSunSignsData = sunSignsDataRaw.map((sign) => { + const letterPairs = sign.firstLetters + ? sign.firstLetters + .split(",") + .map((p) => p.trim()) + .filter((p) => p) + : []; + const englishLettersArray: string[] = []; + const hindiLettersArray: string[] = []; + + letterPairs.forEach((pair) => { + const match = pair.match(/^([A-Za-z\s]+)\s*\(([^)]+)\)$/); + if (match && match[1] && match[2]) { + englishLettersArray.push(match[1].trim()); + hindiLettersArray.push(match[2].trim()); + } else { + const singleLetterMatch = pair.match(/^([A-Za-z\s]+)$/); + if (singleLetterMatch && singleLetterMatch[1]) { + englishLettersArray.push(singleLetterMatch[1].trim()); + } + } + }); + + return { + ...sign, + parsedHindiLetters: hindiLettersArray.join(", "), + parsedEnglishLetters: englishLettersArray.join(", ") + }; +}); +--- + + + +
    +
    +

    {pageTitle}

    + +
    + +
    + {processedSunSignsData.map((sign) => )} +
    +
    +     diff --git a/src/pages/glossary/waqt.astro b/src/pages/glossary/waqt.astro new file mode 100644 index 00000000..1dfe60d2 --- /dev/null +++ b/src/pages/glossary/waqt.astro @@ -0,0 +1,148 @@ +--- +import BaseLayout from "@/layouts/Base"; +import BackButton from "@/components/BackButton.astro"; +import "@/assets/styles/varnmala/greek-alphabet.css"; // General styles, adjust if needed +import "@/assets/styles/glossary/waqt.css"; +import glossaryData from "@/data/glossary.json"; + +const pageTitle = glossaryData.waqt.title; +const waqtData = glossaryData.waqt.data; +--- + + + +
    +
    +

    {pageTitle}

    + +
    + +
    + {/* Added waqt-grid class */} + { + waqtData.map((entry) => ( +
    +
    +
    +
    + + Flip Card + + +
    +
    +
    {entry.icon}
    +

    {entry.englishTerm}

    +
    +
    +
    +
    +
    + + Flip Card + + +
    +
    +

    {entry.hindiTranslation}

    +

    {entry.description}

    +
    +
    +
    +
    +
    + )) + } +
    +
    +     + + diff --git a/src/pages/hidenseek/grid.astro b/src/pages/hidenseek/grid.astro index 8b5ae132..8a744b84 100644 --- a/src/pages/hidenseek/grid.astro +++ b/src/pages/hidenseek/grid.astro @@ -1,9 +1,9 @@ --- -import BackIcon from "@/assets/icons/back.svg"; +import "@/assets/styles/games.css"; +import BackButton from "@/components/BackButton.astro"; import Help from "@/components/Help.astro"; import HideSeekGrid from "@/components/HideSeekGrid.astro"; import Layout from "@/layouts/Base"; -import "@/assets/styles/games.css"; const meta = { title: "Grid Game", @@ -15,10 +15,7 @@ const meta = {
    - - - Back - +
    -
    + +
    +
    +

    Select a creative mode

    +
    { @@ -39,7 +44,8 @@ const games = { description={game.description} href={game.href} > - + {route === "grid" && } + {route === "kbd" && } )) } diff --git a/src/pages/hidenseek/kbd.astro b/src/pages/hidenseek/kbd.astro index d040dffd..9f97679d 100644 --- a/src/pages/hidenseek/kbd.astro +++ b/src/pages/hidenseek/kbd.astro @@ -1,5 +1,5 @@ --- -import BackIcon from "@/assets/icons/back.svg"; +import BackButton from "@/components/BackButton.astro"; //import "@/assets/styles/games.css"; import "@/assets/styles/games.css"; import Help from "@/components/Help.astro"; @@ -16,10 +16,7 @@ const meta = {
    - - - Back - +
    + h2 { + text-align: center; + padding: 1rem; + margin: 1rem 0; + background-color: rebeccapurple; + color: white; + border-radius: 2rem; + } + article { + margin: 2rem auto; + border: 2px solid rgb(156, 236, 235); + padding: 1rem; + } +

    Welcome to parixan.xyz

    - +

    Previous Name:

    -
    -
    -
    -
    -
    -
    diff --git a/src/pages/indic.astro b/src/pages/indic.astro new file mode 100644 index 00000000..7c245e79 --- /dev/null +++ b/src/pages/indic.astro @@ -0,0 +1,18 @@ +--- +import BaseLayout from "@/layouts/Base"; +import KannadaHindiGrid from "@/components/IndicLetters.astro"; +import Help from "@/components/Help.astro"; +import "@/assets/styles/indic.css"; + +const title = "Indic Alphabets"; +--- + + + + + + + diff --git a/src/pages/kannada.astro b/src/pages/kannada.astro deleted file mode 100644 index ff083322..00000000 --- a/src/pages/kannada.astro +++ /dev/null @@ -1,23 +0,0 @@ ---- -import BaseLayout from "@/layouts/Base"; -import KannadaHindiGrid from "@/components/kannadaHindi.astro"; -import Help from "@/components/Help.astro"; -import "@/assets/styles/kannada.css"; - -const title = "Kannada and Hindi Alphabets"; ---- - - - - - - - - diff --git a/src/pages/map/[...state].astro b/src/pages/map/[...state].astro index ed88bc47..1539e44f 100644 --- a/src/pages/map/[...state].astro +++ b/src/pages/map/[...state].astro @@ -2,6 +2,9 @@ import BaseLayout from "@/layouts/Base"; import stateData from "@/assets/json/state.json"; import "@/assets/styles/map/state.css"; +import BackButton from "@/components/BackButton.astro"; +import District from "@/components/map/District.astro"; + export const prerender = true; export function getStaticPaths() { return stateData.map((state) => ({ @@ -10,87 +13,185 @@ export function getStaticPaths() { })); } const { stateInfo } = Astro.props; -const { name, dance, festival, image, svg, wikiLink, description } = stateInfo; +const { name, dance, festival, image, wikiLink, description } = stateInfo; +// Optional properties with type checking +const famous_quote = stateInfo.famous_quote || "Coming soon"; +const famous_person = stateInfo.famous_person || "Coming soon"; +const famous_food = stateInfo.famous_food || "Coming soon"; +const famous_place = stateInfo.famous_place || "Coming soon"; +const famous_dress = stateInfo.famous_dress || "Coming soon"; +const famous_language = stateInfo.famous_language || "Coming soon"; +const famous_sport = stateInfo.famous_sport || "Coming soon"; +const surface_area = stateInfo.surface_area || 0; +const districts_count = stateInfo.districts_count || 0; +const largest_city = stateInfo.largest_city || "Not available"; +const capital = stateInfo.capital || "Not available"; +const population = stateInfo.population || 0; +const literacy_rate = stateInfo.literacy_rate || 0; +const languages = stateInfo.languages || []; +const major_rivers = stateInfo.major_rivers || []; --- -
    -
    - +
    +
    +
    -

    {name}

    -
    + + +
    +

    State Statistics

    +
    +
    +
    🏛️
    +
    +

    Capital

    +

    {capital}

    +
    +
    +
    +
    🌆
    +
    +

    Largest City

    +

    {largest_city}

    +
    +
    +
    +
    📏
    +
    +

    Area

    +

    {surface_area.toLocaleString()} km²

    +
    +
    +
    +
    👥
    +
    +

    Population

    +

    {population.toLocaleString()}

    +
    +
    +
    +
    🎓
    +
    +

    Literacy Rate

    +

    {literacy_rate}%

    +
    +
    +
    +
    📍
    +
    +

    Districts

    +

    {districts_count}

    +
    +
    +
    +
    +
    +

    Languages

    +
    + {languages.map((lang) => {lang})} +
    +
    +
    +

    Major Rivers

    +
    + {major_rivers.map((river) => {river})} +
    +
    +
    +
    - {`${dance} +
    + {`${dance} +
    - - - - - - - - - - - -
    - Quick Facts +
    +
    +

    Quote

    +

    {famous_quote}

    +
    +
    +

    Dance

    +

    {dance}

    +
    +
    +

    Famous Person

    +

    {famous_person}

    +
    +
    +

    Festival

    +

    {festival}

    +
    +
    +

    Food

    +

    {famous_food}

    +
    +
    +

    Place

    +

    {famous_place}

    +
    +
    +

    Dress

    +

    {famous_dress}

    +
    +
    +

    Language

    +

    {famous_language}

    +
    +
    +

    Sport

    +

    {famous_sport}

    +
    +
    +
    +

    Quick facts about {name}

    +
    +

    + {description.length > 150 ? description.slice(0, 150) + "..." : description} + { + description.length > 150 && ( + + ) + } +

    +
    { stateInfo.official_website && ( - <> -
    - - Visit the official website of {name} - - + + Official website + ) } -
    Dance Form{dance}
    Origin{name}, India
    Festival{festival}
    Description -

    {description}

    - - Read more about {dance} on Wikipedia - -
    + Wikipedia +
    +
    +
    - - diff --git a/src/pages/map/[category].astro b/src/pages/map/[category].astro new file mode 100644 index 00000000..df038464 --- /dev/null +++ b/src/pages/map/[category].astro @@ -0,0 +1,26 @@ +--- +import "@/assets/styles/map/map.css"; +import "@/assets/styles/map/popup.css"; +import IndiaMap from "@/components/IndiaMap.astro"; +import Popup from "@/components/Popup.astro"; +import BaseLayout from "@/layouts/Base"; +import categoryData from "@/data/categories.json"; + +export async function getStaticPaths() { + return Object.values(categoryData.categories).map((value) => ({ + params: { category: value.route } + })); +} + +const { category } = Astro.params; + +const data = Object.values(categoryData.categories).find((cat) => cat.route === category) || { + title: "Category Not Found", + description: "This category is not available" +}; +--- + + + + + diff --git a/src/pages/map/index.astro b/src/pages/map/index.astro index c24f9679..24a09f19 100644 --- a/src/pages/map/index.astro +++ b/src/pages/map/index.astro @@ -1,12 +1,43 @@ --- -import "@/assets/styles/map/popup.css"; -import IndiaMap from "@/components/IndiaMap.astro"; -import Popup from "@/components/Popup.astro"; -import BaseLayout from "@/layouts/Base"; import "@/assets/styles/map/map.css"; +import BaseLayout from "@/layouts/Base"; +import { Image } from "astro:assets"; +import categoryData from "@/data/categories.json"; +import Back from "@/components/Back.astro"; +type Category = { + id: string; + title: string; + description: string; + image: string; + color: string; +}; + +const categories: Category[] = Object.values(categoryData.categories); --- - - - + + +
    +
    +

    Explore India

    +
    +
    + { + categories.map((category: Category) => ( + +
    + {category.title} +
    +
    +
    + +

    {category.title}

    +
    +

    {category.description}

    +
    +     + )) + } +
    +
    diff --git a/src/pages/math.astro b/src/pages/math.astro index 78314f05..5908e9fb 100644 --- a/src/pages/math.astro +++ b/src/pages/math.astro @@ -1,12 +1,14 @@ --- -import BaseLayout from "@/layouts/Base"; -import MathPractice from "@/components/mathForm.astro"; import Help from "@/components/Help.astro"; +import MathPractice from "@/components/MathForm.astro"; +import BaseLayout from "@/layouts/Base"; +import Back from "@/components/Back.astro"; const pageDescription = "Practice basic math operations like addition, subtraction, and multiplication."; --- + @@ -13,8 +14,12 @@ const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; -
    +
    +

    {pageTitle}

    +
    + +
    { numbers.map((number) => ( @@ -38,17 +43,6 @@ const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; - + } + // Tell the browser to use our LetterPanel class for elements. + customElements.define("letter-panel", LetterPanel); + diff --git a/src/pages/sample.astro b/src/pages/sample.astro deleted file mode 100644 index 08a0f8a2..00000000 --- a/src/pages/sample.astro +++ /dev/null @@ -1,25 +0,0 @@ ---- -import "@/assets/styles/sample.css"; -import "@/assets/styles/scroll.css"; -import Help from "@/components/Help.astro"; -import NameForm from "@/components/NameForm.astro"; -import BaseLayout from "@/layouts/Base"; ---- - - - - - - - -

    - Previous Name: -

    -     -
    -
    -
    -
    -
    -
    -     diff --git a/src/pages/varnmala/alphabet.astro b/src/pages/varnmala/alphabet.astro deleted file mode 100644 index da6935e3..00000000 --- a/src/pages/varnmala/alphabet.astro +++ /dev/null @@ -1,55 +0,0 @@ ---- -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/characters"; ---- - - - - - - - - -
    -
    - -
    -
    - -
    -
    - -     diff --git a/src/pages/varnmala/barahkhadi/[consonant].astro b/src/pages/varnmala/barahkhadi/[consonant].astro index 1c74d1de..aaf6376a 100644 --- a/src/pages/varnmala/barahkhadi/[consonant].astro +++ b/src/pages/varnmala/barahkhadi/[consonant].astro @@ -1,6 +1,6 @@ --- import "@/assets/styles/varnmala/barahkhadi/consonant.css"; -import BackButton from "@/components/ui/backButton.astro"; +import BackButton from "@/components/BackButton.astro"; import BaseLayout from "@/layouts/Base"; import { hindiConsonants as consonants, matras } from "@/utils/characters"; @@ -16,9 +16,9 @@ const combinations = [consonant, ...Object.values(matras).map((matra) => consona --- +
    -
    {consonant}
    diff --git a/src/pages/varnmala/barahkhadi/index.astro b/src/pages/varnmala/barahkhadi/index.astro index 132ebcff..618d8993 100644 --- a/src/pages/varnmala/barahkhadi/index.astro +++ b/src/pages/varnmala/barahkhadi/index.astro @@ -1,6 +1,6 @@ --- import BaseLayout from "@/layouts/Base"; -import BackButton from "@/components/ui/backButton.astro"; +import BackButton from "@/components/BackButton.astro"; import "@/assets/styles/varnmala/barahkhadi/index.css"; import { hindiConsonants, matras } from "@/utils/characters"; @@ -19,12 +19,12 @@ const consonants = [ --- +
    - { consonants.map((row) => (
    diff --git a/src/pages/varnmala/english.astro b/src/pages/varnmala/english.astro index 53f7b83a..88c6e4b9 100644 --- a/src/pages/varnmala/english.astro +++ b/src/pages/varnmala/english.astro @@ -1,112 +1,47 @@ --- +import "@/assets/styles/varnmala/alphabet.css"; import BaseLayout from "@/layouts/Base"; -import "@/assets/styles/varnmala/english.css"; +import AlphabetComponent from "@/components/Alphabet.astro"; import Help from "@/components/Help.astro"; -import BackButton from "@/components/ui/backButton.astro"; +import BackButton from "@/components/BackButton.astro"; + +import { varnmala_english } from "@/utils/characters"; --- -
    -
    - - - -
    - -
    - - - -
    -
    -
    -
    -
    A
    -
    - +
    +
    + +
    + diff --git a/src/pages/varnmala/hindi.astro b/src/pages/varnmala/hindi.astro new file mode 100644 index 00000000..98130320 --- /dev/null +++ b/src/pages/varnmala/hindi.astro @@ -0,0 +1,69 @@ +--- +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/BackButton.astro"; + +// Imported consonants and the vowel list +import { varnmala_hindi, hindiVowelList } from "@/utils/characters"; + +// Vowels to be excluded +const vowelsToRemove = ["ऌ", "ऎ", "ऒ"]; + +// Prepare the vowel data for the AlphabetComponent, filtering out the unwanted vowels +const formattedVowelList = hindiVowelList + .filter((vowel) => !vowelsToRemove.includes(vowel.value)) + .map((vowel) => ({ + letter: vowel.value, // Using the 'value' property which holds the character + code: vowel.key // Using the 'key' property for the 'code' + })); +--- + + + + + + + +
    + {/* Section for Hindi Vowels */} +
    + {} + +
    + + {/* Section for Hindi Consonants */} +
    + {} + +
    +
    +     + + diff --git a/src/pages/varnmala/index.astro b/src/pages/varnmala/index.astro index 38134c87..592356a3 100644 --- a/src/pages/varnmala/index.astro +++ b/src/pages/varnmala/index.astro @@ -1,38 +1,48 @@ --- import "@/assets/styles/varnmala/index.css"; +import Back from "@/components/Back.astro"; import BaseLayout from "@/layouts/Base"; const sections = [ - { - title: "Alphabet", - description: "Learn the basic alphabet characters", - href: "alphabet" - }, { title: "English", - description: "Learn English alphabets", + description: "Learn the basic English alphabets", href: "english" }, + { + title: "Hindi", + description: "Learn the basic Hindi alphabets", + href: "hindi" + }, { title: "Reader", description: "Practice reading alphabets with audio support", href: "reader" }, + { + title: "Write", + description: "Practice writing alphabets ", + href: "write" + }, { title: "Barahkhadi", description: "Learn the basic barahkhadi characters", href: "barahkhadi" }, { - title: "Number", - description: "Learn the basic number characters", - href: "number" + title: "Speak and draw", + description: "Draw the basic Varnmala characters", + href: "speak" } ]; --- +
    +
    +

    Varnmala

    +
      { sections.map((section, index) => ( diff --git a/src/pages/varnmala/reader.astro b/src/pages/varnmala/reader.astro index 90dfdf6d..d4a5cfb4 100644 --- a/src/pages/varnmala/reader.astro +++ b/src/pages/varnmala/reader.astro @@ -2,7 +2,7 @@ import "@/assets/styles/varnmala/reader.css"; import Help from "@/components/Help.astro"; import BaseLayout from "@/layouts/Base"; -import BackButton from "@/components/ui/backButton.astro"; +import BackButton from "@/components/BackButton.astro"; --- @@ -10,14 +10,21 @@ import BackButton from "@/components/ui/backButton.astro";
      -
      - Mudra - Rutvi + +
      + +
      +
      Choose Voice
      +
      👦 Mudra
      +
      👧 Rutvi
      +
      @@ -26,117 +33,152 @@ import BackButton from "@/components/ui/backButton.astro";
      - - + audioPlayer.onerror = () => { + console.error(`Error loading audio source: ${source}`, audioPlayer.error); + }; + } + }; + + const isNonPrintingKey = (e: KeyboardEvent): boolean => { + const { altKey, ctrlKey, metaKey, shiftKey } = e; + return metaKey || ctrlKey || shiftKey || altKey; + }; + + document.addEventListener("keydown", (e: KeyboardEvent) => { + const { key, keyCode, which, code } = e; + if (!mainBlock) return; + + if (!isNonPrintingKey(e)) { + if (isAlphabet(which)) { + const emoji = getEmoji(key); + mainBlock.innerHTML = key + emoji; + if (muteButton) attachAudio(code); + } else if (isNumber(keyCode)) { + mainBlock.innerHTML = key; + if (muteButton) attachAudio(code, true); + } else { + const x = String.fromCodePoint(112080); + mainBlock.innerHTML = x; + } + } + }); + diff --git a/src/pages/varnmala/speak.astro b/src/pages/varnmala/speak.astro new file mode 100644 index 00000000..8dd57787 --- /dev/null +++ b/src/pages/varnmala/speak.astro @@ -0,0 +1,185 @@ +--- +import BaseLayout from "@/layouts/Base"; +import "@/assets/styles/varnmala/speak.css"; +import Help from "@/components/Help.astro"; +import BackButton from "@/components/BackButton.astro"; +--- + + + +
      +
      + + + +
      + +
      + + + + +
      +
      + +
      +
      + +       + +
      +
      +
      A
      +
      +
      +       + + diff --git a/src/pages/varnmala/write.astro b/src/pages/varnmala/write.astro new file mode 100644 index 00000000..6cbaefc4 --- /dev/null +++ b/src/pages/varnmala/write.astro @@ -0,0 +1,63 @@ +--- +import BackButton from "@/components/BackButton.astro"; +import LetterAnimation from "@/components/LetterAnimation.astro"; +import BaseLayout from "@/layouts/Base"; + +const url = new URL(Astro.request.url); +const letterParam = url.searchParams.get("letter")?.toUpperCase() ?? "A"; +--- + + + +
      +
      +

      ✏️ Alphabet Writing Animation ✏️

      + +
      +
      +       + + diff --git a/src/pages/vedic.astro b/src/pages/vedic.astro index 4b373ef0..db5ddc7b 100644 --- a/src/pages/vedic.astro +++ b/src/pages/vedic.astro @@ -1,4 +1,6 @@ --- +import { fullEnglish, fullHindi, styleOption, tithiNames } from "@/utils/constants.ts"; +import BackIcon from "@/components/Back.astro"; import BaseLayout from "@/layouts/Base"; import "@/assets/styles/vedic.css"; import vedicData from "@/assets/json/vedic.json"; @@ -7,59 +9,117 @@ const timeUnits = vedicData.time_units; --- +
      -
      - -
      -
      -
      - - -
      +
      + + + +
      -
      - { - ["From", "To"].map((label) => ( -
      - - -
      - )) - } -
      +
      +
      +
      +

      Tithi

      +
      + +
      +

      + Note: The tithi (lunar day) and paksha (lunar phase) displayed here are calculated based on + a numeric logic following the Gregorian calendar. Due to technical limitations, this may not always match the + exact tithi according to traditional Hindu calendar calculations which consider actual astronomical positions + of the sun and moon. For precise religious observances, please consult authoritative panchang sources. +

      +
      +
      +
      + +
      +

      Vedic Unit Converter

      +
      +
      + + +
      + +
      + + +
      + + - -
      - +
      + + +
      +
      +
      +
      +
      +
      +
      + +
      +
      + + + + +
      +
      +
      +
      + + + + +
      +
      +
      +
      + + + + +
      +
      +
      +
      + + + + +
      +
      - -
      -

      Vedic Time Units

      -
      + +

      Vedic Time Journey

      +
      { timeUnits.map((unit) => ( -
      -
      -

      {unit.name}

      - ≈ -
      -
      -
      - 🕛 - {unit.seconds.toLocaleString()} seconds +
      +
      +
      +

      {unit.name}

      -
      - ⏳ - {unit.minutes.toLocaleString()} minutes -
      -
      - 📅 - {unit.years.toLocaleString()} years +
      +
      {unit.firstEquivalent.toLocaleString()}
      +
      {unit.secondEquivalent.toLocaleString()}
      +
      {unit.thirdEquivalent.toLocaleString()}
      @@ -70,28 +130,149 @@ const timeUnits = vedicData.time_units;
      + diff --git a/src/types/alphabet.ts b/src/types/alphabet.ts index 82bfdf9c..a84d8af2 100644 --- a/src/types/alphabet.ts +++ b/src/types/alphabet.ts @@ -4,13 +4,14 @@ export type LetterEntity = { }; export interface AlphabetEntry { - id: number; + id: number | string; letter: string; - code: number; + code?: number; text: string; description: string; emoji?: string; image?: string; + englishSound?: string; } export interface AlphabetCategory { @@ -27,3 +28,18 @@ export interface AlphabetsData { animals: AlphabetCategory; countries: AlphabetCategory; } + +export interface GreekAlphabetEntry { + id: number; + letter: string; + text: string; + code: number; + englishSound: string; + description: string; +} +export interface GeekAlphabetEntry { + id: string; + letter: string; + name: string; + representations: string[]; +} diff --git a/src/types/state.ts b/src/types/state.ts new file mode 100644 index 00000000..1c2fe3ac --- /dev/null +++ b/src/types/state.ts @@ -0,0 +1,32 @@ +export interface StateData { + id: string; + state_id: number; + name: string; + dance: string; + festival: string; + description: string; + image: string; + svg: string; + wikiLink: string; + official_website?: string; + isActive: boolean; + alternate_dance?: string; + famous_quote?: string; + famous_person?: string; + famous_food?: string; + famous_place?: string; + famous_dress?: string; + famous_language?: string; + famous_sport?: string; + state_color?: string; + state_animal?: string; + state_flower?: string; + surface_area?: number; // in square kilometers + districts_count?: number; + largest_city?: string; + capital?: string; + population?: number; + literacy_rate?: number; + languages?: string[]; + major_rivers?: string[]; +} diff --git a/src/utils/characters.ts b/src/utils/characters.ts index a9e402aa..edf6afb8 100644 --- a/src/utils/characters.ts +++ b/src/utils/characters.ts @@ -37,9 +37,7 @@ export const hindiConsonants = [ // य-row 2351, 2352, 2354, 2357, // श-row - 2358, 2359, 2360, 2361, - - 2365 + 2358, 2359, 2360, 2361 ] .map((code) => String.fromCharCode(code)) .concat(additionalConsonants); diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 1723e8b9..79d9cbb1 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -4,8 +4,8 @@ import type { LinkProps } from "@/types/index.ts"; export const APP_NAME = "Template"; -let BASE_URL = "http://localhost:4321/draw"; -let IMAGE_DIR = "/images/background"; +let BASE_URL = "http://localhost:4321"; +let IMAGE_DIR = "/assets/images/background"; if (import.meta.env.PROD) { BASE_URL = "https://bnm1w7hj00.execute-api.us-east-1.amazonaws.com/master/canvas"; @@ -25,6 +25,21 @@ const colorBox = [ "#d4d4d4" ]; +const fontColor = [ + "#FFFFFF", + "#1A1A1A", + "#0D47A1", + "#F44336", + "#4CAF50", + "#FFEB3B", + "#9C27B0", + "#795548", + "#00BCD4", + "#FF9800", + "#607D8B", + "#E0E0E0" +]; + const numberBox: Record = { 0: "zero", 1: "one", @@ -38,7 +53,22 @@ const numberBox: Record = { 9: "nine" }; -const fontBox = ["boisuStroke", "BungeeSpice", "atkinson", "sportrop", "MudraMohta", "Roboto"]; +const fontBox = [ + "Times New Roman", + "Arial", + "Verdana", + "Trebuchet MS", + "Georgia", + "Courier New", + "Comic Sans MS", + "Impact", + "boisuStroke", + "BungeeSpice", + "atkinson", + "sportrop", + "MudraMohta", + "Roboto" +]; export const NavbarLinks: LinkProps[] = [ { @@ -106,7 +136,7 @@ export const NavbarLinks: LinkProps[] = [ { name: "Capital", title: "Capital", - path: "/capitals", + path: "/capital", isActive: true }, { @@ -128,9 +158,9 @@ export const NavbarLinks: LinkProps[] = [ isActive: true }, { - name: "Kannada", - title: "Kannada", - path: "/kannada", + name: "Indic", + title: "Indic", + path: "/indic", isActive: true }, { @@ -138,7 +168,31 @@ export const NavbarLinks: LinkProps[] = [ title: "Draw", path: "/draw", isActive: true + }, + { + name: "Cards", + title: "Cards", + path: "/cards", + isActive: true + }, + { + name: "Numbers", + title: "Numbers", + path: "/numbers", + isActive: true + }, + { + name: "Glossary", + title: "Glossary", + path: "/glossary", + isActive: true } + // { + // name: "Sunsigns", + // title: "Sunsigns", + // path: "/sunsigns", + // isActive: true + // }, ]; export const FooterLinks: LinkProps[] = [ @@ -167,6 +221,110 @@ export const colors = [ "linear-gradient(135deg, #34d399 0%, #10b981 100%)" // Emerald ]; +const fullEnglish = { + weekday: "long", + dayPeriod: "long", + year: "numeric", + month: "long", + day: "2-digit", + hour: "2-digit", + minute: "2-digit", + second: "numeric", + calendar: "iso8601", + timeZone: "Asia/Kolkata", + timeZoneName: "short", + formatMatcher: "basic", + hourCycle: "h12" +}; + +const fullHindi = { + weekday: "long", + dayPeriod: "long", + year: "numeric", + month: "long", + day: "2-digit", + hour: "2-digit", + minute: "2-digit", + second: "numeric", + calendar: "indian", + timeZone: "Asia/Kolkata", + numberingSystem: "deva", + formatMatcher: "basic", + hourCycle: "h12" +}; + +const styleOption = { + dateStyle: "full", + timeStyle: "long", + calendar: "iso8601", // 'indian', + /* numberingSystem: 'deva', */ + timeZone: "Asia/Kolkata", + hour12: false, + useGrouping: true, + minimumIntegerDigits: 1 +}; +const englishVowels = ["a", "ā", "i", "ī", "u", "ū", "಍", "಍", "಍", "಍", "e", "ai", "಍", "಍", "o", "au"]; +const englishConsonants = [ + "ka", + "kha", + "ga", + "gha", + "ṅa", + "ca", + "cha", + "ja", + "jha", + "ña", + "ṭa", + "ṭha", + "ḍa", + "ḍha", + "ṇa", + "ta", + "tha", + "da", + "dha", + "na", + "಍", + "pa", + "pha", + "ba", + "bha", + "ma", + "ya", + "ra", + "಍", + "la", + "಍", + "಍", + "va", + "śa", + "ṣa", + "sa", + "ha" +]; +const tithiNames = [ + "प्रतिपदा", + "द्वितीया", + "तृतीया", + "चतुर्थी", + "पंचमी", + "षष्ठी", + "सप्तमी", + "अष्टमी", + "नवमी", + "दशमी", + "एकादशी", + "द्वादशी", + "त्रयोदशी", + "चतुर्दशी", + "पूर्णिमा", + "अमावस्या" +]; + +export { tithiNames }; +export { englishVowels, englishConsonants }; +export { fullEnglish, fullHindi, styleOption }; export { BASE_URL, IMAGE_DIR }; -export { colorBox, fontBox, numberBox }; +export { colorBox, fontBox, fontColor, numberBox }; diff --git a/src/utils/languageLetters.ts b/src/utils/languageLetters.ts new file mode 100644 index 00000000..5d6a9403 --- /dev/null +++ b/src/utils/languageLetters.ts @@ -0,0 +1,250 @@ +import { englishVowels, englishConsonants } from "@/utils/constants.ts"; + +type LetterPair = { + hindi: string; + kannada: string; + marathi: string; + gujarati: string; + punjabi: string; + malayalam: string; + bengali: string; + assamese: string; + tamil: string; + telugu: string; + odia: string; + dogri: string; + mithilakshar: string; // Older name for Mathili , Maithili is also kmown as Tirhuti + english: string; + type: "vowel" | "consonant" | "separator"; +}; + +// Generate unicode characters for languages +type GenerateAlphabetParams = { + startCode: number; + totalLength: number; + extraKeys?: number[]; + insertEmptyAt?: number[]; // Indices to insert "಍" + insertUnicodeAt?: { index: number; unicode: number }[]; // Indices to insert a specific Unicode character +}; +/** + * @input generateAlphabets({ startCode: 2309, totalLength: 16 }) + * @output [ "अ", "आ", "इ", "ई", "उ", "ऊ", "ऋ", "ऌ", "ऍ", "ऎ", "ए", "ऐ", "ऑ", "ऒ", "ओ", "औ" ] + */ +const generateAlphabets = (params: GenerateAlphabetParams): string[] => { + const { + startCode, + totalLength, + extraKeys = [], + insertEmptyAt = [], + insertUnicodeAt = [] // Default to empty array if not provided + } = params; + // Step 1: Generate the base characters after filtering out extraKeys + const baseCharacters: string[] = []; + for (let i = 0; i < totalLength; i++) { + const codePoint = startCode + i; + //excluding extra characters + if (!extraKeys.includes(codePoint)) { + baseCharacters.push(String.fromCodePoint(codePoint)); + } + } + // Step 2: Determine the maximum required length for the final array + // Consider both insertEmptyAt and insertUnicodeAt for the maximum index + const maxIndexInEmptyInserts = insertEmptyAt.length > 0 ? Math.max(...insertEmptyAt) : -1; + const maxIndexInUnicodeInserts = + insertUnicodeAt.length > 0 ? Math.max(...insertUnicodeAt.map((item) => item.index)) : -1; + const finalLength = Math.max(baseCharacters.length, maxIndexInEmptyInserts + 1, maxIndexInUnicodeInserts + 1); + // Step 3: Create the final result array, initially filled with "಍" (or a default empty string if you prefer) + // Using "಍" as per your existing code's behavior for default fill. + const result: string[] = Array(finalLength).fill("಍"); + // Step 4: Populate the result array + let baseCharIndex = 0; + for (let i = 0; i < finalLength; i++) { + // Check for specific Unicode insertions first (highest priority) + const unicodeToInsert = insertUnicodeAt.find((item) => item.index === i); + if (unicodeToInsert) { + result[i] = String.fromCodePoint(unicodeToInsert.unicode); + continue; // Move to the next index after inserting a specific Unicode + } + // Check for empty string insertions (next priority) + if (insertEmptyAt.includes(i)) { + result[i] = "಍"; // Ensure it's "಍" + continue; // Move to the next index + } + // Otherwise, insert a base character if available + if (baseCharIndex < baseCharacters.length) { + result[i] = baseCharacters[baseCharIndex]; + baseCharIndex++; + } + // If no specific insertion and no base character left, it remains "಍" from initial fill + } + return result; +}; + +// Define allAlphabets structure +const allAlphabet = { + vowels: { + hindi: generateAlphabets({ startCode: 2309, totalLength: 16 }), + kannada: generateAlphabets({ startCode: 3205, totalLength: 16 }), + gujarati: generateAlphabets({ startCode: 2693, totalLength: 16 }), + punjabi: generateAlphabets({ startCode: 2565, totalLength: 16 }), + malayalam: generateAlphabets({ + startCode: 3333, + totalLength: 16, + insertUnicodeAt: [ + { index: 9, unicode: 3343 }, + { index: 10, unicode: 3342 } + ] + }), + bengali: generateAlphabets({ startCode: 2437, totalLength: 16 }), + assamese: generateAlphabets({ startCode: 2437, totalLength: 16 }), + tamil: generateAlphabets({ startCode: 2949, totalLength: 16 }), + telugu: generateAlphabets({ startCode: 3077, totalLength: 16 }), + odia: generateAlphabets({ startCode: 2821, totalLength: 16 }), + dogri: generateAlphabets({ startCode: 71680, totalLength: 16, insertEmptyAt: [6, 7, 8, 9, 12, 13] }), + mithilakshar: generateAlphabets({ startCode: 70785, totalLength: 16, extraKeys: [70792] }), + english: englishVowels // Directly use the array + }, + consonants: { + hindi: generateAlphabets({ startCode: 2325, totalLength: 38, insertEmptyAt: [37] }), + kannada: generateAlphabets({ startCode: 3221, totalLength: 37 }), + gujarati: generateAlphabets({ startCode: 2709, totalLength: 37 }), + punjabi: generateAlphabets({ startCode: 2581, totalLength: 37 }), + malayalam: generateAlphabets({ startCode: 3349, totalLength: 38 }), + bengali: generateAlphabets({ startCode: 2453, totalLength: 37 }), + assamese: generateAlphabets({ + startCode: 2453, + totalLength: 39, + extraKeys: [2480, 2485], + insertUnicodeAt: [ + { index: 32, unicode: 2544 }, + { index: 27, unicode: 2545 } + ] + }), + tamil: generateAlphabets({ startCode: 2965, totalLength: 37 }), + telugu: generateAlphabets({ startCode: 3093, totalLength: 37 }), + odia: generateAlphabets({ startCode: 2837, totalLength: 37 }), + dogri: generateAlphabets({ startCode: 71690, totalLength: 37, insertEmptyAt: [20, 28, 30, 31] }), + mithilakshar: generateAlphabets({ startCode: 70799, totalLength: 37, insertEmptyAt: [20, 28, 30, 31] }), + english: englishConsonants // Directly use the array + } +}; + +// Create letter pairs with all three scripts +const letterPairs: LetterPair[] = [ + ...allAlphabet.vowels.hindi.map((hindi, i) => ({ + hindi, + marathi: allAlphabet.vowels.hindi[i], // Marathi shares Hindi vowels + kannada: allAlphabet.vowels.kannada[i], + gujarati: allAlphabet.vowels.gujarati[i], + punjabi: allAlphabet.vowels.punjabi[i], + malayalam: allAlphabet.vowels.malayalam[i], + bengali: allAlphabet.vowels.bengali[i], + assamese: allAlphabet.vowels.assamese[i], + tamil: allAlphabet.vowels.tamil[i], + telugu: allAlphabet.vowels.telugu[i], + odia: allAlphabet.vowels.odia[i], + dogri: allAlphabet.vowels.dogri[i], + mithilakshar: allAlphabet.vowels.mithilakshar[i], + english: allAlphabet.vowels.english[i], + type: "vowel" as const + })), + ...allAlphabet.consonants.hindi.map((hindi, i) => ({ + hindi, + marathi: allAlphabet.consonants.hindi[i], // Marathi shares Hindi consonants + kannada: allAlphabet.consonants.kannada[i], + gujarati: allAlphabet.consonants.gujarati[i], + punjabi: allAlphabet.consonants.punjabi[i], + malayalam: allAlphabet.consonants.malayalam[i], + bengali: allAlphabet.consonants.bengali[i], + assamese: allAlphabet.consonants.assamese[i], + tamil: allAlphabet.consonants.tamil[i], + telugu: allAlphabet.consonants.telugu[i], + odia: allAlphabet.consonants.odia[i], + dogri: allAlphabet.consonants.dogri[i], + mithilakshar: allAlphabet.consonants.mithilakshar[i], + english: allAlphabet.consonants.english[i] || "", + type: "consonant" as const + })) +]; + +const languages = [ + { code: "PL", name: "Select Primary Language", disabled: true }, + { code: "as", name: "assamese" }, + { code: "bn", name: "bengali" }, + { code: "do", name: "dogri" }, + { code: "en", name: "english" }, + { code: "gu", name: "gujarati" }, + { code: "hi", name: "hindi" }, + { code: "kn", name: "kannada" }, + { code: "ml", name: "malayalam" }, + { code: "mr", name: "marathi" }, + { code: "mi", name: "mithilakshar" }, + { code: "or", name: "odia" }, + { code: "pa", name: "punjabi" }, + { code: "tm", name: "tamil" }, + { code: "te", name: "telugu" } +]; +const languages2 = [ + { code: "SL", name: "Select Secondary Language", disabled: true }, + { code: "as", name: "অসমীয়া" }, + { code: "bn", name: "বাংলা" }, + { code: "do", name: "𑠖𑠵𑠌𑠤𑠮" }, + { code: "en", name: "english" }, + { code: "gu", name: "ગુજરાતી" }, + { code: "hi", name: "हिंदी" }, + { code: "kn", name: "ಕನ್ನಡ" }, + { code: "ml", name: "മലയാളം" }, + { code: "mi", name: "𑒧𑒱𑒟𑒱𑒪𑒰𑒏𑓂𑒬𑒰𑒩" }, + { code: "mr", name: "मराठी" }, + { code: "or", name: "ଓଡ଼ିଆ" }, + { code: "pa", name: "ਪੰਜਾਬੀ" }, + { code: "tm", name: "தமிழ்" }, + { code: "te", name: "తెలుగు" } +]; +let selectedLanguage1 = "hi"; +let selectedLanguage2 = "kn"; + +const getLetterForLanguage = (pair: LetterPair, langCode: string): string => { + switch (langCode) { + case "hi": + return pair.hindi; + case "mr": + return pair.marathi; + case "kn": + return pair.kannada; + case "gu": + return pair.gujarati; + case "pa": + return pair.punjabi; + case "ml": + return pair.malayalam; + case "bn": + return pair.bengali; + case "as": + return pair.assamese; + case "tm": + return pair.tamil; + case "te": + return pair.telugu; + case "do": + return pair.dogri; + case "mi": + return pair.mithilakshar; + case "en": + return pair.english; + default: + return ""; + } +}; + +export { + englishVowels, + englishConsonants, + allAlphabet, + letterPairs, + languages, + languages2, + selectedLanguage1, + selectedLanguage2, + getLetterForLanguage +};