Skip to content

Commit

Permalink
Merge pull request #43 from recursivezero/feature/RZA-250029
Browse files Browse the repository at this point in the history
Feature/RZA-250029: Add Alphabets of different category and merged pages to varnmala
  • Loading branch information
xkeshav authored Mar 1, 2025
2 parents 28dbbd3 + 99b0af9 commit e2698ec
Show file tree
Hide file tree
Showing 43 changed files with 2,968 additions and 547 deletions.
2 changes: 2 additions & 0 deletions .vscode/dictionaries/project-words.txt
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,15 @@ jsonify
kmeans
linalg
lucide
matras
Organja
orgenja
Peina
prerender
Reddy
roboto
Rushi
sanyukat
shadcn
signup
sitemapindex
Expand Down
84 changes: 62 additions & 22 deletions docs/pages.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,42 +21,91 @@ This document describes the functionality and purpose of each page in the applic

### Interactive Learning Pages

#### Barahkhadi Page (/pages/barahkhadi/index.astro)
#### Alphabets Section

![Barahkhadi page](../src/assets/screenshots/barahkhadi.png)
##### Alphabets Explorer Page (/pages/alphabets/index.astro)

- Grid display of Hindi consonants organized in traditional groups
- Quick view popover showing barahkhadi variations for each consonant
- Interactive buttons to show/hide variations
- Clickable consonants leading to detailed pages
- Responsive layout with consonant groups
![Alphabets Explorer page](../src/assets/screenshots/alphabets/index.png)

- Main hub showing all available alphabet categories
- Cards with category icons, titles and descriptions
- Navigation to specialized playground and board pages for each category
- Animated card interactions and hover effects

##### Alphabet Playground (/pages/alphabets/[alphabet]/playground.astro)

![Alphabet playground page](../src/assets/screenshots/alphabets/playground.png)

- Interactive keyboard-driven learning experience
- Displays letters, emojis, and spelling animations based on key presses
- Dynamic color changes for visual engagement
- Category-specific content loaded based on URL parameter
- Includes help component explaining keyboard interaction

##### Alphabet Board (/pages/alphabets/[alphabet]/board.astro)

![Alphabet board page](../src/assets/screenshots/alphabets/board.png)

- Complete display of all letters in selected alphabet category
- Grid layout with letter cards showing detailed information
- Organized reference view for all category items
- Back navigation to main alphabets explorer

#### Varnmala Section

##### Varnmala Hub Page (/pages/varnmala/index.astro)

#### Varnmala Page (/pages/varnmala.astro)
![Varnmala hub page](../src/assets/screenshots/varnmala/index.png)

![Varnmala page](../src/assets/screenshots/varnmala.png)
- Main hub for all alphabet learning activities
- Navigation to specialized practice pages
- Overview of available learning modes

##### Alphabet Display (/pages/varnmala/alphabet.astro)

![Alphabet display page](../src/assets/screenshots/varnmala/alphabets.png)

- Displays Hindi and English alphabets
- Uses Alphabet component to render letter lists
- Includes help section explaining the concept

#### Typing Page (/pages/typing.astro)
##### Typing Practice (/pages/varnmala/typing.astro)

![Typing practice page](../src/assets/screenshots/typing.png)
![Typing practice page](../src/assets/screenshots/varnmala/typing.png)

- Interactive typing practice
- Shows letters, emojis, and spelling animations
- Responds to keyboard input (A-Z)
- Includes visual feedback

#### Reader Page (/pages/reader.astro)
##### Reader (/pages/varnmala/reader.astro)

![Reader page](../src/assets/screenshots/reader.png)
![Reader page](../src/assets/screenshots/varnmala/reader.png)

- Text-to-speech functionality
- Multiple speaker options (Mudra, Rutvi)
- Audio control for alphabet pronunciation
- Emoji display with letters

##### English Practice (/pages/varnmala/english.astro)

![English practice page](../src/assets/screenshots/varnmala/english.png)

- English alphabet practice
- Color-changing letter display
- Keyboard interaction
- Visual feedback

#### Barahkhadi Page (/pages/barahkhadi/index.astro)

![Barahkhadi page](../src/assets/screenshots/barahkhadi.png)

- Grid display of Hindi consonants organized in traditional groups
- Quick view popover showing barahkhadi variations for each consonant
- Interactive buttons to show/hide variations
- Clickable consonants leading to detailed pages
- Responsive layout with consonant groups

#### Panel Page (/pages/panel.astro)

![3D Panel page](../src/assets/screenshots/panel.png)
Expand All @@ -66,15 +115,6 @@ This document describes the functionality and purpose of each page in the applic
- Custom HTML element (letter-panel)
- Interactive letter display

#### English Page (/pages/hindi.astro)

![English practice page](../src/assets/screenshots/english.png)

- English alphabet practice
- Color-changing letter display
- Keyboard interaction
- Visual feedback

#### Record Page (/pages/record.astro)

![Audio recording page](../src/assets/screenshots/record.png)
Expand Down
Binary file added public/assets/images/alphabets/general/apple.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/screenshots/alphabets/board.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/screenshots/alphabets/index.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/screenshots/alphabets/playground.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
Binary file added src/assets/screenshots/varnmala/index.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
4 changes: 2 additions & 2 deletions src/assets/styles/about.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
display: block;
padding: 1rem;

> .moto {
& .moto {
color: #3a8657;
font-size: 3rem;
font-size: 2rem;
}
}
136 changes: 136 additions & 0 deletions src/assets/styles/alphabets/[alphabet]/board.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
.container__alphabets {
display: flex;
flex-direction: column;
width: 100%;
height: calc(100vh - 4rem);
overflow-y: scroll;
gap: 1rem;
align-items: flex-start;
justify-content: flex-start;
padding: 1rem;

& .head {
display: flex;
gap: 1rem;
align-items: center;
width: 100%;
justify-content: space-between;
padding: 1rem;
border-radius: 0.5rem;
font-weight: 600;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

& .back {
margin-bottom: 0 !important;
}
}

& .flip__all__button {
background-color: var(--background);
border: none;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-weight: 200;
margin: 1rem 0;
cursor: pointer;
transition: all 0.3s ease;
align-self: flex-end;
}

& .flip__all__button:hover {
transform: translateY(-2px);
}

& .flip__all__button.active {
transform: scale(0.95);
background-color: color-mix(in srgb, var(--primary) 70%, black 30%);
}

& .container__alphabet {
display: grid;
gap: 2rem;
container-type: inline-size;
container-name: layout;
font-family: "atkinson";
position: relative;
max-width: 2000px;
margin-inline: auto;
width: 100%;
}

& .container__alphabet::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%,
color-mix(in srgb, var(--primary) 5%, transparent),
transparent 70%);
pointer-events: none;
z-index: -1;
}

& .container__alphabet .list {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
padding: 1rem;
position: relative;
}

/* Animation for list items */
& .container__alphabet .list>* {
opacity: 0;
transform: translateY(20px);
animation: slideUp 0.6s ease forwards;
}

& .container__alphabet .list>*:nth-child(1n) {
animation-delay: 0.1s;
}

& .container__alphabet .list>*:nth-child(2n) {
animation-delay: 0.2s;
}

& .container__alphabet .list>*:nth-child(3n) {
animation-delay: 0.3s;
}

& .container__alphabet .list>*:nth-child(4n) {
animation-delay: 0.4s;
}

@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@container layout (width <=1200px) {
.container__alphabet {
padding: 1.5rem;
}

.container__alphabet .list {
gap: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}
}

@container layout (width <=768px) {
.container__alphabet {
padding: 1rem;
}

.container__alphabet .list {
gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
}
}
Loading

0 comments on commit e2698ec

Please sign in to comment.